/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V5
   Philosophy: a safety-data-sheet rigour applied to a cleaning guide. Hierarchy: navy panes carry the argument, porcelain carries the reading.
   Execution: tokens only, roman headings, minmax(0,1fr), clip not hidden. Specificity: numbered stages, label footer, diagram cards.
   Restraint: one cerulean accent, no shadows on cards, motion limited to a scroll-synced step marker. Variety: Feature Stack + slab nav + label footer. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-m); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-2); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-s); }
::selection { background: var(--color-tile-2); color: var(--color-ink); }
.wrap { width: min(100% - 2 * var(--space-s), var(--page-max)); margin-inline: auto; }
@media (min-width: 48rem) { .wrap { width: min(100% - 2 * var(--space-l), var(--page-max)); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-s); top: -4rem; z-index: 100; background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-s); text-decoration: none; }
.skip:focus { top: var(--space-xs); }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; font-weight: 700; line-height: var(--leading-tight); letter-spacing: -0.015em; overflow-wrap: anywhere; min-width: 0; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- slab nav (N7 adapted) ---------- */
.slab { position: sticky; top: 0; z-index: var(--z-nav); background: var(--color-paper); }
.slab__bar { display: flex; align-items: stretch; justify-content: space-between; gap: var(--space-s); min-height: calc(var(--nav-h) - 0.375rem); border-bottom: var(--border-w) solid var(--color-ink); padding-inline: var(--space-s); }
@media (min-width: 48rem) { .slab__bar { padding-inline: var(--space-l); } }
.mark { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); min-width: 0; }
.mark:hover { color: var(--color-ink); }
.mark__sq { flex: none; width: 2.25rem; height: 2.25rem; background: var(--color-navy); border-radius: var(--radius-s); display: grid; place-items: center; }
.mark__sq svg { width: 1.6rem; height: 1.6rem; }
.mark__txt { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.05; font-size: 0.78rem; min-width: 0; }
.mark__txt span:last-child { color: var(--color-accent); }
.slab__links { display: none; align-items: stretch; gap: 0; margin-inline: auto var(--space-s); }
@media (min-width: 54rem) { .slab__links { display: flex; } }
.slab__a { display: flex; align-items: center; padding-inline: var(--space-s); font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; color: var(--color-ink); border-inline-start: 2px solid var(--color-line); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast); }
.slab__a:last-child { border-inline-end: 2px solid var(--color-line); }
.slab__a:hover { background: var(--color-navy); color: var(--color-on-navy); }
.slab__a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--color-accent); }
.slab__menu { display: none; align-self: center; min-height: 2.75rem; padding: 0 var(--space-s); border: 2px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; border-radius: var(--radius-s); }
.js .slab__menu { display: inline-flex; align-items: center; }
.slab__menu:hover { background: var(--color-accent); border-color: var(--color-accent); }
.slab__menu[aria-expanded="true"] { background: var(--color-paper); color: var(--color-ink); }
.chevrons { height: 0.375rem; background: repeating-linear-gradient(135deg, var(--color-navy) 0 0.5rem, var(--color-accent) 0.5rem 1rem); }
.sheet { position: absolute; inset-inline: 0; top: 100%; z-index: var(--z-menu); background: var(--color-navy); color: var(--color-on-navy); border-bottom: var(--border-w) solid var(--color-ink); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.sheet { display: none; }
.sheet.is-open { display: block; }
.sheet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-m) var(--space-l); padding-block: var(--space-l); }
.sheet__h { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-bright); margin-bottom: var(--space-xs); }
.sheet ul { list-style: none; display: grid; gap: 0; }
.sheet a { display: block; padding: 0.55rem 0; color: var(--color-on-navy); text-decoration: none; border-top: 1px solid var(--color-navy-line); font-weight: 500; line-height: 1.3; }
.sheet a:hover { color: var(--color-accent-bright); }
.sheet a[aria-current="page"] { color: var(--color-accent-bright); font-weight: 700; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 2.9rem; padding: 0 var(--space-m); background: var(--color-accent); color: var(--color-paper); border: 0; border-radius: var(--radius-s); font-family: var(--font-display); font-weight: 700; font-size: var(--text-s); text-decoration: none; cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast); }
.btn:hover { background: var(--color-accent-2); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn--bright { background: var(--color-accent-bright); color: var(--color-navy); }
.btn--bright:hover { background: var(--color-on-navy); color: var(--color-navy); }
.btn--line { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); }
.btn--line:hover { background: var(--color-ink); color: var(--color-paper); }

/* ---------- home lede ---------- */
.lede { padding-block: var(--space-xl) var(--space-xl); }
.lede__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: center; }
@media (min-width: 60rem) { .lede__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-xl); } .lede { padding-block: var(--space-2xl) var(--space-xl); } }
.lede__kick { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: var(--space-s); }
.lede h1 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; }
.lede p.lede__p { margin-top: var(--space-m); max-width: 36rem; font-size: var(--text-l); color: var(--color-ink-dim); line-height: 1.5; }
.lede__jump { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
.lede__art { background: var(--color-tile); border: var(--border-w) solid var(--color-ink); border-radius: var(--radius-m); padding: var(--space-m); min-width: 0; }
.lede__art svg { width: 100%; height: auto; }
.lede__art figcaption { margin-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--color-ink-dim); text-transform: uppercase; }

/* ---------- feature stack ---------- */
.stage { border-top: var(--border-w) solid var(--color-ink); padding-block: var(--space-xl); }
.stage--tile { background: var(--color-tile); }
.stage__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); align-items: start; }
@media (min-width: 60rem) { .stage__grid { grid-template-columns: minmax(0, var(--pane-w)) minmax(0, 1fr); gap: var(--space-xl); } }
.pane { background: var(--color-navy); color: var(--color-on-navy); border-radius: var(--radius-m); padding: var(--space-l) var(--space-m); min-width: 0; }
@media (min-width: 60rem) { .pane { position: sticky; top: calc(var(--nav-h) + var(--space-m)); max-height: calc(100vh - var(--nav-h) - 2 * var(--space-m)); overflow-y: auto; padding: var(--space-l); } }
.pane__no { font-family: var(--font-mono); font-size: 3.2rem; line-height: 1; font-weight: 500; color: var(--color-accent-bright); letter-spacing: -0.04em; }
.pane__kick { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-navy-dim); margin-top: var(--space-xs); }
.pane h2 { font-size: var(--text-xl); margin-top: var(--space-s); color: var(--color-on-navy); }
.pane p.pane__p { margin-top: var(--space-s); color: var(--color-on-navy-dim); font-size: var(--text-s); line-height: 1.55; }
.pane .btn { margin-top: var(--space-m); }
.steps { list-style: none; display: flex; gap: var(--space-2xs); margin-top: var(--space-m); }
.steps li { flex: 1; height: 0.35rem; background: var(--color-navy-line); border-radius: 1px; transition: background var(--dur-base) var(--ease-out); }
.steps li.is-on { background: var(--color-accent-bright); }
.rail { display: grid; gap: var(--space-m); min-width: 0; }
.fcard { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--color-paper); border: 2px solid var(--color-ink); border-radius: var(--radius-m); overflow: hidden; min-width: 0; transition: transform var(--dur-base) var(--ease-out); }
.stage--tile .fcard { background: var(--color-paper); }
.fcard__art { background: var(--color-accent-wash); border-bottom: 2px solid var(--color-ink); padding: var(--space-s) var(--space-m); }
.fcard__art svg { width: 100%; height: auto; max-height: 13rem; margin-inline: auto; }
.fcard__body { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-xs); }
.fcard__idx { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); }
.fcard h3 { font-size: var(--text-l); }
.fcard p { color: var(--color-ink-dim); font-size: var(--text-s); line-height: 1.55; max-width: 42rem; }
.fcard__go { align-self: flex-start; margin-top: var(--space-2xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-s); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.fcard__go::after { content: "\2192"; margin-left: var(--space-2xs); transition: transform var(--dur-fast) var(--ease-out); }
.fcard__go:hover::after { transform: translateX(4px); }
.fcard:hover { transform: translateY(-2px); }
@media (min-width: 40rem) { .fcard { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .fcard__art { border-bottom: 0; border-right: 2px solid var(--color-ink); display: grid; place-items: center; } }

/* principles band */
.band { background: var(--color-tile); border-top: var(--border-w) solid var(--color-ink); padding-block: var(--space-xl); }
.band h2 { font-size: var(--text-xl); max-width: 28ch; }
.band__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); margin-top: var(--space-l); list-style: none; }
@media (min-width: 48rem) { .band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.band__grid li { border-top: 3px solid var(--color-ink); padding-top: var(--space-s); }
.band__grid h3 { font-size: var(--text-l); margin-bottom: var(--space-2xs); }
.band__grid p { color: var(--color-ink-dim); font-size: var(--text-s); }

/* ---------- document (article) ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); padding-block: var(--space-m) var(--space-xl); align-items: start; }
@media (min-width: 60rem) { .doc { grid-template-columns: minmax(0, var(--pane-w)) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-l) var(--space-2xl); } }
.doc__pane { background: var(--color-navy); color: var(--color-on-navy); border-radius: var(--radius-m); padding: var(--space-m); min-width: 0; }
@media (min-width: 60rem) { .doc__pane { position: sticky; top: calc(var(--nav-h) + var(--space-m)); max-height: calc(100vh - var(--nav-h) - 2 * var(--space-m)); overflow-y: auto; padding: var(--space-l) var(--space-m); } }
.crumbs { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2xs); color: var(--color-navy-line); }
.crumbs a { color: var(--color-accent-bright); text-decoration: none; display: inline-flex; align-items: center; min-height: 2rem; }
.crumbs a:hover { color: var(--color-on-navy); }
.crumbs span[aria-current] { color: var(--color-on-navy-dim); }
.doc__pane h1 { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.15rem); margin-top: var(--space-s); letter-spacing: -0.02em; color: var(--color-on-navy); }
.doc__dek { margin-top: var(--space-s); color: var(--color-on-navy-dim); font-size: var(--text-s); line-height: 1.55; }
.facts { list-style: none; margin-top: var(--space-m); border-top: 1px solid var(--color-navy-line); }
.facts li { display: flex; justify-content: space-between; gap: var(--space-s); padding: 0.5rem 0; border-bottom: 1px solid var(--color-navy-line); font-size: var(--text-xs); }
.facts span:first-child { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-on-navy-dim); }
.facts span:last-child { text-align: right; color: var(--color-on-navy); }
.jump { margin-top: var(--space-m); }
.jump summary { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-bright); cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; list-style: none; }
.jump summary::-webkit-details-marker { display: none; }
.jump summary::after { content: "+"; margin-left: auto; font-size: 1.1rem; }
.jump[open] summary::after { content: "\2212"; }
@media (min-width: 60rem) { .jump summary { pointer-events: none; min-height: 2rem; } .jump summary::after, .jump[open] summary::after { content: none; } }
.jump ol { list-style: none; counter-reset: j; display: grid; }
.jump li { counter-increment: j; }
.jump a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--color-navy-line); color: var(--color-on-navy); text-decoration: none; font-size: var(--text-s); line-height: 1.3; }
.jump a::before { content: counter(j, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-on-navy-dim); }
.jump a:hover, .jump a[aria-current="location"] { color: var(--color-accent-bright); }
.jump a[aria-current="location"]::before { color: var(--color-accent-bright); }

.doc__body { min-width: 0; max-width: var(--measure); counter-reset: sec; }
@media (min-width: 60rem) { .doc__body { padding-top: var(--space-s); } }
.prose > p:first-child { font-size: var(--text-l); line-height: 1.5; color: var(--color-ink); }
.prose p { margin-top: var(--space-s); }
.prose > h2:not(#takeaway) { counter-increment: sec; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-xl); scroll-margin-top: calc(var(--nav-h) + var(--space-s)); padding-top: var(--space-s); border-top: var(--border-w) solid var(--color-ink); }
.prose > h2:not(#takeaway)::before { content: counter(sec, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: var(--space-2xs); }
.prose h3 { font-size: var(--text-l); margin-top: var(--space-m); }
.prose ul, .prose ol { margin-top: var(--space-s); padding-left: 1.3rem; display: grid; gap: var(--space-2xs); }
.prose li::marker { color: var(--color-accent); font-weight: 700; }
.prose strong { font-weight: 700; }
.prose a { text-decoration-color: var(--color-accent-bright); text-decoration-thickness: 2px; }
.prose a:hover { text-decoration-color: var(--color-accent-2); }
.prose blockquote { margin: var(--space-m) 0 0; padding: var(--space-xs) var(--space-m); border-left: 4px solid var(--color-accent); background: var(--color-accent-wash); }
.prose blockquote p { margin: 0; }
.prose abbr { text-decoration: underline dotted; cursor: help; }
.prose table.data { width: 100%; border-collapse: collapse; margin-top: var(--space-m); font-size: var(--text-s); display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table.data caption { text-align: left; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-dim); padding-bottom: var(--space-xs); }
.prose table.data th, .prose table.data td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border: 1px solid var(--color-line); min-width: 8rem; }
.prose table.data thead th { background: var(--color-navy); color: var(--color-on-navy); font-family: var(--font-display); }
.prose table.data tbody tr:nth-child(even) { background: var(--color-paper-2); }
.notice { margin-top: var(--space-m); padding: var(--space-s) var(--space-m); border: 2px solid var(--color-ink); border-left-width: 10px; background: var(--color-accent-wash); border-radius: var(--radius-s); }
.notice p { margin: 0; font-size: var(--text-s); }

.faq { margin-top: var(--space-xl); }
.faq .faq-item { border-top: 1px solid var(--color-line); padding-block: var(--space-s); }
.faq .faq-item:last-child { border-bottom: 1px solid var(--color-line); }
.faq h3 { font-size: var(--text-m); margin: 0; }
.faq .faq-item p { margin-top: var(--space-2xs); color: var(--color-ink-dim); font-size: var(--text-s); }
.sources { margin-top: var(--space-xl); padding: var(--space-m); background: var(--color-tile); border: 2px solid var(--color-ink); border-radius: var(--radius-m); }
.sources h2 { margin: 0 0 var(--space-xs); padding: 0; border: 0; font-size: var(--text-l); }
.sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); font-size: var(--text-s); }
.sources li { padding-left: 1.1rem; position: relative; color: var(--color-ink-dim); }
.sources li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; background: var(--color-accent); }
.sources a { word-break: break-word; }

.more { margin-top: var(--space-xl); }
.more h2 { font-size: var(--text-l); }
.more ul { list-style: none; display: grid; gap: var(--space-s); margin-top: var(--space-s); padding: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .more ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.more a { display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%; padding: var(--space-s); border: 2px solid var(--color-ink); border-radius: var(--radius-m); text-decoration: none; color: var(--color-ink); background: var(--color-paper); transition: background var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.more a:hover { background: var(--color-accent-wash); transform: translateY(-2px); }
.more b { font-family: var(--font-display); font-size: var(--text-m); line-height: 1.2; }
.more span { color: var(--color-ink-dim); font-size: var(--text-s); line-height: 1.45; }

/* forms */
.form { display: grid; gap: var(--space-s); margin-top: var(--space-m); max-width: 34rem; }
.form label { display: grid; gap: var(--space-3xs); font-weight: 600; font-size: var(--text-s); }
.form input, .form textarea { min-height: 2.9rem; padding: 0.6rem 0.8rem; border: 2px solid var(--color-ink); border-radius: var(--radius-s); background: var(--color-paper); font-weight: 400; width: 100%; }
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline-offset: 0; }
.form .btn { justify-self: start; }

/* ---------- label footer ---------- */
.label { background: var(--color-navy); color: var(--color-on-navy); border-top: var(--border-w) solid var(--color-ink); padding-block: var(--space-xl) var(--space-l); }
.label__box { border: 3px solid var(--color-on-navy); border-radius: var(--radius-s); }
.label__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); justify-content: space-between; padding: var(--space-s) var(--space-m); border-bottom: 3px solid var(--color-on-navy); }
.label__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.02em; }
.label__sig { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; background: var(--color-accent-bright); color: var(--color-navy); padding: 0.3rem 0.7rem; font-weight: 500; }
.label__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .label__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .label__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.label__grid > div { padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--color-navy-line); min-width: 0; }
@media (min-width: 48rem) { .label__grid > div:nth-child(odd) { border-right: 1px solid var(--color-navy-line); } }
@media (min-width: 72rem) { .label__grid > div { border-right: 1px solid var(--color-navy-line); } .label__grid > div:nth-child(3n) { border-right: 0; } }
.label__grid dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-bright); margin-bottom: var(--space-3xs); }
.label__grid dd { font-size: var(--text-s); line-height: 1.5; color: var(--color-on-navy); }
.label__grid a { color: var(--color-on-navy); }
.label__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-m); padding: var(--space-xs) var(--space-m); }
.label__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-on-navy); font-family: var(--font-display); font-weight: 700; font-size: var(--text-s); text-decoration: none; white-space: nowrap; }
.label__links a:hover { color: var(--color-accent-bright); text-decoration: underline; }
.label__fine { margin-top: var(--space-m); font-size: var(--text-xs); line-height: 1.6; color: var(--color-on-navy-dim); max-width: 60rem; }

/* svg classes */
.g-ink { fill: none; stroke: var(--color-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-thin { fill: none; stroke: var(--color-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.g-fill { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2.4; stroke-linejoin: round; }
.g-glass { fill: var(--svg-glass); stroke: var(--color-ink); stroke-width: 2.4; stroke-linejoin: round; }
.g-water { fill: var(--svg-water); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; }
.g-foam { fill: var(--svg-foam); stroke: var(--color-ink); stroke-width: 2; }
.g-soil { fill: var(--svg-soil); stroke: var(--color-ink); stroke-width: 1.6; }
.g-soilp { fill: var(--svg-soil-dim); }
.g-navy { fill: var(--color-navy); stroke: var(--color-ink); stroke-width: 2.4; stroke-linejoin: round; }
.g-acc { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; }
.g-tile { fill: var(--color-tile); stroke: var(--color-ink); stroke-width: 1.4; }
.g-metal { fill: var(--svg-metal); stroke: var(--color-ink); stroke-width: 2.2; stroke-linejoin: round; }
.g-label { font-family: var(--font-mono); font-size: 8.5px; fill: var(--color-ink); letter-spacing: 0.04em; text-transform: uppercase; }
.g-label--w { fill: var(--color-on-navy); }

.g-label--s { font-size: 7px; letter-spacing: 0.02em; }
.m-drop { fill: var(--color-accent-bright); }
.m-tick { fill: none; stroke: var(--color-navy); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.g-soilt { fill: var(--svg-soil-dim); stroke: var(--svg-soil); stroke-width: 1.2; }
.g-spark { fill: var(--color-accent-bright); stroke: var(--color-ink); stroke-width: 1.6; stroke-linejoin: round; }
.g-drip { fill: none; stroke: var(--svg-water); stroke-width: 3; stroke-linecap: round; }
.g-heavy { stroke-width: 4; }
.g-ring { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 4 4; }
.g-tuft { fill: none; stroke: var(--color-accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.g-tick { fill: none; stroke: var(--color-accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.g-streak { fill: none; stroke: var(--svg-soil); stroke-width: 5; stroke-linecap: round; opacity: 0.75; }
.g-spray { fill: none; stroke: var(--svg-water); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1 6; }
.g-flow { fill: none; stroke: var(--svg-water); stroke-width: 5; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media print { .slab, .sheet, .label, .skip { display: none; } .doc__pane { position: static; background: none; color: var(--color-ink); } }