@font-face{font-family:Inter;src:url('./assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('./assets/source-sans-3-latin.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Source Code Pro';src:url('./assets/source-code-pro-latin.woff2') format('woff2');font-weight:200 900;font-display:swap}

/* PlaybookRG consumer identity. Semantic tokens follow the appearance; the
   teaching stage is authored artwork and keeps its navy palette in both. */
:root{color-scheme:light;--paper:#f5f5fa;--paper-dim:#eceef5;--surface:#fff;--ink:#1b2838;--body:#3d4a5c;--muted:#5e6b7e;--line:#d8dde7;--line-strong:#8490a1;--emerald:#10b981;--emerald-text:#047857;--orange:#ff6b35;--orange-hover:#ff8a5c;--wash:#e4f4ed;--focus:#047857;
  --stage:#1b2838;--stage-deep:#141f2b;--stage-text:#f5f5fa;--stage-body:#d5deea;--stage-muted:#a4b1be;--stage-line:rgba(245,245,250,.16);--stage-emerald:#10b981;--card-face:#fbfbfd;--card-ink:#1b2838;--card-red:#b4352d;--card-back:#2a3f56;--card-back-inner:#22344a;
  --font-display:Inter,system-ui,sans-serif;--font-body:'Source Sans 3',system-ui,sans-serif;--font-data:'Source Code Pro',ui-monospace,monospace;
  font-family:var(--font-body);font-size:16px;background:var(--paper);color:var(--ink)}
:root:lang(zh){--font-display:Inter,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif;--font-body:'Source Sans 3','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif;--font-data:'Source Code Pro','PingFang SC','Microsoft YaHei',ui-monospace,monospace}

*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button,select,.button{font-family:var(--font-display)}
a{color:inherit;text-underline-offset:4px}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;color:inherit;background:transparent}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.025em}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) .kicker{letter-spacing:0}
p{line-height:1.6}
img{max-width:100%}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;padding:12px;background:var(--surface);z-index:100;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
#main:focus{outline:none}
/* Layout stability (CLS): main always fills the first screen below the header, so the footer and the
   host's support strip (injected after main) start below the fold and never jump into view; the loading
   placeholder uses padding, not margin, so nothing collapses through main and moves when the page renders. */
#main{min-height:calc(100vh - var(--header-h, 61px))}
.loading{max-width:900px;margin:0 auto;padding:104px 24px 24px}

/* Kicker: the brand's tracked section label. */
.kicker,.eyebrow{font-family:var(--font-display);font-size:12px;font-weight:650;letter-spacing:.12em;line-height:1.5;text-transform:uppercase}
.orange-dot{color:var(--orange)}
.button{min-height:46px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;line-height:1.3;border:1px solid transparent}
.primary{background:var(--orange);color:#1b2838}
.primary:hover{background:var(--orange-hover)}
.secondary{border-color:var(--line-strong)}
.secondary:hover{border-color:var(--ink)}
.text-button{font-size:14px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:10px 4px}
.icon-button{min-width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.icon-button:hover{background:var(--wash)}

/* ------------------------------------------------------------------ */
/* Guide page                                                          */
/* ------------------------------------------------------------------ */
.guide{max-width:1040px;margin:0 auto;padding:0 24px 40px}
.guide-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:18px 0 14px}
.guide-head h1{font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.04em}
.back-link{font-family:var(--font-display);font-size:13px;color:var(--body);text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.guide-head-links{display:flex;gap:20px;font-family:var(--font-display);font-size:13px;padding-bottom:6px}
.guide-head-links a{min-height:32px;display:inline-flex;align-items:center}

/* Chapter strip: nine segments double as navigation and coarse progress. */
.chapters{display:grid;grid-template-columns:repeat(var(--n,9),minmax(0,1fr));gap:6px;margin:0 0 12px}
.seg{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 6px 10px;min-height:44px;border-top:3px solid var(--line);border-radius:0 0 4px 4px;text-align:left;color:var(--muted);font-family:var(--font-display);transition:border-color .2s,color .2s}
.seg:hover{background:var(--wash);color:var(--ink)}
.seg .n{font-family:var(--font-body);font-weight:600;font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.04em}
.seg .t{font-size:12.5px;line-height:1.3;font-weight:500;color:var(--body)}
.seg .mark{font-size:14px;color:var(--emerald-text);line-height:1}
.seg.is-done{border-top-color:var(--line-strong)}
.seg.is-current{border-top-color:var(--emerald-text);color:var(--emerald-text)}
.seg.is-current .t{color:var(--ink);font-weight:650}
/* The current chapter's segment fills as the guide moves through it; finished chapters stay filled. */
.seg::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--emerald-text);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.seg.is-current{border-top-color:var(--line)}
.seg.is-done::before{background:var(--line-strong)}

.player{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:clip;min-width:0}
.player-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.mode-switch{display:flex;gap:2px;background:var(--paper-dim);padding:3px;border-radius:6px}
.mode-switch button{min-height:38px;min-width:92px;padding:6px 16px;font-size:13px;font-weight:600;border-radius:4px;color:var(--body)}
.mode-switch button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:38px;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;color:var(--body);border:1px solid var(--line)}
.motion-toggle::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--emerald-text);flex:none}
.motion-toggle[aria-pressed=false]::before{background:var(--line-strong)}
.motion-toggle:hover{border-color:var(--line-strong)}

/* The stage: authored navy table surface. */
.stage{position:relative;background:linear-gradient(180deg,var(--stage) 0%,var(--stage-deep) 100%);color:var(--stage-text);padding:14px 22px 0;display:flex;flex-direction:column;gap:12px;height:440px;overflow:hidden}
.stage-body{min-height:0;overflow:clip;overflow-clip-margin:8px}
.stage-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 20px;flex-wrap:wrap;font-family:var(--font-display);font-size:12px;line-height:1.5}
.stage-label{font-weight:650;letter-spacing:.08em;color:var(--stage-muted);white-space:nowrap}
.stage-rules{color:var(--stage-muted);text-align:right}
.stage-rules span{margin:0 4px;opacity:.6}
.stage-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:4px 0}
.stage-note{font-size:16px;line-height:1.5;text-align:center;color:var(--stage-body);max-width:62ch;margin:0 auto;min-height:1.5em;overflow-wrap:anywhere}
.stage-caption{margin:4px -22px 0;padding:14px 24px 16px;background:rgba(0,0,0,.28);font-size:17px;line-height:1.55;text-align:center;color:var(--stage-text);min-height:60px}
:lang(zh) .stage-caption{line-height:1.7}

/* Table: two persistent hand lanes. */
.table{display:grid;grid-template-columns:1fr auto 1fr;gap:16px 32px;align-items:start;justify-items:center;width:100%;max-width:800px;--card-w:84px}
.table:not(:has(.rule-chip)){grid-template-columns:1fr 1fr}
.lane{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;transition:opacity .3s}
.lane-name{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--stage-text)}
.lane-cards{display:flex;gap:8px;align-items:center;min-height:calc(var(--card-w)*1.4)}
.card{width:var(--card-w);height:calc(var(--card-w)*1.4);flex:none;border-radius:6px;overflow:visible;transition:outline-color .25s,transform .25s}
.card-face{fill:var(--card-face);stroke:#c9cfd8;stroke-width:1}
.card-back{fill:var(--card-back);stroke:#3f556d;stroke-width:1}
.card-back-inner{fill:none;stroke:var(--card-back-inner);stroke-width:4;stroke-dasharray:2 4}
.card-rank{font-family:var(--font-display);font-size:16px;font-weight:700;fill:var(--card-ink)}
.card-pip{font-size:30px;text-anchor:middle;fill:var(--card-ink)}
.card.is-red .card-rank,.card.is-red .card-pip{fill:var(--card-red)}
.card.is-emph{outline:3px solid var(--stage-emerald);outline-offset:3px;border-radius:6px}
.slot{width:var(--card-w);height:calc(var(--card-w)*1.4);flex:none;border:2px dashed var(--stage-line);border-radius:6px;position:relative;transition:border-color .25s}
.slot.is-emph{border-color:var(--stage-emerald)}
.slot.is-blocked{border-style:solid;border-color:var(--stage-line);opacity:.8}
.slot.is-blocked::before,.slot.is-blocked::after{content:"";position:absolute;inset:50% auto auto 50%;width:60%;height:2px;background:var(--stage-muted);transform:translate(-50%,-50%) rotate(45deg)}
.slot.is-blocked::after{transform:translate(-50%,-50%) rotate(-45deg)}
.total{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font-data);font-variant-numeric:tabular-nums;transition:opacity .3s}
.total .arith{font-size:14px;color:var(--stage-muted);letter-spacing:-.02em}
.total .digits{display:inline-flex;font-size:46px;font-weight:600;line-height:1;letter-spacing:-.04em;padding:4px 10px 6px;border-radius:8px;transition:color .3s,box-shadow .3s}
.total .tens{display:inline-block;max-width:1ch;overflow:hidden;transition:max-width .5s cubic-bezier(.4,0,.2,1),opacity .35s;opacity:1}
.total.is-reduced .tens{max-width:0;opacity:0}
.total.is-emph .digits{box-shadow:inset 0 0 0 2px var(--stage-emerald);color:var(--stage-emerald)}
.total.is-wins .digits{color:var(--stage-emerald)}
.total.is-wins::after{content:"";width:28px;height:3px;border-radius:2px;background:var(--stage-emerald);margin-top:2px}
.total.is-dim,.lane.is-dim .lane-name,.lane.is-dim .card:not(.is-emph){opacity:.45}
.rule-chip{align-self:center;margin-top:28px;padding:8px 16px;border:1px solid var(--stage-emerald);border-radius:999px;font-family:var(--font-data);font-size:20px;color:var(--stage-emerald);white-space:nowrap;display:inline-flex;align-items:baseline;gap:10px}
.rule-chip-label{font-family:var(--font-display);font-size:14px;font-weight:650;color:var(--stage-text)}
.is-compact .table,.compact-hands .table{--card-w:48px;gap:10px 20px}
.is-compact .stage-body:has(.money-col){flex-direction:row;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.compact-hands{flex:0 1 360px;min-width:0}
.money-col{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 1 380px;min-width:0}
.money-col .money{width:100%}
.compact-hands .total .digits{font-size:34px}
.compact-hands .total .arith{font-size:12px}
.compact-hands .lane-name{font-size:13px}

/* Wagers and money: accounting, not celebration. */
.wagers-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.wagers{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wager{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 16px;border:1px solid var(--stage-line);border-radius:8px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--stage-body);transition:background .3s,color .3s,border-color .3s}
.wager.is-active{background:var(--stage-text);color:#1b2838;border-color:var(--stage-text)}
.stake{font-family:var(--font-data);font-size:18px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stake.is-loose{padding:8px 16px;border:1px solid var(--stage-line);border-radius:8px;font-size:22px}
.money{width:min(420px,100%);margin:4px 0 0}
.money-rows,.money dt,.money dd,.money p.row{margin:0}
.money .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--stage-line);transition:opacity .4s}
.money .lbl{font-family:var(--font-display);font-size:15px;color:var(--stage-body)}
.money .val{font-family:var(--font-data);font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:10px}
.money .val .eq{font-size:16px;font-weight:500;color:var(--stage-muted)}
.money .val .eq.is-live{font-size:28px;font-weight:600;color:var(--stage-text)}
/* Once "= $19" is spoken the working recedes to the muted calculation size and the result takes the weight. */
.money .val .eq.is-live{transition:font-size .6s cubic-bezier(.2,.8,.2,1),color .6s ease}
.money .val .eq.is-live:has(.equals){font-size:.57em;font-weight:500;color:var(--stage-muted)}
.money .row.grand{border-top:2px solid var(--stage-text);border-bottom:0;margin-top:2px;padding-top:12px}
.money .row.grand .lbl{font-weight:700;color:var(--stage-text)}
.money .row.grand .val{color:var(--stage-emerald)}
.money .row.currency{border:0;padding:6px 0 0}
.money .row.currency .lbl{font-size:12px;color:var(--stage-muted)}
.money .row.placed .val{color:var(--stage-text)}
.money.is-dim .row:not(.currency){opacity:.4}

@media(min-width:900px){.variant:has(.money){flex-direction:row;align-items:center;justify-content:center;gap:28px}.variant:has(.money) .placard{width:min(300px,40%);flex:none}.variant .money{width:min(360px,100%)}.variant .single{width:auto}.stage-body:has(.is-contrast){flex-direction:row;gap:28px}.stage-body:has(.is-contrast) .shoe{width:300px;flex:none}}

/* Tight stages (see fitStage): secondary elements give way before evidence is scaled. */
.stage.is-tight .token-grid.is-compact,.stage.is-tight .shoe figcaption,.stage.is-tight .money .row.currency,.stage.is-tight .stake-loop,.stage.is-tight .is-compact .wagers-wrap{display:none}
.stage.is-tight .two-up p{font-size:12px;margin-top:3px}
.stage.is-tight .stage-note{font-size:13px;line-height:1.35}
.stage.is-tight .figure-note{font-size:12px}
.stage.is-tight .figure{padding:2px 0}
.stage.is-tight .placard p{font-size:14px;margin:2px 0}
.stage.is-tight .token{height:22px;font-size:11px}

/* Motion: entrance only when playback advances one sentence. */
@keyframes deal{from{opacity:0;transform:translate(22px,-30px) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.is-animated .card.is-enter{animation:deal .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--enter-order,0)*140ms)}
.is-animated .total.is-enter,.is-animated .money .row.is-enter,.is-animated .slot.is-enter,.is-animated .rule-chip.is-enter,.is-animated .stage-note.is-enter{animation:rise .35s ease-out both;animation-delay:calc(var(--enter-order,0)*110ms)}
.is-animated .stake.is-enter{animation:drop .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--enter-order,0)*110ms)}
.is-still *,.is-still *::before,.is-still *::after,.is-measuring *,.is-measuring *::before,.is-measuring *::after{animation:none!important;transition:none!important}

/* Legacy Still exhibits (scenes not yet directed) on the navy stage. */
.legacy-evidence{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;width:100%}
.legacy-evidence .evidence-heading{font-family:var(--font-display);font-size:15px;font-weight:650}
.legacy-evidence .evidence-body{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.legacy-evidence .evidence-note{font-size:15px;line-height:1.5;color:var(--stage-body);max-width:60ch;overflow-wrap:anywhere}
.legacy-evidence .hands{display:flex;gap:40px;align-items:center;justify-content:center;width:100%;flex-wrap:wrap}
.legacy-evidence .hand{display:flex;flex-direction:column;gap:8px;align-items:center}
.legacy-evidence .hand-name{font-family:var(--font-display);font-size:13px;font-weight:700}
.legacy-evidence .cards{display:flex;justify-content:center;gap:8px}
.legacy-evidence .playing-card{position:relative;display:inline-flex;width:60px;height:84px;border:1px solid #c9cfd8;background:var(--card-face);color:var(--card-ink);border-radius:6px;flex:none;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:7px}
.legacy-evidence .playing-card b{font-family:var(--font-display);font-size:15px;line-height:1;font-weight:700}
.legacy-evidence .playing-card b:last-child{transform:rotate(180deg);align-self:flex-end}
.legacy-evidence .playing-card>span{align-self:center;font-size:26px;line-height:1}
.legacy-evidence .playing-card.red-suit{color:var(--card-red)}
.legacy-evidence .hand-total{font-family:var(--font-display);font-size:14px;font-weight:600}
.legacy-evidence .hand-total b{font-family:var(--font-data);font-size:22px;margin-left:6px}
.legacy-evidence .versus{color:var(--stage-muted)}
.legacy-evidence .equation{font-family:var(--font-data);font-size:clamp(26px,3vw,40px);font-weight:600;line-height:1.3;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.legacy-evidence .equation em{font-style:normal;color:var(--stage-emerald)}
.legacy-evidence .compact-equation{font-family:var(--font-display);font-size:20px;line-height:1.5}
.legacy-evidence .sequence{display:flex;align-items:center;gap:14px;justify-content:center;font-family:var(--font-display);font-size:16px;font-weight:600;flex-wrap:wrap}
.legacy-evidence .sequence span[aria-hidden]{color:var(--stage-emerald)}
.legacy-evidence .rule-list{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:17px}
.legacy-evidence .ledger{width:min(380px,100%);margin:0}
.legacy-evidence .ledger>div{display:flex;justify-content:space-between;align-items:center;padding:9px 0;gap:15px;border-bottom:1px solid var(--stage-line)}
.legacy-evidence .ledger dt{font-family:var(--font-display);font-size:14px}
.legacy-evidence .ledger dd{font-family:var(--font-data);font-size:26px;margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.legacy-evidence .ledger .ledger-total{border-top:2px solid var(--stage-text);border-bottom:0;color:var(--stage-emerald)}
.legacy-evidence .edge-list{width:min(480px,100%);margin:0}
.legacy-evidence .edge-list>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--stage-line);text-align:left}
.legacy-evidence .edge-list dt{font-family:var(--font-display);font-size:14px}
.legacy-evidence .edge-list small{display:block;font-size:12px;color:var(--stage-muted);margin-top:3px}
.legacy-evidence .edge-list dd{margin:0;font-family:var(--font-data);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.legacy-evidence .outcomes{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.legacy-evidence .outcomes>div{display:flex;flex-direction:column;gap:8px}
.legacy-evidence .outcomes b{font-family:var(--font-data);font-size:30px;font-weight:600}
.legacy-evidence .outcomes span{font-size:14px}
.legacy-evidence .comparison{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:560px;text-align:left}
.legacy-evidence .comparison b{font-family:var(--font-display);font-size:18px;font-weight:650}
.legacy-evidence .comparison p{font-size:14px;color:var(--stage-body);margin-top:8px}
.legacy-evidence .rule-specimen b{font-family:var(--font-display);font-size:24px;font-weight:650}
.legacy-evidence .rule-specimen p{font-size:16px;margin-top:12px}
.legacy-evidence .scoreboard{display:flex;gap:8px}
.legacy-evidence .scoreboard span{height:48px;width:48px;display:grid;place-items:center;border:1px solid var(--stage-muted);border-radius:50%;font-size:18px;font-family:var(--font-display)}
.legacy-evidence .scoreboard .unknown{border-style:dashed;color:var(--stage-muted)}
.legacy-evidence .closing-links{display:flex;gap:28px;font-size:17px;flex-wrap:wrap;justify-content:center}
.legacy-evidence .shoe-flow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.legacy-evidence .shoe-box{border:1px solid var(--stage-line);border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.legacy-evidence .shoe-box b{font-family:var(--font-display)}
.legacy-evidence .deal-arrow{color:var(--stage-emerald);font-size:24px}
.legacy-evidence .dealt-example{display:flex;flex-direction:column;gap:8px;font-size:13px;align-items:center}
.legacy-evidence .shoe-note{font-size:14px;color:var(--stage-body)}

/* Optional question */
.check-panel{padding:20px 24px;border-bottom:1px solid var(--line)}
.check-panel .eyebrow{color:var(--emerald-text)}
.check-panel h2{font-size:20px;font-weight:650;line-height:1.4;margin:8px 0 16px;letter-spacing:-.01em}
.check-panel fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.answer{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:6px;cursor:pointer;min-height:48px;font-size:16px}
.answer:hover{border-color:var(--line-strong)}
.answer.selected{border-color:var(--ink);background:var(--paper-dim)}
.answer.selected:has(input:disabled){background:transparent;border-color:var(--line-strong)}
.answer input{accent-color:var(--ink);width:18px;height:18px;flex:none;margin:0}
.check-actions{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
#check-answer{scroll-margin-bottom:14px}
.feedback{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.feedback p{font-size:16px;color:var(--body);margin-bottom:14px}
.stage.at-check{height:auto;max-height:280px}
.stage.at-check .stage-body{padding:0}

/* Landscape-only side caption (see short landscape rules). */
.side-caption{display:none}

/* Transport */
.voice-status{padding:8px 24px;font-size:13px;color:var(--body);border-bottom:1px solid var(--line)}
.transport{padding:12px 20px 10px;font-family:var(--font-display)}
.progress-row{display:flex;align-items:center;gap:14px}
.progress-row input{min-width:0;width:100%;accent-color:var(--emerald-text);height:20px;cursor:pointer;margin:0}
.progress-row>span{font-family:var(--font-body);font-size:12px;color:var(--muted);min-width:64px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.transport-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:10px}
.playback-buttons{display:flex;align-items:center;gap:8px}
.play-button{background:var(--orange);color:#1b2838;padding:10px 22px;border-radius:999px;min-height:46px;font-size:14px;font-weight:650;min-width:112px}
.play-button:hover{background:var(--orange-hover)}
.playback-options{display:flex;gap:8px;align-items:center}
.playback-options select{min-height:44px;max-width:72px;padding:0 6px;border:0;background:transparent;color:var(--body);font-size:13px}
.caption-button{border:1px solid var(--line);min-width:44px;min-height:44px;border-radius:6px;font-size:13px;font-weight:650;color:var(--muted);padding:0 10px}
.caption-button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.player-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 20px;border-top:1px solid var(--line);font-family:var(--font-display);font-size:12px;color:var(--muted)}
.guide-under{display:flex;justify-content:space-between;gap:20px;margin:14px 0 0;font-size:13px;color:var(--muted)}


.home-intro-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}







.home-hand{text-align:center;width:100%;color:#f5f5fa}
.home-hand-label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.12em;color:#c3cdd9;text-transform:uppercase}
.home-cards{display:flex;justify-content:center;gap:12px;margin:32px auto 24px}
.home-cards .playing-card{position:relative;display:inline-flex;width:94px;height:132px;border:1px solid #c9cfd8;background:var(--card-face);color:var(--card-ink);border-radius:8px;flex:none;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:10px;transform:rotate(-8deg);box-shadow:0 8px 20px #0003}
.home-cards .playing-card:last-child{transform:rotate(8deg);margin-top:8px}
.home-cards .playing-card b{font-family:var(--font-display);font-size:20px;line-height:1;font-weight:700}
.home-cards .playing-card b:last-child{transform:rotate(180deg);align-self:flex-end}
.home-cards .playing-card>span{align-self:center;font-size:38px;line-height:1}
.home-cards .playing-card.red-suit{color:var(--card-red)}
.home-total{display:flex;justify-content:center;align-items:center;gap:24px;font-family:var(--font-data);font-size:28px;line-height:1.2;font-variant-numeric:tabular-nums}
.home-total b{font-size:52px;color:#34d399;font-weight:600}
.home-hand-caption{display:block;font-size:16px;color:#c3cdd9;margin-top:14px}




.featured-copy h2{font-size:43px;font-weight:800;line-height:1.1;letter-spacing:-.035em;margin:17px 0}
:lang(zh) .featured-copy h2{font-size:clamp(28px,3vw,40px);line-height:1.35}
.feature-description{font-size:18px;line-height:1.5;color:var(--body);max-width:490px}







/* Reading pages */
.reading{max-width:760px;margin:48px auto 90px;padding:0 24px}
.reading>.eyebrow{margin:24px 0 14px;color:var(--emerald-text)}
.reading h1{font-size:48px;font-weight:800;line-height:1.08;letter-spacing:-.04em}
.reading-deck{font-size:22px;color:var(--body);margin:20px 0 28px}
.reading-scope{border-left:3px solid var(--emerald);padding:12px 20px;font-size:14px;line-height:1.7;background:var(--wash)}
.reading section{margin:44px 0;scroll-margin-top:28px}
.reading h2{font-size:25px;font-weight:700;line-height:1.3;margin:0 0 20px}
.reading section p{font-size:18px;color:var(--body);margin:17px 0}
.reading section .text-button{margin-right:20px;color:var(--emerald-text)}
.read-index{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:30px 0;font-size:14px}
.read-index a{color:var(--body)}
.reading table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.6;margin:20px 0}
.reading caption{text-align:left;font-size:12px;color:var(--muted);padding:10px 0}
.reading th,.reading td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line)}
.reading th{font-size:12px;font-weight:650}
:lang(zh) .reference table{overflow-wrap:anywhere}
.source-list{padding-left:19px}
.source-list li{margin:22px 0;font-size:15px}
.source-list li p{font-size:14px!important;margin-top:6px!important}

/* Mini player on reading pages */
.has-mini-player{padding-bottom:120px}
.mini-player{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:30;width:min(760px,calc(100% - 32px));padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 35px #0002}
.mini-player strong{font-family:var(--font-display);font-size:13px;font-weight:650}
.mini-player p{font-size:13px;color:var(--body);margin-top:3px;max-width:390px}
.mini-actions{display:flex;align-items:center;gap:18px;flex:none}
.mini-actions a{font-size:13px}
.mini-actions .play-button{min-width:96px}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media(max-width:900px){
  .home-intro-inner,.featured-guide{gap:36px;grid-template-columns:1.1fr 1fr}
  .intro-art{padding-left:25px}
  .seg .t{display:none}
  .seg{align-items:center;padding:8px 2px}
  .chapters{gap:4px}
  .table{--card-w:60px;gap:14px 20px}
  .total .digits{font-size:40px}
}
@media(max-width:760px){
  .guide{padding:0 12px 28px}
  .guide-head{padding:6px 4px 4px;align-items:center}
  .guide-head .back-link{display:none}
  .guide-head h1{font-size:19px}
  .guide-head-links{font-size:12px}
  .guide-head-links a{min-height:28px}
  .seg{min-height:32px;padding:4px 2px 6px;gap:0}
  .seg .n{font-size:10px}
  .mode-switch{padding:2px}
  .mode-switch button{min-height:34px;min-width:76px}
  .motion-toggle{min-height:34px}
  .player-top{padding:6px 10px;flex-wrap:wrap;row-gap:6px}
  .player-bottom{display:flex}
  .progress-row input{height:16px}
  .progress-row>span{font-size:11px;min-width:56px}
  .guide-head-links{gap:14px;font-size:13px;padding:0}
  .guide-head-links a:first-child{display:none}
  .chapters{margin-bottom:8px}
  .player-top{padding:8px 12px}
  .mode-switch button{min-width:80px;padding:6px 12px;font-size:13px}
  .motion-toggle{padding:6px 10px;font-size:12px}
  .stage{padding:8px 14px 0;gap:6px;min-height:0}
  .stage-head{font-size:11px;gap:2px 12px;flex-direction:column;align-items:flex-start}
  .stage-rules{text-align:left;max-width:100%}
  .stage-rules span{margin:0 2px}
  .stage-body{gap:12px;padding:2px 0}
  .stage-note{font-size:14px;line-height:1.4;min-height:0}
  .stage-caption{margin:2px -14px 0;padding:8px 14px 9px;font-size:15px;min-height:calc(2 * 1.45em + 17px);line-height:1.45;display:flex;align-items:center;justify-content:center}
  :lang(zh) .stage-caption{line-height:1.6}
  .table{--card-w:52px;gap:10px 14px;max-width:none}
  .table:has(.rule-chip){grid-template-columns:1fr 1fr;row-gap:6px}
  .rule-chip{grid-column:1/-1;grid-row:1;margin:0 0 4px;font-size:16px;padding:5px 12px}
  .lane{gap:6px}
  .lane-name{font-size:13px}
  .lane-cards{gap:5px}
  .total .digits{font-size:34px;padding:2px 8px 4px}
  .total .arith{font-size:12px}
  .is-compact .table,.compact-hands .table{--card-w:40px}
  .compact-hands .total .digits{font-size:28px}
  .is-compact .stage-body{flex-direction:column;flex-wrap:nowrap;gap:8px}
  .compact-hands,.money-col{flex:none;width:100%}
  .is-compact .money-col .wagers-wrap:has(+ .money){display:none}
  .wager{min-height:40px;padding:6px 12px;font-size:13px}
  .stake{font-size:16px}
  .money .row{padding:6px 0}
  .money .lbl{font-size:14px}
  .money .val{font-size:24px}
  .money .val .eq{font-size:14px}
  .money .val .eq.is-live{font-size:24px}
  .legacy-evidence .playing-card{width:48px;height:67px;padding:5px}
  .legacy-evidence .playing-card b{font-size:12px}
  .legacy-evidence .playing-card>span{font-size:20px}
  .legacy-evidence .hands{gap:22px}
  .legacy-evidence .equation{font-size:28px}
  .legacy-evidence .evidence-note{font-size:14px}
  .legacy-evidence .comparison{gap:18px}
  .check-panel{padding:16px}
  .check-panel h2{font-size:18px}
  .answer{font-size:15px;padding:10px 12px}
  .is-player .guide:not(.guide-after){display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h))}
  .guide-after{padding-top:0;padding-bottom:20px}
  .player{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .stage{flex:1 1 0;min-height:140px;height:auto}
  .player.waiting .stage{flex:0 0 auto;max-height:30svh}
  .player.waiting .stage-label,.player.waiting .stage-note{display:none}
  .player.waiting .check-panel{padding:12px 14px}.player.waiting .check-panel h2{margin:4px 0 10px;font-size:17px}.player.waiting .answer{min-height:42px;padding:8px 12px}.player.waiting .check-actions{margin-top:10px}
  .check-panel,.voice-status,.transport,.player-bottom,.player-top{flex:none}
  .transport{padding:6px 12px 6px;border-top:1px solid var(--line)}
  .transport-buttons{margin-top:2px}
  .guide-under{margin-top:8px}
  .transport-buttons{margin-top:4px}
  .chapters{margin-bottom:8px}
  .guide-head{padding:4px 4px}
  .play-button{min-width:88px;padding:10px 14px}
  .playback-buttons{gap:0}
  .playback-options{gap:2px}
  .playback-options select{max-width:58px;padding:0 2px}
  .caption-button{min-width:44px;padding:0 8px;white-space:nowrap}
  .icon-button{min-width:40px}
  .player-bottom{padding:2px 12px 0;font-size:11px;line-height:1.3}
  .player-bottom > a{display:none}
  .guide-under{display:block;font-size:12px}
  .guide-under p+p{margin-top:6px}
  
  .home-intro-inner{display:block}
  
  
  
  
  
  
  .home-cards{margin:22px auto 16px}
  .home-cards .playing-card{width:70px;height:98px}
  .home-cards .playing-card b{font-size:16px}
  .home-cards .playing-card>span{font-size:30px}
  .home-total{gap:18px;font-size:24px}
  .home-total b{font-size:40px}
  
  .featured-copy h2{font-size:36px;margin:16px 0}
  .feature-description{font-size:17px}
  
  
  .reading{margin:30px auto 60px;padding:0 20px}
  .reading h1{font-size:38px}
  .reading-deck{font-size:19px}
  .reading section p{font-size:17px}
  .reading table{font-size:12px}
  .reading th,.reading td{padding:10px 5px}
  .read-index{grid-template-columns:1fr}
  .mini-player{padding:12px;gap:10px;align-items:flex-start;flex-direction:column;bottom:10px}
  .mini-actions{width:100%;justify-content:space-between}
  .has-mini-player{padding-bottom:165px}
}
/* Narrow phones: stack the lanes so three cards and a total stay readable. */
@media(max-width:379px){
  .table{grid-template-columns:1fr!important;justify-items:stretch;gap:8px}
  .lane{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;width:100%}
  .lane-name{min-width:3em;text-align:left}
  .lane-cards{min-height:0}
  .total{flex-direction:column;gap:0;align-items:center;flex:none}
  .total .digits{font-size:28px;padding:0 6px 2px}
  .total .arith{font-size:11px;white-space:nowrap;letter-spacing:-.04em}
  .total.is-wins::after{display:none}
  .total.is-wins .digits{box-shadow:inset 0 -3px 0 var(--stage-emerald)}
  .rule-chip{justify-self:center}
  .table{--card-w:40px}
  .lane-cards{gap:4px}
  .lane{gap:8px}
  .lane-name{min-width:2.6em;font-size:12px}
  .total .arith{font-size:11px}
  .mode-switch button{min-width:0;padding:6px 10px}
  .is-compact .table,.compact-hands .table{--card-w:34px;gap:4px}
  .compact-hands .total .digits{font-size:24px}
  .is-compact .stage-body{gap:6px}
  .is-compact .money-col .wagers-wrap:has(+ .money){display:none}
  .money .row{padding:4px 0}
  .money .val{font-size:21px}
  .money .row.currency{display:none}
  .wager{min-height:36px}
  .wager{padding:6px 10px;gap:8px}
  .mode-switch button{min-width:72px;padding:6px 10px;font-size:12px}
  .motion-toggle{font-size:11px;padding:6px 8px}
}
/* Short landscape phones: evidence beside caption and controls. */
@media(max-height:460px) and (min-width:600px){
  .is-player .guide-head{display:none}
  .is-player .guide:not(.guide-after){padding:6px 10px;display:flex;flex-direction:column;height:calc(100svh - var(--header-h));min-height:0}
  .player{flex:1 1 0;min-height:0;overflow:clip}
  .stage{min-height:0;height:auto;overflow:hidden}
  .chapters{margin-bottom:6px}
  .seg{min-height:30px;padding:4px 2px;gap:0}
  .seg .t{display:none}
  .player{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .player-top{grid-column:1/-1;padding:4px 10px}
  .mode-switch button{min-height:32px;min-width:72px;padding:4px 10px;font-size:12px}
  .motion-toggle{min-height:32px;padding:4px 8px;font-size:12px}
  .stage{grid-column:1;grid-row:2/4;padding:8px 12px 0;gap:6px;min-height:0}
  .stage-head{font-size:11px;flex-wrap:nowrap}
  .stage-rules{white-space:normal;font-size:11px;letter-spacing:-.01em}.stage-rules span{margin:0 1px}
  .stage-body{gap:8px}
  .stage-note{font-size:13px;line-height:1.35}
  .stage .stage-caption{display:none}
  .table{--card-w:44px;gap:6px 14px}
  .total .digits{font-size:30px;padding:2px 6px}
  .total .arith{font-size:11px}
  .wager{min-height:34px;padding:4px 10px;font-size:13px}
  .stake{font-size:15px}
  .wagers-wrap{gap:6px}
  .money{margin:0}
  .money .row{padding:3px 0}
  .money .lbl{font-size:13px}
  .money .val{font-size:20px}
  .money .val .eq{font-size:13px}
  .money .val .eq.is-live{font-size:20px}
  .money .row.grand{padding-top:6px}
  .money .row.currency{display:none}
  .is-compact .stage-body:has(.money-col){flex-direction:row;flex-wrap:nowrap;gap:6px 18px;align-items:center}
  .compact-hands{flex:0 0 190px}
  .money-col{flex:1 1 auto;gap:4px}
  .is-compact .money-col .wagers-wrap:has(+ .money){display:none}
  .is-compact .table,.compact-hands .table{--card-w:34px;gap:4px 10px}
  .compact-hands .total .digits{font-size:24px}
  .compact-hands .total .arith{font-size:11px}
  .side-caption{display:block;grid-column:2;grid-row:2;margin:0;padding:12px 14px 4px;font-size:14px;line-height:1.5;color:var(--body);overflow:auto}
  .player.waiting .transport{grid-column:1/-1;grid-row:4}
  .player.waiting .player-bottom{grid-row:5}
  .check-panel{grid-column:2;grid-row:2/4;padding:10px;overflow:auto;border-left:1px solid var(--line);border-bottom:0}
  .check-panel h2{font-size:15px;margin:4px 0 8px}
  .answer{min-height:38px;font-size:13px;padding:6px 10px}
  .voice-status{grid-column:1/-1}
  .transport{grid-column:2;grid-row:3;padding:6px 10px}
  .transport-buttons{margin-top:4px}
  .play-button{min-height:40px;min-width:92px}
  .player-bottom{grid-column:1/-1;padding:6px 12px}
  .guide-under{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ------------------------------------------------------------------ */
/* Directed scenes b01, b02, b05–b09                                   */
/* ------------------------------------------------------------------ */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--stage-line);border-radius:8px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--stage-body);transition:opacity .3s,border-color .3s,color .3s}
.chip.is-large{font-size:17px;padding:10px 18px}
.chip.is-quiet{opacity:.55}
.chip.is-emph{border-color:var(--stage-emerald);color:var(--stage-text)}
.lane.is-name-only .lane-cards{display:none}
.lane.is-name-only .lane-name{font-size:28px;padding:16px 24px;border:1px solid var(--stage-line);border-radius:10px}
.digit-scale{list-style:none;margin:0;padding:0;display:flex;gap:4px;font-family:var(--font-data);font-size:18px;font-variant-numeric:tabular-nums}
.digit-scale li{min-width:30px;height:36px;display:grid;place-items:center;border-radius:6px;color:var(--stage-muted);border:1px solid transparent}
.digit-scale li.is-top{color:var(--stage-emerald);border-color:var(--stage-emerald);font-weight:700;font-size:22px}
.sequence-strip{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-family:var(--font-display);font-size:16px;font-weight:600;transition:opacity .3s}
.sequence-strip li{padding:12px 18px;border:1px solid var(--stage-line);border-radius:8px;position:relative}
.sequence-strip li+li::before{content:"→";position:absolute;left:-16px;top:50%;transform:translate(-50%,-50%);color:var(--stage-emerald);font-weight:400}
.sequence-strip li.is-active{border-color:var(--stage-emerald);color:var(--stage-text);box-shadow:inset 0 0 0 1px var(--stage-emerald)}
.sequence-strip.is-dim{opacity:.4}
.rule-cards{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.rule-cards li{padding:14px 18px;border:1px solid var(--stage-line);border-radius:10px;font-family:var(--font-display);font-size:16px;font-weight:600;background:rgba(255,255,255,.03)}
.rule-cards.is-small li{padding:8px 12px;font-size:13px;font-weight:500;color:var(--stage-body)}
.value-cards{list-style:none;margin:0;padding:0;display:flex;gap:16px;align-items:flex-end;justify-content:center;flex-wrap:wrap;--card-w:76px}
.value-cards li{display:flex;flex-direction:column;align-items:center;gap:8px}
.value-cards li.ellipsis{font-size:28px;color:var(--stage-muted);align-self:center;padding-bottom:30px}
.card-value{font-family:var(--font-data);font-size:26px;font-weight:600;color:var(--stage-emerald)}
.value-rule{margin:0;font-family:var(--font-display);font-size:15px;font-weight:600}
.single{display:flex;justify-content:center;width:100%;--card-w:92px}
.single .lane{flex-direction:row;gap:28px;align-items:center}
.single .total .digits{font-size:52px}
.total.is-unknown .digits{color:var(--stage-muted);border:2px dashed var(--stage-line)}
.arith-only{display:flex;flex-direction:column;align-items:center;gap:12px}
.arith-only .total .digits{font-size:52px}
.definition{display:flex;align-items:center;gap:16px}
.def-arrow{font-size:28px;color:var(--stage-emerald)}
.edge-rows{width:min(560px,100%);margin:0}
.basis{margin:0;font-family:var(--font-display);font-size:13px;color:var(--stage-muted);text-align:center}
.stage-body:has(.basis) .edge-rows+.basis{margin-top:-6px}
.edge-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 20px;padding:10px 0;border-bottom:1px solid var(--stage-line);transition:opacity .3s}
.edge-row dt b{font-family:var(--font-display);font-size:16px;font-weight:650;display:block}
.edge-row dt small{display:block;font-size:13px;color:var(--stage-muted);margin-top:2px}
.edge-row dd{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:140px}
.edge-row .pct{font-family:var(--font-data);font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.edge-row .pct.is-blank{color:var(--stage-muted)}
.edge-row .bar{display:block;height:6px;width:140px;border-radius:3px;background:var(--stage-line);position:relative;overflow:hidden}
.edge-row .bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--stage-emerald);border-radius:3px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.edge-row.is-pending dt{opacity:.45}
.edge-row.is-emph dt b,.edge-row.is-emph .pct{color:var(--stage-emerald)}
.outcome-bar{display:flex;width:min(640px,100%);height:88px;margin-bottom:18px;border-radius:10px;overflow:hidden;gap:3px}
.share{flex:0 0 calc(var(--w) - 2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.08);border:1px solid var(--stage-line);border-radius:6px;transition:opacity .4s,background .4s;min-width:0}
.share b{font-family:var(--font-data);font-size:22px;font-weight:600;letter-spacing:-.03em}
.share small{font-family:var(--font-display);font-size:13px;font-weight:600;white-space:nowrap}
.share-banker{background:rgba(16,185,129,.22);border-color:var(--stage-emerald)}
.share-tie{flex-basis:calc(var(--w) - 2px)}
.share-tie b{font-size:16px}
.outcome-wrap{position:relative;width:min(640px,100%);padding-bottom:28px}
.outcome-wrap .outcome-bar{width:100%;margin-bottom:0}
.midline{position:absolute;left:50%;top:-8px;bottom:14px;width:0;border-left:2px dashed var(--stage-muted);opacity:0;transition:opacity .4s}
.midline i{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--font-data);font-size:11px;color:var(--stage-muted);margin-top:4px}
.outcome-bar.is-excluding .share:not(.share-tie) b{opacity:0}
.outcome-wrap.is-excluding .midline{opacity:1}
.share{transition:flex-basis .7s cubic-bezier(.2,.8,.2,1),opacity .4s,background .4s}
.outcome-bar.is-excluding .share-tie{flex-basis:0;opacity:0;border:0;overflow:hidden}
.outcome-bar.is-excluding{gap:0}
.outcome-bar.is-excluding .share:not(.share-tie){flex-basis:var(--wx)}
.outcome-bar.is-excluding .share-banker{border-radius:6px 0 0 6px}.outcome-bar.is-excluding .share-player{border-radius:0 6px 6px 0}
.stake-loop{display:flex;align-items:center;gap:12px;color:var(--stage-emerald)}
.loop-arrow{width:80px;height:40px}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(620px,100%);text-align:left}
.two-up>div{padding:14px 16px;border:1px solid var(--stage-line);border-radius:10px;transition:opacity .3s,border-color .3s}
.two-up>div.is-emph{border-color:var(--stage-emerald)}
.two-up>div.is-dim{opacity:.5}
.two-up b{font-family:var(--font-display);font-size:17px;font-weight:650;display:block}
.two-up p{font-size:14px;color:var(--stage-body);margin-top:6px;line-height:1.45}
.two-up .beads{margin-top:10px}
.two-up .bead{width:30px;height:30px;font-size:13px}
.two-up.is-tiles>div{text-align:center;padding:22px 16px}
.two-up.is-tiles b{font-size:22px}
.token-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;width:min(560px,100%)}
.token-grid.is-compact{width:min(420px,100%);gap:4px}
.token-grid.is-compact .token{height:22px;font-size:11px}
.token{display:grid;place-items:center;height:36px;border-radius:6px;border:1px solid var(--stage-line);font-family:var(--font-data);font-size:12px;font-variant-numeric:tabular-nums;color:var(--stage-body)}
.token.is-more{border-style:dashed;color:var(--stage-muted)}
.figure{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0}
.figure-label{font-family:var(--font-display);font-size:14px;font-weight:650;color:var(--stage-body)}
.figure-value{font-family:var(--font-data);font-size:40px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:12px}
.figure-value .eq{font-size:20px;font-weight:500;color:var(--stage-muted)}
.figure-value b{color:var(--stage-emerald)}
.figure.is-secondary .figure-value{font-size:32px}
.figure.is-secondary .figure-value b{color:var(--stage-text)}
.figure-note{font-size:13px;color:var(--stage-muted);max-width:40ch;text-align:center}
.variant{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.placard{border:1px solid var(--stage-line);border-top:3px solid var(--stage-text);border-radius:10px;padding:14px 20px;text-align:left;width:min(440px,100%);background:rgba(255,255,255,.03)}
.placard-title{font-family:var(--font-display);font-size:12px;font-weight:650;letter-spacing:.08em;color:var(--stage-muted);display:block;margin-bottom:6px}
.placard p{font-family:var(--font-display);font-size:17px;font-weight:600;margin:4px 0}
.struck{font-family:var(--font-data);font-size:22px;color:var(--stage-muted)}
.struck s{text-decoration-thickness:2px;text-decoration-color:var(--stage-text)}
.beads{display:flex;gap:10px;align-items:center}
.bead{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stage-text);font-family:var(--font-display);font-size:18px;font-weight:650;position:relative}
.bead.is-unknown{border-style:dashed;border-color:var(--stage-muted);color:var(--stage-muted)}
.ghosts{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;gap:6px;font-size:13px;font-style:normal;color:var(--stage-body);white-space:nowrap}
.ghosts i{font-style:normal;opacity:.75;border:1px dashed var(--stage-line);border-radius:4px;padding:2px 7px}
.stake-change{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap}
.stake-chip.is-small{font-size:13px;padding:6px 12px}
.stake-chip.is-large{font-size:20px;padding:14px 24px;border-width:2px}
.stake-arrow{font-size:26px;color:var(--stage-emerald)}
.stake-change .bead{width:58px;height:58px}
.shoe{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(520px,100%)}
.shoe svg{width:100%;height:auto}
.shoe-box{fill:rgba(255,255,255,.04);stroke:var(--stage-line);stroke-width:1.5}
.shoe-card{fill:var(--card-face);stroke:#c9cfd8;stroke-width:1}
.shoe-card.is-out{fill:var(--card-back);stroke:#3f556d}
.shoe-arrow{fill:none;stroke:var(--stage-emerald);stroke-width:2}
.shoe.is-emph .shoe-box{stroke:var(--stage-emerald);stroke-width:2.5}
.shoe figcaption{display:flex;justify-content:space-between;width:100%;font-family:var(--font-display);font-size:13px;color:var(--stage-muted)}
.closing{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.button.on-stage{border-color:var(--stage-line);color:var(--stage-text)}
.button.on-stage:hover{border-color:var(--stage-text)}
.is-animated .chip.is-enter,.is-animated .rule-cards li.is-enter,.is-animated .value-cards li.is-enter,.is-animated .edge-row.is-enter,.is-animated .share.is-enter,.is-animated .two-up.is-enter,.is-animated .figure.is-enter,.is-animated .placard.is-enter,.is-animated .bead.is-enter,.is-animated .struck.is-enter,.is-animated .closing.is-enter,.is-animated .definition.is-enter,.is-animated .sequence-strip.is-enter,.is-animated .digit-scale.is-enter,.is-animated .stake-loop.is-enter,.is-animated .token-grid.is-enter{animation:rise .4s ease-out both;animation-delay:calc(var(--enter-order,0)*110ms)}
.is-animated .token.is-enter{animation:rise .3s ease-out both;animation-delay:calc(var(--enter-order,0)*35ms)}
.is-animated .shoe-card.is-out.is-enter{animation:deal .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--enter-order,0)*120ms);transform-box:fill-box;transform-origin:center}
@media(max-width:760px){
  .lane.is-name-only .lane-name{font-size:22px;padding:12px 18px}
  .digit-scale{gap:2px;font-size:15px}.digit-scale li{min-width:26px;height:32px}
  .sequence-strip{font-size:14px;gap:10px}.sequence-strip li{padding:10px 12px}
  .rule-cards li{padding:10px 12px;font-size:14px}
  .value-cards{--card-w:46px;gap:8px}.card-value{font-size:20px}.value-cards li.ellipsis{padding-bottom:22px;font-size:22px}
  .single{--card-w:56px}.single .lane{gap:16px}.single .total .digits{font-size:40px}.arith-only .total .digits{font-size:40px}
  .edge-row{padding:6px 0}.edge-row dt b{font-size:14px}.edge-row dt small{font-size:12px}.edge-row .pct{font-size:24px}.edge-row .bar{width:110px}.edge-row dd{min-width:110px}
  .outcome-bar{height:72px}.share b{font-size:17px}.share small{font-size:11px}.share-tie b{font-size:12px}
  .two-up{gap:10px}.two-up>div{padding:10px 12px}.two-up b{font-size:15px}.two-up p{font-size:13px}.two-up.is-tiles>div{padding:14px 10px}.two-up.is-tiles b{font-size:18px}
  .token-grid{gap:4px}.token{height:26px;font-size:11px}
  .figure-value{font-size:30px}.figure-value .eq{font-size:15px}.figure.is-secondary .figure-value{font-size:26px}.figure{padding:4px 0}
  .placard{padding:8px 12px}.placard p{font-size:14px;margin:2px 0}.placard-title{margin-bottom:2px}.variant{gap:8px}
  .shoe{width:min(300px,100%)}.shoe figcaption{font-size:11px}
  .bead{width:38px;height:38px;font-size:15px}.beads{gap:6px}
  .chip.is-large{font-size:14px;padding:8px 12px}
}
@media(max-width:379px){
  .value-cards{--card-w:40px}
  .edge-row{grid-template-columns:1fr auto}.edge-row .bar{width:80px}.edge-row dd{min-width:80px}
  .two-up{grid-template-columns:1fr}
  .two-up.is-tiles,.two-up.is-contrast{grid-template-columns:1fr 1fr}
  .two-up.is-contrast>div{padding:8px}.two-up.is-contrast b{font-size:13px}.two-up.is-contrast p{font-size:11px;margin-top:3px}
  .two-up.is-contrast .bead{width:24px;height:24px;font-size:11px}.two-up.is-contrast .beads{gap:3px;margin-top:6px}
  .shoe{width:min(220px,100%)}
  .stage-body:has(.is-contrast) .shoe{width:min(170px,100%)}.stage-body:has(.is-contrast) .shoe figcaption{display:none}
  .placard p{font-size:13px}.money .row{padding:3px 0}.variant .money .row.currency{display:none}
  .outcome-bar{height:64px}
}
@media(max-height:460px) and (min-width:600px){
  .value-cards{--card-w:40px;gap:8px}.card-value{font-size:18px}
  .single{--card-w:48px}.single .total .digits{font-size:34px}
  .edge-row{padding:3px 0}.edge-row .pct{font-size:20px}.edge-row dt b{font-size:13px}.edge-row dt small{font-size:11px}.edge-row .bar{width:90px}.edge-row dd{min-width:90px;gap:3px}
  .outcome-bar{height:56px}.share b{font-size:15px}.share small{font-size:11px}
  .two-up>div{padding:8px 10px}.two-up p{font-size:12px}.two-up.is-tiles>div{padding:10px}
  .token{height:22px;font-size:11px}.token-grid{gap:3px}
  .figure{padding:2px 0}.figure-value{font-size:26px}.figure.is-secondary .figure-value{font-size:22px}.figure-note{font-size:11px}
  .placard{padding:8px 12px;width:min(360px,100%)}.placard p{font-size:14px;margin:2px 0}
  .variant:has(.money){flex-direction:row;align-items:center;justify-content:center;gap:16px}.variant:has(.money) .placard{width:min(230px,42%);flex:none}.variant .money{width:min(260px,100%)}.variant .single{width:auto}
  .bead{width:34px;height:34px;font-size:14px}
  .shoe{width:min(380px,100%)}
  .stage-body:has(.is-contrast){flex-direction:row;gap:14px}.stage-body:has(.is-contrast) .shoe{width:190px;flex:none}.stage-body:has(.is-contrast) .shoe figcaption{display:none}.two-up.is-contrast{gap:8px}.two-up.is-contrast>div{padding:6px 8px}.two-up.is-contrast p{font-size:11px}.two-up.is-contrast .bead{width:24px;height:24px;font-size:11px}.two-up.is-contrast .beads{gap:3px;margin-top:4px}
  .rule-cards li{padding:8px 10px;font-size:13px}
  .sequence-strip li{padding:8px 10px;font-size:13px}
  .lane.is-name-only .lane-name{font-size:20px;padding:8px 14px}
}

/* Narrow-phone overrides for the directed-scene classes above (must follow their base rules). */
@media(max-width:379px){
  .ghosts{font-size:11px;gap:4px;left:auto;right:0;transform:none}.ghosts i{padding:1px 4px}
  .stake-change{gap:6px}.stake-chip.is-small{font-size:12px;padding:5px 9px}.stake-chip.is-large{font-size:15px;padding:9px 13px}.stake-change .bead{width:42px;height:42px;font-size:15px}.stake-arrow{font-size:18px}
  .bead{width:40px;height:40px;font-size:15px}.beads{gap:6px}
  .value-cards{--card-w:40px;gap:8px}.card-value{font-size:18px}
  .edge-row .pct{font-size:22px}.edge-row .bar,.edge-row dd{width:80px;min-width:80px}
}

/* Dense compositions on phones: explicit narrow layouts (tight mode), so evidence is not solved by scale. */
@media(max-width:760px){
  .stage.is-tight .stage-body{gap:8px}
  .stage.is-tight .placard{padding:6px 10px}.stage.is-tight .placard p{font-size:13px;margin:1px 0}
  .stage.is-tight .figure{padding:0;gap:2px}.stage.is-tight .figure-value{font-size:28px}.stage.is-tight .figure.is-secondary .figure-value{font-size:22px}.stage.is-tight .figure-label{font-size:12px}.stage.is-tight .figure-note{font-size:11.5px}
  .stage.is-tight .edge-row{padding:4px 0;gap:2px 12px}.stage.is-tight .edge-row .pct{font-size:20px}.stage.is-tight .edge-row dt{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.stage.is-tight .edge-row dt b{font-size:13px;display:inline}.stage.is-tight .edge-row dt small{font-size:12px;display:inline;margin:0}.stage.is-tight .edge-row .bar{display:none}.stage.is-tight .edge-row dd{min-width:72px;gap:0}
  .stage.is-tight .money .row{padding:3px 0}.stage.is-tight .money .val{font-size:20px;gap:6px}.stage.is-tight .money .val .eq{font-size:13px;white-space:nowrap}.stage.is-tight .money .lbl{font-size:13px;white-space:nowrap}
  .stage.is-tight .variant .money .val{flex-direction:column;align-items:flex-end;gap:0;line-height:1.1}.stage.is-tight .variant .money .val .eq{font-size:13px}.stage.is-tight .money .row.grand{padding-top:5px}
  .stage.is-tight .lane{gap:5px}.stage.is-tight .total .digits{font-size:26px;padding:0 6px 2px}
  .stage.is-tight .wagers-wrap{gap:6px}.stage.is-tight .wager{min-height:32px;padding:4px 10px}
  .stage.is-tight .two-up>div{padding:8px 10px}.stage.is-tight .two-up b{font-size:14px}
  .stage.is-tight .beads{gap:5px}.stage.is-tight .bead{width:34px;height:34px;font-size:13px}
  .stage.is-tight .two-up.is-contrast .beads{gap:4px;margin-top:6px}.stage.is-tight .two-up.is-contrast .bead{width:24px;height:24px;font-size:11px}
  .stage.is-tight .single{--card-w:30px}.stage.is-tight .struck{font-size:16px}
  .stage.is-tight .placard-title{font-size:11.5px;margin-bottom:1px}
  .stage.is-tight .outcome-bar{height:60px}
  .stage.is-tight .digit-scale li{min-width:22px;height:28px;font-size:13px}.stage.is-tight .digit-scale li.is-top{font-size:17px}
  .stage.is-tight .sequence-strip li{padding:8px 10px;font-size:13px}
  .stage.is-tight .rule-cards li{padding:8px 10px;font-size:13px}
  .stage.is-tight .value-cards{--card-w:40px;gap:8px}.stage.is-tight .card-value{font-size:18px}
  .stage.is-tight .chip.is-large{font-size:13px;padding:6px 10px}
  /* The shoe diagram belongs to earlier sentences; when the record-vs-remaining contrast is the evidence, it yields. */
  .stage.is-tight .stage-body:has(.is-contrast) .shoe{display:none}
  .stage.is-tight .two-up.is-contrast{grid-template-columns:1fr 1fr}
  /* The push example: the equal totals (with their arithmetic) are the evidence; card images yield to the ledger. */
  .stage.is-tight .stage-body:has(.money) .compact-hands .lane-cards{display:none}.stage.is-tight .compact-hands .table{gap:4px 24px}
  .stage.is-tight.is-compact .stage-body:has(.money){flex-direction:row;align-items:center;gap:10px}.stage.is-tight .stage-body:has(.money) .compact-hands{flex:0 0 112px;width:auto}.stage.is-tight .stage-body:has(.money) .compact-hands .table{grid-template-columns:1fr;gap:6px;justify-items:start}.stage.is-tight .stage-body:has(.money) .lane{flex-direction:column;align-items:flex-start;gap:2px;width:auto}.stage.is-tight .stage-body:has(.money) .money-col{flex:1 1 auto;width:auto;min-width:0}.stage.is-tight .stage-body:has(.money) .money .val{font-size:18px}
  .stage.is-tight .variant:has(.money){flex-direction:row;align-items:center;gap:10px}.stage.is-tight .variant:has(.money) .placard{flex:0 0 124px;width:auto}.stage.is-tight .variant .money{flex:1 1 auto;width:auto;min-width:0}.stage.is-tight .variant .single{width:auto}
  .stage.is-tight .compact-hands .total{flex-direction:row;gap:8px;align-items:baseline}.stage.is-tight .compact-hands .total .digits{font-size:24px}
}

/* Late overrides (after the directed-scene base rules). */
@media(max-width:379px){
  .single .lane{gap:10px;justify-content:center;width:auto}
  .stage.is-tight .lane.is-quiet .lane-cards{display:none}
  .stage.is-tight .lane.is-quiet{width:auto;justify-content:center}
  .stage.is-tight .table:has(.is-quiet){grid-template-columns:1fr 1fr;gap:6px 18px;justify-items:center}
  .stage.is-tight .token.is-more:nth-child(n+31){display:none}
}
@media(max-height:460px) and (min-width:600px){
  .single .lane{gap:12px}
  .digit-scale li{min-width:24px;height:30px;font-size:15px}
}

@media(max-width:760px){
  .stage.is-tight .variant{gap:6px}
  .stage.is-tight .struck{font-size:16px}
}

/* Short landscape: evidence column keeps its height; the note joins the caption column; dense variants go two-column. */
@media(max-height:460px) and (min-width:600px){
  .stage .stage-note{display:none}
  .side-caption .side-note{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
  .player.waiting .side-caption{display:none}
  .shoe{width:min(240px,100%)}
  .variant:not(:has(.money)){display:grid;grid-template-columns:auto 1fr;grid-template-areas:"p l" "p s";align-items:center;column-gap:16px;row-gap:6px;justify-items:center}
  .variant:not(:has(.money)) .placard{grid-area:p;width:min(176px,40vw)}
  .variant:not(:has(.money)) .struck{font-size:17px}
  .variant:not(:has(.money)) .single{--card-w:40px}
  .variant:not(:has(.money)) .single{grid-area:l;width:auto}
  .variant:not(:has(.money)) .struck{grid-area:s}
  .stage.is-tight .total .digits{font-size:26px}
}

/* English on narrow phones: keep the mode switch and motion toggle on one row so the stage keeps its height. */
@media(max-width:379px){
  :lang(en) .mode-switch button{min-width:0;padding:6px 8px;font-size:12px}
  :lang(en) .motion-toggle{font-size:11px;padding:5px 7px;gap:5px}
}

/* ================================================================== */
/* Motion, v2: choreographed to the narration.                        */
/* Every change lands on the word that names it (--at, from the        */
/* recording's word timestamps). Animated mode only: Still and reduced */
/* motion render the finished evidence at once (rules at the bottom).  */
/* Brand: motion explains the quantity; no chips, glitter or confetti. */
/* ================================================================== */

/* --- Cards: two faces on a 3D flipper -------------------------------- */
.card{position:relative;display:inline-block;perspective:800px;width:var(--card-w);height:calc(var(--card-w)*1.4);flex:none;border-radius:6px;outline:3px solid transparent;outline-offset:3px;transition:outline-color .4s,opacity .6s,filter .6s}
.card .flip{position:absolute;inset:0;transform-style:preserve-3d}
.card .face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card .face.back{transform:rotateY(180deg)}
.card.is-emph{outline-color:var(--stage-emerald)}
.lane.is-dim .card:not(.is-emph){opacity:.42;filter:saturate(.6)}

@keyframes card-fly{0%{opacity:0;transform:translate(var(--from-x,90px),var(--from-y,-110px)) rotate(-22deg) scale(.8)}12%{opacity:1}62%{transform:translate(0,-10px) rotate(3deg) scale(1.04)}80%{transform:translate(0,2px) rotate(-1deg) scale(1)}100%{opacity:1;transform:none}}
@keyframes card-turn{0%,48%{transform:rotateY(180deg)}82%{transform:rotateY(-14deg)}100%{transform:rotateY(0)}}
@keyframes card-shadow{0%,100%{box-shadow:0 0 0 rgba(0,0,0,0)}40%{box-shadow:0 18px 28px rgba(0,0,0,.45)}}
.is-animated .card.is-enter{animation:card-fly 1s cubic-bezier(.22,.9,.25,1) both,card-shadow 1s ease both;animation-delay:var(--at,calc(var(--enter-order,0)*200ms))}
.is-animated .card.is-enter:not(.is-down) .flip{animation:card-turn 1s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--at,calc(var(--enter-order,0)*200ms))}
/* A card that becomes emphasised later rings when the class arrives (is-settle), not again after its entrance. */
.is-animated .card.is-emph.is-settle:not(.is-enter){animation:ring 1.4s ease-out 2}
.is-animated .card.is-enter.is-emph{animation:card-fly 1s cubic-bezier(.22,.9,.25,1) both,ring 1.4s ease-out 2;animation-delay:var(--at,0ms),calc(var(--at,0ms) + 1s)}

/* A face-down card turns over where it lies: it lifts, flips on its word and settles. */
@keyframes card-lift{0%{transform:none}40%{transform:translateY(-6px) scale(1.04)}100%{transform:none}}
.is-animated .card.is-enter.is-turn{animation:card-lift .75s cubic-bezier(.3,.7,.2,1) both,card-shadow .75s ease both;animation-delay:var(--at,calc(var(--enter-order,0)*200ms))}
@keyframes card-turn-now{0%{transform:rotateY(180deg)}65%{transform:rotateY(-12deg)}100%{transform:rotateY(0)}}
.is-animated .card.is-enter.is-turn .flip{animation:card-turn-now .75s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(var(--at,calc(var(--enter-order,0)*200ms)) - 120ms)}

/* --- Totals: arithmetic writes in, digits roll up, tens digit falls away -- */
@keyframes roll-up{0%{opacity:0;transform:translateY(70%)}60%{opacity:1;transform:translateY(-8%)}100%{transform:none}}
@keyframes write-in{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes land{0%{transform:scale(1);color:inherit}35%{transform:scale(1.35);color:var(--stage-emerald);text-shadow:0 0 18px rgba(16,185,129,.55)}100%{transform:scale(1)}}
.total .digits{overflow:visible}
.total .digits>span{display:inline-block}
.is-animated .total.is-enter .arith{animation:write-in .7s ease-out both;animation-delay:var(--at,calc(var(--enter-order,0)*200ms))}
.is-animated .total.is-enter .digits>span{animation:roll-up .7s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--at,calc(var(--enter-order,0)*200ms)) + 250ms)}
/* The tens digit drops on the word itself and is gone in about half a second; the ones digit then lands. */
.total .tens{transition:max-width .45s cubic-bezier(.5,0,.3,1) .12s,opacity .4s ease-in .1s,transform .55s cubic-bezier(.55,0,.8,.3)}
.total.is-reduced .tens{transform:translateY(46px) rotate(38deg)}
.is-animated .total.is-reduced.is-settle .ones{animation:land .8s ease-out .4s}

/* Winner: the loser fades back, the winning total swells, the underline draws. */
.lane,.lane-name,.total{transition:opacity .7s ease}
.total.is-wins .digits{transition:color .5s}
.is-animated .total.is-wins.is-settle .digits{animation:land 1s ease-out}
.is-animated .total.is-wins.is-settle::after{animation:grow-x .7s cubic-bezier(.2,.8,.2,1) .25s both;transform-origin:left}
.is-animated .lane.is-dim.is-settle{transition:opacity .9s ease .2s}

/* Empty third-card slot: “a card goes here”. */
@keyframes slot-wait{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}50%{box-shadow:0 0 0 6px rgba(16,185,129,.18)}}
.is-animated .slot.is-emph{animation:slot-wait 1.8s ease-in-out infinite}
.is-animated .slot.is-enter{animation:rise .6s ease-out both;animation-delay:var(--at,calc(var(--enter-order,0)*200ms))}

/* --- Money: stake drops on its wager; rows write in; commission slides out of the win --- */
@keyframes drop-bounce{0%{opacity:0;transform:translateY(-46px) scale(.9)}55%{opacity:1;transform:translateY(5px)}75%{transform:translateY(-3px)}100%{transform:none}}
@keyframes row-in{0%{opacity:0;transform:translateX(-26px)}100%{opacity:1;transform:none}}
@keyframes minus-in{0%{opacity:0;transform:translateX(36px) scale(.9);background:rgba(16,185,129,0)}45%{opacity:1;transform:translateX(-4px) scale(1.06);background:rgba(16,185,129,.28)}100%{transform:none;background:rgba(16,185,129,0)}}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.is-animated .stake.is-enter{animation:drop-bounce .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--at,calc(var(--enter-order,0)*200ms))}
.is-animated .money .row.is-enter{animation:row-in .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--at,calc(var(--enter-order,0)*260ms))}
.is-animated .money .row.is-enter .val{animation:roll-up .6s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--at,calc(var(--enter-order,0)*260ms)) + 220ms)}
.money .row.grand{position:relative}
.is-animated .money .row.grand.is-enter{border-top-color:transparent}
.is-animated .money .row.grand.is-enter::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--stage-text);transform-origin:left;animation:rule-draw .6s ease-out both;animation-delay:var(--at,0ms)}
.is-animated .money .row.grand.is-enter .val{animation:land 1.1s ease-out both;animation-delay:calc(var(--at,0ms) + 350ms)}
.minus{display:inline-block;border-radius:6px;padding:0 4px}
.is-animated .minus.is-enter{animation:minus-in .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--at,600ms)}
.money .row.grand .val{background:none}
.is-animated .money .val .equals.is-enter,.is-animated .money .val b.is-enter{display:inline-block;animation:roll-up .6s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--at,0ms)}
.is-animated .money .val b.is-enter{animation:land 1s ease-out both,roll-up .6s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--at,0ms) + 150ms),var(--at,0ms)}

/* --- House edge and outcome shares: grow on their numbers ------------ */
@keyframes grow-w{from{width:0}}
@keyframes grow-basis{from{flex-basis:0;opacity:0}}
.is-animated .edge-row.is-enter{animation:row-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--at,0ms)}
.is-animated .edge-row.is-enter .bar::after{animation:grow-w 1.2s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--at,0ms) + 150ms)}
.is-animated .edge-row.is-enter .pct{animation:land 1.2s ease-out both;animation-delay:calc(var(--at,0ms) + 900ms)}
.is-animated .share.is-enter{animation:grow-basis 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--at,0ms) + var(--i,0)*220ms)}

/* --- Totals wagered, expected loss ----------------------------------- */
@keyframes focus-in{0%{opacity:0;transform:scale(.7);filter:blur(6px)}60%{opacity:1;transform:scale(1.06);filter:blur(0)}100%{transform:none}}
@keyframes pop-in{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
.is-animated .figure.is-enter{animation:focus-in .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--at,0ms)}
.is-animated .token.is-enter{animation:pop-in .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--at,0ms) + var(--enter-order,0)*45ms)}

/* --- Scoreboard beads drop in like markers; the unknown result breathes -- */
@keyframes bead-drop{0%{opacity:0;transform:translateY(-40px) scale(.6)}60%{opacity:1;transform:translateY(4px) scale(1.06)}100%{transform:none}}
@keyframes breathe{0%,100%{transform:scale(1);border-color:var(--stage-muted)}50%{transform:scale(1.08);border-color:var(--stage-text)}}
.is-animated .bead.is-enter{animation:bead-drop .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--at,0ms) + var(--i,0)*170ms)}
.is-animated .bead.is-unknown{animation:breathe 2.6s ease-in-out infinite}
.is-animated .bead.is-unknown.is-enter{animation:bead-drop .6s cubic-bezier(.3,1.4,.5,1) both,breathe 2.6s ease-in-out 1.6s infinite;animation-delay:calc(var(--at,0ms) + 900ms),calc(var(--at,0ms) + 1.6s)}

/* --- The shoe: dealt cards slide out to the discard, one by one ------- */
@keyframes deal-out{0%{opacity:0;transform:translateX(-110px) rotate(-8deg)}100%{opacity:1;transform:none}}
.shoe-card{transform-box:fill-box;transform-origin:center}
.is-animated .shoe-card.is-out.is-enter{animation:deal-out .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--at,0ms) + var(--i,0)*240ms)}
.shoe-card.is-gone{opacity:0;transform:translateX(30px)}
.is-animated .shoe-card{transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.is-animated .shoe-arrows.is-enter{animation:card-in .5s ease-out both;animation-delay:calc(var(--at,0ms) + 1.5s)}

/* --- Rules, placards, scale, strike ---------------------------------- */
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}100%{box-shadow:0 0 0 16px rgba(16,185,129,0)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes strike{from{background-size:0 2px}to{background-size:100% 2px}}
@keyframes sign-drop{0%{opacity:0;transform:translateY(-30px) rotateX(55deg)}65%{opacity:1;transform:translateY(3px) rotateX(-6deg)}100%{transform:none}}
.is-animated .placard.is-enter{animation:sign-drop .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:top center}
.is-animated .placard p.is-enter{animation:rise .6s ease-out both;animation-delay:var(--at,.6s)}
.is-animated .rule-chip.is-enter{animation:pop-in .55s cubic-bezier(.3,1.5,.5,1) both,ring 1.2s ease-out .6s 1}
.is-animated .rule-cards li.is-enter{animation:sign-drop .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--enter-order,0)*260ms)}
.is-animated .digit-scale.is-enter li{animation:pop-in .4s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*90ms)}
.is-animated .digit-scale.is-enter li.is-top{animation:pop-in .6s cubic-bezier(.3,1.5,.5,1) .9s both,ring 1.2s ease-out 1.5s 1}
.struck s{text-decoration:none;background:linear-gradient(var(--stage-text),var(--stage-text)) no-repeat 0 55%/100% 2px}
.is-animated .struck.is-enter{animation:rise .5s ease-out both}
.is-animated .struck.is-enter s{animation:strike .9s ease-in-out .6s both}
.is-animated .value-cards li.is-enter .card-value{animation:roll-up .6s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--enter-order,0)*200ms + 900ms)}
.is-animated .chip.is-enter,.is-animated .two-up.is-enter,.is-animated .stake-change.is-enter,.is-animated .sequence-strip.is-enter,.is-animated .definition.is-enter,.is-animated .token-grid.is-enter,.is-animated .stake-loop.is-enter{animation:rise .6s ease-out both;animation-delay:calc(var(--enter-order,0)*200ms)}

/* --- Between compositions: the old one dissolves while the new one builds --- */
@keyframes ghost-out{0%{opacity:1;transform:none;filter:blur(0)}100%{opacity:0;transform:translateY(-12px) scale(.98);filter:blur(3px)}}
@keyframes body-in{0%{opacity:0;translate:0 16px}100%{opacity:1;translate:none}}
.stage-ghost{position:absolute;left:22px;right:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;z-index:1;animation:ghost-out .6s ease-in forwards}
.is-animated.is-beat-change .stage-body:not(.stage-ghost),.is-animated.is-scene-change .stage-body:not(.stage-ghost){animation:body-in .7s cubic-bezier(.2,.8,.2,1) .2s both}
.is-animated .stage-note.is-enter{animation:rise .6s ease-out both;animation-delay:var(--at,.7s)}

/* --- Chapter card in the pause between chapters --------------------- */
@keyframes card-in{from{opacity:0}to{opacity:1}}
@keyframes title-in{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
.chapter-break{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,var(--stage) 0%,var(--stage-deep) 100%);color:var(--stage-text);text-align:center;padding:24px}
.chapter-break .n{font-family:var(--font-body);font-weight:650;font-size:15px;letter-spacing:.12em;color:var(--stage-emerald)}
.chapter-break .n i{font-style:normal;color:var(--stage-muted)}
.chapter-break b{font-family:var(--font-display);font-size:clamp(22px,3.4vw,34px);font-weight:700;letter-spacing:-.01em;max-width:22ch}
.chapter-break .rule{display:block;width:min(240px,50%);height:2px;background:var(--stage-emerald);transform-origin:center}
.is-animated .chapter-break{animation:card-in .45s ease-out both}
.is-animated .chapter-break .n{animation:title-in .5s ease-out .1s both}
.is-animated .chapter-break b{animation:title-in .6s cubic-bezier(.2,.8,.2,1) .25s both}
.is-animated .chapter-break .rule{animation:grow-x 1.4s cubic-bezier(.2,.8,.2,1) .45s both}

/* --- Still and reduced motion: finished evidence, no movement -------- */
.is-still *,.is-still *::before,.is-still *::after,.is-measuring *,.is-measuring *::before,.is-measuring *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Let dealt cards travel from the shoe across the stage; the stage itself still clips. */
.is-animated .stage-body:has(.card.is-enter){overflow:visible}
@keyframes card-out{to{opacity:0;transform:scale(1.03)}}
.chapter-break.is-leaving{animation:card-out .6s ease-in forwards!important;pointer-events:none}
.is-still .chapter-break.is-leaving{display:none}

/* --- Leaving: an element that is no longer part of the evidence fades and drops away where it stood ---- */
@keyframes leave{0%{opacity:1;transform:none;filter:blur(0)}100%{opacity:0;transform:translateY(10px) scale(.94);filter:blur(2px)}}
.is-leaving-el{pointer-events:none;z-index:0;animation:leave .45s cubic-bezier(.4,0,.6,1) forwards!important}
.is-leaving-el *{animation:none!important;transition:none!important}
/* Cards are swept off toward the discard rather than fading where they lie. */
@keyframes leave-card{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(60px,-34px) rotate(14deg) scale(.9)}}
.card.is-leaving-el{animation:leave-card .38s cubic-bezier(.5,0,.75,0) forwards!important}
.is-still .is-leaving-el{display:none}

/* ================================================================== */
/* Try it: hands-on tools. Navy stages carry the evidence; the page    */
/* carries the controls. The rule in use lights up in emerald.         */
/* ================================================================== */
.try{max-width:1120px;margin:48px auto 90px;padding:0 24px}
.try h1{font-size:48px;font-weight:800;line-height:1.08;letter-spacing:-.04em;margin:8px 0 0}
.try .reading-deck{max-width:46ch}
.try-block{margin:56px 0;padding-top:28px;border-top:1px solid var(--line)}
.try-block h2{font-size:25px;font-weight:700;margin:0 0 18px;font-family:var(--font-display);letter-spacing:-.01em}
.try-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.try-head h2{margin:0}
.try-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start}
.try-block:not(:first-of-type) .try-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.stage.try-stage{height:auto;min-height:300px;padding:22px;border-radius:10px}
.try-stage .stage-body{min-height:256px;overflow:visible}
.try-deal-col{display:flex;flex-direction:column;align-self:stretch}
.try-deal-stage{flex:1}
.try-deal-stage .stage-body{min-height:270px}
.try-deal-stage .rule-chip b.word{font-family:var(--font-display)}
.try-readout{min-height:1.5em;margin:12px 0 0;padding:8px 12px;border-left:3px solid var(--emerald);background:var(--wash);color:var(--ink);font-size:15px;line-height:1.45;border-radius:4px}
.try-readout:empty{visibility:hidden}
@keyframes readout-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.try-readout.is-new{animation:readout-in .35s ease-out}
.motion-still .try-readout.is-new{animation:none}
.try-note{font-size:15px;color:var(--muted);margin:14px 0 0;max-width:60ch}
/* Rules panel: the matching rule lights up as the round is decided. */
.try-rules{font-size:16px;color:var(--body)}
.try-rules p{margin:0 0 12px;padding:10px 12px;border-left:3px solid transparent;border-radius:4px;transition:background .35s,border-color .35s,color .35s}
.try-rules table{width:100%;border-collapse:collapse;font-size:15px}
.try-rules caption{text-align:left;font-size:13px;color:var(--muted);padding:6px 0}
.try-rules th{text-align:left;font-size:13px;font-weight:650;padding:8px 10px;border-bottom:1px solid var(--line-strong)}
.try-rules td{padding:8px 10px;border-bottom:1px solid var(--line);transition:background .35s,color .35s}
.try-rules .is-lit{background:var(--wash);border-left-color:var(--emerald);color:var(--ink)}
.try-rules tr.is-lit td{background:var(--wash);color:var(--ink);font-weight:650}
.try-rules tr.is-lit td:first-child{box-shadow:inset 3px 0 0 var(--emerald)}
/* Controls */
.try-controls{display:flex;flex-direction:column;gap:20px}
.try-bets{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.try-bets legend{font-size:13px;font-weight:650;color:var(--muted);margin-bottom:8px;font-family:var(--font-display)}
.try-bets label{position:relative}
.try-bets input{position:absolute;opacity:0;inset:0;cursor:pointer}
.try-bets span{display:inline-flex;min-height:44px;align-items:center;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.try-bets input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.try-bets input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.try-range{display:flex;flex-direction:column;gap:10px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--body)}
.try-range span{display:flex;justify-content:space-between;align-items:baseline}
.try-range output{font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.try-range input{width:100%;accent-color:var(--emerald-text);height:28px}
/* Payout panel */
.try-money .stage-body{gap:14px}
.try-bet-tag{display:flex;align-items:baseline;gap:12px;color:var(--stage-text);font-family:var(--font-display)}
.try-bet-tag span{font-size:22px;font-weight:700}
.try-bet-tag small{font-size:13px;color:var(--stage-muted)}
@keyframes tick{0%{opacity:.25;transform:translateY(6px)}100%{opacity:1;transform:none}}
.is-animated .is-tick{animation:tick .28s ease-out}
.is-animated .money .row.grand.is-tick .val{animation:land .7s ease-out}
/* Turnover panel: one token per bet */
.try-turnover{gap:16px}
.try-tokens{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;width:min(440px,100%)}
.try-tokens .tok{aspect-ratio:1;border-radius:2px;background:var(--stage-emerald);opacity:.85}
@keyframes tok-in{from{opacity:0;transform:scale(.2)}to{opacity:.85;transform:none}}
.is-animated .try-tokens .tok.is-enter{animation:tok-in .3s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--k,0)*12ms)}
.try-turnover .figure-value b{color:var(--stage-text)}
.reference-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media(max-width:860px){
  .try h1{font-size:36px}
  .try-grid,.try-block:not(:first-of-type) .try-grid{grid-template-columns:1fr}
  .stage.try-stage{padding:16px;min-height:240px}
  .try-stage .stage-body{min-height:210px}
}

/* --- Home: the hero hand deals itself, once ---------------------------------------- */
@keyframes home-deal{0%{opacity:0;transform:translate(110px,-34px) rotate(-24deg) scale(.8)}70%{opacity:1;transform:translate(0,-6px) rotate(var(--r,0deg)) scale(1.03)}100%{opacity:1;transform:rotate(var(--r,0deg))}}
@keyframes home-write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes home-land{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.25);text-shadow:0 0 24px rgba(16,185,129,.6)}100%{transform:scale(1)}}
@keyframes home-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.home-cards .playing-card{animation:home-deal .9s cubic-bezier(.22,.9,.25,1) both}
.home-cards .playing-card:nth-child(1){--r:-8deg;animation-delay:.25s}
.home-cards .playing-card:nth-child(2){--r:8deg;animation-delay:.6s}
.home-total>span:first-child{animation:home-write .6s ease-out 1.5s both}
.home-total>span:nth-child(2){animation:home-fade .3s ease-out 2s both}
.home-total b{display:inline-block;animation:home-land .9s cubic-bezier(.2,.9,.3,1.2) 2.2s both}
.home-hand-caption{animation:home-fade .6s ease-out 2.8s both}
.motion-still .home-hand *{animation:none!important;transition:none!important}













@keyframes chapter-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}








/* Practice deals can hold three cards and a slot per hand: size cards to the stage, not the guide's stage. */
.try-deal-stage{container-type:inline-size}
.stage.try-deal-stage .table{--card-w:clamp(34px,5.4vw,76px);width:100%;gap:12px}
.try-deal-stage .lane-cards{gap:6px}
.try-deal-stage .slot{width:var(--card-w);height:calc(var(--card-w)*1.4)}
@container (max-width:420px){.try-deal-stage .table{gap:6px}.try-deal-stage .lane-cards{gap:3px}}
@media(max-width:860px){.stage.try-deal-stage .table{--card-w:clamp(34px,10.5vw,52px)}}

.try-bet-notes{list-style:none;margin:2px 0 0;padding:0;width:min(420px,100%);display:flex;flex-direction:column;gap:6px}
.try-bet-notes li{font-size:14px;line-height:1.45;color:var(--stage-body);padding-left:14px;position:relative}
.try-bet-notes li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--stage-emerald)}
.try-turnover .figure-note+.figure-note{margin-top:4px}
/* Dark appearance: navy panels keep a visible edge against the dark page. */

@media(min-width:861px){.try-readout{display:none}}

/* ================================================================== */
/* Player as a theater: simple, dark, the stage is the hero.            */
/* The player uses the dark token set in both appearances, so the     */
/* stage never sits on a bright page. One orange (Play), emerald for   */
/* progress and the current chapter, everything else recedes.          */
/* ================================================================== */
.player-band{--paper:#fff;--paper-dim:var(--rg-surface-alt);--surface:#fff;--ink:var(--rg-primary);--body:var(--rg-text-dark);--muted:var(--rg-text-dark-muted);--line:var(--rg-divider-light);--line-strong:#A8B3C2;--emerald-text:var(--rg-secondary-dark);--wash:rgba(16,185,129,.08);--focus:var(--rg-secondary-dark);
  background:var(--rg-surface-alt);color:var(--rg-text-dark)}
.is-player .guide{max-width:1120px}
.is-player .guide-head{padding:22px 0 10px}
.is-player .guide-head h1{font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.is-player .back-link{color:var(--muted)}
.is-player .guide-head-links a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.is-player .guide-head-links a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
/* Chapter strip: nine quiet bars; only the number shows, the title lives in the large heading below. */
.is-player .chapters{gap:6px;margin:6px 0 0}
.is-player .seg{padding:8px 0 4px;border-top-width:2px;border-top-color:var(--line);min-height:32px}
.is-player .seg::before{top:-2px;height:2px}
.is-player .seg .t{display:none}
.is-player .seg .n{color:var(--muted);font-size:11px}
.is-player .seg.is-current .n{color:var(--emerald-text)}
.is-player .seg:hover{background:transparent}
.is-player .seg:hover .n{color:var(--ink)}
.now-playing{display:flex;align-items:baseline;gap:14px;margin:18px 0 14px;font-family:var(--font-display)}
.now-n{font-size:14px;font-weight:700;color:var(--emerald-text);font-variant-numeric:tabular-nums}
.now-playing b{font-size:clamp(22px,2.6vw,32px);font-weight:750;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
@keyframes now-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.now-playing b{animation:now-in .5s cubic-bezier(.2,.8,.2,1)}
/* The player frame disappears; the stage carries itself. */
.is-player .player{background:transparent;border:0;border-radius:0;overflow:visible}
.is-player .player-top{border:0;padding:0 0 12px}
.is-player .mode-switch{background:rgba(245,245,250,.06);border-radius:999px;padding:3px}
.is-player .mode-switch button{border-radius:999px;color:var(--muted);min-width:96px}
.is-player .mode-switch button[aria-pressed=true]{background:rgba(245,245,250,.14);color:var(--ink)}
.is-player .motion-toggle{border-color:transparent;color:var(--muted);border-radius:999px}
.is-player .motion-toggle:hover{border-color:var(--line)}
.is-player .stage{border-radius:18px;box-shadow:0 0 0 1px rgba(245,245,250,.07),0 30px 80px -20px rgba(0,0,0,.65),inset 0 1px 0 rgba(245,245,250,.05);
  background:radial-gradient(900px 420px at 50% 40%,#22344a 0%,rgba(34,52,74,0) 75%),linear-gradient(180deg,#1b2838 0%,#132030 100%)}
.is-player .stage-label{display:none}
.is-player .stage-head{justify-content:center;opacity:.8}
.is-player .stage-caption{background:transparent;font-size:19px;line-height:1.5;color:#eef2f7;padding:14px 32px 22px;border-top:1px solid rgba(245,245,250,.06)}
@keyframes caption-in{from{opacity:.0;transform:translateY(4px)}to{opacity:1;transform:none}}
.is-player .is-animated .stage-caption{animation:caption-in .4s ease-out}
/* Transport: one quiet bar under the stage. */
.is-player .transport{padding:16px 4px 4px}
.is-player .progress-row input{-webkit-appearance:none;appearance:none;height:22px;background:transparent}
.is-player .progress-row input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--emerald-text) var(--fill,0%),rgba(245,245,250,.14) var(--fill,0%))}
.is-player .progress-row input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#f5f5fa;margin-top:-5.5px;box-shadow:0 0 0 4px rgba(52,211,153,.22)}
.is-player .progress-row input::-moz-range-track{height:3px;border-radius:3px;background:rgba(245,245,250,.14)}
.is-player .progress-row input::-moz-range-progress{height:3px;border-radius:3px;background:var(--emerald-text)}
.is-player .progress-row input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#f5f5fa}
.is-player .progress-row>span{color:var(--muted)}
.is-player .transport-buttons{margin-top:10px}
.is-player .playback-buttons{display:flex;align-items:center;gap:14px}
.is-player .icon-button{color:var(--body);background:rgba(245,245,250,.06)}
.is-player .icon-button:hover{background:rgba(245,245,250,.12);color:var(--ink)}
.icon-button svg{width:22px;height:22px}
.play-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.play-button svg{width:20px;height:20px;flex:none}
.is-player .play-button{min-width:132px;min-height:50px;font-size:15px;box-shadow:0 10px 30px -10px rgba(255,107,53,.6)}
.is-player .play-button:disabled{opacity:.45;box-shadow:none}
.is-player #speed{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 12px;min-height:40px}
.is-player .caption-button{border-color:var(--line);color:var(--muted);border-radius:999px}
.is-player .caption-button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.is-player .player-bottom{border:0;padding:12px 4px 0;color:var(--muted)}
.is-player .player-bottom a,.is-player .guide-under{color:var(--muted)}
/* Questions: a calm panel that belongs to the stage. */
.is-player .check-panel{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:rgba(22,34,46,.85);backdrop-filter:blur(6px)}
@media(max-width:760px){
  .is-player .guide{padding:0 16px 32px}
  .now-playing{margin:12px 0 10px;gap:10px}
  .is-player .stage{border-radius:14px}
  .is-player .stage-caption{font-size:17px;padding:12px 18px 16px}
  .is-player .chapters{gap:4px}
}

/* Answers are tapped, not ticked: large chips; after a choice the right answer lights emerald. */
.answer-chips{display:flex;flex-wrap:wrap;gap:10px}
.answer-chip{min-height:52px;min-width:88px;padding:12px 22px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(245,245,250,.04);color:var(--ink);font-family:var(--font-display);font-size:18px;font-weight:650;text-align:left;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,opacity .3s}
.answer-chip:hover:not([aria-disabled]){transform:translateY(-2px);border-color:var(--ink);background:rgba(245,245,250,.08)}
.answer-chip:active:not([aria-disabled]){transform:translateY(0) scale(.98)}
.answer-chip[aria-disabled]{cursor:default}
.answer-chip.is-right{border-color:var(--emerald-text);background:rgba(16,185,129,.16);color:var(--ink)}
.answer-chip.is-off{opacity:.55}
.answer-chips:has(.is-right) .answer-chip:not(.is-right):not(.is-mine){opacity:.35}
@keyframes chip-right{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}100%{box-shadow:0 0 0 14px rgba(52,211,153,0)}}
.answer-chip.is-right{animation:chip-right .9s ease-out 1}
.motion-still .answer-chip{transition:none;animation:none}
.is-player .check-panel h2{font-size:22px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.is-player .feedback{border-top-color:var(--line)}
.is-player .feedback p{color:var(--body);font-size:17px}

/* Listen: thinking time after a question, drawn as a ring that fills over the recorded silence. */
.think-ring{position:absolute;right:20px;bottom:20px;width:44px;height:44px;z-index:2;opacity:0;animation:card-in .4s ease-out forwards}
.think-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.think-ring circle{fill:none;stroke:rgba(245,245,250,.14);stroke-width:3}
.think-ring circle.fill{stroke:var(--stage-emerald);stroke-linecap:round;stroke-dasharray:106.8;stroke-dashoffset:106.8;animation:think-fill var(--think,3s) linear forwards}
@keyframes think-fill{to{stroke-dashoffset:0}}
.stage.is-thinking .stage-caption{opacity:.55;transition:opacity .4s}
.is-still .think-ring circle.fill{animation:none;stroke-dashoffset:0;opacity:.5}

.check-hint{font-size:15px;color:var(--muted);margin:-8px 0 16px}
.quick-end{display:flex;flex-direction:column;align-items:center;gap:22px}
/* Play keeps the only orange; the stage's own next step is a quiet light button. */
.closing .on-stage-primary{background:#f5f5fa;color:#1b2838;border:0}
.closing .on-stage-primary:hover{background:#fff}
/* Desktop: a waiting question keeps a full-height stage, so the hand and its note breathe above the answers. */
@media(min-width:761px){.is-player .stage.at-check{height:360px;max-height:none}.is-player .stage.at-check .stage-body{padding:8px 0}}

@media(max-width:760px){
  .now-playing{margin:8px 0 6px}
  .now-playing b{font-size:18px}
  .is-player .player-top{padding:0 0 8px}
  .is-player .stage-caption{font-size:15px;line-height:1.45;padding:10px 14px 12px}
}
@media(max-height:700px) and (max-width:760px){.now-playing{display:none}}
@media(max-height:460px) and (min-width:600px){.now-playing{display:none}.is-player .player-bottom{display:none}}


.quick-shoe{display:flex;flex-direction:column;align-items:center;gap:16px}
@media(min-width:900px){.quick-shoe{flex-direction:row;gap:36px}}

/* In the short version the stake loop is the whole picture, so tight phones keep it. */
.stage.is-tight[data-beat="quick-f"] .stake-loop{display:flex}
.quick-history{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--stage-body)}
.quick-history b{font-family:var(--font-display);font-size:14px;font-weight:650;color:var(--stage-text)}
.quick-history small{font-size:13px;color:var(--stage-muted)}

/* ================================================================== */
/* Stage graphics, v3: refined, simple objects with real craft.        */
/* ================================================================== */
/* Cards */
.card{border-radius:7px;filter:drop-shadow(0 6px 10px rgba(5,12,20,.45)) drop-shadow(0 1px 1px rgba(5,12,20,.35))}
.card .face.front{fill:#1b2838}
.card.is-red .face.front{fill:#b23a30}
.card-face{fill:#fbfaf6;stroke:rgba(27,40,56,.14);stroke-width:.8}
.card-rank{font-family:var(--font-display);font-size:11.5px;font-weight:750;letter-spacing:-.02em}
.card.is-red .card-rank{fill:#b23a30}
.card-court{fill:rgba(27,40,56,.05);stroke:rgba(27,40,56,.28);stroke-width:.6}
.card.is-red .card-court{fill:rgba(178,58,48,.06);stroke:rgba(178,58,48,.32)}
.card-monogram{font-family:var(--font-display);font-size:25px;font-weight:800;letter-spacing:-.04em}
.card-back{fill:#1d3350;stroke:rgba(245,245,250,.16);stroke-width:.8}
.card-back-inner{fill:none;stroke:rgba(52,211,153,.5);stroke-width:.7}
.card-back-field{opacity:1}
.card-back-mark{fill:none;stroke:rgba(52,211,153,.75);stroke-width:1}
.card.is-emph{outline:none}
.card.is-emph .face.front .card-face{stroke:#10b981;stroke-width:2.2}
.lane.is-dim .card:not(.is-emph){opacity:.38;filter:saturate(.4) drop-shadow(0 4px 8px rgba(5,12,20,.3))}
.card-rank.is-ten{font-size:10px;letter-spacing:-.09em}
.card-back-inner{stroke-dasharray:none}

/* Numbers on the stage are set in the display face with even-width figures; the coding face is not used here. */
.stage,.home-hand{--font-data:var(--font-display);font-feature-settings:"tnum" 1}
.total .digits{font-weight:800;letter-spacing:-.05em}
.total .arith{font-weight:500;letter-spacing:.06em;color:var(--stage-muted)}
.total.is-emph .digits{box-shadow:none;color:var(--stage-emerald);background:radial-gradient(closest-side,rgba(16,185,129,.22),rgba(16,185,129,0))}
.total.is-wins .digits{color:#34d399;text-shadow:0 0 22px rgba(16,185,129,.35)}
.total.is-wins::after{width:40px;height:3px;background:linear-gradient(90deg,rgba(52,211,153,0),#34d399,rgba(52,211,153,0))}

/* Hands: each lane is a quiet panel; the winner's panel takes a soft emerald edge. */
.lane-name{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stage-muted)}
.lane.is-wins .lane-name{color:#34d399}
.table .lane{padding:14px 20px 12px;border-radius:18px;background:linear-gradient(180deg,rgba(245,245,250,.035),rgba(245,245,250,.012));box-shadow:inset 0 0 0 1px rgba(245,245,250,.06);transition:opacity .4s,box-shadow .5s}
.table .lane.is-wins{box-shadow:inset 0 0 0 1px rgba(52,211,153,.45),0 0 40px -12px rgba(16,185,129,.45)}
.lane.is-name-only{background:none!important;box-shadow:none!important}
.lane.is-name-only .lane-name{font-size:40px;font-weight:800;letter-spacing:-.03em;text-transform:none;color:#f5f5fa;border:0;padding:0 0 10px;position:relative}
.lane.is-name-only .lane-name::after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:2px;border-radius:2px;background:var(--stage-emerald)}
@media(max-width:760px){.table .lane{padding:8px 10px;border-radius:12px}.lane.is-name-only .lane-name{font-size:28px}}

/* The three main bets: one segmented track, the active bet lifted, its stake in emerald. */
.wagers{gap:4px;padding:4px;border-radius:14px;background:rgba(245,245,250,.04);box-shadow:inset 0 0 0 1px rgba(245,245,250,.07)}
.wager{border:0;border-radius:10px;min-width:92px;justify-content:center;color:var(--stage-muted);background:transparent;transition:background .3s,color .3s}
.wager.is-active{background:rgba(245,245,250,.13);color:#f5f5fa;border:0;box-shadow:inset 0 0 0 1px rgba(245,245,250,.12)}
.wager .stake{color:#34d399;font-weight:800}
.stake.is-loose{padding:6px 14px;border-radius:999px;background:rgba(16,185,129,.12);box-shadow:inset 0 0 0 1px rgba(52,211,153,.45);color:#34d399;font-weight:800}

/* Ledgers: a calm card; amounts in the display face; the total returned in emerald. */
.money{padding:6px 22px 10px;border-radius:18px;background:linear-gradient(180deg,rgba(245,245,250,.05),rgba(245,245,250,.018));box-shadow:inset 0 0 0 1px rgba(245,245,250,.08)}
.money .row{border-bottom-color:rgba(245,245,250,.07)}
.money .lbl{color:var(--stage-body)}
.money .val{font-weight:750;letter-spacing:-.035em}
.money .row.grand{border-top:1px solid rgba(245,245,250,.3)}
.money .row.grand .val{color:#34d399}
@media(max-width:760px){.money{padding:4px 14px 8px;border-radius:14px}}

/* House edge: one card, each figure with a full-width bar measured against the largest. */
.edge-rows{padding:6px 22px;border-radius:18px;background:linear-gradient(180deg,rgba(245,245,250,.05),rgba(245,245,250,.018));box-shadow:inset 0 0 0 1px rgba(245,245,250,.08)}
.edge-row{grid-template-columns:1fr auto;border-bottom-color:rgba(245,245,250,.07);padding:12px 0 14px;position:relative}
.edge-row:last-child{border-bottom:0}
.edge-row dd{min-width:0}
.edge-row .pct{font-weight:800;letter-spacing:-.04em}
.edge-row .bar{position:absolute;left:0;right:0;bottom:6px;width:auto;height:4px;border-radius:4px;background:rgba(245,245,250,.07)}
.edge-row .bar::after{background:linear-gradient(90deg,#0f9d6e,#34d399);border-radius:4px}
.edge-row.is-emph .bar::after{box-shadow:0 0 12px rgba(52,211,153,.6)}
@media(max-width:760px){.edge-rows{padding:2px 14px;border-radius:14px}}

/* Outcome shares: a single rounded bar with soft fills. */
.outcome-bar{height:76px;border-radius:16px;gap:3px;box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.share{border:0;border-radius:0;background:linear-gradient(180deg,rgba(245,245,250,.12),rgba(245,245,250,.07))}
.share-banker{background:linear-gradient(180deg,rgba(52,211,153,.42),rgba(16,185,129,.24))}
.share-tie{background:rgba(245,245,250,.05)}
.share b{font-weight:800;letter-spacing:-.04em}

/* Scoreboard beads: dimensional, with the unknown next result as an open ring. */
.bead{border:0;background:radial-gradient(circle at 35% 30%,#33507a,#1d3350 70%);box-shadow:inset 0 0 0 1.5px rgba(245,245,250,.32),0 6px 14px -6px rgba(0,0,0,.6);color:#f5f5fa;font-weight:750}
.bead.is-unknown{background:transparent;box-shadow:inset 0 0 0 2px rgba(52,211,153,.55);color:#34d399;border:0}

/* Turnover tokens: plain emerald marks, one per bet (the amount is in the equation, not on every token). */
.token{height:auto;aspect-ratio:1;border:0;border-radius:6px;font-size:0;background:linear-gradient(180deg,#34d399,#0f9d6e);box-shadow:0 3px 8px -3px rgba(0,0,0,.6)}
.token-grid{gap:7px;width:min(380px,100%)}
.token-grid.is-compact{width:min(300px,100%);gap:5px}
.token-grid.is-compact .token{height:auto;font-size:0}
.token.is-more{border:0;background:rgba(245,245,250,.16);box-shadow:inset 0 0 0 1px rgba(245,245,250,.25)}
.figure-value{font-weight:800;letter-spacing:-.04em}
.figure-value b{color:#34d399}

/* Placards, tiles, rule cards, chips: one material, one accent. */
.placard{border:0;border-radius:16px;padding:16px 22px;background:linear-gradient(180deg,rgba(245,245,250,.06),rgba(245,245,250,.02));box-shadow:inset 0 0 0 1px rgba(245,245,250,.09),inset 3px 0 0 #34d399}
.placard-title{color:#34d399;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.two-up>div{border:0;border-radius:16px;background:linear-gradient(180deg,rgba(245,245,250,.05),rgba(245,245,250,.018));box-shadow:inset 0 0 0 1px rgba(245,245,250,.08)}
.two-up>div.is-emph{box-shadow:inset 0 0 0 1px rgba(52,211,153,.55),0 0 30px -12px rgba(16,185,129,.5)}
.rule-cards li{border:0;border-radius:14px;background:linear-gradient(180deg,rgba(245,245,250,.06),rgba(245,245,250,.02));box-shadow:inset 0 0 0 1px rgba(245,245,250,.09)}
.chip{border:0;border-radius:999px;background:rgba(245,245,250,.06);box-shadow:inset 0 0 0 1px rgba(245,245,250,.1);color:var(--stage-body)}
.chip.is-emph{box-shadow:inset 0 0 0 1px rgba(52,211,153,.6);color:#f5f5fa}
.sequence-strip li{border:0;border-radius:12px;background:rgba(245,245,250,.05);box-shadow:inset 0 0 0 1px rgba(245,245,250,.08);color:var(--stage-body)}
.sequence-strip li.is-active{color:#f5f5fa;box-shadow:inset 0 0 0 1px rgba(52,211,153,.6);background:rgba(16,185,129,.1)}
.rule-chip{border:0;box-shadow:inset 0 0 0 1px rgba(52,211,153,.6);background:rgba(16,185,129,.08)}
/* Spending and Time tiles carry a small drawn icon. */
[data-key="tile-spend"] b::before,[data-key="tile-time"] b::before{content:"";display:block;width:26px;height:26px;margin:0 auto 10px;background:#34d399;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
[data-key="tile-spend"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='3'/%3E%3Cpath d='M16 12.5h2.5'/%3E%3Cpath d='M6 6V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E")}
[data-key="tile-time"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
/* The shoe: card edges in a soft box, dealt cards as backs. */
.shoe-box{fill:rgba(245,245,250,.04);stroke:rgba(245,245,250,.14)}
.shoe-card{fill:#fbfaf6;stroke:rgba(27,40,56,.25)}
.shoe-card.is-out{fill:#1d3350;stroke:rgba(52,211,153,.45)}
/* Stake change: the same wager, a smaller and a larger stake. */
.stake-chip{border-radius:999px}
.stake-chip.is-large{box-shadow:inset 0 0 0 1.5px rgba(52,211,153,.6);color:#f5f5fa}
/* Card values (chapter 02). */
.card-value{font-weight:800;color:#34d399}
.edge-row{padding:12px 0 20px}
.edge-row .bar{bottom:8px}
.shoe-box{fill:#142336;stroke:rgba(245,245,250,.16);stroke-width:1.2}
.shoe-mouth{stroke:rgba(52,211,153,.5);stroke-width:1.5}
.shoe-card:not(.is-out){fill:#f3f1ec;stroke:rgba(27,40,56,.35);stroke-width:.8}
.shoe-card.is-out{fill:none;stroke:none}
.shoe-card.is-out .out-back{fill:#1d3350;stroke:rgba(245,245,250,.25);stroke-width:.8}
.shoe-card.is-out .out-field{stroke:rgba(52,211,153,.45);stroke-width:.6}
.shoe.is-emph .shoe-box{stroke:#34d399;stroke-width:2}

/* ================================================================== */
/* A stage with a sense of place: compositions fill it, a faint grid   */
/* and soft light give it depth, a table edge sits under the hands,    */
/* and a small shoe in the corner is where dealt cards come from.      */
/* ================================================================== */
.stage{isolation:isolate}
.stage-body{transform-origin:50% 50%}
.is-animated .stage-body{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.is-player .stage::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(245,245,250,.075) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 10%,transparent 80%);mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 10%,transparent 80%)}
.is-player .stage::after{content:"";position:absolute;left:12%;right:12%;top:18%;height:55%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(52,211,153,.07),rgba(52,211,153,0) 70%)}
/* Table edge under the two hands. */
.stage-body:has(> .table),.stage-body:has(> .compact-hands){isolation:isolate}
.stage-body:has(> .table)::before,.stage-body:has(> .compact-hands)::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:62%;height:150%;border-radius:50%;pointer-events:none;
  border-top:1px solid rgba(245,245,250,.09);background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(245,245,250,.035),rgba(245,245,250,0))}
/* The shoe in the corner. */
.stage-shoe{position:absolute;top:40px;right:22px;width:64px;z-index:0;opacity:0;transform:translateY(-4px);transition:opacity .5s,transform .5s;pointer-events:none}
.stage:has(.stage-body .card) .stage-shoe{opacity:.9;transform:none}
.stage-shoe svg{width:100%;height:auto;display:block}
.ss-body{fill:#142336;stroke:rgba(245,245,250,.18);stroke-width:1}
.ss-card{fill:#1d3350;stroke:rgba(245,245,250,.22);stroke-width:.6}
.ss-mouth{stroke:rgba(52,211,153,.6);stroke-width:1.2}
@media(max-width:760px){.stage-shoe{width:44px;top:34px;right:12px}}
.is-still .stage-body,.is-still .stage-shoe{transition:none}
/* The chapter title and the mode controls share one row above the stage. */
.is-player .player-top{align-items:flex-end;gap:12px 16px;padding:0 0 14px}
.is-player .player-top .now-playing{margin:0;margin-right:auto;min-width:0}
.is-player .player-top .now-playing b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Desktop: the stage takes the height the screen allows, so compositions can grow instead of floating. */
@media(min-width:761px){.is-player .stage:not(.at-check){height:clamp(420px,calc(100svh - 342px),620px)}}
.stage-shoe{width:84px;top:46px;right:26px}
.ss-card{fill:#f3f1ec;stroke:rgba(27,40,56,.35)}
@media(max-width:760px){
  .table .lane{padding:6px 4px;border-radius:12px}
  .sequence-strip{flex-direction:column;gap:22px}
  .sequence-strip li+li::before{content:"→";left:50%;top:-12px;transform:translate(-50%,-50%) rotate(90deg)}
}
/* The corner shoe sits in the stage's top line, beside the rules, clear of compositions that fill the width. */
.stage-shoe{width:52px;top:8px;right:20px}
@media(max-width:760px){.stage-shoe{width:40px;top:6px;right:10px}}

/* The dealing shoe, drawn. */
.shoe{gap:10px;width:min(560px,100%)}
.shoe:not(.has-pile){width:min(340px,100%)}
.shoe-shadow{fill:url(#pb-shoe-shadow)}
.shoe-side{fill:url(#pb-shoe-side);stroke:rgba(245,245,250,.1);stroke-width:1}
.shoe-front{fill:url(#pb-shoe-front);stroke:rgba(245,245,250,.1);stroke-width:1}
.shoe-top{fill:url(#pb-shoe-top)}
.shoe-opening{fill:url(#pb-stack)}
.shoe-stack .shoe-card{fill:none;stroke:rgba(27,40,56,.28);stroke-width:1.1;stroke-linecap:round}
.shoe-slot{fill:#0b1420}
.shoe-rim{fill:none;stroke:rgba(245,245,250,.32);stroke-width:1.2;stroke-linejoin:round}
.shoe-edge{fill:none;stroke:rgba(245,245,250,.14);stroke-width:1}
.shoe-next{filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.shoe-card.is-out{fill:initial;stroke:initial;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.shoe-arrow{fill:none;stroke:#34d399;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 4}
.shoe-arrows path+path{stroke-dasharray:none}
.shoe.is-emph .shoe-rim{stroke:#34d399}
.shoe.is-emph .shoe-opening{filter:drop-shadow(0 0 10px rgba(52,211,153,.55))}
.shoe figcaption{justify-content:space-around;gap:16px}
.shoe figcaption span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;color:var(--stage-muted)}
.shoe figcaption b{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stage-body)}
.shoe:not(.has-pile) figcaption{justify-content:center}
.shoe-lip{fill:#33516f;stroke:rgba(245,245,250,.16);stroke-width:.8}
.shoe-hi{fill:none;stroke:rgba(245,245,250,.22);stroke-width:1}
.shoe-next{filter:drop-shadow(0 3px 3px rgba(0,0,0,.55))}
/* Inside the Remaining cards panel the shoe is a small illustration. */
.two-up .shoe.is-bare{width:min(220px,100%);margin:6px auto 0;flex:none}
.stage-body:has(.is-contrast) .two-up .shoe{width:min(220px,100%)}
.two-up.is-contrast{align-items:stretch}
.stage-shoe{width:64px}
.two-up.is-contrast>div{display:flex;flex-direction:column}
.two-up.is-contrast .beads{margin:auto 0;justify-content:center;padding:10px 0 4px}
.two-up.is-contrast .bead{width:40px;height:40px;font-size:15px}
.quick-history .bead{width:40px;height:40px;font-size:15px}
/* No dot grid: the stage's depth comes from its light and the table edge alone. */
.is-player .stage::before{content:none}

/* ---- Review fixes (820358b) ---- */
/* Phones: the transport fits 320 px; the corner shoe stays on desktop only; the panel shoe stays visible. */
@media(max-width:420px){.is-player .playback-buttons{gap:6px}.is-player .play-button{min-width:96px;padding:10px 16px}.is-player #speed{padding:6px 8px}}
@media(max-width:760px),(max-height:460px){.stage-shoe{display:none}}
.stage.is-tight .stage-body:has(.is-contrast) .shoe.is-bare{display:flex;width:min(140px,100%)}
/* The thinking line sits inside the stage beside its ring, so nothing below the stage moves. */
.think-ring{display:flex;align-items:center;gap:10px;width:auto;height:auto;right:18px;bottom:auto;top:44px}
.think-ring span{font-family:var(--font-display);font-size:13px;color:var(--stage-body);white-space:nowrap}
.think-ring svg{width:30px;height:30px}
/* Short windows: the stage gives up height so Play stays on screen; a waiting question keeps room for its answers. */
@media(min-width:761px){.is-player .stage:not(.at-check){height:clamp(320px,calc(100svh - 342px - var(--header-h) + 38px),620px)}.is-player .stage.at-check{height:clamp(220px,calc(100svh - 480px - var(--header-h) + 10px),360px)}}
/* A disabled Play is grey, not a muddy orange. */
.is-player .play-button:disabled{background:rgba(245,245,250,.12);color:rgba(245,245,250,.45);opacity:1}
/* No third card: a quiet dashed slot, not an x. */
.slot.is-blocked{border:1.5px dashed rgba(245,245,250,.18);opacity:.7}
.slot.is-blocked::before,.slot.is-blocked::after{content:none}
/* The losing hand fades; its cards stay white instead of turning grey. */
.lane.is-dim .card:not(.is-emph){opacity:.42;filter:drop-shadow(0 4px 8px rgba(5,12,20,.3))}
/* The table edge sits below the hands (desktop) and is not drawn on phones, where it read as a dome. */
.stage-body:has(> .table)::before,.stage-body:has(> .compact-hands)::before{top:78%}
@media(max-width:760px){.stage-body:has(> .table)::before,.stage-body:has(> .compact-hands)::before{content:none}}

/* Home hero: the guide's own cards. */
.home-cards{--card-w:96px;display:flex;gap:14px;justify-content:center}
.home-cards .card:first-child{transform:rotate(-8deg)}
.home-cards .card:last-child{transform:rotate(8deg);margin-top:8px}
.home-cards .card{animation:home-deal .9s cubic-bezier(.22,.9,.25,1) both}
.home-cards .card:first-child{--r:-8deg;animation-delay:.25s}
.home-cards .card:last-child{--r:8deg;animation-delay:.6s}
.home-total{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em}
.home-total b{color:#34d399}
@media(max-width:760px){.home-cards{--card-w:76px}}

/* ---- Drawn exhibits ---- */
/* Icon tiles: steps of a round and the table's conditions. */
.sequence-strip.is-tiles,.rule-cards.is-tiles{gap:28px;align-items:stretch}
.sequence-strip.is-tiles li,.rule-cards.is-tiles li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:150px;padding:20px 18px 16px;border-radius:18px;text-align:center;font-family:var(--font-display);font-size:16px;font-weight:650;color:var(--stage-body);background:linear-gradient(180deg,rgba(245,245,250,.06),rgba(245,245,250,.02));box-shadow:inset 0 0 0 1px rgba(245,245,250,.09)}
.tile-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#34d399;background:radial-gradient(circle at 50% 35%,rgba(52,211,153,.18),rgba(52,211,153,.04));box-shadow:inset 0 0 0 1px rgba(52,211,153,.25)}
.tile-icon svg{width:26px;height:26px}
.sequence-strip.is-tiles li.is-active{color:#f5f5fa;box-shadow:inset 0 0 0 1px rgba(52,211,153,.6),0 0 34px -12px rgba(16,185,129,.6)}
.sequence-strip.is-tiles li.is-active .tile-icon{background:radial-gradient(circle at 50% 35%,rgba(52,211,153,.4),rgba(52,211,153,.1))}
.sequence-strip.is-tiles li+li::before{left:-14px;color:rgba(52,211,153,.7)}
.sequence-strip.is-tiles.is-dim li{opacity:.55}
@media(max-width:760px){.sequence-strip.is-tiles,.rule-cards.is-tiles{gap:16px}.sequence-strip.is-tiles li,.rule-cards.is-tiles li{min-width:0;flex-direction:row;padding:10px 14px;font-size:14px;width:min(260px,100%);justify-content:flex-start}.tile-icon{width:36px;height:36px;border-radius:11px}.tile-icon svg{width:20px;height:20px}.rule-cards.is-tiles{flex-direction:column;align-items:center}}

/* The stake loop: a token travels between the two stations while a tally of wagers grows. */
.stake-loop.is-drawn{gap:18px;color:var(--stage-body)}
.loop-station{font-family:var(--font-display);font-size:14px;font-weight:650;padding:10px 14px;border-radius:12px;background:rgba(245,245,250,.05);box-shadow:inset 0 0 0 1px rgba(245,245,250,.09);white-space:nowrap}
.loop-track{width:240px;height:auto;overflow:visible}
.loop-path{fill:none;stroke:rgba(52,211,153,.45);stroke-width:2;stroke-dasharray:4 6}
.loop-head{fill:none;stroke:#34d399;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.loop-token{fill:#34d399;stroke:#f5f5fa;stroke-width:2;offset-path:path("M30 48C30 18 80 10 110 10s80 8 80 38-50 38-80 38-80-8-80-38z");offset-distance:12%;filter:drop-shadow(0 0 6px rgba(52,211,153,.7))}
.is-animated .loop-token{animation:loop-travel 4.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes loop-travel{to{offset-distance:112%}}
.loop-tally rect{fill:rgba(245,245,250,.18)}
.stake-loop.is-counting .loop-tally rect{fill:#34d399;opacity:0;animation:tally-in .4s ease-out forwards;animation-delay:calc(var(--n)*700ms + .4s)}
.is-still .stake-loop.is-counting .loop-tally rect{opacity:1;animation:none}
@keyframes tally-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:760px){.stake-loop.is-drawn{flex-direction:column;gap:8px}.loop-track{width:200px}}

/* The scoreboard: a framed board read down its first column; the open cell waits for the next result. */
.beads.is-board{display:grid;grid-template-columns:repeat(6,46px);grid-template-rows:repeat(6,46px);grid-auto-flow:column;gap:0;padding:12px;border-radius:16px;
  background:linear-gradient(rgba(245,245,250,.08) 1px,transparent 1px) 12px 12px/46px 46px,linear-gradient(90deg,rgba(245,245,250,.08) 1px,transparent 1px) 12px 12px/46px 46px,linear-gradient(180deg,#14233a,#0f1c2e);
  box-shadow:inset 0 0 0 1px rgba(245,245,250,.12),0 18px 40px -20px rgba(0,0,0,.7)}
.beads.is-board .bead{width:38px;height:38px;margin:4px;font-size:15px}
.beads.is-board .bead.is-unknown{box-shadow:inset 0 0 0 2px rgba(52,211,153,.7),0 0 18px rgba(52,211,153,.35)}
.beads.is-board .ghosts{top:auto;bottom:calc(100% + 8px)}

/* The bet-size change: a small stake, then a larger one, then the same unknown hand. */
.stake-token{display:block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4fe0b0,#0f9d6e 70%);box-shadow:inset 0 0 0 2px rgba(245,245,250,.5),0 6px 14px -6px rgba(0,0,0,.6)}
.stake-token.is-small{width:28px;height:28px;opacity:.85}
.stake-token.is-large{width:56px;height:56px}

/* Turnover tokens: calm, all the same, no empty slots. */
.token{font-size:0!important;background:linear-gradient(180deg,rgba(52,211,153,.9),rgba(15,157,110,.85));box-shadow:inset 0 0 0 1px rgba(245,245,250,.25)}
.token.is-more{background:rgba(52,211,153,.35);box-shadow:inset 0 0 0 1px rgba(52,211,153,.6)}

/* The short version's marker: the brand's diamond,not a stray dot. */
.seg[data-chapter="b00"] .n,#now-n{color:var(--emerald-text)}


/* Home hero: the table illustration (objects and light), with the authored sum and caption beneath. */
.home-hand.is-scene{gap:14px}
.home-scene{width:min(520px,100%);border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(245,245,250,.08),0 30px 60px -24px rgba(0,0,0,.7)}
.home-scene .il{display:block;width:100%;height:auto;aspect-ratio:660/392}
@keyframes scene-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.home-scene{animation:scene-in .9s cubic-bezier(.2,.8,.2,1) .15s both}
.motion-still .home-scene{animation:none}

/* ---- Recheck fixes (107c200) ---- */
/* Transport: the compact controls key off the transport's own width (a phone, or the landscape side column), and Play keeps one width so the Play/Pause swap never reflows the row. */
.is-player .transport{container-type:inline-size}
.is-player .transport .play-button{flex:none;width:132px;min-width:0}
@container (max-width:400px){
  .is-player .transport-buttons{gap:6px}
  .is-player .playback-buttons{gap:4px}
  .is-player .transport .icon-button{width:36px;min-width:36px;height:36px}
  .is-player .transport .play-button{width:96px;min-height:44px;padding:0 8px;gap:6px}
  .is-player .playback-options{gap:2px}
  .is-player #speed{width:52px;max-width:none;min-height:40px;padding:0 2px 0 8px}
  .is-player .caption-button{min-width:40px;padding:0 6px}
}
/* The scoreboard: five columns by six rows, sized to the stage; the three possible results sit in the open row beside the "?". */
.beads.is-board{--cell:46px;--pad:12px;grid-template-columns:repeat(5,var(--cell));grid-template-rows:repeat(6,var(--cell));padding:var(--pad);
  background:linear-gradient(rgba(245,245,250,.08) 1px,transparent 1px) var(--pad) var(--pad)/var(--cell) var(--cell),linear-gradient(90deg,rgba(245,245,250,.08) 1px,transparent 1px) var(--pad) var(--pad)/var(--cell) var(--cell),linear-gradient(180deg,#14233a,#0f1c2e)}
.beads.is-board .bead{width:calc(var(--cell) - 8px);height:calc(var(--cell) - 8px)}
.beads.is-board .ghosts{position:static;transform:none;grid-column:2/-1;grid-row:6;align-self:center;justify-self:start;margin-left:6px}
.is-animated .beads.is-board .ghosts.is-enter{animation:rise .4s ease-out both;animation-delay:calc(var(--enter-order,0)*110ms)}
@media(max-width:760px),(max-height:460px){.beads.is-board{--cell:38px;--pad:10px}.beads.is-board .bead{font-size:13px}.beads.is-board .ghosts{font-size:11px;gap:4px;margin-left:4px}.beads.is-board .ghosts i{padding:1px 4px}}
/* Thinking on a narrow or short stage: the ring alone, small, in a free spot at the stage's top-right (placed by app.js); the line is announced, not drawn. */
.think-ring{pointer-events:none}
@media(max-width:760px),(max-height:460px){.think-ring{top:6px;right:8px;gap:0}.think-ring span{display:none}.think-ring svg{width:24px;height:24px}}
/* Phone step tiles: the arrow sits centred in the gap between stacked tiles. */
@media(max-width:760px){.sequence-strip.is-tiles li+li::before{left:50%;top:-8px}}
/* The stake loop on tall phones: kept in tight mode with a smaller track, instead of leaving only the two panels. */
@media(max-width:760px) and (min-height:820px){.stage.is-tight[data-beat="b06a"] .stake-loop{display:flex}.stage.is-tight[data-beat="b06a"] .loop-track{width:170px}}

/* Home hero: the lit table (a baked plate plus vector cards and felt lettering). A wide framing on the home
   card; on phones a tighter framing on the two card areas, so the hands stay readable. */
.home-scene .il.is-wide{aspect-ratio:1050/625}
.home-scene .il.is-narrow{display:none;aspect-ratio:724/557}
@media(max-width:600px){.home-scene .il.is-wide{display:none}.home-scene .il.is-narrow{display:block}}

/* ================================================================== */
/* Table stage (17 Oct): the stage is the guide's baccarat table seen  */
/* from above — the home hero's felt, printed card areas, jumbo cards  */
/* and a sideways third card — so the hero and the lesson are one world.*/
/* ================================================================== */
.stage,.is-player .stage{
  --felt:#227787;--felt-lit:#2c8a99;--felt-edge:#1a5d6b;--print:rgba(242,235,220,.66);--print-soft:rgba(242,235,220,.34);
  --stage-text:#f8f5ee;--stage-body:#e8f1f1;--stage-muted:#c3dcdd;--stage-line:rgba(242,235,220,.26);--stage-emerald:#34d399;--win-text:#82f5cf;
  background:
    radial-gradient(75% 62% at 50% 44%,var(--felt-lit) 0%,rgba(44,138,153,0) 72%),
    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 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg,var(--felt) 0%,var(--felt-edge) 100%);
  box-shadow:inset 0 0 0 9px #1d3352,inset 0 0 0 10px rgba(242,235,220,.18),inset 0 22px 40px -24px rgba(4,22,28,.55),0 30px 70px -24px rgba(5,14,22,.5)}
/* No decorative table edge: the real layout is printed on the felt. */
.stage-body:has(> .table)::before,.stage-body:has(> .compact-hands)::before{content:none}
.stage-rules{color:var(--print)}
.is-player .stage-caption{color:#fcfaf4;border-top-color:rgba(242,235,220,.14);background:linear-gradient(180deg,rgba(12,48,56,0),rgba(12,48,56,.32))}
/* Each hand is a printed card area: a cream line, its name printed at the top in spaced capitals. */
.table .lane{background:transparent;box-shadow:none;border:2px solid var(--print);border-radius:12px}
.lane-name{color:var(--print);letter-spacing:.2em}
.table .lane.is-wins{border-color:var(--stage-emerald);background:rgba(52,211,153,.08);box-shadow:0 0 0 1px rgba(52,211,153,.45),0 0 30px -6px rgba(52,211,153,.5)}
.lane.is-wins .lane-name{color:var(--win-text)}
.lane.is-name-only .lane-name{color:var(--stage-text)}
/* Jumbo-index cards (the hero's face); card backs carry no emerald (emerald marks only the result). */
.card-face{fill:#faf6ec;stroke:rgba(27,40,56,.18)}
.card .jumbo{font-family:var(--font-display);font-size:31px;font-weight:800;letter-spacing:-.04em}
.card .jumbo.is-ten{font-size:24px;letter-spacing:-.08em}
.card-court{fill:none;stroke:rgba(27,40,56,.2);stroke-width:1.2}
.card.is-red .card-court{fill:none;stroke:rgba(178,58,48,.26)}
.card-back-inner{stroke:rgba(242,235,220,.42)}
.card-back-mark{stroke:rgba(242,235,220,.6)}
.card.is-emph .face.front .card-face{stroke:var(--stage-emerald)}
/* The third card's printed spot lies sideways, and so does the third card when it is dealt (a landscape face
   with upright indices, so a 6 never reads as a 9). */
.card.is-third{width:calc(var(--card-w)*1.4);height:var(--card-w)}
.slot{width:calc(var(--card-w)*1.4);height:var(--card-w);border:1.5px solid var(--print-soft);border-radius:6px;background:transparent}
.slot.is-emph{border-color:var(--stage-emerald);box-shadow:0 0 18px -4px rgba(52,211,153,.6)}
.slot.is-blocked{border-style:solid;border-color:var(--print-soft);opacity:.6}
/* Totals stay legible on the felt; emphasis and the winner use a lighter emerald. */
.total .digits{color:var(--stage-text)}
.total .arith{color:var(--stage-muted)}
.total.is-emph .digits{color:var(--win-text);background:radial-gradient(closest-side,rgba(52,211,153,.22),rgba(52,211,153,0))}
.total.is-wins .digits{color:var(--win-text);text-shadow:0 0 18px rgba(52,211,153,.3)}
/* Try it on the table: the third-card spot lies sideways here too, the natural label sits under the hands, and
   cards are sized from the practice stage's own width so the widest state (three cards a hand) always fits. */
.try-deal-stage .slot{width:calc(var(--card-w)*1.4);height:var(--card-w)}
.stage.try-deal-stage .table:has(>.rule-chip){grid-template-columns:1fr 1fr}
.try-deal-stage .table>.rule-chip{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:4px}
.stage.try-deal-stage .table{--card-w:clamp(28px,calc((100cqw - 190px)/6.8),72px)}
@container (max-width:420px){.stage.try-deal-stage .table{--card-w:clamp(24px,calc((100cqw - 90px)/6.8),44px)}}
/* Hand names printed on the felt: the underline is print, not emerald (emerald marks only the result). */
.lane.is-name-only .lane-name::after{background:var(--print)}
/* Below 380 px the hands stack, so each card area has the full width: size Try cards for one hand per row. */
@media(max-width:379px){.stage.try-deal-stage .table{--card-w:clamp(24px,calc((100cqw - 150px)/3.4),40px)}}
/* One subtitle. The stage note is a short label or qualifier, not narration, so it is printed at the top of the
   table as a sign above the evidence; the caption is the only subtitle, at the bottom. */
.stage-head{order:-3}
.stage-note{order:-2;align-self:center;max-width:min(62ch,92%);min-height:0;margin:2px auto 0;padding:5px 14px;font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.01em;color:var(--stage-text);background:rgba(8,40,48,.28);border:1px solid var(--print-soft);border-radius:10px;text-wrap:balance}
.stage-note:empty{display:none}
@media(max-width:760px){.stage-note{font-size:12.5px;padding:4px 10px;max-width:96%}}
/* An exhibit's basis line is its heading, printed above it like the card-area names, not a caption under it. */
.stage-body>.basis{order:-1;margin:0 0 4px;font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--print);text-transform:uppercase}
/* Chapter pictures: each chapter's table element{overflow:hidden}



.chapter-break.has-art{background:#123f48;isolation:isolate}
.chapter-break .ch-art{position:absolute;inset:0;z-index:-2}
.chapter-break .ch-art .il{width:100%;height:100%;display:block}
/* The title sits in a lower band on its own gradient, so it never prints over the picture's subject. */
.chapter-break.has-art{justify-content:flex-end;padding-bottom:clamp(18px,5vh,40px)}
.chapter-break.has-art::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,30,38,.08) 0%,rgba(8,30,38,.12) 45%,rgba(8,30,38,.62) 72%,rgba(8,30,38,.86) 100%)}
.chapter-break.has-art b{text-shadow:0 2px 18px rgba(4,20,26,.6)}
.is-animated .chapter-break .ch-art .il{animation:art-drift 3.2s ease-out both}
@keyframes art-drift{from{transform:scale(1.06)}to{transform:none}}
/* The practice table at the end of the guide: the same felt, a dealt round, a Deal button in the table's cream
   print (orange stays the transport's Play), and the practice qualifier in small print. */
.practice{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.practice-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px}
.practice-deal.button.primary{min-height:44px;padding:0 26px;border-radius:999px;background:#f6f1e6;color:#1b2838;border:0;font-weight:700;box-shadow:0 8px 20px -10px rgba(4,20,26,.6)}
.practice-deal.button.primary:hover{background:#fffaf0}
.practice-deal:focus-visible{outline:2px solid #f6f1e6;outline-offset:3px}
.practice-more{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--stage-text);text-decoration:underline;text-decoration-color:var(--print-soft);text-underline-offset:4px}
@media(max-width:760px){.practice{gap:10px}}
/* The practice table holds still: totals keep their room while the cards are face-down, the sign and caption
   keep a fixed height, and the button keeps one width for Deal and Deal another. */
.lane.is-placeholder .total{visibility:hidden}
.stage.is-done .stage-note{box-sizing:border-box;width:min(62ch,92%);min-height:calc(2 * 1.4em + 12px);display:flex;align-items:center;justify-content:center;text-align:center}
.stage.is-done .stage-caption{min-height:calc(2 * 1.5em + 36px);display:flex;align-items:center;justify-content:center}
.stage.is-done .stage-caption[hidden]{display:none}
@media(max-width:760px){.stage.is-done .stage-note{min-height:calc(3 * 1.4em + 10px)}.stage.is-done .stage-caption{min-height:calc(2 * 1.45em + 24px)}}
.practice-deal{min-width:9.5em;justify-content:center}
/* The winner's underline has its room reserved on both hands, and the table sign changes by fading in place. */
.stage.is-done .total::after{content:"";width:40px;height:3px;border-radius:2px;margin-top:2px;opacity:0;transition:opacity .4s}
.stage.is-done .total.is-wins::after{opacity:1}
.stage.is-done.is-animated .stage-note.is-enter{animation:sign-in .35s ease-out both;animation-delay:0s}
@keyframes sign-in{from{opacity:0}to{opacity:1}}
/* Try it holds still too: the winner's underline is reserved on both hands, and the rule line under the table
   keeps room for its longest rule, so the page below never shifts as a round plays out. */
.try-deal-stage .total::after{content:"";width:40px;height:3px;border-radius:2px;margin-top:2px;opacity:0;transition:opacity .4s}
.try-deal-stage .total.is-wins::after{opacity:1}
.try-readout{min-height:calc(2 * 1.45em)}
@media(max-width:760px){.try-readout{min-height:calc(4 * 1.45em)}}
/* The rule line changes by fading in place; where the hands stack, no hand carries an underline slot. */
@keyframes readout-fade{from{opacity:0}to{opacity:1}}
.try-readout.is-new{animation:readout-fade .35s ease-out}
.try-readout{box-sizing:border-box}
@media(max-width:379px){.try-deal-stage .total::after,.stage.is-done .total::after{display:none}}
/* Chapter cards line up: every card in a row is the same height,the picture is the same size in each{display:flex}


/* Ten chapters: five across on wide screens, two across below that (three across would orphan the tenth). */

/* From the wide table to the hands: the camera holds on the whole lit table, pushes in to the two card areas and
   dissolves into the hand animation (animated playback only). */
/* Above a leaving chapter card (z 3), so the card dissolves into the wide table instead of showing through it. */

/* Short desktop screens (1280×720 and similar): tighter chrome above and below the stage, so Play stays in view. */
@media(min-width:761px) and (max-height:760px){
  .is-player .guide-head{padding-top:6px;padding-bottom:4px}
  .is-player .back-link{line-height:20px}
  .is-player .player-top{padding-bottom:6px}
  .is-player .transport{padding-top:6px}
  .is-player .transport-buttons{margin-top:4px}
  .is-player .stage:not(.at-check){height:clamp(320px,calc(100svh - 300px - var(--header-h) + 32px),620px)}
}
/* Try it: the deal button keeps one width for Deal and Deal another, so the header never rewraps. */
#try-deal{min-width:9em;white-space:nowrap}
/* Home chapter cards: the number line has one height{display:block;height:1.4em;line-height:1.4em}
.stage-body{transition:opacity .3s ease-out}

/* ---- Chapter 09: rendered shots of the plan at seat 5 (plan-art.js) ---- */
/* Sized by the height the stage body has (app.js sets --avail-h), less room for a chip below it. */
.plan-frame{position:relative;flex-shrink:0;margin:0;width:min(100%,1040px,calc((var(--avail-h,9999px) - var(--plan-extra,0px)) * 16 / 9));aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.7),0 0 0 1px rgba(242,235,220,.14)}
.plan-frame>.il{display:block;width:100%;height:100%;max-width:none}
/* A new shot dissolves in over the last with a slight settle; the last fades out above it. */
.is-animated .plan-frame.is-enter{animation:plan-in .8s ease-out both;animation-delay:var(--at,0ms)}
@keyframes plan-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.plan-frame.is-leaving-el.is-under{animation:none!important;z-index:0}
.plan-frame:not(.is-leaving-el){z-index:1}
.is-leaving-el.is-fading{animation:plan-out .7s ease-in forwards!important;z-index:0}
/* The odds chip arrives once its shot is in place, and never re-wraps on the way out. */
.is-animated .plan-chip.is-enter{animation:rise .35s ease-out both;animation-delay:calc(var(--at,0ms) + 700ms)}
.is-leaving-el .plan-chip{white-space:nowrap}
@keyframes plan-out{to{opacity:0}}
/* The next hand is dealt from the dealer's side; stake discs drop onto the spot; the stopping point appears. */
.is-animated .ht-deal.is-enter{animation:plan-deal .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--at,0ms) + var(--i,0)*240ms)}
@keyframes plan-deal{from{opacity:0;transform:translate(90px,-150px)}to{opacity:1;transform:none}}
.is-animated .plan-disc.is-enter{animation:plan-drop .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--at,0ms) + var(--i,0)*180ms)}
@keyframes plan-drop{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
.is-animated .dial-stop.is-enter{animation:plan-mark .6s ease-out both;animation-delay:calc(var(--at,0ms) + 500ms);transform-box:fill-box;transform-origin:center}
@keyframes plan-mark{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.plan-chip{position:absolute;left:0;right:0;bottom:12px;margin:0 auto;width:max-content;max-width:calc(100% - 16px);text-align:center;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
/* Small frames: the chip moves to the top-left corner, clear of the dial. */
@media(max-width:600px),(max-height:460px){.plan-chip{top:6px;bottom:auto;left:6px;right:auto;margin:0;max-width:58%;font-size:11px;line-height:1.25;padding:4px 8px}}
/* The close: a recap strip of chapter pictures, then all nine to revisit, then the quiet table. */
.recap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(100%,860px)}
.recap-shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit}
.recap-art{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.6),0 0 0 1px rgba(242,235,220,.18)}
.recap-art .il{display:block;width:100%;height:100%}
.recap-shot figcaption,.recap-shot .n{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--stage-muted)}
.recap-shot .t{margin-top:-4px;max-width:100%;font-family:var(--font-body);font-size:12px;line-height:1.25;color:var(--stage-muted);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recap.is-all{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;width:min(100%,980px)}
.recap.is-all .recap-art{border-radius:6px}
.recap-shot.is-link{cursor:pointer}
.recap-shot.is-link:hover .recap-art,.recap-shot.is-link:focus-visible .recap-art{box-shadow:0 0 0 2px var(--stage-emerald)}
.recap-shot.is-link:focus-visible{outline:none}
.is-animated .recap-shot.is-enter{animation:rise .5s ease-out both;animation-delay:calc(var(--i,0)*70ms + var(--at,0ms))}
.recap-rest{width:min(100%,560px)}
.recap-rest .recap-art{border-radius:14px}
.recap-rest .plan-frame{width:100%}
.is-animated .recap-rest.is-enter .il{animation:art-drift 3.2s ease-out both}
/* Short screens: chapter titles give way to numbers (the buttons keep their full accessible names). */
@media(max-height:640px),(max-width:379px){.recap.is-all .t{display:none}}
/* Short landscape: the closing picture gives up width so the buttons below it stay on the stage. */
@media(max-height:460px) and (min-width:600px){.recap-rest{width:min(100%,560px,calc((100svh - 190px) * 16 / 9))}.recap.is-all .t{display:none}}
@media(max-width:600px){
  .recap{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .recap.is-all{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
@media(min-width:601px){
  .recap.is-all{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:min(100%,820px)}
}
/* The other guides on the home page: each game's rendered picture,its name and deck{max-width:1200px;margin:8px auto 40px;padding:0 24px}








.chapter-break .ch-art img.il{object-fit:cover}
/* A script game's demo: on its own page (full width) or as the stage at the end of the guide. */
.game-try{max-width:1200px;margin:0 auto;padding:24px 24px 48px}
.game-try h1{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;margin:8px 0 16px}
.demo-host.is-page{margin-top:16px}
.demo-host.is-stage{width:100%}
/* ---- Home: the game posters (hub-art.js) and their one-time motion ------------------------------------------------
   Each poster moves once (under 5 s) and then rests (WCAG 2.2.2: no automatic motion beyond 5 s without a pause). */
.hub-art{display:block;width:100%;height:100%}
.lesson-art .hub-art{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lesson-card:hover .lesson-art .hub-art{transform:scale(1.03)}
.hub-art [class^="hp-"],.hub-art [class*=" hp-"]{transform-box:fill-box}
.hp-lean-a{transform-origin:50% 100%;animation:hp-lean-a 4.5s ease-in-out 1}
.hp-lean-b{transform-origin:50% 100%;animation:hp-lean-b 4.5s ease-in-out 1}
@keyframes hp-lean-a{0%,100%{rotate:-8deg}50%{rotate:-5deg}}
@keyframes hp-lean-b{0%,100%{rotate:9deg}50%{rotate:6deg}}
.hp-tot{transform-origin:50% 50%;animation:hp-tot 4.5s ease-in-out 1}
@keyframes hp-tot{0%,100%{scale:1}50%{scale:1.04}}
.hp-roll-a{transform-origin:50% 100%;animation:hp-roll 4.5s ease-in-out 1}
.hp-roll-b{transform-origin:50% 100%;animation:hp-roll 4.5s ease-in-out -2.25s 1}
@keyframes hp-roll{0%,100%{rotate:0deg;translate:0 0}50%{rotate:4deg;translate:0 -6px}}
.hp-hop-a{transform-origin:50% 100%;animation:hp-hop 3s ease-in-out 1}
.hp-hop-b{transform-origin:50% 100%;animation:hp-hop 3s ease-in-out .2s 1}
.hp-hop-c{transform-origin:50% 100%;animation:hp-hop 3s ease-in-out .4s 1}
@keyframes hp-hop{0%,60%,100%{translate:0 0;rotate:0deg}68%{translate:0 -14px;rotate:-6deg}76%{translate:0 0;rotate:3deg}82%{translate:0 -4px}88%{translate:0 0}}
.hub-art .hp-spin{transform-box:view-box;animation:hp-spin 4.5s cubic-bezier(.25,.6,.3,1) 1 both}
@keyframes hp-spin{to{rotate:60deg}}
.hp-reels{animation:hp-blink 4.5s steps(1) 1}
@keyframes hp-blink{0%,100%{opacity:1}}
.hp-scratch{animation:hp-scratch 4s ease-in-out 1}
@keyframes hp-scratch{0%,100%{translate:0 0;rotate:0deg}25%{translate:-22px -4px;rotate:-12deg}50%{translate:-6px 8px;rotate:6deg}75%{translate:-30px 4px;rotate:-8deg}}
@media (prefers-reduced-motion:reduce){.hub-art *{animation:none!important}}
html.motion-still .hub-art *{animation:none!important}

/* ================================================================== */
/* PlaybookRG consumer page chrome (20 Oct 2026). The guides read as   */
/* pages of www.playbookrg.com: its header (utility row + section nav), */
/* footer, type, colours, orange pill buttons, centred section headers */
/* (gradient accent bar, kicker, bold headline), white cards and navy  */
/* bands. Values follow the ported rg-page.css / consumer.css. Light   */
/* in both appearances; the stage keeps its authored navy palette.     */
/* ================================================================== */
:root{
  --rg-primary:#1B2838;--rg-primary-light:#2A3F56;--rg-primary-dark:#0F1923;--rg-secondary:#10B981;--rg-secondary-dark:#047857;--rg-accent:#FF6B35;
  --rg-text:#E8ECF1;--rg-text-muted:#9AA8B8;--rg-divider:rgba(255,255,255,.08);--rg-card-border:rgba(255,255,255,.1);
  --rg-text-dark:#2D3748;--rg-text-dark-muted:#64748B;--rg-surface:#fff;--rg-surface-alt:#F7F8FA;--rg-divider-light:#E2E8F0;
  --rg-bar:linear-gradient(90deg,var(--rg-accent),var(--rg-secondary));
  --paper:#fff;--paper-dim:var(--rg-surface-alt);--ink:var(--rg-primary);--body:var(--rg-text-dark);--muted:var(--rg-text-dark-muted);--line:var(--rg-divider-light);
  color-scheme:light;background:var(--rg-surface);color:var(--rg-text-dark);line-height:1.65}
body{background:var(--rg-surface);-webkit-font-smoothing:antialiased}
.sr-only{position:absolute!important}

/* ---- Header: the PlaybookRG home's one navy bar (≤63px with its gradient rule, sticky). Mark + "Playbook", four
   menus (Game guides, Check in, Your tools, Chat); right: the host's help slot, the language menu, "For operators".
   Under 900px: mark, help slot, language and Menu; the sheet holds the menus as accordions. Mirrors consumer.css. ---- */
.site-header{position:sticky;top:0;z-index:40;background:var(--rg-primary-dark);color:var(--rg-text)}
.site-header :focus-visible{outline:2px solid var(--rg-secondary);outline-offset:2px}
.site-bar{position:relative;display:flex;align-items:center;gap:8px 16px;height:60px;max-width:1200px;margin:0 auto;padding:0 24px}
.site-rule{height:3px;background:var(--rg-bar)}
.site-header .wordmark{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--rg-text);text-decoration:none;font:800 1rem var(--font-display);white-space:nowrap}
.site-mark{width:26px;height:26px;flex:none;display:block}
.site-menus{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.site-nav-extra{display:none}
.site-tools{flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.site-help{display:flex;align-items:center;gap:8px;min-width:0}
.site-help:empty{display:none}
.site-ops{margin-left:6px}
.operators-link{display:inline-flex;align-items:center;min-height:44px;color:var(--rg-text);font:600 .85rem var(--font-body);text-decoration:none;white-space:nowrap}
.operators-link:hover{color:var(--rg-secondary)}
.arrow{white-space:pre}
/* Dropdowns */
.site-dd{position:relative;display:inline-block;max-width:100%;vertical-align:middle}
.site-dd-button{cursor:pointer}
.site-dd-caret{flex:none;opacity:.85;transition:transform .15s ease}
.site-dd.is-open > .site-dd-button .site-dd-caret{transform:rotate(180deg)}
.site-dd-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:150;min-width:220px;padding:8px;border-radius:12px;background:var(--rg-surface);color:var(--rg-text-dark);text-align:left;box-shadow:0 12px 32px rgba(15,25,35,.28)}
.site-dd-panel[hidden]{display:none}
.site-dd-panel ul{list-style:none;margin:0;padding:0}
.site-dd-panel a,.site-dd-panel ul button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:8px;background:none;color:var(--rg-primary);font:600 .95rem var(--font-body);text-align:left;text-decoration:none;cursor:pointer}
.site-dd-panel a:hover,.site-dd-panel ul button:hover,.site-dd-panel a:focus-visible,.site-dd-panel ul button:focus-visible{background:var(--rg-surface-alt)}
.site-dd-panel :focus-visible{outline:2px solid var(--rg-secondary-dark);outline-offset:-2px}
.site-dd-panel [aria-current="true"]{color:var(--rg-secondary-dark);font-weight:700}
.site-dd-panel [aria-current="true"]::after{content:"✓";color:var(--rg-secondary-dark)}
.site-dd-panel a:has(> .arrow){justify-content:flex-start;gap:0}
.site-nav-trigger{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;white-space:nowrap;border:0;border-bottom:2px solid transparent;background:none;color:var(--rg-text-muted);font:600 .88rem var(--font-display);transition:color .15s,border-color .15s}
.site-nav-trigger:hover,.site-dd.is-open > .site-nav-trigger,.site-menus > li.active .site-nav-trigger{color:var(--rg-secondary);border-bottom-color:var(--rg-secondary)}
.site-dd.is-sections .site-dd-panel > ul{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:0 8px}
.site-menu-section.is-end{grid-column:1/-1;margin-top:4px;padding-top:4px;border-top:1px solid var(--rg-divider-light)}
.site-menu-label{padding:8px 12px 4px;margin:0;color:var(--rg-text-dark-muted);font:700 .72rem/1.4 var(--font-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
:lang(zh) .site-menu-label{letter-spacing:.04em;font-size:.78rem}
.site-chat-slot[hidden]{display:none}
.site-chat-slot > ul{display:contents}
/* Language: one button ("EN ▾" / "中文 ▾"); the list names each language in its own words */
.site-lang{flex:none}
.site-lang-button{display:inline-flex;align-items:center;gap:6px;height:36px;min-height:36px;min-width:44px;padding:0 12px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.04);color:var(--rg-text);font:600 .85rem var(--font-display)}
.site-lang-button:hover,.site-lang.is-open .site-lang-button{border-color:var(--rg-secondary)}
.site-lang .site-dd-panel{left:auto;right:0;min-width:160px}
.site-menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;flex:none;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:var(--rg-text);font:700 .85rem var(--font-display);cursor:pointer}
.site-menu-btn[aria-expanded="true"]{border-color:var(--rg-secondary);color:var(--rg-secondary)}
.site-menu-icon{display:inline-grid;gap:3px;width:14px}
.site-menu-icon i{display:block;height:2px;border-radius:1px;background:currentColor}
:root{--header-h:63px}
@media(max-width:1100px) and (min-width:900px){
  .site-bar{gap:8px 10px}
  .site-wordmark{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .site-nav-trigger{padding:0 7px}
  .site-tools{gap:10px}
}
@media(max-width:899.98px){
  :root{--header-h:59px}
  .site-bar{height:56px;padding:0 16px;gap:8px}
  .site-wordmark{display:none}
  .site-tools{flex:1;gap:8px}
  .site-help{margin-right:auto}
  .site-help:empty{display:block;margin-right:auto}
  .site-ops{display:none}
  .site-menu-btn{display:inline-flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:120;max-height:calc(100dvh - 64px);overflow-y:auto;padding:4px 16px 16px;background:var(--rg-primary-dark);border-top:3px solid transparent;border-image:var(--rg-bar) 1;box-shadow:0 14px 28px rgba(15,25,35,.35)}
  .site-nav.is-open{display:block}
  .site-menus{flex-direction:column;align-items:stretch;gap:0}
  .site-menus > li{border-bottom:1px solid var(--rg-divider)}
  .site-menus .site-dd{display:block}
  .site-nav-trigger{width:100%;justify-content:space-between;min-height:52px;padding:0 4px;font-size:1.05rem;color:var(--rg-text);border-bottom:0}
  .site-nav-trigger:hover,.site-dd.is-open > .site-nav-trigger,.site-menus > li.active .site-nav-trigger{border-bottom:0}
  .site-menus .site-dd-panel{position:static;min-width:0;margin:0 0 10px;padding:0;background:transparent;box-shadow:none}
  .site-menus .site-dd-panel a{color:var(--rg-text-muted);font-size:1rem;padding-left:16px}
  .site-menus .site-dd-panel a:hover,.site-menus .site-dd-panel a:focus-visible{background:rgba(255,255,255,.06);color:var(--rg-text)}
  .site-menus .site-dd-panel :focus-visible{outline-color:var(--rg-secondary)}
  .site-dd.is-sections .site-dd-panel > ul{display:block}
  .site-menu-label{padding:10px 4px 2px 16px;color:var(--rg-text-muted);opacity:.8;white-space:normal}
  .site-menu-section.is-end{border-top-color:var(--rg-divider)}
  .site-nav-extra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-top:12px}
  .site-nav-extra .operators-link{font-size:.95rem}
}
@media(max-width:399.98px){
  .site-bar{padding:0 12px;gap:6px}
  .site-tools{gap:6px}
  .site-lang-button{padding:0 10px}
  .site-menu-btn{padding:0 10px}
  .site-menu-icon{display:none}
}
/* Short landscape phones: the same bar, a little shorter, so the player keeps its height. */
@media(max-height:460px) and (min-width:600px){:root{--header-h:51px}.site-bar{height:48px}}
@media(max-width:420px){.is-player .guide-head-links{gap:10px}.is-player .guide-head h1{font-size:17px;white-space:nowrap}}
@media(max-width:360px){.is-player .guide-head{gap:0 8px;flex-wrap:wrap}.is-player .guide-head-links{gap:8px}.is-player .guide-head-links a{font-size:.72rem;white-space:nowrap}.is-player .guide-head h1{font-size:16px}}

/* ---- Footer: the main page's pattern ---- */
.site-footer{background:var(--rg-primary-dark);color:var(--rg-text-muted);text-align:center;padding:40px 24px;font-size:.85rem;line-height:1.6}
.site-footer:empty{display:none}
.site-footer a{color:var(--rg-secondary);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--rg-text)!important;font:700 1.25rem/1.75rem var(--font-display);letter-spacing:-.025em}
/* The Playbook RG lockup, as the operator site's Wordmark draws it (PlaybookRG components/Wordmark.tsx, tile on):
   a 24px mark on its navy tile, then "Playbook RG" in Inter 700 at 20px, tracking -0.025em, in ink. */
.footer-brand .footer-mark{width:24px;height:24px;flex:none;display:block}
.footer-brand .footer-wordmark{white-space:nowrap}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px;margin-top:8px}
.footer-links a{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:700}
.footer-privacy{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;margin:4px 0 0;font-size:.8rem}
.site-footer .footer-privacy a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted,inherit);text-decoration:underline;text-underline-offset:3px}
body.has-mini-player .site-footer{padding-bottom:132px}
/* The host's support strip (PlaybookRG, /games/) sits right above the footer, as the main page's footer helpline does. */
body:has(#mini-player:not([hidden])) .pb-support:not(#site-footer){padding-bottom:0}
body.has-mini-player{padding-bottom:0}

/* ---- Bands, containers, the centred section header ---- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.band{padding:80px 0}
.band-light{background:var(--rg-surface);color:var(--rg-text-dark)}
.band-dark{background:linear-gradient(180deg,var(--rg-primary) 0%,var(--rg-primary-dark) 100%);color:var(--rg-text)}
.section-header{text-align:center;margin-bottom:48px}
.accent-line{width:48px;height:4px;border-radius:2px;background:var(--rg-bar);margin:0 auto 16px}
.section-label{font:700 .78rem/1.5 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--rg-secondary);margin:0 0 12px}
:lang(zh) .section-label{letter-spacing:.08em}
.section-header h1,.section-header h2{font:800 clamp(1.6rem,3vw,2.2rem)/1.2 var(--font-display);letter-spacing:-.01em;margin:0}
.band-dark .section-header h2{color:var(--rg-text)}
@media(max-width:768px){.band{padding:60px 0}}
@media(max-width:480px){.section-header h1,.section-header h2{font-size:1.4rem}}

/* ---- Buttons: orange pill primary, outline secondary ---- */
.btn,main .button:not(.stage .button,.demo-host .button){display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 1rem var(--font-display);padding:14px 28px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;line-height:1.3;transition:transform .15s ease,box-shadow .25s ease}
.btn:hover,main .button:not(.stage .button,.demo-host .button):hover{transform:translateY(-2px)}
.btn-primary,main .button.primary:not(.stage .button,.demo-host .button){background:var(--rg-accent);color:#fff;box-shadow:0 4px 16px rgba(255,107,53,.3)}
.btn-primary:hover,main .button.primary:not(.stage .button,.demo-host .button):hover{background:var(--rg-accent);box-shadow:0 6px 24px rgba(255,107,53,.4)}
main .button.secondary:not(.stage .button,.demo-host .button){background:transparent;color:var(--rg-secondary-dark);border:2px solid var(--rg-secondary);padding:12px 26px}
main .button.secondary:not(.stage .button,.demo-host .button):hover{background:rgba(16,185,129,.1)}
.btn-small{padding:10px 20px;font-size:.9rem;min-height:44px}
.motion-still .btn,.motion-still main .button{transition:none}

/* ---- Lesson index ---- */
.lessons-band{padding:64px 0 80px}
.lessons{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px 16px;max-width:1080px}
@media(min-width:360px){.lessons{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
@media(min-width:1024px){.lessons{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}}
.lesson-card{min-width:0}
.lessons-group{max-width:1080px;margin:0 auto}
.lessons-group+.lessons-group{margin-top:48px}
.lessons-group-title{font:700 .78rem/1.5 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--rg-secondary-dark);margin:0 0 14px}
:lang(zh) .lessons-group-title{letter-spacing:.08em;font-size:.9rem}
@media(max-width:640px){.lessons-group+.lessons-group{margin-top:36px}.lessons-group-title{margin-bottom:10px}}
.lesson-art{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#1b2838;box-shadow:0 2px 6px rgba(27,40,56,.12),0 10px 24px rgba(27,40,56,.12);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.lesson-art:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(27,40,56,.14),0 16px 32px rgba(27,40,56,.16)}
.lesson-art:focus-visible{outline:3px solid var(--rg-secondary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.lesson-art{transition:none}}
.motion-still .lesson-art{transition:none}
.hub-resume{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:8px;align-items:center;width:min(100%,520px);margin:-16px auto 36px;padding:12px 18px 12px 12px;border-radius:12px;background:var(--rg-surface-alt);border:1px solid var(--rg-divider-light);color:var(--rg-text-dark);text-decoration:none}
.hub-resume:hover{border-color:var(--rg-secondary)}
.hub-resume-play{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--rg-accent);color:#fff;font-size:15px;padding-left:2px}
.hub-resume small{display:block;font:700 .78rem var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--rg-secondary-dark)}
.hub-resume b{display:block;font:700 1rem/1.3 var(--font-display);color:var(--rg-primary);overflow-wrap:anywhere}
.hub-resume-bar{height:4px;border-radius:2px;background:var(--rg-divider-light);overflow:hidden}
.hub-resume-bar i{display:block;height:100%;background:var(--rg-secondary);transform:scaleX(var(--p));transform-origin:left}
.modes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:860px;margin:0 auto}
.band-alt{background:var(--rg-surface-alt);color:var(--rg-text-dark)}
.mode-card{background:var(--rg-surface);border:1px solid var(--rg-divider-light);border-radius:12px;padding:24px}
.mode-card h3{font:800 1.1rem var(--font-display);color:var(--rg-primary);margin:0 0 6px;letter-spacing:-.01em}
.mode-card p{font-size:.98rem;line-height:1.6;color:var(--rg-text-dark-muted)}
.modes-band .section-header{margin-bottom:32px}
@media(max-width:640px){.lessons-band{padding:40px 0 56px}.modes-grid{grid-template-columns:1fr}.container{padding:0 16px}}

/* ---- Player: a navy band; the notes under it on a light band ---- */
.player-band{padding:4px 0 28px}
.is-player .guide{max-width:1120px}
.is-player .guide-head{align-items:flex-end;padding:20px 0 6px}
.guide-title .accent-line{margin:0 0 10px}
.guide-title .section-label{display:inline-flex;align-items:center;gap:6px;min-height:28px;margin:0;color:var(--rg-secondary);text-decoration:none}
.guide-title .section-label:hover{text-decoration:underline;text-underline-offset:3px}
.is-player .guide-head h1{font:800 1.75rem/1.2 var(--font-display);letter-spacing:-.01em;color:var(--rg-text);margin:2px 0 0}
.is-player .guide-head-links{gap:8px;padding:0}
.is-player .guide-head-links a{min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:var(--rg-text);font:600 .85rem var(--font-display);text-decoration:none}
.is-player .guide-head-links a:hover{border-color:var(--rg-secondary);color:var(--rg-secondary)}
.is-player .mode-switch{background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:2px}
.is-player .mode-switch button{border-radius:999px;color:var(--rg-text-muted);font:700 .85rem var(--font-display)}
.is-player .mode-switch button[aria-pressed=true]{background:var(--rg-secondary);color:var(--rg-primary-dark)}
.is-player .motion-toggle{border:1px solid rgba(255,255,255,.22);color:var(--rg-text);font-family:var(--font-display)}
.is-player .motion-toggle:hover{border-color:var(--rg-secondary)}
.is-player .play-button{font-family:var(--font-display);font-weight:600;color:var(--rg-primary);box-shadow:0 4px 16px rgba(255,107,53,.3)}
.is-player .play-button:hover{background:var(--rg-accent);box-shadow:0 6px 24px rgba(255,107,53,.4)}
.is-player .play-button:disabled{box-shadow:none}
.is-player .check-panel{background:rgba(255,255,255,.05);border:1px solid var(--rg-card-border);border-radius:12px;backdrop-filter:none}
.is-player .check-panel .eyebrow{color:var(--rg-secondary);font-size:.78rem;font-weight:700;letter-spacing:.12em}
.is-player .check-panel h2{font-family:var(--font-display);font-weight:700;color:var(--rg-text)}
.is-player .answer-chip{border:2px solid var(--rg-card-border);border-radius:10px;background:rgba(255,255,255,.04);font-family:var(--font-body);font-weight:600;font-size:1.05rem}
.is-player .answer-chip:hover:not([aria-disabled]){border-color:var(--rg-secondary);background:rgba(16,185,129,.08)}
.is-player .answer-chip.is-right{border-color:var(--rg-secondary);background:rgba(16,185,129,.16)}
.is-player .feedback p{color:var(--rg-text-muted)}
.guide-after-band{background:var(--rg-surface-alt);border-bottom:1px solid var(--rg-divider-light)}
.is-player .guide-after{padding-top:16px;padding-bottom:18px}
.guide-after .guide-under{margin:0;color:var(--rg-text-dark-muted);font-size:.9rem}
@media(max-width:760px){
  .player-band{padding:0 0 12px}
  .is-player .guide-head{padding:3px 0 0;align-items:center}
  .guide-title .accent-line,.guide-title .section-label{display:none}
  .is-player .guide-head h1{font-size:19px;margin:0}
  .is-player .guide-head-links{gap:14px}
  .is-player .guide-head-links a{min-height:28px;padding:0;border:0;border-radius:0;font-size:.8rem;color:var(--rg-text-muted)}
  .is-player .guide-head-links a:hover{color:var(--rg-secondary)}
  .is-player .guide-head-links a:first-child{display:inline-flex}
  .is-player .guide-after{padding-top:12px}
}
/* Phones: the narration label (recording or browser voice) stays under the transport as one short line; the transcript
   link is in the title row. */
@media(max-width:760px){.is-player .player-bottom{padding:0 4px;min-height:0}}
@media(max-height:460px) and (min-width:600px){.player-band{padding:0}}
/* Short desktop windows: the title area tightens so Play stays in view. */
@media(min-width:761px) and (max-height:760px){.is-player .guide-head{padding:8px 0 4px}.guide-title .accent-line{display:none}.is-player .guide-head h1{font-size:1.5rem}}

/* ---- Reading, rules, try and about pages: the centred header on a light page ---- */
.reading,.try{margin-top:40px}
.reading>.back-link,.try>.back-link{display:inline-flex;align-items:center;min-height:44px;color:var(--rg-secondary-dark);font:600 .9rem var(--font-display)}
.reading>.accent-line{margin:16px auto 16px}
.reading>.eyebrow,.try>.eyebrow{display:block;text-align:center;margin:16px 0 12px;font:700 .78rem/1.5 var(--font-display);letter-spacing:.12em;color:var(--rg-secondary)}
.reading>.eyebrow::before,.try>.eyebrow::before{content:"";display:block;width:48px;height:4px;border-radius:2px;background:var(--rg-bar);margin:0 auto 16px}
.reading h1,.try h1{text-align:center;font:800 clamp(1.6rem,3vw,2.2rem)/1.2 var(--font-display);letter-spacing:-.01em;color:var(--rg-text-dark);margin:0 0 8px}
.reading-deck,.try>.reading-deck{text-align:center;font-size:1.08rem;line-height:1.6;color:var(--rg-text-dark-muted);max-width:560px;margin:16px auto 32px}
.reading h2{font:800 1.4rem/1.3 var(--font-display);letter-spacing:-.01em;color:var(--rg-primary)}
.reading section p{color:var(--rg-text-dark);font-size:1.0625rem;line-height:1.7}
.reading section .text-button{color:var(--rg-secondary-dark);font-family:var(--font-display);font-weight:700}
.read-index{background:var(--rg-surface-alt);border-radius:12px;padding:20px 24px;margin:32px 0}
.read-index a{color:var(--rg-primary);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.read-index a:hover{color:var(--rg-secondary-dark);text-decoration:underline}
.reading-scope{border-left-color:var(--rg-secondary);background:var(--rg-surface-alt);border-radius:0 8px 8px 0;color:var(--rg-text-dark)}
.reading table th{color:var(--rg-primary)}
.source-list a{color:var(--rg-primary);font-weight:600}
.reference-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.game-try{padding-top:0}
.game-try h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.try-block h2{font-weight:800;color:var(--rg-primary)}
@media(max-width:640px){.reading,.try{margin-top:20px}.read-index{grid-template-columns:1fr;padding:16px}}
/* Support copy (Tier 2): navy + white + warm neutrals, a solid 3px emerald accent, headings 600, no orange. */
.reading .t2-block{background:#F5F5FA;color:#1A1A2E;border-top:3px solid #10B981;border-radius:0 0 12px 12px;padding:24px 24px 20px}
.reading .t2-block h2{font-weight:600;color:#1B2838;font-size:1.25rem}
.reading .t2-block p{color:#3D3D5C;font-size:1.125rem;line-height:1.75}

/* ---- Mini player (reading pages): a white card with the orange pill ---- */
.mini-player{border:1px solid var(--rg-divider-light);border-radius:12px;box-shadow:0 2px 8px rgba(27,40,56,.12),0 8px 24px rgba(27,40,56,.12);background:var(--rg-surface);color:var(--rg-text-dark)}
.mini-player strong{color:var(--rg-primary)}
.mini-actions a{color:var(--rg-secondary-dark);font-weight:700;font-family:var(--font-display)}
.mini-player .play-button{color:#fff;font-family:var(--font-display);font-weight:600;box-shadow:0 4px 16px rgba(255,107,53,.3)}

/* ================================================================== */
/* Player, light (20 Oct, user feedback): the page around the stage   */
/* in the main page's language. A light section; the title as a navy  */
/* h1 with the accent line and quiet text links; one thin segmented   */
/* progress bar with a single chapter line; the stage, caption and    */
/* controls in ONE white card with the gradient top border (the tools */
/* panel's); site controls (EN | 中文-style segmented mode switch, a   */
/* small switch, the orange Play, ghost circles). The stage's art —    */
/* felt, cards, machines — is unchanged; only its frame is gone.       */
/* ================================================================== */
.player-band{padding:4px 0 32px}
.is-player .guide-head h1{color:var(--rg-primary)}
.is-player .guide-head-links{gap:20px}
.is-player .guide-head-links a,.is-player .guide-head-links a:hover{min-height:36px;padding:0;border:0;border-radius:0;color:var(--rg-secondary-dark);font:600 .9rem var(--font-display);text-decoration:none}
.is-player .guide-head-links a:hover{text-decoration:underline;text-underline-offset:4px}
/* Chapters: one thin segmented progress bar; each segment is still a button (title, accessible name, keyboard). */
.is-player .chapters{gap:4px;margin:6px 0 16px}
.is-player .seg,.is-player .seg.is-current,.is-player .seg.is-done{min-height:24px;padding:0;border:0;border-radius:4px;background:transparent}
.is-player .seg .n,.is-player .seg .t,.is-player .seg .mark{display:none}
.is-player .seg::after{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--rg-divider-light);transition:background .15s}
.is-player .seg::before,.is-player .seg.is-done::before{top:10px;height:4px;border-radius:2px;background:var(--rg-secondary);z-index:1}
.is-player .seg:hover{background:transparent}
.is-player .seg:hover::after{background:#CBD5E1}
.is-player .seg:focus-visible{outline:2px solid var(--rg-secondary-dark);outline-offset:2px}
/* The card. */
.is-player .player{position:relative;background:#fff;border:0;border-radius:16px;overflow:clip;box-shadow:0 2px 8px rgba(27,40,56,.08),0 8px 24px rgba(27,40,56,.06)}
.is-player .player::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rg-bar);z-index:3;pointer-events:none}
.is-player .player-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:14px 20px 12px;border:0}
.now-playing,.is-player .now-playing{margin:0;gap:0;align-items:baseline;font-family:var(--font-display);min-width:0;flex:1 1 auto}
.now-n{font-size:.9rem;font-weight:600;color:var(--rg-text-dark-muted);white-space:nowrap}
.now-playing b,.is-player .now-playing b{font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--rg-primary);margin-left:4px}
.is-player .mode-switch{background:#fff;border:1px solid var(--rg-divider-light);border-radius:999px;padding:2px;gap:0}
.is-player .mode-switch button{min-height:36px;min-width:0;padding:0 16px;border-radius:999px;color:var(--rg-text-dark-muted);font:700 .82rem var(--font-display)}
.is-player .mode-switch button[aria-pressed=true]{background:var(--rg-secondary);color:var(--rg-primary-dark)}
.is-player .motion-toggle,.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 2px;border:0;border-radius:6px;background:none;color:var(--rg-text-dark-muted);font:600 .82rem var(--font-display);white-space:nowrap}
.motion-toggle::before{content:none}
.switch-track{position:relative;flex:none;width:32px;height:18px;border-radius:999px;background:#CBD5E1;transition:background .2s}
.switch-track::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(27,40,56,.25);transition:left .2s}
.motion-toggle[aria-checked=true] .switch-track{background:var(--rg-secondary)}
.motion-toggle[aria-checked=true] .switch-track::after{left:16px}
.motion-toggle:focus-visible{outline:2px solid var(--rg-secondary-dark);outline-offset:2px}
.motion-still .switch-track,.motion-still .switch-track::after{transition:none}
/* The stage: full width in the card, no rail or rounded frame; its felt and art are its own. */
.is-player .stage{border-radius:0;box-shadow:none}
.is-player .stage-caption{background:#fff;color:var(--rg-text-dark);border-top:1px solid var(--rg-divider-light);font-size:1.0625rem;line-height:1.55;padding:14px 28px 16px}
:lang(zh) .is-player .stage-caption{line-height:1.7}
.is-player .side-caption{color:var(--rg-text-dark)}
/* Questions, inside the card under the stage: a light panel, white answer chips. */
.is-player .check-panel{margin:0;border:0;border-top:1px solid var(--rg-divider-light);border-radius:0;background:var(--rg-surface-alt);padding:18px 20px}
.is-player .check-panel .eyebrow{color:var(--rg-secondary-dark)}
.is-player .check-panel h2{color:var(--rg-primary)}
.check-hint,.is-player .check-hint{color:var(--rg-text-dark-muted)}
.is-player .answer-chip{background:#fff;border:2px solid var(--rg-divider-light);color:var(--rg-primary);box-shadow:0 1px 2px rgba(27,40,56,.06)}
.is-player .answer-chip:hover:not([aria-disabled]){border-color:var(--rg-secondary);background:#fff}
.is-player .answer-chip.is-right{border-color:var(--rg-secondary);background:#ECFDF5;color:var(--rg-primary)}
.is-player .feedback{border-top-color:var(--rg-divider-light)}
.is-player .feedback p{color:var(--rg-text-dark)}
.is-player .voice-status{padding:8px 20px;color:var(--rg-text-dark-muted);border-top:1px solid var(--rg-divider-light)}
/* Transport along the card's bottom. */
.is-player .transport{padding:12px 20px 4px;border-top:1px solid var(--rg-divider-light)}
.is-player .progress-row input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--rg-secondary) var(--fill,0%),var(--rg-divider-light) var(--fill,0%))}
.is-player .progress-row input::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6px;background:#fff;border:2px solid var(--rg-secondary);box-shadow:0 1px 3px rgba(27,40,56,.2)}
.is-player .progress-row input::-moz-range-track{height:4px;background:var(--rg-divider-light)}
.is-player .progress-row input::-moz-range-progress{height:4px;background:var(--rg-secondary)}
.is-player .progress-row input::-moz-range-thumb{background:#fff;border:2px solid var(--rg-secondary)}
.is-player .progress-row>span{color:var(--rg-text-dark-muted)}
.is-player .icon-button{background:#fff;border:1px solid var(--rg-divider-light);color:var(--rg-primary)}
.is-player .icon-button:hover{background:#fff;border-color:var(--rg-secondary);color:var(--rg-primary)}
.is-player .play-button{background:var(--rg-accent);color:#fff}
.is-player .play-button:hover{background:var(--rg-accent);color:#fff}
.is-player .play-button:disabled{background:#CBD5E1;color:#fff;opacity:1}
.is-player #speed{background:#fff;color:var(--rg-primary);border:1px solid var(--rg-divider-light);border-radius:999px;min-height:36px;padding:0 10px;color-scheme:light}
.is-player .caption-button{background:#fff;border:1px solid var(--rg-divider-light);color:var(--rg-text-dark-muted);min-height:36px;min-width:36px;border-radius:999px}
.is-player .caption-button[aria-pressed=true]{border-color:var(--rg-primary);color:var(--rg-primary)}
.is-player .player-bottom{padding:4px 20px 14px;color:var(--rg-text-dark-muted)}
.is-player .player-bottom a{color:var(--rg-secondary-dark)}
.guide-after-band{background:var(--rg-surface-alt);border-bottom:0}
.is-player .guide-after{padding-top:0;padding-bottom:28px}
@media(max-width:760px){
  .player-band{padding:0 0 12px}
  .is-player .chapters{margin:2px 0 8px}
  .is-player .player{border-radius:12px}
  .is-player .player-top{padding:10px 12px 8px;gap:6px 10px}
  .now-n{font-size:.8rem}.now-playing b,.is-player .now-playing b{font-size:.92rem}
  .is-player .mode-switch button{min-height:32px;padding:0 12px;font-size:.78rem}
  .is-player .motion-toggle{min-height:32px;font-size:.78rem}
  .is-player .stage-caption{font-size:15px;line-height:1.45;padding:9px 14px 10px}
  .is-player .transport{padding:6px 12px 2px}
  .is-player .player-bottom{padding:0 12px 6px}
  .is-player .check-panel{padding:12px 14px}
}
@media(max-height:460px) and (min-width:600px){.is-player .player{border-radius:10px}.is-player .player-top{padding:6px 10px}.is-player .transport{border-top:0}}

/* Playback speed: a small ghost control whose own chevron never covers "1×" (narrow phones rendered it as "1›"). */
.is-player #speed{-webkit-appearance:none;appearance:none;min-width:58px;padding:0 24px 0 12px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%231B2838' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;font:600 13px var(--font-display);font-variant-numeric:tabular-nums;max-width:none}
@media(max-width:420px){.is-player #speed{min-width:54px;padding:0 22px 0 10px;background-position:right 8px center}}

/* ================================================================== */
/* Covers, end cards and up next (20 Oct). One layer over the stage   */
/* (#stage-ui, placed by app.js over #stage). Navy, white and orange: */
/* none of it counts against the stage's one emerald. No motion: the  */
/* cards and toasts simply appear (hold-still, reduced motion).        */
/* ================================================================== */
.stage-ui{position:absolute;z-index:6;pointer-events:none;overflow:hidden;border-radius:0}
.stage-ui[hidden]{display:none}
.stage-ui :is(button,a,.ui-cover,.ui-card,.ui-bar){pointer-events:auto}
.ui-thumb{display:block;flex:none;width:96px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#1b2838;box-shadow:0 1px 3px rgba(27,40,56,.25)}
.ui-thumb > *,.ui-thumb img,.ui-thumb svg{display:block;width:100%!important;height:100%!important;object-fit:cover}
/* Start cover */
.ui-cover{position:absolute;inset:0;display:grid;place-items:center;background:#1b2838;cursor:pointer}
.ui-cover-art{position:absolute;inset:0}
.ui-cover-art > *,.ui-cover-art img,.ui-cover-art svg{display:block;width:100%!important;height:100%!important;object-fit:cover}
.ui-cover-shade{position:absolute;inset:0;background:radial-gradient(ellipse 58% 62% at 50% 52%,rgba(15,25,35,.62) 0%,rgba(15,25,35,.38) 60%,rgba(15,25,35,.18) 100%),linear-gradient(180deg,rgba(15,25,35,0) 55%,rgba(15,25,35,.7) 100%)}
.ui-cover-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 28px 16px;border-radius:18px;background:rgba(15,25,35,.62);box-shadow:0 10px 40px rgba(0,0,0,.25);text-align:center;color:#fff;cursor:default;max-width:min(560px,calc(100% - 24px))}
.ui-cover-title{font:800 clamp(1.25rem,2.6vw,1.75rem)/1.25 var(--font-display);letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,0,0,.45);overflow-wrap:anywhere}
.ui-cover-time{font:600 .95rem var(--font-display);color:#E8ECF1;font-variant-numeric:tabular-nums}
.ui-progress{display:block;width:min(260px,70%);height:4px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.ui-progress i{display:block;height:100%;background:#fff;transform:scaleX(var(--p));transform-origin:left}
.ui-play{display:grid;place-items:center;width:76px;height:76px;margin:6px 0 2px;border-radius:50%;border:0;background:var(--rg-accent);color:#fff;box-shadow:0 8px 28px rgba(255,107,53,.45),0 0 0 6px rgba(255,255,255,.14);cursor:pointer}
.ui-play svg{width:34px;height:34px;margin-left:4px}
.ui-play:hover{background:#ff7a48}
.ui-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.ui-link{min-height:44px;padding:0 6px;border:0;background:none;color:#E8ECF1;font:600 .9rem/1.35 var(--font-display);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45);cursor:pointer;font-variant-numeric:tabular-nums}
.ui-link:hover{color:#fff;text-decoration-color:#fff}
.ui-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* End cards (the short version, the guide) */
.ui-scrim{position:absolute;inset:0;background:rgba(15,25,35,.62)}
.ui-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));max-height:calc(100% - 24px);overflow:auto;padding:22px 22px 18px;border-radius:16px;background:#fff;color:var(--rg-text-dark);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.ui-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;background:var(--rg-bar)}
.ui-card-title{font:800 1.3rem/1.25 var(--font-display);letter-spacing:-.01em;color:var(--rg-primary);margin:0 0 14px;padding-right:28px}
.ui-next{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;background:var(--rg-surface-alt);margin-bottom:16px}
.ui-next-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-next-copy small,.ui-bar-copy small,.ui-toast small{font:700 .75rem/1.3 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--rg-text-dark-muted)}
.ui-next-copy b{font:700 1rem/1.3 var(--font-display);color:var(--rg-primary);overflow-wrap:anywhere}
.ui-next-copy em{font-style:normal;font-size:.9rem;color:var(--rg-text-dark-muted);font-variant-numeric:tabular-nums}
.ui-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.ui-actions .btn{min-height:46px}
.ui-alt{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--rg-secondary-dark);font:700 .92rem var(--font-display);text-decoration:none;cursor:pointer}
.ui-alt:hover{text-decoration:underline;text-underline-offset:4px}
.ui-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--rg-divider-light);background:#fff;color:var(--rg-primary);font:400 1.3rem/1 var(--font-display);cursor:pointer}
.ui-close:hover{border-color:var(--rg-primary)}
/* Up next bar along the stage's bottom at a chapter's end (Explore) */
.ui-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:12px;background:#fff;color:var(--rg-text-dark);box-shadow:0 8px 28px rgba(0,0,0,.3)}
.ui-bar .ui-thumb{width:84px}
.ui-bar-copy{flex:1;min-width:0;font-family:var(--font-display);line-height:1.3}
.ui-bar-copy b{font-weight:700;color:var(--rg-primary);overflow-wrap:anywhere}
.ui-bar .btn{flex:none}
/* Listen toast during a chapter gap, and the quiet Paused mark */
.ui-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:8px 14px;border-radius:999px;background:rgba(15,25,35,.88);color:#fff;font:600 .9rem/1.3 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-toast small{color:#C3CDD9;margin-right:4px}
.ui-paused{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:rgba(15,25,35,.72);color:#fff;font:700 .78rem/1.3 var(--font-display);letter-spacing:.04em}
/* Keys hint */
.kbd-hint{margin:0;padding:6px 20px 0;font:500 .82rem/1.5 var(--font-display);color:var(--rg-text-dark-muted)}
.kbd-hint[hidden]{display:none}
/* Chapter tooltip */
.is-player .guide{position:relative}
.seg-tip{position:absolute;z-index:30;display:flex;flex-direction:column;gap:6px;width:180px;padding:8px;border-radius:10px;background:#fff;color:var(--rg-primary);box-shadow:0 8px 24px rgba(27,40,56,.22);font:700 .85rem/1.3 var(--font-display);pointer-events:none}
.seg-tip[hidden]{display:none}
.seg-tip .ui-thumb{width:100%}
/* Chapter grid dialog */
.chapter-grid{width:min(880px,calc(100vw - 24px));max-height:calc(100svh - 32px);padding:0;border:0;border-radius:16px;background:#fff;color:var(--rg-text-dark);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.chapter-grid::backdrop{background:rgba(15,25,35,.6)}
.cg-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid var(--rg-divider-light)}
.cg-head h2{font:800 1.2rem var(--font-display);color:var(--rg-primary);margin:0}
.cg-head .ui-close{position:static}
.cg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:14px;padding:16px 20px 20px}
.cg-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 8px 10px;border:1px solid var(--rg-divider-light);border-radius:12px;background:#fff;text-align:left;cursor:pointer;font-family:var(--font-display)}
.cg-card .ui-thumb{width:100%;margin-bottom:4px}
.cg-card:hover{border-color:var(--rg-secondary)}
.cg-card:focus-visible{outline:2px solid var(--rg-secondary-dark);outline-offset:2px}
.cg-card.is-current{border-color:var(--rg-primary);box-shadow:inset 0 0 0 1px var(--rg-primary)}
.cg-n{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rg-text-dark-muted)}
.cg-card b{font-size:.95rem;font-weight:700;line-height:1.3;color:var(--rg-primary)}
.cg-card em{font-style:normal;font-size:.85rem;color:var(--rg-text-dark-muted);font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .ui-cover-copy{gap:6px;padding:14px}
  .ui-play{width:72px;height:72px}
  .ui-card{padding:18px 16px 14px;width:calc(100% - 20px)}
  .ui-card-title{font-size:1.1rem;margin-bottom:10px}
  .ui-next{gap:10px;padding:8px;margin-bottom:10px}
  .ui-next .ui-thumb{width:76px}
  .ui-actions{gap:2px 14px}
  .ui-bar{left:8px;right:8px;bottom:8px;gap:8px;padding:6px}
  .ui-bar .ui-thumb{display:none}
  .ui-bar-copy{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cg-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
  .cg-head{padding:12px 14px}
  .kbd-hint{padding:4px 12px 0}
}
@media(max-height:460px) and (min-width:600px){.ui-play{width:72px;height:72px;margin:2px 0}.ui-cover-copy{gap:4px;padding:10px}.ui-card{padding:14px 16px 12px}.ui-next{margin-bottom:8px}.ui-next .ui-thumb{width:70px}}
@media(max-width:379px),(max-height:700px) and (max-width:760px){
  .ui-next .ui-thumb{display:none}
  .ui-card{padding:14px 14px 10px}
  .ui-card-title{font-size:1rem;margin-bottom:8px}
  .ui-next{padding:6px 8px;margin-bottom:8px}
  .ui-next-copy b{font-size:.92rem}
  .ui-actions .btn{min-height:44px;padding:8px 16px;font-size:.88rem}
  .ui-cover-title{font-size:1.1rem}
  .ui-play{width:72px;height:72px;margin:2px 0}
}
/* Phones: the title row wraps its links under the game's name rather than breaking a link over two lines. */
@media(max-width:760px){.is-player .guide-head{flex-wrap:wrap;column-gap:12px}.is-player .guide-head-links a{white-space:nowrap}}
/* Short stages (small phones, short landscape): the end card keeps its order but drops the picture and folds the
   Up next tile into one line, so it fits the stage without scrolling. */
.stage-ui{container-type:size}
@container (max-height:380px){
  .ui-card{padding:10px 12px 6px;border-radius:12px}
  .ui-card-title{font-size:.95rem;margin:0 0 4px}
  .ui-next{display:block;padding:0;margin:0 0 6px;background:none}
  .ui-next .ui-thumb{display:none}
  .ui-next-copy{display:flex;flex-direction:row;align-items:baseline;gap:4px;font-size:.85rem}
  .ui-next-copy small{flex:none}
  .ui-next-copy b{min-width:0;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ui-next-copy em{display:none}
  .ui-actions{gap:0 12px}
  .ui-actions .btn{min-height:40px;padding:6px 14px;font-size:.85rem}
  .ui-alt{min-height:36px;font-size:.85rem}
  .ui-cover-copy{gap:2px;padding:8px}
  .ui-cover-title{font-size:1rem}
  .ui-play{width:72px;height:72px}
  .ui-link{min-height:36px;font-size:.82rem}
}
.ui-bar-copy{display:flex;align-items:baseline;gap:5px;min-width:0}
.ui-bar-copy small{flex:none}
.ui-bar-copy b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Cover, revised: the picture is dimmed and softened behind the copy (no translucent panel showing the table's
   printing through), so the running time, Play and the skip link read cleanly. */
.ui-cover-art > *,.ui-cover-art img{filter:blur(6px) brightness(.58) saturate(.9);transform:scale(1.06)}
.ui-cover-shade{background:radial-gradient(ellipse 60% 60% at 50% 52%,rgba(15,25,35,.35) 0%,rgba(15,25,35,.12) 70%,rgba(15,25,35,0) 100%)}
.ui-cover-copy{background:none;box-shadow:none;padding:18px 20px}
.ui-cover-time{font-size:1.05rem;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* End card actions: Continue, then Try it and Choose a chapter as quiet links on the same line; the links wrap as a group. */
.ui-card{width:min(540px,calc(100% - 32px))}
.ui-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.ui-links{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:0 16px}

/* ================================================================== */
/* The player as a video player (21 Oct, user feedback). Controls live */
/* on the stage: a bottom bar over a soft dark gradient (chapter       */
/* scrubber; Play, previous, next, time; captions, settings, chapters, */
/* full screen), the chapter's name top left, a centre Play when       */
/* paused. White icons, an orange playhead, navy at alpha: no emerald  */
/* in the controls. Captions are subtitles on the stage. The stage     */
/* reserves the bar's height (and the title's) as padding, so fitStage */
/* always fits the picture above the bar and the captions.             */
/* ================================================================== */
.is-player .player::before{content:none}
.is-player .player-band .player{border-radius:14px}
.pscreen{position:relative;--bar-h:62px;--top-h:34px;background:#0f1923;min-width:0}
.is-player .pscreen > .stage{padding-top:var(--top-h);padding-bottom:var(--bar-h)}
.is-player .side-caption,.is-player .player .side-caption{display:none!important}
/* Subtitles: a dark translucent box hugging the words, at most three lines, just above the bar; when the bar fades
   they move down into its place. */
.is-player .pscreen .stage > .stage-caption{position:relative;z-index:5;align-self:center;flex:none;width:auto;max-width:min(880px,calc(100% - 16px));min-height:0;margin:0 auto 6px;padding:5px 14px 6px;border:0;border-radius:6px;background:rgba(10,17,26,.8);color:#fff;font-size:1.125rem;line-height:1.45;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;transition:transform .25s ease}
:lang(zh) .is-player .pscreen .stage > .stage-caption{line-height:1.6}
.is-player .pscreen .stage > .stage-caption[hidden]{display:none}
.is-player .player.is-idle .pscreen .stage > .stage-caption{transform:translateY(calc(var(--bar-h) - 14px))}
/* The control layer */
.pctl{position:absolute;inset:0;z-index:7;pointer-events:none;color:#fff;font-family:var(--font-display)}
.pctl::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;background:linear-gradient(180deg,rgba(15,25,35,.62),rgba(15,25,35,0));transition:opacity .25s}
.pctl-shade{position:absolute;left:0;right:0;bottom:0;height:min(132px,48%);background:linear-gradient(180deg,rgba(15,25,35,0),rgba(15,25,35,.55) 50%,rgba(15,25,35,.86));transition:opacity .25s}
.is-player .pctl .pctl-top{position:absolute;left:14px;right:14px;top:8px;margin:0;display:flex;align-items:baseline;gap:0;min-width:0;font-size:.9rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.5);transition:opacity .25s}
.is-player .pctl .now-n{flex:none;font-size:inherit;font-weight:600;color:#E8ECF1}
.is-player .pctl .pctl-top b{min-width:0;margin-left:4px;overflow:hidden;text-overflow:ellipsis;font-size:inherit;font-weight:700;color:#fff}
.pctl-bar{position:absolute;left:0;right:0;bottom:0;padding:0 8px 2px;pointer-events:auto;transition:opacity .25s}
.pctl-scrub{position:relative;height:16px;margin:0 6px}
.pctl-segs{position:absolute;left:0;right:0;top:6px;height:4px;display:flex;gap:3px;transition:top .12s,height .12s}
.pseg{position:relative;min-width:2px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}
.pseg i{position:absolute;inset:0;background:var(--rg-accent);transform:scaleX(var(--p,0));transform-origin:left}
.pctl-scrub:hover .pctl-segs,.pctl-scrub:focus-within .pctl-segs{top:5px;height:6px}
.pctl-head{position:absolute;top:8px;left:calc(var(--fill,0) * 100%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--rg-accent);box-shadow:0 0 0 2px rgba(15,25,35,.35);transform:scale(.8);transition:transform .12s;pointer-events:none}
.pctl-scrub:hover .pctl-head,.pctl-scrub:focus-within .pctl-head{transform:scale(1.1)}
.pctl-scrub #position{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.pctl-scrub #position::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:16px}
.pctl-scrub:has(#position:focus-visible){outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.pctl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px}
.pctl-left,.pctl-right{display:flex;align-items:center;gap:2px;min-width:0}
.pctl-btn{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer}
.pctl-btn svg{width:24px;height:24px}
.pctl-btn.pctl-play svg{width:28px;height:28px}
.pctl-btn:hover{background:rgba(255,255,255,.12)}
.pctl-btn:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pctl-btn:disabled{opacity:.4;cursor:default;background:transparent}
#captions-toggle[aria-pressed=false]{color:#C3CDD9}
#captions-toggle[aria-pressed=true]::after{content:"";position:absolute;left:11px;right:11px;bottom:6px;height:2px;border-radius:1px;background:var(--rg-accent)}
#settings-button[aria-expanded=true] svg{transform:rotate(30deg)}
.pctl-time{padding:0 8px;font-size:.88rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;min-width:0}
/* Auto-hide: the bar, title and shades fade together; the pointer hides with them over the picture. */
.player.is-idle :is(.pctl-bar,.pctl-top,.pctl-shade),.player.is-idle .pctl::before{opacity:0}
.player.is-idle .pctl-bar{pointer-events:none}
.player.is-idle .pscreen{cursor:none}
.motion-still :is(.pctl-bar,.pctl-top,.pctl-shade,.pctl::before,.pctl-segs,.pctl-head),.motion-still .is-player .pscreen .stage > .stage-caption{transition:none}
@media(prefers-reduced-motion:reduce){.pctl-bar,.pctl-top,.pctl-shade,.pctl::before,.pctl-segs,.pctl-head,.is-player .pscreen .stage > .stage-caption{transition:none}}
/* Settings menu above the bar's right end. */
.pctl-menu{position:absolute;right:10px;bottom:calc(var(--bar-h) + 4px);z-index:8;width:min(300px,calc(100% - 20px));max-height:calc(100% - var(--bar-h) - 12px);overflow:auto;padding:12px;border-radius:12px;background:rgba(15,25,35,.95);color:#fff;pointer-events:auto;box-shadow:0 10px 30px rgba(0,0,0,.4);text-align:left}
.pctl-menu[hidden]{display:none}
.pm-group+.pm-group{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
.pm-label{margin:0 0 6px;font-size:.8rem;font-weight:700;color:#C3CDD9}
.is-player .pctl-menu .mode-switch{display:flex;gap:4px;padding:0;border:0;background:none}
.is-player .pctl-menu .mode-switch button,.pm-speed button{flex:1 1 0;min-width:0;min-height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:transparent;color:#fff;font:700 .85rem var(--font-display);cursor:pointer;font-variant-numeric:tabular-nums}
.is-player .pctl-menu .mode-switch button[aria-pressed=true],.pm-speed button[aria-pressed=true]{background:#fff;border-color:#fff;color:#1b2838}
.is-player .pctl-menu .mode-switch button:hover:not([aria-pressed=true]),.pm-speed button:hover:not([aria-pressed=true]){border-color:#fff}
.pm-speed{display:flex;gap:4px}
.is-player .pctl-menu .motion-toggle{width:100%;justify-content:space-between;flex-direction:row-reverse;min-height:38px;color:#fff;font-size:.88rem}
.is-player .pctl-menu .motion-toggle .switch-track{background:rgba(255,255,255,.3)}
.is-player .pctl-menu .motion-toggle[aria-checked=true] .switch-track{background:var(--rg-accent)}
.is-player .pctl-menu .motion-toggle:focus-visible,.pctl-menu button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pm-steps{display:none}
.pm-steps button{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:1 1 0;min-width:0;min-height:44px;padding:0 8px;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:transparent;color:#fff;font:700 .85rem var(--font-display);cursor:pointer;white-space:nowrap}
.pm-steps button:disabled{opacity:.4}
.pm-steps svg{flex:none;width:18px;height:18px}
.pm-steps span{overflow:hidden;text-overflow:ellipsis}
/* Keys hint: on the stage, above the bar. */
.is-player .pctl .kbd-hint{position:absolute;left:12px;right:12px;bottom:calc(var(--bar-h) + 4px);margin:0;padding:8px 12px;border-radius:8px;background:rgba(15,25,35,.92);color:#fff;font:600 .85rem/1.5 var(--font-display);pointer-events:auto;text-align:center}
.is-player .pctl .kbd-hint[hidden]{display:none}
/* Covers, end cards and Up next sit in the picture's area, above the bar. */
.is-player .ui-cover{padding-bottom:var(--bar-h);padding-top:var(--top-h)}
.is-player .ui-card{top:calc(50% + (var(--top-h) - var(--bar-h)) / 2);max-height:calc(100% - var(--bar-h) - var(--top-h) - 8px)}
.is-player .ui-bar{bottom:calc(var(--bar-h) + 8px)}
.is-player .ui-toast{bottom:calc(var(--bar-h) + 10px)}
/* Scrubber tooltip */
.pscreen .seg-tip{z-index:9}
/* Under the player: the narration label and Read instead. */
.is-player .player-band .player-bottom{display:flex;padding:10px 4px 0;border:0}
/* Desktop: the stage (with its bar inside) fits the window under the header and the title. */
@media(min-width:761px){
  .is-player .pscreen > .stage:not(.at-check){height:clamp(320px,calc(100svh - var(--header-h) - 150px),640px)}
  .is-player .pscreen > .stage.at-check{height:clamp(260px,calc(100svh - var(--header-h) - 400px),420px)}
}
@media(min-width:761px) and (max-height:760px){.is-player .pscreen > .stage:not(.at-check){height:clamp(300px,calc(100svh - var(--header-h) - 118px),640px)}}
/* Full screen: the whole player (stage, captions, controls, any question) fills the screen. */
.is-player .player:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;max-width:none;border-radius:0;background:#0f1923;overflow:hidden}
.is-player .player:fullscreen .pscreen{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.is-player .player:fullscreen .pscreen > .stage{flex:1 1 0;height:auto;min-height:0;max-height:none}
.is-player .player:fullscreen .check-panel,.is-player .player:fullscreen .voice-status{flex:none}
.is-player .player:fullscreen .pscreen .stage > .stage-caption{font-size:clamp(18px,1.6vw,26px)}
/* Phones */
@media(max-width:760px){
  .is-player .player{display:flex;flex-direction:column}
  .pscreen{--bar-h:64px;--top-h:28px;flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  .is-player .pscreen > .stage{flex:1 1 0;min-height:140px;height:auto}
  .is-player .player.waiting .pscreen{flex:0 0 auto}
  .is-player .player.waiting .pscreen > .stage{flex:none;height:max(220px,34svh);max-height:none}
  .is-player .pctl .pctl-top{left:10px;right:10px;top:6px;font-size:.8rem}
  .is-player .pscreen .stage > .stage-caption{font-size:15px;line-height:1.4;padding:4px 10px 5px;max-width:calc(100% - 8px)}
  .pctl-bar{padding:0 4px 2px}
  .pctl-scrub{height:20px;margin:0 8px}
  .pctl-segs{top:8px;height:5px}
  .pctl-scrub:hover .pctl-segs,.pctl-scrub:focus-within .pctl-segs{top:7px;height:7px}
  .pctl-head{top:10px;width:15px;height:15px;margin:-7.5px 0 0 -7.5px}
  .pctl-left [data-step]{display:none}
  .pctl-time{font-size:.8rem;padding:0 4px}
  .pm-steps{display:flex;gap:6px}
  /* Settings and Chapters open as bottom sheets. */
  .pctl-menu{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:75svh;z-index:60;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 0 0 100vmax rgba(15,25,35,.45)}
  .chapter-grid{margin:auto 0 0;width:100%;max-width:100%;max-height:85svh;border-radius:16px 16px 0 0}
}
@media(max-width:420px){.pctl-right [data-wide]{display:none}}
/* Short landscape: the stage takes the width; a question opens beside it. */
@media(max-height:460px) and (min-width:600px){
  .is-player .player{display:flex;flex-direction:column}
  .is-player .player.waiting{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .is-player .player.waiting .pscreen{grid-column:1;grid-row:1}
  .is-player .player.waiting .check-panel{grid-column:2;grid-row:1}
  .is-player .player.waiting .voice-status{grid-column:1/-1;grid-row:2}
  .pscreen{--bar-h:56px;--top-h:26px;flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  .is-player .pscreen > .stage{flex:1 1 0;height:auto;min-height:0;padding-left:12px;padding-right:12px}
  .is-player .player.waiting .pscreen > .stage{height:auto;max-height:none;flex:1 1 0}
  .is-player .pctl .pctl-top{display:flex;top:4px;font-size:.78rem}
  .is-player .pscreen .stage .stage-note{display:block}
  .is-player .pscreen .stage > .stage-caption{font-size:14px;line-height:1.35;padding:3px 10px 4px;-webkit-line-clamp:2}
  .pctl-row{height:40px}
  .pctl-btn{width:42px;height:40px}
}
.pscreen > .stage-ui{inset:0}
.is-player .pctl #now-n{color:#E8ECF1}
.pm-steps{flex-wrap:wrap}
.pm-steps button{flex:1 1 calc(50% - 3px)}
.pm-steps button[data-menu-chapters]{flex-basis:100%}
/* Captions never lose words: a long sentence on a narrow phone takes a fourth line rather than being cut. */
.is-player .pscreen .stage > .stage-caption{display:block;-webkit-line-clamp:unset;overflow:visible}
@media(max-width:420px){.is-player .pscreen .stage > .stage-caption{font-size:14px;line-height:1.38;padding:4px 8px 5px}}
@media(max-height:460px) and (min-width:600px){.is-player .pscreen .stage > .stage-caption{display:block}}
/* When a fit grows the stage past the window (the floor scale), the screen grows with it, so the bar stays at its foot. */
@media(max-width:760px){.pscreen{flex:1 0 auto}.is-player .player.waiting .pscreen{flex:0 0 auto}}
/* Short landscape: the screen fills the window and grows (the page scrolls) when a dense frame needs the floor scale,
   so the bar always stays at the stage's foot and never over the picture; the label under the player hides, as it
   always has at this size. */
@media(max-height:460px) and (min-width:600px){.is-player .guide:not(.guide-after){height:auto;min-height:calc(100svh - var(--header-h))}.is-player .player-band .player{flex:1 0 auto}.pscreen{flex:1 0 auto}.is-player .player-band .player-bottom{display:none}}
@media(max-width:360px){.pctl-left,.pctl-right{gap:0}.pctl-time{font-size:.75rem;padding:0 2px}.pctl-bar{padding:0 2px 2px}}

/* ================================================================== */
/* The /explore palette (21 Oct 2026, user request): the guides' page  */
/* chrome in the operator page's light tokens (PlaybookRG              */
/* app/globals.css), matching the home: paper and white cards with 1px */
/* lines and little shadow, ink type, deep emerald (#047857) for       */
/* actions, links, carets and the current item; orange only as a small */
/* mark (the hairline, the stage's playhead, the big Play on the       */
/* stage). Tier 1 headings drop their accent lines. The stage and its  */
/* control bar stay dark, as video players are.                        */
/* ================================================================== */
:root{
  --paper:#f5f5fa;--paper-dim:#eceef5;--surface:#fff;--card:#fff;--ink:#1b2838;--body:#3d4a5c;--muted:#5e6b7e;--line:#d8dde7;--line-strong:#8490a1;
  --emerald-text:#047857;--orange-text:#c2410c;--wash:#e4f4ed;--focus:#047857;
  --rg-primary:#1b2838;--rg-secondary:#047857;--rg-secondary-dark:#047857;--rg-text:#1b2838;--rg-text-muted:#5e6b7e;--rg-divider:#d8dde7;--rg-card-border:#d8dde7;
  --rg-text-dark:#3d4a5c;--rg-text-dark-muted:#5e6b7e;--rg-surface:#fff;--rg-surface-alt:#eceef5;--rg-divider-light:#d8dde7;
  --rg-strip:linear-gradient(90deg,#ff6b35 0%,#ffb300 35%,#10b981 100%);
  --btn-radius:8px;--chip-radius:6px;--emerald-hover:color-mix(in srgb,#047857,#1b2838 10%);
  --shadow-card:0 1px 2px rgba(22,34,48,.04),0 8px 24px rgba(22,34,48,.05);--shadow-float:0 2px 8px rgba(22,34,48,.07),0 24px 56px rgba(22,34,48,.1);
  background:var(--paper);color:var(--body)}
body{background:var(--paper)}
:focus-visible{outline-color:var(--emerald-text)}
/* Header: one light bar (paper, ink type, a 1px line under it) with the family hairline at its top. */
:root{--header-h:65px}
.site-header{background:var(--paper);color:var(--ink)}
.site-header::before{content:"";display:block;height:4px;background:var(--rg-strip)}
.site-rule{height:1px;background:var(--line)}
.site-header .wordmark{color:var(--ink)}
.site-header :focus-visible{outline:2px solid var(--emerald-text);outline-offset:2px}
.site-nav-trigger{color:var(--ink)}
.site-nav-trigger:hover,.site-dd.is-open > .site-nav-trigger,.site-menus > li.active .site-nav-trigger{color:var(--emerald-text);border-bottom-color:var(--emerald-text)}
.site-dd-caret{color:var(--emerald-text);opacity:1}
.operators-link{color:var(--ink)}
.operators-link:hover{color:var(--emerald-text);text-decoration:underline;text-underline-offset:4px}
.site-lang-button{border:1px solid var(--line-strong);border-radius:var(--chip-radius);background:#fff;color:var(--ink)}
.site-lang-button:hover,.site-lang.is-open .site-lang-button{border-color:var(--emerald-text);background:var(--paper-dim)}
.site-menu-btn{border:1px solid var(--line-strong);border-radius:var(--chip-radius);background:#fff;color:var(--ink)}
.site-menu-btn:hover{border-color:var(--emerald-text);background:var(--paper-dim)}
.site-menu-btn[aria-expanded="true"]{border-color:var(--emerald-text);color:var(--emerald-text)}
.site-dd-panel{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--body);box-shadow:var(--shadow-card)}
.site-dd-panel a,.site-dd-panel ul button{border-radius:var(--chip-radius);color:var(--ink)}
.site-dd-panel a:hover,.site-dd-panel ul button:hover,.site-dd-panel a:focus-visible,.site-dd-panel ul button:focus-visible{background:var(--paper-dim);color:var(--emerald-text)}
.site-dd-panel [aria-current="true"],.site-dd-panel [aria-current="true"]::after{color:var(--emerald-text)}
.site-menu-label{color:var(--muted)}
@media(max-width:899.98px){
  :root{--header-h:61px}
  .site-nav{background:#fff;border-top:0;border-image:none;border-bottom:1px solid var(--line);box-shadow:var(--shadow-float)}
  .site-menus > li{border-bottom-color:var(--line)}
  .site-nav-trigger{color:var(--ink)}
  .site-menus .site-dd-panel{border:0;background:transparent;box-shadow:none}
  .site-menus .site-dd-panel a{color:var(--body)}
  .site-menus .site-dd-panel a:hover,.site-menus .site-dd-panel a:focus-visible{background:var(--paper-dim);color:var(--emerald-text)}
  .site-menus .site-dd-panel :focus-visible{outline-color:var(--emerald-text)}
  .site-menu-label{color:var(--muted);opacity:1}
  .site-menu-section.is-end{border-top-color:var(--line)}
}
@media(max-height:460px) and (min-width:600px){:root{--header-h:53px}}
/* Footer: explore's light footer. */
.site-footer{background:var(--paper-dim);color:var(--muted);border-top:1px solid var(--line)}
.site-footer a{color:var(--emerald-text)}
.footer-brand{color:var(--ink)!important}
/* Bands and headings: paper, then paper-dim; ink headings without the accent line (Tier 1). */
.band-light{background:var(--paper);color:var(--body)}
.band-alt{background:var(--paper-dim);color:var(--body)}
.band-dark{background:var(--paper);color:var(--body)}
.accent-line{display:none}
.section-header h1,.section-header h2,.band-dark .section-header h2{color:var(--ink);font-weight:750;letter-spacing:-.03em}
.section-label{color:var(--emerald-text)}
.lessons-group-title{color:var(--muted)}
.lesson-art{box-shadow:0 1px 2px rgba(22,34,48,.08)}
.lesson-art:hover{transform:none;box-shadow:0 1px 2px rgba(22,34,48,.08),0 0 0 2px var(--emerald-text)}
.lesson-art:focus-visible{outline-color:var(--emerald-text)}
.hub-resume{background:#fff;border:1px solid var(--line);color:var(--body)}
.hub-resume:hover{border-color:var(--emerald-text)}
.hub-resume-play{background:var(--emerald-text);color:#fff}
.hub-resume small{color:var(--emerald-text)}
.hub-resume b{color:var(--ink)}
.hub-resume-bar{background:var(--line)}
.hub-resume-bar i{background:var(--emerald-text)}
.mode-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:none}
.mode-card h3{color:var(--ink)}
.mode-card p{color:var(--body)}
/* Buttons: explore's rectangular emerald primary with white type and an outlined secondary; no lift, no glow.
   Orange is no longer a button colour (the stage's big Play is the one exception, as a video-player accent). */
.btn,main .button:not(.stage .button,.demo-host .button){border-radius:var(--btn-radius);transition:background-color .15s,border-color .15s}
.btn:hover,main .button:not(.stage .button,.demo-host .button):hover{transform:none}
.btn-primary,main .button.primary:not(.stage .button,.demo-host .button){background:var(--emerald-text);color:#fff;box-shadow:none}
.btn-primary:hover,main .button.primary:not(.stage .button,.demo-host .button):hover{background:var(--emerald-hover);box-shadow:none}
main .button.secondary:not(.stage .button,.demo-host .button){background:#fff;color:var(--ink);border:1px solid var(--line-strong);padding:13px 27px}
main .button.secondary:not(.stage .button,.demo-host .button):hover{background:var(--paper-dim);border-color:var(--muted)}
.mini-player{border:1px solid var(--line);box-shadow:var(--shadow-card)}
.mini-player .play-button,.mini-actions .play-button{background:var(--emerald-text);color:#fff;border-radius:var(--btn-radius);box-shadow:none}
.mini-player .play-button:hover{background:var(--emerald-hover)}
.mini-player strong{color:var(--ink)}
/* Reading, rules, try and about pages */
.reading>.eyebrow::before,.try>.eyebrow::before{content:none}
.reading>.eyebrow,.try>.eyebrow{color:var(--emerald-text)}
.reading h1,.try h1,.reading h2,.try-block h2{color:var(--ink)}
.reading section p{color:var(--body)}
.read-index{background:#fff;border:1px solid var(--line)}
.read-index a{color:var(--ink)}
.read-index a:hover{color:var(--emerald-text)}
.reading-scope{background:#fff;border-left-color:var(--emerald-text);color:var(--body)}
.reading .t2-block{background:#fff;border:1px solid var(--line);border-top:3px solid #10B981}
/* The player page: paper around a white card (1px line, little shadow); the stage and its bar stay dark. */
.player-band{--paper:#f5f5fa;--paper-dim:#eceef5;--surface:#fff;--ink:#1b2838;--body:#3d4a5c;--muted:#5e6b7e;--line:#d8dde7;--line-strong:#8490a1;--emerald-text:#047857;--wash:#e4f4ed;--focus:#047857;background:var(--paper);color:var(--body)}
.guide-after-band{background:var(--paper)}
.is-player .guide-head h1{color:var(--ink)}
.is-player .guide-head-links a,.is-player .guide-head-links a:hover{color:var(--emerald-text)}
.is-player .player-band .player{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card)}
.is-player .check-panel{background:var(--paper-dim);border-top:1px solid var(--line)}
.is-player .check-panel .eyebrow{color:var(--emerald-text)}
.is-player .check-panel h2{color:var(--ink)}
.check-hint,.is-player .check-hint{color:var(--muted)}
.is-player .answer-chip{background:#fff;border:1px solid var(--line-strong);border-radius:var(--btn-radius);color:var(--ink);box-shadow:none}
.is-player .answer-chip:hover:not([aria-disabled]){border-color:var(--emerald-text);background:var(--paper)}
.is-player .answer-chip.is-right{border-color:var(--emerald-text);background:var(--wash);color:var(--ink)}
.is-player .feedback p{color:var(--body)}
.is-player .voice-status{color:var(--muted);border-top-color:var(--line)}
.is-player .player-bottom,.guide-after .guide-under{color:var(--muted)}
.is-player .player-bottom a{color:var(--emerald-text)}
/* End cards, Up next, the chapter grid and the tooltip: white cards with 1px lines; emerald actions. */
.ui-card{border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(15,25,35,.22)}
.ui-card::before{content:none}
.ui-card-title{color:var(--ink)}
.ui-next{background:var(--paper-dim)}
.ui-next-copy b,.ui-bar-copy b{color:var(--ink)}
.ui-next-copy small,.ui-bar-copy small,.ui-next-copy em{color:var(--muted)}
.ui-alt{color:var(--emerald-text)}
.ui-close{border:1px solid var(--line-strong);border-radius:var(--chip-radius);color:var(--ink)}
.ui-close:hover{border-color:var(--emerald-text);background:var(--paper-dim)}
.ui-bar{border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(15,25,35,.22)}
.ui-actions .btn{border-radius:var(--btn-radius)}
.chapter-grid{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-float)}
.cg-head{border-bottom-color:var(--line)}
.cg-head h2,.cg-card b{color:var(--ink)}
.cg-n,.cg-card em{color:var(--muted)}
.cg-card{border-color:var(--line);border-radius:12px}
.cg-card:hover{border-color:var(--emerald-text)}
.cg-card.is-current{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.seg-tip{border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-card)}
@media(max-width:760px){.chapter-grid{border-radius:12px 12px 0 0}}
/* Settings: a light menu above the dark bar (a light bottom sheet on phones); the chosen option in ink. */
.pctl-menu{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,25,35,.3)}
.pm-label{color:var(--muted)}
.pm-group+.pm-group{border-top-color:var(--line)}
.is-player .pctl-menu .mode-switch button,.pm-speed button,.pm-steps button{border:1px solid var(--line-strong);border-radius:var(--chip-radius);background:#fff;color:var(--ink)}
.is-player .pctl-menu .mode-switch button[aria-pressed=true],.pm-speed button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.is-player .pctl-menu .mode-switch button:hover:not([aria-pressed=true]),.pm-speed button:hover:not([aria-pressed=true]),.pm-steps button:hover:not(:disabled){border-color:var(--muted);background:var(--paper-dim)}
.is-player .pctl-menu .motion-toggle{color:var(--ink)}
.is-player .pctl-menu .motion-toggle .switch-track{background:var(--line-strong)}
.is-player .pctl-menu .motion-toggle[aria-checked=true] .switch-track{background:var(--ink)}
.is-player .pctl-menu .motion-toggle:focus-visible,.pctl-menu button:focus-visible{outline:2px solid var(--emerald-text);outline-offset:2px}

/* Paused mid-guide: nothing stays over the picture. A toggle answers with a brief centre flash that fades (none under
   reduced motion, where the global rule removes the animation, or with Animated visuals off); the paused state is
   the bar's Play icon and a quiet "Paused" pill beside the chapter's name. */
.pctl-flash{position:absolute;left:50%;top:calc(50% + (var(--top-h) - var(--bar-h)) / 2);width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50%;background:rgba(15,25,35,.55);color:#fff;opacity:0;pointer-events:none}
.pctl-flash svg{width:30px;height:30px}
.pctl-flash.is-on{animation:pctl-flash .6s ease-out forwards}
@keyframes pctl-flash{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.2)}}
.motion-still .pctl-flash{display:none}
.is-player .pctl .pctl-paused{flex:none;margin-right:8px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;text-shadow:none}
.is-player .pctl .pctl-paused[hidden]{display:none}
/* A sample bet ID prints in capitals, as an app's receipt does; the word is stored in sentence case
   (games/sports-betting/parts.js UI.decorSample). Here, not in the game's stage.css, to keep out of a parallel change. */
.sbs-sample{text-transform:uppercase}