*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #000000;--bg-secondary: #121212;--bg-card: rgba(18, 18, 18, .85);--text-primary: #F5F5F5;--text-secondary: #888888;--text-muted: #555555;--accent: #D64100;--accent-hover: #E54D00;--border-subtle: rgba(255, 255, 255, .1);--border-active: rgba(214, 65, 0, .4);--font-display: "Roboto Condensed", "Roboto", "Helvetica Neue", sans-serif;--font-body: "Roboto Condensed", "Roboto", "Helvetica Neue", sans-serif;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 36px}#viz-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;background:#000}body{font-family:var(--font-body);background:#000;color:var(--text-primary);min-height:100vh;padding:2rem 1rem}#auth-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#060810eb;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}#auth-gate.auth-hidden{display:none}.auth-card{width:min(420px,92vw);border-radius:var(--radius-md);padding:1.5rem;background:#0e1222d9;border:1px solid var(--border-subtle);box-shadow:0 10px 40px #00000073;text-align:left}.auth-card h2{font-size:1rem;margin-bottom:.4rem;color:var(--text-primary);letter-spacing:.08em;text-transform:uppercase}.auth-card p{font-size:.85rem;color:var(--text-secondary);margin-bottom:1rem}.auth-row{display:flex;gap:.5rem}#auth-input{flex:1;font-family:inherit;font-size:.9rem;padding:.5rem .75rem;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#16213e59;color:var(--text-primary)}#auth-submit{font-family:inherit;font-size:.85rem;padding:.5rem .9rem;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#16213e73;color:var(--text-primary);cursor:pointer;white-space:nowrap}#auth-submit:hover{background:#0f346066}#auth-error{min-height:1rem;margin-top:.6rem;font-size:.8rem;color:var(--accent)}#app-shell{max-width:1200px;margin:0 auto;display:flex;gap:1.5rem;align-items:flex-start}#app{flex:1 1 720px;position:relative;z-index:10;background:var(--bg-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:2rem}#director-log{width:min(360px,92vw);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1.25rem;position:sticky;top:2rem;height:calc(100vh - 4rem);display:flex;flex-direction:column;gap:.75rem}.log-header h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem}.log-subtitle{font-size:.75rem;color:var(--text-secondary)}#log-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding-right:.35rem}.log-entry{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.6rem .7rem;background:#00000059;font-size:.78rem;line-height:1.4;white-space:pre-wrap}.log-entry .log-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:.35rem}.log-entry.log-error{border-color:var(--border-active);color:var(--text-primary)}header{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem}header h1{font-size:1.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}header h1:after{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-left:12px;vertical-align:middle}#status{font-size:.85rem;color:var(--text-secondary)}#transport{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap;background:var(--bg-secondary);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.75rem 1rem}#transport select,#transport button,#transport input{font-family:var(--font-body);font-size:.85rem;font-weight:400;padding:.5rem .75rem;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:#ffffff0d;color:var(--text-primary);transition:all .15s ease}#transport select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-color:#121212d9}#transport select option{background-color:#121212;color:var(--text-primary)}#transport select:hover,#transport button:hover:not(:disabled){background:#ffffff1a;border-color:var(--border-active)}#transport button{cursor:pointer;min-width:70px;border-radius:var(--radius-lg);padding:.5rem 1.25rem}#transport button:disabled{opacity:.4;cursor:default}#btn-play{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}#btn-play:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}#btn-stop{background:transparent;border-color:var(--border-subtle);color:var(--text-primary)}#btn-stop:hover:not(:disabled){background:#ffffff1a;border-color:var(--text-secondary)}#transport label{font-size:.8rem;font-weight:400;text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary);display:flex;align-items:center;gap:.4rem}#transport input[type=number]{width:70px}.knob-container{display:flex;flex-direction:column;align-items:center;gap:2px;-webkit-user-select:none;user-select:none}.knob-container svg{cursor:ns-resize;touch-action:none}.knob-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.knob-display{font-size:.75rem;color:var(--text-primary);font-variant-numeric:tabular-nums}#btn-lock{min-width:60px;border-radius:var(--radius-lg)}#btn-lock.locked{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}#input-mode{display:flex;gap:0}#input-mode button{font-family:var(--font-body);font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.03em;padding:.4rem .6rem;border:1px solid var(--border-subtle);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}#input-mode button:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg);padding-left:.8rem}#input-mode button:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0;border-left:none;padding-right:.8rem}#input-mode button.mode-active{background:var(--accent);color:#fff;border-color:var(--accent)}#sync-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-muted);vertical-align:middle}#sync-indicator.sync-internal{background:#3498db}#sync-indicator.sync-external{background:#2ecc71}#sync-indicator.sync-waiting{background:#f1c40f;animation:pulse 1.2s ease-in-out infinite}#sync-indicator.sync-fallback{background:#e67e22}#grid-container{display:flex;flex-direction:column;gap:4px;background:var(--bg-secondary);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.75rem}.grid-row{display:flex;align-items:center;gap:3px}.track-label{width:80px;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);text-align:right;padding-right:8px;flex-shrink:0;line-height:1.3}.track-channel{display:block;font-size:.55rem;color:var(--text-muted)}.grid-cell{width:38px;height:28px;border-radius:3px;background:#ffffff0d;border:1px solid var(--border-subtle);transition:all .1s ease}.grid-cell.active{background:var(--accent);border-color:var(--accent);opacity:.85}.grid-cell.playhead{border-color:var(--accent);box-shadow:0 0 6px var(--accent)}.grid-cell.active.playhead{background:var(--accent);border-color:var(--accent)}.grid-row:nth-child(1) .grid-cell.active{background:#d64100}.grid-row:nth-child(2) .grid-cell.active{background:#c73e00}.grid-row:nth-child(3) .grid-cell.active{background:#b83800}.grid-row:nth-child(4) .grid-cell.active{background:#a93300}#panels{display:flex;gap:1rem;margin-top:1.5rem;margin-bottom:1.5rem}.panel{flex:1;background:var(--bg-secondary);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:1rem 1.25rem}.panel h3{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:.5rem}.panel p{font-size:.9rem;color:var(--text-primary);line-height:1.5}#pad-section{margin-bottom:1.5rem;background:var(--bg-secondary);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.75rem 1rem}#pad-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.channel-badge{font-size:.6rem;font-weight:500;background:#ffffff14;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:.15rem .5rem;color:var(--text-secondary)}.pad-row{display:flex;gap:4px;margin-bottom:4px}.pad{width:52px;height:44px;border-radius:var(--radius-sm);background:#ffffff1a;border:1px solid var(--border-subtle);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.65rem;font-weight:500;color:var(--text-primary);-webkit-user-select:none;user-select:none;touch-action:none;transition:all .1s ease}.pad:hover{background:#ffffff26;border-color:var(--border-active)}.pad-black{background:#0000004d;border-color:#ffffff0d;color:var(--text-secondary)}.pad-active{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}.pad-key{font-size:.55rem;font-weight:400;color:var(--text-secondary);margin-top:2px}.pad-black .pad-key{color:var(--text-muted)}#command-section{margin-bottom:1rem;display:flex;gap:.75rem}#command-input{flex:1;font-family:var(--font-body);font-size:.9rem;font-weight:400;padding:.6rem 1rem;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#ffffff0d;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--text-primary);transition:all .15s ease}#command-input:hover:not(:disabled){background:#ffffff14;border-color:var(--border-active)}#command-input:disabled{opacity:.4}#command-input::placeholder{color:var(--text-muted)}#btn-send-command{font-family:var(--font-body);font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;padding:.6rem 1.25rem;border:none;border-radius:var(--radius-lg);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;transition:all .15s ease}#btn-send-command:hover:not(:disabled){background:var(--accent-hover)}#btn-send-command:disabled{opacity:.4;cursor:default}#director-status{font-size:.6rem;color:var(--text-secondary);margin-left:.4rem;font-weight:400;text-transform:none}#director-status.thinking{color:var(--accent);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}#btn-voice{font-family:var(--font-body);font-size:.85rem;padding:.5rem .6rem;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#ffffff0d;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s ease}#btn-voice:hover:not(:disabled){background:#ffffff1a;border-color:var(--border-active)}#btn-voice:disabled{opacity:.4;cursor:default}#btn-voice.listening{background:var(--accent);border-color:var(--accent);color:#fff;animation:pulse 1.2s ease-in-out infinite}#voice-transcript{font-size:.8rem;font-style:italic;color:var(--text-secondary);min-height:0;margin-bottom:1rem;padding-left:.25rem}#voice-transcript:empty{display:none}#toast-container{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column-reverse;gap:.5rem;z-index:1000;pointer-events:none}.toast{font-family:var(--font-body);font-size:.85rem;font-weight:400;padding:.75rem 1.25rem;border-radius:var(--radius-lg);background:var(--bg-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-subtle);color:var(--text-primary);white-space:nowrap;animation:toast-in .25s ease-out;pointer-events:auto}.toast-error{border-color:#e94560}.toast-info{border-color:var(--border-active)}.toast-exit{animation:toast-out .2s ease-in forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}@media(max-width:980px){#app-shell{flex-direction:column}#director-log{position:relative;top:0;height:auto;width:100%}}