.clip-bar{margin:10px -8px 2px -12px;cursor:default;user-select:none;-webkit-user-select:none}
.clip-main{display:flex;align-items:center;gap:8px}
.clip-track{position:relative;flex:1;min-width:0;height:52px;margin:0 4px;border-radius:10px;background:var(--bg);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer}
.clip-wave{position:absolute;inset:4px 0;width:100%;height:calc(100% - 8px)}
.clip-wave path,.clip-wave line{stroke:var(--ink-3);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-width:1.5px}
.clip-dim{position:absolute;top:0;bottom:0;background:var(--surface);opacity:.72;pointer-events:none}
.clip-sel{position:absolute;top:0;bottom:0;border-top:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);pointer-events:none}
.clip-bar.is-trimmed .clip-sel{border-color:var(--live);background:color-mix(in srgb,var(--live) 10%,transparent)}
.clip-head{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--live);opacity:0;pointer-events:none}
.clip-handle{position:absolute;top:-6px;bottom:-6px;width:32px;margin-left:-16px;touch-action:none;cursor:ew-resize;z-index:2}
.clip-handle.is-end{z-index:3}
.clip-handle i{position:absolute;left:50%;top:6px;bottom:6px;width:10px;margin-left:-5px;border-radius:5px;background:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.clip-handle i::after{content:"";position:absolute;left:4px;top:50%;width:2px;height:14px;margin-top:-7px;border-radius:1px;background:var(--bg);opacity:.7}
.clip-bar.is-trimmed .clip-handle i{background:var(--live)}
.clip-handle:focus-visible{outline:none}
.clip-handle:focus-visible i{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--live)}
.clip-handle.is-dragging i{transform:scaleX(1.25)}
.clip-tip{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);padding:2px 6px;border-radius:6px;background:var(--ink);color:var(--bg);font:500 11.5px/1.4 var(--font-mono);white-space:nowrap;pointer-events:none}
.clip-tools{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:6px 0 0;color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
.clip-edge{flex:none;display:inline-flex;align-items:center;gap:2px}
.clip-edge b{min-width:30px;text-align:center;color:var(--ink-2);font:500 12px var(--font-mono)}
.clip-edge button{display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:8px;background:var(--bg);color:var(--ink-2);font-size:16px;line-height:1}
.clip-edge button:hover,.clip-reset:not(:disabled):hover{color:var(--ink)}
.clip-reset{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 9px;border:0;border-radius:8px;background:var(--bg);color:var(--ink-2);font-size:12px;font-weight:600}
.clip-reset:disabled{opacity:.35}
.clip-reset-all{display:inline-flex;align-items:center;gap:6px;color:var(--live)}
@media (max-width:700px){.clip-edge button{width:34px;height:32px}}