*{box-sizing:border-box}body{margin:0;height:100vh;display:flex;flex-direction:column;background:#111318;color:#e6e8ee;font:14px system-ui,sans-serif}
header{padding:10px 16px;border-bottom:1px solid #262a33;display:flex;gap:12px;align-items:baseline}.muted{color:#8b91a0;font-size:12px}
.lib{overflow:auto;padding:8px;flex:1}.lib.drop{outline:2px dashed #6c8cff}
.item{background:#1a1d25;border-radius:6px;padding:8px;margin-bottom:6px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{padding:8px;display:flex;gap:8px;align-items:center}
button{background:#272c38;color:#e6e8ee;border:1px solid #343a49;border-radius:6px;padding:6px 12px;cursor:pointer}button:hover{background:#323949}
#preview{flex:1;display:flex;flex-direction:column;min-width:0}#stage{flex:1;background:#000;position:relative;min-height:0;margin:8px;border-radius:8px;overflow:hidden}
#stage>*{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#img,#audioMark{display:none}#audioMark{place-items:center;font-size:40px;color:#555;display:none}
footer{border-top:1px solid #262a33;height:230px;flex:none}#tl{position:relative;overflow-x:auto;height:150px;margin:0 8px}
#ruler{height:22px;background:#1a1d25;position:relative;cursor:pointer}#track{position:relative;height:90px;margin-top:6px}
.clip{position:absolute;top:0;height:84px;background:#3b5bdb;border:2px solid #5c7cfa;border-radius:6px;overflow:hidden;cursor:grab;padding:4px 10px;font-size:12px;user-select:none}
.clip.audio{background:#2b8a3e;border-color:#51cf66}.clip.image{background:#9c36b5;border-color:#cc5de8}.clip.sel{border-color:#fff}
.clip .h{position:absolute;top:0;bottom:0;width:8px;background:#fff6;cursor:ew-resize}.clip .l{left:0}.clip .r{right:0}
#head{position:absolute;top:0;bottom:0;width:2px;background:#ff6b6b;pointer-events:none}

#pages{flex:1;min-height:0;position:relative}.page{display:none;position:absolute;inset:0;flex-direction:column}.page.active{display:flex}
#editMain{flex:1;display:flex;min-height:0}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;align-content:start}.lib .item{margin:0}.lib p{grid-column:1/-1}
#tabs{display:flex;justify-content:center;gap:4px;background:#0b0d11;border-top:1px solid #262a33;padding:4px}
#tabs button{flex:0 1 160px;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;padding:10px;color:#8b91a0}
#tabs button.active{color:#fff;border-bottom-color:#6c8cff;background:#1a1d25}
.bar.wrap{flex-wrap:wrap}.bar input:not([type=checkbox]),.shead input.slabel,.shead input.stime{background:#0b0d11;color:#e6e8ee;border:1px solid #343a49;border-radius:6px;padding:6px}
.bar input[type=color],.shead input[type=color]{padding:0;width:32px;height:30px;background:none;border:1px solid #343a49;border-radius:6px}
#stools{display:flex;gap:2px}.chk{display:flex;align-items:center;gap:4px;font-size:12px;color:#8b91a0}
#sdoc{flex:1;overflow:auto;padding:4px 12px 16px;display:flex;flex-direction:column;gap:10px}
.sec{background:#161a22;border:1px solid #262a33;border-left:6px solid var(--c);border-radius:8px;flex:none}
.sec.note{box-shadow:inset 0 0 0 1px var(--c);background:color-mix(in srgb,var(--c) 8%,#161a22)}
.shead{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;background:color-mix(in srgb,var(--c) 18%,#161a22);border-radius:0 8px 0 0}
.shead .slabel{width:120px;font-weight:600}.shead .stime{width:80px}.grow{flex:1}.clipname{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.mini{padding:3px 8px;font-size:12px}button.sw{width:16px;height:16px;padding:0;border-radius:50%;border:1px solid #0006}
.sbody{padding:10px 12px;min-height:44px;outline:none;line-height:1.55;white-space:pre-wrap}.sbody:focus{background:#1a1f29}
.panel{max-width:560px;margin:20px auto;padding:0 16px;display:flex;flex-direction:column;gap:12px;overflow:auto}.panel h2{margin:0}
.panel label{display:flex;justify-content:space-between;align-items:center;gap:12px}
select{background:#272c38;color:#e6e8ee;border:1px solid #343a49;border-radius:6px;padding:6px;min-width:220px}
.badge{margin:0;padding:6px 10px;border-radius:6px;background:#1a2b1f;color:#8ce99a;font-size:12px}
#expCanvas{width:100%;background:#000;border-radius:6px;aspect-ratio:16/9}#expLink{color:#6c8cff}button:disabled{opacity:.5;cursor:default}

.item{cursor:pointer;border:1px solid transparent;user-select:none}.item.sel{border-color:#6c8cff;background:#222a40}.item .cb{flex:none;width:16px;height:16px}.item span{flex:1}
.selbar{background:#1a2036;border-bottom:1px solid #343a49}
.clip.mc{background:#0b7285;border-color:#22b8cf}.clip.mc.a1{background:#a61e4d;border-color:#f06595}.clip.mc.a2{background:#5f3dc4;border-color:#9775fa}.clip.mc.a3{background:#e67700;border-color:#fcc419}.clip.mc.a4{background:#2b8a3e;border-color:#69db7c}.clip.mc.a5{background:#364fc7;border-color:#748ffc}.clip.mc.a6{background:#862e9c;border-color:#e599f7}.clip.mc.a7{background:#495057;border-color:#ced4da}.clip.mc.a8{background:#c92a2a;border-color:#ff8787}.clip.sel{border-color:#fff}
#angleBar button.ang{min-width:36px}#angleBar button.on{background:#6c8cff;border-color:#fff;color:#fff}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:10}.dlg{background:#161a22;border:1px solid #343a49;border-radius:10px;padding:16px;width:min(620px,94vw);max-height:90vh;overflow:auto}.dlg h3{margin:0 0 8px}
.angrow{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #262a33}.angrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.angrow .off{width:80px;background:#0b0d11;color:#e6e8ee;border:1px solid #343a49;border-radius:6px;padding:4px}

.autochk{font-size:14px;color:#e6e9f0;background:#1f2740;border:1px solid #6c8cff;border-radius:8px;padding:8px 10px;margin:4px 0}
.cf{font-size:11px;color:#7fd18b;min-width:150px}.cf.warn{color:#ffb454}.warnbox{background:#3a2a10;border:1px solid #ffb454;color:#ffd9a0;border-radius:6px;padding:8px;margin:6px 0;font-size:12px}
.dlg progress{width:100%;margin:6px 0}