/* generated by site/build.py from the OpenTree design system; edit the sources */
:root{--paper:#f5f7f5;--surface:#ffffff;--ink:#14201b;--ink-muted:#4f5f57;--line:#d3dcd6;--leaf:#137a4f;--on-leaf:#ffffff;--leaf-tint:#e3f1ea;--canopy:#0c3b29;--on-canopy:#f5f7f5;--signal-proven:var(--leaf);--signal-partial:#2f5fb3;--signal-unproven:#94570a;--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:48px;--space-6:96px;--radius-s:4px;--radius-m:10px;--radius-pill:999px;--font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;color-scheme:light}

/* OpenTree components. Every colour is a token from tokens.json. */
.ot-root { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }

/* Fit tier: shape + colour + word, never colour alone */
.ot-tier { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: var(--radius-pill);
  border: 1.5px solid currentColor; font: 600 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--surface); }
.ot-tier::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.ot-tier--dropin { color: var(--signal-proven); }
.ot-tier--dropin::before { background: currentColor; }
.ot-tier--boltin { color: var(--signal-partial); }
.ot-tier--boltin::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.ot-tier--equivalent { color: var(--signal-unproven); }

/* Compliance checks: verified (filled), declared (outlined, amber), none (dash). Word always shown; state also in .ot-sr text */
.ot-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.ot-check { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-mono); color: var(--ink); }
.ot-check::before { content: "\2713"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font: 700 10px/1 var(--font-sans); box-sizing: border-box; }
.ot-check--verified::before { background: var(--signal-proven); color: var(--on-leaf); }
.ot-check--declared::before { border: 1.5px solid var(--signal-unproven); color: var(--signal-unproven); }
.ot-check--none { color: var(--ink-muted); }
.ot-check--none::before { content: "\2013"; border: 1.5px dashed var(--line); color: var(--ink-muted); }
.ot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Spec value with its Measured / Target marker */
.ot-spec { display: grid; gap: 4px; }
.ot-spec__label { font: 600 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ot-spec__value { font: 500 22px/28px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ot-spec__unit { font-size: 15px; color: var(--ink-muted); }
.ot-mark { justify-self: start; font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-s); border: 1.5px solid currentColor; }
.ot-mark--measured { color: var(--signal-proven); }
.ot-mark--target { color: var(--signal-unproven); border-style: dashed; }

/* Part name */
.ot-part { display: grid; gap: 4px; }
.ot-part__brand { font: 600 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--leaf); }
.ot-part__code { font-family: var(--font-sans); font-weight: 600; font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
.ot-part__role { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.ot-chip { font: 600 13px/18px var(--font-mono); padding: 2px 8px; border-radius: var(--radius-s); background: var(--leaf-tint); color: var(--ink); }

/* Catalog row: the Chinese joint it replaces, then the replacement */
.ot-listing { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.3fr) auto; align-items: center; gap: 16px;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.ot-listing:hover { background: var(--leaf-tint); }
.ot-listing__from { font: 500 14px/20px var(--font-mono); color: var(--ink-muted); min-width: 0; }
.ot-listing__arrow { color: var(--ink-muted); }
.ot-listing__to { min-width: 0; }
.ot-listing__name { font-weight: 600; }
.ot-listing__maker { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ot-listing__checks { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed var(--line); }
@media (max-width: 560px) { .ot-listing { grid-template-columns: 1fr; gap: 8px; } .ot-listing__arrow { display: none; } .ot-listing > .ot-tier { justify-self: start; } }

/* Buttons */
.ot-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--font-sans); padding: 10px 18px; border-radius: var(--radius-m);
  border: 1.5px solid var(--leaf); cursor: pointer; text-decoration: none; }
.ot-btn--primary { background: var(--leaf); color: var(--on-leaf); }
.ot-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.ot-btn:focus-visible { outline: 3px solid var(--signal-partial); outline-offset: 2px; }

/* Endorsement footer line */
.ot-endorse { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 14px; line-height: 20px; color: var(--ink-muted);
  border-top: 1px solid var(--line); padding-top: 16px; }
.ot-endorse strong { color: var(--ink); font-weight: 600; }

/* ---- site layout (OpenTree v1) ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-family:var(--font-sans)}
body{margin:0;background:var(--paper);color:var(--ink)}
img{max-width:100%;height:auto}
a{color:var(--leaf);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--signal-partial);outline-offset:2px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:9;background:var(--surface);padding:8px 12px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.brand .logo-dark{display:none}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.head-row{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand img{display:block;height:30px;width:auto}
.site-head nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.site-head nav a{color:var(--ink);text-decoration:none;font-size:15px}
.site-head nav a:hover{color:var(--leaf)}
.site-head nav a[aria-current]{color:var(--leaf);text-decoration:underline;text-decoration-thickness:2px}
.head-cta{padding:8px 14px}
@media (max-width:760px){.head-row{flex-wrap:wrap;gap:12px}.site-head nav{order:3;width:100%;margin:0;gap:16px}.head-cta{margin-left:auto}}

/* type */
h1,h2,h3{font-family:var(--font-sans);text-wrap:balance;margin:0}
h1{font-size:clamp(36px,6vw,56px);line-height:1.06;font-weight:600;letter-spacing:-.025em}
h2{font-size:clamp(24px,3vw,32px);line-height:1.15;font-weight:600;letter-spacing:-.02em}
h3{font-size:22px;line-height:28px;font-weight:600}
p{margin:0}
.lead{font-size:18px;line-height:28px;color:var(--ink);max-width:60ch}
.muted{color:var(--ink-muted)}
.eyebrow{font:600 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.small{font-size:14px;line-height:20px}
.stack{display:grid;gap:16px;align-content:start}
.stack-l{display:grid;gap:24px;align-content:start}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.prose{display:grid;gap:16px;max-width:68ch}
.prose ul{margin:0;padding-left:20px;display:grid;gap:8px}

/* sections */
.sec{padding-block:56px;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
.sec-head{display:grid;gap:12px;margin-bottom:32px;max-width:68ch}
.hero{padding-block:72px 48px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:860px){.grid3{grid-template-columns:1fr}}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;display:grid;gap:16px;align-content:start;min-width:0}
.card .specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.price{font:500 15px/22px var(--font-mono);font-variant-numeric:tabular-nums}
.price b{font-size:22px;font-weight:600}

/* kinematic diagram */
.kd{width:100%;height:auto;max-width:440px;justify-self:center}
.kd .link{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.kd .j{fill:var(--surface);stroke:var(--ink);stroke-width:3}
.kd .j-gk{fill:var(--leaf);stroke:var(--leaf)}
.kd .j-gh{fill:var(--surface);stroke:var(--leaf);stroke-width:4}
.kd .j-off{fill:var(--paper);stroke:var(--ink-muted);stroke-dasharray:3 3;stroke-width:2}
.kd .base{fill:var(--ink)}
.kd .lbl{font:600 12px var(--font-mono);letter-spacing:.06em;fill:var(--ink)}
.kd .lbl-m{font:400 12px var(--font-mono);fill:var(--ink-muted)}
.kd .lead-l{stroke:var(--line);stroke-width:1.5}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-muted)}
.legend span{display:inline-flex;gap:8px;align-items:center}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.legend .gk{background:var(--leaf)}.legend .gh{border:3px solid var(--leaf)}.legend .off{border:2px dashed var(--ink-muted)}

/* band */
.band{background:var(--canopy);color:var(--on-canopy);padding-block:56px}
.band a:not(.ot-btn){color:var(--on-canopy)}
.band .eyebrow{color:var(--on-canopy);opacity:.85}
.band-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
@media (max-width:760px){.band-grid{grid-template-columns:1fr}}
.band .ot-btn--primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.big-price{font:600 clamp(40px,6vw,64px)/1 var(--font-mono);font-variant-numeric:tabular-nums}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface)}
table.ot-table{width:100%;border-collapse:collapse;font-size:15px}
.ot-table th,.ot-table td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ot-table tr:last-child td{border-bottom:0}
.ot-table th{font:600 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.ot-table td.v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ot-table tr.hl td{background:var(--leaf-tint)}

/* open / closed list */
.oc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:700px){.oc{grid-template-columns:1fr}}
.oc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oc li{display:flex;gap:10px;align-items:baseline}
.oc li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--leaf);transform:translateY(1px)}
.oc .closed li::before{border-color:var(--ink-muted);background:var(--ink-muted)}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.fld{display:grid;gap:6px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-weight:600;font-size:14px}
.fld label i{font-weight:400;font-style:normal;color:var(--ink-muted)}
.fld input,.fld select,.fld textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-s);padding:10px 12px;width:100%}
.fld textarea{min-height:96px;resize:vertical}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--ink-muted)}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.status{grid-column:1/-1;padding:12px 16px;border-radius:var(--radius-m);border:1.5px solid currentColor}
.status.ok{color:var(--signal-proven);background:var(--leaf-tint)}
.status.err{color:var(--signal-unproven)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* worksheet */
.ws table input,.ws table select{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-s);padding:8px 10px;width:100%}
.ws table input[type=number]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ws .x{background:none;border:0;color:var(--ink-muted);font-size:20px;cursor:pointer;padding:4px 8px}
.ws-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:640px){.ws-out{grid-template-columns:1fr}
 .ws thead{display:none}.ws table,.ws tbody{display:block}.ws tr{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:12px}.ws td{padding:0;border:0}.ws td:first-child{grid-column:1/-1}}
.ws-out .card{gap:4px}
.ws-out b{font:600 26px/32px var(--font-mono);font-variant-numeric:tabular-nums}
.verdict{display:flex;gap:10px;align-items:center;font-weight:600}
.verdict::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:2px solid currentColor}
.verdict.pass{color:var(--signal-proven)}.verdict.pass::before{background:currentColor}
.verdict.fail{color:var(--signal-unproven)}
.verdict:empty{display:none}

/* footer */
.site-foot{padding-block:40px 56px}
.h-sm{font-size:20px;line-height:28px}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:56px}
@media (max-width:760px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat{display:grid;gap:24px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);color:var(--ink);text-decoration:none;min-height:116px;align-content:space-between}
.cat__name{font-size:20px;font-weight:600}
.cat__n{font-size:13px;color:var(--ink-muted)}
a.cat:hover,.card--link:hover{border-color:var(--leaf);background:var(--leaf-tint)}
a.cat .cat__n{color:var(--leaf)}
.cat--soon{background:transparent;border-style:dashed}
.card--link{color:var(--ink);text-decoration:none}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:baseline}
.ticks li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--leaf);transform:translateY(1px)}
.card--pick{border-color:var(--leaf);box-shadow:inset 0 0 0 1px var(--leaf)}
.pick{font:600 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-leaf);background:var(--leaf);padding:3px 8px;border-radius:var(--radius-pill)}
.legend-checks .ot-check{font-size:12px;color:var(--ink-muted)}
.rules{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);padding:12px 16px}
.rules summary{cursor:pointer;font-weight:600}
.rules ul{margin:12px 0;padding-left:20px;display:grid;gap:8px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:14px}
.foot-links a{color:var(--ink)}
.foot-links span{color:var(--ink-muted);font-family:var(--font-mono)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.stack>.ot-tier,.stack>.ot-mark{justify-self:start}
.ot-table .verdict{white-space:nowrap}