:root {
  color-scheme: dark;
  --bg: #020203;
  --ink: rgba(233, 228, 218, 0.88);
  --dim: #8c877d;
  --faint: rgba(233, 228, 218, 0.22);
  --accent: #fff9fd;
  --scrim: 2, 2, 3;
  --serif: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; cursor: default; touch-action: none; user-select: none; -webkit-user-select: none; }
body.hide-cursor { cursor: none; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #000; }

/* centred line */
.line {
  position: fixed; left: 50%; top: 50%; margin: 0;
  width: min(84vw, 44rem);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 200; font-size: clamp(1.15rem, 2.3vw + 0.6rem, 2.1rem);
  line-height: 1.32; letter-spacing: 0.005em;
  color: var(--ink);
  opacity: 0; filter: blur(10px);
  transition: opacity 1.6s ease, filter 2.2s ease, letter-spacing 6s ease;
  text-shadow: 0 0 28px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  text-wrap: balance;
}
.line::before {
  content: ''; position: absolute; inset: -1.6em -3em; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--scrim), 0.78), rgba(var(--scrim), 0.5) 55%, rgba(var(--scrim), 0));
}
.line.on { opacity: 1; filter: blur(0); letter-spacing: 0.02em; }
.line.out { opacity: 0; filter: blur(6px); transition: opacity 1.4s ease, filter 1.4s ease; }
.line.dark, .line.quote { font-style: italic; }
.line.quote { font-size: clamp(1.02rem, 1.7vw + 0.55rem, 1.7rem); width: min(86vw, 46rem); }
.line.imp { font-size: clamp(1.3rem, 2.55vw + 0.66rem, 2.3rem); transition: opacity 2s ease, filter 2.4s ease, letter-spacing 6s ease; }
.line.live { font-variant-numeric: tabular-nums; }
.line .hint { display: block; margin-top: 1.1em; font-family: var(--mono); font-weight: 300; font-size: 0.42em; letter-spacing: 0.28em; text-transform: lowercase; color: rgba(233, 228, 218, 0.45); animation: hintIn 3s ease both; }
@keyframes hintIn { from { opacity: 0; } to { opacity: 1; } }
.line.low { top: 70%; }
.line.high { top: 28%; }
.line.small { font-size: clamp(0.95rem, 1.2vw + 0.55rem, 1.35rem); }
.line.mono { font-family: var(--mono); font-weight: 300; font-size: clamp(0.72rem, 0.7vw + 0.5rem, 0.95rem); letter-spacing: 0.08em; text-transform: lowercase; }
.line sup, .line sub { font-size: 0.55em; }

/* instrument log */
.log {
  position: fixed; left: max(16px, 2.2vw); top: max(16px, 2.2vh);
  margin: 0; padding: 0; list-style: none;
  font-family: var(--mono); font-weight: 300;
  font-size: clamp(9.5px, 0.62vw + 5px, 12px); line-height: 1.75; letter-spacing: 0.04em;
  color: var(--dim);
  max-width: min(78vw, 34rem);
  pointer-events: none;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.95);
}
.log li { white-space: pre-wrap; transition: opacity 2.5s ease, color 1.5s ease; }
.log li.fresh { color: var(--ink); }
.log li.hot { color: var(--accent); text-shadow: 0 0 10px rgba(0,0,0,0.95), 0 0 14px rgba(255, 249, 253, 0.35); }
.log li .cur { display: inline-block; width: 0.6em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.corner {
  position: fixed; bottom: max(14px, 2vh);
  font-family: var(--mono); font-weight: 300; font-size: clamp(9px, 0.55vw + 5px, 11px);
  letter-spacing: 0.08em; color: var(--faint);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.95);
}
.corner.bl { left: max(16px, 2.2vw); pointer-events: none; white-space: pre; }
.corner.br { right: max(16px, 2.2vw); background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--faint); }
.corner.br:hover, .corner.br:focus-visible { color: var(--ink); outline: none; }
.corner sup { font-size: 0.75em; }

/* gate */
.gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 9, 14, 0.55), rgba(3, 3, 5, 0.96) 70%);
  transition: opacity 2.4s ease;
  z-index: 5;
}
.gate.gone { opacity: 0; pointer-events: none; }
.gate-inner { display: grid; justify-items: center; gap: 2.2rem; padding: 16px; text-align: center; }
.gate-title { margin: 0; font-weight: 200; font-size: clamp(1.4rem, 3vw + 0.6rem, 2.6rem); letter-spacing: 0.06em; color: var(--ink); }
.gate-note { margin: 0; font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: 0.12em; color: var(--faint); }
#go {
  font-family: var(--mono); font-weight: 300; font-size: 12px; letter-spacing: 0.3em; text-transform: lowercase;
  color: var(--ink); background: transparent; border: 1px solid rgba(233, 230, 239, 0.28);
  padding: 1.05em 2.4em 1.05em 2.7em; border-radius: 999px; cursor: pointer;
  transition: border-color 0.6s ease, background 0.6s ease, letter-spacing 0.8s ease;
}
#go:hover, #go:focus-visible { border-color: rgba(233, 230, 239, 0.7); background: rgba(233, 230, 239, 0.04); letter-spacing: 0.36em; outline: none; }

@media (max-width: 600px) {
  .log { max-width: calc(100vw - 32px); }
  .line.low { top: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .line { transition: opacity 1.2s ease; filter: none; }
}

/* end card (after the final erasure; the idle keeps living behind it) */
.endcard {
  position: fixed; left: 50%; bottom: max(64px, 11vh); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.7rem; text-align: center; z-index: 4;
  animation: endIn 4s ease both; pointer-events: none;
}
.endcard button { pointer-events: auto; }
@keyframes endIn { from { opacity: 0; } to { opacity: 1; } }
.end-title { margin: 0 0 0.4rem; font-weight: 200; font-size: clamp(1rem, 1.2vw + 0.6rem, 1.5rem); letter-spacing: 0.32em; color: var(--ink); }
.end-note { margin: 0; font-family: var(--mono); font-weight: 300; font-size: 10.5px; letter-spacing: 0.1em; color: rgba(233, 228, 218, 0.42); }
#again {
  margin-top: 0.9rem; font-family: var(--mono); font-weight: 300; font-size: 11px; letter-spacing: 0.3em; text-transform: lowercase;
  color: var(--ink); background: transparent; border: 1px solid rgba(233, 228, 218, 0.25);
  padding: 0.8em 2em 0.8em 2.3em; border-radius: 999px; cursor: pointer; transition: border-color 0.5s ease, background 0.5s ease;
}
#again:hover, #again:focus-visible { border-color: rgba(233, 228, 218, 0.7); background: rgba(233, 228, 218, 0.04); outline: none; }