:root{
  --bg:#06070b; --panel:rgba(14,17,24,.72); --panel2:rgba(21,25,34,.7); --line:rgba(255,255,255,.08);
  --text:#f7f7fb; --muted:#858b99; --accent:#9d7cff; --accent2:#5ce1e6; --accent3:#f96db7;
  --danger:#ff4d6d; --shadow:0 24px 80px rgba(0,0,0,.4); --radius:22px;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} body{overflow-x:hidden}
button,input{font:inherit} button{color:inherit} button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ambient{position:fixed;border-radius:999px;filter:blur(110px);opacity:.13;pointer-events:none;z-index:0;transition:background .5s ease}.ambient-a{width:520px;height:520px;background:var(--accent);left:-180px;top:-120px}.ambient-b{width:600px;height:600px;background:var(--accent2);right:-220px;top:28vh}
.app-shell{position:relative;z-index:1;width:min(1760px,calc(100% - 32px));margin:16px auto 28px}.glass{background:linear-gradient(180deg,rgba(20,23,31,.78),rgba(11,13,19,.74));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.topbar{height:74px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;margin-bottom:12px}.brand-wrap{display:flex;align-items:center;gap:13px}.brand-mark{width:35px;height:35px;display:flex;align-items:end;justify-content:center;gap:3px;padding:7px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}.brand-mark i{display:block;width:3px;border-radius:3px;background:linear-gradient(var(--accent2),var(--accent));animation:eq 1.25s ease-in-out infinite alternate}.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:17px;animation-delay:-.4s}.brand-mark i:nth-child(3){height:12px;animation-delay:-.8s}.brand-mark i:nth-child(4){height:20px;animation-delay:-.2s}@keyframes eq{to{height:23px}}
.brand{font-weight:900;letter-spacing:.04em;font-size:17px}.brand span{color:var(--accent)}.brand-sub{font-size:9px;letter-spacing:.22em;color:var(--muted);margin-top:3px}.top-actions{display:flex;align-items:center;gap:9px}.chip,.icon-btn,.record-btn,.text-btn{border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer}.chip{height:38px;padding:0 13px;border-radius:12px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}.chip .dot{display:inline-block;width:6px;height:6px;background:currentColor;border-radius:50%;margin-right:8px}.chip.active{color:var(--text);border-color:color-mix(in srgb,var(--accent) 35%, transparent);background:color-mix(in srgb,var(--accent) 11%, transparent)}.chip.active .dot{background:var(--accent);box-shadow:0 0 14px var(--accent)}.icon-btn{width:38px;height:38px;border-radius:12px;font-size:18px}
.stage{position:relative;height:clamp(430px,58vh,760px);border-radius:var(--radius);overflow:hidden;background:#05060a}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.stage-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 35%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.58) 100%)}.stage-grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.stage-topline{position:absolute;top:18px;left:20px;right:20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:4;pointer-events:none}.status-pill{justify-self:start;display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(5,7,11,.46);border:1px solid rgba(255,255,255,.07);font-size:9px;letter-spacing:.17em;font-weight:800;color:#bbc0ca}.live-dot{width:6px;height:6px;border-radius:50%;background:#657080}.live-dot.live{background:#65ff9d;box-shadow:0 0 13px #65ff9d}.mode-title{display:flex;align-items:baseline;gap:9px;text-shadow:0 2px 20px #000}.mode-title span{font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent)}.mode-title strong{font-size:11px;letter-spacing:.24em}.fps{justify-self:end;font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#79808c}
.center-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:3;transition:opacity .4s,visibility .4s}.center-empty.hidden{opacity:0;visibility:hidden;pointer-events:none}.empty-orb{width:112px;height:112px;border-radius:50%;padding:1px;background:conic-gradient(from 90deg,var(--accent),transparent,var(--accent2),transparent,var(--accent));animation:spin 6s linear infinite;box-shadow:0 0 80px color-mix(in srgb,var(--accent) 15%,transparent)}.empty-orb>div{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.1),rgba(10,12,18,.96) 56%)}@keyframes spin{to{transform:rotate(360deg)}}.center-empty h1{font-size:clamp(28px,4vw,58px);line-height:.95;letter-spacing:-.05em;margin:24px 0 10px}.center-empty p{margin:0;color:var(--muted);font-size:13px}.empty-actions{display:flex;gap:8px;margin-top:22px}.primary-btn,.secondary-btn{height:43px;border-radius:12px;padding:0 18px;font-size:10px;font-weight:900;letter-spacing:.12em;cursor:pointer}.primary-btn{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#090a0e;box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 25%,transparent)}.secondary-btn{border:1px solid var(--line);background:rgba(255,255,255,.04)}
.track-hud{position:absolute;z-index:4;left:18px;right:18px;bottom:15px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.track-meta{display:flex;align-items:center;gap:11px;min-width:0}.track-art{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 25%,#111),color-mix(in srgb,var(--accent2) 13%,#08090c));box-shadow:0 10px 25px rgba(0,0,0,.25)}.track-art span{font-size:9px;font-weight:900;letter-spacing:.12em;color:#d9d9df}.track-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.track-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45vw}.track-copy span{font-size:9px;letter-spacing:.04em;color:#838996}.energy-meter{width:min(360px,36vw);display:grid;grid-template-columns:30px 1fr;align-items:center;gap:5px 8px;padding:10px 12px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(5,7,11,.34)}.energy-meter>span{font:700 7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#737987}.energy-meter i{display:block;height:2px;background:rgba(255,255,255,.08);overflow:hidden}.energy-meter b{display:block;width:2%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .08s linear;box-shadow:0 0 8px var(--accent)}
.transport{border-radius:17px;margin-top:12px;padding:10px 13px}.transport-main{display:grid;grid-template-columns:auto 1fr minmax(100px,180px) auto;gap:15px;align-items:center}.play-btn{width:46px;height:46px;border-radius:14px;border:0;background:var(--text);color:#090a0d;cursor:pointer;font-size:17px;box-shadow:0 8px 28px rgba(0,0,0,.2)}.timeline-wrap{display:flex;flex-direction:column;gap:4px}.time-row{display:flex;justify-content:space-between;color:#7d8390;font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace}.range{appearance:none;-webkit-appearance:none;width:100%;height:3px;background:rgba(255,255,255,.1);border-radius:10px;cursor:pointer}.range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#f6f6fa;border:3px solid color-mix(in srgb,var(--accent) 45%,#111);box-shadow:0 0 15px color-mix(in srgb,var(--accent) 30%,transparent)}.range::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--accent)}.volume-wrap{display:flex;align-items:center;gap:9px}.volume-icon{font-size:12px;color:#858b96}.record-btn{height:37px;border-radius:11px;padding:0 12px;font-size:9px;font-weight:900;letter-spacing:.1em;color:#a8acb5}.record-btn span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger);margin-right:7px;vertical-align:-1px}.record-btn.recording{color:#fff;border-color:rgba(255,77,109,.4);background:rgba(255,77,109,.12);animation:recPulse 1s ease-in-out infinite alternate}@keyframes recPulse{to{box-shadow:0 0 22px rgba(255,77,109,.18)}}
.workspace{display:grid;grid-template-columns:280px 1fr 300px;gap:12px;margin-top:12px}.panel{border-radius:var(--radius);padding:18px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.panel-head.compact{margin-bottom:11px}.eyebrow{display:block;font-size:8px;font-weight:800;letter-spacing:.2em;color:var(--accent);margin-bottom:4px}.panel h2{font-size:18px;margin:0;letter-spacing:-.03em}.microcopy{font:700 7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#6c7380;letter-spacing:.1em}.microcopy kbd{border:1px solid var(--line);background:#11151c;padding:2px 5px;border-radius:5px;margin-right:3px;color:#9aa0aa}.source-card{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;text-align:left;padding:11px;margin-bottom:8px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.025);cursor:pointer;transition:.2s}.source-card:hover,.source-card.active{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}.source-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);font-size:16px}.source-card strong{display:block;font-size:11px}.source-card small{display:block;font-size:8px;color:#777e8a;margin-top:4px;line-height:1.35}.source-card>b{font-size:8px;color:#727986}.mini-note{margin-top:11px;padding:10px 11px;border-radius:11px;background:rgba(255,255,255,.025);color:#737a86;font-size:8px;line-height:1.55}.panel-separator{height:1px;background:var(--line);margin:17px 0}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset{height:34px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);color:#858c98;display:flex;align-items:center;padding:0 9px;gap:7px;font-size:9px;cursor:pointer}.preset i{width:8px;height:8px;border-radius:50%;background:var(--swatch,var(--accent));box-shadow:0 0 11px var(--swatch,var(--accent))}.preset.active{color:#fff;border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}.preset[data-preset=midnight]{--swatch:#9d7cff}.preset[data-preset=mayhem]{--swatch:#ff69b4}.preset[data-preset=matrix]{--swatch:#42ff87}.preset[data-preset=dreamscape]{--swatch:#6be4ff}.preset[data-preset=inferno]{--swatch:#ff6b45}.preset[data-preset=mono]{--swatch:#f1f1f1}
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mode-card{position:relative;height:88px;overflow:hidden;border-radius:13px;border:1px solid var(--line);background:#080a0f;cursor:pointer;padding:0;text-align:left;transition:.22s}.mode-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16)}.mode-card.active{border-color:color-mix(in srgb,var(--accent) 46%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 10px 30px rgba(0,0,0,.18)}.mode-preview{position:absolute;inset:0;opacity:.72;background:radial-gradient(circle at 72% 30%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 35%),linear-gradient(155deg,transparent 35%,color-mix(in srgb,var(--accent2) 15%,transparent));}.mode-preview:before,.mode-preview:after{content:"";position:absolute;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 11px 0 color-mix(in srgb,var(--accent2) 70%,transparent),0 22px 0 color-mix(in srgb,var(--accent) 40%,transparent);transform:rotate(-7deg);top:26px}.mode-preview:after{transform:rotate(13deg);opacity:.45;top:37px}.mode-card strong{position:absolute;left:10px;bottom:9px;font-size:9px;letter-spacing:.08em;z-index:2;text-shadow:0 2px 8px #000}.mode-card em{position:absolute;right:9px;top:8px;font:700 7px ui-monospace,SFMono-Regular,Menlo,monospace;color:#66707c;z-index:2;font-style:normal}.text-btn{border-radius:8px;padding:6px 8px;font-size:7px;letter-spacing:.1em;font-weight:800;color:#747b87}.control-row{display:block;margin-bottom:14px}.control-row>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.control-row b{font-size:9px}.control-row em{font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace;color:#777f8c;font-style:normal}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin:12px 0}.toggle-row strong{display:block;font-size:9px}.toggle-row small{display:block;color:#737a86;font-size:8px;margin-top:3px}.switch input{display:none}.switch span{display:block;width:31px;height:18px;border-radius:10px;background:#202630;border:1px solid var(--line);position:relative;cursor:pointer;transition:.2s}.switch span:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;top:2px;left:2px;background:#7e8591;transition:.2s}.switch input:checked+span{background:color-mix(in srgb,var(--accent) 22%,#12151b);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}.switch input:checked+span:after{left:15px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.footer{display:flex;justify-content:space-between;align-items:center;padding:15px 4px 0;color:#555c68;font:700 7px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.toast-stack{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;flex-direction:column;gap:8px}.toast{width:min(360px,calc(100vw - 36px));padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(14,17,24,.94);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.38);font-size:10px;color:#c7cbd3;animation:toastIn .25s ease}.toast strong{color:#fff;display:block;margin-bottom:3px}.toast.error{border-color:rgba(255,77,109,.28)}@keyframes toastIn{from{transform:translateY(8px);opacity:0}}
.drop-overlay{position:fixed;inset:0;z-index:100;background:rgba(4,5,8,.78);backdrop-filter:blur(14px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.18s;pointer-events:none}.drop-overlay.visible{opacity:1;visibility:visible}.drop-card{width:min(520px,calc(100vw - 36px));height:260px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 6%,#090b10);box-shadow:0 30px 100px rgba(0,0,0,.45)}.drop-icon{font-size:43px;color:var(--accent);margin-bottom:12px}.drop-card strong{font-size:20px;letter-spacing:.12em}.drop-card span{font-size:10px;color:#7f8793;margin-top:8px}
body.beat-flash .stage{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 0 70px color-mix(in srgb,var(--accent) 12%,transparent),var(--shadow)}
@media(max-width:1180px){.workspace{grid-template-columns:250px 1fr}.controls-panel{grid-column:1/-1}.controls-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.controls-panel .panel-head,.controls-panel .panel-separator,.controls-panel .toggle-row{grid-column:1/-1}.control-row{margin:0}.mode-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{width:min(100% - 16px,1760px);margin:8px auto 18px}.topbar{height:62px;padding:0 13px}.brand-sub,.chip{display:none}.stage{height:58vh;min-height:390px}.stage-topline{left:12px;right:12px;top:12px}.fps{display:none}.center-empty h1{font-size:34px}.center-empty p{padding:0 24px}.track-hud{left:11px;right:11px}.energy-meter{display:none}.track-copy strong{max-width:65vw}.transport-main{grid-template-columns:auto 1fr auto}.volume-wrap{display:none}.workspace{grid-template-columns:1fr}.source-panel,.modes-panel,.controls-panel{grid-column:1}.controls-panel{display:block}.mode-grid{grid-template-columns:repeat(2,1fr)}.footer{gap:8px;flex-wrap:wrap}.footer span:nth-child(2){order:3;width:100%}.brand{font-size:14px}.record-btn{padding:0 9px}.empty-actions{flex-direction:column;width:min(260px,76vw)}.primary-btn,.secondary-btn{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}