* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; background: #050507; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

.ui {
  position: fixed; inset: 0; pointer-events: none;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: rgba(255,255,255,.74);
  padding: clamp(18px, 3vw, 38px);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* top */
.meta-top h1 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; letter-spacing: .04em;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  color: #fff; line-height: 1;
}
.meta-top p {
  margin-top: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* legend */
.legend {
  align-self: start; margin-top: 22px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.55);
}
.legend span { display: flex; align-items: center; gap: 9px; }
.legend i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f11220; box-shadow: 0 0 8px rgba(241,18,32,.8);
}

/* hint — centred, fades like a breath */
.hint {
  position: fixed; left: 50%; bottom: clamp(96px, 16vh, 150px);
  transform: translateX(-50%);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  animation: breathe 4.5s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: .25; } 50% { opacity: .7; } }

/* bottom */
.meta-bottom { align-self: end; max-width: 56ch; }
.statement { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.72); }
.sources {
  margin-top: 12px; font-size: 10.5px; letter-spacing: .03em;
  color: rgba(255,255,255,.34); line-height: 1.5;
}

/* sound button */
.sound-btn {
  position: fixed; right: clamp(18px,3vw,38px); bottom: clamp(18px,3vw,38px);
  pointer-events: auto; cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px; padding: 12px 22px;
  backdrop-filter: blur(6px);
  transition: border-color .2s, color .2s, background .2s;
}
.sound-btn:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.sound-btn.on { border-color: #21f06e; color: #21f06e; }

@media (prefers-reduced-motion: reduce) { .hint { animation: none; opacity: .5; } }

.home-link { pointer-events: auto; display: inline-block; margin-bottom: 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.45); transition: color .2s; }
.home-link:hover { color: #fff; }