:root{
  color-scheme:dark;
  --bg:#081018;
  --panel:#0d1924;
  --panel2:#122231;
  --ink:#f3f8ff;
  --muted:#93a6b8;
  --line:rgba(201,226,255,.14);
  --eq:#ff7e9f;
  --sq:#ffa96b;
  --iq:#67b8ff;
  --bkq:#77df9b;
  --nq:#b693ff;
  --accent:#b7e4ff;
  --good:#7ff1b0;
  --bad:#ff8b94;
  --shadow:0 24px 80px rgba(0,0,0,.34);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -12%,#18324b 0,#081018 42%,#050a0f 100%);color:var(--ink);font-family:Inter,"Hiragino Sans","Yu Gothic",system-ui,sans-serif}
body{min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit}
button,a{touch-action:manipulation}
.app{width:min(100%,500px);min-height:100dvh;margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 18px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.app:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 48%,rgba(183,228,255,.025) 49% 51%,transparent 52%);background-size:30px 30px;mask-image:linear-gradient(to bottom,#000,transparent 72%)}
.topbar{height:42px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20;flex:none}
.home-link,.stats-btn{height:36px;border:1px solid var(--line);border-radius:12px;background:rgba(13,25,36,.74);backdrop-filter:blur(12px);display:flex;align-items:center;gap:7px;padding:0 11px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.04em}
.stats-btn{cursor:pointer}.brand-mini{font-size:12px;letter-spacing:.18em;font-weight:1000;color:var(--muted)}
.screen{display:none;flex:1;min-height:0;padding:20px 0 0;animation:screenIn .25s ease both}.screen.active{display:flex;flex-direction:column}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{margin:0 0 9px;color:var(--accent);font-size:12px;letter-spacing:.19em;font-weight:1000}
h1,h2,p{margin-top:0}
h1{font-size:clamp(43px,13vw,66px);line-height:.93;letter-spacing:-.065em;margin:0 0 16px;font-weight:1000}h1 span{color:var(--accent)}
h2{font-size:clamp(32px,9vw,45px);line-height:1.05;letter-spacing:-.05em;margin:0 0 12px;font-weight:1000}h2 strong{color:var(--accent)}
.lead{font-size:17px;line-height:1.6;color:#c5d4e2;margin-bottom:22px}.lead strong{color:#fff}
.microcopy,.privacy-note{color:var(--muted);font-size:12px;line-height:1.65;text-align:center;margin:12px 10px 0}
.primary-btn,.secondary-btn,.text-btn{width:100%;border:0;cursor:pointer}.primary-btn{min-height:58px;border-radius:18px;background:linear-gradient(135deg,#e7f6ff,#8fd7ff);color:#07131d;font-weight:1000;font-size:15px;display:flex;align-items:center;justify-content:center;gap:15px;box-shadow:0 14px 38px rgba(103,184,255,.15);transition:.15s}.primary-btn:active{transform:scale(.985)}.primary-btn b{font-size:20px}
.secondary-btn{margin-top:9px;min-height:50px;border-radius:17px;border:1px solid var(--line);background:rgba(15,29,42,.88);font-weight:900;font-size:13px}.text-btn{min-height:42px;background:transparent;color:var(--muted);font-size:12px;font-weight:900;margin-top:5px}
.window-stage{height:210px;position:relative;margin:0 0 6px;display:grid;place-items:center}.window-stage:before{content:"";position:absolute;width:166px;height:166px;border-radius:50%;border:1px dashed rgba(183,228,255,.2);animation:spin 24s linear infinite}.window-stage:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;border:1px solid rgba(183,228,255,.1)}
.window-core{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;position:relative;z-index:2;background:linear-gradient(145deg,#172b3c,#0b1721);border:1px solid rgba(183,228,255,.28);box-shadow:0 0 52px rgba(103,184,255,.13)}.window-core span{font-size:12px;letter-spacing:.2em;font-weight:1000;color:var(--accent)}
.window-node{position:absolute;width:64px;height:64px;border-radius:20px;background:#0d1924;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 13px 30px rgba(0,0,0,.22);z-index:3}.window-node b{font-size:17px;line-height:1}.window-node span{font-size:12px;color:var(--muted);font-weight:800;margin-top:5px}.window-node.eq{top:4px;left:50%;transform:translateX(-50%);border-color:rgba(255,126,159,.42)}.window-node.sq{right:28px;top:62px;border-color:rgba(255,169,107,.42)}.window-node.iq{right:60px;bottom:2px;border-color:rgba(103,184,255,.42)}.window-node.bkq{left:60px;bottom:2px;border-color:rgba(119,223,155,.42)}.window-node.nq{left:28px;top:62px;border-color:rgba(182,147,255,.42)}
.orbit-line{position:absolute;width:1px;height:172px;background:linear-gradient(transparent,rgba(183,228,255,.16),transparent);z-index:1}.orbit-a{transform:rotate(54deg)}.orbit-b{transform:rotate(-54deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.mini-legend{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:12px}.mini-legend span{padding:6px 8px;border:1px solid var(--line);background:rgba(13,25,36,.72);border-radius:999px;font-size:12px;color:var(--muted);font-weight:800}.mini-legend b{color:#fff;margin-right:2px}
.play-screen{padding-top:11px}.play-head{margin-bottom:9px}.progress-copy{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:1000}.progress-copy b{color:var(--accent)}.progress-track{height:4px;border-radius:999px;background:#142330;margin-top:8px;overflow:hidden}.progress-track i{display:block;height:100%;width:10%;background:linear-gradient(90deg,#67b8ff,#b693ff);border-radius:999px;transition:width .28s ease}
.lit-windows{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:4px 0 13px}.lit-windows span{height:30px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:#617384;font-size:12px;font-weight:1000;transition:.2s;background:#0b151e}.lit-windows span.lit{color:#fff;transform:translateY(-2px);box-shadow:0 0 18px rgba(183,228,255,.12)}.lit-windows span[data-type="EQ"].lit{border-color:var(--eq);background:rgba(255,126,159,.15)}.lit-windows span[data-type="SQ"].lit{border-color:var(--sq);background:rgba(255,169,107,.15)}.lit-windows span[data-type="IQ"].lit{border-color:var(--iq);background:rgba(103,184,255,.15)}.lit-windows span[data-type="BKQ"].lit{border-color:var(--bkq);background:rgba(119,223,155,.15)}.lit-windows span[data-type="NQ"].lit{border-color:var(--nq);background:rgba(182,147,255,.15)}
.scenario-card{min-height:214px;border-radius:26px;border:1px solid var(--line);background:radial-gradient(circle at 85% 10%,rgba(103,184,255,.1),transparent 36%),linear-gradient(150deg,#132536,#0b151e);padding:22px 20px 18px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.scenario-card:after{content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(255,255,255,.035);border-radius:50%;right:-76px;bottom:-80px}.scenario-card small{color:var(--accent);font-weight:1000;font-size:12px;letter-spacing:.13em;margin-bottom:10px}.scenario-card h2{font-size:29px;margin-bottom:10px}.scenario-card p{color:#c6d4df;font-size:13px;line-height:1.7;margin:0;max-width:92%}.difficulty{position:absolute;right:14px;top:14px;padding:6px 8px;border-radius:999px;background:#0a131b;border:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.1em;font-weight:1000}
.prompt{text-align:center;color:var(--muted);font-size:12px;font-weight:900;margin:12px 0 8px}.switch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.switch-grid button{min-height:72px;border:1px solid var(--line);border-radius:16px;background:#0d1924;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.14s}.switch-grid button:active{transform:scale(.96)}.switch-grid button b{font-size:15px}.switch-grid button span{font-size:12px;color:var(--muted);font-weight:800;line-height:1.25;margin-top:6px}.switch-grid button[data-type="EQ"] b{color:var(--eq)}.switch-grid button[data-type="SQ"] b{color:var(--sq)}.switch-grid button[data-type="IQ"] b{color:var(--iq)}.switch-grid button[data-type="BKQ"] b{color:var(--bkq)}.switch-grid button[data-type="NQ"] b{color:var(--nq)}.switch-grid.locked button{pointer-events:none;opacity:.58}.switch-grid button.correct{opacity:1;border-color:var(--good);background:rgba(127,241,176,.08);transform:translateY(-3px)}.switch-grid button.wrong{opacity:1;border-color:var(--bad);background:rgba(255,139,148,.07)}
.feedback{display:none;margin-top:10px;border:1px solid var(--line);background:#0b151e;border-radius:17px;padding:12px 13px;gap:11px;align-items:flex-start;animation:feedbackIn .18s ease both}.feedback.show{display:flex}.feedback-badge{width:43px;height:43px;border-radius:13px;background:#142333;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:1000;flex:none}.feedback>div:last-child b{font-size:12px}.feedback>div:last-child p{font-size:12px;line-height:1.55;color:var(--muted);margin:4px 0 0}.feedback.good .feedback-badge{color:var(--good);border-color:rgba(127,241,176,.42)}.feedback.bad .feedback-badge{color:var(--bad);border-color:rgba(255,139,148,.42)}
@keyframes feedbackIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.result-screen{padding-top:18px}.result-screen h2{font-size:36px}.result-hero{display:grid;grid-template-columns:126px 1fr;gap:16px;align-items:center;margin:4px 0 16px}.score-ring{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--score,0%),#182735 0);position:relative}.score-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#081018}.score-ring span{position:relative;z-index:2}.score-ring b{font-size:39px;line-height:1}.score-ring small{font-size:12px;color:var(--muted);font-weight:900}.result-summary b{font-size:25px;display:block}.result-summary span{color:var(--muted);font-size:12px;font-weight:900}.result-summary p{font-size:12px;line-height:1.6;color:#c3d2df;margin:9px 0 0}
.type-results{display:grid;gap:7px;margin-bottom:12px}.type-row{display:grid;grid-template-columns:56px 1fr 44px;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:15px;background:#0d1924}.type-row strong{font-size:12px}.type-row strong small{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-top:3px}.type-track{height:6px;background:#182735;border-radius:999px;overflow:hidden}.type-track i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .5s ease}.type-row>span{text-align:right;font-size:12px;font-weight:1000}
.next-card{border-radius:18px;border:1px solid rgba(183,228,255,.22);background:rgba(103,184,255,.065);padding:14px 15px;margin-bottom:12px}.next-card span{display:block;font-size:12px;letter-spacing:.15em;color:var(--muted);font-weight:1000;margin-bottom:5px}.next-card b{font-size:14px;color:var(--accent)}.next-card p{font-size:12px;line-height:1.6;color:#c4d4e0;margin:6px 0 0}.result-actions{margin-top:auto}.source-box{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;color:var(--muted);font-size:12px;line-height:1.6}.source-box summary{cursor:pointer;font-weight:900;color:#a9bac8}.source-box p{margin:9px 0}.source-box a{display:block;color:#9fd8ff;margin:4px 0;text-decoration:none}
.stats-screen{justify-content:center}.screen-copy p{color:var(--muted)}.stats-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 22px}.stats-panel div{min-height:105px;border-radius:18px;border:1px solid var(--line);background:#0d1924;display:flex;flex-direction:column;align-items:center;justify-content:center}.stats-panel span{font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:1000}.stats-panel b{font-size:26px;margin:5px 0 1px}.stats-panel small{font-size:12px;color:var(--muted);font-weight:900}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translate(-50%,15px);background:#eaf8ff;color:#081018;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:1000;opacity:0;pointer-events:none;transition:.2s;z-index:99;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-height:760px){.window-stage{height:170px}.window-stage:before{width:142px;height:142px}.window-node{width:55px;height:55px;border-radius:16px}.window-node.sq{right:43px;top:49px}.window-node.nq{left:43px;top:49px}.window-node.iq{right:72px}.window-node.bkq{left:72px}.home-screen h1{font-size:42px}.scenario-card{min-height:184px}.scenario-card h2{font-size:26px}.switch-grid button{min-height:64px}.switch-grid button span{font-size:12px}}
@media (max-width:360px){.app{padding-left:14px;padding-right:14px}.switch-grid{gap:4px}.switch-grid button{border-radius:14px}.switch-grid button span{font-size:12px}.brand-mini{display:none}.result-hero{grid-template-columns:112px 1fr}.score-ring{width:112px;height:112px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}