/* ============================================================================
   WhiteLights — instrument panel identity.
   Dark is the primary mode; light is derived. Amber on graphite, everything
   numeric in mono, 2px radius, hairlines instead of shadows.
   ========================================================================== */

:root{
  --bg:#0C0E12; --surface:#14171D; --surface-2:#1C2027; --line:#2A2F38;
  --ink:#E8EAED; --ink-dim:#9BA1AB; --white-light:#F5F2E8;
  --signal:#FFB224; --signal-ink:#0C0E12; --pass:#3DD68C; --fail:#F2555A;
  --shadow:none;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1040px;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#F7F7F5; --surface:#FFFFFF; --surface-2:#EFEFEC; --line:#D8D8D3;
  --ink:#16181D; --ink-dim:#5C616B; --white-light:#16181D;
  --signal:#C77800; --signal-ink:#FFFFFF; --pass:#0E8A55; --fail:#C7383D;
  --shadow:0 1px 3px rgba(20,24,29,.08);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1rem;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--signal) 55%,transparent)}
a:hover{color:var(--signal)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 .5em}
h1{font-size:2.25rem}h2{font-size:1.625rem}h3{font-size:1.25rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono,td.n,th.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal);margin-bottom:12px}
.lede{color:var(--ink-dim);font-size:1.125rem;max-width:62ch}
.prose{max-width:640px}
.prose p,.prose li{color:var(--ink-dim)}
.prose strong{color:var(--ink);font-weight:500}
.small{font-size:.875rem}
.dim{color:var(--ink-dim)}
.sig{color:var(--signal)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------- the calibration rule */
.crule{margin:0 0 24px}
.crule svg{display:block;width:100%;height:8px;overflow:visible}
.crule path{stroke:var(--line);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.crule .t-sig{stroke:var(--signal)}

/* ------------------------------------------------------------- judge lights */
.jl{display:inline-flex;gap:.35em;vertical-align:middle}
.jl-dot{width:var(--jl,14px);height:var(--jl,14px);border-radius:50%;
  border:1px solid var(--line);background:transparent;display:block}
.jl-dot.on{background:var(--white-light);border-color:var(--white-light)}
:root[data-theme=light] .jl-dot.on{background:var(--ink);border-color:var(--ink);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--signal) 40%,transparent)}

/* ------------------------------------------------------------------ netbar */
.netbar{background:var(--surface);border-bottom:1px solid var(--line);font-size:.75rem}
.netbar-in{display:flex;align-items:center;gap:16px;min-height:36px;flex-wrap:wrap}
.netbar-label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}
.netbar-links{display:flex;gap:14px;flex-wrap:wrap}
.netbar-links a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-dim);text-decoration:none}
.netbar-links a:hover{color:var(--ink)}
.netbar-links a[aria-current]{color:var(--ink)}
.nb-dot{width:6px;height:6px;border-radius:50%;display:inline-block}

/* ------------------------------------------------------------------ header */
.site-head{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.head-in{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand-lights{display:inline-flex;gap:4px}
.brand-lights i{width:9px;height:9px;border-radius:50%;background:var(--white-light);display:block}
:root[data-theme=light] .brand-lights i{background:var(--signal)}
.brand-word{font-weight:700;letter-spacing:.06em;font-size:1.0625rem}
.brand-claim{margin:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--ink-dim);text-transform:uppercase;flex:1 1 auto;min-width:0}
.head-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.head-nav{display:flex;gap:16px;font-size:.8125rem}
.head-nav a{color:var(--ink-dim);text-decoration:none}
.head-nav a:hover{color:var(--signal)}
.icon-btn{background:none;border:1px solid var(--line);border-radius:2px;color:var(--ink-dim);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{color:var(--signal);border-color:var(--signal)}
.i-moon{display:none}
:root[data-theme=light] .i-sun{display:none}
:root[data-theme=light] .i-moon{display:block}
.unit-btn{display:inline-flex;border:1px solid var(--line);border-radius:2px;background:none;
  padding:0;cursor:pointer;font-family:var(--mono);font-size:.6875rem;overflow:hidden}
.unit-btn span{padding:6px 9px;color:var(--ink-dim);line-height:1}
.unit-btn[data-unit=kg] span:first-child,.unit-btn[data-unit=lb] span:last-child{
  background:var(--signal);color:var(--signal-ink)}

/* ----------------------------------------------------------------- crumbs */
.crumbs{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.75rem;padding:8px 0;color:var(--ink-dim)}
.crumbs a{color:var(--ink-dim);text-decoration:none}
.crumbs a:hover{color:var(--signal)}
.crumbs .sep{margin:0 8px;opacity:.5}

/* ------------------------------------------------------------------- hero */
.hero{padding:48px 0 24px}
.hero h1{max-width:20ch}
section{padding:0 0 48px}
section.tight{padding-bottom:32px}

/* ------------------------------------------------------------ platform card */
.pcard{border:1px solid var(--line);background:var(--surface);border-radius:2px;
  display:grid;grid-template-columns:1fr 320px;gap:0}
.pcard-plot{padding:20px;border-right:1px solid var(--line);min-width:0}
.pcard-read{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pcard svg.curve{display:block;width:100%;height:auto}
.curve .axis{stroke:var(--line);stroke-width:1;fill:none}
.curve .grid{stroke:var(--line);stroke-width:1;fill:none;opacity:.55}
.curve .band-l{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3;fill:none}
.curve .plot{stroke:var(--ink);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.curve .fill{fill:var(--ink);opacity:.06;stroke:none}
.curve text{font-family:var(--mono);fill:var(--ink-dim);font-size:11px}
.curve text.band{fill:var(--ink-dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.curve .me{stroke:var(--signal);stroke-width:1.5;fill:none}
.curve .me-dot{fill:var(--signal);stroke:var(--bg);stroke-width:2}
.curve .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.readout-k{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin:0}
.readout{font-family:var(--mono);font-weight:600;font-size:4.5rem;line-height:1;
  color:var(--white-light);font-variant-numeric:tabular-nums;margin:0;letter-spacing:-.03em}
.readout small{font-size:1.75rem;letter-spacing:0}
.readout-sub{font-family:var(--mono);font-size:.8125rem;color:var(--ink-dim);margin:0}
.verdict-line{font-size:1.0625rem;margin:0}
.next-step{font-family:var(--mono);font-size:.8125rem;margin:0}
.next-step a{color:var(--signal)}

.lift-input{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:2px;background:var(--bg)}
.lift-input label{font-family:var(--mono);font-size:.75rem;color:var(--ink-dim);padding:10px 0 10px 12px;
  display:flex;align-items:center;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lift-input input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font-family:var(--mono);
  font-size:1.125rem;font-weight:600;padding:10px 12px;width:100%}
.lift-input input:focus{outline:none}
.lift-input:focus-within{border-color:var(--signal)}
.lift-input .u{font-family:var(--mono);font-size:.8125rem;color:var(--ink-dim);padding:10px 12px;
  border-left:1px solid var(--line);display:flex;align-items:center}

/* ------------------------------------------------------------------ inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
input[type=number],input[type=text],select{background:var(--surface-2);border:1px solid var(--line);
  border-radius:2px;color:var(--ink);font-family:var(--mono);font-size:1rem;padding:9px 11px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--signal)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seg button{background:none;border:0;color:var(--ink-dim);font-family:var(--mono);font-size:.8125rem;
  padding:8px 14px;cursor:pointer;line-height:1}
.seg button[aria-pressed=true]{background:var(--signal);color:var(--signal-ink)}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}

/* ------------------------------------------------------------------ tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:400;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.here{background:color-mix(in srgb,var(--signal) 12%,transparent)}
tr.here td{color:var(--ink)}
.band-cell{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.card{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:18px;
  box-shadow:var(--shadow);text-decoration:none;display:block;position:relative}
a.card:hover{border-color:var(--signal)}
.card h3{margin:0 0 6px;font-size:1.0625rem}
.card p{margin:0;color:var(--ink-dim);font-size:.875rem}
.card .go{font-family:var(--mono);font-size:.75rem;color:var(--signal);display:block;margin-top:10px}
.stat{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:16px}
.stat .v{font-family:var(--mono);font-weight:600;font-size:1.75rem;color:var(--white-light);
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat .k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}

/* ------------------------------------------------------------------- plate */
.plate{border:1px solid var(--line);background:var(--surface-2);border-radius:2px;padding:14px 16px;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-dim)}
.plate dl{margin:0;display:grid;gap:4px}
.plate div{display:flex;gap:12px}
.plate dt{width:52px;flex:0 0 52px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.plate dd{margin:0;min-width:0}
.plate a{color:var(--ink-dim)}
.plate a:hover{color:var(--signal)}

/* -------------------------------------------------------------------- ads
   A declared landing zone with a generous moat. Auto ads gravitate to
   whitespace; this keeps them out of the tools instead of between an input
   and its result. */
.adslot{min-height:96px;margin:40px 0;display:grid;place-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.adslot-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);opacity:.5}

/* ------------------------------------------------------------- profile bar */
.profile-bar{position:sticky;bottom:0;z-index:15;background:var(--surface);
  border-top:1px solid var(--line);font-family:var(--mono);font-size:.75rem}
.pb-in{max-width:var(--wrap);margin:0 auto;padding:9px 24px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;color:var(--ink-dim)}
.pb-in b{color:var(--ink);font-weight:600}
.pb-in a{color:var(--signal);text-decoration:none;white-space:nowrap}
.pb-in a:hover{text-decoration:underline}
.pb-clear{margin-left:auto;background:none;border:0;color:var(--ink-dim);cursor:pointer;
  font-family:var(--mono);font-size:.6875rem;text-decoration:underline;padding:0}

/* -------------------------------------------------------------- muscle map */
.muscle-map svg{width:100%;height:auto;max-width:320px;display:block;margin:0 auto}
.muscle-map .body{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.muscle-map .m{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.muscle-map .m.pri{fill:var(--signal)}
.muscle-map .m.sec{fill:color-mix(in srgb,var(--signal) 38%,transparent)}

/* --------------------------------------------------------------- ring/footer */
.ring{padding:48px 0;border-top:1px solid var(--line);background:var(--surface)}
.ring-h{font-size:1.25rem;margin-bottom:20px}
.ring-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.ring-card{border:1px solid var(--line);border-top:2px solid var(--card-accent,var(--signal));
  border-radius:2px;padding:14px;text-decoration:none;background:var(--bg)}
.ring-card:hover{border-color:var(--signal)}
.ring-card h3{font-size:.9375rem;margin:0 0 4px}
.ring-card p{margin:0;font-size:.8125rem;color:var(--ink-dim)}
.ring-card .go{font-family:var(--mono);font-size:.6875rem;color:var(--ink-dim);display:block;margin-top:8px}
.ring-more{margin:18px 0 0;font-size:.875rem}
.ring-more a{color:var(--signal)}

.pub{border-top:1px solid var(--line);background:var(--bg);padding:28px 0}
.pub-in{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}
.pub-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 6px}
.pub-name{margin:0 0 4px;font-weight:700;font-size:1.0625rem}
.pub-name a{text-decoration:none}
.pub-tag{margin:0;color:var(--ink-dim);font-size:.875rem;max-width:44ch}
.pub-socs{display:flex;gap:14px;flex-wrap:wrap}
.pub-soc{display:inline-flex;align-items:center;gap:6px;color:var(--ink-dim);text-decoration:none;font-size:.8125rem}
.pub-soc svg{width:16px;height:16px}
.pub-soc:hover{color:var(--signal)}
.pub-soc-l{font-family:var(--mono);font-size:.75rem}

.site-foot{border-top:1px solid var(--line);background:var(--surface);padding:28px 0 36px;font-size:.875rem}
.foot-in{display:flex;gap:32px;justify-content:space-between;flex-wrap:wrap}
.foot-brand{font-weight:700;letter-spacing:.06em;margin:0 0 6px}
.foot-note{color:var(--ink-dim);margin:0 0 6px;max-width:56ch;font-size:.8125rem}
.foot-disclaimer{font-size:.75rem;opacity:.85}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.8125rem}
.foot-links a{color:var(--ink-dim);text-decoration:none}
.foot-links a:hover{color:var(--signal)}
.foot-legal{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.foot-legal p{color:var(--ink-dim);font-size:.75rem;margin:0}

/* ------------------------------------------------------------------ mobile */
@media (max-width:860px){
  .pcard{grid-template-columns:1fr}
  .pcard-plot{border-right:0;border-top:1px solid var(--line);order:2}
  .pcard-read{order:1}
  .brand-claim{display:none}
}
@media (max-width:600px){
  h1{font-size:1.75rem}h2{font-size:1.375rem}
  .readout{font-size:3.25rem}
  .wrap{padding:0 16px}
  .hero{padding:32px 0 20px}
  .curve text{font-size:13px}
  .curve text.band{font-size:12px}
  .head-in{min-height:56px;gap:12px}
  .head-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .curve .draw{stroke-dashoffset:0}
}
@media print{.netbar,.adslot,.profile-bar,.ring{display:none}}

/* ------------------------------------------------------------- class chooser */
.chooser{border-top:1px solid var(--line);padding-top:14px;display:flex;
  flex-wrap:wrap;gap:10px;align-items:center}
.chooser .readout-k{width:100%;margin:0}
.chooser select{width:auto;flex:1;min-width:150px;font-size:.8125rem;padding:7px 9px}

/* ------------------------------------------------------------- reign chart */
.reign{border:1px solid var(--line);background:var(--surface);border-radius:2px;padding:16px;overflow-x:auto}
.reign svg{display:block;width:100%;height:auto;min-width:560px}
.reign text{font-family:var(--mono);font-variant-numeric:tabular-nums}
.reign .rn{fill:var(--ink);font-size:11px}
.reign .rw{fill:var(--ink-dim);font-size:10px}
.reign .rt{fill:var(--ink-dim);font-size:10px}
.reign .rg{stroke:var(--line);stroke-width:1;opacity:.5}
.reign .rb rect{fill:var(--signal)}
.reign .reign-row:hover .rb rect{fill:var(--white-light)}
.reign .reign-row:hover .rn{fill:var(--signal)}
@media (max-width:600px){.reign .rn{font-size:13px}.reign .rt,.reign .rw{font-size:12px}}