@property --sc-bg{syntax:"<color>";inherits:true;initial-value:#1b1a18}@property --sc-bg-1{syntax:"<color>";inherits:true;initial-value:#12110f}@property --sc-bg-2{syntax:"<color>";inherits:true;initial-value:#24221f}@property --sc-bg-3{syntax:"<color>";inherits:true;initial-value:#2e2b27}@property --sc-line{syntax:"<color>";inherits:true;initial-value:#2e2b27}@property --sc-line-1{syntax:"<color>";inherits:true;initial-value:#3a3631}@property --sc-fg{syntax:"<color>";inherits:true;initial-value:#f2efe9}@property --sc-fg-1{syntax:"<color>";inherits:true;initial-value:#d6d1c8}@property --sc-fg-2{syntax:"<color>";inherits:true;initial-value:#aaa399}@property --sc-accent{syntax:"<color>";inherits:true;initial-value:#d97757}@property --sc-accent-text{syntax:"<color>";inherits:true;initial-value:#e8916f}@property --sc-accent-fg{syntax:"<color>";inherits:true;initial-value:#1b1a18}.showcase{--sc-split:50%;background:var(--sc-bg-1);color:var(--sc-fg);outline:none;padding:clamp(72px,12vh,140px) clamp(16px,5vw,64px);transition:--sc-bg .4s,--sc-bg-1 .4s,--sc-bg-2 .4s,--sc-bg-3 .4s,--sc-line .4s,--sc-line-1 .4s,--sc-fg .4s,--sc-fg-1 .4s,--sc-fg-2 .4s,--sc-accent .4s,--sc-accent-text .4s,--sc-accent-fg .4s;position:relative}.showcase:focus-visible{outline:2px solid var(--sc-accent);outline-offset:-2px}.sc-head{text-align:center;max-width:720px;margin:0 auto 32px}.sc-head h2{font-size:var(--fs-xl);margin:0 0 12px;line-height:1.15}.sc-head p{color:var(--sc-fg-1);margin:0}.sc-window{border:1px solid var(--sc-line-1);background:var(--sc-bg);border-radius:12px;max-width:1040px;margin:0 auto;overflow:hidden;box-shadow:0 30px 80px -30px #0009}.sc-titlebar{background:var(--sc-bg-2);border-bottom:1px solid var(--sc-line);height:36px;font-size:var(--fs-sm);color:var(--sc-fg-1);align-items:center;gap:12px;padding:0 12px;display:flex}.sc-dots{gap:6px;display:inline-flex}.sc-dots i{background:var(--sc-line-1);border-radius:50%;width:10px;height:10px}.sc-title{text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.sc-compare,.sc-pause{font:inherit;font-size:var(--fs-meta);border:1px solid var(--sc-line-1);color:var(--sc-fg-1);cursor:pointer;background:0 0;border-radius:999px;padding:3px 10px}.sc-compare[aria-pressed=true],.sc-pause[aria-pressed=true]{background:var(--sc-accent);color:var(--sc-accent-fg);border-color:#0000}.sc-stage{aspect-ratio:16/10;background:var(--sc-bg);cursor:grab;touch-action:pan-y;user-select:none;position:relative;overflow:hidden}.sc-stage:active{cursor:grabbing}.sc-poster,.sc-video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.sc-stage.comparing{cursor:ew-resize}.sc-stage.comparing .sc-video:not(.sc-back){clip-path:inset(0 0 0 var(--sc-split))}.sc-split{z-index:2;top:0;bottom:0;left:var(--sc-split);background:var(--sc-accent);pointer-events:none;width:2px;margin-left:-1px;display:none;position:absolute}.sc-stage.comparing .sc-split{display:block}.sc-play{z-index:3;background:var(--sc-accent);color:var(--sc-accent-fg);font:inherit;cursor:pointer;border:0;border-radius:999px;padding:12px 22px;font-weight:600;display:none;position:absolute;top:50%;left:50%;translate:-50% -50%}.sc-paused .sc-play{display:inline-flex}.sc-stage[data-missing]:after{content:attr(data-unavailable);color:var(--sc-fg-2);font-size:var(--fs-sm);place-items:center;display:grid;position:absolute;inset:0}.sc-timeline{cursor:pointer;touch-action:none;max-width:1040px;height:44px;margin:0 auto;position:relative}.sc-timeline:before{content:"";background:var(--sc-line-1);height:2px;position:absolute;top:13px;left:0;right:0}.sc-progress{background:var(--sc-accent);transform-origin:0;height:2px;transform:scaleX(var(--sc-p,0));position:absolute;top:13px;left:0;right:0}.sc-markers{position:absolute;inset:0}.sc-marker{color:var(--sc-fg-2);font:inherit;font-size:var(--fs-meta);white-space:nowrap;cursor:pointer;background:0 0;border:0;padding:2px 0;position:absolute;top:20px}.sc-marker:before{content:"";background:var(--sc-accent-text);width:2px;height:9px;position:absolute;top:-9px;left:0}.sc-marker:hover{color:var(--sc-fg)}.sc-note{text-align:center;max-width:1040px;font-size:var(--fs-sm);color:var(--sc-fg-2);margin:4px auto 0}.sc-picks{flex-wrap:wrap;justify-content:center;gap:10px;max-width:1040px;margin:32px auto 0;display:flex}.sc-pick{border:1px solid var(--line-1);background:var(--bg-2);color:var(--fg);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;border-radius:10px;grid-template-columns:auto auto;align-items:center;gap:2px 10px;padding:8px 12px;transition:transform .16s,border-color .16s;display:grid}.sc-pick:hover{transform:translateY(-2px)}.sc-pick[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.sc-glyph{min-width:14ch;font-family:var(--mono);white-space:pre;color:var(--fg-2);grid-row:span 2;font-size:9px;line-height:1.15}.sc-name{font-weight:600}.sc-mode{font-size:var(--fs-meta);color:var(--fg-2)}@media (width<=720px){.sc-picks{scroll-snap-type:x mandatory;flex-wrap:nowrap;justify-content:flex-start;padding-bottom:8px;overflow-x:auto}.sc-pick{scroll-snap-align:start;flex:none}.sc-stage{cursor:default}.sc-compare{display:none}}@media (prefers-reduced-motion:reduce){.showcase,.sc-pick{transition:none}}