html,body{margin:0;height:100%;background:#000;overflow:hidden}
video{position:fixed;inset:0;width:100%;height:100%;object-fit:fill;background:#000}
#off{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:#777;font:600 4vh/1 system-ui,sans-serif;letter-spacing:.25em;text-transform:uppercase}
#off[hidden]{display:none}
#ui{position:fixed;left:2vw;bottom:2.5vh;display:flex;align-items:center;gap:1.5vw;padding:1vh 1.6vw;border-radius:999px;background:rgba(0,0,0,.55);opacity:0;transition:opacity .4s;pointer-events:none}
#ui.show{opacity:1;pointer-events:auto}
#btn{width:5vh;height:5vh;border:0;padding:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
#btn::before{content:"";display:block}
#btn.stop::before{width:2.2vh;height:2.2vh;background:#fff}
#btn.play::before{width:0;height:0;border-style:solid;border-width:1.4vh 0 1.4vh 2.4vh;border-color:transparent transparent transparent #fff;margin-left:.6vh}
#vol{width:18vw;accent-color:#fff;cursor:pointer}