/* Wear Tailnet — a watch face at night. OLED black, a round dial with a mesh of nodes, mint
   accent; Chakra Petch for headings, Onest for prose, Martian Mono for code. */

:root {
  --page-bg: #000000; --page-text: #e2e8e4; --page-muted: #9aa69f; --page-line: #1d2420;
  --page-accent: #5ce0a8; --strong: #ffffff; --surface: #0b100d; --raise: #121a15;
  --code-bg: #0b100d; --code-text: #c8f5df;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Chakra Petch", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --k-ink: #e2e8e4; --k-accent: #5ce0a8; --k-b: #7fb2ff; --k-c: #f0b36b; --k-ok: #5ce0a8; --k-muted: #7d8a83; --k-file: #9aa69f;
  color-scheme: dark;
}
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.dial { width: clamp(110px, 14vw, 170px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background:
    radial-gradient(circle at 50% 50%, #5ce0a8 0 5px, transparent 6px),
    radial-gradient(circle at 26% 34%, #7fb2ff 0 4px, transparent 5px),
    radial-gradient(circle at 74% 30%, #7fb2ff 0 4px, transparent 5px),
    radial-gradient(circle at 70% 74%, #f0b36b 0 4px, transparent 5px),
    radial-gradient(circle at 30% 72%, #7fb2ff 0 4px, transparent 5px),
    #050806;
  border: 3px solid #26302a; box-shadow: 0 0 0 8px #0b100d, 0 0 40px -6px #5ce0a855; }
.dial i { position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed #5ce0a855; }
@media (prefers-reduced-motion: no-preference) { .dial i { animation: spin 40s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.hero h1 { font: 700 clamp(44px, 6.4vw, 80px)/1 var(--display); letter-spacing: -0.01em; }
.part > h2 { font: 600 clamp(26px, 3vw, 36px)/1.1 var(--display); }
.fig { padding: 16px 12px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 24px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; } }