:root{--bg: #17262b;--panel: #1e3238;--line: #2f4a52;--tx: #e6efe9;--mu: #86a0a0;--ac: #ffd27a;--ph: #ff5d8f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.4 system-ui,sans-serif}button,input{font:inherit;color:inherit}.app{height:100vh;display:grid;grid-template-rows:auto 1fr auto}.catch{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1}.drop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;font-size:24px;background:#17262bee;border:3px dashed var(--ac)}.sp{flex:1}.muted{color:var(--mu)}header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}h1{margin:0 12px 0 0;font:700 22px/1 Georgia,Times New Roman,serif;letter-spacing:.02em}.btn{padding:7px 13px;background:transparent;border:1px solid var(--line);border-radius:6px;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--mu)}.btn:disabled{opacity:.4;cursor:default}.btn.go{background:var(--tx);color:var(--bg);border-color:var(--tx);font-weight:600;min-width:100px}.btn.pri{background:var(--ac);color:#1b2a2e;border-color:var(--ac);font-weight:600}.time{font-size:22px;font-variant-numeric:tabular-nums;min-width:90px}.m{display:flex;align-items:center;gap:8px;color:var(--mu)}.m output{min-width:50px;color:var(--tx);font-variant-numeric:tabular-nums}input[type=range]{accent-color:var(--ac)}button:focus-visible,input:focus-visible,.btn:focus-within{outline:2px solid var(--ac);outline-offset:2px}.tl{overflow:auto;position:relative}.inner{position:relative;min-height:100%}.row{display:flex;height:84px;border-bottom:1px solid var(--line)}.row.on{background:#ffffff08}.row.ruler{height:28px;position:sticky;top:0;z-index:4;background:var(--bg)}.head{position:sticky;left:0;z-index:3;width:190px;flex:none;display:flex;align-items:center;gap:5px;padding:0 8px;background:var(--panel);border-right:1px solid var(--line);cursor:pointer}.dot{width:10px;height:10px;border-radius:50%;flex:none}.nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.head button{width:24px;height:24px;padding:0;background:transparent;border:1px solid var(--line);border-radius:4px;cursor:pointer;font-size:11px}.head button.a{background:var(--ac);color:#1b2a2e;border-color:var(--ac)}.lane{position:relative;flex:none;width:calc(100% - 190px)}.ruler .lane{cursor:text}.ruler i{position:absolute;top:6px;padding-left:4px;border-left:1px solid var(--line);font-style:normal;font-size:11px;color:var(--mu)}.clip{position:absolute;top:10px;height:64px;border:1px solid;border-radius:4px;background:#00000030;cursor:grab;overflow:hidden;touch-action:none}.clip canvas{display:block;pointer-events:none}.h{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;background:#ffffff30}.h.l{left:0}.h.r{right:0}.ph{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ph);z-index:2;pointer-events:none}.empty{display:grid;place-items:center;text-align:center;color:var(--mu);line-height:1.8}.empty b{color:var(--tx);font-size:18px}.insp{padding:10px 16px 14px;background:var(--panel);border-top:1px solid var(--line)}.bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 24px}.p{display:grid;grid-template-columns:82px 1fr 64px;align-items:center;gap:8px}.p span{color:var(--mu)}.p output{text-align:right;font-variant-numeric:tabular-nums}.hint{margin:6px 0 0;font-size:12px}.chk{display:flex;align-items:center;gap:8px;margin-top:10px}.btn.rec.on{background:var(--ph);border-color:var(--ph);color:#fff}select{padding:7px 8px;background:var(--bg);color:var(--tx);border:1px solid var(--line);border-radius:6px;font:inherit}
