/* 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:not([lang="en"]){ --f-display:"Anek Bangla","Noto Sans Bengali",system-ui,sans-serif }
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 150px/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}
/* ---- Teacher MCQ Set Builder (.pk*) ---- */
.pkw{display:flex; flex-direction:column; height:100%; box-sizing:border-box; gap:8px; padding:4px 0 6px; min-height:0}
.pkt{display:flex; gap:10px; flex:none}
.pkt button{font:700 24px/1.2 var(--f-body); color:var(--chalk); background:none; border:3px solid var(--chalk-dim); border-radius:999px; padding:6px 22px; cursor:pointer; white-space:nowrap}
.pkt button.on{background:var(--yellow); color:#4a0a14; border-color:var(--yellow)}
.pkb{flex:1; min-height:0; display:flex; flex-direction:column; position:relative; gap:8px}
.pkb>.lbl{font-size:26px; margin:0}
.pkb>.chips{gap:8px; margin-bottom:0}
.pkb>.chips .chip{font-size:22px; padding:5px 14px; border-width:2.5px}
.pkfoot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:6px}
.pkfoot>span{font:600 24px/1.4 var(--f-body); color:var(--chalk-dim)}
.pkun{color:var(--yellow); cursor:pointer; text-decoration:underline; white-space:nowrap}
.pkbtn{font:700 22px/1.2 var(--f-body); color:var(--chalk); background:rgba(0,0,0,.25); border:2.5px solid var(--chalk-dim); border-radius:14px; padding:7px 16px; cursor:pointer; white-space:nowrap}
.pkbtn.go{background:linear-gradient(180deg,var(--red-hi,#ff4d63),var(--red,#c4132b)); border-color:var(--yellow); color:#fff6ea}
.pkbtn.on{background:var(--yellow); color:#4a0a14; border-color:var(--yellow)}
.pkbtn.warn{border-color:#ff9aa6; color:#ff9aa6}
.pkbtn:disabled,.pkn:disabled,.pkpg button:disabled,.pkf:disabled{opacity:.35; cursor:not-allowed}
.pkp{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 470px; gap:14px}
.pkl{display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0}
.pkchs{display:flex; flex-wrap:wrap; gap:6px; flex:none}
.pkch2{font:700 20px/1.2 var(--f-body); color:var(--chalk); background:none; border:2.5px solid var(--chalk-dim); border-radius:12px; padding:3px 10px; cursor:pointer; white-space:nowrap; position:relative}
.pkch2.on{background:var(--yellow); color:#4a0a14; border-color:var(--yellow)}
.pkch2.off{opacity:.3; cursor:not-allowed; border-style:dashed}
.pkch2 i,.pkc i{font-style:normal; font-size:13px; font-weight:800; background:var(--yellow); color:#4a0a14; border-radius:999px; min-width:20px; height:20px; line-height:20px; text-align:center; position:absolute; top:-8px; right:-6px; padding:0 4px; box-shadow:0 0 0 2px #2a0a10}
.pkgrid{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); gap:6px; flex:1; min-height:0}
.pkc{position:relative; font:700 22px/1 var(--f-body); color:var(--chalk); background:rgba(0,0,0,.22); border:2.5px solid var(--chalk-dim); border-radius:12px; cursor:pointer; padding:0; min-width:0}
.pkc.cur{border-color:#fff6ea; box-shadow:0 0 0 3px rgba(255,246,234,.55)}
.pkc.on{background:linear-gradient(180deg,#ffe49a,#ffc83d); color:#4a0a14; border-color:var(--yellow)}
.pkc.hid{border-style:dashed; opacity:.55; text-decoration:line-through}
.pkc u{position:absolute; left:6px; bottom:6px; width:9px; height:9px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.pkc.on u{background:#4a0a14}
.pkempty{grid-column:1/-1; align-self:center; text-align:center; font:600 24px/1.4 var(--f-body); color:var(--chalk-dim); padding:16px}
.pkctl{display:flex; align-items:center; gap:8px; flex:none; flex-wrap:nowrap}
.pkf{font:700 18px/1.2 var(--f-body); color:var(--chalk); background:none; border:2.5px solid var(--chalk-dim); border-radius:10px; padding:4px 10px; cursor:pointer; white-space:nowrap}
.pkf.on{background:var(--yellow); color:#4a0a14; border-color:var(--yellow)}
.pkpg{display:flex; align-items:center; gap:6px; margin-left:auto; font:700 20px/1 var(--f-body); color:var(--chalk); white-space:nowrap}
.pkpg button{font:700 24px/1 var(--f-body); color:var(--chalk); background:none; border:2.5px solid var(--chalk-dim); border-radius:10px; width:36px; height:34px; cursor:pointer; padding:0}
.pkgap{flex:1}
.pkr{display:flex; flex-direction:column; border:2.5px solid var(--yellow); border-radius:18px; background:rgba(0,0,0,.28); padding:10px 14px; min-height:0; min-width:0; gap:6px}
.pkrh{display:flex; align-items:center; justify-content:space-between; gap:8px; font:700 19px/1.2 var(--f-body); color:var(--yellow); flex:none}
.pkhid{font:700 17px/1.2 var(--f-body); color:var(--chalk); background:none; border:2px solid var(--chalk-dim); border-radius:10px; padding:2px 10px; cursor:pointer; white-space:nowrap}
.pkhid.on{border-color:var(--yellow); color:var(--yellow)}
.pkrb{flex:1; min-height:0; overflow:hidden; font-size:var(--pkfs,26px); line-height:1.3; color:var(--chalk); display:flex; flex-direction:column; gap:.4em}
.pkstem{font-weight:700; white-space:pre-wrap}
.pkfg{flex:none; height:88px; display:flex; justify-content:center; font-size:15px}
.pkfg svg{height:100%; width:auto; max-width:100%}
.pkr .qtab{font-size:.62em!important}
.pko{display:grid; grid-template-columns:1fr; gap:.25em}
.pko.two{grid-template-columns:1fr 1fr; gap:.25em .6em}
.pko>div{display:flex; gap:.4em; align-items:baseline; border:2px solid transparent; border-radius:10px; padding:.05em .4em; font-size:.88em}
.pko>div.right{border-color:#5ee08a; background:rgba(94,224,138,.14); font-weight:700}
.pko em{margin-left:auto; font-style:normal; color:#5ee08a}
.pkrf{display:flex; gap:8px; align-items:center; flex:none}
.pkrf .pkbtn{flex:1}
.pkn{font:700 28px/1 var(--f-body); color:var(--chalk); background:none; border:2.5px solid var(--chalk-dim); border-radius:12px; width:46px; height:44px; cursor:pointer; padding:0; flex:none}
.pkbar{display:flex; align-items:center; gap:10px; flex:none; padding:6px 0 8px; border-top:2px solid rgba(255,246,234,.2)}
.pkcount{font:700 24px/1.2 var(--f-body); color:var(--yellow); white-space:nowrap}
.pkord{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:16px}
.pkol{display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0}
.pkrows{display:flex; flex-direction:column; gap:6px; flex:1; min-height:0}
.pkrow{display:flex; align-items:center; gap:8px; flex:1; min-height:0; border:2px solid var(--chalk-dim); border-radius:12px; padding:0 8px; background:rgba(0,0,0,.2)}
.pkno{font:800 22px/1 var(--f-body); color:var(--yellow); min-width:34px; text-align:center}
.pkcht{font:700 17px/1 var(--f-body); color:var(--chalk-dim); white-space:nowrap}
.pkqt{flex:1; min-width:0; padding:2px 0; font:600 20px/1.45 var(--f-body); color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pkrow button{font:700 18px/1 var(--f-body); color:var(--chalk); background:none; border:2px solid var(--chalk-dim); border-radius:8px; width:36px; height:34px; cursor:pointer; padding:0; flex:none}
.pkrow button:disabled{opacity:.3}
.pkor{display:flex; flex-direction:column; gap:10px; border:2.5px solid var(--yellow); border-radius:18px; padding:14px; background:rgba(0,0,0,.28); align-content:start}
.pkor label{font:700 22px/1.2 var(--f-body); color:var(--yellow)}
.pkor input,.pkimp input{font:600 22px/1.3 var(--f-body); color:var(--chalk); background:rgba(0,0,0,.35); border:2.5px solid var(--chalk-dim); border-radius:12px; padding:8px 12px; min-width:0; width:100%; box-sizing:border-box}
.pkrow2{display:flex; gap:8px}
.pkrow2 .pkbtn{flex:1}
.pkimp{display:flex; gap:10px; flex:none}
.pksets{flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px}
.pkset{display:flex; flex-direction:column; justify-content:space-between; gap:8px; border:2.5px solid var(--chalk-dim); border-radius:16px; padding:10px 14px; background:rgba(0,0,0,.22); min-width:0}
.pkset.pin{border-color:var(--yellow)}
.pkst{display:flex; flex-direction:column; min-width:0}
.pkst b{padding:4px 0; font:700 24px/1.5 var(--f-body); color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pkst span{font:600 19px/1.3 var(--f-body); color:var(--chalk-dim)}
.pksa{display:flex; gap:6px}
.pksa .pkbtn{flex:1; font-size:19px; padding:5px 8px}
.pkmodal{position:absolute; inset:0; background:rgba(0,0,0,.78); display:flex; align-items:center; justify-content:center; z-index:5; border-radius:16px}
.pkmb{width:760px; max-width:94%; display:flex; flex-direction:column; gap:10px; border:2.5px solid var(--yellow); border-radius:18px; padding:16px; background:#1a0a10}
.pkmb b{font:700 24px/1.2 var(--f-body); color:var(--yellow)}
.pkmb textarea{font:600 18px/1.3 monospace; color:var(--chalk); background:rgba(0,0,0,.4); border:2.5px solid var(--chalk-dim); border-radius:12px; padding:10px; height:150px; resize:none; width:100%; box-sizing:border-box; word-break:break-all}
.pkqb{display:flex; gap:8px; align-items:center}
.pkqb .btn{font-size:21px; padding:6px 14px; white-space:nowrap}
.pkqb .btn.on{background:var(--yellow); color:#4a0a14}
.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:minmax(0,1fr) 640px; gap:28px}
.quiz>.qleft{order:2}
.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.35 var(--f-body); margin-bottom:12px; max-height:170px; overflow:visible; 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:4px 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 19px/1.35 var(--f-body); color:var(--chalk-dim); display:flex; align-items:center; gap:8px; min-width:0; padding:1px 0 2px; white-space:nowrap}
.fi .nm>span:last-child,.fi .nm .t{min-width:0; overflow:hidden; text-overflow:ellipsis}
.fi .ex{font-size:32px; color:var(--chalk); line-height:1.25; padding-top:0; overflow:hidden}
.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 15px/1.2 var(--f-body); margin:0; flex:none; color:var(--yellow); border:2px solid var(--yellow); border-radius:12px; padding:1px 9px}
.hklist.h8{grid-template-columns:repeat(4,minmax(0,1fr))}
.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:minmax(0,1fr) 480px; gap:26px}
.hkv>.hkl{order:2}
.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}
.why{margin-top:auto; display:flex; flex-direction:column; gap:6px; padding-top:6px}
.why .wq{font:700 calc(23px*var(--ws,1))/1.3 var(--f-body); color:var(--gold-hi)}
.why .wq b{color:var(--red-hi); background:var(--paper); border-radius:999px; padding:0 10px; margin-right:4px; color:#7d0f21}
.why .wl{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.why .wl span{font:700 calc(20px*var(--ws,1))/1.3 var(--f-body); color:var(--chalk-dim)}
.why .wl i{font:700 calc(20px*var(--ws,1))/1.3 var(--f-body); font-style:normal; color:#2a0a10; background:var(--paper); border-radius:999px; padding:1px 12px; box-shadow:0 3px 0 rgba(0,0,0,.35)}
.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{overflow:hidden; gap:8px; padding:12px 16px!important}
.lrr.zoomed .ro{font-size:20px; line-height:1.25; min-height:0; padding-bottom:7px}
.lrr.zoomed .sl{font-size:26px}
.lrr.zoomed .ctl .chip,.lrr.zoomed .angs .chip{font-size:27px; padding:8px 16px}
.lrr.zoomed .fig.big{flex:1 1 0; min-height:0}
.flip.zoomed{height:520px!important}
.mt.zoomed{height:520px!important}
.mt.zoomed .opt{font-size:34px!important}
#rot{position:fixed; top:6px; left:50%; transform:translateX(-50%); z-index:99; font:700 15px/1.4 var(--f-body); color:var(--yellow); background:rgba(8,6,10,.92); border:2px solid var(--yellow); border-radius:14px; padding:5px 12px; white-space:nowrap}
.ib{width:42px; height:42px}
.ib svg{width:24px; height:24px}
#bar{gap:10px}
@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}
.hk.lbk{padding:calc(10px*var(--s,1)) calc(16px*var(--s,1)); gap:calc(4px*var(--s,1))}
.hk.lbk h3{font-size:calc(27px*var(--s,1))}
.hk.lbk p{font-size:calc(21px*var(--s,1)); display:block; -webkit-line-clamp:unset; overflow:visible}
.hk.lbk .chn{font-size:calc(17px*var(--s,1))}

.hk.lbk.lth{padding:0; gap:0; position:relative; overflow:hidden; border-width:3px}
.hk.lbk.lth img.lth{position:absolute; left:0; right:0; top:0; bottom:66px; width:100%; height:calc(100% - 66px); object-fit:contain; display:block; background:#2a0a10}
.hk.lbk.lth .no{position:absolute; left:10px; top:8px; z-index:2; min-width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:700 22px/1 var(--f-body); color:var(--gold-hi); background:linear-gradient(180deg,#ff4d63,#e0243a); border:2px solid var(--gold); box-shadow:0 3px 0 var(--red-lo)}
.hk.lbk.lth h3{position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0; height:66px; box-sizing:border-box; padding:5px 12px; display:flex; align-items:center; font:700 calc(22px*var(--s,1))/1.2 var(--f-body); color:#fff; background:#3a0d16; border-top:2px solid var(--gold)}
.hk.lbk .go{font-size:calc(20px*var(--s,1))}
.doodle .fr{font-size:.8em}
.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)}
.qfg{height:100%; max-height:460px; display:flex; flex-direction:column}
.qfg svg{flex:1; min-height:0; width:100%; height:auto}
.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.tight3 .stem{font-size:17px!important}
.qleft.tight3 .opt{min-height:28px; padding:1px 10px; font-size:18px; gap:6px}
.qleft.tight3 .opt .k{font-size:18px}
.qleft.tight3 .opts{gap:3px}
.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,.lg2{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,.lg2 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,.lg2 span.on{background:linear-gradient(180deg,#ff4d63,#e0243a); color:var(--gold-hi); text-shadow:0 2px 0 var(--red-lo)}
.cql{display:flex; flex-direction:column; gap:6px} .pbar{margin:auto 0 0; padding-top:10px; border-top:2px dashed var(--chalk-dim); justify-content:center; gap:10px} .pbar .chip{font-size:26px; padding:4px 22px; min-width:70px; justify-content:center}
.cql{margin-top:10px; padding-top:8px; border-top:1.5px dashed rgba(255,200,61,.4)} .pqi{display:flex; gap:12px; align-items:flex-start; text-align:left; font:700 19px/1.3 var(--f-body); color:var(--chalk); padding:2px 6px; border-radius:8px}
.pqi b{font:800 22px/1.2 var(--f-body); min-width:28px; color:var(--yellow)}
/* grey out unselected options in any selection group */
:has(>.chip.on)>.chip:not(.on),.l2t:has(>button.on)>button:not(.on),.l3sp:has(input:checked)>label:has(input:not(:checked)),.opts:has(.wrong,.right)>.opt:not(.wrong):not(.right),.fopts:has(.wrong,.right)>.opt:not(.wrong):not(.right){opacity:.42; filter:grayscale(1)}
:has(>.chip.on)>.chip:not(.on):hover,.l2t>button:not(.on):hover{opacity:.8; filter:grayscale(.3)}
.when .bdg{margin-left:10px; font:700 17px/1 var(--f-body); color:var(--chalk-dim); opacity:.7; vertical-align:middle}
/* ===== CQ v2 ===== */
.cxsp{flex:1}
.cxlist{position:relative}
.cxc{position:relative}
.cxc.sel{border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,200,61,.35) inset}
.cxc .cxch{display:flex; align-items:center; gap:10px; flex:none; min-width:0}
.cxc .chn{color:var(--gold); font:700 17px/1.6 var(--f-body); letter-spacing:.3px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cxc .cxbd2{margin-left:auto; flex:none; font:700 15px/1.2 var(--f-body); color:var(--room); background:var(--gold); border-radius:10px; padding:1px 8px; white-space:nowrap}
.cxc h3{flex:none}
.cxc p{font:600 18px/1.3 var(--f-body); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; margin:0}
.cxc .vw{position:absolute; right:14px; top:38px; color:var(--right); font:800 26px/1 var(--f-body)}
.ck{flex:none; width:30px; height:30px; border:3px solid var(--chalk-dim); border-radius:8px; background:rgba(0,0,0,.25); display:grid; place-items:center; cursor:pointer}
.ck.on{background:var(--gold); border-color:var(--gold)}
.ck.on::after{content:"✓"; color:var(--room); font:800 22px/1 var(--f-body)}
.cxlf .cxpgr{display:flex; align-items:center; gap:10px; margin-right:auto}
.cxlf .cxpgr .btn{padding:2px 16px; font-size:30px; line-height:1.2}
.cxlf .cnt{font:700 26px/1.2 var(--f-body); color:var(--chalk-dim); min-width:70px; text-align:center}
.cxlf .cxnn{font:700 22px/1.2 var(--f-body); color:var(--chalk-dim); margin-left:8px}
.cxlf .cxsel{font:700 24px/1.2 var(--f-body); color:var(--chalk)}
.cxlf .btn{padding:8px 22px; font-size:26px}
.cxlf .btn:disabled{opacity:.4; cursor:default}

.cx{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; column-gap:22px; row-gap:0}
.cx>*{min-width:0; min-height:0}
.cx[data-m=read] .cxl,.cx[data-m=read] .cxr{display:none}
.cx[data-m=ans] .cxzm{display:none}
.cxzm{grid-column:1/-1; display:flex; flex-direction:column; gap:8px; overflow:hidden; padding-bottom:4px}
.cxcap{display:flex; align-items:center; gap:14px; height:42px; flex:none}
.cxcap .cxc{font:700 22px/1.2 var(--f-body); color:var(--chalk-dim); white-space:nowrap}
.cxstep{display:flex; align-items:center; gap:8px; font:700 22px/1 var(--f-body); color:var(--chalk)}
.cxstep button{width:34px; height:34px; border-radius:50%; border:3px solid var(--chalk-dim); background:none; color:var(--chalk); font:700 22px/1 var(--f-body); cursor:pointer; padding:0; display:grid; place-items:center}
.cxstep button:disabled{opacity:.3; cursor:default}
.cxbd{margin-left:auto; flex:none; font:700 20px/1.2 var(--f-body); color:var(--room); background:var(--gold); border-radius:12px; padding:3px 12px; white-space:nowrap; transform:scale(.9); transform-origin:right center}
.cxzb{flex:1 1 0; min-height:0; display:flex; gap:22px; border:3px solid rgba(255,200,61,.6); border-radius:26px; background:rgba(255,200,61,.06); padding:10px 24px 12px; overflow:hidden}
.cxbx{flex:1; min-width:0; display:flex; flex-direction:column}
.cxh{flex:none; font:700 22px/1.2 var(--f-body); color:var(--gold); margin-bottom:2px}
.cxzt{flex:1; min-height:0; overflow:hidden; font:600 34px/1.38 var(--f-body); white-space:pre-line; overflow-wrap:anywhere}
.cxft{flex:none; font:600 20px/1.3 var(--f-body); color:var(--chalk-dim); margin-top:4px}
.cxzf{flex:0 0 clamp(280px,32%,400px); min-width:0; display:flex; align-items:center; justify-content:center}
.cxzf svg{width:100%; height:100%; max-height:100%}
.cxqs{flex:none; border-top:3px dashed var(--chalk-dim); padding-top:6px; display:flex; flex-direction:column; gap:1px; --qfs:26px}
.cxq{display:flex; gap:12px; align-items:baseline; font:600 var(--qfs,26px)/1.28 var(--f-body); padding:2px 10px; border:2px solid transparent; border-radius:14px; cursor:pointer}
.cxq b{color:var(--gold); min-width:30px; flex:none}
.cxq span{min-width:0; overflow-wrap:anywhere}
.cxl{position:relative; border:3px dashed rgba(255,200,61,.75); border-radius:26px; background:rgba(0,0,0,.18); display:flex; flex-direction:column; padding:12px 16px 10px; margin-bottom:6px; overflow:hidden}
.cxqh{flex:none; font:700 26px/1.28 var(--f-body); color:var(--gold); padding:0 52px 6px 0; border-bottom:2px solid var(--gold); margin-bottom:8px}
.cxqh b{margin-right:4px}
.cxs{flex:1; min-height:0; overflow:hidden; --fs:34px; display:flex; flex-direction:column; gap:8px}
.cxrow{flex:none; display:flex; gap:12px; align-items:flex-start; animation:cxin .35s both; animation-delay:calc(var(--i,0)*.1s)}
@keyframes cxin{from{opacity:0}to{opacity:1}}
.cxn{flex:none; width:max(28px,calc(var(--fs)*1.1)); height:max(28px,calc(var(--fs)*1.1)); border-radius:50%; background:var(--red); color:#fff; font:800 calc(var(--fs)*.66)/1 var(--f-body); display:grid; place-items:center; box-shadow:0 0 0 3px #ffd0d6, 0 3px 0 3px var(--red-lo); margin:3px 3px 3px 3px}
.cxtx{flex:1; min-width:0; font:700 var(--fs)/1.32 var(--f-body); white-space:pre-wrap; overflow-wrap:anywhere}
.cxtx.res{color:var(--gold)}
.cxe{margin:auto; text-align:center; font:700 28px/1.4 var(--f-body); color:var(--chalk-dim); padding:0 20px}
.cxpt{flex:none; display:flex; gap:10px; justify-content:center; padding-top:8px}
.cxt{width:84px; height:56px; font:700 30px/1 var(--f-body); color:var(--chalk-dim); background:none; border:3px solid var(--chalk-dim); border-radius:18px 24px 16px 22px/22px 16px 24px 18px; cursor:pointer; opacity:.75; padding:0}
.cxt.on{background:linear-gradient(180deg,var(--red-hi),var(--red) 60%,var(--red-lo)); color:#fff; border-color:var(--gold); box-shadow:0 4px 0 var(--red-lo); opacity:1}
.cxx{position:absolute; top:8px; right:10px; width:44px; height:44px; border-radius:50%; border:3px solid var(--chalk-dim); background:rgba(0,0,0,.3); color:var(--chalk); font:700 24px/1 var(--f-body); cursor:pointer; padding:0; display:grid; place-items:center; z-index:2}
.cxx:hover{border-color:var(--gold); color:var(--gold)}
.cxr{display:flex; flex-direction:column; gap:6px; padding-bottom:6px; --rfs:25px; --rqs:24px; --rfh:150px; overflow:hidden}
.cxrb{position:relative; flex:1 1 0; min-height:0; display:flex; flex-direction:column; border:3px solid rgba(255,200,61,.6); border-radius:26px; background:rgba(255,200,61,.06); padding:8px 56px 10px 18px; overflow:hidden}
.cxrb .cxh{font-size:28px; flex:none}
.cxrt{flex:1; min-height:0; overflow:hidden; font:600 var(--rfs)/1.35 var(--f-body); white-space:pre-line; overflow-wrap:anywhere}
.cxrfg{flex:none; height:var(--rfh); margin-top:4px; display:flex; justify-content:center}
.cxr.tight .cxrfg{display:flex}
.cxrfg svg{height:100%; width:100%}
.cxrb .cxft{font-size:calc(var(--rfs)*.8)}
.cxrb .cxx{top:6px; right:8px}
.cxrq{flex:none; display:flex; flex-direction:column; gap:2px}
.cxrq .cxq{font-size:var(--rqs); padding:1px 10px}
.cxrq .cxq.cur{background:rgba(224,36,58,.38); border-color:var(--gold)}
.cxf{grid-column:1/-1; display:flex; align-items:center; gap:14px; padding-top:4px}
.cxf .cxpg{font:700 40px/1 var(--f-body); color:var(--chalk-dim); margin-right:auto}
.cxf .btn{font-size:28px; padding:8px 24px}
.cxf .btn.ghost{font-size:28px; padding:8px 24px; border-width:3px}
.cxf .btn.cxhelp{font-size:16px; padding:8px 16px; border-color:var(--yellow); color:var(--yellow); display:flex; align-items:center; gap:6px}
.cxf .btn[hidden]{display:none}
.cxf .btn:disabled{opacity:.4; cursor:default}
.cxf #hn{margin-left:0}
.cxf #hl{margin-left:auto}
.cxf .cxpg:empty+#hl{margin-left:auto}
.cxov{position:absolute; left:0; right:0; top:0; bottom:6px; z-index:30; background:rgba(8,6,10,.97); border:3px solid var(--gold); border-radius:26px; padding:16px 26px 14px; display:flex; flex-direction:column}
.cxov .cxs{--fs:40px}
.cxov .cxqh{font-size:30px}