:root {
  --bg: #111111;
  --bg-raised: #1a1a1a;
  --bg-inset: #191919;
  --border: #2b2b2b;
  --border-strong: #3d3d3d;
  --border-muted: #202020;
  --text: #ffffff;
  --text-muted: #a1a1a1;
  --text-faint: #6f6f6f;
  --accent: #0ea5e9;
  --accent-strong: #0284c7;
  --accent-dim: #58a6ff;
  --link: #58a6ff;
  --on-accent: #ffffff;
  --info: #58a6ff;
  --warning: #d29922;
  --error: #ef4444;
  --patreon: #f96854;
  --ok: #3fb950;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --header-height: 3.5rem;
  --footer-height: 4.75rem;
  --content-width: 48rem;
  --sidebar-width: 16rem;
  --toc-width: 14rem;
  --gutter: 1.5rem;
  --radius: 6px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

img, svg, video { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  max-width: 90rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-logo { display: block; width: 32px; height: 32px; }

.nav-desktop { margin-left: auto; }
.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-desktop a {
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 500;
}
.nav-desktop a:hover { color: var(--text); text-decoration: none; }
.nav-desktop a[aria-current="page"] { color: var(--text); }

.nav-mobile { display: none; margin-left: auto; position: relative; }
.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: .4rem;
  color: var(--text-muted);
  border-radius: var(--radius);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary:hover { color: var(--text); background: var(--bg-inset); }

.nav-mobile-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  width: max(16rem, 60vw);
  max-height: 75vh;
  overflow-y: auto;
  padding: .75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.nav-mobile-panel > ul { margin: 0; padding: 0; list-style: none; }
.nav-mobile-panel > ul > li > a {
  display: block;
  padding: .4rem .5rem;
  color: var(--text);
  font-size: .95rem;
  border-radius: 4px;
}
.nav-mobile-panel > ul > li > a:hover { background: var(--bg-inset); text-decoration: none; }
.nav-mobile-heading {
  margin: .75rem .5rem .25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* layout */

.layout {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width);
  gap: 2.5rem;
  align-items: start;
}
.layout:not(:has(.sidebar)) { grid-template-columns: minmax(0, 1fr) var(--toc-width); }
.layout:not(:has(.toc)) { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.layout:not(:has(.sidebar)):not(:has(.toc)) { grid-template-columns: minmax(0, 1fr); }

.content {
  min-width: 0;
  padding: 2.5rem 0 4rem;
}
.layout:not(:has(.sidebar)):not(:has(.toc)) .content { max-width: var(--content-width); margin: 0 auto; }

/* sidebar */

.sidebar {
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 2.5rem 0 2rem;
  font-size: .9rem;
}
.docs-tree { margin: 0; padding: 0; list-style: none; }
.docs-tree .docs-tree { margin-left: .75rem; padding-left: .5rem; border-left: 1px solid var(--border); }
.docs-tree li { margin: .1rem 0; }
.docs-tree a {
  display: block;
  padding: .3rem .55rem;
  color: var(--text-muted);
  border-radius: 4px;
}
.docs-tree a:hover { color: var(--text); background: var(--bg-inset); text-decoration: none; }
.docs-tree a[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 500;
}

/* toc */

.toc {
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 2.5rem 0 2rem;
  font-size: .85rem;
}
.toc-heading {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc ul ul { margin-left: .75rem; }
.toc li { margin: .15rem 0; }
.toc a { display: block; padding: .15rem 0; color: var(--text-muted); }
.toc a:hover { color: var(--accent); text-decoration: none; }

/* prose */

.prose > *:first-child { margin-top: 0; }
.prose h1 {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}
.prose h2 {
  margin: 2.75rem 0 1rem;
  padding-top: .5rem;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.01em;
  border-top: 1px solid var(--border);
}
.prose h3 { margin: 2rem 0 .75rem; font-size: 1.15rem; font-weight: 650; }
.prose h4 { margin: 1.5rem 0 .5rem; font-size: 1rem; font-weight: 650; }
.prose p { margin: 1rem 0; }
.prose ul, .prose ol { margin: 1rem 0; padding-left: 1.5rem; }
.prose li { margin: .35rem 0; }
.prose li > ul, .prose li > ol { margin: .35rem 0; }
.prose strong { font-weight: 650; color: var(--text); }
.prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border); }

.prose blockquote {
  margin: 1.25rem 0;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.prose :not(pre) > code {
  padding: .15em .4em;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .875em;
  word-break: break-word;
}

.prose pre {
  margin: 1.25rem 0;
  padding: 1rem;
  overflow-x: auto;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.6;
}
.prose pre code { padding: 0; background: none; border: 0; font-size: inherit; }

.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: .9rem;
}
.prose th, .prose td {
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--bg-inset); font-weight: 600; }
.prose td code { white-space: nowrap; }

.page-meta {
  margin-top: 3rem;
  color: var(--text-faint);
  font-size: .8rem;
}

/* headings anchors */

.prose h2 a[href^="#"], .prose h3 a[href^="#"], .prose h4 a[href^="#"] { color: inherit; }
.prose .heading-anchor { color: var(--text-faint); opacity: 0; margin-left: .4rem; }
.prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor { opacity: 1; }

/* callout */

.callout {
  display: flex;
  gap: .75rem;
  margin: 1.5rem 0;
  padding: .9rem 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
}
.callout-icon { flex-shrink: 0; margin-top: .22rem; color: var(--info); }
.callout-body > *:first-child { margin-top: 0; }
.callout-body > *:last-child { margin-bottom: 0; }
.callout-warning { border-left-color: var(--warning); }
.callout-warning .callout-icon { color: var(--warning); }
.callout-error { border-left-color: var(--error); }
.callout-error .callout-icon { color: var(--error); }

/* cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color .12s ease, background .12s ease;
}
a.card:hover {
  border-color: var(--border-strong);
  background: var(--bg-inset);
  text-decoration: none;
}
.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.card-body { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.card-title { font-weight: 600; font-size: .95rem; }
a.card .card-title { color: var(--accent); }
.card-subtitle { color: var(--text-muted); font-size: .85rem; line-height: 1.5; }

/* home */

.home {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding: 1rem var(--gutter);
}
.home-inner {
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: 0 3rem;
  align-items: center;
}

.home-lead { grid-column: 1; grid-row: 1; }

.home-heading {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.1rem;
}

.home-mark { line-height: 0; margin: 0; flex: none; }
.home-mark img { display: block; width: 88px; height: 88px; }

.home-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.03em;
  max-width: none;
}
.home-title strong { color: var(--accent-strong); font-weight: inherit; }

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 1.4rem 0 0;
}
.home-stats dt {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent);
  font-feature-settings: "tnum";
}
.home-stats dd {
  margin: .25rem 0 0;
  color: var(--text-faint);
  font-size: .76rem;
  letter-spacing: .03em;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
  margin: 1.5rem 0 0;
}
.home-cta {
  display: flex;
  align-items: center;
  padding: .55rem 1.5rem;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 650;
  font-size: .95rem;
  border-radius: var(--radius);
}
.home-cta:hover { background: #0369a1; text-decoration: none; }
.home-alt {
  display: flex;
  align-items: center;
  padding: .55rem 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .95rem;
  font-weight: 550;
}
.home-alt:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.home-note {
  margin: 1.75rem 0 0;
  max-width: 34rem;
  padding: .85rem 0 .85rem 1.1rem;
  border-left: 3px solid var(--patreon);
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.55;
}
.home-note p { margin: 0; }
.home-note p + p { margin-top: .25rem; }
.home-note strong { color: var(--text); font-weight: 650; }

/* right column: swarm visualization */

.home-viz {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: visible;
}

.home { position: relative; }

.home > .home-inner { position: relative; z-index: 1; }
.home-viz { position: relative; z-index: 1; }



/* after the first draw, redraws must not replay the intro */
.rig { width: 100%; max-width: 35rem; }
.rig svg { display: block; width: 100%; height: auto; overflow: visible; }

.cab {
  fill: none;
  stroke: var(--border);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw .6s ease-out both;
  animation-delay: var(--dl);
}
.cab-lit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  animation: fadein .5s ease-out both;
  animation-delay: var(--dl);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: .2; } }

@keyframes flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.pk {
  fill: var(--accent);
  offset-rotate: 0deg;
  animation: flow var(--dur) linear infinite both;
  animation-delay: var(--dl);
}
.pk-b { fill: var(--accent-dim); }

@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.blink1 { animation: blink 1.6s infinite; }
.blink2 { animation: blink 2.2s .5s infinite; }
/* router: the box every cable lands on */
.rt-shadow { fill: #000; opacity: .16; }
.rt-top { fill: #454b52; stroke: #16191d; stroke-width: 1.2; stroke-linejoin: round; }
.rt-lip { fill: none; stroke: #5a626b; stroke-width: 1; stroke-linejoin: round; opacity: .5; }
.rt-front { fill: #2f343a; stroke: #16191d; stroke-width: 1.2; stroke-linejoin: round; }
.rt-side { fill: #23282d; stroke: #16191d; stroke-width: 1.2; stroke-linejoin: round; }
.rt-panel { fill: #3a4046; stroke: #262b30; stroke-width: 1; stroke-linejoin: round; }
.rt-vent { fill: none; stroke: #262b30; stroke-width: 1.5; stroke-linecap: round; opacity: .9; }
.rt-notch { fill: #262b30; opacity: .8; }
.rt-ledwell { fill: #1b1f23; stroke: #16191d; stroke-width: .8; }
.rt-port { fill: #1b1f23; stroke: #121518; stroke-width: .8; stroke-linejoin: round; }
.rt-foot { fill: none; stroke: #16191d; stroke-width: 3; stroke-linecap: round; }
.rt-ant { fill: none; stroke: #3a4046; stroke-width: 4; stroke-linecap: round; }
.rt-ant-base { fill: none; stroke: #23282d; stroke-width: 6.5; stroke-linecap: round; }
.rt-ant-tip { fill: #454b52; }
.rt-patch { fill: none; stroke: var(--border); stroke-width: 2.5; stroke-linecap: round; }
.rt-led { fill: var(--ok); }
.rt-led-b { fill: var(--accent); }
.rt-led-c { fill: var(--warning); opacity: .55; }

@keyframes antl { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-2.5deg); } }
@keyframes antr { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }
.ant-l { transform-origin: 168px 128px; animation: antl 5.4s ease-in-out infinite; }
.ant-r { transform-origin: 214px 122px; animation: antr 6.1s ease-in-out infinite; }

/* desk scene: raster art masked so its edges dissolve into the page */
.scene-img {
  filter: saturate(.82) brightness(.9) contrast(1.04);
  opacity: .95;
  animation: fadein-scene 1.2s ease-out .3s both;
}
@keyframes fadein-scene { from { opacity: 0; } to { opacity: .95; } }

.pk-desk { fill: var(--accent-dim); }
.plug { fill: var(--accent); }
.plug-glow {
  fill: var(--accent);
  opacity: .18;
  transform-box: fill-box;
  transform-origin: center;
  animation: orbpulse 2.8s ease-in-out infinite;
}

/* router working hard: a puff of smoke off the vents and an occasional spark.
   both idle for most of an 8s cycle so it reads as an occasional strain */
.puff {
  fill: #cfd6de;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: puff 8s ease-out infinite;
}
.puff2 { animation-delay: .5s; }
.puff3 { animation-delay: 1s; }
@keyframes puff {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  4%   { opacity: .30; }
  14%  { opacity: .16; transform: translateY(-16px) scale(1.5); }
  24%  { opacity: 0; transform: translateY(-28px) scale(2.3); }
  100% { opacity: 0; transform: translateY(-28px) scale(2.3); }
}

.flash {
  fill: none;
  stroke: var(--warning);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  animation: flash 8s linear 3.2s infinite;
}
@keyframes flash {
  0%, 2%   { opacity: 0; }
  3%       { opacity: 1; }
  5%       { opacity: .2; }
  7%       { opacity: .9; }
  10%      { opacity: 0; }
  100%     { opacity: 0; }
}

.ember {
  fill: var(--warning);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ember 8s ease-out 3.2s infinite;
}
.ember2 { animation-delay: 3.45s; }
@keyframes ember {
  0%, 3% { opacity: 0; transform: translate(0, 0) scale(1); }
  4%     { opacity: 1; }
  12%    { opacity: 0; transform: translate(9px, 7px) scale(.3); }
  100%   { opacity: 0; transform: translate(9px, 7px) scale(.3); }
}

/* the ball the cables converge on, on top of the uplink port */
.orb-core { fill: var(--accent); }
.orb-ring { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .5; }
.orb-halo { fill: var(--accent); opacity: .1; }
@keyframes orbpulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.18); opacity: .18; }
}
.orb-ring, .orb-halo { transform-box: fill-box; transform-origin: center; }
.orb-ring { animation: orbpulse 2.8s ease-in-out infinite; }
.orb-halo { animation: orbpulse 2.8s ease-in-out .4s infinite; }

@media (prefers-reduced-motion: reduce) {
  .cab, .cab-lit, .pk, .blink1, .blink2, .stream-in, .stream-out,
  .ant-l, .ant-r, .orb-ring, .orb-halo, .scene-img, .plug-glow,
  .puff, .flash, .ember,
  .orb-ring { opacity: .5; }
  .orb-halo { opacity: .1; }
  .cab { stroke-dashoffset: 0; }
  .cab-lit { opacity: .2; }
  .scene-img { opacity: .95; }
  .plug-glow { opacity: .18; }
  .puff, .flash, .ember { opacity: 0; }
}

.home-blank {
  grid-column: 2;
  align-self: center;
  justify-self: center;
  position: relative;
  width: 15rem;
  padding: 2.1rem 1.4rem 1.9rem;
  background: #f5e06a;
  background-image: linear-gradient(160deg, #f7e77e 0%, #f2d95c 55%, #e8ca47 100%);
  color: #33302a;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 1.02rem;
  line-height: 1.55;
  text-align: center;
  transform: rotate(-2.5deg);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
}
.home-blank::before {
  content: "";
  position: absolute;
  top: -.6rem;
  left: 50%;
  width: 4.5rem;
  height: 1.5rem;
  transform: translateX(-50%) rotate(1.5deg);
  background: rgba(226, 232, 240, .38);
  border: 1px solid rgba(255, 255, 255, .25);
}
.home-blank p { margin: 0; }
.home-blank p:nth-child(1) { transform: rotate(-.6deg); }
.home-blank p:nth-child(2) { transform: rotate(.5deg) translateX(2px); }
.home-blank p:nth-child(4) { transform: rotate(.4deg) translateX(-1px); }
.home-blank p:nth-child(5) { transform: rotate(-.5deg) translateX(1px); }
.blank-gap { height: .75rem; }
@media (max-width: 860px) {
  .home { min-height: 0; align-items: flex-start; padding: 2.5rem var(--gutter) 3rem; }
  .home-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-viz { display: none; }
  .home-blank { grid-column: 1; margin-top: 2.25rem; }
  .home-stats { gap: 2.25rem; }
}

@media (max-height: 800px) and (min-width: 861px) {
  .home { padding: 1rem var(--gutter); }
  .home-heading { margin-bottom: .9rem; }
  .home-mark img { width: 72px; height: 72px; }
  .home-title { font-size: clamp(1.8rem, 2.9vw, 2.2rem); }
  .home-stats { margin-top: 1.1rem; }
  .home-stats dt { font-size: 1.5rem; }
  .home-actions { margin-top: 1.2rem; }
  .home-note { margin-top: 1.5rem; }
  .home-blank { font-size: 1rem; }
}

/* page nav */

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.page-nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  padding: .7rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: break-word;
}
.page-nav a:hover { border-color: var(--border-strong); background: var(--bg-raised); text-decoration: none; }
.page-nav > span { flex: 1 1 0; }
.page-nav a span { font-size: .75rem; color: var(--text-faint); }
.page-nav strong { font-size: .9rem; font-weight: 550; color: var(--accent); }
.page-nav-next { text-align: right; }

/* footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
}
.site-footer-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a { color: var(--text-muted); font-size: .85rem; font-weight: 500; }
.site-footer a:hover { color: var(--text); text-decoration: none; }
.footer-text { margin: 0; color: var(--text-faint); font-size: .85rem; }

.site-footer-inner > nav { flex: 1 1 auto; }
.footer-status, .footer-hash {
  margin: 0;
  flex: 0 1 auto;
  font-size: .85rem;
  color: var(--text-faint);
}
.footer-status { order: -1; }
.footer-status a { color: var(--text-faint); }
.footer-status[data-state="ok"] a { color: var(--text-muted); }
.footer-status[data-state="warn"] a,
.footer-status[data-state="unknown"] a { color: #e0a33e; }
.footer-status::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--text-faint);
  vertical-align: middle;
}
.footer-status[data-state="ok"]::before { background: #3fb950; }
.footer-status[data-state="warn"]::before,
.footer-status[data-state="unknown"]::before { background: #e0a33e; }
.footer-hash { margin-left: auto; }
.footer-hash code { font-size: .8rem; color: var(--text-faint); }

@media (max-width: 700px) {
  .footer-hash { margin-left: 0; }
}

.error-page { text-align: center; padding: 5rem 0; }
.error-page h1 { font-size: 4rem; margin-bottom: .5rem; }

/* responsive */

@media (max-width: 1200px) {
  .layout { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important; }
  .toc { display: none; }
}

@media (max-width: 900px) {
  .layout, .layout:not(:has(.sidebar)) { grid-template-columns: minmax(0, 1fr) !important; }
  .sidebar { display: none; }
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
  .content { max-width: var(--content-width); margin: 0 auto; padding-top: 2rem; }
  .prose h1 { font-size: 1.7rem; }
  .page-nav { flex-direction: column; }
  .page-nav > span { display: none; }
}

/* link list */

.prose .link-list { margin: 1.5rem 0; padding: 0; list-style: none; }
.prose .link-list li { margin: 0; border-bottom: 1px solid var(--border); }
.prose .link-list li:first-child { border-top: 1px solid var(--border); }
.prose .link-list a { display: block; padding: .7rem .25rem; font-weight: 500; }
.prose .link-list a:hover { text-decoration: none; }
.prose .link-list li:hover { background: var(--bg-raised); }
.link-desc { display: block; padding: 0 .25rem .7rem; margin-top: -.4rem; color: var(--text-muted); font-size: .9rem; }

.stream-in .pk { offset-path: path('M-357 120 C-320 106, -280 138, -238 124 C-198 110, -160 140, -124 129 C-100 122, -80 138, -62 133 C-50 130, -40 124, -30 124 C-18 123.4, -10 128, -8 134 C-6 140, -15 144, -20 140 C-25 136, -21 128, -12 127 C-4 126.6, 0 129, 4 132'); --dur: 2.8s; }
.stream-in .pk:nth-child(1) { --dl: -1.40s; }
.stream-in .pk:nth-child(2) { --dl: -1.17s; }
.stream-in .pk:nth-child(3) { --dl: -0.93s; }
.stream-in .pk:nth-child(4) { --dl: -0.70s; }
.stream-in .pk:nth-child(5) { --dl: -0.47s; }
.stream-in .pk:nth-child(6) { --dl: -0.23s; }
.stream-in .pk:nth-child(7) { --dl: 0.00s; }
.stream-in .pk:nth-child(8) { --dl: 0.23s; }
.stream-in .pk:nth-child(9) { --dl: 0.47s; }
.stream-in .pk:nth-child(10) { --dl: 0.70s; }
.stream-in .pk:nth-child(11) { --dl: 0.93s; }
.stream-in .pk:nth-child(12) { --dl: 1.17s; }
.stream-out .pk { offset-path: path('M98 127 C112 141, 130 168, 160 200 C190 232, 230 256, 269 267'); --dur: 5.0s; }
.stream-out .pk:nth-child(1) { --dl: -2.00s; }
.stream-out .pk:nth-child(2) { --dl: -1.44s; }
.stream-out .pk:nth-child(3) { --dl: -0.89s; }
.stream-out .pk:nth-child(4) { --dl: -0.33s; }
.stream-out .pk:nth-child(5) { --dl: 0.22s; }
.stream-out .pk:nth-child(6) { --dl: 0.78s; }
.stream-out .pk:nth-child(7) { --dl: 1.33s; }
.stream-out .pk:nth-child(8) { --dl: 1.89s; }
.stream-out .pk:nth-child(9) { --dl: 2.44s; }
.stream-desk .pk { offset-path: path('M112 124 C146 120, 186 110, 216 105 C232 102, 248 102, 257 102'); --dur: 4.8s; }
.stream-desk .pk:nth-child(1) { --dl: -2.40s; }
.stream-desk .pk:nth-child(2) { --dl: -1.71s; }
.stream-desk .pk:nth-child(3) { --dl: -1.03s; }
.stream-desk .pk:nth-child(4) { --dl: -0.34s; }
.stream-desk .pk:nth-child(5) { --dl: 0.34s; }
.stream-desk .pk:nth-child(6) { --dl: 1.03s; }
.stream-desk .pk:nth-child(7) { --dl: 1.71s; }
.rig .sv1 { --len:180; --dl:0.75s; }
.rig .sv2 { --dl:1.15s; }
.rig .sv3 { --len:240; --dl:0.6s; }
.rig .sv4 { --dl:1.0s; }
.rig .sv5 { --len:440; --dl:0.3s; }
.rig .sv6 { --dl:0.7s; }
.rig .sv7 { opacity:.4; }

.files-crumbs { margin: -.5rem 0 1rem; color: var(--text-muted); font-family: var(--font-mono); font-size: .9rem; overflow-wrap: anywhere; }
.files-sep { margin: 0 .35rem; color: var(--text-faint); }
.prose .files-table { display: table; table-layout: auto; }
.files-name { width: 100%; overflow-wrap: anywhere; }
.files-name a { font-family: var(--font-mono); }
.prose .files-size, .prose .files-date { color: var(--text-muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.files-empty { color: var(--text-faint); }
@media (max-width: 640px) { .prose .files-date { display: none; } }