@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/press-start-2p.woff2)format("woff2")}@font-face{font-family:Fredoka;font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/fredoka.woff2)format("woff2")}@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}:root{--bg:#050509;--text:#eaf6ff;--text-dim:#b4c8dc8c;--drums:#ff9f1c;--bass:#ff2975;--melody:#00f0ff;--vocals:#a3ff47;--rainbow:linear-gradient(90deg, #ff2975, #ff9f1c, #ffe14d, #a3ff47, #00f0ff, #7a5cff, #ff2975);--pixel:"Press Start 2P", monospace;--display:"Fredoka", system-ui, sans-serif;--body:system-ui, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;max-width:100%;height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}button,input,select{color:inherit;font-family:inherit}.app{flex-direction:column;height:100%;display:flex;position:relative}.viz{z-index:0;width:100%;height:100%;position:fixed;inset:0}.topbar,.stage,.tray{z-index:2;position:relative}.topbar{justify-content:space-between;align-items:center;padding:18px 28px 4px;display:flex}.logo{align-items:baseline;gap:14px;line-height:1;display:flex}.logo-word{font-family:var(--display);letter-spacing:1px;background:var(--rainbow);color:#0000;filter:drop-shadow(0 0 22px #00c8ff59);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;font-size:34px;font-weight:700;animation:8s linear infinite hue-pan}@keyframes hue-pan{to{background-position:200% 0}}.logo-sub{font-family:var(--pixel);letter-spacing:3px;color:var(--text-dim);font-size:9px}.btn{--bc:#00f0ff;border:1px solid var(--bc);color:var(--text);font-family:var(--pixel);letter-spacing:1px;cursor:pointer;text-transform:uppercase;white-space:nowrap;background:#ffffff0a;border-radius:6px;padding:10px 16px;font-size:10px;transition:background .15s,box-shadow .15s,transform 80ms}.btn:hover:not(:disabled){box-shadow:0 0 14px -2px var(--bc);background:#ffffff1a}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled,.btn-disabled{opacity:.3;cursor:not-allowed}.btn-lit{color:#04070d;background:#00f0ff;box-shadow:0 0 16px -2px #00f0ff}.btn-tiny{padding:6px 8px;font-size:9px}.btn-add{background:var(--rainbow);background-size:200% 100%;border:none;padding:2px;animation:8s linear infinite hue-pan;position:relative}.btn-add span{background:#0a0a10;border-radius:5px;padding:9px 16px;display:block}.btn-add:hover{box-shadow:0 0 20px -4px #ff2975}.stage{flex-direction:column;flex:1;justify-content:center;gap:20px;min-height:0;padding:0 28px;display:flex}.deck-board{border-radius:20px;width:100%;max-width:1180px;margin:0 auto;padding:3px;position:relative}.deck-board:before,.deck-board:after{content:"";border-radius:inherit;background:conic-gradient(from var(--spin), #ff2975, #ff9f1c, #ffe14d, #a3ff47, #00f0ff, #7a5cff, #ff2975);pointer-events:none;animation:6s linear infinite spin;position:absolute;inset:0}.deck-board:after{filter:blur(26px);opacity:.4;transition:opacity .4s}.deck-board.board-live:after{opacity:.85}@keyframes spin{to{--spin:360deg}}.deck-board-inner{--card-h:clamp(190px, 33vh, 300px);z-index:1;background:#060608;border-radius:17px;grid-template-columns:repeat(4,1fr);align-items:start;gap:14px;padding:14px;display:grid;position:relative}.deck{--deck-color:#00f0ff;border-radius:12px;flex-direction:column;align-items:center;gap:8px;transition:transform .15s;display:flex;position:relative}.deck-empty-slot{width:100%;height:var(--card-h);border:2px dashed color-mix(in srgb, var(--deck-color) 55%, transparent);background:color-mix(in srgb, var(--deck-color) 6%, #08080c);color:color-mix(in srgb, var(--deck-color) 75%, white 10%);text-align:center;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:12px;display:flex}.deck-empty-slot svg{opacity:.7;width:46px;height:46px;filter:drop-shadow(0 0 8px var(--deck-color))}.deck-empty-slot span{font-family:var(--pixel);letter-spacing:1px;opacity:.8;font-size:8px;line-height:1.6}.deck-over{transform:translateY(-6px)scale(1.02)}.deck-over .deck-empty-slot{box-shadow:0 0 30px -4px var(--deck-color), inset 0 0 30px -14px var(--deck-color);border-style:solid}.deck-filled{gap:8px}.deck-meter{width:100%;max-width:150px;height:22px}.deck-controls{align-items:center;gap:8px;width:100%;padding:0 4px;display:flex}.deck-vol{flex:1}input[type=range]{appearance:none;cursor:pointer;background:#ffffff29;border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#00f0ff;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #00f0ff}input[type=range]::-moz-range-thumb{background:#00f0ff;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #00f0ff}.card{--card-color:#00f0ff;cursor:grab;border:2px solid var(--card-color);width:150px;height:208px;box-shadow:0 8px 24px -8px #000000e6, 0 0 18px -6px var(--card-color);background:#08080c;border-radius:12px;flex-shrink:0;transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden}.card:hover{box-shadow:0 20px 40px -10px #000000f2, 0 0 30px -4px var(--card-color);z-index:5;transform:translateY(-10px)rotate(-1.2deg)scale(1.03)}.card:active{cursor:grabbing}.card-active{box-shadow:0 0 0 2px var(--card-color), 0 0 34px -4px var(--card-color)}.card-art{width:100%;height:100%;position:absolute;inset:0}.card-shine{pointer-events:none;background:linear-gradient(100deg,#0000,#ffffff38,#0000);width:55%;height:220%;transition:left .55s;position:absolute;top:-60%;left:-40%;transform:rotate(9deg)}.card:hover .card-shine{left:130%}.card-badge{font-family:var(--pixel);letter-spacing:.5px;color:#fff;border:1px solid color-mix(in srgb, var(--card-color) 55%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0000008c;border-radius:4px;padding:4px 6px;font-size:7px;position:absolute;top:8px;right:8px}.card-stem{font-family:var(--pixel);letter-spacing:1px;text-shadow:0 1px 4px #000000e6;align-items:center;gap:5px;font-size:8px;display:flex;position:absolute;top:8px;left:8px}.card-stem svg{filter:drop-shadow(0 0 4px);width:16px;height:16px}.card-plate{background:linear-gradient(#0000,#0000008c 20%,#000000eb 60%);flex-direction:column;gap:4px;padding:9px 10px 10px;display:flex;position:absolute;bottom:0;left:0;right:0}.card-artist{font-family:var(--pixel);color:#fff;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;font-size:8px;line-height:1.35;overflow:hidden}.card-title{font-family:var(--pixel);letter-spacing:1px;color:var(--card-color);text-transform:uppercase;opacity:.9;font-size:6px}.card-mini{width:100%;max-width:calc(var(--card-h) * 3 / 4);aspect-ratio:3/4;cursor:default;height:auto}.card-mini:hover{box-shadow:0 8px 24px -8px #000000e6, 0 0 18px -6px var(--card-color);transform:none}.transport{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#08080ed1;border:1px solid #ffffff14;border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;width:100%;max-width:1000px;margin:0 auto;padding:12px 24px;display:flex}.btn-play{padding:12px 22px;font-size:12px}.beat-lamp{gap:8px;display:flex}.beat-dot{background:#ffffff24;border-radius:50%;width:12px;height:12px;transition:background 50ms,box-shadow 50ms}.beat-dot.on{background:#00f0ff;box-shadow:0 0 14px #00f0ff}.beat-dot.downbeat.on{background:#ff2975;box-shadow:0 0 16px #ff2975}.transport-group{align-items:center;gap:10px;display:flex}.transport-group label{font-family:var(--pixel);letter-spacing:1px;color:var(--text-dim);font-size:8px}.transport-group input[type=range]{width:120px}.transport-value{font-family:var(--pixel);color:#00f0ff;min-width:62px;font-size:9px}.transport-group select{font-family:var(--pixel);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff24;border-radius:5px;padding:7px 8px;font-size:9px}.transport-group select option{font-family:var(--body);background:#0a0a12}.btn-rec{--bc:#ff2975}.btn-rec-on{color:#fff;background:#ff2975;animation:1.1s infinite recpulse;box-shadow:0 0 16px #ff2975}@keyframes recpulse{50%{opacity:.55}}.tray{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(#0000,#000000d9);border-top:1px solid #ffffff14;min-height:150px;max-height:38vh;padding:12px 20px 16px;overflow:hidden}.tray-empty{width:100%;height:116px;color:var(--text-dim);font-family:var(--pixel);letter-spacing:1px;cursor:pointer;background:0 0;border:1px dashed #ffffff2e;border-radius:10px;font-size:9px;line-height:1.8}.tray-empty:hover{color:#00f0ff;border-color:#00f0ff}.tray-scroll{align-items:flex-start;gap:22px;height:100%;padding:8px 4px 14px;display:flex;overflow:auto hidden}.tray-scroll::-webkit-scrollbar{height:8px}.tray-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.pack{flex-shrink:0}.pack-head{justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:10px;padding:0 2px;display:flex}.pack-name{font-family:var(--pixel);color:#fff;font-size:10px}.pack-meta{font-family:var(--pixel);color:var(--text-dim);font-size:7px}.pack-cards{gap:12px;display:flex}.pack-add{color:#ffffff80;cursor:pointer;background:0 0;border:1px dashed #fff3;border-radius:12px;flex-shrink:0;align-self:flex-start;width:54px;height:208px;margin-top:30px;font-size:26px}.pack-add:hover{color:#00f0ff;border-color:#00f0ff;box-shadow:0 0 16px -4px #00f0ff}.loader-backdrop{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#020205cc;justify-content:center;align-items:center;padding:24px;animation:.2s fade;display:flex;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.loader{background:#0a0a12;border-radius:18px;width:100%;max-width:600px;max-height:88vh;padding:3px;position:relative;overflow-y:auto}.loader:before{content:"";border-radius:inherit;background:var(--rainbow);-webkit-mask-composite:xor;pointer-events:none;background-size:200% 100%;padding:2px;animation:8s linear infinite hue-pan;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.loader-inner{background:#0a0a12;border-radius:16px;padding:24px 26px 26px}.loader-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.loader-head h2{font-family:var(--pixel);color:#fff;font-size:16px}.loader-hint{color:var(--text-dim);margin-bottom:4px;font-size:14px;line-height:1.5}.loader-section{font-family:var(--pixel);color:#00f0ff;align-items:center;gap:12px;margin:22px 0 12px;font-size:10px;display:flex}.loader-section .hint{font-family:var(--body);color:var(--text-dim);text-transform:none;font-size:12px}.backend-dot{font-family:var(--pixel);border:1px solid;border-radius:8px;margin-left:auto;padding:4px 8px;font-size:7px}.backend-dot.up{color:var(--vocals);border-color:var(--vocals)}.backend-dot.down{color:var(--bass);border-color:#ff297580}.upload-drop{text-align:center;cursor:pointer;background:#00f0ff0a;border:2px dashed #00f0ff66;border-radius:12px;flex-direction:column;align-items:center;gap:6px;padding:22px 18px;transition:border-color .15s,background .15s,box-shadow .15s;display:flex}.upload-drop:hover{background:#00f0ff14;border-color:#00f0ff;box-shadow:0 0 24px -8px #00f0ff}.upload-icon{color:#00f0ff;filter:drop-shadow(0 0 10px #00f0ff);font-size:30px;line-height:1}.upload-main{font-family:var(--pixel);color:#fff;font-size:11px}.upload-sub{color:var(--text-dim);max-width:380px;font-size:12.5px;line-height:1.4}.yt-advanced{border-top:1px solid #ffffff14;margin-top:14px;padding-top:12px}.yt-advanced summary{cursor:pointer;font-family:var(--pixel);color:var(--text-dim);align-items:center;gap:12px;font-size:9px;list-style:none;display:flex}.yt-advanced summary::-webkit-details-marker{display:none}.yt-advanced summary:before{content:"▸";color:#00f0ff}.yt-advanced[open] summary:before{content:"▾"}.yt-advanced .backend-dot{margin-left:auto}.yt-advanced .url-row,.yt-advanced .backend-config{margin-top:12px}.demo-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.demo-pack{--ph:190;text-align:left;cursor:pointer;aspect-ratio:16/7;border:none;border-radius:12px;padding:0;transition:transform .14s,box-shadow .14s;position:relative;overflow:hidden}.demo-pack canvas{width:100%;height:100%;position:absolute;inset:0}.demo-pack:hover:not(:disabled){box-shadow:0 0 26px -6px hsl(var(--ph), 90%, 60%);transform:translateY(-3px)}.demo-pack:disabled{cursor:default}.demo-loaded{opacity:.7}.demo-text{z-index:1;background:linear-gradient(#0000,#000000d9);padding:10px 12px;position:absolute;bottom:0;left:0;right:0}.demo-name{font-family:var(--pixel);color:#fff;margin-bottom:5px;font-size:10px;display:block}.demo-meta{font-family:var(--pixel);color:#ffffffb3;font-size:7px}.demo-state{z-index:1;font-family:var(--pixel);color:#fff;background:#00000080;border-radius:4px;padding:4px 6px;font-size:7px;position:absolute;top:8px;right:8px}.backend-config{gap:8px;margin-bottom:12px;display:flex}.backend-config input,.url-row input{font-family:var(--body);background:#ffffff0d;border:1px solid #ffffff24;border-radius:8px;flex:1;padding:11px 12px;font-size:14px}.backend-config input:focus,.url-row input:focus{border-color:#00f0ff;outline:none;box-shadow:0 0 12px -4px #00f0ff}.url-row{gap:8px;display:flex}.url-row .btn{align-items:center;display:flex}.url-row input:disabled{opacity:.4}.loader-note{color:var(--text-dim);margin-top:12px;font-size:13px;line-height:1.5}.loader-note code{color:#00f0ff;background:#ffffff14;border-radius:3px;padding:1px 5px;font-family:ui-monospace,monospace;font-size:12px}.job-list{flex-direction:column;gap:8px;margin-top:16px;display:flex}.job{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding:11px 14px;display:grid}.job-error{border-color:#ff297580}.job-label{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.job-status{font-family:var(--pixel);color:#00f0ff;font-size:8px}.job-error .job-status{color:var(--bass);grid-column:1/-1}.job-bar{background:#ffffff1f;border-radius:2px;grid-column:1/-1;height:4px;overflow:hidden}.job-bar div{background:#00f0ff;height:100%;transition:width .4s;box-shadow:0 0 8px #00f0ff}.toast{z-index:30;font-family:var(--pixel);letter-spacing:1px;color:#00f0ff;background:#0a0a12eb;border:1px solid #00f0ff;border-radius:8px;padding:12px 20px;font-size:9px;animation:.3s toastin;position:fixed;bottom:calc(38vh + 24px);left:50%;transform:translate(-50%);box-shadow:0 0 20px -4px #00f0ff}@keyframes toastin{0%{opacity:0;transform:translate(-50%)translateY(10px)}}@media (max-width:860px){.deck-board-inner{grid-template-columns:repeat(2,1fr)}.logo-sub{display:none}}@media (max-width:520px){.stage{padding:0 12px}.topbar{padding:12px 14px 4px}.demo-grid{grid-template-columns:1fr}.transport{gap:14px;padding:12px 14px}.logo-word{font-size:26px}}