:root{color:#dbeafe;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#2563eb38,#0000 30%),radial-gradient(circle at 0 100%,#ea580c2e,#0000 24%),linear-gradient(#020617,#0f172a 55%,#111827);font-family:Trebuchet MS,Avenir Next,Avenir,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body,#root{min-height:100vh}body{margin:0}button,input,textarea,select{font:inherit}h1,h2{color:#f8fafc;margin:0;line-height:1.05}h1{letter-spacing:-.04em;font-size:clamp(2.6rem,5vw,5.3rem)}h2{letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;font-size:1.05rem}p{margin:0}.app-shell{width:min(1280px,100% - 24px);padding:14px 0 max(18px, env(safe-area-inset-bottom));margin:0 auto}.top-hud,.hero-copy,.status-card,.canvas-card,.control-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#ffffff14,#ffffff08),#0a101cb8;border:1px solid #94a3b833;box-shadow:0 24px 50px #02061747}.top-hud{z-index:20;border-radius:18px;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-bottom:14px;padding:10px 12px;display:grid;position:sticky;top:10px}.hud-pill,.timer-pill{color:#f8fafc;background:#0f172ae0;border-radius:999px;align-items:center;gap:10px;padding:8px 14px;display:inline-flex}.move-pill{justify-self:start}.timer-pill{justify-self:center}.timer-cool{box-shadow:inset 0 0 0 1px #22c55e4d}.timer-warm{box-shadow:inset 0 0 0 1px #facc1566}.timer-hot{box-shadow:inset 0 0 0 1px #f8717180}.timer-label{letter-spacing:.12em;text-transform:uppercase;color:#93c5fd;font-size:.72rem}.hero-panel{grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:18px;margin-bottom:18px;display:grid}.hero-copy{border-radius:24px;padding:24px}.eyebrow{letter-spacing:.22em;text-transform:uppercase;color:#93c5fd;margin:0 0 10px;font-size:.75rem}.lede{color:#bfdbfe;max-width:54ch}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.status-card{border-radius:22px;padding:18px 16px}.status-label{letter-spacing:.12em;text-transform:uppercase;color:#94a3b8;margin-bottom:8px;font-size:.75rem;display:block}.status-card strong{color:#f8fafc;font-size:1.1rem}.status-card .solved{color:#4ade80}.status-card .scrambled{color:#fbbf24}.playground{grid-template-columns:minmax(0,1.65fr) minmax(300px,.9fr);align-items:start;gap:18px;display:grid}.canvas-card{border-radius:28px;overflow:hidden}.canvas-card canvas{touch-action:none;width:100%;height:min(72vh,760px);display:block}.canvas-caption{color:#cbd5e1;background:#0f172ab3;border-top:1px solid #94a3b824;padding:14px 18px 18px}.control-panel{border-radius:28px;padding:18px}.panel-block+.panel-block{margin-top:18px}.primary-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.action-button{min-height:52px;font:inherit;color:#eff6ff;cursor:pointer;background:linear-gradient(#1d4ed8,#1e3a8a);border:0;border-radius:18px;padding:14px 12px;font-weight:700;transition:transform .15s,opacity .15s,box-shadow .15s;box-shadow:0 16px 30px #1e40af52}.action-button:hover{transform:translateY(-1px)}.action-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.action-button.primary{background:linear-gradient(#ea580c,#c2410c);box-shadow:0 16px 30px #c2410c4d}.action-button:not(.primary){background:linear-gradient(#334155,#0f172a);box-shadow:0 16px 30px #0f172a59}@media (width<=980px){.hero-panel,.playground{grid-template-columns:1fr}.canvas-card canvas{height:min(62vh,580px)}}@media (width<=720px){.app-shell{width:min(100%,100% - 16px);padding-top:max(10px, env(safe-area-inset-top))}.top-hud{border-radius:16px;grid-template-columns:1fr auto;top:8px}.hero-panel{display:none}.playground{gap:14px}.canvas-card{border-radius:24px}.canvas-card canvas{height:min(58vh,480px)}.control-panel{z-index:15;border-radius:24px;padding:14px;position:sticky;bottom:8px}.thumb-zone{order:3;margin-top:4px}.primary-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.action-button{min-height:56px}}@media (width<=520px){.top-hud{gap:8px;padding-inline:8px}.hud-pill,.timer-pill{padding:8px 10px}.canvas-card canvas{height:min(54vh,420px)}.primary-actions{gap:8px}}