@font-face { font-family: "Pixelify Sans"; src: url(fonts/PixelifySans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(fonts/Silkscreen.woff2) format("woff2"); font-display: swap; }

@view-transition { navigation: auto; }
html { background: #000; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 18px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }

.panel {
  position: relative; display: block; overflow: hidden;
  height: 78vh; height: 78svh; min-height: 460px;
  background: var(--bg); color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.panel canvas[hidden] { display: none; }
.panel:focus { outline: none; }
.panel:focus-visible::after { content: ""; position: absolute; inset: 12px; outline: 3px solid var(--ink); }

.label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 max(24px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.label h2 { margin: 0 0 4px; font-family: var(--font, inherit); font-size: clamp(34px, 5vw, 60px); font-weight: 600; line-height: 1.1; font-synthesis: none; }
.label h2 svg { width: .9em; height: .79em; margin-right: .32em; vertical-align: -.06em; fill: #ffd166; }
.label p { margin: 0; font-size: clamp(17px, 1.6vw, 21px); text-wrap: balance; }
.panel:hover h2 { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .14em; }

@media (min-width: 720px) {
  .panel { height: 86vh; height: 86svh; min-height: 520px; }
  .label { padding-left: max(44px, env(safe-area-inset-left)); padding-bottom: 38px; }
}