*{box-sizing:border-box;margin:0;padding:0}:root{--bg-from: #1a1a2e;--bg-to: #16213e;--accent-1: #00d9ff;--accent-2: #00ff88;--on-accent: #1a1a2e;--error: #ff6b6b;--warning: #ffd93d;--text-primary: #e4e4e4;--text-secondary: #d1d5db;--text-muted: #9ca3af;--surface: rgba(255, 255, 255, .05);--surface-mid: rgba(255, 255, 255, .1);--border: rgba(255, 255, 255, .1);--cell-inactive: #2a2a4a;--btn-bg: #374151;--btn-hover: #4b5563;--quit-border-hover: #6b7280;--accent-1-dim: rgba(0, 217, 255, .1);--accent-1-mid: rgba(0, 217, 255, .2);--accent-1-glow: rgba(0, 217, 255, .3);--accent-1-bright-glow: rgba(0, 217, 255, .5);--accent-1-subtle: rgba(0, 217, 255, .15);--accent-2-dim: rgba(0, 255, 136, .1);--accent-2-mid: rgba(0, 255, 136, .2);--accent-2-glow: rgba(0, 255, 136, .3);--accent-2-subtle: rgba(0, 255, 136, .15);--error-subtle: rgba(255, 107, 107, .15);--error-glow: rgba(255, 107, 107, .3)}.theme-twilight{--bg-from: #0f0a1e;--bg-to: #1a0d2e;--accent-1: #c084fc;--accent-2: #f472b6;--on-accent: #0f0a1e;--cell-inactive: #1e1030;--btn-bg: #2d1b4e;--btn-hover: #3d2b60;--quit-border-hover: #5d3b80;--accent-1-dim: rgba(192, 132, 252, .1);--accent-1-mid: rgba(192, 132, 252, .2);--accent-1-glow: rgba(192, 132, 252, .3);--accent-1-bright-glow: rgba(192, 132, 252, .5);--accent-1-subtle: rgba(192, 132, 252, .15);--accent-2-dim: rgba(244, 114, 182, .1);--accent-2-mid: rgba(244, 114, 182, .2);--accent-2-glow: rgba(244, 114, 182, .3);--accent-2-subtle: rgba(244, 114, 182, .15)}.theme-ember{--bg-from: #1a0d00;--bg-to: #2e1800;--accent-1: #fb923c;--accent-2: #fbbf24;--on-accent: #1a0d00;--cell-inactive: #2e1800;--btn-bg: #422000;--btn-hover: #5a2e00;--quit-border-hover: #7a3e00;--accent-1-dim: rgba(251, 146, 60, .1);--accent-1-mid: rgba(251, 146, 60, .2);--accent-1-glow: rgba(251, 146, 60, .3);--accent-1-bright-glow: rgba(251, 146, 60, .5);--accent-1-subtle: rgba(251, 146, 60, .15);--accent-2-dim: rgba(251, 191, 36, .1);--accent-2-mid: rgba(251, 191, 36, .2);--accent-2-glow: rgba(251, 191, 36, .3);--accent-2-subtle: rgba(251, 191, 36, .15)}.theme-mono{--bg-from: #0a0a0a;--bg-to: #141414;--accent-1: #e2e8f0;--accent-2: #94a3b8;--on-accent: #0a0a0a;--cell-inactive: #1e1e1e;--btn-bg: #262626;--btn-hover: #333333;--quit-border-hover: #555555;--accent-1-dim: rgba(226, 232, 240, .1);--accent-1-mid: rgba(226, 232, 240, .2);--accent-1-glow: rgba(226, 232, 240, .15);--accent-1-bright-glow: rgba(226, 232, 240, .3);--accent-1-subtle: rgba(226, 232, 240, .1);--accent-2-dim: rgba(148, 163, 184, .1);--accent-2-mid: rgba(148, 163, 184, .15);--accent-2-glow: rgba(148, 163, 184, .2);--accent-2-subtle: rgba(148, 163, 184, .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,var(--bg-from) 0%,var(--bg-to) 100%);min-height:100vh;color:var(--text-primary)}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}.settings{text-align:center;max-width:400px}.settings h1{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.description{color:var(--text-muted);margin-bottom:2rem;line-height:1.6}.description kbd{background:var(--btn-bg);padding:2px 8px;border-radius:4px;font-family:monospace;font-size:.9em}.setting-group{display:flex;justify-content:space-between;align-items:center;background:var(--surface);padding:1rem 1.5rem;border-radius:12px;margin-bottom:1rem}.setting-group label{font-weight:500;color:var(--text-secondary)}.setting-control{display:flex;align-items:center;gap:1rem}.setting-control button{width:36px;height:36px;border-radius:50%;border:none;background:var(--btn-bg);color:var(--text-primary);font-size:1.2rem;cursor:pointer;transition:all .2s}.setting-control button:hover:not(:disabled){background:var(--btn-hover)}.setting-control button:disabled{opacity:.3;cursor:not-allowed}.setting-value{min-width:40px;text-align:center;font-size:1.2rem;font-weight:600;color:var(--accent-1)}.theme-picker{display:flex;gap:.5rem}.theme-swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .2s,border-color .2s}.theme-swatch:hover{transform:scale(1.1)}.theme-swatch.active{border-color:var(--text-primary);transform:scale(1.15)}.start-btn{width:100%;padding:1rem 2rem;margin-top:1rem;font-size:1.2rem;font-weight:600;border:none;border-radius:12px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:var(--on-accent);cursor:pointer;transition:transform .2s,box-shadow .2s}.start-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--accent-1-glow)}.game{display:flex;flex-direction:column;align-items:center;gap:2rem}.game-header{display:flex;justify-content:space-between;width:100%;max-width:300px}.level-badge{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:var(--on-accent);padding:.5rem 1rem;border-radius:20px;font-weight:600}.trial-counter{background:var(--surface-mid);padding:.5rem 1rem;border-radius:20px;color:var(--text-muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px;background:var(--surface);border-radius:16px}.grid-cell{width:80px;height:80px;background:var(--cell-inactive);border-radius:12px;transition:all .15s ease}.grid-cell.active{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));box-shadow:0 0 30px var(--accent-1-bright-glow)}.controls{display:flex;gap:1rem}.control-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1rem;font-weight:600;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s;min-width:140px}.position-btn{background:var(--accent-1-dim);border-color:var(--accent-1);color:var(--accent-1)}.position-btn:hover:not(:disabled){background:var(--accent-1-mid)}.position-btn.pressed{background:var(--accent-1);color:var(--on-accent)}.audio-btn{background:var(--accent-2-dim);border-color:var(--accent-2);color:var(--accent-2)}.audio-btn:hover:not(:disabled){background:var(--accent-2-mid)}.audio-btn.pressed{background:var(--accent-2);color:var(--on-accent)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.key-hint{background:#0000004d;padding:.25rem .5rem;border-radius:4px;font-family:monospace;font-size:.8rem}.quit-btn{background:transparent;border:1px solid var(--btn-hover);color:var(--text-muted);padding:.5rem 1.5rem;border-radius:8px;cursor:pointer;transition:all .2s}.quit-btn:hover{border-color:var(--quit-border-hover);color:var(--text-secondary)}.results{text-align:center;max-width:500px}.results h2{font-size:2rem;margin-bottom:.5rem;color:var(--text-primary)}.level-info{color:var(--text-muted);margin-bottom:2rem}.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}.result-section{background:var(--surface);padding:1.5rem;border-radius:16px}.result-section h3{margin-bottom:1rem;color:var(--text-secondary)}.result-stat{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border)}.result-stat:last-child{border-bottom:none}.stat-label{color:var(--text-muted)}.stat-value{font-weight:600}.stat-value.success{color:var(--accent-2)}.stat-value.error{color:var(--error)}.stat-value.warning{color:var(--warning)}.result-stat.accuracy{margin-top:.5rem;padding-top:1rem;border-top:2px solid var(--border);border-bottom:none}.result-stat.accuracy .stat-value{font-size:1.5rem;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.recommendation{padding:1rem 1.5rem;border-radius:12px;margin-bottom:1.5rem;font-weight:500;font-size:1.1rem}.recommendation.increase{background:var(--accent-2-subtle);border:1px solid var(--accent-2);color:var(--accent-2)}.recommendation.decrease{background:var(--error-subtle);border:1px solid var(--error);color:var(--error)}.recommendation.stay{background:var(--accent-1-subtle);border:1px solid var(--accent-1);color:var(--accent-1)}.recommendation.clickable{cursor:pointer;transition:transform .2s,box-shadow .2s}.recommendation.clickable:hover{transform:translateY(-2px)}.recommendation.clickable.increase:hover{box-shadow:0 6px 20px var(--accent-2-glow)}.recommendation.clickable.decrease:hover{box-shadow:0 6px 20px var(--error-glow)}@media(max-width:480px){.grid-cell{width:60px;height:60px}.controls{flex-direction:column}.control-btn{min-width:200px}.results-grid{grid-template-columns:1fr}}