:root { color-scheme: dark; }
* { margin: 0; box-sizing: border-box; }
body {
  background: #050505;
  color: #e8e8e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#sitehead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 24px;
  padding: 18px 28px;
  font-size: 12px; letter-spacing: 0.1em;
  background: linear-gradient(to bottom, rgba(5,5,5,0.9), rgba(5,5,5,0.5) 60%, rgba(5,5,5,0));
}
#sitehead .brand { color: #e8e8e8; text-decoration: none; }
#sitehead nav { display: flex; gap: 22px; margin-left: auto; }
#sitehead nav a { color: #9a9a9a; text-decoration: none; transition: color 0.2s; }
#sitehead nav a:hover, #sitehead nav a.active { color: #fff; }

.layer { position: fixed; inset: 0; width: 100%; height: 100%; }

#peaks { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.peak {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; letter-spacing: 0.08em; white-space: nowrap;
  color: #cfcfcf; text-shadow: 0 0 8px #000;
  transition: opacity 0.25s; will-change: transform;
}
.peak i { font-style: normal; color: #9a9a9a; font-size: 9px; line-height: 1; }

#telemetry {
  position: fixed; bottom: 14px; right: 24px; z-index: 20;
  color: #5e5e5e; font-size: 11px; letter-spacing: 0.08em;
  text-shadow: 0 0 8px #000; pointer-events: none;
}

#links { display: flex; gap: 18px; margin-top: 1.8rem; }
#links a { color: #9a9a9a; transition: color 0.2s, filter 0.2s; }
#links a:hover { color: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)); }
#links svg {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
#links .draw {
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: draw-in 900ms ease-out forwards;
  animation-delay: var(--d, 1.6s);
}
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  #links .draw { animation: none; stroke-dashoffset: 0; }
}

main.page { max-width: 760px; margin: 0 auto; padding: 140px 28px 80px; }
main.page h1 { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.06em; margin-bottom: 1.2rem; }
main.page p { color: #9a9a9a; line-height: 1.7; }
main.page a { color: #cfcfcf; }

@media (max-width: 720px) {
  #sitehead { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; gap: 14px; font-size: 11px; letter-spacing: 0.06em; }
  #sitehead nav { gap: 14px; }
  #telemetry { right: 16px; bottom: calc(10px + env(safe-area-inset-bottom)); font-size: 10px; }
  #colophon-link { left: 16px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  #links { gap: 16px; }
}