/* web/template/styles.css */
:root {
  --bg: #ffffff; --fg: #1a1a1a; --muted: #6a6a6a; --rule: #e2e2e2;
  --switch: #009E73; --signal: #56B4E9; --carry: #CC3311;
  --measure: clamp(44rem, 70vw, 58rem);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0b0d10; --fg: #e8eaed; --muted: #9aa0a6; --rule: #23262b;
  color-scheme: dark;
}
/* Inline vocabulary tints/shades carry both theme values from assemble.py. */
.cbox { background-color: var(--light); }
.ctext { color: var(--light); }
[data-theme="dark"] .cbox { background-color: var(--dark); }
[data-theme="dark"] .ctext { color: var(--dark); }
/* Each figure ships a light and a dark SVG; the theme picks one. */
.fig-dark { display: none; }
[data-theme="dark"] .fig-light { display: none; }
[data-theme="dark"] .fig-dark { display: inline; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: "STIX Two Text", Georgia, serif; line-height: 1.55;
  display: grid; grid-template-columns: 16rem 1fr;
}
#theme {
  position: fixed; top: .6rem; right: .8rem; z-index: 2;
  background: none; border: 1px solid var(--rule); border-radius: 4px;
  color: var(--fg); cursor: pointer; padding: .2rem .5rem;
}
.edit-suggest {
  position: fixed; bottom: .8rem; right: .8rem; z-index: 2;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px;
  color: var(--muted); text-decoration: none; padding: .3rem .6rem;
  font-size: .8rem;
}
.edit-suggest:hover { color: var(--fg); }
.sidebar {
  border-right: 1px solid var(--rule); padding: 1.2rem .9rem;
  height: 100vh; position: sticky; top: 0; overflow-y: auto; font-size: .9rem;
}
.sidebar a { color: var(--muted); text-decoration: none; display: block; padding: .12rem 0; }
.sidebar a.active { color: var(--fg); font-weight: 600; }
.side-part { margin: .7rem 0 .1rem; }
.side-part summary {
  color: var(--fg); cursor: pointer; padding: .12rem 0;
}
.side-part summary::marker { color: var(--muted); font-size: .8em; }
.side-part a { padding-left: .7rem; }
.nav-toggle {
  display: block; position: fixed; top: .6rem; left: .8rem; z-index: 3;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px;
  color: var(--fg); cursor: pointer; padding: .2rem .5rem;
}
@media (max-width: 52rem) {
  body { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .sidebar {
    position: static; height: auto; border-right: none;
    border-bottom: 1px solid var(--rule);
    /* Clear the fixed nav-toggle button, which shares this corner. */
    padding-top: 3rem;
  }
  html.js .sidebar {
    position: fixed; top: 0; left: 0; width: 16rem; height: 100vh;
    background: var(--bg); border-right: 1px solid var(--rule);
    z-index: 2; transform: translateX(-105%); transition: transform .2s ease;
  }
  html.js .sidebar.open { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .sidebar { transition: none; }
}
/* Desktop: the same toggle collapses the sidebar to widen the reading column.
   Scoped above the mobile breakpoint so a persisted collapse never hides the
   mobile drawer. Extra top padding clears the fixed toggle button. */
@media (min-width: 52.0625rem) {
  .sidebar { padding-top: 2.6rem; }
  html.nav-collapsed body { grid-template-columns: 1fr; }
  html.nav-collapsed .sidebar { display: none; }
}
/* Two guards keep long code lines from widening the page on phones:
   min-width lets the grid track shrink below the widest pre line, and the
   explicit width (auto margins disable stretch, so max-width alone would
   size to fit-content) pins the column so the pre scrolls inside. */
.prose {
  width: min(var(--measure), 100%); min-width: 0;
  padding: 2.5rem 1.5rem; margin: 0 auto;
}
.prose figure { margin: 1.6rem 0; text-align: center; }
.prose figure svg, .prose figure img { max-width: 100%; height: auto; }
figcaption { color: var(--muted); font-size: .88rem; font-style: italic; }
.stack-journey { list-style: none; padding: 0; margin: 1rem auto; max-width: 16rem; }
.stack-journey .rung {
  border: 1px solid var(--rule); border-radius: 3px; padding: .35rem .6rem;
  margin: .2rem 0; color: var(--muted); font-size: .85rem; text-align: center;
}
.stack-journey .rung.lit {
  border-color: var(--switch); color: var(--fg); font-weight: 600;
  background: color-mix(in srgb, var(--switch) 18%, var(--bg));
}
/* A wide LaTeX tabular scrolls on phones instead of widening the page. */
.prose table {
  display: block; overflow-x: auto; width: fit-content;
  max-width: 100%; margin-left: auto; margin-right: auto;
}
pre.code, pre.transcript {
  border: 1px solid var(--rule); border-radius: 4px; padding: .8rem 1rem;
  overflow-x: auto; font-family: "Source Code Pro", monospace; font-size: .82rem;
}
pre.transcript { color: var(--muted); }
/* A transcript names the command that printed it: a small tag sitting on the
   box border, the output counterpart of the example captions code gets. */
.transcript-wrap { position: relative; margin: 1.4em 0 1em; }
.transcript-wrap > pre.transcript { margin: 0; padding-top: 1rem; }
.transcript-tag {
  position: absolute; top: -.7em; left: .8rem; background: var(--bg);
  padding: 0 .5em; font-family: "Source Code Pro", monospace;
  font-size: .72rem; font-style: italic; color: var(--muted);
}
.co {
  display: inline-grid; place-items: center; width: 1.1em; height: 1.1em;
  border-radius: 50%; background: var(--fg); color: var(--bg);
  font-size: .72em; margin-left: .5em; vertical-align: middle;
}
.math i { font-style: italic; }
.math .mathrm { font-style: normal; }
.math .ov { text-decoration: overline; }
.prevnext { display: flex; justify-content: space-between; margin-top: 3rem;
  border-top: 1px solid var(--rule); padding-top: 1rem; font-size: .9rem; }
.site-footer { margin-top: 2.5rem; border-top: 1px solid var(--rule);
  padding-top: 1rem; color: var(--muted); font-size: .82rem; text-align: center; }
.site-footer a { color: var(--muted); }
.widget { margin: 1.6rem 0; }
.widget-note { color: var(--muted); font-size: .88rem; font-style: italic; }
.widget-code { margin-top: .6rem; }
.widget-code summary {
  color: var(--muted); font-size: .82rem; font-style: italic;
  cursor: pointer;
}
.widget-code pre {
  border: 1px solid var(--rule); border-radius: 4px; padding: .6rem .8rem;
  overflow-x: auto; font-family: "Source Code Pro", monospace;
  font-size: .78rem; color: var(--muted); margin: .4rem 0 0; text-align: left;
}
.adder { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.adder-row { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
.adder-label { width: 1.2rem; color: var(--muted); font-weight: 600; }
.adder-bit {
  width: 2rem; height: 2rem; font-family: "Source Code Pro", monospace;
  cursor: pointer; color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px;
}
.adder-bit:hover { border-color: var(--switch); }
.adder-diagram { display: flex; gap: .4rem; margin: .6rem 0; }
.adder-stage {
  flex: 1; text-align: center; border: 1px solid var(--rule);
  border-radius: 4px; padding: .35rem; font-family: "Source Code Pro", monospace;
  font-size: .8rem;
}
.adder-ins { color: var(--muted); }
.adder-sum { font-weight: 600; font-size: 1.1rem; }
.adder-carry {
  height: 1.1em; color: var(--switch); font-weight: 600;
  opacity: 0; transition: opacity .18s ease;
}
.adder-carry.lit { opacity: 1; }
.adder-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
}
.gates { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.gates-row { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
.gates-label { width: 1.2rem; color: var(--muted); font-weight: 600; }
.gates-bit {
  width: 2rem; height: 2rem; font-family: "Source Code Pro", monospace;
  cursor: pointer; color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px;
}
.gates-bit:hover { border-color: var(--switch); }
.gates-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: .8rem 0;
}
.gates-cell {
  text-align: center; border: 1px solid var(--rule); border-radius: 4px;
  padding: .5rem .3rem; font-family: "Source Code Pro", monospace;
}
.gates-cell-name { color: var(--muted); font-size: .78rem; }
.gates-cell-value { font-weight: 600; font-size: 1.1rem; }
.gates-lit { border-color: var(--switch); }
.gates-lit .gates-cell-value { color: var(--switch); }
.gates-wait { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .gates-cell { transition: border-color .18s ease; }
  .gates-cell-value { transition: color .18s ease; }
}
.gates-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
}
.pipeline { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.pipeline-chart { display: grid; gap: .25rem; margin: .8rem 0; }
.pipeline-label {
  font-family: "Source Code Pro", monospace; font-size: .8rem;
  color: var(--muted); align-self: center;
}
.pipeline-cell {
  text-align: center; border: 1px solid var(--switch); border-radius: 3px;
  padding: .15rem 0; font-family: "Source Code Pro", monospace;
  font-size: .78rem; font-weight: 600; color: var(--fg);
  background: color-mix(in srgb, var(--switch) 14%, var(--bg));
  transition: opacity .25s ease;
}
.pipeline-wait { opacity: 0; }
.pipeline-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
}
.slider-widget { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.slider-row { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
.slider-widget label { width: 7rem; color: var(--muted); font-weight: 600; }
.slider-widget input[type="range"] {
  flex: 1; accent-color: var(--switch); background: var(--bg);
}
.slider-widget output {
  width: 3.6rem; text-align: right; font-family: "Source Code Pro", monospace;
  font-weight: 600; font-size: 1.1rem; color: var(--switch);
}
.netlist-waves { margin: .8rem 0 .2rem; }
.transport-rounds { margin: .6rem 0 .2rem; }
/* A strip of memory/disk cells shared by the heap, pages, and files
   widgets; live blocks alternate the two vocabulary tints. */
.heap-strip { display: flex; gap: 2px; margin: .8rem 0 .4rem; }
.heap-cell {
  flex: 1; height: 1.2rem; border: 1px solid var(--rule); border-radius: 2px;
  transition: background-color .3s ease;
  font-family: "Source Code Pro", monospace; font-size: .62rem;
  color: var(--muted); text-align: center; line-height: 1.2rem;
}
.heap-live-a {
  background: color-mix(in srgb, var(--switch) 45%, var(--bg));
  border-color: var(--switch);
}
.heap-live-b {
  background: color-mix(in srgb, var(--signal) 40%, var(--bg));
  border-color: var(--signal);
}
@media (prefers-reduced-motion: reduce) {
  .heap-cell { transition: none; }
}
.framing-crc { border-style: dashed; }
.bitbang-cell { flex: none; width: 1.2rem; }
.bitbang-sample { outline: 2px solid var(--switch); outline-offset: -2px; }
.transport-lost {
  border-color: var(--carry); color: var(--carry);
  text-decoration: line-through;
}
.fpga-picker { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.fpga-pick {
  font-family: "Source Code Pro", monospace; font-size: .8rem;
  cursor: pointer; color: var(--muted); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px; padding: .35rem .7rem;
}
.fpga-pick:hover { border-color: var(--switch); }
.fpga-pick[aria-pressed="true"] {
  color: var(--fg); border-color: var(--switch);
  background: color-mix(in srgb, var(--switch) 14%, var(--bg));
}
.fpga-cards { display: flex; gap: .8rem; flex-wrap: wrap; margin: .8rem 0; }
.fpga-lut {
  flex: 1; min-width: 10rem; border: 1px solid var(--rule);
  border-radius: 4px; padding: .5rem .6rem; text-align: center;
}
.fpga-row {
  font-family: "Source Code Pro", monospace; font-size: .82rem;
  color: var(--muted); padding: .05rem 0; border-radius: 3px;
  transition: background-color .25s ease, color .25s ease;
}
.fpga-lit {
  color: var(--fg);
  background: color-mix(in srgb, var(--switch) 22%, var(--bg));
}
.speedup-bar {
  display: flex; height: 1.1rem; margin: .8rem 0 .3rem;
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
}
.speedup-serial {
  background: color-mix(in srgb, var(--carry) 55%, var(--bg));
  transition: width .4s ease;
}
.speedup-parallel {
  background: color-mix(in srgb, var(--switch) 45%, var(--bg));
  transition: width .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .speedup-serial, .speedup-parallel { transition: none; }
}
.cache-lanes { margin: .8rem 0 .3rem; }
.cache-lane {
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 3px;
  padding: .3rem .5rem; margin: .3rem 0; min-height: 1.6rem;
}
.cache-lane-tag { color: var(--muted); font-size: .75rem; width: 7.5rem; }
.cache-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--switch); transition: opacity .2s ease;
}
.cache-dot.cache-miss { background: var(--carry); }
.cache-readout, .speedup-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
  margin-top: .5rem;
}
.cpu { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.cpu-regs {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
  margin-bottom: .6rem;
}
.cpu-buttons { display: flex; gap: .5rem; margin-bottom: .8rem; }
.cpu-buttons button {
  font-family: inherit; font-size: .85rem; cursor: pointer;
  color: var(--fg); background: color-mix(in srgb, var(--switch) 14%, var(--bg));
  border: 1px solid var(--switch); border-radius: 4px; padding: .35rem .8rem;
}
.cpu-buttons button:disabled { opacity: .55; cursor: not-allowed; }
.cpu-path { width: 100%; max-width: 24rem; height: auto; display: block; margin: 0 auto .6rem; }
.cpu-path-box {
  fill: color-mix(in srgb, var(--muted) 10%, var(--bg));
  stroke: var(--rule);
}
.cpu-path-name { fill: var(--fg); font-size: 12px; font-weight: 600; }
.cpu-path-val {
  fill: var(--muted); font-size: 11px;
  font-family: "Source Code Pro", monospace;
}
.cpu-path-wire { stroke: var(--muted); stroke-width: 1.5; opacity: .55; }
.cpu-dot { fill: var(--signal); opacity: 0; }
.cpu-mem { display: grid; grid-template-columns: repeat(8, 1fr); gap: .4rem; }
.cpu-cell {
  text-align: center; border: 1px solid var(--rule); border-radius: 4px;
  padding: .35rem .2rem; font-family: "Source Code Pro", monospace;
}
.cpu-cell-addr { color: var(--muted); font-size: .72rem; }
.cpu-cell-value { font-weight: 600; font-size: .95rem; }
.cpu-cell-pc { border-color: var(--switch); }
.cpu-cell-pc .cpu-cell-value { color: var(--switch); }
@media (prefers-reduced-motion: no-preference) {
  .cpu-cell { transition: border-color .18s ease; }
  .cpu-cell-value { transition: color .18s ease; }
}
.switch-widget { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.switch-row { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
.switch-label { width: 1.2rem; color: var(--muted); font-weight: 600; }
.switch-bit {
  width: 2rem; height: 2rem; font-family: "Source Code Pro", monospace;
  cursor: pointer; color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px;
}
.switch-bit:hover { border-color: var(--switch); }
.switch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: .8rem 0;
}
.switch-cell {
  text-align: center; border: 1px solid var(--rule); border-radius: 4px;
  padding: .5rem .3rem; font-family: "Source Code Pro", monospace;
}
.switch-cell-name { color: var(--muted); font-size: .78rem; }
.switch-cell-value { font-weight: 600; font-size: 1.1rem; }
.switch-lit { border-color: var(--switch); }
.switch-lit .switch-cell-value { color: var(--switch); }
@media (prefers-reduced-motion: no-preference) {
  .switch-cell { transition: border-color .18s ease; }
  .switch-cell-value { transition: color .18s ease; }
}
.switch-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
}
.latch { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.latch-readout-row { display: flex; gap: .6rem; margin-bottom: .8rem; }
.latch-q {
  flex: 1; text-align: center; border: 1px solid var(--rule); border-radius: 4px;
  padding: .6rem .4rem;
}
.latch-q-label { color: var(--muted); font-size: .8rem; font-weight: 600; }
.latch-q-value {
  font-family: "Source Code Pro", monospace; font-size: 1.6rem; font-weight: 600;
  color: var(--fg);
}
.latch-q-value.latch-lit { color: var(--switch); }
@media (prefers-reduced-motion: no-preference) {
  .latch-q-value { transition: color .18s ease; }
}
.latch-svg { width: 100%; height: auto; display: block; margin: .4rem 0 .6rem; }
.latch-gatebox {
  fill: color-mix(in srgb, var(--muted) 10%, var(--bg));
  stroke: var(--rule);
}
.latch-text { fill: var(--muted); font-size: 12px; }
.latch-wire { stroke: var(--muted); stroke-width: 1.5; opacity: .55; }
/* The wire carrying the held 1 runs hot; holding is continuous
   re-assertion, so the hot loop drifts slowly. */
.latch-holds-one .latch-loop-q,
.latch-holds-zero .latch-loop-qbar {
  stroke: var(--signal); stroke-width: 2.5; opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .latch-holds-one .latch-loop-q,
  .latch-holds-zero .latch-loop-qbar {
    stroke-dasharray: 7 5;
    animation: latch-hold 1.6s linear infinite;
  }
  @keyframes latch-hold { to { stroke-dashoffset: -12; } }
}
.latch-buttons { display: flex; gap: .5rem; margin-bottom: .6rem; }
.latch-btn {
  font-family: inherit; font-size: .85rem; cursor: pointer;
  color: var(--fg); background: color-mix(in srgb, var(--switch) 14%, var(--bg));
  border: 1px solid var(--switch); border-radius: 4px; padding: .35rem .8rem;
}
.latch-btn:disabled { opacity: .55; cursor: progress; }
.latch-note {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
}
.text-widget { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.text-widget input {
  width: 100%; font-family: "Source Code Pro", monospace; font-size: .95rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--rule);
  border-radius: 4px; padding: .45rem .6rem;
}
.text-widget input:focus { outline: none; border-color: var(--switch); }
.text-widget-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--muted);
  margin-top: .6rem;
}
.text-widget-readout:empty { display: none; }
/* Widgets that build a sequence (tokens, words, fields, hops) reveal each
   piece in the order the real code produced it. */
.token-chip, .url-field, .route-node, .route-arrow, .asm-word, .tls-field,
.render-line {
  transition: opacity .25s ease;
}
.sweep-wait { opacity: 0; }
.token-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.token-chip {
  text-align: center; border: 1px solid var(--rule); border-radius: 4px;
  padding: .4rem .6rem; font-family: "Source Code Pro", monospace;
}
.token-kind { color: var(--muted); font-size: .72rem; }
.token-value { font-weight: 600; font-size: 1rem; color: var(--fg); }
.url-parts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.url-field {
  flex: 1; min-width: 8rem; text-align: center; border: 1px solid var(--rule);
  border-radius: 4px; padding: .5rem .4rem; font-family: "Source Code Pro", monospace;
}
.url-field-label { color: var(--muted); font-size: .78rem; }
.url-field-value { font-weight: 600; font-size: 1rem; color: var(--switch); }
.tls { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.tls-row { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; }
.tls-row label { flex: 1; color: var(--muted); font-weight: 600; }
.tls-row input[type="number"] {
  width: 6rem; font-family: "Source Code Pro", monospace; font-size: .95rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--rule);
  border-radius: 4px; padding: .3rem .5rem;
}
.tls-row input[type="number"]:focus { outline: none; border-color: var(--switch); }
.tls-wire, .tls-secrets { display: flex; gap: .6rem; margin: .8rem 0 0; }
.tls-field {
  flex: 1; text-align: center; border: 1px solid var(--rule); border-radius: 4px;
  padding: .5rem .4rem;
}
.tls-field-label { color: var(--muted); font-size: .76rem; }
.tls-field-value {
  font-weight: 600; font-size: 1rem; font-family: "Source Code Pro", monospace;
  color: var(--fg); overflow-wrap: anywhere;
}
.tls-secret { border-width: 2px; }
.tls-matched { border-color: var(--switch); }
.tls-matched .tls-field-value { color: var(--switch); }
.tls-matched-note {
  color: var(--switch); font-family: "STIX Two Text", Georgia, serif;
  font-style: italic; margin-top: .5rem; text-align: center;
}
.tls-matched-note:empty { display: none; }
.tls-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
  margin-top: .5rem;
}
.render-widget textarea {
  width: 100%; min-height: 5rem; font-family: "Source Code Pro", monospace;
  font-size: .85rem; color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px; padding: .5rem .6rem;
  resize: vertical;
}
.render-widget textarea:focus { outline: none; border-color: var(--switch); }
.render-out {
  margin-top: .6rem; white-space: pre-wrap; font-family: "Source Code Pro", monospace;
  font-size: .82rem; color: var(--fg); border: 1px solid var(--rule);
  border-radius: 4px; padding: .8rem 1rem; overflow-x: auto;
}
.asm-widget { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.asm-widget textarea {
  width: 100%; min-height: 6rem; font-family: "Source Code Pro", monospace;
  font-size: .85rem; color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px; padding: .5rem .6rem;
  resize: vertical;
}
.asm-widget textarea:focus { outline: none; border-color: var(--switch); }
.asm-out {
  margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .5rem;
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
}
.asm-out:empty { display: none; }
.asm-word {
  text-align: center; border: 1px solid var(--rule); border-radius: 4px;
  padding: .4rem .6rem;
}
.asm-word-dec { color: var(--muted); font-size: .78rem; }
.asm-word-bin { font-weight: 600; font-size: 1rem; }
.routing { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.routing-row { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; }
.routing-row label { flex: 1; color: var(--muted); font-weight: 600; }
.routing-row input[type="text"] {
  width: 6rem; font-family: "Source Code Pro", monospace; font-size: .95rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--rule);
  border-radius: 4px; padding: .3rem .5rem;
}
.routing-row input[type="text"]:focus { outline: none; border-color: var(--switch); }
.route-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .8rem;
}
.route-node {
  border: 1px solid var(--rule); border-radius: 4px; padding: .4rem .7rem;
  font-family: "Source Code Pro", monospace; font-weight: 600;
}
.route-endpoint { border-color: var(--switch); color: var(--switch); }
.route-arrow { color: var(--muted); }
.routing-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
  margin-top: .6rem;
}
.routing-readout:empty { display: none; }
.mosfet { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem; }
.mosfet-svg { width: 100%; height: auto; display: block; }
.mosfet-body {
  fill: color-mix(in srgb, var(--muted) 12%, var(--bg));
  stroke: var(--rule);
}
.mosfet-well {
  fill: color-mix(in srgb, var(--signal) 22%, var(--bg));
  stroke: color-mix(in srgb, var(--signal) 55%, var(--bg));
}
.mosfet-oxide { fill: var(--rule); }
.mosfet-gate {
  fill: color-mix(in srgb, var(--switch) 14%, var(--bg));
  stroke: var(--switch);
}
.mosfet-on .mosfet-gate { fill: color-mix(in srgb, var(--switch) 45%, var(--bg)); }
.mosfet-wire { stroke: var(--muted); stroke-width: 1.5; }
.mosfet-text { fill: var(--muted); font-size: 11px; }
.mosfet-channel { fill: var(--signal); opacity: 0; transition: opacity .3s ease; }
.mosfet-on .mosfet-channel { opacity: .85; }
.mosfet-current {
  stroke: var(--signal); stroke-width: 2; stroke-dasharray: 6 6;
  opacity: 0; transition: opacity .3s ease;
}
.mosfet-on .mosfet-current { opacity: .6; }
.mosfet-electron { fill: var(--signal); opacity: 0; }
.mosfet-lamp { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.mosfet-on .mosfet-lamp { fill: var(--switch); stroke: var(--switch); }
.mosfet-readout {
  font-family: "Source Code Pro", monospace; font-size: .85rem; color: var(--fg);
  margin-top: .5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .mosfet-on .mosfet-current { animation: mosfet-flow 1s linear infinite; }
  .mosfet-on .mosfet-electron {
    opacity: .9;
    animation: mosfet-drift 2.4s linear infinite;
    animation-delay: calc(var(--i) * -0.48s);
  }
  @keyframes mosfet-flow { to { stroke-dashoffset: -12; } }
  @keyframes mosfet-drift {
    from { cx: 118; opacity: 0; }
    10% { opacity: .9; }
    90% { opacity: .9; }
    to { cx: 242; opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mosfet-on .mosfet-electron { opacity: .9; cx: 180; }
}
.browse-stages { margin: .8rem 0 .2rem; }
.browse-caption {
  color: var(--muted); font-size: .9rem; font-style: italic; margin: 0 0 .5rem;
}
.browse-out {
  margin-top: .6rem; white-space: pre-wrap; font-family: "Source Code Pro", monospace;
  font-size: .82rem; color: var(--fg); border: 1px solid var(--rule);
  border-radius: 4px; padding: .8rem 1rem; overflow-x: auto;
}
.cover {
  display: block; margin: 0 auto 1.6rem; max-width: 300px; width: 100%;
  height: auto; border: 1px solid var(--rule); border-radius: 4px;
}

pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; 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; }
.code .hll { background-color: #ffffcc }
.code { background: #f8f8f8; }
.code .c { color: #3D7B7B; font-style: italic } /* Comment */
.code .err { border: 1px solid #F00 } /* Error */
.code .k { color: #008000; font-weight: bold } /* Keyword */
.code .o { color: #666 } /* Operator */
.code .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.code .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.code .cp { color: #9C6500 } /* Comment.Preproc */
.code .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.code .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.code .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.code .gd { color: #A00000 } /* Generic.Deleted */
.code .ge { font-style: italic } /* Generic.Emph */
.code .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.code .gr { color: #E40000 } /* Generic.Error */
.code .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.code .gi { color: #008400 } /* Generic.Inserted */
.code .go { color: #717171 } /* Generic.Output */
.code .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.code .gs { font-weight: bold } /* Generic.Strong */
.code .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.code .gt { color: #04D } /* Generic.Traceback */
.code .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.code .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.code .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.code .kp { color: #008000 } /* Keyword.Pseudo */
.code .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.code .kt { color: #B00040 } /* Keyword.Type */
.code .m { color: #666 } /* Literal.Number */
.code .s { color: #BA2121 } /* Literal.String */
.code .na { color: #687822 } /* Name.Attribute */
.code .nb { color: #008000 } /* Name.Builtin */
.code .nc { color: #00F; font-weight: bold } /* Name.Class */
.code .no { color: #800 } /* Name.Constant */
.code .nd { color: #A2F } /* Name.Decorator */
.code .ni { color: #717171; font-weight: bold } /* Name.Entity */
.code .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.code .nf { color: #00F } /* Name.Function */
.code .nl { color: #767600 } /* Name.Label */
.code .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.code .nt { color: #008000; font-weight: bold } /* Name.Tag */
.code .nv { color: #19177C } /* Name.Variable */
.code .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.code .w { color: #BBB } /* Text.Whitespace */
.code .mb { color: #666 } /* Literal.Number.Bin */
.code .mf { color: #666 } /* Literal.Number.Float */
.code .mh { color: #666 } /* Literal.Number.Hex */
.code .mi { color: #666 } /* Literal.Number.Integer */
.code .mo { color: #666 } /* Literal.Number.Oct */
.code .sa { color: #BA2121 } /* Literal.String.Affix */
.code .sb { color: #BA2121 } /* Literal.String.Backtick */
.code .sc { color: #BA2121 } /* Literal.String.Char */
.code .dl { color: #BA2121 } /* Literal.String.Delimiter */
.code .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.code .s2 { color: #BA2121 } /* Literal.String.Double */
.code .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.code .sh { color: #BA2121 } /* Literal.String.Heredoc */
.code .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.code .sx { color: #008000 } /* Literal.String.Other */
.code .sr { color: #A45A77 } /* Literal.String.Regex */
.code .s1 { color: #BA2121 } /* Literal.String.Single */
.code .ss { color: #19177C } /* Literal.String.Symbol */
.code .bp { color: #008000 } /* Name.Builtin.Pseudo */
.code .fm { color: #00F } /* Name.Function.Magic */
.code .vc { color: #19177C } /* Name.Variable.Class */
.code .vg { color: #19177C } /* Name.Variable.Global */
.code .vi { color: #19177C } /* Name.Variable.Instance */
.code .vm { color: #19177C } /* Name.Variable.Magic */
.code .il { color: #666 } /* 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; }
[data-theme="dark"] .code .hll { background-color: #6e7681 }
[data-theme="dark"] .code { background: #0d1117; color: #E6EDF3 }
[data-theme="dark"] .code .c { color: #8B949E; font-style: italic } /* Comment */
[data-theme="dark"] .code .err { color: #F85149 } /* Error */
[data-theme="dark"] .code .esc { color: #E6EDF3 } /* Escape */
[data-theme="dark"] .code .g { color: #E6EDF3 } /* Generic */
[data-theme="dark"] .code .k { color: #FF7B72 } /* Keyword */
[data-theme="dark"] .code .l { color: #A5D6FF } /* Literal */
[data-theme="dark"] .code .n { color: #E6EDF3 } /* Name */
[data-theme="dark"] .code .o { color: #FF7B72; font-weight: bold } /* Operator */
[data-theme="dark"] .code .x { color: #E6EDF3 } /* Other */
[data-theme="dark"] .code .p { color: #E6EDF3 } /* Punctuation */
[data-theme="dark"] .code .ch { color: #8B949E; font-style: italic } /* Comment.Hashbang */
[data-theme="dark"] .code .cm { color: #8B949E; font-style: italic } /* Comment.Multiline */
[data-theme="dark"] .code .cp { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Preproc */
[data-theme="dark"] .code .cpf { color: #8B949E; font-style: italic } /* Comment.PreprocFile */
[data-theme="dark"] .code .c1 { color: #8B949E; font-style: italic } /* Comment.Single */
[data-theme="dark"] .code .cs { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Special */
[data-theme="dark"] .code .gd { color: #FFA198; background-color: #490202 } /* Generic.Deleted */
[data-theme="dark"] .code .ge { color: #E6EDF3; font-style: italic } /* Generic.Emph */
[data-theme="dark"] .code .ges { color: #E6EDF3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
[data-theme="dark"] .code .gr { color: #FFA198 } /* Generic.Error */
[data-theme="dark"] .code .gh { color: #79C0FF; font-weight: bold } /* Generic.Heading */
[data-theme="dark"] .code .gi { color: #56D364; background-color: #0F5323 } /* Generic.Inserted */
[data-theme="dark"] .code .go { color: #8B949E } /* Generic.Output */
[data-theme="dark"] .code .gp { color: #8B949E } /* Generic.Prompt */
[data-theme="dark"] .code .gs { color: #E6EDF3; font-weight: bold } /* Generic.Strong */
[data-theme="dark"] .code .gu { color: #79C0FF } /* Generic.Subheading */
[data-theme="dark"] .code .gt { color: #FF7B72 } /* Generic.Traceback */
[data-theme="dark"] .code .g-Underline { color: #E6EDF3; text-decoration: underline } /* Generic.Underline */
[data-theme="dark"] .code .kc { color: #79C0FF } /* Keyword.Constant */
[data-theme="dark"] .code .kd { color: #FF7B72 } /* Keyword.Declaration */
[data-theme="dark"] .code .kn { color: #FF7B72 } /* Keyword.Namespace */
[data-theme="dark"] .code .kp { color: #79C0FF } /* Keyword.Pseudo */
[data-theme="dark"] .code .kr { color: #FF7B72 } /* Keyword.Reserved */
[data-theme="dark"] .code .kt { color: #FF7B72 } /* Keyword.Type */
[data-theme="dark"] .code .ld { color: #79C0FF } /* Literal.Date */
[data-theme="dark"] .code .m { color: #A5D6FF } /* Literal.Number */
[data-theme="dark"] .code .s { color: #A5D6FF } /* Literal.String */
[data-theme="dark"] .code .na { color: #E6EDF3 } /* Name.Attribute */
[data-theme="dark"] .code .nb { color: #E6EDF3 } /* Name.Builtin */
[data-theme="dark"] .code .nc { color: #F0883E; font-weight: bold } /* Name.Class */
[data-theme="dark"] .code .no { color: #79C0FF; font-weight: bold } /* Name.Constant */
[data-theme="dark"] .code .nd { color: #D2A8FF; font-weight: bold } /* Name.Decorator */
[data-theme="dark"] .code .ni { color: #FFA657 } /* Name.Entity */
[data-theme="dark"] .code .ne { color: #F0883E; font-weight: bold } /* Name.Exception */
[data-theme="dark"] .code .nf { color: #D2A8FF; font-weight: bold } /* Name.Function */
[data-theme="dark"] .code .nl { color: #79C0FF; font-weight: bold } /* Name.Label */
[data-theme="dark"] .code .nn { color: #FF7B72 } /* Name.Namespace */
[data-theme="dark"] .code .nx { color: #E6EDF3 } /* Name.Other */
[data-theme="dark"] .code .py { color: #79C0FF } /* Name.Property */
[data-theme="dark"] .code .nt { color: #7EE787 } /* Name.Tag */
[data-theme="dark"] .code .nv { color: #79C0FF } /* Name.Variable */
[data-theme="dark"] .code .ow { color: #FF7B72; font-weight: bold } /* Operator.Word */
[data-theme="dark"] .code .pm { color: #E6EDF3 } /* Punctuation.Marker */
[data-theme="dark"] .code .w { color: #6E7681 } /* Text.Whitespace */
[data-theme="dark"] .code .mb { color: #A5D6FF } /* Literal.Number.Bin */
[data-theme="dark"] .code .mf { color: #A5D6FF } /* Literal.Number.Float */
[data-theme="dark"] .code .mh { color: #A5D6FF } /* Literal.Number.Hex */
[data-theme="dark"] .code .mi { color: #A5D6FF } /* Literal.Number.Integer */
[data-theme="dark"] .code .mo { color: #A5D6FF } /* Literal.Number.Oct */
[data-theme="dark"] .code .sa { color: #79C0FF } /* Literal.String.Affix */
[data-theme="dark"] .code .sb { color: #A5D6FF } /* Literal.String.Backtick */
[data-theme="dark"] .code .sc { color: #A5D6FF } /* Literal.String.Char */
[data-theme="dark"] .code .dl { color: #79C0FF } /* Literal.String.Delimiter */
[data-theme="dark"] .code .sd { color: #A5D6FF } /* Literal.String.Doc */
[data-theme="dark"] .code .s2 { color: #A5D6FF } /* Literal.String.Double */
[data-theme="dark"] .code .se { color: #79C0FF } /* Literal.String.Escape */
[data-theme="dark"] .code .sh { color: #79C0FF } /* Literal.String.Heredoc */
[data-theme="dark"] .code .si { color: #A5D6FF } /* Literal.String.Interpol */
[data-theme="dark"] .code .sx { color: #A5D6FF } /* Literal.String.Other */
[data-theme="dark"] .code .sr { color: #79C0FF } /* Literal.String.Regex */
[data-theme="dark"] .code .s1 { color: #A5D6FF } /* Literal.String.Single */
[data-theme="dark"] .code .ss { color: #A5D6FF } /* Literal.String.Symbol */
[data-theme="dark"] .code .bp { color: #E6EDF3 } /* Name.Builtin.Pseudo */
[data-theme="dark"] .code .fm { color: #D2A8FF; font-weight: bold } /* Name.Function.Magic */
[data-theme="dark"] .code .vc { color: #79C0FF } /* Name.Variable.Class */
[data-theme="dark"] .code .vg { color: #79C0FF } /* Name.Variable.Global */
[data-theme="dark"] .code .vi { color: #79C0FF } /* Name.Variable.Instance */
[data-theme="dark"] .code .vm { color: #79C0FF } /* Name.Variable.Magic */
[data-theme="dark"] .code .il { color: #A5D6FF } /* Literal.Number.Integer.Long */