:root{--bg:#0f0f13;--surface:#1a1a24;--surface-hover:#252533;--border:#2a2a3a;--text:#e8e8f0;--text-muted:#8888a0;--accent:#6c5ce7;--danger:#c0392b;--success:#27ae60}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.home{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;display:flex}.home h1{font-size:2.5rem;font-weight:300}.home nav a{color:var(--accent);font-size:1.2rem;text-decoration:none}.controller{max-width:600px;margin:0 auto;padding:1rem}.controller-title{text-align:center;opacity:.7;margin-bottom:1rem;font-size:1.4rem;font-weight:300}.control-grid{flex-direction:column;gap:1rem;display:flex}.control-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem}.control-section h2{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.75rem;font-size:.85rem;font-weight:600}.button-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.5rem;display:grid}.button-row{gap:.5rem;margin-top:.5rem;display:flex}.button-row>button{flex:1}button{appearance:none;border:1px solid var(--border);color:var(--text);background:var(--surface);cursor:pointer;touch-action:manipulation;border-radius:8px;min-height:48px;padding:.9rem 1rem;font-size:1rem;font-weight:500;transition:background .15s,transform .1s}button:hover{background:var(--surface-hover)}button:active{transform:scale(.97)}.phase-btn{color:#fff;border-color:#0000;font-weight:600}.timer-preset-btn{font-variant-numeric:tabular-nums}.sfx-btn{background:#2d1f4e;border-color:#3d2f5e}.sfx-btn:hover{background:#3d2f5e}.ambient-btn{background:#1f2d1f;border-color:#2f3d2f}.ambient-btn:hover{background:#2f3d2f}.action-btn{background:var(--surface-hover)}.action-btn.danger{color:#ff6b6b;background:#2d1a1a;border-color:#4d2a2a}.action-btn.danger:hover{background:#3d2a2a}.slider-row{align-items:center;gap:.75rem;margin-top:.5rem;display:flex}.slider-row label{color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:110px;font-size:.85rem}.slider-row input[type=range]{height:6px;accent-color:var(--accent);flex:1}.device-list{list-style:none}.device-list li{align-items:center;gap:.5rem;padding:.4rem 0;font-size:.95rem;display:flex}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.device.connected .status-dot{background:var(--success)}.device.disconnected .status-dot{background:var(--danger);opacity:.5}.device.disconnected{opacity:.5}.muted{color:var(--text-muted);font-size:.9rem}.launcher{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;padding:2rem;display:flex}.launcher h1{font-size:2rem;font-weight:300}.launcher a{color:var(--accent);text-decoration:none}