/* Layout concept: a fixed 16:9 classroom slate (1280x720), letterboxed to any window.
   Wine-black slate + cream and gold chalk; gold = right, red = wrong.
   Single deliberate look (chalkboard), so no light/dark pair. */
:root{
  --ink:#08060a; --ink-2:#130910; --wine:#2a0a14; --wine-2:#3b0d1b; --red:#e0243a; --red-hi:#ff4d63; --red-lo:#7d0f21; --gold:#ffc83d; --gold-hi:#ffe49a; --gold-lo:#b87a12; --paper:#fff6ea; --mute:#c9b6ad; --line:rgba(255,200,61,.30);
  --slate:#130910; --slate-d:#08060a; --chalk:#fff6ea; --chalk-dim:rgba(201,182,173,.85);
  --yellow:#ffc83d; --right:#ffe49a; --wrong:#ff4d63; --wood:#3b0d1b; --wood-d:#2a0a14; --room:#08060a;
  --f-display:"Fredoka","Anek Bangla",system-ui,sans-serif;
  --f-body:"Anek Bangla","Noto Sans Bengali",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{
  margin:0; box-sizing:border-box; background:var(--room); color:var(--chalk);
  padding-block:16px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid; place-items:center; overflow:hidden; font-family:var(--f-body);
}
#box{position:relative}
#stage{position:absolute; left:0; top:0; width:1280px; height:720px; transform-origin:0 0; overflow:hidden; user-select:none; -webkit-user-select:none}
#bg,#dust{position:absolute; left:0; top:0; width:1280px; height:720px; pointer-events:none}
#dust{z-index:50}
#slate{position:absolute; left:26px; top:24px; width:1228px; height:644px}
#bar{position:absolute; left:0; top:0; right:0; height:64px; display:flex; align-items:center; gap:14px; padding:0 22px; z-index:5}
#bar[hidden]{display:none}
#crumb{font:800 36px/1.4 var(--f-display); letter-spacing:1.5px; text-transform:uppercase; color:var(--yellow); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-block:6px; text-shadow:0 0 6px rgba(255,200,61,.25)}
.ib{width:46px; height:46px; display:grid; place-items:center; background:none; color:var(--chalk); border:3px solid var(--chalk-dim); border-radius:14px 22px 12px 20px/20px 12px 22px 14px; cursor:pointer; padding:0}
.ib:hover{border-color:var(--yellow); color:var(--yellow)}
.ib svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}
.ib[hidden]{display:none}
.tag.dm{cursor:pointer; background:none}
.tag.dm.on{background:var(--yellow); color:var(--room); border:2px solid var(--yellow)}
.sx b{font-size:16px}
.tag{font:800 24px/1.4 var(--f-display); letter-spacing:1.5px; text-transform:uppercase; color:var(--chalk-dim); border:2px dashed var(--chalk-dim); border-radius:20px; padding:7px 14px; white-space:nowrap}
#scr{position:absolute; left:0; right:0; top:72px; bottom:0; padding:0 40px; -webkit-mask-size:256px 256px; mask-size:256px 256px}
#scr.start{top:0; padding:0}
#wipe{position:absolute; top:0; bottom:0; left:-60%; width:60%; z-index:20; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(238,244,232,.5) 22%,rgba(238,244,232,.6) 70%,transparent); filter:blur(14px)}
#scr{transition:opacity .13s ease, transform .13s ease}
#scr.out{opacity:0; transform:translateY(8px)}
#scr.in{animation:sin .24s ease-out}
@keyframes sin{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
@keyframes wipe{0%{left:-60%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
#toast{position:absolute; left:50%; bottom:84px; transform:translateX(-50%); z-index:30; background:var(--slate-d); color:var(--chalk);
  font:700 28px/1.4 var(--f-body); padding:12px 26px; border:3px solid var(--yellow); border-radius:16px 26px 14px 24px/24px 14px 26px 16px; opacity:0; pointer-events:none; transition:opacity .25s}
#toast.on{opacity:1}

/* chalk bits */
h1,h2,h3,p{margin:0}
.title{white-space:nowrap; font:800 168px/1.05 var(--f-display); letter-spacing:5px; text-transform:uppercase; color:var(--chalk); text-shadow:0 0 14px rgba(255,246,234,.25)}
.title span{color:var(--yellow)}
.h2{font:700 44px/1.4 var(--f-body); color:var(--chalk); margin:2px 0 18px; text-shadow:0 0 8px rgba(255,246,234,.18)}
.h2 em{font-style:normal; color:var(--yellow)}
.btn{font:800 44px/1.4 var(--f-display); letter-spacing:2.5px; text-transform:uppercase; color:var(--room); background:var(--yellow); border:0; padding:20px 44px; cursor:pointer;
  border-radius:20px 34px 18px 30px/30px 18px 34px 20px; box-shadow:0 5px 0 #b87a12}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px); box-shadow:0 2px 0 #b87a12}
.btn.ghost{background:none; color:var(--chalk); border:4px solid var(--chalk); box-shadow:none; padding:14px 30px; font-size:32px}
.btn.ghost:hover{border-color:var(--yellow); color:var(--yellow)}
.btn[disabled]{opacity:.35; cursor:not-allowed; filter:none}
.btn.big{font-size:68px; padding:26px 64px}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.045)}}
.write{animation:write .9s cubic-bezier(.3,.6,.3,1) both}
.write.d2{animation-delay:.7s}
@keyframes write{from{clip-path:inset(-60% 100% -60% -5%)}to{clip-path:inset(-60% -8% -60% -5%)}}
.pop{animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{transform:scale(.86) rotate(-1.5deg);opacity:0}to{transform:none;opacity:1}}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

/* start */
.start .center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px}
.start .sub{font:700 36px/1.4 var(--f-body); color:var(--chalk-dim)}
.doodle{position:absolute; font:400 64px/1.4 var(--f-display); color:var(--chalk); opacity:.4}
.doodle.y{color:var(--yellow)}
.rule{width:620px; height:7px; border-radius:4px; background:var(--yellow); opacity:.9; margin-top:-8px; transform:rotate(-.6deg)}

/* cards */
.row{display:flex; gap:18px}
.cards{display:grid; gap:18px}
.card{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:10px;
  padding:22px 14px 16px; color:var(--chalk); background:rgba(0,0,0,.08); border:4px solid var(--chalk); cursor:pointer; font-family:var(--f-body);
  border-radius:20px 34px 16px 30px/30px 16px 34px 22px; transition:transform .15s, background .15s, border-color .15s}
.card:nth-child(2n){border-radius:30px 16px 32px 18px/18px 32px 16px 28px}
.card:nth-child(3n){border-radius:16px 30px 24px 34px/34px 24px 30px 16px}
.card:hover{transform:translateY(-5px) rotate(-.5deg); background:rgba(255,200,61,.08); border-color:var(--yellow)}
.card .ic{width:84px; height:84px; fill:none; stroke:var(--yellow); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.card .ct{font:800 40px/1.4 var(--f-display); letter-spacing:1.5px; text-transform:uppercase}
.card .ct small{display:block; font:800 32px/1.4 var(--f-display); letter-spacing:1.5px; color:var(--yellow)}
.card .cd{font:600 24px/1.4 var(--f-body); color:var(--chalk-dim)}
.card.locked{border-style:dashed; border-color:var(--chalk-dim); cursor:not-allowed; background:none}
.card.locked:hover{transform:none; background:none; border-color:var(--chalk-dim)}
.card.locked .ic{stroke:var(--chalk-dim)}
.card.locked .ct{color:var(--chalk-dim)}
.badge{position:absolute; top:10px; right:10px; width:38px; height:38px}
.badge svg{width:38px; height:38px; fill:none; stroke:var(--chalk-dim); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round}
.soon{font:700 22px/1.4 var(--f-body); color:var(--yellow); border:2px solid var(--yellow); border-radius:14px; padding:4px 12px}
.home .cards{grid-template-columns:repeat(5,1fr); height:430px; margin-top:6px}
.home .card{padding-top:34px}
.home .card .ic{width:104px; height:104px}
.home .card .ct{font-size:44px}
.home .card .cd{font-size:25px}
.chscroll{position:absolute; left:40px; right:40px; top:0; bottom:8px}
.chgrid{grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); height:100%; gap:10px}
.chgrid .card{align-items:stretch; text-align:left; gap:5px; padding:9px 10px 8px; justify-content:flex-start}
.chtop{display:flex; gap:12px; align-items:flex-start}
.stats{display:flex; flex-direction:column; gap:3px; border-top:2px dashed var(--chalk-dim); padding-top:8px}
.sx{display:flex; justify-content:space-between; align-items:center; font:700 23px/1.4 var(--f-body); color:var(--chalk-dim)}
.sx b{color:var(--yellow); font-weight:700}
.sx svg{width:20px; height:20px; fill:none; stroke:var(--chalk-dim); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round}
.chgrid .no{font:800 40px/1.1 var(--f-display); color:var(--yellow); min-width:34px}
.chgrid .nm{font:700 20px/1.25 var(--f-body)}
.chgrid .chtop{gap:8px}
.chgrid .stats{padding-top:5px; gap:1px}
.chgrid .sx{font-size:17px; line-height:1.25; gap:6px}
.chgrid .sx svg{width:18px; height:18px}
.chgrid .ct2{font:700 22px/1.4 var(--f-body); color:var(--chalk-dim)}
.hub .cards{grid-template-columns:repeat(6,minmax(0,1fr)); height:420px; gap:14px}
.hub .card .ct{font-size:25px; letter-spacing:.3px}
.hub .card{padding-left:8px; padding-right:8px}
.hub .card .cd{font-size:20px}
.hub .card{padding-top:40px}
.hub .card .ic{width:96px; height:96px}
.modes .cards{grid-template-columns:repeat(3,1fr); height:400px}
.modes .card{padding-top:44px}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px}
.chip{font:700 28px/1.4 var(--f-body); color:var(--chalk); background:none; border:3px solid var(--chalk); padding:12px 20px; cursor:pointer; border-radius:16px 26px 14px 24px/24px 14px 26px 16px; display:flex; gap:10px; align-items:center}
.chip small{font:700 22px/1.4 var(--f-body); color:var(--chalk-dim)}
.chip:hover{border-color:var(--yellow)}
.chip.on{background:var(--yellow); color:var(--room); border-color:var(--yellow)}
.chip.on small{color:#7d0f21}
.chip.off{opacity:.35; cursor:not-allowed; border-style:dashed}
.chip.lock{opacity:.55; border-style:dashed; cursor:not-allowed}
.chip.lock svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}
.lbl{font:700 28px/1.4 var(--f-body); color:var(--yellow); margin:6px 0 12px}
.setup-foot{position:absolute; left:40px; right:40px; bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.setup-foot span{font:600 26px/1.4 var(--f-body); color:var(--chalk-dim)}

/* quiz */
.quiz{position:absolute; left:40px; right:40px; top:0; height:490px; display:grid; grid-template-columns:640px 1fr; gap:28px}
.qleft{display:flex; flex-direction:column; min-height:0}
.qmeta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font:700 28px/1.4 var(--f-body); color:var(--yellow)}
.qmeta span{font-size:24px; color:var(--chalk-dim)}
.stem{font:700 34px/1.3 var(--f-body); margin-bottom:12px; max-height:170px; overflow:auto; white-space:pre-line}
.stem.sm{font-size:29px}
.opts{display:flex; flex-direction:column; gap:9px; flex:1; min-height:0; overflow:auto}
.opt{display:flex; gap:16px; align-items:center; text-align:left; font:700 29px/1.4 var(--f-body); color:var(--chalk); background:none; border:3.5px solid var(--chalk); padding:9px 18px; min-height:62px; cursor:pointer;
  border-radius:14px 24px 12px 22px/22px 12px 24px 14px}
.opt:hover{border-color:var(--yellow); background:rgba(255,200,61,.07)}
.opt .k{font:700 30px/1.4 var(--f-body); color:var(--yellow); min-width:34px}
.opt .mk{margin-left:auto; font:700 36px/1.4 var(--f-body)}
.opt.right{border-color:var(--right); background:rgba(255,228,154,.16); color:#fff3d0}
.opt.right .k,.opt.right .mk{color:var(--right)}
.opt.wrong{border-color:var(--wrong); background:rgba(255,77,99,.16); color:#ffe3e1}
.opt.wrong .k,.opt.wrong .mk{color:var(--wrong)}
.opt.dim{opacity:.55}
.opts.done .opt{cursor:default}
.qright{border:3px dashed var(--chalk-dim); border-radius:24px 14px 26px 16px/16px 26px 14px 24px; padding:16px 20px; display:flex; flex-direction:column; min-height:0}
.qright h3{font:700 30px/1.4 var(--f-body); color:var(--yellow); margin-bottom:10px}
.qright .hint{margin:auto; text-align:center; font:700 30px/1.3 var(--f-body); color:var(--chalk-dim)}
.verdict{font:700 34px/1.4 var(--f-body); margin-bottom:8px}
.verdict.right{color:var(--right)} .verdict.wrong{color:var(--wrong)}
.steps{flex:1; overflow:auto; min-height:0; padding-right:6px}
.st{display:flex; gap:12px; margin:0 0 10px}
.st .n{font:700 24px/1.4 var(--f-body); color:var(--room); background:var(--yellow); min-width:34px; height:34px; border-radius:50%; display:grid; place-items:center; margin-top:2px}
.st .tx{font:600 28px/1.45 var(--f-body); color:var(--chalk); white-space:pre-wrap; overflow-wrap:anywhere}
.st .tx.res{color:var(--yellow); font-weight:600}
.qbar{position:absolute; left:40px; right:40px; bottom:6px; height:64px; display:flex; align-items:center; gap:14px}
.tally{font:700 32px/1.4 var(--f-body); display:flex; gap:22px; margin-right:auto}
.tally .r{color:var(--right)} .tally .w{color:var(--wrong)}
.qbar .btn{padding:12px 28px; font-size:30px}
.qbar .btn.ghost{padding:9px 22px; font-size:27px}
.endwrap{display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:14px; text-align:center}
.score{font:400 190px/1.1 var(--f-display); color:var(--yellow); letter-spacing:4px}
.score small{font-size:90px; color:var(--chalk-dim)}
.msg{font:700 40px/1.4 var(--f-body)}
.wl{font:600 27px/1.3 var(--f-body); color:var(--chalk-dim); max-width:900px}
.wl b{color:var(--wrong)}

/* formulas */
.fm{font-family:var(--f-body); font-weight:600; letter-spacing:.2px}
.fr{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 3px; line-height:1.05}
.fr i{font-style:normal; padding:0 5px}
.fr i:first-child{border-bottom:2.5px solid currentColor}
sup,sub{font-size:.62em; line-height:0}
.flip{perspective:1400px; width:880px; height:350px; margin:14px auto 0; cursor:pointer}
.flip>div{position:relative; width:100%; height:100%; transition:transform .6s; transform-style:preserve-3d}
.flip.on>div{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center;
  border:5px solid var(--chalk); border-radius:30px 18px 34px 20px/20px 34px 18px 30px; background:rgba(0,0,0,.14); padding:20px 30px}
.face.back{transform:rotateY(180deg); border-color:var(--yellow)}
.face .small{font:700 28px/1.4 var(--f-body); color:var(--chalk-dim)}
.face .big{font:700 52px/1.4 var(--f-body)}
.face .eq{font-size:76px; color:var(--yellow); line-height:1.3}
.fnav{display:flex; justify-content:center; align-items:center; gap:26px; margin-top:22px}
.fnav .cnt{font:700 32px/1.4 var(--f-body); color:var(--chalk-dim); min-width:120px; text-align:center}
.fb-top{text-align:center; margin-top:4px}
.fb-name{font:700 34px/1.4 var(--f-body); color:var(--chalk-dim); text-align:center; margin-bottom:6px}
.fb-eq{font-size:60px; text-align:center; line-height:1.3; margin:4px 0 14px; min-height:84px}
.blank{display:inline-block; min-width:210px; border-bottom:6px dashed var(--yellow); height:1em; vertical-align:bottom; margin:0 6px}
.filled{color:var(--right)} .filled.bad{color:var(--wrong)}
.fopts{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:1000px; margin:0 auto}
.fopts .opt{justify-content:center; min-height:84px; padding:6px 14px; text-align:center}
.mt{display:grid; grid-template-columns:1fr 1.3fr; gap:26px; height:440px; margin-top:2px}
.mt .col{display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); gap:9px}
.mt .opt{justify-content:center; text-align:center; min-height:0; padding:3px 12px; font-size:25px; line-height:1.2}
.mt .opt.sel{border-color:var(--yellow); background:rgba(255,200,61,.14)}
.mt .opt.done{border-color:var(--right); background:rgba(255,228,154,.14); color:#fff3d0; cursor:default}
.mt .opt.bad{border-color:var(--wrong); background:rgba(255,77,99,.18)}
.tabs{display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.flist{position:absolute; left:40px; right:40px; top:66px; bottom:58px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,minmax(0,1fr)); gap:10px; padding:2px 8px 14px 2px}
.fi{border:3px solid var(--chalk-dim); border-radius:16px 26px 14px 24px/24px 14px 26px 16px; padding:5px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; min-height:0}
.fi .l{min-width:0}
.fi .xp{margin:0; padding:5px 10px; font-size:19px}
.pgnav{position:absolute; left:40px; right:40px; bottom:2px; height:52px; display:flex; justify-content:center; align-items:center; gap:22px}
.pgnav .cnt{font:700 28px/1.4 var(--f-body); color:var(--chalk-dim); min-width:90px; text-align:center}
.pgnav .btn{padding:8px 22px; font-size:28px}
.fi .nm{font:700 20px/1.4 var(--f-body); color:var(--chalk-dim)}
.fi .ex{font-size:32px; color:var(--chalk); line-height:1.2}
.fi .ex b{color:var(--yellow); font-weight:400}
.xp{display:inline-flex; align-items:center; gap:8px; margin-top:6px; font:700 22px/1.4 var(--f-body); color:var(--chalk-dim); background:none; border:2px dashed var(--chalk-dim); border-radius:14px 20px 12px 18px/18px 12px 20px 14px; padding:5px 12px; cursor:not-allowed}
.xp svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round}
.fi .chn{font:700 17px/1.4 var(--f-body); margin-right:8px; color:var(--yellow); border:2px solid var(--yellow); border-radius:12px; padding:3px 9px}
.hklist{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; height:430px}
.hk{text-align:left; color:var(--chalk); cursor:pointer; font-family:var(--f-body); border:4px solid var(--chalk); border-radius:20px 32px 16px 28px/28px 16px 32px 20px; padding:10px 16px; display:flex; flex-direction:column; gap:4px; background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(0,0,0,.14)); min-height:0; overflow:hidden}
.hk:nth-child(2n){border-radius:30px 16px 30px 18px/18px 30px 16px 28px}
.hk:hover{border-color:var(--yellow); transform:translateY(-3px)}
.hk h3{font:700 27px/1.3 var(--f-body); color:var(--yellow)}
.hk p{font:600 21px/1.4 var(--f-body); color:var(--chalk)}
.hk p b{color:var(--chalk-dim)}
.hk .chn{font:700 17px/1.3 var(--f-body); color:var(--chalk-dim)}
.hk .go{margin-top:auto; font:700 20px/1.3 var(--f-body); color:var(--right)}
.hkv{position:absolute; left:40px; right:40px; top:0; height:490px; display:grid; grid-template-columns:480px 1fr; gap:26px}
.hkl{display:flex; flex-direction:column; gap:12px}
.hkl .chn{font:700 22px/1.3 var(--f-body); color:var(--chalk-dim)}
.hkt{font:700 40px/1.3 var(--f-body); color:var(--yellow)}
.when{border:3px solid var(--right); border-radius:18px 26px 16px 24px/24px 16px 26px 18px; padding:12px 18px; background:linear-gradient(180deg,rgba(255,228,154,.18),rgba(255,228,154,.06))}
.when span{font:700 22px/1.3 var(--f-body); color:var(--right)}
.when p{font:600 27px/1.45 var(--f-body); margin-top:4px}
.hkv .st .tx{font-size:29px}
.fig{border:3px dashed var(--chalk-dim); border-radius:18px 26px 16px 24px/24px 16px 26px 18px; padding:8px 12px 6px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12)); text-align:center}
.fig svg{width:100%; height:176px; display:block}
.fig small{font:700 17px/1.3 var(--f-body); color:var(--chalk-dim)}
.note{font:600 24px/1.4 var(--f-body); color:var(--chalk-dim); margin-top:8px}
#gloss{position:absolute; inset:0; z-index:40; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(113deg,rgba(255,255,255,.11) 0,rgba(255,255,255,.05) 36%,rgba(255,255,255,0) 36.2%),
  linear-gradient(180deg,rgba(255,255,255,.10) 0,rgba(255,255,255,0) 14%),
  linear-gradient(113deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.05) 44.2%,rgba(255,255,255,.02) 52%,rgba(255,255,255,0) 52.2%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), inset 0 0 40px rgba(0,0,0,.25)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.13) 0,rgba(255,255,255,.04) 42%,rgba(0,0,0,.14) 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 8px 16px rgba(0,0,0,.4)}
.card.locked{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.card:hover{box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 10px 20px rgba(0,0,0,.45), 0 0 18px rgba(255,200,61,.25)}
.btn{background:linear-gradient(180deg,#ffe49a 0,#ffc83d 48%,#e0a21f 52%,#ffc83d 100%); box-shadow:0 5px 0 #b87a12, 0 10px 18px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.7)}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)); box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 5px 10px rgba(0,0,0,.35)}
.btn:active{box-shadow:0 2px 0 #b87a12, inset 0 2px 0 rgba(255,255,255,.7)}
.chip,.opt,.fi,.hk,.ib,.tag{box-shadow:inset 0 2px 0 rgba(255,255,255,.16), 0 4px 10px rgba(0,0,0,.3)}
.chip.on{background:linear-gradient(180deg,#ffe49a,#ffc83d 50%,#e0a21f); box-shadow:inset 0 2px 0 rgba(255,255,255,.7), 0 4px 0 #b87a12}
.opt{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.01))}
.opt.right{background:linear-gradient(180deg,rgba(255,228,154,.34),rgba(255,228,154,.14)); box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 0 16px rgba(255,228,154,.35)}
.opt.wrong{background:linear-gradient(180deg,rgba(255,77,99,.34),rgba(255,77,99,.14)); box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 0 16px rgba(255,77,99,.35)}
.face{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.18)); box-shadow:inset 0 2px 0 rgba(255,255,255,.22), 0 10px 22px rgba(0,0,0,.4)}
.title{text-shadow:0 0 18px rgba(255,200,61,.2), 0 4px 0 rgba(0,0,0,.35)}
.home .cards{grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.home .card{padding-left:8px; padding-right:8px}
.home .card .ic{width:88px; height:88px}
.home .card .ct{font-size:30px; letter-spacing:.3px}
.home .card .ct small{font-size:26px}
.home .card .cd{font-size:22px}
.lrn{position:absolute; left:40px; right:40px; top:0; height:490px; display:grid; grid-template-columns:420px minmax(0,1fr); gap:22px}
.lrl{display:flex; flex-direction:column; gap:10px; min-height:0}
.lrl .hkt{font-size:34px}
.lrl .when p{font-size:27px}
.lrr{display:flex; flex-direction:column; gap:6px; min-height:0}
.fig.big{flex:1; min-height:0; padding:4px}
.fig.big svg{height:100%; width:100%}
.ro{font:700 25px/1.35 var(--f-body); text-align:center; color:var(--yellow); min-height:36px}
.ctl{display:flex; gap:18px; align-items:center; min-height:64px}
.sl{flex:1; min-width:0; display:flex; flex-direction:column; font:700 21px/1.3 var(--f-body); color:var(--chalk)}
.sl b{color:var(--yellow)}
.sl input{width:100%; accent-color:var(--yellow); height:26px; cursor:pointer}
.angs{display:flex; gap:8px}
.angs .chip{padding:8px 12px; font-size:22px}
.dots{display:flex; gap:9px}
.dots i{width:16px; height:16px; border-radius:50%; border:2.5px solid var(--chalk-dim)}
.dots i.dn{background:var(--chalk-dim)}
.dots i.on{background:var(--yellow); border-color:var(--yellow); box-shadow:0 0 10px rgba(255,200,61,.6)}
#npad{position:absolute; left:0; top:0; width:1280px; height:720px; margin:0; z-index:60; touch-action:none}
#npad[hidden]{display:none}
#padbg{position:absolute; left:26px; top:24px; width:1228px; height:644px; display:none; background:radial-gradient(ellipse at 50% 40%,#3b0d1b,#130910 80%); box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
#npad.blank #padbg{display:block}
#padc{position:absolute; left:0; top:0; width:1280px; height:720px; cursor:crosshair; touch-action:none}
#padbar{position:absolute; left:50%; bottom:58px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:6px; padding:7px 10px; background:rgba(8,6,10,.94); border:3px solid var(--chalk-dim); border-radius:22px; box-shadow:0 8px 24px rgba(0,0,0,.6); white-space:nowrap}
.pb{font:800 17px/1.2 var(--f-display); letter-spacing:.5px; text-transform:uppercase; color:var(--chalk); background:none; border:2.5px solid var(--chalk-dim); border-radius:12px; padding:7px 9px; cursor:pointer}
.pb:hover{border-color:var(--yellow)}
.pb.on{background:var(--yellow); color:var(--room); border-color:var(--yellow)}
.pw{width:1px; height:34px; background:var(--chalk-dim); margin:0 4px}
.sw{width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.35); cursor:pointer; padding:0}
.sw.on{border-color:#fff; box-shadow:0 0 0 3px var(--yellow)}
.hkl .fig{flex:1; min-height:0; display:flex; flex-direction:column}
.hkl .fig svg{flex:1; min-height:0; height:auto; width:100%}
.zx{position:relative}
.zb{position:absolute; top:6px; right:6px; z-index:3; width:34px; height:34px; border-radius:10px; border:2.5px solid var(--chalk-dim); background:rgba(8,6,10,.72); color:var(--chalk); font:700 20px/1 system-ui,sans-serif; cursor:pointer; padding:0; display:grid; place-items:center}
.zb:hover{border-color:var(--yellow); color:var(--yellow)}
.zoomed{position:fixed!important; left:30px; top:92px; width:1170px!important; height:520px!important; max-width:none!important; z-index:45; background:#130910; box-shadow:0 0 0 1400px rgba(0,0,0,.74); margin:0!important; padding:18px 24px!important; overflow:auto; animation:pop .3s both}
.zoomed .st .tx{font-size:40px!important}
.zoomed .st .n{min-width:46px; height:46px; font-size:28px}
.when.zoomed p{font-size:46px!important}
.when.zoomed span{font-size:30px!important}
.qleft.zoomed .stem{font-size:46px!important; max-height:none}
.qleft.zoomed .opt{font-size:40px!important; min-height:92px}
.qright.zoomed .verdict{font-size:44px}
.qright.zoomed h3{font-size:36px}
.zoomed .hint{font-size:42px!important}
.lrr.zoomed .ro{font-size:38px}
.lrr.zoomed .sl{font-size:28px}
.flip.zoomed{height:520px!important}
.mt.zoomed{height:520px!important}
.mt.zoomed .opt{font-size:34px!important}
#rot{position:fixed; inset:0; z-index:99; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center; font:700 22px/1.4 var(--f-body); color:#fff6ea; background:radial-gradient(circle at 50% 40%,#3a0c18,#08060a 70%)}
#rot[hidden]{display:none}
body.sm .ctl .chip,body.sm .ctl button,body.sm .rbtn,body.sm .gbar button,body.sm .nrow .btn,body.sm .pr{position:relative}
body.sm .ctl .chip::after,body.sm .ctl button::after,body.sm .rbtn::after,body.sm .gbar button::after,body.sm .nrow .btn::after{content:'';position:absolute;inset:-9px}
body.sm .ctl{gap:12px}
#rot svg{width:120px; height:120px; animation:rotph 2.4s ease-in-out infinite}
@keyframes rotph{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#rot b{color:var(--yellow); font-size:26px}
#rot button{font:700 18px var(--f-body); color:#ffc83d; background:none; border:2px solid #ffc83d; border-radius:14px; padding:8px 18px}
@media (max-height:520px),(max-width:700px){body{padding-block:4px; padding-left:max(6px,env(safe-area-inset-left,0px)); padding-right:max(6px,env(safe-area-inset-right,0px))}}
.ib{width:42px; height:42px}
.ib svg{width:24px; height:24px}
#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.nh{stroke:none}
.fig svg text{paint-order:stroke;stroke:#0b0709;stroke-width:5px;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))}

/* === v14: wrong-card, real-life strip, stars, teacher mode === */
.lrr{position:relative}
.wrongcard{position:absolute;left:8px;right:8px;top:8px;z-index:6;display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:22px;background:linear-gradient(180deg,#3a0d18,#1c070d);border:3px solid #e0243a;box-shadow:0 7px 0 rgba(0,0,0,.4),0 0 26px rgba(224,36,58,.4);animation:pop .3s both;cursor:pointer}
.wrongcard svg{width:58px;height:58px;flex:none;animation:icb 3s ease-in-out infinite}
.wrongcard .wb{flex:1;font-weight:800;font-size:25px;line-height:1.28;color:#fff6ea}
.wrongcard .wb b{color:#ff9eab;font-weight:800}.wrongcard .wb i{font-style:normal;color:#ffe49a;font-weight:800}
.rl{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding:6px 10px 4px;border-radius:18px;background:linear-gradient(180deg,rgba(255,200,61,.10),rgba(0,0,0,.14));border:2px solid rgba(255,200,61,.32)}
.rl .why{font-size:18px;line-height:1.2;font-weight:700;color:#fff6ea}.rl .why b{color:#ffc83d;font-weight:800}
.rl .row{display:flex;gap:6px;justify-content:space-between}
.rl .it{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;font-size:16px;font-weight:800;color:#ffe49a;text-align:center;line-height:1.05}
.rl svg{width:46px;height:46px;animation:icb 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.7s)}
.stars{color:#ffc83d;font-weight:800;text-shadow:0 0 10px rgba(255,200,61,.7)}
.tmstep{display:none}
.lrr.zoomed .tmstep{display:flex;align-items:center;gap:14px;padding:6px 6px 8px}
.lrr.zoomed .tmstep #tmt{flex:1;font-size:30px;font-weight:700;line-height:1.2;color:#fff6ea}.lrr.zoomed .tmstep #tmt b{color:#ffc83d}
.lrr.zoomed .tmstep .btn{font-size:28px;padding:6px 22px}
#tmb[hidden]{display:none}

/* === v15: visual-first labs === */
.lab2{grid-template-columns:292px minmax(0,1fr)!important;gap:18px!important}
.lab2 .hkt{font-size:30px;line-height:1.15}
.tk.gl{gap:12px;margin-top:10px}
.tk.gl li{align-items:center;gap:12px;padding:12px 14px;border-radius:20px;border:3px solid rgba(255,200,61,.4);background:linear-gradient(180deg,rgba(255,200,61,.14),rgba(255,200,61,.04));font:800 25px/1.1 var(--f-body);color:#fff6ea;cursor:pointer;transition:transform .2s}
.tk.gl li:active{transform:scale(.97)}
.tk.gl li i{width:36px;height:36px;margin-top:0;border-width:4px;position:relative}
.tk.gl li.ok{border-color:var(--right);background:linear-gradient(180deg,rgba(120,230,150,.2),rgba(120,230,150,.05));color:var(--right)}
.tk.gl li.ok i::after{content:'';position:absolute;left:9px;top:3px;width:9px;height:17px;border:solid #08060a;border-width:0 4px 4px 0;transform:rotate(40deg)}
.gfull{font:600 21px/1.35 var(--f-body);color:#ffe49a;margin-top:2px}
.ro{cursor:pointer}
.lrr .ro:not(.open){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.lrr .ro:not(.open)::after{content:''}
.lrr.zoomed .ro{display:block!important;-webkit-line-clamp:unset}
.ro.open{font-size:23px}

/* v16b: enlarged lab = big figure, compact text */
.lrr.zoomed{display:flex!important;flex-direction:column;gap:8px;padding:12px 18px!important;overflow:hidden!important}
.lrr.zoomed .fig.big{flex:1 1 0!important;min-height:120px!important;height:auto!important;padding:0;overflow:hidden}
.lrr.zoomed .fig.big svg{width:100%!important;height:100%!important}
.lrr.zoomed .ro{font-size:22px!important;line-height:1.2;flex:0 0 auto;max-height:none;overflow:visible}
.lrr.zoomed .ctl{flex-wrap:wrap}
.lrr.zoomed .ctl{flex:0 0 auto;min-height:0;gap:10px}
.lrr.zoomed .ctl button,.lrr.zoomed .ctl .chip,.lrr.zoomed .ctl [data-v]{font-size:22px!important;padding:5px 12px!important}
.lrr.zoomed .sl{font-size:20px!important}
.lrr.zoomed .dmb{top:2px}
/* === v16: learn step headline, demo === */
.learn2 .when{padding:10px 16px}
.learn2 .when span{font:800 34px/1.15 var(--f-display,var(--f-body));color:#ffc83d;display:block}
.learn2 .when p{font:600 21px/1.35 var(--f-body)!important;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.learn2 .when p.open{-webkit-line-clamp:unset}
.when.zoomed p{-webkit-line-clamp:unset!important}
.btn.hot{background:linear-gradient(180deg,#e0243a,#8e1226);color:#fff6ea;border-color:#ffc83d;animation:pulseR 1.6s infinite}
@keyframes pulseR{0%,100%{box-shadow:0 0 0 0 rgba(255,200,61,.6)}50%{box-shadow:0 0 0 10px rgba(255,200,61,0)}}
.demoring{position:absolute;z-index:70;border:4px solid #ffc83d;border-radius:20px;box-shadow:0 0 26px rgba(255,200,61,.9),inset 0 0 14px rgba(255,200,61,.5);pointer-events:none;transition:all .35s cubic-bezier(.2,.9,.3,1.2);animation:icb 1.2s ease-in-out infinite}
.dmb{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:8;padding:6px 18px;border-radius:999px;background:linear-gradient(180deg,#e0243a,#8e1226);border:3px solid #ffc83d;color:#fff6ea;font:800 21px/1.2 var(--f-body);box-shadow:0 6px 0 rgba(0,0,0,.4);animation:pop .3s both;pointer-events:none;white-space:nowrap}

/* === v17: quiz + progress === */
.qzo{position:absolute;inset:0;z-index:60;background:rgba(6,3,8,.82);display:flex;align-items:center;justify-content:center;animation:pop .25s both}
.qzc{width:1040px;max-height:640px;background:linear-gradient(180deg,#2a0f18,#14090f);border:4px solid #ffc83d;border-radius:30px;padding:20px 30px 22px;box-shadow:0 12px 0 rgba(0,0,0,.4),0 0 60px rgba(255,200,61,.25);display:flex;flex-direction:column;gap:14px;position:relative}
.qzh{font:800 26px/1 var(--f-body);color:#ffc83d;display:flex;align-items:center;gap:12px}.qzh b{margin-left:auto;margin-right:46px;color:#fff6ea}
.qzx{position:absolute;right:16px;top:14px;width:42px;height:42px;border-radius:12px;border:3px solid var(--chalk-dim);background:rgba(0,0,0,.4);color:#fff6ea;font:700 22px/1 system-ui;cursor:pointer}
.qzq{font:800 36px/1.3 var(--f-body);color:#fff6ea;min-height:94px}
.qzo4{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qzop{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px;min-height:78px;border-radius:20px;border:3px solid rgba(255,246,234,.55);background:rgba(255,246,234,.06);color:#fff6ea;font:700 28px/1.2 var(--f-body);cursor:pointer;transition:transform .12s}
.qzop:hover:not(:disabled){transform:translateY(-2px);border-color:#ffc83d}
.qzop i{flex:none;width:44px;height:44px;border-radius:50%;background:#ffc83d;color:#2a0f18;font:800 26px/44px var(--f-body);text-align:center;font-style:normal}
.qzop.ok{background:linear-gradient(180deg,#2fb36a,#146b3a);border-color:#9bf0be}.qzop.no{background:linear-gradient(180deg,#e0243a,#8e1226);border-color:#ff9eab}
.qzop:disabled{cursor:default}.qzop:disabled:not(.ok):not(.no){opacity:.5}
.qze{min-height:44px;font:600 26px/1.3 var(--f-body);color:#fff6ea}.qze .g{color:#7dffb0}.qze .r{color:#ff9eab}
.qzb{display:flex;gap:14px;justify-content:flex-end;min-height:56px}
.qzbig{font-size:110px;text-align:center;line-height:1.1}.qzs{font:800 40px/1 var(--f-body);color:#fff6ea;text-align:center}
.pgw{padding:6px 14px;display:flex;flex-direction:column;gap:12px;height:100%}
.pgtop{display:flex;align-items:center;gap:26px;padding:0 10px}
.pgring{width:130px;height:130px;flex:none}
.pgsum{font:800 40px/1.35 var(--f-body);color:#fff6ea}.pgsum small{font:600 24px/1 var(--f-body);color:var(--chalk-dim)}
.pggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1;min-height:0}
.pgc{display:flex;flex-direction:column;gap:6px;justify-content:center;text-align:left;padding:8px 14px;border-radius:18px;border:3px solid rgba(255,200,61,.5);background:rgba(255,246,234,.05);color:#fff6ea;cursor:pointer}
.pgc:hover{border-color:#ffc83d}.pgc b{font:800 26px/1 var(--f-body);color:#ffc83d}.pgc .nm{font:700 19px/1.15 var(--f-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pgb{height:12px;border-radius:8px;background:rgba(255,246,234,.14);overflow:hidden}.pgb i{display:block;height:100%;background:#ffc83d;border-radius:8px}.pgb.q i{background:#7ad7ff}
.pgc small{font:700 17px/1 var(--f-body);color:var(--chalk-dim)}

/* === v18: lab picker with figure thumbnails === */
.lpg{display:grid;gap:14px;height:508px;padding:0 6px}
.lpc{display:flex;flex-direction:column;gap:6px;min-height:0;padding:8px;border-radius:22px;border:3px solid rgba(255,200,61,.55);background:linear-gradient(180deg,rgba(255,246,234,.09),rgba(255,246,234,.03));color:#fff6ea;cursor:pointer;text-align:left;transition:transform .12s,border-color .12s}
.lpc:hover{transform:translateY(-3px);border-color:#ffc83d;box-shadow:0 0 28px rgba(255,200,61,.3)}
.lpt{position:relative;flex:1 1 0;min-height:0;border-radius:14px;overflow:hidden;background:rgba(10,5,12,.7)}
.lpt img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lpn{position:absolute;left:8px;top:6px;min-width:34px;height:34px;border-radius:50%;background:#ffc83d;color:#2a0f18;font:800 22px/34px var(--f-body);text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.lps{position:absolute;right:10px;top:4px;font-size:30px}
.lpq{position:absolute;right:8px;bottom:6px;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.65);font:800 18px/1.4 var(--f-body);color:#7ad7ff}
.lpc h3{flex:0 0 auto;font:800 23px/1.2 var(--f-body);color:#ffc83d;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
html[lang=en] .lpc h3{font-size:20px}
.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}
/* ---- full-content additions ---- */
.tabs.dense{gap:6px; margin-bottom:10px; align-items:center; flex-wrap:nowrap}
.tabs.dense .tl{font:700 20px/1.2 var(--f-body); color:var(--chalk-dim); margin-right:4px}
.tabs.dense .chip{font-size:22px; padding:2px 10px; border-width:2.5px; border-radius:12px; gap:6px}
.tabs.dense .chip small{font-size:17px}
.hk p{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.hklist[style*="300px"] .hk p{-webkit-line-clamp:7}
.hkv .steps .st .tx{font-size:var(--sfs,29px)}
.ptabs{display:flex; gap:8px; margin-bottom:8px}
.ptabs .chip{font-size:24px; padding:2px 18px; border-width:3px}
.pq{font:700 25px/1.4 var(--f-body); color:var(--chalk); margin-bottom:8px; padding-bottom:8px; border-bottom:2px dashed var(--chalk-dim)}
.qfig{font:600 20px/1.35 var(--f-body); color:var(--chalk-dim); border:2px dashed var(--chalk-dim); border-radius:12px; padding:5px 12px; margin-bottom:8px}
.qfig b{color:var(--yellow)}
.qtab{border-collapse:collapse; margin:0 0 8px; font:700 22px/1.3 var(--f-body)}
.qtab th,.qtab td{border:2px solid var(--chalk-dim); padding:2px 12px; text-align:center}
.qtab th{color:var(--yellow)}
.cqv .when p{overflow-wrap:anywhere}
.hkv{grid-template-rows:minmax(0,1fr)}
.hkl,.hkv .qright{min-height:0}
.hkv .qright{overflow:hidden}
.qmeta{padding-right:46px}
.quiz .steps .st .tx{font-size:var(--mfs,28px)}
.qleft.tight .stem{font-size:24px; max-height:none; margin-bottom:6px}
.qleft.tight .opt{min-height:44px; padding:3px 14px; font-size:24px; gap:10px}
.qleft.tight .opt .k{font-size:24px}
.qleft.tight .opts{gap:6px}
.qleft.tight2 .stem{font-size:20px!important}
.qleft.tight2 .opt{min-height:36px; padding:2px 12px; font-size:21px; gap:8px}
.qleft.tight2 .opt .k{font-size:21px}
.qleft.tight2 .opts{gap:4px}
.qleft.tight2 .qfig{font-size:17px}
.qleft.tight .qfig{font-size:17px; padding:3px 10px; margin-bottom:5px}
.qleft.tight .qtab{font-size:18px}
.qleft.tight .qmeta{margin-bottom:2px}


/* ===== Wine-Gold theme ===== */
.title{color:var(--gold-hi); text-shadow:0 6px 0 var(--red-lo); letter-spacing:1px; font-size:112px; font-weight:700}
.title span{color:var(--paper)}
#crumb{color:var(--gold-hi); text-shadow:0 3px 0 var(--red-lo); letter-spacing:.5px; font-weight:700}
.hkt,.h2{text-shadow:0 3px 0 var(--red-lo)}
.btn{background:linear-gradient(180deg,#ff4d63 0,#e0243a 50%,#c41d33 100%); color:var(--gold-hi); border:3px solid var(--gold); box-shadow:0 5px 0 var(--red-lo),0 10px 18px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.28); text-shadow:0 2px 0 var(--red-lo); font-weight:700}
.btn:active{box-shadow:0 2px 0 var(--red-lo),inset 0 2px 0 rgba(255,255,255,.28)}
.btn.ghost{background:none; color:var(--paper); border:3px solid var(--line); box-shadow:none; text-shadow:none}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-hi)}
.chip.on{background:linear-gradient(180deg,#ff4d63,#e0243a 55%,#c41d33); color:var(--gold-hi); box-shadow:0 4px 0 var(--red-lo),inset 0 2px 0 rgba(255,255,255,.25); border-color:var(--gold)}
.chip.on small{color:var(--gold)}
.st .n{background:linear-gradient(180deg,#ff4d63,#e0243a); color:var(--gold-hi); border:2px solid var(--gold); box-shadow:0 3px 0 var(--red-lo)}
.st .tx.res{color:var(--gold-hi)}
.chn{color:var(--gold)}
.card,.hk,.qright,.when,.fig{border-color:var(--line)}
.card:hover,.hk:hover{border-color:var(--gold)}
.tag{background:var(--paper); color:var(--ink); border:0; text-shadow:none}
.tag.dm.on{background:linear-gradient(180deg,#ff4d63,#e0243a); color:var(--gold-hi); border:2px solid var(--gold)}
.verdict.right{color:var(--gold-hi)}
.chgrid .card{overflow:hidden; padding:8px 9px 6px}
.chgrid .no{font-size:34px; line-height:1.05; min-width:0; flex:none}
.chgrid .nm{font-size:19px; line-height:1.15; min-width:0; overflow-wrap:anywhere; flex:1}
.chgrid .chtop{gap:6px; align-items:center; min-height:62px}
.chgrid .sx{font-size:15px; line-height:1.15}
.chgrid .stats{padding-top:4px; gap:0}

#lang{display:flex; padding:0; overflow:hidden; cursor:pointer; background:var(--paper); border:0; font:700 22px/1 var(--f-display); letter-spacing:.5px; text-transform:none; border-radius:999px}
#lang span{padding:11px 18px; color:var(--ink); transition:background .2s}
html[lang=en] #crumb{font-size:27px; letter-spacing:0}
html[lang=en] .h2{font-size:38px}
#lang span.on{background:linear-gradient(180deg,#ff4d63,#e0243a); color:var(--gold-hi); text-shadow:0 2px 0 var(--red-lo)}

/* === v24: reference layout — figure left, control panel right === */
.lrn.v24{position:absolute!important; left:40px; right:40px; top:6px; bottom:10px; height:auto!important; display:grid!important; grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)!important; gap:16px!important}
.v24 .lcol{display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0}
.v24 .fig.big{flex:1 1 0; min-height:0; height:auto; padding:6px; border:2.5px solid rgba(255,200,61,.62); border-radius:30px; background:radial-gradient(ellipse at 50% 35%,rgba(255,246,234,.07),rgba(0,0,0,.28)); overflow:hidden; position:relative}
.v24 .fig.big svg{width:100%; height:100%}
.lpan{display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0; padding:18px 24px 16px; border:2.5px solid rgba(255,200,61,.62); border-radius:30px; background:linear-gradient(180deg,rgba(255,246,234,.07),rgba(0,0,0,.2)); overflow:hidden}
.lpan .hkt{font:700 18px/1.25 var(--f-body); color:#ffe49a; opacity:.78; text-shadow:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lpan .more{align-self:flex-start; font:700 17px/1 var(--f-body); color:#ffc83d; background:rgba(255,200,61,.1); border:1.5px solid rgba(255,200,61,.5); border-radius:999px; padding:6px 14px; cursor:pointer}.lpan .more[hidden]{display:none}
.lpan .ins,.lpan .stx{padding-bottom:6px}.lpan .ins{flex:none; font:600 20px/1.26 var(--f-body); color:#fff6ea; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lpan .sh{font:800 27px/1.12 var(--f-body); color:#ffc83d}
.lpan .stx{flex:none; font:600 20px/1.3 var(--f-body); color:#fff6ea; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; margin:0}
.lpan .dots{margin:0}
.lpan .ctl{display:flex; flex-wrap:wrap; gap:7px; align-items:center; min-height:0; align-content:flex-start}

/* ===== PhET shell ===== */
.lrn.v24.ph{display:flex!important; flex-direction:column; gap:8px!important; grid-template-columns:none!important}
.ph .phmain{flex:1 1 0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:14px}
.ph .phmain .fig.big{height:100%; min-width:0}
.ph #lf{touch-action:none}
.ph .phside{display:flex; flex-direction:column; gap:10px; min-height:0; min-width:0}
.ph .phpan{flex:1 1 0; padding:14px 16px 12px; gap:10px; border-radius:26px}
.ph .phpan .sl{font:700 19px/1.3 var(--f-body); max-width:100%; box-sizing:border-box}.ph .phpan .ctl>*{max-width:100%; box-sizing:border-box}.ph .phpan .lpan .ctl .sl input[type=range],.ph .phpan .sl input[type=range]{width:calc(100% - 6px)!important; min-width:60px}
.ph .phpan .ro{font:700 19px/1.25 var(--f-body); text-align:left; margin-top:auto; padding:9px 12px; border:2px solid rgba(255,200,61,.5); border-radius:16px; background:rgba(0,0,0,.28); min-height:0; cursor:default}
.ph .phpan .ctl{flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:9px}
.ph .phpan .ctl .angs{display:flex; flex-wrap:wrap; gap:7px}
.ph .phleg{flex:none; padding:10px 14px; border:2.5px solid rgba(255,200,61,.5); border-radius:22px; background:rgba(0,0,0,.25); display:flex; flex-direction:column; gap:5px}
.ph .phleg:empty{display:none}
.ph .lg{display:flex; align-items:center; gap:9px; font:700 18px/1.2 var(--f-body); color:#fff6ea}.ph .lg svg{flex:none; width:26px; height:26px}
.ck{display:flex; align-items:center; gap:10px; font:700 19px/1.2 var(--f-body); color:#fff6ea; cursor:pointer}.ck input{position:absolute; opacity:0; width:0; height:0}
.ck i{flex:none; width:26px; height:26px; border:3px solid var(--gold); border-radius:8px; position:relative}.ck input:checked+i{background:var(--gold)}
.ck input:checked+i::after{content:''; position:absolute; left:7px; top:1px; width:7px; height:14px; border:solid #08060a; border-width:0 3.5px 3.5px 0; transform:rotate(40deg)}
.phbar{flex:none; height:66px; display:flex; align-items:center; gap:14px; padding:0 16px; border:2.5px solid rgba(255,200,61,.62); border-radius:24px; background:linear-gradient(180deg,rgba(255,246,234,.07),rgba(0,0,0,.25)); position:relative}
.gchip{flex:none; display:flex; align-items:center; gap:9px; padding:7px 14px; border:2.5px solid #ffc83d; border-radius:20px; background:rgba(255,200,61,.12); color:#ffc83d; font:800 19px/1 var(--f-body); cursor:pointer}.gchip svg{width:26px; height:26px}
.gtxt{flex:1; min-width:0; padding:3px 0; font:700 19px/1.4 var(--f-body); color:#fff6ea; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pbs{flex:none; display:flex; align-items:center; gap:12px}
.pbig{width:54px; height:54px; border-radius:50%; border:3px solid #fff6ea; background:radial-gradient(circle at 35% 30%,#ffe49a,#ffc83d 60%,#c9921a); display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 0 #6e4a0a}.pbig svg{width:28px; height:28px}
.pst{display:flex; align-items:center; gap:6px; padding:7px 14px; border:2.5px solid #ffc83d; border-radius:18px; background:none; color:#ffc83d; font:800 18px/1 var(--f-body); cursor:pointer}.pst svg{width:22px; height:22px}.pst:disabled{opacity:.4; cursor:default}
.rd{display:flex; align-items:center; gap:7px; font:700 18px/1 var(--f-body); color:#fff6ea; cursor:pointer}.rd input{position:absolute; opacity:0; width:0; height:0}
.rd i{width:22px; height:22px; border:3px solid var(--gold); border-radius:50%; position:relative}.rd input:checked+i::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--gold)}
.phbar .rbtn{flex:none; width:48px; height:48px}.phbar .rbtn svg{width:26px; height:26px}
.phgl{position:absolute; left:12px; bottom:76px; z-index:6; width:390px; padding:12px; margin:0; border:2.5px solid #ffc83d; border-radius:22px; background:#1a0a10}
.phgl[hidden]{display:none}.phgl li{font:800 19px/1.2 var(--f-body)!important; padding:9px 12px!important}.phgl li i{width:28px!important; height:28px!important}
.phcx{position:absolute; inset:0; z-index:8; display:grid; place-items:center; background:rgba(8,6,10,.78); border-radius:24px}.phcx[hidden]{display:none}
.phcxc{width:760px; max-width:92%; padding:20px 26px; border:3px solid #ffc83d; border-radius:28px; background:linear-gradient(180deg,#3a0c18,#14060c); display:flex; flex-direction:column; gap:9px}
.phcxc h3{font:800 28px/1.15 var(--f-display,var(--f-body)); color:#ffe49a; margin:0 0 4px}
.cxr{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:baseline; font:600 20px/1.3 var(--f-body); color:#fff6ea}.cxr b{color:#ffc83d; font-weight:800}
.phcxc .btn{align-self:flex-end; margin-top:4px}
.v24 .tk.gl.phgl li span{display:block}
.phgl li{padding:10px 12px!important; gap:12px!important; font-size:19px!important}
.lpan .ctl *{min-width:0} .lpan .ctl>*,.lpan .ctl div{flex-wrap:wrap!important; max-width:100%} .lpan .ctl .chip{font-size:20px!important; padding:5px 13px!important; border-radius:22px; border-width:2.5px; line-height:1.25; white-space:normal!important; gap:6px!important}
.lpan .ctl .btn{font-size:25px; padding:9px 24px; letter-spacing:0; text-transform:none}
.lpan .ctl{flex:0 0 auto!important; flex-direction:row!important; flex-wrap:wrap!important} .lpan .ctl>.angs{flex:1 1 100%} .lpan .ctl .sl{flex:1 1 100%!important; min-width:0} .lpan .ctl .sl input[type=range]{width:100%; min-width:80px} .lpan .ctl input[type=range]{max-width:100%}
.lpan .ro{flex:0 0 auto; font:700 19px/1.18 var(--f-body); color:#ffe49a; text-align:left; cursor:default; display:block!important; -webkit-line-clamp:unset!important; max-height:none; min-height:0; padding:10px 18px; border:2.5px solid rgba(255,200,61,.6); border-radius:20px; background:rgba(255,200,61,.08)}
.lpan .ro:empty{display:none!important}
.lpan .btn{background:linear-gradient(180deg,#ffe49a 0,#ffc83d 50%,#e0a21f 100%); color:#5f0817; border:0; border-radius:999px; box-shadow:0 5px 0 #b87a12,0 9px 16px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.65); text-shadow:none; font-size:28px; padding:9px 26px; letter-spacing:0; text-transform:none}
.lpan .btn.ghost{background:none; color:#fff6ea; border:3px solid rgba(255,200,61,.6); box-shadow:none}
.lpan .btn[disabled]{opacity:.4}
.prow,.nrow{margin-top:auto; display:flex; align-items:center; gap:12px; flex:none}
.prow #sc,.nrow #sc{font:700 19px/1.2 var(--f-body); color:#c9bfb0; margin-left:auto}
.rbtn{flex:none; width:46px; height:46px; border-radius:50%; border:3px solid rgba(255,200,61,.7); background:rgba(255,255,255,.06); color:#ffe49a; font:800 28px/1 system-ui,var(--f-body); cursor:pointer; display:grid; place-items:center; padding:0}
.rbtn:hover{border-color:#ffc83d; color:#fff}
.rbtn[disabled]{opacity:.35; cursor:not-allowed}
.v24 .tk.gl{flex-direction:row; gap:9px; margin:0; padding:0; flex-wrap:wrap}
.v24 .tk.gl li{padding:0; border:0; background:none; gap:0; width:auto; box-shadow:none; font-size:0}
.v24 .tk.gl li span{display:none}
.v24 .tk.gl li i{display:block; flex:none; box-sizing:border-box; width:26px; height:26px; border:3px solid #ffc83d!important; border-radius:50%}
.v24 .tk.gl li.ok i{background:#78e696; border-color:#78e696!important}
.v24 .tk.gl li.ok i::after{left:6px; top:1px; width:7px; height:13px}
.v24 .rl{margin-top:0; flex:none; padding:10px 18px 8px; gap:6px; border-radius:22px}.v24 .rl .why{font-size:19px; line-height:1.3}.v24 .rl .it{font-size:19px; line-height:1.15; gap:3px; font-weight:700}.v24 .rl svg{width:50px; height:50px}
.phd{display:flex; gap:10px; align-items:flex-start; flex:none}.phd .hkt{flex:1; min-width:0}.rbtn.sm{width:40px; height:40px; font-size:24px}.prow{margin-top:auto}.lcol{position:relative}.gbar{position:absolute; left:22px; top:20px; z-index:4; display:flex; align-items:center; gap:10px; padding:4px 12px 4px 8px; border-radius:999px; background:rgba(10,5,12,.72); border:2px solid rgba(255,200,61,.5)}.gbar #sc{font:700 19px/1.2 var(--f-body); color:#e9dfd0}.lrn.v24{top:0!important; bottom:6px!important} .pick .pv{cursor:pointer}
.pick .pv img{position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; border-radius:20px}
.pl{flex:1 1 0; min-height:0; display:flex; flex-direction:column; gap:7px; overflow:hidden; --pf:22px}
.pr{flex:none; display:flex; align-items:center; gap:10px; text-align:left; font:700 var(--pf)/1.18 var(--f-body); color:#fff6ea; padding:var(--pp,7px) 12px var(--pp,7px) 8px; border:2.5px solid rgba(255,246,234,.35); border-radius:999px; background:rgba(255,255,255,.04); cursor:pointer}
.pr b{flex:none; width:1.55em; height:1.55em; border-radius:50%; background:#ffc83d; color:#2a0f18; display:grid; place-items:center; font-size:.9em}
.pr span{flex:1; min-width:0}
.pr em{font-style:normal; flex:none}
.pr:hover{border-color:#ffc83d}
.pr.on{background:linear-gradient(180deg,#ff4d63,#e0243a 55%,#c41d33); border-color:#ffc83d; box-shadow:0 4px 0 var(--red-lo),inset 0 2px 0 rgba(255,255,255,.25)}
/* ---- CQ view v2: steps left, stimulus+questions right ---- */
.cqn .cql{padding:14px 18px 10px}
.cqn .cql .steps{flex:1; min-height:0; padding-right:40px}
.cqn .cqtabs{border-top:2px dashed var(--chalk-dim); padding-top:10px; margin-top:6px; display:flex; justify-content:center}
.cqn .ptabs{margin:0; gap:10px}
.cqn .ptabs .chip{font-size:26px; padding:2px 20px; min-width:64px; border-width:3px}
.cqn .hkl{min-height:0}
.cqn .hkl .when{flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:6px}
.cqn .hkl .when p{font-weight:600}
.cqn .hkl .fig{flex:1 1 0; min-height:60px}
.cqn .qlst{border-top:2px dashed var(--chalk-dim); padding-top:8px; margin-top:4px; display:flex; flex-direction:column; gap:4px; font:600 22px/1.35 var(--f-body)}
.cqn .qi{display:flex; gap:12px; cursor:pointer; padding:3px 8px; border-radius:10px; border:2px solid transparent}
.cqn .qi b{color:var(--gold-hi,#ffc83d); font-weight:800; min-width:26px}
.cqn .qi span{color:var(--chalk); font:inherit}
.cqn .qi.on{background:rgba(255,200,61,.14); border-color:var(--gold,#e8b53a)}
.cqn .qi:not(.on){opacity:.82}

/* flist overlap fix + proof */
.fi .nm{display:flex; align-items:center; gap:10px; line-height:1.6; min-height:34px; margin-bottom:6px}
.fi .nm .nmt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.7}
.fi .chn{line-height:1.5; padding:0 9px; margin:0; flex:none; font-size:16px}
.fi .ex{line-height:1.6; padding-top:4px}
.fi .xp{cursor:pointer; color:var(--gold-hi,#ffc83d); border-color:var(--gold,#e8b53a); border-style:solid; padding:6px 12px; align-self:center; gap:6px}
.fi .xp:hover{background:rgba(255,200,61,.14)}
.pfov{position:absolute; inset:0; z-index:60; display:grid; place-items:center; background:rgba(8,4,8,.78)}
.pfcard{position:relative; width:1000px; max-height:640px; border:3px solid var(--gold,#e8b53a); border-radius:22px; background:#1b0d12; padding:18px 28px 16px; display:flex; flex-direction:column; gap:8px}
.pfx{position:absolute; right:14px; top:12px; width:44px; height:44px; border-radius:50%; border:2px solid var(--chalk-dim); background:none; color:var(--chalk); font-size:22px; cursor:pointer}
.pft{font:800 30px/1.3 var(--f-body); color:var(--gold-hi,#ffc83d); padding-right:56px}
.pfeq{font-size:38px; line-height:1.5; color:var(--chalk); border-bottom:2px dashed var(--chalk-dim); padding-bottom:6px}
.pfeq b{color:var(--yellow); font-weight:400}
.pfh,.pfr{display:grid; grid-template-columns:110px 1fr 40px 1fr 50px; align-items:center; gap:10px}
.pfh{font:700 19px/1.3 var(--f-body); color:var(--chalk-dim)}
.pfr{min-height:50px; border-radius:12px; background:rgba(255,255,255,.05); padding:2px 8px}
.pfe{font:800 30px/1.2 var(--f-body); color:var(--gold-hi,#ffc83d)}
.pfc{display:flex; align-items:center; gap:12px; min-width:0}
.pfc strong{font:800 30px/1.2 var(--f-body); color:var(--chalk); min-width:34px}
.pfd{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.pfd i{width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe9a8,#e0a31c); display:block}
.pfd em{color:var(--chalk-dim); font-style:normal}
.pfq{font:800 30px/1 var(--f-body); color:var(--chalk-dim); text-align:center}
.pfok{font:800 30px/1 var(--f-body); color:#5be28a; text-align:center}
.pfn{font:700 22px/1.4 var(--f-body); color:var(--chalk); margin-top:4px}

/* lab2 goal rings in header, no count */
.lab2 .phd{align-items:center}
.lab2 .gbar.gin{position:static; padding:0; background:none; border:0; box-shadow:none; margin:0; flex:none}
.lab2 .gbar.gin .tk.gl{margin:0}
.lab2 .lpan{display:flex; flex-direction:column}
.lab2 .lpan .ctl{flex:none}
.lab2 .lpan .ro{margin-top:auto}

.pfch{display:flex; gap:10px; flex-wrap:wrap}
.pfchi{display:flex; align-items:center; gap:8px; padding:4px 14px; border-radius:14px; border:2px solid rgba(255,200,61,.5); background:rgba(255,200,61,.1); font:700 22px/1.3 var(--f-body); color:var(--chalk)}
.pfchi b{color:var(--gold-hi,#ffc83d); font-weight:800}
.pfst{display:flex; flex-direction:column; gap:8px; font:600 26px/1.4 var(--f-body); color:var(--chalk)}
.pfs{display:flex; gap:12px; align-items:flex-start}
.pfs .n{flex:none; min-width:1.5em; height:1.5em; border-radius:50%; display:grid; place-items:center; font-size:.8em; font-weight:800; color:var(--gold-hi,#ffc83d); background:linear-gradient(180deg,#ff4d63,#e0243a); border:2px solid var(--gold,#e8b53a); margin-top:.1em}
.pfs.res .tx{color:var(--gold-hi,#ffc83d); font-weight:800}
.pfs.res .n{background:#2e8b57; color:#fff}

/* ===== CQ screens v2 ===== */
.cql6{height:352px}.cql6 .hk p{font-size:20px;-webkit-line-clamp:4}
.cqc{position:relative; cursor:pointer}.cqc{padding-left:52px!important}.cqc .cxv{color:var(--gold); font-size:24px}
.cxck{position:absolute; left:12px; top:12px; width:28px; height:28px; border:3px solid var(--gold); border-radius:8px; background:rgba(0,0,0,.25); display:grid; place-items:center}.cxck.on{background:var(--gold)}.cxck.on::after{content:"✓"; color:var(--ink); font:800 22px/1 var(--f-body)}
.cxpg .cxsel{font:700 24px/1 var(--f-body); color:var(--chalk-dim); margin-left:18px}.cxpg .cxsel b{color:var(--gold-hi)}.cxpg .btn{padding:6px 18px; font-size:24px}
.cqx{position:absolute; left:40px; right:40px; top:0; bottom:0; display:grid; grid-template-columns:620px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 74px; gap:0 22px}
.cxzm{grid-column:1/-1; min-height:0; display:flex; flex-direction:column; gap:6px; padding-top:0; overflow:hidden}
.cxcap{display:flex; align-items:center; gap:16px; font:700 22px/1.2 var(--f-body); color:var(--chalk-dim); min-height:40px}
.cxqs{display:inline-flex; align-items:center; gap:8px}.cxqs b{color:var(--chalk); font-size:22px}.cxqs button{width:34px; height:34px; border-radius:50%; border:2px solid var(--gold); background:none; color:var(--gold-hi); font:700 22px/1 var(--f-body); cursor:pointer}.cxqs button:disabled{opacity:.3}
.cxbd{margin-left:auto; background:linear-gradient(180deg,#ffe49a,#ffc83d); color:#5a3600; border-radius:999px; padding:2px 14px; font-size:18px}
.cxzb,.cxsb{flex:1 1 0; min-height:0; overflow:hidden; border:3px solid rgba(255,200,61,.6); border-radius:26px; background:rgba(255,200,61,.06); padding:14px 44px 12px 20px; position:relative}
.cxlb{font:800 22px/1.2 var(--f-body); color:var(--gold); margin-bottom:4px}
.cxzt,.cxrs{font-weight:600; line-height:1.4; color:var(--chalk)}
.cxtb{border-collapse:collapse; margin:6px 0; font-size:.85em}.cxtb th,.cxtb td{border:2px solid var(--gold); padding:1px 12px; text-align:center}.cxtb th{color:var(--gold-hi); background:rgba(255,200,61,.14)}
.cxfg{font-size:.7em; color:var(--chalk-dim); margin-top:6px; white-space:normal}
.cxzq{border-top:2px dashed var(--chalk-dim); padding-top:6px; font:600 26px/1.3 var(--f-body)}
.cxqr{display:flex; gap:12px; padding:2px 10px; border-radius:12px; border:2px solid transparent; cursor:pointer; color:var(--chalk)}.cxqr b{color:var(--gold-hi); font-weight:800; min-width:1.1em}.cxqr span{flex:1}.cxqr i{color:var(--gold); font-style:normal; font-weight:700}
.cxqr.on{background:rgba(224,36,58,.28); border-color:var(--gold)}
.cxf{grid-column:1/-1; display:flex; align-items:center; gap:14px; justify-content:flex-end}
.cxf .btn{padding:8px 24px; font-size:28px}.cxf .btn.ghost{padding:8px 24px}.cxf .btn:disabled{opacity:.4}
.cxf .btn span+span{margin-left:.3em}.cxf .cxcon{font-size:16px; border-color:var(--gold)}
.cxs .st .tx{text-wrap:pretty; min-width:0; overflow-wrap:anywhere}.cxs .st{min-width:0}.cxcc{font:700 40px/1 var(--f-body); color:var(--chalk-dim); margin-right:auto}.cxsp{display:none}
.cxl{position:relative; min-height:0; display:flex; flex-direction:column; border:3px dashed var(--gold); border-radius:26px; background:rgba(0,0,0,.18); padding:12px 18px 10px; margin-top:4px}
.cxqh{display:flex; gap:10px; font:700 26px/1.3 var(--f-body); color:var(--gold-hi); border-bottom:2px solid var(--gold); padding:0 52px 6px 0; margin-bottom:8px}.cxqh span{flex:1}.cxqh i{font-style:normal}
.cxs{flex:1 1 0; min-height:0; overflow:hidden}
.cxs .st{margin:0 0 8px}.cxs .st .tx{font-size:var(--sfs,34px); line-height:1.32; font-weight:700}
.cxs .st .n{min-width:36px; height:36px; font-size:22px; box-shadow:0 3px 0 var(--red-lo)}
.cxpt{display:flex; justify-content:center; gap:10px; padding-top:8px; border-top:2px dashed var(--chalk-dim); margin-top:6px}
.cxt{width:84px; height:56px; font:700 30px/1 var(--f-body); color:var(--chalk); background:none; border:3px solid var(--chalk); border-radius:18px 24px 16px 22px/22px 16px 24px 18px; cursor:pointer}
.cxt.on{background:var(--red); border-color:var(--gold); color:var(--gold-hi); box-shadow:0 4px 0 var(--red-lo)}
.cxz{position:absolute; right:10px; top:8px; width:44px; height:44px; border-radius:12px; border:2px solid var(--gold); background:rgba(0,0,0,.35); color:var(--gold-hi); font:700 24px/1 var(--f-body); cursor:pointer; z-index:2}
.cxr{min-height:0; display:flex; flex-direction:column; gap:8px; padding-top:4px}
.cxsb{display:flex; flex-direction:column; gap:6px; padding-top:10px}.cxsb .cxlb{font-size:28px}.cxsb .cxrs{flex:0 0 auto}
.cxsb.tight .cxrs{font-size:15px!important}
.cxrq{border-top:2px dashed var(--chalk-dim); margin-top:6px; padding-top:6px; font-weight:600; line-height:1.3}
.cxovb{overflow:auto!important}.cxovb .st .n{min-width:calc(var(--sfs)*1.25); height:calc(var(--sfs)*1.25); font-size:calc(var(--sfs)*.75)}
.cxov{position:absolute; inset:0; background:rgba(8,6,10,.985); z-index:20; padding:20px 50px; display:flex; flex-direction:column; gap:10px}.cxov .cxz{top:14px; right:20px}
.cxovh{display:flex; gap:12px; font:700 28px/1.3 var(--f-body); color:var(--gold-hi); border-bottom:2px solid var(--gold); padding-bottom:6px}