:root{--accent: #f0862a;--accent-dim: #7a4a20;--bg-app: #0b0b0f;--bg-panel: #1a1a1c;--bg-control: #202024;--text: #e8e8f0;--text-dim: #9a9ab0;--border: #3a3a42;--mono: ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box;margin:0}body{background:var(--bg-app);color:var(--text);font-family:system-ui,-apple-system,sans-serif}.app{width:100vw;height:100vh;height:100dvh;overflow:hidden;display:flex}.stage{position:relative;flex:1;min-width:0;min-height:0;background:#000}.stage canvas{display:block;width:100%;height:100%;object-fit:contain}.app-studio .stage{padding:16px}.app-studio .stage canvas{border-radius:8px}.panel{width:320px;height:100vh;height:100dvh;padding:20px 16px;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:14px;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo-link{display:inline-flex;align-items:center;line-height:0}.brand-logo{height:26px;width:auto;display:block}.help-button{flex:0 0 auto;width:22px;height:22px;padding:0;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text-dim);font-size:13px;font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.help-button:hover,.help-button-active{color:var(--accent);border-color:var(--accent)}.help-popover{position:fixed;top:54px;right:336px;width:min(400px,calc(100vw - 360px));max-height:calc(100vh - 90px);overflow-y:auto;z-index:50;padding:12px 16px 14px;border:1px solid var(--border);border-radius:10px;background:#101014eb;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 12px 34px #0000008c;font-size:13px;line-height:1.5;color:var(--text)}.help-popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.help-popover-head span{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--accent)}.help-close{background:none;border:none;color:var(--text-dim);font-size:14px;line-height:1;cursor:pointer;padding:2px 4px}.help-close:hover{color:var(--text)}.help-popover-body p{margin:0 0 8px}.help-popover-body ul{margin:0 0 4px;padding-left:18px}.help-popover-body li{margin-bottom:6px}.help-popover-body code{background:#ffffff14;padding:1px 4px;border-radius:3px;font-size:12px}@media (max-width: 720px){.help-popover{left:12px;right:12px;width:auto;top:12px;max-height:48vh}}.panel-tabs{display:flex;gap:6px;flex:0 0 auto}.panel-tabs .tab-button{flex:1 1 0;min-width:0;padding:6px 4px;text-align:center}.panel-content{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding-right:6px}.panel-tab-content{display:flex;flex-direction:column;gap:20px}.panel-tab-content[hidden]{display:none}.panel-footer{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--border)}.panel-footer .transport-row{margin-top:0}.panel h1{font-size:18px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono)}.panel h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-family:var(--mono);margin-bottom:10px}.file{display:block;padding:10px 12px;border:1px dashed var(--border);border-radius:6px;font-size:13px;color:#b9b9cc;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file input{display:none}.meter{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:6px}.meter span{width:40px;color:var(--text-dim)}.meter .bar{flex:1;height:6px;background:#1c1c26;border-radius:3px;overflow:hidden}.meter .bar div{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width 80ms linear}.knob{display:block;margin-bottom:12px;font-size:13px}.knob span{display:flex;justify-content:space-between;margin-bottom:4px}.knob em{font-style:normal;color:var(--text-dim)}.knob input{width:100%}.knob input[type=range]:disabled{opacity:.35}.knob input[type=range]{accent-color:var(--accent)}.knob-macro em{color:var(--accent)}.knob-label{display:inline-flex;align-items:baseline;gap:5px}.knob-slot-num{font-family:var(--mono);color:var(--text-dim);opacity:.6;font-size:11px}.knob .expr{margin-top:4px;padding:5px 8px;background:var(--bg-control);border:1px solid var(--border);border-radius:4px;color:#cfcfe0;font-family:var(--mono);font-size:12px}.knob .expr::placeholder{color:#55556a}.knob .expr-error{border-color:#b4455a}.expr-message{display:block;margin-top:3px;font-size:11px;color:#e08095}.perform{display:flex;gap:12px;align-items:flex-start}.pads-block,.xy-pad-block{display:flex;align-items:flex-start;gap:6px}.trigger-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:88px}.trigger-pad{aspect-ratio:1;border:1px solid var(--border);border-radius:6px;background:var(--bg-control);color:#cfcfe0;font:inherit;font-size:12px;letter-spacing:.05em;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.trigger-pad:active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.xy-pad{position:relative;width:160px;height:160px;border:1px solid var(--border);border-radius:6px;background:var(--bg-control);touch-action:none;cursor:crosshair;flex-shrink:0}.xy-pad-dot{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);pointer-events:none}.info-popover{position:relative;display:inline-flex;flex:0 0 auto}.info-popover-button{width:18px;height:18px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--bg-control);color:var(--text-dim);font:inherit;font-family:var(--mono);font-size:11px;line-height:1;cursor:pointer}.info-popover-button:hover,.info-popover-button[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}.info-popover-content{z-index:20;width:240px;max-width:calc(100vw - 24px);padding:10px 12px;background:var(--bg-panel);border:1px solid var(--accent);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:11px;line-height:1.5;box-shadow:0 4px 16px #0006}.expr-row{display:flex;align-items:center;gap:4px}.expr-row .expr{flex:1;min-width:0}.expr-suggest-button{flex:0 0 auto;width:26px;height:24px;border:1px solid var(--border);border-radius:5px;background:var(--bg-control);color:var(--text-dim);font-family:var(--mono);font-size:11px;cursor:pointer}.expr-suggest-button:hover,.expr-suggest-button[aria-expanded=true]{color:var(--accent);border-color:var(--accent)}.expr-suggest-menu{z-index:20;width:240px;max-width:calc(100vw - 24px);max-height:calc(100vh - 16px);overflow-y:auto;padding:4px;background:var(--bg-panel);border:1px solid var(--accent);border-radius:6px;box-shadow:0 4px 16px #0006;display:flex;flex-direction:column;gap:2px}.expr-suggest-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 8px;border:none;border-radius:4px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.expr-suggest-menu button:hover{background:var(--bg-control)}.expr-suggest-label{font-size:12px}.expr-suggest-menu code{font-family:var(--mono);font-size:10px;color:var(--text-dim)}.expr-suggest-clear .expr-suggest-label{color:var(--accent)}.restore-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin-bottom:10px;border:1px solid var(--accent);border-radius:6px;font-size:12px;color:var(--text)}.scene-select{display:block;margin-bottom:12px;font-size:13px}.scene-select select{width:100%;margin-top:4px;padding:8px 10px;background:var(--bg-control);border:1px solid var(--border);border-radius:6px;color:#cfcfe0;font:inherit;font-size:13px}.switch-control{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:12px}.switch-control .scene-select{flex:1 1 100%;margin-bottom:0;min-width:0}.switch-control .session-button{flex:1 1 auto}.keyboard-hint{margin-top:10px;font-size:11px;color:#6f6f86;line-height:1.5}.session-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}.take-card .session-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.take-card .session-button{min-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-button{padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg-control);color:#cfcfe0;font:inherit;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}.session-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.session-button:disabled{opacity:.35;cursor:default}.tab-button{position:relative;padding:6px 14px;border:1px solid var(--border);border-radius:4px;background:var(--bg-control);color:var(--text-dim);font:inherit;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.tab-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.tab-button-active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.tab-badge{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 4px var(--accent)}.midi-section{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.midi-disclosure{width:100%}.midi-devices{list-style:none;margin:0 0 10px;padding:0}.midi-devices li{font-size:13px;margin-bottom:6px}.midi-devices label{display:flex;align-items:center;gap:8px;cursor:pointer}.midi-learning{border-color:var(--accent);color:var(--accent)}.macro-controls{width:100%;margin-top:10px}.macro-controls-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.macro-controls-header h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.macro-controls-header-buttons{display:flex;gap:6px}.macro-slots{list-style:none;margin:0;padding:0}.macro-slot{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:5px}.macro-slot-num{width:12px;text-align:right;font-family:var(--mono);color:var(--text-dim)}.macro-slot-cc{width:46px;font-family:var(--mono);color:var(--text-dim)}.macro-slot .bar{flex:1;height:6px;background:#1c1c26;border-radius:3px;overflow:hidden}.macro-slot .bar div{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width 80ms linear}.macro-slot-armed{outline:1px solid var(--accent);outline-offset:3px;border-radius:4px}.macro-slot-learn{background:transparent;border:1px solid var(--border);border-radius:4px;color:#cfcfe0;font-size:11px;padding:2px 6px;cursor:pointer}.macro-slot-learn:hover{border-color:var(--accent);color:var(--accent)}.scene-params-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.scene-params-header h2{margin-bottom:0}.session-file{flex:1 1 150px;min-width:150px;margin-bottom:0;font-size:13px}.replay-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.replay-status .session-status{margin-top:0}.session-status{margin-top:8px;font-size:12px;color:var(--text-dim)}.perf-mode-line{margin:0 0 6px;font-family:var(--mono);font-size:12px;color:var(--text-dim)}.perf-mode-line-performing{color:#e05656;font-weight:600}.take-card{padding:12px;margin-bottom:4px;border:1px solid var(--accent-dim);border-radius:8px;background:#f0862a12}.take-card-duration{margin:0 0 10px;font-family:var(--mono);font-size:13px;color:var(--text)}.session-button-primary{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:700}.session-button-primary:hover:not(:disabled){background:#ffa04a;border-color:#ffa04a;color:#1a1206}.session-subsection{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}.session-section-heading{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.shader-editor{display:block;width:100%;margin-bottom:8px;padding:8px 10px;background:#0d0d13;border:1px solid var(--border);border-radius:6px;color:#cfcfe0;font-family:var(--mono);font-size:12px;line-height:1.5;resize:vertical}@media (max-width: 720px){.app-studio{flex-direction:column}.app-studio .stage{flex:0 0 55vh;flex-basis:55dvh;min-height:0}.app-studio .panel{width:100%;height:auto;flex:1 1 auto;min-height:0;border-left:none;border-top:1px solid var(--border)}.panel-header,.tab-button.tab-code,.switch-control{display:none}.app-studio .panel{overflow-y:auto;padding-top:14px}.panel-tabs{padding-bottom:8px}.panel-content{overflow:visible;flex:0 0 auto}.panel-footer{flex:0 0 auto}.knob input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background:transparent}.knob input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#4a4a55}.knob input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent);margin-top:-9px;box-shadow:0 1px 3px #00000080}.knob input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#4a4a55}.knob input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}.knob input[type=range]::-moz-range-thumb{width:24px;height:24px;border:none;border-radius:50%;background:var(--accent);box-shadow:0 1px 3px #00000080}}.transport-row{display:flex;align-items:center;gap:8px;margin-top:10px}.transport-row .session-button{flex:0 0 auto;padding:8px 10px}.transport-scrub{flex:1;min-width:0;accent-color:var(--accent)}.transport-scrub:disabled{opacity:.35}.transport-time{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-dim);white-space:nowrap}.audio-unblock{border-color:var(--accent);color:var(--accent);font-weight:600;animation:pulse-attn 1.6s ease-in-out infinite}@keyframes pulse-attn{50%{background:var(--accent-dim)}}.record-armed{border-color:#e05656;color:#e05656;font-weight:600;animation:pulse-armed 1.2s ease-in-out infinite}@keyframes pulse-armed{50%{background:#331616}}.shader-docs{margin-bottom:4px}.shader-docs-content{margin-top:8px;padding:10px 12px;background:var(--bg-control);border:1px solid var(--border);border-radius:6px;font-size:12px;line-height:1.5;color:#cfcfe0}.shader-docs-content p{margin:0 0 8px}.shader-docs-heading{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.shader-docs-try-list{margin:0 0 8px;padding-left:18px}.shader-docs-try-list li{margin-bottom:6px}.shader-docs-try-list code{font-family:var(--mono);font-size:11px;color:var(--accent);background:#f0862a1a;padding:1px 4px;border-radius:3px}.shader-docs-safety{margin:0;color:var(--text-dim);font-size:11px}.frames-block{margin-top:14px}.macro-view-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 10px}.macro-view-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.frames-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}.frames-header h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.frames-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.frame-button{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--border);border-radius:6px;background:var(--bg-control);color:#cfcfe0;font:inherit;font-family:var(--mono);font-size:11px;cursor:pointer}.frame-button:hover{border-color:var(--accent);color:var(--accent)}.frame-button-occupied{border-color:var(--accent-dim);background:#f0862a1f;color:var(--accent)}.store-armed{border-color:var(--accent);color:var(--accent);animation:pulse-attn 1.6s ease-in-out infinite}.rotary-knob{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto;width:64px}.rotary-knob-label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.rotary-knob-dial{cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none}.rotary-knob-bound .rotary-knob-dial{cursor:default}.rotary-knob-face{fill:var(--bg-control);stroke:var(--border);stroke-width:1.5}.rotary-knob-track{fill:none;stroke:var(--border);stroke-width:8;stroke-linecap:round}.rotary-knob-value-arc{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}.rotary-knob-needle{stroke:#cfcfe0;stroke-width:4;stroke-linecap:round}.rotary-knob-bound .rotary-knob-needle{stroke:var(--accent)}.rotary-knob-hub{fill:var(--border)}.rotary-knob-value{font-family:var(--mono);font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}.rotary-knob-bound .rotary-knob-value{color:var(--accent)}.rotary-knob-armed{outline:1px solid var(--accent);outline-offset:4px;border-radius:6px}.rotary-knob-macro .rotary-knob-needle{stroke:var(--accent)}.rotary-knob-macro .rotary-knob-value{color:var(--accent)}