/* RangeBlends -- shared tokens and furniture.
   Both pages are built from these; nothing here is page-specific except the
   canvas rules, which every page in this set needs anyway. */
:root{
  --ground:#E8EBE6;
  --panel:#F3F5F1;
  --sunk:#DDE2DA;
  --rule:#C7CEC4;
  --ink:#17222B;
  --muted:#5C6A73;
  --deep:#223F52;
  --mid:#3F6B85;
  --high:#8FB4C6;
  --accent:#6D46C8;
  --accent-dim:#B4A2EA;
  --warn:#A8322F;
  --disp:"Instrument Serif",Georgia,serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C1219;
    --panel:#131C24;
    --sunk:#0A1016;
    --rule:#243139;
    --ink:#E3EAEE;
    --muted:#8496A1;
    --deep:#13303F;
    --mid:#2F6480;
    --high:#7FB2CC;
    --accent:#9B7BF0;
    --accent-dim:#4B3684;
    --warn:#E27168;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1219;
  --panel:#131C24;
  --sunk:#0A1016;
  --rule:#243139;
  --ink:#E3EAEE;
  --muted:#8496A1;
  --deep:#13303F;
  --mid:#2F6480;
  --high:#7FB2CC;
  --accent:#9B7BF0;
  --accent-dim:#4B3684;
  --warn:#E27168;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px 72px}

/* ------------------------------------------------------------ masthead */
.mast{padding:54px 0 22px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
h1{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2.8rem,8vw,4.6rem);line-height:.95;margin:0 0 14px;
  letter-spacing:-.005em;text-wrap:balance;
}
h1 em{font-style:italic;color:var(--accent)}
.lede{max-width:62ch;margin:0;color:var(--muted);font-size:1.03rem}
.lede b{color:var(--ink);font-weight:500}

/* ------------------------------------------------------------ controls */
.bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  padding:12px 14px;margin-bottom:20px;
}
.bar label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
input[type=text]{
  background:var(--sunk);border:1px solid var(--rule);border-radius:7px;
  color:var(--ink);font-family:var(--mono);font-size:13px;padding:9px 11px;
  width:12ch;min-width:0;
}
input[type=text].wide{width:16ch}
input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{
  font-family:var(--body);font-weight:500;font-size:13px;cursor:pointer;
  background:var(--sunk);color:var(--ink);
  border:1px solid var(--rule);border-radius:7px;padding:9px 13px;
}
button:hover{border-color:var(--accent);color:var(--accent)}
button.on{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] button.on{color:#0C1219}
.spacer{flex:1 1 40px}

/* -------------------------------------------------------------- panels */
.panel{
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  margin-bottom:14px;overflow:hidden;
}
.phead{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:13px 16px 11px;border-bottom:1px solid var(--rule);
}
.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;
  border:1px solid var(--rule);color:var(--muted);
}
.tag.seq{color:var(--accent);border-color:var(--accent-dim)}
.phead h2{font-family:var(--disp);font-weight:400;font-size:1.4rem;margin:0;letter-spacing:0}
.phead p{margin:0;font-size:13.5px;color:var(--muted);flex:1 1 26ch;min-width:0}
/* the CSS height is authoritative.  Writing cv.height reflects back into the
   height ATTRIBUTE, so sizing off that attribute makes the canvas grow by one
   devicePixelRatio every frame until the tab dies.  Ask CSS, never the tag. */
canvas{display:block;width:100%;height:150px;touch-action:pan-y;cursor:grab}
canvas.dragging{cursor:grabbing}
.comb{height:34px;border-top:1px solid var(--rule)}

/* -------------------------------------------------------------- readout */
.readout{
  display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;
  padding:11px 16px;border-top:1px solid var(--rule);color:var(--muted);
}
.readout b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.readout .flag{color:var(--warn)}

/* --------------------------------------------------------------- ladder */
.cols{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;margin-top:22px}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.card{
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;
}
.card h3{font-family:var(--disp);font-weight:400;font-size:1.25rem;margin:0 0 10px}
.card p{margin:0 0 12px;font-size:14px;color:var(--muted)}
.card p:last-child{margin-bottom:0}
.card b{color:var(--ink);font-weight:500}
.ladder{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.ladder .v{color:var(--muted);text-align:right}
.ladder i{display:block;height:7px;border-radius:2px;background:var(--mid)}
.ladder i.jump{background:var(--accent)}
.ladder .n{color:var(--ink)}
.ladder .n.jump{color:var(--accent)}
kbd{font-family:var(--mono);font-size:11px;background:var(--sunk);
  border:1px solid var(--rule);border-radius:4px;padding:1px 5px}
code{font-family:var(--mono);font-size:.9em;color:var(--accent)}

.foot{
  font-family:var(--mono);font-size:11.5px;line-height:1.95;color:var(--muted);
  margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);
}
.foot b{color:var(--ink);font-weight:400}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ------------------------------------------------------------------ links */
/* every page in this set is dark-first as often as not, and the browser
   default blue is unreadable on both grounds -- so links are tokenised too. */
a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eyebrow a{color:var(--muted);border-bottom:0}
.eyebrow a:hover{color:var(--accent)}
.foot a{color:var(--accent)}

/* ----------------------------------------------------------------- sliders */
.slider{display:flex;align-items:center;gap:8px}
.slider b{font-family:var(--mono);font-size:11px;color:var(--accent);
  font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
input[type=range]{width:104px;accent-color:var(--accent)}
@media(max-width:900px){.slider label{display:none}}

/* --------------------------------------------------------- primary button */
.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.primary:hover{filter:brightness(1.12);color:#fff;border-color:var(--accent)}
:root[data-theme="dark"] .primary{color:#0C1219}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .primary{color:#0C1219}
}