.byte-patrol { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #181425; border: 2px solid #3a4466; box-shadow: 0 0 0 2px #181425, 6px 6px 0 #124e89; }
.byte-patrol__screen { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; outline: none; }
.byte-patrol.is-playing .byte-patrol__screen { touch-action: none; cursor: none; }
.byte-patrol__screen:focus-visible { outline: 2px solid #feae34; outline-offset: 2px; }
.byte-patrol__fs, .byte-patrol__snd { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border: 2px solid #3a4466; background: #181425; color: #c0cbdc; cursor: pointer; opacity: .75; }
.byte-patrol__snd { right: 40px; }
.byte-patrol__snd .snd-off { display: none; }
.byte-patrol__snd.is-off .snd-on { display: none; }
.byte-patrol__snd.is-off .snd-off { display: inline; }
.byte-patrol__fs svg, .byte-patrol__snd svg { display: block; width: 16px; height: 16px; margin: auto; fill: currentColor; }
.byte-patrol__fs .fs-out { display: none; }
.byte-patrol__fs.is-on .fs-in { display: none; }
.byte-patrol__fs.is-on .fs-out { display: inline; }
.byte-patrol__fs:hover, .byte-patrol__fs:focus-visible, .byte-patrol__snd:hover, .byte-patrol__snd:focus-visible { opacity: 1; border-color: #feae34; color: #feae34; outline: none; }
.byte-patrol.is-playing .byte-patrol__fs, .byte-patrol.is-playing .byte-patrol__snd { opacity: .35; }
.byte-patrol.is-playing:not(.is-full):not(:fullscreen):not(.is-paused) .byte-patrol__fs,
.byte-patrol.is-playing:not(.is-full):not(:fullscreen):not(.is-paused) .byte-patrol__snd { display: none; }
.byte-patrol.is-paused .byte-patrol__fs, .byte-patrol.is-paused .byte-patrol__snd { opacity: .75; }
@media (max-width: 520px) { .byte-patrol__fs, .byte-patrol__snd { top: 4px; right: 4px; width: 24px; height: 24px; } .byte-patrol__snd { right: 32px; } .byte-patrol__fs svg, .byte-patrol__snd svg { width: 12px; height: 12px; } }
.byte-patrol:fullscreen, .byte-patrol.is-full { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; aspect-ratio: auto; border: 0; box-shadow: none; background: #181425; }
.byte-patrol:-webkit-full-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 0; box-shadow: none; background: #181425; }
.byte-patrol.is-full { position: fixed; inset: 0; z-index: 2147483000; height: 100dvh; }
.byte-patrol:fullscreen .byte-patrol__screen, .byte-patrol.is-full .byte-patrol__screen { width: min(100vw, 177.78vh); width: min(100vw, 177.78dvh); height: auto; aspect-ratio: 16 / 9; }
.byte-patrol:-webkit-full-screen .byte-patrol__screen { width: min(100vw, 177.78vh); height: auto; aspect-ratio: 16 / 9; }
.byte-patrol:fullscreen .byte-patrol__fs, .byte-patrol.is-full .byte-patrol__fs, .byte-patrol:fullscreen .byte-patrol__snd, .byte-patrol.is-full .byte-patrol__snd { top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); }
.byte-patrol:fullscreen .byte-patrol__snd, .byte-patrol.is-full .byte-patrol__snd { right: calc(max(10px, env(safe-area-inset-right, 0px)) + 34px); }
html.byte-patrol-lock, html.byte-patrol-lock body { overflow: hidden; }