:root{--bg-top: #071117;--bg-bottom: #111724;--panel-width: 468px;--panel-radius: 44px;--panel-outer-width: calc(var(--panel-width) + var(--panel-radius));--panel-gap: 22px;--stage-gap: 28px;--panel: rgba(8, 18, 25, .72);--panel-strong: rgba(10, 22, 30, .88);--panel-border: rgba(173, 215, 223, .14);--panel-soft: rgba(173, 215, 223, .08);--text: #edf7f5;--muted: #9bb2b8;--accent: #d7f29c;--accent-2: #82edd8;--shadow: rgba(0, 0, 0, .34)}*{box-sizing:border-box}html{background:radial-gradient(circle at top,rgba(109,220,189,.16),transparent 34%),radial-gradient(circle at 22% 78%,rgba(218,241,148,.12),transparent 28%),linear-gradient(165deg,var(--bg-top) 0%,#0b141b 48%,var(--bg-bottom) 100%)}body{margin:0;min-height:100vh;overflow:hidden;font-family:IBM Plex Sans,Avenir Next,sans-serif;color:var(--text);background:transparent}.app-shell{position:relative;height:100vh;padding:0 22px 0 0}.control-panel-viewport,.control-panel,.viewport-panel{position:relative;min-height:0}.control-panel-viewport{position:fixed;top:0;bottom:0;left:0;width:var(--panel-outer-width);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;transition:transform .52s cubic-bezier(.22,1.15,.3,1);will-change:transform;scrollbar-width:none;-ms-overflow-style:none}.control-panel-viewport::-webkit-scrollbar{display:none}.control-panel{position:relative;min-height:100vh;width:100%;border:1px solid var(--panel-border);border-left:none;border-radius:0 var(--panel-radius) var(--panel-radius) 0;background:linear-gradient(180deg,#0c161df2,#091218eb),var(--panel);box-shadow:0 26px 70px var(--shadow);padding:22px 30px 22px 22px;contain:layout paint;overflow:hidden;clip-path:inset(0 0 0 0 round 0 var(--panel-radius) var(--panel-radius) 0)}.control-panel-viewport.is-collapsed{transform:translate(calc(-100% - 20px))}.panel-header{position:relative}.panel-header-copy{min-width:0}#appShell:fullscreen{width:100vw;height:100vh}#appShell:fullscreen.is-cursor-hidden{cursor:none}.panel-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:999px;background:transparent;opacity:.42;cursor:pointer;transition:opacity .14s ease,background-color .14s ease}.panel-toggle:hover{opacity:1;background:#060c11c7}.panel-toggle:active{background:#060c11e6}.panel-toggle__icon{display:block;width:18px;height:18px;overflow:visible}.panel-toggle__icon polyline{fill:none;stroke:#edf7f5f5;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.panel-header h1{margin:0;max-width:10ch;font-size:clamp(2.2rem,3.8vw,3.65rem);line-height:.92;letter-spacing:-.04em}.brand-mark,.section-title{margin:0;color:var(--accent);text-transform:uppercase}.brand-mark{margin-bottom:14px;color:#edf7f5eb;font-size:.92rem;font-weight:600;letter-spacing:.26em}.section-title{font-size:.75rem;letter-spacing:.2em}.lede,.notes p,label span,output,.session-kicker{color:var(--muted)}.lede{margin:18px 0 0;max-width:32ch;font-size:1rem;line-height:1.65}.control-group,.controls-section,.advanced-panel,.notes{margin-top:22px}.control-panel-body{margin-top:34px}.playback-header{display:flex;flex-direction:column;gap:6px}.playback-group{display:grid;gap:16px}.session-kicker{margin:0;font-size:.92rem;line-height:1.55;color:#9bb2b8bd}.audio-player{display:grid;gap:10px;padding:14px;border:1px solid rgba(173,215,223,.12);border-radius:22px;background:#ffffff08}.source-mode{margin-bottom:4px}.audio-player__row{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto auto;column-gap:10px;align-items:center}.audio-player__play,.audio-player__load,.audio-player__volume-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:var(--text)}.audio-player__play{width:46px;padding:0;border:1px solid rgba(173,215,223,.14);border-radius:999px;background:#ffffff09;cursor:pointer;transition:background-color .14s ease,border-color .14s ease}.audio-player__play:hover{border-color:#add7df3d;background:#ffffff14}.audio-player__play-icon{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid rgba(237,247,245,.94);margin-left:3px}.audio-player__play.is-playing .audio-player__play-icon{width:12px;height:14px;border:none;margin-left:0;background:linear-gradient(90deg,rgba(237,247,245,.94) 0 38%,transparent 38% 62%,rgba(237,247,245,.94) 62% 100%)}.audio-player__timeline{min-width:0;display:flex;align-items:center;height:38px}.audio-player__seek{--seek-fill: 0%;width:100%;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(130,237,216,.92) 0 var(--seek-fill),rgba(255,255,255,.16) var(--seek-fill) 100%);outline:none;cursor:pointer}.audio-player__seek::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:2px solid rgba(237,247,245,.96);border-radius:999px;background:#82edd8;box-shadow:0 0 0 1px #050c11e0}.audio-player__seek::-moz-range-thumb{width:16px;height:16px;border:2px solid rgba(237,247,245,.96);border-radius:999px;background:#82edd8;box-shadow:0 0 0 1px #050c11e0}.audio-player__time{margin:0;color:#e8f1f4c2;font:.82rem/1.2 IBM Plex Mono,monospace;white-space:nowrap}.audio-player__volume{position:relative;display:flex;align-items:center;margin-right:-10px}.audio-player__volume-slider{--seek-fill: 100%;width:100%;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(215,242,156,.9) 0 var(--seek-fill),rgba(255,255,255,.14) var(--seek-fill) 100%);outline:none;cursor:pointer}.audio-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border:2px solid rgba(237,247,245,.96);border-radius:999px;background:#d7f29c}.audio-player__volume-button{display:inline-flex;align-items:center;justify-content:center;width:38px;min-width:38px;min-height:38px;padding:0;border:none;border-radius:999px;background:transparent;cursor:pointer;transition:background-color .14s ease}.audio-player__load{width:38px;min-width:38px;min-height:38px;padding:0;border:none;border-radius:999px;background:transparent;cursor:pointer;transition:background-color .14s ease}.audio-player__volume-popover{position:absolute;right:calc(100% + 10px);top:50%;width:132px;padding:10px 12px;border:1px solid rgba(173,215,223,.14);border-radius:16px;background:#0d171ffa;box-shadow:0 16px 30px #00000047;transform:translateY(-50%)}.audio-player__volume-popover[hidden]{display:none}.audio-player__icon{width:20px;height:20px;overflow:visible}.audio-player__icon path{fill:none;stroke:#e8f1f4db;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.audio-player__volume-wave{display:none}.audio-player__volume-button[data-volume-level=mute] .audio-player__volume-wave--mute,.audio-player__volume-button[data-volume-level=low] .audio-player__volume-wave--low,.audio-player__volume-button[data-volume-level=mid] .audio-player__volume-wave--low,.audio-player__volume-button[data-volume-level=mid] .audio-player__volume-wave--mid,.audio-player__volume-button[data-volume-level=high] .audio-player__volume-wave--low,.audio-player__volume-button[data-volume-level=high] .audio-player__volume-wave--mid,.audio-player__volume-button[data-volume-level=high] .audio-player__volume-wave--high{display:block}.audio-player__volume-button:hover,.audio-player__load:hover{background:#ffffff14}.audio-player__volume-button:active,.audio-player__load:active{background:#ffffff1f}.audio-player__volume-slider::-moz-range-thumb{width:12px;height:12px;border:2px solid rgba(237,247,245,.96);border-radius:999px;background:#d7f29c}.audio-player__load{padding:0 16px;cursor:pointer}.audio-player__load input,#audio{display:none}.audio-player.is-readonly{opacity:.78}.audio-player__seek:disabled,.audio-player__volume-slider:disabled,.audio-player__volume-button:disabled,.audio-player__load:disabled,.audio-player__play:disabled{cursor:not-allowed;opacity:.56}.source-actions{display:grid;gap:8px;justify-items:start;padding:4px 2px 2px}#audioFilePanel[hidden],.audio-player[hidden],.session-meta[hidden],.source-actions[hidden]{display:none!important}.audio-capture-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:1px solid rgba(173,215,223,.16);border-radius:999px;background:#ffffff09;color:var(--text);cursor:pointer;font:.76rem/1 IBM Plex Mono,monospace;letter-spacing:.06em;text-transform:uppercase;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.audio-capture-toggle:hover{background:#ffffff14}.audio-capture-toggle:active{background:#ffffff1f}.audio-capture-toggle.is-live{border-color:#82edd88a;background:#82edd81f;color:#d9fff8f5}.source-actions__hint{margin:0;color:#9bb2b8a3;font-size:.8rem;line-height:1.45}@media(max-width:720px){.audio-player__row{grid-template-columns:46px minmax(0,1fr) auto auto;row-gap:10px}.audio-player__time{grid-column:1 / -1;justify-self:end}}.current-track{margin:0;font-size:.98rem;font-weight:500;line-height:1.4;color:var(--text);word-break:break-word}.session-meta{display:grid;gap:10px}.status-pill{margin:0;padding:0;border:none;border-radius:0;background:transparent;color:#9bb2b8b8;font-size:.86rem;line-height:1.5}.export-panel{display:grid;gap:10px;padding:14px;border:1px solid rgba(173,215,223,.12);border-radius:22px;background:#ffffff08}.export-panel__copy{display:grid;gap:6px}.export-panel__actions{display:flex;justify-content:flex-start;padding:2px 0 0;border-top:1px solid rgba(173,215,223,.08)}.export-panel__state{margin:2px 0 0;color:#edf7f5eb;font:.76rem/1 IBM Plex Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.export-switch{display:inline-grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:12px 0 10px;border:none;border-radius:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:opacity .14s ease}.export-switch:hover{opacity:.94}.export-switch:disabled{cursor:not-allowed;opacity:.56}.export-switch__track{position:relative;display:inline-flex;align-items:center;width:44px;height:26px;padding:3px;border-radius:999px;background:#ffffff24;transition:background-color .14s ease}.export-switch__thumb{display:block;width:20px;height:20px;border-radius:999px;background:#edf7f5f0;box-shadow:0 2px 8px #00000047;transition:transform .18s ease,background-color .14s ease}.export-switch__copy{display:grid;gap:4px;min-width:0}.export-switch__label{color:#edf7f5f5;font-size:.88rem;font-weight:500;line-height:1.2}.export-switch__hint{color:#9bb2b8a8;font-size:.76rem;line-height:1.4}.export-switch.is-armed .export-switch__track{background:#d7f29c61}.export-switch.is-live .export-switch__track{background:#82edd885}.export-switch.is-armed .export-switch__thumb,.export-switch.is-live .export-switch__thumb{transform:translate(18px)}.controls-section{padding-top:18px;border-top:1px solid rgba(173,215,223,.08)}.controls-section>.section-title{margin-bottom:18px}.controls-section--advanced{margin-top:12px;padding-top:18px;border-top:none}.control-grid{display:grid;gap:14px}.control-grid label,.color-row label,.custom-select,.color-swatch-control,.control-block{display:grid;grid-template-columns:1fr auto;gap:6px 12px}.control-grid label.is-hidden,.color-row label.is-hidden,.custom-select.is-hidden,.color-swatch-control.is-hidden,.control-block.is-hidden,.controls-section.is-hidden,.advanced-panel.is-hidden,.control-toggle.is-hidden,.mode-label.is-hidden{display:none}.control-grid label>span,.color-row label>span,.custom-select>span,.color-swatch-control>span,.control-block>span{grid-column:1;grid-row:1;color:#e1edf0e6;font-size:.92rem;font-weight:500;line-height:1.35}.control-grid label>output{grid-column:2;grid-row:1;align-self:center;justify-self:end;color:var(--text)}.control-grid input[type=range]{grid-column:1 / -1;grid-row:2;width:100%;accent-color:var(--accent-2)}.control-help{grid-column:1 / -1;color:#9bb2b88f;font-size:.76rem;line-height:1.5}.color-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.native-control-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}.custom-select,.color-swatch-control{position:relative}.select-shell{grid-column:1 / -1;grid-row:2;position:relative}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 18px;border:1px solid rgba(130,237,216,.18);border-radius:14px;background:#ffffff09;color:var(--text);font:inherit;text-align:left;cursor:pointer}.select-chevron{width:12px;height:12px;margin-left:12px;flex:0 0 auto;border-right:1.8px solid rgba(237,247,245,.88);border-bottom:1.8px solid rgba(237,247,245,.88);transform:translateY(-2px) rotate(45deg)}.select-menu{position:absolute;top:calc(100% + 0px);left:0;z-index:40;display:grid;width:100%;min-width:100%;padding:10px 0;border:1px solid rgba(173,215,223,.18);border-radius:14px;background:linear-gradient(180deg,#222a34fa,#1d252efa);box-shadow:0 18px 40px #0000004d}.select-menu[hidden]{display:none}.select-option{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;min-height:40px;padding:0 18px;border:none;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.select-option:hover,.select-option:focus-visible{background:#82edd814;outline:none}.color-swatch-button{grid-column:1 / -1;grid-row:2;width:100%;min-height:54px;padding:0;border:none;border-radius:0;background:transparent;cursor:pointer}.color-swatch-control>span{color:#9bb2b8d6;font-size:.8rem;font-weight:500;letter-spacing:.04em}.color-swatch-fill{display:block;width:100%;height:54px;background:var(--swatch-color, #ffffff);box-shadow:inset 0 0 0 1px #ffffff2e}.color-swatch-button:focus-visible .color-swatch-fill,.color-swatch-button.is-open .color-swatch-fill{box-shadow:inset 0 0 0 1px #ffffff3d,0 0 0 1px #82edd82e}.native-color-input{pointer-events:none}.color-picker-popover{position:fixed;z-index:80;width:296px}.color-picker-popover[hidden]{display:none}.color-picker{padding:14px;border:1px solid rgba(130,237,216,.14);border-radius:18px;background:linear-gradient(180deg,#111a22fa,#0a1219fa);box-shadow:0 22px 44px #00000061}.color-picker__surface{--picker-hue: hsl(0 100% 50%);position:relative;width:100%;height:176px;border-radius:0;overflow:hidden;isolation:isolate;background:transparent;cursor:crosshair}.color-picker__surface:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0;background:var(--picker-hue);pointer-events:none}.color-picker__surface:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0;pointer-events:none}.color-picker__surface-white,.color-picker__surface-black{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0}.color-picker__surface-white{background:linear-gradient(90deg,#fff,#fff0)}.color-picker__surface-black{background:linear-gradient(180deg,#0000,#000)}.color-picker__surface-handle{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;overflow:visible}.color-picker__surface-handle circle,.color-picker__hue-handle circle{fill:none;stroke:#f8fcfffa;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 .8px rgba(5,12,17,.75))}.color-picker__controls{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;margin-top:14px}.color-picker__preview{width:34px;height:34px;border-radius:999px;background:var(--picker-preview, #ffffff);box-shadow:inset 0 0 0 1px #ffffff24}.color-picker__hue{display:block}.color-picker__hue-track{position:relative;display:flex;align-items:center}.color-picker__hue input[type=range]{width:100%;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:12px;border-radius:999px;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);outline:none}.color-picker__hue input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border:none;background:transparent;box-shadow:none}.color-picker__hue input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;background:transparent;box-shadow:none}.color-picker__hue-handle{position:absolute;top:50%;left:0;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;overflow:visible}.color-picker__value{margin:12px 0 0;color:#e8f1f4c2;font:.78rem/1.3 IBM Plex Mono,monospace;letter-spacing:.08em}.color-picker__inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.color-picker__field{display:grid;gap:6px}.color-picker__field--hex{grid-column:1 / -1}.color-picker__field span{color:#9bb2b89e;font-size:.68rem;letter-spacing:.12em}.color-picker__field input{width:100%;min-height:38px;padding:0 12px;border:1px solid rgba(130,237,216,.14);border-radius:10px;background:#ffffff09;color:var(--text);font:inherit}.color-picker__field input:focus{outline:none;border-color:#82edd847}.segmented-control{grid-column:1 / -1;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.segmented-control button{min-height:44px;border:1px solid rgba(130,237,216,.18);border-radius:999px;background:#ffffff05;color:var(--muted);font:inherit;cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease}.segmented-control button:hover{transform:none;border-color:#82edd847;background:#ffffff0b;color:#edf7f5eb}.segmented-control button.is-active{border-color:#d7f29c6b;background:#d7f29c21;color:var(--text)}.control-toggle{align-items:center}.control-toggle input[type=checkbox]{grid-column:2;width:18px;height:18px;margin:0;accent-color:var(--accent-2)}.mode-label{margin:-2px 0 2px;padding:12px 14px;border-radius:14px;background:#ffffff08;color:#9bb2b8a8;font-size:.88rem;line-height:1.45}.advanced-panel{margin-top:22px}.advanced-panel summary{list-style:none;cursor:pointer;padding:18px 0 0;color:var(--text);font-weight:600;border-top:none}.advanced-panel summary::-webkit-details-marker{display:none}.advanced-panel[open] summary{border-bottom:none}.advanced-panel summary:after{content:"+";float:right;color:var(--accent)}.advanced-panel[open] summary:after{content:"−"}.notes{padding-bottom:6px}.notes p{margin:0;font-size:.84rem;line-height:1.6;color:#9bb2b885}.viewport-panel{display:flex;align-items:center;justify-content:center;height:100%;margin-left:calc(var(--panel-outer-width) + var(--stage-gap));padding:0;overflow:hidden;transition:margin-left .52s cubic-bezier(.22,1.15,.3,1)}.viewport-stage-shell{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;overflow:hidden}.viewport-stage{position:relative;width:min(100%,calc(100vh - 44px));height:auto;aspect-ratio:1;border-radius:34px;overflow:hidden;box-shadow:none}#appShell:fullscreen .viewport-panel{margin-left:0}#appShell:fullscreen .viewport-stage{width:min(100vw,100vh);border-radius:0}#previewWgpu,#previewGl,#preview{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#previewWgpu,#previewGl{opacity:0;transition:opacity .14s ease;pointer-events:none;transform-origin:center center}#previewWgpu.is-visible,#previewGl.is-visible{opacity:1}#preview{background:transparent}.app-shell.is-collapsed .viewport-panel{margin-left:var(--panel-gap)}.panel-edge-hotspot,.panel-left-hotspot,.panel-top-right-hotspot{position:fixed;z-index:25}.panel-edge-hotspot{top:0;bottom:0;left:calc(var(--panel-outer-width) + 8px);width:46px;pointer-events:auto}.panel-left-hotspot{top:0;bottom:0;left:0;width:48px;pointer-events:none}.panel-top-right-hotspot{top:0;right:0;width:80px;height:72px;pointer-events:auto}.panel-toggle--edge{position:absolute;top:50%;right:2px;transform:translateY(-50%);opacity:0;transition:opacity .16s ease,background-color .14s ease}.panel-toggle--left{left:4px;right:auto;transform:translateY(-50%)}.panel-toggle--corner{position:absolute;top:14px;right:14px;opacity:0;transition:opacity .16s ease,background-color .14s ease}.panel-edge-hotspot:hover .panel-toggle--edge,.panel-left-hotspot:hover .panel-toggle--left,.panel-top-right-hotspot:hover .panel-toggle--corner{opacity:.92}.app-shell.is-collapsed .panel-edge-hotspot{opacity:0;pointer-events:none}.app-shell.is-collapsed .panel-left-hotspot{pointer-events:auto}.app-shell:not(.is-collapsed) .panel-left-hotspot{opacity:0;pointer-events:none}@media(max-width:1120px){:root{--panel-width: 420px}.app-shell{height:auto;padding:14px}.viewport-stage{width:min(100%,86vw)}}@media(max-width:960px){body{overflow:auto}.app-shell{height:auto;padding:14px}.control-panel-viewport,.control-panel,.viewport-panel{padding:18px;border-radius:24px}.panel-header h1{max-width:none;font-size:2.4rem}.color-row{grid-template-columns:1fr}.control-panel-viewport{position:relative;top:auto;bottom:auto;left:auto;width:auto;transform:none!important;overflow:visible}.control-panel{min-height:auto;width:auto;border-left:1px solid var(--panel-border);border-radius:24px;padding:18px}.viewport-panel{margin-left:0;padding:0}.viewport-stage{width:100%}.panel-edge-hotspot,.panel-left-hotspot{display:none}}