:root{color-scheme:dark;--ink:#f7fbff;--muted:#9aa9c8;--panel:rgba(13,19,48,.86);--line:rgba(143,184,255,.22);--cyan:#27d9ff;--violet:#9b5cff;--coral:#ff617d;--lime:#8ff24b;--amber:#ffbf3f;--pulse:0;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#070a1b;color:var(--ink);font-family:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif}button,input{font:inherit}button{color:inherit}.game-shell{width:min(1500px,100%);margin:auto;padding:10px}.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 10px}.brand{display:flex;align-items:center;gap:12px}.brand p,.brand h1{margin:0}.brand p{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#89a0cf}.brand h1{font-size:clamp(20px,3vw,29px)}.brand-mark{display:flex;align-items:end;gap:3px;width:38px;height:34px;padding:6px;border-radius:11px;background:linear-gradient(145deg,#742eff,#19d6ff);box-shadow:0 0 22px #483cff66}.brand-mark i{display:block;width:5px;border-radius:4px;background:white;animation:eq .75s ease-in-out infinite alternate}.brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:20px;animation-delay:-.3s}.brand-mark i:nth-child(3){height:14px;animation-delay:-.55s}.brand-mark i:nth-child(4){height:24px;animation-delay:-.15s}.top-actions{display:flex;gap:8px}.icon-button{width:43px;height:43px;border:1px solid var(--line);border-radius:13px;background:#151b3e;cursor:pointer;font-weight:900}.studio{position:relative;min-height:min(750px,calc(100vh - 96px));overflow:hidden;border:1px solid #344071;border-radius:26px;background:radial-gradient(circle at 50% 22%,#393087 0,#171a51 23%,#0b1131 52%,#06081b 100%);box-shadow:0 22px 70px #0009}.studio:after{content:"";position:absolute;z-index:0;inset:47% 0 0;background:linear-gradient(175deg,transparent 0 10%,#12163fdd 11% 13%,#080b20 14%);clip-path:polygon(0 16%,100% 0,100% 100%,0 100%)}.skyline{position:absolute;z-index:0;inset:16% 0 42%;display:flex;align-items:end;justify-content:space-around;opacity:.62}.skyline i{width:9%;height:40%;border:1px solid #4461a4;background:repeating-linear-gradient(90deg,transparent 0 10px,#1be0ff44 11px 14px),linear-gradient(#151b4b,#080b23);clip-path:polygon(0 12%,35% 12%,35% 0,62% 0,62% 12%,100% 12%,100% 100%,0 100%)}.skyline i:nth-child(2){height:75%}.skyline i:nth-child(3){height:52%}.skyline i:nth-child(4){height:89%}.skyline i:nth-child(5){height:61%}.skyline i:nth-child(6){height:45%}.skyline i:nth-child(7){height:72%}.moon{position:absolute;right:9%;top:8%;width:74px;height:74px;border-radius:50%;background:#b9f7ff;box-shadow:0 0 55px #28d8ff}.light-beams{position:absolute;inset:0;z-index:0;pointer-events:none}.light-beams i{position:absolute;top:-10%;left:20%;width:90px;height:70%;background:linear-gradient(#29dbff44,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);transform:rotate(8deg)}.light-beams i:nth-child(2){left:49%;background:linear-gradient(#a45cff3c,transparent);transform:rotate(-4deg)}.light-beams i:nth-child(3){left:77%;background:linear-gradient(#ff5d9338,transparent);transform:rotate(-12deg)}.pulse-ring{position:absolute;z-index:0;left:50%;top:41%;width:54%;aspect-ratio:2.6;border:2px solid #50e5ff55;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.94 + var(--pulse)*.07));box-shadow:0 0 calc(15px + var(--pulse)*28px) #673affaa,inset 0 0 25px #22caff55;transition:transform .09s,box-shadow .09s}.hud{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(74px,1fr));gap:8px;width:min(620px,calc(100% - 24px));margin:12px auto}.hud>div{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:7px 10px;border:1px solid var(--line);border-radius:13px;background:#0b1031cc;backdrop-filter:blur(6px)}.hud span{font-size:9px;letter-spacing:.13em;color:#8fa6d5}.hud b{font-variant-numeric:tabular-nums}.crew{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(126px,1fr));align-items:end;gap:10px;width:min(1150px,calc(100% - 24px));margin:28px auto 8px}.performer{--accent:var(--cyan);position:relative;min-width:0;padding:8px 8px 10px;border:1px solid color-mix(in srgb,var(--accent) 44%,transparent);border-radius:22px;background:linear-gradient(180deg,#17204caa,#0a0d25e8);box-shadow:inset 0 1px #ffffff13,0 12px 34px #0008;transition:.25s}.performer.bass{--accent:var(--lime)}.performer.melody{--accent:var(--violet)}.performer.voice{--accent:var(--coral)}.performer.fx{--accent:var(--amber)}.performer.active{transform:translateY(-8px);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 35%,transparent),0 14px 36px #000a}.performer.queued{border-style:dashed}.performer-toggle{position:relative;width:100%;padding:0;border:0;background:none;cursor:pointer}.status-dot{position:absolute;right:7px;top:6px;width:9px;height:9px;border-radius:50%;background:#546080;box-shadow:0 0 0 3px #151b38}.active .status-dot{background:var(--accent);box-shadow:0 0 12px var(--accent)}.avatar{position:relative;display:block;width:100%;height:185px;transform-origin:50% 90%}.head,.body,.arm,.deck,.visor{position:absolute;display:block}.head{left:50%;top:18px;width:58px;height:58px;transform:translateX(-50%) rotate(-4deg);border-radius:23px 25px 18px 28px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 85%,white),color-mix(in srgb,var(--accent) 55%,#101738));box-shadow:inset -8px -8px #0b102944,0 0 20px color-mix(in srgb,var(--accent) 35%,transparent)}.visor{left:50%;top:39px;width:45px;height:13px;transform:translateX(-50%) skewX(-13deg);border-radius:8px;background:#081121;box-shadow:inset 0 0 7px var(--accent)}.body{left:50%;top:72px;width:74px;height:81px;transform:translateX(-50%);border-radius:22px 22px 15px 15px;background:linear-gradient(130deg,#27305d 0 32%,var(--accent) 33% 44%,#111735 45%)}.arm{top:83px;width:25px;height:73px;border-radius:16px;background:#1d2854;transform-origin:50% 10%}.arm.left{left:17%;transform:rotate(17deg)}.arm.right{right:17%;transform:rotate(-17deg)}.deck{left:10%;right:10%;bottom:5px;height:38px;border:2px solid color-mix(in srgb,var(--accent) 65%,white);border-radius:10px;background:linear-gradient(90deg,#080d23,#273363,#080d23);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 38%,transparent)}.melody .head{border-radius:50% 25% 50% 25%}.voice .head{border-radius:48% 48% 28% 28%;transform:translateX(-50%) rotate(4deg)}.fx .head{clip-path:polygon(50% 0,93% 25%,82% 90%,18% 90%,7% 25%);border-radius:0}.bass .body{width:86px}.active .avatar{animation:bop calc(60s/112) ease-in-out infinite}.active .arm.left{animation:arm-l calc(120s/112) ease-in-out infinite}.active .arm.right{animation:arm-r calc(120s/112) ease-in-out infinite}.performer strong{display:block;font-size:15px;letter-spacing:.12em;color:var(--accent)}.performer small{display:block;height:32px;margin-top:2px;color:#dce6ff;font-size:11px}.pending{display:block;height:14px;font-size:9px;color:#f8cb62;opacity:0}.queued .pending{opacity:1}.variant-controls{display:flex;justify-content:center;gap:7px;margin-top:6px}.variant-controls button{width:33px;height:31px;border:1px solid #50608c;border-radius:9px;background:#151b3c;cursor:pointer;font-weight:900}.variant-controls button[aria-pressed=true]{border-color:var(--accent);color:#071020;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}.variant-controls button:disabled{opacity:.28;cursor:not-allowed}.level-bars{display:flex;align-items:end;justify-content:center;gap:3px;height:17px;margin-top:7px}.level-bars i{width:8px;height:3px;border-radius:3px;background:var(--accent);opacity:.25}.active .level-bars i{animation:meter .65s ease-in-out infinite alternate}.active .level-bars i:nth-child(2){animation-delay:-.3s}.active .level-bars i:nth-child(3){animation-delay:-.5s}.active .level-bars i:nth-child(4){animation-delay:-.2s}.active .level-bars i:nth-child(5){animation-delay:-.45s}.console{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;width:min(850px,calc(100% - 24px));margin:13px auto;padding:11px;border:1px solid var(--line);border-radius:17px;background:#0a0e2de8}.master{min-width:245px}.master label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em}.master input{width:100%;accent-color:#57ddff}.console-button{min-height:42px;padding:0 17px;border:1px solid #55dfff;border-radius:12px;background:linear-gradient(135deg,#235bca,#7c43e7);cursor:pointer;font-weight:800}.console-button.ghost{background:#161d42;border-color:#57678f}.challenge-panel{position:relative;z-index:2;display:flex;align-items:center;gap:15px;width:min(850px,calc(100% - 24px));margin:0 auto 18px;padding:11px 14px;border:1px solid #674cae;border-radius:16px;background:#19113de8}.challenge-panel>div:first-child{flex:1}.challenge-panel span{font-size:9px;letter-spacing:.13em;color:#ba9cff}.challenge-panel b{display:block}.challenge-panel p{margin:2px 0;color:#c5d0ed;font-size:12px}.challenge-panel small{white-space:nowrap;color:#acbad9}.challenge-progress{width:25%;height:7px;border-radius:8px;background:#090d23;overflow:hidden}.challenge-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#35dcff,#9c55ff);transition:width .25s}.toast{position:absolute;z-index:9;left:50%;top:17%;transform:translate(-50%,-20px);padding:11px 18px;border:1px solid #64e4ff;border-radius:30px;background:#10183cf2;box-shadow:0 0 30px #4d42d8aa;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.studio.special-aurora{background:radial-gradient(circle at 50% 25%,#226f83,#332074 35%,#07112d 72%)}.studio.special-sunset{background:radial-gradient(circle at 50% 25%,#9e3e76,#3e1b66 38%,#140c2e 72%)}.studio.special-orbit{background:radial-gradient(circle at 50% 25%,#6d5921,#26336e 38%,#080d25 72%)}.overlay{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center;background:radial-gradient(circle at 50% 35%,#372b78f2,#090c24f7 65%);backdrop-filter:blur(9px)}.overlay[hidden]{display:none}.overlay h2{margin:5px 0;font-size:clamp(36px,8vw,76px);line-height:.94;background:linear-gradient(100deg,#37ddff,#a862ff,#ff6689,#ffc64a);background-clip:text;color:transparent;filter:drop-shadow(0 5px 16px #26105d)}.overlay p{max-width:620px;color:#c8d4ef;font-size:clamp(14px,2.2vw,19px)}.overlay .eyebrow{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#7ee9ff}.overlay-actions{display:flex;gap:10px;margin-top:12px}.primary-button,.secondary-button{min-width:150px;min-height:49px;padding:0 20px;border-radius:14px;cursor:pointer;font-weight:900}.primary-button{border:0;background:linear-gradient(120deg,#25d9f9,#804cfa);box-shadow:0 9px 30px #1d81d766}.secondary-button{border:1px solid #6f82b1;background:#151b3d}.compact-overlay h2{font-size:clamp(31px,6vw,56px)}.compact-overlay ul{max-width:640px;text-align:left;color:#d1dcf4;line-height:1.55}.key-help kbd{display:inline-grid;place-items:center;min-width:27px;height:27px;padding:0 5px;border:1px solid #7184b6;border-radius:7px;background:#111736;box-shadow:inset 0 -2px #0008}.logo-equalizer{display:flex;align-items:center;gap:7px;height:72px}.logo-equalizer i{width:11px;height:22px;border-radius:8px;background:linear-gradient(#46e5ff,#a25cff);box-shadow:0 0 18px #4cd9ff;animation:eq 1s ease-in-out infinite alternate}.logo-equalizer i:nth-child(2){height:43px;animation-delay:-.4s}.logo-equalizer i:nth-child(3){height:62px;animation-delay:-.7s}.logo-equalizer i:nth-child(4){height:35px;animation-delay:-.2s}.logo-equalizer i:nth-child(5){height:57px;animation-delay:-.55s}.logo-equalizer i:nth-child(6){height:31px;animation-delay:-.8s}.footer-note{text-align:center;color:#7685aa;font-size:11px}.icon-button:focus-visible,.performer-toggle:focus-visible,.variant-controls button:focus-visible,.console-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}@keyframes bop{0%,100%{transform:scaleY(1) rotate(0)}45%{transform:scaleY(.94) rotate(-1deg)}55%{transform:scaleY(1.04) rotate(1deg)}}@keyframes arm-l{0%,100%{transform:rotate(17deg)}50%{transform:rotate(29deg)}}@keyframes arm-r{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(-29deg)}}@keyframes meter{from{height:3px;opacity:.35}to{height:16px;opacity:1}}@keyframes eq{to{transform:scaleY(.42)}}
@media(max-width:800px){.game-shell{padding:0}.topbar{height:58px}.studio{border-radius:18px;min-height:calc(100vh - 82px)}.brand h1{font-size:18px}.brand p{font-size:8px}.brand-mark{width:33px;height:31px}.hud{margin:7px auto;gap:4px}.hud>div{min-height:34px;padding:4px;font-size:12px}.hud span{font-size:7px}.crew{grid-template-columns:repeat(5,minmax(62px,1fr));gap:4px;margin:12px auto 6px;width:calc(100% - 10px)}.performer{padding:5px 3px 7px;border-radius:13px}.avatar{height:130px}.head{top:12px;width:43px;height:43px}.visor{top:28px;width:34px;height:10px}.body{top:52px;width:51px;height:56px}.bass .body{width:58px}.arm{top:61px;width:17px;height:49px}.arm.left{left:8%}.arm.right{right:8%}.deck{left:3%;right:3%;height:28px}.performer strong{font-size:10px}.performer small{height:26px;font-size:8px}.pending{font-size:7px}.variant-controls{gap:3px}.variant-controls button{width:27px;height:28px;padding:0}.level-bars{display:none}.console{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px auto;padding:8px}.master{grid-column:1/-1;min-width:0}.console-button{min-height:40px;padding:0 8px;font-size:11px}.challenge-panel{display:grid;grid-template-columns:1fr auto;gap:5px 9px;margin-bottom:8px;padding:8px}.challenge-progress{grid-column:1/-1;grid-row:2;width:100%}.challenge-panel p{font-size:10px}.challenge-panel small{font-size:9px}.moon{width:45px;height:45px}.overlay{position:fixed}.overlay-actions{flex-direction:column}.toast{top:11%;font-size:12px;white-space:nowrap}}@media(max-width:380px){.avatar{height:112px}.head{width:38px;height:38px}.body{top:47px;height:49px}.arm{top:54px;height:44px}.performer small{height:23px}.variant-controls button{width:25px;height:26px}.hud .beat-counter{display:none}.hud{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}