@layer components {
.tx-main {

  --tx-read: 680px;

  --tx-fig-min: 1120px;

  --tx-sec-gap: var(--space-12);

  --tx-lit: color-mix(in srgb, var(--accent-color) 62%, #ffffff);
  --tx-lit-soft: color-mix(in srgb, var(--accent-color) 34%, transparent);
  --tx-line: var(--border-strong);

  --tx-edge: color-mix(in srgb, #ffffff 16%, transparent);
  --tx-ink: color-mix(in srgb, #ffffff 24%, transparent);
  --tx-ink-dim: color-mix(in srgb, #ffffff 17%, transparent);
  --tx-grid: color-mix(in srgb, #ffffff 16%, transparent);

  --tx-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.tx-main > section {
  padding-top: var(--tx-sec-gap);
  padding-bottom: 0;
}

.tx-main > section:last-of-type { padding-bottom: var(--tx-sec-gap); }

.tx-main .tx-top { padding-top: var(--stack-lg); }

@media (max-width: 768px) {
  .tx-main { --tx-sec-gap: var(--space-10); }
}

.tx-main > section.tx-part { padding-top: 0; }
.tx-main > section.tx-tail { padding-bottom: var(--tx-sec-gap); }

.tx-code {
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--bg-tertiary);
  font-family: var(--tx-mono);
  font-size: 0.8125em;
  letter-spacing: 0;
  color: var(--text-primary);
}

.tx-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--tx-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tx-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-10);
  align-items: baseline;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-light);
}

.tx-sec-title {
  margin: 0;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.tx-sec-lede {
  max-width: var(--tx-read);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.tx-sec-lede em { font-style: italic; color: var(--text-primary); }

.tx-note {
  max-width: var(--measure-block);
  margin: var(--space-6) 0 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.tx-note em { font-style: italic; }

.tx-state {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  font-family: var(--tx-mono);
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--text-muted);
}

.tx-state--live {
  border-color: color-mix(in srgb, var(--success-color) 34%, transparent);
  color: var(--success-color);
}

@media (max-width: 1024px) {
  .tx-head { grid-template-columns: 1fr; }
}

.tx-fig {
  margin: var(--space-8) 0 0;
}

.tx-fig-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.tx-fig-scroll > svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1120px) {
  .tx-fig-scroll > svg { min-width: var(--tx-fig-min); }
}

.tx-fig-cap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  max-width: var(--measure-title);
  margin: var(--space-5) 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.tx-fig-cap-lead {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.tx-fig-cap > span:last-child { flex: 1 1 380px; }

.tx-fig-cap em { font-style: italic; color: var(--text-secondary); }

.tx-main svg text {
  font-family: var(--font-sans);
  fill: var(--text-secondary);
}

.tx-rail {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-10);
  align-items: end;
}

.tx-top-title {
  margin: 0;
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.tx-top-lede {
  max-width: var(--tx-read);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.tx-top-lede em { font-style: italic; color: var(--text-primary); }

.tx-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}
}

@layer components {

.tx-meta-i dt {
  font-family: var(--tx-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tx-meta-i dd {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .tx-rail { grid-template-columns: 1fr; align-items: start; }
  .tx-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .tx-meta { grid-template-columns: 1fr; }
}

.tx-reach { margin-top: var(--space-10); }

.tx-reach-svg .tx-grat {
  stroke: var(--tx-grid);
  stroke-width: 1;
}

.tx-reach-svg .tx-frame {
  fill: var(--bg-tertiary);
  stroke: var(--tx-edge);
  stroke-width: 1;
}

.tx-reach-svg .tx-deg {
  font-family: var(--tx-mono);
  font-size: 10.5px;
  fill: var(--text-muted);
}

.tx-reach-svg .tx-mk-cross {
  stroke: var(--tx-lit);
  stroke-width: 1;
  opacity: 0.95;
}

.tx-reach-svg .tx-mk-ring {
  fill: none;
  stroke: var(--tx-lit);
  stroke-width: 1.25;
  opacity: 0.8;
}

.tx-reach-svg .tx-mk-dot { fill: var(--tx-lit); }

.tx-reach-svg .tx-mk-lead {
  stroke: var(--tx-lit);
  stroke-width: 1;
  opacity: 0.7;
}

.tx-reach-svg .tx-mk-place {
  font-size: 14.5px;
  font-weight: 600;
  fill: var(--text-primary);
}

.tx-reach-svg .tx-mk-cite {
  font-family: var(--tx-mono);
  font-size: 12px;
  fill: var(--tx-lit);
}

.tx-reach-svg .tx-span-bar,
.tx-reach-svg .tx-span-end {
  stroke: var(--tx-line);
  stroke-width: 1;
}

.tx-reach-svg .tx-span-l {
  font-family: var(--tx-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

.tx-surf-svg .tx-surf-n {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text-primary);
}

.tx-surf-svg .tx-surf-f {
  fill: var(--bg-tertiary);
  stroke: var(--tx-edge);
  stroke-width: 1;
}

.tx-surf-svg .tx-noband {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 20%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.tx-surf-svg .tx-rule {
  stroke: var(--tx-edge);
  stroke-width: 1;
}

.tx-surf-svg .tx-bub { fill: var(--tx-ink); }

.tx-surf-svg .tx-bub--dim { fill: var(--tx-ink-dim); }

.tx-surf-svg .tx-lit { fill: var(--tx-lit); }
.tx-surf-svg .tx-lit--dim { fill: var(--tx-lit-soft); }
.tx-surf-svg .tx-head.tx-lit { fill: color-mix(in srgb, var(--accent-color) 66%, transparent); }

.tx-surf-svg .tx-knock { fill: var(--bg-primary); opacity: 0.72; }
.tx-surf-svg .tx-knock--dim { opacity: 0.45; }

.tx-surf-svg .tx-brk-bar,
.tx-surf-svg .tx-brk-end {
  stroke: var(--tx-line);
  stroke-width: 1;
}

.tx-turn-svg .tx-brk-bar,
.tx-turn-svg .tx-brk-end {
  stroke: var(--tx-lit);
  stroke-width: 1.5;
  opacity: 0.8;
}

.tx-surf-svg .tx-brk-l {
  font-family: var(--tx-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--tx-lit);
}

.tx-turn-svg .tx-axis {
  stroke: var(--tx-line);
  stroke-width: 1.5;
}

.tx-turn-svg .tx-axis-h { fill: var(--tx-line); }

.tx-turn-svg .tx-stem {
  stroke: var(--tx-edge);
  stroke-width: 1;
}

.tx-turn-svg .tx-node { fill: var(--border-strong); }

.tx-turn-svg .tx-blk {
  fill: var(--bg-tertiary);
  stroke: var(--tx-edge);
  stroke-width: 1;
}

.tx-turn-svg .tx-blk-n {
  font-family: var(--tx-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  fill: var(--text-secondary);
}

.tx-turn-svg .tx-blk-b { fill: var(--tx-ink); }
.tx-turn-svg .tx-blk-b--dim { fill: var(--tx-ink-dim); }

.tx-turn-svg .tx-turn--ai .tx-cap { fill: var(--tx-lit); }
.tx-turn-svg .tx-turn--human .tx-cap { fill: var(--text-primary); }

.tx-turn-svg .tx-rail-k {
  font-family: var(--tx-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tx-turn-svg .tx-rail-k--ai { fill: var(--tx-lit); }
.tx-turn-svg .tx-rail-k--hu { fill: var(--text-primary); }

.tx-turn-svg .tx-brk-l {
  font-family: var(--tx-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--text-secondary);
}

.tx-turn-svg .tx-hand {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.tx-turn-svg .tx-hand-l {
  font-family: var(--tx-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--text-primary);
}

.tx-turn-svg .tx-ask-d {
  fill: var(--bg-primary);
  stroke: var(--text-primary);
  stroke-width: 1.5;
}

.tx-turn-svg .tx-ask-lead {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 32%, transparent);
  stroke-width: 1;
}

.tx-turn-svg .tx-ask-l {
  font-size: 12.5px;
  fill: var(--text-secondary);
}

.tx-turn-svg .tx-chip-s {
  stroke: color-mix(in srgb, var(--success-color) 55%, transparent);
  stroke-width: 1;
}
}

@layer components {

.tx-main svg .tx-chip { fill: none; stroke-width: 1; }
.tx-main svg .tx-chip--live { stroke: color-mix(in srgb, var(--success-color) 40%, transparent); }
.tx-main svg .tx-chip--design { stroke: var(--border-strong); }

.tx-main svg .tx-chip-t {
  font-family: var(--tx-mono);
  font-size: 10.5px;
  fill: var(--success-color);
}

.tx-main svg .tx-chip-t--design { fill: var(--text-muted); }

.tx-map-svg .tx-col-k {
  font-family: var(--tx-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

.tx-map-svg .tx-edge {
  fill: none;
  stroke-width: 1.25;
}

.tx-map-svg .tx-edge--proactive { stroke: color-mix(in srgb, var(--accent-color) 46%, transparent); }
.tx-map-svg .tx-edge--onRequest { stroke: color-mix(in srgb, var(--success-color) 40%, transparent); }

.tx-map-svg .tx-duty-c {
  fill: var(--bg-tertiary);
  stroke: var(--tx-edge);
  stroke-width: 1;
}

.tx-map-svg .tx-duty--proactive .tx-duty-c { stroke: color-mix(in srgb, var(--accent-color) 52%, transparent); }
.tx-map-svg .tx-duty--onRequest .tx-duty-c { stroke: color-mix(in srgb, var(--success-color) 46%, transparent); }

.tx-map-svg .tx-duty-l {
  font-family: var(--tx-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-primary);
}

.tx-map-svg .tx-duty-s {
  font-size: 12px;
  fill: var(--text-muted);
}

.tx-map-svg .tx-rn-w,
.tx-map-svg .tx-mn-w {
  font-family: var(--tx-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

.tx-map-svg .tx-rn-n,
.tx-map-svg .tx-mn-n {
  font-size: 15px;
  font-weight: 600;
  fill: var(--text-primary);
}

.tx-map-svg .tx-rn-d { fill: var(--tx-lit); }
.tx-map-svg .tx-mn-d { fill: var(--text-primary); }

.tx-tablewrap {
  margin: var(--space-8) 0 0;
  overflow-x: auto;
  border: 1px solid var(--tx-edge);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.tx-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  text-align: left;
}

.tx-table thead th {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--tx-edge);
  font-family: var(--tx-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tx-table tbody tr + tr th,
.tx-table tbody tr + tr td { border-top: 1px solid var(--border-subtle); }

.tx-table tbody th,
.tx-table tbody td {
  padding: var(--space-5);
  vertical-align: top;
  font-weight: 400;
}

.tx-td-rule { width: 24%; }
.tx-td-state { width: 14%; white-space: nowrap; }

.tx-rule-n {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
}

.tx-rule-w {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--tx-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tx-td-req {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.tx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-4) 0 0;
}

.tx-legend-i {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tx-legend-i dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.tx-rows { margin: var(--space-8) 0 0; }

.tx-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
}

.tx-row:last-child { border-bottom: 1px solid var(--border-subtle); }

.tx-row-k {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
}

.tx-row-v {
  max-width: var(--tx-read);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.tx-row-v em { font-style: italic; }

@media (max-width: 900px) {
  .tx-row { grid-template-columns: 1fr; gap: var(--space-3); }
}

.tx-tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: var(--space-8) 0 0;
}

.tx-track {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-strong);
}

.tx-track-n {
  display: block;
  font-family: var(--tx-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--tx-lit);
}

.tx-track-l {
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.tx-track-b {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.tx-prose-close {
  max-width: var(--tx-read);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-primary);
}

@media (max-width: 1024px) {
  .tx-tracks { grid-template-columns: 1fr; gap: var(--space-6); }
}
}

@layer components {

.tx-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10);
  margin: var(--space-8) 0 0;
}

.tx-quote {
  margin: 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--border-strong);
}

.tx-quote-hd {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tx-quote-who {
  font-family: var(--tx-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tx-quote-q {
  margin: 0;
  max-width: var(--tx-read);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.tx-quote-q::before { content: '\201C'; }
.tx-quote-q::after  { content: '\201D'; }

.tx-quote figcaption { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .tx-quotes { grid-template-columns: 1fr; gap: var(--space-6); }
}

.tx-qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-10);
  margin: var(--space-6) 0 0;
}

.tx-qa-col { border-top: 1px solid var(--border-subtle); }

.tx-qa-i { border-bottom: 1px solid var(--border-subtle); }

.tx-qa-q {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary);
}

.tx-qa-q::-webkit-details-marker { display: none; }

.tx-qa-q::before {
  content: '+';
  flex: 0 0 auto;
  width: 1ch;
  font-family: var(--tx-mono);
  font-weight: 400;
  color: var(--text-muted);
}

.tx-qa-i[open] > .tx-qa-q::before { content: '\2212'; }
.tx-qa-i[open] > .tx-qa-q { padding-bottom: var(--space-3); }

.tx-qa-a { padding: 0 0 var(--space-5) calc(1ch + var(--space-4)); }

.tx-qa-a p {
  max-width: var(--tx-read);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.tx-qa-a em { font-style: italic; }

@media (any-hover: hover) {
  .tx-qa-q:hover { color: var(--accent-ink); }
  .tx-qa-q:hover::before { color: var(--accent-ink); }
}

.tx-qa-q:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (max-width: 900px) {
  .tx-qa { grid-template-columns: 1fr; }
  .tx-qa-col + .tx-qa-col { border-top: 0; }
}

@media (max-width: 560px) {
  .tx-sec-title { font-size: 1.25rem; }
  .tx-fig { margin-top: var(--space-6); }
  .tx-tablewrap, .tx-tracks, .tx-rows { margin-top: var(--space-6); }
}
}