:root {
--ink: #000;
--ink2: #0a0a0a;
--paper: #fff;
--acid: #d4ff00;
--hi: #d4ff00;
--on-acid: #000;
--red: #ff3b1f;
--line: #fff;
--line2: #2c2c2c;
--line3: #1a1a1a;
--mute: #9a9a9a;
--mute2: #646464;
--f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--f-disp: 'Anton', 'Archivo Black', Impact, 'Arial Narrow', sans-serif;
--f-head: 'Archivo Black', 'Anton', Impact, sans-serif;
--top-h: 56px;
--nav2-h: 0px;
--status-h: 26px;
--pad: 12px;












--t-label: 9.5px;
--t-meta: 11px;
--t-body: 12px;
--t-row: 14px;
--t-row-lead: 15px;
--t-head: 19px;
--t-num: 24px;
--t-num-l: 34px;
--t-hero: 44px;
--t-display: 128px;

--pat-06: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
--pat-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");
--pat-25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
--pat-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/svg%3E");
--pat-75: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='1'/%3E%3Crect y='1' width='1' height='1'/%3E%3C/svg%3E");
--pat-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/svg%3E");
--pat-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9' shape-rendering='crispEdges'%3E%3Crect y='4' width='8' height='1'/%3E%3Crect x='0' y='2' width='1' height='5'/%3E%3C/svg%3E");
--pat-hline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
--ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9' shape-rendering='crispEdges'%3E%3Crect y='4' width='8' height='1' fill='%23fff'/%3E%3Crect x='0' y='2' width='1' height='5' fill='%23fff'/%3E%3C/svg%3E");
color-scheme: dark;
}
html.inv {
--ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9' shape-rendering='crispEdges'%3E%3Crect y='4' width='8' height='1'/%3E%3Crect x='0' y='2' width='1' height='5'/%3E%3C/svg%3E");
--ink: #fff;
--ink2: #f3f3f3;
--paper: #000;
--hi: #000;
--line: #000;
--line2: #cfcfcf;
--line3: #e8e8e8;
--mute: #555;
--mute2: #8a8a8a;
color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); scrollbar-color: var(--paper) var(--ink); scrollbar-width: thin; }
body {
margin: 0; min-height: 100vh; background: var(--ink); color: var(--paper);
font: 400 var(--t-body)/1.45 var(--f-mono); letter-spacing: 0; overflow-x: hidden;
font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acid); color: #000; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: -2px; z-index: 2; position: relative; }
html.inv :focus-visible { outline-color: #000; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


#field {
position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block;
image-rendering: pixelated; pointer-events: none;
}
html.nogl #field { display: none; }
html.nogl body {
background-color: var(--ink);
background-image:
repeating-radial-gradient(circle at 30% 40%, transparent 0 3px, rgba(255,255,255,.07) 3px 4px),
repeating-linear-gradient(97deg, transparent 0 3px, rgba(255,255,255,.07) 3px 4px);
background-attachment: fixed;
}

html[data-field="hair"] #field { display: none; }
html[data-field="hair"] body, html.nogl[data-field="hair"] body {
background-color: var(--ink);
background-image:
linear-gradient(to right, color-mix(in srgb, var(--paper) 6%, var(--ink)) 1px, transparent 1px),
linear-gradient(color-mix(in srgb, var(--paper) 6%, var(--ink)) 1px, transparent 1px);
background-size: 120px 120px; background-attachment: fixed;
}


html[data-field="grid"], html[data-field="data"] { --fld-1: #0e0e0e; --fld-2: #1a1a1a; --fld-3: #2b2b2b; }
html.inv[data-field="grid"], html.inv[data-field="data"] { --fld-1: #f1f1f1; --fld-2: #e5e5e5; --fld-3: #d4d4d4; }
html:is([data-field="grid"], [data-field="data"]) #field { image-rendering: auto; }
.void > .fld-plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
html.nogl[data-field="grid"] body {
background-image:
linear-gradient(to right, var(--fld-2) 1px, transparent 1px), linear-gradient(var(--fld-2) 1px, transparent 1px),
linear-gradient(to right, var(--fld-1) 1px, transparent 1px), linear-gradient(var(--fld-1) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
html.nogl[data-field="data"] body {
background-image:
radial-gradient(circle at 11px 17px, var(--fld-3) 0 .9px, transparent 1.3px),
radial-gradient(circle at 37px 5px, var(--fld-2) 0 .6px, transparent 1px),
radial-gradient(circle at 53px 61px, var(--fld-3) 0 .7px, transparent 1.1px);
background-size: 71px 83px, 47px 41px, 113px 97px;
}

#app { position: relative; z-index: 1; max-width: none; margin: 0; padding-bottom: var(--status-h); }


@keyframes blink { 50% { opacity: 0; } }

kbd {
font: 700 var(--t-label)/1 var(--f-mono); color: var(--hi); letter-spacing: 0; white-space: nowrap;
}
kbd::before { content: '['; color: var(--mute); }
kbd::after { content: ']'; color: var(--mute); }
kbd.nb::before, kbd.nb::after { content: none; }
.btn kbd, .seg button kbd { margin-left: 6px; }


.sheet { position: relative; }
.grid { display: grid; border-left: 1px solid var(--line); }
.grid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; background: var(--ink); }
.grid > .void { background: transparent; }
.cell { padding: var(--pad); }
.void { position: relative; min-height: 24px; }

.sheet-head { grid-template-columns: auto minmax(0, 1fr) minmax(120px, .5fr); }
.sh-num {
font: 400 92px/.78 var(--f-disp); padding: 10px 14px 4px 10px; color: var(--paper); letter-spacing: -.02em;
display: flex; align-items: flex-end;
}
.sh-title { padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.sh-title h1 { margin: 0; font: 400 var(--t-hero)/.9 var(--f-disp); letter-spacing: .005em; text-transform: uppercase; }
.sh-title p { margin: 0; color: var(--mute); max-width: 62ch; font-size: var(--t-body); }

.lbl { font-size: var(--t-label); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.lbl.hi { color: var(--hi); }
.lbl .idx { color: var(--mute2); font-weight: 400; margin-right: 6px; }
.hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px var(--pad); border-bottom: 1px solid var(--line); min-height: 30px; }
.hd .lbl { color: var(--paper); }
.mute { color: var(--mute); }
.hi { color: var(--hi); }
.red { color: var(--red); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.giant { font: 400 clamp(120px, 15vw, 248px)/.8 var(--f-disp); letter-spacing: -.02em; color: var(--hi); font-variant-numeric: tabular-nums; }
.xl { font: 400 72px/.85 var(--f-disp); letter-spacing: -.01em; }
.l { font: 400 var(--t-hero)/.9 var(--f-disp); letter-spacing: 0; }
.m { font: 400 var(--t-num)/.95 var(--f-disp); }
.s { font: 400 var(--t-head)/1 var(--f-disp); }
.unit { font: 700 var(--t-meta)/1 var(--f-mono); letter-spacing: .08em; color: var(--mute); margin-left: 4px; vertical-align: top; }


.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px;
background: var(--ink); color: var(--paper); border: 1px solid var(--line); font-size: var(--t-meta); font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:hover kbd, .btn:hover kbd::before, .btn:hover kbd::after { color: var(--ink); }
.btn.acid, .btn.on { background: var(--acid); color: #000; border-color: var(--acid); }
.btn.acid kbd, .btn.on kbd, .btn.acid kbd::before, .btn.acid kbd::after, .btn.on kbd::before, .btn.on kbd::after { color: #000; }
.btn.ghost { border-color: var(--line2); }
.btn.sm { height: 22px; padding: 0 7px; font-size: var(--t-label); }
.btn[disabled] { opacity: .4; pointer-events: none; }

.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button {
height: 26px; min-width: 30px; padding: 0 9px; border: 0; border-right: 1px solid var(--line); background: var(--ink);
font-size: var(--t-meta); font-weight: 700; letter-spacing: .04em;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--paper); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--acid); color: #000; }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; }
.seg.tight button { min-width: 0; padding: 0 2px; }

.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.row.sb { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 8px; }

.field { display: grid; grid-template-columns: 76px minmax(0, 1fr) 62px; align-items: center; gap: 8px; min-height: 28px; }
.field > .lbl { line-height: 1.2; overflow-wrap: break-word; }
.field input[type=number], .numin {
width: 100%; height: 24px; background: var(--ink); color: var(--paper); border: 1px solid var(--line2);
padding: 0 6px; font-size: var(--t-body); text-align: right; -moz-appearance: textfield; appearance: textfield;
}
.field input[type=number]:focus, .numin:focus { border-color: var(--acid); }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: ew-resize; position: relative; z-index: 1; display: block; }
input[type=range]::-webkit-slider-runnable-track {
height: 9px; background: var(--ruler) 0 0 / 8px 9px repeat-x;
}
input[type=range]::-moz-range-track { height: 1px; background: var(--paper); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 18px; background: var(--paper); border: 0; margin-top: -5px; }
input[type=range]::-moz-range-thumb { width: 9px; height: 18px; background: var(--paper); border: 0; border-radius: 0; }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb { background: var(--acid); }
input[type=range]:hover::-moz-range-thumb { background: var(--acid); }
input[type=range]:focus-visible { outline: 1px dashed var(--acid); outline-offset: 0; }
.rng { position: relative; }
.rng .fill { position: absolute; left: 0; top: 10px; height: 3px; background: var(--acid); pointer-events: none; z-index: 0; }

.tog { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; font-size: var(--t-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tog input { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; border: 1px solid var(--paper); margin: 0; display: grid; place-items: center; background: var(--ink); }
.tog input:checked { background: var(--acid); border-color: var(--acid); }
.tog input:checked::after { content: ''; width: 7px; height: 7px; background: #000; }
.tog:hover input { border-color: var(--acid); }

select.sel {
appearance: none; -webkit-appearance: none; height: 26px; background: var(--ink); border: 1px solid var(--line);
padding: 0 24px 0 8px; font-size: var(--t-meta); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23999'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center;
}
.search {
display: flex; align-items: center; gap: 8px; height: 30px; border: 1px solid var(--line); padding: 0 8px; background: var(--ink);
}
.search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; font-size: var(--t-body); text-transform: uppercase; letter-spacing: .04em; }
.search input::placeholder { color: var(--mute2); }
.search:focus-within { border-color: var(--acid); outline: 1px solid var(--acid); outline-offset: -2px; }
.search input:focus-visible { outline: none; }
.search .pfx { color: var(--hi); font-weight: 800; }


.pat { background-color: var(--paper); }
.pat.p06 { -webkit-mask: var(--pat-06) 0 0 / 4px 4px; mask: var(--pat-06) 0 0 / 4px 4px; }
.pat.p12 { -webkit-mask: var(--pat-12) 0 0 / 4px 4px; mask: var(--pat-12) 0 0 / 4px 4px; }
.pat.p25 { -webkit-mask: var(--pat-25) 0 0 / 2px 2px; mask: var(--pat-25) 0 0 / 2px 2px; }
.pat.p50 { -webkit-mask: var(--pat-50) 0 0 / 2px 2px; mask: var(--pat-50) 0 0 / 2px 2px; }
.pat.p75 { -webkit-mask: var(--pat-75) 0 0 / 2px 2px; mask: var(--pat-75) 0 0 / 2px 2px; }
.pat.pdiag { -webkit-mask: var(--pat-diag) 0 0 / 4px 4px; mask: var(--pat-diag) 0 0 / 4px 4px; }
.pat.acid { background-color: var(--acid); }
.pat.red { background-color: var(--red); }
.pat.mute { background-color: var(--mute); }

.cost { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.cost i { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--paper); position: relative; }
.cost i::after { content: ''; position: absolute; inset: 1px; background-color: var(--paper); }
.cost.c1 i::after { -webkit-mask: var(--pat-12) 0 0 / 4px 4px; mask: var(--pat-12) 0 0 / 4px 4px; }
.cost.c2 i::after { -webkit-mask: var(--pat-25) 0 0 / 2px 2px; mask: var(--pat-25) 0 0 / 2px 2px; }
.cost.c3 i::after { -webkit-mask: var(--pat-50) 0 0 / 2px 2px; mask: var(--pat-50) 0 0 / 2px 2px; }
.cost.c4 i::after { -webkit-mask: var(--pat-75) 0 0 / 2px 2px; mask: var(--pat-75) 0 0 / 2px 2px; }
.cost.c5 i { border-color: var(--acid); }
.cost.c5 i::after { background-color: var(--acid); }

.tchip {
display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px 0 3px; border: 1px solid var(--line2);
font-size: var(--t-meta); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--ink);
text-decoration: none; cursor: pointer;
}
.tchip img { width: 14px; height: 14px; }
html.inv .tchip img, html.inv .ticon { filter: invert(1); }
.tchip:hover { border-color: var(--paper); }


.tier { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-label); font-weight: 800; letter-spacing: .1em; }
.tier i { width: 12px; height: 12px; border: 1px solid var(--paper); position: relative; display: inline-block; }
.tier i::after { content: ''; position: absolute; inset: 1px; background: var(--paper); }
.tier.s1 i::after { -webkit-mask: var(--pat-25) 0 0 / 2px 2px; mask: var(--pat-25) 0 0 / 2px 2px; }
.tier.s3 i::after { -webkit-mask: var(--pat-50) 0 0 / 2px 2px; mask: var(--pat-50) 0 0 / 2px 2px; }
.tier.s4 i { border-color: var(--acid); }
.tier.s4 i::after { background: var(--acid); -webkit-mask: var(--pat-diag) 0 0 / 4px 4px; mask: var(--pat-diag) 0 0 / 4px 4px; }
.tier.s5 i::after { background: var(--paper); }
.tier.s6 i { border-color: var(--acid); }
.tier.s6 i::after { background: var(--acid); }
.tier.s0 i { border-color: var(--line2); }
.tier.s0 i::after { display: none; }


.sg {
display: inline-flex; align-items: center; gap: 2px; height: 15px; padding: 0 3px 0 2px; margin: 0 1px; vertical-align: -2px;
border: 1px solid currentColor; font: 800 var(--t-label)/1 var(--f-mono); letter-spacing: .02em; font-style: normal; color: var(--paper);
}
.sg svg { width: 9px; height: 9px; flex: none; }
.sg.ad, .sg.as, .sg.crit { color: var(--paper); }
.sg.ap, .sg.mana { color: var(--hi); }
.qchip {
display: inline-grid; place-items: center; width: 15px; height: 15px; vertical-align: -2px; margin: 0 1px;
border: 1px dashed var(--mute); color: var(--mute); font: 800 var(--t-label)/1 var(--f-mono); cursor: help;
}
.qchip:hover { border-style: solid; color: var(--hi); border-color: var(--hi); }
.mk { white-space: normal; line-height: 1.6; }
.mk b, .mk .mk-b { color: var(--paper); font-weight: 800; }
.mk .mk-dim { color: var(--mute); }
.mk .mk-kw { color: var(--hi); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mk .mk-rules { display: block; margin-top: 6px; padding-left: 8px; border-left: 1px solid var(--line2); color: var(--mute); font-size: .92em; }
.mk .br { display: block; height: .55em; }

.est {
display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; background: var(--red); color: #000;
font: 800 var(--t-label)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.warn { color: var(--red); }


.tbl-wrap { overflow: auto; position: relative; scrollbar-width: thin; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-row); }
.tbl th {
position: sticky; top: 0; z-index: 2; background: var(--ink); text-align: left; padding: 0 8px; height: 30px;
font-size: var(--t-meta); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none;
}
.tbl th.sortable { cursor: pointer; }
.tbl th.sortable:hover { color: var(--paper); }
.tbl th[aria-sort] { color: var(--hi); }
.tbl th[aria-sort="ascending"]::after { content: ' ▲'; }
.tbl th[aria-sort="descending"]::after { content: ' ▼'; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td { padding: 0 8px; height: 30px; border-bottom: 1px solid var(--line3); white-space: nowrap; }
.tbl tbody tr { cursor: default; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--line3); }
.tbl tbody tr.sel td { background: var(--acid); color: #000; }
.tbl tbody tr.sel td .mute, .tbl tbody tr.sel td .hi, .tbl tbody tr.sel .cost, .tbl tbody tr.sel kbd { color: #000; }
.tbl tbody tr.sel .cost i { border-color: #000; }
.tbl tbody tr.sel .cost i::after { background-color: #000; }
.tbl tbody tr.sel .tchip { background: transparent; border-color: #000; color: #000; }
.tbl tbody tr.sel .tchip img { filter: invert(1); }
.tbl td .thumb { width: 26px; height: 26px; }
.tbl .num { font-weight: 700; }
.tbl tr.dim td { color: var(--mute2); }


.th1 { position: relative; width: 28px; height: 28px; flex: none; background: var(--ink); overflow: hidden; border: 1px solid var(--line2); }
.th1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th1 img.col { opacity: 1; }
.th1:hover img.col, tr:hover .th1 img.col, .picked .th1 img.col, button:hover > .th1 img.col, .th1.colour img.col { opacity: 1; }


.panel { display: flex; flex-direction: column; min-height: 0; }
.panel > .body { padding: var(--pad); }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); border-left: 1px solid var(--line2); border-top: 1px solid var(--line2); }
.kv > div { padding: 6px 8px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); min-width: 0; }
.kv .v { font: 400 var(--t-num)/1 var(--f-disp); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .v small { font: 700 var(--t-label)/1 var(--f-mono); color: var(--mute); margin-left: 3px; }

.note { font-size: var(--t-meta); color: var(--mute); line-height: 1.5; }
.note b { color: var(--paper); }
.note .k { color: var(--hi); }


.bar { position: relative; height: 12px; border: 1px solid var(--line2); background: var(--ink); overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.bar.tall { height: 18px; }
.split { display: flex; height: 22px; border: 1px solid var(--line); }
.split > i { display: block; height: 100%; min-width: 0; border-right: 1px solid var(--ink); }
.split > i:last-child { border-right: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--line2); }
.legend i.ln { height: 0; border: 0; border-top: 1px solid var(--paper); }
.legend i.ln.acid { border-top-color: var(--acid); }
.legend i.ln.dash { border-top-style: dashed; }
.legend i.ln.dot { border-top-style: dotted; border-top-width: 2px; }


.chart { position: relative; width: 100%; user-select: none; touch-action: pan-y; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; shape-rendering: crispEdges; font-family: var(--f-mono); }
.chart .ax line, .chart .ax path { stroke: var(--paper); stroke-width: 1; }
.chart .tick line { stroke: var(--paper); }
.chart .tick.minor line { stroke: var(--mute2); }
.chart .gridl { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 1 3; }
.chart text { fill: var(--mute); font-size: var(--t-label); }
.chart text.axl { fill: var(--paper); font-size: var(--t-label); font-weight: 800; letter-spacing: .12em; }
.chart .s-total { fill: none; stroke: var(--paper); stroke-width: 1.5; }
.chart .s-auto { fill: none; stroke: var(--mute); stroke-width: 1; stroke-dasharray: 4 2; }
.chart .s-ab { fill: none; stroke: var(--acid); stroke-width: 1; }
.chart .s-burn { fill: none; stroke: var(--paper); stroke-width: 1; stroke-dasharray: 1 2; }
.chart .s-mana { fill: none; stroke: var(--mute); stroke-width: 1; stroke-dasharray: 1 1; opacity: .9; }
.chart .s-acid { fill: none; stroke: var(--acid); stroke-width: 1.5; }
.chart .s-paper { fill: none; stroke: var(--paper); stroke-width: 1.5; }
.chart .s-dash { fill: none; stroke: var(--paper); stroke-width: 1; stroke-dasharray: 5 3; }
.chart .cast line { stroke: var(--acid); stroke-width: 1; }
.chart .cast rect { fill: var(--acid); }
.chart .cast text { fill: #000; font-size: var(--t-label); font-weight: 800; }
.chart .cast.proc line { stroke-opacity: .35; stroke-dasharray: 2 3; }
.chart .mark line { stroke: var(--paper); stroke-dasharray: 2 2; }
.chart .mark text { fill: var(--paper); font-size: var(--t-label); font-weight: 700; }
.chart .mark rect { fill: var(--ink); }
.chart .xh { stroke: var(--paper); stroke-width: 1; }
.chart .dot { fill: var(--acid); }
.chart .barr { fill: var(--paper); }
.chart .barr.acid { fill: var(--acid); }
.chart .barr.mute { fill: var(--mute2); }
.chart .hatch { fill: url(#hatch); }
.chart .pp { fill: var(--paper); }
.chart .barr.bp50 { fill: url(#pt50); }
.chart .barr.bp12 { fill: url(#pt12); }
.chart .mark.int line { stroke: var(--mute2); stroke-dasharray: 1 3; }
.chart .mark.int text { fill: var(--hi); }
.readout {
position: absolute; pointer-events: none; z-index: 5; background: var(--ink); border: 1px solid var(--paper);
padding: 5px 7px; font-size: var(--t-meta); line-height: 1.45; white-space: nowrap; min-width: 120px;
}
.readout b { color: var(--hi); font-weight: 800; }
.readout .t { color: var(--mute); font-size: var(--t-label); letter-spacing: .1em; }


.dv { position: relative; overflow: hidden; background: var(--ink); cursor: crosshair; touch-action: none; }
.dv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dv .cap {
position: absolute; left: 0; bottom: 0; display: flex; gap: 0; font-size: var(--t-label); font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; background: var(--ink); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.dv .cap span { padding: 3px 7px; border-left: 1px solid var(--line2); white-space: nowrap; }
.dv .cap span:first-child { border-left: 0; }
.dv .tag { position: absolute; left: 0; top: 0; background: var(--acid); color: #000; font: 800 var(--t-label)/1 var(--f-mono); padding: 4px 7px; letter-spacing: .08em; text-transform: uppercase; }
.dv .xhair { position: absolute; pointer-events: none; }


.pop {
position: fixed; z-index: 70; background: var(--ink); border: 1px solid var(--paper); min-width: 260px; max-width: calc(100vw - 16px);
max-height: min(70vh, 620px); display: flex; flex-direction: column;
}
.pop > div { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pop .pop-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex: none; }
.pop .pop-b { overflow: auto; min-height: 0; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pgrid button {
display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; background: var(--ink);
border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); text-align: left; min-width: 0;
}
.pgrid button .th1 { width: 100%; height: auto; aspect-ratio: 1; border: 0; }
.pgrid button .nm { font-size: var(--t-label); font-weight: 700; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; text-transform: uppercase; }
.pgrid button:hover, .pgrid button.focus { background: var(--paper); color: var(--ink); }
.pgrid button.cur { background: var(--acid); color: #000; }
.pgrid .grp { grid-column: 1 / -1; padding: 5px 8px; font-size: var(--t-label); font-weight: 800; letter-spacing: .12em; color: var(--mute); border-bottom: 1px solid var(--line2); background: var(--ink2); }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.igrid button {
display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; align-items: center; padding: 5px 8px; border: 0; background: var(--ink);
border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); text-align: left; min-width: 0; font-size: var(--t-meta);
}
.igrid button img { width: 30px; height: 30px; grid-row: span 2; }
.igrid button b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-size: var(--t-meta); }
.igrid button small { color: var(--mute); font-size: var(--t-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.igrid button:hover, .igrid button.focus { background: var(--paper); color: var(--ink); }
.igrid button:hover small { color: var(--ink); }
.igrid button.cur { outline: 1px solid var(--acid); outline-offset: -3px; }


.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.slot {
position: relative; display: flex; align-items: center; gap: 8px; padding: 6px; min-height: 56px; background: var(--ink);
border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; min-width: 0;
}
.slot img { width: 40px; height: 40px; flex: none; }
.slot .nm { font-size: var(--t-label); font-weight: 700; text-transform: uppercase; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot .empty { width: 40px; height: 40px; flex: none; border: 1px dashed var(--mute2); display: grid; place-items: center; color: var(--mute); font-size: 18px; }
.slot:hover { background: var(--paper); color: var(--ink); }
.slot .x { position: absolute; right: 0; top: 0; width: 18px; height: 18px; border: 0; border-left: 1px solid var(--line2); border-bottom: 1px solid var(--line2); background: var(--ink); color: var(--mute); font-size: var(--t-meta); line-height: 1; display: grid; place-items: center; }
.slot .x:hover { background: var(--red); color: #000; }

.unitbtn {
display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 6px; background: var(--ink);
border: 1px solid var(--line); text-align: left;
}
.unitbtn .th1 { width: 52px; height: 52px; }
.unitbtn .nm { font: 400 var(--t-head)/1 var(--f-disp); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unitbtn .sub { font-size: var(--t-meta); color: var(--mute); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unitbtn:hover { border-color: var(--acid); }
.unitbtn:hover .th1 img.col { opacity: 1; }


#palette { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding-top: 9vh; background: rgba(0,0,0,.72); }
html.inv #palette { background: rgba(255,255,255,.7); }
#palette .pal { width: min(720px, calc(100vw - 16px)); background: var(--ink); border: 1px solid var(--paper); display: flex; flex-direction: column; max-height: 76vh; }
#palette .pal-in { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 52px; border-bottom: 1px solid var(--paper); }
#palette .pal-in .pfx { font: 400 var(--t-num)/1 var(--f-disp); color: var(--hi); }
#palette input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; font-size: var(--t-row); font-weight: 400; text-transform: uppercase; caret-color: var(--acid); }
#palette .pal-list { overflow: auto; min-height: 0; }
#palette .grp { padding: 6px 12px 4px; font-size: var(--t-label); font-weight: 800; letter-spacing: .13em; color: var(--mute2); border-bottom: 1px solid var(--line3); background: var(--ink2); }
#palette .it {
display: grid; grid-template-columns: 28px 64px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 0 12px; height: 38px;
border: 0; border-bottom: 1px solid var(--line3); background: var(--ink); text-align: left; font-size: var(--t-body);
}
#palette .pal-list.nq .it { grid-template-columns: 28px 1fr auto; }
#palette .it .ic { width: 26px; height: 26px; display: grid; place-items: center; }
#palette .it .ic img { width: 26px; height: 26px; object-fit: cover; }
#palette .it .ty { font-size: var(--t-label); font-weight: 800; letter-spacing: .12em; color: var(--mute); }
#palette .it .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; text-transform: uppercase; }
#palette .it .nm small { color: var(--mute); font-size: var(--t-meta); font-weight: 400; margin-left: 8px; text-transform: none; }
#palette .it .go { font-size: var(--t-meta); font-weight: 400; color: var(--mute); }
#palette .it .go .alt { display: none; margin-right: 8px; }
#palette .it.on .go .alt { display: inline; }
#palette .it.on { background: var(--acid); color: #000; }
#palette .it.on .ty, #palette .it.on .go, #palette .it.on .nm small { color: #000; }
#palette .pal-f { display: flex; gap: 14px; flex-wrap: wrap; padding: 7px 12px; border-top: 1px solid var(--paper); font-size: var(--t-meta); color: var(--mute); }


.modal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: rgba(0,0,0,.72); padding: 12px; }
.modal .box { width: min(760px, 100%); max-height: 86vh; overflow: auto; background: var(--ink); border: 1px solid var(--paper); }
.modal .box table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.modal .box td { padding: 6px 12px; border-bottom: 1px solid var(--line3); vertical-align: top; }
.modal .box td:first-child { width: 34%; }
.modal .box td.legal { line-height: 1.6; color: var(--mute); }
.modal .box a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--line2); }
.modal .box a:hover, .modal .box a:focus-visible { background: var(--acid); color: #000; border-color: var(--acid); }


.cell.lazy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 120px; background: var(--ink); border: 1px solid var(--line); }
.cell.lazy .blk { display: inline-block; width: 10px; height: 17px; background: var(--acid); }
.cell.lazy.off .lbl { color: var(--red); }
.lazy-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lazy-tools a { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; text-decoration: none; background: var(--ink); }
.lazy-tools a:hover, .lazy-tools a:focus-visible { background: var(--acid); color: #000; }
.lazy-tools a:hover .lbl, .lazy-tools a:focus-visible .lbl { color: #000; }


#status {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--status-h); display: flex; align-items: stretch;
background: var(--ink); border-top: 1px solid var(--line); font-size: var(--t-meta); letter-spacing: .04em; overflow: hidden;
}
#status > * { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-right: 1px solid var(--line2); white-space: nowrap; min-width: 0; }
#status .data { overflow: hidden; text-overflow: ellipsis; display: block; line-height: var(--status-h); flex: 1 1 auto; color: var(--mute); }
#status .data b { color: var(--paper); }
#status .data b.off { color: var(--red); }
#status > button:first-of-type { margin-left: auto; }
#status button { background: var(--ink); border: 0; border-left: 1px solid var(--line2); padding: 0 10px; font-size: var(--t-meta); color: var(--mute); }
#status button:hover { background: var(--paper); color: var(--ink); }
#status .sp { flex: 1; border-right: 0; }

html[data-route="home"] #status { display: none; }
html[data-route="home"] #app { padding-bottom: 0; }


#wipe { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: none; }
#wipe.on { display: block; }
#wipe canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#wipe .wl {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 14px;
font: 400 clamp(64px, 12vw, 180px)/.8 var(--f-disp); color: #000; background: var(--acid); padding: 14px 18px 6px; opacity: 0;
}
#wipe .wl small { font: 800 var(--t-row)/1 var(--f-mono); letter-spacing: .14em; }
#wipe.mid .wl { opacity: 1; }


#boot { position: fixed; inset: 0; z-index: 95; background: var(--ink); display: grid; place-items: center; }
#boot b { color: var(--hi); font-weight: 400; }
#boot .bw { font: 400 21px/1 var(--f-head); color: var(--paper); display: flex; align-items: center; gap: 7px; }
#boot .blk { display: inline-block; width: 10px; height: 17px; background: var(--acid); }
#boot.gone { display: none; }


.toast { position: fixed; left: 50%; bottom: calc(var(--status-h) + 12px); transform: translateX(-50%); z-index: 96; background: var(--acid); color: #000; padding: 7px 12px; font-weight: 800; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; }


@media (max-width: 760px) {
:root { --pad: 10px; --t-row: 13px; --t-head: 18px; --t-num: 22px; --t-num-l: 26px; --t-hero: 32px; --t-display: 96px; }
#palette input { font-size: 16px; }
.sheet-head { grid-template-columns: auto minmax(0, 1fr); }
.sh-num { font-size: 72px; padding: 8px 10px 2px 8px; }
.sheet-head > .void { display: none; }
.giant { font-size: clamp(96px, 34vw, 150px); }
.xl { font-size: 54px; }
#status .credit-s { display: none; }
#status .lg { display: none; }
.field { grid-template-columns: 84px minmax(0, 1fr) 56px; }
.pop { left: 8px !important; right: 8px; width: auto !important; top: auto !important; bottom: calc(var(--status-h) + 8px); max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
.cmdk .caret { animation: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }