:root{--ink:#edf3ff;--muted:#9aabc4;--line:#2a3a55;--blue:#4f8cff;--bg:#0a1220;--card:#111b2e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,sans-serif}.topbar{padding:18px clamp(16px,4vw,48px);background:#102244;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px}.back{color:#bcd4ff;text-decoration:none;font-size:13px}.topbar h1{margin:3px 0 0;font-size:25px}.topbar h1 span{font-size:16px;font-weight:400;color:#bcd4ff}.notice{font-size:12px;color:#c6d2e8;text-align:right}.layout{max-width:1500px;margin:24px auto;padding:0 18px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr);gap:20px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 18px #20365b0d;padding:17px}.toolbar,.drawbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.toolbar{margin-bottom:14px}button,.upload{border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:650;padding:10px 14px;cursor:pointer;min-height:40px}.secondary{background:#1d2b43;color:#d9e6ff}.full{width:100%;margin-top:12px}button:disabled{opacity:.45;cursor:not-allowed}.upload input{display:none}.stage{background:#101827;border-radius:10px;min-height:430px;height:min(67vh,720px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.stage video{max-width:100%;max-height:100%;display:block;filter:grayscale(1)}.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.empty{position:absolute;color:#dce7fa;display:flex;flex-direction:column;text-align:center;gap:6px;pointer-events:none}.empty span{color:#9aabc4;font-size:13px}.timeline{display:flex;gap:10px;align-items:center;margin:13px 0}.timeline input{flex:1}.time{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);display:flex;gap:8px}.drawbar{border-top:1px solid var(--line);padding-top:13px;color:var(--muted)}.ratio-controls{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}.ratio-controls strong{display:block;font-size:13px;margin-bottom:6px}.ratio-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.ratio-option{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 10px;background:#1d2b43;color:#d9e6ff;border:1px solid var(--line);border-radius:8px;font-size:12px;cursor:pointer}.ratio-option input{margin:0;accent-color:var(--blue);cursor:pointer}.ratio-option::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--roi-color)}.ratio-option.selected{background:#263f6b;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}.ratio-option input:disabled{cursor:not-allowed}.drawbar label{display:flex;gap:6px;align-items:center;margin-left:auto}.drawbar output{width:45px;color:var(--ink)}h2{font-size:17px;margin:0 0 10px}.hint,.small,.muted{color:var(--muted);font-size:13px}.roi-list{display:flex;flex-direction:column;gap:7px}.roi{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px;border-radius:8px}.roi input{width:100%;border:0;font:inherit;background:transparent;color:var(--ink)}.swatch{width:15px;height:15px;border-radius:50%;flex:0 0 auto}.remove{padding:3px 8px;min-height:28px;margin-left:auto}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-bottom:6px}.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px}#chart,#ratioChart{width:100%;height:auto;border:1px solid var(--line);border-radius:7px;background:#0f192c}footer{text-align:center;color:var(--muted);font-size:12px;padding:18px}@media(max-width:900px){.layout{grid-template-columns:1fr}.stage{height:55vh;min-height:300px}.notice{display:none}.drawbar label{margin-left:0}}