/* Sixty Sleeves - a vinyl binder: cool grey pages, clear sleeves, a violet spine and a holo foil for key cards.
 * Category colours: creatures ember orange, trainers blue, energy green. */
:root {
  --bg: #e9ebf2; --bg2: #f4f5f9; --card: #ffffff; --ink: #1b1930; --ink2: #3f3b5c; --muted: #66617f; --line: #d8d6e5; --line2: #bcb8d2;
  --accent: #5a3fd4; --accent-ink: #ffffff; --accent-soft: #ece8ff; --focus: #5a3fd4;
  --cr: #d4500f; --cr-bg: #fff0e6; --tr: #1f6fc9; --tr-bg: #e7f1fd; --en: #2a8a43; --en-bg: #e6f6ea;
  --ok: #2a8a43; --warn: #a66300; --err: #c22d3a; --info: #3c5a9a;
  --sleeve: rgba(255, 255, 255, .55); --ring: #b9b5cc; --page: #f9f9fc;
  --shadow: 0 1px 0 rgba(20, 16, 60, .05), 0 8px 22px rgba(20, 16, 60, .07);
  --display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", ui-rounded, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
[data-theme="dark"] {
  --bg: #121020; --bg2: #191629; --card: #1f1c31; --ink: #ecebff; --ink2: #cfcbec; --muted: #9d98bd; --line: #312d48; --line2: #48436a;
  --accent: #a08cff; --accent-ink: #120f22; --accent-soft: #2a2450; --focus: #b6a6ff;
  --cr: #ff9a5c; --cr-bg: #3a2216; --tr: #7db8ff; --tr-bg: #172a44; --en: #6fd38a; --en-bg: #173323;
  --ok: #6fd38a; --warn: #f0b860; --err: #ff7a85; --info: #9db7ff;
  --sleeve: rgba(255, 255, 255, .04); --ring: #4a4566; --page: #1a172a;
  --shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .3);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
code { font: 13px var(--mono); background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; }

/* header */
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg2); position: sticky; top: 0; z-index: 20; }
.back { color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { display: inline-grid; grid-template-columns: repeat(3, 8px); gap: 2px; flex: none; }
.logo i { width: 8px; height: 11px; border-radius: 2px; background: var(--accent); }
.logo i:nth-child(2) { background: linear-gradient(135deg, #ff8fd1, #8fd3ff 50%, #b5ff9e); }
.logo i:nth-child(3) { opacity: .5; }
.session { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.credits { font-size: 13px; color: var(--ink2); }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; text-decoration: none; font-size: 14px; line-height: 1.2; }
.pill:hover { border-color: var(--accent); }
.pill.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill.solid:hover { filter: brightness(1.08); }
.pill:disabled { opacity: .45; cursor: not-allowed; }
.pill.tiny { padding: 3px 10px; font-size: 12px; }

/* hero */
.hero { max-width: 1120px; margin: 0 auto; padding: 38px 20px 16px; }
.kicker { font: 600 13px/1 var(--mono); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.hero h1 { font: 800 clamp(32px, 5.4vw, 56px)/1.05 var(--display); margin: 0 0 14px; letter-spacing: -.025em; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--accent), #d0499c 55%, #e07a2f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { max-width: 740px; font-size: 16px; color: var(--ink2); margin: 0 0 18px; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ex-label { color: var(--muted); font-size: 14px; }
.chip { border: 1px solid var(--line2); background: var(--card); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.chip:hover, .chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* blocks */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 40px; }
.block { padding: 26px 0 8px; }
.bhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 14px; }
.bhead h2 { font: 800 24px/1.2 var(--display); letter-spacing: -.015em; margin: 0; display: flex; align-items: center; gap: 10px; }
.bhead p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; min-width: 240px; }
.num { display: inline-grid; place-items: center; width: 28px; height: 38px; background: var(--accent); color: var(--accent-ink); border-radius: 5px; font: 800 16px/1 var(--display); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.panel h3 { font: 700 17px/1.3 var(--display); margin: 0 0 10px; }
.panel h3 + h3, .rules h3:not(:first-child) { margin-top: 14px; }
h4 { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }

/* forms */
.listrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink2); margin-bottom: 10px; min-width: 0; }
.field input, .field select, .field textarea, textarea { border: 1px solid var(--line2); background: var(--bg2); border-radius: 9px; padding: 8px 10px; font-size: 15px; width: 100%; min-width: 0; }
#deckText { font: 13.5px/1.5 var(--mono); resize: vertical; min-height: 280px; }
#deckText.drop { border-color: var(--accent); background: var(--accent-soft); }
textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 8px; color: var(--ink2); }
.filerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.filebtn { cursor: pointer; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; margin: 2px 0 12px; }
.segbtn { border: 0; background: var(--card); padding: 8px; cursor: pointer; font-size: 14px; }
.segbtn.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* notes */
.notes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notes li { font-size: 13.5px; padding: 6px 10px 6px 12px; border-left: 3px solid var(--line2); background: var(--bg2); border-radius: 0 8px 8px 0; }
.notes li.ok { border-color: var(--ok); }
.notes li.warn { border-color: var(--warn); }
.notes li.error { border-color: var(--err); }
.notes li.info { border-color: var(--info); }
.notes li.none { color: var(--muted); }
.notes li.lit, .keys li.lit, .odds li.lit { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ratio strip */
.ratio { display: flex; height: 38px; border-radius: 10px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); background: var(--card); }
.ratio .seg { display: flex; align-items: center; gap: 6px; padding: 0 10px; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 13px; }
.ratio .seg b { font: 800 16px/1 var(--display); }
.seg.cat-creature { background: var(--cr-bg); color: var(--cr); }
.seg.cat-trainer { background: var(--tr-bg); color: var(--tr); }
.seg.cat-energy { background: var(--en-bg); color: var(--en); }

/* binder */
.binderrow { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.binder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-height: 760px; overflow-y: auto; padding: 4px; border-radius: 16px; }
.empty-binder { grid-column: 1 / -1; padding: 30px; text-align: center; border: 2px dashed var(--line2); border-radius: 14px; }
.page { position: relative; background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 10px 26px; box-shadow: var(--shadow); }
.page::before { content: ""; position: absolute; left: 9px; top: 18%; bottom: 18%; width: 8px; background: radial-gradient(circle, var(--ring) 3.5px, transparent 4px) center / 8px 33.3% repeat-y; }
.page-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 0 2px 6px; }
.page-head b { color: var(--ink2); }
.grid9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pocket { position: relative; aspect-ratio: 63 / 88; border-radius: 7px; border: 1px solid var(--line2); background: var(--bg2); padding: 5px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; cursor: pointer; overflow: hidden; min-width: 0; }
.pocket::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(160deg, var(--sleeve), transparent 45%); pointer-events: none; }
.pocket.empty { cursor: default; border-style: dashed; background: transparent; }
.pocket.cat-creature { background: var(--cr-bg); border-color: color-mix(in srgb, var(--cr) 45%, transparent); }
.pocket.cat-trainer { background: var(--tr-bg); border-color: color-mix(in srgb, var(--tr) 45%, transparent); }
.pocket.cat-energy { background: var(--en-bg); border-color: color-mix(in srgb, var(--en) 45%, transparent); }
.pocket.key { border: 2px solid transparent; background-image: linear-gradient(var(--card), var(--card)), linear-gradient(130deg, #ff8fd1, #ffd36e 30%, #8fd3ff 60%, #b5ff9e); background-origin: border-box; background-clip: padding-box, border-box; }
.pocket.over { outline: 2px solid var(--err); outline-offset: -2px; }
.pocket.over .pk-role { color: var(--err); }
.pocket.sel, .pocket.lit { box-shadow: 0 0 0 3px var(--accent); }
.pocket.added { border-style: dashed; border-width: 2px; }
.pk-top { font: 600 10px/1.1 var(--mono); color: var(--muted); }
.pk-name { font: 700 12px/1.15 var(--display); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.pk-role { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.cat-creature .pk-role { color: var(--cr); } .cat-trainer .pk-role { color: var(--tr); } .cat-energy .pk-role { color: var(--en); }
.detail { position: sticky; top: 70px; }
.detail .dhead { font: 800 18px/1.2 var(--display); margin: 0 0 4px; }
.detail select { border: 1px solid var(--line2); background: var(--bg2); border-radius: 8px; padding: 6px 8px; }
.detail .pill { margin: 2px 0 8px; }

/* odds */
.oddsrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.odds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.odd { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; align-items: center; gap: 8px; font-size: 13.5px; padding: 2px 4px; border-radius: 6px; }
.olab { min-width: 0; }
.obar { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.obar i { display: block; height: 100%; background: var(--accent); }
.odd.bad .obar i { background: var(--err); }
.odd b { text-align: right; font: 700 14px/1 var(--display); }
.curve { width: 100%; height: auto; display: block; }
.cv-grid { stroke: var(--line); stroke-width: 1; }
.cv-tick { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.cv-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.cv-dot { stroke: var(--card); stroke-width: 1.5; }
.cv-series.lit .cv-line { stroke-width: 5; }
.s1 .cv-line { stroke: var(--cr); } .s1 .cv-dot { fill: var(--cr); }
.s2 .cv-line { stroke: var(--accent); } .s2 .cv-dot { fill: var(--accent); }
.s3 .cv-line { stroke: #c2399a; } .s3 .cv-dot { fill: #c2399a; }
.s4 .cv-line { stroke: #b08900; } .s4 .cv-dot { fill: #b08900; }
.sd .cv-line { stroke: var(--tr); stroke-dasharray: 5 4; } .sd .cv-dot { fill: var(--tr); }
.legend { list-style: none; margin: 6px 0 10px; padding: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.legend .sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg.s1 .sw { background: var(--cr); } .lg.s2 .sw { background: var(--accent); } .lg.s3 .sw { background: #c2399a; } .lg.s4 .sw { background: #b08900; } .lg.sd .sw { background: var(--tr); }
.keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.keys li { display: flex; flex-direction: column; padding: 6px 8px; background: var(--bg2); border-radius: 8px; }
.keys li.none, .legend li.none { color: var(--muted); background: none; padding: 0; }

/* ask */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.lane { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1.5px solid var(--line2); background: var(--card); border-radius: 12px; padding: 10px 14px; cursor: pointer; text-align: left; }
.lane b { font: 800 17px/1.2 var(--display); }
.lane span { font-size: 13px; color: var(--muted); }
.lane.on { border-color: var(--accent); background: var(--accent-soft); }
.goalrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.gchip { border: 1px solid var(--line2); background: var(--card); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.gchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.meter { font-size: 13.5px; color: var(--ink2); margin: 8px 0; }
.gate { font-size: 13.5px; background: var(--accent-soft); padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.gate .pill { margin-left: 4px; }
.run { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 12px; padding: 13px 18px; background: var(--accent); color: var(--accent-ink); font: 800 17px/1.2 var(--display); cursor: pointer; }
.run:disabled { opacity: .45; cursor: not-allowed; }
.progress { margin-top: 14px; background: var(--card); border: 1px dashed var(--accent); border-radius: 12px; padding: 14px 16px; }
.ptitle { font-weight: 700; margin: 0 0 8px; }
.steps { list-style: none; margin: 0 0 6px; padding: 0; font-size: 14px; }
.step { color: var(--muted); } .step.done { color: var(--ok); } .step.active { color: var(--ink); font-weight: 600; }
.step-ic { display: inline-block; width: 14px; font-family: var(--mono); }
.how, #rawResult { margin-top: 14px; }
.raw { white-space: pre-wrap; word-break: break-word; font: 12.5px var(--mono); max-height: 360px; overflow: auto; }
.partial { background: var(--accent-soft); padding: 8px 12px; border-radius: 8px; font-size: 14px; }

/* results */
.result { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.rhead { display: flex; gap: 14px; align-items: flex-start; }
.rhead h3 { font: 800 21px/1.2 var(--display); margin: 0 0 4px; letter-spacing: -.01em; }
.rhead p { margin: 0; color: var(--ink2); }
.stamp { flex: none; display: inline-grid; place-items: center; min-width: 92px; padding: 10px 12px; border-radius: 10px; font: 800 14px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; border: 2px solid currentColor; transform: rotate(-3deg); }
.v-ready, .v-aggro { color: var(--ok); }
.v-tune, .v-setup { color: var(--warn); }
.v-rebuild { color: var(--err); }
.v-control { color: var(--info); }
.v-none { color: var(--muted); }
.ratioline { margin: 12px 0 0; padding: 8px 12px; background: var(--bg2); border-radius: 8px; font-size: 14px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.claims, .plain, .moves { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.moves { list-style: none; padding: 0; }
.move { padding: 7px 10px; border-radius: 8px; background: var(--bg2); }
.move b { font: 800 15px/1 var(--display); margin-right: 4px; }
.moves.cut .move b { color: var(--err); } .moves.add .move b { color: var(--ok); }
.move .why { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
li.none { color: var(--muted); list-style: none; }
.cites { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 4px; vertical-align: middle; }
.cite { font: 600 11px/1 var(--mono); border: 1px solid var(--line2); background: var(--card); border-radius: 5px; padding: 3px 5px; cursor: pointer; color: var(--accent); }
.cite.bad { color: var(--err); border-color: var(--err); cursor: help; text-decoration: line-through; }
.turns { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.turn { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.tnum { flex: none; display: grid; place-items: center; width: 40px; height: 52px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 800 16px/1 var(--display); }
.turn b { display: block; margin-bottom: 4px; }
.handoff { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.diffbox { overflow-x: auto; }
table.diff { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.diff th, table.diff td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.diff th { font-size: 12px; color: var(--muted); font-weight: 600; }
table.diff td.up { color: var(--ok); font-weight: 600; } table.diff td.down { color: var(--err); font-weight: 600; }
table.diff tr.same td { color: var(--muted); }
.recon { margin-top: 14px; }

/* exports, history */
.exports { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.history { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.hglyph { flex: none; display: grid; place-items: center; width: 36px; height: 48px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: 800 15px/1 var(--display); }
.hinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history li.none { color: var(--muted); }

/* toasts, footer, print */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); transition: opacity .5s; }
.toast.err { background: var(--err); color: #fff; }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }
.foot { max-width: 1120px; margin: 0 auto; padding: 22px 20px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.printsheet { display: none; }
@media print {
  body > *:not(.printsheet) { display: none !important; }
  .printsheet { display: block; color: #000; font: 12px/1.4 var(--sans); }
  .printsheet table { border-collapse: collapse; width: 100%; }
  .printsheet td, .printsheet th { border: 1px solid #999; padding: 3px 6px; text-align: left; }
  .printsheet .boxes { font-family: var(--mono); white-space: nowrap; }
}

/* docs pages */
.doc { max-width: 920px; margin: 0 auto; padding: 24px 20px 60px; }
.doc h1 { font: 800 32px/1.15 var(--display); letter-spacing: -.02em; }
.doc h2 { font: 800 22px/1.2 var(--display); margin-top: 34px; }
.doc pre { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; font: 12.5px/1.5 var(--mono); }
.doc pre code { background: none; padding: 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.doc th, .doc td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 6px; }
.tab { border: 1px solid var(--line2); background: var(--card); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.tab.on, .tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tokpanel { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; }

/* the note label carries an inline hint, so it flows as text rather than a flex column */
.ask > label.field { display: block; }

/* responsive */
@media (max-width: 900px) {
  .binderrow { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; }
  .oddsrow, .listrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .back { display: none; }
  .hero { padding: 24px 16px 10px; }
  .wrap { padding: 0 16px 30px; }
  .binder { grid-template-columns: minmax(0, 1fr); max-height: 640px; }
  .cols2 { grid-template-columns: minmax(0, 1fr); }
  .odd { grid-template-columns: minmax(0, 1fr) 60px 40px; }
  .lanes { grid-template-columns: 1fr 1fr; }
  .rhead { flex-direction: column; gap: 8px; }
  .row2 { gap: 8px; }
  .pk-name { font-size: 12px; -webkit-line-clamp: 2; }
  .pocket { aspect-ratio: 1 / 0.92; padding: 6px; }
  .binder { max-height: 560px; }
  .toast { font-size: 13px; padding: 8px 12px; }
}
.tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.codegroup { margin: 10px 0 16px; }
.statebox { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.tokenrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.tokenbox { font-family: var(--mono); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow-wrap: anywhere; width: 100%; }
.mono { font-family: var(--mono); overflow-wrap: anywhere; }