:root{
  --ground:#FBFAF8; --ink:#1C1917; --muted:#57534E; --line:#E6E2DA; --band:#F3F1EC; --card:#FFFFFF;
  --mark:#E4572E; --mark-text:#B8431F; --moss:#5E8E33; --moss-bg:#EEF4E6;
  --action:#C4461F; --action-hover:#A93B19; --action-ink:#B8431F; --action-on:#FFFFFF;
  --sky:#EEF2F4; --soil:#E9DFCF; --layers:#DCCDB4; --deep:#E8C9B5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#151311; --ink:#F2EFEA; --muted:#B5AEA5; --line:#38332E; --band:#1E1B18; --card:#1E1B18;
    --mark:#F06B44; --mark-text:#F38A69; --moss:#8DBB5E; --moss-bg:#1F2A17;
    --action:#F06B44; --action-hover:#F38A69; --action-ink:#F38A69; --action-on:#160E0A;
    --sky:#1F262A; --soil:#3A322A; --layers:#4A3F33; --deep:#4F3426;
  }
}
:root[data-theme="dark"]{
  --ground:#151311; --ink:#F2EFEA; --muted:#B5AEA5; --line:#38332E; --band:#1E1B18; --card:#1E1B18;
  --mark:#F06B44; --mark-text:#F38A69; --moss:#8DBB5E; --moss-bg:#1F2A17;
  --action:#F06B44; --action-hover:#F38A69; --action-ink:#F38A69; --action-on:#160E0A;
  --sky:#1F262A; --soil:#3A322A; --layers:#4A3F33; --deep:#4F3426;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:720px;margin:0 auto}
.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 8px}
.steps{display:flex;gap:5px;flex:1;min-width:120px;max-width:320px}
.steps i{flex:1;height:5px;border-radius:3px;background:var(--line);display:block}
.steps i.done{background:var(--ink)}
.steps i.on{background:var(--mark)}
#hudr{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.hudlabel{font-weight:600;color:var(--ink)}
.order{font-size:12px;color:var(--muted);padding:6px 16px 0}.order:empty{display:none}.order a{color:var(--muted)}.order a.on{color:var(--ink);font-weight:700;text-decoration:none}
.icon{font:inherit;font-size:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 16px;overflow:auto}
.stage.enter{animation:in .18s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dock{padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--ground)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.row .left,.row .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row .right{margin-left:auto}
.center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:12px 0}
h2{font-size:22px;line-height:1.25;font-weight:700;margin:0}
h2.huge{font-size:34px;display:flex;align-items:center;gap:10px}h2.huge .ic{width:34px;height:34px;color:var(--mark)}
.kicker{font-size:14px;color:var(--muted);font-weight:600}
.lead{font-size:18px;margin:0}
.sub{color:var(--muted);font-size:15px;margin:0}
.idea{font-size:17px;margin:4px 0 0;padding:12px 14px;background:var(--band);border-radius:12px}
.tick{color:var(--moss)}
.bigtick{font-size:56px;color:var(--moss);font-weight:700;line-height:1}
.plate{width:100%;max-height:42vh;object-fit:cover;border-radius:14px;border:1px solid var(--line);display:block}
.bubble{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:17px}
.bubble.big{font-size:20px;padding:20px}
.bubble .who{font-size:14px;color:var(--muted);font-weight:600}
.tag{color:var(--mark-text);font-weight:600}
.play{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--band);color:var(--ink);font-size:16px;cursor:pointer}
.pair{display:flex;align-items:center;gap:14px}
.pair .arrow{font-size:28px;color:var(--muted)}
.pairnames{display:flex;gap:40px;font-size:14px;color:var(--muted)}
.pairnames span{width:84px}
.goal{display:flex;align-items:center;gap:10px;padding:4px 0 8px}
.gtext{display:flex;flex-direction:column;line-height:1.3;flex:1}
.gtext b{font-size:17px}.gtext span{font-size:14px;color:var(--muted)}
.count{font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap}
.boardwrap{flex:1;min-height:220px;position:relative;display:flex;justify-content:center;align-items:stretch}
.board,.map{width:100%;height:100%;display:block}
.board{overflow:visible;touch-action:manipulation}
.boardwrap{border-radius:14px;border:1px solid var(--line);overflow:hidden}
.map-wrap{background:var(--card)}
.toast{position:absolute;top:10px;left:10px;right:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:16px;line-height:1.4}
.toast.bad{color:var(--mark-text);border-color:var(--mark)}
.peek{min-height:8px;padding:6px 0}
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mv{position:relative;font:inherit;font-size:16px;font-weight:600;color:var(--ink);background:var(--band);border:1px solid var(--line);border-radius:14px;padding:12px 6px;min-height:58px;cursor:pointer}
.mv:hover{border-color:var(--ink)}
.mv:disabled{opacity:.45;cursor:default}
.mv.new::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--mark)}
.btn{font:inherit;font-size:16px;font-weight:600;border-radius:999px;padding:13px 22px;min-height:48px;cursor:pointer;border:1.5px solid var(--action);background:transparent;color:var(--action-ink)}
.btn.primary{background:var(--action);color:var(--action-on)}
.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn:disabled{opacity:.45;cursor:default}
.door{font:inherit;font-size:15px;background:none;border:0;color:var(--muted);padding:10px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.door.small{font-size:14px;padding:4px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:15px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:10px 16px;min-height:46px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.chip .ic{width:20px;height:20px;flex:none}
.chip:disabled{opacity:.45;cursor:default}
.chips.big .chip{font-size:16px;min-height:52px}
.bank{justify-content:center}
.lab{font-size:15px;color:var(--muted);margin-top:6px}
.route{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.route .m{background:var(--band);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:15px}.route .ar{color:var(--muted)}
.rung{background:var(--band);border-radius:10px;padding:10px 12px;margin:6px 0;font-size:16px}
.dots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dot{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.dot.now{border-color:var(--ink);color:var(--ink);font-weight:700}
.dot.ok{background:var(--moss-bg);border-color:var(--moss);color:var(--moss);font-weight:700}
.dot.bad{border-color:var(--mark);color:var(--mark-text);font-weight:700}
.rlist{display:grid;gap:6px}
.rrow{font:inherit;font-size:15px;text-align:left;display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);cursor:pointer;min-height:44px}
.rrow .mark{font-weight:700;width:18px}.rrow.ok .mark{color:var(--moss)}.rrow.bad .mark{color:var(--mark-text)}
.rrow em{display:block;font-style:normal;color:var(--mark-text);font-size:14px}
.lanecap{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:15px;padding:8px 0 0}
.lanecap div{background:var(--band);border-radius:10px;padding:8px 10px}
.explain{background:var(--card);border:1.5px solid var(--mark);border-radius:14px;padding:12px 14px;margin:8px 0;font-size:16px}
.explain p{margin:0 0 6px}.explain .why{margin:0;padding-top:6px;border-top:1px solid var(--line);color:var(--ink);font-weight:600}
.speed{display:flex;gap:6px}.speed .chip{min-height:40px;padding:6px 12px;font-size:14px}
.rcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
.rcard p{margin:6px 0 0;font-size:15px}.rcard.ok p{color:var(--moss)}
button.dot{cursor:pointer;font:inherit;font-size:14px;background:var(--card)}
.ib{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.ib .ic{width:26px;height:26px}
.ib.primary{background:var(--action);border-color:var(--action);color:var(--action-on)}
.ib.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
.ib.outline{border-color:var(--action);color:var(--action-ink)}
.ib.quiet{border-color:var(--line);color:var(--muted)}
.ib.small{width:44px;height:44px}.ib.small .ic{width:22px;height:22px}
.ib:disabled{opacity:.4;cursor:default}
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--ground);font:600 13px/1.2 Inter,system-ui,sans-serif;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
[data-tip]:hover::after,[data-tip]:focus-visible::after,[data-tip].tip-on::after{opacity:1}
/* a button that shows its words needs no tooltip saying them again above it (Emily 10-19: 'Skip the video, go on' appeared twice) */
.ib.lab[data-tip]::after{display:none}
.row .right [data-tip]:last-child::after{left:auto;right:0;transform:none}
.row .left [data-tip]:first-child::after{left:0;transform:none}
.mv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mv .ic{width:24px;height:24px}
.moves.icononly .mvl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.moves.icononly .mv{min-height:64px}.moves.icononly .mv .ic{width:30px;height:30px}
.moves:not(.icononly) .mv[data-tip]::after{display:none}
.sheet-top{display:flex;justify-content:flex-end;margin-bottom:4px}
.scene-wrap{position:relative;width:100%}
.mscene{width:100%;height:auto;max-height:46vh;display:block;border-radius:14px;border:1px solid var(--line);cursor:pointer;overflow:hidden}
.scene-play{position:absolute;right:12px;bottom:12px}
.scene-names{font-size:15px;color:var(--muted);font-weight:600}
.mscene g,.mscene path,.mscene rect{transform-box:fill-box;transform-origin:center}
.mscene .a-in{opacity:0}
.mscene .bump{transform-origin:bottom;transform:scaleY(0)}
.mscene .crack{stroke-dasharray:70;stroke-dashoffset:70}
.mscene .r{opacity:0}
.mscene .a-layers{transform:translateY(-60px)}
.mscene .glow{opacity:0}.mscene .glow.cool{opacity:.35}
.go .a-up{animation:up 1.8s ease-in-out forwards}@keyframes up{to{transform:translateY(-112px)}}
.go .bump{animation:bump 1.8s ease-out forwards}@keyframes bump{to{transform:scaleY(1)}}
.go .r{animation:rain .6s linear 3 forwards}@keyframes rain{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(46px)}}
.go .crack{animation:draw .5s 1s forwards}@keyframes draw{to{stroke-dashoffset:0}}
.go .a-out{animation:fout .6s 1.7s forwards}@keyframes fout{to{opacity:0;transform:scale(.9)}}
.go .a-in{animation:fin .6s 1.7s forwards}@keyframes fin{to{opacity:1}}
.go .a-layers{animation:layers 1.4s ease-out forwards}@keyframes layers{to{transform:translateY(50px)}}
.go .a-sink{animation:sink 1.4s ease-out forwards}@keyframes sink{to{transform:translateY(54px)}}
.go .a-pl{animation:pl 1.2s ease-in-out forwards}@keyframes pl{to{transform:translateX(26px)}}
.go .a-pr{animation:pr 1.2s ease-in-out forwards}@keyframes pr{to{transform:translateX(-26px)}}
.go .a-squeeze{animation:sq 1.2s .4s ease-in-out forwards}@keyframes sq{50%{transform:scaleX(.82)}100%{transform:scaleX(1)}}
.go .glow{animation:glow 1.6s forwards}@keyframes glow{to{opacity:.28}}
.go .glow.hot{animation:hot 1.6s forwards}@keyframes hot{to{opacity:.45}}
.go .glow.cool{animation:cool 1.8s forwards}@keyframes cool{to{opacity:0}}
.go .a-slump{animation:slump 1.6s .3s ease-in forwards}@keyframes slump{to{transform:scale(1.15,.82) translateY(6px)}}
@media (prefers-reduced-motion:reduce){.go *{animation-duration:.01s!important;animation-delay:0s!important}}
.vbox{width:min(100%, calc(46vh * 1.28));margin:0 auto}
.vbox .vid{width:100%;height:auto;max-height:none;display:block;background:transparent;border-radius:12px;aspect-ratio:1280/1000;cursor:pointer}
.vbar{display:flex;align-items:center;gap:6px;padding-top:6px}
.vscrub{flex:1;min-width:60px;accent-color:var(--action);height:28px}
.vtime{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vcap{min-height:48px;font-size:17px;line-height:1.6;padding:8px 2px 0}
.prow{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0}
.prow p{margin:2px 0 0}
#print{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body.printing .app, body.printing .sheet{display:none!important}
  body.printing .lvtab, body.printing .ltab, body.printing .ltdrawer, body.printing #ltink{display:none!important}   /* the side tabs stayed on printed pages (seen 10-22) */
  body.printing #print{display:block}
  body.printing{background:#fff;color:#1C1917}
  .page{break-after:page;font-size:12pt}
  .ph{display:flex;justify-content:space-between;border-bottom:1px solid #1C1917;padding-bottom:4mm;margin-bottom:6mm;font-size:13pt}
  .pf{margin-top:6mm;font-size:10pt;color:#57534E}
  .pboard{width:100%;max-height:210mm;border:1px solid #1C1917;overflow:hidden;display:block}
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
  .ccard{border:1px dashed #57534E;padding:4mm;display:flex;flex-direction:column;align-items:center;gap:2mm;text-align:center;min-height:52mm;justify-content:center}
  .ccard.mvc .ic{width:16mm;height:16mm}.ccard.mvc span{font-size:10pt}
  .ccard.rc{align-items:flex-start;text-align:left;min-height:40mm;font-size:13pt}
  .ptab{width:100%;border-collapse:collapse;margin:3mm 0}.ptab th,.ptab td{border:1px solid #A8A29E;padding:2.5mm;text-align:left;vertical-align:top}
  .ptab td.line{width:55%}
  .ptab.tight th,.ptab.tight td{padding:1.6mm 2.5mm;font-size:11pt}
  .prule{padding:3mm!important;margin-bottom:3mm!important}
  .prule{border:1px solid #A8A29E;padding:4mm;margin-bottom:4mm;display:grid;gap:3mm}
  .box{display:inline-block;width:4mm;height:4mm;border:1px solid #1C1917;vertical-align:middle}
  .pmap svg{width:100%;max-height:200mm}
  .psteps{padding-left:6mm}.psteps li{margin-bottom:4mm}
  .strip{border:1px solid #1C1917;margin-bottom:4mm;display:flex;align-items:flex-start;padding:2mm 4mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.navl,.navr{display:flex;gap:6px;align-items:center}
.hud2{display:flex;justify-content:flex-end;padding:0 16px 6px}
#hudr{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}
.hudl{display:flex;align-items:center;gap:8px}
.sumh{font-size:17px;margin:10px 0 2px}
.terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.term{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--card)}
.term p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.tic{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;color:var(--mark);flex:none}.tic .ic{width:30px;height:30px}
.parents{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--card)}
.parents summary{cursor:pointer;font-weight:600}
.sum-page{justify-content:flex-start}
.flipcard{font:inherit;text-align:left;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;width:100%}
.flipcard .q{font-size:19px;font-weight:600}
.flipcard .a{font-size:17px;padding:12px 14px;background:var(--moss-bg);border-radius:10px}
.flipcard .hint{font-size:14px;color:var(--muted)}
.vid{width:100%;max-height:55vh;border-radius:12px;background:#000;display:block}
.piece{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:var(--card)}
.piece .pn{font-weight:700;margin-bottom:4px}
.piece p{margin:0 0 6px}
.piece video{width:100%;border-radius:8px;display:block;background:#000}
.sheet{position:fixed;inset:0;background:rgba(28,25,23,.35);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet[hidden]{display:none}
.sheet-card{background:var(--ground);width:100%;max-width:720px;max-height:80vh;overflow:auto;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.sheet-card .row{margin-top:8px}
.blank{cursor:pointer}
.blank rect{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.blank text{fill:var(--ink)}
.blank.sel rect{stroke:var(--ink);stroke-width:2.5}
.blank.ok rect{stroke:var(--moss);fill:var(--moss-bg)}
.blank.ok text{fill:var(--moss);font-weight:700}
.blank.bad rect{stroke:var(--mark);stroke-dasharray:4 3}
.shake{animation:shake .32s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.rock{transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.drop{animation:fall .7s ease-in forwards}
@keyframes fall{from{transform:translateY(0);opacity:.9}to{transform:translateY(var(--fy));opacity:.9}}
@media (max-width:380px){ .moves{grid-template-columns:repeat(2,1fr)} h2.huge{font-size:28px} }
@media (prefers-reduced-motion:reduce){ .stage.enter{animation:none} .rock{transition:none} }


/* Wide screens (2026-10-08, Emily: "I like the proportions of this design" — the classic lesson): the classic canvas.
   The column is up to 1040px with the light ground around it; the screen sits on a white canvas (22px padding, 1004px wide at
   most), its buttons inside the canvas at the bottom. Pictures are shown whole at their own shape; boards and videos take the
   free height inside the canvas. Phones unchanged. */
@media (min-width: 960px){
  .app{max-width:1040px;padding:0 18px 18px;box-sizing:border-box}
  .sheet-card{max-width:880px}
  body{font-size:18px}
  .gtext b{font-size:22px}.gtext span{font-size:18px}
  .app .toast,.app .lead,.app .idea,.app .rrow,.app .rcard p,.app .frameline{font-size:19px}
  .app h2{font-size:28px}
  /* one white canvas: the stage and its buttons */
  .app .stage{background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;padding:22px 22px 8px}
  .app .dock{background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;padding:8px 22px 22px}
  .app .dock .row{justify-content:flex-start;gap:16px}.app .dock .right{margin-left:auto}
  .app .dock .right:has(.mvs,.moves){margin:0 auto}.app .dock .mvs{justify-content:center}.app .dock > .tray,.app .dock > .rlist{max-width:760px;margin:0 auto}
  /* boards fill the free height inside the canvas; the drawing keeps its shape (preserveAspectRatio meet) */
  .app .stage .boardwrap:not(.aw):not(.iw){flex:1 1 0!important;min-height:200px!important;height:auto!important;max-height:none!important;width:100%!important;max-width:100%!important;aspect-ratio:auto!important;margin:0 auto}
  .app .stage .boardwrap .board{width:100%;height:100%}
  .app .stage .boardwrap.aw,.app .stage .boardwrap.iw{width:min(100%, 760px)!important;max-height:none!important;height:auto!important;margin:0 auto}
  .app .scope .lens svg{width:auto;height:88%;max-width:90%}
  .app .stage .center:has(> .boardwrap, > .vbox){flex:1;min-height:0;justify-content:flex-start}
  .app .stage > .toast,.app .stage .center > .toast,.app .stage .goal ~ .toast{position:static;margin-top:8px}
  /* pictures whole, at their own shape (no cropping into a strip), as large as the canvas and the window allow */
  .app .stage img.plate{width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 470px);object-fit:contain;margin:0 auto}
  .app .stage svg.plate{max-height:calc(100dvh - 470px)}
  /* videos fill the free height too */
  .app .stage .center:has(> .vbox){gap:8px}
  .app .stage .center:has(> .vbox) > h2{font-size:24px;margin:0}
  .app .stage .center:has(> .vbox) > .lead,.app .stage .center:has(> .vbox) > .sub{font-size:16px;margin:0}
  .app .stage .center:has(> .vbox) > .idea{padding:8px 14px;margin:0}
  .app .stage .vbox{flex:1 1 0;min-height:200px;display:flex;flex-direction:column;width:100%}
  .app .stage .vbox .vid{flex:1 1 0;min-height:0;height:100%;width:100%;aspect-ratio:auto;object-fit:contain}
}

/* short wide windows (e.g. 1280×720): the same canvas, tighter spacing and headings so a screen still fits */
@media (min-width: 960px) and (max-height: 780px){
  .app .stage{padding:14px 18px 6px}.app .dock{padding:6px 18px 14px}
  .app h2{font-size:24px}.app h2.huge{font-size:28px}.app .lead,.app .idea,.app .toast,.app .rrow,.app .frameline{font-size:17px}
  .gtext b{font-size:19px}.gtext span{font-size:16px}
  .app .center{gap:8px;padding:6px 0}
  .app .pair svg,.app .pair img{max-height:20vh;width:auto}
  .app .scene-wrap{max-height:calc(100dvh - 440px);overflow:hidden}.app .scene-wrap svg{max-height:calc(100dvh - 440px);width:auto;max-width:100%;margin:0 auto;display:block}
}

/* the player in full screen: picture fills the screen, bar and caption stay below it */
.vbox:fullscreen{width:100%!important;height:100%;display:flex;flex-direction:column;background:#1C1917;padding:16px 24px;box-sizing:border-box}
/* the same look when the browser will not give full screen and the player fills the window instead (10-17) */
.vbox.vbig{position:fixed;inset:0;z-index:9999;width:100%!important;max-width:none;height:100%;margin:0;display:flex;flex-direction:column;background:#1C1917;padding:16px 24px;box-sizing:border-box;border-radius:0}
.vbox.vbig .vid{flex:1 1 0!important;min-height:0;height:100%!important;width:100%;object-fit:contain;aspect-ratio:auto!important;max-height:none!important}
.vbox.vbig .vbar .ib,.vbox.vbig .vspeed{color:#F2EFEA;background:transparent;border-color:#78716C}.vbox.vbig .vtime,.vbox.vbig .vcap{color:#F2EFEA}
.vbox:fullscreen .vid{flex:1 1 0;min-height:0;height:100%;width:100%;object-fit:contain;aspect-ratio:auto;max-height:none}
.vbox:fullscreen .vbar .ib{color:#F2EFEA;background:transparent;border-color:#78716C}.vbox:fullscreen .vtime,.vbox:fullscreen .vcap{color:#F2EFEA}
.vbox:-webkit-full-screen{width:100%!important;height:100%;display:flex;flex-direction:column;background:#1C1917;padding:16px 24px;box-sizing:border-box}
.vbox:-webkit-full-screen .vid{flex:1 1 0;min-height:0;width:100%;object-fit:contain;aspect-ratio:auto}

/* side terms: a quiet dotted underline, tap for the sheet */
.sterm{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;border-bottom:1.5px dotted var(--mark-text);cursor:help;line-height:inherit;display:inline}
.sterm:hover,.sterm:focus-visible{color:var(--mark-text);outline:none}
.mk{font:inherit;font-size:15px;font-weight:600;color:var(--action-ink,#B8431F);background:var(--card);border:1.5px solid var(--action,#C4461F);border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.ib-link{font-weight:600;color:var(--action-ink,#B8431F);white-space:nowrap;text-decoration:none}

/* ---------- text system (2026-10-08, Emily: the classic lesson as reference — "use background canvas to differentiate texts that
   have different functions ... different sizes to signal the priorities"). Measured from lesson-engine.html: speech on the light
   band with a thin border, the speaker small, bold and green; notes on the same band; captions small and grey; headings ~1.35× body. */
:root{ --who:#20655C; --speech:#F5F3EF; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --who:#7CC4B8; --speech:#24211E; } }
:root[data-theme="dark"]{ --who:#7CC4B8; --speech:#24211E; }
/* speech: Rafi, Maya, Theo */
.bubble{background:var(--speech);border:1px solid var(--line);border-radius:12px;padding:12px 15px}
.bubble .who{color:var(--who);font-weight:700;font-size:.75em;letter-spacing:0}
.bubble.big{font-size:20px}
/* notes and key ideas: the same band, no speaker */
.idea{background:var(--speech);border:1px solid var(--line);font-weight:500}
/* feedback: right = green tint, wrong = coral edge, neutral = plain card */
.toast.good{background:var(--moss-bg);border-color:var(--moss);color:var(--ink)}
/* captions and "Next: …" lines: small and grey, the coral bar keeps them findable */
.frameline{color:var(--muted);font-weight:500}
.kicker,.hudlabel{color:var(--muted)}
/* tappable side terms in the classic's green */
.sterm{color:var(--who);font-weight:600;border-bottom:1.5px dotted var(--who)}
.sterm:hover,.sterm:focus-visible{color:var(--who);border-bottom-style:solid}
/* the lesson's title at the top, as in the classic lesson */
.ltitle{display:flex;flex-direction:column;min-width:0;margin-right:auto;padding-left:6px}
.ltitle b{font-size:16px;font-weight:650;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ltitle span{font-size:12.5px;color:var(--muted);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ .ltitle{display:none} }
@media (min-width: 960px){
  /* priorities in a group: heading ≈ 1.35 × body, body, caption ≈ 0.75 × body (classic 22 / 16 / 12, scaled to body 18) */
  .app h2{font-size:26px;font-weight:650}
  .gtext b{font-size:24px;font-weight:650}
  .gtext span{font-size:18px;color:var(--ink)}
  .app .lead,.app .idea,.app .toast,.app .rrow,.app .rcard p,.app .bubble{font-size:18px}
  .app .bubble .who,.app .kicker,.app .frameline,.app .sub,.app .lab,.app .hudlabel{font-size:14px}
  .app .bubble.big{font-size:20px}
  .ltitle b{font-size:18px}.ltitle span{font-size:13.5px}
}
@media (min-width: 960px) and (max-height: 780px){
  .app h2{font-size:22px}.gtext b{font-size:20px}.gtext span{font-size:16px}
  .app .lead,.app .idea,.app .toast,.app .rrow,.app .rcard p,.app .bubble{font-size:16px}
  .app .bubble .who,.app .kicker,.app .frameline,.app .sub,.app .lab,.app .hudlabel{font-size:12.5px}
}
.askpic{display:flex;justify-content:center;margin:8px 0}.askpic svg,.askpic img{max-height:28vh;width:auto}
.call{font-weight:700;margin:0 0 6px;color:var(--mark-text)}.call.right{color:var(--moss)}
/* look-back cards on wide screens: two columns, the picture large on the left, question and answer on the right (Emily 2026-10-08) */
@media (min-width: 960px){
  .app .flipcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:32px;row-gap:14px;align-items:center;align-content:center;padding:28px;min-height:min(52vh,500px)}
  .app .flipcard > svg,.app .flipcard > img{grid-column:1;grid-row:1 / span 2;width:100%!important;height:auto!important;max-height:min(44vh,400px);align-self:center;justify-self:center}
  .app .flipcard > .q,.app .flipcard > .a,.app .flipcard > .hint{grid-column:2}
  .app .flipcard .q{font-size:24px;line-height:1.3}
  .app .flipcard .a{font-size:19px}
}

/* 2026-10-09: an icon tooltip at the right edge made phone pages ~19 px wider than the screen, so the page could slide sideways (simulated learner Omar). Clip, never scroll, sideways. */
html{overflow-x:clip}body{overflow-x:clip}

/* 2026-10-09 (Emily): the instruction gets its own tinted band and space under the title, so "what to do" reads apart
   from "what this is". Empty instructions (done states) show nothing. */
.gtext span:not(:empty){display:block;margin-top:10px;background:#EAF3F1;color:var(--ink);border-radius:10px;padding:10px 14px;line-height:1.45}
:root[data-theme="dark"] .gtext span:not(:empty){background:#1F2B29}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gtext span:not(:empty){background:#1F2B29} }
/* move buttons that sit right under the instruction, above the picture */
.mvs.inl{justify-content:flex-start;margin:10px 0 12px;flex-wrap:wrap}
/* game feel (Emily 2026-10-09): a right move pops and cheers, a wrong one shakes */
.toast.pop{animation:pop .45s ease-out}@keyframes pop{0%{transform:scale(.94);opacity:.4}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1)}}
.toast.shk,.boardwrap.shk{animation:shake .35s ease-in-out 2}
.cheer{position:fixed;left:50%;top:16%;white-space:nowrap;max-width:92vw;transform:translate(-50%,-50%) scale(.6);background:#5E8E33;color:#FFFFFF;font-weight:700;font-size:22px;padding:14px 26px;border-radius:999px;z-index:60;pointer-events:none;opacity:0;animation:cheer 1.5s ease-out forwards}
@keyframes cheer{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
.hintline{margin-top:8px;background:#FFF4DC;border-radius:10px;padding:10px 14px;font-size:15px}
@media (prefers-reduced-motion: reduce){ .toast.pop,.toast.shk,.boardwrap.shk{animation:none}.cheer{animation-duration:.01s;opacity:1} }
body.calm .cheer{animation-duration:.01s;opacity:1}
/* look-back cards say plainly that the answer is on the back (Emily 2026-10-09) */
.flipcard .hint{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;justify-self:start;font-size:15px;font-weight:600;color:var(--ink);background:#EAF3F1;border-radius:999px;padding:8px 14px}
.flipcard .hint::before{content:"↻";font-size:18px;line-height:1}
:root[data-theme="dark"] .flipcard .hint{background:#1F2B29}
/* write it from memory rows (2026-10-09) */
.recall{display:grid;gap:8px;margin:6px 0 14px}
.rcrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.rcrow label{font-weight:600;font-size:15px}
.rcrow input{font:inherit;font-size:16px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--ground);color:var(--ink);min-width:0}
.rcrow input:focus{outline:2px solid var(--ink);outline-offset:1px}
.rcrow .rca{grid-column:1 / -1;background:var(--moss-bg,#EEF4E8);border-radius:10px;padding:8px 12px;font-size:15px}
@media (max-width:700px){ .rcrow{grid-template-columns:1fr auto}.rcrow label{grid-column:1 / -1} }
/* Rafi tests what you learned (2026-10-09) */
.quizq{display:flex;flex-direction:column;gap:12px;align-items:stretch;flex:1;min-height:0;margin:4px 0 10px}
.quizq .bubble{font-size:18px}
.quizpic{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;border:1px solid var(--line);border-radius:14px;padding:8px;overflow:hidden}
.quizpic > svg,.quizpic > img,.quizpic > .chemwrap{width:auto;height:100%;max-width:100%;max-height:calc(100dvh - 470px);min-height:140px;display:block}
.quizpic > .chemwrap{width:min(100%,640px)!important;height:auto;aspect-ratio:480/276}.quizpic > .chemwrap svg{width:100%;height:100%}
/* video speed (2026-10-09) */
.vspeed{font:inherit;font-size:13px;font-weight:600;min-width:46px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.vspeed:hover{border-color:var(--ink)}
.vbox:fullscreen .vspeed{color:#F2EFEA;background:transparent;border-color:#78716C}
/* sleeker picture labels (Emily 2026-10-09: "the choice of font makes the design loose, unconfident"): every label drawn in a
   picture uses Inter at a medium weight unless it sets its own weight, with crisp rendering */
.app svg text{font-family:'Inter',system-ui,-apple-system,sans-serif;text-rendering:geometricPrecision}
.app svg text:not([font-weight]){font-weight:500}
/* in-line motion that shows a movement the lesson is about (Emily 2026-10-09). Each runs once when the change happens, or loops
   only while the cause lasts (gas rising while the pan is hot). Reduced-motion users see the end state. */
.mo-rise{animation:moRise 2.4s ease-in infinite;transform-box:fill-box;transform-origin:center}
@keyframes moRise{0%{transform:translateY(14px);opacity:0}20%{opacity:1}100%{transform:translateY(-26px);opacity:0}}
.mo-drop{animation:moDrop .9s ease-out both;transform-box:fill-box;transform-origin:top center}
@keyframes moDrop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
.mo-flicker{animation:moFlicker .9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}
@keyframes moFlicker{0%{transform:scaleY(.92)}100%{transform:scaleY(1.06)}}
.mo-fall{animation:moFall .7s cubic-bezier(.3,0,.6,1) both}
@keyframes moFall{0%{transform:translateY(var(--fy,-40px));opacity:.2}100%{transform:none;opacity:1}}
.mo-slide{animation:moSlide 1s ease-in-out both}
@keyframes moSlide{0%{transform:translate(var(--sx,-60px),var(--sy,-40px));opacity:.4}100%{transform:none;opacity:1}}
.mo-pop{animation:moPop .35s ease-out both;transform-box:fill-box;transform-origin:center}
@keyframes moPop{0%{transform:scale(.4)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ .mo-rise,.mo-drop,.mo-flicker,.mo-fall,.mo-slide,.mo-pop{animation:none!important;opacity:1!important} }
/* the side sheet: a whole floating card on wide screens, draggable, minimizable (2026-10-09) */
.sheet-top{align-items:center;gap:6px;cursor:grab;touch-action:none;user-select:none}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:var(--line);margin-right:auto;margin-left:calc(50% - 22px)}
.sheet.min{background:transparent;pointer-events:none}.sheet.min .sheet-card{display:none}
.sheet-tab{position:fixed;left:16px;bottom:16px;z-index:11;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 16px;box-shadow:none;cursor:pointer;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:760px){ .sheet{align-items:center}.sheet-card{border-radius:18px;margin:24px;max-height:calc(100dvh - 48px)} }
/* the story as a picture book (2026-10-09) */
.sbook{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;width:100%}
.sbook-pic{position:relative;flex:1;min-height:260px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--band);display:flex;align-items:center;justify-content:center}
.sbook-pic > img,.sbook-pic > svg{width:100%;height:100%;max-height:none!important;object-fit:contain;border:0;border-radius:0;margin:0;display:block}
.app .stage .sbook-pic > img.plate{width:100%;height:100%;max-height:none}
.sbook-lead{position:absolute;left:0;right:0;top:0;padding:12px 18px;background:rgba(251,250,248,.92);font-size:18px;font-weight:600;line-height:1.35;color:var(--ink);border-bottom:1px solid var(--line)}
.sbook-say{position:absolute;bottom:16px;max-width:min(62%,560px);display:flex;flex-direction:column;gap:8px}
.sbook-say.left{left:16px;align-items:flex-start}.sbook-say.right{right:16px;align-items:flex-end}
.sbook-say .bubble{background:rgba(255,255,255,.96);border:1px solid var(--line);margin:0;font-size:17px}
.sbook-reply{align-self:flex-end}
.sbook-dots{display:flex;gap:6px;justify-content:center}.sbook-dots button{width:22px;height:24px;padding:10px 0;border:0;border-radius:2px;background:var(--line);background-clip:content-box;cursor:pointer}.sbook-dots button:disabled{cursor:default}.sbook-dots button.done{background-color:#57534E}.sbook-dots button.on{background-color:#E4572E}.sbook-pic{cursor:pointer}
@media (max-width:700px){ .sbook-pic{flex:none;min-height:0;aspect-ratio:3/2}.sbook-lead{font-size:15px;padding:8px 12px}.sbook-say{position:static;max-width:none;margin-top:8px}.sbook-say .bubble{font-size:15px} }
@media (max-width:700px){ .sbook-pic{overflow:visible;border:0;background:none;display:flex;flex-direction:column;align-items:stretch}.sbook-lead{order:-1}.sbook-pic > img,.sbook-pic > svg{border:1px solid var(--line);border-radius:14px;aspect-ratio:3/2;height:auto} .sbook-lead{position:static;border:0;background:none;padding:0 0 8px} }
/* the scene layer over a story painting (2026-10-09, brought back from the mini-cycles player) */
.sbook-art{position:relative;height:100%;max-width:100%;margin:0 auto}
.sbook-art > img{width:100%;height:100%;object-fit:contain;display:block;border:0;border-radius:0;max-height:none!important}
.sbook-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sbook-ov .rg{fill:rgba(255,255,255,0);stroke:none}
.sbook-ov .rg.on{fill:rgba(255,255,255,.26);stroke:#E4572E;stroke-width:3;stroke-dasharray:9 7;animation:rgIn .6s ease-out both}
@keyframes rgIn{from{fill:rgba(255,255,255,0);stroke-opacity:0}to{fill:rgba(255,255,255,.26);stroke-opacity:1}}
.sbook-ov .cur{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 34;animation:curFlow 1.1s linear infinite}
.sbook-ov .cur.slow{stroke:rgba(255,255,255,.62);animation-duration:4.4s}
@keyframes curFlow{to{stroke-dashoffset:-48}}
@media (prefers-reduced-motion: reduce){ .sbook-ov .cur,.sbook-ov .rg.on{animation:none} }
@media (max-width:700px){ .sbook-art{height:auto;width:100%}.sbook-art > img{border:1px solid var(--line);border-radius:14px} }
@media (max-width:700px){ .sbook-pic{aspect-ratio:auto;justify-content:flex-start;height:auto} }

/* breathing room (Emily 2026-10-09: "add space between lines … the whole screen with texts looks busy and feels clumsy").
   One rhythm for every text block: more leading, more space between answer rows, roomier messages. */
body{line-height:1.6}
.lead{line-height:1.6}
.center{gap:16px}
.app .center{gap:14px;padding:10px 0}
.rlist{gap:10px}
.rrow{padding:14px 16px;line-height:1.5;font-size:16px}
.toast,.toast.inline{line-height:1.6;padding:12px 16px}
.toast.inline{margin-top:12px}
.bubble{line-height:1.55;padding:14px 18px}
.gtext b{line-height:1.3}
.gtext span:not(:empty){line-height:1.6;padding:12px 16px;margin-top:12px}
.goal{padding:4px 0 14px}
.mvs.inl{gap:10px;margin:12px 0 16px}
.recall{gap:12px}.rcrow{padding:12px 14px}
.caption{line-height:1.6;margin-top:10px}
.sum,.sumh{line-height:1.6}
.flipcard{gap:16px}
.chips{gap:10px}

/* lettering (Emily 2026-10-09, picked "2: like mini-cycles"): each device's own interface font (San Francisco on Apple, Segoe UI on
   Windows, Roboto on Android), as the mini-cycles page shows, with its tighter, heavier headings. Replaces downloaded Inter. */
:root{--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body,button,input,textarea,select,.app svg text{font-family:var(--font)!important}
h1{letter-spacing:-.02em;font-weight:800}
h2,.gtext b{letter-spacing:-.01em;font-weight:700}
.ltitle b{letter-spacing:-.01em}
/* story words sit in the painting's sky, under the narration (as the mini-cycles player did), so they never cover the people
   or the things the line is about */
.sbook-top{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.sbook-top > *{pointer-events:auto}
.sbook-lead{position:static}
.sbook-say{position:static;max-width:min(62%,560px);padding:0 16px}
.sbook-say.left{align-self:flex-start}.sbook-say.right{align-self:flex-end}
@media (max-width:700px){ .sbook-top{position:static;order:-1;gap:8px;margin-bottom:8px}.sbook-say{max-width:none;padding:0}.sbook-say.left,.sbook-say.right{align-self:stretch} }
/* Get ready (2026-10-09) */
.rlist.ready .rrow > span:last-child{display:flex;justify-content:space-between;gap:12px;width:100%;align-items:baseline}
.rlist.ready .rtag{color:var(--muted);font-size:14px;white-space:nowrap}.rlist.ready .rrow.ok .rtag{color:#3F6B2A}
.rlist.picks{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rlist.picks .rrow{flex-direction:column;align-items:center;text-align:center;gap:6px}
.rrow:disabled{cursor:default;opacity:1}
.readypic{flex:none;max-height:30vh}
.readymini{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
/* game-style guidance (Emily 2026-10-09): a tool is shown in the scene, a soft ring pulses around it and a short hint points at it;
   the hand picks it up. No text button names an action. */
.coachring{fill:none;stroke:#C4461F;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:coachPulse 1.4s ease-out infinite}
@keyframes coachPulse{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
.coachtip rect{fill:#1C1917}.coachtip text{fill:#FFFFFF;font-weight:600}
.grabtool{cursor:grab}.grabtool:active{cursor:grabbing}
.swing{transform-box:fill-box;transform-origin:85% 85%;animation:swing .35s ease-in}
@keyframes swing{0%{transform:rotate(0)}60%{transform:rotate(-38deg)}100%{transform:rotate(12deg)}}
@media (prefers-reduced-motion: reduce){ .coachring,.swing{animation:none} }

/* a 3D round opened over the lesson page (sedimentary, 2026-10-09) */
.g3frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:60;background:#cfdbe6}
.g3home{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:61;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:rgba(251,250,248,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.g3home svg{width:22px;height:22px}
.g3home{display:none!important}   /* 10-11 QA: on a phone it covered the first card and a claim answer, and a tap quit the round. Home is on the round's pause screen now. */

/* layout follows content (2026-10-10, Emily: a Look back card with no picture left half the card empty): the picture column exists only
   when a picture fills it; a card of words alone is one centred column, sized to its words */
.app .flipcard:not(:has(> svg, > img)),.flipcard:not(:has(> svg, > img)){grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;max-width:720px;margin-left:auto;margin-right:auto;min-height:0}
.app .flipcard:not(:has(> svg, > img)) > .q,.app .flipcard:not(:has(> svg, > img)) > .a,.app .flipcard:not(:has(> svg, > img)) > .hint{grid-column:1;justify-self:center}
/* hover labels on buttons along a top edge open BELOW the button (2026-10-10, Emily: the sheet's Close label sat above the box, cut off
   by the sheet's edge, in every lesson page) */
.sheet-top [data-tip]::after,.hud [data-tip]::after,.hud2 [data-tip]::after{bottom:auto;top:calc(100% + 8px)}
/* an icon whose markup carries no stroke still draws (the copied Close button had none, so its X was invisible) */
svg.ic:not([stroke]){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 10-11 QA: finger-sized targets (44 px is the aim; 40 where a row is tight) */
.lpause{min-width:40px;min-height:40px}.rrow{min-height:44px}.rcshow,button[id^="rcb"]{min-height:44px}
.rrow.bad .mark{color:#78716C}   /* a wrong answer is a grey ✕, never red (§13; 10-11 QA) */

/* the speaker's face in a story bubble (10-11, from the mini-cycles design) */
.sface{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--band);border:1px solid var(--line)}
.sface.noimg{display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink)}
@media (max-width:700px){ .sface{width:40px;height:40px} }

/* the level list (10-17): a tab at the middle of the right edge; the list opens in the sheet */
.lvtab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;width:30px;height:52px;border:1px solid #1C1917;border-right:0;border-radius:12px 0 0 12px;background:#fff;color:#1C1917;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.lvtab .ic{width:20px;height:20px}.lvtab:hover,.lvtab:focus-visible{background:#F3F1EC}
.lvh{margin:0 0 8px;font-size:18px}.lvlist{display:flex;flex-direction:column}
.lvrow{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line,#E6E2DA)}.lvrow.here{background:#F3F1EC}
.lvgo{flex:1;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:0;padding:10px 6px;font:inherit;color:inherit;cursor:pointer;min-height:44px}
.lvgo:disabled{cursor:default;color:#78716C}.lvrow.here .lvn{font-weight:700}
.lvm{width:20px;text-align:center;color:#57534E;flex:none}.lvm.ok{color:#5E8E33;font-weight:700}
.lvn small{display:block;font-size:12.5px;color:#57534E}
.lvredo{flex:none;margin-right:6px;border:1px solid var(--action,#C4461F);color:#B8431F;background:#fff;border-radius:16px;padding:6px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.lvredo:hover,.lvredo:focus-visible{background:#FBEDE8}
#sheet.lvsheet{z-index:80}#sheet.over3d{z-index:80}

/* the game menu on the mission card (10-17): a level is a button; locked levels are quiet until reached */
.mpath.mmenu li{padding:0;background:none;border:0}
.mlv{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:600;color:var(--ink,#1C1917);background:#fff;border:1.5px solid #CFC8BD;border-radius:999px;padding:8px 16px 8px 8px;min-height:44px;cursor:pointer}
.mlv .mn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#F3F1EC;font-size:13px;font-weight:700}
.mlv.ok .mn{background:#EAF3DE;color:#3B6D11}
.mlv:hover:not(:disabled),.mlv:focus-visible{border-color:#1C1917}
.mlv:disabled{cursor:default;color:#A8A29E;background:#F3F1EC;border-color:#E6E2DA}.mlv:disabled .mn{background:#E6E2DA;color:#A8A29E}

/* button audit 10-17 (tools/game_site/button_audit.mjs) */
.stage:has(.rlist) .sbook-pic{min-height:140px}   /* Rafi's question rows share the stage: the painting gives way so the story dots stay in view */
.vbar .ib,.wbar .ib{flex:none}   /* video icons keep their circle on desk too (were squeezed to 42x44) */
@media (max-width:700px){ .sbook-dots button{height:32px;padding:14px 0} .lvtab{width:36px} }   /* tap targets: story dots 32 tall, level tab 36 wide */
/* 10-17: the caption is built into the video picture; the line under the player repeated it, so it is read to screen readers only */
.vcap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
.rvid .vbox{width:min(100%, calc(70vh * 1.28))}

/* ---- Emily 10-17, her reference designs: one dark frame, one light card on every lesson screen ---- */
html,body{background:#1C1917}
.app{background:#1C1917;padding:0 16px 16px;box-sizing:border-box}
.app header.hud{background:#1C1917;color:#F2EFEA}
.app header.hud .ib{background:rgba(255,255,255,.06);border-color:#57534E;color:#F2EFEA}
.app header.hud .ib:disabled{opacity:.4}
.app header.hud,.app header.hud *{color:#F2EFEA}
.app .steps i{background:#57534E}.app .steps i.on{background:#E4572E}.app .steps i.done{background:#D6A99A}
.app .ltime{background:transparent;border-color:#57534E;color:#F2EFEA}.app header.hud .ltime.on,.app header.hud .ltime.on *{background:#F2EFEA;color:#1C1917;border-color:#F2EFEA}.app header.hud .ltime.on *{background:transparent}
.app .order{color:#A8A29E}.app .order a{color:#D6D3D1}
.app .hud2{display:none}
.app main.stage{background:#FBFAF8;border:0;border-radius:16px 16px 0 0}
.app footer.dock{background:#FBFAF8;border-radius:0 0 16px 16px;border-top:1px solid #E6E2DA}
.app main.stage .gcard{background:transparent!important;border:0!important;box-shadow:none!important}
.app main.stage .gcard>.gin{border:0!important;background:transparent!important;box-shadow:none!important}
.app footer.dock:not(:has(button)){display:none}.app:has(footer.dock:not(:has(button))) main.stage{border-radius:16px}   /* no empty strip when the card holds its own button */   /* the stage is the card: no card inside the card */
/* a card says where you are: the label chip top-left, the step count top-right */
.app .gcard .ghead{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch}
.app .gcard .gk,.app .qchip{font-size:13.5px;font-weight:600;color:#3D3530;background:#F3F1EC;border:1px solid #E6E2DA;border-radius:999px;padding:5px 12px;justify-self:start;width:max-content;align-self:flex-start}
.app .gstep{font-size:13.5px;color:#78716C}
/* the type ladder: a small muted kicker, a big title, a short body, room around them */
.app .gcard .whyk{font-size:14px;font-weight:600;color:#78716C;margin-top:10px}
.app .gcard h2{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:800}
.app .gcard p{font-size:17px;line-height:1.55;color:#3D3530}
/* the creature beside the main button, its bubble one line about this moment */
.compby{display:inline-flex;align-items:flex-end;gap:8px;margin-right:12px}
.compby .cbub{background:#fff;border:1px solid #E6E2DA;border-radius:14px;padding:9px 13px;font-size:15.5px;line-height:1.4;max-width:300px;color:#1C1917}
.gact .compby,.dock .compby{margin-left:auto}
/* numbered answers; the chosen one dark-outlined with its tick */
.rdecide .rrow .mark.num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid #A8A29E;font-size:13px;font-weight:700;flex:none}
.rdecide .rrow.picked .mark.num{background:#1C1917;border-color:#1C1917;color:#fff}
@media (max-width:640px){ .app{padding:0 8px 8px} .compby .cbub{max-width:170px;font-size:14.5px} .app .gcard h2{font-size:24px} }
.navpill{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px;border-radius:999px;border:1px solid #57534E;background:rgba(255,255,255,.06);color:#F2EFEA;font:600 14.5px system-ui,-apple-system,'Segoe UI',sans-serif;cursor:pointer;white-space:nowrap}
.navpill .ic{width:18px;height:18px}.navpill:hover,.navpill:focus-visible{border-color:#F2EFEA}
.app header.hud .navl{display:flex;gap:8px;align-items:center}
@media (max-width:1000px){ .navpill{width:40px;padding:0;justify-content:center}.navpill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} }
@media (min-width:960px){ .center:has(>.qchip)>.qpicbox{height:min(50vh,500px)} }   /* the chip adds a line: the picture gives way so it ends above the button row */
/* Emily 10-19: the lesson menu is the right-edge tab, in the middle of the screen, at every size (it was the bar's pill on phones) */

/* after the review (Emily 10-17): the review choice and the Look back card */
.lbskip{font:inherit;font-size:15px;font-weight:600;color:#B8431F;background:#fff;border:1.5px solid #C4461F;border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer}
.lbskip:hover,.lbskip:focus-visible{background:#FBEDE8}
.app .gcard.lb .gin{align-items:stretch;text-align:left}
.app .gcard.lb h2{font-size:28px;line-height:1.2;margin:6px 0 4px}
.app .gcard.lb h2.lbans{background:#EAF3DE;color:#1C1917;border-radius:10px;padding:8px 12px;display:inline-block;align-self:flex-start}
.lbpic{display:block;width:100%;max-width:620px;align-self:center;background:#FBFAF8;border:1px solid #E6E2DA;border-radius:14px;padding:6px;cursor:pointer}.lbpic.still{cursor:default}
.lbpic svg{width:100%;height:auto;display:block}.lbpic:hover:not(.still),.lbpic:focus-visible{border-color:#1C1917}
.lbhint{display:inline-flex;align-items:center;gap:8px;align-self:center;margin:4px 0 0;background:#F3F1EC;border-radius:999px;padding:7px 14px;font-size:14.5px;color:#3D3530}.lbhint .ic{width:16px;height:16px}
.app .gcard.lb .lbcap{text-align:center;color:#57534E;margin:2px 0 0;font-size:15px}
.app .gcard.lb .lbwhy{background:#F3F1EC;border-radius:12px;padding:12px 14px;margin:6px 0 0;font-size:16.5px;line-height:1.55}
.gact .lbskip{align-self:center;height:auto;min-height:44px;line-height:1.2}
.lbpic{width:auto;max-width:100%}.lbpic svg{width:auto;max-width:100%;height:min(34vh,300px);margin:0 auto}
@media (max-width:640px){ .lbpic svg{height:auto;width:100%} .app .gcard.lb h2{font-size:22px} }
.ib.primary.lab{width:auto;min-width:0;height:48px;padding:0 22px;border-radius:999px;font:700 16px system-ui,-apple-system,'Segoe UI',sans-serif;white-space:nowrap;gap:6px}
@media (max-width:640px){ .ib.primary.lab{height:46px;padding:0 18px;font-size:15.5px} }
.gact .backb,.dock .backb{margin-right:0}.dock .row .left{display:flex;gap:8px;align-items:center}
.ib.lab.backb{width:auto;min-width:0;height:48px;padding:0 22px;border-radius:999px;font:700 16px system-ui,-apple-system,'Segoe UI',sans-serif;white-space:nowrap;background:var(--action,#C4461F);border-color:var(--action,#C4461F);color:#fff}
.ib.lab.backb:hover,.ib.lab.backb:focus-visible{background:var(--action-hover,#A93B19);border-color:var(--action-hover,#A93B19)}
@media (max-width:640px){ .ib.lab.backb{height:46px;padding:0 18px;font-size:15.5px} }
/* the creature's words in a real speech bubble, its tail pointing at the creature on its right (Emily 10-17) */
.compby .cbub{position:relative;border:1.5px solid #D6D1C8;border-radius:18px;margin-right:6px;margin-bottom:22px}
.compby .cbub::before,.compby .cbub::after{content:'';position:absolute;right:-12px;bottom:14px;width:0;height:0;border-style:solid}
.compby .cbub::before{border-width:8px 0 8px 12px;border-color:transparent transparent transparent #D6D1C8}
.compby .cbub::after{right:-9.5px;bottom:15.5px;border-width:6.5px 0 6.5px 10px;border-color:transparent transparent transparent #fff}
/* 10-17 references: the right pick turns moss with its tick; Back sits beside the main action; the story card's header */
.rl-job.on.hit{background:#5E8E33;border-color:#5E8E33;color:#fff}
.gact .backb+.ib.primary,.dock .backb+.ib.primary{margin-left:10px}.dock .row .right{display:flex;align-items:flex-end;gap:0}
.app .sbook>.ghead{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.app .sbook .ghead .gk{font-size:13.5px;font-weight:600;color:#3D3530;background:#F3F1EC;border:1px solid #E6E2DA;border-radius:999px;padding:5px 12px}
@media (min-width:701px){ .app .sbook-pic{flex:1 1 auto;min-height:0} .app .sbook-pic > img.plate{object-fit:cover;object-position:center} }   /* the painting fills the card's free height, no grey band, and ends above the dots */
@media (min-width:701px){ body #stage > .sbook:only-child{flex:1 1 auto;min-height:0} }   /* the story takes the stage's height, so its painting shrinks to fit and the dots stay above the button row */
/* Emily 10-18: on a computer the level tab at the middle of the right edge is the lesson menu, so the top bar drops its Lesson menu pill;
   phones keep the pill (the edge tab is hidden there, it covered the card) */
#navl .navpill[aria-label="Lesson menu"]{display:none}
/* the cards a lesson hands out at its end (Emily 10-18): small trading cards in a grid; collected ones get a tick */
.ecards{display:flex;flex-direction:column;gap:6px;margin-top:6px}.ecgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:4px}
.ecard{display:flex;flex-direction:column;gap:6px;border:2px solid #C4461F;border-radius:12px;padding:10px 12px 12px;background:linear-gradient(#FDF3EF,#FBFAF8 45%)}
.ecard .ect{font-size:12px;font-weight:700;color:#B8431F}.ecard .ect b{color:#5E8E33}.ecard .ecn{font-size:16px;line-height:1.25;color:#1C1917;letter-spacing:-.01em}.ecard .ecr{font-size:13px;line-height:1.45;color:#44403C}
.ecard.got{border-color:#5E8E33;background:#F4F8EE}
.ecards.pop .ecard{animation:ecpop .45s cubic-bezier(.2,1.3,.4,1) both}.ecards.pop .ecard:nth-child(2){animation-delay:.06s}.ecards.pop .ecard:nth-child(3){animation-delay:.12s}.ecards.pop .ecard:nth-child(4){animation-delay:.18s}.ecards.pop .ecard:nth-child(5){animation-delay:.24s}.ecards.pop .ecard:nth-child(6){animation-delay:.3s}
@keyframes ecpop{from{transform:scale(.9) rotate(-2deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ .ecards.pop .ecard{animation:none} }
.ecards.eround{width:100%;max-width:560px;margin:4px auto 0;text-align:left}.ecards.eround .nh{font-size:16px;font-weight:800;margin:0}.ecards.eround .ecgrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Emily 10-18: Back is an outline icon at the far left of its row, every screen (the main action stays bottom right) */
.gact > .ib.backb,.gact .row .left > .ib.backb:first-child{margin-right:auto}.gact > .ib.backb+*{margin-left:0}
.dock .row .left > .ib.backb{margin-right:8px}
/* Emily 10-18: the main action's arrow is the drawn icon beside its word; Home in the top bar is an icon with its hover text on every screen size */
.ib.primary.lab{display:inline-flex;align-items:center;gap:8px}.ib.primary.lab .ic{width:20px;height:20px;flex:none}
.navpill[aria-label="Home"]{width:40px;padding:0;justify-content:center}.navpill[aria-label="Home"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Emily 10-18: every button the same oval: icon buttons are pills (the labelled buttons' height, wider than tall, fully rounded ends) */
.ib:not(.lab){width:auto;min-width:64px;height:48px;padding:0 20px;border-radius:999px}
.ib.small:not(.lab){min-width:54px;height:40px;padding:0 16px}
.vbar .ib:not(.lab),.wbar .ib:not(.lab){min-width:50px;height:38px;padding:0 14px}
.navpill[aria-label="Home"],.navpill{border-radius:999px}.navpill[aria-label="Home"]{width:auto;min-width:54px;padding:0 16px}
@media (max-width:1000px){ .navpill{width:auto;min-width:54px;padding:0 16px} }
@media (max-width:640px){ .ib:not(.lab){min-width:56px;height:44px;padding:0 16px} .vbar .ib:not(.lab){min-width:46px;height:38px;padding:0 12px} }
.ib.primary.lab{flex:none}   /* the main button never shrinks under its words and arrow (10-18 phone audit); its row wraps instead */
/* Emily 10-18: the app's own colours instead of the dark frame from the references: the ground #FBFAF8 (canon: never cream), a light top
   bar with ink text, and the lesson card white with a hairline so it still reads as a card */
html,body{background:#FBFAF8}
.app{background:#FBFAF8}
.app header.hud{background:#FBFAF8}
.app header.hud,.app header.hud *{color:#1C1917}
.app header.hud .ib{background:#fff;border-color:#E6E2DA;color:#1C1917}
.app .steps i{background:#E6E2DA}.app .steps i.on{background:#C4461F}.app .steps i.done{background:#F0B9A5}
.app .ltime{background:#fff;border-color:#E6E2DA;color:#1C1917}.app header.hud .ltime.on,.app header.hud .ltime.on *{background:#1C1917;color:#fff;border-color:#1C1917}.app header.hud .ltime.on *{background:transparent}
.app .order{color:#78716C}.app .order a{color:#57534E}
.app main.stage{background:#fff;border:1px solid #E6E2DA;border-bottom:0}
.app footer.dock{background:#fff;border:1px solid #E6E2DA;border-top-color:#E6E2DA}
.app:has(footer.dock:not(:has(button))) main.stage{border-bottom:1px solid #E6E2DA}
.navpill{background:#fff;border-color:#E6E2DA;color:#1C1917}.navpill:hover,.navpill:focus-visible{border-color:#1C1917}
.fin .fact{background:#fff}
.app .gcard .gact{background:#fff}
/* Emily 10-18: a phone's bottom bar in one row; the companion's words on their own line above it, the tail pointing down at it */
@media (max-width:640px){
 .dock .row,.gcard .gact{flex-wrap:nowrap!important;align-items:center}.dock .row .right,.gcard .gact .right{flex-wrap:nowrap!important;align-items:center;gap:8px}
 .dock .compby,.gcard .gact .compby{margin:0 0 0 auto!important}.dock .compby .companion,.gcard .gact .compby .companion{width:52px!important}
 .cbubline{display:flex;justify-content:flex-end;padding:0 8px 2px 8px}
 .cbubline .cbub{position:relative;max-width:100%!important;background:#fff;border:1.5px solid #D6D1C8;border-radius:16px;padding:8px 12px;font-size:14.5px;line-height:1.4;color:#1C1917;margin:0 0 10px}
 .cbubline .cbub::before,.cbubline .cbub::after{content:'';position:absolute;right:var(--tailR,18px);top:100%;width:0;height:0;border-style:solid}
 .cbubline .cbub::before{border-width:11px 8px 0 8px;border-color:#D6D1C8 transparent transparent transparent}
 .cbubline .cbub::after{right:calc(var(--tailR,18px) + 1.5px);border-width:9px 6.5px 0 6.5px;border-color:#fff transparent transparent transparent}
}
/* a narrow phone: the progress dots step aside when the top bar also holds Jump to the end, so Print stays on screen (10-18) */
@media (max-width:440px){ .hud.hasend .steps{display:none} }
/* a narrow phone with the extra top-bar buttons (Jump to the end, Watch the videos): tighter pills so the row fits (10-18) */
@media (max-width:440px){ .hud.hasend .navpill{padding-left:15px;padding-right:15px;min-width:0} .hud.hasend .navl{gap:6px} }
/* Emily 10-19: the bar's drop-down menus (Videos, More); the lesson menu stays the tab on the right edge */
.popm{position:fixed;z-index:400;min-width:240px;max-width:min(340px,calc(100vw - 16px));background:#fff;border:1px solid #E6E2DA;border-radius:16px;box-shadow:0 12px 30px rgba(28,25,23,.18);padding:6px}
.popm .poph{font:700 12.5px system-ui,sans-serif;color:#57534E;padding:8px 12px 4px}
.popm button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:11px 12px;font:600 15px system-ui,sans-serif;color:#1C1917;cursor:pointer}
.popm button:hover,.popm button:focus-visible{background:#F3F1EC}.popm .ic{width:18px;height:18px;flex:none}
.popm .popt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;font:500 14px/1.35 system-ui,sans-serif;color:#1C1917;border-top:1px solid #F0EDE8;cursor:pointer}
.popm .popt input{margin-top:2px;width:18px;height:18px;accent-color:#C4461F;flex:none}
.navpill.icononly{width:44px;min-width:44px;padding:0;justify-content:center}.navpill.icononly span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* the top bar (Emily 10-19: one quality, like YouTube or Netflix): every control is the same 48-px round button with a 24-px line icon,
   no outline, a soft circle on hover and press; their names are the hover text; the clock is a pill of the same height family */
.app header.hud .navpill,.app header.hud #lprint,.app header.hud #lmore,.app header.hud #lsnd{width:48px;height:48px;min-width:48px;padding:0;border-radius:50%;border:0;background:transparent;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.app header.hud .navpill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.app header.hud .navpill .ic,.app header.hud #lprint .ic,.app header.hud #lmore .ic{width:24px;height:24px;stroke-width:2}
.app header.hud .navpill:hover,.app header.hud #lprint:hover,.app header.hud #lmore:hover,.app header.hud #lsnd:hover{background:rgba(28,25,23,.07)}
.app header.hud .navpill:active,.app header.hud #lprint:active,.app header.hud #lmore:active,.app header.hud #lsnd:active{background:rgba(28,25,23,.13)}
.app header.hud .navpill:focus-visible,.app header.hud #lprint:focus-visible,.app header.hud #lmore:focus-visible{outline:2px solid #C4461F;outline-offset:2px}
.app header.hud .navl{gap:4px}
.app header.hud .ltime{height:36px;min-width:64px;padding:0 14px;border-radius:999px;border:0}
.popm .popnote{margin:0 12px 10px 40px;font:500 13px/1.35 system-ui,sans-serif;color:#57534E}

/* Emily 10-19 ("the tool bar is not consistent throughout the game; reflect the tool bar on the first page"): in the learning arc a round's
   frame starts under the lesson's own bar, so Home, Videos, the clock, Print and More stay where they are on the first page; on a computer
   the lesson menu stays the right-edge tab during a round too */
.g3frame.underbar{top:var(--hudH,64px);height:calc(100% - var(--hudH,64px))}
@media (min-width:701px){ body:has(.g3frame.underbar) #lvtab{display:flex} .g3frame.underbar{left:var(--frX,0px);width:calc(100% - 2 * var(--frX,0px))} }   /* the round sits in the story picture's box (Emily 10-19: one canvas size); the tab stays in the gutter */
#pstab{display:none}
@media (min-width:701px){ body.pfolded:has(.g3frame.underbar) #pstab{display:flex;top:calc(50% + 4px);--ty:0px} body.pfolded:has(.g3frame.underbar) #lvtab{--ty:calc(-100% - 4px)} }
/* Emily 10-19: the edge tabs modern and cute: solid ink, no outline, the icon only; a slim tab at rest that grows to full size on hover
   (a computer); full size where there is no hover (a touch screen) */
.lvtab{--ty:-50%;transform:translateY(var(--ty));width:48px;min-width:0;height:48px;padding:0;justify-content:center;border:0;border-radius:24px 0 0 24px;
 background:#1C1917;color:#fff;box-shadow:0 4px 14px rgba(28,25,23,.22);transition:width .25s cubic-bezier(.2,.9,.3,1.2),height .25s cubic-bezier(.2,.9,.3,1.2),background .2s}
.lvtab .ic,.lvtab svg{width:22px;height:22px;flex:none;transition:width .25s,height .25s}
.lvtab:hover,.lvtab:focus-visible{background:#2E2A27}
@media (hover:hover){ .lvtab{width:28px;height:40px;border-radius:20px 0 0 20px} .lvtab .ic,.lvtab svg{width:16px;height:16px}
 .lvtab:hover,.lvtab:focus-visible{width:52px;height:52px;border-radius:26px 0 0 26px} .lvtab:hover .ic,.lvtab:hover svg,.lvtab:focus-visible svg{width:24px;height:24px} }
.app header.hud #lsnd svg{width:24px;height:24px}   /* the round's speaker, same size as Print (Emily 10-19) */
/* Emily 10-19: the top bar's icons turn coral on hover */
.app header.hud .navpill:hover,.app header.hud #lprint:hover,.app header.hud #lmore:hover,.app header.hud #lsnd:hover,
.app header.hud .navpill:focus-visible,.app header.hud #lprint:focus-visible,.app header.hud #lmore:focus-visible,.app header.hud #lsnd:focus-visible{color:#C4461F;background:rgba(228,87,46,.10)}
.app header.hud .navpill:active,.app header.hud #lprint:active,.app header.hud #lmore:active,.app header.hud #lsnd:active{color:#A93B19;background:rgba(228,87,46,.18)}
@media (max-width:700px){ body:has(.g3frame.underbar) #lvtab{display:flex} }   /* the tab stays over a round on a phone too */
@media (hover:none) and (max-width:700px){ .lvtab{width:34px;height:44px;border-radius:22px 0 0 22px} .lvtab .ic,.lvtab svg{width:18px;height:18px} }
.lvpart{margin:14px 4px 6px;font-size:13px;font-weight:800;color:#B8431F;letter-spacing:0}
.lvlist .lvpart:first-child{margin-top:4px}
.rlist .lvpart{margin:14px 4px 4px}
.lpausev .pcard .lreset{background:#F3F1EC!important;color:#B8431F!important;margin-right:8px}
/* Emily 10-19 (phone): "the More button is cut off": on a phone the progress ticks step aside (the clock still counts) and the icon
   buttons sit a little closer, so Home, Watch, the clock, Sound, Print and More all fit from 320 px up; a computer is unchanged */
@media (max-width:440px){ .app header.hud .steps{display:none} .app header.hud{padding-left:8px;padding-right:8px;gap:6px} .app header.hud .navl{gap:2px} #hudr{gap:2px} }
@media (max-width:360px){ .app header.hud .navpill,.app header.hud #lprint,.app header.hud #lmore,.app header.hud #lsnd{width:40px;height:40px;min-width:40px} .app header.hud .ltime{min-width:54px;padding:0 10px} }
/* 10-19 (phone): a quieter button's words stay on one line ("Skip the review →" wrapped to four lines in a circle); the row wraps instead,
   the main button keeping its place at the right */
@media (max-width:440px){ .app .gcard .gact.gact{flex-wrap:wrap!important;row-gap:10px;width:100%;box-sizing:border-box} .gcard .gact .lbskip{white-space:nowrap} }   /* wraps only when the row cannot hold them all (Emily 10-18: one row where it fits) */
/* Emily 10-19 ("the buttons line up the same height; the little character should be on the outside, not in the way"): on a card the
   companion leaves the button row and sits at the card's top-right corner, as Volt does on a round's card; the buttons share one centre line */
.app .gcard{position:relative}
.app .gcard .gact{align-items:center;column-gap:8px}
@media (max-width:440px){ .app .gcard .gin{padding-left:14px;padding-right:14px} .app .gcard .gact{column-gap:6px} .app .gcard .gact .primary.lab{padding-left:12px;padding-right:12px} .app .gcard .gact .lbskip{padding-left:12px;padding-right:12px} }
.app .gcard .gcomp{position:absolute;top:6px;right:6px;pointer-events:none}.app .gcard .gcomp .companion{width:72px!important}
@media (max-width:440px){ .app .gcard .gcomp .companion{width:56px!important} }

/* 10-23: the paper choice in Print for class */
.ppaper{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}.ppaper .psel-all.on{background:#1C1917;color:#fff;border-color:#1C1917}

.popm .popt small{display:block;font-size:12px;color:#78716C;font-weight:400}   /* Emily 10-22: each sound row says what it covers */

.lvrow.upnext .lvgo{border-color:#C4461F!important;background:#FFF8F4}.lvrow.upnext .lvn{color:#B8431F}   /* Emily 10-23: the part up next */

.popm .poph{padding:10px 12px 2px}.popm .popseg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;border-top:1px solid #F3F1EC}.popm .popseg span{flex:1 0 100%;font:500 14px system-ui,sans-serif;color:#1C1917}.popm .popseg button{padding:5px 12px;border-radius:999px;border:1.5px solid #E6E2DA;background:#fff;font:600 13px system-ui,sans-serif;color:#44403C;cursor:pointer}.popm .popseg button.on{border-color:#1C1917;background:#1C1917;color:#fff}   /* Emily 10-23 */

#dock .ib.readself{width:auto!important;min-width:0;border-radius:999px!important;padding:0 18px!important;white-space:nowrap}.popm .popseg button{width:auto!important;display:inline-flex!important;flex:0 0 auto!important;justify-content:center;margin:0!important}   /* Emily 10-23 */