.compare-toolbar{display:flex;justify-content:space-between;gap:28px;margin-bottom:24px;flex-wrap:wrap}
.compare-samples,.compare-modes{display:flex;gap:8px;flex-wrap:wrap}
.compare-toolbar button{padding:11px 15px;border:1px solid var(--line);background:transparent;border-radius:4px;color:var(--muted);font-size:.875rem;min-height:44px}
.compare-toolbar button[aria-pressed=true]{background:#e5bc7d;color:#17130e;border-color:#e5bc7d}
.compare-toolbar button:hover{border-color:var(--muted)}
.compare-toolbar button:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line)}
.compare-player{background:#090b0d;border:1px solid var(--line)}
.compare-stage{--split:50%;position:relative;width:100%;aspect-ratio:16/9;background:#090b0d;overflow:hidden}
.compare-stage video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#compare-after{clip-path:inset(0 0 0 var(--split))}
.compare-stage[data-view=single] #compare-after,.compare-stage[data-view=single] .compare-divider,.compare-stage[data-view=single] .compare-split{display:none}
.compare-labels{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;pointer-events:none;gap:20px}
.compare-labels span{font-size:.8125rem;padding:5px 12px;background:#090b0de8;color:#f1f0eb;border-radius:3px}
.compare-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#f1f0eb;pointer-events:none}
.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#f1f0eb;color:#101214;font-size:20px}
.compare-split{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare-stage:focus-within{outline:2px solid var(--accent);outline-offset:-3px}
.compare-controls{display:flex;align-items:center;gap:14px;padding:16px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.compare-controls button{min-height:44px;min-width:60px;padding:8px 12px;border:1px solid var(--line);background:#171a1d;border-radius:4px;font-size:.8125rem}
#compare-play{background:#e5bc7d;color:#17130e;border-color:#e5bc7d;min-width:100px}
#compare-time{flex:1;min-width:140px;accent-color:var(--accent);height:28px}
#compare-clock{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
#compare-status,#compare-hdr-note{font-size:.8125rem;color:var(--muted);padding:0 20px 14px;line-height:1.8}
#compare-hdr-note{color:#e5bc7d}
.compare-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;font-size:.8125rem;color:var(--muted)}
.compare-footer a{min-height:44px;display:inline-flex;align-items:center;color:var(--text)}
.compare-player:fullscreen{width:100%;height:100%;border:0;display:flex;flex-direction:column;justify-content:center;overflow:auto}
.compare-player:fullscreen .compare-stage{width:100%;height:min(75vh,56.25vw);flex:none}
@media(max-width:760px){.compare-controls{gap:8px;padding:12px}.compare-footer{align-items:flex-start;flex-direction:column;gap:4px}.compare-labels{top:10px;left:10px;right:10px}.compare-toolbar button{padding:9px 11px}.compare-controls #compare-time{flex-basis:100%;order:2}}