html,body{margin:0;padding:0;height:100%;background:#0b0e14;color:#e7e7e7;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#hud{position:absolute;top:12px;left:12px;z-index:10;display:flex;flex-direction:column;gap:10px;max-width:560px;pointer-events:auto}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pill{background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px}.btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:600}.btn:hover{background:#ffffff29}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:#50a0ff40;border-color:#50a0ff80}.btn.danger{background:#ff505033;border-color:#ff505073}.toast{position:absolute;bottom:18px;left:50%;transform:translate(-50%);background:#000000a6;border:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:10px;z-index:12}.toast.hidden{display:none}.small{opacity:.75;font-size:12px}.director{max-width:1400px;margin:24px auto;padding:0 16px 40px}.director textarea,.director input,.director select{width:100%;background:#ffffff0f;border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:10px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace}.director h1{margin-bottom:14px}.director h2{margin-top:18px;margin-bottom:8px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}@media (max-width: 1200px){.grid3{grid-template-columns:1fr}}@media (max-width: 980px){.grid2{grid-template-columns:1fr}}.events{background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;max-height:380px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:12px;white-space:pre-wrap}.rgbPanel{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}#qualisysRgb{width:100%;max-height:540px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#000}.webcamPanel{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}.webcamPanel input[type=number]{width:88px}.webcamPreview{position:relative;width:100%;max-height:420px;aspect-ratio:16 / 9;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#000;overflow:hidden}.webcamPreview video,.webcamPreview canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;transform-origin:center center}#webcamPreview{object-fit:contain;z-index:0}#webcamOverlay{pointer-events:none;z-index:1}.spectatorPanel{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}#spectatorView{width:100%;max-height:520px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#000}.timelinePanel{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;margin-top:10px}.timelinePanel input[type=range]{flex:1;min-width:200px;padding:0;width:auto}.timelinePanel input[type=number]{width:90px}.editorPanel{background:#ffffff08;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}.editorPanel input[type=number]{width:90px}.editorPanel input[type=range]{flex:1;min-width:200px;padding:0;width:auto}.editorPanel select{width:auto;min-width:160px}.editorPanel h3{margin:0;font-size:14px}.director select{color-scheme:dark}.director select option{background:#111821;color:#e7e7e7}.cueListPanel{background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}.cueList{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}.cueListItem{display:flex;align-items:center;gap:8px;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px}.cueListItem.active{background:#50a0ff2e;border-color:#50a0ff99}.cueListSelect{flex:1;background:transparent;border:none;color:#fff;cursor:pointer;text-align:left;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;padding:4px 6px}.cueListSelect:hover{background:#ffffff0f;border-radius:8px}.btn.sm{padding:6px 8px;font-size:12px}.cueContextMenu{position:fixed;z-index:40;background:#0b0e14f5;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px;min-width:160px;box-shadow:0 12px 30px #00000073}.cueContextMenu.hidden{display:none}.cueContextTitle{font-size:12px;opacity:.7;margin-bottom:6px}.cueContextItems{display:flex;flex-direction:column;gap:6px}.cueContextItem{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:6px 8px;text-align:left;cursor:pointer;font-size:12px}.cueContextItem.active{background:#50a0ff40;border-color:#50a0ff73}.composer,.cuePlanner{background:#ffffff08;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:12px}.cuePlanner-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.cuePlanner-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.cuePlanner-control{display:flex;flex-direction:column;gap:6px;background:#ffffff0a;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px}.cuePlanner-control label{font-size:12px;opacity:.75}.cuePlanner-control input,.cuePlanner-control select{width:100%;background:#ffffff12;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px;color:#fff}.cuePlanner-scroll{overflow-x:auto}.cuePlanner-grid{display:flex;flex-direction:column;gap:6px}.cuePlanner-timeline,.cuePlanner-row{display:grid;grid-template-columns:120px repeat(var(--cueplanner-steps, 32),minmax(26px,1fr));gap:4px;align-items:center}.cuePlanner-timeline,.cuePlanner-grid{min-width:max-content}.cuePlanner-timeline{position:sticky;top:0;background:linear-gradient(90deg,#ffffff0a,#ffffff05);padding:2px 0;border-bottom:1px solid rgba(255,255,255,.08);z-index:1}.cuePlanner-step{font-size:12px;text-align:center;padding:6px 2px;border-radius:6px;border:1px dashed rgba(255,255,255,.08);color:#ffffffb3}.cuePlanner-step.downbeat{background:#ffffff0d;font-weight:700}.cuePlanner-row-label{text-align:right;opacity:.8;font-weight:600;padding-right:6px}.cuePlanner-row:hover .cuePlanner-cell{border-color:#ffffff2e}.cuePlanner-grid .cuePlanner-row:nth-child(odd){background:#ffffff04;border-radius:10px}.cuePlanner-cell{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:6px;min-height:30px;cursor:pointer;display:grid;place-items:center;font-weight:700;color:#fff;transition:transform .08s ease,box-shadow .1s ease}.cuePlanner-cell:hover{transform:translateY(-1px);box-shadow:0 3px 10px #00000040}.cuePlanner-cell.active{background:#2ec87873;border-color:#2ec878d9;box-shadow:0 0 0 1px #2ec87899}.composer-header,.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.composer-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.composer-control{display:flex;flex-direction:column;gap:6px;background:#ffffff0a;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px}.composer-control label{font-size:12px;opacity:.75}.composer-control input,.composer-control select{width:100%;background:#ffffff12;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px;color:#fff}.composer-scroll{overflow-x:auto}.composer-grid{display:flex;flex-direction:column;gap:6px}.composer-timeline,.composer-row{display:grid;grid-template-columns:60px repeat(var(--composer-steps, 32),minmax(30px,1fr));gap:4px;align-items:center}.composer-timeline,.composer-grid{min-width:max-content}.composer-timeline{position:sticky;top:0;background:linear-gradient(90deg,#ffffff0a,#ffffff05);padding:2px 0;border-bottom:1px solid rgba(255,255,255,.08);z-index:1}.composer-step{font-size:12px;text-align:center;padding:6px 4px;border-radius:6px;border:1px dashed rgba(255,255,255,.08);color:#ffffffb3}.composer-step.downbeat{background:#ffffff0d;font-weight:700}.composer-row-label{text-align:right;opacity:.8;font-weight:600;padding-right:6px}.composer-row-label.play{text-align:right;justify-self:end;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 10px;cursor:pointer;background:#ffffff0d;color:#fff;font-weight:700;transition:transform .08s ease,box-shadow .1s ease,background .1s ease}.composer-row-label.play:hover{background:#5ac8ff29;box-shadow:0 3px 10px #00000040;transform:translateY(-1px)}.composer-row-label.play:active{transform:translateY(0)}.composer-row-label.muted{opacity:.6;font-weight:500}.composer-row:hover .composer-cell{border-color:#ffffff2e}.composer-grid .composer-row:nth-child(odd){background:#ffffff04;border-radius:10px}.composer-cell{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:6px 4px;cursor:pointer;font-weight:600;transition:transform .08s ease,box-shadow .1s ease}.composer-cell:hover{transform:translateY(-1px);box-shadow:0 3px 10px #00000040}.composer-cell.active{background:#5ac8ff66;border-color:#5ac8ffcc;box-shadow:0 0 0 1px #5ac8ff80}.composer-cell.playhead,.composer-step.playhead{box-shadow:0 0 0 2px #ffd166cc;border-color:#ffd166e6;background:#ffd1661f}.composer-buttons{display:flex;gap:8px;flex-wrap:wrap}