/* Self-hosted so no request leaves for a third party and the page does
   not block on fonts.gstatic.com. Both families are OFL licensed.
   latin-ext carries the Turkish glyphs -- dropping it breaks ı, ş, ğ. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public site. Generated into /assets/site.css with the Pygments rules
   appended; nothing here is loaded from a third party. */

/* The palette is taken from a scope screen: a dark phosphor field with the
   channel colours on it, CH1 amber and CH2 cyan, set against warm paper for
   the reading surface. Teal and amber are complementary, which is what gives
   the page its contrast without either colour having to shout. The accent
   used for text is a deeper teal than the trace, because the trace colour
   does not reach a readable contrast on paper. */
:root {
  --bg: #f4f1ea;
  --bg-soft: #ebe6da;
  --panel: #fbf9f4;
  --fg: #0e1318;
  --fg-soft: #2a3239;
  --muted: #5c656c;
  --rule: #ddd7ca;
  --rule-strong: #bab3a4;
  --accent: #08706a;
  --accent-soft: #dcede8;
  --on-accent: #ffffff;
  /* CH1. Only ever a lamp, a line or a fill: as text on paper it is not
     readable. */
  --amber: #f5a524;
  --warn-text: #8a5300;
  --scope-a: #0e2a31;
  --scope-b: #09171d;
  --scope-c: #050b0e;
  --scope-fg: #f1f4ef;
  --scope-muted: #9fd9cf;
  --scope-rule: rgba(159, 217, 207, .22);
  --trace-1: #ffb224;
  --trace-2: #45e0cf;
  --shadow: 0 1px 2px rgba(14, 19, 24, .05), 0 12px 32px rgba(14, 19, 24, .09);
  --radius: 8px;
  --measure: 40rem;
  --measure-wide: 72rem;
  color-scheme: light;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0f13;
    --bg-soft: #141a1f;
    --panel: #10161b;
    --fg: #edf0ea;
    --fg-soft: #c5cbc6;
    --muted: #8b969b;
    --rule: #1f282e;
    --rule-strong: #35414a;
    --accent: #45d8c6;
    --accent-soft: #0f2b2a;
    --on-accent: #051311;
    --warn-text: #f5b54a;
    --scope-a: #0c2329;
    --scope-b: #081419;
    --scope-c: #0b0f13;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f13;
  --bg-soft: #141a1f;
  --panel: #10161b;
  --fg: #edf0ea;
  --fg-soft: #c5cbc6;
  --muted: #8b969b;
  --rule: #1f282e;
  --rule-strong: #35414a;
  --accent: #45d8c6;
  --accent-soft: #0f2b2a;
  --on-accent: #051311;
  --warn-text: #f5b54a;
  --scope-a: #0c2329;
  --scope-b: #081419;
  --scope-c: #0b0f13;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The footer floated mid-screen on short pages such as the 404. */
  min-height: 100dvh; display: flex; flex-direction: column;
}
/* width: 100% because body is a flex column: with auto side margins a flex
   item shrinks to its content, and a page of narrow cards came out narrower
   than the bar above it. */
main { flex: 1 0 auto; width: 100%; }

a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip {
  position: absolute; left: -9999px; top: 0; padding: .6rem 1rem;
  background: var(--accent); color: var(--on-accent); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; z-index: 10; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
.wrap.wide { max-width: var(--measure-wide); }
@media (min-width: 40rem) { .wrap.wide { padding: 0 1.5rem; } }

/* A leading dot before every span after the first, so "role · place" needs no
   separator characters in the template. */
.dot::before { content: "·"; margin: 0 .45rem; opacity: .7; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  position: sticky; top: 0; z-index: 5;
}
.bar {
  max-width: var(--measure); margin: 0 auto; padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* The template asks for a wide bar on the wide pages; without this rule the
   header sat narrower than everything under it. */
.bar.wide { max-width: var(--measure-wide); }
@media (min-width: 40rem) { .bar.wide { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* The mark IS the D, so the word beside it is "ukasol". Sizes come straight
   from the brand pack: word = .9 x mark height, with a -.095 overlap. */
.brand {
  --mark: 30px;
  display: inline-flex; align-items: baseline; gap: 0;
  text-decoration: none; color: var(--accent);
}
.brand .mark {
  width: var(--mark); height: calc(var(--mark) * .82); flex: none;
  margin-right: calc(var(--mark) * -.095);
}
.brand .word {
  font: 600 calc(var(--mark) * .9) / 1 var(--display);
  letter-spacing: -.03em; color: var(--fg);
}
.brand:hover .word { color: var(--accent); }
.bar nav { display: flex; align-items: center; gap: 1.1rem; font-size: .9rem; }
.bar nav a { color: var(--muted); text-decoration: none; padding: .55rem .25rem; }
.bar nav a:hover, .bar nav a.here { color: var(--fg); }
.bar nav a.here { box-shadow: inset 0 -2px 0 var(--accent); }

.theme {
  border: 1px solid var(--rule); background: transparent; color: var(--muted);
  border-radius: 999px; width: 2.5rem; height: 2.5rem; padding: 0;
  cursor: pointer; display: grid; place-items: center;
}
.theme:hover { color: var(--fg); border-color: var(--accent); }

/* ------------------------------------------------------------------- page */

main.wrap { padding-top: 3.5rem; padding-bottom: 4rem; }
/* Both edges restated: .wrap.wide's padding shorthand is more specific than
   main.wrap and used to zero the bottom, so content ran into the footer. */
main.wrap.wide { padding-top: 3rem; padding-bottom: 4.5rem; }
/* Sections carry their own vertical rhythm on the front page. */
main.wrap.home { padding-top: 0; padding-bottom: 1rem; }

.hero { margin-bottom: 2.5rem; }
.hero h1 {
  margin: 0 0 .5rem; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem);
  letter-spacing: -.035em; font-weight: 600; line-height: 1.08;
  font-family: var(--display);
}
.role { margin: 0; color: var(--muted); display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; }

.block { margin-top: 3rem; }
.block > h2 {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent); margin: 0 0 1rem; font-weight: 400;
}

.more { margin: 1.4rem 0 0; font-size: .92rem; }
.more a { color: var(--accent); text-decoration: none; font-weight: 600; }
.more a:hover { text-decoration: underline; }

.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.links a {
  display: inline-block; padding: .4rem .85rem; border: 1px solid var(--rule);
  border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--muted);
}
.links a:hover { color: var(--fg); border-color: var(--accent); background: var(--accent-soft); }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.tag {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .03em;
  color: var(--accent); background: var(--accent-soft);
  padding: .12rem .45rem; border-radius: 4px; text-decoration: none;
}
a.tag:hover { color: var(--fg); }

/* A two-way segmented switch: the version being read is filled, the other
   is a plain link beside it. */
.langswitch {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--rule); border-radius: 999px; font-size: .8rem;
}
.langswitch a, .langswitch span {
  padding: .22rem .75rem; border-radius: 999px; line-height: 1.45; text-decoration: none;
}
.langswitch a { color: var(--muted); }
.langswitch a:hover { color: var(--fg); background: var(--bg-soft); }
.langswitch [aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ======================================================================
   The scope field
   Every banner on the site is the same dark screen: graticule, phosphor
   glow, channel colours. The brand mark is a D drawn as an instrument with
   a pulse inside; this is the same idea at page size.
   ====================================================================== */

.scope {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--scope-fg);
  background:
    radial-gradient(80% 90% at 88% 0%, rgba(69, 224, 207, .14), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(255, 178, 36, .07), transparent 60%),
    linear-gradient(165deg, var(--scope-a) 0%, var(--scope-b) 58%, var(--scope-c) 100%);
  border-bottom: 1px solid var(--rule);
}
.graticule {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 235, 220, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 235, 220, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center -1px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 90%);
}

.eyebrow {
  margin: 0 0 1.1rem; font-family: var(--mono); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em; line-height: 1.5; color: var(--scope-muted);
  display: flex; align-items: baseline; gap: .65rem;
}
/* The channel-on lamp. */
.eyebrow::before, .now .period::before {
  content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 0 rgba(245, 165, 36, .5);
}
.statement {
  margin: 1.4rem 0 0; max-width: 36rem;
  font-size: clamp(1.08rem, .98rem + .5vw, 1.32rem); line-height: 1.55;
  color: rgba(241, 244, 239, .84);
}
.statement a { color: var(--trace-2); text-decoration: none; }

.links.onfield a {
  border-color: rgba(159, 217, 207, .35); color: #e6f4f1; background: rgba(255, 255, 255, .04);
}
.links.onfield a:hover { background: var(--trace-2); color: #06201c; border-color: var(--trace-2); }

.scope .langswitch { border-color: rgba(159, 217, 207, .3); }
.scope .langswitch a { color: rgba(241, 244, 239, .72); }
.scope .langswitch a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.scope .langswitch [aria-current] { background: rgba(69, 224, 207, .18); color: #8ff0e3; }

/* Corner ticks, as on a viewfinder or a measurement window. */
.ticked {
  --tick: rgba(159, 217, 207, .75);
  margin: 0; padding: 12px; flex: none;
  background:
    linear-gradient(var(--tick) 0 0) left top / 18px 1.5px,
    linear-gradient(var(--tick) 0 0) left top / 1.5px 18px,
    linear-gradient(var(--tick) 0 0) right top / 18px 1.5px,
    linear-gradient(var(--tick) 0 0) right top / 1.5px 18px,
    linear-gradient(var(--tick) 0 0) left bottom / 18px 1.5px,
    linear-gradient(var(--tick) 0 0) left bottom / 1.5px 18px,
    linear-gradient(var(--tick) 0 0) right bottom / 18px 1.5px,
    linear-gradient(var(--tick) 0 0) right bottom / 1.5px 18px;
  background-repeat: no-repeat;
}
.ticked img { display: block; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }

.trace {
  display: block; width: 100%; height: clamp(64px, 7vw, 104px);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.trace.slim { height: clamp(44px, 4.5vw, 64px); margin-top: 1.5rem; }
/* preserveAspectRatio="none" stretches the drawing to any width; this keeps
   the line itself from being stretched with it. */
.trace path {
  fill: none; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
}
/* A little bloom, the way a phosphor trace glows. */
.trace .ch1 { stroke: var(--trace-1); stroke-width: 1.75; filter: drop-shadow(0 0 5px rgba(255, 178, 36, .55)); }
.trace .ch2 { stroke: var(--trace-2); stroke-width: 1.25; opacity: .65; }

/* ------------------------------------------------------- front page */

/* Two classes, or .wrap.wide's side padding wins and takes the top with it. */
.scope .scopegrid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3.5rem; align-items: center;
  padding-top: clamp(3rem, 1.5rem + 5vw, 6rem);
}
.scopetext { min-width: 0; }
.scopetext h1 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.045em; color: var(--scope-fg);
}
.scopemeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.loc {
  margin: 0; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--scope-muted);
}
.icon-inline { width: 1rem; height: 1rem; flex: none; }
/* The portrait is a cutout standing on the field, not a photo in a box: no
   frame or shadow, and a soft glow behind the head so dark hair does not sink
   into the dark field. The photo was cropped tight at the shoulders and the
   chest, which left straight cuts once the background was gone; the two
   masks fade the bottom and taper the shoulders, and only the area both
   keep is drawn. */
.portrait { position: relative; isolation: isolate; }
.portrait::before {
  content: ""; position: absolute; inset: 6% 2% 14%; z-index: -1;
  background: radial-gradient(closest-side at 50% 42%, rgba(69, 224, 207, .26),
                              rgba(69, 224, 207, .08) 62%, transparent);
}
.portrait img {
  width: 12.5rem; height: auto; border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(#000 74%, transparent 99%),
                      radial-gradient(ellipse 62% 78% at 50% 38%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 74%, transparent 99%),
              radial-gradient(ellipse 62% 78% at 50% 38%, #000 72%, transparent 100%);
  mask-composite: intersect;
}

.readout {
  margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.readout > div {
  position: relative; min-width: 0;
  padding: 1rem 1.25rem 1.6rem 0; border-top: 1px solid var(--scope-rule);
}
/* A scale tick at the start of each readout rather than a divider, so the
   row can wrap to any number of columns without a stray rule. */
.readout > div::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 1px; height: 9px; background: var(--scope-muted);
}
.readout dt {
  margin: 0 0 .3rem; font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--scope-muted);
}
.readout dd {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  line-height: 1.3; letter-spacing: -.01em; color: var(--scope-fg);
}

@media (max-width: 46rem) {
  /* The DOM order is text then portrait; on a narrow screen the face belongs
     above the name, not after the links. */
  .scope .scopegrid { grid-template-columns: 1fr; }
  .portrait { order: -1; justify-self: start; padding: 8px; }
  .portrait img { width: 6.5rem; }
}

/* ---------------------------------------------------- blog index band */

.scope .bandgrid { padding-top: clamp(2.75rem, 1.5rem + 4vw, 4.75rem); }
.bandgrid h1 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.04em; color: var(--scope-fg);
}
.bandgrid .langswitch { margin-top: 1.6rem; }

/* ------------------------------------------------------- post banner */

.scope .postherogrid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 2.5rem 3.5rem; align-items: center;
  padding-top: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}
.scope .postherogrid.nocover { grid-template-columns: minmax(0, 48rem); }
.kicker {
  margin: 0 0 .7rem; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}
.kicker a { text-decoration: none; }
.postintro { min-width: 0; }
.postintro .kicker { color: var(--scope-muted); margin-bottom: 1.1rem; }
.postintro .kicker a { color: var(--trace-2); }
.postintro .kicker a:hover { color: var(--scope-fg); }
.postintro h1 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.3rem);
  line-height: 1.07; letter-spacing: -.035em; color: var(--scope-fg);
}
.postintro .dek {
  margin: 1.15rem 0 0; max-width: 38rem;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem); line-height: 1.6;
  color: rgba(241, 244, 239, .8);
}
.postmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: 1.75rem;
}
.postmeta .stamp { margin: 0; color: var(--scope-muted); }
.postart { min-width: 0; }
.postart img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 56rem) {
  .scope .postherogrid { grid-template-columns: 1fr; }
  .postart { max-width: 34rem; }
}

/* ======================================================================
   Front page sections
   A numbered label in the left column and the content in the right, the
   layout of a datasheet. The label sticks while its section scrolls past.
   ====================================================================== */

.section {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 1.5rem 3rem;
  padding: clamp(3rem, 2rem + 3vw, 5rem) 0;
  border-top: 1px solid var(--rule);
}
.section:first-child { border-top: 0; }

.sectionhead {
  position: sticky; top: 5.5rem; align-self: start;
  display: flex; flex-direction: column; gap: .55rem;
}
.sectionhead .num {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; color: var(--accent);
}
.sectionhead .num::after {
  content: ""; width: 2.5rem; height: 1px; background: currentColor; opacity: .5;
}
.sectionhead h2 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: 1.4rem; line-height: 1.2; letter-spacing: -.025em;
}
.sectionintro {
  margin: 0 0 2.25rem; max-width: 40rem; color: var(--muted); font-size: 1.05rem;
}

@media (max-width: 56rem) {
  .section { grid-template-columns: 1fr; }
  .sectionhead { position: static; flex-direction: row; align-items: baseline; gap: .9rem; }
  .sectionhead .num::after { display: none; }
}

/* ---------------------------------------------------------------- about */

.lead { max-width: 40rem; }
.lead p { color: var(--fg-soft); font-size: 1.06rem; }
.lead p:first-child {
  color: var(--fg); font-size: clamp(1.2rem, 1.02rem + .7vw, 1.45rem);
  line-height: 1.5; letter-spacing: -.012em;
}
.lead a { color: var(--accent); }

/* ---------------------------------------------------------------- areas */

.areas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem;
}
@media (max-width: 40rem) { .areas { grid-template-columns: 1fr; } }

.area { position: relative; padding: 1.75rem 0 2.1rem; border-top: 1px solid var(--rule); }
.area::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.3, .7, .2, 1);
}
.area:hover::before { transform: scaleX(1); }
.area .icon { display: block; width: 2.25rem; height: 2.25rem; color: var(--accent); margin-bottom: 1rem; }
.area h3 {
  margin: 0 0 .5rem; font-family: var(--display); font-weight: 600;
  font-size: 1.16rem; line-height: 1.25; letter-spacing: -.02em;
}
.area p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }

/* Every item carries its separator, and the list is pulled left by one
   separator width and clipped there: whichever item starts a line has its
   slash cut off, so a wrapped line never begins with one. */
.tools {
  --sep: 1.6em;
  list-style: none; margin: 1rem 0 0 calc(var(--sep) * -1); padding: 0;
  clip-path: inset(0 0 0 var(--sep));
  display: flex; flex-wrap: wrap; row-gap: .15rem;
  font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--fg-soft);
}
.tools li::before {
  content: "/"; content: "/" / ""; display: inline-block; width: var(--sep);
  text-align: center; color: var(--rule-strong);
}

/* ----------------------------------------------------------- experience */

.roles { list-style: none; margin: 0; padding: 0; }
.rolerow {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .35rem 2rem;
  padding: 1.6rem 0; border-top: 1px solid var(--rule);
}
.rolerow:first-child { border-top: 0; padding-top: .2rem; }
.period {
  margin: .25rem 0 0; font-family: var(--mono); font-size: .72rem; line-height: 1.5;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: baseline; gap: .55rem;
}
.now .period { color: var(--fg); }
.rolerow h3 {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: 1.12rem; line-height: 1.3; letter-spacing: -.02em;
}
.org { margin: .2rem 0 0; font-size: .95rem; }
.org strong { font-weight: 600; }
.note { margin: .6rem 0 0; max-width: 42rem; color: var(--muted); font-size: .96rem; line-height: 1.6; }
@media (max-width: 40rem) { .rolerow { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- closing */

.closingtext {
  margin: 0 0 1.75rem; max-width: 34rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem);
  line-height: 1.25; letter-spacing: -.025em;
}
.buttons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.mailwords { margin: .9rem 0 0; font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.25rem; border-radius: 999px; border: 1px solid var(--rule-strong);
  font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--fg);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.button:hover { border-color: var(--accent); color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--fg)); color: var(--on-accent);
}

/* ------------------------------------------------------------------ prose */

.prose { max-width: 100%; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.prose a { text-decoration-color: var(--accent); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent); }
.prose h3 { font-family: var(--display); font-size: 1.08rem; margin: 2rem 0 .6rem;
             letter-spacing: -.015em; }
/* A section label in the page chrome is mono smallcaps; a heading inside a
   piece of writing is a heading. */
.prose h2 {
  font-family: var(--display); font-size: 1.3rem; font-weight: 600;
  line-height: 1.25; letter-spacing: -.02em; text-transform: none;
  color: var(--fg); margin: 2.75rem 0 .75rem;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.prose strong { color: var(--fg); }

.prose blockquote {
  margin: 0 0 1.15rem; padding: .2rem 0 .2rem 1.1rem;
  border-left: 2px solid var(--accent); color: var(--muted);
}

.prose code {
  font-family: var(--mono);
  font-size: .85em; background: var(--accent-soft); padding: .12em .35em;
  border-radius: 4px;
  /* A long generated identifier would otherwise widen the page on a phone.
     break-word, not anywhere: it leaves min-content alone, so a table still
     scrolls instead of squeezing its columns. */
  overflow-wrap: break-word;
}
.prose pre {
  font-family: var(--mono);
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .9rem 1rem; overflow-x: auto;
  margin: 0 0 1.4rem; font-size: .85rem; line-height: 1.55;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose .highlight { background: none; }

.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .92rem;
}
.prose .tablewrap { overflow-x: auto; margin: 0 0 1.4rem; }
.prose .tablewrap table { margin: 0; }
/* A file name keeps its case even in an uppercase table header. */
.prose th code { text-transform: none; }
.prose th, .prose td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); }
.prose th { color: var(--muted); font-family: var(--mono); font-size: .74rem;
            font-weight: 400; text-transform: uppercase; letter-spacing: .07em; }

.prose figure { margin: 2rem 0; width: 100%; }
.prose figure img, .prose p > img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--rule);
  background: var(--bg-soft);
}
.prose .img-link { display: block; text-decoration: none; }
.prose figcaption {
  margin-top: .55rem; font-size: .82rem; color: var(--muted);
  text-align: center; line-height: 1.5;
}

/* ======================================================================
   A post
   The datasheet layout again: a rail on the left with the contents, the
   series and the tags, and the text on the right. The text keeps a reading
   measure; code and figures may use the whole column, since a listing or a
   schematic is unreadable at 44rem.
   ====================================================================== */

.postgrid {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr);
  grid-template-areas: "rail post"; gap: 2rem 3.5rem; align-items: start;
}
.post { grid-area: post; min-width: 0; }
.postrail {
  grid-area: rail; position: sticky; top: 5.5rem;
  max-height: calc(100dvh - 7rem); overflow-y: auto; padding-bottom: 1rem;
}

.post .prose { font-size: 1.08rem; line-height: 1.75; counter-reset: h2; }
.post .prose > * { max-width: 44rem; }
.post .prose > .highlight, .post .prose > pre, .post .prose > figure,
.post .prose > table { max-width: none; }
.post .prose > p:first-child { font-size: 1.18rem; color: var(--fg); }
.post .prose p, .post .prose li { color: var(--fg-soft); }
/* Headings are numbered like datasheet sections, and the contents in the
   rail count the same way, so "03" means one thing on the page. */
.post .prose h2 { font-size: 1.55rem; margin: 3.25rem 0 .9rem; scroll-margin-top: 5.5rem; }
.post .prose h2::before {
  counter-increment: h2; content: counter(h2, decimal-leading-zero);
  display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .1em; color: var(--accent);
}
.post .prose h3 { scroll-margin-top: 5.5rem; }

.railhead {
  margin: 0 0 .7rem; font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}
.toc ol, .railseries ol { list-style: none; margin: 0; padding: 0; }
.toc ol { counter-reset: toc; border-left: 1px solid var(--rule); }
.toc a {
  display: flex; gap: .6rem; margin-left: -1px; padding: .32rem 0 .32rem .85rem;
  border-left: 2px solid transparent; color: var(--muted); text-decoration: none;
  font-size: .86rem; line-height: 1.4;
}
.toc a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: .72rem; padding-top: .1rem; color: var(--rule-strong);
}
.toc a:hover { color: var(--fg); border-left-color: var(--accent); }

.railseries, .railtags { margin-top: 2.25rem; }
.postrail > :first-child { margin-top: 0; }
.railseries li {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .2rem;
  padding: .3rem 0; font-size: .86rem; line-height: 1.4; color: var(--muted);
}
.railseries .n { font-family: var(--mono); font-size: .72rem; padding-top: .1rem; color: var(--rule-strong); }
.railseries a { color: var(--muted); text-decoration: none; }
.railseries a:hover { color: var(--accent); }
.railseries .current { color: var(--fg); font-weight: 600; }
.railseries .current .n { color: var(--amber); }

.author {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  max-width: 44rem; margin-top: 3.5rem; padding: 1.25rem 1.35rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
}
.author img {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  border: 1px solid var(--rule);
  /* The cutout is transparent; this is the disc it sits on. */
  background: radial-gradient(circle at 50% 40%, var(--accent-soft), var(--bg-soft));
}
.authortext { min-width: 0; flex: 1 1 12rem; }
.authortext p { margin: 0; }
.authorname { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; }
.authorname a { text-decoration: none; }
.authorname a:hover { color: var(--accent); }
.authorrole { color: var(--muted); font-size: .9rem; }

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 44rem; margin-top: 1.25rem;
}
.pager a {
  display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.2rem;
  border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.pager a:hover { border-color: var(--accent); background: var(--panel); }
.pager span { font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
              letter-spacing: .1em; color: var(--accent); }
.pager strong { font-family: var(--display); font-weight: 600; font-size: 1rem;
                line-height: 1.3; letter-spacing: -.015em; }
.pager .next { text-align: right; grid-column: 2; }

@media (max-width: 56rem) {
  .postgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "post" "rail"; }
  .postrail { position: static; max-height: none; overflow: visible;
              border-top: 1px solid var(--rule); padding-top: 2rem; }
  /* The contents are for jumping around a long page on a wide screen; at
     the end of the article on a phone they would point backwards. */
  .toc { display: none; }
  .postrail > .railseries:first-of-type { margin-top: 0; }
}
@media (max-width: 30rem) {
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; text-align: left; }
}

/* ------------------------------------------------------------- post cards */

.cards {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.cards.index { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; }
.sectionbody .cards { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
.card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.cardart { display: block; background: var(--bg-soft); overflow: hidden; }
.cardart img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .cardart img { transform: scale(1.03); }
.cardbody {
  display: flex; flex-direction: column; gap: .45rem; flex: 1;
  padding: 1rem 1.1rem 1.15rem;
}
.cardbody h2, .cardbody h3 {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.02em; line-height: 1.3;
}
.card:hover .cardbody h2, .card:hover .cardbody h3 { color: var(--accent); }
.cardbody .dek { color: var(--muted); font-size: .88rem; line-height: 1.55; }
/* Tags are pushed to the card's bottom edge so they line up across a row
   however long the summary runs. */
.cardbody .tags { margin-top: auto; padding-top: .35rem; }
.stamp { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.cardlabel {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent); display: flex; align-items: center; gap: .5rem;
}
.cardlabel::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--amber);
}

/* The latest post, laid out wide across the top of the index. */
.card.feature {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.card.feature .cardbody { justify-content: center; gap: .7rem; padding: 2rem 2.25rem; }
.card.feature h2 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.95rem); line-height: 1.18; letter-spacing: -.03em; }
.card.feature .dek { font-size: 1rem; }
.card.feature .tags { margin-top: .4rem; }
@media (max-width: 46rem) {
  .card.feature { grid-template-columns: 1fr; }
  .card.feature .cardbody { padding: 1.1rem 1.1rem 1.25rem; }
}

/* One column of cards on a phone means 16:9 art repeated down the screen. The
   wide variant of the same drawing says the same thing in a fifth of the
   height. */
@media (max-width: 36rem) {
  .cardart.generated img { aspect-ratio: 5 / 1; }
}

/* ----------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); color: var(--muted); font-size: .85rem; }
.footgrid {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: 1.5rem; padding-bottom: 2.5rem;
}
.foot p { margin: 0; }
.footlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footlinks a { color: var(--muted); text-decoration: none; }
.footlinks a:hover { color: var(--accent); }

/* ------------------------------------------------------------ typography */

/* Turkish compounds wrap badly and strand a single word on the last line.
   Progressive enhancement: a browser without it draws what it drew before. */
.scopetext h1, .bandgrid h1, .postintro h1, .hero h1, .closingtext, .area h3,
.cardbody h2, .cardbody h3, .pager strong { text-wrap: balance; }
.prose p, .statement, .sectionintro, .area p, .note, .postintro .dek { text-wrap: pretty; }

/* ----------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .scopetext > *, .portrait, .postintro > *, .postart, .bandgrid > * {
    animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
  }
  .scopetext > :nth-child(2), .postintro > :nth-child(2), .bandgrid > :nth-child(2) { animation-delay: .06s; }
  .scopetext > :nth-child(3), .postintro > :nth-child(3), .bandgrid > :nth-child(3) { animation-delay: .12s; }
  .scopetext > :nth-child(4), .postintro > :nth-child(4), .bandgrid > :nth-child(4) { animation-delay: .18s; }
  .portrait, .postart { animation-delay: .1s; }

  /* The trace sweeps like a scope beam, over and over: the head draws it
     left to right, it holds, then the tail follows the same way and it is
     gone, and the next one starts from the left. The two edges of a soft
     mask are moved by registered properties; the tail edge is the softer
     one, the way phosphor fades behind the beam. */
  .trace {
    -webkit-mask-image: linear-gradient(90deg, transparent var(--tail), #000 calc(var(--tail) + 10%),
                                        #000 calc(var(--head) - 3%), transparent var(--head));
    mask-image: linear-gradient(90deg, transparent var(--tail), #000 calc(var(--tail) + 10%),
                                #000 calc(var(--head) - 3%), transparent var(--head));
    animation: sweep 4.5s cubic-bezier(.45, 0, .25, 1) .3s infinite both;
  }

  .eyebrow::before, .now .period::before { animation: lamp 2.6s ease-in-out infinite; }

  /* Scroll-linked where supported; elsewhere everything is simply there. */
  @supports (animation-timeline: view()) {
    .area, .rolerow, .sectionbody .card, .cards.index .card {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 1rem; } }
/* Registered so they interpolate; an unregistered custom property would
   jump from one keyframe to the next. Out of the animation both edges sit
   past the ends of the line, so it is drawn in full. */
@property --head { syntax: "<percentage>"; inherits: false; initial-value: 103%; }
@property --tail { syntax: "<percentage>"; inherits: false; initial-value: -12%; }
/* Draw, hold, erase, a short gap. Head at -3% or tail at 100% hides the
   whole line, so the jump from the last keyframe back to the first is
   invisible. */
@keyframes sweep {
  0%   { --head: -3%;  --tail: -12%; }
  40%  { --head: 103%; --tail: -12%; }
  55%  { --head: 103%; --tail: -12%; }
  92%  { --head: 103%; --tail: 100%; }
  100% { --head: 103%; --tail: 100%; }
}
@keyframes lamp {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .5); }
  60% { box-shadow: 0 0 0 6px rgba(245, 165, 36, 0); }
}

/* ======================================================================
   Illustrations
   All inline SVG and CSS, coloured from the theme tokens so both modes
   come for free. The undrawn starting states only exist under html.js with
   reduced motion off; everyone else sees every drawing finished.
   ====================================================================== */

/* ------------------------------------------------ the board beside About */

.aboutgrid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: 2rem 3rem; align-items: start;
}
.board { margin: 0; }
.pcb {
  display: block; width: 100%; height: auto; overflow: visible;
  --pcb: color-mix(in srgb, var(--accent) 6%, var(--panel));
  --copper: color-mix(in srgb, var(--accent) 58%, var(--panel));
  --part: var(--fg-soft);
}
.pcb-outline { fill: var(--pcb); stroke: var(--rule-strong); stroke-width: 1.5; }
.pcb-pad { stroke: var(--copper); stroke-width: 3; }
.pcb-hole { fill: var(--bg); stroke: var(--rule-strong); stroke-width: 1; }
.pcb-copper path { stroke: var(--copper); stroke-width: 2.4; }
.pcb-parts > * { fill: var(--panel); stroke: var(--part); stroke-width: 1.4; }
.pcb-parts .pcb-lid { fill: none; stroke-dasharray: 3 3; opacity: .55; }
.pcb-parts .pcb-pads { fill: none; stroke: var(--copper); stroke-width: 3; }
.pcb-balls circle { fill: var(--part); opacity: .35; }
.pcb-mark { stroke: var(--accent); stroke-width: 2.2; }
/* A short dash with a gap longer than the whole trace: parked at the start
   it shows nothing, so the packets are invisible until they are sent. */
.pcb-packets path {
  stroke: var(--amber); stroke-width: 3.2; stroke-dasharray: .08 2; stroke-dashoffset: .08;
  filter: drop-shadow(0 0 3px rgba(245, 165, 36, .8));
}
.pcb-packets .k-bus, .pcb-packets .k-rf { stroke: var(--trace-2); filter: drop-shadow(0 0 3px rgba(69, 224, 207, .8)); }
.pcb-led { fill: var(--amber); stroke: color-mix(in srgb, var(--amber) 55%, var(--fg)); stroke-width: 1; }
.pcb-silk text { fill: var(--muted); stroke: none; font: 400 8px var(--mono); letter-spacing: .06em; }

@media (max-width: 64rem) {
  .aboutgrid { grid-template-columns: minmax(0, 1fr); }
  .board { max-width: 15rem; }
}

/* ------------------------------------------------ functional block diagram */

.blockdiagram {
  --gap: 2rem;
  margin: 0 0 2.75rem; padding: 1.3rem 1.5rem 1.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background:
    linear-gradient(color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--panel);
}
.blockdiagram .railhead { margin-bottom: 1.1rem; }
.chain {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gap);
}
.stage {
  position: relative; display: flex; flex-direction: column; gap: .25rem;
  padding: .8rem .8rem .9rem; background: var(--bg);
  border: 1px solid var(--rule-strong); border-radius: 6px;
  transition: border-color .2s ease, transform .2s ease;
}
.stagelink { display: flex; flex-direction: column; gap: .25rem; height: 100%; color: inherit; text-decoration: none; }
.stage .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-bottom: .35rem; }
.stage strong { font-family: var(--display); font-weight: 600; font-size: .92rem; line-height: 1.2; letter-spacing: -.01em; }
.stage span { font-size: .76rem; line-height: 1.4; color: var(--muted); }
.stage.core { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stage:hover { border-color: var(--accent); transform: translateY(-2px); }
/* The wire from the previous block, and the packet that rides it. */
.stage + .stage::before {
  content: ""; position: absolute; top: 50%; left: calc(var(--gap) * -1 - 1px);
  width: var(--gap); height: 2px; background: var(--rule-strong);
}
.stage + .stage::after {
  content: ""; position: absolute; top: calc(50% - 3px); left: calc(var(--gap) * -1 - 1px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 8px rgba(245, 165, 36, .85); opacity: 0;
}

.rails {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem var(--gap);
}
.rails li {
  grid-column: var(--from) / var(--to);
  position: relative; padding: .38rem .75rem .38rem 1.45rem;
  font-family: var(--mono); font-size: .7rem; line-height: 1.35; letter-spacing: .03em; color: var(--fg-soft);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--rule)); border-radius: 4px;
  transition: border-color .2s ease;
}
.rails li::before {
  content: ""; position: absolute; left: .62rem; top: 50%; width: .36rem; height: .36rem;
  margin-top: -.18rem; border-radius: 50%; background: var(--accent);
}
.rails li:hover { border-color: var(--accent); }
.rails a { color: inherit; text-decoration: none; }

.area.lit::before { transform: scaleX(1); }
.area.lit h3 { color: var(--accent); }

@media (max-width: 46rem) {
  .blockdiagram { --gap: 1.4rem; padding: 1.1rem; }
  .chain { grid-template-columns: minmax(0, 1fr); gap: var(--gap) 0; }
  .stagelink { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: .75rem; align-items: center; }
  .stage .icon { grid-row: span 2; margin: 0; }
  .stage + .stage::before { top: calc(var(--gap) * -1 - 1px); left: 1.52rem; width: 2px; height: var(--gap); }
  .stage + .stage::after { top: calc(var(--gap) * -1 - 1px); left: calc(1.52rem - 3px); }
  .rails { grid-template-columns: minmax(0, 1fr); }
  .rails li { grid-column: auto; }
}

/* ------------------------------------------------ transmitting, above Contact */

.tx { display: block; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; color: var(--accent); }

/* ------------------------------------------------ 404: nothing on the input */

.nosignal .eyebrow::before { background: #ff5a4f; box-shadow: 0 0 8px rgba(255, 90, 79, .7); }
.trace.noise .ch1 { stroke: var(--trace-2); stroke-width: 1.4; opacity: .85; filter: drop-shadow(0 0 4px rgba(69, 224, 207, .6)); }

/* ------------------------------------------------ motion for all of the above */

@media (prefers-reduced-motion: no-preference) {
  .js .board:not(.inview) .pcb-copper path,
  .js .board:not(.inview) .pcb-mark,
  .js .area:not(.inview) .icon > *,
  .js .blockdiagram:not(.inview) .icon > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .board:not(.inview) :is(.pcb-parts, .pcb-balls, .pcb-silk, .pcb-led) { opacity: 0; }
  .board :is(.pcb-parts, .pcb-balls, .pcb-silk, .pcb-led) { transition: opacity .9s ease .15s; }

  /* backwards, not both: once drawn, the dash settings go away entirely,
     so a browser that ignores pathLength still ends on a solid line. */
  .board.inview .pcb-copper path {
    animation: draw 1.1s cubic-bezier(.4, 0, .2, 1) backwards;
    animation-delay: calc(.25s + var(--i) * .06s);
  }
  .board.inview .pcb-mark { animation: draw 1.2s ease-out 1.3s backwards; }
  .board.inview .pcb-packets path {
    animation: packet 3s linear infinite;
    animation-delay: calc(1.7s + var(--i) * .41s);
  }
  .board.inview .pcb-led { animation: blink 1.6s steps(1) 1.5s infinite; }

  /* The delays repeat the .inview part of the selector: the animation
     shorthand resets animation-delay, so a less specific delay rule loses. */
  .area.inview .icon > *, .blockdiagram.inview .icon > * { animation: draw 1s cubic-bezier(.4, 0, .2, 1) backwards; }
  .inview .icon > :nth-child(2) { animation-delay: .12s; }
  .inview .icon > :nth-child(3) { animation-delay: .24s; }
  .inview .icon > :nth-child(n+4) { animation-delay: .36s; }

  /* One packet walks the whole chain: each wire's hop starts as the last
     one ends. */
  .blockdiagram.inview .stage + .stage::after { animation: hop 2.6s linear infinite; }
  .blockdiagram.inview .stage:nth-child(2)::after { animation-delay: .4s; }
  .blockdiagram.inview .stage:nth-child(3)::after { animation-delay: .87s; }
  .blockdiagram.inview .stage:nth-child(4)::after { animation-delay: 1.34s; }
  .blockdiagram.inview .stage:nth-child(5)::after { animation-delay: 1.81s; }

  .tx .arc { animation: emit 2.4s ease-out infinite; }
  .tx .a2 { animation-delay: .3s; }
  .tx .a3 { animation-delay: .6s; }

  .trace.noise { animation: none; -webkit-mask-image: none; mask-image: none; }
  .trace.noise .ch1 { animation: jitter 1.2s steps(24) infinite; }
  .nosignal .eyebrow::before { animation: fault 1.1s steps(1) infinite; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 46rem) {
  .blockdiagram.inview .stage + .stage::after { animation-name: drop; }
}

@keyframes draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes packet { 0% { stroke-dashoffset: .08; } 45%, 100% { stroke-dashoffset: -1; } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes hop {
  0% { transform: translateX(0); opacity: 0; }
  3%, 15% { opacity: 1; }
  18%, 100% { transform: translateX(calc(var(--gap) - 6px)); opacity: 0; }
}
@keyframes drop {
  0% { transform: translateY(0); opacity: 0; }
  3%, 15% { opacity: 1; }
  18%, 100% { transform: translateY(calc(var(--gap) - 6px)); opacity: 0; }
}
@keyframes emit { 0%, 100% { opacity: .18; } 20% { opacity: 1; } 60% { opacity: .18; } }
@keyframes jitter { to { transform: translateX(-1200px); } }
@keyframes fault { 50% { opacity: .15; } }


/* ======================================================================
   Knowledge hub: reading paths, topics, the About page
   ====================================================================== */

.eyebrow a { color: var(--trace-2); text-decoration: none; }
.eyebrow a:hover { color: var(--scope-fg); }

/* A reading path: numbered stations on one wire, the block diagram's
   signal-chain idea turned vertical. */
.path { list-style: none; margin: 0; padding: 0; position: relative; max-width: 46rem; }
.path::before {
  content: ""; position: absolute; left: calc(1.05rem - 1px); top: 1.2rem; bottom: 1.2rem;
  width: 2px; background: var(--rule);
}
.step { position: relative; }
.steplink {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .95rem; align-items: center;
  padding: .55rem .7rem .55rem 0; border-radius: var(--radius); text-decoration: none;
  transition: background-color .15s ease;
}
.steplink:hover { background: var(--panel); }
.stepnum {
  position: relative; z-index: 1; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg); border: 1.5px solid var(--rule-strong);
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  transition: border-color .15s ease, color .15s ease;
}
.steplink:hover .stepnum { border-color: var(--accent); color: var(--accent); }
.steptext { min-width: 0; }
.steptext strong {
  font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -.015em;
}
.steplink:hover .steptext strong { color: var(--accent); }
.stepdek { display: block; margin-top: .25rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.stepmeta { font-family: var(--mono); font-size: .72rem; color: var(--muted); white-space: nowrap; }
.path.detailed .steplink { align-items: start; padding-top: .95rem; padding-bottom: .95rem; }
.path.detailed .stepmeta { padding-top: .2rem; }
.pathnote { margin: 1.25rem 0 0 3.05rem; font-size: .88rem; color: var(--muted); }
.pathnote a { color: var(--accent); }
.starttitle { margin: 0 0 .4rem; font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; }
.starttitle a { text-decoration: none; }
.starttitle a:hover { color: var(--accent); }

.upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.upcoming li { display: flex; gap: .7rem; align-items: baseline; color: var(--fg-soft); font-size: .95rem; line-height: 1.45; }
.soon {
  flex: none; padding: .1rem .45rem; border-radius: 4px; background: var(--accent-soft); color: var(--accent);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
}

.topiccards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.topiccards.wide { margin-bottom: 1rem; }
.topiccard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.3rem 1.35rem 1.2rem; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.topiccard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.3, .7, .2, 1);
}
.topiccard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.topiccard:hover::before { transform: scaleX(1); }
.topichead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topichead .icon { width: 2rem; height: 2rem; color: var(--accent); }
.topiccount { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topiccard strong { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; }
.topicsum { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.topicgo { margin-top: auto; padding-top: .4rem; font-size: .86rem; font-weight: 600; color: var(--accent); }

.works { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.works .railhead { margin-bottom: 1.5rem; }
.worklist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.workitem { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; }
.workicon .icon { width: 2rem; height: 2rem; color: var(--muted); }
.workitem h3 { margin: .1rem 0 .3rem; font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em; }
.workitem p { margin: 0 0 .8rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }

.topicband .bandgrid { position: relative; }
.topicmark { position: absolute; right: 1.5rem; top: 50%; translate: 0 -38%; color: var(--trace-2); opacity: .22; pointer-events: none; }
.topicmark .icon { width: 9rem; height: 9rem; stroke-width: .9; }
@media (max-width: 46rem) { .topicmark { display: none; } }

.aboutband .scopetext h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.7rem); }

.credentials { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.credentials > div { position: relative; padding: 1rem 1.25rem 1.2rem 0; border-top: 1px solid var(--rule); }
.credentials > div::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 1px; height: 9px; background: var(--accent);
}
.credentials dt {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}
.credentials dd { margin: .3rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.35; }

/* The next post in the reader's topic, at the end of a post. */
.nextup {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
  max-width: 44rem; margin-top: 3.5rem; padding: 1.15rem 1.35rem;
  border: 1px solid var(--accent); border-radius: var(--radius); text-decoration: none;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
}
.nextup .railhead { margin: 0 0 .3rem; }
.nextup strong { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.015em; }
.nextarrow { grid-column: 2; grid-row: 1 / span 2; font-size: 1.4rem; color: var(--accent); transition: transform .2s ease; }
.nextup:hover .nextarrow { transform: translateX(4px); }
.nextup + .author { margin-top: 1.25rem; }

.railtopics { margin-top: 2.25rem; }
.railtopics ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.railtopics a { font-size: .86rem; line-height: 1.4; color: var(--fg-soft); text-decoration: none; }
.railtopics a:hover { color: var(--accent); }

.footmeta { display: grid; gap: .3rem; }
.disclaimer { font-size: .78rem; opacity: .85; }

/* ------------------------------------------------ what long guides need */

.prose .admonition {
  margin: 1.6rem 0; padding: .9rem 1.15rem 1rem; background: var(--panel);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
}
.prose .admonition > :last-child { margin-bottom: 0; }
.prose .admonition p { color: var(--fg-soft); }
.prose .admonition-title {
  margin: 0 0 .35rem; font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent);
}
.prose .admonition:is(.warning, .caution, .danger, .attention) { border-left-color: var(--amber); }
.prose .admonition:is(.warning, .caution, .danger, .attention) .admonition-title { color: var(--warn-text); }

/* A link on every heading, shown on hover, for sharing one section. */
.prose .anchor {
  margin-left: .45rem; color: var(--rule-strong); font-weight: 400; text-decoration: none;
  opacity: 0; transition: opacity .15s ease;
}
.prose :is(h2, h3):hover .anchor, .prose .anchor:focus-visible { opacity: 1; }
.prose .anchor:hover { color: var(--accent); }

.prose .highlight { position: relative; }
.copy {
  position: absolute; top: .5rem; right: .5rem; padding: .22rem .6rem; cursor: pointer;
  font: 400 .7rem var(--mono); color: var(--muted); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 5px; opacity: 0;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.prose .highlight:hover .copy, .copy:focus-visible { opacity: 1; }
@media (hover: none) { .copy { opacity: 1; } }
.copy:hover { color: var(--fg); border-color: var(--accent); }
.copy.done { color: var(--accent); border-color: var(--accent); opacity: 1; }

.prose .footnote { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .88rem; }
.prose .footnote p { color: var(--muted); }
.prose sup a { color: var(--accent); text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  /* A packet runs down the reading path's wire now and then. */
  .path::after {
    content: ""; position: absolute; left: calc(1.05rem - 4px); top: 1.2rem; width: 8px; height: 8px;
    border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(245, 165, 36, .8);
    opacity: 0; animation: descend 6s ease-in-out 1s infinite;
  }
}
@keyframes descend {
  0% { top: 1.2rem; opacity: 0; }
  6%, 64% { opacity: 1; }
  70%, 100% { top: calc(100% - 1.7rem); opacity: 0; }
}

/* Diagrams drawn inline in a post: plain SVG with these classes, so they
   take the theme's colours in both modes. Wide ones scroll on a phone
   rather than shrinking their labels into dust. */
.prose .diagram { margin: 2rem 0; overflow-x: auto; }
.prose .diagram svg { display: block; width: 100%; min-width: 40rem; height: auto; }
.prose .diagram figcaption { margin-top: .6rem; }
.dg-box { fill: var(--panel); stroke: var(--rule-strong); stroke-width: 1.5; }
.dg-box.key { stroke: var(--accent); stroke-width: 2; }
.dg-wire { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.dg-head { fill: var(--rule-strong); }
.dg-t { fill: var(--fg); font: 600 14px var(--display); }
.dg-s { fill: var(--muted); font: 400 11px var(--mono); }
.dg-n { fill: var(--accent); font: 400 10px var(--mono); letter-spacing: .08em; }

/* code highlighting */
pre { line-height: 125%; }
td.linenos .normal { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f0f0f0; }
.highlight .c { color: #60A0B0; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #F00 } /* Error */
.highlight .k { color: #007020; font-weight: bold } /* Keyword */
.highlight .o { color: #666 } /* Operator */
.highlight .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #007020 } /* Comment.Preproc */
.highlight .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */
.highlight .cs { color: #60A0B0; background-color: #FFF0F0 } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #F00 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888 } /* Generic.Output */
.highlight .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #04D } /* Generic.Traceback */
.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #007020 } /* Keyword.Pseudo */
.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #902000 } /* Keyword.Type */
.highlight .m { color: #40A070 } /* Literal.Number */
.highlight .s { color: #4070A0 } /* Literal.String */
.highlight .na { color: #4070A0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #0E84B5; font-weight: bold } /* Name.Class */
.highlight .no { color: #60ADD5 } /* Name.Constant */
.highlight .nd { color: #555; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #D55537; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #007020 } /* Name.Exception */
.highlight .nf { color: #06287E } /* Name.Function */
.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #BB60D5 } /* Name.Variable */
.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #40A070 } /* Literal.Number.Bin */
.highlight .mf { color: #40A070 } /* Literal.Number.Float */
.highlight .mh { color: #40A070 } /* Literal.Number.Hex */
.highlight .mi { color: #40A070 } /* Literal.Number.Integer */
.highlight .mo { color: #40A070 } /* Literal.Number.Oct */
.highlight .sa { color: #4070A0 } /* Literal.String.Affix */
.highlight .sb { color: #4070A0 } /* Literal.String.Backtick */
.highlight .sc { color: #4070A0 } /* Literal.String.Char */
.highlight .dl { color: #4070A0 } /* Literal.String.Delimiter */
.highlight .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4070A0 } /* Literal.String.Double */
.highlight .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #4070A0 } /* Literal.String.Heredoc */
.highlight .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */
.highlight .sx { color: #C65D09 } /* Literal.String.Other */
.highlight .sr { color: #235388 } /* Literal.String.Regex */
.highlight .s1 { color: #4070A0 } /* Literal.String.Single */
.highlight .ss { color: #517918 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #06287E } /* Name.Function.Magic */
.highlight .vc { color: #BB60D5 } /* Name.Variable.Class */
.highlight .vg { color: #BB60D5 } /* Name.Variable.Global */
.highlight .vi { color: #BB60D5 } /* Name.Variable.Instance */
.highlight .vm { color: #BB60D5 } /* Name.Variable.Magic */
.highlight .il { color: #40A070 } /* Literal.Number.Integer.Long */
@media (prefers-color-scheme: dark) {
pre { line-height: 125%; }
td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
:root:not([data-theme="light"]) .highlight .hll { background-color: #6e7681 }
:root:not([data-theme="light"]) .highlight { background: #0d1117; color: #E6EDF3 }
:root:not([data-theme="light"]) .highlight .c { color: #8B949E; font-style: italic } /* Comment */
:root:not([data-theme="light"]) .highlight .err { color: #F85149 } /* Error */
:root:not([data-theme="light"]) .highlight .esc { color: #E6EDF3 } /* Escape */
:root:not([data-theme="light"]) .highlight .g { color: #E6EDF3 } /* Generic */
:root:not([data-theme="light"]) .highlight .k { color: #FF7B72 } /* Keyword */
:root:not([data-theme="light"]) .highlight .l { color: #A5D6FF } /* Literal */
:root:not([data-theme="light"]) .highlight .n { color: #E6EDF3 } /* Name */
:root:not([data-theme="light"]) .highlight .o { color: #FF7B72; font-weight: bold } /* Operator */
:root:not([data-theme="light"]) .highlight .x { color: #E6EDF3 } /* Other */
:root:not([data-theme="light"]) .highlight .p { color: #E6EDF3 } /* Punctuation */
:root:not([data-theme="light"]) .highlight .ch { color: #8B949E; font-style: italic } /* Comment.Hashbang */
:root:not([data-theme="light"]) .highlight .cm { color: #8B949E; font-style: italic } /* Comment.Multiline */
:root:not([data-theme="light"]) .highlight .cp { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Preproc */
:root:not([data-theme="light"]) .highlight .cpf { color: #8B949E; font-style: italic } /* Comment.PreprocFile */
:root:not([data-theme="light"]) .highlight .c1 { color: #8B949E; font-style: italic } /* Comment.Single */
:root:not([data-theme="light"]) .highlight .cs { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Special */
:root:not([data-theme="light"]) .highlight .gd { color: #FFA198; background-color: #490202 } /* Generic.Deleted */
:root:not([data-theme="light"]) .highlight .ge { color: #E6EDF3; font-style: italic } /* Generic.Emph */
:root:not([data-theme="light"]) .highlight .ges { color: #E6EDF3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
:root:not([data-theme="light"]) .highlight .gr { color: #FFA198 } /* Generic.Error */
:root:not([data-theme="light"]) .highlight .gh { color: #79C0FF; font-weight: bold } /* Generic.Heading */
:root:not([data-theme="light"]) .highlight .gi { color: #56D364; background-color: #0F5323 } /* Generic.Inserted */
:root:not([data-theme="light"]) .highlight .go { color: #8B949E } /* Generic.Output */
:root:not([data-theme="light"]) .highlight .gp { color: #8B949E } /* Generic.Prompt */
:root:not([data-theme="light"]) .highlight .gs { color: #E6EDF3; font-weight: bold } /* Generic.Strong */
:root:not([data-theme="light"]) .highlight .gu { color: #79C0FF } /* Generic.Subheading */
:root:not([data-theme="light"]) .highlight .gt { color: #FF7B72 } /* Generic.Traceback */
:root:not([data-theme="light"]) .highlight .g-Underline { color: #E6EDF3; text-decoration: underline } /* Generic.Underline */
:root:not([data-theme="light"]) .highlight .kc { color: #79C0FF } /* Keyword.Constant */
:root:not([data-theme="light"]) .highlight .kd { color: #FF7B72 } /* Keyword.Declaration */
:root:not([data-theme="light"]) .highlight .kn { color: #FF7B72 } /* Keyword.Namespace */
:root:not([data-theme="light"]) .highlight .kp { color: #79C0FF } /* Keyword.Pseudo */
:root:not([data-theme="light"]) .highlight .kr { color: #FF7B72 } /* Keyword.Reserved */
:root:not([data-theme="light"]) .highlight .kt { color: #FF7B72 } /* Keyword.Type */
:root:not([data-theme="light"]) .highlight .ld { color: #79C0FF } /* Literal.Date */
:root:not([data-theme="light"]) .highlight .m { color: #A5D6FF } /* Literal.Number */
:root:not([data-theme="light"]) .highlight .s { color: #A5D6FF } /* Literal.String */
:root:not([data-theme="light"]) .highlight .na { color: #E6EDF3 } /* Name.Attribute */
:root:not([data-theme="light"]) .highlight .nb { color: #E6EDF3 } /* Name.Builtin */
:root:not([data-theme="light"]) .highlight .nc { color: #F0883E; font-weight: bold } /* Name.Class */
:root:not([data-theme="light"]) .highlight .no { color: #79C0FF; font-weight: bold } /* Name.Constant */
:root:not([data-theme="light"]) .highlight .nd { color: #D2A8FF; font-weight: bold } /* Name.Decorator */
:root:not([data-theme="light"]) .highlight .ni { color: #FFA657 } /* Name.Entity */
:root:not([data-theme="light"]) .highlight .ne { color: #F0883E; font-weight: bold } /* Name.Exception */
:root:not([data-theme="light"]) .highlight .nf { color: #D2A8FF; font-weight: bold } /* Name.Function */
:root:not([data-theme="light"]) .highlight .nl { color: #79C0FF; font-weight: bold } /* Name.Label */
:root:not([data-theme="light"]) .highlight .nn { color: #FF7B72 } /* Name.Namespace */
:root:not([data-theme="light"]) .highlight .nx { color: #E6EDF3 } /* Name.Other */
:root:not([data-theme="light"]) .highlight .py { color: #79C0FF } /* Name.Property */
:root:not([data-theme="light"]) .highlight .nt { color: #7EE787 } /* Name.Tag */
:root:not([data-theme="light"]) .highlight .nv { color: #79C0FF } /* Name.Variable */
:root:not([data-theme="light"]) .highlight .ow { color: #FF7B72; font-weight: bold } /* Operator.Word */
:root:not([data-theme="light"]) .highlight .pm { color: #E6EDF3 } /* Punctuation.Marker */
:root:not([data-theme="light"]) .highlight .w { color: #6E7681 } /* Text.Whitespace */
:root:not([data-theme="light"]) .highlight .mb { color: #A5D6FF } /* Literal.Number.Bin */
:root:not([data-theme="light"]) .highlight .mf { color: #A5D6FF } /* Literal.Number.Float */
:root:not([data-theme="light"]) .highlight .mh { color: #A5D6FF } /* Literal.Number.Hex */
:root:not([data-theme="light"]) .highlight .mi { color: #A5D6FF } /* Literal.Number.Integer */
:root:not([data-theme="light"]) .highlight .mo { color: #A5D6FF } /* Literal.Number.Oct */
:root:not([data-theme="light"]) .highlight .sa { color: #79C0FF } /* Literal.String.Affix */
:root:not([data-theme="light"]) .highlight .sb { color: #A5D6FF } /* Literal.String.Backtick */
:root:not([data-theme="light"]) .highlight .sc { color: #A5D6FF } /* Literal.String.Char */
:root:not([data-theme="light"]) .highlight .dl { color: #79C0FF } /* Literal.String.Delimiter */
:root:not([data-theme="light"]) .highlight .sd { color: #A5D6FF } /* Literal.String.Doc */
:root:not([data-theme="light"]) .highlight .s2 { color: #A5D6FF } /* Literal.String.Double */
:root:not([data-theme="light"]) .highlight .se { color: #79C0FF } /* Literal.String.Escape */
:root:not([data-theme="light"]) .highlight .sh { color: #79C0FF } /* Literal.String.Heredoc */
:root:not([data-theme="light"]) .highlight .si { color: #A5D6FF } /* Literal.String.Interpol */
:root:not([data-theme="light"]) .highlight .sx { color: #A5D6FF } /* Literal.String.Other */
:root:not([data-theme="light"]) .highlight .sr { color: #79C0FF } /* Literal.String.Regex */
:root:not([data-theme="light"]) .highlight .s1 { color: #A5D6FF } /* Literal.String.Single */
:root:not([data-theme="light"]) .highlight .ss { color: #A5D6FF } /* Literal.String.Symbol */
:root:not([data-theme="light"]) .highlight .bp { color: #E6EDF3 } /* Name.Builtin.Pseudo */
:root:not([data-theme="light"]) .highlight .fm { color: #D2A8FF; font-weight: bold } /* Name.Function.Magic */
:root:not([data-theme="light"]) .highlight .vc { color: #79C0FF } /* Name.Variable.Class */
:root:not([data-theme="light"]) .highlight .vg { color: #79C0FF } /* Name.Variable.Global */
:root:not([data-theme="light"]) .highlight .vi { color: #79C0FF } /* Name.Variable.Instance */
:root:not([data-theme="light"]) .highlight .vm { color: #79C0FF } /* Name.Variable.Magic */
:root:not([data-theme="light"]) .highlight .il { color: #A5D6FF } /* Literal.Number.Integer.Long */
}
pre { line-height: 125%; }
td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
:root[data-theme="dark"] .highlight .hll { background-color: #6e7681 }
:root[data-theme="dark"] .highlight { background: #0d1117; color: #E6EDF3 }
:root[data-theme="dark"] .highlight .c { color: #8B949E; font-style: italic } /* Comment */
:root[data-theme="dark"] .highlight .err { color: #F85149 } /* Error */
:root[data-theme="dark"] .highlight .esc { color: #E6EDF3 } /* Escape */
:root[data-theme="dark"] .highlight .g { color: #E6EDF3 } /* Generic */
:root[data-theme="dark"] .highlight .k { color: #FF7B72 } /* Keyword */
:root[data-theme="dark"] .highlight .l { color: #A5D6FF } /* Literal */
:root[data-theme="dark"] .highlight .n { color: #E6EDF3 } /* Name */
:root[data-theme="dark"] .highlight .o { color: #FF7B72; font-weight: bold } /* Operator */
:root[data-theme="dark"] .highlight .x { color: #E6EDF3 } /* Other */
:root[data-theme="dark"] .highlight .p { color: #E6EDF3 } /* Punctuation */
:root[data-theme="dark"] .highlight .ch { color: #8B949E; font-style: italic } /* Comment.Hashbang */
:root[data-theme="dark"] .highlight .cm { color: #8B949E; font-style: italic } /* Comment.Multiline */
:root[data-theme="dark"] .highlight .cp { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Preproc */
:root[data-theme="dark"] .highlight .cpf { color: #8B949E; font-style: italic } /* Comment.PreprocFile */
:root[data-theme="dark"] .highlight .c1 { color: #8B949E; font-style: italic } /* Comment.Single */
:root[data-theme="dark"] .highlight .cs { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Special */
:root[data-theme="dark"] .highlight .gd { color: #FFA198; background-color: #490202 } /* Generic.Deleted */
:root[data-theme="dark"] .highlight .ge { color: #E6EDF3; font-style: italic } /* Generic.Emph */
:root[data-theme="dark"] .highlight .ges { color: #E6EDF3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
:root[data-theme="dark"] .highlight .gr { color: #FFA198 } /* Generic.Error */
:root[data-theme="dark"] .highlight .gh { color: #79C0FF; font-weight: bold } /* Generic.Heading */
:root[data-theme="dark"] .highlight .gi { color: #56D364; background-color: #0F5323 } /* Generic.Inserted */
:root[data-theme="dark"] .highlight .go { color: #8B949E } /* Generic.Output */
:root[data-theme="dark"] .highlight .gp { color: #8B949E } /* Generic.Prompt */
:root[data-theme="dark"] .highlight .gs { color: #E6EDF3; font-weight: bold } /* Generic.Strong */
:root[data-theme="dark"] .highlight .gu { color: #79C0FF } /* Generic.Subheading */
:root[data-theme="dark"] .highlight .gt { color: #FF7B72 } /* Generic.Traceback */
:root[data-theme="dark"] .highlight .g-Underline { color: #E6EDF3; text-decoration: underline } /* Generic.Underline */
:root[data-theme="dark"] .highlight .kc { color: #79C0FF } /* Keyword.Constant */
:root[data-theme="dark"] .highlight .kd { color: #FF7B72 } /* Keyword.Declaration */
:root[data-theme="dark"] .highlight .kn { color: #FF7B72 } /* Keyword.Namespace */
:root[data-theme="dark"] .highlight .kp { color: #79C0FF } /* Keyword.Pseudo */
:root[data-theme="dark"] .highlight .kr { color: #FF7B72 } /* Keyword.Reserved */
:root[data-theme="dark"] .highlight .kt { color: #FF7B72 } /* Keyword.Type */
:root[data-theme="dark"] .highlight .ld { color: #79C0FF } /* Literal.Date */
:root[data-theme="dark"] .highlight .m { color: #A5D6FF } /* Literal.Number */
:root[data-theme="dark"] .highlight .s { color: #A5D6FF } /* Literal.String */
:root[data-theme="dark"] .highlight .na { color: #E6EDF3 } /* Name.Attribute */
:root[data-theme="dark"] .highlight .nb { color: #E6EDF3 } /* Name.Builtin */
:root[data-theme="dark"] .highlight .nc { color: #F0883E; font-weight: bold } /* Name.Class */
:root[data-theme="dark"] .highlight .no { color: #79C0FF; font-weight: bold } /* Name.Constant */
:root[data-theme="dark"] .highlight .nd { color: #D2A8FF; font-weight: bold } /* Name.Decorator */
:root[data-theme="dark"] .highlight .ni { color: #FFA657 } /* Name.Entity */
:root[data-theme="dark"] .highlight .ne { color: #F0883E; font-weight: bold } /* Name.Exception */
:root[data-theme="dark"] .highlight .nf { color: #D2A8FF; font-weight: bold } /* Name.Function */
:root[data-theme="dark"] .highlight .nl { color: #79C0FF; font-weight: bold } /* Name.Label */
:root[data-theme="dark"] .highlight .nn { color: #FF7B72 } /* Name.Namespace */
:root[data-theme="dark"] .highlight .nx { color: #E6EDF3 } /* Name.Other */
:root[data-theme="dark"] .highlight .py { color: #79C0FF } /* Name.Property */
:root[data-theme="dark"] .highlight .nt { color: #7EE787 } /* Name.Tag */
:root[data-theme="dark"] .highlight .nv { color: #79C0FF } /* Name.Variable */
:root[data-theme="dark"] .highlight .ow { color: #FF7B72; font-weight: bold } /* Operator.Word */
:root[data-theme="dark"] .highlight .pm { color: #E6EDF3 } /* Punctuation.Marker */
:root[data-theme="dark"] .highlight .w { color: #6E7681 } /* Text.Whitespace */
:root[data-theme="dark"] .highlight .mb { color: #A5D6FF } /* Literal.Number.Bin */
:root[data-theme="dark"] .highlight .mf { color: #A5D6FF } /* Literal.Number.Float */
:root[data-theme="dark"] .highlight .mh { color: #A5D6FF } /* Literal.Number.Hex */
:root[data-theme="dark"] .highlight .mi { color: #A5D6FF } /* Literal.Number.Integer */
:root[data-theme="dark"] .highlight .mo { color: #A5D6FF } /* Literal.Number.Oct */
:root[data-theme="dark"] .highlight .sa { color: #79C0FF } /* Literal.String.Affix */
:root[data-theme="dark"] .highlight .sb { color: #A5D6FF } /* Literal.String.Backtick */
:root[data-theme="dark"] .highlight .sc { color: #A5D6FF } /* Literal.String.Char */
:root[data-theme="dark"] .highlight .dl { color: #79C0FF } /* Literal.String.Delimiter */
:root[data-theme="dark"] .highlight .sd { color: #A5D6FF } /* Literal.String.Doc */
:root[data-theme="dark"] .highlight .s2 { color: #A5D6FF } /* Literal.String.Double */
:root[data-theme="dark"] .highlight .se { color: #79C0FF } /* Literal.String.Escape */
:root[data-theme="dark"] .highlight .sh { color: #79C0FF } /* Literal.String.Heredoc */
:root[data-theme="dark"] .highlight .si { color: #A5D6FF } /* Literal.String.Interpol */
:root[data-theme="dark"] .highlight .sx { color: #A5D6FF } /* Literal.String.Other */
:root[data-theme="dark"] .highlight .sr { color: #79C0FF } /* Literal.String.Regex */
:root[data-theme="dark"] .highlight .s1 { color: #A5D6FF } /* Literal.String.Single */
:root[data-theme="dark"] .highlight .ss { color: #A5D6FF } /* Literal.String.Symbol */
:root[data-theme="dark"] .highlight .bp { color: #E6EDF3 } /* Name.Builtin.Pseudo */
:root[data-theme="dark"] .highlight .fm { color: #D2A8FF; font-weight: bold } /* Name.Function.Magic */
:root[data-theme="dark"] .highlight .vc { color: #79C0FF } /* Name.Variable.Class */
:root[data-theme="dark"] .highlight .vg { color: #79C0FF } /* Name.Variable.Global */
:root[data-theme="dark"] .highlight .vi { color: #79C0FF } /* Name.Variable.Instance */
:root[data-theme="dark"] .highlight .vm { color: #79C0FF } /* Name.Variable.Magic */
:root[data-theme="dark"] .highlight .il { color: #A5D6FF } /* Literal.Number.Integer.Long */