:root{--bg: #0f172a;--bg-soft: #1e293b;--fg: #e2e8f0;--fg-dim: #94a3b8;--accent: #ef4444;--accent-soft: rgba(239, 68, 68, .15);--border: rgba(148, 163, 184, .18);--radius: 14px;--shadow: 0 18px 48px rgba(0, 0, 0, .35);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100vh;margin:0}body{background:radial-gradient(1200px 600px at 90% -10%,rgba(239,68,68,.12),transparent),radial-gradient(900px 500px at -10% 10%,rgba(251,113,133,.08),transparent),linear-gradient(180deg,#0b1224 0%,var(--bg) 100%);color:var(--fg);-webkit-font-smoothing:antialiased}.app{max-width:1180px;margin:0 auto;padding:48px 24px 96px}.hero{text-align:center;margin-bottom:32px}.badge{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.hero h1{font-size:clamp(40px,6vw,72px);margin:18px 0 12px;font-weight:800;letter-spacing:-.02em}.grad{background:linear-gradient(135deg,var(--accent) 0%,#fb7185 50%,#f97316 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.sub{color:var(--fg-dim);font-size:18px;max-width:640px;margin:0 auto;line-height:1.55}.card{margin-top:36px;padding:28px;border-radius:var(--radius);background:#0f172a99;border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(8px)}.coming-soon{color:var(--fg-dim);text-align:center;margin:0;font-style:italic}.status{display:flex;align-items:center;gap:14px;margin-bottom:18px}.status-dot{width:12px;height:12px;border-radius:50%;background:var(--fg-dim);transition:background .2s ease}.status-loading .status-dot{background:var(--accent);animation:pulse 1.4s ease-in-out infinite}.status-ready .status-dot{background:#22c55e}.status-error .status-dot{background:#ef4444}@keyframes pulse{0%,to{box-shadow:0 0 #ef44448c}50%{box-shadow:0 0 0 10px #ef444400}}.status-text{display:flex;flex-direction:column;gap:2px}.status-text strong{font-size:15px}.status-text span{color:var(--fg-dim);font-size:13px}.controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.btn{padding:10px 16px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s ease,transform .1s ease,opacity .15s ease}.btn:hover:not(:disabled){background:#dc2626}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:#0f172a99;border:1px solid var(--border);color:var(--fg-dim)}.btn-ghost:hover:not(:disabled){background:#0f172ae6;color:var(--fg)}.timing-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.timing-card{padding:12px 14px;border-radius:10px;background:#02061780;border:1px solid var(--border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;flex-direction:column;gap:4px}.timing-label{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.06em}.timing-ms{font-size:18px;font-weight:800;color:var(--fg)}.timing-wasm{border-color:#22c55e66}.timing-wasm .timing-ms{color:#4ade80}.timing-js{border-color:#94a3b84d}.timing-js .timing-ms{color:#cbd5e1}.timing-speedup{border-color:#ef444466;background:#ef444414}.timing-speedup .timing-ms{color:var(--accent)}@media(max-width:640px){.timing-row{grid-template-columns:1fr}}.canvas{display:block;width:100%;height:auto;background:#020617;border-radius:10px;border:1px solid var(--border)}.hint{margin:14px 0 0;font-size:12px;color:var(--fg-dim);font-style:italic}.footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--fg-dim);display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.footer a{color:var(--fg-dim);text-decoration:none;transition:color .15s ease}.footer a:hover{color:var(--accent)}.footer-dot{opacity:.6}