:root{color-scheme:dark;font:15px/1.5 Arial,Helvetica,sans-serif;--bg:#172326;--panel:#213035;--input:#172327;--text:#edf1e9;--muted:#aabfc6;--border:#3b5057;--accent:#d7e7a8;--canvas:#03070d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}body[data-theme=light]{color-scheme:light;--bg:#e9eee9;--panel:#f1f1e7;--input:#e6eceb;--text:#1c313b;--muted:#4d6470;--border:#bdccca;--accent:#3b5a32}button,input,select{font:inherit}button,.file-button,select,input[type=number]{border:1px solid var(--border);border-radius:6px;background:var(--input);color:var(--text);min-height:40px;padding:8px 12px}button,.file-button,select{cursor:pointer}button:hover,.file-button:hover{filter:brightness(1.14)}button:disabled{opacity:.45;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 28px;border-bottom:1px solid var(--border)}.brand{font:700 30px Georgia,serif;color:var(--text);text-decoration:none}.brand span{font:14px Arial,sans-serif;color:var(--muted);margin-left:10px}.header-actions{display:flex;align-items:center;gap:14px}.header-actions label{display:flex;align-items:center;gap:9px;font-size:13px}main{max-width:1860px;margin:auto;padding:22px 28px}.title-row{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}h1{font-size:25px;margin:0 0 3px;letter-spacing:.015em}h1 span{font-size:19px;font-weight:400;margin-left:12px;color:var(--muted)}p{margin:0;color:var(--muted)}.title-row p,.track-state{font-size:13px}.track-state{color:var(--accent);max-width:400px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.performance{min-width:0}#viewport{position:relative;height:clamp(430px,64vh,850px);background:var(--canvas);border:1px solid var(--border);border-radius:9px;overflow:hidden}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.view-tools{position:absolute;top:12px;right:12px;display:flex;gap:8px}.view-tools button{font-size:12px;min-height:34px;background:#17242bbb;color:#eaf2f5;border-color:#40525d}.view-info{position:absolute;bottom:12px;left:16px;right:16px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#adbdcf;pointer-events:none;text-shadow:0 1px 5px #000}#viewport:fullscreen{height:100vh;width:100vw;border:0;border-radius:0}.transport{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 10px}.transport .primary{background:var(--accent);color:var(--bg);font-weight:700;min-width:90px}#clock{font-variant-numeric:tabular-nums;margin-right:auto}.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}.seek-label{font-size:12px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}#seek{margin:6px 0 0;display:block}#waveform{display:block;width:100%;height:55px}.hint{font-size:12px;line-height:1.6}.audio-panel{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:16px 0 10px;padding:14px 16px;border:1px solid var(--border);border-radius:7px;background:var(--panel)}.audio-panel strong{font-size:14px}.audio-panel p{font-size:12px;margin-top:3px}.file-button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:13px;white-space:nowrap}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:12px 2px}.meters label{font-size:11px;letter-spacing:.02em;color:var(--muted);display:flex;align-items:center;gap:10px}.meters meter{width:100%;height:10px;accent-color:#72bfc9}.panel{border:1px solid var(--border);border-radius:7px;background:var(--panel);padding:16px;margin:0 0 14px}h2,summary{font-size:15px;font-weight:600;margin:0 0 16px}.panel>.check{margin-bottom:16px}.control{display:block;margin:0 0 14px}.control span{font-size:12px;display:flex;justify-content:space-between;gap:12px;color:var(--muted)}.control output{color:var(--text);font-variant-numeric:tabular-nums}.colors,.cue-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.colors label,.cue-row label{display:grid;gap:7px;font-size:12px;color:var(--muted)}input[type=color]{width:100%;height:34px;border:1px solid var(--border);padding:3px;border-radius:4px;background:var(--input)}.cue-row input{width:100%;min-width:0;font-size:13px}.cue-row+.hint{margin-top:13px}.privacy{font-size:11px;padding:0 3px}summary{cursor:pointer;margin-bottom:0}details[open] summary{margin-bottom:12px}details .file-button{margin:12px 0}#error{position:absolute;inset:0;background:#172326e8;color:#fff;padding:45px;display:flex;align-items:center}#error[hidden]{display:none}body.dragging #viewport{outline:3px solid #62e2ed;outline-offset:4px}@media(min-width:1000px){aside{max-height:calc(100vh - 180px);overflow:auto;scrollbar-width:thin;padding-right:3px}}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 270px}header{padding:14px 20px}.header-actions label{font-size:0}.brand span{display:none}main{padding:20px}h1 span{display:block;margin:0;font-size:16px}#viewport{height:580px}}@media(max-width:760px){.workspace{grid-template-columns:1fr}header{padding:14px}.brand{font-size:24px}.header-actions{gap:7px}.header-actions select{max-width:178px;font-size:12px}.header-actions button{font-size:12px;padding:7px}main{padding:16px 12px}.title-row{align-items:flex-start}.track-state{max-width:160px;text-align:right;font-size:11px}h1{font-size:23px}#viewport{height:60vh;min-height:350px}.view-info{font-size:10px}.view-info span:last-child{max-width:45%;text-align:right}.transport .check{font-size:12px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel{margin:0}.panel:first-child{grid-row:span 3}.privacy{grid-column:1/-1}.audio-panel{padding:12px}.audio-panel strong{overflow-wrap:anywhere}.meters{gap:10px}.meters label{display:grid;gap:1px}.transport button{padding:8px 11px}#clock{font-size:13px}}@media(max-width:480px){aside{display:block}.panel{margin-bottom:12px}.header-actions label{display:none}.view-info{flex-direction:column;gap:2px}.view-info span:last-child{max-width:100%;text-align:left}}

.header-actions>a{color:var(--accent);font-size:13px;text-underline-offset:3px}