.video-comparisons{scroll-margin-top:100px}.comparison-controls{display:flex;flex-wrap:wrap;gap:20px;margin:28px 0 20px}.comparison-controls label{display:grid;gap:8px;font-size:1rem;min-width:0}.comparison-controls select,.comparison-actions button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:10px 14px;max-width:100%}.comparison-controls select{min-width:230px}.comparison-figure{margin:0}.comparison-view{position:relative;aspect-ratio:16/9;background:#070a0f;overflow:hidden;border:1px solid var(--line);border-radius:10px;isolation:isolate}.comparison-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none}.comparison-view #comparison-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.comparison-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}.comparison-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:2px solid white;border-radius:50%;background:#131d2b;color:white;font-size:24px}.comparison-view input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.comparison-view:focus-within{outline:3px solid var(--accent);outline-offset:4px}.comparison-figure figcaption{display:flex;justify-content:space-between;gap:20px;font-size:.95rem;color:var(--text);padding:12px 0}.comparison-figure figcaption span:last-child{text-align:right}.comparison-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0 20px;font-size:.9rem}.comparison-actions button{cursor:pointer}.comparison-actions a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;padding:10px 4px}.comparison-actions button:hover{border-color:var(--accent)}.comparison-actions :focus-visible,.comparison-controls select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#comparison-loading{position:absolute;inset:0;display:grid;place-items:center;background:#0d1117e8;color:var(--text);padding:20px;text-align:center;pointer-events:none}#comparison-loading[hidden]{display:none}.comparison-view.is-loading img,.comparison-view.is-loading .comparison-divider{visibility:hidden}@media(max-width:600px){.comparison-controls{display:grid;grid-template-columns:1fr}.comparison-controls select{width:100%;min-width:0}.comparison-figure figcaption{font-size:.875rem;gap:12px}.comparison-actions{gap:8px}.comparison-actions button{padding:10px}.comparison-divider span{width:34px;height:34px;font-size:20px}}
