:root{color-scheme:dark;font:15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#111318;color:#f3f4f6}*{box-sizing:border-box}body{margin:0;overflow:hidden}#viewer{height:calc(100vh - 56px);height:calc(100dvh - 56px);display:flex;align-items:center;justify-content:center;padding:8px}#stage{position:relative;width:min(calc(100vw - 16px),calc((100vh - 72px)*16/9));width:min(calc(100vw - 16px),calc((100dvh - 72px)*16/9));aspect-ratio:16/9;background:#fff;box-shadow:0 8px 32px #0006}#slide{display:block;width:100%;height:100%;object-fit:contain}#media{position:absolute;inset:0;pointer-events:none}.video-frame{position:absolute;overflow:hidden;background:#fff;pointer-events:auto}.video-frame video{position:absolute;max-width:none}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#171a22e8;border:1px solid #ffffff80;padding:12px 20px;border-radius:8px;z-index:2}.video-frame.playing .video-play{opacity:0}.video-frame.playing:hover .video-play,.video-play:focus-visible{opacity:1}nav{height:56px;display:flex;align-items:center;gap:10px;padding:0 18px;background:#1b1e25;border-top:1px solid #30343e}button,a,input{font:inherit}button,nav a{color:inherit;background:#2b303a;border:1px solid #444b59;border-radius:6px;padding:7px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}button:hover,nav a:hover{background:#3b4454}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #86b7ff;outline-offset:2px}button:disabled{opacity:.35;cursor:default}.page{display:flex;gap:5px;align-items:center;color:#bec5d1}.page input{width:47px;padding:5px 2px;text-align:center;background:transparent;border:0;color:#fff;appearance:textfield}.page input::-webkit-inner-spin-button{appearance:none}#section{color:#aab4c4;font-size:13px}.spacer{flex:1}dialog{width:min(1100px,94vw);max-height:90dvh;background:#191d25;color:inherit;border:1px solid #4b5668;border-radius:10px;padding:20px}dialog::backdrop{background:#000b}dialog header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-20px;background:#191d25;z-index:1;padding:12px 0}h1{font-size:20px;margin:0}#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}#grid button{text-align:left;padding:6px;white-space:normal;font-size:12px}#grid img{display:block;width:100%;aspect-ratio:16/9;margin-bottom:8px}#grid button[aria-current=true]{outline:3px solid #86b7ff}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}body:fullscreen nav{background:#111318}@media(max-width:600px){nav{padding:0 7px;gap:5px}button,nav a{padding:7px 8px;font-size:12px}#section{display:none}.page input{width:33px}.page{font-size:12px}#fullscreen{font-size:0}#fullscreen:after{content:'⛶';font-size:18px}}
.video-frame.playing .video-play{left:12px;top:auto;bottom:12px;transform:none;font-size:12px;padding:7px 10px}