:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg0:#070b16;--bg1:#0f1730;--card:#121a30e0;--line:#94a3b82e;--text:#e8eefc;--muted:#93a0bf;--accent:#7dd3fc;--accent-2:#a78bfa;--good:#34d399;--bad:#fb7185;--warn:#fbbf24;--shadow:0 18px 50px #00000059;color:var(--text);background:var(--bg0);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.45}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(1200px 600px at 10% -10%, #7dd3fc29, transparent 55%), radial-gradient(900px 500px at 100% 0%, #a78bfa24, transparent 50%), radial-gradient(700px 500px at 50% 100%, #34d39914, transparent 55%), var(--bg0);min-width:320px;margin:0}button{font:inherit}.app{flex-direction:column;gap:16px;width:min(560px,100%);min-height:100dvh;margin:0 auto;padding:18px 16px 40px;display:flex}.top{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.logo{letter-spacing:.02em;margin:0;font-size:1.35rem;font-weight:750}.sub{color:var(--muted);margin:2px 0 0;font-size:.9rem}.top-meta{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.chip{border:1px solid var(--line);color:var(--text);background:#ffffff08;border-radius:999px;padding:6px 10px;font-size:.8rem}.chip.subtle{color:var(--muted)}.chip-btn{cursor:pointer;font:inherit}.chip-btn:hover{color:var(--text);border-color:#7dd3fc73}.main{flex-direction:column;flex:1;gap:14px;display:flex}.status-card,.result-panel{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:18px;padding:16px}.status-row,.result-hero{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 4px;font-size:.72rem;font-weight:700}h1,h2{margin:0;font-size:1.15rem;font-weight:700;line-height:1.25}.hint,.muted{color:var(--muted)}.hint{margin:10px 0 0;font-size:.92rem}.coach{color:#d7eefc;background:#7dd3fc14;border:1px solid #7dd3fc47;border-radius:12px;margin:10px 0 0;padding:10px 12px;font-size:.9rem;line-height:1.4}.legend{color:var(--muted);flex-wrap:wrap;gap:10px 14px;margin:12px 0 0;font-size:.78rem;display:flex}.legend span{align-items:center;gap:6px;display:inline-flex}.legend-dot{border-radius:999px;width:10px;height:10px;display:inline-block}.legend-dot.hit{background:var(--good);box-shadow:0 0 0 3px #34d39933}.legend-dot.miss{border:2px solid var(--muted);background:0 0}.small{font-size:.82rem}.center{text-align:center}.meters{text-align:right;gap:8px;min-width:96px;display:grid}.meters span{font-size:.75rem;display:block}.meters strong{font-size:1rem}.board{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.tile{aspect-ratio:1;border:1px solid var(--line);cursor:pointer;background:linear-gradient(#ffffff08,#ffffff03);border-radius:16px;place-items:center;padding:0;transition:transform .12s,border-color .12s,box-shadow .12s,background .12s;display:grid;position:relative}.tile:hover:not(:disabled){border-color:#7dd3fc73;transform:translateY(-1px)}.tile:active:not(:disabled){transform:translateY(1px)}.tile:disabled{cursor:default}.tile.is-probed{box-shadow:inset 0 0 0 1px #7dd3fc40}.tile.is-selected{background:#a78bfa14;border-color:#a78bfacc;box-shadow:0 0 0 2px #a78bfa40}.tile.is-signal{border-color:#34d399cc;box-shadow:0 0 0 2px #34d39933}.tile.is-wrong{border-color:#fb7185d9;box-shadow:0 0 0 2px #fb718533}.tile.is-missed{outline-offset:-6px;outline:2px dashed #fbbf24b3}.shape{width:72%;height:72%}.probe-badge{background:#00000059;border-radius:999px;place-items:center;width:16px;height:16px;font-size:.7rem;display:grid;position:absolute;top:6px;right:7px}.probe-badge.hit{color:var(--good)}.probe-badge.miss{color:var(--muted)}.controls{gap:8px;display:grid}.btn{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:14px;padding:12px 14px;transition:background .12s,border-color .12s,transform .12s}.btn:hover{border-color:#7dd3fc66}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(135deg,#7dd3fc3d,#a78bfa3d);border-color:#7dd3fc59;font-weight:700}.btn.ghost{background:0 0}.btn.wide{width:100%}.btn.grow{flex:1}.row{align-items:center;display:flex}.row.gap{gap:10px}.row.wrap{flex-wrap:wrap}.result-hero h2{font-size:1.35rem}.grade-orb{border:1px solid var(--line);background:#ffffff08;border-radius:16px;place-items:center;width:54px;height:54px;font-size:1.25rem;font-weight:800;display:grid}.grade-S{color:#fde68a;box-shadow:0 0 24px #fbbf2440}.grade-A{color:var(--good)}.grade-B{color:var(--accent)}.grade-C{color:var(--warn)}.grade-D{color:var(--bad)}.stat-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;display:grid}.stat-grid div{border:1px solid var(--line);background:#ffffff08;border-radius:12px;padding:10px}.stat-grid dt{color:var(--muted);font-size:.75rem}.stat-grid dd{margin:4px 0 0;font-size:1.05rem;font-weight:700}.rule-reveal{margin:14px 0 0;font-size:.95rem}.share-card{border:1px solid var(--line);white-space:pre-wrap;-webkit-user-select:text;user-select:text;cursor:text;background:#060913;border-radius:12px;margin:12px 0 6px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.4}.share-card:focus{outline-offset:2px;outline:2px solid #7dd3fc73}.next-up{margin:12px 0 0}.footer{color:var(--muted);gap:6px;margin-top:auto;font-size:.8rem;display:grid}.footer p{margin:0}.linkish{appearance:none;color:var(--accent);cursor:pointer;text-align:left;background:0 0;border:0;padding:0;font-size:.9rem}.toast{border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow);z-index:40;background:#0f172af2;border-radius:999px;padding:10px 14px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.modal-backdrop{z-index:50;background:#020617b8;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line);width:min(440px,100%);box-shadow:var(--shadow);background:#0d1428;border-radius:20px;padding:20px}.tutorial-steps{color:#d7e0f5;gap:10px;margin:14px 0;padding-left:18px;display:grid}.tutorial-steps li::marker{color:var(--accent-2)}.wizard{width:min(460px,100%)}.wizard-top{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.wizard-dots{gap:6px;display:flex}.wizard-dot{background:#94a3b859;border-radius:999px;width:8px;height:8px}.wizard-dot.is-active{background:var(--accent);box-shadow:0 0 0 3px #7dd3fc33}.wizard-dot.is-done{background:var(--accent-2)}.wizard-body{color:#d7e0f5;margin:8px 0 0;font-size:.95rem;line-height:1.45}.wizard-demo{border:1px solid var(--line);background:#ffffff08;border-radius:14px;margin:16px 0 4px;padding:14px}.wizard-demo-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.wizard-tile{aspect-ratio:1;border:1px solid var(--line);background:linear-gradient(#ffffff08,#ffffff03);border-radius:12px;place-items:center;display:grid;position:relative}.wizard-tile.is-selected{border-color:#7dd3fcb3;box-shadow:inset 0 0 0 2px #7dd3fc40}.wizard-tile .shape{width:70%;height:70%}.wizard-tile .probe-badge{font-size:.7rem;position:absolute;top:4px;right:6px}.wizard-tile-label{text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.62rem;position:absolute;bottom:4px;left:0;right:0}.wizard-caption{color:var(--muted);margin:10px 0 0;font-size:.82rem;line-height:1.4}.wizard-caption .good{color:var(--good);font-weight:600}.wizard-actions{gap:10px;margin-top:16px;display:flex}.wizard-foot{margin:12px 0 0}@media (width<=420px){.board{gap:8px}.tile{border-radius:12px}h1{font-size:1.05rem}}#root{min-height:100dvh}