/* ===== Sim-game restyle (loaded after style.css): bright blue + orange, chunky "press" buttons, bold friendly type.
   Layout rules (no-scroll shell, phone bottom sheet) stay in style.css; this file only changes the look. */
@font-face{font-family:"Baloo 2";src:url(/static/fonts/baloo2-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Lilita One";src:url(/static/fonts/lilitaone-latin.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --bg:#eaf3ff;--surface:#ffffff;--panel:#f2f7ff;--sunk:#e4eefc;--line:#d3e3f8;--line2:#b9d0ef;
  --text:#14233d;--mut:#4f6382;--faint:#8193ad;
  --acc:#2f7fe0;--acc-2:#1d6ad1;--acc-d:#1a54a8;--acc-soft:#e3efff;--acc-ring:rgba(47,127,224,.28);
  --or:#f59a23;--or-2:#ffb13d;--or-d:#c9720a;--or-soft:#fff1dc;
  --gold:#f59a23;--gold-2:#ffc25c;--gold-soft:#fff1dc;
  --ok:#2fa865;--ok-soft:#e3f7ea;--bad:#e5483a;--bad-soft:#ffe9e6;--warn:#c9720a;--warn-soft:#fff3df;
  --r:16px;--r-s:12px;
  --sh-1:0 3px 0 #d3e2f6;--sh-2:0 5px 0 #c6d9f2,0 10px 22px -12px rgba(20,50,100,.35);--sh-3:0 6px 0 #c6d9f2,0 20px 40px -18px rgba(20,50,100,.45);
  --sans:"Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Lilita One","Baloo 2",system-ui,sans-serif;
}
html,body{font:500 14.5px/1.4 var(--sans);background:var(--bg);color:var(--text)}
/* header: a bright blue game bar */
header{background:linear-gradient(180deg,#3a8cf0,#2a74da);border-bottom:0;box-shadow:0 4px 0 #1a54a8;position:relative;z-index:8;color:#fff}
.brand b{font:400 19px/1 var(--display);letter-spacing:.01em;color:#fff;text-shadow:0 2px 0 #1a54a8}
.brand small{color:#d9e9ff;font-weight:600}
.logo{background:var(--or);color:#fff;border-radius:12px;box-shadow:0 3px 0 var(--or-d),inset 0 2px 0 rgba(255,255,255,.35);transform:rotate(-6deg)}
nav{background:rgba(10,40,100,.22);border:0;border-radius:14px;padding:4px;gap:4px}
nav button{color:#e8f1ff;font:700 14px/1 var(--sans);border-radius:11px;padding:8px 13px;transition:transform .08s}
nav button:hover{color:#fff;background:rgba(255,255,255,.14)}
nav button.active{color:var(--acc-d);background:#fff;box-shadow:0 3px 0 #a9c6ee}
nav button:active{transform:translateY(2px)}
.score{position:relative;background:linear-gradient(180deg,var(--or-2),var(--or));border:0;border-radius:14px;padding:4px 14px 3px;box-shadow:0 4px 0 var(--or-d),inset 0 2px 0 rgba(255,255,255,.35);align-items:center}
.score span{font:400 26px/1 var(--display);color:#fff;text-shadow:0 2px 0 var(--or-d);min-width:1.2em;text-align:right;display:inline-block}
.score small{color:#fff7ea;font-weight:800;letter-spacing:.08em}
.score.pop{animation:spop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes spop{30%{transform:scale(1.28) rotate(-4deg)}60%{transform:scale(.94)}}
.score .plus{position:absolute;right:6px;top:calc(100% + 6px);font:400 20px/1 var(--display);color:var(--or);text-shadow:0 2px 0 #fff,0 0 8px rgba(255,255,255,.9);pointer-events:none;animation:plus 1.1s ease-out forwards;z-index:9}
@keyframes plus{from{opacity:0;transform:translateY(-6px) scale(.7)}20%{opacity:1;transform:translateY(4px) scale(1.15)}to{opacity:0;transform:translateY(26px) scale(1)}}
/* mute toggle */
#mute{flex:none;margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;box-shadow:0 3px 0 rgba(10,40,100,.35);transition:transform .08s}
#mute:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(10,40,100,.35)}#mute svg{width:20px;height:20px}
#mute.off{background:rgba(10,40,100,.25);color:#c9dcf7}
/* stage */
#stage{background:#171b24}
/* (no CSS filter on the 3D canvas: it forced an extra full-screen compositing pass every frame) */
#hud-title{font:400 22px/1.1 var(--display);color:#fff;letter-spacing:.01em;text-shadow:0 2px 0 #1a54a8,0 0 1px #1a54a8;background:linear-gradient(180deg,#3a8cf0,#2a74da);padding:8px 14px 7px;border-radius:14px;box-shadow:0 4px 0 #1a54a8;max-width:min(60%,520px);width:max-content}
#hud-title:empty{display:none}
#hud-title small{font:700 12.5px/1.3 var(--sans);color:#e3efff;text-shadow:none;margin-top:3px}
.hint3d{color:#14233d;background:rgba(255,255,255,.75);padding:3px 9px;border-radius:999px;font-weight:600}
#banana{border:2px solid #fff;background:rgba(255,255,255,.92);box-shadow:0 3px 0 #b9d0ef;font-weight:700;color:var(--mut)}
#banana.on{background:#fff1b8;border-color:#ffd65c;color:#6b5200}
#loading{border:2px solid #fff;font-weight:700;box-shadow:0 3px 0 #b9d0ef;right:auto;left:50%;top:12px;transform:translateX(-50%);color:var(--acc-d);background:rgba(255,255,255,.94);pointer-events:none;animation:ldin .25s .45s both}
@keyframes ldin{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translateX(-50%)}}
#toast{border:2px solid var(--line);border-radius:16px;box-shadow:0 5px 0 #c6d9f2,0 16px 30px -14px rgba(20,50,100,.4);font-weight:600;background:#fff}
#toast.ok{border-color:#a8e3c0;box-shadow:0 5px 0 #8fd3ab,0 16px 30px -14px rgba(20,50,100,.4)}#toast.bad{border-color:#f6b5ad;box-shadow:0 5px 0 #eb9d93,0 16px 30px -14px rgba(20,50,100,.4)}
#toast .ti{width:26px;height:26px}
#toast b{font-weight:800}
/* panel */
#panel{background:var(--panel);border-left:0;box-shadow:inset 4px 0 0 #d3e3f8}
h2{font:400 22px/1.15 var(--display);letter-spacing:.005em;color:var(--acc-d)}
h3{font:800 11.5px/1 var(--sans);letter-spacing:.1em;color:var(--acc)}
.eyebrow{font:800 11.5px/1 var(--sans);letter-spacing:.12em;color:var(--or-d)}
.lede{color:var(--mut);font-size:14px}
footer{background:#163f8a;color:#b7cdee;border-top:0;font-weight:500}
footer a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}footer code{background:rgba(255,255,255,.12);color:#fff}
/* chunky buttons with a press */
.btn{border:0;border-radius:14px;padding:9px 17px;font:800 14.5px/1.1 var(--sans);letter-spacing:.01em;background:linear-gradient(180deg,var(--or-2),var(--or));color:#fff;text-shadow:0 1px 0 rgba(150,80,0,.35);box-shadow:0 5px 0 var(--or-d),0 8px 16px -8px rgba(160,90,0,.6),inset 0 2px 0 rgba(255,255,255,.35);transition:transform .07s,box-shadow .07s,filter .15s;position:relative;top:0}
.btn:hover{background:linear-gradient(180deg,#ffbd52,#f8a530);filter:saturate(1.05)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--or-d),inset 0 2px 0 rgba(255,255,255,.3)}
.btn.sec{background:#fff;color:var(--acc-d);text-shadow:none;border:2px solid var(--line);box-shadow:0 4px 0 #b9d0ef,inset 0 -2px 0 #eef4fd}
.btn.sec:hover{background:#f7fbff;border-color:var(--line2)}
.btn.sec:active{box-shadow:0 1px 0 #b9d0ef}
.btn.ghost{background:transparent;color:var(--acc);box-shadow:none;text-shadow:none;border:0;font-weight:800}
.btn.ghost:hover{background:var(--acc-soft)}.btn.ghost:active{transform:translateY(1px)}
.btn:disabled{filter:grayscale(.7);opacity:.55;box-shadow:0 3px 0 #a7b4c6}
.pill{background:#fff;border:2px solid var(--line);color:var(--acc-d);font-weight:800;box-shadow:0 2px 0 #d3e2f6}
.pill.warn{color:var(--bad);border-color:#f6c6bf}
/* cards */
.card,.mode-card,.info,.stepcard,.results,.resume{border:2px solid var(--line);border-radius:18px;box-shadow:0 5px 0 #d3e2f6;background:#fff}
.card:hover,.mode-card:hover{border-color:#9fc2f0;box-shadow:0 7px 0 #c3d8f4;transform:translateY(-2px)}
.card:active,.mode-card:active{transform:translateY(3px);box-shadow:0 2px 0 #c3d8f4}
.card .ic,.mode-card .ic{background:linear-gradient(180deg,#4a98f3,#2f7fe0);color:#fff;border-radius:12px;box-shadow:0 3px 0 #1a54a8}
.mode-card .ic.gold{background:linear-gradient(180deg,var(--or-2),var(--or));color:#fff;box-shadow:0 3px 0 var(--or-d)}
.card b,.mc-tx b{font:400 17px/1.15 var(--display);letter-spacing:.01em;color:var(--text)}
.mc-meta{font-weight:700}
.stepcard .title{font:400 18px/1.2 var(--display);letter-spacing:.005em}
.co-part,.resume .rs-h{font-family:var(--display);font-weight:400;letter-spacing:.01em}
.co-n{background:var(--or);box-shadow:0 2px 0 var(--or-d);font-family:var(--display);font-weight:400;letter-spacing:.04em}
#callout .co-card,#gsheet{border:2px solid var(--line);border-radius:18px;box-shadow:0 6px 0 #c6d9f2,0 18px 36px -16px rgba(20,50,100,.45)}
#gsheet{border-radius:0;border-width:0 0 2px}
#callout .co-card::before,#gsheet::before,.results::before,.resume::before{height:5px;background:repeating-linear-gradient(-45deg,var(--or) 0 10px,#ffc25c 10px 20px)}
/* fun progress bars: chunky, striped, animated */
.dots{gap:4px}.dots i{height:9px;border-radius:6px;background:#dbe7f7;box-shadow:inset 0 2px 0 rgba(20,50,100,.08)}
.dots i.done{background:linear-gradient(180deg,#4a98f3,#2f7fe0);box-shadow:inset 0 -2px 0 #1a54a8}
.dots i.on{background:repeating-linear-gradient(-45deg,var(--or) 0 6px,#ffc25c 6px 12px);background-size:17px 17px;animation:stripes .6s linear infinite;box-shadow:inset 0 -2px 0 var(--or-d)}
@keyframes stripes{to{background-position:17px 0}}
.bar{height:12px;border-radius:8px;background:#dbe7f7;box-shadow:inset 0 2px 0 rgba(20,50,100,.1)}
.bar i{background:repeating-linear-gradient(-45deg,var(--or) 0 8px,#ffc25c 8px 16px);background-size:23px 23px;animation:stripes .7s linear infinite;border-radius:8px;box-shadow:inset 0 -3px 0 var(--or-d)}
/* tools, tray, choices */
.tool,.fc-tray .it,.choice,.act,.susp,.badge,.torque{border:2px solid var(--line);border-radius:14px;box-shadow:0 4px 0 #d3e2f6;font-weight:700;transition:transform .07s,box-shadow .07s,border-color .15s}
.tool:hover,.fc-tray .it:hover,.choice:hover:not(:disabled),.act:hover,.susp:hover{border-color:#9fc2f0}
.tool:active,.fc-tray .it:active,.choice:active:not(:disabled),.act:active,.susp:active{transform:translateY(3px);box-shadow:0 1px 0 #d3e2f6}
.tool .th,.fc-tray .it .th{background:radial-gradient(circle at 50% 40%,#ffffff,#e5effc);border-radius:10px}
.tool.sel,.fc-tray .it.sel,.susp.pend{border-color:var(--or);box-shadow:0 4px 0 var(--or-d);background:var(--or-soft)}
.tool.bad{border-color:var(--bad);box-shadow:0 4px 0 #c4372a;animation:wob .45s ease-in-out}
@keyframes wob{20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}
.choice .lt{border:2px solid var(--line2);border-radius:8px;font-weight:800;color:var(--acc)}
.choice.right{border-color:var(--ok);box-shadow:0 4px 0 #23864f}.choice.wrong{border-color:var(--bad);box-shadow:0 4px 0 #c4372a;animation:wob .45s}
.feedback{border-width:2px;border-radius:14px;font-weight:600}
.feedback.ok{box-shadow:0 4px 0 #a8e3c0}.feedback.bad{box-shadow:0 4px 0 #f6b5ad}.feedback.neutral{box-shadow:0 4px 0 #f3d6a3}
.fc-phase{font-weight:800;background:var(--or-soft);color:var(--or-d);border:2px solid #ffd59a}.fc-phase.secure{background:var(--acc-soft);color:var(--acc-d);border-color:#b9d0ef}
.fc-sheet li{font-weight:600}.fc-sheet li.dn .n{background:var(--ok);border-color:var(--ok)}.fc-sheet li.cur{background:var(--or-soft);color:var(--or-d)}.fc-sheet li.cur .n{background:var(--or);border-color:var(--or);box-shadow:0 0 0 3px rgba(245,154,35,.3)}
.seg{border:2px solid var(--line);border-radius:12px;background:#fff}.seg button{font-weight:800;border-radius:9px}.seg button.on{background:var(--acc);color:#fff;box-shadow:0 2px 0 #1a54a8}
.rs-score b{font:400 54px/1 var(--display);color:var(--or);text-shadow:0 3px 0 var(--or-d)}
.rs-grid div{border:2px solid var(--line);border-radius:12px;background:#f6faff}.rs-grid b{font:400 18px/1.1 var(--display)}
.rs-new{background:var(--or);color:#fff;border:0;box-shadow:0 2px 0 var(--or-d);font-weight:800}
.stat .big{font:400 32px/1 var(--display);color:var(--acc-d)}
.badge svg{color:var(--or)}
#instrument{border-radius:18px;box-shadow:0 6px 0 #11161d,0 18px 30px -14px rgba(0,0,0,.5)}
#jobcard,#findings{border:2px solid var(--line);border-radius:16px;box-shadow:0 5px 0 #c6d9f2}
#jobcard .sym{font-family:var(--display);font-weight:400;font-size:16px}
.co-sec p{font-weight:500;color:#2a3a55}
/* juicy overlays */
.fx-float{position:absolute;z-index:6;pointer-events:none;font:400 40px/1 var(--display);color:var(--or);-webkit-text-stroke:0;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 3px 0 #fff,0 6px 0 #1a54a8,0 10px 18px rgba(10,40,100,.45);animation:fxf 1.15s cubic-bezier(.2,.9,.3,1) forwards;transform:translate(-50%,-50%)}
@keyframes fxf{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.25)}35%{transform:translate(-50%,-75%) scale(1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.fx-spark{position:absolute;z-index:5;pointer-events:none;width:0;height:0}
.fx-spark i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:var(--c,#ffc25c);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:fxs .8s ease-out forwards;opacity:0}
@keyframes fxs{0%{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.3) rotate(160deg)}}
.fx-ring{position:absolute;z-index:5;pointer-events:none;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px var(--or);animation:fxr .55s ease-out forwards}
@keyframes fxr{to{transform:scale(5);opacity:0}}
#stage.wobble{animation:stwob .38s ease-in-out}
@keyframes stwob{20%{transform:translateX(-6px) rotate(-.3deg)}40%{transform:translateX(6px) rotate(.3deg)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.confetti i{border-radius:3px}
@media (prefers-reduced-motion:reduce){.fx-float,.fx-spark i,.fx-ring,#stage.wobble,.score.pop,.dots i.on,.bar i{animation-duration:.01s!important}}
/* compact heights and phones: keep the same sizes as before so nothing new scrolls */
@media (max-height:680px){#hud-title{font-size:18px;padding:6px 11px 5px}.score span{font-size:22px}.btn{padding:7px 14px}.stepcard .title{font-size:16px}h2{font-size:19px}}
html.m #hud-title{font-size:16px;padding:6px 10px 5px;border-radius:12px;box-shadow:0 3px 0 #1a54a8;max-width:72%}
html.m #hud-title small{font-size:11px}
html.m .score span{font-size:20px}html.m .score{padding:3px 10px 2px}
html.m #mute{width:44px;height:44px}
html.m nav button{font-size:13.5px}
html.m .btn{padding:8px 14px}
.score{margin-left:0}
html.m body{font-size:13.5px}html.m .lede{font-size:13px}html.m .mc-tx small{font-size:12px;line-height:1.35}html.m h2{font-size:19px}html.m .mc-tx b{font-size:16px}

/* phones: short tab labels, swipeable row with fade edges where more tabs hide */
nav button .sh{display:none}
html.m nav button .lg{display:none}html.m nav button .sh{display:inline}
html.m nav{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);scroll-behavior:smooth;scroll-snap-type:x proximity}
html.m nav.fl{--fl:26px}html.m nav.fr{--fr:26px}
html.m nav button{padding:0 10px;scroll-snap-align:center}
/* phones: the bottom sheet already says the step, so drop the duplicate step card and tool question in the panel */
html.m.gs-on #panel .stepcard,html.m.gs-on #panel .fc-q{display:none}
html.m #loading{top:auto;bottom:12px}

/* ---- phones: compact, consistent button heights (desktop untouched; everything below is html.m only) ----
   one height for every action button (42px + 4px press shadow), labels on one line, header controls 40px,
   tool chips and mode cards trimmed so the bottom sheet keeps the 3D parts in view */
html.m{--bh:42px}
html.m .btn,html.m .btn.sm{height:var(--bh);min-height:var(--bh);padding:0 14px;font-size:14px;line-height:1;white-space:nowrap;min-width:0;justify-content:center}
html.m .btn>span,html.m .btn{overflow:hidden;text-overflow:ellipsis}
html.m .btn svg{flex:none}
html.m .btn.ghost{height:40px;min-height:40px;padding:0 8px}
html.m .pf{padding-top:7px;gap:8px;align-items:stretch}
html.m .pf .btn,html.m .rs-b .btn{flex:1 1 0}html.m .pf .btn.sec{flex:0 0 auto}
html.m .ph{min-height:40px}
html.m nav button{min-height:40px;height:40px}
html.m #mute{width:40px;height:40px}
/* mode cards (Tutorial / Test yourself): two-line blurb, smaller icon */
html.m .mode-card{min-height:58px;padding:8px 12px;gap:10px}
html.m .mode-card .ic{width:34px;height:34px}
html.m .mc-tx b{font-size:15.5px}
html.m .mc-tx small{margin-top:2px;font-size:11.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.m .mc-meta{white-space:nowrap;font-size:12px}
/* tool chips: same compact chip everywhere (build-the-car and repair jobs), swipeable row */
html.m .fc-tools .tool,html.m #panel .tools:not(.parts) .tool{flex:0 0 74px;height:70px;min-height:0;padding:3px 3px 4px;gap:2px;justify-content:flex-start}
html.m .fc-tools .tool .th,html.m #panel .tools:not(.parts) .tool .th{width:34px;height:34px;max-height:34px;aspect-ratio:auto;flex:none}
html.m .fc-tools .tool .nm,html.m #panel .tools:not(.parts) .tool .nm{font-size:10.5px;line-height:1.15;min-height:2.3em}
html.m #panel .tools:not(.parts){display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -12px;padding:2px 12px 5px}
html.m #panel .tools:not(.parts)::-webkit-scrollbar{display:none}
html.m #panel .tools:not(.parts) .tool{scroll-snap-align:start}
/* short phones (e.g. 375x667): one-line blurb so both mode cards fit without scrolling the panel */
@media (max-height:700px){html.m .mode-card{min-height:50px;padding:7px 12px}html.m .mc-tx small{-webkit-line-clamp:1}html.m .mode-card .ic{width:32px;height:32px}}
/* repair jobs on phones: give the panel the same room as the build-the-car tool step so the toolbox chips sit above the Use tool button */
html.m:not(.land) #panel:has(.pb.fit > .tools:not(.parts)){max-height:54%}
/* short phones, repair jobs: compact the job card and drop the "Toolbox" heading so the chip row sits fully above Use tool */
@media (max-height:700px){
  html.m:not(.land) #panel:has(.pb.fit > .tools:not(.parts):not(.fc-tools)) .stepcard{padding:8px 12px 9px}
  html.m:not(.land) #panel:has(.pb.fit > .tools:not(.parts):not(.fc-tools)) .stepcard .title{font-size:15px;margin-bottom:6px}
  html.m:not(.land) #panel:has(.pb.fit > .tools:not(.parts):not(.fc-tools)) .stepcard .spec{margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  html.m:not(.land) #panel:has(.pb.fit > .tools:not(.parts):not(.fc-tools)) .pb.fit > h3{display:none}
}

/* ---- tutorial guide card: docked in one place with one width; titles wrap instead of clipping; the call-to-action chip gets its own line */
#callout .co-card{width:var(--co-w,260px);max-height:var(--co-max,70vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#callout{will-change:auto;transition:opacity .2s ease}
.co-part{white-space:normal;align-items:flex-start}
.co-part svg{margin-top:2px}
.co-pt{display:block;overflow-wrap:anywhere;line-height:1.15;min-width:0}
.co-top{align-items:flex-start}.co-top .co-n,.co-top .co-min{margin-top:1px}
.co-pill{max-width:var(--co-w,260px)}
.co-cta{display:table;margin-top:5px}
#gsheet .gs-head{align-items:center}#gsheet .co-part{align-items:center}
/* narrow docked card (small laptops): the step badge and shrink button share the top row, the title gets the full width below */
#callout.co-narrow .co-card .co-top{flex-wrap:wrap;row-gap:6px}#callout.co-narrow .co-card .co-part{order:3;flex:1 0 100%}#callout.co-narrow .co-card .co-min{margin-left:auto}
/* desktop build sheet: full step names, wrapping to a second line when needed instead of "…" */
.fc-sheet li .t{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.fc-sheet li{align-items:flex-start}.fc-sheet li .n{margin-top:-1px}
/* Diagnose: test and part pills show their full text (wrap, never "…"); if a short screen can't fit them all, the panel body scrolls inside */
.act .l,html.m .act .l{white-space:normal;overflow:visible;text-overflow:clip;display:block;-webkit-line-clamp:unset;line-clamp:none;line-height:1.2;overflow-wrap:anywhere}
@media (min-height:760px){.act .l{display:block;-webkit-line-clamp:unset}}
.act{align-items:center}
.susp{white-space:normal;text-align:left;line-height:1.2}
.pb.fit:has(> .actions){overflow-y:auto;overscroll-behavior:contain}
/* Read aloud toggle (tutorial panel header): chunky pill, blue when on */
.speak-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px 5px 9px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--acc-d);font:800 12.5px/1 var(--sans);cursor:pointer;box-shadow:0 3px 0 #d3e2f6;white-space:nowrap;transition:transform .07s,box-shadow .07s}
.speak-btn svg{width:18px;height:18px;flex:none}
.speak-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #d3e2f6}
.speak-btn.on{background:var(--acc);border-color:var(--acc-d);color:#fff;box-shadow:0 3px 0 var(--acc-d)}
.speak-btn:focus-visible{outline:2px solid var(--acc-ring);outline-offset:2px}
html.m .speak-btn{min-height:40px}
@media (max-width:380px){.speak-btn span{display:none}.speak-btn{padding:5px 9px}}