:root{color-scheme:dark;--bg: #0f1012;--panel: #17191c;--field: #0f1012;--button: #24272c;--button-hover: #2d3137;--line: #2a2d32;--text: #e6e6e6;--muted: #8b9099;--accent: #ffb23f;--accent-bg: #3a2c14;--online: #3ddc84;--danger: #ff5a4f}*{box-sizing:border-box}html,body{margin:0;height:100%}body{display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,sans-serif}.bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line)}.bar h1{margin:0 8px 0 0;font-size:16px;letter-spacing:.02em}.spacer{flex:1}button,.button{font:inherit;color:inherit;cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--button)}button:hover,.button:hover{background:var(--button-hover)}button:disabled{opacity:.4;cursor:default}button.danger{color:var(--danger)}#blackout.on{background:var(--danger);border-color:var(--danger);color:#000}.status{color:var(--muted);font-size:13px}.status:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#555;vertical-align:middle}.status.online{color:var(--text)}.status.online:before{background:var(--online)}main{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr) 240px}.panel{display:flex;flex-direction:column;gap:10px;padding:12px;overflow:auto;background:var(--panel)}.scenes{border-right:1px solid var(--line)}.lights{border-left:1px solid var(--line)}h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}ol,ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}li button{width:100%;display:flex;align-items:center;gap:8px;text-align:left}li button .key{width:1.2em;color:var(--muted);font-variant-numeric:tabular-nums}li button.live{border-color:var(--accent);background:var(--accent-bg)}li button.selected{border-color:var(--text)}.swatch{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #0006}.row{display:flex;flex-wrap:wrap;gap:6px}label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:12px}input[type=text],input[type=number]{font:inherit;color:var(--text);background:var(--field);padding:6px 8px;border:1px solid var(--line);border-radius:6px}input[type=color]{width:100%;height:32px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}input[type=range]{width:100%;accent-color:var(--accent)}fieldset{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0}fieldset:disabled{opacity:.4}.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;min-width:0}#preview-wrap{--aspect: 1.7778;width:min(100%,calc((100vh - 140px) * var(--aspect)));aspect-ratio:var(--aspect);background:#000;border:1px solid var(--line)}#preview{display:block;width:100%;height:100%;touch-action:none}.hint{margin:0;color:var(--muted);font-size:12px;text-align:center}@media(max-width:900px){main{grid-template-columns:1fr}.stage{order:-1}.scenes,.lights{border:0;border-top:1px solid var(--line)}#preview-wrap{width:100%}}select{font:inherit;color:var(--text);background:var(--button);padding:5px 8px;border:1px solid var(--line);border-radius:6px}.muted{color:var(--muted)}[hidden]{display:none!important}.tip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 16px;border-bottom:1px solid var(--line);background:var(--accent-bg);font-size:13px}.tip .close{margin-left:auto;padding:2px 8px}.library{display:flex;flex-direction:column;gap:4px}.library details{border:1px solid var(--line);border-radius:6px}.library summary{padding:6px 10px;cursor:pointer}.library details[open] summary{border-bottom:1px solid var(--line)}.library .assets{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px}.library h3{margin:4px 0 0;font-size:11px;font-weight:400;color:var(--muted)}.library p{margin:0;font-size:12px}