*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#000;color:#d8d4cf}
body{font:13px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.18em;text-transform:lowercase;overflow:hidden}
.stage{position:fixed;inset:0;display:grid;place-items:center}
video{width:100%;height:100%;object-fit:contain;background:#000}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5) 100%)}
.sound{position:fixed;right:28px;bottom:24px;z-index:3;background:none;border:0;color:#d8d4cf;opacity:.38;
  font:inherit;letter-spacing:inherit;cursor:pointer;padding:8px;transition:opacity .4s}
.sound:hover,.sound.on{opacity:.85}
.sound::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;
  background:currentColor;opacity:.4;vertical-align:1px}
.sound.on::before{opacity:1}
.lost{color:#d8d4cf;opacity:.5;text-decoration:none}.lost:hover{opacity:.9}
@media (max-width:600px){.sound{left:50%;right:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap;padding:8px 22px 8px 8px}}
@media (orientation:portrait) and (max-width:900px){video{object-fit:cover}}