: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}.bar .about{margin-right:8px;color:var(--muted);font-size:13px}.bar .about:hover{color:var(--text)}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}#lock.on{background:var(--accent);border-color:var(--accent);color:#000}.bar .master{flex-direction:row;align-items:center;gap:6px;font-size:13px}.master input{width:110px}.master output{width:3.2em;color:var(--text);font-variant-numeric:tabular-nums}.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:240px 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{position:relative;overflow:hidden}li button .auto{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}.follow-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;animation:follow linear forwards}@keyframes follow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.go-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,660px)}.go-bar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:4px 12px;line-height:1.2}.go-bar strong{font-size:14px;letter-spacing:.03em;white-space:nowrap}.go-bar span{max-width:100%;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#play{border-color:var(--accent);background:var(--accent-bg)}#play:hover{background:#4a3818}#play.running{background:var(--accent);color:#000}.follow-bar.paused{animation-play-state:paused;opacity:.6}.show-only{display:none}body.locked .show-only{display:block}body.locked .edit{display:none!important}body.locked main{grid-template-columns:240px minmax(0,1fr)}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;gap:10px;padding:16px;min-width:0;min-height:0;overflow:hidden}.preview-area{flex:1;min-height:0;width:100%;container-type:size;display:grid;place-items:end center}#preview-wrap{--aspect: 1.7778;position:relative;width:min(100cqw,100cqh * var(--aspect));aspect-ratio:var(--aspect);background:#000;border:1px solid var(--line)}#preview{position:absolute;inset:0;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,body.locked main{grid-template-columns:1fr}.stage{order:-1;overflow:visible}.preview-area{flex:none;container-type:normal}.scenes,.lights{border:0;border-top:1px solid var(--line)}#preview-wrap{width:100%}}[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 .items{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}.thumb{flex:none;width:48px;height:27px;border-radius:3px;background:#000;box-shadow:0 0 0 1px var(--line)}.scene-add{width:100%;display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;text-align:left}.scene-add .plus{margin-left:auto;color:var(--muted);font-size:16px;line-height:1}.set-add{width:100%;display:flex;align-items:center;gap:10px;padding:8px;text-align:left;border:1px dashed var(--accent);background:var(--accent-bg)}.set-add:hover{background:#4a3818}.set-add strong{display:block;font-weight:600}.set-add small{color:var(--muted)}.stack{position:relative;flex:none;width:60px;height:37px}.stack .thumb{position:absolute}.stack .thumb:nth-child(2){left:6px;top:5px}.stack .thumb:nth-child(3){left:12px;top:10px}