:root {
  --bg: #f7f6f3;
  --panel: #eeece7;
  --fg: #1b1d1f;
  --muted: #62666b;
  --line: #d9d6cf;
  --accent: #b4532a;
  --accent-soft: #f5e3d9;
  --warn: #a8321f;
  --warn-soft: #fbe7e3;
  --ok: #2f6b3a;
  --ok-soft: #e3f0e5;
  --steel: #6f7880;
  --sys-cold: #1769aa;
  --sys-black: #3c3429;
  --sys-hot: #c4382b;
  --sys-grey: #74685a;
  --sys-propane: #c76616;
  --sys-dc: #7e1830;
  --sys-solar: #9a7400;
  --sys-ac: #7046a3;
  --sys-road: #287443;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141516;
    --panel: #1e2022;
    --fg: #e8e6e1;
    --muted: #9aa0a6;
    --line: #34373a;
    --accent: #e58a5c;
    --accent-soft: #3a2519;
    --warn: #f08a76;
    --warn-soft: #3b201b;
    --ok: #7fc48c;
    --ok-soft: #1c2e20;
    --steel: #a3acb4;
    --sys-cold: #69b9f4;
    --sys-black: #c9bfae;
    --sys-hot: #ff7468;
    --sys-grey: #b9aa96;
    --sys-propane: #ff9c4a;
    --sys-dc: #ff8298;
    --sys-solar: #f4cc4d;
    --sys-ac: #c49aef;
    --sys-road: #71d394;
  }
}

:root[data-theme="dark"] {
  --bg: #141516;
  --panel: #1e2022;
  --fg: #e8e6e1;
  --muted: #9aa0a6;
  --line: #34373a;
  --accent: #e58a5c;
  --accent-soft: #3a2519;
  --warn: #f08a76;
  --warn-soft: #3b201b;
  --ok: #7fc48c;
  --ok-soft: #1c2e20;
  --steel: #a3acb4;
  --sys-cold: #69b9f4;
  --sys-black: #c9bfae;
  --sys-hot: #ff7468;
  --sys-grey: #b9aa96;
  --sys-propane: #ff9c4a;
  --sys-dc: #ff8298;
  --sys-solar: #f4cc4d;
  --sys-ac: #c49aef;
  --sys-road: #71d394;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 2rem 16px 5rem;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: 40rem; margin: 0 auto; }
.wide { max-width: 64rem; margin-inline: auto; }
.crumb { margin: 0 0 .4rem; color: var(--muted); font-size: .8rem; letter-spacing: .02em; }
.crumb a { color: var(--muted); }
h1 { margin: 0 0 .3rem; font-size: 1.9rem; line-height: 1.2; letter-spacing: -.02em; }
.sub { margin: 0 0 2rem; color: var(--muted); font-size: 1rem; }
h2 { margin: 2.4rem 0 .7rem; font-size: 1.25rem; letter-spacing: -.01em; }
h3 { margin: 1.6rem 0 .4rem; color: var(--muted); font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; }
p, li { margin: 0 0 .8rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .45rem; }
a { color: var(--accent); text-underline-offset: 2px; }
strong { font-weight: 650; }
code { padding: .12em .38em; border-radius: 4px; background: var(--panel); font: .88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--muted); font-size: .9em; }
p, li, dd, td { overflow-wrap: break-word; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  padding: .3rem .35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: .85rem;
}
.nav a { padding: .3rem .62rem; border-radius: 6px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a.here { background: var(--bg); color: var(--accent); }
.nav a.here { font-weight: 650; }
.theme-toggle { margin-left: auto; padding: .3rem .62rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.theme-toggle:hover { background: var(--bg); color: var(--accent); }

.note, .warn-box, .ok-box { margin: 1.3rem 0; padding: .9rem 1.1rem; border-left: 4px solid; border-radius: var(--radius); }
.note { border-color: var(--accent); background: var(--accent-soft); }
.warn-box { border-color: var(--warn); background: var(--warn-soft); }
.ok-box { border-color: var(--ok); background: var(--ok-soft); }
.note > :last-child, .warn-box > :last-child, .ok-box > :last-child { margin-bottom: 0; }
.note > b:first-child, .warn-box > b:first-child, .ok-box > b:first-child { display: block; margin-bottom: .25rem; }
.warn-box > b:first-child { color: var(--warn); }
.ok-box > b:first-child { color: var(--ok); }

.src { margin: 0 0 1.6rem; padding: .6rem .8rem; border-radius: 8px; background: var(--panel); color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.src a { color: var(--muted); }
.tw { margin: 1.3rem 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
figure { margin: 1.5rem 0; padding: 1.1rem 1rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow-x: auto; }
figure > svg { display: block; max-width: none; margin: 0 auto; }
figcaption { margin-top: .7rem; color: var(--muted); font-size: .85rem; text-align: center; }
.related { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .92rem; }
.related h3 { margin-top: 0; }
.search { width: 100%; margin: 0 0 1.4rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--fg); font: inherit; }
.search::placeholder { color: var(--muted); }
.page-entry { margin-bottom: .75rem; }
.page-entry a { font-weight: 650; }
.page-entry p { margin: .1rem 0 0; color: var(--muted); }

.cards { display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 1.2rem 0; }
.card { padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.card h3 { margin: 0 0 .5rem; }
.card > :last-child { margin-bottom: 0; }
.pill { display: inline-block; margin-bottom: .55rem; padding: .12rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 650; }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.now { background: var(--accent-soft); color: var(--accent); }
.pill.todo { background: var(--line); color: var(--muted); }
dl.terms { margin: 1.2rem 0; padding: 0; }
dl.terms dt { margin-top: .8rem; font-weight: 650; }
dl.terms dd { margin: .1rem 0 0; color: var(--muted); }

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  :root { --bg: #fff; --panel: #fff; --fg: #000; --muted: #444; --line: #bbb; --accent: #000; --accent-soft: #fff; --warn: #000; --warn-soft: #fff; --ok: #000; --ok-soft: #fff; }
  body { padding: 0; color: #000; background: #fff; font-size: 11pt; }
  .nav, .search, .theme-toggle { display: none; }
  figure { break-inside: avoid; }
  a { text-decoration: none; }
}

/* Drawings */
.dwg { display: block; max-width: 100%; height: auto; margin: 0 auto; font-family: inherit; }
.dwg text { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.dwg .outline, .dwg .wall, .dwg .frame, .dwg .frame-member, .dwg .wheel,
.dwg .ground, .dwg .axle, .dwg .well, .dwg .dimension, .dwg .opening,
.dwg .door-swing, .dwg .door, .dwg .window, .dwg .vent, .dwg .solar,
.dwg .coupler { vector-effect: non-scaling-stroke; }
.dwg .outline { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.dwg .wall { fill: none; stroke: var(--steel); stroke-width: 1; }
.dwg .frame, .dwg .frame-member { fill: var(--steel); stroke: var(--fg); stroke-width: 1.5; }
.dwg .cross { opacity: .8; }
.dwg .wheel { fill: var(--line); stroke: var(--fg); stroke-width: 1.5; }
.dwg .ground { stroke: var(--muted); stroke-width: 1; }
.dwg .axle { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 7 3 1 3; }
.dwg .well { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.dwg .roof-vent-plan { fill: none; stroke: var(--muted); stroke-width: .7; stroke-dasharray: 3 3; opacity: .65; vector-effect: non-scaling-stroke; }
.dwg .dimension { stroke: var(--muted); stroke-width: .75; }
.dwg .dim-text { fill: var(--muted); font-size: 5px; }
.dwg .label { fill: var(--fg); font-size: 5px; }
.dwg .zone { stroke: var(--fg); stroke-width: .7; vector-effect: non-scaling-stroke; }
.dwg .zone-bed { fill: var(--ok-soft); }
.dwg .zone-dinette { fill: var(--accent-soft); }
.dwg .zone-galley { fill: color-mix(in srgb, var(--accent-soft) 65%, var(--panel)); }
.dwg .zone-cabinet { fill: color-mix(in srgb, var(--steel) 24%, var(--panel)); }
.dwg .zone-power { fill: color-mix(in srgb, var(--ok) 20%, var(--panel)); }
.dwg .zone-bath { fill: color-mix(in srgb, var(--sys-cold) 20%, var(--panel)); }
.dwg .zone-utility { fill: color-mix(in srgb, var(--sys-propane) 18%, var(--panel)); }
.dwg .zone-desk { fill: color-mix(in srgb, var(--sys-ac) 18%, var(--panel)); }
.dwg .zone-aisle { fill: var(--panel); }
.dwg .zone-label { fill: var(--fg); font-size: 4.6px; pointer-events: none; }
.dwg .opening, .dwg .door, .dwg .window { fill: var(--panel); stroke: var(--accent); stroke-width: 2.5; }
.dwg .door-swing { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; }
.dwg .vent, .dwg .solar { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.dwg .roof-item, .dwg .roof-item-plan { vector-effect: non-scaling-stroke; }
.dwg .roof-item-plan { fill: none; stroke-width: 1; stroke-dasharray: 4 3; }
.dwg .roof-ac { fill: color-mix(in srgb, var(--steel) 25%, var(--panel)); stroke: var(--steel); }
.dwg .roof-solar { fill: color-mix(in srgb, var(--sys-solar) 20%, var(--panel)); stroke: var(--sys-solar); }
.dwg .utility-zone { opacity: .22; }
.dwg .utility-frame { opacity: .45; }
.dwg .system-link { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.dwg .sys-cold { stroke: var(--sys-cold); }
.dwg .sys-black { stroke: var(--sys-black); stroke-dasharray: 6 3; }
.dwg .sys-hot { stroke: var(--sys-hot); }
.dwg .sys-grey { stroke: var(--sys-grey); }
.dwg .sys-propane { stroke: var(--sys-propane); }
.dwg .sys-dc { stroke: var(--sys-dc); }
.dwg .sys-solar { stroke: var(--sys-solar); }
.dwg .sys-ac { stroke: var(--sys-ac); }
.dwg .sys-road { stroke: var(--sys-road); }
.dwg .system-node { fill: var(--panel); stroke: var(--fg); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.dwg .system-node-roof { fill: none; stroke-width: 2; }
.dwg .system-node-floor { stroke-dasharray: 2 2; }
.dwg .system-number { fill: var(--fg); font-size: 4.5px; font-weight: 700; }
.dwg .legend-label { fill: var(--fg); font-size: 5px; }
.dwg .coupler { fill: var(--panel); stroke: var(--fg); stroke-width: 1.5; }
.drawing { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.opt-switch { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.5rem; }
.opt-switch a { padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); text-decoration: none; }
.opt-switch a:hover, .opt-switch a.current { border-color: var(--accent); color: var(--accent); }
.steel-sources { min-width: 30rem; margin: .6rem .7rem 0; }