:root{
  --ground:#E6EAE8;
  --paper:#F3F6F5;
  --ink:#0F1B1C;
  --ink-soft:#546465;
  --rule:#C3CCCA;
  --rule-soft:#D8DFDD;
  --patina:#1F7A6B;
  --patina-deep:#155C50;
  --copper:#B4642A;
  --warn:#A8452B;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --display:"Space Grotesk","IBM Plex Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  padding:clamp(16px,4vw,48px);
}
.wrap{max-width:1080px;margin:0 auto}

/* ---- masthead ---- */
header{
  border-bottom:1.5px solid var(--ink);
  padding-bottom:14px;
  margin-bottom:28px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
h1{
  font-family:var(--display);
  font-size:clamp(1.5rem,4vw,2.1rem);
  font-weight:700;
  letter-spacing:-0.02em;
}
.std{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--rule);
  padding:4px 9px;
  white-space:nowrap;
  max-width:100%;
}
/* Long standard strings must be allowed to break on a phone, or the
   masthead pushes the whole page sideways. */
@media(max-width:560px){.std{white-space:normal}}
.crumb{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:10px;
}
.crumb a{color:var(--ink-soft)}

.grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* ---- inputs ---- */
.panel{background:var(--paper);border:1px solid var(--rule);padding:20px}
.panel h2,.res h2,.section-view h2{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:16px;
  font-weight:500;
}
.field{margin-bottom:15px}
.field:last-child{margin-bottom:0}
label{display:block;font-size:.82rem;margin-bottom:5px;color:var(--ink)}
label .u{color:var(--ink-soft);font-family:var(--mono);font-size:.75rem}
input[type=number]{
  width:100%;
  font-family:var(--mono);
  font-size:1rem;
  padding:9px 11px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
  border-radius:0;
}
input[type=text]{
  width:100%;
  font-size:1rem;
  padding:9px 11px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
  border-radius:0;
}
input.mono{font-family:var(--mono);letter-spacing:.04em}
select{
  width:100%;
  font-family:var(--mono);
  font-size:.88rem;
  padding:9px 11px;
  border:1px solid var(--rule);
  background:#fff;
  color:var(--ink);
  border-radius:0;
}
select:focus{outline:2px solid var(--patina);outline-offset:-1px;border-color:var(--patina)}
input[type=number]:focus,input[type=text]:focus{outline:2px solid var(--patina);outline-offset:-1px;border-color:var(--patina)}
input.out-of-range{border-color:var(--warn)}
.hint{font-family:var(--mono);font-size:.7rem;color:var(--warn);margin-top:4px;display:none}
.hint.show{display:block}
.seg{display:flex;border:1px solid var(--rule);background:#fff}
.seg button{
  flex:1;
  font-family:var(--mono);
  font-size:.78rem;
  padding:9px 4px;
  background:none;
  border:none;
  color:var(--ink-soft);
  cursor:pointer;
}
.seg button[aria-pressed=true]{background:var(--patina);color:#fff}
.seg button:focus-visible{outline:2px solid var(--patina);outline-offset:2px}

/* ---- results ---- */
.res{background:var(--ink);color:var(--paper);padding:24px;margin-bottom:2px}
.res h2{color:#8FA5A3;margin-bottom:6px}
.headline{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.big{
  font-family:var(--display);
  font-size:clamp(2.6rem,9vw,4rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.big-u{font-family:var(--mono);font-size:1rem;color:#8FA5A3;padding-bottom:7px}
.alt{font-family:var(--mono);font-size:.85rem;color:#8FA5A3;word-break:break-all}
.err{display:none;font-family:var(--mono);font-size:.8rem;color:#E8A08C;margin-top:8px}
.err.show{display:block}

/* Long headlines (64-bit binary) must wrap rather than overflow the card. */
.big.long{font-size:clamp(1rem,3.2vw,1.5rem);word-break:break-all;line-height:1.3}

/* ---- diagram ---- */
.section-view{background:var(--paper);border:1px solid var(--rule);border-top:none;padding:20px}
.xs-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:12px;flex-wrap:wrap}
.xs-head h2{margin-bottom:0}
.exag{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft)}
svg{display:block;width:100%;height:auto}

/* ---- derived table ---- */
.derived{border:1px solid var(--rule);border-top:none;background:var(--paper)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 20px;border-bottom:1px solid var(--rule-soft);font-size:.87rem}
.row:last-child{border-bottom:none}
.row span:first-child{color:var(--ink-soft);flex:0 1 auto;min-width:0}
/* Exact float expansions run to 55+ characters; wrap them rather than
   letting the page scroll sideways on a phone. */
.row span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}

.note{
  margin-top:22px;
  padding:14px 16px;
  border-left:2px solid var(--patina);
  background:var(--paper);
  font-size:.82rem;
  color:var(--ink-soft);
}
.note b{color:var(--ink);font-weight:600}
code{font-family:var(--mono);font-size:.85em;background:#fff;padding:1px 4px;border:1px solid var(--rule-soft)}
.warnbox{border-left-color:var(--warn)}
.warnmsg{display:none;margin-top:8px;color:var(--warn)}
.warnbox .warnmsg{display:block}

/* ---- related tools ---- */
.related{margin-top:30px}
.related h2{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:12px;
  font-weight:500;
}
.rel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px}
.rel-list a{
  display:block;
  background:var(--paper);
  border:1px solid var(--rule);
  padding:13px 15px;
  text-decoration:none;
  color:var(--ink);
  font-size:.87rem;
}
.rel-list a:hover{border-color:var(--patina);color:var(--patina-deep)}
.rel-list .carry{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--ink-soft);
  margin-top:4px;
}

footer{margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);font-size:.74rem;color:var(--ink-soft);font-family:var(--mono)}
footer a{color:var(--ink-soft)}

/* ---- index ---- */
.lede{max-width:60ch;margin-bottom:28px;color:var(--ink-soft)}
.phase{margin-bottom:30px}
.phase h2{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:12px;
  font-weight:500;
}
@media(prefers-reduced-motion:no-preference){
  .big,.alt{transition:opacity .12s ease}
}