/* Dark-first: the subject is an audio instrument, and the app itself is dark.
   :root carries the dark palette; light is redefined at token level only. */
:root{
  --ground:#15160E; --surface:#1E1F16; --raise:#262719; --line:#33342A;
  --ink:#F2F0E4; --muted:#94917A;
  --signal:#E9B04A;            /* VU-lamp amber — the one accent */
  --verified:#9FD356; --open:#E2703A;
  --shadow:0 1px 0 rgba(255,255,255,.03);
  --measure:66ch;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#F6F4EA; --surface:#EFEDE1; --raise:#E7E4D5; --line:#D9D6C4;
    --ink:#15160E; --muted:#6C6955;
    --signal:#8A5F06; --verified:#456818; --open:#A03F17;
    --shadow:0 1px 0 rgba(0,0,0,.03);
  }
}
:root[data-theme="light"]{
  --ground:#F6F4EA; --surface:#EFEDE1; --raise:#E7E4D5; --line:#D9D6C4;
  --ink:#15160E; --muted:#6C6955;
  --signal:#8A5F06; --verified:#456818; --open:#A03F17;
  --shadow:0 1px 0 rgba(0,0,0,.03);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 17px/1.62 Newsreader,Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3,.ui{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif}
.mono,code{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
.ipa{font-family:"Doulos SIL","Charis SIL",Gentium,"DejaVu Sans","Lucida Grande",serif}
a{color:var(--signal);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
p{margin:0 0 1.05em;max-width:var(--measure)}
.lede{font-size:20px;color:var(--ink)}
.eyebrow{
  font-family:"Bricolage Grotesque",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}

/* ---------------------------------------------------------------- masthead */
header{padding:78px 0 0;border-bottom:1px solid var(--line)}
.badge{
  display:inline-flex;align-items:center;gap:8px;font-family:"Bricolage Grotesque",sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:5px 10px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--verified)}
h1{
  font-size:clamp(52px,9vw,104px);font-weight:800;line-height:.94;
  letter-spacing:-.035em;margin:26px 0 0;text-wrap:balance;
}
.say{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  margin:22px 0 0;padding:0 0 6px;
}
.say .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600}
.say .v{font-size:clamp(24px,4vw,38px);color:var(--signal);letter-spacing:.01em}
.subhead{margin:26px 0 0;font-size:21px;line-height:1.5;max-width:58ch}
.headmeta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;padding:18px 0 42px;
  border-top:1px solid var(--line);
}
.headmeta span{font-size:13px;color:var(--muted);font-family:"Bricolage Grotesque",sans-serif}
.headmeta b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------ section jump */
/* Sticks *under* the masthead rather than over it: the first thing on the page
   should be the page, not its navigation. Set in the same uppercase Bricolage
   as .eyebrow so it belongs to the system already here rather than announcing
   itself as a separate component.

   No active-section indicator on purpose. The bar names three of eight
   sections, so a highlight would be wrong for the other five -- it would look
   like state while telling the reader something untrue. */
.jump{
  position:sticky; top:0; z-index:20;
  background:var(--ground); border-bottom:1px solid var(--line);
}
/* Translucency only where the blur behind it actually works. If color-mix is
   unsupported the declaration is dropped and the opaque rule above stands. */
@supports (backdrop-filter:blur(10px)){
  .jump{
    background:color-mix(in srgb, var(--ground) 84%, transparent);
    backdrop-filter:blur(10px);
  }
}
.jump .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:46px;
}
.jump ul{display:flex; gap:26px; margin:0; padding:0; list-style:none}
.jump a{
  font-family:"Bricolage Grotesque",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--muted); white-space:nowrap;
}
.jump .mark{color:var(--ink); letter-spacing:.1em}
.jump a:hover{color:var(--signal)}

/* Clear the bar so a jumped-to heading is not sitting underneath it. */
section[id],header[id]{scroll-margin-top:58px}
/* No scroll-behavior:smooth. Animating ~4,700px on a page this tall is slow,
   and worse, the animation is cancellable: interrupt it and the visitor is left
   partway down with the hash already changed, which is a worse outcome than the
   instant jump anchors have always done. Measured -- with smooth on, a click on
   Screenshots settled at 110px instead of 1,715px. */

/* The wordmark is the first thing to go when the row runs out of room --
   it is the one item that is not a destination. */
@media (max-width:520px){
  .jump .mark{display:none}
  .jump .wrap{justify-content:center}
  .jump ul{gap:18px}
}

/* -------------------------------------------------------------- installer */
/* The one-liner leads the section because it is the path that works: it picks
   the right build for the machine, verifies the SHA-256 against the release,
   and on macOS clears the quarantine flag that would otherwise have Gatekeeper
   refuse an ad-hoc-signed app. The manual downloads stay underneath for anyone
   who would rather not pipe a script into a shell -- which is a reasonable
   thing not to want. */
/* minmax(0,1fr) and min-width:0 are load-bearing. A grid item's default
   min-width is auto, meaning "never shrink below your content" -- and the
   content here is an 86-character command that does not wrap. Without these the
   track widens to fit it and takes the whole page sideways with it: measured at
   741px of card inside a 697px viewport, with the body scrolling horizontally.
   The command is meant to scroll inside its own box, which is what the pre does. */
.install{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin:26px 0 0;
}
.cmd{background:var(--surface);padding:16px 18px 18px;min-width:0}
.cmdhead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.os{
  font-family:"Bricolage Grotesque",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.cmd pre{margin:10px 0 0;background:var(--ground);min-width:0}
.copy{
  font-family:"Bricolage Grotesque",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:2px;
  padding:5px 11px;cursor:pointer;white-space:nowrap;
}
.copy:hover{color:var(--signal);border-color:var(--signal)}
.copy[data-state="done"]{color:var(--verified);border-color:var(--verified)}
h3.handoff{
  margin:40px 0 14px;font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}

section{padding:64px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-.02em;margin:0 0 8px;text-wrap:balance}
h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}

/* --------------------------------------------------------------- readouts */
/* Instrument readout: a measured value, its unit, and what it is of. The
   figures are the argument, so they are set as the largest thing in the row. */
.readout{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0 0}
.readout.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.readout.three{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cell{background:var(--surface);padding:20px 22px}
.cell .n{
  font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:500;
  color:var(--signal);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.cell .n small{font-size:15px;color:var(--muted);margin-left:3px;font-weight:400}
.cell .l{font-size:14px;color:var(--muted);margin-top:5px;line-height:1.4}
.cell .l b{color:var(--ink);font-weight:500}

/* ------------------------------------------------------------------ plates */
.shot{margin:30px 0 0;border:1px solid var(--line);background:var(--surface);padding:10px}
.shot img{display:block;width:100%;height:auto}
.cap{font-size:14px;color:var(--muted);margin:10px 2px 0;max-width:70ch}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin:30px 0 0}
.pair .shot{margin:0}

/* ------------------------------------------------------------------ table */
.tablewrap{overflow-x:auto;margin:26px 0 0}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:"Bricolage Grotesque",sans-serif;font-size:11px;font-weight:600;
   letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
td.mono{font-variant-numeric:tabular-nums}
.pill{
  display:inline-block;font-family:"Bricolage Grotesque",sans-serif;font-size:11px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;
  border:1px solid currentColor;border-radius:2px;white-space:nowrap;
}
.pill.ok{color:var(--verified)} .pill.todo{color:var(--open)}

/* -------------------------------------------------------------- downloads */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:28px 0 0}
.card{background:var(--surface);padding:24px 22px;display:flex;flex-direction:column;gap:9px}
.card h3{margin:0}
.card .meta{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
.card p{font-size:15px;margin:0;color:var(--muted)}
.card .get{
  margin-top:auto;padding-top:14px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;font-size:14px;
}
.note{
  border-left:2px solid var(--signal);padding:2px 0 2px 18px;margin:26px 0 0;
  font-size:16px;color:var(--muted);max-width:var(--measure);
}
.note b{color:var(--ink);font-weight:500}

/* ------------------------------------------------------------------ steps */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:24px 0 0;max-width:var(--measure)}
ol.steps li{counter-increment:s;position:relative;padding:0 0 20px 46px}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:28px;height:28px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--signal);
}
ol.steps b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600}
pre{
  background:var(--surface);border:1px solid var(--line);padding:14px 16px;margin:14px 0 0;
  overflow-x:auto;font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.6;
}

/* ---------------------------------------------------------------- contact */
.contact{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
.contact a{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);background:var(--surface);padding:12px 18px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:15px;
}
.contact a:hover{border-color:var(--signal);color:var(--signal)}
footer{padding:44px 0 70px;color:var(--muted);font-size:14px}

@media (max-width:720px){
  header{padding-top:52px}
  section{padding:48px 0}
  body{font-size:16px}
}
@media (prefers-reduced-motion:no-preference){
  .card,.contact a{transition:border-color .16s ease,color .16s ease}
}