:root{
  --bg:#0f1012;--panel:#16171a;--panel2:#1c1d21;--line:#2a2b30;--line2:#34353b;
  --text:#e9e9ec;--muted:#8a8c93;--faint:#5c5e65;--accent:#ff7a6b;--accent2:#ffb4a9;
  --r:8px;color-scheme:dark
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.4 'Pretendard Variable',Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button,select,input{font:inherit;color:inherit}
.mono{font-family:'Barlow Semi Condensed',sans-serif;font-variant-numeric:tabular-nums;font-size:15px}
.muted{color:var(--muted)}
.grow{flex:1}
#top{height:52px;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:8px;margin-right:10px;white-space:nowrap}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.src{display:flex;align-items:center;gap:6px;min-width:0}
.src span{color:var(--muted);font-size:12px}
.src select{max-width:250px}
select,input[type=number],input[type=text]{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;outline:none;min-width:0}
select:focus,input:focus{border-color:var(--line2)}
.status{color:var(--muted);font-size:12px;white-space:nowrap}
main{display:grid;grid-template-columns:288px 1fr 320px;height:calc(100% - 52px)}
aside{background:var(--panel);overflow:auto}
#left{border-right:1px solid var(--line)}
#right{border-left:1px solid var(--line);display:flex;flex-direction:column}
section{padding:14px 16px;border-bottom:1px solid var(--line)}
h3{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;display:flex;align-items:center;gap:8px}
h3 small{font-weight:400;letter-spacing:0;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 10px;cursor:pointer;display:flex;align-items:center;gap:6px}
.chip i{display:inline-block;border:1.5px solid currentColor;border-radius:2px;opacity:.7}
.chip.on{border-color:var(--accent);color:var(--accent)}
#nav{position:relative;width:100%;background:#000;border-radius:6px;overflow:hidden;user-select:none;touch-action:none}
#nav img{display:block;width:100%;opacity:.55}
#navRect{position:absolute;border:1.5px solid var(--accent);box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move}
#navRect i{position:absolute;inset:0;background:linear-gradient(var(--accent),var(--accent)) center/1px 9px no-repeat,linear-gradient(var(--accent),var(--accent)) center/9px 1px no-repeat;opacity:.8}
.field{display:flex;align-items:center;gap:10px;margin-top:10px}
.field>span{color:var(--muted);min-width:64px;font-size:12px}
.field input[type=range]{flex:1;accent-color:var(--accent)}
.field output{min-width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.btnrow{display:flex;gap:6px;margin-top:10px}
button.ghost,button.small{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer}
button.ghost:hover,button.small:hover{border-color:var(--line2)}
.wlist{border-bottom:0;position:relative}
#widgets{list-style:none;margin:0;padding:0}
#widgets li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent}
#widgets li:hover{background:var(--panel2)}
#widgets li.on{background:var(--panel2);border-color:var(--line2)}
#widgets li .eye{width:22px;height:22px;border:0;background:none;cursor:pointer;color:var(--muted);padding:0;font-size:14px}
#widgets li.off .nm{color:var(--faint);text-decoration:line-through}
#widgets li .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#widgets li .sub{color:var(--faint);font-size:11px}
#widgets li .x{opacity:0;border:0;background:none;color:var(--muted);cursor:pointer}
#widgets li:hover .x{opacity:1}
#widgets li .mv{opacity:0;border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px}
#widgets li:hover .mv{opacity:1}
.menu{position:absolute;left:16px;right:16px;top:44px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:6px;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:7px 9px;border-radius:6px;cursor:pointer}
.menu button:hover{background:var(--line)}
.menu small{display:block;color:var(--muted)}
#center{display:flex;flex-direction:column;min-width:0;padding:0;border:0}
#stage{flex:1;position:relative;overflow:hidden;background:repeating-conic-gradient(#121315 0 25%,#0e0f11 0 50%) 0 0/24px 24px}
#view{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;box-shadow:0 0 0 1px var(--line2),0 20px 60px rgba(0,0,0,.6);background:#000}
#bg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
#bg video,#bg img{position:absolute;max-width:none}
#ov{position:absolute;left:0;top:0}
#ov .w{cursor:grab}
#sel{position:absolute;border:1px dashed var(--accent);pointer-events:none;display:none}
#guides i{position:absolute;background:var(--accent);opacity:0;pointer-events:none}
#guides .gx{top:0;bottom:0;width:1px}#guides .gy{left:0;right:0;height:1px}
#empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
#timeline{height:64px;border-top:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:14px;padding:0 16px}
.icon{background:var(--panel2);border:1px solid var(--line);border-radius:6px;min-width:34px;height:30px;cursor:pointer}
.icon.s{min-width:30px;height:26px;font-size:12px;padding:0 6px}
.times{width:122px}
.times .muted{font-size:12px}
#scrub{flex:1;height:30px;position:relative;cursor:pointer;touch-action:none}
#scrub::before{content:'';position:absolute;left:0;right:0;top:14px;height:3px;border-radius:2px;background:var(--line)}
#cover{position:absolute;top:14px;height:3px;background:#4a4c53;border-radius:2px}
#range{position:absolute;top:8px;height:15px;border-left:2px solid var(--accent);border-right:2px solid var(--accent);background:rgba(255,122,107,.08)}
#laps i{position:absolute;top:11px;width:1px;height:9px;background:var(--faint)}
#head{position:absolute;top:4px;width:2px;height:22px;background:var(--text);border-radius:1px;margin-left:-1px}
.sync{display:flex;align-items:center;gap:4px}
.sync input{width:64px;text-align:right}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 8px}
.tabs button{background:none;border:0;padding:12px 12px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-color:var(--accent)}
.tab{padding:6px 0 30px;overflow:auto;flex:1}
.tab .grp{padding:10px 16px;border-bottom:1px solid var(--line)}
.tab .grp:last-child{border:0}
.tab h4{margin:4px 0 8px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.06em}
.tab .field>span{min-width:86px}
.tab select,.tab input[type=text]{flex:1}
.tab input[type=color]{width:34px;height:26px;border:1px solid var(--line);border-radius:6px;background:none;padding:1px}
.tab .hint{color:var(--faint);font-size:12px;margin-top:6px}
.check{display:flex;align-items:center;gap:8px;margin-top:9px;cursor:pointer;color:var(--text)}
.check input{accent-color:var(--accent)}
.anchors{display:grid;grid-template-columns:repeat(3,20px);gap:3px}
.anchors button{width:20px;height:20px;border:1px solid var(--line);background:var(--panel2);border-radius:4px;cursor:pointer;padding:0}
.anchors button.on{background:var(--accent);border-color:var(--accent)}
.mlist{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:4px}
.mlist label{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:4px;cursor:pointer}
.mlist label:hover{background:var(--panel2)}
.mlist .ord{margin-left:auto;color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px}
.mlist .cat{color:var(--faint);font-size:11px;padding:6px 6px 2px;letter-spacing:.05em}
button.primary{width:100%;background:var(--accent);color:#1a0c0a;border:0;border-radius:8px;padding:11px;font-weight:600;cursor:pointer;margin-top:6px}
button.primary:disabled{opacity:.4;cursor:default}
.prog{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.jobtxt{margin-top:8px;color:var(--muted);font-size:12px;white-space:pre-wrap;word-break:break-all}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:1}
.seg button{flex:1;background:none;border:0;padding:5px 4px;cursor:pointer;color:var(--muted);font-size:12px}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--panel2);color:var(--text)}
.empty{color:var(--faint);padding:16px}
.presets{display:flex;gap:6px;margin-top:8px}
#empty[hidden],[hidden]{display:none!important}
#bgCanvas{position:absolute;left:0;top:0;width:100%;height:100%;display:none}
#bgVideo{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}