html,body{margin:0;height:100%;background:#0e0f13;color:#e6e6e6;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";overflow:hidden}#start-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:#0e0f13;z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}#start-screen.hidden{display:none}.start-logo{width:360px;height:auto;image-rendering:crisp-edges}.start-prompt{font-size:11px;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace;color:#ff900099;letter-spacing:1.5px;text-transform:uppercase}.mode-select{display:flex;gap:16px;margin-top:24px}.mode-btn{padding:6px 48px;font-size:11px;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace;color:#000;background:#ff9000;border:none;border-radius:0;cursor:pointer;transition:all .1s ease;text-transform:uppercase;letter-spacing:1.5px}.mode-btn:hover{background:#fa3;transform:none;box-shadow:0 0 0 2px #ff9000}.mode-btn:active{background:#cc7300}#mobile-lock-screen{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(145deg,#0e0f13,#1a1c22,#0e0f13);z-index:10000;flex-direction:column;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;text-align:center}#mobile-lock-screen.visible{display:flex}.lock-icon{width:80px;height:80px;margin-bottom:24px;opacity:.9}.lock-icon svg{width:100%;height:100%}.lock-title{font-size:24px;font-weight:600;color:#fff;margin-bottom:12px;letter-spacing:-.5px}.lock-subtitle{font-size:16px;color:#9bd;margin-bottom:24px}.lock-description{font-size:14px;color:#888;line-height:1.6;max-width:320px;margin-bottom:32px}.lock-features{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;text-align:left}.lock-feature{display:flex;align-items:center;gap:12px;font-size:13px;color:#aaa}.lock-feature-icon{width:20px;height:20px;background:#9bbbdd26;border-radius:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.lock-feature-icon svg{width:12px;height:12px;opacity:.8}.lock-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px}.lock-btn{padding:14px 24px;border-radius:0;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit}.lock-btn-primary{background:#9bbbdd26;color:#9bd;border:1px solid rgba(155,187,221,.3)}.lock-btn-primary:hover{background:#9bbbdd40}.lock-btn-secondary{background:transparent;color:#666;border:1px solid rgba(255,255,255,.1)}.lock-btn-secondary:hover{color:#888;border-color:#fff3}.lock-credit{position:absolute;bottom:24px;font-size:12px;color:#555}.lock-credit a{color:#777;text-decoration:none}.lock-credit a:hover{color:#9bd}#app-container{display:flex;width:100%;height:100%;overflow:hidden}#canvas-container{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}#canvas-container canvas{display:block;width:100%;height:100%}canvas.drop-target{outline:1px solid transparent;transition:outline-color .2s ease}canvas.drop-target.drag-over{outline:2px dashed rgba(155,187,221,.85)}#panel-container{width:280px;min-width:280px;height:100%;overflow-y:auto;overflow-x:hidden;background:#14161cf2;border-left:1px solid rgba(255,255,255,.08);scrollbar-width:thin;scrollbar-color:#444 #1a1c22}#panel-container::-webkit-scrollbar{width:8px}#panel-container::-webkit-scrollbar-track{background:#1a1c22}#panel-container::-webkit-scrollbar-thumb{background:#444;border-radius:0}#panel-container::-webkit-scrollbar-thumb:hover{background:#555}#panel-container .tp-dfwv{width:100%!important;position:relative!important;right:auto!important;top:auto!important}#hud-controls{position:fixed;bottom:0;left:0;right:0;z-index:100;pointer-events:none;opacity:1;transition:opacity .6s ease;font-size:11px;color:#ff9000;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase}#hud-controls.hud-hidden{opacity:0;pointer-events:none}#hud-controls:not(.hud-hidden){pointer-events:auto}.hud-controls-left{position:absolute;bottom:24px;left:28px;display:flex;flex-direction:column;gap:8px;text-shadow:0 0 8px rgba(255,144,0,.5)}.hud-controls-right{position:absolute;bottom:24px;right:28px;display:flex;flex-direction:column;align-items:flex-end;gap:18px;text-shadow:0 0 8px rgba(255,144,0,.5)}#hud-controls .controls{display:grid;grid-template-columns:auto auto;gap:20px 20px}#hud-controls .control-item{white-space:nowrap}#hud-controls .control-item kbd{background:#ff900026;padding:2px 6px;border-radius:0;font-family:inherit;font-weight:600;border:1px solid rgba(255,144,0,.3);box-shadow:0 0 4px #ff900033}#hud-controls .credit{white-space:nowrap;font-weight:600}#hud-controls a{color:#ff9000;text-decoration:none;font-weight:600;background:#ff900026;padding:2px 6px;border-radius:0;border:1px solid rgba(255,144,0,.3);box-shadow:0 0 4px #ff900033;transition:background .2s ease,box-shadow .2s ease}#hud-controls a:hover{background:#ff900040;box-shadow:0 0 8px #ff900066}a,a:visited{color:#9bd;text-decoration:none}a:hover{text-decoration:underline}@media (max-width: 768px){#panel-container{display:none}#hud-controls{font-size:10px}.hud-controls-left{bottom:12px;left:12px;gap:6px}.hud-controls-right{bottom:12px;right:12px}#hud-controls .controls{display:none}#hud-controls .mobile-hint{display:block}}@media (max-width: 480px){#hud-controls{font-size:9px}.hud-controls-left{bottom:8px;left:8px}.hud-controls-right{bottom:8px;right:8px}}#hud-controls .mobile-hint{display:none}#dev-panel-toggle{cursor:pointer;display:none}#dev-panel-toggle .arrow{display:inline-block;transition:transform .2s ease;font-size:9px}#dev-panel-toggle.panel-open .arrow{transform:rotate(180deg)}#panel-container{transition:width .3s ease,min-width .3s ease,opacity .3s ease}#panel-container.hidden{width:0;min-width:0;opacity:0;pointer-events:none;overflow:hidden}.curved-gauge{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:128px;pointer-events:none;z-index:100}.curved-gauge svg{width:100%;height:100%;overflow:visible}.gauge-track{fill:none;stroke:#ff900033;stroke-width:2;transition:stroke .2s ease}.gauge-arc{fill:none;stroke:#ff900080;stroke-width:2;stroke-linecap:round;transition:stroke .2s ease}.curved-gauge.landing-visible .gauge-track,.curved-gauge.landing-visible .gauge-arc{stroke:#ff9000}.curved-gauge.landing-visible .gauge-scale line,.curved-gauge.landing-visible .gauge-scale line.major{stroke:#ff9000}.curved-gauge.landing-visible .gauge-label{fill:#ff9000}.gauge-tick{stroke:#ff9000;stroke-width:1;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,144,0,.8))}.gauge-value{font-size:10px;fill:#ff9000;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace}.gauge-value.left{text-anchor:end}.gauge-value.right{text-anchor:start}.gauge-label{font-size:8px;fill:#ff900099;font-weight:500;font-family:SF Mono,Fira Code,Consolas,monospace;text-transform:uppercase;letter-spacing:.5px;transition:fill .2s ease}.gauge-label.left{text-anchor:end}.gauge-label.right{text-anchor:start}.gauge-scale line{stroke:#ff900040;stroke-width:1;transition:stroke .2s ease}.gauge-scale line.major{stroke:#ff900066;stroke-width:1.5;transition:stroke .2s ease}.gauge-tick,.gauge-value{transition:all .1s ease-out}.boost-pip{transition:fill .1s ease,opacity .1s ease}.boost-pip-inactive{fill:#ff900033}.boost-pip-active{fill:#ff9000d9;filter:drop-shadow(0 0 2px rgba(255,144,0,.5))}.boost-pip-boosting{fill:#4ade80;filter:drop-shadow(0 0 3px rgba(74,222,128,.8))}.landing-arc{fill:none;stroke:#ff9000;stroke-width:1.5;stroke-dasharray:91;stroke-dashoffset:91;transition:stroke-dashoffset .3s ease}#landing-label{font-size:8px;fill:#ff9000;font-weight:600;letter-spacing:1.5px;font-family:SF Mono,Fira Code,Consolas,monospace;text-transform:uppercase;opacity:0;transition:opacity .2s ease}#landing-line{stroke:#ff9000;stroke-width:1.5;stroke-dasharray:35;stroke-dashoffset:35;transition:stroke-dashoffset .2s ease}.landing-action,.landing-hint{font-size:8px;fill:#ff9000;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase}#landing-sell-actions,#landing-launch-hint{opacity:0;transition:opacity .2s ease}#landing-circle-group.landing-visible .landing-arc{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease-out}#landing-circle-group.landing-visible #landing-label{opacity:1;transition:opacity .4s ease .4s}#landing-circle-group.landing-visible #landing-line{stroke-dashoffset:0;transition:stroke-dashoffset .3s ease .6s}#landing-circle-group.landing-visible #landing-sell-actions,#landing-circle-group.landing-visible #landing-launch-hint{opacity:1;transition:opacity .3s ease .8s}@media (max-width: 768px){.curved-gauge{width:240px;height:103px}}.flight-status-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:150;pointer-events:none;opacity:0;transition:opacity .3s ease;font-family:SF Mono,Fira Code,Consolas,monospace;text-transform:uppercase;letter-spacing:1.5px}.flight-status-overlay.visible{opacity:1}#crash-overlay{color:#f44;text-shadow:0 0 30px rgba(255,68,68,.7)}#crash-overlay .status-text{font-size:11px;font-weight:600;letter-spacing:1.5px;margin-bottom:12px;animation:crash-shake .1s ease-in-out infinite}#crash-overlay .status-hint{font-size:11px;color:#f44c;letter-spacing:1.5px}#crash-overlay .status-hint kbd{background:#f443;padding:2px 8px;border-radius:0;border:1px solid rgba(255,68,68,.4);font-family:inherit;font-weight:600}@keyframes crash-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}#hunt-hud{position:fixed;top:50%;left:0;right:0;transform:translateY(-50%);z-index:100;pointer-events:none;display:flex;justify-content:space-between;align-items:center;padding:0 92px}#hunt-hud.hidden{display:none}.hunt-hud-left,.hunt-hud-right{display:flex;align-items:center;gap:12px;text-shadow:0 0 8px rgba(255,144,0,.5)}#hunt-hud .hunt-label{font-size:11px;font-weight:600;color:#ff9000;letter-spacing:1.5px;font-family:SF Mono,Fira Code,Consolas,monospace;text-transform:uppercase}.hunt-payload-item{display:flex;align-items:center;gap:5px}.hunt-dot{width:8px;height:8px;border-radius:1px;flex-shrink:0;transform:rotate(45deg)}#hunt-hud .hunt-value{font-size:11px;font-weight:600;color:#ff9000;font-family:SF Mono,Fira Code,Consolas,monospace;transition:transform .2s ease,color .3s ease}#outfitter-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;width:82vw;max-width:1100px;height:70vh;max-height:600px;z-index:200;font-family:SF Mono,Fira Code,Consolas,monospace;box-shadow:0 0 60px #0009}#outfitter-panel.hidden{display:none}.outfitter-left{width:38%;background:#ff9000;display:flex;flex-direction:column;padding:36px 32px 28px;position:relative}.outfitter-header{margin-bottom:40px}.outfitter-title{color:#1a1000;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase}.outfitter-items{display:flex;flex-direction:column;gap:0;flex:1}.outfitter-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;cursor:pointer;transition:background .15s ease,color .15s ease;border:1px solid transparent}.outfitter-item .upgrade-name{color:#1a1000;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;transition:color .15s ease}.outfitter-item .upgrade-cost{color:#1a1000;font-size:13px;font-weight:600;letter-spacing:1px;transition:color .15s ease}.outfitter-item:hover,.outfitter-item.selected{background:#000000e0;border-color:#ff90004d}.outfitter-item:hover .upgrade-name,.outfitter-item:hover .upgrade-cost,.outfitter-item.selected .upgrade-name,.outfitter-item.selected .upgrade-cost{color:#ff9000}.outfitter-item.cant-afford{opacity:.45}.outfitter-item.cant-afford:hover{background:#0006;cursor:not-allowed}.outfitter-item.maxed-out .upgrade-cost{font-size:11px;opacity:.6}.outfitter-footer{margin-top:auto;display:flex;flex-direction:column;gap:16px}.outfitter-credits{color:#1a1000;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}#outfitter-credits-value{font-weight:700}.outfitter-close{color:#1a1000;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:opacity .2s ease;padding:4px 0}.outfitter-close:hover{opacity:.6}.outfitter-right{width:62%;background:#0a0a0eeb;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:36px 40px 28px}.outfitter-right:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,144,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,144,0,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}.detail-upgrade-name{color:#ff9000;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;position:relative;z-index:1;text-shadow:0 0 20px rgba(255,144,0,.3)}.detail-upgrade-desc{color:#ff900073;font-size:11px;letter-spacing:.8px;line-height:1.6;max-width:360px;position:relative;z-index:1;margin-top:auto}.mark-container{position:relative;flex:1;z-index:1}.mark-container svg.mark-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mark-lines line{stroke:#ff90001f;stroke-width:1;stroke-dasharray:3 6}.mark-lines line.owned{stroke:#ff900059;stroke-dasharray:none}.mark-node{position:absolute;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%);pointer-events:none}.mark-dot{width:6px;height:6px;border-radius:50%;border:1.5px solid rgba(255,144,0,.25);background:transparent;flex-shrink:0;transition:all .3s ease}.mark-label{font-size:11px;font-weight:600;color:#ff900033;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;transition:color .3s ease}.mark-node.owned .mark-dot{background:#ff9000;border-color:#ff9000;box-shadow:0 0 10px #ff900080,0 0 20px #ff900033}.mark-node.owned .mark-label{color:#ff9000;text-shadow:0 0 12px rgba(255,144,0,.4)}.mark-node.next .mark-dot{border-color:#ff9000;box-shadow:0 0 12px #ff900066;animation:markPulse 2.5s ease-in-out infinite}.mark-node.next .mark-label{color:#ff9000a6}.mark-node.locked .mark-dot{border-color:#ff900026}.mark-node.locked .mark-label{color:#ff900026}@keyframes markPulse{0%,to{box-shadow:0 0 8px #ff90004d;border-color:#ff900099}50%{box-shadow:0 0 18px #ff900099,0 0 30px #ff900033;border-color:#ff9000;background:#ff900026}}.credits-earned{font-family:SF Mono,Fira Code,Consolas,monospace;animation:creditsFloat 1s ease-out forwards}@keyframes creditsFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5) translateY(-50px)}}#mobile-hud{display:none;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:90}#mobile-hud.visible{display:block}#throttle-zone-up,#throttle-zone-down{position:absolute;left:0;width:80px;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:background .15s ease}#throttle-zone-up{top:0;height:45%;background:linear-gradient(180deg,rgba(74,222,128,.08) 0%,transparent 100%);border-bottom:1px solid rgba(74,222,128,.15)}#throttle-zone-down{bottom:0;height:45%;background:linear-gradient(0deg,rgba(255,144,0,.08) 0%,transparent 100%);border-top:1px solid rgba(255,144,0,.15)}#throttle-zone-up.active{background:linear-gradient(180deg,rgba(74,222,128,.25) 0%,transparent 100%)}#throttle-zone-down.active{background:linear-gradient(0deg,rgba(255,144,0,.25) 0%,transparent 100%)}.throttle-icon{opacity:.4;transition:opacity .15s ease}.active .throttle-icon{opacity:.9}.throttle-icon svg{width:32px;height:32px}#strafe-zone-left,#strafe-zone-right{position:absolute;right:0;width:80px;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:background .15s ease}#strafe-zone-left{top:0;height:45%;background:linear-gradient(180deg,rgba(155,187,221,.08) 0%,transparent 100%);border-bottom:1px solid rgba(155,187,221,.15)}#strafe-zone-right{bottom:0;height:45%;background:linear-gradient(0deg,rgba(155,187,221,.08) 0%,transparent 100%);border-top:1px solid rgba(155,187,221,.15)}#strafe-zone-left.active{background:linear-gradient(180deg,rgba(155,187,221,.25) 0%,transparent 100%)}#strafe-zone-right.active{background:linear-gradient(0deg,rgba(155,187,221,.25) 0%,transparent 100%)}.strafe-icon{opacity:.4;transition:opacity .15s ease}.active .strafe-icon{opacity:.9}.strafe-icon svg{width:28px;height:28px}#calibrate-btn{position:absolute;top:12px;left:50%;transform:translate(-50%);padding:8px 16px;background:#0009;border:1px solid rgba(155,187,221,.3);border-radius:0;color:#9bd;font-size:12px;font-weight:500;pointer-events:auto;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}#calibrate-btn:active{background:#9bbbdd33;transform:translate(-50%) scale(.95)}#calibrate-btn svg{width:14px;height:14px}#calibrate-btn.calibrating{background:#4ade8033;border-color:#4ade8080;color:#4ade80}#gyro-status{position:absolute;bottom:70px;left:50%;transform:translate(-50%);padding:8px 14px;background:#0009;border-radius:0;font-size:12px;font-family:SF Mono,Fira Code,monospace;color:#666;display:flex;align-items:center;gap:8px;white-space:nowrap}#gyro-status.active{color:#4ade80}#gyro-status .dot{width:8px;height:8px;border-radius:0;background:#444;flex-shrink:0}#gyro-status.active .dot{background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}#mobile-sonar-hint{position:absolute;bottom:100px;left:50%;transform:translate(-50%);padding:8px 16px;background:#0006;border-radius:0;font-size:11px;color:#888;white-space:nowrap}@media (max-width: 768px){#crash-overlay .status-hint{font-size:16px;padding:12px 24px;background:#0006;border-radius:0;margin-top:8px}#crash-overlay .status-hint kbd{display:none}#crash-overlay .status-hint:after{content:"Tap here to restart"}#crash-overlay{pointer-events:auto;cursor:pointer}}#tilt-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;pointer-events:none;opacity:0;transition:opacity .3s ease;background:#0000004d;border-radius:0;padding:10px;box-sizing:border-box}#tilt-indicator.visible{opacity:1}#tilt-indicator svg{width:100%;height:100%}.tilt-ring{fill:none;stroke:#ff90004d;stroke-width:2}.tilt-crosshair{stroke:#ff900066;stroke-width:1}.tilt-dot{fill:#ff9000;filter:drop-shadow(0 0 6px rgba(255,144,0,1));transition:cx .05s ease-out,cy .05s ease-out}.boost-ui{position:fixed;top:65%;left:50%;transform:translate(-50%,-50%);width:200px;text-align:center;z-index:100;pointer-events:none;opacity:0;transition:opacity .3s ease}.boost-ui.visible{opacity:1}.boost-label{font-size:11px;font-weight:600;color:#ff9000;letter-spacing:1.5px;margin-bottom:6px;text-shadow:0 0 10px rgba(255,144,0,.5);text-transform:uppercase;font-family:SF Mono,Fira Code,Consolas,monospace}.boost-progress-bg{width:100%;height:4px;background:#ff90001a;border-radius:0;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,144,0,.2)}.boost-progress-fill{width:0%;height:100%;background:#ff9000;box-shadow:0 0 12px #ff9000cc;transition:width .1s linear}.boost-ui.active .boost-label{color:#4ade80;text-shadow:0 0 10px rgba(74,222,128,.8);animation:boost-pulse .5s ease-in-out infinite alternate}.boost-ui.active .boost-progress-fill{background:#4ade80;box-shadow:0 0 15px #4ade80}@keyframes boost-pulse{0%{opacity:.7;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}@keyframes boost-glitch{0%{transform:translate(2px) skew(.5deg);filter:hue-rotate(10deg) saturate(1.2)}20%{transform:translate(-3px,1px) skew(-.8deg);filter:hue-rotate(-5deg) saturate(1.3)}40%{transform:translate(2px,-1px) skew(.3deg);filter:hue-rotate(5deg) saturate(1.1)}60%{transform:translate(-1px,1px) skew(-.2deg);filter:hue-rotate(-3deg)}80%{transform:translate(1px) skew(.1deg);filter:hue-rotate(2deg)}to{transform:translate(0) skew(0);filter:none}}canvas.boost-glitch{animation:boost-glitch .15s ease-out}#footer-background{position:fixed;bottom:0;left:0;width:100vw;height:auto;pointer-events:none;z-index:1;opacity:1;transition:opacity .5s ease}#footer-background.hud-hidden{opacity:0}#footer-background svg{display:block;width:100%;height:auto;max-height:24vh}#payload-markers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:200}.payload-marker{position:absolute;pointer-events:none;display:flex;align-items:center;gap:6px;transform:translateY(-50%);transition:opacity .1s ease;filter:drop-shadow(0 0 4px currentColor)}.payload-marker-circle{width:20px;height:20px;flex-shrink:0;margin-left:-10px}.payload-marker-circle svg{width:100%;height:100%}.payload-marker-distance{font-size:11px;font-family:SF Mono,Fira Code,Consolas,monospace;color:inherit;text-shadow:0 0 4px currentColor;white-space:nowrap;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}#spotify-container{display:none!important;position:fixed;top:16px;left:16px;z-index:200}.spotify-connect-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#ff900026;border:1px solid rgba(255,144,0,.3);border-radius:0;color:#ff9000;font-size:13px;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.spotify-connect-btn:hover{background:#ff900040;border-color:#ff900080;transform:scale(1.02)}.spotify-connect-btn:active{transform:scale(.98)}.spotify-connect-btn.hidden{display:none}.spotify-icon{width:20px;height:20px}.spotify-input-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center;z-index:1000}.spotify-input-modal.visible{display:flex}.spotify-input-content{background:#181818;border:1px solid rgba(255,144,0,.2);border-radius:0;padding:24px;width:90%;max-width:400px;box-shadow:0 8px 32px #00000080}.spotify-input-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.spotify-input-header h3{margin:0;font-size:18px;font-weight:700;color:#fff;font-family:SF Mono,Fira Code,Consolas,monospace}.spotify-icon-large{width:32px;height:32px}.spotify-input-desc{color:#fff9;font-size:13px;margin:0 0 16px;font-family:SF Mono,Fira Code,Consolas,monospace}.spotify-url-input{width:100%;padding:12px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:0;color:#fff;font-size:14px;font-family:SF Mono,Fira Code,Consolas,monospace;outline:none;transition:all .2s ease;box-sizing:border-box}.spotify-url-input:focus{border-color:#ff9000;background:#ffffff1f}.spotify-url-input::placeholder{color:#fff6}.spotify-input-error{color:#f44;font-size:12px;margin-top:8px;opacity:0;height:0;overflow:hidden;transition:all .2s ease}.spotify-input-error.visible{opacity:1;height:auto;margin-top:8px}.spotify-input-buttons{display:flex;gap:12px;margin-top:20px;justify-content:flex-end}.spotify-modal-btn{padding:10px 20px;border-radius:0;font-size:14px;font-weight:600;font-family:SF Mono,Fira Code,Consolas,monospace;cursor:pointer;transition:all .2s ease;border:none}.spotify-modal-btn-cancel{background:transparent;color:#ffffffb3;border:1px solid rgba(255,255,255,.2)}.spotify-modal-btn-cancel:hover{color:#fff;border-color:#fff6}.spotify-modal-btn-submit{background:#ff9000;color:#fff}.spotify-modal-btn-submit:hover{background:#cc7300;transform:scale(1.02)}.spotify-modal-btn-submit:active{transform:scale(.98)}.spotify-player{display:none;flex-direction:column;background:#000000d9;border:1px solid rgba(255,144,0,.2);border-radius:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden;width:300px;transition:all .3s ease}.spotify-player.visible{display:flex}.spotify-player-header{display:flex;align-items:center;padding:8px 12px;background:#ff90001a;border-bottom:1px solid rgba(255,255,255,.05)}.spotify-player-label{flex:1;font-size:12px;font-weight:600;color:#ff9000;text-transform:uppercase;letter-spacing:1px;font-family:SF Mono,Fira Code,Consolas,monospace}.spotify-expand-btn,.spotify-close-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;color:#ffffff80;cursor:pointer;border-radius:0;transition:all .15s ease}.spotify-expand-btn:hover,.spotify-close-btn:hover{color:#fff;background:#ffffff1a}.spotify-close-btn:hover{color:#f44}.spotify-expand-btn svg,.spotify-close-btn svg{width:16px;height:16px}.spotify-expand-btn svg{transition:transform .3s ease}.spotify-expand-btn svg.rotated{transform:rotate(180deg)}.spotify-player-content{padding:12px;display:flex;flex-direction:column;gap:12px}.spotify-track-info{display:flex;align-items:center}.spotify-track-name{font-size:13px;color:#ffffffe6;font-family:SF Mono,Fira Code,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.spotify-controls{display:flex;align-items:center;gap:8px}.spotify-play-pause{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ff900033;border:1px solid rgba(255,144,0,.3);border-radius:0;color:#ff9000;cursor:pointer;transition:all .2s ease;flex-shrink:0}.spotify-play-pause:hover{background:#ff90004d;border-color:#ff900080;transform:scale(1.05)}.spotify-play-pause:active{transform:scale(.95)}.spotify-play-pause svg{width:16px;height:16px}.spotify-progress-container{flex:1;height:4px;background:#ffffff1a;border-radius:0;cursor:pointer;position:relative;overflow:hidden}.spotify-progress-bar{height:100%;background:#ff9000;border-radius:0;width:0%;transition:width .1s linear}.spotify-beat-react{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ff90001a;border:1px solid rgba(255,144,0,.2);border-radius:0;color:#ff900080;cursor:pointer;transition:all .2s ease;flex-shrink:0}.spotify-beat-react:hover{background:#ff900033;border-color:#ff900066;color:#ff9000cc}.spotify-beat-react.active{background:#ff90004d;border-color:#ff900099;color:#ff9000;animation:beatReactPulse 1s ease-in-out infinite}@keyframes beatReactPulse{0%,to{box-shadow:0 0 #ff900066}50%{box-shadow:0 0 0 4px #ff900000}}.spotify-beat-react svg{width:18px;height:18px}.spotify-modal-btn-file{width:100%;justify-content:center;display:flex;align-items:center}@media (max-width: 768px){#spotify-container{top:auto;bottom:60px;left:50%;transform:translate(-50%)}.spotify-player{width:calc(100vw - 32px);max-width:320px}.spotify-input-content{margin:16px}}