/* DataSpoof gamified lessons (shared). Scoped to .dsq. */
.dsq{
  --bg:#fafafa;--surface:#fff;--surface-2:#f4f4f5;--ink:#09090b;--ink-2:#3f3f46;--muted:#71717a;--faint:#a1a1aa;
  --line:#e4e4e7;--line-2:#d4d4d8;--accent:#2563eb;--accent-soft:#eff4ff;--violet:#7c3aed;--violet-soft:#f3efff;--ok:#16a34a;--ok-soft:#ecfdf3;--bad:#dc2626;--bad-soft:#fef2f2;--gold:#d97706;--gold-soft:#fffbeb;
  --ease-out:cubic-bezier(.23,1,.32,1);--sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:860px;--gut:clamp(16px,4vw,32px);
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;text-align:left;padding-bottom:96px
}
.dsq *,.dsq *::before,.dsq *::after{box-sizing:border-box}
.dsq :is(h1,h2,h3){font-family:var(--sans);color:var(--ink);margin:0;letter-spacing:-.03em;line-height:1.12;font-weight:600;text-wrap:balance}
.dsq p{margin:0}
.dsq p+p,.dsq p+.list,.dsq .list+p{margin-top:14px}
.dsq ul{margin:0;padding:0;list-style:none}
.dsq a{color:var(--accent);text-decoration:none}
.dsq button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dsq :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.dsq .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.dsq strong{font-weight:600;color:var(--ink)}
.dsq code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);border-radius:6px;padding:1px 6px}
.dsq .grad{background:linear-gradient(92deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.dsq .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:12px;font-size:15.5px;font-weight:500;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.dsq .btn:active{transform:scale(.97)}
.dsq .btn-dark{background:var(--ink);color:#fff}
.dsq .btn-light{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){.dsq .btn-dark:hover{background:#27272a;color:#fff}.dsq .btn-light:hover{border-color:var(--line-2)}}

/* HERO + MAP */
.dsq .hero{padding:clamp(48px,8vw,96px) 0 clamp(28px,4vw,44px);position:relative;isolation:isolate;text-align:center}
.dsq .hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000 25%,transparent 75%);opacity:.6}
.dsq .pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:13px;color:var(--ink-2)}
.dsq .pill b{font-family:var(--mono);font-size:11px;font-weight:500;background:var(--violet-soft);color:var(--violet);border-radius:999px;padding:2px 8px}
.dsq .hero h1{font-size:clamp(36px,6.2vw,64px);letter-spacing:-.045em;margin:20px auto 16px;max-width:16ch}
.dsq .lede{font-size:clamp(17px,1.9vw,19px);color:var(--muted);max-width:58ch;margin:0 auto}
.dsq .facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.dsq .facts span{font-family:var(--mono);font-size:12px;color:var(--ink-2);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px}
.dsq .cta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.dsq .map{margin:clamp(32px,5vw,48px) auto 0;max-width:640px;display:flex;align-items:center;justify-content:space-between;position:relative}
.dsq .map::before{content:"";position:absolute;left:18px;right:18px;top:50%;height:2px;background:var(--line);z-index:0}
.dsq .map .fill{position:absolute;left:18px;top:50%;height:2px;background:linear-gradient(90deg,#2563eb,#7c3aed);z-index:0;width:0;transition:width 600ms var(--ease-out)}
.dsq .node{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted);transition:transform 200ms var(--ease-out),background-color 300ms var(--ease-out),border-color 300ms var(--ease-out),color 300ms var(--ease-out)}
.dsq .node.boss{width:44px;height:44px;font-size:18px}
.dsq .node.done{background:var(--ink);border-color:var(--ink);color:#fff}
.dsq .node:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.dsq .node:hover{transform:scale(1.08)}}

/* MISSIONS */
.dsq .m{padding:clamp(40px,6vw,64px) 0;border-top:1px solid var(--line)}
.dsq .m-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dsq .tag{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dsq .xp-tag{font-family:var(--mono);font-size:11.5px;color:var(--gold);background:var(--gold-soft);border-radius:999px;padding:2px 9px}
.dsq .done-tag{display:none;font-family:var(--mono);font-size:11.5px;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:2px 9px}
.dsq .m.is-done .done-tag{display:inline-block}
.dsq .m h2{font-size:clamp(28px,4vw,40px);margin-bottom:18px}
.dsq .m p,.dsq .m li{color:var(--ink-2)}
.dsq .list{display:grid;gap:8px;margin:14px 0}
.dsq .list li{position:relative;padding-left:22px}
.dsq .list li::before{content:"";position:absolute;left:4px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--violet)}
.dsq .note{margin-top:18px;border-left:3px solid var(--violet);background:var(--violet-soft);border-radius:0 12px 12px 0;padding:12px 16px;font-size:15.5px;color:var(--ink-2)}
.dsq .formula{margin:18px 0;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:18px;text-align:center;font-size:clamp(17px,2.6vw,22px);font-family:"Cambria Math","STIX Two Math","Times New Roman",serif;color:var(--ink);overflow-x:auto}
.dsq .formula .pen{color:var(--violet)}
.dsq .formula small{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:8px}
.dsq .tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dsq .tbl th,.dsq .tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);color:var(--ink-2)}
.dsq .tbl th{font-size:12.5px;font-family:var(--mono);color:var(--muted);font-weight:500;background:var(--surface-2)}
.dsq .tbl tr:last-child td{border-bottom:0}
.dsq .tbl-wrap{overflow-x:auto}

/* GAME CARD */
.dsq .game{margin-top:26px;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:clamp(18px,3vw,28px);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.dsq .g-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dsq .g-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.dsq .g-title i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--violet-soft);font-size:15px}
.dsq .g-q{font-size:16.5px;color:var(--ink);font-weight:500;margin-bottom:14px}
.dsq .opts{display:grid;gap:8px}
.dsq .opts.row{display:flex;flex-wrap:wrap}
.dsq .opts.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.dsq .opt{width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-size:15.5px;line-height:1.4;color:var(--ink);transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out),transform 120ms var(--ease-out)}
.dsq .opts.row .opt{width:auto;text-align:center;padding:10px 16px}
.dsq .opts.grid .opt{text-align:center;padding:10px}
.dsq .opts.grid .opt svg{width:100%;height:auto;display:block;margin-bottom:6px}
.dsq .opts.grid .opt span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.dsq .opt:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.dsq .opt:not(:disabled):hover{border-color:var(--line-2);background:#fcfcfc}}
.dsq .opt.right{border-color:var(--ok);background:var(--ok-soft)}
.dsq .opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.dsq .opt:disabled{cursor:default}
.dsq .opt:disabled:not(.right):not(.wrong){opacity:.55}
.dsq .fb{margin-top:14px;font-size:15px;border-radius:12px;padding:12px 14px;display:none}
.dsq .fb.show{display:block;animation:dsqPop 260ms var(--ease-out)}
.dsq .fb.good{background:var(--ok-soft);color:#14532d}
.dsq .fb.bad{background:var(--bad-soft);color:#7f1d1d}
.dsq .fb.info{background:var(--accent-soft);color:#1e3a8a}
@keyframes dsqPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dsq .shake{animation:dsqShake 360ms var(--ease-out)}
@keyframes dsqShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.dsq .count{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* flip tiles */
.dsq .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.dsq .tile{display:block;width:100%;height:110px;perspective:600px}
.dsq .tile-in{display:block;position:relative;width:100%;height:100%;transition:transform 500ms var(--ease-out);transform-style:preserve-3d}
.dsq .tile.flip .tile-in{transform:rotateY(180deg)}
.dsq .tile .f,.dsq .tile .b{position:absolute;inset:0;border-radius:14px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:8px;text-align:center;line-height:1.25}
.dsq .tile .f{background:var(--ink);color:#fff;font-size:16px;font-weight:600}
.dsq .tile .b{background:var(--violet-soft);color:#4c1d95;border:1px solid #ddd6fe;transform:rotateY(180deg);font-size:13.5px}

/* sequential cards */
.dsq .card-q{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:18px;font-size:17px;font-weight:500;color:var(--ink);min-height:84px;display:flex;align-items:center}
.dsq .card-q.in{animation:dsqPop 300ms var(--ease-out)}
.dsq .prog{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:14px}
.dsq .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#7c3aed);transition:width 400ms var(--ease-out)}
.dsq .score{display:none;text-align:center;padding:10px 0}
.dsq .score.show{display:block;animation:dsqPop 300ms var(--ease-out)}
.dsq .score b{display:block;font-size:40px;letter-spacing:-.04em}
.dsq .score span{color:var(--muted);font-size:15px}
.dsq .again{margin-top:12px;font-size:14px;color:var(--accent);font-weight:500}

/* code */
.dsq .step{margin-top:22px}
.dsq .step h3{font-size:18px;margin-bottom:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dsq .step h3 span{font-family:var(--mono);font-size:12px;color:var(--violet);background:var(--violet-soft);border-radius:999px;padding:2px 9px}
.dsq .step > p{margin-top:10px}
.dsq .code{position:relative;margin-top:10px;background:#0b0b0e;border-radius:14px;overflow:hidden}
.dsq .code pre{margin:0;padding:14px 56px 14px 16px;color:#e4e4e7;font-family:var(--mono);font-size:13.5px;line-height:1.7;overflow-x:auto;white-space:pre;background:none;border:0}
.dsq .code pre code{background:none;padding:0;font-size:inherit;color:inherit}
.dsq .code pre .c{color:#71717a}
.dsq .code pre .s{color:#86efac}
.dsq .copy{position:absolute;top:9px;right:9px;height:28px;padding:0 10px;border-radius:8px;font-family:var(--mono);font-size:11.5px;color:#a1a1aa;background:rgba(255,255,255,.07);transition:background-color 160ms,color 160ms}
.dsq .copy.done{color:#4ade80}
@media (hover:hover) and (pointer:fine){.dsq .copy:hover{background:rgba(255,255,255,.14);color:#fff}}

/* playground */
.dsq .ctrl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0}
.dsq .ctrl label{font-weight:500;font-size:15px;min-width:92px}
.dsq .ctrl output{font-family:var(--mono);font-size:13px;color:var(--ink);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.dsq input[type=range]{flex:1;min-width:180px;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer}
.dsq input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent-soft),#c4b5fd)}
.dsq input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent-soft),#c4b5fd)}
.dsq input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);margin-top:-8px}
.dsq input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.dsq .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:14px 0}
.dsq .stat{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-2);transition:background-color 300ms,border-color 300ms}
.dsq .stat b{display:block;font-size:21px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.dsq .stat span{font-size:12.5px;color:var(--muted)}
.dsq .stat.hot{background:var(--bad-soft);border-color:#fecaca}
.dsq .stat.good{background:var(--ok-soft);border-color:#bbf7d0}
.dsq .plot{width:100%;height:auto;display:block;background:var(--surface-2);border-radius:14px;margin:10px 0}
.dsq .plot text{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.dsq .seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-2);border-radius:12px}
.dsq .seg button{height:32px;padding:0 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);transition:background-color 160ms,color 160ms}
.dsq .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.dsq .bars{display:grid;gap:6px}
.dsq .bar{display:grid;grid-template-columns:52px 1fr 64px;align-items:center;gap:10px;font-size:13.5px}
.dsq .bar .nm{font-family:var(--mono);color:var(--ink)}
.dsq .bar .tr{position:relative;height:16px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.dsq .bar .tr::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-2)}
.dsq .bar .v{position:absolute;top:2px;bottom:2px;border-radius:4px;transition:left 160ms var(--ease-out),width 160ms var(--ease-out)}
.dsq .bar .v.pos{background:var(--accent)}
.dsq .bar .v.neg{background:var(--violet)}
.dsq .bar .val{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.dsq .bar.off .nm{color:var(--faint);text-decoration:line-through}
.dsq .bar.off .val{color:var(--bad)}
.dsq .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:10px}
.dsq .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.dsq .chal{display:grid;gap:8px;margin-top:18px}
.dsq .chal li{display:flex;align-items:center;gap:10px;border:1px dashed var(--line-2);border-radius:12px;padding:10px 12px;font-size:15px;color:var(--ink-2);transition:background-color 300ms var(--ease-out),border-color 300ms}
.dsq .chal li .ck{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-size:12px;color:transparent;transition:all 300ms var(--ease-out)}
.dsq .chal li .tx{flex:1;min-width:0}
.dsq .chal li .pts{flex:none;margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--gold)}
.dsq .chal li.got{border-style:solid;border-color:#bbf7d0;background:var(--ok-soft)}
.dsq .chal li.got .ck{background:var(--ok);border-color:var(--ok);color:#fff}
.dsq .chips{display:flex;flex-wrap:wrap;gap:8px}
.dsq .chip{font-family:var(--mono);font-size:14px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--surface);transition:all 160ms var(--ease-out)}
.dsq .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.dsq .chip.right{background:var(--ok);border-color:var(--ok);color:#fff}
.dsq .chip.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.dsq .chip small{opacity:.7;margin-left:6px;font-size:11.5px}
.dsq .btn-sm{height:38px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:500;border:1px solid var(--line);background:var(--surface);transition:transform 160ms var(--ease-out),border-color 160ms}
.dsq .btn-sm:active{transform:scale(.97)}
.dsq .btn-sm.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.dsq .gauge{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.dsq .gauge i{display:block;height:100%;border-radius:999px;transition:width 300ms var(--ease-out)}
.dsq .links3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dsq .lk{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface-2);text-align:center}
.dsq .lk b{display:block;font-size:14px}
.dsq .lk em{display:block;font-style:normal;font-family:var(--mono);font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums}
.dsq .lk span{display:block;font-size:12px;color:var(--muted)}

/* boss */
.dsq .boss-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dsq .hearts{display:flex;gap:4px;font-size:20px;line-height:1}
.dsq .hearts span{transition:transform 300ms var(--ease-out),opacity 300ms,filter 300ms}
.dsq .hearts span.lost{opacity:.25;filter:grayscale(1);transform:scale(.8)}
.dsq .win{display:none;text-align:center;padding:18px 0 6px}
.dsq .win.show{display:block;animation:dsqPop 400ms var(--ease-out)}
.dsq .medal{width:120px;height:120px;margin:0 auto 14px;display:block}
.dsq .win h3{font-size:28px}
.dsq .win p{color:var(--muted);margin-top:8px}
.dsq .win .cta-row{margin-top:20px}

/* next */
.dsq .next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.dsq .next a{display:block;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:16px;color:var(--ink);transition:border-color 200ms var(--ease-out),transform 200ms var(--ease-out)}
.dsq .next a b{display:block;font-size:16px;margin-bottom:4px}
.dsq .next a span{font-size:14px;color:var(--muted);line-height:1.45;display:block}
@media (hover:hover) and (pointer:fine){.dsq .next a:hover{border-color:var(--line-2);transform:translateY(-2px)}}
.dsq .social{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:22px;font-size:14.5px;color:var(--muted)}

/* HUD */
.dsq .hud{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:999;display:flex;align-items:center;gap:12px;background:rgba(9,9,11,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:8px 10px 8px 14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);width:min(460px,calc(100vw - 24px))}
.dsq .hud .lv{font-family:var(--mono);font-size:12px;white-space:nowrap;color:#e4e4e7}
.dsq .hud .lv b{color:#fbbf24;font-weight:500}
.dsq .hud .xpbar{flex:1;height:8px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden;min-width:60px}
.dsq .hud .xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:999px;transition:width 600ms var(--ease-out)}
.dsq .hud .xp{font-family:var(--mono);font-size:12px;white-space:nowrap;color:#e4e4e7;font-variant-numeric:tabular-nums}
.dsq .hud .bdg{height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px;white-space:nowrap;transition:background-color 160ms}
@media (hover:hover) and (pointer:fine){.dsq .hud .bdg:hover{background:rgba(255,255,255,.18)}}
.dsq .hud.bump .xpbar{animation:dsqBump 500ms var(--ease-out)}
@keyframes dsqBump{40%{transform:scaleY(1.6)}}
.dsq .drawer{position:fixed;left:50%;bottom:72px;transform:translateX(-50%) translateY(8px) scale(.98);transform-origin:bottom center;z-index:999;width:min(460px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 20px 50px -12px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.dsq .drawer.open{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.dsq .drawer h3{font-size:17px;margin-bottom:12px}
.dsq .badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dsq .badge{text-align:center;font-size:11.5px;color:var(--muted);line-height:1.3}
.dsq .badge i{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 6px;border-radius:14px;background:var(--surface-2);font-style:normal;font-size:22px;filter:grayscale(1);opacity:.4;transition:all 400ms var(--ease-out)}
.dsq .badge.on i{filter:none;opacity:1;background:var(--gold-soft)}
.dsq .badge.on{color:var(--ink)}
.dsq .reset{margin-top:14px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.dsq .toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:1000;background:#fbbf24;color:#422006;font-weight:600;font-size:14px;border-radius:999px;padding:7px 14px;box-shadow:0 8px 24px -6px rgba(217,119,6,.5);pointer-events:none;animation:dsqToast 1500ms var(--ease-out) forwards;white-space:nowrap}
@keyframes dsqToast{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}15%{opacity:1;transform:translate(-50%,0) scale(1)}75%{opacity:1;transform:translate(-50%,-6px)}100%{opacity:0;transform:translate(-50%,-14px)}}
.dsq .confetti{position:fixed;top:-12px;width:8px;height:12px;border-radius:2px;z-index:1001;pointer-events:none;animation:dsqFall linear forwards}
@keyframes dsqFall{to{transform:translateY(105vh) rotate(720deg)}}
.dsq .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:640px){
  .dsq{font-size:16px}
  .dsq .next,.dsq .links3{grid-template-columns:1fr}
  .dsq .bar{grid-template-columns:44px 1fr 56px;gap:8px}
  .dsq .stat b{font-size:18px}
  .dsq .ctrl label{min-width:0;width:100%}
  .dsq .hud .lv span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dsq *,.dsq *::before,.dsq *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}

/* classification additions */
.dsq .dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.dsq .dots i{width:12px;height:12px;border-radius:50%;background:#c4b5fd}
.dsq .cmx{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-top:8px}
.dsq .cmx .roc{width:200px;height:200px}
.dsq .roc text{font-family:var(--mono);font-size:9px;fill:var(--muted)}
.dsq .tbl.cm{margin:0}
.dsq .tbl.cm td{text-align:center}
.dsq .tbl.cm td b{display:block;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.dsq .tbl.cm td span{font-size:11.5px;color:var(--muted)}
.dsq .tbl.cm td.tp,.dsq .tbl.cm td.tn{background:var(--ok-soft)}
.dsq .tbl.cm td.fp,.dsq .tbl.cm td.fn{background:var(--bad-soft)}
.dsq .tbl.cm tbody th{font-size:12.5px;background:var(--surface-2)}
.dsq .cmx .tbl-wrap{min-width:0}
.dsq .nn{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:center}
.dsq .nn .tbl{margin:0}
.dsq .nn .tbl td{text-align:center}
.dsq .pool{display:grid;gap:8px}
.dsq .ordered{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:6px}
.dsq .ordered li{background:var(--ok-soft);border:1px solid #bbf7d0;border-radius:10px;padding:8px 12px;font-size:15px;color:#14532d;animation:dsqPop 260ms var(--ease-out)}
.dsq .pool .opt.right{display:none}
.dsq .nbt{margin-top:14px;font-size:14.5px;color:var(--ink-2)}
.dsq .nbt summary{cursor:pointer;color:var(--accent);font-weight:500}
@media (max-width:640px){.dsq .tbl.cm th,.dsq .tbl.cm td{padding:7px 6px}.dsq .tbl.cm td b{font-size:18px}.dsq .tbl.cm td span{font-size:10.5px}.dsq .cmx,.dsq .nn{grid-template-columns:minmax(0,1fr)}.dsq .cmx .roc{margin:0 auto}.dsq .nn svg{max-width:260px;margin:0 auto}}