/* Journey engine styles (BUILD-R5: the stage states, motion and spacing block at the end; STORYBOARD.md). Palette: COLOUR-SYSTEM-R1 "Rough Sheet" (fixed roles) with its addendum (shape-piece umber;
   region 28 %, second piece 14 %), brand purple on chrome and progress only. Free per-Question-Pattern accent for AREA: a highlighter yellow, used only for the change mark. */
:root{
  --paper:#F7F6FB; --sheet:#FFFFFF; --sheet2:#FBFAFE; --grid:#ECE9F4; --grid2:#DAD5E8; --axis:#8E88A3;
  --ink:#1B1530; --ink2:#4A4462; --ink3:#6F6887; --hair:rgba(27,21,48,.12);
  --brand:#6741D9; --brand-2:#4C2FA8; --brand-tint:#EEE9FC; --on-brand:#FFFFFF;
  --m1:#8B72EC; --m2:#7253E0; --m3:#6741D9; --m4:#4C2FA8; --on-m1:#1B1530; --on-m:#FFFFFF;
  --c-parabola:#C2255C; --c-line:#1864AB; --c-circle:#C4480A; --c-vee:#0B7285; --c-other:#6B6B00; --c-cut:#495057;
  --c-region:rgba(250,176,5,.28); --c-region-light:rgba(250,176,5,.14); --c-region-edge:#B8860B; --c-grey:rgba(73,80,87,.16); --c-piece:#7A4A1F;
  --c-meet:#1B1530; --c-k:#C2255C; --c-right:#0F7B6C; --c-right-soft:#E3F4F0; --c-wrong:#C92A2A; --c-wrong-soft:#FCEAEA;
  --accent:#FFE36E; --accent-line:#D9A400;
  --shadow:0 8px 24px rgba(27,21,48,.08);
  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --f-math:"STIX Two Text","Times New Roman",Times,serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark;
  --paper:#131022; --sheet:#1C1830; --sheet2:#211C38; --grid:#241F3B; --grid2:#332D50; --axis:#6E6790;
  --ink:#EEEAF8; --ink2:#BEB7D8; --ink3:#9089AC; --hair:rgba(238,234,248,.13);
  --brand:#A28BF7; --brand-2:#C9B8FF; --brand-tint:#2A2348; --on-brand:#160F33;
  --m1:#C9B8FF; --m2:#B39DFB; --m3:#A28BF7; --m4:#8266F0; --on-m1:#160F33; --on-m:#160F33;
  --c-parabola:#F06595; --c-line:#4DABF7; --c-circle:#FF8A4C; --c-vee:#3BC9DB; --c-other:#D4C200; --c-cut:#ADB5BD;
  --c-region:rgba(250,176,5,.28); --c-region-light:rgba(250,176,5,.14); --c-region-edge:#F2C14E; --c-grey:rgba(173,181,189,.16); --c-piece:#D4A77A;
  --c-meet:#EEEAF8; --c-k:#F06595; --c-right:#38D9A9; --c-right-soft:#12302A; --c-wrong:#FF6B6B; --c-wrong-soft:#361A20;
  --accent:rgba(255,214,10,.30); --accent-line:#F5C400; --shadow:0 8px 24px rgba(0,0,0,.4); } }
:root[data-theme="dark"]{ color-scheme:dark;
  --paper:#131022; --sheet:#1C1830; --sheet2:#211C38; --grid:#241F3B; --grid2:#332D50; --axis:#6E6790;
  --ink:#EEEAF8; --ink2:#BEB7D8; --ink3:#9089AC; --hair:rgba(238,234,248,.13);
  --brand:#A28BF7; --brand-2:#C9B8FF; --brand-tint:#2A2348; --on-brand:#160F33;
  --m1:#C9B8FF; --m2:#B39DFB; --m3:#A28BF7; --m4:#8266F0; --on-m1:#160F33; --on-m:#160F33;
  --c-parabola:#F06595; --c-line:#4DABF7; --c-circle:#FF8A4C; --c-vee:#3BC9DB; --c-other:#D4C200; --c-cut:#ADB5BD;
  --c-region:rgba(250,176,5,.28); --c-region-light:rgba(250,176,5,.14); --c-region-edge:#F2C14E; --c-grey:rgba(173,181,189,.16); --c-piece:#D4A77A;
  --c-meet:#EEEAF8; --c-k:#F06595; --c-right:#38D9A9; --c-right-soft:#12302A; --c-wrong:#FF6B6B; --c-wrong-soft:#361A20;
  --accent:rgba(255,214,10,.30); --accent-line:#F5C400; --shadow:0 8px 24px rgba(0,0,0,.4); }

[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);-webkit-tap-highlight-color:transparent;overflow:hidden}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.m{font-family:var(--f-math);font-weight:400;font-size:1.08em;white-space:nowrap}
.m i{font-style:italic}
.qt{font-family:var(--f-math)}
mark.chg{background:linear-gradient(transparent 12%,var(--accent) 12%,var(--accent) 88%,transparent 88%);color:inherit;border-bottom:2px solid var(--accent-line);padding:0 1px}
sup{line-height:0}
#app{height:100%;max-width:560px;margin:0 auto;position:relative;overflow:hidden;background:var(--paper)}
.view{position:absolute;inset:0;display:flex;flex-direction:column}
.view[hidden]{display:none!important}
.loading{position:absolute;inset:0;display:grid;place-items:center;font:700 15px var(--f-body);color:var(--ink3)}

/* ---------------- map ---------------- */
#mapView{overflow-y:auto;overscroll-behavior:contain;padding-inline:16px;padding-block:14px 28px;gap:14px}
.mhead{display:flex;flex-direction:column;gap:6px}
.eyebrow{font:800 11.5px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.mhead h1{margin:0;font:800 clamp(28px,8.4vw,38px)/1.04 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.mhead p{margin:0;font:600 15.5px/1.5 var(--f-body);color:var(--ink2);max-width:40ch}
.mstats{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pillx{font:700 12.5px var(--f-body);padding:6px 10px;border-radius:999px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.legend{display:flex;flex-wrap:wrap;gap:10px 14px;font:600 12.5px var(--f-body);color:var(--ink3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lg{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--brand)}
.lg.sq{border-radius:4px}
.lg.w{background:linear-gradient(90deg,var(--brand) 50%,transparent 50%)}
.lg.s{background:var(--brand)}
.lg.t{width:9px;height:9px;box-shadow:inset 0 0 0 2px var(--ink3)}
.sit{border-radius:20px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);padding:14px 14px 10px;display:flex;flex-direction:column;gap:10px}
.sit-h{display:flex;align-items:flex-start;gap:10px}
.sit-h .sit-t{flex:1 1 auto;min-width:0}
.sit-h b{display:block;font:800 18px/1.2 var(--f-display)}
.sit-h small{display:block;font:600 13px var(--f-body);color:var(--ink3);margin-top:2px}
.sit-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{min-height:44px;padding:0 16px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 15px var(--f-display);background:var(--brand);color:var(--on-brand)}
.btn.ghost{background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.soft{background:var(--brand-tint);color:var(--brand-2)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.route{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.stn{position:relative;display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;padding-block:6px}
.stn::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:3px;background:var(--grid2);border-radius:2px}
.stn:first-child::before{top:22px}
.stn:last-child::before{bottom:calc(100% - 22px)}
.stn.lit::before{background:var(--mc,var(--brand))}
.dot{position:relative;z-index:1;width:30px;height:30px;margin:4px 5px 0;border-radius:50%;display:grid;place-items:center;background:var(--sheet);box-shadow:inset 0 0 0 3px var(--mc,var(--brand));font:800 12px var(--f-display);color:var(--ink2)}
.dot.sq{border-radius:8px}
.dot.round{border-radius:9px;transform:rotate(45deg)}
.dot.round>*{transform:rotate(-45deg)}
.dot.watched{background:linear-gradient(90deg,var(--mc) 50%,var(--sheet) 50%)}
.dot.solved{background:var(--mc);color:var(--on-m)}
.dot.solved.m1{color:var(--on-m1)}
.stn-b{min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 0 4px}
.stn-b .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stn-b button.open{font:800 15.5px/1.25 var(--f-display);text-align:left;color:var(--ink);padding:2px 0;min-height:32px}
.stn-b .chg{font:600 13.5px/1.4 var(--f-body);color:var(--ink2)}
.tag{font:800 10.5px var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--paper);color:var(--ink3);box-shadow:inset 0 0 0 1px var(--hair);white-space:nowrap}
.tag.st-s{background:var(--c-right-soft);color:var(--c-right);box-shadow:none}
.tag.st-w{background:var(--brand-tint);color:var(--brand-2);box-shadow:none}
.tag.here{background:var(--brand);color:var(--on-brand);box-shadow:none}
.twigs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;padding-left:10px;border-left:2px dashed var(--grid2)}
.twig{min-height:32px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--f-body);background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink2)}
.twig i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--mc,var(--ink3))}
.twig.solved i{background:var(--mc)}
.mhdr{display:flex;flex-direction:column;gap:4px;padding:8px 10px;margin:4px 0 2px 44px;border-radius:12px;background:var(--sheet2);box-shadow:inset 0 0 0 1px var(--hair)}
.mhdr b{font:800 14px var(--f-display);color:var(--mc)}
.mhdr span{font:600 13px/1.4 var(--f-body);color:var(--ink2)}
.mlinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mlinks button{font:700 12px var(--f-body);color:var(--brand-2);background:var(--brand-tint);padding:6px 9px;border-radius:8px;min-height:30px}
.xing{margin:2px 0 2px 44px;font:700 12.5px var(--f-body);color:var(--ink3);display:flex;align-items:center;gap:6px}
.xing::before{content:"";width:18px;height:2px;background:var(--brand)}
.mfoot{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mfoot .st{font:600 12.5px var(--f-body);color:var(--ink3)}
.linkbtn{font:700 13.5px var(--f-body);color:var(--brand-2);text-decoration:underline;text-underline-offset:3px;min-height:36px}

/* ---------------- lesson ---------------- */
#playView{padding-inline:16px}
.top{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding-block:8px 6px}
.row{display:flex;align-items:center;gap:8px}
.where{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.where .k{font:700 12px/1.2 var(--f-display);color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.where .t{font:800 15px/1.25 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtn{flex:0 0 auto;height:42px;min-width:44px;padding:0 10px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);font:700 13px var(--f-display)}
.tbtn svg{width:20px;height:20px;flex:0 0 auto}
.tbtn .off{display:none} .tbtn[aria-pressed="false"] .on{display:none} .tbtn[aria-pressed="false"] .off{display:block}
.tbtn.watchon{background:var(--brand);color:var(--on-brand);box-shadow:none}
.mstrip{display:flex;gap:4px;align-items:center}
.mstrip span{flex:1 1 0;min-width:0;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font:800 11px var(--f-display);color:var(--ink3);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);white-space:nowrap;overflow:hidden}
.mstrip span.lit{background:var(--mc);color:var(--on-m);box-shadow:none}
.mstrip span.lit.m1{color:var(--on-m1)}
.mstrip span.now{outline:2px solid var(--mc);outline-offset:1px}
.prog{display:flex;gap:3px}
.prog i{flex:1 1 0;height:4px;border-radius:3px;background:var(--grid2)}
.prog i.done{background:var(--brand)} .prog i.now{background:linear-gradient(90deg,var(--brand) 45%,var(--grid2) 45%)}
.lockline{display:none;align-items:center;gap:8px;font:700 12.5px var(--f-body);color:var(--ink2)}
.lockline svg{width:15px;height:15px;color:var(--brand);flex:0 0 auto}
.watching .lockline{display:flex}

.stage{flex:0 0 auto;height:clamp(196px,33vh,320px);position:relative;border-radius:18px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden;touch-action:manipulation}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene{position:absolute;inset:0;overflow:hidden;background:var(--sheet);display:flex;flex-direction:column;padding:10px;gap:8px}
.scene[hidden]{display:none}
.hint{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:700 12px var(--f-body);pointer-events:none;z-index:3}

.cap{flex:0 0 auto;display:flex;gap:10px;align-items:flex-start;padding-block:9px 7px;min-height:62px}
.cap p{margin:0;font:700 16.5px/1.38 var(--f-body);text-wrap:pretty}
.spk{flex:0 0 auto;display:inline-flex;gap:2px;align-items:center;height:22px;margin-top:1px}
.spk i{display:block;width:3px;height:6px;border-radius:2px;background:var(--brand)}
.speaking .spk i{animation:vb .9s ease-in-out infinite}
.spk i:nth-child(2){animation-delay:.15s!important} .spk i:nth-child(3){animation-delay:.3s!important}
@keyframes vb{0%,100%{height:5px}50%{height:19px}}

.sheet{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-block:10px 16px;border-top:1px solid var(--hair);overscroll-behavior:contain}
.qcard{background:var(--sheet);border-radius:16px;padding:12px 13px;box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:8px}
.qtag{align-self:flex-start;font:800 10.5px var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--ink);color:var(--sheet)}
.qtag.pr{background:var(--brand-tint);color:var(--brand-2)}
.qtext{margin:0;font:400 17.5px/1.45 var(--f-math)}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font:400 16.5px var(--f-math)}
.qopts span{padding:2px 4px;border-radius:6px}
.qopts b{font-weight:600;color:var(--ink3);margin-right:4px}
.qopts span.ok{background:var(--c-right-soft);color:var(--c-right);font-weight:600}
.qopts span.ok::after{content:" ✓"}
.steps{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.steps[hidden]{display:none}
.steps b{font:800 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-right:2px}
.steps span{font:700 12px var(--f-body);padding:4px 8px;border-radius:8px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink2)}
.steps span.lit{background:var(--brand-tint);color:var(--brand-2);box-shadow:inset 0 0 0 1.5px var(--brand)}
.board{display:flex;flex-direction:column;gap:6px}
.board:empty{display:none}
.bl{font:400 19px/1.35 var(--f-math);animation:rise .4s cubic-bezier(.2,.8,.2,1) both;overflow-x:auto}
.bl .m{font-size:1em;white-space:normal}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

.task{border-radius:18px;padding:13px;background:var(--sheet);box-shadow:inset 0 0 0 2px var(--brand),var(--shadow);display:flex;flex-direction:column;gap:11px}
.task:empty{display:none}
.task.wait{box-shadow:inset 0 0 0 1px var(--hair)}
.task.solved{box-shadow:inset 0 0 0 2px var(--c-right),var(--shadow)}
.tt{display:flex;align-items:center;gap:8px;font:800 11.5px var(--f-display);letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.solved .tt{color:var(--c-right)}
.tt .dot2{width:8px;height:8px;border-radius:50%;background:currentColor}
.showme{margin-left:auto;min-height:36px;padding:0 12px;border-radius:10px;background:var(--brand-tint);color:var(--brand-2);font:800 13px var(--f-display);letter-spacing:0;text-transform:none}
.q{margin:0;font:700 16.5px/1.4 var(--f-body)}
.listen{display:flex;align-items:center;gap:10px;font:700 14px var(--f-body);color:var(--ink2)}
.listen .spk i{animation:vb .9s ease-in-out infinite}
.skip{margin-left:auto;font:800 14px var(--f-display);color:var(--brand);padding:0 4px;min-height:44px;white-space:nowrap}
.opts{display:flex;flex-direction:column;gap:8px}
.opts.grid{display:grid;grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:10px;text-align:left;width:100%;min-height:50px;padding:9px 12px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair);font:700 16px/1.3 var(--f-body);transition:transform .12s}
.opt:active{transform:scale(.98)}
.opt .l{flex:0 0 auto;min-width:30px;height:30px;padding:0 6px;border-radius:9px;display:grid;place-items:center;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);font:700 13px var(--f-display);color:var(--ink2)}
.opt .ot{min-width:0;overflow-wrap:anywhere}
.opt .sub{display:block;font:600 12.5px/1.35 var(--f-body);color:var(--ink3);margin-top:2px}
.opt.good{box-shadow:inset 0 0 0 2px var(--c-right);background:var(--c-right-soft)}
.opt.good::after{content:"✓";margin-left:auto;font:800 17px var(--f-body);color:var(--c-right)}
.opt.bad{box-shadow:inset 0 0 0 2px var(--c-wrong);background:var(--c-wrong-soft);animation:shake .4s}
.opt.bad::after{content:"✗";margin-left:auto;font:800 17px var(--f-body);color:var(--c-wrong)}
.opt.on{box-shadow:inset 0 0 0 2px var(--brand);background:var(--brand-tint)}
.opt:disabled{opacity:.5}
.opt.good:disabled,.opt.on:disabled{opacity:1}
.opt .tg{margin-left:auto;font:800 10px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.fb{font:600 15px/1.45 var(--f-body);color:var(--ink2)}
.fb:empty{display:none}
.fb.good{color:var(--c-right)} .fb.good::before{content:"✓ ";font-weight:800}
.fb.bad{color:var(--ink)} .fb.bad::before{content:attr(data-k) " · ";font-weight:800;color:var(--c-wrong)}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{min-height:44px;min-width:48px;padding:0 14px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink3);font:700 16px var(--f-body);touch-action:none;user-select:none;-webkit-user-select:none}
.tile.sel{box-shadow:inset 0 0 0 2.5px var(--brand);background:var(--brand-tint)}
.tile.used{visibility:hidden}
.tile.bad{animation:shake .4s;box-shadow:inset 0 0 0 2px var(--c-wrong)}
.ghostTile{position:fixed;z-index:60;pointer-events:none;opacity:.92;transform:translate(-50%,-60%)}
.slots{display:flex;flex-direction:column;gap:8px}
.slots.inline{flex-direction:row;flex-wrap:wrap;align-items:center;font:400 20px var(--f-math);gap:8px}
.slotrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slotrow .lab{min-width:5.6em;font:700 14px var(--f-body);color:var(--ink2)}
.slot{min-height:44px;min-width:64px;padding:4px 10px;border-radius:12px;border:2px dashed var(--grid2);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font:700 15px var(--f-body);color:var(--ink3);background:var(--sheet)}
.slot .sl{font:400 19px var(--f-math);color:var(--ink)}
.slot .sv{font:700 12.5px var(--f-body);color:var(--brand-2)}
.slot.hot{border-color:var(--brand);background:var(--brand-tint)}
.slot.ok{border-style:solid;border-color:var(--c-right);background:var(--c-right-soft);color:var(--c-right)}
.formula{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:400 22px var(--f-math)}
.slider{display:flex;flex-direction:column;gap:4px}
.slider input{width:100%;accent-color:var(--brand);height:36px;margin:0}
.ticks{display:flex;justify-content:space-between;font:600 12.5px var(--f-body);color:var(--ink3);font-variant-numeric:tabular-nums;padding-inline:6px}
.ticks span.on{color:var(--brand);font-weight:800}
.readout{font:400 22px var(--f-math);color:var(--brand-2)}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.keypad button{min-height:48px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair);font:700 19px var(--f-body);font-variant-numeric:tabular-nums}
.keypad button.go{background:var(--brand);color:var(--on-brand);box-shadow:none;font:800 16px var(--f-display)}
.entry{min-height:52px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--brand);display:flex;align-items:center;padding:0 14px;font:400 26px var(--f-math);font-variant-numeric:tabular-nums}
.entry .ph{font:600 15px var(--f-body);color:var(--ink3)}
.entry.bad{box-shadow:inset 0 0 0 2px var(--c-wrong);animation:shake .4s}
.entry.good{box-shadow:inset 0 0 0 2px var(--c-right);background:var(--c-right-soft)}
.invite{display:flex;gap:8px}
.invite button{flex:1 1 0;min-height:46px;border-radius:13px;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--ink);font:800 15px var(--f-display)}
.invite button.on{background:var(--brand);color:var(--on-brand);box-shadow:none}
.done-card{border-radius:18px;padding:16px;background:var(--brand-tint);display:flex;flex-direction:column;gap:10px}
.done-card b{font:800 20px var(--f-display);color:var(--brand-2)}
.done-card p{margin:0;font:600 15px/1.45 var(--f-body);color:var(--ink2)}

.bar{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding-block:8px 12px}
.ib{flex:0 0 auto;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair)}
.ib svg{width:22px;height:22px}
.ib:disabled{opacity:.35}
.next{flex:1 1 auto;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:var(--on-brand);font:800 16.5px var(--f-display)}
.next svg{width:18px;height:18px}
.next:disabled{background:var(--grid);color:var(--ink3);font-size:14.5px}
.next.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.04)}}
.skipb{flex:0 0 auto;height:50px;padding:0 16px;border-radius:16px;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--ink);font:800 15px var(--f-display)}
.watching .bar .ib,.watching .showme,.watching .skip{display:none!important}
.watching .task{pointer-events:none}
.watching .task.allow,.watching .allow{pointer-events:auto}

/* scenes */
.sc-title{font:800 12px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.sc-card{background:var(--sheet2);border-radius:14px;box-shadow:inset 0 0 0 1px var(--hair);padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-height:0}
.sc-card .qtext{font-size:16px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:100%;min-height:0}
.cmp .sc-card{overflow:hidden;padding:8px}
.cmp .thumb{position:relative;flex:0 0 auto;height:44%;min-height:70px;border-radius:10px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair)}
.cmp .thumb canvas{position:absolute;inset:0;width:100%;height:100%}
.cmp .qtext{font-size:13.5px;line-height:1.38;overflow-y:auto;min-height:0}
.cmp .hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:800 10.5px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.cmp .right{box-shadow:inset 0 0 0 2px var(--accent-line)}
.years{display:flex;align-items:flex-end;gap:6px;height:100%;padding-top:6px}
.years .yc{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.years .bar1{width:70%;border-radius:6px 6px 2px 2px;background:var(--brand);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.years b{font:800 13px var(--f-body);font-variant-numeric:tabular-nums}
.years span{font:600 11.5px var(--f-body);color:var(--ink3);transition:color .3s}
.years.all span{color:var(--brand-2);font-weight:800}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:100%}
.mcard{position:relative;border-radius:12px;background:var(--sheet2);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden;opacity:.35;transition:opacity .4s}
.mcard.on{opacity:1;box-shadow:inset 0 0 0 2px var(--mc)}
.mcard canvas{position:absolute;inset:0;width:100%;height:100%}
.mcard b{position:absolute;left:8px;top:6px;z-index:1;font:800 12px var(--f-display);color:var(--mc)}
.mcard .opt4{position:absolute;right:6px;top:6px;z-index:1}
.flow{position:relative;flex:1 1 auto;display:grid;place-items:center}
.flow .fc{width:100%;max-width:420px}
.flow .fc .qtext{font-size:17px}
.fstrip{display:flex;gap:4px}
.fstrip span{flex:1 1 0;height:8px;border-radius:4px;background:var(--grid2);transition:background .2s}
.fstrip span.on{background:var(--brand)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 1 auto}
.chipq{display:inline-block;padding:2px 6px;border-radius:7px}
.chipq.hl{background:var(--accent);box-shadow:inset 0 -2px 0 var(--accent-line)}
.scatter{position:relative;flex:1 1 auto}
.scatter .mini{position:absolute;width:30%;padding:6px 8px;border-radius:10px;background:var(--sheet2);box-shadow:inset 0 0 0 1px var(--hair),var(--shadow);font:400 11px/1.3 var(--f-math);transition:transform .9s cubic-bezier(.2,.8,.2,1),left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1)}
.scatter .mini.p{font-family:var(--f-body);font-weight:700;color:var(--brand-2)}
.scatter.chain .mini{transform:rotate(0)!important}
.yq{flex:1 1 auto;display:grid;place-items:center}
.yq .sc-card{min-width:70%;align-items:center}
.yq .big{font:400 26px var(--f-math)}
.yq .swap{display:inline-block;transition:transform .4s}
.mapmini{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 1 auto}
.mapmini .col{border-radius:12px;background:var(--sheet2);box-shadow:inset 0 0 0 1px var(--hair);padding:8px;display:flex;flex-direction:column;gap:6px}
.mapmini .col b{font:800 12.5px var(--f-display)}
.mapmini .dots{display:flex;flex-wrap:wrap;gap:5px}
.mapmini .dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--mc)}
.mapmini .dots i.sq{border-radius:4px}
.mapmini .dots i.f{background:var(--mc)}
.mapmini small{font:600 11.5px var(--f-body);color:var(--ink3)}
.shapes{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 1 auto}
.shapes .sh{position:relative;border-radius:12px;background:var(--sheet2);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.shapes .sh canvas{position:absolute;inset:0;width:100%;height:100%}
.shapes .sh b{position:absolute;left:8px;top:6px;z-index:1;font:700 11.5px var(--f-body);color:var(--ink2);background:var(--sheet2);padding:0 3px;border-radius:4px}
.shapes .sh .fm{position:absolute;right:8px;bottom:6px;z-index:1;font:400 14px var(--f-math);color:var(--brand-2);background:var(--sheet2);padding:0 3px;border-radius:4px}
.rcard{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;justify-content:center}
.rcard .sc-card{flex:0 0 auto}
.rcard .mini-graph{position:relative;flex:1 1 auto;min-height:90px;border-radius:12px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair)}
.rcard .mini-graph canvas{position:absolute;inset:0;width:100%;height:100%}

/* twists and panels */
#twistView{overflow-y:auto;padding-inline:16px;padding-block:12px 24px;gap:12px}
.panelh{display:flex;align-items:center;gap:10px}
.panelh h2{margin:0;font:800 21px/1.15 var(--f-display);flex:1 1 auto;text-wrap:balance}
.twc{border-radius:16px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);padding:12px;display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}
.twc .row1{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.twc .chg{font:700 15px/1.35 var(--f-body)}
.twc small{font:600 13px/1.4 var(--f-body);color:var(--ink3)}
.twc[disabled]{opacity:.55}
.hints{display:flex;flex-direction:column;gap:8px}
.hpanel{border-radius:12px;padding:10px 12px;background:var(--paper);display:flex;flex-direction:column;gap:4px;font:600 14.5px/1.45 var(--f-body);color:var(--ink2)}
.hpanel h4{margin:0;font:800 13.5px var(--f-display);color:var(--ink)}
.hpanel .wl{font:400 16px/1.4 var(--f-math);color:var(--ink)}
.ovl{position:absolute;inset:0;z-index:40;background:rgba(19,16,34,.45);display:flex;align-items:flex-end}
.ovl[hidden]{display:none}
.ovl .pnl{width:100%;max-height:88%;overflow-y:auto;background:var(--sheet);border-radius:22px 22px 0 0;padding:16px 16px 22px;display:flex;flex-direction:column;gap:10px}
.ovl textarea{width:100%;min-height:180px;border-radius:12px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:12px/1.4 ui-monospace,Menlo,monospace;padding:10px}
.toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-8px);opacity:0;pointer-events:none;z-index:55;padding:9px 14px;border-radius:999px;background:var(--ink);color:var(--sheet);font:700 13px var(--f-body);transition:opacity .25s,transform .25s;width:max-content;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.ghostfx{position:absolute;inset:0;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .bl,.opt.bad,.tile.bad,.entry.bad,.next.pop{animation:none}
  .speaking .spk i,.listen .spk i{animation:none;height:12px}
  .years .bar1,.scatter .mini,.mcard,.toast,.yq .swap{transition:none}
}
@media (max-height:680px){ .cap p{font-size:15.5px} .stage{height:clamp(180px,32vh,280px)} .qtext{font-size:16px} }

/* R3: the language switch, the Hinglish caption's maths line, the recommended branch choice */
.langsw{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.langsw span{font:800 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-right:2px}
.langsw button{min-height:36px;padding:0 14px;border-radius:999px;background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--hair);font:700 14px var(--f-body);color:var(--ink2)}
.langsw button.on{background:var(--brand);color:var(--on-brand);box-shadow:none}
.row .mstrip{flex:1 1 auto;min-width:0}
.langb{flex:0 0 auto;height:26px;min-width:40px;padding:0 8px;border-radius:8px;background:var(--brand-tint);color:var(--brand-2);font:800 12px var(--f-display);letter-spacing:.05em}
.capm{display:block;margin-top:3px;font:400 16px/1.35 var(--f-math);color:var(--ink2)}
.capm .m{white-space:normal}
.fb .capm{font-size:15px}
.opt.rec{background:var(--brand);color:var(--on-brand);box-shadow:none;font-weight:800}
.opt.rec.on{box-shadow:inset 0 0 0 3px var(--brand-2)}
.opt.sec{background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--hair);font-weight:700;color:var(--ink2)}

/* ================= BUILD-R5: one focus at a time (STORYBOARD.md) ================= */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
#app{height:100%;height:100dvh}
#playView{padding-top:env(safe-area-inset-top)}
.top{gap:6px;padding-block:8px 8px}
.tbtn{height:40px;border-radius:12px}
.mstrip span{height:20px;font-size:10.5px;border-radius:6px}
.langb{height:24px}
.prog i{height:3px}
/* the theatre: stage, caption and sheet; the stage's size and place follow the state */
.theatre{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.stage{height:clamp(200px,40vh,340px);transition:height .42s var(--ease),opacity .28s ease,border-radius .3s ease}
#playView[data-st="q"] .stage{height:0;opacity:0;box-shadow:none}
#playView[data-st="graph"] .stage{height:clamp(200px,40vh,340px);height:clamp(200px,40dvh,340px)}
#playView.noq[data-st="graph"] .stage,#playView[data-st="scene"] .stage{height:clamp(230px,46vh,400px);height:clamp(230px,46dvh,400px)}
#playView[data-st="thumb"] .stage{position:absolute;top:8px;right:0;width:116px;height:88px;z-index:6;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hair),0 8px 22px rgba(27,21,48,.18)}
#playView[data-st="thumb"] .cap{padding-right:128px;min-height:104px}
#playView[data-st="thumb"] .cap p{font-size:16px}
#playView.noq[data-st="scene"] .stage{height:clamp(260px,54vh,470px);height:clamp(260px,54dvh,470px)}
#playView.snap .stage{transition:none!important}
.stbtn{position:absolute;z-index:4}
.stbtn.open{inset:0;width:100%;height:100%;border-radius:inherit;background:transparent}
.stbtn.open::after{content:"";position:absolute;right:5px;bottom:5px;width:18px;height:18px;border-radius:6px;background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236741D9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 1px 4px rgba(27,21,48,.2)}
.stbtn.shrink{bottom:8px;right:8px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--sheet);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--hair),0 2px 8px rgba(27,21,48,.08)}
.stbtn svg{width:18px;height:18px}
.hint{z-index:5}
/* the caption: what the voice says now */
.cap{padding-block:12px 10px;min-height:58px;transition:padding .3s ease}
.cap p{font-size:17px;line-height:1.4}
/* the sheet: question, steps rail, solution, your turn */
.sheet{gap:12px;padding-block:12px 18px}
#playView .qcard{transition:padding .25s ease}
#playView[data-st="q"] .qcard{padding:16px;gap:12px;box-shadow:inset 0 0 0 1px var(--hair),var(--shadow)}
#playView[data-st="q"] .qcard .qtext{font-size:19.5px;line-height:1.5}
#playView[data-st="q"] .qcard .qopts{font-size:17.5px;gap:6px 14px}
#playView:not([data-st="q"]) .qcard:not(.open){padding:9px 12px;gap:4px;cursor:pointer}
#playView:not([data-st="q"]) .qcard:not(.open) .qtext{font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#playView:not([data-st="q"]) .qcard:not(.open) .qopts{display:none}
#playView:not([data-st="q"]) .qcard:not(.open) .qtag{font-size:9.5px;padding:3px 6px}
#playView[data-st="scene"] #qcard{display:none!important}
.qcard.noopts .qopts{display:none!important}
.qcard.open{box-shadow:inset 0 0 0 1.5px var(--c-right),var(--shadow)}
.cx{background:linear-gradient(var(--cc),var(--cc)) no-repeat 0 100%/0% 2px;transition:color .45s ease,background-size .55s var(--ease)}
.cx.on{color:var(--cc);background-size:100% 2px}
.qtext .cx.on{font-weight:600}
.pk{color:var(--c-k);font-weight:600}
.pw{color:var(--c-meet);font-weight:700}
.steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.steps::-webkit-scrollbar{display:none}
.steps b,.steps span{flex:0 0 auto;white-space:nowrap}
.board{gap:4px}
.bl{font-size:17px;color:var(--ink2);padding:3px 0 3px 11px;border-left:3px solid transparent;transition:font-size .3s ease,color .3s ease}
.bl.now{font-size:20.5px;color:var(--ink);border-left-color:var(--brand);animation:rise .36s var(--ease) both,nowfade 1.6s 1.2s forwards}
@keyframes nowfade{to{border-left-color:var(--grid2)}}
.bl.formula{font-size:23px;padding:10px 12px;border-radius:14px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair);border-left:0;animation:rise .36s var(--ease) both}
.bl.formula .pk,.bl.formula .pw,.bl.formula sup{display:inline-block}
.task{padding:14px;gap:12px}
.qopts span.land{animation:land 1.3s var(--ease)}
@keyframes land{0%{box-shadow:0 0 0 0 rgba(15,123,108,.55)}25%{transform:scale(1.1)}100%{box-shadow:0 0 0 14px rgba(15,123,108,0);transform:none}}
/* the bottom bar: Skip to my turn while the voice speaks; Next question when the question is done */
.bar{padding-block:8px calc(10px + env(safe-area-inset-bottom))}
.skipnow{flex:1 1 auto;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--brand-tint);color:var(--brand-2);font:800 16px var(--f-display)}
.skipnow svg{width:18px;height:18px}
.watching .skipnow{display:none}
/* the win: +4 flies onto the option, a burst from there */
#fxc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:55}
#qcard{position:relative}
.flyer{position:absolute;z-index:8;left:0;top:0;transform:translate(-50%,-50%);padding:6px 13px;border-radius:999px;background:var(--c-right);color:var(--sheet);font:800 21px var(--f-display);letter-spacing:.01em;box-shadow:0 8px 22px rgba(15,123,108,.35);pointer-events:none;white-space:nowrap}
/* Compare: the cards slide in from both sides; the one change is swept with the highlighter and glows twice */
.cmp .sc-card.left{animation:inL .36s var(--ease) both}
.cmp .sc-card.right{animation:inR .36s .12s var(--ease) both}
@keyframes inL{from{opacity:0;transform:translateX(-26px)}}
@keyframes inR{from{opacity:0;transform:translateX(26px)}}
.cmp mark.chg{background-repeat:no-repeat;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:hl .65s .5s var(--ease) forwards,glowc 1.2s 1.2s 2}
@keyframes hl{to{background-size:100% 100%}}
@keyframes glowc{50%{box-shadow:0 0 0 2px var(--accent),0 0 16px 3px var(--accent-line)}}
.scene{padding:12px;gap:10px}
.scene>*{animation:sceneIn .32s var(--ease) both}
@keyframes sceneIn{from{opacity:0;transform:translateY(10px)}}
/* map: spacing and the Install button */
#mapView{padding:calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));gap:16px}
.mhead{gap:10px}
.mhead h1{font-size:clamp(30px,8.6vw,38px)}
.mhead p{font-size:15px}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn.install{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;justify-content:start;text-align:left;min-height:58px;padding:9px 16px;border-radius:16px;box-shadow:0 8px 20px rgba(103,65,217,.28)}
.btn.install svg{grid-row:1/3;width:24px;height:24px}
.btn.install span{font:800 16px/1.2 var(--f-display)}
.btn.install small{font:600 12.5px/1.3 var(--f-body);opacity:.88}
.legend{gap:8px 14px}
.sit{padding:16px 14px 12px;gap:12px}
.ovl .pnl{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.isteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.isteps li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--paper);font:600 15px/1.4 var(--f-body);color:var(--ink)}
.isteps .ico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-2);font:800 18px var(--f-display)}
.isteps .ico svg{width:22px;height:22px}
.isteps b{color:var(--brand-2);margin-right:2px}
.inote{margin:0;font:600 13px/1.45 var(--f-body);color:var(--ink3)}
@media (max-height:700px){
  #playView[data-st="graph"] .stage{height:clamp(180px,36vh,280px)}
  #playView[data-st="q"] .qcard .qtext{font-size:18px}
  .bl.now{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  .stage,.cx,.bl,#playView .qcard{transition:none}
  .bl.now,.bl.formula,.cmp .sc-card.left,.cmp .sc-card.right,.scene>*,.qopts span.land{animation:none}
  .bl.now{border-left-color:var(--brand)}
  .cmp mark.chg{animation:none;background-size:100% 100%}
}
/* R7: the install sheet's old-app note and the diagnostic line; the button while installing */
.iold{margin:0;padding:10px 12px;border-radius:12px;background:var(--paper);box-shadow:inset 3px 0 0 var(--accent-line);font:700 14px/1.45 var(--f-body);color:var(--ink)}
.idiag{margin:0;font:500 11px/1.45 ui-monospace,Menlo,monospace;color:var(--ink3);overflow-wrap:anywhere}
.btn.install:disabled{opacity:.72;cursor:progress}
/* R9: the keep-awake fallback video (muted, looping, 1 px, never seen) */
.keepawake{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:.01;pointer-events:none;z-index:-1}