:root {
  color-scheme: light;

  --font-ui: Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Courier New", Courier, ui-monospace, monospace;

  --ink: #0b0d0e;
  --paper: #f4f0e7;
  --surface: #fffef9;
  --surface-muted: #e7e4dc;
  --text: #111315;
  --muted: #5b5d58;
  --rule: #c9c7bf;
  --blue: #0b3fe0;
  --blue-dark: #082da6;
  --blue-soft: #e2e8ff;
  --orange: #ff4b0a;
  --orange-surface: #c93600;
  --protocol-green: #00ff41;
  --success: #127455;
  --warning: #9a5b00;
  --danger: #b22323;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --page-pad: clamp(1rem, 3vw, 3rem);
  --shell: 90rem;
  --reading: 48rem;
  --sidebar: 20rem;
  --topbar: 4.5rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.2em;
  --icon-size-lg: 1.5rem;
  --icon-stroke: 1.8;

  --z-base: 0;
  --z-sticky: 20;
  --z-drawer: 40;
  --z-overlay: 30;
  --z-popover: 50;
  --z-skip: 60;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-medium: 200ms;
}

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

html {
  min-width: 20rem;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.has-open-sidebar {
  overflow: hidden;
}

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

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  border-radius: 0;
}

.ui-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: var(--icon-stroke);
  vector-effect: non-scaling-stroke;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-160%);
  background: var(--orange-surface);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.app {
  min-height: 100vh;
}

.site-header {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  min-height: var(--topbar);
  padding: 0 var(--page-pad);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
}

.protocol-link {
  --protocol-text-height: 1.27rem;
  --protocol-mark-size: 1.524rem;

  display: inline-flex;
  gap: 0.6rem;
  align-items: flex-start;
  width: max-content;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 0.9;
  text-decoration: none;
}

.protocol-error-mark {
  width: var(--protocol-mark-size);
  height: var(--protocol-mark-size);
  flex: 0 0 auto;
  transition: transform var(--duration-fast) var(--ease-out);
}

.protocol-link:is(:hover, :focus-visible) .protocol-error-mark {
  transform: translate(2px, -1px);
}

.protocol-parent-name {
  min-height: var(--protocol-text-height);
  display: grid;
  gap: 0.08rem;
  align-content: start;
}

.curso-brand {
  display: inline-flex;
  align-items: baseline;
  justify-self: center;
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1;
  text-decoration: none;
}

.curso-brand i {
  color: var(--blue);
  font-style: normal;
}

.header-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  justify-self: end;
  white-space: nowrap;
}

.header-links a {
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.header-links a:hover {
  color: var(--blue);
}

.button {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out);
}

.button:hover {
  transform: translate(-2px, -2px);
}

.button--primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.button--primary:hover {
  border-color: var(--ink);
  background: var(--ink);
}

.button--success {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.button--success:hover {
  border-color: var(--ink);
  background: var(--ink);
}

.button--secondary {
  border-color: var(--rule);
  background: var(--surface);
}

.button--secondary:hover,
.button--quiet:hover {
  border-color: var(--ink);
}

.button:disabled,
.button:disabled:hover {
  border-color: var(--rule);
  background: var(--surface-muted);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

.button--paper {
  border-color: var(--paper);
  background: var(--paper);
}

.button--quiet {
  border-color: var(--rule);
  background: transparent;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.75fr);
  min-height: min(50rem, calc(100svh - var(--topbar)));
  background: var(--ink);
  color: var(--paper);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 8vw, 8rem) var(--page-pad);
}

.hero-signal {
  margin: 0 0 2rem;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}

.hero-copy h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(2.35rem, 6.2vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-wrap: balance;
}

.hero-long-word {
  white-space: nowrap;
}

.hero-intro {
  display: grid;
  gap: 0.85rem;
  max-width: 49rem;
  margin: 2rem 0 0;
}

.hero-intro p {
  margin: 0;
  color: rgba(244, 240, 231, 0.72);
  font-size: clamp(0.96rem, 1.25vw, 1.08rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions,
.course-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 2.5rem;
}

.home-hero .share-control > summary {
  border-color: rgba(244, 240, 231, 0.4);
  color: var(--paper);
}

.course-protocol {
  position: relative;
  display: grid;
  align-content: space-between;
  min-width: 0;
  padding: clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  background: var(--blue);
  color: var(--paper);
  isolation: isolate;
}

.course-protocol::before {
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: -6%;
  width: 65%;
  aspect-ratio: 1;
  border: clamp(1rem, 3vw, 2.5rem) solid var(--orange);
  content: "";
  transform: rotate(11deg);
}

.protocol-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.protocol-letter {
  align-self: center;
  font-size: clamp(10rem, 28vw, 24rem);
  font-weight: 900;
  letter-spacing: -0.1em;
  line-height: 0.64;
}

.course-protocol ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-protocol li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.48);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.resume-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) var(--page-pad);
  background: var(--blue);
  color: var(--paper);
}

.resume-band span,
.course-code,
.course-overview-copy .course-code,
.lesson-feedback header > span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.resume-band h2 {
  max-width: 42rem;
  margin: 0.5rem 0;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.resume-band p {
  margin: 0;
  color: rgba(244, 240, 231, 0.7);
}

.directions-section,
.system-principles,
.module-map {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 8rem) var(--page-pad);
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(20rem, 0.55fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.section-intro h2,
.system-principles > header h2,
.course-outcomes h2,
.module-map h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.section-intro p,
.system-principles > header p,
.course-outcomes header p,
.module-map header p {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  text-wrap: pretty;
}

.directions-list {
  border-top: 1px solid var(--rule);
}

.direction-row {
  display: grid;
  grid-template-columns: 5rem minmax(16rem, 1.15fr) minmax(12rem, 0.6fr) 3rem;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 13rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.direction-row--available {
  transition: padding var(--duration-medium) var(--ease-out), background var(--duration-medium) ease;
}

.direction-row--available:hover {
  padding-inline: 1.5rem;
  background: var(--ink);
  color: var(--paper);
}

.direction-code {
  align-self: start;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
}

.direction-copy h3 {
  margin: 0.75rem 0 0.75rem;
  font-size: clamp(1.8rem, 3.5vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.direction-copy p {
  max-width: 44rem;
  margin: 0;
  color: var(--muted);
}

.direction-row--available:hover .direction-copy p,
.direction-row--available:hover .direction-meta {
  color: rgba(244, 240, 231, 0.68);
}

.direction-status {
  width: max-content;
  padding: 0.3rem 0.5rem;
  background: var(--surface-muted);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.direction-row--available .direction-status {
  background: var(--blue);
  color: #fff;
}

.direction-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.direction-arrow {
  justify-self: end;
  font-size: 2rem;
}

.direction-row.is-disabled {
  color: color-mix(in srgb, var(--text) 48%, var(--paper));
}

.system-principles {
  display: grid;
  grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.5fr);
  gap: clamp(3rem, 8vw, 8rem);
  background: var(--surface);
}

.system-principles > header p {
  margin-top: 1.5rem;
}

.system-principles ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.system-principles li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.system-principles li > span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
}

.system-principles h3 {
  margin: 0;
  font-size: 1.1rem;
}

.system-principles li p {
  margin: 0;
  color: var(--muted);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  padding: clamp(3rem, 6vw, 5rem) var(--page-pad) 2rem;
  border-top: 1px solid rgba(244, 240, 231, 0.24);
  background: var(--ink);
  color: var(--paper);
}

.curso-brand--footer {
  justify-self: start;
  color: var(--paper);
  font-size: 2.5rem;
}

.site-footer > div p {
  margin: 1rem 0 0;
  color: rgba(244, 240, 231, 0.62);
}

.site-footer nav {
  display: flex;
  gap: 0.75rem;
  align-content: start;
  align-items: center;
}

.site-footer nav a {
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--orange);
}

.footer-email {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(244, 240, 231, 0.36);
}

.footer-email:hover {
  border-color: currentColor;
}

.footer-linkedin {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline: 0.5rem;
  font-weight: 700;
  text-underline-offset: 0.35rem;
}

.footer-linkedin:hover {
  text-decoration: underline;
}

.footer-meta {
  grid-column: 1 / -1;
  margin: 3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(244, 240, 231, 0.24);
  color: rgba(244, 240, 231, 0.5);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.share-control {
  position: relative;
  z-index: var(--z-base);
}

.share-control[open] {
  z-index: var(--z-popover);
}

.share-control > summary {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
  list-style: none;
}

.share-control > summary::-webkit-details-marker {
  display: none;
}

.share-control > summary:hover {
  border-color: currentColor;
}

.share-control--compact > summary svg {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.share-panel {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.5rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--blue);
}

.share-panel a,
.share-panel button {
  width: 100%;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.share-panel a:hover,
.share-panel button:hover {
  background: var(--blue);
  color: #fff;
}

.share-panel button svg {
  flex: 0 0 auto;
}

.share-status {
  min-height: 1rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.like-button {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
}

.like-button svg {
  fill: transparent;
}

.like-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.like-button.is-liked {
  border-color: var(--orange-surface);
  background: var(--orange-surface);
  color: #fff;
}

.like-button.is-liked svg {
  fill: currentColor;
}

.like-button--compact {
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
}

.course-overview {
  padding: clamp(2rem, 5vw, 5rem) var(--page-pad) clamp(4rem, 8vw, 8rem);
  background: var(--ink);
  color: var(--paper);
}

.back-link {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 7rem);
  color: rgba(244, 240, 231, 0.68);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover {
  color: var(--orange);
}

.course-overview-grid {
  width: min(100%, var(--shell));
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 0.6fr);
  gap: clamp(3rem, 8vw, 8rem);
  margin-inline: auto;
}

.course-overview-copy,
.course-facts {
  min-width: 0;
}

.course-code {
  color: var(--orange);
}

.course-overview-copy h1 {
  max-width: 12ch;
  margin: 1.5rem 0;
  font-size: clamp(3.5rem, 7.5vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}

.course-overview-copy > p {
  max-width: 45rem;
  margin: 0;
  color: rgba(244, 240, 231, 0.68);
  font-size: 1.15rem;
  text-wrap: pretty;
}

.course-overview .like-button,
.course-overview .share-control > summary {
  border-color: rgba(244, 240, 231, 0.36);
  color: var(--paper);
}

.course-overview .like-button.is-liked {
  border-color: var(--orange);
  color: var(--ink);
}

.course-facts {
  align-self: end;
  border-top: 1px solid rgba(244, 240, 231, 0.35);
}

.course-facts dl {
  margin: 0;
}

.course-facts dl > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.6fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(244, 240, 231, 0.2);
}

.course-facts dt {
  color: rgba(244, 240, 231, 0.55);
  font-size: 0.76rem;
}

.course-facts dd {
  margin: 0;
  font-weight: 700;
}

.overview-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  margin-top: 2rem;
}

.overview-progress strong {
  font-size: 1.5rem;
}

.overview-progress progress,
.sidebar-course progress,
.module-row progress {
  width: 100%;
  height: 0.5rem;
  grid-column: 1 / -1;
  appearance: none;
  border: 0;
  background: transparent;
}

progress::-webkit-progress-bar {
  background: color-mix(in srgb, var(--rule) 70%, transparent);
}

progress::-webkit-progress-value {
  background: var(--blue);
}

progress::-moz-progress-bar {
  background: var(--blue);
}

.course-overview progress::-webkit-progress-bar,
.course-sidebar progress::-webkit-progress-bar {
  background: rgba(244, 240, 231, 0.2);
}

.course-overview progress::-webkit-progress-value,
.course-sidebar progress::-webkit-progress-value {
  background: var(--orange);
}

.course-overview progress::-moz-progress-bar,
.course-sidebar progress::-moz-progress-bar {
  background: var(--orange);
}

.overview-progress small {
  grid-column: 1 / -1;
  color: rgba(244, 240, 231, 0.55);
}

.course-definition {
  width: min(100%, var(--shell));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
  padding: 0 var(--page-pad);
  border-bottom: 1px solid var(--rule);
}

.course-definition > div {
  min-height: 17rem;
  padding: 2.5rem clamp(1rem, 3vw, 2.5rem);
  border-right: 1px solid var(--rule);
}

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

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

.course-definition h2 {
  margin: 0 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.course-definition p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.55;
}

.course-outcomes {
  width: min(100%, var(--shell));
  display: grid;
  grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 8rem);
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 8rem) var(--page-pad);
}

.course-outcomes header p {
  margin-top: 1.5rem;
}

.course-outcomes ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.course-outcomes li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}

.course-outcomes li svg {
  color: var(--blue);
}

.knowledge-entry-section {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.knowledge-entry {
  width: min(100%, var(--shell));
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) minmax(24rem, 0.75fr) 2rem;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: 18rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--page-pad);
  text-decoration: none;
}

.knowledge-entry__code {
  align-self: start;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.knowledge-entry > div {
  min-width: 0;
}

.knowledge-entry h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.knowledge-entry p {
  max-width: 44rem;
  margin: 0;
  color: rgba(244, 240, 231, 0.68);
}

.knowledge-entry dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(244, 240, 231, 0.28);
  border-left: 1px solid rgba(244, 240, 231, 0.28);
}

.knowledge-entry dl div {
  min-height: 5.5rem;
  padding: 0.8rem;
  border-right: 1px solid rgba(244, 240, 231, 0.28);
  border-bottom: 1px solid rgba(244, 240, 231, 0.28);
}

.knowledge-entry dt {
  color: rgba(244, 240, 231, 0.58);
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.knowledge-entry dd {
  margin: 0.2rem 0 0;
  color: var(--protocol-green);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

.knowledge-entry > i {
  justify-self: end;
  color: var(--orange);
  font-size: 1.7rem;
  font-style: normal;
  transition: transform var(--duration-fast) var(--ease-out);
}

.knowledge-entry:is(:hover, :focus-visible) > i {
  transform: translate(4px, -4px);
}

.module-map {
  border-top: 1px solid var(--rule);
}

.module-map > div {
  border-top: 1px solid var(--rule);
}

.module-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(8rem, 0.45fr) 2rem;
  gap: 1.5rem;
  align-items: center;
  min-height: 8rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.module-row > span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-weight: 700;
}

.module-row h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
}

.module-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.module-row:hover h3,
.module-row:hover i {
  color: var(--blue);
}

.module-row i {
  justify-self: end;
  font-size: 1.5rem;
  font-style: normal;
}

.course-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  background: var(--surface);
}

.course-sidebar {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--topbar);
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(244, 240, 231, 0.2);
}

.curso-brand--small {
  justify-self: start;
  color: var(--paper);
  font-size: 1.25rem;
}

.sidebar-close {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(244, 240, 231, 0.28);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}

.sidebar-course {
  padding: 1.5rem 1.25rem;
}

.sidebar-course > a {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-course h2 {
  margin: 0.65rem 0 1.25rem;
  font-size: 1.6rem;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.sidebar-progress-copy {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: rgba(244, 240, 231, 0.62);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.lesson-search {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  margin: 0 1.25rem;
  border: 1px solid rgba(244, 240, 231, 0.28);
}

.lesson-search > span {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(244, 240, 231, 0.28);
}

.lesson-search input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--paper);
}

.lesson-search input::placeholder {
  color: rgba(244, 240, 231, 0.6);
}

.search-status {
  min-height: 1.2rem;
  margin: 0;
  padding: 0.4rem 1.25rem 0;
  color: rgba(244, 240, 231, 0.58);
  font-size: 0.68rem;
}

.sidebar-knowledge-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  margin: 0.65rem 1.25rem 0.85rem;
  padding: 0.75rem;
  border: 1px solid rgba(244, 240, 231, 0.28);
  color: var(--paper);
  text-decoration: none;
}

.sidebar-knowledge-link > svg {
  color: var(--protocol-green);
}

.sidebar-knowledge-link > span {
  display: grid;
  min-width: 0;
}

.sidebar-knowledge-link b {
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-knowledge-link small {
  overflow: hidden;
  color: rgba(244, 240, 231, 0.58);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-knowledge-link > i {
  color: var(--orange);
  font-style: normal;
}

.sidebar-knowledge-link:is(:hover, :focus-visible) {
  border-color: var(--protocol-green);
  background: rgba(244, 240, 231, 0.06);
}

.lesson-tree {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 0 2rem;
}

.sidebar-module {
  border-top: 1px solid rgba(244, 240, 231, 0.15);
}

.sidebar-module > summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.sidebar-module > summary::-webkit-details-marker {
  display: none;
}

.sidebar-module > summary:hover {
  background: rgba(244, 240, 231, 0.06);
}

.sidebar-module > summary > span,
.sidebar-module > summary > small {
  color: rgba(244, 240, 231, 0.48);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.sidebar-module > summary b {
  overflow: hidden;
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-module > div {
  padding: 0 0.6rem 0.75rem;
}

.lesson-link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-height: 2.85rem;
  padding: 0.4rem 0.65rem;
  color: rgba(244, 240, 231, 0.7);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.lesson-link > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-link:hover {
  background: rgba(244, 240, 231, 0.08);
  color: var(--paper);
}

.lesson-link.is-active {
  background: var(--blue);
  color: #fff;
}

.lesson-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(244, 240, 231, 0.24);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.lesson-link.is-complete:not(.is-active) .lesson-number {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.lesson-area {
  min-width: 0;
}

.reading-progress {
  position: fixed;
  z-index: calc(var(--z-sticky) + 1);
  top: 0;
  right: 0;
  left: var(--sidebar);
  height: 0.2rem;
  background: transparent;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--orange);
}

.lesson-topbar {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  display: grid;
  grid-template-areas: "context actions exit";
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  min-height: var(--topbar);
  padding: 0.65rem var(--page-pad);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
}

.lesson-topbar > p {
  grid-area: context;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-topbar > p span {
  padding: 0 0.35rem;
  color: var(--blue);
}

.lesson-topbar__actions {
  display: flex;
  grid-area: actions;
  gap: 0.5rem;
  align-items: center;
}

.lesson-topbar .share-control > summary {
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
}

.lesson-exit {
  display: grid;
  grid-area: exit;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out);
}

.lesson-exit:hover {
  border-color: var(--orange-surface);
  background: var(--orange-surface);
  color: #fff;
  transform: translate(1px, -1px);
}

.topbar-menu {
  display: none;
  grid-area: menu;
  gap: 0.6rem;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.lesson-topbar .ui-icon,
.topbar-menu .ui-icon,
.sidebar-search .ui-icon {
  display: block;
  color: currentColor;
}

.lesson-shell {
  width: min(calc(100% - var(--page-pad) * 2), var(--reading));
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6.5rem) 0 6rem;
  outline: 0;
}

.lesson-header {
  position: relative;
  padding-left: clamp(1rem, 2.5vw, 1.5rem);
  border-left: 5px solid var(--blue);
}

.lesson-header::before {
  position: absolute;
  top: 0;
  left: -5px;
  width: 5px;
  height: 2.5rem;
  background: var(--orange);
  content: "";
}

.lesson-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.lesson-header__info {
  display: contents;
}

.lesson-header__module {
  display: none;
}

.lesson-header__lesson {
  display: contents;
}

.lesson-header__lesson > span {
  padding: 0.4rem 0.55rem;
  background: var(--surface-muted);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.lesson-header__lesson > i {
  display: none;
}

.lesson-glossary-button {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--blue);
  background: var(--blue-soft);
  color: var(--blue-dark);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.lesson-glossary-button:hover {
  background: var(--blue);
  color: #fff;
}

.lesson-glossary-button svg {
  width: 1rem;
  height: 1rem;
}

.lesson-glossary-button b {
  min-width: 1.35rem;
  padding-left: 0.45rem;
  border-left: 1px solid currentColor;
  background: transparent;
  color: inherit;
  text-align: center;
}

.lesson-completion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--success);
  background: transparent;
  color: var(--success);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out);
}

.lesson-completion-toggle:not(.is-complete):hover,
.lesson-completion-toggle:not(.is-complete):focus-visible {
  background: var(--success);
  color: #fff;
  transform: translate(-1px, -1px);
}

.lesson-completion-toggle.is-complete {
  background: var(--success);
  color: #fff;
}

.lesson-completion-toggle.is-complete:hover,
.lesson-completion-toggle.is-complete:focus-visible {
  background: var(--surface);
  color: var(--success);
  transform: translate(-1px, -1px);
}

.lesson-completion-toggle--compact {
  min-height: 2.75rem;
  padding: 0.35rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
}

.lesson-header h1 {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.96;
  text-wrap: balance;
}

.lesson-header > p {
  max-width: 42rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 1.18rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.editorial-note {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 1.25rem;
  padding: 1.25rem clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--ink);
  background: var(--orange-surface);
  color: #fff;
}

.editorial-note > span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.editorial-note p {
  margin: 0;
  font-size: clamp(0.98rem, 2vw, 1.12rem);
  font-weight: 650;
  line-height: 1.45;
}

.editorial-note--field {
  background: var(--blue-soft);
  color: var(--ink);
}

.editorial-note--myth {
  background: var(--surface-muted);
  color: var(--ink);
}

.lesson-content {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  counter-reset: lesson-section;
}

.lesson-content > h2 {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin: 3.5rem 0 1.1rem;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

.lesson-content > h2::before {
  color: var(--blue);
  content: counter(lesson-section, decimal-leading-zero);
  counter-increment: lesson-section;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2.4;
}

.lesson-content > h3 {
  margin: 2.5rem 0 0.9rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--orange);
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.lesson-content p {
  margin: 0 0 1.15rem;
}

.lesson-content > p:first-child {
  max-width: 42rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.08rem;
  line-height: 1.65;
}

.lesson-content > .lesson-term-intro {
  max-width: 42rem;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 1rem;
  line-height: 1.62;
}

.lesson-content ul,
.lesson-content ol {
  margin: 0 0 1.5rem;
  padding-left: 1.35rem;
}

.lesson-content li {
  margin: 0.45rem 0;
  padding-left: 0.25rem;
}

.lesson-content li::marker {
  color: var(--blue);
  font-weight: 800;
}

.lesson-content a {
  color: var(--blue-dark);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

.term-mention {
  padding: 0.05em 0.18em;
  background: var(--blue-soft);
  box-decoration-break: clone;
  color: var(--blue-dark);
  font-style: normal;
  font-weight: 750;
  -webkit-box-decoration-break: clone;
}

.term-mention sup {
  margin-inline-start: 0.18em;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.58em;
  font-weight: 800;
  line-height: 0;
  vertical-align: super;
}

.term-footnotes {
  display: grid;
  gap: 0.55rem;
  max-width: 42rem;
  margin: -0.35rem 0 1.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.term-footnote {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.term-footnote__number {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  background: var(--blue);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.term-footnote strong {
  color: var(--text);
}

.term-footnote__english {
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 700;
}

.lesson-content li > .term-footnotes {
  margin: 0.65rem 0 0.25rem;
}

.lesson-content code:not(.code-block code) {
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--rule);
  background: var(--surface-muted);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.lesson-content blockquote,
.lesson-content .callout {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--blue);
  background: var(--blue-soft);
}

.lesson-content blockquote::before,
.lesson-content .callout::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 3rem;
  height: 0.35rem;
  background: var(--blue);
  content: "";
}

.lesson-content .callout strong {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--blue-dark);
}

.lesson-content .callout p:last-child {
  margin-bottom: 0;
}

.code-block {
  margin: 2rem 0;
  overflow-x: auto;
  padding: 1.5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 0.87rem/1.65 var(--font-mono);
}

.code-block code {
  font: inherit;
  white-space: pre;
}

.table-wrap {
  margin: 2rem 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--surface);
}

table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th,
td {
  padding: 0.85rem 1rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

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

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

th {
  background: var(--surface-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.visual-example {
  margin-top: clamp(4rem, 8vw, 7rem);
  border: 1px solid var(--ink);
  background: var(--surface);
}

.visual-example__header {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--ink);
  color: var(--paper);
}

.visual-example__header > span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.visual-example__header h2 {
  max-width: 16ch;
  margin: 0.65rem 0 0.8rem;
  font-size: 2.75rem;
  letter-spacing: -0.04em;
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.visual-example__header p {
  max-width: 38rem;
  margin: 0;
  color: #c8c8c1;
}

.visual-example__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  border-bottom: 1px solid var(--ink);
}

.visual-example__tabs button {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-right: 1px solid var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: left;
}

.visual-example__tabs button:last-child {
  border-right: 0;
}

.visual-example__tabs button span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.visual-example__tabs button[aria-selected="true"] {
  background: var(--blue);
  color: #fff;
}

.visual-example__tabs button[aria-selected="true"] span {
  color: var(--orange);
}

.visual-example__states > section {
  padding: clamp(1rem, 3vw, 2rem);
}

.visual-example__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 1.1rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.visual-example__note span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.practice-lab {
  margin-top: clamp(4rem, 8vw, 7rem);
  border: 1px solid var(--ink);
  background: var(--surface);
}

.practice-lab__header {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--ink);
  color: var(--paper);
}

.practice-lab__header > span,
.practice-lab__guide > span,
.practice-trainer header > span {
  color: var(--orange);
  font: 700 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.practice-lab__header h2 {
  max-width: 17ch;
  margin: 0.65rem 0 0.8rem;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-wrap: balance;
}

.practice-lab__header p {
  max-width: 42rem;
  margin: 0;
  color: #c8c8c1;
}

.practice-lab__body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.practice-lab__guide,
.practice-trainer {
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2.5rem);
}

.practice-lab__guide {
  border-right: 1px solid var(--ink);
}

.practice-lab__guide h3 {
  margin: 0.65rem 0 1.5rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.practice-lab__guide ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.practice-lab__guide li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.practice-lab__guide li > b {
  color: var(--blue);
  font: 700 0.75rem/1.4 var(--font-mono);
}

.practice-lab__guide li strong {
  display: block;
  line-height: 1.25;
}

.practice-lab__guide li p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.practice-lab__deliverable {
  margin: 1.25rem 0 0;
  padding: 1rem;
  background: var(--blue);
  color: #fff;
  font: 700 0.75rem/1.55 var(--font-mono);
}

.practice-trainer {
  background: var(--blue-soft);
}

.practice-trainer header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink);
}

.practice-trainer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.practice-level-switch {
  display: inline-flex;
  border: 1px solid var(--blue-dark);
}

.practice-level-switch button {
  min-height: 2.75rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-right: 1px solid var(--blue-dark);
  background: transparent;
  color: var(--blue-dark);
  cursor: pointer;
  font: 700 0.58rem/1 var(--font-mono);
}

.practice-level-switch button:last-child {
  border-right: 0;
}

.practice-level-switch button[aria-pressed="true"] {
  background: var(--blue);
  color: #fff;
}

.practice-level-switch button:hover,
.practice-level-switch button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -3px;
}

.practice-trainer header p {
  margin: 0.65rem 0 0;
  font-weight: 700;
  line-height: 1.5;
}

.practice-trainer fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.practice-trainer legend {
  display: block;
  float: left;
  width: 100%;
  margin: 0;
  padding: 1.35rem 0 0.9rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.practice-trainer legend + * {
  clear: both;
}

.practice-trainer__hint {
  margin: -0.15rem 0 1rem;
  color: var(--blue-dark);
  font: 700 0.67rem/1.4 var(--font-mono);
}

.practice-trainer__options {
  display: grid;
  gap: 0.65rem;
}

.practice-trainer__options label {
  position: relative;
  display: block;
  cursor: pointer;
}

.practice-trainer__options input {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--blue);
}

.practice-trainer__options label > span {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 3.5rem;
  align-items: start;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  font-size: 0.86rem;
  line-height: 1.45;
}

.practice-trainer__options label > span b {
  color: var(--blue);
  font-family: var(--font-mono);
}

.practice-trainer__options input:focus-visible + span,
.practice-trainer__options label:hover > span {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.practice-trainer__options input:checked + span {
  border-color: var(--blue);
  background: #fff;
}

.practice-trainer__options label.is-correct > span {
  border-color: var(--success);
  background: #e7f4ee;
}

.practice-trainer__options label.is-incorrect > span {
  border-color: var(--orange-surface);
  background: #fff0e9;
}

.practice-trainer__action {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.practice-trainer__action .button {
  justify-self: start;
}

.practice-trainer__action output {
  display: block;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
}

.practice-trainer__action output:empty {
  min-height: 0;
  padding: 0;
}

.practice-trainer__action output[data-tone="success"] {
  border-color: var(--success);
  background: #e7f4ee;
  color: #0d553e;
}

.practice-trainer__action output[data-tone="retry"] {
  border-color: var(--orange-surface);
  background: #fff0e9;
  color: #8c2700;
}

.visual-artifact {
  min-height: clamp(18rem, 42vw, 25rem);
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.visual-artifact--comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 1rem;
  align-items: stretch;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.visual-artifact--comparison > div {
  display: grid;
  align-content: space-between;
  min-height: 14rem;
  padding: 1.25rem;
  border: 1px solid #4a4c4d;
}

.visual-artifact--comparison > div:last-of-type {
  border-color: var(--blue);
  background: var(--blue);
}

.visual-artifact--comparison span,
.visual-artifact--comparison p {
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.visual-artifact--comparison strong {
  max-width: 16ch;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.visual-artifact--comparison > i {
  align-self: center;
  color: var(--orange);
  font-size: 2rem;
  font-style: normal;
}

.visual-artifact--comparison > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid #4a4c4d;
  color: var(--orange);
}

.visual-artifact--matrix {
  position: relative;
  display: grid;
  place-items: center;
  padding: 3rem;
}

.visual-artifact--matrix > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, 12rem));
  transform: rotateX(180deg);
}

.visual-artifact--matrix > div span {
  display: grid;
  min-height: 7rem;
  place-items: center;
  padding: 0.8rem;
  transform: rotateX(180deg);
  border: 1px solid #4a4c4d;
  color: #a5a69f;
  font: 700 0.66rem/1.2 var(--font-mono);
  text-align: center;
}

.visual-artifact--matrix > div span.is-active {
  z-index: 1;
  border-color: var(--orange);
  background: var(--blue);
  color: #fff;
  box-shadow: 7px 7px 0 var(--orange);
}

.matrix-x,
.matrix-y {
  position: absolute;
  color: var(--orange);
  font: 700 0.62rem var(--font-mono);
}

.matrix-x {
  right: 1rem;
  bottom: 1rem;
}

.matrix-y {
  top: 1rem;
  left: 1rem;
}

.visual-artifact--form {
  display: grid;
  width: 100%;
  max-width: 30rem;
  min-height: 0;
  margin-inline: auto;
  padding: 1px;
  align-content: start;
  background: var(--surface);
  color: var(--ink);
}

.visual-example__states > section:has(.visual-artifact--form) {
  background: var(--ink);
}

.mock-window-bar {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem;
  background: var(--ink);
  color: var(--paper);
}

.mock-window-bar > span {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--surface);
}

.mock-window-bar > span:nth-child(2) {
  background: var(--orange);
}

.mock-window-bar > span:nth-child(3) {
  background: var(--blue);
}

.mock-window-bar b {
  margin-left: auto;
  font: 700 0.62rem var(--font-mono);
}

.visual-artifact--form > label {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 1.25rem 0;
  font: 700 0.64rem var(--font-mono);
}

.visual-artifact--form > label i {
  min-height: 3rem;
  padding: 0.8rem;
  border: 1px solid var(--rule);
  font: normal 0.85rem var(--font-ui);
}

.mock-form-action {
  display: grid;
  min-height: 3rem;
  place-items: center;
  margin: 1.25rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.visual-artifact--form > p {
  margin: 0;
  padding: 0.75rem 1.25rem;
  background: var(--surface-muted);
  font: 700 0.66rem var(--font-mono);
}

.visual-artifact--form.is-danger > label:first-of-type i,
.visual-artifact--form.is-danger > p {
  border-color: var(--danger);
  background: #fff0ed;
  color: var(--danger);
}

.visual-artifact--form.is-warning .mock-form-action,
.visual-artifact--form.is-warning > p {
  background: var(--orange-surface);
  color: #fff;
}

.visual-artifact--flow {
  display: grid;
  align-content: center;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.visual-artifact--flow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.visual-artifact--flow li {
  position: relative;
  display: grid;
  min-height: 8.5rem;
  align-content: space-between;
  padding: 1rem;
  border: 1px solid #4a4c4d;
}

.visual-artifact--flow li + li {
  border-left: 0;
}

.visual-artifact--flow li:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -0.65rem;
  width: 1.3rem;
  height: 1.3rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--orange);
  content: "→";
  font-family: var(--font-mono);
}

.visual-artifact--flow li.is-active {
  border-color: var(--orange);
  background: var(--blue);
}

.visual-artifact--flow li span {
  color: var(--orange);
  font: 700 0.65rem var(--font-mono);
}

.visual-artifact--flow li strong {
  font-size: clamp(0.9rem, 2vw, 1.3rem);
}

.visual-artifact--flow > p {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #4a4c4d;
  color: var(--orange);
  font: 700 0.7rem var(--font-mono);
}

.visual-artifact--diagnostic {
  display: grid;
  align-content: center;
  gap: 0;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--paper);
}

.visual-artifact--diagnostic > header {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid #4a4c4d;
  background: var(--blue);
}

.visual-artifact--diagnostic > header span,
.visual-artifact--diagnostic section > span,
.visual-artifact--diagnostic aside > span,
.visual-artifact--diagnostic footer > span {
  color: var(--orange);
  font: 700 0.65rem/1.4 var(--font-mono);
  text-transform: uppercase;
}

.visual-artifact--diagnostic > header strong {
  max-width: 48rem;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.3;
}

.visual-artifact--diagnostic > div {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
  border-right: 1px solid #4a4c4d;
  border-left: 1px solid #4a4c4d;
}

.visual-artifact--diagnostic section,
.visual-artifact--diagnostic aside {
  padding: 1rem;
}

.visual-artifact--diagnostic section {
  border-right: 1px solid #4a4c4d;
}

.visual-artifact--diagnostic ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.25rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: diagnostic-check;
}

.visual-artifact--diagnostic li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(244, 240, 231, 0.82);
  font-size: 0.78rem;
  line-height: 1.45;
  counter-increment: diagnostic-check;
}

.visual-artifact--diagnostic li::before {
  position: absolute;
  left: 0;
  color: var(--protocol-green);
  content: counter(diagnostic-check, decimal-leading-zero);
  font: 700 0.6rem/1.8 var(--font-mono);
}

.visual-artifact--diagnostic aside p,
.visual-artifact--diagnostic footer p {
  margin: 0.65rem 0 0;
  color: rgba(244, 240, 231, 0.82);
  font-size: 0.78rem;
  line-height: 1.5;
}

.visual-artifact--diagnostic footer {
  display: grid;
  grid-template-columns: minmax(8rem, 0.25fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1rem;
  border: 1px solid #4a4c4d;
}

.visual-artifact--diagnostic footer p {
  margin: 0;
  color: var(--paper);
}

.visual-artifact--trace li {
  min-height: 7rem;
}

.visual-artifact--request {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.visual-artifact--request > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #4a4c4d;
}

.visual-artifact--request > header b {
  padding: 0.3rem 0.45rem;
  background: var(--blue);
  color: #fff;
  font: 700 0.68rem var(--font-mono);
}

.visual-artifact--request > header code {
  overflow: hidden;
  color: #c8c8c1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-artifact--request > header strong {
  color: var(--orange);
  font: 700 0.7rem var(--font-mono);
}

.visual-artifact--request.is-success > header strong {
  color: #50d79f;
}

.visual-artifact--request.is-danger > header strong {
  color: #ff8777;
}

.visual-artifact--request > div {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 1.25rem;
}

.visual-artifact--request > div span {
  color: var(--orange);
  font: 700 0.65rem var(--font-mono);
}

.visual-artifact--request > div code {
  color: #c8c8c1;
  font-size: 0.76rem;
}

.visual-artifact--request > pre {
  margin: 0;
  padding: 1.25rem;
  border-top: 1px solid #4a4c4d;
  color: var(--paper);
  font: 0.78rem/1.6 var(--font-mono);
  white-space: pre-wrap;
}

.visual-artifact--anatomy {
  display: grid;
  min-height: 16rem;
  place-items: center;
  padding: clamp(1.25rem, 5vw, 3.5rem);
}

.visual-artifact--anatomy code {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: clamp(0.85rem, 2.2vw, 1.3rem);
  line-height: 2.4;
}

.visual-artifact--anatomy span {
  padding-inline: 0.2rem;
  color: #a5a69f;
}

.visual-artifact--anatomy span.is-active {
  background: var(--orange-surface);
  color: #fff;
  box-shadow: 0.35rem 0 0 var(--blue), -0.35rem 0 0 var(--blue);
}

.visual-artifact--code {
  min-height: 0;
}

.visual-artifact--code pre {
  display: grid;
  margin: 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  counter-reset: code-line;
  font: 0.82rem/1.75 var(--font-mono);
}

.visual-artifact--code pre code {
  min-height: 1.75em;
  white-space: pre-wrap;
}

.visual-artifact--code pre code::before {
  display: inline-block;
  width: 2rem;
  color: #686b6d;
  content: counter(code-line, decimal-leading-zero);
  counter-increment: code-line;
}

.visual-artifact--code pre code.is-active {
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
  background: #292c2d;
  color: var(--orange);
}

.visual-artifact--code.is-success pre code.is-active {
  color: #50d79f;
}

.visual-artifact--code.is-danger pre code.is-active {
  color: #ff8777;
}

.visual-artifact--tables {
  min-height: 0;
  padding: clamp(1rem, 3vw, 2rem);
}

.visual-artifact--tables > code {
  display: block;
  padding: 0 0 1rem;
  color: var(--orange);
  font-size: 0.72rem;
}

.visual-artifact--tables > section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.visual-artifact--tables > section > div {
  min-width: 0;
  border: 1px solid #4a4c4d;
}

.visual-artifact--tables > section > div > span {
  display: block;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #4a4c4d;
  color: #c8c8c1;
  font: 700 0.62rem var(--font-mono);
}

.visual-artifact--tables > section > div:last-child {
  border-color: var(--blue);
}

.visual-artifact--tables > section > div:last-child > span {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.visual-artifact--tables table {
  min-width: 0;
  color: var(--paper);
  font: 0.7rem/1.35 var(--font-mono);
}

.visual-artifact--tables td {
  padding: 0.45rem 0.55rem;
  border-color: #4a4c4d;
}

.visual-artifact--phone {
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.visual-artifact--phone > div {
  display: grid;
  width: min(17rem, 100%);
  min-height: 22rem;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--paper);
  background: #17191a;
}

.visual-artifact--phone header {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid #4a4c4d;
  font: 700 0.58rem var(--font-mono);
}

.visual-artifact--phone section {
  display: grid;
  align-content: center;
  padding: 1.25rem;
}

.visual-artifact--phone small {
  color: var(--orange);
  font: 700 0.62rem var(--font-mono);
}

.visual-artifact--phone h3 {
  margin: 0.75rem 0 1rem;
  font-size: 1.55rem;
  line-height: 1;
}

.visual-artifact--phone ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #c8c8c1;
  font-size: 0.72rem;
}

.visual-artifact--phone li {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #343738;
}

.visual-artifact--phone footer {
  width: 35%;
  height: 0.2rem;
  margin: 0.8rem auto;
  background: var(--paper);
}

.visual-artifact--phone.is-success > div {
  box-shadow: 7px 7px 0 var(--blue);
}

.visual-artifact--phone.is-warning > div {
  box-shadow: 7px 7px 0 var(--orange);
}

.visual-artifact--phone.is-danger > div {
  box-shadow: 7px 7px 0 var(--danger);
}

.visual-artifact--report {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.visual-artifact--report header {
  grid-column: 1 / -1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #4a4c4d;
}

.visual-artifact--report header span {
  color: var(--orange);
  font: 700 0.65rem var(--font-mono);
}

.visual-artifact--report header strong {
  color: #fff;
  font-size: clamp(3.5rem, 10vw, 7rem);
  letter-spacing: -0.07em;
  line-height: 0.72;
}

.visual-artifact--report ul {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font: 0.72rem var(--font-mono);
}

.visual-artifact--report li::before {
  margin-right: 0.55rem;
  color: var(--blue);
  content: "■";
}

.visual-artifact--report p {
  align-self: end;
  margin: 1.5rem 0 0;
  color: var(--orange);
  font: 700 0.7rem var(--font-mono);
}

.visual-artifact--report > b {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--blue);
  color: #fff;
  font: 700 0.78rem var(--font-mono);
}

.visual-artifact--report.is-warning > b {
  background: var(--orange-surface);
  color: #fff;
}

.visual-artifact--report.is-danger > b {
  background: var(--danger);
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.path-card {
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.path-card h3 {
  margin: 0.75rem 0;
}

.path-number,
.path-label {
  display: inline-flex;
  padding: 0.25rem 0.45rem;
  background: var(--surface-muted);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
}

.path-card-featured {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.path-card-featured .path-label {
  background: var(--blue);
  color: #fff;
}

.roadmap-list {
  padding-left: 1.35rem !important;
}

.assessment {
  margin-top: 4rem;
  border: 1px solid var(--ink);
  background: var(--surface);
}

.assessment-header {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--ink);
  color: var(--paper);
}

.assessment-header > span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.assessment-header h2 {
  max-width: 13ch;
  margin: 0.65rem 0 0.8rem;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.assessment-header > p {
  max-width: 42rem;
  margin: 0;
  color: #c8c8c1;
}

.assessment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #3a3c3d;
  color: #dcdcd4;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.assessment-meta span::before {
  content: "■";
  margin-right: 0.45rem;
  color: var(--orange);
}

.assessment-latest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--ink);
  background: var(--blue-soft);
}

.assessment-latest > div {
  display: grid;
  min-width: 7rem;
}

.assessment-latest > div span {
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.assessment-latest > div strong {
  color: var(--blue);
  font-size: 2.4rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.assessment-latest > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.assessment-setup {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.assessment-setup fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.assessment-setup legend {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
}

.level-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.level-options label {
  position: relative;
  cursor: pointer;
}

.level-options input {
  position: absolute;
  top: 1rem;
  left: 1rem;
  margin: 0;
  accent-color: var(--blue);
}

.level-options label > span {
  display: flex;
  flex-direction: column;
  min-height: 10.5rem;
  padding: 2.7rem 1rem 1rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease;
}

.level-options input:checked + span {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 -4px 0 var(--blue);
}

.level-options strong {
  font-size: 1.15rem;
}

.level-options small {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
}

.level-options i {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-style: normal;
}

.assessment-setup__actions,
.assessment-submit {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.assessment-setup__actions p,
.assessment-submit p {
  max-width: 30rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.assessment-submit p.is-ready {
  color: var(--success);
  font-weight: 700;
}

.assessment-progress-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.15rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--ink);
  background: var(--blue-soft);
}

.assessment-progress-note span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.assessment-progress-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.assessment-form {
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.assessment-question {
  margin: 0;
  padding: 2rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.assessment-question:first-child {
  border-top: 0;
}

.assessment-question.is-correct,
.assessment-question.is-wrong {
  margin-inline: calc(clamp(1.25rem, 4vw, 2.5rem) * -1);
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.assessment-question.is-correct {
  border-left: 5px solid var(--success);
  background: #eaf7f1;
}

.assessment-question.is-wrong {
  border-left: 5px solid var(--danger);
  background: #fff0ed;
}

.assessment-question legend {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.8rem;
  width: 100%;
  margin-bottom: 1rem;
}

.assessment-question legend > span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.assessment-question legend b {
  font-size: 1.05rem;
  line-height: 1.45;
}

.assessment-options {
  display: grid;
  gap: 0.45rem;
  margin-left: 3rem;
}

.assessment-options label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.assessment-options label:hover {
  border-color: var(--rule);
  background: var(--surface);
}

.assessment-options input {
  margin-top: 0.32rem;
  accent-color: var(--blue);
}

.assessment-options label.is-correct {
  border-color: var(--success);
  background: #d8f1e7;
}

.assessment-options label.is-wrong {
  border-color: var(--danger);
  background: #ffdcd6;
}

.assessment-options label.is-correct::after,
.assessment-options label.is-wrong::after {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.assessment-options label.is-correct::after {
  content: "✓ ПРАВИЛЬНО";
  color: var(--success);
}

.assessment-options label.is-wrong::after {
  content: "× ВАШ ОТВЕТ";
  color: var(--danger);
}

.assessment-feedback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  margin: 1rem 0 0 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(11, 13, 14, 0.18);
}

.assessment-feedback > strong {
  font-size: 0.85rem;
}

.assessment-feedback > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.assessment-feedback button {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
}

.assessment-feedback button:hover {
  background: var(--ink);
  color: var(--surface);
}

.assessment-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--ink);
  background: var(--blue);
  color: #fff;
}

.assessment-result > div:first-child {
  display: grid;
}

.assessment-result > div:first-child span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.assessment-result > div:first-child strong {
  font-size: clamp(3rem, 8vw, 5rem);
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.assessment-result > p {
  margin: 0;
  color: #dfe4ff;
  font-weight: 700;
}

.assessment-result > div:nth-child(3) {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.assessment-result .button--primary {
  border-color: #fff;
  background: #fff;
  color: var(--blue);
}

.assessment-result .button--quiet {
  border-color: #7691f5;
  color: #fff;
}

.assessment-save-warning {
  grid-column: 1 / -1;
  padding: 0.8rem;
  border: 1px solid #fff;
  color: #fff !important;
}

.assessment-history {
  border-top: 1px solid var(--ink);
}

.assessment-history summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.assessment-history summary::-webkit-details-marker {
  display: none;
}

.assessment-history summary b {
  min-width: 1.7rem;
  padding: 0.1rem 0.35rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-align: center;
}

.assessment-history ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.assessment-history li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}

.assessment-history li:last-child {
  border-bottom: 0;
}

.assessment-history time,
.assessment-history li span {
  color: var(--muted);
  font-size: 0.72rem;
}

.assessment-history li div {
  display: grid;
}

.assessment-history li > b {
  color: var(--blue);
  font-size: 1.35rem;
}

.knowledge-page {
  min-height: calc(100vh - var(--topbar));
  background: var(--surface);
}

.knowledge-hero {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.5rem) var(--page-pad) 0;
}

.knowledge-hero > .back-link {
  min-height: 2.75rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  padding-inline: 0.85rem;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.knowledge-hero > .back-link:is(:hover, :focus-visible) {
  background: var(--ink);
  color: var(--paper);
}

.knowledge-hero > div {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.7fr);
  border-bottom: 1px solid var(--ink);
}

.knowledge-hero header {
  padding: clamp(2rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 7vw, 6.5rem) 0;
}

.knowledge-hero header > span {
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.knowledge-hero h1 {
  max-width: 11ch;
  margin: 1rem 0 1.25rem;
  font-size: clamp(3.4rem, 6vw, 5.25rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-wrap: balance;
}

.knowledge-hero header p {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.knowledge-hero aside {
  display: grid;
  align-content: end;
  padding: clamp(2rem, 5vw, 4rem);
  border-left: 1px solid var(--ink);
  background: var(--blue);
  color: #fff;
}

.knowledge-hero aside > p {
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
}

.knowledge-hero aside dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.knowledge-hero aside dl div {
  min-height: 6rem;
  padding: 0.8rem;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.knowledge-hero aside dt {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.knowledge-hero aside dd {
  margin: 0.35rem 0 0;
  color: var(--protocol-green);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.knowledge-tabs-shell {
  position: sticky;
  z-index: calc(var(--z-sticky) - 1);
  top: var(--topbar);
  width: min(100%, var(--shell));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0 auto;
  padding-inline: var(--page-pad);
  background: var(--surface);
}

.knowledge-tabs {
  min-width: 0;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}

.knowledge-tabs a {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  padding: 0.8rem 1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  min-width: 13rem;
  flex: 1 0 auto;
  scroll-snap-align: start;
}

.knowledge-tabs a:first-child {
  border-left: 0;
}

.knowledge-tabs a b {
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.knowledge-tabs a:is(:hover, :focus-visible) {
  background: var(--surface-muted);
}

.knowledge-tabs a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

.knowledge-tabs a[aria-current="page"] b {
  color: var(--protocol-green);
}

.knowledge-tabs-arrow {
  width: clamp(3rem, 5vw, 4rem);
  min-height: 4.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font: 700 1.1rem/1 var(--font-mono);
  cursor: pointer;
}

.knowledge-tabs-arrow--previous {
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

.knowledge-tabs-arrow--next {
  border-right: 1px solid var(--ink);
}

.knowledge-tabs-arrow:is(:hover, :focus-visible) {
  background: var(--blue);
}

.knowledge-tabs-arrow:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: default;
}

.knowledge-content {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 8rem) var(--page-pad);
}

.knowledge-content__header {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 0.6fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.knowledge-content__header h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-wrap: balance;
}

.knowledge-content__header p {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
}

.knowledge-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 0.35fr) auto;
  gap: 0;
  align-items: stretch;
  margin-bottom: 2rem;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.knowledge-toolbar label {
  min-width: 0;
  min-height: 4rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0 1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.knowledge-toolbar label:has(select) {
  grid-template-columns: auto minmax(0, 1fr);
}

.knowledge-toolbar label > span:not(.visually-hidden) {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
}

.knowledge-toolbar input,
.knowledge-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  outline: 0;
  background: transparent;
}

.knowledge-toolbar input::placeholder {
  color: #6b6d68;
}

.knowledge-toolbar > p {
  display: grid;
  min-width: 10rem;
  margin: 0;
  padding: 0 1rem;
  place-items: center;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--surface-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  white-space: nowrap;
}

.knowledge-results {
  border-top: 1px solid var(--ink);
}

.knowledge-group {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  border-bottom: 1px solid var(--ink);
}

.knowledge-group > header {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  padding: 1rem;
  border-right: 1px solid var(--ink);
  background: var(--surface-muted);
}

.knowledge-group > header h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.25;
}

.knowledge-group > header > div p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.knowledge-group > header > span {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-weight: 700;
}

.knowledge-group > header > span b {
  font-size: 1.35rem;
  line-height: 1;
}

.knowledge-group > header > span small {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
}

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

.knowledge-glossary,
.knowledge-resources,
.knowledge-tools,
.knowledge-skills {
  margin: 0;
  padding: 0;
  list-style: none;
}

.knowledge-glossary-item {
  border-bottom: 1px solid var(--rule);
}

.knowledge-glossary-item:last-child {
  border-bottom: 0;
}

.knowledge-glossary-item summary {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto 2.5rem;
  gap: 1rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}

.knowledge-glossary-item summary::-webkit-details-marker {
  display: none;
}

.knowledge-glossary-item summary:is(:hover, :focus-visible) {
  background: var(--blue-soft);
}

.knowledge-item-index {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.knowledge-toggle {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--ink);
}

.knowledge-toggle::before {
  content: "+";
}

.knowledge-glossary-item details[open] {
  background: var(--blue-soft);
}

.knowledge-glossary-item details[open] .knowledge-toggle {
  background: var(--ink);
  color: var(--paper);
}

.knowledge-glossary-item details[open] .knowledge-toggle::before {
  content: "−";
}

.knowledge-glossary-item__content {
  max-width: 58rem;
  padding: 0 4.5rem 1.5rem;
}

.knowledge-glossary-item__content p {
  margin: 0;
  color: var(--muted);
}

.knowledge-glossary-item__content p + p {
  margin-top: 0.65rem;
  font-size: 0.8rem;
}

.knowledge-glossary-item__content a {
  display: inline-block;
  margin-top: 1rem;
  color: var(--blue-dark);
  font-size: 0.76rem;
  font-weight: 800;
  text-underline-offset: 0.16em;
}

.knowledge-resources {
  border-left: 1px solid var(--ink);
}

.knowledge-resource {
  display: grid;
  grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 1fr) minmax(11rem, 0.28fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.knowledge-resource__meta,
.knowledge-resource__source {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.65rem;
}

.knowledge-resource__meta > span,
.knowledge-resource__source > span,
.knowledge-resource__source time {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

[data-importance] {
  width: max-content;
  padding: 0.25rem 0.45rem;
  background: var(--surface-muted);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.2;
}

[data-importance="essential"] {
  background: var(--orange-surface);
  color: #fff;
}

[data-importance="advantage"] {
  background: var(--ink);
  color: var(--protocol-green);
}

.knowledge-resource h3,
.knowledge-tool h3,
.knowledge-skill h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.knowledge-resource p,
.knowledge-tool p,
.knowledge-skill > p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.knowledge-practical {
  color: var(--text) !important;
}

.knowledge-resource__source a,
.knowledge-tool__footer a {
  color: var(--blue-dark);
  font-size: 0.75rem;
  font-weight: 800;
  text-underline-offset: 0.16em;
}

.knowledge-tools,
.knowledge-skills {
  min-width: 0;
}

.knowledge-tool {
  display: grid;
  grid-template-columns: minmax(13rem, 0.4fr) minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.knowledge-tool:last-child,
.knowledge-skill:last-child {
  border-bottom: 0;
}

.knowledge-tool__heading {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.8rem;
}

.knowledge-tool > p {
  margin: 0;
}

.knowledge-tool__footer {
  grid-column: 2 / -1;
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.knowledge-tool__footer span {
  color: var(--muted);
  font-size: 0.75rem;
}

.knowledge-skill {
  display: grid;
  grid-template-columns: minmax(13rem, 0.4fr) minmax(13rem, 0.55fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.knowledge-skill__title > span {
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
}

.knowledge-skill__title h3 {
  margin-top: 0.55rem;
}

.knowledge-skill__title p {
  margin: 0.35rem 0 0;
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
}

.knowledge-skill > p {
  margin: 0;
}

.knowledge-skill dl {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}

.knowledge-skill dl div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.38fr) minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.knowledge-skill dl div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.knowledge-skill dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
}

.knowledge-skill dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.knowledge-empty {
  padding: clamp(2rem, 6vw, 5rem);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.knowledge-empty h3 {
  margin: 0;
}

.knowledge-empty p {
  margin: 0.4rem 0 0;
  color: var(--muted);
}

.glossary-dialog,
.explanation-dialog {
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--text);
}

.glossary-dialog {
  width: min(70rem, calc(100vw - 2rem));
  height: min(54rem, calc(100dvh - 2rem));
  max-height: min(54rem, calc(100dvh - 2rem));
}

.glossary-dialog::backdrop,
.explanation-dialog::backdrop {
  background: rgba(11, 13, 14, 0.78);
  backdrop-filter: blur(3px);
}

.glossary-dialog__surface {
  height: 100%;
  max-height: min(54rem, calc(100dvh - 2rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.glossary-dialog__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2.75rem;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: center;
  flex: 0 0 auto;
  min-height: 5rem;
  padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
  background: var(--ink);
  color: var(--paper);
}

.glossary-dialog__header > div > span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
}

.glossary-dialog__header h2 {
  max-width: none;
  margin: 0.2rem 0 0;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.glossary-dialog__full-link {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.glossary-dialog__header .dialog-close {
  position: static;
  width: 2.75rem;
  height: 2.75rem;
  border-color: var(--paper);
  background: var(--ink);
  color: var(--paper);
}

.glossary-dialog__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.glossary-dialog__tools {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem clamp(1.5rem, 5vw, 3rem);
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
}

.glossary-dialog__tools label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  max-width: 32rem;
}

.glossary-dialog__tools input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
}

.glossary-dialog__tools p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  white-space: nowrap;
}

.glossary-dialog__tools p strong {
  color: var(--blue);
  font-size: 1.3rem;
}

.glossary-search-status {
  min-height: 1.7rem;
  margin: 0;
  padding: 0.35rem clamp(1.5rem, 5vw, 3rem);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.glossary-search-status:empty {
  display: none;
}

.glossary-sections {
  border-top: 1px solid var(--ink);
}

.glossary-section + .glossary-section {
  border-top: 1px solid var(--ink);
}

.glossary-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 5vw, 3rem);
  background: var(--surface-muted);
}

.glossary-section__header h3 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.glossary-section__header p {
  max-width: 40rem;
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.glossary-section__header > b {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1;
}

.glossary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.glossary-list--current {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.glossary-term {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.glossary-term:nth-child(even) {
  border-right: 0;
}

.glossary-term.is-current {
  background: var(--blue-soft);
}

.glossary-term__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.glossary-badge {
  padding: 0.25rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1;
}

.glossary-badge--category {
  background: #FFFEF9;
  color: #0B0D0E;
}

.glossary-badge--new {
  background: var(--orange-surface);
  color: #fff;
}

.glossary-term h3 {
  margin: 1rem 0 0.65rem;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.glossary-term h3 span {
  display: block;
  margin-top: 0.4rem;
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

.glossary-term p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.glossary-term a {
  display: inline-block;
  margin-top: 1rem;
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-underline-offset: 0.15em;
}

.glossary-list--archive {
  border-top: 1px solid var(--rule);
}

.glossary-archive-term {
  border-bottom: 1px solid var(--rule);
}

.glossary-archive-term:last-child {
  border-bottom: 0;
}

.glossary-archive-term details {
  background: var(--surface);
}

.glossary-archive-term summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 2rem;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: center;
  min-height: 3.75rem;
  padding: 0.75rem clamp(1.5rem, 5vw, 3rem);
  cursor: pointer;
  list-style: none;
}

.glossary-archive-term summary::-webkit-details-marker {
  display: none;
}

.glossary-archive-term summary:hover {
  background: var(--surface-muted);
}

.glossary-archive-term summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.glossary-term-name {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.glossary-term-name strong {
  min-width: 0;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.glossary-term-name span {
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.25;
}

.glossary-archive-term__toggle {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.glossary-archive-term__toggle::before {
  content: "+";
}

.glossary-archive-term details[open] {
  background: var(--blue-soft);
}

.glossary-archive-term details[open] .glossary-archive-term__toggle {
  background: var(--ink);
  color: var(--paper);
}

.glossary-archive-term details[open] .glossary-archive-term__toggle::before {
  content: "−";
}

.glossary-archive-term__content {
  max-width: 54rem;
  padding: 0 clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 3vw, 2rem);
}

.glossary-archive-term__content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.glossary-archive-term__content a {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-underline-offset: 0.15em;
}

.glossary-empty {
  padding: clamp(2rem, 7vw, 5rem);
}

.glossary-empty h3 {
  margin: 0;
}

.glossary-empty p {
  color: var(--muted);
}

.explanation-dialog {
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(50rem, calc(100dvh - 2rem));
}

.explanation-dialog__surface {
  position: relative;
  max-height: min(50rem, calc(100dvh - 2rem));
  padding: clamp(1.5rem, 5vw, 3rem);
  overflow: auto;
}

.dialog-close {
  position: sticky;
  z-index: 1;
  top: 0;
  float: right;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--surface);
  cursor: pointer;
}

.explanation-dialog [data-explanation-content] > span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
}

.explanation-dialog h2 {
  max-width: 28ch;
  margin: 0.75rem 3.5rem 1.5rem 0;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.explanation-answer {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border-left: 5px solid var(--success);
  background: #d8f1e7;
}

.explanation-answer small {
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
}

.explanation-copy {
  margin: 1.5rem 0 0;
  font-size: 1.05rem;
}

.explanation-sources {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}

.explanation-sources h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.explanation-sources ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.explanation-sources li {
  padding: 0.85rem;
  border: 1px solid var(--rule);
}

.explanation-sources a {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  color: var(--blue);
  text-decoration: none;
}

.explanation-sources a span {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.explanation-sources li p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.next-lesson-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  margin-top: 4rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  text-decoration: none;
}

.next-lesson-preview > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.next-lesson-preview strong {
  font-size: 1.15rem;
}

.next-lesson-preview i {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--blue);
  font-size: 1.75rem;
  font-style: normal;
}

.next-lesson-preview:hover {
  border-color: var(--blue);
}

.lesson-navigation {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.course-complete {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
  padding: 2rem;
  background: var(--blue);
  color: #fff;
}

.course-complete > span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid #fff;
}

.course-complete h2 {
  margin: 0 0 0.5rem;
}

.course-complete p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.lesson-feedback {
  margin-top: 3rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.lesson-feedback > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}

.lesson-feedback > summary::-webkit-details-marker {
  display: none;
}

.lesson-feedback > summary > div > span {
  color: var(--blue);
}

.lesson-feedback h2 {
  margin: 0.45rem 0 0.35rem;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: -0.035em;
}

.lesson-feedback summary p {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.lesson-feedback > summary > i {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--ink);
}

.lesson-feedback > summary > i::before,
.lesson-feedback > summary > i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
  transition: transform var(--duration-fast) ease;
}

.lesson-feedback > summary > i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.lesson-feedback[open] > summary {
  border-bottom: 1px solid var(--rule);
}

.lesson-feedback[open] > summary > i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.lesson-feedback form {
  padding: 2rem 0 2.5rem;
}

.feedback-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.lesson-feedback label {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 800;
}

.lesson-feedback label small {
  color: var(--muted);
  font-weight: 400;
}

.lesson-feedback input,
.lesson-feedback textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 0;
  outline: 0;
  background: var(--surface);
}

.lesson-feedback input {
  min-height: 3rem;
  padding: 0 0.8rem;
}

.lesson-feedback textarea {
  min-height: 10rem;
  padding: 0.8rem;
  resize: vertical;
  line-height: 1.5;
}

.lesson-feedback input:focus,
.lesson-feedback textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-soft);
}

.feedback-submit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.feedback-submit p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.feedback-submit output {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.feedback-status {
  min-height: 1.3rem;
  margin: 0.75rem 0 0;
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 700;
}

.sidebar-overlay {
  display: none;
}

.system-message {
  min-height: calc(100vh - var(--topbar));
  display: grid;
  place-content: center;
  justify-items: start;
  padding: var(--page-pad);
}

.system-message > span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: 700;
}

.system-message h1 {
  max-width: 12ch;
  margin: 1rem 0;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.system-message p {
  max-width: 42rem;
  margin: 0 0 2rem;
  color: var(--muted);
}

.system-message__actions,
.error-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.error-page {
  min-height: calc(100vh - var(--topbar));
  display: grid;
  place-items: center;
  padding: clamp(2rem, 7vw, 7rem) var(--page-pad);
}

.error-state {
  width: min(100%, 72rem);
  display: grid;
  grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 0.58fr);
  border: 1px solid var(--ink);
  background: var(--surface);
}

.error-state__code {
  min-height: 36rem;
  display: grid;
  align-content: space-between;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--paper);
}

.error-state__code span {
  color: var(--protocol-green);
  font: 700 0.7rem/1.4 var(--font-mono);
}

.error-state__code strong {
  color: var(--orange);
  font-size: clamp(7rem, 17vw, 14rem);
  letter-spacing: -0.08em;
  line-height: 0.72;
}

.error-state__content {
  display: grid;
  align-content: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.error-state__content h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-wrap: balance;
}

.error-state__content > p {
  max-width: 40rem;
  margin: 1.25rem 0 2rem;
  color: var(--muted);
}

.error-state__content > small {
  max-width: 37rem;
  margin-top: 1.25rem;
  color: var(--muted);
  line-height: 1.45;
}

.error-state__actions {
  margin-top: 2rem;
}

.error-wait {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.error-wait progress {
  width: 100%;
  height: 0.55rem;
  border: 0;
  background: var(--surface-muted);
  color: var(--blue);
}

.error-wait progress::-webkit-progress-bar {
  background: var(--surface-muted);
}

.error-wait progress::-webkit-progress-value {
  background: var(--blue);
}

.error-wait progress::-moz-progress-bar {
  background: var(--blue);
}

.error-wait output {
  color: var(--muted);
  font: 700 0.68rem var(--font-mono);
}

.toast-region {
  position: fixed;
  z-index: var(--z-skip);
  right: var(--page-pad);
  bottom: var(--page-pad);
  width: min(calc(100vw - 2rem), 24rem);
  pointer-events: none;
}

.system-toast {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--duration-medium) var(--ease-out),
    transform var(--duration-medium) var(--ease-out);
}

.system-toast > span {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--protocol-green);
}

.system-toast p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.system-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.system-toast.is-leaving {
  opacity: 0;
  transform: translateY(0.45rem);
}

@media (max-width: 72rem) {
  .knowledge-entry {
    grid-template-columns: 6rem minmax(0, 1fr) 2rem;
  }

  .knowledge-entry dl {
    grid-column: 2;
  }

  .knowledge-entry > i {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (max-width: 68rem) {
  .home-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
  }

  .direction-row {
    grid-template-columns: 4rem minmax(0, 1fr) 3rem;
  }

  .direction-meta {
    grid-column: 2;
  }

  .direction-arrow {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .error-state {
    grid-template-columns: 1fr;
  }

  .error-state__code {
    min-height: 13rem;
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .error-state__code strong {
    font-size: clamp(5rem, 20vw, 9rem);
  }

  .course-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-sidebar {
    position: fixed;
    z-index: var(--z-drawer);
    left: 0;
    width: min(var(--sidebar), calc(100vw - 3rem));
    transform: translateX(-105%);
    transition: transform var(--duration-medium) var(--ease-out);
  }

  .course-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-close {
    display: grid;
  }

  .sidebar-overlay {
    position: fixed;
    z-index: var(--z-overlay);
    inset: 0;
    display: block;
    border: 0;
    background: rgba(11, 13, 14, 0.58);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-medium) ease;
  }

  .sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .reading-progress {
    left: 0;
  }

  .lesson-topbar {
    grid-template-areas: "menu context actions exit";
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .topbar-menu {
    display: inline-flex;
  }
}

@media (max-width: 54rem) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .home-hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: calc(100svh - var(--topbar));
  }

  .course-protocol {
    min-height: 34rem;
  }

  .protocol-letter {
    font-size: min(52vw, 20rem);
  }

  .section-intro,
  .system-principles,
  .course-outcomes {
    grid-template-columns: 1fr;
  }

  .system-principles li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .system-principles li p {
    grid-column: 2;
  }

  .course-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-facts {
    align-self: auto;
  }

  .course-definition {
    grid-template-columns: 1fr;
  }

  .course-definition > div,
  .course-definition > div:first-child,
  .course-definition > div:last-child {
    min-height: auto;
    padding: 2rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

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

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

  .practice-lab__body {
    grid-template-columns: 1fr;
  }

  .practice-lab__guide {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .feedback-submit {
    grid-template-columns: 1fr auto;
  }

  .feedback-submit p {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (max-width: 44rem) {
  :root {
    --topbar: 4rem;
  }

  .protocol-link {
    --protocol-text-height: 1.17rem;
    --protocol-mark-size: 1.404rem;

    gap: 0.45rem;
    font-size: 0.65rem;
  }

  .curso-brand {
    font-size: 1.25rem;
  }

  .header-links {
    gap: 0;
  }

  .header-links a:nth-child(n + 2) {
    display: none;
  }

  .header-links a {
    font-size: 0.7rem;
  }

  .hero-copy h1 {
    font-size: clamp(2.05rem, 8.4vw, 2.35rem);
  }

  .course-overview-copy h1 {
    font-size: clamp(2.65rem, 12vw, 3.8rem);
  }

  .hero-actions,
  .course-overview-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions > *,
  .course-overview-actions > *,
  .course-overview-actions .share-control > summary {
    width: 100%;
  }

  .resume-band {
    grid-template-columns: 1fr;
  }

  .direction-row {
    grid-template-columns: 3rem minmax(0, 1fr) 2rem;
    min-height: 11rem;
  }

  .direction-copy h3 {
    font-size: 1.75rem;
  }

  .direction-copy p {
    font-size: 0.92rem;
  }

  .direction-arrow {
    font-size: 1.4rem;
  }

  .system-principles {
    padding-inline: var(--page-pad);
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-self: start;
  }

  .lesson-topbar {
    grid-template-areas: "menu actions . exit";
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    padding-inline: 0.75rem;
  }

  .lesson-topbar > p {
    display: none;
  }

  .lesson-topbar .like-button span,
  .lesson-topbar .share-control summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .lesson-topbar .like-button,
  .lesson-topbar .share-control > summary {
    width: 2.75rem;
    gap: 0;
    justify-content: center;
    padding: 0;
  }

  .lesson-topbar .share-control > summary svg {
    margin: 0;
  }

  .topbar-menu span {
    display: none;
  }

  .lesson-header h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .lesson-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
  }

  .lesson-navigation .button {
    width: 100%;
  }

  .feedback-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .feedback-submit {
    grid-template-columns: 1fr;
  }

  .feedback-submit output {
    justify-self: start;
  }

  .module-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
  }

  .module-row progress {
    grid-column: 2;
  }

  .module-row i {
    grid-column: 3;
    grid-row: 1 / 3;
  }

}

@media (hover: hover) and (pointer: fine) {
  .lesson-link,
  .share-panel a,
  .share-panel button,
  .direction-row,
  .module-row {
    transition:
      background var(--duration-fast) ease,
      color var(--duration-fast) ease,
      padding var(--duration-medium) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .course-sidebar,
  .lesson-topbar,
  .reading-progress,
  .lesson-navigation,
  .lesson-completion-toggle--compact,
  .lesson-feedback,
  .site-footer {
    display: none !important;
  }

  .course-layout {
    display: block;
  }

  .lesson-shell {
    width: 100%;
    padding: 0;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* Public product-system showcase */
.system-page {
  min-height: 100vh;
  overflow: clip;
  background: var(--paper);
}

.system-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(24rem, 0.9fr);
  min-height: min(48rem, calc(100svh - var(--topbar)));
  background: var(--blue);
  color: #fff;
}

.system-hero__copy {
  display: grid;
  align-content: end;
  padding: clamp(5rem, 9vw, 9rem) var(--page-pad) clamp(3rem, 6vw, 6rem);
}

.system-hero__meta,
.system-section__meta,
.system-method-figure figcaption span,
.system-trace__signal,
.system-palette header p,
.system-type header p,
.system-type__display > span,
.system-type__body > span,
.system-type__meta > span,
.system-type__families article > span,
.system-component-strip section > span,
.system-research-basis span,
.system-evidence-list > li > span,
.system-dialogue header > span,
.system-toast-lab span,
.system-error-preview__wait > span,
.system-decision-record > span,
.system-closing > div > span {
  font: 700 0.7rem/1.4 var(--font-mono);
  letter-spacing: 0.025em;
}

.system-hero__meta {
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
}

.system-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.15rem, 6.7vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-wrap: balance;
}

.system-hero__lead {
  max-width: 43rem;
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.55vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.system-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-top: 2.5rem;
}

.system-text-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  text-underline-offset: 0.35rem;
}

.system-method-figure {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--ink);
}

.system-method-frame {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: center;
  margin: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(244, 240, 231, 0.42);
  border-left: 1px solid rgba(244, 240, 231, 0.42);
}

.system-method-frame > div {
  min-height: clamp(9rem, 17vw, 13rem);
  display: grid;
  align-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border-right: 1px solid rgba(244, 240, 231, 0.42);
  border-bottom: 1px solid rgba(244, 240, 231, 0.42);
  animation: system-frame-lock 900ms var(--ease-out) both;
}

.system-method-frame > div:nth-child(2) {
  animation-delay: 80ms;
}

.system-method-frame > div:nth-child(3) {
  animation-delay: 160ms;
}

.system-method-frame > div:nth-child(4) {
  animation-delay: 240ms;
}

.system-method-frame span {
  color: var(--orange);
  font: 700 0.68rem var(--font-mono);
}

.system-method-frame b {
  align-self: end;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.system-method-frame small {
  color: rgba(244, 240, 231, 0.66);
  line-height: 1.35;
}

.system-method-frame > i {
  position: absolute;
  right: -1.3rem;
  bottom: 20%;
  width: 6.5rem;
  height: 7.5rem;
  border: 0.8rem solid var(--orange);
  border-right: 0;
  transform: translate(1.5rem, 1rem);
  animation: system-bracket-return 950ms 300ms var(--ease-out) both;
}

.system-method-figure figcaption {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(244, 240, 231, 0.42);
  color: rgba(244, 240, 231, 0.72);
  font-size: 0.8rem;
}

.system-method-figure figcaption span {
  color: var(--orange);
}

@keyframes system-frame-lock {
  from {
    opacity: 0.25;
    transform: translate(0.65rem, -0.4rem);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes system-bracket-return {
  from {
    opacity: 0;
    transform: translate(3rem, 1.5rem) rotate(4deg);
  }
  to {
    opacity: 1;
    transform: translate(1.5rem, 1rem) rotate(0);
  }
}

.system-index-shell {
  position: sticky;
  z-index: calc(var(--z-sticky) - 1);
  top: var(--topbar);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.system-index {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline proximity;
  background: var(--surface);
  scrollbar-width: thin;
}

.system-index a {
  min-width: 10.5rem;
  min-height: 4.5rem;
  display: grid;
  align-content: center;
  gap: 0.15rem;
  flex: 1 0 auto;
  padding: 0.8rem 1rem;
  border-right: 1px solid var(--rule);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  scroll-snap-align: start;
}

.system-index a span {
  color: var(--muted);
  font: 700 0.6rem/1.35 var(--font-mono);
}

.system-index a:is(:hover, :focus-visible),
.system-index a[aria-current="location"] {
  background: var(--ink);
  color: var(--paper);
}

.system-index a:is(:hover, :focus-visible) span,
.system-index a[aria-current="location"] span {
  color: var(--protocol-green);
}

.system-index-arrow {
  position: relative;
  z-index: 1;
  width: clamp(3rem, 5vw, 4rem);
  min-height: 4.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font: 700 1.25rem/1 var(--font-mono);
  cursor: pointer;
}

.system-index-arrow--previous {
  border-right: 1px solid var(--rule);
}

.system-index-arrow--next {
  border-left: 1px solid var(--rule);
}

.system-index-arrow:is(:hover, :focus-visible) {
  background: var(--blue);
}

.system-index-arrow:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: default;
}

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

.system-section {
  padding: clamp(5rem, 9vw, 9rem) var(--page-pad);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: calc(var(--topbar) + 4.75rem);
}

.system-section--surface {
  background: var(--surface);
}

.system-section--ink {
  background: var(--ink);
  color: var(--paper);
}

.system-section--blue {
  background: var(--blue);
  color: #fff;
}

.system-section__header {
  display: grid;
  grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 1.1fr) minmax(18rem, 0.58fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  max-width: var(--shell);
  margin: 0 auto clamp(3.5rem, 7vw, 7rem);
}

.system-section__meta {
  margin: 0;
}

.system-section__header h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.65rem, 5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.93;
  text-wrap: balance;
}

.system-section__header > p:last-child {
  max-width: 38rem;
  margin: 0;
  color: var(--muted);
  text-wrap: pretty;
}

.system-section--ink .system-section__header > p:last-child,
.system-section--blue .system-section__header > p:last-child {
  color: rgba(255, 255, 255, 0.74);
}

.system-trace,
.system-state-lab {
  max-width: var(--shell);
  margin-inline: auto;
}

.system-trace__tabs,
.system-state-lab__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(244, 240, 231, 0.48);
  border-left: 1px solid rgba(244, 240, 231, 0.48);
}

.system-trace__tabs button,
.system-state-lab__tabs button {
  min-height: 4.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border: 0;
  border-right: 1px solid rgba(244, 240, 231, 0.48);
  border-bottom: 1px solid rgba(244, 240, 231, 0.48);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.system-trace__tabs button span {
  color: var(--orange);
  font: 700 0.65rem var(--font-mono);
}

.system-trace__tabs button[aria-selected="true"] {
  background: var(--orange-surface);
  color: #fff;
}

.system-trace__tabs button[aria-selected="true"] span {
  color: #fff;
}

.system-trace__panel {
  min-height: 29rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.5fr);
  gap: 1.5rem 4rem;
  align-content: end;
  padding: clamp(2rem, 6vw, 5rem);
  background: var(--paper);
  color: var(--ink);
}

.system-trace__signal {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--blue-dark);
}

.system-trace__panel h3 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.2rem, 4.4vw, 4.5rem);
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: balance;
}

.system-trace__panel > p:not(.system-trace__signal) {
  max-width: 38rem;
  margin: 0;
  color: var(--muted);
}

.system-trace__panel dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2rem 0 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.system-trace__panel dl div {
  min-height: 7rem;
  padding: 1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-trace__panel dt {
  margin-bottom: 0.6rem;
  color: var(--blue-dark);
  font: 700 0.65rem var(--font-mono);
}

.system-trace__panel dd {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
}

.system-research-basis {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto 3rem;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.system-research-basis > div {
  min-height: 17rem;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-research-basis span,
.system-evidence-list > li > span {
  color: var(--blue-dark);
}

.system-research-basis strong {
  max-width: 22ch;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
}

.system-research-basis p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.system-evidence-list {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.system-evidence-list > li {
  display: grid;
  grid-template-columns: minmax(7rem, 0.2fr) minmax(18rem, 0.62fr) minmax(22rem, 0.58fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--ink);
}

.system-evidence-list h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.05;
}

.system-evidence-list p {
  margin: 0;
  color: var(--muted);
}

.system-evidence-list dl {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.system-evidence-list dl div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.system-evidence-list dt {
  color: var(--blue-dark);
  font: 700 0.64rem var(--font-mono);
}

.system-evidence-list dd {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
}

.system-principle-list {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.system-principle-list li {
  display: grid;
  grid-template-columns: minmax(6rem, 0.25fr) minmax(18rem, 0.85fr) minmax(17rem, 0.55fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--ink);
}

.system-principle-list li > span {
  color: var(--blue-dark);
  font: 700 0.65rem var(--font-mono);
}

.system-principle-list h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.system-principle-list p {
  margin: 0;
  color: var(--muted);
}

.system-principle-list li > p {
  font-size: 0.9rem;
}

.system-foundations {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
  margin-inline: auto;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.system-palette,
.system-type {
  min-width: 0;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-palette > header,
.system-type > header {
  min-height: 8.5rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--ink);
}

.system-palette h3,
.system-type h3 {
  margin: 0 0 0.35rem;
  font-size: 1.4rem;
}

.system-palette header p,
.system-type header p {
  max-width: 36rem;
  margin: 0;
  color: var(--muted);
}

.system-palette ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-palette__label {
  margin: 1.5rem 0 0;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ink);
  color: var(--blue-dark);
  font: 800 0.7rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.system-palette__rule {
  margin: 1.5rem 1rem 0;
  padding: 1rem;
  border-left: 4px solid var(--orange);
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.5;
}

.system-color {
  display: grid;
  grid-template-columns: 4rem minmax(8rem, 0.4fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 5.5rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rule);
}

.system-color:last-child {
  border-bottom: 0;
}

.system-color > span {
  width: 4rem;
  height: 3.25rem;
  border: 1px solid var(--ink);
  background: var(--swatch);
}

.system-color--ink {
  --swatch: var(--ink);
}

.system-color--paper {
  --swatch: var(--paper);
}

.system-color--blue {
  --swatch: var(--blue);
}

.system-color--orange {
  --swatch: var(--orange);
}

.system-color--orange-surface {
  --swatch: var(--orange-surface);
}

.system-color--success {
  --swatch: var(--success);
}

.system-color--warning {
  --swatch: var(--warning);
}

.system-color--danger {
  --swatch: var(--danger);
}

.system-color--protocol-green {
  --swatch: var(--protocol-green);
}

.system-color--blue-soft {
  --swatch: var(--blue-soft);
}

.system-color--surface-muted {
  --swatch: var(--surface-muted);
}

.system-color--surface {
  --swatch: var(--surface);
}

.system-color--muted {
  --swatch: var(--muted);
}

.system-color > div {
  display: grid;
}

.system-color code,
.system-color em {
  font: 400 0.65rem var(--font-mono);
}

.system-color p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.system-color em {
  justify-self: end;
  color: var(--blue-dark);
  font-style: normal;
}

.system-type {
  display: grid;
  grid-template-rows: auto;
}

.system-type__families {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-type__families article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: 1.5rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-type__families article:last-child {
  border-right: 0;
}

.system-type__families article > span {
  color: var(--blue-dark);
}

.system-type__families strong {
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
}

.system-type__families article:last-child strong {
  font-family: var(--font-mono);
}

.system-type__families code {
  color: var(--blue-dark);
  font-size: 0.78rem;
}

.system-type__families p,
.system-type__families small {
  margin: 0;
  color: var(--muted);
}

.system-type__families p {
  font-size: 0.83rem;
  line-height: 1.45;
}

.system-type__families small {
  font-size: 0.7rem;
  line-height: 1.45;
}

.system-type__display {
  min-height: 22rem;
  display: grid;
  align-content: space-between;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--blue);
  color: #fff;
}

.system-type__display strong {
  max-width: 12ch;
  font-size: clamp(2.6rem, 5vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-wrap: balance;
}

.system-type__body,
.system-type__meta {
  padding: 1.5rem;
  border-top: 1px solid var(--ink);
}

.system-type__body p {
  max-width: 39rem;
  margin: 1rem 0 0;
  color: var(--muted);
}

.system-type__meta {
  display: grid;
  gap: 0.75rem;
  background: var(--ink);
  color: var(--paper);
}

.system-type__meta code {
  overflow-wrap: anywhere;
  color: var(--protocol-green);
  font-size: clamp(1rem, 2.2vw, 1.45rem);
}

.system-type__rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--ink);
}

.system-type__rules div {
  min-height: 8.5rem;
  padding: 1rem 1.5rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-type__rules div:nth-child(even) {
  border-right: 0;
}

.system-type__rules dt {
  margin-bottom: 0.55rem;
  color: var(--blue-dark);
  font-weight: 900;
}

.system-type__rules dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.system-layout {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.6fr);
  margin-inline: auto;
  border: 1px solid var(--ink);
}

.system-layout-map {
  display: grid;
  grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(22rem, 1fr) auto auto;
  margin: 0;
  border-right: 1px solid var(--ink);
  background: var(--surface);
}

.system-layout-map__top,
.system-layout-map__next {
  grid-column: 1 / -1;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ink);
  font: 700 0.65rem var(--font-mono);
}

.system-layout-map__side {
  padding: 1.5rem;
  border-right: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 700 0.68rem/1.5 var(--font-mono);
}

.system-layout-map__side b {
  color: var(--orange);
}

.system-layout-map__main {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 2rem;
  color: var(--blue-dark);
  font: 700 0.68rem var(--font-mono);
}

.system-layout-map__main::before,
.system-layout-map__main::after {
  position: absolute;
  inset-block: 0;
  width: 1px;
  background: var(--rule);
  content: "";
}

.system-layout-map__main::before {
  left: 18%;
}

.system-layout-map__main::after {
  right: 18%;
}

.system-layout-map__main b {
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: clamp(2.7rem, 7vw, 6rem);
  letter-spacing: -0.04em;
}

.system-layout-map__main i {
  position: absolute;
  right: 8%;
  bottom: 13%;
  width: 5rem;
  height: 5rem;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 35% 35%, 35% 100%, 0 100%);
}

.system-layout-map__next {
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  background: var(--blue);
  color: #fff;
  text-align: right;
}

.system-layout-map figcaption {
  grid-column: 1 / -1;
  padding: 1rem;
  border-top: 1px solid var(--ink);
  color: var(--muted);
  font-size: 0.76rem;
}

.system-layout-contract {
  padding: 1.5rem;
}

.system-layout-contract h3 {
  margin: 0 0 2rem;
  font-size: 1.35rem;
}

.system-layout-contract dl {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.system-layout-contract dl div {
  display: grid;
  grid-template-columns: minmax(4rem, 0.3fr) auto;
  gap: 0.25rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.system-layout-contract dt {
  font: 700 0.66rem var(--font-mono);
}

.system-layout-contract dd {
  margin: 0;
  color: var(--blue-dark);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.system-layout-contract p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.system-responsive {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3rem auto 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.system-responsive article {
  min-height: 22rem;
  display: grid;
  align-content: space-between;
  padding: 1.5rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-responsive article > span {
  color: var(--blue-dark);
  font: 700 0.68rem var(--font-mono);
}

.system-responsive h3 {
  margin: 1rem 0 0.45rem;
  font-size: 1.35rem;
}

.system-responsive p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.system-device {
  position: relative;
  width: 100%;
  height: 8rem;
  margin-top: 2rem;
  border: 1px solid var(--ink);
}

.system-device i,
.system-device b {
  position: absolute;
  display: block;
  background: var(--ink);
}

.system-device i {
  inset: 0 0 auto;
  height: 0.65rem;
}

.system-device b {
  inset: 0 auto 0.65rem 0;
  width: var(--device-side, 28%);
}

.system-device--mid {
  width: 70%;
}

.system-device--mid b,
.system-device--narrow b {
  display: none;
}

.system-device--narrow {
  width: 38%;
}

.system-state-lab__tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.system-state-lab__tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--blue-dark);
}

.system-state-lab__stage {
  min-height: 24rem;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 5rem);
  background: var(--paper);
  color: var(--ink);
}

.system-state-lab__stage > div {
  display: grid;
  justify-items: center;
  width: min(100%, 43rem);
}

.system-state-lab__stage p {
  max-width: 38rem;
  margin: 2.5rem 0 0;
  color: var(--muted);
  text-align: center;
}

.system-demo-hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 var(--orange);
}

.system-demo-focus {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.system-state-lab__stage .button[disabled] {
  border-color: var(--muted);
  background: var(--surface-muted);
  color: var(--muted);
  cursor: not-allowed;
}

.system-component-strip {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3rem auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
}

.system-component-strip section {
  min-height: 18rem;
  display: grid;
  align-content: center;
  gap: 0.8rem;
  padding: 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.system-component-strip label {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  font-weight: 800;
}

.system-component-strip input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem;
  border: 1px solid #fff;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
}

.system-component-strip input::placeholder {
  color: #51534e;
  opacity: 1;
}

.system-component-strip small {
  color: rgba(255, 255, 255, 0.78);
}

.system-component-strip progress {
  width: 100%;
  height: 0.65rem;
  border: 0;
  background: rgba(255, 255, 255, 0.34);
  color: var(--protocol-green);
}

.system-component-strip progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.34);
}

.system-component-strip progress::-webkit-progress-value {
  background: var(--protocol-green);
}

.system-component-strip progress::-moz-progress-bar {
  background: var(--protocol-green);
}

.system-status-example {
  padding: 1rem;
  background: #fff;
  color: var(--ink);
}

.system-status-example p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.system-dialogue {
  max-width: var(--shell);
  margin: 3rem auto 0;
  border: 1px solid rgba(255, 255, 255, 0.58);
}

.system-dialogue > header {
  display: grid;
  grid-template-columns: minmax(8rem, 0.22fr) minmax(18rem, 0.58fr) minmax(18rem, 0.5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
}

.system-dialogue > header > span,
.system-toast-lab span,
.system-error-preview__wait > span {
  color: var(--protocol-green);
}

.system-dialogue h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  line-height: 0.98;
  text-wrap: balance;
}

.system-dialogue header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.system-toast-lab {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
}

.system-toast-lab p {
  max-width: 47rem;
  margin: 0.65rem 0 0;
  color: rgba(255, 255, 255, 0.76);
}

.system-toast-lab__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.system-error-preview {
  display: grid;
  grid-template-columns: minmax(17rem, 0.32fr) minmax(0, 0.68fr);
}

.system-error-preview__wait {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-right: 1px solid rgba(255, 255, 255, 0.58);
  background: var(--ink);
}

.protocol-puzzle {
  position: relative;
  width: clamp(5.5rem, 9vw, 7rem);
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
}

.protocol-puzzle img {
  display: block;
  width: 100%;
  height: 100%;
}

.protocol-puzzle i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 25%;
  aspect-ratio: 1;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: var(--protocol-green);
  opacity: 0;
  transform: translate(calc(var(--puzzle-x) * 100%), calc(var(--puzzle-y) * 100%));
  transition: transform 190ms cubic-bezier(0.55, 0, 0.2, 1);
  will-change: transform;
}

.protocol-puzzle.is-enhanced img {
  opacity: 0;
}

.protocol-puzzle.is-enhanced i {
  opacity: 1;
}

.protocol-puzzle[data-puzzle-phase="assembled"] i {
  transition-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
}

.protocol-puzzle--error {
  width: clamp(4.5rem, 7vw, 5.5rem);
}

.system-error-preview__wait strong {
  font-size: 1.5rem;
}

.system-error-preview__wait p {
  margin: 0;
  color: rgba(244, 240, 231, 0.72);
  font-size: 0.86rem;
}

.system-error-preview ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-error-preview li {
  min-height: 8.5rem;
  display: grid;
  align-content: space-between;
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
}

.system-error-preview li:nth-child(3n) {
  border-right: 0;
}

.system-error-preview li b {
  color: var(--protocol-green);
  font: 700 0.72rem var(--font-mono);
}

.system-error-preview li span {
  font-weight: 800;
}

.system-error-preview li small {
  color: rgba(255, 255, 255, 0.68);
  font: 400 0.62rem/1.35 var(--font-mono);
}

.system-error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  margin: 0;
  padding: 1rem 1.5rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.84rem;
}

.system-error-links a {
  color: var(--blue-dark);
  font-weight: 900;
  text-underline-offset: 0.25rem;
}

.model-chain {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: repeat(9, auto);
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 3rem;
  overflow-x: auto;
  background: var(--ink);
  color: var(--paper);
}

.model-chain > div {
  min-width: 9rem;
  display: grid;
  gap: 0.45rem;
}

.model-chain span {
  color: var(--orange);
  font: 700 0.7rem var(--font-mono);
}

.model-chain strong {
  font-size: 1.2rem;
}

.model-chain small {
  color: rgba(244, 240, 231, 0.68);
}

.model-chain > i {
  color: var(--orange);
  font-size: 1.5rem;
  font-style: normal;
}

.system-lesson-anatomy {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: minmax(14rem, 0.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin: 3rem auto 0;
}

.system-lesson-anatomy header h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.system-lesson-anatomy header p {
  margin: 0;
  color: var(--muted);
}

.system-lesson-anatomy ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.system-lesson-anatomy li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.system-lesson-anatomy li span {
  color: var(--blue-dark);
  font-weight: 900;
}

.system-lesson-anatomy li p {
  margin: 0;
  color: var(--muted);
}

.system-term-example {
  max-width: 42rem;
  margin: clamp(3rem, 6vw, 6rem) auto 0;
}

.system-term-example > span {
  color: var(--blue-dark);
  font: 800 0.7rem var(--font-mono);
  letter-spacing: 0.025em;
}

.system-term-example > p {
  margin: 0.85rem 0 1.25rem;
  font-size: 1.05rem;
}

.system-term-example .term-footnotes {
  margin-top: 0;
}

.system-access {
  max-width: var(--shell);
  display: grid;
  gap: clamp(4rem, 8vw, 8rem);
  margin-inline: auto;
}

.system-access__intro {
  max-width: 64rem;
  margin-bottom: 2rem;
}

.system-access__intro > p:first-child {
  margin: 0 0 0.75rem;
  color: var(--blue-dark);
  font: 700 0.68rem/1.4 var(--font-mono);
  letter-spacing: 0.025em;
}

.system-access__intro h3 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(1.85rem, 3.5vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}

.system-access__intro > p:last-child {
  max-width: 50rem;
  margin: 1rem 0 0;
  color: var(--muted);
  text-wrap: pretty;
}

.system-focus-flow .system-access__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.38fr);
  column-gap: clamp(2rem, 6vw, 6rem);
}

.system-focus-flow .system-access__intro > p:first-child,
.system-focus-flow .system-access__intro h3,
.system-focus-flow .system-access__intro > p:last-of-type {
  grid-column: 1;
}

.system-focus-flow .system-access__intro aside {
  grid-column: 2;
  grid-row: 1 / 4;
  display: grid;
  gap: 0.65rem;
  align-content: end;
  padding: 1.5rem;
  background: var(--blue);
  color: #fff;
}

.system-focus-flow .system-access__intro aside span {
  font: 700 0.65rem/1.4 var(--font-mono);
}

.system-focus-flow .system-access__intro aside strong {
  font-size: 1.05rem;
  line-height: 1.35;
}

.system-focus-flow .system-access__intro aside small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  line-height: 1.5;
}

.system-focus-flow ol,
.system-quality-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-focus-flow__legend {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink);
  border-bottom: 0;
  background: var(--surface-muted);
  font: 700 0.68rem/1.4 var(--font-mono);
}

.system-focus-flow__legend strong {
  color: var(--blue-dark);
  text-align: center;
}

.system-focus-flow__legend span:last-child {
  text-align: right;
}

.system-focus-flow ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(8rem, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.system-focus-flow li {
  position: relative;
  min-height: 15rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
}

.system-focus-flow li:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  top: 1.9rem;
  right: -0.6rem;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--surface);
  color: var(--blue-dark);
  content: "→";
  font-weight: 900;
}

.system-focus-flow li span {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--orange-surface);
  color: #fff;
  font: 700 0.75rem var(--font-mono);
}

.system-focus-flow li div {
  align-self: start;
}

.system-focus-flow li b {
  display: block;
  font-size: 1.05rem;
  line-height: 1.25;
}

.system-focus-flow li b small {
  display: inline;
  color: var(--blue-dark);
  font: 700 0.68rem var(--font-mono);
}

.system-focus-flow li p small {
  color: var(--blue-dark);
  font: 700 0.68rem/1.45 var(--font-mono);
}

.system-focus-flow li p {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.system-focus-flow li > small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.system-focus-flow li > small strong {
  color: var(--ink);
}

.system-focus-flow__result {
  display: grid;
  grid-template-columns: minmax(8rem, 0.2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.88rem;
}

.system-focus-flow__result strong {
  color: var(--protocol-green);
  font: 700 0.68rem var(--font-mono);
}

.system-focus-flow__result span {
  line-height: 1.5;
}

.system-quality-rules ul {
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.system-quality-rules li {
  display: grid;
  grid-template-columns: 3rem minmax(16rem, 0.68fr) minmax(18rem, 1fr);
  gap: 1.25rem;
  align-items: center;
  min-height: 8.25rem;
  padding: 1.25rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
}

.system-quality-rules li > span {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--success);
  color: #fff;
  font-weight: 900;
}

.system-quality-rules li b {
  display: block;
  color: var(--blue-dark);
  line-height: 1.3;
}

.system-quality-rules li b small {
  color: var(--blue-dark);
  font: 700 0.68rem var(--font-mono);
}

.system-quality-rules li p {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.system-quality-rules li > small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.system-quality-rules li > small strong {
  color: var(--danger);
}

.system-quality-rules__result {
  display: grid;
  grid-template-columns: minmax(7rem, 0.18fr) minmax(0, 1fr);
  margin: 0;
  background: var(--blue);
  color: #fff;
}

.system-quality-rules__result span,
.system-quality-rules__result strong {
  padding: 1rem 1.25rem;
}

.system-quality-rules__result span {
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--protocol-green);
  font: 700 0.72rem var(--font-mono);
}

.system-quality-rules__result strong {
  font-size: 0.88rem;
}

.system-boundaries {
  max-width: var(--shell);
  display: grid;
  grid-template-columns: minmax(19rem, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-inline: auto;
}

.system-boundaries h3 {
  margin: 0 0 2rem;
  font-size: 1.5rem;
}

.system-boundaries dl {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.system-boundaries dl div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.system-boundaries dt {
  margin-bottom: 0.45rem;
  color: var(--blue-dark);
  font-weight: 900;
}

.system-boundaries dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

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

.system-donts li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.system-donts li > span {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1;
}

.system-donts b {
  font-size: 1rem;
}

.system-donts p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.system-governance-flow {
  max-width: var(--shell);
  margin-inline: auto;
}

.system-governance-flow__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(244, 240, 231, 0.48);
  border-left: 1px solid rgba(244, 240, 231, 0.48);
}

.system-governance-flow__tabs button {
  min-height: 12rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 1.25rem;
  border: 0;
  border-right: 1px solid rgba(244, 240, 231, 0.48);
  border-bottom: 1px solid rgba(244, 240, 231, 0.48);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-medium) var(--ease-out), color var(--duration-medium) var(--ease-out);
}

.system-governance-flow__tabs button > span {
  grid-column: 1 / -1;
  color: var(--protocol-green);
  font: 700 0.68rem var(--font-mono);
}

.system-governance-flow__tabs button > strong {
  grid-column: 1 / -1;
  align-self: end;
  font-size: 1.05rem;
}

.system-governance-flow__tabs button[aria-selected="true"] {
  background: var(--blue);
  color: #fff;
}

.system-governance-flow__tabs button[aria-selected="true"] > span {
  color: #fff;
}

.system-process-glyph {
  grid-column: 1 / -1;
  place-self: center;
  width: 3.65rem;
  height: 3.65rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.2rem;
  color: var(--protocol-green);
  font-style: normal;
}

.system-process-glyph b {
  display: block;
  background: currentColor;
}

.system-process-glyph--observe b:nth-child(1) { grid-area: 1 / 1; }
.system-process-glyph--observe b:nth-child(2) { grid-area: 1 / 4; }
.system-process-glyph--observe b:nth-child(3) { grid-area: 2 / 2; }
.system-process-glyph--observe b:nth-child(4) { grid-area: 3 / 3; }
.system-process-glyph--observe b:nth-child(5) { grid-area: 4 / 4; }

.system-process-glyph--decide b:nth-child(1) { grid-area: 1 / 2; }
.system-process-glyph--decide b:nth-child(2) { grid-area: 2 / 2; }
.system-process-glyph--decide b:nth-child(3) { grid-area: 3 / 1; }
.system-process-glyph--decide b:nth-child(4) { grid-area: 3 / 2 / 4 / 4; }
.system-process-glyph--decide b:nth-child(5) { grid-area: 4 / 4; }

.system-process-glyph--document b:nth-child(1) { grid-area: 1 / 1 / 2 / 5; }
.system-process-glyph--document b:nth-child(2) { grid-area: 2 / 1 / 3 / 4; }
.system-process-glyph--document b:nth-child(3) { grid-area: 3 / 1 / 4 / 5; }
.system-process-glyph--document b:nth-child(4) { grid-area: 4 / 1 / 5 / 3; }
.system-process-glyph--document b:nth-child(5) { grid-area: 4 / 4; }

.system-process-glyph--build b:nth-child(1) { grid-area: 4 / 1; }
.system-process-glyph--build b:nth-child(2) { grid-area: 3 / 2; }
.system-process-glyph--build b:nth-child(3) { grid-area: 2 / 3; }
.system-process-glyph--build b:nth-child(4) { grid-area: 1 / 4; }
.system-process-glyph--build b:nth-child(5) { grid-area: 4 / 4; }

.system-process-glyph--check b:nth-child(1) { grid-area: 3 / 1; }
.system-process-glyph--check b:nth-child(2) { grid-area: 4 / 2; }
.system-process-glyph--check b:nth-child(3) { grid-area: 3 / 3; }
.system-process-glyph--check b:nth-child(4) { grid-area: 2 / 4; }
.system-process-glyph--check b:nth-child(5) { grid-area: 1 / 4; }

.system-governance-flow__tabs button[aria-selected="true"] .system-process-glyph {
  color: #fff;
}

.system-governance-flow__panel {
  min-height: 31rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.46fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  align-content: end;
  padding: clamp(2rem, 6vw, 5rem);
  background: var(--paper);
  color: var(--ink);
}

.system-governance-flow__panel > p:first-child {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--blue-dark);
  font: 700 0.68rem var(--font-mono);
}

.system-governance-flow__panel h3 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(2.15rem, 4vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.system-governance-flow__panel > p:not(:first-child) {
  max-width: 40rem;
  margin: 0;
  align-self: end;
  color: var(--muted);
}

.system-governance-flow__panel dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.system-governance-flow__panel dl div {
  min-height: 8.5rem;
  padding: 1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-governance-flow__panel dt {
  margin-bottom: 0.55rem;
  color: var(--blue-dark);
  font-weight: 900;
}

.system-governance-flow__panel dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.system-decision-record {
  max-width: var(--shell);
  margin: clamp(4rem, 8vw, 8rem) auto 0;
  background: var(--paper);
  color: var(--ink);
}

.system-decision-record > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.28fr);
  background: var(--blue);
  color: #fff;
}

.system-decision-record > header > div {
  padding: clamp(2rem, 5vw, 4.5rem);
}

.system-decision-record > header > div > span,
.system-decision-record__example > span,
.system-decision-record > footer > span {
  font: 700 0.68rem var(--font-mono);
  letter-spacing: 0.025em;
}

.system-decision-record > header h3 {
  max-width: 20ch;
  margin: 1.25rem 0 0;
  font-size: clamp(2.15rem, 4.3vw, 4.35rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-wrap: balance;
}

.system-decision-record > header p {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.82);
}

.system-decision-record > header aside {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-content: space-between;
  overflow: hidden;
  padding: 1.5rem;
  background: var(--orange-surface);
  color: #fff;
}

.system-decision-record > header aside > span {
  font: 700 0.65rem var(--font-mono);
}

.system-decision-record > header aside > strong {
  align-self: end;
  font-size: clamp(1.45rem, 2.8vw, 2.5rem);
  line-height: 1;
}

.system-decision-record > header aside > i {
  width: 7rem;
  height: 7rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.35rem;
  align-self: center;
  justify-self: center;
}

.system-decision-record > header aside > i b {
  background: #fff;
}

.system-decision-record > header aside > i b:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
.system-decision-record > header aside > i b:nth-child(2) { grid-area: 2 / 2; }
.system-decision-record > header aside > i b:nth-child(3) { grid-area: 2 / 4; }
.system-decision-record > header aside > i b:nth-child(4) { grid-area: 3 / 1 / 4 / 4; }
.system-decision-record > header aside > i b:nth-child(5) { grid-area: 4 / 2; }
.system-decision-record > header aside > i b:nth-child(6) { grid-area: 4 / 4; }

.system-decision-record__example {
  display: grid;
  grid-template-columns: minmax(10rem, 0.26fr) minmax(18rem, 0.5fr) minmax(18rem, 0.58fr);
  gap: 2rem;
  align-items: start;
  padding: 2rem clamp(1.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--ink);
}

.system-decision-record__example > span {
  color: var(--blue-dark);
}

.system-decision-record__example h4 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.system-decision-record__example p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.system-decision-record > ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--ink);
  list-style: none;
}

.system-decision-record > ol > li {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.system-decision-record details {
  min-height: 100%;
}

.system-decision-record summary {
  min-height: 10.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  align-content: center;
  padding: 1.5rem;
  cursor: pointer;
  list-style: none;
}

.system-decision-record summary::-webkit-details-marker {
  display: none;
}

.system-decision-record summary > span {
  grid-row: 1 / 3;
  color: var(--blue-dark);
  font: 700 0.68rem var(--font-mono);
}

.system-decision-record summary > strong {
  font-size: 1.12rem;
}

.system-decision-record summary > small {
  color: var(--muted);
  font-size: 0.78rem;
}

.system-decision-record summary > b {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--blue-dark);
  font-size: 1.65rem;
  font-weight: 400;
  transition: transform var(--duration-medium) var(--ease-out);
}

.system-decision-record details[open] summary {
  background: var(--blue-soft);
}

.system-decision-record details[open] summary > b {
  transform: rotate(45deg);
}

.system-decision-record details > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--ink);
  background: var(--surface);
}

.system-decision-record details > div p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.system-decision-record details > div strong {
  color: var(--ink);
}

.system-decision-record code {
  color: var(--blue-dark);
  font: 700 0.74rem var(--font-mono);
}

.system-decision-record > footer {
  display: grid;
  grid-template-columns: minmax(8rem, 0.2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: baseline;
  padding: 1.5rem clamp(1.5rem, 5vw, 4.5rem);
  background: var(--surface-muted);
}

.system-decision-record > footer > span {
  color: var(--blue-dark);
}

.system-decision-record > footer p {
  max-width: 55rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.system-decision-record > footer strong {
  color: var(--ink);
}

.system-closing {
  display: flex;
  gap: 3rem;
  align-items: end;
  justify-content: space-between;
  padding: clamp(4rem, 8vw, 8rem) var(--page-pad);
  background: var(--orange-surface);
  color: #fff;
}

.system-closing > div {
  display: grid;
  gap: 1rem;
}

.system-closing p {
  max-width: 28ch;
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-wrap: balance;
}

.system-closing__brand {
  display: inline-flex;
  align-items: baseline;
  padding: 1.1rem 1.35rem;
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.system-closing__brand i {
  color: var(--blue);
  font-style: normal;
}

.system-closing__brand:is(:hover, :focus-visible) {
  transform: translate(3px, -3px);
  background: #fff;
}

@media (max-width: 68rem) {
  .system-hero {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.7fr);
  }

  .system-section__header {
    grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 1fr);
  }

  .system-section__header > p:last-child {
    grid-column: 2;
  }

  .system-research-basis {
    grid-template-columns: 1fr;
  }

  .system-research-basis > div {
    min-height: 12rem;
  }

  .system-evidence-list > li {
    grid-template-columns: minmax(7rem, 0.22fr) minmax(0, 1fr);
  }

  .system-evidence-list dl {
    grid-column: 2;
  }

  .system-principle-list li {
    grid-template-columns: minmax(6rem, 0.25fr) minmax(0, 1fr);
  }

  .system-principle-list li > p {
    grid-column: 2;
  }

  .system-foundations,
  .system-layout,
  .system-access,
  .system-boundaries {
    grid-template-columns: 1fr;
  }

  .system-palette {
    border-bottom: 0;
  }

  .system-layout-map {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .system-component-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-component-strip section:last-child {
    grid-column: 1 / -1;
  }

  .system-dialogue > header {
    grid-template-columns: minmax(8rem, 0.25fr) minmax(0, 1fr);
  }

  .system-dialogue > header p {
    grid-column: 2;
  }

  .system-error-preview {
    grid-template-columns: 1fr;
  }

  .system-error-preview__wait {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.58);
  }

  .system-focus-flow .system-access__intro {
    grid-template-columns: 1fr;
  }

  .system-focus-flow .system-access__intro aside {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1.5rem;
  }

  .system-focus-flow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-focus-flow li {
    min-height: 13rem;
  }

  .system-focus-flow li:not(:last-child)::after {
    display: none;
  }

  .system-focus-flow li:last-child {
    grid-column: 1 / -1;
    min-height: 13rem;
  }

  .system-quality-rules li {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .system-quality-rules li > small {
    grid-column: 2;
  }

  .system-governance-flow__tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .system-governance-flow__tabs button {
    grid-column: span 2;
  }

  .system-governance-flow__tabs button:nth-child(n + 4) {
    grid-column: span 3;
  }

  .system-governance-flow__panel {
    grid-template-columns: 1fr;
  }

  .system-governance-flow__panel > p:first-child,
  .system-governance-flow__panel dl {
    grid-column: auto;
  }

  .system-decision-record__example {
    grid-template-columns: minmax(10rem, 0.3fr) minmax(0, 1fr);
  }

  .system-decision-record__example > p {
    grid-column: 2;
  }
}

@media (max-width: 54rem) {
  .system-hero {
    grid-template-columns: 1fr;
  }

  .system-method-figure {
    min-height: 35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 0;
  }

  .system-trace__panel {
    grid-template-columns: 1fr;
  }

  .system-trace__panel dl {
    grid-column: auto;
  }

  .system-responsive {
    grid-template-columns: 1fr;
  }

  .system-responsive article {
    min-height: 17rem;
  }

  .system-device {
    width: min(100%, 28rem);
  }

  .system-device--mid {
    width: min(70%, 20rem);
  }

  .system-device--narrow {
    width: min(38%, 11rem);
  }

  .system-state-lab__tabs {
    display: flex;
    overflow-x: auto;
  }

  .system-state-lab__tabs button {
    min-width: 9rem;
    flex: 1 0 auto;
  }

  .system-toast-lab {
    grid-template-columns: 1fr;
  }

  .system-error-preview ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-error-preview li:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.58);
  }

  .system-error-preview li:nth-child(even) {
    border-right: 0;
  }

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

@media (max-width: 44rem) {
  .system-hero__copy {
    min-height: calc(100svh - var(--topbar));
    padding-top: 4rem;
  }

  .system-hero h1 {
    font-size: clamp(3rem, 15vw, 4.2rem);
  }

  .system-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .system-hero__actions > * {
    width: 100%;
    justify-content: center;
  }

  .system-method-frame {
    margin: 1.25rem;
  }

  .system-method-frame > div {
    min-height: 9rem;
    padding: 1rem;
  }

  .system-method-frame > i {
    right: -0.5rem;
    width: 4.5rem;
    height: 5rem;
  }

  .system-section {
    padding-block: 5rem;
  }

  .system-section__header {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .system-section__header > p:last-child {
    grid-column: auto;
  }

  .system-section__header h2 {
    font-size: clamp(2.5rem, 12vw, 3.4rem);
  }

  #governance .system-section__header h2 {
    max-width: none;
    font-size: clamp(2.15rem, 9vw, 2.55rem);
  }

  .system-trace__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-research-basis > div {
    min-height: 0;
  }

  .system-evidence-list > li {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .system-evidence-list dl {
    grid-column: auto;
  }

  .system-trace__panel {
    min-height: 36rem;
    padding: 1.5rem;
  }

  .system-trace__panel h3 {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .system-trace__panel dl {
    grid-template-columns: 1fr;
  }

  .system-principle-list li {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .system-principle-list li > p {
    grid-column: auto;
  }

  .system-color {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  }

  .system-color > span {
    width: 3.25rem;
    height: 3.25rem;
  }

  .system-color p {
    grid-column: 2 / -1;
  }

  .system-color em {
    align-self: start;
    font-size: 0.58rem;
  }

  .system-type__display {
    min-height: 18rem;
  }

  .system-type__families,
  .system-type__rules {
    grid-template-columns: 1fr;
  }

  .system-type__families article,
  .system-type__rules div {
    border-right: 0;
  }

  .system-type__display strong {
    font-size: clamp(2.3rem, 11vw, 3.4rem);
  }

  .system-layout-map {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .system-layout-map__main {
    padding: 1rem;
  }

  .system-layout-map__main b {
    font-size: 3rem;
  }

  .system-layout-map__main i {
    width: 3rem;
    height: 3rem;
  }

  .system-component-strip {
    grid-template-columns: 1fr;
  }

  .system-component-strip section:last-child {
    grid-column: auto;
  }

  .system-dialogue > header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .system-dialogue > header p {
    grid-column: auto;
  }

  .system-toast-lab__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .system-error-preview ol {
    grid-template-columns: 1fr;
  }

  .system-error-preview li,
  .system-error-preview li:nth-child(3n),
  .system-error-preview li:nth-child(even) {
    border-right: 0;
  }

  .model-chain {
    justify-content: start;
    padding: 2rem 1.25rem;
  }

  .system-lesson-anatomy li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .system-focus-flow ol {
    grid-template-columns: 1fr;
  }

  .system-focus-flow li,
  .system-focus-flow li:last-child {
    grid-column: auto;
    min-height: 0;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.75rem 1rem;
  }

  .system-focus-flow li > span {
    grid-row: 1 / 3;
  }

  .system-focus-flow li > small {
    grid-column: 2;
  }

  .system-focus-flow__legend {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .system-focus-flow__legend strong,
  .system-focus-flow__legend span:last-child {
    text-align: left;
  }

  .system-focus-flow__result {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .system-quality-rules li {
    gap: 1rem;
    padding: 1rem;
  }

  .system-quality-rules__result {
    grid-template-columns: 1fr;
  }

  .system-quality-rules__result span {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  }

  .system-governance-flow__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-governance-flow__tabs button,
  .system-governance-flow__tabs button:nth-child(n + 4) {
    grid-column: auto;
  }

  .system-governance-flow__tabs button:last-child {
    grid-column: 1 / -1;
    min-height: 9rem;
  }

  .system-governance-flow__panel dl {
    grid-template-columns: 1fr;
  }

  .system-governance-flow__panel {
    min-height: 0;
    padding: 1.5rem;
  }

  .system-governance-flow__panel h3 {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .system-decision-record > header {
    grid-template-columns: 1fr;
  }

  .system-decision-record > header aside {
    min-height: 12rem;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .system-decision-record > header aside > strong {
    align-self: start;
  }

  .system-decision-record > header aside > i {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 8rem;
    height: 8rem;
  }

  .system-decision-record__example,
  .system-decision-record > ol,
  .system-decision-record > footer {
    grid-template-columns: 1fr;
  }

  .system-decision-record__example > p {
    grid-column: auto;
  }

  .system-decision-record details > div {
    grid-template-columns: 1fr;
  }

  .system-decision-record > footer {
    gap: 0.75rem;
  }

  .system-closing {
    align-items: flex-start;
    flex-direction: column;
  }

  .system-closing p {
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }

  .system-message__actions,
  .error-state__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .system-message__actions > *,
  .error-state__actions > * {
    width: 100%;
  }

  .error-state__code {
    min-height: 10rem;
  }

  .toast-region {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-method-frame > div,
  .system-method-frame > i,
  .system-toast {
    transition: none;
  }

  .protocol-puzzle i {
    transition: none;
  }
}

@media (max-width: 54rem) {
  .knowledge-entry {
    grid-template-columns: 6rem minmax(0, 1fr) 2rem;
  }

  .knowledge-entry dl {
    grid-column: 2;
  }

  .knowledge-entry > i {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .knowledge-hero > div {
    grid-template-columns: 1fr;
  }

  .knowledge-hero aside {
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  .knowledge-content__header {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .knowledge-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.45fr);
  }

  .knowledge-toolbar > p {
    grid-column: 1 / -1;
    min-height: 2.5rem;
    place-items: center start;
  }

  .knowledge-group {
    grid-template-columns: 12rem minmax(0, 1fr);
  }

  .knowledge-resource {
    grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr);
  }

  .knowledge-resource__source {
    grid-column: 2;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }

  .knowledge-resource__source a {
    grid-column: 1 / -1;
  }

  .knowledge-tool,
  .knowledge-skill {
    grid-template-columns: minmax(11rem, 0.38fr) minmax(0, 1fr);
  }

  .knowledge-tool .knowledge-practical,
  .knowledge-tool__footer,
  .knowledge-skill dl {
    grid-column: 2;
  }

  .knowledge-tool__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .level-options {
    grid-template-columns: 1fr;
  }

  .level-options label > span {
    min-height: 8rem;
  }

  .assessment-latest {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .assessment-latest .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 44rem) {
  .assessment {
    margin-inline: calc(var(--page-pad) * -1);
    border-right: 0;
    border-left: 0;
  }

  .assessment-header h2 {
    font-size: clamp(2.5rem, 14vw, 3.8rem);
  }

  .assessment-meta {
    display: grid;
    gap: 0.45rem;
  }

  .assessment-latest,
  .assessment-progress-note {
    grid-template-columns: 1fr;
  }

  .assessment-setup__actions,
  .assessment-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .assessment-setup__actions .button,
  .assessment-submit .button {
    width: 100%;
  }

  .assessment-question legend {
    grid-template-columns: 1.8rem minmax(0, 1fr);
  }

  .assessment-options,
  .assessment-feedback {
    margin-left: 0;
  }

  .assessment-options label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .assessment-options label.is-correct::after,
  .assessment-options label.is-wrong::after {
    grid-column: 2;
  }

  .assessment-feedback {
    grid-template-columns: 1fr;
  }

  .assessment-feedback button {
    width: 100%;
  }

  .assessment-result {
    grid-template-columns: 1fr;
  }

  .assessment-result > div:nth-child(3),
  .assessment-save-warning {
    grid-column: auto;
  }

  .assessment-result > div:nth-child(3) {
    align-items: stretch;
    flex-direction: column;
  }

  .assessment-history li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .assessment-history time {
    grid-column: 1 / -1;
  }

  .explanation-dialog {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    border-right: 0;
    border-left: 0;
  }

  .explanation-dialog__surface {
    max-height: 100dvh;
  }

  .explanation-sources a {
    flex-direction: column;
  }
}

@media (max-width: 54rem) {
  .visual-artifact--flow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .visual-artifact--flow li + li {
    border-left: 1px solid #4a4c4d;
  }

  .visual-artifact--flow li:not(:last-child)::after {
    display: none;
  }

  .visual-artifact--tables > section {
    grid-template-columns: 1fr;
  }

  .visual-artifact--tables table {
    table-layout: fixed;
  }
}

@media (max-width: 44rem) {
  .lesson-header {
    padding-left: 0.85rem;
  }

  .lesson-header__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: stretch;
  }

  .lesson-header__info {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    background: var(--surface-muted);
  }

  .lesson-header__module,
  .lesson-header__lesson {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    background: transparent;
    color: var(--muted);
    font: 700 0.65rem/1 var(--font-mono);
  }

  .lesson-header__module {
    position: relative;
    border: 0;
    text-align: left;
    appearance: none;
    touch-action: manipulation;
  }

  .lesson-header__module > [data-module-title-label] {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lesson-header__module-tooltip {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 100%;
    max-width: min(28rem, calc(100vw - 3rem));
    min-height: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    line-height: 1.35;
    white-space: normal;
  }

  .lesson-header__module-tooltip[hidden] {
    display: none;
  }

  .lesson-header__lesson {
    gap: 0.35rem;
    white-space: nowrap;
  }

  .lesson-header__lesson > span {
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .lesson-header__lesson > i {
    display: inline;
    color: var(--blue);
    font-style: normal;
  }

  .lesson-header__meta .lesson-glossary-button {
    width: auto;
    justify-self: start;
  }

  .lesson-header__meta .lesson-completion-toggle {
    width: 100%;
  }

  .lesson-content > h2 {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.45rem;
  }

  .editorial-note {
    grid-template-columns: 1fr;
  }

  .lesson-glossary-button {
    min-height: 2.75rem;
  }

  .knowledge-entry {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: 1.25rem;
    min-height: 0;
    padding-block: 2.5rem;
  }

  .knowledge-entry__code,
  .knowledge-entry dl {
    grid-column: 1;
  }

  .knowledge-entry > i {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .knowledge-entry h2 {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
  }

  .knowledge-entry dl {
    width: 100%;
  }

  .knowledge-hero {
    padding-top: 1.5rem;
  }

  .knowledge-hero header {
    padding: 2.5rem 0 3.25rem;
  }

  .knowledge-hero h1 {
    max-width: none;
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .knowledge-hero aside {
    padding: 1.25rem;
  }

  .knowledge-tabs-shell {
    padding-inline: 0;
  }

  .knowledge-tabs a {
    min-width: 11rem;
    min-height: 3.75rem;
  }

  .knowledge-tabs-arrow {
    width: 3rem;
    min-height: 3.75rem;
  }

  .knowledge-content {
    padding-top: 3.5rem;
  }

  .knowledge-content__header h2 {
    font-size: clamp(2.5rem, 13vw, 3.8rem);
  }

  .knowledge-toolbar {
    grid-template-columns: 1fr;
  }

  .knowledge-toolbar > p {
    grid-column: auto;
  }

  .knowledge-group {
    grid-template-columns: 1fr;
  }

  .knowledge-group > header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .knowledge-group > header > span {
    justify-items: end;
    text-align: right;
  }

  .knowledge-glossary-item summary {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    gap: 0.65rem;
  }

  .knowledge-glossary-item summary .knowledge-item-index {
    display: none;
  }

  .knowledge-glossary-item summary .glossary-badge {
    grid-column: 1;
    justify-self: start;
  }

  .knowledge-glossary-item summary .knowledge-toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .knowledge-glossary-item__content {
    padding: 0 3.5rem 1.25rem 1rem;
  }

  .knowledge-resource {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .knowledge-resource__meta {
    display: flex;
    flex-wrap: wrap;
  }

  .knowledge-resource__source {
    grid-column: auto;
  }

  .knowledge-tool,
  .knowledge-skill {
    grid-template-columns: 1fr;
  }

  .knowledge-tool .knowledge-practical,
  .knowledge-tool__footer,
  .knowledge-skill dl {
    grid-column: auto;
  }

  .knowledge-skill dl div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .glossary-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-right: 0;
    border-left: 0;
  }

  .glossary-dialog__surface {
    height: 100dvh;
    max-height: 100dvh;
  }

  .glossary-dialog__header {
    grid-template-columns: minmax(0, 1fr) auto 2.5rem;
    gap: 0.65rem;
    min-height: 4.25rem;
    padding: 0.6rem 1rem;
  }

  .glossary-dialog__header h2 {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .glossary-dialog__header > div > span {
    font-size: 0.65rem;
  }

  .glossary-dialog__full-link {
    font-size: 0.75rem;
  }

  .glossary-dialog__header .dialog-close {
    width: 2.5rem;
    height: 2.5rem;
  }

  .glossary-dialog__tools {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
  }

  .glossary-dialog__tools p {
    justify-self: end;
  }

  .glossary-search-status {
    padding-inline: 1.25rem;
  }

  .glossary-section__header {
    gap: 0.75rem;
    padding: 1.25rem;
  }

  .glossary-list--current {
    grid-template-columns: 1fr;
  }

  .glossary-term,
  .glossary-term:nth-child(even) {
    border-right: 0;
  }

  .glossary-archive-term summary {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
  }

  .glossary-archive-term summary .glossary-badge {
    grid-column: 1;
    justify-self: start;
  }

  .glossary-archive-term summary strong {
    grid-column: 1;
  }

  .glossary-archive-term__toggle {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .glossary-archive-term__content {
    padding: 0 1.25rem 1.25rem;
  }

  .visual-example {
    margin-inline: calc(var(--page-pad) * -1);
    border-right: 0;
    border-left: 0;
  }

  .practice-lab {
    margin-inline: calc(var(--page-pad) * -1);
    border-right: 0;
    border-left: 0;
  }

  .practice-trainer__action .button {
    width: 100%;
  }

  .visual-example__header h2 {
    font-size: 2rem;
  }

  .visual-example__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-example__tabs button {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }

  .visual-example__tabs button:nth-child(even) {
    border-right: 0;
  }

  .visual-example__note {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .visual-artifact {
    min-height: 16rem;
  }

  .visual-artifact--comparison {
    grid-template-columns: 1fr;
  }

  .visual-artifact--comparison > div {
    min-height: 9rem;
  }

  .visual-artifact--comparison > i {
    transform: rotate(90deg);
    justify-self: center;
  }

  .visual-artifact--comparison > p {
    grid-column: auto;
  }

  .visual-artifact--matrix {
    padding: 2.5rem 1rem;
  }

  .visual-artifact--matrix > div {
    grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
    width: 100%;
  }

  .visual-artifact--matrix > div span {
    min-height: 6.5rem;
  }

  .visual-artifact--flow {
    padding: 1rem;
  }

  .visual-artifact--diagnostic {
    padding: 0.75rem;
  }

  .visual-artifact--diagnostic > div,
  .visual-artifact--diagnostic footer {
    grid-template-columns: 1fr;
  }

  .visual-artifact--diagnostic section {
    border-right: 0;
    border-bottom: 1px solid #4a4c4d;
  }

  .visual-artifact--diagnostic ol {
    grid-template-columns: 1fr;
  }

  .visual-artifact--flow li {
    min-height: 6.5rem;
  }

  .visual-artifact--request > header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .visual-artifact--request > header strong {
    grid-column: 1 / -1;
  }

  .visual-artifact--report {
    grid-template-columns: 1fr;
  }

  .visual-artifact--report header strong {
    font-size: 4rem;
  }

  .visual-artifact--report p {
    justify-self: start;
  }
}