.wide-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;isolation:isolate}.wide-player:has(video[hidden]){display:none}.wide-player video{display:block;width:100%;height:100%;object-fit:contain}.wide-controls{position:absolute;inset:0;pointer-events:none;transition:opacity .2s}.wide-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:28px}.wide-controls button{pointer-events:auto;cursor:pointer;color:#fff;background:#080c10a6;border:1px solid #ffffff70;min-width:48px;min-height:48px;font:22px/1 Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;position:relative;padding:8px}.wide-center button{width:64px;height:64px;font-size:38px}.wide-center button[data-action=play]{width:76px;height:76px;font-size:30px}.wide-center small{position:absolute;font-size:12px;bottom:10px;left:0;right:0;text-align:center}.wide-bottom{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;display:flex;align-items:center;gap:12px;background:linear-gradient(transparent,#000d);color:#fff;font:12px Arial,sans-serif}.wide-bottom input{pointer-events:auto;flex:1;min-width:40px;accent-color:#e8c68b;height:32px}.wide-bottom button{font-size:12px;border-radius:4px;min-width:44px;min-height:44px}.wide-bottom button[data-action=fullscreen]{font-size:26px}.wide-time{white-space:nowrap}.controls-hidden .wide-controls{opacity:0;visibility:hidden}.wide-player:focus-within .wide-controls{opacity:1;visibility:visible}.wide-error{position:absolute;top:0;left:0;right:0;font-size:12px;color:#fff;background:#000c;padding:10px;margin:0}.wide-error:empty{display:none}.wide-player:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}.wide-controls button:focus-visible,.wide-controls input:focus-visible{outline:3px solid #e8c68b;outline-offset:3px}
@media(max-width:700px){.wide-center{gap:20px}.wide-center button{width:46px;height:46px;font-size:30px;min-width:44px}.wide-center button[data-action=play]{width:56px;height:56px;font-size:25px}.wide-center small{font-size:10px;bottom:6px}.wide-bottom{gap:6px;padding:4px 8px;font-size:10px}.wide-bottom button{font-size:10px;padding:4px;min-height:36px}.wide-bottom input{height:28px}.wide-time{font-size:9px}}
@media(prefers-reduced-motion:reduce){.wide-controls{transition:none}}
/* Circular ten-second symbols drawn as vectors, independent of device fonts. */
.wide-center button[data-action=back],.wide-center button[data-action=forward]{aspect-ratio:1/1;flex-shrink:0;border-radius:50%;padding:10px;background:#202225b3;border:1px solid #ffffff40;box-shadow:inset 0 1px 2px #ffffff26;backdrop-filter:blur(6px)}.skip-ten{display:block;width:42px;height:42px;flex:none;overflow:visible}.wide-center .skip-ten text{letter-spacing:-.5px}
@media(max-width:700px){.wide-center button[data-action=back],.wide-center button[data-action=forward]{width:52px;height:52px;padding:7px}.skip-ten{width:36px;height:36px}}
/* Preserve the portrait archive film while sharing the same controls. */
.wide-player.portrait-player{aspect-ratio:9/16}.subpage .videoBox .wide-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.wide-player.portrait-player:fullscreen{aspect-ratio:auto;width:100vw;height:100vh}
@media(max-width:700px){.page-works .wide-center{gap:16px}.page-works .wide-bottom{gap:4px;padding-inline:5px}.page-works .wide-bottom button{min-width:36px}.page-works .wide-bottom input{min-width:20px}}
