:root{
  color-scheme:light;
  --bg:#e9e9e1; --fg:#000; --line:#000; --muted:#5f5f58;
  --block:#000; --on-block:#e9e9e1; --on-block-muted:#9a9a92; --block-line:#333;
  --field:#fff; --paper:#f6f5ef; --dots:rgba(0,0,0,.09); --hover:rgba(0,0,0,.06);
  --lime:#c0fe04; --on-lime:#000; --violet:#5200ff; --on-violet:#fff;
  --row-hl:rgba(192,254,4,.38); --row-hl-fg:#000;
  --note:var(--violet); --on-note:var(--on-violet);
  --focus-page:var(--violet); --focus:var(--focus-page); /* keyboard focus ring; see docs/accessibility.md */
  --error:#f24723; --scrim:rgba(0,0,0,.45); --seg-off:rgba(233,233,225,.16);
  --r-contraband:#ea302d; --r-prestige:#eadd16; --r-superior:#c333f7;
  --r-deluxe:#4fa7f0; --r-enhanced:#00f587; --r-standard:#caccd0; --on-rarity:#000;
  --display:"Marathon Shapiro","Archivo",sans-serif;
  --mono:"PP Fraktion Mono","Space Mono",ui-monospace,monospace;
  --ticket-h:calc(38px + 2.4rem);   /* 76px at default text size; grows with the text so the page padding still clears the bar */
  /* level 70: iridescent pastel sweep (palette sampled from Marathon's ranked art) */
  --pin-grad:linear-gradient(118deg,#d0c3f4 0%,#f6e2f7 20%,#ddcaf5 38%,#f2def7 52%,#b6c1e5 68%,#bbd3e0 84%,#d0e6e4 100%);
  --pin-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .45  0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 3px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0b0b0a; --fg:#ecece4; --line:#d9d9d0; --muted:#8d8d85;
    --block:#1c1c1c; --on-block:#ecece4; --on-block-muted:#8d8d85; --block-line:#333;
    --field:#141413; --paper:#121211; --dots:rgba(255,255,255,.055); --hover:rgba(255,255,255,.06);
    --violet:#7b4dff; --row-hl:rgba(192,254,4,.12); --row-hl-fg:#c0fe04; --scrim:rgba(0,0,0,.65);
    --seg-off:rgba(236,236,228,.12);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0b0a; --fg:#ecece4; --line:#d9d9d0; --muted:#8d8d85;
  --block:#1c1c1c; --on-block:#ecece4; --on-block-muted:#8d8d85; --block-line:#333;
  --field:#141413; --paper:#121211; --dots:rgba(255,255,255,.055); --hover:rgba(255,255,255,.06);
  --violet:#7b4dff; --row-hl:rgba(192,254,4,.12); --row-hl-fg:#c0fe04; --scrim:rgba(0,0,0,.65);
  --seg-off:rgba(236,236,228,.12);
}
/* ---------- FACTION THEMES (colour tokens only — layout never changes) ---------- */
/* Mint — palette sampled from Bungie's official Collector's Edition
   imagery: clinical ice-white, charcoal, slate, worm mint and chartreuse */
:root[data-faction="mint"]{
  --bg:#e6eef0; --fg:#1b1f22; --line:#1b1f22; --muted:#5a666b;
  --block:#24292d; --on-block:#e6eef0; --on-block-muted:#94a3a8; --block-line:#3a4146;
  --field:#f6fafa; --paper:#f1f6f6; --dots:rgba(27,40,48,.08); --hover:rgba(27,40,48,.06);
  --lime:#acf4c6; --on-lime:#10200a; --violet:#3c4f63; --on-violet:#fff;
  --row-hl:rgba(112,176,32,.28); --row-hl-fg:#10200a; --seg-off:rgba(230,238,240,.16);
  --error:#e2532a;
}
@media (prefers-color-scheme:dark){
  :root[data-faction="mint"]:not([data-theme="light"]){
    --focus-page:var(--lime); /* slate is too faint on the dark page */
    --bg:#0f1214; --fg:#e3ecee; --line:#c9d4d7; --muted:#83939a;
    --block:#1d2226; --on-block:#e3ecee; --on-block-muted:#83939a; --block-line:#323a40;
    --field:#14181b; --paper:#121619; --dots:rgba(220,240,245,.05); --hover:rgba(220,240,245,.06);
    --lime:#acf4c6; --on-lime:#0c1806; --violet:#4d6680; --on-violet:#fff;
    --row-hl:rgba(172,244,198,.12); --row-hl-fg:#acf4c6; --seg-off:rgba(227,236,238,.12);
    --error:#ff6a3d;
  }
}
:root[data-faction="mint"][data-theme="dark"]{
  --focus-page:var(--lime); /* slate is too faint on the dark page */
  --bg:#0f1214; --fg:#e3ecee; --line:#c9d4d7; --muted:#83939a;
  --block:#1d2226; --on-block:#e3ecee; --on-block-muted:#83939a; --block-line:#323a40;
  --field:#14181b; --paper:#121619; --dots:rgba(220,240,245,.05); --hover:rgba(220,240,245,.06);
  --lime:#acf4c6; --on-lime:#0c1806; --violet:#4d6680; --on-violet:#fff;
  --row-hl:rgba(172,244,198,.12); --row-hl-fg:#acf4c6; --seg-off:rgba(227,236,238,.12);
  --error:#ff6a3d;
}
/* Void — red #ff0000 sampled from the in-game faction contract page (rank and charter cards) and
   the faction intro video. The rest follows the video's black void: everything near-black, red only
   as light (glow and a faint red dot grid). The neutrals are an interpretation. Warnings move to
   amber so they stay distinct. Older versions are archived in OLD/. */
:root[data-faction="void"]{
  --glow:rgba(255,0,0,.3);
  --bg:#e2dfdd; --fg:#000; --line:#000; --muted:#625b58;
  --block:#000; --on-block:#e9e4e2; --on-block-muted:#8f8784; --block-line:#3a0000;
  --field:#f2f0ef; --paper:#ebe8e6; --dots:rgba(255,0,0,.2); --hover:rgba(40,10,12,.06);
  --lime:#ff0000; --on-lime:#0d0505; --violet:#000; --on-violet:#efe9e7;
  --note:#000; --on-note:#efe9e7;
  --row-hl:rgba(255,0,0,.18); --row-hl-fg:#000; --seg-off:rgba(235,228,223,.16);
  --error:#f0a020; --on-error:#140a0b;
}
@media (prefers-color-scheme:dark){
  :root[data-faction="void"]:not([data-theme="light"]){
    --glow:rgba(255,0,0,.55);
    --bg:#000; --fg:#e6e0de; --line:#6b6b6b; --muted:#8a8582;
    --block:#000; --on-block:#e6e0de; --on-block-muted:#8a8582; --block-line:#2a2a2a;
    --field:#070707; --paper:#050505; --dots:rgba(255,0,0,.16); --hover:rgba(255,0,0,.07);
    --violet:#0c0001; --on-violet:#f0e8e6; --note:#1a0003; --on-note:#f0e8e6;
    --row-hl:rgba(255,0,0,.14); --row-hl-fg:#ff5a5a; --seg-off:rgba(239,229,226,.12);
    --error:#ffb22e;
  }
}
:root[data-faction="void"][data-theme="dark"]{
  --glow:rgba(255,0,0,.55);
  --bg:#000; --fg:#e6e0de; --line:#6b6b6b; --muted:#8a8582;
  --block:#000; --on-block:#e6e0de; --on-block-muted:#8a8582; --block-line:#2a2a2a;
  --field:#070707; --paper:#050505; --dots:rgba(255,0,0,.16); --hover:rgba(255,0,0,.07);
  --violet:#0c0001; --on-violet:#f0e8e6; --note:#1a0003; --on-note:#f0e8e6;
  --row-hl:rgba(255,0,0,.14); --row-hl-fg:#ff5a5a; --seg-off:rgba(239,229,226,.12);
  --error:#ffb22e;
}
:root[data-faction="void"] .mast{box-shadow:inset 0 -1px 0 var(--lime)}   /* black on black: a red hairline keeps the masthead edge */
:root[data-faction="void"] .logo{box-shadow:0 0 28px var(--glow)}
:root[data-faction="void"] .ticket{box-shadow:0 -8px 32px var(--glow)}
:root[data-faction="void"] :is(.o1 .to,.tab.on .n){text-shadow:0 0 28px var(--glow)}
/* Level 70: a text-shadow paints over gradient-clipped text and buried the iridescent number, so the
   glow becomes a drop-shadow (drawn behind) */
:root[data-faction="void"] #ro.pinnacle .o1 .to{text-shadow:none;filter:drop-shadow(0 0 18px var(--glow)) drop-shadow(0 0 2px var(--lime))}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:.8125rem;min-height:100vh;
  padding-bottom:calc(var(--ticket-h) + 20px + env(safe-area-inset-bottom));
  background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:6px 6px;
  transition:background-color .2s,color .2s}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}   /* screen-reader-only text */
:focus-visible{outline:3px dashed var(--focus);outline-offset:2px}   /* dashed: every border on the site is solid */
/* Dark and violet surfaces swap the ring colour so it stays at 3:1 or better */
.mast,.confirm,.eff,.t-head,.eff-warn,.ticket{--focus:var(--on-block)}   /* not the accent: it would merge with accent-filled buttons */
/* Controls flush with the screen edge draw the ring inside, so it isn't cut off */
.gear:focus-visible,.ticket button:focus-visible{outline-offset:-6px}
.gear[aria-expanded="true"],.ticket .next{--focus:var(--on-lime)}
/* Void: red and oxblood are both used for trim, so the ring is plain ink/cream */
:root[data-faction="void"]{--focus-page:var(--fg)}
.set-panel{--focus:var(--focus-page)}   /* light panel inside the dark masthead */
.note{--focus:var(--on-note)}
.o1{--focus:var(--on-violet)}
.ledger{--focus:var(--focus-page)}   /* the ledger inside the violet CRADLE card has the page background */

/* ---------- MASTHEAD ---------- */
.mast{position:relative;z-index:30;background:var(--block);color:var(--on-block);display:flex;align-items:stretch}
.logo{background:var(--lime);color:var(--on-lime);padding:14px 22px;display:flex;align-items:center;gap:12px}
.logo h1{margin:0;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.375rem;text-transform:uppercase;line-height:.85}
.mast .meta{display:flex;align-items:center;gap:22px;padding:0 22px;font-size:.625rem;letter-spacing:.18em;color:var(--on-block-muted)}
.mast .meta span:first-child{color:var(--on-block)}

/* settings gear + panel */
.settings{margin-left:auto;position:relative;display:flex}
.gear{display:grid;place-items:center;width:64px;border:0;border-left:2px solid var(--block-line);background:transparent;color:var(--on-block);cursor:pointer;min-height:48px}
.gear svg{width:22px;height:22px;transition:transform .35s ease}
.gear:hover{color:var(--lime)}
.gear[aria-expanded="true"]{background:var(--lime);color:var(--on-lime)}
.gear[aria-expanded="true"] svg{transform:rotate(60deg)}
.set-panel{position:absolute;top:100%;right:0;width:310px;background:var(--bg);color:var(--fg);border:3px solid var(--line);box-shadow:8px 8px 0 var(--lime);padding:0}
/* settings panel + restored flyout: stepped "print-out" wipe down from the masthead, reversed on close.
   The negative insets leave room for the offset shadow and the flyout's pointer. */
.set-panel,.note{animation:wipe-in .2s steps(6,end)}
.set-panel.out,.note.out{animation:wipe-out .15s steps(5,end) forwards;pointer-events:none}
@keyframes wipe-in{from{clip-path:inset(-12px -12px 100% -4px)}to{clip-path:inset(-12px -12px -12px -4px)}}
@keyframes wipe-out{from{clip-path:inset(-12px -12px -12px -4px)}to{clip-path:inset(-12px -12px 100% -4px)}}
@media (prefers-reduced-motion:reduce){.set-panel,.note,.set-panel.out,.note.out{animation:none}}
[data-motion=reduce] :is(.set-panel,.note,.set-panel.out,.note.out){animation:none}
.sp-h{background:var(--block);color:var(--on-block);padding:10px 14px;font-size:.6875rem;letter-spacing:.2em;display:flex;justify-content:space-between}
.sp-sec{padding:14px}
.sp-sec+.sp-sec{border-top:2px solid var(--line)}
.sp-l{font-size:.625rem;letter-spacing:.2em;color:var(--muted);margin-bottom:8px}
.seg{display:flex;flex-wrap:wrap;gap:2px;background:var(--line);border:2px solid var(--line)}   /* wraps at large text sizes */
.seg button{flex:1;min-width:max-content;min-height:44px;border:0;background:var(--bg);font-size:.6875rem;letter-spacing:.14em;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.seg button svg{width:14px;height:14px}
.seg button.on{background:var(--fg);color:var(--bg)}
.seg.fac button{font-size:.625rem;letter-spacing:.1em}
.seg.fac i{width:14px;height:14px;border:1px solid currentColor}
.danger{width:100%;min-height:46px;border:2px solid var(--error);background:transparent;color:var(--error);font-size:.6875rem;letter-spacing:.18em;font-weight:700;cursor:pointer}
.plain{width:100%;min-height:46px;border:2px solid var(--line);background:transparent;color:var(--fg);font-size:.6875rem;letter-spacing:.18em;font-weight:700;cursor:pointer}
.plain:hover:not([aria-disabled="true"]){background:var(--fg);color:var(--bg)}
.plain[aria-disabled="true"]{border-style:dashed;color:var(--muted);border-color:var(--muted);cursor:default}
.sp-l span{float:right}
.sp-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:8px}   /* About | Donate, equal columns that stack at large text; About fills the row when there's no Donate */
.sp-pair>*{padding:4px 10px;text-align:center}
.plain .ext{margin-left:.4em}
.sp-donate{margin-top:8px;grid-template-columns:1fr}   /* the two services: full-width rows under the pair */
#donateBtn[aria-expanded="true"]{background:var(--fg);color:var(--bg)}
.sp-end{display:none}   /* DONE: phones only, where the full-screen panel has no "outside" to tap */
html.set-full{overflow:hidden}
.danger:hover,.danger.hint{background:var(--error);color:var(--on-error,#fff)}

/* "progress restored" flyout under the gear (shown after a refresh brings entries back) */
.note{position:absolute;top:calc(100% + 12px);right:8px;width:min(300px,calc(100vw - 24px));background:var(--note);color:var(--on-note);border:3px solid var(--line);box-shadow:8px 8px 0 var(--lime);padding:16px 16px 20px}
.note::before{content:"";position:absolute;bottom:100%;right:15px;border:10px solid transparent;border-bottom-color:var(--line);border-top:0}
.note p{margin:0 0 6px;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.125rem;text-transform:uppercase;line-height:1}
.note small{display:block;font-size:.6875rem;line-height:1.5;margin-bottom:14px;opacity:.85}
.note .lnk{border:0;padding:0;background:none;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.note .row{display:flex;gap:10px;align-items:center}
.note .go{flex:0 0 auto;min-height:44px;padding:0 16px;border:2px solid var(--lime);background:var(--lime);color:var(--on-lime);font-size:.6875rem;letter-spacing:.16em;font-weight:700;cursor:pointer}
.nchk{flex:1;display:flex;align-items:center;gap:8px;font-size:.625rem;letter-spacing:.08em;line-height:1.3;cursor:pointer;min-height:44px}
.nchk input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;margin:0;border:2px solid currentColor;background:transparent;display:grid;place-items:center;cursor:pointer}
.nchk input:checked{background:var(--lime);border-color:var(--lime)}
.nchk input:checked::after{content:"";width:5px;height:9px;border:solid var(--on-lime);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
/* auto-dismiss: the bar drains, then the flyout closes. Paused while a pointer or keyboard focus is inside. */
.note .timer{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--lime);transform-origin:left;animation:drain 9s linear forwards}
.note.hold .timer,.note:has(:focus-visible) .timer{animation-play-state:paused}
@keyframes drain{to{transform:scaleX(0)}}

/* confirm flyout */
.confirm{position:fixed;z-index:60;width:min(320px,calc(100vw - 24px));background:var(--block);color:var(--on-block);border:3px solid var(--error);box-shadow:8px 8px 0 var(--error);padding:16px;animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.confirm p{margin:0 0 6px;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.125rem;text-transform:uppercase;line-height:1}
.confirm small{display:block;color:var(--on-block-muted);font-size:.6875rem;margin-bottom:14px}
.confirm .row{display:flex;gap:8px}
.confirm button{flex:1;min-height:44px;border:2px solid var(--on-block-muted);background:transparent;font-size:.6875rem;letter-spacing:.16em;cursor:pointer}
.confirm .yes{background:var(--error);border-color:var(--error);color:var(--on-error,#fff);font-weight:700}

/* ---------- TABS ---------- */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:3px solid var(--line);position:sticky;top:0;z-index:4;background:var(--bg)}
.tab{position:relative;display:flex;align-items:flex-end;gap:14px;padding:18px 22px 14px;border:0;border-right:3px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.tab:last-child{border-right:0}
.tab .n{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:54px;line-height:.8;-webkit-text-stroke:2px var(--fg);color:transparent}
.tab .t{font-family:var(--display);font-stretch:110%;font-weight:800;font-size:1.125rem;text-transform:uppercase;line-height:1}
.sm-l{display:none}
@media (max-width:1000px){.lg-l{display:none}.sm-l{display:inline}}
.tab .t small{display:block;font-family:var(--mono);font-weight:400;font-size:.625rem;letter-spacing:.14em;color:var(--muted);margin-top:4px;font-stretch:100%}
.tab.on{background:var(--block);color:var(--on-block)}
.tab.on .n{color:var(--lime);-webkit-text-stroke:0}
.tab.on .t small{color:var(--on-block-muted)}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--lime)}
.tab:not(.on):hover{background:var(--hover)}

.wrap{max-width:1180px;margin:0 auto;padding:34px 28px}
.panel{display:none}
.panel.on{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kicker{display:inline-block;background:var(--violet);color:var(--on-violet);font-size:.625rem;letter-spacing:.2em;padding:5px 8px;margin-bottom:12px}
.headline{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(36px,7vw,92px);line-height:.82;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 26px}
.headline em{font-style:normal;background:var(--lime);color:var(--on-lime);padding:.06em .08em;display:inline-block;line-height:.82}   /* inline-block: an inline background fills the font's full text box (~1.2em), which overlapped the line above when the heading wrapped (phones) */

/* segmented meter (shared: efficiency + readouts) */
.segs{display:grid;grid-template-columns:repeat(var(--n,20),1fr);gap:3px}
.segs i{height:var(--h,14px);background:var(--off,var(--seg-off));transition:background .07s linear}
.segs i.on{background:var(--lime)}

/* ---------- 01 STATUS ---------- */
.status-grid{display:grid;grid-template-columns:1.1fr 1fr;border:3px solid var(--line)}
.big-field{padding:22px;border-right:3px solid var(--line)}
.big-field label,.sm-field label,.eff-l{display:block;font-size:.625rem;letter-spacing:.2em;margin-bottom:8px}
.big-field input{width:100%;border:0;background:transparent;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(84px,12vw,120px);line-height:.85;padding:0;color:var(--fg)}
.big-field .of{font-size:.6875rem;color:var(--muted);margin-top:10px}   /* clears the focus ring (3px + 2px offset) below the tight-set number */
.sm-field{padding:22px;border-bottom:3px solid var(--line)}
.sm-field input{width:100%;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--fg);font-family:var(--display);font-stretch:125%;font-weight:800;font-size:2.5rem;padding:0 0 4px}
.eff{padding:22px;background:var(--block);color:var(--on-block)}
.eff-l{color:var(--on-block-muted)}
.eff-row{display:flex;border:2px solid var(--on-block)}
.eff-row button{flex:1;min-height:52px;border:0;border-right:2px solid var(--on-block);background:transparent;font-weight:700;cursor:pointer}
.eff-row button:last-child{border-right:0}
.eff-row button.on{background:var(--lime);color:var(--on-lime)}
.eff-meter{margin-top:18px}
.eff-meter-l{display:flex;justify-content:space-between;margin-top:8px;font-size:.625rem;letter-spacing:.16em;color:var(--on-block-muted)}

/* ---------- 02 LOAD ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{border:2px solid var(--line);background:transparent;padding:10px 14px;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:flex;gap:8px;align-items:center;min-height:44px}
.chip .c{background:var(--fg);color:var(--bg);padding:1px 6px;font-size:.625rem}
.chip.on{background:var(--fg);color:var(--bg)}
.chip.on .c{background:var(--lime);color:var(--on-lime)}
.chip[disabled]{opacity:.35;border-style:dashed;cursor:not-allowed}
.tip{font-size:.6875rem;color:var(--muted);margin:-6px 0 14px;display:flex;align-items:center;gap:8px}
.tip kbd{border:1px solid var(--muted);padding:0 5px;font-family:inherit}
table{width:100%;border-collapse:collapse;border:3px solid var(--line)}
thead th{background:var(--block);color:var(--on-block);font-weight:400;font-size:.625rem;letter-spacing:.2em;text-align:left;padding:10px 14px}
thead th.r,td.r{text-align:right}
tbody tr{border-top:2px solid var(--line)}
tbody tr.cat-row th{text-align:left;background:var(--lime);color:var(--on-lime);font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.375rem;text-transform:uppercase;padding:10px 14px}
tbody tr.cat-row th small{font-family:var(--mono);font-weight:400;font-size:.625rem;letter-spacing:.14em;margin-left:10px;font-stretch:100%}
td{padding:10px 14px;vertical-align:middle}
.sw{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.08em}
.sw i{width:22px;height:22px;background:var(--rc);border:2px solid var(--line);flex:0 0 22px}
tr.has td.sub{font-weight:700;background:var(--row-hl);color:var(--row-hl-fg)}
tr.hidden{display:none!important}

/* quantity field with built-in tally button */
.step{display:inline-flex;border:2px solid var(--line);background:var(--field)}
.step > button{width:44px;min-height:44px;border:0;background:transparent;font-size:1.125rem;cursor:pointer}
.step > button:hover{background:var(--fg);color:var(--lime)}
.qf{position:relative;display:flex;align-items:center;border-left:2px solid var(--line);border-right:2px solid var(--line)}
.qf input{width:5.75rem;border:0;background:transparent;color:var(--fg);text-align:left;font:inherit;font-size:1rem;font-weight:700;padding:10px 34px 10px 10px}
.qf input:focus-visible{outline-offset:-3px}   /* inside the cell, so the borders don't hide it */
.qf input.bad{color:var(--error)}
.qf .prev{position:absolute;left:8px;top:-11px;background:var(--violet);color:var(--on-violet);font-size:.625rem;padding:1px 5px;pointer-events:none;display:none;white-space:nowrap}
.qf.expr .prev{display:block}
.qf .calc{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.qf .calc:hover,.qf .calc[aria-expanded="true"]{background:var(--lime);color:var(--on-lime)}
tr.tallied .qf .calc{color:var(--fg)}
tr.tallied .qf .calc::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;background:var(--violet)}
.tmini{margin-top:6px;font-size:.625rem;letter-spacing:.06em;color:var(--muted);max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmini:empty{display:none}
.tmini b{color:var(--fg);font-weight:700}
.tmini .adj{border:1px dashed var(--muted);padding:0 3px}

/* ---------- TALLY KEYPAD (rem sizes so it follows the browser text-size setting) ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:20;display:none}
.tally{position:absolute;z-index:21;width:300px;background:var(--bg);color:var(--fg);border:3px solid var(--line);box-shadow:8px 8px 0 var(--lime)}
.t-head{display:flex;align-items:center;gap:10px;background:var(--block);color:var(--on-block);padding:10px 12px}
.t-head b{flex:1;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.t-head .sw i{width:14px;height:14px;flex-basis:14px;border-color:var(--on-block)}
.t-x{border:0;background:transparent;cursor:pointer;width:32px;height:32px;font-size:1rem}
.t-hint{margin:10px 12px 0;font-size:.625rem;letter-spacing:.08em;line-height:1.6;color:var(--muted);text-transform:uppercase}
.t-hint span{display:block}
.t-hint span+span{margin-top:4px}
/* rarity name as a chip in its own color: plain colored text is unreadable on the light background */
.t-hint .rch{background:var(--rc);color:var(--on-rarity);padding:0 4px;font-weight:700}
.t-tape{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;min-height:46px;border-bottom:2px solid var(--line)}
.t-tape button{border:2px solid var(--line);background:var(--field);padding:4px 8px;font-size:.8125rem;font-weight:700;cursor:pointer}
.t-tape button::after{content:" ×";color:var(--muted);font-weight:400}
.t-tape button.adj{border-style:dashed;font-weight:400}
.t-tape button:hover{background:var(--error);color:var(--on-error,#fff);border-color:var(--error)}
.t-tape .plus{align-self:center;color:var(--muted)}
.t-tape .none{font-size:.6875rem;color:var(--muted);align-self:center}
.t-entry{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px}
.t-entry #entry{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:2.125rem;min-width:1ch}
.t-entry #entry:empty::before{content:"0";opacity:.25}
.t-entry .s{font-size:.75rem;color:var(--muted)}
.t-entry .s b{color:var(--fg);font-size:1.125rem}
.t-keys{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--line)}
.t-keys button{min-height:52px;border:0;border-right:2px solid var(--line);border-bottom:2px solid var(--line);background:transparent;font-size:1.125rem;font-weight:700;cursor:pointer}
.t-keys button:nth-child(4n){border-right:0}
.t-keys button:hover{background:var(--hover)}
.t-keys .op{background:var(--block);color:var(--lime)}
.t-keys .set{grid-column:span 3;background:var(--lime);color:var(--on-lime);font-size:.75rem;letter-spacing:.12em;border-bottom:0;white-space:nowrap;overflow:hidden;padding:0 8px}
.t-keys .clr{font-size:.6875rem;letter-spacing:.14em;border-bottom:0}

/* ---------- 03 READOUT ---------- */
.warn{margin-top:18px;background:var(--error);color:var(--on-error,#fff);padding:12px 16px;font-weight:700;display:none}
/* LEVEL 70 — iridescent sweep replaces the accent */
@keyframes pinshift{from{background-position:0 0,0 0,0% 50%}to{background-position:0 0,0 0,100% 50%}}
@keyframes pintext{from{background-position:0% 50%}to{background-position:100% 50%}}
#ro.pinnacle .ro-main{background:var(--pin-grain),var(--pin-grad);background-size:180px 180px,100% 3px,240% 240%;animation:pinshift 7s ease-in-out infinite alternate;color:#16121f}
#ro.pinnacle .o1 .to{background:var(--pin-grad);background-size:240% 240%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pintext 6s ease-in-out infinite alternate}
#ro.pinnacle .ww-tag{color:#e9dcff}
@media (prefers-reduced-motion:reduce){#ro.pinnacle *{animation:none!important}}
[data-motion=reduce] #ro.pinnacle *{animation:none!important}
.warn.show{display:block}
.warn ol{margin:6px 0 0;padding-left:22px;font-weight:400}
.warn ol b{font-weight:700}
/* Cradle Efficiency warning: a block bar with an accent edge, so it reads as advice, not an error */
.eff-warn{background:var(--block);color:var(--on-block);border-left:6px solid var(--lime);font-weight:400;line-height:1.5}
.eff-warn .ew-h{color:var(--lime)}
.eff-warn b{font-weight:700}
.eff-warn .ew-h{display:block;font-weight:700;letter-spacing:.14em;margin-bottom:4px}
.eff-warn p{margin:0}
.eff-warn .ew-lists{display:flex;flex-wrap:wrap;gap:10px 48px;margin:10px 0}
.eff-warn .ew-l{display:block;margin-bottom:4px;font-size:.625rem;letter-spacing:.16em;color:var(--on-block-muted)}
.eff-warn ol,.eff-warn ul{margin:0;padding:0;list-style:none}
.eff-warn li{padding:2px 0}
.eff-warn li span{margin-left:10px;font-size:.6875rem;color:var(--on-block-muted)}
.eff-warn .ew-clear{margin-top:8px;padding-top:8px;border-top:1px solid currentColor}
.big-num{font-family:var(--display);font-stretch:125%;font-weight:900;line-height:.8}
/* FROM / TO levels share one baseline; captions sit above each number */
.lv2{display:grid;grid-template-columns:auto auto auto;justify-content:start;column-gap:18px;align-items:baseline}
.lv2 .cap{grid-row:1;align-self:end;font-size:.625rem;letter-spacing:.2em;margin-bottom:10px;opacity:.75}
.lv2 .c1{grid-column:1}.lv2 .c3{grid-column:3}
.lv2 .num{grid-row:2;font-family:var(--display);font-stretch:125%;font-weight:900;line-height:.78;letter-spacing:-.02em}
.lv2 .from{grid-column:1}.lv2 .to{grid-column:3}
/* growth arrow: up and to the right, riding the top of the row */
.lv2 .arr{grid-row:2;grid-column:2;align-self:end;width:calc(var(--arr,40px)*1.6);height:var(--arr,40px);margin-bottom:calc(var(--fsf,64px)*.3)}



/* OPTN 2 — lime poster + ASCII WEAVEworm (also the base B1 layout) */
.readout{display:grid;grid-template-columns:1.3fr 1fr;border:3px solid var(--line)}
.ro-main{background:var(--lime);color:var(--on-lime);padding:30px 28px 52px;border-right:3px solid var(--line);position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.ro-main.dragging{cursor:grabbing}
/* OPTN 1 and OPTN 2 cards share one height on wider screens so they line up */
@media (min-width:761px){.o1,#ro .readout{min-height:320px;box-sizing:border-box}.o1{display:flex;flex-direction:column;justify-content:flex-end}}
.ascii{transition:opacity .16s ease}
.ascii.swap{opacity:0}
.ro-main > *{position:relative;z-index:1}
.ro-main .from{--fs:clamp(56px,8vw,84px);font-size:var(--fs);color:rgba(0,0,0,.42)}
.ro-main .to{--fs:clamp(110px,16vw,180px);font-size:var(--fs)}
.ro-main .lv2{--arr:clamp(24px,3vw,36px);--fsf:clamp(56px,8vw,84px)}
.ro-main p{margin:18px 0 0;font-size:.75rem;letter-spacing:.06em}
.ascii{position:absolute!important;z-index:0!important;inset:-18% 0 -6% 0;margin:0;font:11px/11px var(--mono);color:rgba(0,0,0,.3);white-space:pre;overflow:hidden;pointer-events:none;user-select:none}
.ww-tag{position:absolute!important;right:14px;bottom:12px;font-size:.625rem;letter-spacing:.16em;background:#000;color:var(--lime);padding:4px 8px}

.ro-side .line{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:2px solid var(--line)}
.ro-side .line.tot{background:var(--block);color:var(--on-block);font-weight:700}
.ro-side .line.tot span:last-child{color:var(--lime);font-size:1.125rem}
.ro-side .bk{padding:14px 20px}
.bk div{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:.75rem}
.bk i,.sq{display:inline-block;width:10px;height:10px;background:var(--rc);border:1px solid var(--line);margin-right:8px;vertical-align:-1px}

/* OPTN 1 — B2 violet card */
.o1{background:var(--violet);color:var(--on-violet);border:3px solid var(--line);padding:30px 28px;position:relative;overflow:hidden}
/* CRADLE card background: irregular horizontal lines drifting down, faster lines overtaking them,
   rare glitch tears, and an LCD pixel texture with a refresh band. Faint --on-violet so text contrast holds;
   transform/opacity only. The card is rebuilt on every update, so --fxt (a negative delay taken from the
   page clock) keeps the motion from restarting; --fxo staggers individual layers. */
.o1{--fx:color-mix(in srgb,var(--on-violet) 8%,transparent);--fx2:color-mix(in srgb,var(--on-violet) 14%,transparent)}
.o1-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.o1-fx i{position:absolute;animation-delay:calc(var(--fxt,0s) + var(--fxo,0s))!important}
/* slow lines at 16px/s: two irregularly spaced sets with different periods (--p), so the spacing doesn't
   visibly repeat. Each is one period oversized and slides by exactly one period, so it loops seamlessly. */
.o1-fx .oh{left:0;right:0;top:calc(var(--p) * -1);bottom:0;animation:fx-y var(--d) linear infinite}
.o1-fx .oh.a{--p:360px;--d:22.5s;background:repeating-linear-gradient(180deg,transparent 0px 0px,var(--fx) 0px 2px,transparent 2px 41px,var(--fx) 41px 43px,transparent 43px 67px,var(--fx) 67px 69px,transparent 69px 139px,var(--fx) 139px 141px,transparent 141px 188px,var(--fx) 188px 190px,transparent 190px 214px,var(--fx) 214px 216px,transparent 216px 283px,var(--fx) 283px 285px,transparent 285px 360px)}
.o1-fx .oh.b{--p:504px;--d:31.5s;background:repeating-linear-gradient(180deg,transparent 0px 22px,var(--fx) 22px 24px,transparent 24px 97px,var(--fx) 97px 99px,transparent 99px 251px,var(--fx) 251px 253px,transparent 253px 302px,var(--fx) 302px 304px,transparent 304px 430px,var(--fx) 430px 432px,transparent 432px 504px)}
@keyframes fx-y{to{transform:translateY(var(--p))}}
/* faster lines: drawn at the bottom edge of a card-sized box that slides one card down at a constant speed
   (linear, never easing), then waits off-card. A and B are noticeably faster than the slow lines; C is a
   rare streak. Each keyframe's % is its crossing time over its cycle. */
.o1-fx .fh{left:0;right:0;top:-100%;height:100%;background:linear-gradient(180deg,transparent calc(100% - 2px),var(--fx2) 0);animation:var(--k) var(--d) linear infinite}
.o1-fx .fh.a{--k:fx-ya;--d:9s}                   /* crosses in 6s */
.o1-fx .fh.b{--k:fx-yb;--d:13s;--fxo:-5s}        /* crosses in 9s */
.o1-fx .fh.c{--k:fx-yc;--d:33s;--fxo:-8s}        /* crosses in 1.1s, rare */
@keyframes fx-ya{0%{transform:translateY(0)}67%,100%{transform:translateY(101%)}}
@keyframes fx-yb{0%{transform:translateY(0)}69%,100%{transform:translateY(101%)}}
@keyframes fx-yc{0%{transform:translateY(0)}3.3%,100%{transform:translateY(101%)}}
/* glitch: quiet most of the time, then a few signal tears flash across */
.o1-fx .gl{left:0;right:0;top:0;opacity:0;animation:fx-glitch 6.5s steps(1) infinite}
.o1-fx .gl.a{height:10px;background:linear-gradient(90deg,transparent 8%,var(--fx2) 8% 63%,color-mix(in srgb,var(--lime) 35%,transparent) 63% 66%,transparent 66%)}
.o1-fx .gl.b{height:26px;background:repeating-linear-gradient(0deg,var(--fx2) 0 2px,transparent 2px 5px);animation-name:fx-glitch2;animation-duration:8.9s}
@keyframes fx-glitch{0%{opacity:0}84%{opacity:1;transform:translate(-14px,60px)}85.5%{transform:translate(20px,150px) scaleY(.4)}87%{transform:translate(-6px,96px) scaleY(2)}88.5%{opacity:0}96%{opacity:1;transform:translate(10px,230px)}97%{opacity:0}}
@keyframes fx-glitch2{0%{opacity:0}31%{opacity:1;transform:translate(16px,120px)}32.5%{transform:translate(-22px,40px)}34%{opacity:0}72%{opacity:1;transform:translate(0,200px) scaleY(.5)}73%{opacity:0}}
/* LCD: subpixel stripes with pixel-row gaps, and a quick refresh band like a camera filming a screen */
.o1-fx .px{inset:0;background:repeating-linear-gradient(180deg,transparent 0 2px,var(--violet) 2px 3px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-violet) 9%,transparent) 0 1px,color-mix(in srgb,var(--on-violet) 4%,transparent) 1px 2px,transparent 2px 3px)}
.o1-fx .rf{left:0;right:0;top:-60%;height:60%;background:linear-gradient(transparent,color-mix(in srgb,var(--on-violet) 5%,transparent) 50%,transparent);animation:fx-roll 3.2s linear infinite}
@keyframes fx-roll{to{transform:translateY(267%)}}
@media (prefers-reduced-motion:reduce){.o1-fx i{animation:none!important}}
[data-motion=reduce] .o1-fx i{animation:none!important}
.o1-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:end}
.o1 .from{--fs:clamp(60px,9vw,100px);font-size:var(--fs);color:rgba(255,255,255,.55)}
.o1 .lv2{--arr:clamp(26px,3.4vw,42px);--fsf:clamp(60px,9vw,100px)}
.o1 .to{--fs:clamp(120px,18vw,220px);font-size:var(--fs);color:var(--lime)}
/* level ruler: one tick per level to 70; reached = short solid, gained = tall accent, not yet = hollow
   (an 80% outline stays 3:1 on every card; a dim fill couldn't, and differs from solid by shape too), next = partial fill */
.ruler{--off:color-mix(in srgb,var(--on-violet) 80%,transparent);position:relative;margin-top:18px;padding-top:22px}
.rl-ticks{display:flex;align-items:flex-end;gap:1px;height:30px}
.rl-ticks i{flex:1;height:12px;background:linear-gradient(90deg,var(--lime) var(--p,0%),transparent 0);box-shadow:inset 0 0 0 1px var(--off)}
.rl-ticks i.mj{height:20px}
.rl-ticks i.done{background:var(--on-violet);box-shadow:none;height:16px}
.rl-ticks i.gain{background:var(--lime);box-shadow:none;height:28px}
.rl-ticks i.mj.done{height:20px}
.rl-half{position:absolute;top:0;height:52px;left:calc(var(--x)*100%);border-left:2px dashed var(--on-violet);pointer-events:none}
.thp{position:absolute;top:0;left:6px;white-space:nowrap;font-size:.625rem;font-weight:700;letter-spacing:.12em;line-height:1;padding:4px 2px;margin:-4px -2px;pointer-events:auto;text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.rl-half.flip .thp{left:auto;right:8px}
.rl-marks{position:relative;height:1.1em;margin-top:4px;font-size:.5625rem;letter-spacing:.1em;color:var(--on-violet)}
.rl-marks span{position:absolute;left:calc(var(--x)*100%);transform:translateX(-50%)}
.rl-marks span:first-child{transform:none;left:0}
.rl-marks span:last-child{transform:none;left:auto;right:0}
.o1 .prog-l{margin-top:8px;font-size:.6875rem;letter-spacing:.1em;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px}
.ledger{background:var(--bg);color:var(--fg);border:3px solid #000}
.lg-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:2px solid var(--line)}
.lg-base{border-bottom:2px solid var(--line)}
.lg-base>.lg-row{border-bottom:0;font-weight:700;padding-bottom:8px}
.lg-split{display:flex;gap:2px;height:8px;margin:0 16px}
.lg-split i{height:100%;background:var(--rc);min-width:3px}
.lg-split.none i{background:var(--seg-off);background:color-mix(in srgb,var(--fg) 15%,transparent);flex:1}
.lg-tree{list-style:none;margin:0 16px 10px 24px;padding:6px 0 0}
.lg-tree li{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0 4px 20px;font-size:.75rem}
.lg-tree li::before{content:"";position:absolute;left:0;top:-6px;bottom:0;border-left:2px solid var(--muted)}
.lg-tree li:not(:first-child)::before{top:0}
.lg-tree li:last-child::before{bottom:50%}
.lg-tree li::after{content:"";position:absolute;left:0;top:50%;width:13px;border-top:2px solid var(--muted)}
.lg-tree .sq{margin:0}
.lg-tree .pc{margin-left:auto;font-size:.625rem;color:var(--muted);letter-spacing:.06em}
.lg-tree .v{min-width:4.75rem;text-align:right}
.lg-tree .empty{color:var(--muted)}
/* XP boost line: a dotted underline marks a name that shows its end time on hover / focus / touch-hold */
.bst{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
/* touch screens only: the long-press menu and text selection would pop up over the flyout (a mouse can still select the name) */
@media (pointer:coarse){:is(.bst,.thp){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
.bst-tip{position:fixed;z-index:60;max-width:min(280px,calc(100vw - 24px));padding:10px 12px;background:var(--block);color:var(--on-block);border:3px solid var(--line);box-shadow:6px 6px 0 var(--lime);font-size:.75rem;line-height:1.45;animation:pop .16s ease}
.bst-tip b{display:block;margin-bottom:4px;color:var(--on-block-muted);font-size:.625rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.bst-tip small{display:block;margin-top:2px;color:var(--on-block-muted);font-size:.6875rem}
@media (prefers-reduced-motion:reduce){.bst-tip{animation:none}}
[data-motion=reduce] .bst-tip{animation:none}
.lg-row.tot{background:var(--lime);color:var(--on-lime);font-weight:700;font-size:1rem;border-bottom:0}
.ro-side .lg-row.tot{background:var(--block);color:var(--on-block)}
.ro-side .lg-row.tot span:last-child{color:var(--lime);font-size:1.125rem}


/* ---------- TICKET STRIP ---------- */
.ticket{position:fixed;left:0;right:0;bottom:0;background:var(--block);color:var(--on-block);display:flex;align-items:stretch;padding:0 0 env(safe-area-inset-bottom) 22px;min-height:var(--ticket-h);z-index:5;border-top:6px solid var(--lime)}
.stats{flex:1;min-width:0;display:flex;align-items:center;gap:26px;overflow:hidden}
.ticket .k{font-size:.625rem;letter-spacing:.18em;color:var(--on-block-muted);white-space:nowrap}
.ticket .v{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.625rem;line-height:1;white-space:nowrap}
.ticket .v.lime{color:var(--lime)}
.ticket button{flex:none;border:0;padding:0 28px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:transparent;border-left:2px solid var(--block-line);white-space:nowrap}
.ticket .next{background:var(--lime);color:var(--on-lime);font-weight:700;min-width:190px;border-left:0}

@media (max-width:760px){
  :root{--ticket-h:64px}
  .mast .meta{display:none}
  .logo{padding:10px 16px}
  .logo h1{font-size:1.125rem}
  .gear{width:56px}
  .note::before{right:11px}
  /* phones: full screen below the masthead (top is set by app.js), scrolling inside itself; the page behind is locked and inert */
  .set-panel{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;border-width:3px 0 0;box-shadow:none;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
  /* DONE stays pinned to the bottom while the settings scroll above it; accent fill like the bottom bar's Next button */
  .sp-end{display:block;position:sticky;bottom:0;margin-top:auto;background:var(--bg);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .sp-sec+.sp-end{border-top-width:3px}
  #spDone,#spDone:hover{background:var(--lime);color:var(--on-lime);border-color:var(--lime);--focus:var(--on-lime)}
  .tab{padding:10px;flex-direction:column;align-items:flex-start;gap:4px}
  .tab .n{font-size:1.875rem;-webkit-text-stroke-width:1.5px}
  .tab .t{font-size:min(.75rem,3.9vw)}   /* phones: grows with text size, capped to fit */
  .tab .t small{display:none}
  .wrap{padding:22px 16px}
  .status-grid,.readout,.o1-grid{grid-template-columns:1fr}
  .big-field,.ro-main{border-right:0;border-bottom:3px solid var(--line)}
  .lv2{column-gap:10px}
  .o1{padding:22px 16px}
  .tip{display:none}
  thead{display:none}
  table,tbody{display:block}
  tbody tr.cat-row{display:block}
  tbody tr.cat-row th{display:block;font-size:1.125rem}
  tr[data-k]{display:grid;grid-template-columns:1fr auto;grid-template-areas:"sw step" "sub step";align-items:center}
  tr[data-k] td{padding:8px 12px}
  tr[data-k] td:first-child{grid-area:sw;padding-bottom:0}
  td.each{display:none}
  td.sub{grid-area:sub;text-align:left!important;font-size:.6875rem;padding-top:2px}
  td.sub::before{content:"SUBTOTAL ";color:var(--muted);font-weight:400}
  td.qcell{grid-area:step;display:flex;flex-direction:column;align-items:flex-end}
  /* large text: the stepper no longer fits beside the name, so it drops below it (rem tracks text size) */
  #rows{container-type:inline-size}
  @container (max-width:21rem){
    tr[data-k]{grid-template-columns:1fr;grid-template-areas:"sw" "step" "sub"}
    td.qcell{align-items:flex-start}
  }
  .tmini{max-width:170px}
  .qf input{width:4.875rem}
  .scrim.show{display:block}
  .tally{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:auto;border-width:3px 0 0;box-shadow:none;padding-bottom:env(safe-area-inset-bottom)}
  .t-keys button{min-height:60px;font-size:1.375rem}
  .t-keys .set,.t-keys .clr{font-size:.75rem}
  .ticket{padding-left:14px}
  .stats{gap:16px}
  .ticket .hide-sm{display:none}
  .ticket .v{font-size:min(1.25rem,5vw)}
  .ticket .k{font-size:min(.625rem,2.9vw)}
  .lv2 .cap{font-size:min(.625rem,2.9vw)}
  .ticket button{padding:0 14px;font-size:min(.6875rem,3vw);letter-spacing:.12em}
  .ticket .next{min-width:0}
}

/* ---------- live-site additions: recycle perk, field warnings ---------- */
/* recycle perk: collapsed until the row has a quantity, then expands (grid 0fr → 1fr) */
.rec-wrap{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .28s cubic-bezier(.2,.75,.25,1),margin-top .28s cubic-bezier(.2,.75,.25,1),opacity .2s ease}
.rec-wrap>.rec{overflow:hidden;min-height:0}
tr.has .rec-wrap{grid-template-rows:1fr;opacity:1;margin-top:6px}
@media (prefers-reduced-motion:reduce){.rec-wrap{transition:none}}
[data-motion=reduce] .rec-wrap{transition:none}
.rec{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.625rem;letter-spacing:.12em;color:var(--muted)}
.rec input{width:3.625rem;border:2px solid var(--line);background:var(--field);color:var(--fg);font:inherit;font-size:.875rem;font-weight:700;padding:4px 6px;outline:none}
.rec input:focus{border-color:var(--violet)}
.rec b{color:var(--fg);font-weight:700}
.xpwarn{margin-top:8px;font-size:.6875rem;letter-spacing:.06em;color:var(--error);font-weight:700}
@media (max-width:760px){.rec input{font-size:1rem}}

/* ---------- ABOUT PAGE (about.html) + its Settings link ---------- */
a.plain{display:flex;align-items:center;justify-content:center;text-decoration:none}
.about-page{padding-bottom:20px}   /* no bottom bar on this page */
a.logo{text-decoration:none}
.logo-t{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.375rem;text-transform:uppercase;line-height:.85}
.mast-back{margin-left:auto;display:flex;align-items:center;padding:0 22px;min-height:48px;border-left:2px solid var(--block-line);color:var(--on-block);text-decoration:none;font-size:.6875rem;letter-spacing:.18em;font-weight:700}
.mast-back:hover{background:var(--lime);color:var(--on-lime);--focus:var(--on-lime)}   /* the cream ring vanishes on the accent fill */
.mast-back:focus-visible,a.logo:focus-visible{outline-offset:-6px}
a.logo{--focus:var(--on-lime)}
.about{max-width:760px}
.about section{border-top:3px solid var(--line);padding:18px 0 6px}
.about h2{margin:0 0 10px;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:1.25rem;text-transform:uppercase;letter-spacing:.01em}
.about p{margin:0 0 12px;font-size:.875rem;line-height:1.6;white-space:pre-line;max-width:66ch}
.about-note{margin-top:28px;border-top:3px solid var(--line);padding-top:14px}
.about-note p{font-size:.6875rem;line-height:1.6;color:var(--muted);letter-spacing:.04em}
@media (max-width:760px){.logo-t{font-size:1.125rem}.mast-back{padding:0 16px}}