@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:Space Grotesk,system-ui,-apple-system,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;--bg-ink: #0b0d16;--bg-mid: #11182a;--bg-glow: #1c2a4a;--accent: #ff7a59;--accent-2: #6ef3c5;--accent-3: #f6d365;--text: #f7f3ee;--muted: rgba(247, 243, 238, .6);--panel: rgba(16, 20, 35, .8);--stroke: rgba(255, 255, 255, .08)}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:radial-gradient(circle at top,rgba(255,122,89,.2),transparent 50%),radial-gradient(circle at 80% 20%,rgba(110,243,197,.18),transparent 45%),linear-gradient(160deg,var(--bg-ink),var(--bg-mid) 55%,var(--bg-glow));color:var(--text)}button,input{font:inherit}button{border:none;border-radius:999px;padding:10px 20px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}button:hover{transform:translateY(-1px)}.game{min-height:100%;display:flex;flex-direction:column;gap:24px;padding:32px clamp(20px,4vw,64px) 40px}.hud{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;padding:18px 24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 45px #03061073}.brand h1{font-family:Bebas Neue,sans-serif;letter-spacing:2px;font-size:clamp(28px,4vw,44px);margin:0}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted)}.stats{display:flex;gap:16px}.stat{background:#080a12a6;border:1px solid var(--stroke);padding:10px 14px;border-radius:16px;min-width:88px}.label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.value{font-size:20px;font-weight:600}.controls{display:flex;gap:12px}.primary{background:linear-gradient(120deg,var(--accent),var(--accent-3));color:#15151d;font-weight:600;box-shadow:0 8px 18px #ff7a5959}.ghost{background:transparent;color:var(--text);border:1px solid var(--stroke)}.stage{display:grid;grid-template-columns:minmax(220px,320px) minmax(280px,1fr);gap:24px;align-items:start}.instructions{background:var(--panel);border:1px solid var(--stroke);border-radius:24px;padding:22px;box-shadow:0 16px 35px #03061066}.instructions h2{margin:0 0 12px;font-size:22px}.instructions p{margin:0 0 12px;color:var(--muted)}.keys{display:flex;gap:10px;margin-bottom:12px}.keys span{width:44px;height:44px;border-radius:14px;background:#ffffff14;border:1px solid var(--stroke);display:grid;place-items:center;font-size:18px;color:var(--text)}.note{font-size:13px}.lane{position:relative;height:520px;background:#04060ca6;border-radius:32px;border:1px solid var(--stroke);overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0a,0 22px 50px #0508128c}.impact-zone{position:absolute;top:28px;left:0;right:0;display:grid;justify-items:center;gap:8px;z-index:2}.impact-square{width:90px;height:90px;border-radius:18px;border:2px solid rgba(255,255,255,.5);box-shadow:0 0 22px #6ef3c559;background:radial-gradient(circle at top,rgba(110,243,197,.2),transparent 70%)}.feedback{font-size:16px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);transition:color .2s ease,transform .2s ease}.feedback[data-state=good]{color:var(--accent-2);transform:translateY(-2px) scale(1.02)}.feedback[data-state=miss]{color:var(--accent)}.track{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding-top:70px}.track:before{content:"";position:absolute;inset:18px 40px;border-radius:24px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05),rgba(255,255,255,.05) 20px,transparent 20px,transparent 48px);pointer-events:none}.track-glow{position:absolute;left:50%;top:50%;width:140px;height:280px;transform:translate(-50%,-50%);filter:blur(2px)}.arrow{position:absolute;width:80px;height:80px;border-radius:18px;display:grid;place-items:center;font-size:34px;font-weight:700;color:#0f111b;box-shadow:0 12px 24px #00000059;transition:transform .08s linear}.arrow.up{background:linear-gradient(140deg,#d3f8ff,#6ef3c5)}.arrow.right{background:linear-gradient(140deg,#ffd2ba,#ff7a59)}.arrow.down{background:linear-gradient(140deg,#fff0c2,#f6d365)}.arrow.left{background:linear-gradient(140deg,#d7d4ff,#8f8bff)}@media(max-width:900px){.hud{grid-template-columns:1fr}.stats{justify-content:space-between}.stage{grid-template-columns:1fr}}