*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a1a;--green:#00e060;--green-dim:#007030;--amber:#fa0;--text:#c8ffc8;--text-dim:#575;--border:#2a3a2a;--panel:#111811;--panel2:#0d120d;--accent:#0f8;--error:#f44;--font-mono:"Share Tech Mono", "Courier New", monospace;--font-lcd:"VT323", monospace}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:var(--font-mono);-webkit-user-select:none;user-select:none;overflow:hidden}#app{width:100%;height:100%;position:relative}.login-screen{background:radial-gradient(#0d1f0d 0%,#050805 100%);flex-direction:column;justify-content:center;align-items:center;gap:24px;height:100%;display:flex}.login-logo{font-family:var(--font-lcd);color:var(--green);text-shadow:0 0 20px var(--green), 0 0 40px var(--green-dim);letter-spacing:8px;font-size:72px;animation:2s ease-in-out infinite alternate glow}@keyframes glow{0%{text-shadow:0 0 10px var(--green), 0 0 20px var(--green-dim)}to{text-shadow:0 0 30px var(--green), 0 0 60px var(--green-dim), 0 0 80px var(--green-dim)}}.login-tagline{font-family:var(--font-mono);color:var(--text-dim);letter-spacing:3px;text-transform:uppercase;font-size:13px}.login-btn{background:var(--green);color:#000;font-family:var(--font-mono);letter-spacing:2px;cursor:pointer;text-transform:uppercase;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);border:none;padding:12px 32px;font-size:14px;font-weight:700;transition:background .1s,transform .1s}.login-btn:hover{background:var(--accent);transform:scale(1.03)}.login-btn:active{transform:scale(.97)}.login-note{color:var(--text-dim);opacity:.6;font-size:11px}.error-msg{color:var(--error);text-align:center;max-width:300px;font-size:12px}.workspace{justify-content:center;align-items:center;padding:28px 24px;display:flex;position:relative;inset:0;overflow:hidden}.skin{-webkit-user-select:none;user-select:none;position:relative}.skin-classic{width:780px;font-family:var(--font-mono);background:linear-gradient(160deg,#252520 0%,#1a1a16 60%,#111110 100%);border:1px solid #3a3a30;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px #000,0 8px 40px #000c,inset 0 1px #ffffff0f}.sc-header{background:linear-gradient(90deg,#0d1a0d,#111a0f);border-bottom:1px solid #1a2a14;align-items:center;gap:12px;padding:10px 14px 8px;display:flex}.sc-logo-wrap{flex-direction:column;flex-shrink:0;align-items:center;display:flex}.sc-logo{font-family:var(--font-lcd);color:var(--green);text-shadow:0 0 12px var(--green), 0 0 24px var(--green-dim);font-size:36px;line-height:1}.sc-logo-sub{font-family:var(--font-mono);letter-spacing:3px;color:var(--green-dim);margin-top:-2px;font-size:8px}.sc-track{flex:1;overflow:hidden}.sc-ticker-wrap{white-space:nowrap;overflow:hidden}.sc-ticker{font-family:var(--font-lcd);color:var(--green);text-shadow:0 0 8px var(--green-dim);padding-right:80px;font-size:20px;animation:14s linear infinite scroll-ticker;display:inline-block}@keyframes scroll-ticker{0%{transform:translate(0)}to{transform:translate(-100%)}}.sc-artist{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:10px;overflow:hidden}.sc-meta{text-align:right;flex-shrink:0}.sc-time{font-family:var(--font-lcd);color:var(--amber);text-shadow:0 0 8px #ffaa0080;font-size:26px;line-height:1}.sc-bpm{color:var(--text-dim);letter-spacing:1px;margin-top:2px;font-size:9px}.sc-body{gap:0;padding:10px 14px;display:flex}.sc-viz-wrap{flex-direction:column;flex:1;gap:4px;display:flex}.sc-canvas{background:#050505;border:1px solid #1a2a14;border-radius:2px;width:100%;height:200px;display:block}.sc-viz-modes{gap:2px;display:flex}.sc-viz-btn{color:var(--text-dim);font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:#0d120d;border:1px solid #1c2c1c;flex:1;padding:3px 0;font-size:9px}.sc-viz-btn:hover{background:var(--green-dim);color:var(--text)}.sc-viz-btn.active{background:var(--green-dim);color:var(--green);border-color:var(--green-dim)}.sc-right{flex-direction:column;gap:8px;width:240px;padding-left:12px;display:flex}.sc-eq-wrap{background:#060906;border:1px solid #1a2a14;border-radius:2px;flex:1;padding:6px 8px}.sc-eq-bars{align-items:flex-end;gap:3px;height:64px;display:flex}.sc-eq-col{flex:1;height:100%}.sc-eq-track{background:#0a0f0a;align-items:flex-end;height:100%;display:flex;position:relative}.sc-eq-bar{background:var(--green);width:100%;height:0%;box-shadow:0 0 3px var(--green-dim);transition:height 40ms,background 80ms}.sc-eq-peak{background:var(--amber);height:2px;transition:bottom .1s;position:absolute;bottom:0;left:0;right:0}.sc-playback{gap:4px;display:flex}.sc-btn{height:28px;color:var(--green);cursor:pointer;background:linear-gradient(#252520,#1a1a16);border:1px solid #3a3a2a;border-bottom-color:#0a0a08;flex:1;justify-content:center;align-items:center;font-size:13px;transition:background .1s;display:flex}.sc-btn:hover{color:var(--accent);background:linear-gradient(#2a2a22,#222218)}.sc-btn:active{background:#111;transform:translateY(1px)}.sc-progress-wrap{align-items:center;gap:6px;display:flex}.sc-progress-bg{cursor:pointer;background:#0a0a08;border:1px solid #2a2a20;flex:1;height:4px;position:relative}.sc-progress-fill{background:var(--green);height:100%;box-shadow:0 0 4px var(--green-dim);width:0%;transition:width .25s linear}.sc-time-total{font-family:var(--font-lcd);color:var(--text-dim);flex-shrink:0;font-size:13px}.sc-vol-wrap{align-items:center;gap:6px;display:flex}.sc-vol-label{color:var(--text-dim);letter-spacing:1px;font-size:9px}.sc-vol{height:4px;accent-color:var(--green);cursor:pointer;flex:1}.sc-footer{background:#0d100d;border-top:1px solid #1a2a14;justify-content:space-between;align-items:center;padding:7px 14px;display:flex}.sc-skin-btns{gap:3px;display:flex}.sc-skin-pill{color:var(--text-dim);font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:#0d120d;border:1px solid #1c2c1c;padding:3px 8px;font-size:9px}.sc-skin-pill:hover{border-color:var(--green-dim);color:var(--text)}.sc-skin-pill.active{border-color:var(--green);color:var(--green)}.sc-shader-btn{border:1px solid var(--green-dim);color:var(--green-dim);font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:0 0;padding:3px 10px;font-size:10px}.sc-shader-btn:hover{border-color:var(--green);color:var(--green)}.skin-classic.beat .sc-logo{text-shadow:0 0 30px var(--green), 0 0 60px var(--green-dim)}.skin-minimal{width:700px;font-family:var(--font-mono);background:#0d0d0d;border:1px solid #222;gap:0;display:flex;overflow:hidden}.sm-art-col{flex-direction:column;flex-shrink:0;width:260px;display:flex}.sm-canvas{background:#000;flex:1;width:100%;min-height:220px;display:block}.sm-viz-modes{background:#000;gap:1px;padding:4px;display:flex}.sm-viz-btn{color:#444;font-family:var(--font-mono);cursor:pointer;letter-spacing:1px;background:#0d0d0d;border:1px solid #222;flex:1;padding:3px 0;font-size:9px}.sm-viz-btn:hover{color:#aaa;border-color:#444}.sm-viz-btn.active{color:#eee;border-color:#666}.sm-info-col{border-left:1px solid #1a1a1a;flex-direction:column;flex:1;gap:10px;padding:16px 16px 12px;display:flex}.sm-track{flex-shrink:0}.sm-ticker-wrap{white-space:nowrap;overflow:hidden}.sm-ticker{color:#e8e8e8;letter-spacing:-.3px;padding-right:60px;font-size:16px;animation:14s linear infinite scroll-ticker;display:inline-block}.sm-artist{color:#555;margin-top:4px;font-size:11px}.sm-wave-bar{background:#1a1a1a;height:2px;position:relative;overflow:hidden}.sm-wave-fill{background:#e8e8e8;width:0%;height:100%;transition:width 50ms,opacity 50ms}.sm-controls{align-items:center;gap:8px;display:flex}.sm-btn{color:#888;cursor:pointer;background:0 0;border:1px solid #222;justify-content:center;align-items:center;width:30px;height:28px;font-size:13px;display:flex}.sm-btn:hover{color:#eee;border-color:#555}.sm-btn:active{background:#1a1a1a}.sm-time{color:#555;margin-left:auto;font-size:11px}.sm-vol{accent-color:#888;cursor:pointer;width:60px;height:2px}.sm-progress-bg{cursor:pointer;background:#1a1a1a;height:2px;position:relative}.sm-progress-fill{background:#e8e8e8;width:0%;height:100%;transition:width .25s linear}.sm-footer{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.sm-skin-btns{gap:4px;display:flex}.sm-skin-pill{color:#444;font-family:var(--font-mono);cursor:pointer;letter-spacing:1px;background:0 0;border:1px solid #222;padding:2px 8px;font-size:9px}.sm-skin-pill:hover{color:#aaa;border-color:#444}.sm-skin-pill.active{color:#eee;border-color:#666}.sm-shader-btn{color:#444;font-family:var(--font-mono);cursor:pointer;letter-spacing:1px;background:0 0;border:none;font-size:10px}.sm-shader-btn:hover{color:#aaa}.skin-minimal.beat .sm-wave-fill{background:#fff}.skin-cyberpunk{width:780px;font-family:var(--font-mono);background:#04000e;border:1px solid #3a006a;position:relative;overflow:hidden}.scp-corner{z-index:2;width:12px;height:12px;position:absolute}.scp-corner.tl{border-top:2px solid #f0f;border-left:2px solid #f0f;top:0;left:0}.scp-corner.tr{border-top:2px solid #0ff;border-right:2px solid #0ff;top:0;right:0}.scp-corner.bl{border-bottom:2px solid #0ff;border-left:2px solid #0ff;bottom:0;left:0}.scp-corner.br{border-bottom:2px solid #f0f;border-right:2px solid #f0f;bottom:0;right:0}.scp-top{background:linear-gradient(90deg,#ff00ff0f,#0000,#00ffff0f);border-bottom:1px solid #2a005a;justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.scp-id{color:#f0f;letter-spacing:3px;text-shadow:0 0 8px #f0f;font-size:10px}.scp-bpm{font-family:var(--font-lcd);color:#0ff;text-shadow:0 0 8px #0ff;font-size:16px}.scp-main{gap:14px;padding:10px 14px;display:flex}.scp-viz-col{flex-direction:column;flex-shrink:0;gap:4px;width:300px;display:flex}.scp-canvas{background:#04000e;border:1px solid #3a006a;width:100%;height:160px;display:block}.scp-viz-modes{gap:3px;display:flex}.scp-viz-btn{color:#60a;font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:0 0;border:1px solid #3a006a;flex:1;padding:3px 0;font-size:9px}.scp-viz-btn:hover{color:#f0f;border-color:#f0f}.scp-viz-btn.active{color:#0ff;text-shadow:0 0 6px #0ff;border-color:#0ff}.scp-data-col{flex-direction:column;flex:1;gap:12px;display:flex}.scp-label{letter-spacing:2px;color:#60a;margin-bottom:3px;font-size:8px}.scp-ticker-wrap{white-space:nowrap;overflow:hidden}.scp-ticker{color:#f0f;text-shadow:0 0 10px #ff00ff80;padding-right:60px;font-size:15px;animation:14s linear infinite scroll-ticker;display:inline-block}.scp-artist{color:#0ff;opacity:.7;margin-top:3px;font-size:10px}.scp-energy-track{background:#0d0020;border:1px solid #3a006a;height:4px;position:relative}.scp-energy-fill{background:linear-gradient(90deg,#f0f,#0ff);width:0%;height:100%;transition:width 80ms;box-shadow:0 0 6px #f0f}.scp-progress-bg{cursor:pointer;background:#0d0020;border:1px solid #3a006a;height:3px;position:relative}.scp-progress-fill{background:#0ff;width:0%;height:100%;transition:width .25s linear;box-shadow:0 0 6px #0ff}.scp-time{font-family:var(--font-lcd);color:#0ff;margin-top:3px;font-size:13px;display:block}.scp-controls{border-top:1px solid #1a0030;align-items:center;gap:6px;padding:8px 14px;display:flex}.scp-btn{color:#f0f;font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);background:0 0;border:1px solid #3a006a;padding:5px 12px;font-size:10px;transition:background .1s,box-shadow .1s}.scp-btn:hover{background:#ff00ff26;box-shadow:0 0 10px #f0f6}.scp-vol-wrap{align-items:center;gap:6px;margin-left:auto;display:flex}.scp-vol{accent-color:#f0f;cursor:pointer;width:70px;height:3px}.scp-footer{background:#ff00ff08;border-top:1px solid #1a0030;justify-content:space-between;align-items:center;padding:7px 14px;display:flex}.scp-skin-btns{gap:4px;display:flex}.scp-skin-pill{color:#60a;font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:0 0;border:1px solid #3a006a;padding:2px 8px;font-size:9px}.scp-skin-pill:hover{color:#f0f;border-color:#f0f}.scp-skin-pill.active{color:#0ff;border-color:#0ff}.scp-shader-btn{color:#60a;font-family:var(--font-mono);letter-spacing:2px;cursor:pointer;background:0 0;border:1px solid #3a006a;padding:3px 10px;font-size:10px}.scp-shader-btn:hover{color:#0ff;border-color:#0ff;box-shadow:0 0 8px #00ffff4d}.skin-cyberpunk.beat{box-shadow:0 0 20px #ff00ff4d,0 0 40px #00ffff1a}.skin-cyberpunk.glitch .scp-ticker{color:#0ff;transform:translate(2px)}.skin-cyberpunk.glitch .scp-id{letter-spacing:4px;opacity:.7}.shader-drawer{border-top:2px solid var(--green-dim);z-index:100;background:#06100a;flex-direction:column;max-height:85vh;transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%)}.shader-drawer.open{transform:translateY(0)}.sd-handle{z-index:2;background:#040c06;border-bottom:1px solid #1a2a1a;flex-shrink:0;justify-content:space-between;align-items:center;padding:5px 14px;display:flex;position:sticky;top:0}.sd-handle-title{font-family:var(--font-lcd);color:var(--green);letter-spacing:2px;text-shadow:0 0 8px var(--green-dim);font-size:13px}.sd-handle-btns{align-items:center;gap:6px;display:flex}.sd-close,.sd-advanced-btn{border:1px solid var(--green-dim);color:var(--green-dim);font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:0 0;padding:3px 10px;font-size:10px}.sd-close:hover,.sd-advanced-btn:hover{border-color:var(--green);color:var(--green)}.sd-advanced-btn.active{border-color:var(--accent);color:var(--accent)}.sd-preset-grid{flex-wrap:wrap;flex-shrink:0;gap:6px;padding:10px 14px;display:flex}.sd-preset-card{cursor:pointer;text-align:left;background:#0a120a;border:1px solid #1a2a1a;border-radius:4px;flex-direction:row;align-items:center;gap:6px;padding:5px 10px;transition:border-color .15s,background .15s;display:flex}.sd-preset-card:hover{border-color:var(--green-dim);background:#0f1a0f}.sd-preset-card.active{border-color:var(--green);background:#00c85014;box-shadow:0 0 8px #00c85026}.sd-preset-emoji{font-size:14px;line-height:1}.sd-preset-name{font-family:var(--font-mono);color:var(--text);letter-spacing:.5px;white-space:nowrap;font-size:11px}.sd-preset-card.active .sd-preset-name{color:var(--green)}.sd-preset-desc{display:none}.sd-editor-wrap{border-top:1px solid #1a2a1a;flex-direction:column;height:300px;display:flex;overflow:hidden}.sd-editor-wrap.hidden{display:none}.skin-calm{width:780px;font-family:var(--font-mono);color:#1a1916;background:#f7f6f3;border:1px solid #e0ddd6;border-radius:12px;overflow:hidden;box-shadow:0 4px 32px #0000001a}.scm-header{background:#fff;border-bottom:1px solid #eae8e2;align-items:center;gap:12px;padding:14px 18px 10px;display:flex}.scm-logo{color:#6366f1;letter-spacing:1px;flex-shrink:0;font-size:13px;font-weight:600}.scm-track{flex:1;overflow:hidden}.scm-ticker-wrap{white-space:nowrap;overflow:hidden}.scm-ticker{color:#1a1916;padding-right:60px;font-size:14px;animation:14s linear infinite scroll-ticker;display:inline-block}.scm-artist{color:#888580;margin-top:2px;font-size:11px}.scm-timebox{color:#888580;flex-shrink:0;align-items:baseline;gap:3px;font-size:13px;display:flex}.scm-time{color:#1a1916;font-weight:600}.scm-sep{color:#ccc}.scm-canvas{background:#0d0d12;width:100%;height:120px;display:block}.scm-progress-bg{cursor:pointer;background:#e8e6e0;height:3px}.scm-progress-fill{background:#6366f1;width:0%;height:100%;transition:width .25s linear,opacity .1s}.scm-controls{background:#fff;border-top:1px solid #eae8e2;align-items:center;gap:8px;padding:12px 18px;display:flex}.scm-btn{cursor:pointer;color:#555;background:0 0;border:1px solid #e0ddd6;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;transition:border-color .15s,color .15s;display:flex}.scm-btn:hover{color:#6366f1;border-color:#6366f1}.scm-play-main{color:#fff;background:#6366f1;border-color:#6366f1;width:40px;height:40px;font-size:16px}.scm-play-main:hover{color:#fff;background:#4f51d0;border-color:#4f51d0}.scm-vol-wrap{align-items:center;gap:6px;margin-left:auto;display:flex}.scm-vol-icon{color:#888580;font-size:12px}.scm-vol{accent-color:#6366f1;cursor:pointer;width:80px}.scm-footer{background:#f7f6f3;border-top:1px solid #eae8e2;justify-content:space-between;align-items:center;padding:8px 18px;display:flex}.scm-skin-btns{flex-wrap:wrap;gap:4px;display:flex}.scm-skin-pill{font-family:var(--font-mono);letter-spacing:.5px;color:#888580;cursor:pointer;background:0 0;border:1px solid #d8d5ce;border-radius:99px;padding:3px 8px;font-size:9px}.scm-skin-pill:hover{color:#6366f1;border-color:#6366f1}.scm-skin-pill.active{color:#6366f1;background:#6366f112;border-color:#6366f1}.scm-shader-btn{font-family:var(--font-mono);color:#888580;cursor:pointer;background:0 0;border:1px solid #d8d5ce;border-radius:99px;padding:3px 12px;font-size:10px}.scm-shader-btn:hover{color:#6366f1;border-color:#6366f1}.skin-trippy{width:780px;font-family:var(--font-mono);background:#0a0010;border:2px solid #0000;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 0 40px #b400ff40}.stp-border-glow{-webkit-mask-composite:destination-out;pointer-events:none;z-index:10;background:linear-gradient(90deg,#f0f,#0ff,#ff0) border-box;border:2px solid #0000;border-radius:8px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.stp-header{background:#ffffff08;border-bottom:1px solid #ffffff0f;align-items:center;gap:12px;padding:10px 16px;display:flex}.stp-logo{font-family:var(--font-lcd);letter-spacing:3px;background:linear-gradient(90deg,#f0f,#0ff,#ff0);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;flex-shrink:0;font-size:18px;font-weight:700}.stp-meta{flex:1;overflow:hidden}.stp-ticker-wrap{white-space:nowrap;overflow:hidden}.stp-ticker{color:#fffc;padding-right:60px;font-size:13px;animation:14s linear infinite scroll-ticker;display:inline-block}.stp-artist{color:#fff6;margin-top:2px;font-size:10px}.stp-time{font-family:var(--font-lcd);color:#fff;flex-shrink:0;font-size:20px}.stp-canvas{background:#000;width:100%;height:200px;display:block}.stp-progress-bg{cursor:pointer;background:#ffffff0f;height:4px}.stp-progress-fill{background:linear-gradient(90deg,#f0f,#0ff);width:0%;height:100%;transition:width .25s linear}.stp-controls{background:#ffffff05;border-top:1px solid #ffffff0d;align-items:center;gap:8px;padding:10px 16px;display:flex}.stp-btn{color:#ffffffb3;height:32px;font-family:var(--font-mono);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:4px;flex:1;font-size:14px;transition:background .15s,border-color .15s}.stp-btn:hover{background:#ffffff1a;border-color:#ffffff4d}.stp-vol{accent-color:#f0f;cursor:pointer;flex:1}.stp-footer{background:#0000004d;border-top:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:7px 16px;display:flex}.stp-skin-btns{flex-wrap:wrap;gap:4px;display:flex}.stp-skin-pill{font-family:var(--font-mono);color:#ffffff73;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:3px;padding:3px 8px;font-size:9px}.stp-skin-pill:hover{color:#fff;border-color:#fff6}.stp-skin-pill.active{color:#f0f;background:#ff00ff14;border-color:#f0f}.stp-shader-btn{font-family:var(--font-mono);color:#ffffff80;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff26;border-radius:3px;padding:3px 10px;font-size:10px}.stp-shader-btn:hover{color:#0ff;border-color:#0ff}.skin-gamer{--gamer-accent:#ff0050;--gamer-glow:#ff00504d;--gamer-dim:#ff005014;border:1px solid #222;border-top:2px solid var(--gamer-accent);width:780px;font-family:var(--font-mono);box-shadow:0 0 30px var(--gamer-dim), inset 0 1px 0 #ffffff0a;background:#080808;overflow:hidden}.sgm-top-bar{background:#0d0d0d;border-bottom:1px solid #1a1a1a;justify-content:space-between;align-items:center;padding:6px 14px;display:flex}.sgm-logo-wrap{align-items:center;gap:8px;display:flex}.sgm-rgb-dot{background:var(--gamer-accent);width:8px;height:8px;box-shadow:0 0 6px var(--gamer-accent);border-radius:50%;transition:background .1s,box-shadow .1s;display:inline-block}.sgm-logo{font-family:var(--font-lcd);color:var(--gamer-accent);letter-spacing:4px;text-shadow:0 0 12px var(--gamer-glow);font-size:18px;transition:color .1s,text-shadow .1s}.sgm-hud-right{align-items:baseline;gap:4px;display:flex}.sgm-bpm-label{color:#444;letter-spacing:2px;font-size:8px}.sgm-bpm{font-family:var(--font-lcd);color:var(--gamer-accent);letter-spacing:1px;font-size:20px}.sgm-body{gap:0;display:flex}.sgm-canvas{background:#000;border-right:1px solid #1a1a1a;flex:1;height:200px;display:block}.sgm-side{background:#0a0a0a;flex-direction:column;flex-shrink:0;gap:0;width:200px;padding:10px 12px;display:flex}.sgm-label-row{color:#444;letter-spacing:2px;margin-bottom:4px;font-size:8px}.sgm-track-info{margin-bottom:12px}.sgm-ticker-wrap{white-space:nowrap;overflow:hidden}.sgm-ticker{color:var(--gamer-accent);padding-right:40px;font-size:12px;animation:14s linear infinite scroll-ticker;display:inline-block}.sgm-artist{color:#555;margin-top:2px;font-size:10px}.sgm-energy-wrap{margin-bottom:12px}.sgm-energy-track{background:#111;border:1px solid #222;height:6px}.sgm-energy-fill{background:var(--gamer-accent);height:100%;box-shadow:0 0 6px var(--gamer-glow);width:0%;transition:width 60ms}.sgm-time{font-family:var(--font-lcd);color:var(--gamer-accent);font-size:22px;line-height:1}.sgm-progress-bg{cursor:pointer;background:#111;border-top:1px solid #1a1a1a;height:3px}.sgm-progress-fill{background:var(--gamer-accent);width:0%;height:100%;box-shadow:0 0 8px var(--gamer-glow);transition:width .25s linear}.sgm-controls{background:#0d0d0d;border-top:1px solid #1a1a1a;align-items:center;gap:6px;padding:8px 14px;display:flex}.sgm-btn{color:#666;font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:#111;border:1px solid #2a2a2a;padding:5px 10px;font-size:10px;transition:border-color .1s,color .1s}.sgm-btn:hover{border-color:var(--gamer-accent);color:var(--gamer-accent)}.sgm-play-main{background:var(--gamer-dim);border-color:var(--gamer-accent);color:var(--gamer-accent)}.sgm-play-main:hover{background:var(--gamer-glow)}.sgm-vol-wrap{align-items:center;gap:6px;margin-left:auto;display:flex}.sgm-vol-label{color:#444;letter-spacing:2px;font-size:8px}.sgm-vol{width:80px;accent-color:var(--gamer-accent);cursor:pointer}.sgm-footer{background:#080808;border-top:1px solid #1a1a1a;justify-content:space-between;align-items:center;padding:6px 14px;display:flex}.sgm-skin-btns{flex-wrap:wrap;gap:3px;display:flex}.sgm-skin-pill{font-family:var(--font-mono);letter-spacing:1px;color:#444;cursor:pointer;background:#111;border:1px solid #222;padding:3px 7px;font-size:8px}.sgm-skin-pill:hover{border-color:var(--gamer-accent);color:var(--gamer-accent)}.sgm-skin-pill.active{border-color:var(--gamer-accent);color:var(--gamer-accent);background:var(--gamer-dim)}.sgm-shader-btn{font-family:var(--font-mono);letter-spacing:1px;border:1px solid var(--gamer-accent);color:var(--gamer-accent);cursor:pointer;background:#111;padding:3px 10px;font-size:9px}.sgm-shader-btn:hover{background:var(--gamer-dim)}