/* Principles of Jev: the lesson layer on top of the JEV SAYS! v3 tokens and layers (game.css, copied).
   DESIGN.md §1: a laptop at arm's length (1920 × 1080–1280 stage px; 1440×900 → scale .75), a phone second
   (1080 × 1920–2400). The card is white on every ground; small text never sits bare on the field; one
   accent (Jev's colour); the learner's colour is Team 1 (Cobalt). Floors: nothing on the field under 20 px,
   nothing on a card under 22 px (phones: var(--fmin)). */

:root { --learner: var(--team-1); --learner-c: var(--team-1-c); --learner-fill: var(--team-1-fill); }

/* ============================================================ STAGE, TOP BAR, HUD */
#stage { grid-template-rows: 88px minmax(0, 1fr) 132px; }
#stage.portrait { grid-template-rows: 104px minmax(0, 1fr) 150px; }
#topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 40px; gap: 28px; }
.wordmark { font: 700 24px/1 var(--sans); letter-spacing: -.02em; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; justify-self: start; white-space: nowrap; }
.rail { grid-column: 2; width: 100%; max-width: 780px; justify-self: center; display: flex; flex-direction: column; gap: 9px; }
.rail-eb { font-size: 19px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .12em; }
.rail-eb .rail-mod { color: var(--muted); }
.rail-all { height: 3px; background: var(--line-g); border-radius: 2px; overflow: hidden; }
.rail-all i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 60%, transparent); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--silk); }
.rail-segs { display: flex; gap: 10px; }
.rail-segs .seg { position: relative; flex: 1; height: 6px; background: var(--line-g); border-radius: 3px; }
.rail-segs .seg i { position: absolute; inset: 0; background: var(--ink); border-radius: 3px; transform: scaleX(0); transform-origin: 0 50%; }
.rail-segs .seg.done i { transform: scaleX(1); }
.rail-segs .seg em { position: absolute; top: 10px; left: 0; font: 500 14px/1 var(--sans); font-style: normal; color: var(--muted); display: none; }
.rail-segs .seg.here { box-shadow: 0 3px 0 -1px var(--accent); }
.rail-segs .seg.here i { transform: scaleX(.35); background: var(--accent); }
.chips { grid-column: 3; }
.chip { font-size: 18px; padding: 9px 14px; }
.chip.off::before { background: var(--muted); }
.chip .chip-short { display: none; }

#hud { position: relative; z-index: 3; display: grid; grid-template-columns: 380px minmax(0, 1fr) 380px; align-items: center; gap: 24px; padding: 0 40px 18px; background: var(--bg); border-top: 1px solid var(--line-g); }
.xp-pod { width: 330px; height: 92px; display: flex; align-items: center; gap: 22px; padding: 0 24px; box-shadow: var(--shadow-card); }
.xp-l { display: flex; flex-direction: column; gap: 6px; min-width: 110px; }
.xp-l .eyebrow { font-size: 18px; }
.xp-n { font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -.02em; transform-origin: left center; display: inline-block; }
.xp-chips { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.xchip { font-size: 18px; font-weight: 500; letter-spacing: .08em; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--card-muted); white-space: nowrap; }
.xchip.streak.hot { background: var(--learner-fill); color: var(--on-team-1); border-color: transparent; }
.xchip.combo { border-color: var(--accent-ink); color: var(--accent-ink); }
.cue-wrap { display: flex; justify-content: center; min-width: 0; }
.cue-btn { font: 500 24px/1.2 var(--sans); color: var(--ink); background: var(--plate); border: 1px solid var(--line-g-strong); border-radius: var(--r-pill); padding: 14px 30px; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cue-btn:hover { border-color: var(--ink); }
.deck { justify-self: end; display: flex; align-items: center; gap: 22px; }
.deck-fan { position: relative; width: 190px; height: 88px; }
.deck-fan .mini { position: absolute; left: 30px; top: 6px; width: 120px; height: 76px; background: var(--card); color: var(--card-ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; transform-origin: 50% 100%; }
.deck-fan .mini::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--accent-ink); border-radius: 0 2px 2px 0; }
.deck-fan .mini b { font-size: 16px; color: var(--accent-ink); }
.deck-fan .mini span { font-size: 12px; line-height: 1.15; }
.deck-fan .more { position: absolute; right: -10px; bottom: 0; font-size: 18px; color: var(--muted); }
.deck-n { font-size: 18px; color: var(--ink); }
.hud-phone { display: none; }
#toast { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); z-index: 40; max-width: 1400px; text-align: center; background: var(--plate); color: var(--ink); border: 1px solid var(--line-g-strong); border-radius: var(--r-card); padding: 14px 26px; font-size: 24px; line-height: 1.35; box-shadow: var(--shadow-card); }
.award { position: absolute; z-index: 32; font: 700 32px/1 var(--sans); padding: 10px 18px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.boot-sub { margin-top: 28px; font-size: max(15px, 1.2vw); color: var(--muted); }
.boot-logo { font-size: min(11vw, 20vh); }

/* ============================================================ SHARED */
.screen { padding: 26px 48px 24px; gap: 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen > * { flex-shrink: 0; }
.screen.scroll { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 60px; scrollbar-width: thin; }
.card { position: relative; }
.tag { font-size: 18px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--card-ink); white-space: nowrap; }
.tag.acc { background: var(--accent-ink); border-color: transparent; color: #fff; }
.tag.muted { color: var(--card-muted); }
code { font: 500 .92em/1 ui-monospace, "SF Mono", Menlo, monospace; background: var(--tint); border: 1px solid var(--line); border-radius: 5px; padding: .1em .3em; }
.muted { color: var(--muted); }
.kt .w.cw { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; font-size: .86em; background: var(--tint); border-radius: 6px; padding: 0 .18em; }
.card .muted { color: var(--card-muted); }
.ok { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: 24px; font-weight: 500; color: var(--card-muted); background: #fff; transition: background-color .2s, color .2s, border-color .2s; }
.lbtn { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 500 22px/1 var(--sans); color: var(--accent-ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 10px 18px; white-space: nowrap; }
.lbtn kbd { font-size: 16px; padding: 3px 7px; color: var(--card-muted); border-color: var(--line-strong); }
.lbtn:hover { border-color: var(--accent-ink); }
.lbtn.on { background: var(--accent-ink); color: #fff; border-color: transparent; }
.lbtn.on kbd { color: #fff; border-color: rgba(255,255,255,.6); }
:not(.card) > .lbtn, .map-head .lbtn, .title-foot .lbtn, .cmd-foot .lbtn, .sum-btns .lbtn, .book-nav .lbtn, .drill-cta .lbtn { background: var(--plate); color: var(--ink); border-color: var(--line-g-strong); }
.card .lbtn, .notecard .lbtn { background: #fff; color: var(--accent-ink); border-color: var(--line-strong); }
.card .lbtn.on, .notecard .lbtn.on { background: var(--accent-ink); color: #fff; border-color: transparent; }
.card .lbtn.on kbd { color: #fff; border-color: rgba(255,255,255,.6); }
.pq-top, .pc-top, .gc-top, .xc-top, .xe-top, .nc-top, .icard-top, .ncard-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.stblock { width: 100%; background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.stblock .eyebrow { font-size: 18px; }
.st-text { font-size: 28px; line-height: 1.4; color: var(--card-ink); }
.st-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.st-kv dt { font-size: 20px; color: var(--card-muted); letter-spacing: .04em; padding-top: 4px; white-space: nowrap; }
.st-kv dd { margin: 0; font-size: 26px; line-height: 1.35; color: var(--card-ink); }
.stblock.big .st-text { font-size: 32px; }
.stblock.empty p { margin: 0; font-size: 24px; }
.note-slot { width: 1500px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.notecard { width: 1500px; padding: 22px 36px 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.notecard p { margin: 0; font-size: 26px; line-height: 1.4; }
.notecard .why { font-size: 27px; color: var(--card-ink); }
.nv.miss { color: var(--card-ink); font-weight: 500; }
.nv.tie { color: var(--card-muted); }
.nv.flip { color: var(--accent-ink); font-weight: 500; }
.nv.off { color: var(--card-muted); font-style: italic; }
.nlinks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.legend { display: flex; align-items: center; gap: 12px; font-size: 20px; color: var(--muted); background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-pill); padding: 8px 20px; }
.lg-bar { width: 34px; height: 8px; background: var(--accent-ink); border-radius: 4px; }
[data-ground="deep"] .lg-bar { background: var(--accent); }
.lg-tick { width: 3px; height: 20px; background: var(--muted); margin-left: 14px; }
.plate { font-size: 22px; }

/* ============================================================ OPTION TILES + RACE */
.otiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 1640px; }
.otiles.one { grid-template-columns: 1fr; width: 100%; gap: 12px; }
.otile { position: relative; height: 112px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 0 24px 12px; border: 2px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; text-align: left; font: inherit; color: var(--card-ink); cursor: pointer; transition: border-color .2s, background-color .2s, scale .45s cubic-bezier(.33,1,.68,1); will-change: transform, opacity; }
div.otile { cursor: default; }
@media (hover: hover) { button.otile:hover { border-color: var(--line-strong); } }
.ol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.op { font-size: 36px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.os { font-size: 20px; line-height: 1.25; color: var(--card-muted); }
.or { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 150px; }
.or .rank { font-size: 20px; font-weight: 500; color: var(--card-muted); line-height: 1; visibility: hidden; letter-spacing: .04em; }
.or .pct { font-size: 40px; font-weight: 700; font-style: normal; line-height: 1; color: var(--card-ink); }
.or .micro { font-size: 18px; font-style: normal; color: var(--card-muted); line-height: 1; white-space: nowrap; }
.otile.rev .rank { visibility: visible; }
.otrack { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--tint); }
.obar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-ink); opacity: .55; }
.otile.win .obar { opacity: 1; }
.oghost { position: absolute; bottom: 0; width: 3px; height: 14px; background: var(--card-ink); opacity: .55; display: none; border-radius: 2px 2px 0 0; }
.otile.lock { border: 3px solid var(--learner-c); }
.otile.lock .ok { background: var(--learner-fill); color: var(--on-team-1); border-color: var(--learner-fill); }
.otile.win { background: color-mix(in srgb, var(--accent-ink) 8%, #fff); border-color: var(--accent-ink); }
.otile.win.lock { border-color: var(--learner-c); }
.otile.win .pct, .otile.house1 .rank { color: var(--accent-ink); }
.otile.miss .op, .otile.miss .pct { color: var(--card-muted); }
.otile.tie { border-style: dashed; border-color: var(--card-muted); }
.otile.gainer { border: 3px solid var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-ink) 18%, transparent), var(--shadow-card); }
.otiles.compact .otile { height: auto; min-height: 74px; padding: 8px 18px 14px; gap: 14px; grid-template-columns: 40px minmax(0, 1fr) auto; }
.otiles.compact .op { line-height: 1.08; }
.otiles.compact .ok { width: 40px; height: 40px; font-size: 20px; }
.otiles.compact .op { font-size: 28px; }
.otiles.compact .os { display: none; }
.otiles.compact .or { flex-direction: row; align-items: baseline; gap: 12px; min-width: 110px; }
.otiles.compact .or .pct { font-size: 32px; }
.otiles.compact .or .rank { display: none; }
.otiles.compact .or .micro { order: -1; }
.dpill { height: 36px; display: inline-flex; align-items: center; font: 700 24px/1 var(--sans); padding: 0 12px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; align-self: center; }
.dpill.up { background: var(--accent-ink); color: #fff; }
.dpill.down, .dpill.flat { background: var(--tint); color: var(--card-muted); border: 1px solid var(--line-strong); }
.otile .dimmed, .dimmed { scale: .985; }

/* ============================================================ TITLE */
.scr-title { justify-content: flex-start; padding-top: 26px; gap: 18px; }
.wm-big { font-size: 140px; font-weight: 700; line-height: .9; letter-spacing: -.035em; white-space: nowrap; color: var(--ink); margin: 0; }
.tagline { font-size: 30px; padding: 12px 30px; }
.title-main { display: flex; gap: 36px; align-items: stretch; margin-top: 6px; }
.hook { width: 1000px; padding: 26px 32px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-card); }
.hook .otiles { width: 100%; grid-template-columns: 1fr; gap: 10px; }
.hook-q { font-size: 56px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--card-ink); }
.hook-line { min-height: 80px; display: flex; flex-direction: column; gap: 6px; }
.hook-line .hl1 { font-size: 40px; letter-spacing: -.01em; color: var(--accent-ink); }
.hook-line .hl2 { font-size: 26px; color: var(--card-ink); }
.chg { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.chg-old { display: inline-block; }
.chg-new { display: inline-block; color: var(--accent-ink); position: absolute; left: 0; top: 0; }
.chg-old[style*="none"] + .chg-new { position: static; }
.chg-line { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--accent-ink); border-radius: 2px; }
.scr-title .menu-panel { width: 620px; margin-top: 0; padding: 6px 28px 18px; }
.mrow { grid-template-columns: 76px minmax(0, 1fr) 30px; grid-template-rows: auto auto; height: auto; padding: 16px 0; row-gap: 4px; }
.mrow .mk { grid-row: 1 / 3; font-size: 16px; font-weight: 500; color: var(--card-muted); border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: 6px 8px; justify-self: start; letter-spacing: .04em; }
.mrow .lbl { font-size: 32px; grid-column: 2; }
.mrow .sub { grid-column: 2; grid-row: 2; text-align: left; font-size: 20px; }
.mrow .arr { grid-column: 3; grid-row: 1 / 3; }
.title-foot { margin-top: 12px; padding-top: 16px; }
.scr-title .ticker { position: static; transform: none; margin-top: auto; margin-bottom: 18px; font-size: 20px; padding: 10px 24px; }
.errcard { width: 1300px; padding: 40px; display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.errcard p { margin: 0; font-size: 28px; }

/* ============================================================ PRINCIPLE (NUGGET) */
.scr-nugget { justify-content: safe center; padding-bottom: 30px; }
.ncard { width: 1560px; padding: 40px 64px 36px 96px; display: flex; flex-direction: column; gap: 22px; box-shadow: var(--shadow-card); }
.rule-l { position: absolute; left: 0; top: 36px; bottom: 36px; width: 8px; border-radius: 0 4px 4px 0; background: var(--accent-ink); }
.nhead { font-size: 76px; font-weight: 700; letter-spacing: -.025em; line-height: 1.02; margin: 0; color: var(--card-ink); }
.nsteps { display: flex; flex-direction: column; gap: 20px; margin-top: 6px; }
.nstep { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 18px; border-top: 1px solid var(--line); transition: opacity .35s; }
.nstep.past { opacity: .5; }
.nstep-eb { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.nstep-eb .eyebrow { font-size: 22px; }
.nstep-sub { font-size: 20px; color: var(--card-muted); }
.nstep-t { margin: 0; font-size: 34px; line-height: 1.38; color: var(--card-ink); }
.nev { display: flex; gap: 16px; align-items: baseline; font-size: 20px; color: var(--card-muted); line-height: 1.35; border-top: 1px solid var(--line); padding-top: 14px; }
.nev .eyebrow { font-size: 16px; flex: none; }

/* ============================================================ INSTRUMENT */
.scr-instrument { justify-content: safe center; padding-bottom: 30px; }
.icard { width: 1680px; padding: 32px 44px 26px; display: flex; flex-direction: column; gap: 22px; box-shadow: var(--shadow-card); }
.icols { display: grid; grid-template-columns: 1fr; gap: 26px; }
.icols:has(.icol + .icol) { grid-template-columns: 1fr 1fr; }
.icol { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.iq { display: flex; flex-direction: column; gap: 14px; }
.iq-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.iq-t { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--card-ink); }
.iopts { width: 100%; border-collapse: collapse; font-size: 26px; }
.iopts th { white-space: nowrap; text-align: left; font-size: 18px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--card-muted); padding: 6px 12px; border-bottom: 1px solid var(--line-strong); }
.iopts td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.3; }
.iopts td:first-child { white-space: nowrap; width: 1%; }
.icrit p { margin: 6px 0 0; font-size: 24px; line-height: 1.4; }
.ifoot { display: flex; justify-content: space-between; gap: 20px; font-size: 20px; color: var(--card-ink); border-top: 1px solid var(--line); padding-top: 14px; }

/* ============================================================ PRACTICE */
.scr-practice { gap: 16px; }
.qcard.pq { width: 1500px; padding: 24px 48px 28px; gap: 16px; align-items: stretch; }
.pq-q { font-size: 54px; line-height: 1.1; text-align: left; margin: 0; }
.pq .stblock { margin-top: 2px; }

/* ============================================================ PAIR, NOUL PAIR */
.scr-pair, .scr-noulpair { gap: 18px; }
.pair-prompt { width: 1640px; display: flex; flex-direction: column; gap: 8px; background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-card); padding: 16px 28px; color: var(--ink); }
.pair-prompt .eyebrow.acc { color: var(--accent-g); }
.pp-q { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.pp-change { margin: 0; font-size: 24px; color: var(--muted); line-height: 1.35; }
.pair-prompt .stblock { margin-top: 6px; background: color-mix(in srgb, var(--plate) 70%, var(--bg)); border-color: var(--line-g); }
.pair-prompt .stblock .st-text, .pair-prompt .stblock dd { color: var(--ink); }
.pair-row { display: flex; gap: 32px; width: 1640px; align-items: stretch; }
.paircard, .npcard { flex: 1; min-width: 0; padding: 22px 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); text-align: left; font: inherit; color: var(--card-ink); }
.paircard.before { opacity: 1; }
.paircard.before .otile { box-shadow: none; }
.pairq { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.paircard .stblock .st-text { font-size: 24px; }
.npcard { cursor: pointer; border: 2px solid var(--line); transition: border-color .2s; }
.npcard.lock { border: 3px solid var(--learner-c); }
.npcard.lock .ok { background: var(--learner-fill); color: var(--on-team-1); border-color: var(--learner-fill); }
.npcard.win { border-color: var(--accent-ink); }
.npcard.miss, .udbtn.miss, .prow.miss, .rrow.dim, .pcard.ahead { background: #ececec; }
.npcard.miss :is(p, .np-q, .g-num), .udbtn.miss, .prow.miss .pt, .rrow.dim .rt, .pcard.ahead :is(.pc-t, .pc-o) { color: var(--card-muted); }
.pcard.ahead .rule-l { background: var(--line-strong); }
.np-q { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.np-crit { margin: 0; font-size: 21px; line-height: 1.35; color: var(--card-muted); }
.minigauge { margin-top: auto; display: flex; flex-direction: column; gap: 10px; opacity: .35; transition: opacity .3s; }
.minigauge.on { opacity: 1; }
.g-track { position: relative; height: 12px; background: var(--tint); border: 1px solid var(--line); border-radius: 6px; margin: 18px 0 6px; }
.g-needle { position: absolute; top: -18px; bottom: -8px; left: 0; width: 5px; margin-left: -2px; background: var(--accent-ink); border-radius: 3px; }
.g-house { position: absolute; top: -8px; bottom: -8px; left: 0; width: 3px; margin-left: -1px; background: var(--card-ink); opacity: .5; }
.g-row { display: flex; align-items: baseline; gap: 16px; }
.g-num { font-size: 56px; color: var(--accent-ink); line-height: 1; }
.g-micro { font-size: 20px; font-style: normal; color: var(--card-muted); margin-left: auto; }
.updown { display: flex; gap: 24px; }
.udbtn { cursor: pointer; display: inline-flex; align-items: center; gap: 18px; font: 500 32px/1 var(--sans); color: var(--card-ink); padding: 14px 34px 14px 16px; border: 2px solid var(--line); border-radius: var(--r-card); }
.udbtn.lock { border: 3px solid var(--learner-c); }
.udbtn.lock .ok { background: var(--learner-fill); color: var(--on-team-1); border-color: var(--learner-fill); }


/* ============================================================ REFLECT, EARN */
.scr-reflect { justify-content: safe center; }
.rcard { width: 1400px; padding: 40px 60px 40px 90px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-card); }
.rq-t { margin: 0; font-size: 64px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--card-ink); }
.r-sub { margin: 0 0 8px; font-size: 24px; }
.rrows { display: flex; flex-direction: column; gap: 14px; }
.rrow { cursor: pointer; display: flex; align-items: center; gap: 22px; padding: 18px 22px; border: 2px solid var(--line); border-radius: var(--r-card); box-shadow: none; text-align: left; font: inherit; color: var(--card-ink); transition: border-color .2s, opacity .3s; }
.rrow .rt { font-size: 32px; line-height: 1.3; }
.rrow.lock { border: 3px solid var(--learner-c); }
.rrow.lock .ok { background: var(--learner-fill); color: var(--on-team-1); border-color: var(--learner-fill); }

.scr-earn { justify-content: safe center; gap: 30px; }
.earned { font-size: 72px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pcard { width: 560px; min-height: 330px; padding: 36px 40px 34px 56px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); will-change: transform; }
.pcard .rule-l { top: 30px; bottom: 30px; }
.pc-t { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--card-ink); }
.pc-o { margin: 0; font-size: 26px; line-height: 1.35; color: var(--card-ink); }
.pcard.small { width: auto; min-height: 0; padding: 18px 20px 18px 30px; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.pcard.small .rule-l { top: 16px; bottom: 16px; width: 5px; }
.pcard.small .eyebrow { font-size: 15px; }
.pcard.small .pc-t { font-size: 24px; }
.pcard.small .pc-o { font-size: 17px; line-height: 1.3; }
.deckgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; width: 1760px; }
.otiles.keys .op { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8em; font-weight: 500; }
.kept { display: flex; gap: 18px; align-items: baseline; font-size: 28px; padding: 12px 28px; }
.kept .eyebrow { font-size: 18px; color: var(--accent-g); }
.drill-cta { display: flex; align-items: center; gap: 20px; font-size: 24px; padding: 10px 14px 10px 26px; }

/* ============================================================ EXERCISE */
.scr-exercise { flex-direction: row; align-items: stretch; justify-content: center; gap: 28px; padding-bottom: 18px; }
.xcol { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.xcol.left { width: 1060px; }
.xcol.right { width: 720px; }
.xcard { padding: 24px 32px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
.xc-title { margin: 0; font-size: 42px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; color: var(--card-ink); }
.xc-body { background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 14px 20px; }
.xc-text { font-size: 29px; line-height: 1.42; color: var(--card-ink); }
.xc-goal { display: flex; flex-direction: column; gap: 6px; }
.xc-goal p { margin: 0; font-size: 27px; line-height: 1.35; color: var(--card-ink); font-weight: 500; }
.xc-target { display: flex; gap: 14px; align-items: baseline; font-size: 21px; color: var(--card-muted); }
.xc-target .eyebrow { font-size: 16px; }
.xc-note { margin: 0; font-size: 20px; color: var(--card-muted); font-style: italic; }
.xedit { padding: 20px 32px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); flex: 1; min-height: 0; }
.xe-count { font-size: 20px; color: var(--card-muted); }
.xe-count.over { color: var(--accent-ink); font-weight: 700; }
.xe-ta { width: 100%; resize: none; font: 500 34px/1.3 var(--sans); color: var(--card-ink); background: #fff; border: 2px solid var(--line-strong); border-radius: 10px; padding: 14px 18px; outline: none; caret-color: var(--accent-ink); min-height: 140px; }
.xe-ta:focus { border-color: var(--learner-c); }
.xe-ta.reading { color: var(--card-muted); }
.xe-lint { min-height: 26px; font-size: 22px; color: var(--accent-ink); font-weight: 500; }
.xe-bar { display: flex; align-items: center; gap: 20px; }
.xe-run { font-size: 28px; padding: 16px 36px; background: var(--accent-ink); color: #fff; }
.xe-run .key { color: rgba(255,255,255,.75); font-size: 20px; }
.xe-run.ghost-off { opacity: .5; }
.xe-run.busy { opacity: .7; }
.xe-tries { font-size: 20px; }
.xe-explain { display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--accent-ink) 6%, #fff); border: 2px solid var(--accent-ink); border-radius: 10px; padding: 14px 18px; }
.xe-explain .eyebrow { font-size: 17px; }
.xe-exrow { display: flex; gap: 12px; }
.xe-in { flex: 1; font: 400 28px/1.3 var(--sans); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--card-ink); background: #fff; outline: none; }
.xe-in.need { border-color: var(--accent-ink); }
.xe-exok { background: var(--accent-ink); color: #fff; }
.xe-det summary { cursor: pointer; font-size: 20px; color: var(--card-muted); }
.xe-rules { margin: 8px 0 0; padding-left: 26px; font-size: 20px; line-height: 1.45; color: var(--card-ink); }
.gcard { padding: 22px 30px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.gcard.passed { background: color-mix(in srgb, var(--accent-ink) 5%, #fff); }
.gn-bigrow { display: flex; align-items: baseline; justify-content: space-between; }
.gn-lab { font-size: 18px; }
.gn-big { font-size: 104px; line-height: .95; color: var(--accent-ink); letter-spacing: -.03em; }
.gn-track { position: relative; height: 96px; margin: 44px 0 0; }
.gn-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--line-strong); border-radius: 2px; }
.gn-pass { position: absolute; top: 20px; bottom: 20px; background: color-mix(in srgb, var(--accent-ink) 11%, transparent); border-radius: 4px; }
.gcard.passed .gn-pass { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.gn-ticks span { position: absolute; top: calc(50% - 10px); width: 2px; height: 20px; margin-left: -1px; background: var(--line-strong); }
.gn-thr { position: absolute; top: 4px; bottom: 4px; width: 0; border-left: 3px dashed var(--card-ink); margin-left: -1px; }
.gn-thrlab { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 700; padding: 6px 12px; white-space: nowrap; background: #fff; color: var(--card-ink); border-color: var(--line-strong); }
.gn-needle { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: var(--accent-ink); border-radius: 3px; will-change: transform; }
.gn-needle i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--accent-ink); border: 3px solid #fff; }
.gn-ghost { position: absolute; top: 14px; bottom: 14px; width: 2px; margin-left: -1px; background: var(--card-muted); opacity: .7; }
.gn-ghost i { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 500 15px/1 var(--sans); font-style: normal; color: var(--card-muted); }
.gn-ends { display: flex; justify-content: space-between; font-size: 18px; color: var(--card-muted); }
.gn-ref { min-height: 32px; display: flex; gap: 14px; align-items: baseline; font-size: 22px; }
.gn-ref .rv.good { color: var(--card-ink); font-weight: 500; }
.gn-ref .rv.bad { color: var(--accent-ink); font-weight: 700; }
.gn-foul { position: absolute; left: -40px; right: -40px; top: 46%; height: 70px; background: var(--card-ink); color: #fff; transform: rotate(-7deg) scaleX(0); display: grid; place-items: center; font: 700 48px/1 var(--sans); letter-spacing: .1em; pointer-events: none; opacity: 0; }
.gn-foul.on { opacity: .92; }
.fbcard { padding: 20px 28px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); flex: 1; min-height: 0; overflow: hidden; }
.fb-tries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.fb-try { display: grid; grid-template-columns: 70px 70px 150px 90px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 19px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fb-try .fb-n { color: var(--card-muted); }
.fb-try .fb-v { font-weight: 700; font-size: 22px; }
.fb-try .fb-r { color: var(--card-muted); }
.fb-try .fb-q { color: var(--card-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-try.pass .fb-mark { color: var(--accent-ink); font-weight: 700; font-size: 22px; }
.fb-try.foul .fb-mark, .fb-try.offgoal .fb-mark { color: var(--card-ink); font-weight: 700; letter-spacing: .06em; font-size: 16px; }
.fb-line p { margin: 0 0 6px; font-size: 24px; line-height: 1.38; }
.fb-line p.small { font-size: 18px; }
.fb-line .sol { font-weight: 700; color: var(--accent-ink); }
.fb-hints { display: flex; flex-direction: column; gap: 10px; }
.hint { border-left: 4px solid var(--accent-ink); padding: 6px 0 6px 16px; }
.hint p { margin: 4px 0 0; font-size: 22px; line-height: 1.35; }
.fb-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ============================================================ DEMOS */
.scr-demo { gap: 16px; }
.demo-host { width: 1640px; display: flex; flex-direction: column; gap: 12px; }
.predict { background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-card); padding: 16px 24px 18px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.predict .eyebrow.acc { color: var(--accent-g); }
.pr-q { display: flex; flex-direction: column; gap: 6px; }
.pr-t { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.prows { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; }
.prow { cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 2px solid var(--line); border-radius: var(--r-card); text-align: left; font: inherit; color: var(--card-ink); box-shadow: none; }
.prow .pt { font-size: 26px; line-height: 1.25; }
.prow.lock { border: 3px solid var(--learner-c); }
.prow.lock .ok { background: var(--learner-fill); color: var(--on-team-1); border-color: var(--learner-fill); }
.prow.win { background: color-mix(in srgb, var(--accent-ink) 8%, #fff); border-color: var(--accent-ink); }

.predict.done { padding: 10px 20px 12px; }
.predict.done .pr-t { font-size: 26px; }
.predict.done .prow { padding: 8px 14px; }
.predict.done .prow .pt { font-size: 21px; }
.predict.done .ok { width: 36px; height: 36px; font-size: 18px; }
.predict.done .prow:not(.lock):not(.win) { display: none; }
.predict.done .prows { grid-template-columns: repeat(auto-fit, minmax(420px, max-content)); }
.tally-row { display: flex; align-items: center; gap: 20px; background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-card); padding: 10px 20px; }
.tally { display: flex; gap: 10px; }
.tslot { width: 118px; height: 64px; border: 1px dashed var(--line-g-strong); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); }
.tslot i { font: 500 14px/1 var(--sans); font-style: normal; }
.tslot b { font-size: 20px; color: var(--ink); }
.tslot.on { border-style: solid; background: var(--card); }
.tslot.on b, .tslot.on i { color: var(--card-ink); }
.tslot.on.t1 { background: var(--learner-fill); border-color: transparent; }
.tslot.on.t1 b, .tslot.on.t1 i { color: var(--on-team-1); }
.scr-noise .qcard.pq { padding: 18px 40px 20px; gap: 10px; }
.scr-noise .pq-q { font-size: 44px; }
/* Magic 8-Ball */
.m8card { width: 1680px; padding: 16px 32px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-card); }
.m8q { margin: 0; font-size: 30px; font-weight: 700; color: var(--card-ink); }
.m8q .eyebrow { font-size: 16px; }
.m8cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 28px; align-items: start; }
.m8h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--line-strong); padding-bottom: 8px; margin-bottom: 6px; }
.m8sum { font-size: 34px; color: var(--card-ink); }
.m8col.gtop .m8h { border-bottom-color: var(--accent-ink); }
.m8col.gtop .m8sum { color: var(--accent-ink); }
.m8row { display: grid; grid-template-columns: 250px 1fr 64px; gap: 10px; align-items: center; height: 31px; }
.m8l { font-size: 20px; color: var(--card-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m8t { position: relative; height: 12px; background: var(--tint); border-radius: 6px; overflow: hidden; }
.m8b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--card-muted); border-radius: 6px; }
.m8row.top .m8b { background: var(--accent-ink); }
.m8row.top .m8l { font-weight: 700; color: var(--accent-ink); }
.m8n { font-size: 20px; font-style: normal; text-align: right; color: var(--card-ink); }
.m8toggle { display: flex; gap: 12px; flex-wrap: wrap; }
/* primitives */
.prim-a .pcol { flex: 1; padding: 20px 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.prim-a.shrink .pcol { padding: 14px 24px; }
.pc-q { margin: 0; font-size: 30px; font-weight: 700; color: var(--card-ink); }
.prim-a .pcol p.muted { margin: 0; font-size: 21px; }
.vmeter { display: flex; justify-content: center; }
.vtrack { position: relative; width: 60px; height: 170px; background: var(--tint); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.prim-a.shrink .vtrack { height: 110px; }
.vbar { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--accent-ink); }
.vtick { position: absolute; left: -4px; right: -4px; height: 3px; background: var(--card-ink); }
.pc-num { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.big { font-size: 64px; font-weight: 700; color: var(--accent-ink); line-height: 1; }
.micro.center { text-align: center; font-size: 18px; font-style: normal; color: var(--card-muted); }
.prim-b { width: 1640px; display: flex; flex-direction: column; gap: 12px; }
.prim-b-head { display: flex; gap: 16px; align-items: center; background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-pill); padding: 8px 18px; align-self: flex-start; }
.prim-b-head .eyebrow.acc { color: var(--accent-g); }
.prim-b-head .tag { color: var(--muted); border-color: var(--line-g-strong); }
.prim-b > .stblock { background: var(--plate); border-color: var(--line-g); }
.prim-b > .stblock dd, .prim-b > .stblock dt { color: var(--ink); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcol { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.tcol p.muted { margin: 0; font-size: 19px; }
.srow { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 64px; gap: 10px; align-items: center; font-size: 19px; }
.srow .sl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .st { height: 10px; background: var(--tint); border-radius: 5px; overflow: hidden; }
.srow .sb { display: block; height: 100%; background: var(--accent-ink); }
.srow i { font-style: normal; text-align: right; font-weight: 700; }
/* composition */
.ctable { width: 1640px; padding: 12px 24px; box-shadow: var(--shadow-card); }
.crow { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr 1fr; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.crow.head { padding-top: 6px; }
.crow.head .eyebrow { font-size: 16px; }
.crow:last-child { border-bottom: 0; }
.cr-case { display: flex; flex-direction: column; gap: 6px; }
.cr-case p { margin: 0; font-size: 22px; line-height: 1.3; }
.cr-case .tag { align-self: flex-start; font-size: 15px; }
.cr-g { position: relative; height: 34px; background: var(--tint); border-radius: 6px; overflow: hidden; }
.cg-b { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent-ink) 55%, #fff); }
.cr-g i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; font-size: 20px; }
.cr-r { display: flex; flex-direction: column; gap: 4px; }
.cres { font-size: 26px; letter-spacing: .06em; }
.cres.pass { color: var(--accent-ink); }
.cres.fail { color: var(--card-ink); }
.cok { font-size: 17px; }
.cok.good { color: var(--card-muted); }
.cok.bad { color: var(--accent-ink); font-weight: 700; }
/* repeat */
.rpcard, .polcard { width: 1640px; padding: 20px 32px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); }
.rp-ctl, .pol-ctl { display: flex; align-items: center; gap: 22px; }
.rp-n, .pol-t { font-size: 48px; color: var(--accent-ink); min-width: 70px; }
.rp-slider, .pol-slider { max-width: 520px; }
.rp-axis { position: relative; width: 1500px; height: 240px; margin: 34px auto 48px; }
.rp-legend { display: flex; gap: 26px; font-size: 19px; color: var(--card-muted); }
.rp-legend span::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.rp-legend .t::before { background: var(--accent-ink); } .rp-legend .p::before { background: var(--learner-c); } .rp-legend .z::before { background: var(--card-muted); } .rp-legend .b::before { border-radius: 3px; background: color-mix(in srgb, var(--accent-ink) 12%, #fff); }
.rp-band { position: absolute; bottom: 0; height: 100%; background: color-mix(in srgb, var(--accent-ink) 9%, transparent); border-radius: 6px; }
.rp-zero { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--card-ink); }
.rp-zero em { position: absolute; top: -26px; left: 6px; font: 500 16px/1 var(--sans); font-style: normal; color: var(--card-muted); }
.rp-dots { position: absolute; inset: 0; }
.rp-dot { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.rp-dot.t { background: var(--accent-ink); }
.rp-dot.p { background: var(--learner-c); }
.rp-dot.z { background: var(--card-muted); }
.rp-tick { position: absolute; bottom: -30px; width: 0; }
.rp-tick i { position: absolute; left: 50%; transform: translateX(-50%); font: 500 16px/1 var(--sans); font-style: normal; color: var(--card-muted); white-space: nowrap; }
.rp-tick.edge-l i { left: 0; transform: none; } .rp-tick.edge-r i { left: auto; right: 0; transform: none; }
.rp-stat { margin: 0; font-size: 24px; color: var(--card-ink); }
table.mini { border-collapse: collapse; font-size: 22px; }
table.mini th { font-size: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--card-muted); text-align: left; padding: 4px 18px 4px 0; }
table.mini td { padding: 4px 18px 4px 0; border-top: 1px solid var(--line); }
/* policy */
.pol-legend { display: flex; gap: 30px; font-size: 19px; color: var(--card-muted); }
.lg-pass::before, .lg-fail::before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.lg-pass::before { background: var(--accent-ink); }
.lg-fail::before { background: var(--learner-c); }
.pol-svg { width: 1500px; height: auto; align-self: center; }
.pol-pass { fill: var(--accent-ink); }
.pol-fail { fill: var(--learner-c); }
.pol-thr { fill: var(--card-ink); }
.pol-band { fill: color-mix(in srgb, var(--card-ink) 10%, transparent); }
.pol-axis { width: 1500px; align-self: center; display: flex; justify-content: space-between; font-size: 18px; color: var(--card-muted); }
.pol-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ps { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.ps b { font-size: 40px; color: var(--card-ink); }
.ps span { font-size: 18px; color: var(--card-muted); }
.ps.acc b { color: var(--accent-ink); }
.scr-hive .deckgrid { margin-top: 6px; }


/* ============================================================ MAP */
.scr-map { align-items: stretch; padding: 26px 48px 60px; gap: 22px; }
.map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.map-t { margin: 0; font-size: 72px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.mh-l .muted { margin: 6px 0 0; font-size: 22px; background: var(--plate); display: inline-block; padding: 6px 14px; border-radius: var(--r-pill); }
.mh-r { display: flex; gap: 12px; flex-wrap: wrap; }
.units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ucard { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.u-t { margin: 4px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--card-ink); }
.u-q { margin: 0 0 6px; font-size: 19px; line-height: 1.35; color: var(--card-muted); }
.u-mods { display: flex; flex-direction: column; gap: 8px; }
.modwrap { display: flex; flex-direction: column; gap: 4px; }
.mod { cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; text-align: left; font: inherit; color: var(--card-ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.mod .mn { grid-row: 1 / 3; font-size: 24px; font-weight: 700; color: var(--card-muted); }
.mod .mt { font-size: 22px; font-weight: 500; line-height: 1.2; }
.mod .ms { font-size: 15px; letter-spacing: .08em; color: var(--card-muted); white-space: nowrap; }
.mod .msub { grid-column: 2 / 4; font-size: 16px; color: var(--card-muted); }
.mod.done .mn { color: var(--accent-ink); }
.mod.here { border: 2px solid var(--accent-ink); }
.mod.here .ms { color: var(--accent-ink); font-weight: 700; }
.mod.kfocus, .drill.kfocus { outline: 3px solid var(--learner-c); outline-offset: 2px; }
.drill { cursor: pointer; align-self: flex-start; margin-left: 52px; font: 500 16px/1 var(--sans); color: var(--accent-ink); background: none; border: 0; padding: 4px 0; }
.map-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.settings-card, .notes-card { padding: 20px 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
.settings-card .srow { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 16px; }
.s-l { font-size: 22px; color: var(--card-ink); }
.settings-card .seg button { background: #fff; color: var(--card-ink); border-color: var(--line-strong); font-size: 20px; }
.settings-card .seg button.on { border-color: var(--accent-ink); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.settings-card .seg button.danger { background: var(--accent-ink); color: #fff; }
.gloss { margin: 0; font-size: 19px; line-height: 1.4; color: var(--card-muted); }
.notes-card p { margin: 0; font-size: 19px; line-height: 1.4; color: var(--card-ink); }

/* ============================================================ BOOK */
.scr-book { flex-direction: row; align-items: stretch; gap: 26px; padding: 22px 48px 18px; }
.book-toc { width: 380px; flex: none; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-card); padding: 12px 10px; scrollbar-width: thin; }
.tocrow { cursor: pointer; display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: baseline; text-align: left; background: none; border: 0; color: var(--ink); font: 400 19px/1.3 var(--sans); padding: 8px 10px; border-radius: 8px; }
.tocrow .tn { color: var(--muted); font-weight: 700; }
.tocrow.on { background: var(--accent); color: var(--on-accent); }
.tocrow.on .tn { color: var(--on-accent); }
.book-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.book-page { flex: 1; min-height: 0; overflow-y: auto; padding: 48px 110px 70px; box-shadow: var(--shadow-card); color: var(--card-ink); scrollbar-width: thin; }
.book-page h1 { font-size: 110px; line-height: .95; letter-spacing: -.035em; margin: 20px 0 16px; }
.book-page h2 { font-size: 58px; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 30px; }
.book-page h3 { font-size: 34px; line-height: 1.15; letter-spacing: -.01em; margin: 44px 0 14px; padding-top: 26px; border-top: 1px solid var(--line); }
.book-page p, .book-page li { font-size: 28px; line-height: 1.6; max-width: 1180px; }
.book-page p { margin: 0 0 22px; }
.book-page ul, .book-page ol { margin: 0 0 22px; padding-left: 36px; }
.book-page li { margin-bottom: 8px; }
.book-page strong { font-weight: 700; }
.book-page a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.book-page .ev, .book-page .wl { border-bottom: 1px dotted var(--line-strong); }
.book-page .dev-path { font: 400 16px/1 ui-monospace, Menlo, monospace; color: var(--card-muted); margin-left: 6px; }
.book-page .tbl { overflow-x: auto; margin: 0 0 26px; }
.book-page table { border-collapse: collapse; font-size: 24px; min-width: 60%; }
.book-page th { text-align: left; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--card-muted); font-weight: 500; padding: 8px 20px 8px 0; border-bottom: 1px solid var(--line-strong); }
.book-page td { padding: 10px 20px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.book-page.cover h1 { font-size: 150px; }
.book-page.cover h2 { font-size: 44px; font-weight: 400; color: var(--card-muted); letter-spacing: -.01em; }
.pull { --rule: 0; position: relative; margin: 6px 0 40px; padding: 26px 0 26px 44px; }
.pull::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 4px; background: var(--accent-ink); transform: scaleY(var(--rule)); transform-origin: 50% 0; }
.pull-eb { display: block; font-size: 20px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; }
.book-page .pull-q { font-size: 46px; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; margin: 0; max-width: 1200px; color: var(--card-ink); }
.book-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bn-mid { display: flex; gap: 12px; }

/* ============================================================ THE PRINCIPLES */
.scr-principles { padding-bottom: 60px; }
.cmd-head { width: 1560px; display: flex; flex-direction: column; gap: 10px; }
.cmd-title { margin: 0; font-size: 110px; font-weight: 700; letter-spacing: -.035em; line-height: .95; color: var(--ink); }
.cmd-sub { margin: 0; align-self: flex-start; font-size: 24px; color: var(--ink); background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-pill); padding: 8px 18px; }
.cmds { width: 1560px; list-style: none; margin: 0; padding: 12px 40px; box-shadow: var(--shadow-card); }
.cmd { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cmd:last-child { border-bottom: 0; }
.cmd-n { font-size: 50px; font-weight: 700; color: var(--accent-ink); letter-spacing: -.02em; text-align: right; }
.cmd-t { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; color: var(--card-ink); }
.cmd-o { margin: 6px 0 0; font-size: 23px; line-height: 1.35; color: var(--card-ink); }
.cmd-l { display: flex; gap: 10px; align-items: center; }
.cmd-e { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.cmd-foot { display: flex; gap: 12px; }

/* ============================================================ SUMMARY */
.scr-summary { gap: 26px; padding-bottom: 60px; }
.sum-h { margin: 10px 0 0; font-size: 150px; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.sum-h .sum-n { color: var(--accent-g); }
.stats { width: 1560px; display: grid; grid-template-columns: repeat(6, 1fr); padding: 20px 20px; box-shadow: var(--shadow-card); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 6px 18px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { font-size: 44px; color: var(--card-ink); }
.stat span { font-size: 19px; color: var(--card-muted); }
.sum-btns { display: flex; gap: 12px; }

/* panels over the stage */
.panel-over { position: absolute; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 25; }
.panel-over > div { display: flex; gap: 20px; max-width: 1760px; max-height: 88%; }
.rqpanel { width: 820px; max-height: 100%; overflow: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.panel-over > .rqpanel { width: 1300px; max-height: 88%; }
.rq-h { display: flex; justify-content: space-between; align-items: center; }
.rq-k { font-size: 16px; color: var(--card-muted); }
pre.rq { margin: 0; font: 400 20px/1.45 ui-monospace, "SF Mono", Menlo, monospace; background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; color: var(--card-ink); }

/* ============================================================ THE BAND (lesson titles wrap) */
#band .b-title { white-space: normal; max-width: 1700px; font-size: 150px; text-wrap: balance; line-height: .98; }
#band .b-sub { max-width: 1400px; font-size: 38px; }

/* ============================================================ PORTRAIT (phones, 1080 × 1920–2400) */
#stage.portrait #topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 30px; gap: 16px; }
#stage.portrait .wordmark { font-size: max(26px, var(--fmin)); }
#stage.portrait .rail { grid-column: 2; width: auto; min-width: 0; }
#stage.portrait .rail-eb { font-size: max(18px, var(--fmin)); }
#stage.portrait .rail-eb .rail-mod { display: none; }
#stage.portrait .chips { gap: 8px; }
#stage.portrait .chip { font-size: max(18px, var(--fmin)); padding: 10px 12px; }
#stage.portrait .chip .chip-long { display: none; } #stage.portrait .chip .chip-short { display: inline; }
#stage.portrait .content-chip, #stage.portrait .sound-chip { display: none; }
#stage.portrait #hud { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 10px; padding: 12px 30px 18px; }
#stage.portrait .xp-pod, #stage.portrait .deck { display: none; }
#stage.portrait .hud-phone { display: flex; justify-self: center; gap: 12px; font-size: max(24px, var(--fmin)); padding: 10px 24px; }
#stage.portrait .hud-phone .sep { color: var(--muted); }
#stage.portrait .cue-btn { font-size: max(30px, var(--fmin)); padding: 18px 36px; min-height: var(--tap); }
#stage.portrait .screen { padding: 22px 30px 0; gap: 18px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; justify-content: flex-start; }
#stage.portrait .screen.scr-nugget, #stage.portrait .screen.scr-reflect, #stage.portrait .screen.scr-earn, #stage.portrait .screen.scr-instrument { justify-content: flex-start; }
#stage.portrait :is(.qcard.pq, .note-slot, .notecard, .pair-prompt, .pair-row, .otiles, .demo-host, .m8card, .ctable, .rpcard, .polcard, .prim-b, .hook, .ncard, .icard, .rcard, .cmds, .cmd-head, .stats, .deckgrid, .errcard) { width: 1020px; }
#stage.portrait .otiles { grid-template-columns: 1fr; gap: 14px; }
#stage.portrait .otile { height: auto; min-height: 118px; padding-top: 12px; padding-bottom: 16px; }
#stage.portrait .op { font-size: 40px; }
#stage.portrait .os, #stage.portrait .or .micro, #stage.portrait .or .rank { font-size: max(22px, var(--fmin)); }
#stage.portrait .pq-q { font-size: 56px; }
#stage.portrait .st-text, #stage.portrait .st-kv dd { font-size: max(32px, var(--fmin)); }
#stage.portrait .st-kv { grid-template-columns: 1fr; }
#stage.portrait .st-kv dt, #stage.portrait .stblock .eyebrow, #stage.portrait .eyebrow { font-size: max(20px, var(--fmin)); }
#stage.portrait .notecard p, #stage.portrait .notecard .why { font-size: max(32px, var(--fmin)); }
#stage.portrait .lbtn { font-size: max(26px, var(--fmin)); padding: 14px 20px; min-height: var(--tap); }
#stage.portrait .legend { font-size: max(22px, var(--fmin)); flex-wrap: wrap; border-radius: var(--r-card); }
#stage.portrait .tag { font-size: max(18px, var(--fmin)); }
#stage.portrait .wm-big { font-size: 118px; white-space: normal; text-align: center; }
#stage.portrait .tagline { font-size: max(30px, var(--fmin)); text-align: center; }
#stage.portrait .title-main { flex-direction: column; width: 1020px; }
#stage.portrait .scr-title .menu-panel { width: 1020px; }
#stage.portrait .mrow .lbl { font-size: 40px; } #stage.portrait .mrow .sub { font-size: max(24px, var(--fmin)); }
#stage.portrait .hook-q { font-size: 60px; }
#stage.portrait .hook-line .hl1 { font-size: 44px; } #stage.portrait .hook-line .hl2 { font-size: max(30px, var(--fmin)); }
#stage.portrait .scr-title .ticker { font-size: max(22px, var(--fmin)); text-align: center; border-radius: var(--r-card); }
#stage.portrait .ncard { padding: 32px 36px 30px 60px; }
#stage.portrait .nhead { font-size: 68px; }
#stage.portrait .nstep { grid-template-columns: 1fr; gap: 10px; }
#stage.portrait .nstep-t { font-size: 38px; }
#stage.portrait .nstep-sub, #stage.portrait .nev { font-size: max(22px, var(--fmin)); }
#stage.portrait .icols:has(.icol + .icol) { grid-template-columns: 1fr; }
#stage.portrait .iq-t { font-size: 46px; }
#stage.portrait .iopts { font-size: max(28px, var(--fmin)); }
#stage.portrait .ifoot { flex-direction: column; font-size: max(22px, var(--fmin)); }
#stage.portrait .pair-row { flex-direction: column; gap: 18px; }
#stage.portrait .pp-q { font-size: 46px; } #stage.portrait .pp-change { font-size: max(28px, var(--fmin)); }
#stage.portrait .pairq { font-size: 42px; } #stage.portrait .np-q { font-size: 40px; }
#stage.portrait .dpill { font-size: 28px; height: 42px; }
#stage.portrait .otiles.compact .otile { height: auto; min-height: 96px; padding-top: 10px; padding-bottom: 14px; }
#stage.portrait .otiles.compact .or { flex-wrap: wrap; justify-content: flex-end; max-width: 330px; row-gap: 4px; }
#stage.portrait .otiles.compact .or .micro { order: 5; flex-basis: 100%; text-align: right; }
#stage.portrait .otiles.compact .op { font-size: 36px; }
#stage.portrait .udbtn { font-size: 36px; }
#stage.portrait .rq-t { font-size: 60px; } #stage.portrait .rrow .rt { font-size: 36px; } #stage.portrait .r-sub { font-size: max(26px, var(--fmin)); }
#stage.portrait .pcard { width: 1000px; }
#stage.portrait .pcard.small { width: auto; }
#stage.portrait :is(.pq-top, .pc-top, .gc-top, .xc-top, .xe-top, .icard-top) { flex-wrap: wrap; row-gap: 10px; }
#stage.portrait .pq-top .tag { white-space: normal; }
#stage.portrait .scr-earn .kept { display: none; }
#stage.portrait .deckgrid { grid-template-columns: repeat(2, 1fr); }
#stage.portrait .pcard.small .pc-t { font-size: 30px; } #stage.portrait .pcard.small .pc-o { font-size: max(22px, var(--fmin)); }
#stage.portrait .scr-exercise { flex-direction: column; align-items: center; }
#stage.portrait .xcol.left, #stage.portrait .xcol.right { width: 1020px; }
#stage.portrait .xc-text { font-size: 34px; } #stage.portrait .xc-goal p { font-size: 32px; }
#stage.portrait .xc-target, #stage.portrait .xe-rules, #stage.portrait .xe-det summary, #stage.portrait .xe-count, #stage.portrait .xe-tries { font-size: max(24px, var(--fmin)); }
#stage.portrait .xe-ta { font-size: 38px; }
#stage.portrait .fb-try { grid-template-columns: 90px 80px 1fr; font-size: max(22px, var(--fmin)); }
#stage.portrait .fb-try .fb-q, #stage.portrait .fb-try .fb-mark { grid-column: 1 / -1; }
#stage.portrait .fb-line p { font-size: max(28px, var(--fmin)); }
#stage.portrait .gn-ends, #stage.portrait .gn-ref { font-size: max(22px, var(--fmin)); }
#stage.portrait .prows { grid-template-columns: 1fr; }
#stage.portrait .prow .pt { font-size: 32px; } #stage.portrait .pr-t { font-size: 42px; }
#stage.portrait .tally { flex-wrap: wrap; } #stage.portrait .tally-row { flex-direction: column; align-items: flex-start; width: 1020px; }
#stage.portrait .tslot { width: 112px; }
#stage.portrait .m8cols { grid-template-columns: 1fr; }
#stage.portrait .m8row { grid-template-columns: 380px 1fr 80px; }
#stage.portrait .m8l, #stage.portrait .m8n { font-size: max(24px, var(--fmin)); }
#stage.portrait .three { grid-template-columns: 1fr; }
#stage.portrait .srow { font-size: max(22px, var(--fmin)); }
#stage.portrait .crow { grid-template-columns: 1fr 1fr; }
#stage.portrait .crow .cr-case { grid-column: 1 / -1; }
#stage.portrait .crow.head .eyebrow:first-child { grid-column: 1 / -1; }
#stage.portrait .cr-case p { font-size: max(26px, var(--fmin)); }
#stage.portrait .rp-axis, #stage.portrait .pol-svg, #stage.portrait .pol-axis { width: 960px; }
#stage.portrait .pol-stats { grid-template-columns: repeat(2, 1fr); }
#stage.portrait .rp-ctl, #stage.portrait .pol-ctl { flex-wrap: wrap; }
#stage.portrait .rp-stat { font-size: max(26px, var(--fmin)); }
#stage.portrait .scr-map { padding: 22px 30px 60px; }
#stage.portrait .map-head { flex-direction: column; align-items: flex-start; }
#stage.portrait .units, #stage.portrait .map-foot { grid-template-columns: 1fr; }
#stage.portrait .mod .mt { font-size: 32px; } #stage.portrait .mod .msub, #stage.portrait .mod .ms, #stage.portrait .u-q, #stage.portrait .gloss, #stage.portrait .notes-card p { font-size: max(22px, var(--fmin)); }
#stage.portrait .drill { font-size: max(22px, var(--fmin)); }
#stage.portrait .scr-book { flex-direction: column; padding: 18px 30px 16px; overflow: hidden; }
#stage.portrait .book-toc { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px; flex: none; }
#stage.portrait .tocrow { flex: none; grid-template-columns: auto; font-size: max(22px, var(--fmin)); }
#stage.portrait .tocrow .tt { display: none; }
#stage.portrait .tocrow:not(.ch) .tt { display: inline; }
#stage.portrait .tocrow .tn { font-size: max(24px, var(--fmin)); }
#stage.portrait .book-page { padding: 34px 40px 60px; }
#stage.portrait .book-page p, #stage.portrait .book-page li { font-size: max(34px, var(--fmin)); }
#stage.portrait .book-page table { font-size: max(26px, var(--fmin)); }
#stage.portrait .book-page .pull-q { font-size: 50px; }
#stage.portrait .book-page.cover h1 { font-size: 110px; }
#stage.portrait .book-nav { flex-wrap: wrap; justify-content: center; }
#stage.portrait .cmd { grid-template-columns: 90px 1fr; }
#stage.portrait .cmd-l { grid-column: 2; flex-wrap: wrap; }
#stage.portrait .cmd-o { font-size: max(26px, var(--fmin)); }
#stage.portrait .cmd-title { font-size: 96px; }
#stage.portrait .stats { grid-template-columns: repeat(2, 1fr); }
#stage.portrait .stat span { font-size: max(22px, var(--fmin)); }
#stage.portrait .sum-h { font-size: 110px; }
#stage.portrait #band .b-title { font-size: 110px; max-width: 1000px; }
#stage.portrait #band .b-sub { font-size: 38px; max-width: 1000px; }
#stage.portrait .panel-over > div { flex-direction: column; max-width: 1020px; overflow: auto; }
#stage.portrait .rqpanel { width: 1000px; }
#stage.portrait #toast { max-width: 1000px; font-size: max(26px, var(--fmin)); }
body.touch .kbd-only { display: none !important; }
body:not(.touch) .touch-only { display: none !important; }