/* vpno — a night tunnel. Deep navy, one signal blue, and dashed tunnel lines that frame
   every figure the way an encrypted link frames traffic.
   Display: Chakra Petch. Text: Manrope. Code: JetBrains Mono. */

:root {
  --page-bg: #0a0f1d; --page-text: #dbe4f7; --page-muted: #93a1bd; --page-line: #1c2640;
  --page-accent: #5aa9ff; --strong: #f3f7ff; --surface: #0f162a; --raise: #141d36;
  --code-bg: #0d1426; --code-text: #bcd8ff;
  --page-ui: "Manrope", system-ui, sans-serif;
  --display: "Chakra Petch", "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --dash: repeating-linear-gradient(90deg, var(--page-accent) 0 10px, transparent 10px 18px);
  --k-ink: #c7d3ee; --k-accent: #5aa9ff; --k-b: #8f7bff; --k-c: #39d3c3; --k-ok: #39d3c3; --k-muted: #4c5a7a; --k-file: #93a1bd;
  color-scheme: dark;
}
.hero h1 { font: 600 clamp(72px, 11vw, 140px)/0.88 var(--display); letter-spacing: -0.01em; }
.hero h1::after { content: ""; display: block; height: 3px; width: min(420px, 70%); margin-top: 22px; background: var(--dash); }
.part > h2 { font: 600 clamp(26px, 3.2vw, 40px)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.fig, pre { position: relative; padding: 16px; background: var(--surface); border-radius: 10px; border: 0; }
.fig::before, pre::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: var(--dash); opacity: 0.8; }
.fig::after, pre::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--dash); opacity: 0.8; }
pre { padding: 18px 16px; }
.dg .node { fill: #0b1222; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.states { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.states li { display: flex; align-items: center; gap: 12px; color: var(--page-muted); max-width: none; }
.states b { color: var(--strong); }
.s { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--page-muted); }
.s.connecting { border-color: var(--page-accent); border-right-color: transparent; }
.s.on { background: #39d3c3; border-color: #39d3c3; box-shadow: 0 0 10px rgba(57, 211, 195, 0.7); }
.s.retry { border-color: #8f7bff; border-style: dashed; }
.s.fail { border-color: #ff7a6b; background: rgba(255, 122, 107, 0.25); border-radius: 3px; }