@font-face { font-family: "Instrument Sans"; src: url(instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --night: #192631; --ink: #EEF3F6; --sub: #A3B4C0; --coral: #F0A08C; --edge: clamp(24px, 5vw, 72px); }
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
/* Header, copy and footer share the column; the scene sits behind and never carries meaning. */
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink); font: 400 1.0625rem/1.55 "Instrument Sans", system-ui, sans-serif; overflow-x: hidden; padding: calc(var(--edge) + env(safe-area-inset-top)) max(var(--edge), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--edge), env(safe-area-inset-left)); }
/* Absolute, not fixed: on a short phone or at large text the copy scrolls, and must never slide over the mark. */
#scene, .still { position: absolute; pointer-events: none; }
#scene { top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; opacity: 0; transition: opacity .9s ease; }
/* Matches the scene's mark position, so losing WebGL moves nothing. */
.still { width: min(25vw, 44vh); left: 69%; top: 50svh; transform: translate(-50%, -50%); }
.live #scene { opacity: 1; }
.live .still { display: none; }
header, main, footer { position: relative; }
.word { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: .14em; }
main { align-self: center; max-width: min(30rem, 42vw); padding-block: 48px; }
h1 { margin: 0 0 .55em; font-size: clamp(2.25rem, 3.9vw, 3.5rem); line-height: 1.06; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
p { margin: 0; color: var(--sub); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); text-wrap: pretty; }
footer { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: .9375rem; }
footer a { color: var(--sub); padding-block: 12px; text-underline-offset: .2em; text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  main { align-self: end; max-width: 34rem; padding-block: clamp(200px, 35svh, 320px) 16px; }
  .still { width: min(44vw, 24vh); left: 50%; top: 27svh; }
}