@font-face { font-family: "Unb"; font-weight: 600; src: url(/unbounded-latin-600-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "JBM"; font-weight: 500; src: url(/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-display: swap; }
:root { --base: #05070d; --ink: #e8eef7; --dim: #8a93a6; --org: #ff8b42; --blue: #4d8dff; --cy: #7ff0e6; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% 70%, #0d1a3a 0%, var(--base) 60%) fixed, var(--base);
  color: var(--ink);
  font-family: "Unb", system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 32px 16px;
}
main { width: min(1200px, 100%); }
header { margin-bottom: 20px; }
.tag { font-family: "JBM", ui-monospace, monospace; font-size: 14px; letter-spacing: .18em; color: var(--org); margin: 0 0 10px; }
h1 { font-size: clamp(22px, 3.6vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.frame {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid #4d8dff55; box-shadow: 0 0 60px #4d8dff22, 0 30px 80px #000a;
  background: #000; aspect-ratio: 16 / 9;
}
video { display: block; width: 100%; height: 100%; background: #000; }
.nota { font-family: "JBM", ui-monospace, monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 14px; }
body.erro .frame::after {
  content: "Não foi possível carregar o vídeo."; position: absolute; inset: auto 0 16px; text-align: center;
  font-family: "JBM", monospace; font-size: 14px; color: var(--org);
}
body.off main { text-align: center; }
body.off h1 { color: var(--dim); }