@font-face {
  font-family: 'DM Sans';
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/dm-sans.ttf') format('truetype');
}

@font-face {
  font-family: Manrope;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope.ttf') format('truetype');
}

:root {
  --paper: #f6f6f2;
  --panel: #ecece6;
  --ink: #101936;
  --muted: #4f566b;
  --line: #dddcd3;
  --seafoam: #1fa58f;
  --gold: #c98d16;
  --seafoam-ink: #0f7a68;
  --tm-ink: #aeb6d4;
  --coral: #f0574d;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: Manrope, 'DM Sans', system-ui, sans-serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:hover { color: var(--seafoam-ink); }
:focus-visible { outline: 3px solid var(--seafoam-ink); outline-offset: 3px; }

.wrap { width: min(1080px, 100% - 48px); margin-inline: auto; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 24px var(--display);
  letter-spacing: -0.04em;
  text-decoration: none;
}

.brand img { border-radius: 8px; }
.bar nav { display: flex; gap: 24px; font-weight: 600; font-size: 15px; }
.bar nav a { text-decoration: none; }

.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0 72px;
}

h1 {
  margin: 0 0 20px;
  font: 700 clamp(40px, 5vw, 56px)/1.08 var(--display);
  letter-spacing: -0.045em;
}

.lede { margin: 0 0 28px; max-width: 470px; color: var(--muted); font-size: 18px; }

.oneliner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  padding: 10px 10px 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #f3f4f8;
}

.oneliner code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font: 14px/1.5 var(--mono);
}

.oneliner code span { color: var(--gold); }

.copy {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #2a3355;
  color: #fff;
  cursor: pointer;
}

.copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy .i-check, .copy.done .i-copy { display: none; }
.copy.done .i-check { display: block; color: var(--seafoam); }
.copy:hover { background: #3a4570; }
.copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.copy { opacity: .6; transition: opacity .15s; }
.copy:hover, .copy:focus-visible, .copy.done { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .copy { opacity: 0; }
  .terminal:hover .copy, .oneliner:hover .copy { opacity: .6; }
  .terminal .copy:hover, .oneliner .copy:hover, .copy:focus-visible, .copy.done { opacity: 1; }
}
.fine { margin: 14px 0 0; color: var(--muted); font-size: 13px; }

.diagram { width: 100%; height: auto; }
.diagram .node rect { fill: #fff; stroke: var(--line); }
.diagram text { font: 700 17px var(--display); fill: var(--ink); }
.window .bar { fill: var(--ink); }
.window circle { fill: #fff; opacity: .35; }
.window text { font: 600 13px var(--sans); fill: #fff; opacity: .85; text-anchor: start; }
.diagram .window .frame { fill: var(--ink); }
.diagram .term text { font: 13px var(--mono); fill: #fff; white-space: pre; }
.diagram .term .cmd { fill: var(--tm-ink); }
.diagram .term .prompt { fill: var(--gold); }
.diagram .term .state { fill: var(--tm-ink); }
.rewrite-diagram .window .frame { fill: #e9ebf2; stroke: var(--ink); stroke-opacity: .2; }
.diagram .seafoam { stroke: var(--seafoam); fill: var(--seafoam); }
.diagram .gold { stroke: var(--gold); fill: var(--gold); }
.diagram .coral { stroke: var(--coral); fill: var(--coral); }
.diagram .links path { fill: none; stroke-dasharray: 14 10; animation: flow 1.6s linear infinite; }

/* The offset must equal one dash period (dash + gap) or the loop visibly jumps. */
@keyframes flow { to { stroke-dashoffset: -24; } }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 40px 0;
  border-block: 1px solid var(--line);
}

.features h2 { margin: 0 0 6px; font: 700 20px var(--display); letter-spacing: -0.02em; }
.features p { margin: 0; color: var(--muted); font-size: 15px; }

.mac-ssh {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.mac-ssh > div { flex: 1; }
.mac-ssh h2 { margin: 0 0 6px; font: 700 20px var(--display); letter-spacing: -0.02em; }
.mac-ssh p { margin: 0; max-width: 720px; color: var(--muted); font-size: 15px; }
.mac-ssh .more { flex: none; font-size: 15px; }
@media (max-width: 640px) {
  .mac-ssh { align-items: flex-start; flex-direction: column; gap: 12px; }
}

.start {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0;
}

.hero > *, .start > * { min-width: 0; }

.start h2 { margin: 0 0 12px; font: 700 34px/1.15 var(--display); letter-spacing: -0.035em; }
.start p { margin: 0 0 16px; max-width: 380px; color: var(--muted); }
.more { font-weight: 600; text-decoration: none; }

.terminal { position: relative; border-radius: 12px; background: var(--ink); }
.terminal .copy { position: absolute; top: 12px; right: 12px; }

.terminal pre {
  margin: 0;
  padding: 22px 24px;
  overflow-x: auto;
  color: #f3f4f8;
  font: 14px/1.75 var(--mono);
}

.terminal .c { color: #8e97b8; }

footer { padding: 28px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
footer p { margin: 0 0 6px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .hero, .start { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 32px 0 48px; }
  .diagram { max-width: 460px; }
  .features { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .start { padding: 48px 0; }
}

@media (max-width: 480px) {
  .wrap { width: calc(100% - 32px); }
  .lede { font-size: 16px; }
  .oneliner code, .terminal pre { font-size: 12px; }
  .terminal pre { padding: 56px 18px 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .diagram .links path { animation: none; }
}

p code, li code, td code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel);
  font: 0.875em var(--mono);
}

.next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-bottom: 72px;
}

.next > * { min-width: 0; }
.next h2 { margin: 0 0 6px; font: 700 20px var(--display); letter-spacing: -0.02em; }
.next p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.terminal.small pre { padding: 18px 90px 18px 20px; }
.terminal var { color: var(--gold); font-style: normal; }
.terminal var::before { content: '<'; }
.terminal var::after { content: '>'; }

@media (max-width: 820px) {
  .next { grid-template-columns: 1fr; padding-bottom: 48px; }
}

@media (max-width: 480px) {
  .terminal.small pre { padding: 52px 18px 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .terminal.small pre:only-child { padding-top: 18px; }
}

.routing { padding: 56px 0 72px; border-top: 1px solid var(--line); }
.routing h2 { margin: 0 0 8px; font: 700 34px/1.15 var(--display); letter-spacing: -0.035em; }
.routing-lede { margin: 0 0 28px; max-width: 560px; color: var(--muted); }

.order {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.order li {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  counter-increment: step;
}

.order li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 600 12px var(--mono);
}

.order strong { display: block; font: 700 16px var(--display); }
.order span { display: block; color: var(--muted); font-size: 15px; line-height: 1.45; }

.routing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.routing-cards > * { display: flex; flex-direction: column; min-width: 0; }
.routing-cards h3 { margin: 0 0 6px; font: 700 20px var(--display); letter-spacing: -0.02em; }
.routing-cards p { flex: 1; margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.routing-cards .terminal.small pre { padding-right: 20px; }

@media (max-width: 820px) {
  .order { grid-template-columns: 1fr 1fr; }
  .routing-cards { grid-template-columns: 1fr; }
  .routing { padding: 40px 0 48px; }
}

@media (max-width: 480px) {
  .order { grid-template-columns: 1fr; }
  .routing-cards .terminal.small pre { padding-top: 18px; }
}

.faq { padding: 56px 0 72px; border-top: 1px solid var(--line); }
.faq h2 { margin: 0 0 20px; font: 700 34px/1.15 var(--display); letter-spacing: -0.035em; }
.faq-list { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font: 700 18px/1.35 var(--display); letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { min-width: 0; }
.faq summary::after { content: "+"; flex: none; color: var(--muted); font-weight: 400; font-size: 22px; line-height: 1; transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -4px 0 18px; max-width: 640px; color: var(--muted); font-size: 15px; }
.faq .terminal { margin-bottom: 18px; }
.addressing { padding: 56px 0 72px; border-top: 1px solid var(--line); }
.addressing h2 { margin: 0 0 8px; font: 700 34px/1.15 var(--display); letter-spacing: -0.035em; }
.section-lede { margin: 0 0 28px; max-width: 640px; color: var(--muted); }

.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.address-grid figure { min-width: 0; margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow-x: auto; }
.address-grid figcaption { margin-bottom: 10px; font: 700 16px var(--display); }
.address-grid table { width: 100%; border-collapse: collapse; font-size: 14px; }
.address-grid th { padding: 6px 8px 6px 0; color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; white-space: nowrap; }
.address-grid td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.address-grid td:nth-child(n+2) { font: 13px var(--mono); }
.address-grid td:first-child { font-family: inherit; }
.address-grid .ip { display: inline-block; padding: 1px 6px; border-radius: 5px; }
.address-grid .ip.tm { background: #e3e5ee; color: var(--ink); }
.address-grid .ip.work { background: #d9f1ec; color: #12705f; }
.address-grid tr.you td:nth-child(2) { font-weight: 700; }
.address-grid tr.you + tr.peer td { border-top-style: dashed; }
.address-grid .ip.home { background: #faecd0; color: #85590a; }
.address-grid .who { display: block; margin-bottom: 2px; color: var(--muted); font: 600 12px var(--sans); }
.address-grid .note { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; white-space: normal; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.dot.seafoam { background: var(--seafoam); }
.dot.gold { background: var(--gold); }

.address-note { margin: 10px 0 28px; color: var(--muted); font-size: 13px; }

.address-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.address-facts li { color: var(--muted); font-size: 15px; line-height: 1.5; }
.address-facts strong { display: block; margin-bottom: 4px; color: var(--ink); font: 700 16px var(--display); }

@media (max-width: 820px) {
  .address-grid { grid-template-columns: 1fr; }
  .address-facts { grid-template-columns: 1fr 1fr; }
  .addressing { padding: 40px 0 48px; }
}

@media (max-width: 480px) {
  .address-facts { grid-template-columns: 1fr; }
  .address-grid figure { padding: 14px; }
  .address-grid td, .address-grid th { padding-right: 6px; }
  .address-grid td:nth-child(n+2) { font-size: 12px; }
  .address-grid td { font-size: 13px; }
}

.rewrite-figure {
  position: relative;
  margin: 0 0 28px;
  padding: 12px 12px 56px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.rewrite-diagram { display: block; width: 100%; height: auto; }
.rewrite-diagram.tall { display: none; max-width: 420px; margin: 0 auto; }

.packet-controls {
  position: absolute;
  z-index: 1;
  inset: auto 12px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / .9);
  backdrop-filter: blur(8px);
}
.packet-controls[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .packet-controls { opacity: 0; pointer-events: none; transition: opacity .15s; }
  .rewrite-figure:hover .packet-controls, .rewrite-figure:focus-within .packet-controls { opacity: 1; pointer-events: auto; }
}
.packet-controls button {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.packet-controls button:hover { background: var(--panel); }
.packet-controls button:focus-visible, .packet-timeline:focus-visible { outline: 2px solid var(--seafoam-ink); outline-offset: 2px; }
.packet-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.packet-controls .icon-play { fill: currentColor; stroke: none; }
.packet-controls[data-playing="true"] .icon-play, .packet-controls[data-playing="false"] .icon-pause { display: none; }
.packet-timeline { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.packet-time { flex: none; min-width: 7em; color: var(--muted); font: 12px var(--mono); text-align: right; }
.rewrite-figure.packet-controlled .wires path { animation: none; stroke-dashoffset: var(--packet-dash-offset, 0); }

@media (max-width: 640px) {
  .rewrite-diagram.wide { display: none; }
  .rewrite-diagram.tall { display: block; }
}
.rewrite-diagram text { font: 700 17px var(--display); text-anchor: middle; }
.rewrite-diagram .window text { font: 600 13px var(--sans); text-anchor: start; }
.rewrite-diagram .mono { font: 13px var(--mono); }
.rewrite-diagram .wires path { stroke-dasharray: 12 12; animation: flow 1.6s linear infinite; }
.rewrite-diagram .wires .host { stroke: var(--ink); opacity: 0.35; }
.rewrite-diagram .wires .seafoam { stroke: var(--seafoam); }
.rewrite-diagram .wires .gold { stroke: var(--gold); }
.rewrite-diagram .app rect { fill: var(--ink); }
.rewrite-diagram .app text { fill: #fff; }
.rewrite-diagram .app .mono { fill: var(--tm-ink); }
.rewrite-diagram .mix .layer { fill: var(--ink); }
.rewrite-diagram .work { --c: var(--seafoam); }
.rewrite-diagram .home { --c: var(--gold); }
.rewrite-diagram .region { fill: var(--c); fill-opacity: .1; stroke: var(--c); stroke-width: 1.5; }
.rewrite-diagram .net circle { fill: var(--c); }
.rewrite-diagram .net .name { fill: var(--ink); text-anchor: start; }
.rewrite-diagram .ts rect:not(.glow), .rewrite-diagram .node rect:not(.glow) { fill: #fff; stroke: var(--c); stroke-width: 2; }
.rewrite-diagram .node rect:not(.glow) { stroke: var(--line); stroke-width: 1; }
.rewrite-diagram .ts text, .rewrite-diagram .node text { font-size: 15px; fill: var(--ink); }
.rewrite-diagram .ts .mono, .rewrite-diagram .node .mono { font-size: 13px; fill: var(--muted); }
.rewrite-diagram .work .glow, .rewrite-diagram .home .glow { stroke: var(--c); }
.rewrite-diagram .mix .side { text-anchor: start; }
.rewrite-diagram .mix .inside { fill: #fff; font-size: 15px; }
.rewrite-diagram .mix text { fill: var(--ink); }
.rewrite-diagram .glow { fill: none; stroke-width: 6; }
.rewrite-diagram .mix .glow { stroke: var(--ink); stroke-opacity: .25; }
.rewrite-diagram .pkt text { font: 500 12px var(--mono); fill: #fff; text-anchor: start; white-space: pre; }
.rewrite-diagram .pkt .k { font-weight: 400; opacity: .7; }
.rewrite-diagram .pkt.host rect { fill: var(--ink); }
.rewrite-diagram .pkt.seafoam rect { fill: var(--seafoam); }
.rewrite-diagram .pkt.gold rect { fill: var(--gold); }
.rewrite-diagram .pkt.seafoam text, .rewrite-diagram .pkt.gold text { fill: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .packet-controls { transition: none; }
  .rewrite-diagram .wires path { animation: none; }
  .rewrite-diagram .packets, .rewrite-diagram .glow { display: none; }
  .packet-controlled .packets, .packet-controlled .glow { display: inline; }
}