*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}body{padding:clamp(36px,9vh,96px) 0 40px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #fff;outline-offset:4px}[hidden]{display:none!important}#player{--card-width:min(640px,72vw);width:min(1024px,100%);margin:auto}h1{font-size:clamp(21px,3vw,28px);font-weight:600;line-height:1.25;text-align:center;margin:0 16px 30px;letter-spacing:-.5px}#stage{width:100%;height:calc(var(--card-width)*480/832);position:relative;overflow:hidden;isolation:isolate;touch-action:pan-y}.slide{position:absolute;top:0;left:50%;width:var(--card-width);height:100%;transform:translateX(calc(-50% + var(--slot,2)*100%));transition:transform 540ms cubic-bezier(.22,.68,.2,1);background:#080808;will-change:transform}.slide::after{position:absolute;inset:0;content:"";background:#000;opacity:.5;transition:opacity 540ms ease;pointer-events:none}.slide.active::after{opacity:0}.slide video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.slide:not(.active){cursor:pointer}footer{width:var(--card-width);margin:14px auto 0}#segments{display:flex;gap:8px}.segment{height:20px;flex:1;border:0;background:transparent;padding:8px 0;position:relative}.segment::before,.segment .fill{position:absolute;left:0;right:0;top:8px;height:2px;border-radius:2px;background:#333;content:""}.segment .fill{background:#ddd;transform:scaleX(0);transform-origin:left}.segment:hover::before{background:#666}.toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:3px}.group{display:flex;align-items:center;gap:4px}.toolbar button{border:0;background:transparent;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.toolbar button:hover{background:#191919}.toolbar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#counter,#time{font-size:12px;font-variant-numeric:tabular-nums;color:#888;white-space:nowrap}#counter{letter-spacing:2px;color:#ddd}#counter span{color:#666}#time{text-align:right}#start{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ffffff55;border-radius:999px;background:#13151bdd;padding:12px 24px;font-size:16px;z-index:2}#notice{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:14px;text-align:center;padding:8px 12px;background:#14161ddd;max-width:68%;width:max-content;pointer-events:none;z-index:2}@media(max-width:480px){#player{--card-width:76vw}h1{margin-bottom:24px}.toolbar button{width:34px;height:40px}.group{gap:0}#counter{letter-spacing:1px}#time{font-size:12px}}@media(prefers-reduced-motion:reduce){.slide,.slide::after{transition:none}}