:root {
  color-scheme: light;
  --page: #f3f7ff;
  --panel: #ffffff;
  --surface: #e4edff;
  --tint-a: #e4edff;
  --tint-b: #e5f0f6;
  --tint-c: #edf0ff;
  --ink: #142e61;
  --muted: #46618d;
  --accent: #1644b8;
  --accent-hover: #10358f;
  --on-accent: #ffffff;
  --divider: #adc1e7;
  --selection: #c3d5ff;
  --control-border: #6680ac;
  --success: #215c47;
  --on-success: #ffffff;
  --note: #fff0ad;
  --on-note: #43371b;
  --warning: #79510a;
  --danger: #a23148;
  --info: #1644b8;
  --offset-shadow: 5px 5px 0 #1644b817;
  --grid-line: #1644b80b;
  --body-font: 'Manrope', 'Segoe UI', sans-serif;
  --display-font: 'JetBrains Mono', Consolas, monospace;
  --radius-panel: 8px;
  --radius-control: 4px;
  --specimen-inset: 24px;
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --page: #0c1528;
  --panel: #12213a;
  --surface: #182b48;
  --tint-a: #182b48;
  --tint-b: #17303c;
  --tint-c: #252b4c;
  --ink: #e7f0ff;
  --muted: #aabbda;
  --accent: #8ab7ff;
  --accent-hover: #a9cbff;
  --on-accent: #091d3c;
  --divider: #3b5478;
  --selection: #294879;
  --control-border: #7292c3;
  --success: #9dd6bb;
  --on-success: #14251a;
  --note: #c8d5fa;
  --on-note: #182745;
  --warning: #efd28a;
  --danger: #f2afbd;
  --info: #8ab7ff;
  --offset-shadow: 5px 5px 0 #8ab7ff22;
  --grid-line: #8ab7ff12;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    color-scheme: dark;
    --page: #0c1528;
    --panel: #12213a;
    --surface: #182b48;
    --tint-a: #182b48;
    --tint-b: #17303c;
    --tint-c: #252b4c;
    --ink: #e7f0ff;
    --muted: #aabbda;
    --accent: #8ab7ff;
    --accent-hover: #a9cbff;
    --on-accent: #091d3c;
    --divider: #3b5478;
    --selection: #294879;
    --control-border: #7292c3;
    --success: #9dd6bb;
    --on-success: #14251a;
    --note: #c8d5fa;
    --on-note: #182745;
    --warning: #efd28a;
    --danger: #f2afbd;
    --info: #8ab7ff;
    --offset-shadow: 5px 5px 0 #8ab7ff22;
    --grid-line: #8ab7ff12;
  }
}
:root[data-density="compact"] { --specimen-inset: 16px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background: var(--page); font: 400 1rem/1.6 var(--body-font); }
::selection { background: var(--selection); color: var(--ink); }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display-font); font-weight: 400; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.5rem, 7vw, 4rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); letter-spacing: -.025em; }
h3 { font-size: 1.375rem; letter-spacing: -.015em; }
h4 { font-size: 1.125rem; letter-spacing: -.01em; }
p { overflow-wrap: anywhere; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-hover); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: default; }
input, select { min-width: 0; min-height: 44px; width: 100%; padding: .625rem .75rem; color: var(--ink); background: var(--panel); border: 1px solid var(--control-border); border-radius: var(--radius-control); font-size: 1rem; }
input::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { width: 1.125rem; height: 1.125rem; min-height: auto; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
label { color: var(--ink); font-size: .875rem; font-weight: 600; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
[tabindex="-1"]:focus { outline: 3px solid var(--ink); outline-offset: 5px; }
section, article, [id] { scroll-margin-top: 1.5rem; }
.container { width: min(100% - 3rem, 74rem); margin-inline: auto; }
.skip-link { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 5; padding: .75rem 1rem; color: var(--on-accent); background: var(--accent); border-radius: var(--radius-control); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.5rem; border-bottom: 1px solid var(--divider); }
.atlas-brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.atlas-mark { width: 28px; height: 28px; fill: currentColor; }
.draft-label, .eyebrow, .small-label { font-family: var(--display-font); font-size: .875rem; line-height: 1.6; }
.draft-label { color: var(--muted); }
.eyebrow { color: var(--accent); margin-bottom: .75rem; }
.small-label { color: var(--muted); }
.support { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.preview-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 3rem; padding-block: 3rem 2rem; align-items: start; }
.intro-description { max-width: 52ch; margin-top: 1rem; }
.preview-settings { padding: 1.25rem; border: 1px solid var(--divider); border-radius: var(--radius-panel); background: var(--panel); }
.preference-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.field { display: grid; gap: .375rem; }
.checkbox-label { display: flex; align-items: center; gap: .625rem; min-height: 44px; padding-block: .5rem; font-weight: 400; }
.preview-settings .checkbox-label { margin-top: .75rem; }
.preview-settings .support + .support { margin-top: .25rem; }
.section-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-block: 1rem; border-block: 1px solid var(--divider); }
.section-nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-size: .875rem; }
.section-block { padding-block: 4rem; }
.section-caption { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; }
.section-caption .eyebrow { margin: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 44px; padding: .625rem 1rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); font-size: .875rem; line-height: 1.5; font-weight: 600; text-align: center; text-decoration: none; }
.primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.primary:hover:not(:disabled) { color: var(--on-accent); background: var(--accent-hover); border-color: var(--accent-hover); }
.secondary { color: var(--ink); background: var(--panel); }
.secondary:hover:not(:disabled) { color: var(--ink); background: var(--surface); }
.button:disabled { opacity: 1; }
.button:disabled:not(.button-samples .button) { color: var(--muted); background: var(--surface); border-color: var(--divider); }
.studio-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.studio-wordmark { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-family: var(--display-font); font-size: 1.125rem; }
.studio-wordmark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.studio-wordmark span { flex-basis: 100%; font-family: var(--body-font); font-size: .875rem; color: var(--muted); }
.hero-copy h2 { margin-block: 1.75rem 1.25rem; font-size: clamp(2.8rem, 5.5vw, 5.3rem); line-height: 1.15; letter-spacing: -.025em; }
.hero-copy h2 span { color: var(--accent); }
.hero-description { max-width: 42ch; margin-bottom: 1.5rem; }
.fictional-note { margin-top: .875rem; }
.structure-art { position: relative; border: 1px solid var(--divider); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--offset-shadow); }
.structure-art > svg { display: block; width: 100%; height: auto; }
.art-grid-line { stroke: var(--grid-line); stroke-width: 1; }
.art-construction { stroke: var(--divider); stroke-width: 1; stroke-dasharray: 4 5; }
.art-layer { stroke: var(--accent); stroke-width: 1.5; }
.art-base { fill: var(--tint-b); }
.art-middle { fill: var(--tint-c); }
.art-top { fill: var(--panel); }
.art-interface { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.art-connections { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.art-annotation { stroke: var(--accent); stroke-width: 1; }
.art-annotation circle { fill: var(--panel); }
.art-label { fill: var(--muted); font: 14px var(--display-font); }
.drawing-stamp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .75rem 1rem; border-top: 1px solid var(--divider); color: var(--muted); font: .875rem/1.6 var(--display-font); }
.structure-figure figcaption { margin-top: .75rem; color: var(--muted); font-size: .875rem; }
.studio-principles { display: grid; grid-template-columns: .75fr 1.25fr 1fr; gap: 2rem; align-items: start; margin-block: 4rem; padding-block: 2rem; border-block: 1px solid var(--divider); }
.studio-principles > p:nth-child(2) { font: 400 1.5rem/1.35 var(--display-font); letter-spacing: -.015em; }
.studio-principles > p:nth-child(2) span { color: var(--accent); }
.studio-principles > div p { margin-bottom: .75rem; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .875rem; }
.section-heading { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
.brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.brief-card { min-width: 0; border: 1px solid var(--divider); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--offset-shadow); }
.brief-art { position: relative; background: var(--tint-a); border-bottom: 1px solid var(--divider); border-radius: 7px 7px 0 0; }
.map-art { background: var(--tint-b); }
.review-art { background: var(--tint-c); }
.brief-art svg { display: block; width: 100%; height: auto; }
.art-index { position: absolute; inset-block-start: .75rem; inset-inline-start: 1rem; color: var(--muted); font: .875rem/1.6 var(--display-font); }
.brief-plane { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }
.brief-wire { stroke: var(--accent); stroke-width: 1.5; }
.brief-body { padding: 1.5rem; }
.brief-body h4 { margin-block: .5rem .75rem; }
.brief-body details { margin-top: 1rem; }
summary { min-height: 44px; padding-block: .625rem; color: var(--accent); cursor: pointer; font-size: .875rem; font-weight: 600; }
details p { margin-top: .5rem; }
.workspace { border-top: 1px solid var(--divider); }
.workspace-intro, .specimen-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-bottom: 2rem; }
.workspace-intro > p, .specimen-intro > p { max-width: 58ch; }
.workspace-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; background: var(--panel); border: 1px solid var(--divider); border-radius: var(--radius-panel); }
.workspace-toolbar .field { width: 12rem; }
.workspace-toolbar .support { flex: 1 1 18rem; }
.toggle-mark { width: 1rem; min-width: 1rem; text-align: center; }
#show-grid[aria-pressed="false"] .toggle-mark { visibility: hidden; }
#show-grid[aria-pressed="true"] { color: var(--ink); background: var(--selection); border-color: var(--ink); }
#workspace-note { margin-top: .875rem; }
.interaction-status { min-height: 1.5em; margin-block: .75rem 1rem; }
.map-frame { border: 1px solid var(--divider); border-radius: var(--radius-panel); overflow: clip; background: var(--page); box-shadow: var(--offset-shadow); }
.map-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--divider); }
.map-heading h3 { font-size: 1.125rem; }
.system-map-wrap { position: relative; isolation: isolate; padding: 2rem; }
.system-map-wrap::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; }
#workspace[data-grid="off"] .system-map-wrap::before, #workspace[data-presentation="outline"] .system-map-wrap::before { display: none; }
.diagram-edges { position: absolute; inset: 2rem; width: calc(100% - 4rem); height: calc(100% - 4rem); z-index: -1; overflow: visible; }
.diagram-edges > path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.diagram-edges marker path { fill: var(--accent); }
.system-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.system-node { min-width: 0; align-self: center; }
.system-node[data-node-id="brief"] { grid-column: 1; grid-row: 1; }
.system-node[data-node-id="catalog"] { grid-column: 1; grid-row: 2; }
.system-node[data-node-id="assembler"] { grid-column: 2; grid-row: 1 / 3; }
.system-node[data-node-id="design"] { grid-column: 3; grid-row: 1 / 3; }
.system-node[data-node-id="review"] { grid-column: 4; grid-row: 1 / 3; }
.node-card { padding: 1.125rem; border: 1px solid var(--control-border); border-radius: var(--radius-panel); background: var(--panel); }
.node-caption { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; font: .875rem/1.6 var(--display-font); }
.node-number { color: var(--accent); }
.node-kind { color: var(--muted); }
.reading-marker { display: inline-flex; align-items: center; gap: .25rem; color: var(--ink); font-weight: 600; }
.reading-marker::before { content: ''; width: .375rem; height: .375rem; background: var(--ink); }
.node-card h4 { font-size: 1rem; line-height: 1.4; }
.node-card p { margin-block: .75rem .5rem; font-size: .875rem; line-height: 1.6; }
.inspect-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding-block: .625rem; font-size: .875rem; font-weight: 600; }
.system-node[data-selected="true"] .node-card { color: var(--ink); background: var(--selection); border-color: var(--ink); }
.system-node[data-selected="true"] .node-kind, .system-node[data-selected="true"] .node-number, .system-node[data-selected="true"] .inspect-link { color: var(--ink); }
.system-node[data-selected="true"] .inspect-link:hover { color: var(--ink); text-decoration-thickness: 2px; }
.map-key { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--divider); background: var(--panel); font-size: .875rem; }
.map-key p { display: flex; align-items: center; gap: .5rem; }
.key-arrow { color: var(--accent); font-size: 1.25rem; }
.key-reading { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--ink); background: var(--selection); }
.map-responsive-note { display: none !important; }
#workspace[data-presentation="outline"] .diagram-edges { display: none; }
#workspace[data-presentation="outline"] .system-map { display: flex; flex-direction: column; gap: 1rem; }
#workspace[data-presentation="outline"] .system-node { width: 100%; }
#workspace[data-presentation="outline"] .node-card { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1.5fr) auto; align-items: center; gap: 1rem; }
#workspace[data-presentation="outline"] .node-caption, #workspace[data-presentation="outline"] .node-card p { margin: 0; }
.relationship-region { margin-top: 2.5rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--divider); border-radius: var(--radius-panel); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.6; }
caption { padding: 1rem; color: var(--muted); text-align: start; }
th, td { padding: .875rem 1rem; text-align: start; vertical-align: top; border-top: 1px solid var(--divider); overflow-wrap: anywhere; }
thead { background: var(--surface); }
th { font-weight: 600; }
.inspector-shell { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--divider); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--offset-shadow); }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--divider); }
.inspector-heading .eyebrow { margin-bottom: .5rem; }
.inspector-nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.node-detail { max-width: 65ch; margin-block: 1.5rem 0; }
.node-detail + .node-detail { padding-top: 1.5rem; border-top: 1px solid var(--divider); }
.detail-top { display: flex; align-items: center; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.back-button { min-height: 44px; padding: .625rem .5rem; border: 0; border-radius: var(--radius-control); color: var(--accent); background: transparent; text-decoration: underline; text-underline-offset: .22em; font-size: .875rem; font-weight: 600; }
.back-button:hover { color: var(--accent-hover); }
.node-detail h4 { font-size: 1.25rem; line-height: 1.4; }
.detail-lead { margin-block: 1rem .75rem; font-size: 1.125rem; }
.detail-facts { display: grid; gap: 1rem; margin-block: 1.5rem; padding: 1.25rem; background: var(--surface); border-radius: var(--radius-panel); }
.detail-facts > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
dt { font: .875rem/1.6 var(--display-font); color: var(--accent); }
dd { margin: 0; overflow-wrap: anywhere; }
.specimen { border-top: 1px solid var(--divider); }
.specimen-panel { padding: var(--specimen-inset); background: var(--panel); border: 1px solid var(--divider); border-radius: var(--radius-panel); box-shadow: var(--offset-shadow); }
.specimen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; margin-bottom: 2rem; }
.specimen-grid > div > .field { margin-top: 1.25rem; }
.specimen-grid > div > .support { margin-top: .5rem; }
.button-samples { display: flex; flex-wrap: wrap; gap: .75rem; }
.message { padding: 1rem; margin-top: 1rem; border-radius: var(--radius-control); }
.message.success { color: var(--on-success); background: var(--success); }
.message.note { color: var(--on-note); background: var(--note); }
.semantic-samples { display: grid; gap: .5rem; margin-top: 1rem; font-size: .875rem; }
.warning { color: var(--warning); }
.danger { color: var(--danger); }
.info { color: var(--info); }
.type-study > p + p { margin-top: 1rem; }
.display-sample { font: 400 clamp(1.625rem, 3vw, 2.5rem)/1.2 var(--display-font); letter-spacing: -.025em; }
.technical, .mono-value { font-family: var(--display-font); font-size: .875rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.technical { color: var(--muted); }
.palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.swatch { display: flex; align-items: center; min-height: 64px; padding: .75rem; border: 1px solid var(--divider); border-radius: var(--radius-control); font-size: .875rem; color: var(--ink); }
.swatch-page { background: var(--page); }
.swatch-a { background: var(--tint-a); }
.swatch-b { background: var(--tint-b); }
.swatch-c { background: var(--tint-c); }
.preview-footer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; padding-block: 3rem 4rem; border-top: 1px solid var(--divider); }
.preview-footer h2 { margin-bottom: 1.5rem; }
.preview-footer p + p { margin-top: 1rem; }
.preview-footer code { font: .875rem/1.6 var(--display-font); overflow-wrap: anywhere; }
.preview-footer nav { display: flex; flex-direction: column; gap: .5rem; align-items: start; }
.preview-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-motion="on"] :is(a, button, input, select, summary) { transition: color 240ms cubic-bezier(.2, 0, 0, 1), background-color 240ms cubic-bezier(.2, 0, 0, 1), border-color 240ms cubic-bezier(.2, 0, 0, 1); }
}
@media (max-width: 62rem) {
  .system-map { display: flex; flex-direction: column; gap: 1.5rem; }
  .system-node { width: 100%; }
  .node-card { display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 1rem; align-items: center; }
  .node-caption, .node-card p { margin: 0; }
  .diagram-edges { display: none; }
  .map-responsive-note { display: block !important; flex-basis: 100%; color: var(--muted); }
}
@media (max-width: 48rem) {
  .preview-intro, .studio-hero, .workspace-intro, .specimen-intro, .specimen-grid, .preview-footer { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .preview-intro { padding-top: 2rem; }
  .preview-settings { max-width: 32rem; }
  .section-caption, .section-heading { flex-direction: column; align-items: start; gap: .5rem; }
  .hero-copy h2 { font-size: clamp(2.8rem, 8vw, 4.5rem); }
  .structure-figure { width: min(100%, 36rem); }
  .studio-principles { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-block: 3rem; }
  .brief-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .brief-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .brief-art { align-self: stretch; border-bottom: 0; border-inline-end: 1px solid var(--divider); border-radius: 7px 0 0 7px; display: flex; align-items: center; }
  .map-heading { flex-direction: column; gap: .5rem; }
  .node-card, #workspace[data-presentation="outline"] .node-card { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; }
  .node-caption, #workspace[data-presentation="outline"] .node-caption { grid-column: 1 / -1; }
  .node-card h4 { grid-column: 1; }
  .node-card p { grid-column: 1; }
  .node-card .inspect-link { grid-column: 2; grid-row: 2 / 4; }
  .inspector-heading { flex-direction: column; align-items: start; }
  .preview-footer { gap: 2rem; }
}
@media (max-width: 34rem) {
  .container { width: calc(100% - 2rem); }
  .section-block { padding-block: 3rem; }
  .preview-header { gap: .5rem; padding-block: 1rem; }
  .draft-label { font-size: .875rem; }
  .preference-fields { grid-template-columns: minmax(0, 1fr); }
  .section-nav { gap: .25rem 1rem; }
  .hero-copy h2 { font-size: 2.8rem; }
  .drawing-stamp { flex-direction: column; }
  .brief-card { display: block; }
  .brief-art { border-inline-end: 0; border-bottom: 1px solid var(--divider); border-radius: 7px 7px 0 0; }
  .workspace-toolbar { align-items: stretch; }
  .workspace-toolbar .field { width: 100%; }
  .workspace-toolbar > button { flex: 1 1 auto; }
  .system-map-wrap { padding: 1.5rem; }
  .node-card, #workspace[data-presentation="outline"] .node-card { display: block; padding: 1rem; }
  .node-card h4 { margin-top: .75rem; }
  .node-card p { margin-block: .75rem .25rem; }
  .node-card .inspect-link { padding-block: .625rem; }
  .map-heading, .map-key { padding: 1rem; }
  .inspector-shell { padding: 1rem; }
  .inspector-nav { width: 100%; }
  .inspector-nav button { flex: 1 1 auto; }
  .detail-top { flex-wrap: wrap; gap: .25rem 1rem; }
  .detail-facts { padding: 1rem; }
  .detail-facts > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  table { min-width: 33rem; }
  .palette { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  :focus-visible, [tabindex="-1"]:focus { outline-color: Highlight; }
  .reading-marker::before { background: CanvasText; }
  .system-node[data-selected="true"] .node-card, #show-grid[aria-pressed="true"] { border-color: CanvasText; outline: 1px solid CanvasText; }
  .diagram-edges > path { stroke: CanvasText; }
  .diagram-edges marker path { fill: CanvasText; }
  .structure-art, .brief-card, .map-frame, .inspector-shell, .specimen-panel { box-shadow: none; }
}