:root{--studio-bg:#101010;--studio-panel-bg:#171717;--studio-panel-hover:#1c1c1c;--studio-panel-border:#2b2b2b;--studio-border-strong:#3a3a3a;--studio-text-main:#eee;--studio-text-muted:#9b9b9b;--studio-danger:#e28f8f;--studio-success:#9bdc9b;--font-ui:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--danger:var(--studio-danger);--success:var(--studio-success)}*{box-sizing:border-box}body{background:var(--studio-bg);color:var(--studio-text-main);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;flex-direction:column;height:100dvh;margin:0;display:flex;overflow:hidden}.studio-header{background:var(--studio-panel-bg);border-bottom:1px solid var(--studio-panel-border);z-index:100;flex-shrink:0;grid-template-columns:minmax(160px,1fr) auto minmax(280px,1fr);align-items:center;height:64px;padding:0 18px;display:grid}.logo-area{grid-column:2;justify-self:center;align-items:center;gap:10px;display:flex}.logo-icon{border:1px solid var(--studio-border-strong);width:34px;height:34px;color:var(--studio-text-main);letter-spacing:.08em;justify-content:center;align-items:center;font-size:.76rem;font-weight:700;display:flex}.logo-text{flex-direction:column;display:flex}.brand{font-size:.98rem;font-weight:700}.sub-brand{color:var(--studio-text-muted);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;font-size:.64rem}.header-actions{grid-column:3;justify-self:end;align-items:center;gap:10px;display:flex}.header-chip,.action-btn{border:1px solid var(--studio-panel-border);min-height:38px;color:var(--studio-text-main);background:#101010;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:.78rem;font-weight:600;text-decoration:none;display:inline-flex}.header-chip{color:var(--studio-text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}.action-btn{cursor:pointer;letter-spacing:normal;text-transform:none;transition:background .15s,border-color .15s,color .15s}.action-btn:hover{background:var(--studio-panel-hover);border-color:var(--studio-border-strong)}.studio-workspace{background:var(--studio-bg);flex:1;min-height:0;display:flex;overflow:hidden}#sidebar{background:var(--studio-panel-bg);border-right:1px solid var(--studio-panel-border);z-index:50;flex-direction:column;flex-shrink:0;order:-1;gap:16px;width:340px;height:100%;padding:18px;display:flex;overflow-y:auto}#sidebar::-webkit-scrollbar{width:6px}#sidebar::-webkit-scrollbar-track{background:0 0}#sidebar::-webkit-scrollbar-thumb{background:var(--studio-border-strong)}#canvas-container{background:var(--studio-bg);flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}#canvas-container:after{content:"";border:1px solid var(--studio-panel-border);pointer-events:none;position:absolute;inset:18px}#canvas-container canvas{box-shadow:0 0 0 1px var(--studio-panel-border)}#drag-overlay{border:2px solid var(--studio-border-strong);z-index:200;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--studio-text-main);opacity:0;pointer-events:none;background:#101010db;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;transition:opacity .2s;display:flex;position:fixed;inset:0}#drag-overlay.active{opacity:1}h1{letter-spacing:.08em;color:var(--studio-text-muted);text-transform:uppercase;border-bottom:1px solid var(--studio-panel-border);margin:0;padding-bottom:8px;font-size:.76rem;font-weight:700}.group{flex-direction:column;gap:8px;width:100%;display:flex}label,.control-label{color:var(--studio-text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:700}input[type=file]{display:none}.btn{min-height:38px;color:var(--studio-text-main);border:1px solid var(--studio-panel-border);cursor:pointer;background:#101010;justify-content:center;align-items:center;gap:8px;width:100%;padding:0 12px;font-size:.82rem;font-weight:600;transition:background .15s,border-color .15s,color .15s;display:flex}.btn:hover{background:var(--studio-panel-hover);border-color:var(--studio-border-strong)}button:disabled,.btn:disabled,.action-btn:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,.action-btn:focus-visible{outline:2px solid var(--studio-text-main);outline-offset:2px}.btn-row{gap:8px;width:100%;display:flex}.btn-icon{width:100%;padding:0 10px}.btn-record.recording{border-color:var(--studio-danger);color:var(--studio-danger);background:#e28f8f24;animation:2s infinite pulse}.btn-auto-record{color:var(--studio-success);border-color:#9bdc9b59}.btn-auto-record.recording{border-color:var(--studio-success);background:#9bdc9b24;animation:2s infinite pulse-green}.btn-play.playing{border-color:var(--studio-success);color:var(--studio-success);background:#9bdc9b24}input[type=range]{-webkit-appearance:none;border:1px solid var(--studio-panel-border);background:#101010;outline:none;width:100%;height:22px;padding:0 3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--studio-text-main);cursor:pointer;width:12px;height:16px;margin-top:-7px}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:var(--studio-border-strong);width:100%;height:2px}select,input[type=color]{color:var(--studio-text-main);border:1px solid var(--studio-panel-border);cursor:pointer;background:#101010;border-radius:0;width:100%;padding:9px 10px;font-size:.82rem}select:focus,input[type=color]:focus{border-color:var(--studio-border-strong);outline:none}.separator{background:var(--studio-panel-border);width:100%;height:1px;margin:2px 0}.pill-switch{border:1px solid var(--studio-panel-border);background:#101010;width:100%;display:flex}.pill-switch button{border:0;border-right:1px solid var(--studio-panel-border);color:var(--studio-text-muted);cursor:pointer;background:0 0;flex:1;padding:9px 6px;font-size:.76rem;font-weight:600;transition:background .15s,color .15s}.pill-switch button:last-child{border-right:0}.pill-switch button:hover,.pill-switch button.active{background:var(--studio-panel-hover);color:var(--studio-text-main)}.controls-section{flex-direction:column;gap:14px;animation:.2s fadeIn;display:none}.controls-section.visible{display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.badge{border:1px solid var(--studio-panel-border);color:var(--studio-text-main);font-family:var(--font-mono);background:#101010;margin-left:auto;padding:1px 6px;font-size:.68rem}.checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--studio-text-main);text-transform:none;letter-spacing:0;align-items:center;gap:8px;font-size:.82rem;font-weight:500;display:flex}.icon{fill:currentColor;width:16px;height:16px}#manualLightControls{border-left:1px solid var(--studio-panel-border);flex-direction:column;gap:8px;padding-left:10px;display:flex}@keyframes pulse{0%{box-shadow:0 0 #e28f8f4d}70%{box-shadow:0 0 0 8px #e28f8f00}to{box-shadow:0 0 #e28f8f00}}@keyframes pulse-green{0%{box-shadow:0 0 #9bdc9b4d}70%{box-shadow:0 0 0 8px #9bdc9b00}to{box-shadow:0 0 #9bdc9b00}}#loading{z-index:20;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;background:var(--studio-panel-bg);border:1px solid var(--studio-panel-border);padding:16px 28px;font-size:.8rem;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.project-toolbar{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.status-line{min-height:18px;color:var(--studio-text-muted);font-family:var(--font-mono);font-size:.68rem;line-height:1.45}.status-line.success{color:var(--studio-success)}.status-line.error{color:var(--studio-danger)}#recordingStatus{min-height:20px}#toast{z-index:300;border:1px solid var(--studio-border-strong);background:var(--studio-panel-bg);max-width:min(380px,100vw - 40px);color:var(--studio-text-main);opacity:0;pointer-events:none;padding:12px 16px;font-size:.8rem;transition:opacity .15s,transform .15s;position:fixed;bottom:20px;right:20px;transform:translateY(8px);box-shadow:0 12px 32px #00000059}#toast.show{opacity:1;transform:translateY(0)}.keyboard-help{color:var(--studio-text-muted);text-align:center;margin:0;font-size:.68rem;line-height:1.5}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.slider-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.slider-val{color:var(--studio-text-muted);font-family:var(--font-mono);text-align:right;min-width:38px;font-size:.68rem}@media (width<=900px){.studio-header{grid-template-columns:1fr auto;gap:12px}.logo-area{grid-column:1;justify-self:start}.header-actions{grid-column:2}.header-chip{display:none}.studio-workspace{flex-direction:column}#canvas-container{flex:58%;min-height:0}#sidebar{border-right:0;border-top:1px solid var(--studio-panel-border);flex:0 0 42%;order:1;width:100%;height:auto;min-height:0}}@media (width<=560px){.studio-header{height:58px;padding:0 12px}.logo-icon{display:none}.brand{font-size:.9rem}.action-btn{min-height:34px;padding:0 10px}#sidebar{flex:auto;padding:14px}#canvas-container{flex:0 0 42%;min-height:210px}.btn-row{flex-wrap:wrap}.project-toolbar{grid-template-columns:1fr}#toast{max-width:calc(100vw - 24px);bottom:12px;right:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.export-duration-row,.light-temperature-group{margin-top:8px}#iconPause,#bgColorPicker,#manuscriptControls,#bedroomControls{display:none}.playback-volume-group{margin-top:10px}#bgColorPicker{border:none;width:40px;height:35px;padding:0}#manuscriptControls,#bedroomControls{margin-top:5px}#clearKeysBtn{border-color:var(--danger);color:var(--danger)}.light-temperature-label{opacity:.6;margin-bottom:2px;font-size:.7rem}.light-temperature-row{align-items:center;gap:8px;display:flex}#lightTempSelect{flex-grow:1}#lightColorPicker{cursor:pointer;background:0 0;border:none;flex-shrink:0;width:30px;height:30px;padding:0}.light-helper-row{margin-top:5px}.light-section-label{opacity:.6;margin-bottom:5px;font-size:.7rem}.sidebar-spacer{flex-grow:1}.version-label{opacity:.3;text-align:center;font-size:.7rem}