*,*::before,*::after{box-sizing:border-box}
body.v{margin:0;overflow:hidden;background:#100D0B;color:#EDE4DA;
  font:15px/1.6 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}

.v-palco{position:fixed;inset:0;background:#100D0B;overflow:hidden;touch-action:none;
  outline:none}
.v-pan{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.v-pan.--anim{transition:transform .2s ease}
.v-media{display:block;max-width:none;max-height:none;transform-origin:50% 50%;
  user-select:none;-webkit-user-drag:none}
.v-palco.--pronto{cursor:grab}
.v-palco.--arrastando{cursor:grabbing}
/* Vídeo não é enquadrável: fica centrado, com os controles nativos inteiros. */
.v-palco.--video{display:flex;align-items:center;justify-content:center;cursor:default}
.v-palco.--video .v-pan{position:static;transform:none!important}
.v-palco.--video .v-media{max-width:100vw;max-height:100vh}

/* Fundos alternáveis — os três do Loom, além do escuro que é o padrão daqui. */
.v-bg-checker{background-color:#6b6b6b;background-image:
  linear-gradient(45deg,#5a5a5a 25%,transparent 25%),
  linear-gradient(-45deg,#5a5a5a 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#5a5a5a 75%),
  linear-gradient(-45deg,transparent 75%,#5a5a5a 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}
.v-bg-white{background:#fff}
.v-bg-black{background:#000}

.v-nav{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;
  background:rgba(24,19,17,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);max-width:calc(100vw - 24px);
  overflow-x:auto;scrollbar-width:none}
.v-nav::-webkit-scrollbar{display:none}
.v-grupo{display:flex;align-items:center;gap:2px}
.v-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  flex:none;color:inherit;text-decoration:none;border:0;background:none;cursor:pointer;
  padding:0;font:inherit}
.v-btn:hover{background:rgba(255,255,255,.13)}
.v-btn:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}
.v-btn--txt{width:auto;padding:0 9px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.v-sep{width:1px;height:18px;margin:0 5px;flex:none;background:rgba(255,255,255,.16)}
.v-pct{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 6px;
  min-width:46px;text-align:center;opacity:.85;font-variant-numeric:tabular-nums;flex:none}
/* Só aparece com JavaScript: sem ele seriam botões mortos. */
.v-so-js{display:none}
body.v-js .v-so-js{display:flex}
body.v-js span.v-so-js.v-sep{display:block}

.v-legenda{position:fixed;left:0;right:0;top:16px;z-index:2;margin:0;text-align:center;
  pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.v-legenda b{font-weight:500;opacity:.9}
.v-hud{display:inline-flex;gap:10px;margin-left:10px;font-size:11.5px;opacity:.6;
  font-variant-numeric:tabular-nums}
/* Fundo claro: a legenda branca sumiria dentro dele. */
.v-palco.v-bg-white~.v-legenda{color:#1C1611;text-shadow:none}

.v-aviso{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:4;
  padding:7px 14px;border-radius:999px;background:rgba(24,19,17,.92);
  font-size:12.5px;border:1px solid rgba(255,255,255,.12);pointer-events:none;
  opacity:0;transition:opacity .18s ease}
.v-aviso.is-on{opacity:1}

@media (max-width:640px){
  /* Numa tela estreita a barra inteira não cabe: giro/espelho/fundo saem. */
  .v-nav .v-grupo:last-of-type,.v-nav .v-grupo:last-of-type+.v-sep{display:none}
}
@media (max-width:520px){ .v-hud{display:none} }
@media (prefers-reduced-motion:reduce){ .v-pan.--anim{transition:none} }