:root{--bg-grad-1: #050B18;--bg-grad-2: #0A1B33;--bg-grad-3: #071224;--glass: rgba(255, 255, 255, .05);--glass-raised: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .1);--glass-border-strong: rgba(255, 255, 255, .18);--flight-a: #E8483C;--flight-a-glow: rgba(232, 72, 60, .28);--flight-a-dim: rgba(232, 72, 60, .14);--flight-b: #F2C230;--flight-b-glow: rgba(242, 194, 48, .28);--flight-b-dim: rgba(242, 194, 48, .14);--text: #F5F3EE;--text-dim: #9FB0BE;--text-faint: #5E7284;--danger: #E8483C;--danger-glow: rgba(232, 72, 60, .3);--success: #4ADE94;--success-glow: rgba(74, 222, 148, .3);--font-display: "Barlow Condensed", sans-serif;--font-body: "Inter", sans-serif;--radius: 14px;--radius-sm: 10px;--blur: blur(18px);--blur-sm: blur(10px)}*{box-sizing:border-box}html,body{margin:0;padding:0;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh}body{background:radial-gradient(ellipse 900px 600px at 10% -10%,rgba(232,72,60,.09),transparent 60%),radial-gradient(ellipse 800px 700px at 100% 5%,rgba(242,194,48,.07),transparent 55%),linear-gradient(160deg,var(--bg-grad-1) 0%,var(--bg-grad-2) 45%,var(--bg-grad-3) 100%);background-attachment:fixed}#root{min-height:100vh}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;margin:0}button{font-family:var(--font-body);cursor:pointer}a{color:inherit}input,select{font-family:var(--font-body)}:focus-visible{outline:2px solid var(--flight-b);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px}.shell{width:100%;max-width:460px;display:flex;flex-direction:column;gap:20px}.topbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:460px;margin-bottom:8px;position:relative}.topbar-centered{justify-content:center;margin-bottom:32px}@media (max-width: 490px){.topbar-centered{justify-content:space-between}.topbar-centered .topbar-side{position:static}}.brand{display:flex;align-items:center;gap:10px;text-align:left}.topbar-side{position:absolute;right:0}.brand-mark{width:36px;height:36px;border-radius:11px;object-fit:cover;box-shadow:0 4px 18px -4px var(--flight-a-glow);display:block}.brand-name{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.02em}.brand-sub{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;margin-top:-2px}.hearts{display:flex;gap:4px;align-items:center}.heart{width:18px;height:18px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.heart.pop{animation:heartPop .4s ease}@keyframes heartPop{0%{transform:scale(1)}35%{transform:scale(1.5)}to{transform:scale(.85);opacity:.25}}.card{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border);border-radius:var(--radius);padding:22px;box-shadow:0 8px 32px -12px #0006}.card-raised{background:var(--glass-raised);border-color:var(--glass-border-strong)}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);font-weight:600}.btn{border:none;border-radius:var(--radius-sm);padding:15px 20px;font-weight:600;font-size:15px;transition:transform .12s cubic-bezier(.34,1.56,.64,1),opacity .15s ease,box-shadow .15s ease;width:100%}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,var(--flight-b),#D9A61C);color:#2b1f00;box-shadow:0 6px 24px -6px var(--flight-b-glow)}.btn-primary:hover{box-shadow:0 8px 28px -6px var(--flight-b-glow)}.btn-outline{background:var(--glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border:1px solid var(--glass-border-strong);color:var(--text)}.btn-outline:hover{background:var(--glass-raised)}.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.stat-row{display:flex;gap:12px}.stat-block{flex:1;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:14px;text-align:left}.stat-value{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.stat-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}.flight-bar-wrap{display:flex;flex-direction:column;gap:8px}.flight-bar-labels{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:14px;font-weight:600}.flight-bar-labels .a{color:var(--flight-a)}.flight-bar-labels .b{color:var(--flight-b)}.flight-bar{height:14px;border-radius:999px;overflow:hidden;display:flex;background:#ffffff0a;border:1px solid var(--glass-border)}.flight-bar-a{background:linear-gradient(90deg,#2BC7AA,var(--flight-a));box-shadow:0 0 12px var(--flight-a-glow);transition:width .5s cubic-bezier(.22,1,.36,1)}.flight-bar-b{background:linear-gradient(90deg,var(--flight-b),#E0A93C);box-shadow:0 0 12px var(--flight-b-glow);transition:width .5s cubic-bezier(.22,1,.36,1)}.options{display:flex;flex-direction:column;gap:10px}.option{text-align:left;background:var(--glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:15px 16px;color:var(--text);font-size:15px;font-weight:500;transition:border-color .15s ease,background .15s ease,transform .1s ease}.option:hover:not(:disabled){border-color:var(--glass-border-strong);background:var(--glass-raised)}.option:active:not(:disabled){transform:scale(.98)}.option.selected{border-color:var(--flight-b);background:var(--flight-b-dim)}.option.correct{border-color:var(--success);background:var(--success-glow);animation:correctPulse .5s ease}.option.wrong{border-color:var(--danger);background:var(--danger-glow);animation:wrongShake .4s ease}@keyframes correctPulse{0%{transform:scale(1)}40%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.progress-dots{display:flex;gap:6px}.progress-dot{width:8px;height:8px;border-radius:999px;background:var(--glass-border-strong);transition:background .3s ease,transform .3s ease}.progress-dot.filled{background:var(--flight-b);box-shadow:0 0 8px var(--flight-b-glow)}.leaderboard-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--glass-border)}.leaderboard-row:last-child{border-bottom:none}.rank{font-family:var(--font-display);font-size:18px;color:var(--text-faint);width:22px}.avatar-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0;box-shadow:0 0 6px currentColor}.avatar-badge{width:32px;height:32px;border-radius:999px;flex-shrink:0;background:var(--glass-raised);border:1.5px solid var(--glass-border-strong);display:flex;align-items:center;justify-content:center;font-size:16px}.nav-tabs{display:flex;width:100%;max-width:460px;gap:8px;margin-top:12px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:6px}.nav-tab{flex:1;background:transparent;border:none;color:var(--text-faint);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:10px 4px;border-radius:8px;transition:background .2s ease,color .2s ease}.nav-tab.active{color:#2b1f00;background:linear-gradient(135deg,var(--flight-b),#D9A61C)}.center-text{text-align:center}.muted{color:var(--text-dim);font-size:13px;line-height:1.5}.audio-player{display:flex;align-items:center;justify-content:center;gap:16px;padding:30px 20px;background:var(--glass-raised);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border-radius:var(--radius);border:1px solid var(--glass-border)}.play-btn{width:58px;height:58px;border-radius:999px;background:linear-gradient(135deg,var(--flight-b),#D9A61C);box-shadow:0 6px 20px -4px var(--flight-b-glow);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.play-btn:active{transform:scale(.92)}.waveform{display:flex;align-items:center;gap:3px;height:32px}.waveform span{width:3px;background:var(--flight-a);border-radius:2px;opacity:.6;transition:opacity .2s ease,height .2s ease}.instrument-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.instrument-card{background:var(--glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:18px 12px;text-align:center;color:var(--text);transition:border-color .15s ease,background .15s ease,transform .1s ease}.instrument-card:active{transform:scale(.97)}.instrument-card.selected{border-color:var(--flight-b);background:var(--flight-b-dim);box-shadow:0 0 20px -6px var(--flight-b-glow)}.instrument-icon{font-size:26px;display:block;margin-bottom:8px}.instrument-name{font-family:var(--font-display);font-weight:600;font-size:15px}.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}.badge-a{background:var(--flight-a-dim);color:var(--flight-a);border:1px solid rgba(63,224,197,.3)}.badge-b{background:var(--flight-b-dim);color:var(--flight-b);border:1px solid rgba(240,185,78,.3)}.lock-icon{font-size:40px;margin-bottom:4px}.countdown{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--flight-b);font-variant-numeric:tabular-nums;text-shadow:0 0 20px var(--flight-b-glow)}.field-input,.field-select{width:100%;background:var(--glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:13px 14px;color:var(--text);font-size:15px;transition:border-color .15s ease}.field-input:focus,.field-select:focus{border-color:var(--flight-b);outline:none}.field-input::placeholder{color:var(--text-faint)}