:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f5f6f1;background:#090b0f;font-synthesis:none;text-rendering:optimizeLegibility;--base: #090b0f;--surface: #101318;--surface-raised: #171b21;--surface-soft: #14181e;--border: #30353e;--border-soft: #252a31;--text: #f5f6f1;--muted: #9299a3;--muted-strong: #b9bec6;--accent: #d9ff3f;--accent-ink: #121601;--danger: #ff7a6c;--radius: 9px}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,canvas:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled,input:disabled{opacity:.55;cursor:not-allowed}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}.app-shell{display:grid;grid-template-rows:58px minmax(0,1fr) 120px;width:100vw;height:100vh;min-height:650px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(75,54,135,.06),transparent 35%),var(--base)}.topbar{position:relative;z-index:5;display:grid;grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr);align-items:center;padding:0 16px 0 20px;border-bottom:1px solid var(--border);background:#0c0e12f7}.brand{display:inline-flex;align-items:center;gap:11px;width:fit-content;color:var(--text);font-size:18px;font-weight:650;letter-spacing:-.025em;text-decoration:none}.brand-mark{display:grid;width:24px;height:28px;place-items:center;color:var(--accent);filter:drop-shadow(0 0 7px rgba(217,255,63,.28))}.topbar-tools,.topbar-actions{display:flex;align-items:center;gap:6px}.topbar-actions{justify-self:end}.export-button{display:inline-flex;height:34px;align-items:center;gap:7px;padding:0 11px;color:#dfe2dd;font-size:10px;font-weight:650;letter-spacing:.01em;border:1px solid #363c45;border-radius:7px;background:#171b21;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.export-button:hover{color:var(--accent);border-color:#59616c;background:#1d2229}.icon-button{display:inline-grid;width:36px;height:36px;padding:0;place-items:center;color:#c4c8ce;border:1px solid transparent;border-radius:7px;background:transparent;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.icon-button:hover{color:#fff;background:#191d23}.icon-button.is-active{color:var(--accent);border-color:var(--border);background:#181c22}.radial-icon{width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;box-shadow:inset 0 0 0 3px #181c22,inset 0 0 0 4.5px currentColor}.studio-layout{display:grid;grid-template-columns:300px minmax(430px,1fr) 326px;min-height:0;overflow:hidden}.source-rail,.inspector-rail{min-width:0;min-height:0;background:linear-gradient(180deg,#15191f,#11151a)}.source-rail{display:flex;flex-direction:column;padding:22px 14px 14px;border-right:1px solid var(--border)}.rail-heading,.source-group-label,.section-label,.preset-heading>span{color:var(--muted-strong);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}.rail-heading{display:flex;align-items:center;justify-content:space-between;margin:0 5px 16px}.import-button{display:flex;min-height:54px;align-items:center;justify-content:center;gap:10px;color:#f2f3ef;font-size:13px;font-weight:600;border:1px solid #3a404a;border-radius:var(--radius);background:#1a1e24;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.import-button:hover{border-color:#5b626e;background:#20252c;transform:translateY(-1px)}.local-note{margin:8px 3px 21px;color:#777f8a;font-size:10px;line-height:1.4;text-align:center}.source-group-label{margin:0 7px 10px}.source-list{display:grid;gap:6px}.source-row{display:grid;grid-template-columns:20px 54px minmax(0,1fr);min-height:74px;align-items:center;gap:8px;padding:8px 10px 8px 8px;text-align:left;border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}.source-row:hover{background:#191e25}.source-row.is-selected{border-color:var(--accent);background:linear-gradient(90deg,#d9ff3f12,#ffffff06);box-shadow:0 0 0 1px #d9ff3f0a inset}.source-state{display:grid;place-items:center;color:#e8eae5}.source-row.is-selected .source-state{color:var(--accent)}.mini-wave{display:flex;height:38px;align-items:center;justify-content:center;gap:1.5px;color:var(--wave-accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--wave-accent),transparent 60%))}.mini-wave i{display:block;width:2px;min-height:3px;border-radius:2px;background:currentColor;opacity:.88}.source-copy{min-width:0}.source-copy strong,.source-copy small,.imported-source strong,.imported-source small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-copy strong{color:#f1f2ed;font-size:13px;font-weight:600}.source-copy small{margin-top:5px;color:#87909a;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;letter-spacing:.02em}.imported-source{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:9px;margin:-7px 0 18px;padding:11px 12px;color:#ff9c72;border:1px solid rgba(255,138,91,.35);border-radius:8px;background:#ff8a5b0f}.imported-source strong{color:#f2f3ef;font-size:12px}.imported-source small{margin-top:3px;color:#9da3ab;font-size:9px}.source-status{display:flex;align-items:flex-start;gap:8px;margin-top:auto;padding:12px 9px 2px;color:#858d98;font-size:10px;line-height:1.4}.status-dot{flex:0 0 auto;width:6px;height:6px;margin-top:4px;border-radius:50%;background:#64707b}.status-ready .status-dot{background:var(--accent);box-shadow:0 0 8px #d9ff3f66}.status-loading .status-dot{background:#b778ff;animation:status-pulse 1s ease-in-out infinite}.status-error{color:#ff9e94}.status-error .status-dot{background:var(--danger)}@keyframes status-pulse{50%{opacity:.35}}.canvas-stage{position:relative;display:grid;grid-template-rows:48px minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;background:#090b12}.canvas-titlebar{display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-bottom:1px solid rgba(48,53,62,.72);background:#0d1015}.canvas-titlebar>div:first-child{display:flex;min-width:0;align-items:baseline;gap:11px}.canvas-title{overflow:hidden;color:#ecede8;font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.canvas-subtitle,.canvas-zoom{color:#767e89;font-family:SFMono-Regular,Consolas,monospace;font-size:9px}.canvas-meta{display:flex;align-items:center;gap:13px}.live-indicator{display:inline-flex;align-items:center;gap:6px;color:#bec7a0;font-family:SFMono-Regular,Consolas,monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.live-indicator i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #d9ff3f8c;animation:live-breathe .76s ease-in-out infinite alternate}@keyframes live-breathe{to{opacity:.38;transform:scale(.72)}}.visual-canvas{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden}.visual-canvas canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}.canvas-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted);font-size:12px}.inspector-rail{display:grid;grid-template-rows:minmax(0,1fr) auto;border-left:1px solid var(--border);overflow:hidden}.inspector-main{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#404750 transparent}.inspector-tabs{position:sticky;z-index:2;top:0;display:grid;grid-template-columns:repeat(3,1fr);height:57px;border-bottom:1px solid var(--border);background:#14181efa}.inspector-tabs button{position:relative;color:#858d97;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;border:0;background:transparent;cursor:pointer}.inspector-tabs button:after{position:absolute;right:14px;bottom:0;left:14px;height:2px;background:var(--accent);content:"";opacity:0;transform:scaleX(.5);transition:opacity .15s ease,transform .15s ease}.inspector-tabs button:hover,.inspector-tabs button.is-active{color:#f0f2ec}.inspector-tabs button.is-active:after{opacity:1;transform:scaleX(1)}.inspector-section{padding:23px 22px 25px}.section-label{margin-bottom:20px;color:#929aa5}.range-control{display:block;margin-bottom:24px}.control-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px;color:#daddd8;font-size:11px}.control-label output{color:#f1f2ee;font-family:SFMono-Regular,Consolas,monospace;font-size:9px}input[type=range]{width:100%;height:18px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(90deg,var(--accent) 0 var(--range-progress),#343a43 var(--range-progress) 100%)}input[type=range]::-moz-range-track{height:3px;border-radius:4px;background:#343a43}input[type=range]::-moz-range-progress{height:3px;border-radius:4px;background:var(--accent)}input[type=range]::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #f4f5ef;border-radius:50%;background:#9ba36e;box-shadow:0 0 0 1px #00000080}input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid #f4f5ef;border-radius:50%;background:#9ba36e}.toggle-stack{display:grid;gap:4px;padding-top:2px}.toggle-control{position:relative;display:flex;min-height:42px;align-items:center;justify-content:space-between;color:#c9cdd1;font-size:12px;cursor:pointer}.toggle-control input{position:absolute;opacity:0}.toggle-track{position:relative;width:39px;height:21px;border:1px solid #59616b;border-radius:20px;background:#181c22;transition:border-color .15s ease,background .15s ease}.toggle-track span{position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#d5d8d6;transition:transform .15s ease,background .15s ease}.toggle-control input:checked+.toggle-track{border-color:var(--accent);background:var(--accent)}.toggle-control input:checked+.toggle-track span{background:#121603;transform:translate(18px)}.toggle-control input:focus-visible+.toggle-track{outline:2px solid var(--accent);outline-offset:2px}.color-control{display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:16px;color:#cbd0d3;font-size:11px;border-bottom:1px solid var(--border-soft)}.color-value{display:flex;align-items:center;gap:9px}.color-value input{width:28px;height:22px;padding:0;border:1px solid #4a515b;border-radius:5px;background:transparent;cursor:pointer}.color-value input::-webkit-color-swatch-wrapper{padding:2px}.color-value input::-webkit-color-swatch{border:0;border-radius:2px}.color-value code{min-width:63px;color:#8e969f;font-size:9px}.color-divider{margin-top:26px;margin-bottom:8px}.color-control+.range-control{margin-top:23px}.head-options{display:grid;gap:7px}.head-options button{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;min-height:60px;align-items:center;gap:10px;padding:8px 10px;color:#a9b0b8;text-align:left;border:1px solid var(--border);border-radius:8px;background:#171b21;cursor:pointer}.head-options button:hover{border-color:#515966}.head-options button.is-selected{color:var(--accent);border-color:var(--accent);background:#d9ff3f0b}.head-options strong,.head-options small{display:block}.head-options strong{color:#e6e8e4;font-size:11px}.head-options small{margin-top:3px;color:#7d858f;font-size:9px}.head-preview{position:relative;display:block;width:30px;height:30px;border-radius:5px;background:#0d1014}.preview-line:after{position:absolute;top:4px;bottom:4px;left:15px;width:1px;background:#f5f6f1;content:""}.preview-notch:before{position:absolute;top:6px;left:10px;width:0;height:0;border-top:0;border-right:5px solid transparent;border-bottom:7px solid #f5f6f1;border-left:5px solid transparent;transform:rotate(180deg);content:""}.preview-notch:after{position:absolute;top:13px;left:15px;width:1px;height:10px;background:#f5f6f16b;content:""}.preview-halo:before{position:absolute;top:8px;left:8px;width:12px;height:12px;border:1.5px solid #f5f6f1;border-radius:50%;box-shadow:0 0 8px #d9ff3f73;content:""}.preview-halo:after{position:absolute;top:13px;left:13px;width:4px;height:4px;border-radius:50%;background:var(--accent);content:""}.preview-none:after{position:absolute;top:14px;left:6px;width:18px;height:1px;background:#5e6570;content:""}.preset-panel{max-height:340px;overflow:auto;padding:15px 14px 17px;border-top:1px solid var(--border);background:#12161b}.preset-heading{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}.text-button{display:inline-flex;align-items:center;gap:6px;padding:5px 2px;color:#e5e7e2;font-size:10px;border:0;background:transparent;cursor:pointer}.text-button:hover{color:var(--accent)}.preset-list{display:grid;gap:5px}.preset-row{position:relative}.preset-row>button:first-child{display:grid;width:100%;min-height:46px;grid-template-columns:minmax(78px,auto) 1fr 14px;align-items:center;gap:10px;padding:7px 10px;color:#e3e6e1;font-size:11px;text-align:left;border:1px solid var(--border);border-radius:6px;background:#1a1e24;cursor:pointer}.preset-row>button:first-child:hover{border-color:#535b66}.preset-row.is-selected>button:first-child{border-color:var(--accent)}.preset-gradient{display:block;width:100%;height:10px}.preset-radio{width:14px;height:14px;border:1px solid #838b95;border-radius:50%}.preset-row.is-selected .preset-radio{border:4px solid var(--accent)}.preset-row:has(.delete-preset)>button:first-child{padding-right:34px}.delete-preset{position:absolute;top:50%;right:27px;display:grid;width:25px;height:25px;padding:0;place-items:center;color:#7e8791;border:0;background:transparent;cursor:pointer;transform:translateY(-50%)}.delete-preset:hover{color:var(--danger)}.save-preset-form{display:grid;grid-template-columns:1fr 30px 30px;gap:5px;margin-bottom:8px}.save-preset-form input{width:100%;height:34px;padding:0 10px;color:#f5f6f1;font-size:11px;border:1px solid #515966;border-radius:6px;background:#0e1115}.save-preset-form button{display:grid;place-items:center;padding:0;color:#cfd3d3;border:1px solid #3e454f;border-radius:6px;background:#1b2026;cursor:pointer}.transport{position:relative;z-index:4;display:grid;grid-template-columns:300px minmax(350px,1fr) 326px;min-width:0;align-items:center;border-top:1px solid var(--border);background:linear-gradient(180deg,#101318,#0e1115)}.transport-buttons{display:flex;align-items:center;justify-content:center;gap:8px}.transport-buttons .icon-button{width:56px;height:48px;border-color:#2e343d;background:#15191f}.play-button{display:grid;width:70px;height:48px;padding:0;place-items:center;color:var(--accent-ink);border:0;border-radius:7px;background:linear-gradient(135deg,#e5ff59,#c3f422);box-shadow:0 0 20px #d9ff3f17;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.play-button:hover{box-shadow:0 0 24px #d9ff3f2e;transform:translateY(-1px)}.timeline-block{min-width:0;padding:0 36px}.timeline-row{display:grid;grid-template-columns:43px 1fr 43px;align-items:center;gap:14px}.timeline-row time{color:#f3f4ef;font-family:SFMono-Regular,Consolas,monospace;font-size:12px}.timeline-row time:last-child{text-align:right}.now-playing{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;color:#858d97;font-family:SFMono-Regular,Consolas,monospace;font-size:9px}.now-playing span:first-child{color:#cfd2ce}.now-playing i{width:4px;height:4px;border-radius:50%;background:var(--accent)}.volume-control{display:grid;grid-template-columns:22px 1fr 36px;align-items:center;gap:10px;padding:0 25px;color:#d8dad6}.volume-control output{color:#dfe1dd;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;text-align:right}.dialog-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#040507ad;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.shortcut-dialog{width:min(390px,100%);padding:18px;border:1px solid #424954;border-radius:12px;background:#15191f;box-shadow:0 24px 80px #00000073}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.dialog-heading h2{margin:0;color:#f4f5ef;font-size:16px;letter-spacing:-.02em}.shortcut-dialog dl{margin:0}.shortcut-dialog dl>div{display:grid;grid-template-columns:112px 1fr;align-items:center;min-height:43px;border-top:1px solid var(--border-soft)}.shortcut-dialog dt,.shortcut-dialog dd{margin:0}.shortcut-dialog dd{color:#a2a9b1;font-size:11px}kbd{display:inline-grid;min-width:28px;height:25px;padding:0 7px;place-items:center;color:#e6e8e4;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;border:1px solid #4d5560;border-bottom-width:2px;border-radius:5px;background:#20252c}@media (max-width: 1120px){body{overflow:auto}.app-shell{display:block;min-height:100vh;height:auto;overflow:visible}.topbar{position:sticky;top:0;height:58px;grid-template-columns:1fr auto auto}.studio-layout{display:grid;grid-template-columns:1fr;overflow:visible}.source-rail{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;padding:14px;border-right:0;border-bottom:1px solid var(--border)}.source-rail .rail-heading,.source-group-label,.local-note{display:none}.import-button{grid-row:1 / 3}.source-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.source-row{grid-template-columns:17px minmax(0,1fr);min-height:56px}.source-row .mini-wave{display:none}.source-status{grid-column:1 / -1;margin-top:0;padding:5px 2px 0}.imported-source{grid-column:1 / -1;grid-row:auto;margin:0}.canvas-stage{height:min(68vh,690px);min-height:500px}.inspector-rail{grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto;border-top:1px solid var(--border);border-left:0}.inspector-main{overflow:visible}.preset-panel{max-height:none;border-top:0;border-left:1px solid var(--border)}.transport{position:sticky;z-index:8;bottom:0;grid-template-columns:240px minmax(330px,1fr) 240px;height:108px;box-shadow:0 -10px 30px #00000040}}@media (max-width: 760px){.topbar{grid-template-columns:1fr auto;padding-left:14px}.topbar-tools{display:none}.brand{font-size:16px}.export-button{width:36px;padding:0;justify-content:center}.export-button>span{display:none}.source-rail{display:block;padding:12px}.import-button{width:100%;min-height:46px;margin-bottom:10px}.source-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.source-row{flex:0 0 154px}.source-status{display:flex}.canvas-stage{height:54vh;min-height:380px}.canvas-titlebar{padding:0 13px}.canvas-subtitle{display:none}.inspector-rail{display:block}.inspector-tabs{position:static}.inspector-section{padding:21px 18px}.preset-panel{border-top:1px solid var(--border);border-left:0}.transport{grid-template-columns:1fr;height:auto;padding:12px 14px 14px}.transport-buttons{margin-bottom:10px}.transport-buttons .icon-button,.play-button{height:42px}.timeline-block{padding:0}.volume-control{display:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}