:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}#bar{gap:10px}

/* ---- motion upgrade ---- */
#gloss{display:none}
#scr{-webkit-mask:none!important; mask:none!important}
#hero{position:absolute; left:0; top:0; width:1280px; height:720px; pointer-events:none}
.start .center{z-index:2}
.chgrid{grid-template-rows:repeat(2,minmax(0,1fr))!important}
.chgrid .card{gap:2px}
.chgrid .chtop{display:block!important; min-height:0!important; padding-top:2px}
.chgrid .no{float:left; width:46px; height:46px; margin:0 9px 3px 0; min-width:0!important; display:grid; place-items:center; border-radius:50%; font:700 28px/1 var(--f-display)!important; color:#fff!important; background:radial-gradient(circle at 35% 30%,var(--red-hi),var(--red) 55%,var(--red-lo)); box-shadow:0 0 0 3px var(--gold),0 6px 12px rgba(0,0,0,.45); text-shadow:0 2px 0 rgba(0,0,0,.35)}
.chgrid .nm{font-size:24px!important; line-height:1.17!important; hyphens:none; overflow-wrap:normal!important; word-break:normal!important; flex:none!important}
html[lang=en] .chgrid .nm{font-size:21px!important}
.chgrid .card .ca{display:block; width:100%; height:auto; aspect-ratio:176/100; flex:none; margin:0 auto; pointer-events:none; transition:transform .25s}
.chgrid .card:hover .ca{transform:scale(1.07)}
.card .ic{animation:icb 3.6s ease-in-out infinite}
.card .ib2{animation:none!important; display:block}
.home .card canvas.ic,.hub .card canvas.ic{width:160px; height:160px; margin-top:-6px}
.modes .card canvas.ic{width:140px; height:140px}
.card.locked .ib2{filter:grayscale(1); opacity:.4}
.card:nth-child(2n) .ic{animation-delay:-1.2s}.card:nth-child(3n) .ic{animation-delay:-2.2s}
@keyframes icb{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes fxb{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fxt{0%,100%{opacity:.12;transform:scale(.4)}50%{opacity:.9;transform:scale(1.15)}}
.fxb{transform-box:fill-box; transform-origin:center; animation:fxb var(--p,3.6s) ease-in-out infinite; animation-delay:var(--d,0s)}

@keyframes fxw{to{transform:translateX(-40px)}}
@keyframes fxr{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(calc(var(--h,40px)*-1));opacity:0}}
.fxw{animation:fxw var(--p,3s) linear infinite;animation-delay:var(--d,0s)}
.fxr{animation:fxr var(--p,3s) ease-in infinite;animation-delay:var(--d,0s)}
.fig svg text{paint-order:stroke;stroke:#0b0709;stroke-width:.26em;stroke-linejoin:round}
.fig svg path,.fig svg rect,.fig svg line,.fig svg polyline{stroke-linejoin:round}
.fig svg.lsvg{filter:drop-shadow(0 5px 0 rgba(0,0,0,.35))}
.fxsp{transform-box:fill-box; transform-origin:center; animation:fxt var(--p,2.6s) ease-in-out infinite; animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}

/* physics: 13 chapters in 2 rows of 7 */
.chgrid{grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:8px!important}
.chgrid .card{padding:7px 7px 6px!important}
.chgrid .no{width:38px!important; height:38px!important; margin:0 7px 2px 0!important; font-size:23px!important}
.chgrid .nm{font-size:19px!important; line-height:1.16!important}
html[lang=en] .chgrid .nm{font-size:17px!important}
.chgrid .stats{padding-top:4px; gap:0}
.chgrid .sx{font-size:15px!important}
.btn:not(.ghost){box-shadow:0 6px 0 var(--red-lo,#7d0f21)}
.btn:not(.ghost):active{transform:translateY(4px); box-shadow:0 2px 0 var(--red-lo,#7d0f21)}
.card{transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
.card:hover{transform:translateY(-4px) rotate(-.6deg)}
.chip.on{background:linear-gradient(180deg,var(--red-hi),var(--red) 60%,var(--red-lo)); box-shadow:0 0 0 3px var(--gold) inset}
.lrn.lab{grid-template-columns:215px minmax(0,1fr); gap:14px; height:566px}
.lrn.lab .lfoot{margin-top:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.lrn.lab .lfoot span{font:700 22px/1.2 var(--f-body); color:var(--chalk-dim)}
.lrn.lab .lfoot .btn{font-size:22px; padding:6px 16px}
.lrn.lab .lrl .hkt{font-size:calc(21px*var(--lf,1)); line-height:1.2}
.lrn.lab .when{padding:10px 14px}
.lrn.lab .when span{font-size:20px}
.lrn.lab .tk li{font-size:calc(16px*var(--lf,1)); line-height:1.28}
.lrn.lab .ro{font-size:16px; line-height:1.22; min-height:0}
.lrn.lab .ro :not(sup):not(sub){font-size:inherit!important; line-height:inherit!important}
.lrn.lab .ctl .chip,.lrn.lab .angs .chip{font-size:25px; padding:8px 16px}
.lrn.lab .sl{font-size:24px}
.lrn.lab .sl input{height:32px}
.lrn.lab .ctl{gap:14px}
.prg{height:7px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden; margin:2px 6px 0}
.prg i{display:block; height:100%; background:linear-gradient(90deg,#ffc83d,#5ee08a); border-radius:6px}
.pgb{position:absolute; top:10px; right:12px; font:700 20px/1.2 var(--f-body); color:#5ee08a; background:rgba(0,0,0,.4); border-radius:999px; padding:1px 10px}
.lwhy{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.lwhy>div{font:600 calc(16px*var(--lf,1))/1.3 var(--f-body); color:var(--chalk); background:rgba(0,0,0,.22); border:2px dashed var(--chalk-dim); border-radius:12px; padding:6px 10px; text-align:left}
.lwhy b{display:block; font-size:calc(15px*var(--lf,1)); color:var(--gold-hi); margin-bottom:2px}
.lwhy .ok{border-color:#5ee08a; border-style:solid; animation:pop .45s both}
.lwhy .ok b{color:#5ee08a}
#tmb.on{background:var(--yellow)}
#tmb.on svg{stroke:#2a0a10}
.tm .lrn.lab .ro{font-size:22px; max-height:4.2em}
.tm .lrn.lab .ctl .chip,.tm .lrn.lab .angs .chip{font-size:30px; padding:10px 20px}
.tm .lrn.lab .sl{font-size:28px}
.tm .lrn.lab .tk li{font-size:19px}
.tm .lrn.lab .lwhy>div{font-size:19px}
.tm .lrn .when p{font-size:30px!important}
.tm .opt{font-size:33px}
.tm .steps{--sfs:34px}
.fi[data-i]{cursor:pointer} .fi[data-i]:hover{border-color:var(--yellow)}
.pv{font:700 17px/1.2 var(--f-body); color:#2a0a10; background:var(--yellow); border-radius:999px; padding:3px 11px; white-space:nowrap}
.fvw{position:absolute; left:40px; right:40px; top:0; height:490px; display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:20px}
.fvl{display:flex; flex-direction:column; gap:8px; min-height:0}
.fvl .chn{font:700 20px/1.3 var(--f-body); color:var(--chalk-dim)}
.fvl .fvt{font:700 28px/1.2 var(--f-body); color:var(--yellow)}
.fvf{border:3px solid var(--right); border-radius:18px 26px 16px 24px/24px 16px 26px 18px; padding:5px 14px; background:linear-gradient(180deg,rgba(255,228,154,.18),rgba(255,228,154,.06)); font-size:33px; line-height:1.25; color:var(--chalk); text-align:center}
.fvf b{color:var(--yellow); font-weight:400}
.fvl h3{font:700 24px/1.3 var(--f-body); color:var(--yellow)}
.fvl .steps{border:3px dashed var(--chalk-dim); border-radius:18px; padding:6px 12px; overflow:hidden; flex:1; min-height:0}
.fvl .st .tx{font-size:var(--sfs,25px)}
.fvl .st .tx .fr,.fvl .st .tx .fr i{white-space:nowrap; overflow-wrap:normal; word-break:normal}
.fvr{display:flex; flex-direction:column; gap:8px; min-height:0; border:3px dashed var(--chalk-dim); border-radius:24px 14px 26px 16px/16px 26px 14px 24px; padding:10px 16px}
.fvq{display:flex; align-items:baseline; justify-content:center; gap:14px; font:700 42px/1.15 var(--f-body); color:var(--gold-hi)}
.fvq small{font:600 22px/1.2 var(--f-body); color:var(--chalk-dim)}
.fvg{flex:1; min-height:0; width:100%}
.fvg text{paint-order:stroke; stroke:#0b0709; stroke-width:.2em; stroke-linejoin:round}
.fvs{display:flex; flex-direction:column; gap:4px}
.fvs .sl{font-size:22px}
.fvs .sl input{height:24px}
.fvnone{margin:auto; text-align:center; font:700 28px/1.4 var(--f-body); color:var(--chalk-dim)}
.lrn.lab .ctl{min-height:0}
.lrn.lab .fig.big{padding:0}
/* ---- Lab v2 shell: header+tabs, big stage left, control panel right (palette: wine, gold, paper) ---- */
.l2{display:flex; flex-direction:column; height:100%; gap:10px; padding-bottom:12px; --pf:1}
.l2h{display:flex; align-items:center; gap:16px; height:62px; flex:none}
.l2n{flex:none; width:50px; height:50px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff6a7c,#c4132b 70%); border:3px solid var(--gold); color:#fff6ea; font:800 28px/44px var(--f-body); text-align:center}
.l2h h2{margin:0; font:800 34px/1.45 var(--f-body); color:var(--paper); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:4px 0}
.l2gw{position:relative; flex:none}
.l2go{font:700 22px/1 var(--f-body); color:var(--gold-hi); background:rgba(255,200,61,.1); border:2px solid var(--gold); border-radius:999px; padding:10px 18px; cursor:pointer; white-space:nowrap}
.l2pop{position:absolute; top:calc(100% + 6px); right:0; z-index:40; display:flex; flex-direction:column; gap:6px; background:#1a0a10; border:2px solid var(--gold); border-radius:16px; padding:10px; min-width:230px; box-shadow:0 10px 30px rgba(0,0,0,.6)}
.l2pop button{font:700 24px/1.2 var(--f-body); color:var(--paper); background:rgba(255,246,234,.07); border:2px solid rgba(255,246,234,.3); border-radius:12px; padding:9px 16px; cursor:pointer; text-align:left; white-space:nowrap}
.l2pop button:hover{border-color:var(--gold); color:var(--gold-hi)}
.l2t{display:flex; gap:10px; flex:none}
.l2t button{font:700 24px/1 var(--f-body); color:var(--paper); background:rgba(255,246,234,.07); border:2px solid rgba(255,246,234,.3); border-radius:999px; padding:10px 20px; cursor:pointer}
.l2t button.on{background:linear-gradient(180deg,#ffe49a,#ffc83d); color:#5f0817; border-color:#ffc83d; box-shadow:0 5px 0 var(--gold-lo)}
.l2b{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 455px; gap:14px}
.l2s{min-height:0; min-width:0; border:2px solid rgba(255,200,61,.45); border-radius:22px; background:rgba(0,0,0,.22); padding:6px; display:flex; overflow:hidden}
.l2s svg{width:100%; height:100%}
.l2s.col{flex-direction:column; gap:8px; padding:8px}
.l2s .l2fig{flex:1; min-height:0; min-width:0; display:flex; align-items:center; justify-content:center; border:0; background:none; padding:0}
.l2s .l2fig svg{width:100%; height:100%}
.l2ro{flex:none; border:2px solid var(--gold); border-radius:16px; background:rgba(255,200,61,.08); padding:10px 16px; font:700 calc(25px*var(--pf)) /1.3 var(--f-body); color:var(--gold-hi); text-align:center; min-height:2.8em; max-height:5.4em; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.l2p{min-height:0; min-width:0; display:flex; flex-direction:column; gap:8px; border:2px solid rgba(255,200,61,.45); border-radius:22px; background:rgba(0,0,0,.22); padding:12px 14px; overflow:hidden}
.l2p>*{flex:none; min-width:0}
.l2p .ph{display:flex; align-items:center; gap:10px}
.l2p .ph b{flex:1; min-width:0; font:800 calc(24px*var(--pf))/1.15 var(--f-body); color:var(--gold-hi)}
.l2p .ph .sc{font:700 calc(19px*var(--pf))/1 var(--f-body); color:var(--paper); white-space:nowrap}
.l2p .rs{flex:none; width:42px; height:42px; padding:0; border-radius:50%; font-size:24px; line-height:1}
.l2p .ctl{display:flex; flex-direction:column; gap:8px; width:100%}
.l2p .ctl,.l2p .ctl div,.l2p .angs{max-width:100%; min-width:0}
.l2p .ctl div,.l2p .angs,.l2p .l2chips{flex-wrap:wrap!important}
.l2p .chip{white-space:normal; text-align:center; line-height:1.2}
.l2p .ctl div{flex-wrap:wrap}
.l2p .ctl .chip,.l2p .angs .chip,.l2p .ctl .btn{font-size:calc(19px*var(--pf))!important; padding:5px 12px!important}
.l2p .l2chips{display:flex; flex-wrap:wrap; gap:8px}
.l2p .l2act{display:flex; gap:10px; align-items:center}
.l2p .l2act .btn:not(.rs){font-size:calc(23px*var(--pf)); padding:8px 18px; text-transform:none; letter-spacing:0; flex:1; white-space:nowrap}
.l2p .sl{font-size:calc(20px*var(--pf)); flex:1 1 auto; min-width:55%}
.l2p .sl input{height:24px}
.l2p .ro{border:2px solid var(--gold); border-radius:16px; background:rgba(255,200,61,.08); padding:9px 13px; font:700 calc(19px*var(--pf))/1.3 var(--f-body); color:var(--gold-hi)}
.l2 .ro :not(sup):not(sub){font-size:inherit!important; line-height:inherit!important}
.l2 .ro [style*="color"]{color:var(--gold-hi)!important}
.l2 .ro [style*="ff4d"]{color:#ff9aa6!important}
.l2p .tk{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.l2p .tk li{font:600 calc(17px*var(--pf))/1.25 var(--f-body); color:var(--chalk-dim); display:flex; gap:8px; align-items:flex-start}
.l2p .tk li i{flex:none; width:16px; height:16px; margin-top:3px; border:2px solid var(--chalk-dim); border-radius:50%}
.l2p .tk li:not(.cur){display:none}
.l2p .tk li.cur{color:var(--paper)} .l2p .tk li.cur i{border-color:var(--gold); background:rgba(255,200,61,.25)}
.l2p .tk li.ok{color:var(--gold-hi)} .l2p .tk li.ok i{background:var(--gold); border-color:var(--gold)}
/* ===== PhET-style lab shell (.l3) ===== */
.l2b.ph{grid-template-columns:minmax(0,1fr)}
.l3{position:relative; min-height:0; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 236px; grid-template-rows:minmax(0,1fr) 66px; gap:10px}
.l3 .l4w{display:flex; gap:8px; width:100%; height:100%; padding:6px; box-sizing:border-box} .l4f{min-width:0; display:flex; align-items:center} .l4g{flex:0 0 auto; height:100%; aspect-ratio:400/440; min-width:0} .l4f>.fig,.l4f>svg{width:100%} .l4ro{font:600 15px/1.3 var(--f-body); color:#fff6ea; border-bottom:1px solid rgba(255,200,61,.3); padding-bottom:6px; overflow-wrap:anywhere} .l4c{display:flex; flex-direction:column; gap:7px; min-width:0} .l4c .ctl,.l4c>div{min-width:0} .l4c div{flex-wrap:wrap!important; min-width:0; max-width:100%} .l4c button,.l4c .chip{font-size:15px!important; padding:4px 9px!important; min-width:0; line-height:1.2} .l4c span[style],.l4c .sl{font:700 15px/1.2 var(--f-body)!important} .l4c .sl{width:100%} .l4c input[type=range]{height:20px} .l3.l4p{grid-template-columns:minmax(0,1fr) 320px} .l4f{flex:1 1 0}
.l3st{grid-column:1; grid-row:1; position:relative; min-height:0; min-width:0; border:2px solid rgba(255,200,61,.45); border-radius:22px; background:rgba(0,0,0,.22); overflow:hidden; touch-action:none; user-select:none}
.l3st svg{width:100%; height:100%; display:block}
.l3st svg text{paint-order:stroke; stroke:#0b0709; stroke-width:.26em; stroke-linejoin:round}
.l3st [data-dg]{cursor:grab} .l3st.dg [data-dg]{cursor:grabbing}
.l3sd{grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:10px; min-height:0; min-width:0}
.l3pn,.l3lg{border:2px solid rgba(255,200,61,.45); border-radius:18px; background:rgba(0,0,0,.28); padding:10px 12px; min-width:0}
.l3pn{flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:7px; justify-content:flex-start}
.l3pn>*{flex:none; min-width:0}
.l3pn .sl{flex:none; font:700 19px/1.25 var(--f-body)}
.l3pn .sl input{height:22px}
.l3pn .l3h{font:800 20px/1.2 var(--f-body); color:var(--gold-hi)}
.l3pn .l3ro{font:700 19px/1.3 var(--f-body); color:var(--paper); border-top:1.5px dashed rgba(255,200,61,.35); padding-top:6px}
.l3pn .l3ro b{color:var(--gold-hi)}
.l3ck{display:flex; align-items:center; gap:9px; font:700 19px/1.2 var(--f-body); color:var(--paper); cursor:pointer}
.l3ck input{width:22px; height:22px; accent-color:var(--gold); flex:none}
.l3lg{flex:none; display:flex; flex-direction:column; gap:5px; font:700 17px/1.2 var(--f-body); color:var(--paper)}
.l3lg div{display:flex; align-items:center; gap:9px}
.l3lg svg{width:34px; height:22px; flex:none}
.l3bar{grid-column:1/3; grid-row:2; position:relative; display:flex; align-items:center; gap:12px; border:2px solid rgba(255,200,61,.45); border-radius:18px; background:rgba(0,0,0,.28); padding:6px 14px; min-width:0}
.l3gc{flex:none; display:flex; align-items:center; gap:7px; border:2px solid var(--gold); border-radius:999px; background:rgba(255,200,61,.14); color:var(--gold-hi); font:800 19px/1 var(--f-body); padding:7px 14px; cursor:pointer; white-space:nowrap}
.l3cur{flex:1 1 0; min-width:0; font:700 19px/1.25 var(--f-body); color:var(--paper)}
.l3gp{position:absolute; left:8px; bottom:calc(100% + 8px); width:520px; max-width:90%; z-index:5; border:2px solid var(--gold); border-radius:16px; background:#1a0b12; padding:10px 14px; box-shadow:0 8px 22px rgba(0,0,0,.5)}
.l3gp .tk{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.l3gp .tk li{font:700 19px/1.3 var(--f-body); color:var(--paper)}
.l3gp .tk li.ok{color:var(--gold-hi)} .l3gp .tk li.cur{outline:2px solid rgba(255,200,61,.5); outline-offset:3px; border-radius:6px}
.l3b{flex:none; width:46px; height:46px; border-radius:50%; border:2px solid var(--gold); background:rgba(255,200,61,.14); color:var(--gold-hi); font:800 22px/1 var(--f-body); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center}
.l3b.big{width:54px; height:54px; background:var(--gold); color:#4a0f19; font-size:26px}
.l3b.rs{border-color:var(--gold-hi)}
.l3b:disabled{opacity:.4; cursor:default}
.l3sp{flex:none; display:flex; flex-direction:column; gap:3px; font:700 17px/1.1 var(--f-body); color:var(--paper)}
.l3sp label{display:flex; align-items:center; gap:7px; cursor:pointer}
.l3sp input{accent-color:var(--gold); width:18px; height:18px}
.phth{position:absolute; left:0; right:0; top:0; bottom:66px; display:grid; place-items:center; font-size:90px; color:var(--gold-hi); background:#2a0a10}
/* zoom: stage fills the whole screen, controls become a slim bottom dock */
.l2.zm{position:fixed!important; left:0; top:0; width:1280px; height:720px; z-index:60; background:#130910; padding:14px 22px 14px!important; box-sizing:border-box; gap:8px}
.l2.zm .l2h{display:none}
.l2.zm .l2b{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:10px}
.l2.zm .l2p{flex-direction:row; flex-wrap:wrap; align-items:center; align-content:flex-start; gap:8px 16px; max-height:250px; padding:8px 14px}
.l2.zm .l2p>.ph{flex:0 0 auto; order:2}
.l2.zm .l2p>.ph b{display:none}
.l2.zm .l2p .tk{flex:1 1 70%; order:1}
.l2.zm .l2p .ctl{order:3}
.l2.zm .l2s svg{overflow:visible}
.l2.zm .l2p .ctl{flex:1 1 60%; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px; width:auto}
.l2.zm .l2p .ctl>*{flex:1 1 auto}
.l2.zm .l2p .ctl .sl{flex:1 1 30%; min-width:250px}
.l2.zm .l2p .ctl>div[style]{flex:1 1 100%}
.l2.zm .l2p .l2act{flex:0 0 auto}
.l2.zm .l2s .zb{top:10px; right:10px; width:44px; height:44px; font-size:26px; z-index:70}
.l2cn{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr); gap:10px; min-height:0}
.l2cn .fm{grid-column:1/-1; text-align:center; font:800 calc(46px*var(--pf))/1.3 var(--f-body); color:var(--gold-hi); border:2px solid var(--gold); border-radius:18px; background:rgba(255,200,61,.08); padding:8px 14px}
.l2cn .cd{border:2px solid rgba(255,246,234,.3); border-radius:18px; background:rgba(0,0,0,.22); padding:10px 16px; min-height:0; overflow:hidden}
.l2cn .cd.wide{grid-column:1/-1}
.l2cn .cd b{display:block; font:800 calc(23px*var(--pf))/1.2 var(--f-body); color:var(--gold-hi); margin-bottom:3px}
.l2cn .cd p{margin:0; font:600 calc(21px*var(--pf))/1.35 var(--f-body); color:var(--paper)}
.l2q{grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:14px; min-height:0}
.l2q .qa,.l2q .qb{min-height:0; min-width:0; border:2px solid rgba(255,200,61,.45); border-radius:22px; background:rgba(0,0,0,.22); padding:14px 18px; display:flex; flex-direction:column; gap:9px; overflow:hidden}
.l2q .stem{font:700 calc(25px*var(--pf))/1.3 var(--f-body); color:var(--paper); white-space:pre-line}
.l2q .qo{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.l2q .qo button{font:700 calc(21px*var(--pf))/1.2 var(--f-body); text-align:left; color:var(--paper); background:rgba(255,246,234,.07); border:2px solid rgba(255,246,234,.3); border-radius:14px; padding:9px 12px; cursor:pointer}
.l2q .qo button.right{background:rgba(255,200,61,.2); border-color:var(--gold)} .l2q .qo button.wrong{background:rgba(224,36,58,.3); border-color:var(--red-hi)} .l2q .qo button.dim{opacity:.5}
.l2q .qb h4{margin:0; font:800 calc(25px*var(--pf))/1.2 var(--f-body); color:var(--gold-hi)}
.l2q .qb .stp{display:flex; flex-direction:column; gap:7px; font:600 calc(21px*var(--pf))/1.3 var(--f-body); color:var(--paper)}
.l2q .qb .stp div.res{color:var(--gold-hi); font-weight:800}
.l2q .qnav{display:flex; gap:10px; align-items:center; margin-top:auto}
.l2q .qnav span{font:700 20px/1 var(--f-body); color:var(--chalk-dim); flex:1}
.l2q .qnav .btn{font-size:22px; padding:7px 18px}