/* Cab Lab, round 2. One line (the air), two typefaces, eight sizes. */

/* ---------- tokens: no colour outside this block ---------- */
:root {
  --ink: #05060a;                    /* the page */
  --ink-2: #0a0c12;                  /* raised surfaces */
  --rule: rgba(236, 230, 214, .09);  /* hairlines */
  --rule-2: rgba(236, 230, 214, .2); /* outlines of controls */
  --bone: #ece6d6;                   /* text, panels, and source figures */
  --mute: #9a9ca6;                   /* secondary text */
  --dim: #5f636e;                    /* captions, axes */
  --ion: #7fe7ff;                    /* the air, and every model figure */
  --ion-a: rgba(127, 231, 255, .08); /* the air as a fill */
  --ion-b: rgba(127, 231, 255, .22);
  --ember: #ff7a45;                  /* measurement, only */
  --calc: #c9b8ff;                   /* arithmetic, only */
  --alarm: #ff6b6b;                  /* something the builder must not miss: a file that is not theirs */
  --alarm-a: rgba(255, 107, 107, .1);
  --glass: rgba(5, 6, 10, .78);      /* labels and controls over the 3D, the header */
  --white: #fff;                     /* the brightest light: a pulse, a cursor */
  --bone-1: rgba(236, 230, 214, .08);/* grid dots, sheet fill */
  --bone-2: rgba(236, 230, 214, .2); /* fins, dashed hints */
  --bone-3: rgba(236, 230, 214, .42);/* panel outlines in the drawings */
  --halo: rgba(28, 143, 176, .16);   /* the glow behind the 3D */

  /* the two typefaces: Geist for words, Geist Mono for figures and labels. Same family,
     same x-height: a figure set inside a sentence sits on the same line as its words. */
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  /* the type scale: 8 steps, size / line height. Three weights only: 300, 400, 500. */
  --label: 500 11px/16px var(--mono);     /* 1 labels, axes, buttons, chips: capitals, tracked */
  --data: 400 13px/20px var(--mono);      /* 2 figures in tables and readouts */
  --small: 400 13px/20px var(--sans);     /* 3 captions, conditions, help */
  --body: 400 16px/26px var(--sans);      /* 4 reading */
  --lead: 300 19px/30px var(--sans);      /* 5 the opening sentence of a section */
  --figure: 300 30px/34px var(--mono);    /* 6 key figures */
  --title: 300 40px/44px var(--sans);     /* 7 section titles */
  --display: 300 84px/80px var(--sans);   /* 8 the cabinet's name */

  --gut: clamp(16px, 3.4vw, 48px);
  --head: 56px;
  color-scheme: dark;
}
@media (max-width: 720px) {
  :root {
    --lead: 300 17px/27px var(--sans);
    --figure: 300 24px/28px var(--mono);
    --title: 300 30px/34px var(--sans);
    --display: 300 54px/52px var(--sans);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: var(--head); }
body { margin: 0; background: var(--ink); color: var(--bone); font: var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
svg, canvas { display: block; }
p, h1, h2, h3, figure { margin: 0; }
::selection { background: var(--ion); color: var(--ink); }

/* ---------- the scale, as classes ---------- */
.t-label { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.t-data { font: var(--data); font-variant-numeric: tabular-nums; }
.t-small { font: var(--small); color: var(--mute); }
.t-lead { font: var(--lead); color: var(--bone); }
h1 { font: var(--display); letter-spacing: -.045em; }
h2 { font: var(--title); letter-spacing: -.03em; }
h3 { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ---------- header ---------- */
.head { position: sticky; top: 0; z-index: 30; height: var(--head); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gut); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 17px/1 var(--sans); letter-spacing: -.02em; }
.brand i { font-style: normal; color: var(--ion); }
.mark .mk-frame { stroke: var(--bone); opacity: .5; }
.mark .mk-air { stroke: var(--ion); }
.mark .mk-end { fill: var(--ion); }
.head nav { display: flex; gap: clamp(14px, 2.6vw, 32px); }
.head nav a { text-decoration: none; }
.head nav a:hover { color: var(--bone); }

/* ---------- figures and their provenance: a line style says where a figure comes from ---------- */
.fig { display: inline-flex; align-items: baseline; gap: .2em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fig .v { font-family: var(--mono); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.fig-source .v { text-decoration-style: solid; text-decoration-color: var(--bone-3); }
.fig-model .v { text-decoration-style: dashed; }
.fig-measurement .v { text-decoration-style: dotted; text-decoration-thickness: 2px; }
.fig-calc .v { text-decoration-style: double; }
.figs .fig .v, .chart-read .fig .v { text-decoration: none; }
.fig .u { font: var(--label); letter-spacing: .04em; color: var(--mute); margin-left: .1em; }
.fig .pv { margin-left: .5em; align-self: center; }
.fig-model .v { color: var(--ion); }
.fig-measurement .v { color: var(--ember); }
.fig-calc .v { color: var(--calc); }
.pv { display: inline-flex; align-items: center; gap: 6px; font: var(--label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }
.pv b { font-weight: 500; }
.pv .g { fill: none; stroke-width: 1.5; overflow: visible; }
.pv .g .fill { stroke: none; }
.pv-source { color: var(--bone); } .pv-source .g { stroke: var(--bone); }
.pv-model { color: var(--ion); } .pv-model .g { stroke: var(--ion); }
.pv-measurement { color: var(--ember); } .pv-measurement .g .fill { fill: var(--ember); }
.pv-calc { color: var(--calc); } .pv-calc .g { stroke: var(--calc); }
.pv-alone { color: var(--mute); } .pv-alone .g { stroke: var(--mute); }

/* ---------- the opening: the cabinet in 3D, its name and its section ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 33vw, 500px); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "stage name" "stage side"; height: max(640px, calc(100svh - var(--head))); border-bottom: 1px solid var(--rule); }
.name { grid-area: name; padding: 30px var(--gut) 0 32px; border-left: 1px solid var(--rule); }
.name h1 { margin: 12px 0 14px; }
.name .t-lead { color: var(--mute); max-width: 24em; }
.side { grid-area: side; display: flex; flex-direction: column; gap: 14px; padding: 22px var(--gut) 22px 32px; border-left: 1px solid var(--rule); min-height: 0; }
.stage { grid-area: stage; position: relative; min-height: 0;
  background: radial-gradient(52% 56% at 50% 50%, var(--halo), transparent 72%); }
.stage .gl, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage canvas { cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pin { position: absolute; left: 0; top: 0; transition: opacity .4s; will-change: transform; opacity: 0; }
.pin i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px var(--ion-b), 0 0 14px var(--ion); }
.pin span { position: absolute; left: 10px; top: -24px; white-space: nowrap; font: var(--label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--glass); }
.pin.down span { top: 8px; }
.pin.st { transition: none; }
.pin.st i { display: none; }
.pin.st span { color: var(--ion); border-color: var(--ion-b); left: 16px; top: -10px; }
.tools { position: absolute; left: var(--gut); right: var(--gut); bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; z-index: 3; pointer-events: none; }
.tools > * { pointer-events: auto; }
.hint { position: absolute; top: 18px; left: var(--gut); right: var(--gut); margin: 0; color: var(--dim); pointer-events: none; }

button { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: var(--glass); border: 1px solid var(--rule-2);
  border-radius: 999px; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; }
button:hover { color: var(--bone); border-color: var(--mute); }
button .box { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 2px; }
button[aria-pressed="true"] { color: var(--bone); border-color: var(--bone); }
button[aria-pressed="true"] .box { background: var(--ion); border-color: var(--ion); box-shadow: 0 0 8px var(--ion); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--glass); }
.seg button { border: 0; background: none; padding: 7px 12px; }
.seg button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
button.go { color: var(--ion); border-color: var(--ion-b); }
button.go:hover { border-color: var(--ion); background: var(--ion-a); }
button.go svg { width: 14px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.tools .sep { flex: 1; }

/* the section and the strip */
.sec-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.sec-wrap svg { width: 100%; height: 100%; max-height: 100%; touch-action: pan-y; cursor: crosshair; }
.gd { fill: var(--bone-1); }
.sec-air { fill: var(--ion-a); }
.sec-part { fill: var(--ink-2); stroke: var(--bone-3); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.sec-fin { fill: none; stroke: var(--bone-2); stroke-dasharray: 3 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sec-frame { fill: none; stroke: var(--bone-3); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.air-core { fill: none; stroke: var(--ion); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.air-glow { fill: none; stroke: var(--ion); stroke-width: 22; opacity: .45; stroke-linejoin: round; stroke-linecap: round; }
.sec .tag { font: 500 27px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--dim); transition: fill .2s; }
.sec .tag.on { fill: var(--ion); }
.sec .face-t { fill: var(--bone); }
.face { fill: var(--ink); stroke: var(--white); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cs-bar { stroke: var(--white); stroke-width: 2.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--ion)); }
.cs-halo { fill: var(--ion-b); }
.cs-dot { fill: var(--white); }
.pl-front { fill: var(--white); filter: drop-shadow(0 0 6px var(--ion)) drop-shadow(0 0 16px var(--ion)); }
.pl-rear { fill: var(--ink); stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
circle.pl-rear { r: 13px; }

.readout { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 14px; min-height: 68px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); align-items: start; }
.readout > p { grid-column: 1 / -1; font: var(--small); color: var(--mute); }
.readout > div { display: flex; flex-direction: column; gap: 6px; }
.readout .k { font: var(--label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.readout .v-l { font: var(--data); color: var(--bone); }
.readout .fig { font: var(--data); }
.strip-wrap { position: relative; }
.strip { width: 100%; height: 76px; touch-action: pan-y; cursor: ew-resize; }
.strip .sb { fill: var(--ion-a); stroke: var(--ion-b); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .2s; }
.strip .sb.alt { fill: var(--ion-a); }
.strip .sb.on { fill: var(--ion-b); stroke: var(--ion); }
.strip .mid { stroke: var(--bone-2); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.strip .fc { stroke: var(--white); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.strip .tk { stroke: var(--dim); vector-effect: non-scaling-stroke; }
.strip .ax { display: none; }
.strip .scrub { stroke: var(--white); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--ion)); }
.strip rect.pl-front { fill: var(--white); }
.strip rect.pl-rear { fill: var(--ink); stroke: var(--white); }
.strip-keys { position: relative; height: 16px; margin-top: 4px; display: flex; justify-content: space-between; font: var(--label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.strip-faces { position: relative; height: 16px; font: var(--label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.strip-faces span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.strip-faces span + span { transform: translateX(-80%); }
.side .cap { display: flex; justify-content: space-between; gap: 12px; align-items: center; }

/* ---------- the page below ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.block { padding: clamp(64px, 8vw, 112px) 0 0; }
.block > .wrap > h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.block > .wrap > h3::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 6vw; align-items: end; margin-bottom: 36px; }
.intro p { color: var(--mute); max-width: 36em; }

/* key figures */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.figs > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.figs > div:nth-child(n+4) { border-top: 1px solid var(--rule); }
.figs > div { padding: 20px 18px 22px 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.figs > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.figs .fig { font: var(--figure); letter-spacing: -.02em; white-space: normal; flex-wrap: wrap; }
.figs .fig .pv { display: none; }
.figs .l { font: var(--small); color: var(--mute); }
.figs .k { margin-top: auto; }

/* charts */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chart { position: relative; }
.chart-svg { width: 100%; height: auto; touch-action: pan-y; overflow: visible; }
.chart-svg .gl { stroke: var(--rule); }
.chart-svg .ax { font: var(--label); font-size: 10px; letter-spacing: .06em; fill: var(--dim); }
.chart-svg .band { fill: var(--ion-a); }
.chart-svg .band-e { stroke: var(--ion-b); stroke-dasharray: 3 4; }
.chart-svg .band-l { stroke: var(--ion); stroke-opacity: .5; stroke-dasharray: 1 4; }
.chart-svg .band-t { font: var(--label); letter-spacing: .12em; fill: var(--ion); }
.chart-svg .c-model { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-dasharray: 10 3; stroke-linejoin: round; }
.chart-svg .c-glow { fill: none; stroke: var(--ion); stroke-width: 4; opacity: .9; }
.chart-svg .c-glow2 { fill: none; stroke: var(--ion); stroke-width: 10; opacity: .35; }
.chart-svg .c-other { fill: none; stroke: var(--mute); stroke-width: 1; stroke-dasharray: 5 4; opacity: .45; }
.chart-svg .c-alone { fill: none; stroke: var(--mute); stroke-width: 1.2; stroke-dasharray: 6 4; opacity: .55; }
.chart-svg .c-meas circle { fill: var(--white); }
.chart-svg .c-meas-glow circle { fill: var(--ember); }
.chart-svg .lab { font: var(--label); letter-spacing: .1em; text-transform: uppercase; fill: var(--mute); }
.chart-svg .nt { stroke: var(--ion); stroke-opacity: .5; stroke-dasharray: 2 3; }
.chart-svg .nt.meas { stroke: var(--ember); stroke-dasharray: 1 3; }
.chart-svg .cur line { stroke: var(--bone-3); }
.chart-svg .cur .dm { fill: var(--white); filter: drop-shadow(0 0 5px var(--ion)); }
.chart-svg .cur .da { fill: var(--mute); }
.chart-svg .cur .dme { fill: var(--white); filter: drop-shadow(0 0 5px var(--ember)); }
.chart-read { display: flex; flex-wrap: wrap; gap: 6px 22px; min-height: 22px; margin-top: 14px; font: var(--data); color: var(--mute); }
.chart-read .f { color: var(--bone); }
.chart-read .fig .v { font: var(--data); }
.chart-read .ion .fig .v { color: var(--ion); } .chart-read .mute .fig .v { color: var(--mute); } .chart-read .ember .fig .v { color: var(--ember); }
.keys { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.keys .pv { color: var(--mute); }
.note { margin-top: 26px; padding-left: 18px; border-left: 1px solid var(--ion-b); max-width: 52em; color: var(--mute); }
.note b { color: var(--bone); font-weight: 400; }
.two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px 4vw; align-items: start; }
table.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; padding: 11px 10px 11px 0; border-bottom: 1px solid var(--rule); font: var(--data); vertical-align: baseline; }
.cmp thead th { font: var(--label); color: var(--dim); }
.cmp tbody th { font: var(--small); color: var(--mute); }

/* build */
.need { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-bottom: 56px; }
.need > div { padding: 20px 20px 24px 0; display: flex; flex-direction: column; gap: 10px; }
.need > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.need .what { font: var(--lead); }
.need .fig { font: var(--data); }
.need p { color: var(--mute); font: var(--small); }
.steps { list-style: none; padding: 0; margin: 0 0 56px; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.steps li { padding: 20px 20px 24px 0; position: relative; }
.steps li + li { padding-left: 20px; border-left: 1px solid var(--rule); }
.steps li::before { counter-increment: s; content: '0' counter(s); display: block; font: var(--label); letter-spacing: .12em; color: var(--ion); margin-bottom: 14px; }
.steps b { display: block; font-weight: 400; color: var(--bone); margin-bottom: 8px; }
.steps p { color: var(--mute); font: var(--small); }
.steps .warn { display: inline-block; margin-top: 10px; font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); border: 1px solid var(--rule-2); padding: 3px 7px; border-radius: 3px; }
.sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 20px; }
.sheets figure svg { width: 100%; height: auto; }
.sheets figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; font: var(--data); color: var(--dim); }
.sheets figcaption b { font-weight: 400; color: var(--bone); }
.cnc-sheet { fill: var(--bone-1); stroke: var(--bone-3); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cnc-part { fill: var(--ion-a); stroke: var(--ion); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cnc-eng { stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.cnc-part:hover { fill: var(--ion-b); }
.files { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 56px; }
.files span { font: var(--data); color: var(--mute); border: 1px solid var(--rule-2); border-radius: 4px; padding: 5px 9px; }
details.list { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
details.list summary { cursor: pointer; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; }
details.list summary::after { content: '+'; font: var(--data); color: var(--mute); }
details.list[open] summary::after { content: '−'; }
details.list table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
details.list td, details.list th { text-align: left; padding: 8px 12px 8px 0; border-top: 1px solid var(--rule); font: var(--small); color: var(--mute); vertical-align: top; }
details.list td:first-child { color: var(--bone); }
details.list td.m { font: var(--data); color: var(--bone); white-space: nowrap; }
.tune { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-top: 56px; }
.tune > div { padding: 20px 20px 24px 0; }
.tune > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.tune b { display: block; font-weight: 400; margin-bottom: 8px; }
.tune p { color: var(--mute); font: var(--small); }

.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4vw; }
.sources li { padding: 12px 0; border-top: 1px solid var(--rule); color: var(--mute); font: var(--small); }
.sources li b { display: block; font-weight: 400; color: var(--bone); font-size: 14px; }
.sources ul { list-style: none; padding: 0; margin: 0; }
.foot { margin-top: 96px; padding: 28px 0 48px; border-top: 1px solid var(--rule); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }

/* figures, grouped by where they come from */
.groups { display: flex; flex-wrap: wrap; gap: 28px 5vw; }
.group { flex: 0 1 auto; }
.group.later { flex: 1 1 160px; }
.group h3 { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.group .figs { border-top: 0; display: flex; flex-wrap: wrap; }
.group .figs > div { padding-right: 32px; }
.group .figs .fig { white-space: nowrap; flex-wrap: nowrap; }
.group .figs > div { border-top: 0 !important; }
.group .figs > div:first-child { padding-left: 0; border-left: 0; }
.group.later p { padding-top: 20px; }

/* the drivers */
.drivers { display: flex; flex-direction: column; gap: 8px; }
.drivers button { display: grid; gap: 10px; text-align: left; width: 100%; border-radius: 6px; padding: 14px 16px; text-transform: none; letter-spacing: 0; font: var(--body); color: var(--mute); background: var(--ink-2); border: 1px solid var(--rule); }
.drivers button:hover { border-color: var(--rule-2); }
.drivers button[aria-checked="true"] { border-color: var(--ion); color: var(--bone); box-shadow: 0 0 0 1px var(--ion-b), 0 0 24px var(--ion-a); }
.drivers .dn { display: flex; justify-content: space-between; gap: 10px; color: var(--bone); }
.drivers em { font: var(--label); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ion); }
.drivers .dv { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 22px; font: var(--data); }
.drivers .dv i { display: block; font: var(--label); font-size: 10px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.drivers .dv .fig .v { text-decoration: none; }
.drivers .dc { color: var(--dim); }
.drivers > p { margin-top: 6px; }

/* cut: options, sheets, downloads */
.opts { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: end; margin-bottom: 28px; }
.opts > div { display: flex; flex-direction: column; gap: 8px; }
.opts button:disabled { opacity: .35; cursor: default; }
.thk { display: inline-flex; align-items: center; border: 1px solid var(--rule-2); border-radius: 999px; padding: 3px; gap: 2px; background: var(--glass); }
.thk button { border: 0; background: none; padding: 6px 12px; font: var(--data); }
.thk input { width: 4.2em; background: none; border: 0; color: var(--bone); font: var(--data); text-align: right; padding: 6px 0; }
.thk input:focus { outline: 1px solid var(--ion-b); border-radius: 4px; }
.thk .u { font: var(--label); color: var(--mute); padding: 0 6px 0 4px; }
.drv-now { color: var(--bone); padding: 9px 0; text-decoration: none; border-bottom: 1px dashed var(--rule-2); }
.dl { font: var(--label); letter-spacing: .12em; color: var(--ion); text-decoration: none; border: 1px solid var(--ion-b); border-radius: 999px; padding: 5px 12px; }
.cfg { margin-left: auto; margin-right: clamp(10px, 2vw, 24px); text-decoration: none; color: var(--bone); border: 1px solid var(--rule-2); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.cfg:hover { border-color: var(--ion); }
.cfg.bad { color: var(--alarm); border-color: var(--alarm); }
.testp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px 4vw; align-items: start; padding: 22px; margin-bottom: 28px; border: 1px solid var(--ion-b); border-radius: 6px; background: var(--ion-a); }
.testp:empty { display: none; }
.tp-draw svg { width: 100%; height: auto; }
.tp-txt { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tp-txt h3 { color: var(--ion); }
.tp-txt p { color: var(--mute); font: var(--small); max-width: 46em; }
.tp-txt .cmp td { font: var(--data); color: var(--bone); }
.tp-txt .cmp td.t-small { font: var(--small); color: var(--mute); }
@media (max-width: 960px) { .testp { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tp-txt .cmp tr { display: grid; grid-template-columns: 1fr; } .tp-txt .cmp th, .tp-txt .cmp td { border: 0; padding: 2px 0; } .tp-txt .cmp tr { border-bottom: 1px solid var(--rule); padding: 8px 0; } }
.zipdl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 8px; }
.dl.all { padding: 9px 16px; }
.gnote { margin-top: 12px; max-width: 34em; }
.alert { margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--alarm); border-radius: 6px; background: var(--alarm-a); color: var(--bone); font: var(--body); }
.alert b { color: var(--alarm); font-weight: 500; }
.dl.off { color: var(--alarm); border-color: var(--alarm); opacity: .8; cursor: not-allowed; }
#cut.bad .sheets svg { opacity: .35; }
.dl:hover { background: var(--ion-a); border-color: var(--ion); }
.sheets figcaption { align-items: center; }
#cut .need { margin: 36px 0 32px; }

/* assemble */
.asm { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "a3d side" "bar bar"; gap: 0 32px; border-top: 1px solid var(--rule); }
.asm-3d { grid-area: a3d; position: relative; height: min(70vh, 620px); background: radial-gradient(50% 50% at 50% 50%, var(--halo), transparent 70%); }
.asm-3d .gl, .asm-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.asm-side { grid-area: side; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px 0; }
.side-draw svg { width: 100%; height: auto; }
.as-side { fill: var(--bone-1); stroke: var(--bone-3); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.as-on { fill: var(--ink-2); stroke: var(--bone-3); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.as-fin { fill: none; stroke: var(--bone-3); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.as-off { fill: none; stroke: var(--bone-2); stroke-dasharray: 1 5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.as-cur { fill: var(--ion-b); stroke: var(--ion); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--ion)); }
.as-pt { fill: var(--white); }
.as-pt.on { fill: var(--ion); r: 9px; filter: drop-shadow(0 0 6px var(--ion)); }
.as-dim { fill: none; stroke: var(--ion); stroke-opacity: .55; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.as-dt { font: 500 22px/1 var(--mono); fill: var(--bone); paint-order: stroke; stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round; }
table.corners { width: 100%; border-collapse: collapse; }
.corners th, .corners td { text-align: right; padding: 6px 0 6px 10px; border-bottom: 1px solid var(--rule); font: var(--data); }
.corners thead th { font: var(--label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.corners tbody th { text-align: left; color: var(--ion); padding-left: 0; }
.corners tbody tr { cursor: pointer; }
.corners tbody tr.on td .v { color: var(--bone); }
.corners tbody tr.on th { text-shadow: 0 0 8px var(--ion); }
.corners .fig .v { text-decoration: none; }
.as-t { font: 500 24px/1 var(--mono); fill: var(--ion); paint-order: stroke; stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round; }
.as-axis { font: 500 20px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--dim); }
.as-arrow { fill: none; stroke: var(--dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.asm-bar { grid-area: bar; display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 18px 0; border-top: 1px solid var(--rule); }
.asm-bar > button { min-width: 40px; justify-content: center; }
.asm-bar button:disabled { opacity: .3; cursor: default; }
.step-n { padding: 9px 4px; color: var(--bone); }
.step-cap { padding-left: 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.step-cap b { font-weight: 400; color: var(--bone); }
.step-cap .t-data { color: var(--dim); }
.step-cap p { flex-basis: 100%; color: var(--mute); font: var(--small); max-width: 56em; }
.step-cap p b { color: var(--bone); font-weight: 500; }
.sources a { color: var(--bone); text-decoration-color: var(--rule-2); text-underline-offset: .25em; }

/* ---------- phone and narrow screens ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "name" "stage" "side"; height: auto; }
  .name { border-left: 0; padding: 22px var(--gut) 4px; }
  .name h1 { margin: 10px 0 10px; }
  .stage { height: auto; }
  .stage .gl { position: relative; inset: auto; height: min(62svh, 104vw); min-height: 340px; }
  .tools { position: static; padding: 4px var(--gut) 0; gap: 6px; }
  .tools .sep { display: none; }
  .side { border-left: 0; padding: 18px var(--gut) 28px; }
  .sec-wrap svg { height: auto; }
  .two, .intro { grid-template-columns: 1fr; }
  .steps, .need, .tune { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(odd), .need > div:nth-child(odd), .tune > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .steps li:nth-child(n+3), .need > div:nth-child(n+3), .tune > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .sheets { grid-template-columns: 1fr; }
  .groups { grid-template-columns: 1fr; gap: 28px; }
  .asm { grid-template-columns: 1fr; grid-template-areas: "a3d" "bar" "side"; }
  .asm-3d { height: min(60svh, 100vw); }
  .asm-bar { grid-template-columns: auto auto auto auto; }
  .step-cap { grid-column: 1 / -1; padding-left: 0; }
}
@media (max-width: 560px) {
  .head nav .opt { display: none; }
  .head nav { gap: 12px; }
  .cfg { padding: 4px 9px; font-size: 11px; }
  .cfg .dv { display: none; }
  .tools button { padding: 8px 11px; }
  .seg button { padding: 6px 10px; }
  .readout { grid-template-columns: 1fr 1fr; }
  .figs { grid-template-columns: 1fr 1fr; }
  .group .figs { display: grid; grid-template-columns: 1fr 1fr; }
  .group .figs > div { padding-right: 0; }
  .group .figs > div:nth-child(n) { padding-left: 14px; border-left: 1px solid var(--rule); }
  .group .figs > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .group .figs > div:first-child:nth-last-child(2), .group .figs > div:first-child:nth-last-child(3) { grid-column: 1 / -1; padding-left: 0; }
  .drivers .dv { grid-template-columns: repeat(2, auto); }
  .steps, .need, .tune, .sources { grid-template-columns: 1fr; }
  .steps li:nth-child(n), .need > div:nth-child(n), .tune > div:nth-child(n) { padding-left: 0; border-left: 0; }
  .steps li + li, .need > div + div, .tune > div + div { border-top: 1px solid var(--rule); }
  details.list .n { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media (max-width: 560px) { .as-t, .as-dt { font-size: 34px; stroke-width: 10px; } }