/* GLN — 06 Engineering solutions ("Specify GLN")
   Palette from the brief; everything else derived from it. */
/* local fallback scaled to Plex Sans widths, so lines break the same before the webfont arrives */
@font-face { font-family: "GLN Sans Fallback"; src: local("Segoe UI"), local("Arial"), local("Helvetica Neue"); size-adjust: 94%; }
/* Consolas advance is 0.55em, Plex Mono 0.60em: 109% keeps tabular figures the same width */
@font-face { font-family: "GLN Mono Fallback"; src: local("Consolas"); size-adjust: 109%; }
:root {
  --paper: #FAFAF8;
  --sheet: #FFFFFF;
  --ink: #14213D;
  --ink-2: #2B3A5C;
  --grid: #D8DEE6;
  --grid-2: #E7EBF0;
  --tint: #F1F3F6;
  --amber: #E0A100;
  --amber-tint: #FFF6DB;
  --slate: #5B6B7F;
  --hatch: #9AA6B5;

  --sans: "IBM Plex Sans", "GLN Sans Fallback", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "GLN Mono Fallback", ui-monospace, Menlo, monospace;

  /* fluid unit: 1px up to 1440, calc(1.32 * var(--u)) at 2560; the shell grows to 2240 */
  --u: clamp(1px, calc(1px + (100vw - 1440px) * 0.32 / 1120), 1.32px);
  --shell: clamp(1440px, calc(1440px + (100vw - 1440px) * 0.71), 2240px);
  --top: calc(56 * var(--u));
  --index-w: calc(232 * var(--u));
  --gutter: clamp(calc(20 * var(--u)), 4vw, calc(56 * var(--u)));
  --radius: calc(2 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + calc(12 * var(--u))); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(17 * var(--u));
  line-height: 1.6;
  font-feature-settings: "kern";
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: calc(3 * var(--u)); }
a:hover { text-decoration-color: var(--amber); text-decoration-thickness: calc(2 * var(--u)); }
p, h1, h2, h3, h4, dl, dd, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: calc(2 * var(--u)); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: calc(12 * var(--u)); top: calc(-60 * var(--u)); z-index: 100;
  background: var(--ink); color: var(--paper); padding: calc(10 * var(--u)) calc(16 * var(--u)); text-decoration: none; border-radius: var(--radius);
}
.skip:focus { top: calc(8 * var(--u)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  min-height: calc(48 * var(--u)); padding: 0 calc(22 * var(--u));
  border: 1px solid var(--ink); border-radius: var(--radius);
  font-size: calc(16 * var(--u)); font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn--sm { min-height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(15 * var(--u)); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--top);
  display: flex; align-items: center; gap: calc(18 * var(--u));
  padding: 0 max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter))) 0 max(calc(24 * var(--u)), calc((100% - var(--shell)) / 2 + 24 * var(--u)));
  background: rgba(250, 250, 248, .96);
  border-bottom: 1px solid var(--grid);
}
.wordmark {
  font-weight: 600; font-size: calc(22 * var(--u)); letter-spacing: .06em; line-height: 1;
  text-decoration: none; color: var(--ink);
  padding: calc(8 * var(--u)) 0; min-height: calc(44 * var(--u)); display: inline-flex; align-items: center;
}
.wordmark:hover { text-decoration: none; }
.doctitle { color: var(--slate); font-size: calc(15 * var(--u)); padding-left: calc(18 * var(--u)); border-left: 1px solid var(--grid); line-height: calc(24 * var(--u)); }
.toc-btn { display: none; }
.topbar-links { margin-left: auto; display: flex; align-items: center; gap: calc(22 * var(--u)); }
.toplink { font-size: calc(15 * var(--u)); text-decoration: none; padding: calc(10 * var(--u)) 0; }
.toplink:hover { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: calc(2 * var(--u)); }

/* ---------- shell: side index + content ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--index-w) minmax(0, 1fr);
  max-width: var(--shell); margin: 0 auto;
}
.index {
  position: sticky; top: var(--top);
  align-self: start;
  height: calc(100vh - var(--top));
  padding: calc(36 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u));
  border-right: 1px solid var(--grid);
  display: flex; flex-direction: column;
}
.index-head { font-size: calc(13 * var(--u)); color: var(--slate); margin-bottom: calc(10 * var(--u)); }
.index-list { list-style: none; position: relative; border-left: 1px solid var(--grid); }
.index-list a {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  min-height: calc(40 * var(--u)); padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(14 * var(--u));
  font-size: calc(15 * var(--u)); color: var(--slate); text-decoration: none;
  transition: color .2s ease;
}
.index-list a:hover { color: var(--ink); }
.index-list a.is-current { color: var(--ink); font-weight: 500; }
.index-list .n, .kicker .n, .sec-head h2 .n { font-family: var(--mono); font-weight: 400; font-size: .86em; color: var(--slate); }
.index-list .n { width: 1ch; }
.index-thumb {
  position: absolute; left: calc(24 * var(--u)); top: 0; width: calc(2 * var(--u)); height: 0;
  background: var(--amber);
  pointer-events: none;
}
.index-meta { margin-top: auto; font-size: calc(13 * var(--u)); color: var(--slate); border-top: 1px solid var(--grid); padding-top: calc(14 * var(--u)); }
.index-meta div { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); padding: calc(3 * var(--u)) 0; }
.index-meta dd { font-family: var(--mono); font-size: calc(12.5 * var(--u)); color: var(--ink); }
.index-cta {
  margin-top: calc(16 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; text-decoration: none;
  display: flex; align-items: center; min-height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u));
  border: 1px solid var(--ink); border-radius: var(--radius);
}
.index-cta:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

.content { min-width: 0; }
main { padding: 0 var(--gutter); }

/* ---------- sections ---------- */
.sec { padding-top: calc(120 * var(--u)); }
.sec-head {
  border-top: 1px solid var(--ink);
  padding-top: calc(18 * var(--u)); margin-bottom: calc(40 * var(--u));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(24 * var(--u)) calc(48 * var(--u)); align-items: start;
}
.sec-head h2 { font-size: calc(36 * var(--u)); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }
.sec-head h2 .n { display: inline-block; min-width: 1.6em; font-size: .5em; vertical-align: .55em; }
.sec-sum { color: var(--slate); font-size: calc(18 * var(--u)); line-height: 1.55; max-width: 60ch; padding-top: calc(6 * var(--u)); }
.small { font-size: calc(15 * var(--u)); color: var(--slate); }

/* ---------- 1 overview ---------- */
.sec--overview { padding-top: calc(44 * var(--u)); }
.kicker { font-size: calc(15 * var(--u)); color: var(--slate); margin-bottom: calc(14 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
.kicker .n { min-width: 1.6em; }
h1 {
  font-size: clamp(calc(40 * var(--u)), 4.45vw, calc(68 * var(--u)));
  line-height: 1.03; font-weight: 500; letter-spacing: -.032em;
  max-width: 13em;
  margin-bottom: calc(40 * var(--u));
}
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(48 * var(--u)); align-items: start;
  border-top: 1px solid var(--grid); padding-top: calc(32 * var(--u));
}
.hero-text > p { max-width: 42ch; }
.hero-text > p + p { margin-top: calc(14 * var(--u)); color: var(--slate); }
.lede { font-size: calc(19 * var(--u)); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin: calc(28 * var(--u)) 0 calc(40 * var(--u)); }
.glance-title { font-size: calc(15 * var(--u)); font-weight: 600; margin-bottom: calc(6 * var(--u)); letter-spacing: 0; }
.glance { border-top: 1px solid var(--ink); }
.glance div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: calc(16 * var(--u)); padding: calc(11 * var(--u)) 0; border-bottom: 1px solid var(--grid); }
.glance dt { font-size: calc(14 * var(--u)); color: var(--slate); padding-top: calc(2 * var(--u)); }
.glance dd { font-size: calc(15.5 * var(--u)); line-height: 1.5; }

/* drawing sheet */
.sheet { margin: 0; }
.sheet-frame {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--ink);
  padding: calc(18 * var(--u));
}
.sheet-frame::before {
  content: ""; position: absolute; inset: calc(18 * var(--u)); border: 1px solid var(--ink); pointer-events: none;
}
.zone { position: absolute; font-family: var(--mono); font-size: calc(10.5 * var(--u)); color: var(--slate); line-height: calc(18 * var(--u)); width: calc(18 * var(--u)); text-align: center; }
.zone--t1, .zone--t2, .zone--t3, .zone--t4 { top: 0; }
.zone--t1 { left: 12.5%; } .zone--t2 { left: 37.5%; } .zone--t3 { left: 62.5%; } .zone--t4 { left: 87.5%; }
.zone--la, .zone--lb, .zone--lc { left: 0; }
.zone--la { top: 16.6%; } .zone--lb { top: 50%; } .zone--lc { top: 83.3%; }
.sheet-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(150 * var(--u)), 34%);
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
}
.dwg--main { grid-row: 1 / span 2; width: 100%; height: auto; }
.dwg--detail { width: 100%; height: auto; padding: calc(4 * var(--u)) calc(10 * var(--u)) 0 calc(4 * var(--u)); }
.titleblock {
  align-self: end;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
  font-size: calc(11.5 * var(--u)); line-height: 1.3;
}
.titleblock > div { padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u)); border-right: 0; border-bottom: 1px solid var(--grid); }
.titleblock > div:nth-child(odd) { border-right: 1px solid var(--grid); }
.titleblock dt { color: var(--slate); font-size: calc(12 * var(--u)); }
.titleblock dd { font-family: var(--mono); font-size: calc(12 * var(--u)); }
.titleblock .tb-mark { grid-column: 1 / -1; border-right: 0; padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); }
.titleblock .tb-mark dd { font-family: var(--sans); font-weight: 600; font-size: calc(22 * var(--u)); letter-spacing: .06em; line-height: 1; }
.titleblock .tb-title { grid-column: 1 / -1; border-right: 0; }
.titleblock .tb-title dd { font-family: var(--sans); font-size: calc(12.5 * var(--u)); font-weight: 500; }
.titleblock > div:last-child, .titleblock > div:nth-last-child(2) { border-bottom: 0; }
.sheet figcaption { font-size: calc(14 * var(--u)); color: var(--slate); margin-top: calc(10 * var(--u)); }

/* drawing strokes */
.dwg text { font-family: var(--sans); }
.ln-obj { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ln-cut { stroke: var(--ink); stroke-width: .9; }
.ln-thin { fill: none; stroke: var(--ink); stroke-width: .6; }
.ln-mid { fill: none; stroke: var(--ink); stroke-width: 1; }
.ln-floor { stroke: var(--ink); stroke-width: 1.6; }
.ln-fin { stroke: var(--slate); stroke-width: .7; }
.ln-hidden { stroke: var(--slate); stroke-width: .9; stroke-dasharray: 4 3; }
.ln-dim { stroke: var(--slate); stroke-width: .6; }
.ln-tick { stroke: var(--ink); stroke-width: 1; fill: none; }
.ln-lead { stroke: var(--slate); stroke-width: .6; }
.ln-pipe { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.ln-dash { stroke-dasharray: 3 2; }
.ln-plate { stroke: var(--ink); stroke-width: 3; }
.ln-finA { stroke: var(--ink); stroke-width: 1.6; }
.ln-tube { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.4; }
.hatch-line { stroke: var(--hatch); stroke-width: .7; }
.fill-paper { fill: var(--sheet); }
.fill-ink { fill: var(--ink); }
.fill-amber { fill: var(--amber); }
.t-note { font-size: 11.5px; fill: var(--ink); }
.t-dim { font-family: var(--mono) !important; font-size: 10.5px; fill: var(--ink); }
.t-dim--lg { font-size: 12px; }
.t-title { font-size: 11.5px; font-weight: 600; fill: var(--ink); }

/* The sheet plots itself with CSS only (no library, no JS): the frame and title block are there at
   first paint, linework draws from ~0.1 s and the last label lands by ~1.3 s. Without animation
   support, or with reduced motion, the drawing is simply static. */
@media (prefers-reduced-motion: no-preference) {
  .sheet .dw-draw, .sheet .dw-fin, .sheet .dw-ext { stroke-dasharray: 1 1; }
  .sheet .dw-draw { animation: plot .62s cubic-bezier(.45, 0, .25, 1) both; animation-delay: calc(60ms + var(--i, 0) * 22ms); }
  .sheet .dw-draw.dw-filled { animation: plot .62s cubic-bezier(.45, 0, .25, 1) both, fill-in .34s ease-out both; animation-delay: calc(60ms + var(--i, 0) * 22ms), 560ms; }
  .sheet .dw-fin { animation: plot-up .46s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(260ms + var(--i, 0) * 18ms); }
  .sheet .dw-ext { animation: plot .26s ease-out both; animation-delay: 600ms; }
  .sheet .dw-dim { transform-box: fill-box; transform-origin: center; animation: grow .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: 680ms; }
  .sheet .dw-static { animation: fade-in .3s ease-out both; animation-delay: 30ms; }
  .sheet .dw-fade { animation: fade-in .3s ease-out both; animation-delay: calc(720ms + var(--i, 0) * 12ms); }
}
@keyframes plot { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes plot-up { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scale(0); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fill-in { from { fill-opacity: 0; } to { fill-opacity: 1; } }

/* key figures */
.figs-wrap { margin-top: calc(56 * var(--u)); }
.figs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--grid);
}
.fig { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: calc(6 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)) 0; }
.fig + .fig { padding-left: calc(20 * var(--u)); border-left: 1px solid var(--grid); }
.fig dt { font-size: calc(14 * var(--u)); line-height: 1.4; color: var(--slate); max-width: 22ch; }
.fig dd { display: flex; align-items: baseline; gap: calc(6 * var(--u)); }
.fig-num { font-family: var(--mono); font-size: clamp(calc(34 * var(--u)), 3.4vw, calc(48 * var(--u))); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig-unit { font-family: var(--mono); font-size: calc(18 * var(--u)); color: var(--slate); }
.demo-note { font-size: calc(13.5 * var(--u)); color: var(--slate); margin-top: calc(10 * var(--u)); }

/* ---------- 2 performance ---------- */
.perf-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(20 * var(--u)) calc(36 * var(--u));
  padding-bottom: calc(22 * var(--u)); margin-bottom: calc(26 * var(--u)); border-bottom: 1px solid var(--grid);
}
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; min-width: 0; }
.seg legend { font-size: calc(13 * var(--u)); color: var(--slate); padding: 0; margin-bottom: calc(8 * var(--u)); }
.seg label { position: relative; display: block; }
.seg label + label { margin-left: -1px; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.seg span {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(44 * var(--u)); padding: 0 calc(18 * var(--u)); min-width: calc(64 * var(--u));
  border: 1px solid var(--slate); background: var(--sheet);
  font-size: calc(15 * var(--u)); font-weight: 500; color: var(--ink);
  transition: background-color .18s ease, color .18s ease;
  font-variant-numeric: tabular-nums;
}
.seg label:first-of-type span { border-radius: var(--radius) 0 0 var(--radius); }
.seg label:last-of-type span { border-radius: 0 var(--radius) var(--radius) 0; }
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); position: relative; z-index: 1; }
.seg input:focus-visible + span { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); z-index: 2; position: relative; }
.seg label:hover input:not(:checked) + span { background: var(--tint); }
.seg--sm span { min-height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(14.5 * var(--u)); }

.range { flex: 1 1 calc(280 * var(--u)); min-width: calc(240 * var(--u)); max-width: calc(460 * var(--u)); }
.range > label { display: block; font-size: calc(13 * var(--u)); color: var(--slate); margin-bottom: calc(8 * var(--u)); }
.range-row { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.range-out { font-family: var(--mono); font-size: calc(16 * var(--u)); min-width: 5.2em; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: calc(44 * var(--u)); background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: calc(2 * var(--u)); background: var(--ink); }
input[type="range"]::-moz-range-track { height: calc(2 * var(--u)); background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(-10 * var(--u)); border-radius: 50%; background: var(--sheet); border: calc(2 * var(--u)) solid var(--ink); box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--sheet), inset 0 0 0 calc(11 * var(--u)) var(--amber); }
input[type="range"]::-moz-range-thumb { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: var(--amber); border: calc(2 * var(--u)) solid var(--ink); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }
input[type="range"]:focus-visible::-moz-range-thumb { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }

.perf-main { display: grid; grid-template-columns: minmax(0, 1fr) calc(320 * var(--u)); gap: calc(32 * var(--u)); align-items: start; }
.chart { margin: 0; min-width: 0; }
.chart-box { position: relative; width: 100%; background: var(--sheet); border: 1px solid var(--grid); }
.js .chart-box { min-height: calc(280 * var(--u)); }
.js .no-js-chart { display: none; }
.chart-svg { width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.chart-cap { font-size: calc(14 * var(--u)); color: var(--slate); margin-top: calc(10 * var(--u)); max-width: 70ch; }
.demo-flag { display: inline-block; font-size: calc(12.5 * var(--u)); font-weight: 500; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius); padding: 0 calc(6 * var(--u)); margin-right: calc(6 * var(--u)); line-height: calc(20 * var(--u)); }
.no-js-chart { padding: calc(24 * var(--u)); color: var(--slate); font-size: calc(15 * var(--u)); }

.ch-grid { stroke: var(--grid); stroke-width: 1; }
.ch-axis { stroke: var(--ink); stroke-width: 1; }
.ch-tick { font-family: var(--mono); font-size: calc(12 * var(--u)); fill: var(--slate); }
.ch-title { font-family: var(--sans); font-size: calc(12.5 * var(--u)); fill: var(--slate); }
.ch-band { fill: url(#band-hatch); }
.ch-band-edge { stroke: var(--hatch); stroke-width: .75; stroke-dasharray: 2 3; }
.ch-band-label { font-family: var(--sans); font-size: calc(11.5 * var(--u)); fill: var(--slate); }
.band-line { stroke: var(--grid); stroke-width: 1; }
.ch-curve { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-opacity: .42; transition: stroke .25s ease, stroke-opacity .25s ease; stroke-linejoin: round; }
.ch-curve.is-active { stroke: var(--amber); stroke-width: 3; stroke-opacity: 1; }
.ch-clabel { font-family: var(--mono); font-size: calc(12 * var(--u)); fill: var(--slate); transition: fill .25s ease; }
.ch-clabel.is-active { fill: var(--ink); font-weight: 500; }
.ch-cross { stroke: var(--ink); stroke-width: .8; stroke-dasharray: 3 3; }
.ch-marker { fill: var(--amber); stroke: var(--ink); stroke-width: 1.6; }
.ch-tag rect { fill: var(--ink); }
.ch-tag text { font-family: var(--mono); font-size: calc(12 * var(--u)); fill: var(--paper); }
.ch-hit { fill: transparent; cursor: crosshair; }

.readout { border: 1px solid var(--ink); background: var(--sheet); padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); }
.ro-label { font-size: calc(14.5 * var(--u)); color: var(--ink); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ro-key { width: calc(14 * var(--u)); height: calc(3 * var(--u)); background: var(--amber); flex: none; }
.ro-value { display: flex; align-items: baseline; gap: calc(8 * var(--u)); margin: calc(10 * var(--u)) 0 calc(2 * var(--u)); }
.ro-num { font-family: var(--mono); font-size: calc(64 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ro-unit { font-family: var(--mono); font-size: calc(22 * var(--u)); color: var(--slate); }
.ro-sub { font-size: calc(14 * var(--u)); color: var(--slate); margin-bottom: calc(16 * var(--u)); }
.ro-rows { border-top: 1px solid var(--grid); }
.ro-rows div { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.3em; gap: 0 calc(10 * var(--u)); align-items: baseline; padding: calc(9 * var(--u)) 0; border-bottom: 1px solid var(--grid); }
.ro-rows dt { font-size: calc(13.5 * var(--u)); color: var(--slate); line-height: 1.35; }
.ro-rows dd { display: contents; }
.ro-rows .v { font-family: var(--mono); font-size: calc(15 * var(--u)); text-align: right; font-variant-numeric: tabular-nums; }
.ro-rows .u { font-family: var(--mono); font-size: calc(13 * var(--u)); color: var(--slate); }
.ro-rated { font-size: calc(13 * var(--u)); color: var(--slate); margin-top: calc(12 * var(--u)); line-height: 1.45; }

.perf-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(48 * var(--u)); margin-top: calc(48 * var(--u)); }
.perf-notes h3 { font-size: calc(16 * var(--u)); font-weight: 600; margin-bottom: calc(8 * var(--u)); }
.notes { border-top: 1px solid var(--ink); margin-bottom: calc(14 * var(--u)); }
.notes div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: 1px solid var(--grid); }
.notes dt { font-size: calc(14 * var(--u)); color: var(--slate); }
.notes dd { font-size: calc(15 * var(--u)); line-height: 1.5; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; font-size: calc(15 * var(--u)); font-variant-numeric: tabular-nums; }
.data caption { caption-side: top; text-align: left; font-size: calc(14 * var(--u)); color: var(--slate); padding-bottom: calc(10 * var(--u)); }
.data th, .data td { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--grid); vertical-align: baseline; }
.data thead th { font-size: calc(13 * var(--u)); font-weight: 500; color: var(--slate); text-align: right; border-bottom: 1px solid var(--ink); line-height: 1.3; }
.data thead th span { display: block; font-family: var(--mono); font-size: calc(12 * var(--u)); font-weight: 400; }
.data .l { text-align: left; }
.data tbody th { text-align: left; font-weight: 400; }
.data td { text-align: right; font-family: var(--mono); white-space: nowrap; }
.data td.c { white-space: normal; }
.data td.u { text-align: left; color: var(--slate); font-size: calc(13.5 * var(--u)); padding-left: calc(2 * var(--u)); width: 4.5em; }
.data td.c { text-align: left; font-family: var(--sans); color: var(--slate); font-size: calc(14 * var(--u)); }
.data td.l { text-align: left; }
.data th:first-child, .data td:first-child { padding-left: 0; }
.data--perf tbody th { font-family: var(--mono); }
.data--perf .is-rated th, .data--perf .is-rated td { background: var(--amber-tint); }
.data--perf .is-rated th { box-shadow: inset calc(3 * var(--u)) 0 0 var(--amber); padding-left: calc(10 * var(--u)); }
.data--perf .is-col { color: var(--ink); font-weight: 500; }
.data--perf td:not(.is-col) { color: var(--slate); }
.data--perf thead th.is-col { color: var(--ink); }

/* ---------- 3 system ---------- */
.schem-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(16 * var(--u)) calc(32 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(22 * var(--u)); font-size: calc(14 * var(--u)); color: var(--slate); }
.legend li { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.lg { display: inline-block; width: calc(28 * var(--u)); height: calc(10 * var(--u)); position: relative; }
.lg--s { background: linear-gradient(var(--ink), var(--ink)) center / 100% calc(2 * var(--u)) no-repeat; }
.lg--s::after { content: ""; position: absolute; left: calc(10 * var(--u)); top: 1px; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--amber); }
.lg--r { background: repeating-linear-gradient(90deg, var(--slate) 0 calc(6 * var(--u)), transparent calc(6 * var(--u)) calc(10 * var(--u))) center / 100% calc(2 * var(--u)) no-repeat; }
.lg--r::after { content: ""; position: absolute; left: calc(11 * var(--u)); top: calc(2 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--slate); }
.lg--c { background: #EEF1F5; border: 1px solid #C9D1DC; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

.schem { margin: 0; border: 1px solid var(--grid); background: var(--sheet); }
.schem-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.schem-svg { width: 100%; height: auto; min-width: 860px; max-height: calc(100vh - 200 * var(--u)); }
.schem-hint { display: none; font-size: calc(13 * var(--u)); color: var(--slate); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-top: 1px solid var(--grid); }
.schem-svg text { font-family: var(--sans); }
.slab, .part { fill: var(--grid-2); }
.earth { opacity: .7; }
.sh-line { stroke: var(--grid); stroke-width: 1; }
.ground { stroke: var(--ink); stroke-width: 1.2; }
.ceil { stroke: var(--slate); stroke-width: .9; }
.shaft { fill: none; stroke: var(--slate); stroke-width: .8; stroke-dasharray: 3 3; }
.chase { fill: #EEF1F5; stroke: #C9D1DC; stroke-width: .8; transition: fill .2s ease; }
.s-zone { font-size: 12px; font-weight: 600; fill: var(--slate); }
.s-room { font-size: 12.5px; fill: var(--slate); }
.s-room .rno { font-family: var(--mono); fill: var(--ink); font-size: 12px; }
.s-note { font-size: 11.5px; fill: var(--slate); }
.pipe { fill: none; stroke-width: 2; stroke-linejoin: round; }
.pipe--s { stroke: var(--ink); }
.pipe--r { stroke: var(--slate); stroke-dasharray: 6 4; }
.arrow { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrow--s { stroke: var(--ink); }
.arrow--r { stroke: var(--slate); }
.pk--s { fill: var(--amber); }
.pk--r { fill: var(--slate); }
.tag-bg { fill: var(--sheet); stroke: var(--grid); }
.s-tag { font-family: var(--mono) !important; font-size: 11px; fill: var(--ink); }
.c-body { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; transition: fill .2s ease; }
.c-line { stroke: var(--ink); stroke-width: 1; fill: none; }
.c-line--r { stroke: var(--slate); stroke-dasharray: 4 3; }
.c-fill { fill: var(--ink); }
.c-fin { stroke: var(--slate); stroke-width: .8; fill: none; }
.c-lead { stroke: var(--slate); stroke-width: .8; }
.s-label { font-size: 12.5px; font-weight: 500; fill: var(--ink); }
.s-mono { font-family: var(--mono) !important; font-size: 11px; fill: var(--slate); }
.comp { cursor: pointer; outline: none; }
.hit { fill: transparent; stroke: transparent; stroke-width: 1.5; stroke-dasharray: 4 3; transition: stroke .2s ease; }
.comp.is-active .hit { stroke: var(--amber); }
.comp.is-active .c-body { fill: var(--amber-tint); }
.comp:focus-visible .hit { stroke: var(--ink); stroke-width: 2; }
.schem-svg.pipes-active .chase { fill: var(--amber-tint); }

.comp-readout { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(260 * var(--u)), 1fr)); gap: 0 calc(32 * var(--u)); margin-top: calc(18 * var(--u)); }
.cr { padding: calc(16 * var(--u)) 0; border-top: 1px solid var(--ink); }
.cr h3 { font-size: calc(18 * var(--u)); font-weight: 600; margin-bottom: calc(4 * var(--u)); }
.cr p { font-size: calc(15 * var(--u)); color: var(--slate); max-width: 52ch; margin-bottom: calc(10 * var(--u)); line-height: 1.5; }
.comp-readout.is-single { display: block; }
.comp-readout.is-single .cr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: calc(4 * var(--u)) calc(48 * var(--u)); align-items: start; padding-top: calc(18 * var(--u)); min-height: calc(196 * var(--u)); }
.comp-readout.is-single .cr[hidden] { display: none; }
.comp-readout.is-single .cr h3 { grid-column: 1; }
.comp-readout.is-single .cr p { grid-column: 1; }
.comp-readout.is-single .cr table { grid-column: 2; grid-row: 1 / span 2; }
.data--spec th, .data--spec td { padding: calc(8 * var(--u)) calc(10 * var(--u)); }
.data--spec tbody th { font-size: calc(14.5 * var(--u)); }

/* ---------- 4 references ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.chip {
  min-height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); border: 1px solid var(--slate); border-radius: var(--radius);
  background: var(--sheet); cursor: pointer; font-size: calc(15 * var(--u)); font-weight: 500;
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  transition: background-color .18s ease, color .18s ease;
}
.chip .c { font-family: var(--mono); font-size: calc(13 * var(--u)); color: var(--slate); font-weight: 400; }
.chip:hover { background: var(--tint); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] .c { color: #B9C2D0; }
.filter-count { margin-left: auto; font-size: calc(14 * var(--u)); color: var(--slate); font-family: var(--mono); }
.refs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(290 * var(--u)), 1fr)); gap: calc(24 * var(--u)); }
.ref { background: var(--sheet); border: 1px solid var(--grid); display: flex; flex-direction: column; }
.ref[hidden] { display: none; }
.ref-fig { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grid-2); }
.ref-fig img { width: 100%; height: 100%; object-fit: cover; }
.illus { position: absolute; left: calc(10 * var(--u)); bottom: calc(10 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1; padding: calc(5 * var(--u)) calc(7 * var(--u)); background: rgba(250, 250, 248, .94); color: var(--ink); border-radius: var(--radius); }
.ref-body { padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); display: flex; flex-direction: column; flex: 1; }
.ref-cat { font-size: calc(13 * var(--u)); color: var(--slate); }
.ref h3 { font-size: calc(18 * var(--u)); font-weight: 600; line-height: 1.3; margin: calc(2 * var(--u)) 0 calc(2 * var(--u)); }
.ref-city { font-size: calc(15 * var(--u)); color: var(--slate); }
.ref-data { display: grid; grid-template-columns: 1.3fr 1fr 1fr; margin-top: auto; padding-top: calc(14 * var(--u)); }
.ref-data div { border-top: 1px solid var(--grid); padding-top: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
.ref-data dt { font-size: calc(12.5 * var(--u)); color: var(--slate); }
.ref-data dd { font-family: var(--mono); font-size: calc(15 * var(--u)); font-variant-numeric: tabular-nums; }
.ref-data .u { font-size: calc(12 * var(--u)); color: var(--slate); margin-left: calc(3 * var(--u)); }

/* ---------- 5 specification ---------- */
.tablist { position: relative; display: flex; border-bottom: 1px solid var(--grid); margin-bottom: calc(28 * var(--u)); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist [role="tab"] {
  appearance: none; background: none; border: 0; cursor: pointer;
  min-height: calc(48 * var(--u)); padding: 0 calc(20 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; color: var(--slate); white-space: nowrap;
  transition: color .2s ease;
}
.tablist [role="tab"]:first-of-type { padding-left: 0; }
.tablist [role="tab"][aria-selected="true"] { color: var(--ink); }
.tablist [role="tab"]:hover { color: var(--ink); }
.tablist [role="tab"]:focus-visible { outline-offset: calc(-4 * var(--u)); }
.tab-ink { position: absolute; left: 0; bottom: 0; height: calc(2 * var(--u)); width: 0; background: var(--amber); pointer-events: none; }
.tabs:not(.is-js) .tablist { display: none; }
.tabs:not(.is-js) .tabpanel + .tabpanel { margin-top: calc(48 * var(--u)); }
.tp-title { font-size: calc(20 * var(--u)); font-weight: 600; margin-bottom: calc(12 * var(--u)); }
.tabs.is-js .tp-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabpanel:focus-visible { outline-offset: calc(6 * var(--u)); }
.data--models td:not(.u) { width: 14%; }
.notes--spec { margin-top: calc(28 * var(--u)); max-width: calc(820 * var(--u)); }
.notes--spec div { grid-template-columns: 10em minmax(0, 1fr); }
.seq-title { font-size: calc(16 * var(--u)); font-weight: 600; margin: calc(28 * var(--u)) 0 calc(8 * var(--u)); }
.seq { list-style: none; counter-reset: s; max-width: calc(760 * var(--u)); border-top: 1px solid var(--ink); }
.seq li { counter-increment: s; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); padding: calc(10 * var(--u)) 0; border-bottom: 1px solid var(--grid); font-size: calc(15.5 * var(--u)); }
.seq li::before { content: counter(s); font-family: var(--mono); color: var(--slate); font-size: calc(14 * var(--u)); }

/* ---------- 6 downloads ---------- */
.dl-photo { width: 100%; aspect-ratio: 3 / 1; max-height: calc(380 * var(--u)); overflow: hidden; margin-bottom: calc(28 * var(--u)); background: var(--grid-2); }
.dl-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.data--files tbody th { font-size: calc(16 * var(--u)); }
.data--files td.fmt { font-size: calc(13 * var(--u)); letter-spacing: .02em; }
.data--files td:nth-child(3) { width: 4em; }
.dl {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(44 * var(--u)); padding: 0 calc(2 * var(--u));
  font-family: var(--sans); font-size: calc(15 * var(--u)); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.dl::before {
  content: ""; width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v8M3.5 5.5 7 9l3.5-3.5M1.5 12.5h11' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v8M3.5 5.5 7 9l3.5-3.5M1.5 12.5h11' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dl:hover { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: calc(2 * var(--u)); }
.data--files tbody tr { transition: background-color .15s ease; }
.data--files tbody tr:hover { background: var(--tint); }

/* ---------- 7 support ---------- */
.support { display: grid; grid-template-columns: minmax(0, 1fr) calc(340 * var(--u)); gap: calc(48 * var(--u)); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 * var(--u)) calc(20 * var(--u)); }
.field { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: calc(14 * var(--u)); font-weight: 500; }
.opt { color: var(--slate); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: calc(48 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--slate); border-radius: var(--radius); background: var(--sheet);
  font-size: calc(16 * var(--u)); line-height: 1.4;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2314213D' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right calc(14 * var(--u)) center; background-size: calc(12 * var(--u)) calc(8 * var(--u)); padding-right: calc(36 * var(--u)); }
.field textarea { resize: vertical; min-height: calc(110 * var(--u)); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field ::placeholder { color: #6B7A8D; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--u)) calc(20 * var(--u)); margin-top: calc(6 * var(--u)); }
.form-status { font-size: calc(15 * var(--u)); color: var(--ink); max-width: 52ch; }
.form-status:not(:empty) { padding-left: calc(12 * var(--u)); border-left: calc(3 * var(--u)) solid var(--amber); }
.contact { border-top: 1px solid var(--ink); padding-top: 0; }
.contact picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.contact h3 { font-size: calc(18 * var(--u)); font-weight: 600; margin: calc(18 * var(--u)) 0 calc(8 * var(--u)); }
.contact-list div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: calc(12 * var(--u)); padding: calc(9 * var(--u)) 0; border-bottom: 1px solid var(--grid); font-size: calc(15 * var(--u)); }
.contact-list dt { color: var(--slate); font-size: calc(14 * var(--u)); }
.contact-list a { display: inline-block; padding: calc(2 * var(--u)) 0; }
.contact .btn { margin-top: calc(20 * var(--u)); }

/* ---------- footer ---------- */
.foot {
  margin-top: calc(140 * var(--u)); background: var(--ink); color: #E9EDF3;
  /* full-bleed band; its text lines up with the content column */
  padding: calc(44 * var(--u)) max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter))) calc(40 * var(--u)) calc(max(0px, (100% - var(--shell)) / 2) + var(--index-w) + var(--gutter));
}
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(10 * var(--u)) calc(28 * var(--u)); padding-bottom: calc(22 * var(--u)); border-bottom: 1px solid #34436A; margin-bottom: calc(18 * var(--u)); }
.foot .wordmark--foot { font-size: calc(28 * var(--u)); padding: 0; min-height: 0; color: var(--paper); }
.foot-top p { font-size: calc(15 * var(--u)); color: #C6CEDA; }
.foot-top-link { margin-left: auto; font-size: calc(15 * var(--u)); color: var(--paper); display: inline-flex; align-items: center; min-height: calc(44 * var(--u)); }
.foot-demo { font-size: calc(15 * var(--u)); color: var(--paper); margin-bottom: calc(8 * var(--u)); }
.foot-small { font-size: calc(13.5 * var(--u)); color: #B9C2D0; max-width: 90ch; }
.foot-small + .foot-small { margin-top: calc(6 * var(--u)); }
.foot :focus-visible { outline-color: var(--paper); }

/* ---------- responsive ---------- */
@media (min-width: 1680px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
@media (max-width: 1279px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-text > p { max-width: 60ch; }
  .glance { max-width: calc(760 * var(--u)); }
  .sheet { max-width: calc(760 * var(--u)); }
  .perf-main { grid-template-columns: minmax(0, 1fr) calc(280 * var(--u)); }
}
@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .toc-btn {
    display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(44 * var(--u)); padding: 0 calc(12 * var(--u));
    border: 1px solid var(--grid); border-radius: var(--radius); background: var(--sheet); cursor: pointer; font-size: calc(14 * var(--u));
  }
  .toc-btn-label { color: var(--slate); }
  .toc-btn-current { font-weight: 500; }
  .toc-btn::after { content: ""; width: calc(9 * var(--u)); height: calc(6 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2314213D' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
  .toc-open .toc-btn::after { transform: rotate(180deg); }
  .doctitle { display: none; }
  .index {
    position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--grid);
    padding: calc(20 * var(--u)) var(--gutter);
  }
  .index-meta, .index-thumb { display: none; }
  .js .index {
    position: fixed; top: var(--top); left: 0; right: 0; z-index: 39;
    max-height: calc(100vh - var(--top)); overflow-y: auto;
    background: var(--paper); box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-16 * var(--u)) rgba(20, 33, 61, .35);
    visibility: hidden; opacity: 0; transform: translateY(calc(-6 * var(--u)));
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .js .toc-open .index { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
  .index-list a { min-height: calc(48 * var(--u)); font-size: calc(16 * var(--u)); }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: calc(10 * var(--u)); }
  .perf-main { grid-template-columns: minmax(0, 1fr); }
  .readout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 calc(28 * var(--u)); }
  .readout .ro-label, .readout .ro-value, .readout .ro-sub { grid-column: 1; }
  .readout .ro-rows { grid-column: 2; grid-row: 1 / span 4; }
  .readout .ro-rated { grid-column: 1; }
  .perf-foot { grid-template-columns: minmax(0, 1fr); gap: calc(32 * var(--u)); }
  .support { grid-template-columns: minmax(0, 1fr); }
  .contact { max-width: calc(560 * var(--u)); }
  .comp-readout.is-single .cr { grid-template-columns: minmax(0, 1fr); }
  .comp-readout.is-single .cr table { grid-column: 1; grid-row: auto; }
  .schem-hint { display: block; }
  .foot { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (max-width: 767px) {
  body { font-size: calc(16 * var(--u)); }
  .sec { padding-top: calc(88 * var(--u)); }
  .sec--overview { padding-top: calc(28 * var(--u)); }
  .sec-head h2 { font-size: calc(28 * var(--u)); }
  .sec-sum { font-size: calc(16.5 * var(--u)); }
  h1 { margin-bottom: calc(28 * var(--u)); }
  .lede { font-size: calc(17.5 * var(--u)); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3) { padding-left: 0; border-left: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid var(--grid); }
  .readout { display: block; }
  .ro-num { font-size: calc(56 * var(--u)); }
  .toplink { display: none; }
  .glance div { grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--u)); }
  .glance dd { font-size: calc(16 * var(--u)); }
  .notes div, .notes--spec div { grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--u)); }
  .notes dd { font-size: calc(16 * var(--u)); }
  .perf-controls { gap: calc(18 * var(--u)) calc(24 * var(--u)); }
  .range { flex-basis: 100%; max-width: none; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .dl-photo { aspect-ratio: 2 / 1; }
  .data--files thead th:nth-child(5), .data--files td:nth-child(5) { display: none; }
  .tablist [role="tab"] { padding: 0 calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
  .contact-list div { grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--u)); }
  .foot-top-link { margin-left: 0; }
  .data--spec tbody th, .data tbody th { font-size: calc(15 * var(--u)); }
}
@media (max-width: 559px) {
  .topbar { gap: calc(12 * var(--u)); padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
  .topbar-links .btn { display: none; }
  .toc-btn { margin-left: auto; }
  main, .foot { padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
  .index { padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
  .sheet-frame { padding: calc(12 * var(--u)); }
  .sheet-frame::before { inset: calc(12 * var(--u)); }
  .zone { font-size: calc(9 * var(--u)); width: calc(12 * var(--u)); line-height: calc(12 * var(--u)); }
  .sheet-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; padding: calc(8 * var(--u)) 0 0 calc(6 * var(--u)); }
  .dwg--main { grid-column: 1 / -1; grid-row: 1; }
  .dwg--detail { grid-column: 1; grid-row: 2; padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) 0; align-self: end; }
  .titleblock { grid-column: 2; grid-row: 2; }
  .figs { grid-template-columns: minmax(0, 1fr); }
  .fig + .fig { padding-left: 0; border-left: 0; border-top: 1px solid var(--grid); }
  .fig { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) 0; }
  .fig dt { max-width: 18ch; }
  .fig-num { font-size: calc(34 * var(--u)); }
  .filter-count { width: 100%; margin-left: 0; }
  .data th, .data td { padding: calc(9 * var(--u)) calc(8 * var(--u)); }
  .data--models { font-size: calc(14 * var(--u)); }
  .data--models tbody th { font-size: calc(14 * var(--u)); }
  .data--files .fmt { display: none; }
  .data--files .dl { font-size: 0; gap: 0; width: calc(44 * var(--u)); justify-content: center; }
  .data--files .dl::before { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .data--files thead th:nth-child(2) { display: none; }
  .actions .btn { flex: 1 1 auto; }
}

/* reduced motion: static and stacked */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media (max-width: 559px) {
  .t-note { font-size: 13px; }
  .t-dim { font-size: 12px; }
  .t-title { font-size: 12.5px; }
}

/* ---------- language switch and Simplified Chinese (2026-09-29) ---------- */
/* Noto Sans SC, subset to the page's Chinese strings (fonts/, SIL OFL). Used only under :lang(zh), so English never loads it. */
@font-face { font-family: "GLN Sans SC"; src: url(fonts/noto-sans-sc-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GLN Sans SC"; src: url(fonts/noto-sans-sc-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "GLN Sans SC"; src: url(fonts/noto-sans-sc-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "GLN SC Fallback"; src: local("PingFang SC"), local("Microsoft YaHei"), local("Hiragino Sans GB"), local("Source Han Sans SC"); size-adjust: 100%; }
html:lang(zh) {
  --sans: "IBM Plex Sans", "GLN Sans SC", "GLN SC Fallback", "GLN Sans Fallback", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "GLN Sans SC", "GLN SC Fallback", "GLN Mono Fallback", ui-monospace, monospace;
}
.lang { order: 10; display: flex; align-items: center; flex: none; }
.lang button {
  min-width: calc(44 * var(--u)); min-height: 44px; height: calc(44 * var(--u)); padding: 0 calc(8 * var(--u));
  border: 0; background: none; color: var(--slate); font: inherit; font-size: calc(14 * var(--u)); cursor: pointer;
  text-decoration: none; border-bottom: calc(2 * var(--u)) solid transparent;
}
.lang button + button { border-left: 0; }
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--amber); }
.lang button:hover { color: var(--ink); }
@media (max-width: 559px) { .topbar-links { margin-left: 0; } .lang button { padding: 0 calc(4 * var(--u)); } }

:lang(zh) body, html:lang(zh) body { line-height: 1.8; }
:lang(zh) h1 { font-size: clamp(calc(32 * var(--u)), 3.9vw, calc(58 * var(--u))); line-height: 1.28; letter-spacing: 0; max-width: 14.5em; text-wrap: balance; }
:lang(zh) .sec-head h2 { font-size: calc(32 * var(--u)); line-height: 1.35; letter-spacing: 0; text-wrap: balance; }
:lang(zh) .sec-sum, :lang(zh) .lede { line-height: 1.85; text-wrap: pretty; }
:lang(zh) .hero-text > p { max-width: 32em; }
:lang(zh) .sec-sum { max-width: 36em; }
:lang(zh) .glance dd, :lang(zh) .notes dd, :lang(zh) .cr p, :lang(zh) .seq li { line-height: 1.8; }
:lang(zh) .glance div { grid-template-columns: 6em minmax(0, 1fr); }
:lang(zh) .wordmark, :lang(zh) .titleblock .tb-mark dd { letter-spacing: .06em; }
:lang(zh) .btn, :lang(zh) .chip, :lang(zh) .toplink, :lang(zh) .data--files td.fmt { letter-spacing: 0; }
:lang(zh) em, :lang(zh) i { font-style: normal; }
@media (max-width: 767px) { :lang(zh) .sec-head h2 { font-size: calc(25 * var(--u)); } }
/* the language switch takes room in the phone top bar: the Contents button keeps only the current section, on one line */
@media (max-width: 559px) { .toc-btn-label { display: none; } .toc-btn-current { white-space: nowrap; } }