:root{--bg: #0a0a0a;--surface: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .1);--text: #fafafa;--text-dim: rgba(255, 255, 255, .55);--accent: #646cff;--correct: #22c55e;--wrong: #ef4444;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.shell{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.menu{text-align:center;max-width:28rem}.menu h1{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.75rem}.subtitle{color:var(--text-dim);font-size:1rem;margin-bottom:2rem;line-height:1.6}.btn{border:none;border-radius:.5rem;padding:.75rem 1.75rem;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .1s,opacity .15s}.btn:hover{transform:scale(1.04)}.btn:active{transform:scale(.97)}.btn.primary{background:var(--accent);color:#fff}.btn.secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.game{width:100%;max-width:26rem;display:flex;flex-direction:column;gap:1.25rem}.hud{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.streak{color:#facc15;font-weight:600}.target-swatch{height:9rem;border-radius:.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;border:2px solid var(--border);transition:background .4s,border-color .3s}.target-label{font-size:.8rem;color:#ffffffb3;text-shadow:0 1px 3px rgba(0,0,0,.6)}.target-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.swatch{aspect-ratio:1;border:2px solid transparent;border-radius:.75rem;cursor:pointer;transition:transform .15s,border-color .2s,opacity .3s;position:relative;display:flex;align-items:center;justify-content:center}.swatch:hover:not(:disabled){transform:scale(1.06);border-color:#fff6}.swatch:disabled{cursor:default}.swatch.correct{border-color:var(--correct);box-shadow:0 0 0 3px #22c55e59;animation:pop .35s ease}.swatch.wrong{border-color:var(--wrong);box-shadow:0 0 0 3px #ef444459;animation:shake .35s ease}.swatch.dim{opacity:.3}.swatch-icon{font-size:1.6rem;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}.feedback-area{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:fadeUp .3s ease}.feedback{font-size:1.3rem;font-weight:700}.feedback.correct{color:var(--correct)}.feedback.wrong{color:var(--wrong)}.result{text-align:center;max-width:26rem;display:flex;flex-direction:column;gap:1.5rem}.result h1{font-size:2rem;font-weight:700}.result-stats{display:flex;justify-content:center;gap:2.5rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.stat-value{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}.stat-label{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.result-actions{display:flex;justify-content:center;gap:.75rem}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}