:root {
  color-scheme: dark;
  --void: #050505;
  --deep: #09090a;
  --panel: #0d0d0f;
  --panel-raised: #121214;
  --paper: #f5f0e6;
  --soft: #d9d3c8;
  --muted: #9c968d;
  --faint: #77736d;
  --line: rgba(245, 240, 230, .14);
  --line-strong: rgba(245, 240, 230, .4);
  --accent: #a89fff;
  --accent-bright: #c1bcff;
  --accent-soft: rgba(168, 159, 255, .12);
  --accent-line: rgba(168, 159, 255, .5);
  --cyan: #96d8cf;
  --cyan-soft: rgba(150, 216, 207, .1);
  --cyan-line: rgba(150, 216, 207, .48);
  --amber: #dbb878;
  --amber-soft: rgba(219, 184, 120, .1);
  --red: #dc9180;
  --red-soft: rgba(220, 145, 128, .1);
  --green: #b8d5bd;
  --green-soft: rgba(184, 213, 189, .1);
  --display: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --body: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --ui: Inter, "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --shell: 82rem;
  --prose: 46rem;
  --wide: 65rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-gap: clamp(5.5rem, 11vw, 9rem);
  --fast: 180ms;
  --normal: 320ms;
  --ease: cubic-bezier(.2, .72, .2, 1);
}

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

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  background: var(--void);
}

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
  color: var(--paper);
  background:
    radial-gradient(ellipse 68% 30% at 76% 3%, rgba(168, 159, 255, .09), transparent 70%),
    linear-gradient(rgba(245, 240, 230, .017) 1px, transparent 1px) 0 0 / 100% 11rem,
    var(--void);
  font-family: var(--body);
  font-size: clamp(1.04rem, 1.16vw, 1.13rem);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .16;
  background-image:
    radial-gradient(circle at 17% 29%, rgba(255, 255, 255, .1) 0 .5px, transparent .8px),
    radial-gradient(circle at 79% 67%, rgba(255, 255, 255, .06) 0 .5px, transparent .75px);
  background-size: 97px 89px, 149px 137px;
}

::selection {
  color: var(--void);
  background: var(--accent);
}

a {
  color: inherit;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}

a:hover {
  text-decoration-color: currentColor;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

code,
kbd,
pre {
  font-family: var(--mono);
}

code {
  font-size: .88em;
}

:not(pre) > code {
  padding: .1em .34em;
  border: 1px solid rgba(168, 159, 255, .23);
  color: var(--accent-bright);
  background: var(--accent-soft);
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  overflow: auto;
  tab-size: 4;
  white-space: pre;
}

pre code {
  font-size: .84rem;
  line-height: 1.8;
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: .78em;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .7rem 1rem;
  color: var(--void);
  background: var(--paper);
  font-family: var(--ui);
  font-size: .76rem;
  letter-spacing: .08em;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--fast) ease;
}

.skip-link:focus {
  transform: none;
}

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: 2px;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transform-origin: 0 50%;
}

.site-header,
.hero,
.thesis,
.page-grid,
.course-close,
.site-footer {
  width: min(100% - 2 * var(--gutter), var(--shell));
  margin-inline: auto;
}

.site-header {
  position: relative;
  z-index: 10;
  min-height: 5.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--ui);
}

.brand {
  flex: none;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .36em;
  text-decoration: none;
}

.lesson-path {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .13em;
  line-height: 1.55;
  text-align: right;
  text-transform: uppercase;
}

.lesson-path strong {
  color: var(--soft);
  font-weight: 500;
}

.hero {
  position: relative;
  min-height: min(58rem, calc(100svh - 5.1rem));
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(24rem, .96fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
}

.hero::after {
  position: absolute;
  top: 9%;
  left: 51%;
  z-index: -1;
  width: 31rem;
  height: 31rem;
  border: 1px solid rgba(168, 159, 255, .08);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 5rem rgba(168, 159, 255, .018),
    0 0 0 10rem rgba(168, 159, 255, .01);
}

.hero-kicker,
.section-index,
.micro-label,
.lab-tag,
.note-label,
.toc-title {
  margin: 0;
  color: var(--accent);
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 13ch;
  margin: 1.45rem 0 1.8rem;
  font-family: var(--display);
  font-size: clamp(3.55rem, 6.5vw, 6.75rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .99;
}

.hero h1 span {
  display: block;
  margin-top: 1.35rem;
  color: var(--muted);
  font-family: var(--ui);
  font-size: clamp(.72rem, .95vw, .88rem);
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 1.7;
  text-transform: uppercase;
}

.hero-deck {
  max-width: 36rem;
  margin: 0;
  color: var(--soft);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.85;
}

.lesson-facts {
  max-width: 36rem;
  margin: 2.6rem 0 0;
  padding: 1.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--line);
  list-style: none;
  font-family: var(--ui);
}

.lesson-facts li {
  min-width: 0;
}

.lesson-facts span,
.lesson-facts strong {
  display: block;
}

.lesson-facts span {
  margin-bottom: .25rem;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .08em;
}

.lesson-facts strong {
  font-size: .84rem;
  font-weight: 500;
}

.contract-machine {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--accent-line);
  background:
    linear-gradient(rgba(168, 159, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 159, 255, .035) 1px, transparent 1px),
    rgba(9, 9, 10, .82);
  background-size: 2.5rem 2.5rem;
  box-shadow: 0 1.7rem 5rem rgba(0, 0, 0, .38);
}

.contract-machine figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.machine-top {
  min-height: 2.5rem;
  padding: .6rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
}

.machine-input,
.machine-gate,
.machine-core,
.machine-output {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(13, 13, 15, .88);
}

.machine-input {
  margin: 1.8rem 1rem 0;
  padding: 1rem;
  display: grid;
  gap: .45rem;
  border-color: var(--cyan-line);
}

.machine-label,
.machine-gate small,
.machine-core small,
.machine-output small {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .65rem;
  letter-spacing: .14em;
}

.machine-input code,
.machine-core code,
.machine-output code {
  color: var(--soft);
  font-size: .7rem;
  overflow-wrap: anywhere;
}

.machine-arrow {
  height: 2rem;
  display: grid;
  place-items: center;
}

.machine-arrow span {
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--cyan), var(--accent));
}

.machine-gate,
.machine-core {
  min-height: 4.35rem;
  margin-inline: clamp(1rem, 7vw, 4rem);
  padding: .8rem 1rem .8rem 3.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .8rem;
}

.machine-gate {
  border-color: var(--amber);
}

.machine-core {
  border-color: var(--accent-line);
}

.machine-index {
  position: absolute;
  top: .75rem;
  left: .75rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: .62rem;
}

.machine-gate div,
.machine-core div,
.machine-output {
  display: grid;
}

.machine-gate strong,
.machine-core strong,
.machine-output strong {
  font-family: var(--ui);
  font-size: .86rem;
  font-weight: 500;
}

.machine-gate b {
  padding: .25rem .5rem;
  border: 1px solid rgba(184, 213, 189, .5);
  color: var(--green);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
}

.machine-fork {
  position: relative;
  height: 2.4rem;
}

.machine-fork::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 50%;
  content: "";
  background: var(--accent);
}

.machine-fork i {
  position: absolute;
  bottom: 0;
  width: 35%;
  height: 50%;
  border-top: 1px solid var(--accent);
}

.machine-fork i:first-child {
  left: 15%;
  border-left: 1px solid var(--accent);
}

.machine-fork i:last-child {
  right: 15%;
  border-right: 1px solid var(--accent);
}

.machine-outputs {
  padding: 0 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}

.machine-output {
  min-height: 6.3rem;
  padding: 1rem 1rem .8rem 3rem;
  align-content: center;
  gap: .2rem;
}

.storage-output {
  border-color: var(--cyan-line);
}

.event-output {
  border-color: rgba(219, 184, 120, .5);
}

.thesis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line-strong);
}

.thesis > div {
  min-height: 13rem;
  padding: 2.2rem clamp(1rem, 2.5vw, 2rem);
  border-right: 1px solid var(--line);
}

.thesis > div:first-child {
  padding-left: 0;
}

.thesis > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.thesis strong,
.thesis span {
  display: block;
}

.thesis strong {
  margin: .9rem 0 .65rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.45;
}

.thesis span {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.75;
}

.page-grid {
  position: relative;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 8rem);
  padding: var(--section-gap) 0;
}

.toc {
  position: sticky;
  top: 2.5rem;
  align-self: start;
  max-height: calc(100svh - 5rem);
  overflow: auto;
  scrollbar-width: thin;
  font-family: var(--ui);
}

.toc-title {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.toc ol {
  margin: .65rem 0 0;
  padding: 0;
  list-style: none;
}

.toc li {
  border-bottom: 1px solid rgba(245, 240, 230, .075);
}

.toc a {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color var(--fast) ease,
    padding var(--fast) ease;
}

.toc a span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .62rem;
}

.toc a:hover,
.toc a[aria-current="location"] {
  padding-left: .35rem;
  color: var(--paper);
}

.toc a[aria-current="location"] span {
  color: var(--accent);
}

.toc-note {
  margin: 1.2rem 0 0;
  color: var(--faint);
  font-size: .72rem;
  line-height: 1.65;
}

.lesson {
  min-width: 0;
}

.chapter {
  width: min(100%, var(--prose));
  margin: 0 0 var(--section-gap);
  scroll-margin-top: 2rem;
}

.chapter:last-child {
  margin-bottom: 0;
}

.wide-chapter {
  width: min(100%, var(--wide));
}

.chapter-header {
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--line-strong);
}

.chapter h2 {
  max-width: 14ch;
  margin: .85rem 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(2.35rem, 4.4vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.section-deck {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
}

.chapter > h3,
.chapter > .wide + h3,
.chapter > p + h3,
.chapter > ul + h3,
.chapter > div + h3 {
  margin: 3.7rem 0 1.35rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.35;
}

.chapter p {
  color: var(--soft);
}

.chapter .lead {
  margin: 0 0 2.5rem;
  color: var(--paper);
  font-size: clamp(1.18rem, 1.8vw, 1.48rem);
  line-height: 1.8;
}

.wide {
  width: min(var(--wide), calc(100vw - 2 * var(--gutter)));
}

.definition,
.precision,
.warning,
.takeaway {
  position: relative;
  margin: 2.6rem 0;
  padding: 1.5rem 1.65rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.definition {
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
}

.precision {
  border-left: 2px solid var(--cyan);
  background: var(--cyan-soft);
}

.warning {
  border-left: 2px solid var(--red);
  background: var(--red-soft);
}

.takeaway {
  border-left: 2px solid var(--amber);
  background: var(--amber-soft);
}

.definition p,
.precision p,
.warning p,
.takeaway p {
  margin: .7rem 0 0;
}

.note-label {
  display: block;
}

.compile-route {
  margin-block: 3rem;
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, .85fr) auto minmax(15rem, 1.2fr);
  align-items: center;
  gap: 1rem;
}

.route-node {
  min-height: 9rem;
  padding: 1.2rem;
  display: grid;
  align-content: center;
  gap: .35rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.route-node small {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .64rem;
  letter-spacing: .14em;
}

.route-node strong {
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 500;
}

.route-node code {
  color: var(--muted);
  font-size: .7rem;
}

.source-node {
  border-color: var(--cyan-line);
}

.compiler-node {
  border-color: var(--accent-line);
}

.route-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

.route-split .route-node {
  min-height: 9rem;
}

.bytecode-node {
  border-color: rgba(219, 184, 120, .45);
}

.abi-node {
  border-color: rgba(168, 159, 255, .4);
}

.route-arrow {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1.2rem;
}

.causal-list {
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: causal;
}

.causal-list li {
  min-height: 5rem;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
}

.causal-list strong {
  color: var(--paper);
  font-family: var(--ui);
  font-size: .9rem;
}

.causal-list span {
  color: var(--muted);
}

.code-window {
  margin-block: 2.8rem;
  border: 1px solid var(--line);
  background: #08080a;
  box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, .25);
}

.code-toolbar {
  min-height: 3rem;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
}

.copy-button {
  min-height: 2.1rem;
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  color: var(--soft);
  background: transparent;
  font-family: var(--ui);
  font-size: .7rem;
  transition:
    color var(--fast) ease,
    border-color var(--fast) ease,
    background var(--fast) ease;
}

.copy-button:hover {
  border-color: var(--accent-line);
  color: var(--paper);
  background: var(--accent-soft);
}

.code-window pre {
  padding: 1.3rem 1.4rem 1.6rem;
}

.code-comment {
  color: #8b9489;
}

.code-keyword {
  color: var(--accent-bright);
}

.code-type {
  color: var(--cyan);
}

.code-number {
  color: var(--amber);
}

.code-global {
  color: #efb0a2;
}

.anatomy-grid,
.decision-grid,
.boundary-grid,
.responsibility-grid,
.myth-grid {
  margin-block: 2.8rem;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.anatomy-grid {
  grid-template-columns: repeat(4, 1fr);
}

.anatomy-grid article,
.decision-grid article,
.boundary-grid article,
.responsibility-grid article,
.myth-grid article {
  min-width: 0;
  padding: 1.45rem;
  background: var(--panel);
}

.anatomy-grid article > span,
.boundary-grid article > span,
.responsibility-grid article > span,
.myth-grid article > span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
}

.anatomy-grid h3,
.decision-grid strong,
.boundary-grid strong,
.responsibility-grid strong,
.myth-grid strong {
  display: block;
  margin: .75rem 0 .45rem;
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.anatomy-grid p,
.decision-grid p,
.boundary-grid p,
.responsibility-grid p,
.myth-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.75;
}

.truth-table-wrap {
  margin-block: 2rem;
  overflow-x: auto;
  border: 1px solid var(--line);
}

.truth-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  color: var(--soft);
  font-size: .92rem;
}

.truth-table th,
.truth-table td {
  padding: 1rem 1.15rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.truth-table th {
  color: var(--muted);
  background: var(--panel-raised);
  font-family: var(--ui);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.truth-table tr:last-child td {
  border-bottom: 0;
}

.truth-table th:last-child,
.truth-table td:last-child {
  border-right: 0;
}

.type-families {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.type-family {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.type-family header {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.type-family h3 {
  margin: .5rem 0 0;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
}

.value-family {
  border-top-color: var(--cyan);
}

.reference-family {
  border-top-color: var(--accent);
}

.type-family ul {
  margin: 0;
  padding: .5rem 0;
  list-style: none;
}

.type-family li {
  min-height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.type-family li span {
  color: var(--muted);
  font-size: .86rem;
  text-align: right;
}

.type-family > p {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.decision-grid {
  grid-template-columns: repeat(3, 1fr);
}

.decision-grid article > code {
  color: var(--cyan);
  font-size: .78rem;
}

.formula {
  margin-block: 3rem;
  padding: 1.8rem;
  border: 1px solid var(--accent-line);
  background:
    linear-gradient(90deg, rgba(168, 159, 255, .07), transparent 62%),
    var(--panel);
}

.formula-label {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--accent);
  font-family: var(--ui);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.formula > div {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.formula > div code {
  color: var(--accent-bright);
  font-size: 1.25rem;
}

.formula > div b {
  font-family: var(--display);
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  font-weight: 400;
}

.formula p {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.location-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 1rem;
}

.location-zone {
  min-height: 13rem;
  padding: 1.4rem;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  background: var(--panel);
}

.location-zone > span {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .65rem;
  letter-spacing: .14em;
}

.location-zone > strong {
  margin: .65rem 0;
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 500;
}

.location-zone p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
}

.calldata-zone {
  border-color: var(--cyan-line);
}

.memory-zone {
  border-color: rgba(219, 184, 120, .48);
}

.storage-zone {
  border-color: var(--accent-line);
}

.location-map > i {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-family: var(--mono);
  font-style: normal;
}

.lab {
  margin-block: 3.5rem;
  border: 1px solid var(--line-strong);
  background: var(--deep);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .28);
}

.lab-head {
  min-height: 6.5rem;
  padding: 1.35rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--accent-soft), transparent 55%);
}

.lab-head h3 {
  margin: .45rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 400;
}

.lab-index {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 2rem;
}

.lab-body {
  display: grid;
  grid-template-columns: minmax(17rem, .86fr) minmax(0, 1.14fr);
}

.lab-controls,
.lab-output {
  min-width: 0;
  padding: 1.5rem;
}

.lab-controls {
  border-right: 1px solid var(--line);
}

.control-label {
  margin: 0 0 .75rem;
  color: var(--soft);
  font-family: var(--ui);
  font-size: .77rem;
  font-weight: 500;
}

.control-label:not(:first-child) {
  margin-top: 1.5rem;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.chip {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font-family: var(--mono);
  font-size: .7rem;
  transition:
    color var(--fast) ease,
    border-color var(--fast) ease,
    background var(--fast) ease;
}

.chip:hover {
  color: var(--paper);
  border-color: var(--line-strong);
}

.chip[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.mini-code,
.declaration-output {
  margin-top: 1.3rem;
  padding: 1rem;
  border: 1px solid var(--line);
  color: var(--soft);
  background: #070708;
}

.lab-foot {
  margin: 1rem 0 0;
  color: var(--faint) !important;
  font-family: var(--ui);
  font-size: .74rem;
  line-height: 1.65;
}

.lab-status {
  min-height: 3.25rem;
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border-left: 2px solid var(--accent);
  color: var(--soft) !important;
  background: var(--accent-soft);
  font-family: var(--ui);
  font-size: .82rem;
  line-height: 1.65;
}

.lab-status.success {
  border-left-color: var(--green);
  background: var(--green-soft);
}

.lab-status.failure {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.location-facts,
.function-facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.location-facts div,
.function-facts div {
  min-width: 0;
  padding: .85rem;
  background: var(--panel);
}

.location-facts dt,
.function-facts dt {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .67rem;
  letter-spacing: .07em;
}

.location-facts dd,
.function-facts dd {
  margin: .35rem 0 0;
  color: var(--soft);
  font-size: .86rem;
  line-height: 1.55;
}

.location-visual {
  min-height: 5rem;
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}

.location-visual span {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--mono);
  font-size: .61rem;
  text-align: center;
}

.location-visual span.active {
  border-color: var(--accent-line);
  color: var(--paper);
  background: var(--accent-soft);
}

.code-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.code-compare section {
  min-width: 0;
  padding: 1.3rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.code-compare pre {
  margin-top: 1rem;
  color: var(--soft);
}

.rule-list {
  margin: 2.4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.rule-list li {
  min-height: 4.8rem;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
}

.rule-list strong {
  color: var(--paper);
  font-family: var(--ui);
  font-size: .84rem;
}

.rule-list span {
  color: var(--muted);
}

.shape-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.shape-card {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.shape-card h3 {
  margin: .55rem 0 1rem;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
}

.shape-card pre {
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid var(--line);
  color: var(--soft);
  background: #08080a;
}

.shape-card > p:last-child {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.struct-card {
  border-top-color: var(--cyan);
}

.mapping-card {
  border-top-color: var(--accent);
}

.mapping-diagram {
  min-height: 21rem;
  margin-block: 3rem;
  padding: 1.4rem;
  display: grid;
  grid-template-columns: 1fr minmax(12rem, .8fr) 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(168, 159, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 159, 255, .03) 1px, transparent 1px),
    var(--deep);
  background-size: 2.8rem 2.8rem;
}

.key-stack,
.record-stack {
  display: grid;
  gap: .7rem;
}

.key-stack span,
.record-stack span {
  min-height: 4rem;
  padding: .75rem;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  background: rgba(13, 13, 15, .9);
}

.key-stack code,
.record-stack code {
  color: var(--muted);
  font-size: .68rem;
}

.key-stack b,
.record-stack b {
  font-family: var(--ui);
  font-size: .79rem;
  font-weight: 500;
}

.ghost-key,
.ghost-record {
  border-style: dashed !important;
  opacity: .58;
}

.hash-gate {
  min-height: 9rem;
  padding: 1rem;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  text-align: center;
}

.hash-gate small,
.hash-gate span {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .65rem;
}

.hash-gate strong {
  margin: .45rem 0;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
}

.boundary-grid {
  grid-template-columns: repeat(5, 1fr);
}

.function-signature {
  display: grid;
  grid-template-columns: 1.1fr 1.7fr repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.sig-piece {
  min-width: 0;
  min-height: 7.5rem;
  padding: 1rem;
  display: grid;
  align-content: center;
  gap: .5rem;
  color: var(--soft);
  background: var(--panel);
  font-family: var(--mono);
  font-size: .72rem;
  overflow-wrap: anywhere;
}

.sig-piece small {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .6rem;
  letter-spacing: .1em;
}

.sig-name {
  box-shadow: inset 0 2px var(--cyan);
}

.sig-params {
  box-shadow: inset 0 2px var(--accent);
}

.sig-visibility,
.sig-mutability {
  box-shadow: inset 0 2px var(--amber);
}

.sig-modifier {
  box-shadow: inset 0 2px var(--red);
}

.sig-returns {
  box-shadow: inset 0 2px var(--green);
}

.mutability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.mutability-grid article {
  padding: 1.3rem;
  background: var(--panel);
}

.mutability-grid article > code {
  color: var(--accent-bright);
  font-size: .86rem;
}

.mutability-grid strong {
  display: block;
  margin: .7rem 0 .4rem;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
}

.mutability-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .87rem;
}

.function-facts {
  grid-template-columns: repeat(3, 1fr);
}

.selector-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
}

.selector-diagram > div {
  min-height: 10rem;
  padding: 1.3rem;
  display: grid;
  align-content: center;
  gap: .5rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.selector-diagram small {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .64rem;
  letter-spacing: .12em;
}

.selector-diagram div > code {
  color: var(--accent-bright);
  font-size: .76rem;
  overflow-wrap: anywhere;
}

.selector-diagram p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

.selector-diagram > span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: .65rem;
  text-align: center;
}

.modifier-wrap {
  min-height: 23rem;
  display: grid;
  grid-template-columns: 1fr 15rem;
  gap: 1rem;
}

.modifier-shell {
  padding: 1.4rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--amber);
  background: var(--amber-soft);
}

.shell-top,
.shell-bottom {
  padding: .85rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--soft);
  background: rgba(9, 9, 10, .72);
  font-family: var(--mono);
  font-size: .72rem;
}

.function-body {
  margin: 1rem 2rem;
  padding: 1.2rem;
  display: grid;
  align-content: center;
  gap: .45rem;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}

.function-body small {
  color: var(--accent);
  font-family: var(--mono);
}

.function-body strong {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
}

.function-body code {
  color: var(--muted);
  font-size: .72rem;
}

.modifier-fail {
  padding: 1.3rem;
  display: grid;
  align-content: center;
  border: 1px solid var(--red);
  background: var(--red-soft);
}

.modifier-fail span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .7rem;
}

.modifier-fail strong {
  margin: .7rem 0;
  color: var(--red);
  font-family: var(--ui);
  font-size: 1.3rem;
}

.modifier-fail p {
  margin: 0;
  color: var(--soft);
  font-size: .88rem;
}

.modifier-order {
  padding: 1.4rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.modifier-order > code {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent-bright);
}

.modifier-order p {
  margin: .35rem 0;
  color: var(--muted);
}

.event-anatomy {
  display: grid;
  grid-template-columns: 1fr 1.65fr .75fr;
  gap: 1rem;
  align-items: stretch;
}

.event-source,
.event-log,
.event-consumers {
  min-width: 0;
  padding: 1.3rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.event-source {
  display: grid;
  align-content: center;
  gap: .7rem;
  border-color: var(--amber);
}

.event-source small {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .65rem;
  letter-spacing: .13em;
}

.event-source code {
  color: var(--soft);
  overflow-wrap: anywhere;
}

.event-log {
  display: grid;
  gap: .6rem;
  border-color: var(--accent-line);
}

.log-address,
.log-data,
.log-topics span {
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--line);
  background: #08080a;
}

.log-address,
.log-data {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: .6rem;
}

.log-address span,
.log-data small,
.log-topics small {
  color: var(--muted);
  font-family: var(--ui);
  font-size: .61rem;
  letter-spacing: .08em;
}

.event-log code {
  color: var(--soft);
  font-size: .66rem;
  overflow-wrap: anywhere;
}

.log-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.log-topics span {
  display: grid;
  gap: .3rem;
}

.event-consumers {
  display: grid;
  align-content: center;
  gap: .5rem;
  border-color: var(--cyan-line);
}

.event-consumers span {
  min-height: 2.5rem;
  padding: .5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .66rem;
}

.event-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.event-choices article {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.event-choices article > code {
  display: block;
  margin: .65rem 0;
  color: var(--accent-bright);
  overflow-wrap: anywhere;
}

.event-choices strong {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
}

.event-choices p:last-child {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .87rem;
}

.concept-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1rem;
}

.concept-legend span {
  min-height: 2.5rem;
  padding: .45rem .75rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--ui);
  font-size: .7rem;
  letter-spacing: .05em;
}

.dot {
  width: .45rem;
  height: .45rem;
  display: inline-block;
  border-radius: 50%;
  background: var(--accent);
}

.type-dot,
.struct-dot {
  background: var(--cyan);
}

.function-dot,
.mapping-dot {
  background: var(--accent);
}

.modifier-dot {
  background: var(--amber);
}

.event-dot {
  background: var(--red);
}

.full-code {
  margin-top: 0;
}

.full-code pre {
  max-height: 58rem;
}

.responsibility-grid {
  grid-template-columns: repeat(3, 1fr);
}

.registry-grid {
  display: grid;
  grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.22fr);
}

.registry-controls,
.trace-panel {
  min-width: 0;
  padding: 1.5rem;
}

.registry-controls {
  border-right: 1px solid var(--line);
}

.registry-controls label {
  display: grid;
  gap: .45rem;
  margin-bottom: 1.2rem;
}

.registry-controls label > span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--soft);
  font-family: var(--ui);
  font-size: .76rem;
}

.registry-controls label small,
.registry-controls output {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
}

.registry-controls select,
.registry-controls input[type="text"] {
  width: 100%;
  min-height: 2.85rem;
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--soft);
  background: var(--panel);
  font-family: var(--mono);
  font-size: .76rem;
}

.registry-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.toggle-row {
  min-height: 3.5rem;
  padding: .65rem;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  border: 1px solid var(--line);
}

.toggle-row input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--accent);
}

.toggle-row > span {
  display: grid !important;
  justify-content: start !important;
  gap: 0 !important;
}

.toggle-row b {
  font-family: var(--mono);
  font-weight: 500;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
}

.primary-button,
.secondary-button {
  min-height: 3rem;
  padding: .65rem 1rem;
  border: 1px solid var(--line);
  font-family: var(--ui);
  font-size: .76rem;
}

.primary-button {
  border-color: var(--accent);
  color: var(--void);
  background: var(--accent);
}

.primary-button:hover {
  background: var(--accent-bright);
}

.secondary-button {
  color: var(--muted);
  background: transparent;
}

.secondary-button:hover {
  color: var(--paper);
  border-color: var(--line-strong);
}

.trace-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  list-style: none;
}

.trace-list li {
  min-height: 4.7rem;
  padding: .8rem;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid var(--line);
  transition:
    background var(--normal) ease,
    border-color var(--normal) ease;
}

.trace-list li:last-child {
  border-bottom: 0;
}

.trace-list li > span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .66rem;
}

.trace-list li strong {
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 500;
}

.trace-list li p {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.trace-list li > b {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
}

.trace-list li.running {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 var(--accent);
}

.trace-list li.running > b {
  color: var(--accent);
}

.trace-list li.done {
  background: var(--green-soft);
}

.trace-list li.done > b {
  color: var(--green);
}

.trace-list li.failed {
  background: var(--red-soft);
  box-shadow: inset 2px 0 var(--red);
}

.trace-list li.failed > b {
  color: var(--red);
}

.registry-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}

.state-sheet,
.receipt-sheet {
  min-width: 0;
  padding: 1.5rem;
}

.state-sheet {
  border-right: 1px solid var(--line);
}

.state-sheet header,
.receipt-sheet header {
  margin-bottom: 1rem;
}

.state-sheet h3,
.receipt-sheet h3 {
  margin: .45rem 0 0;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
}

.state-sheet dl,
.receipt-sheet dl {
  margin: 0;
  border: 1px solid var(--line);
}

.state-sheet dl div,
.receipt-sheet dl div {
  min-height: 2.85rem;
  padding: .55rem .7rem;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: .6rem;
  border-bottom: 1px solid var(--line);
}

.state-sheet dl div:last-child,
.receipt-sheet dl div:last-child {
  border-bottom: 0;
}

.state-sheet dt,
.receipt-sheet dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .65rem;
}

.state-sheet dd,
.receipt-sheet dd {
  min-width: 0;
  margin: 0;
  color: var(--soft);
  font-family: var(--mono);
  font-size: .69rem;
  overflow-wrap: anywhere;
}

.atomicity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.atomicity section {
  padding: 1.4rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.atomicity span {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
}

.success-mark {
  color: var(--green);
}

.failure-mark {
  color: var(--red);
}

.atomicity p {
  margin: .7rem 0 0;
  color: var(--muted);
}

.myth-grid {
  grid-template-columns: repeat(2, 1fr);
}

.security-route {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.security-route span {
  min-height: 7.5rem;
  padding: .8rem;
  display: grid;
  align-content: center;
  gap: .5rem;
  color: var(--soft);
  background: var(--panel);
  font-family: var(--ui);
  font-size: .72rem;
  text-align: center;
}

.security-route b {
  color: var(--accent);
  font-family: var(--mono);
  font-size: .65rem;
}

.takeaway ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.takeaway li {
  margin: .55rem 0;
  color: var(--soft);
}

.recap-chain {
  margin-block: 2.8rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  list-style: none;
}

.recap-chain li {
  min-width: 0;
  min-height: 14rem;
  padding: 1rem;
  background: var(--panel);
}

.recap-chain li > span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: .65rem;
}

.recap-chain p {
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.7;
}

.recap-chain strong {
  display: block;
  margin-bottom: .4rem;
  color: var(--paper);
  font-family: var(--ui);
  font-size: .78rem;
}

.quiz-list {
  display: grid;
  gap: 1rem;
}

.quiz-item {
  padding: 1.4rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.quiz-item > h3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.55;
}

.quiz-options {
  display: grid;
  gap: .5rem;
}

.quiz-option {
  min-height: 3rem;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font-family: var(--ui);
  font-size: .79rem;
  line-height: 1.5;
  text-align: left;
  transition:
    color var(--fast) ease,
    border-color var(--fast) ease,
    background var(--fast) ease;
}

.quiz-option:hover {
  color: var(--paper);
  border-color: var(--line-strong);
}

.quiz-option[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.quiz-option.correct {
  border-color: var(--green);
  background: var(--green-soft);
}

.quiz-option.incorrect {
  border-color: var(--red);
  background: var(--red-soft);
}

.quiz-feedback {
  min-height: 1.8rem;
  margin: .9rem 0 0;
  color: var(--muted) !important;
  font-size: .84rem;
  line-height: 1.65;
}

.quiz-item.answered-correct .quiz-feedback {
  color: var(--green) !important;
}

.quiz-item.answered-incorrect .quiz-feedback {
  color: var(--red) !important;
}

.quiz-score {
  margin: 1.2rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--accent-line);
  color: var(--soft) !important;
  background: var(--accent-soft);
  font-family: var(--ui);
  font-size: .82rem;
}

.glossary {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.glossary div {
  padding: 1.2rem;
  background: var(--panel);
}

.glossary dt {
  color: var(--paper);
  font-family: var(--mono);
  font-size: .76rem;
}

.glossary dd {
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.75;
}

.source-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.source-item {
  border-bottom: 1px solid var(--line);
}

.source-item a {
  min-height: 7.5rem;
  padding: 1.1rem 0;
  display: grid;
  grid-template-columns: 10rem minmax(15rem, .85fr) minmax(18rem, 1.15fr);
  align-items: center;
  gap: 1.5rem;
  text-decoration: none;
  transition: padding var(--fast) ease;
}

.source-item a:hover {
  padding-inline: .6rem;
}

.source-item span {
  color: var(--accent);
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .08em;
}

.source-item strong {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 400;
  line-height: 1.4;
}

.source-item em {
  color: var(--muted);
  font-size: .86rem;
  font-style: normal;
  line-height: 1.65;
}

.noscript-note {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--amber);
  color: var(--soft);
  background: var(--amber-soft);
}

html:not(.js) .js-only {
  display: none !important;
}

.course-close {
  padding: clamp(4rem, 8vw, 7rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.course-close h2 {
  max-width: 18ch;
  margin: .8rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(2.35rem, 4.6vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.course-close p:last-child {
  max-width: 48rem;
  margin: 0;
  color: var(--muted);
}

.next-link {
  min-height: 3.2rem;
  padding: .65rem 0;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--accent);
  font-family: var(--ui);
  font-size: .8rem;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}

.next-link span {
  transition: transform var(--fast) ease;
}

.next-link:hover span {
  transform: translateX(.4rem);
}

.site-footer {
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: var(--faint);
  font-family: var(--ui);
  font-size: .68rem;
  letter-spacing: .08em;
}

.site-footer a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 68rem) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero h1 {
    max-width: 14ch;
  }

  .contract-machine {
    width: min(100%, 42rem);
  }

  .thesis {
    grid-template-columns: 1fr 1fr;
  }

  .thesis > div,
  .thesis > div:first-child,
  .thesis > div:last-child {
    min-height: 10rem;
    padding: 1.6rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .thesis > div:nth-child(2n) {
    border-right: 0;
  }

  .thesis > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .page-grid {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;
    max-height: none;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--line-strong);
  }

  .toc ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
  }

  .toc-note {
    max-width: 34rem;
  }

  .chapter,
  .wide-chapter {
    width: 100%;
  }

  .wide {
    width: 100%;
  }

  .boundary-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .function-signature {
    grid-template-columns: repeat(3, 1fr);
  }

  .security-route {
    grid-template-columns: repeat(4, 1fr);
  }

  .recap-chain {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 48rem) {
  body {
    font-size: 1.02rem;
  }

  .site-header {
    min-height: 4.4rem;
  }

  .brand {
    font-size: .8rem;
  }

  .lesson-path {
    font-size: .65rem;
  }

  .hero {
    padding-block: 4.5rem;
  }

  .hero h1 {
    font-size: clamp(3rem, 13vw, 4.7rem);
  }

  .lesson-facts {
    grid-template-columns: 1fr 1fr;
  }

  .machine-outputs,
  .type-families,
  .decision-grid,
  .shape-pair,
  .code-compare,
  .mutability-grid,
  .event-choices,
  .responsibility-grid,
  .myth-grid,
  .atomicity,
  .glossary,
  .registry-results {
    grid-template-columns: 1fr;
  }

  .thesis {
    grid-template-columns: 1fr;
  }

  .thesis > div,
  .thesis > div:first-child,
  .thesis > div:last-child,
  .thesis > div:nth-child(2n) {
    min-height: auto;
    padding: 1.5rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .thesis > div:last-child {
    border-bottom: 0;
  }

  .compile-route {
    grid-template-columns: 1fr;
  }

  .route-arrow {
    transform: rotate(90deg);
    text-align: center;
  }

  .route-split {
    grid-template-columns: 1fr 1fr;
  }

  .anatomy-grid {
    grid-template-columns: 1fr 1fr;
  }

  .causal-list li,
  .rule-list li {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .formula > div {
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
  }

  .location-map {
    grid-template-columns: 1fr;
  }

  .location-map > i {
    transform: rotate(90deg);
  }

  .lab-body,
  .registry-grid {
    grid-template-columns: 1fr;
  }

  .lab-controls,
  .registry-controls,
  .state-sheet {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mapping-diagram {
    grid-template-columns: 1fr;
  }

  .hash-gate {
    min-height: 7rem;
  }

  .boundary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .function-signature,
  .function-facts {
    grid-template-columns: 1fr 1fr;
  }

  .selector-diagram {
    grid-template-columns: 1fr;
  }

  .selector-diagram > span {
    transform: rotate(90deg);
  }

  .modifier-wrap {
    grid-template-columns: 1fr;
  }

  .event-anatomy {
    grid-template-columns: 1fr;
  }

  .event-consumers {
    grid-template-columns: repeat(4, 1fr);
  }

  .source-item a {
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .security-route,
  .recap-chain {
    grid-template-columns: 1fr 1fr;
  }

  .course-close {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-footer {
    min-height: 9rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 31rem) {
  .lesson-path {
    max-width: 9rem;
  }

  .hero h1 {
    font-size: 2.85rem;
  }

  .lesson-facts,
  .toc ol,
  .anatomy-grid,
  .route-split,
  .boundary-grid,
  .function-signature,
  .function-facts,
  .security-route,
  .recap-chain,
  .location-facts {
    grid-template-columns: 1fr;
  }

  .machine-gate,
  .machine-core {
    margin-inline: .3rem;
  }

  .machine-output {
    min-height: 7rem;
  }

  .event-consumers {
    grid-template-columns: 1fr 1fr;
  }

  .log-topics {
    grid-template-columns: 1fr;
  }

  .button-row {
    grid-template-columns: 1fr;
  }

  .state-sheet dl div,
  .receipt-sheet dl div {
    grid-template-columns: 1fr;
    gap: .2rem;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .reading-progress span,
  .dot,
  .machine-arrow span,
  .machine-fork::before,
  .machine-fork i {
    background: CanvasText;
  }

  .definition,
  .precision,
  .warning,
  .takeaway,
  .lab-status,
  .trace-list li.running,
  .trace-list li.done,
  .trace-list li.failed {
    border: 2px solid CanvasText;
  }

  .primary-button {
    color: ButtonText;
    background: ButtonFace;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  html,
  body {
    color: #111;
    background: #fff;
  }

  body::before,
  .reading-progress,
  .skip-link,
  .toc,
  .copy-button,
  .lab-controls,
  .registry-controls,
  .button-row,
  .next-link {
    display: none !important;
  }

  .site-header,
  .hero,
  .thesis,
  .page-grid,
  .course-close,
  .site-footer {
    width: 100%;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 2rem 0;
  }

  .contract-machine {
    break-inside: avoid;
  }

  .page-grid {
    display: block;
    padding-block: 2rem;
  }

  .chapter {
    margin-bottom: 3rem;
  }

  .chapter-header,
  .site-header,
  .thesis,
  .course-close {
    border-color: #777;
  }

  .chapter,
  .wide,
  .wide-chapter {
    width: 100%;
  }

  .chapter p,
  .section-deck,
  .hero-deck,
  .thesis span {
    color: #222;
  }

  .code-window,
  .lab,
  .definition,
  .precision,
  .warning,
  .takeaway,
  .route-node,
  .type-family,
  .shape-card,
  .quiz-item {
    color: #111;
    background: #fff;
    box-shadow: none;
    break-inside: avoid;
  }

  .lab-body,
  .registry-grid {
    grid-template-columns: 1fr;
  }

  .lab-output,
  .trace-panel {
    padding: 1rem;
  }

  a {
    color: #111;
  }

  .source-item a::after {
    content: " (" attr(href) ")";
    color: #444;
    font-family: var(--ui);
    font-size: .7rem;
    overflow-wrap: anywhere;
  }
}