:root{--bg-primary:#05050f;--bg-secondary:#0a0a1a;--bg-card:#0c0c1cd9;--bg-glass:#121228b3;--text-primary:#f0f0f5;--text-secondary:#f0f0f599;--text-muted:#f0f0f54d;--accent-gold:#d6c8b3;--accent-gold-dim:#d6c8b326;--accent-orange:#ff8c42;--border-subtle:#ffffff0f;--border-glow:#ffffff1a;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15%,#d6c8b308,#0000 25%),radial-gradient(circle at 85% 30%,#d6c8b30a,#0000 25%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");height:100vh;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}.header{border-bottom:1px solid var(--border-subtle);z-index:10;background:linear-gradient(#0a0a18f2 0%,#05050ffa 100%);justify-content:space-between;align-items:center;min-height:48px;padding:8px 16px;display:flex}.header-right{align-items:center;gap:16px;display:flex}.upload-section{position:relative}.upload-section input[type=file]{display:none}.drop-zone{border-radius:var(--radius-lg);cursor:pointer;background:var(--accent-gold-dim);border:1.5px dashed #d6c8b34d;align-items:center;gap:10px;padding:8px 20px;transition:all .3s;display:flex}.drop-zone:hover{border-color:var(--accent-gold);background:#d6c8b31f;box-shadow:0 0 20px #d6c8b31a}.drop-zone.drag-over{border-color:var(--accent-gold);background:#d6c8b333;transform:scale(1.02)}.upload-section.loaded .drop-zone{border-style:solid;border-color:var(--border-subtle);background:0 0;padding:4px 14px}.upload-section.loaded .drop-zone-subtitle,.upload-section.loaded .drop-zone-icon{display:none}.drop-zone-icon{font-size:18px}.drop-zone-text{color:var(--accent-gold);font-size:13px;font-weight:600}.drop-zone-subtitle{color:var(--text-muted);font-size:10px}.song-meta{text-align:right}.song-title{color:var(--accent-gold);text-overflow:ellipsis;white-space:nowrap;max-width:350px;font-size:13px;font-weight:700;overflow:hidden}.song-info{color:var(--text-secondary);letter-spacing:.3px;font-size:10px}.canvas-container{background:var(--bg-primary);flex:1;position:relative;overflow:hidden}#gameCanvas{width:100%;height:100%;display:block}.logo-bottom{opacity:.8;pointer-events:none;z-index:5;align-items:center;gap:10px;display:flex;position:absolute;bottom:24px;right:24px}.sax-icon-small,.sax-icon-large{filter:invert(33%)sepia(85%)saturate(3015%)hue-rotate(345deg)brightness(101%)contrast(97%);display:inline-block}.logo-bottom .logo-icon{font-size:28px}.logo-bottom h1{letter-spacing:4px;color:#e63920;margin:0;font-size:24px;font-weight:800}.welcome-screen{z-index:5;background:0 0;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:absolute;top:0;left:0}.welcome-screen.hidden{opacity:0;pointer-events:none}.welcome-content{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0a18d9;border:1px solid #e639201a;border-radius:24px;max-width:800px;padding:40px;box-shadow:0 20px 50px #00000080,inset 0 0 0 1px #ffffff0d}.welcome-logo-large{flex-direction:column;align-items:center;gap:10px;margin-bottom:10px;display:flex}.sax-icon-large{font-size:80px}.welcome-logo-large h1{letter-spacing:6px;color:#e63920;text-shadow:0 0 20px #e639204d;margin:0;font-size:48px;font-weight:800}.welcome-tagline{color:var(--text-secondary);margin-bottom:40px;font-size:18px}.features-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.feature-card{text-align:left;background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;padding:24px}.feature-icon{margin-bottom:12px;font-size:24px}.feature-card h3{color:var(--text-primary);margin-bottom:8px;font-size:16px}.feature-card p{color:var(--text-secondary);font-size:13px;line-height:1.5}.controls-panel{border-top:1px solid var(--border-subtle);background:linear-gradient(#0a0a18f2 0%,#05050ffa 100%);padding:6px 16px 8px}.controls-panel.hidden{display:none}.seek-row{align-items:center;gap:10px;margin-bottom:6px;display:flex}.seek-row input[type=range]{appearance:none;cursor:pointer;background:#ffffff14;border-radius:2px;outline:none;flex:1;height:4px}.seek-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-gold);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px;box-shadow:0 0 8px #d6c8b366}.time-display{color:var(--accent-gold);font-variant-numeric:tabular-nums;text-align:right;min-width:36px;font-size:12px;font-weight:600}.controls-row{flex-wrap:nowrap;align-items:center;gap:14px;display:flex;overflow-x:auto}.playback-controls{align-items:center;gap:6px;display:flex}.control-btn{width:32px;height:32px;color:var(--text-primary);cursor:pointer;background:#ffffff0f;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:13px;transition:all .2s;display:flex}.control-btn:hover{background:#ffffff1f}.control-btn.play-btn{background:var(--accent-gold);color:#000;width:40px;height:40px;font-size:16px;box-shadow:0 2px 12px #d6c8b34d}.control-btn.play-btn:hover{background:#e8dac4;transform:scale(1.05);box-shadow:0 2px 20px #d6c8b380}.hidden{display:none!important}.track-selector{align-items:center;gap:6px;display:flex}.track-selector label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:600}.track-selector select{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:11px;font-family:var(--font);cursor:pointer;background:#ffffff0f;outline:none;max-width:200px;padding:4px 8px}.slider-group{white-space:nowrap;align-items:center;gap:6px;display:flex}.slider-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;font-size:10px;font-weight:600}.slider-group input[type=range]{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;outline:none;width:80px;height:3px}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-gold);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px}.slider-group span{color:var(--accent-gold);font-variant-numeric:tabular-nums;min-width:40px;font-size:11px;font-weight:600}.tempo-input-field{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:46px;color:var(--text-primary);font-size:12px;font-family:var(--font);text-align:center;background:#ffffff0f;outline:none;padding:4px;font-weight:600;transition:all .2s}.tempo-input-field:focus{border-color:var(--accent-gold);background:#ffffff1a}.tempo-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tempo-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-input-group span{min-width:auto}.toggle-group{align-items:center;gap:6px;display:flex}.toggle-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;cursor:pointer;font-size:10px;font-weight:600}.toggle-switch{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:9px;outline:none;width:34px;height:18px;transition:background .3s;position:relative}.toggle-switch:after{content:"";background:#fff6;border-radius:50%;width:14px;height:14px;transition:all .3s;position:absolute;top:2px;left:2px}.toggle-switch:checked{background:var(--accent-gold)}.toggle-switch:checked:after{background:#000;left:18px}.shortcuts-hint{gap:10px;margin-left:auto;display:flex}.shortcut{color:var(--text-muted);align-items:center;gap:3px;font-size:10px;display:flex}kbd{font-family:var(--font);color:var(--text-secondary);background:#ffffff0f;border:1px solid #ffffff14;border-radius:3px;padding:1px 5px;font-size:9px}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:1000;opacity:0;background:#000000b3;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.show{opacity:1}.modal-overlay.hidden{display:none}.modal-card{border-radius:var(--radius-xl);background:linear-gradient(145deg,#12122af2,#080818fa);border:1px solid #ffffff14;width:90%;max-width:420px;padding:28px 32px;transition:transform .3s;transform:scale(.95);box-shadow:0 24px 80px #0009,0 0 40px #d6c8b30d}.modal-overlay.show .modal-card{transform:scale(1)}.modal-header{text-align:center;margin-bottom:24px}.modal-header h2{margin-bottom:6px;font-size:20px;font-weight:700}.modal-subtitle{color:var(--text-secondary);margin-bottom:8px;font-size:13px}.modal-filename{color:var(--accent-gold);background:var(--accent-gold-dim);border-radius:var(--radius-sm);padding:4px 12px;font-size:11px;font-weight:600;display:inline-block}.modal-body{flex-direction:column;gap:10px;display:flex}.instrument-option{border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;text-align:left;color:var(--text-primary);font-family:var(--font);background:#ffffff05;align-items:center;gap:14px;padding:14px 18px;transition:all .25s;display:flex}.instrument-option:hover{border-color:var(--accent-gold);background:#d6c8b30f;transform:translateY(-1px);box-shadow:0 0 20px #d6c8b314}.instrument-option:active{transform:scale(.98)}.inst-icon{flex-shrink:0;font-size:28px}.inst-label{font-size:14px;font-weight:600;display:block}.inst-desc{color:var(--text-secondary);margin-top:2px;font-size:11px;display:block}@media (width<=768px){.controls-row{gap:8px}.shortcuts-hint{display:none}.slider-group input[type=range]{width:60px}}