/* Overhang site styles.
   Light is the default set. Dark arrives either from the system preference or from an
   explicit choice on the root element, and the explicit choice has to win both ways. */
:root{
  --wash-a:#dbe6ff; --wash-b:#eadcff; --page:#f4f5fa;
  --glass:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.9);
  --glass-inner:rgba(255,255,255,.66);
  --text:#12141a; --muted:#5b6070; --faint:#868c9c;
  --accent:#0060df; --rule:rgba(0,0,0,.08);
  --solid:#12141a; --solid-ink:#fff;
  --soft:rgba(0,0,0,.05); --soft-line:rgba(0,0,0,.09);
  --shadow:0 10px 34px rgba(40,50,90,.10);
  --shot-shadow:0 6px 22px rgba(40,50,90,.13);
  --navbg:rgba(255,255,255,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wash-a:#1b2a55; --wash-b:#3a1f4d; --page:#08080c;
    --glass:rgba(255,255,255,.055); --glass-line:rgba(255,255,255,.1);
    --glass-inner:rgba(255,255,255,.05);
    --text:#f5f5f7; --muted:#aab1c4; --faint:#7b8299;
    --accent:#7fb2ff; --rule:rgba(255,255,255,.08);
    --solid:#fff; --solid-ink:#101018;
    --soft:rgba(255,255,255,.09); --soft-line:rgba(255,255,255,.16);
    --shadow:0 18px 50px rgba(0,0,0,.5);
    --shot-shadow:0 10px 30px rgba(0,0,0,.45);
    --navbg:rgba(12,12,18,.55);
  }
}
:root[data-theme="dark"]{
  --wash-a:#1b2a55; --wash-b:#3a1f4d; --page:#08080c;
  --glass:rgba(255,255,255,.055); --glass-line:rgba(255,255,255,.1);
  --glass-inner:rgba(255,255,255,.05);
  --text:#f5f5f7; --muted:#aab1c4; --faint:#7b8299;
  --accent:#7fb2ff; --rule:rgba(255,255,255,.08);
  --solid:#fff; --solid-ink:#101018;
  --soft:rgba(255,255,255,.09); --soft-line:rgba(255,255,255,.16);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --shot-shadow:0 10px 30px rgba(0,0,0,.45);
  --navbg:rgba(12,12,18,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font-size:17px;line-height:1.55;min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  background-color:var(--page);
  background-image:
    radial-gradient(70% 55% at 18% 0,var(--wash-a) 0,transparent 60%),
    radial-gradient(60% 50% at 88% 12%,var(--wash-b) 0,transparent 62%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
summary::-webkit-details-marker{display:none}
summary{cursor:pointer;list-style:none}
section[id]{scroll-margin-top:76px}
.shell{max-width:980px;margin:0 auto;padding-left:24px;padding-right:24px}

/* nav */
.bar{position:sticky;top:0;z-index:20;background:var(--navbg);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--rule)}
.bar .shell{display:flex;align-items:center;gap:22px;height:56px;font-size:13px}
.bar img{width:23px;height:23px;border-radius:6px}
.bar b{font-weight:600;font-size:15px}
.bar .brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.bar .brand:hover{text-decoration:none}
.bar nav{display:flex;gap:20px}
.bar nav a{color:var(--muted)}
.bar nav a:hover{color:var(--text);text-decoration:none}
.grow{flex:1}

.themer{display:flex;background:var(--soft);border:1px solid var(--soft-line);
  border-radius:99px;padding:2px;gap:2px}
.themer button{appearance:none;background:none;border:0;cursor:pointer;padding:5px 9px;
  border-radius:99px;color:var(--faint);display:flex;align-items:center;line-height:0}
.themer button svg{width:15px;height:15px;display:block}
.themer button[aria-pressed="true"]{background:var(--glass-inner);color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.1)}
.themer button:hover{color:var(--text)}

/* hero */
.hero{text-align:center;padding-top:78px;padding-bottom:58px}
.hero .icon{width:100px;height:100px;border-radius:23px;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(36px,5.8vw,58px);line-height:1.06;letter-spacing:-.026em;
  font-weight:700;margin:24px 0 14px}
.hero .lede{font-size:19px;color:var(--muted);max-width:42ch;margin:0 auto 28px}
.cta a{display:inline-block;padding:12px 26px;border-radius:99px;font-size:16px;
  font-weight:500;margin:0 5px}
.cta a:hover{text-decoration:none}
.fill{background:var(--solid);color:var(--solid-ink)}
.ghost{background:var(--soft);border:1px solid var(--soft-line);color:var(--text)}
.fineprint{font-size:12px;color:var(--faint);margin-top:16px}

/* panels */
.panel{background:var(--glass);backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--glass-line);border-radius:20px;padding:32px;margin-bottom:20px}
.panel h2{font-size:23px;font-weight:700;letter-spacing:-.015em;margin:0 0 6px}
.panel .note{color:var(--muted);margin:0 0 26px;font-size:15px}
.panel h2 + .trio,.panel h2 + .steps,.panel h2 + .qa-list,
.panel h2 + .d2,.panel h2 + .b1{margin-top:26px}

.trio{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.chip{background:var(--glass-inner);border-radius:15px;padding:20px}
.chip h3{font-size:16px;margin:0 0 6px;font-weight:600}
.chip p{margin:0;color:var(--muted);font-size:14px}

/* -------------------------------------------------- closer look
   Both captures are retina, so their native pixel width is twice their honest display
   size: the menu is 410px wide, meaning 205 points, and the settings window is 760px,
   meaning 380 points. Drawn any larger they upscale and go soft, so every option below
   is built around those two ceilings rather than around the column width. */
.clA img[src$="menu.png"],.clB img[src$="menu.png"],
.clC img[src$="menu.png"],.clD img[src$="menu.png"]{max-width:205px}
.clA img[src$="settings.png"],.clB img[src$="settings.png"],
.clC img[src$="settings.png"],.clD img[src$="settings.png"]{max-width:380px}

/* option A: weighted split, both images at native size, optically centred */
.clA{display:grid;grid-template-columns:auto auto;gap:44px;align-items:center;justify-content:center}
.clA figure{margin:0}
.clA img{border-radius:13px;box-shadow:var(--shot-shadow);display:block;width:100%}
.clA figcaption{font-size:12.5px;color:var(--faint);margin-top:14px;text-align:center;max-width:220px}
.clA .cap-wide{max-width:380px}

/* option B: alternating rows, image and explanation side by side */
.clB .row{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;
  padding:28px 0;border-bottom:1px solid var(--rule)}
.clB .row:first-child{padding-top:0}
.clB .row:last-child{border-bottom:0;padding-bottom:0}
.clB .row.flip{grid-template-columns:1fr auto}
.clB .row.flip .art{order:2}
.clB img{border-radius:13px;box-shadow:var(--shot-shadow);display:block}
.clB h3{font-size:18px;margin:0 0 8px;font-weight:600}
.clB p{margin:0;color:var(--muted);font-size:15px;max-width:44ch}

/* option C: one lead image, one supporting, on a tinted plate */
.clC .plate{background:var(--glass-inner);border-radius:16px;padding:30px;
  display:grid;grid-template-columns:auto auto;gap:38px;align-items:center;justify-content:center}
.clC img{border-radius:12px;box-shadow:var(--shot-shadow);display:block;width:100%}
.clC figcaption{font-size:12.5px;color:var(--faint);margin-top:12px;text-align:center}
.clC figure{margin:0}

/* option D: tabbed, one large image at a time */
.clD .tabs{display:inline-flex;background:var(--soft);border:1px solid var(--soft-line);
  border-radius:99px;padding:3px;gap:3px;margin-bottom:24px}
.clD .tabs button{appearance:none;border:0;background:none;cursor:pointer;
  padding:7px 18px;border-radius:99px;font-size:14px;color:var(--muted);font-weight:500}
.clD .tabs button[aria-selected="true"]{background:var(--glass-inner);color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.1)}
.clD .stage{display:flex;justify-content:center;align-items:center;min-height:376px;
  background:var(--glass-inner);border-radius:16px;padding:28px}
.clD .stage img{border-radius:12px;box-shadow:var(--shot-shadow);display:block}
.clD [hidden]{display:none}
.clD .cap{font-size:12.5px;color:var(--faint);margin:15px 0 0;text-align:center}

/* option E: centred strip, both locked to one height. 300px keeps the menu at 193 wide
   and the settings window at 319, so neither is drawn past its native resolution. */
.clE .strip{display:flex;gap:34px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.clE figure{margin:0;text-align:center}
.clE img{border-radius:13px;box-shadow:var(--shot-shadow);display:block;height:300px;width:auto;max-width:none}
.clE figcaption{font-size:12.5px;color:var(--faint);margin-top:14px}

/* -------------------------------------------------- install, option A: numbered list */
.inA{list-style:none;counter-reset:s;padding:0;margin:0}
.inA li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:20px}
.inA li:last-child{margin-bottom:0}
.inA li::before{content:counter(s);position:absolute;left:0;top:-1px;width:28px;height:28px;
  border-radius:50%;background:var(--soft);color:var(--text);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:500}
.inA strong{display:block;font-weight:600;font-size:15px;margin-bottom:2px}
.inA span{color:var(--muted);font-size:14px}

/* option B: four cards across */
.inB{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;
  list-style:none;counter-reset:s;padding:0;margin:0}
.inB li{counter-increment:s;background:var(--glass-inner);border-radius:15px;padding:22px}
.inB li::before{content:counter(s);display:flex;width:26px;height:26px;border-radius:50%;
  background:var(--solid);color:var(--solid-ink);align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;margin-bottom:14px}
.inB strong{display:block;font-weight:600;font-size:15px;margin-bottom:5px}
.inB span{color:var(--muted);font-size:13.5px}

/* option C: timeline with a connecting rail */
.inC{list-style:none;counter-reset:s;padding:0;margin:0;position:relative}
.inC::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--rule)}
.inC li{counter-increment:s;position:relative;padding-left:52px;padding-bottom:24px}
.inC li:last-child{padding-bottom:0}
.inC li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--page);border:2px solid var(--rule);color:var(--text);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.inC strong{display:block;font-weight:600;font-size:15.5px;margin-bottom:3px}
.inC span{color:var(--muted);font-size:14px}

/* option D: two tracks, click through or build from source */
.inD{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.inD .track{background:var(--glass-inner);border-radius:16px;padding:24px}
.inD .track h3{font-size:15px;margin:0 0 4px;font-weight:600}
.inD .track .hint{font-size:12.5px;color:var(--faint);margin:0 0 18px}
.inD ol{list-style:none;counter-reset:s;padding:0;margin:0}
.inD ol li{counter-increment:s;position:relative;padding-left:32px;margin-bottom:15px}
.inD ol li:last-child{margin-bottom:0}
.inD ol li::before{content:counter(s);position:absolute;left:0;top:0;width:21px;height:21px;
  border-radius:50%;background:var(--soft);color:var(--muted);display:flex;
  align-items:center;justify-content:center;font-size:11.5px}
.inD strong{display:block;font-weight:600;font-size:14.5px}
.inD span{color:var(--muted);font-size:13.5px}
.inD pre{background:var(--soft);border:1px solid var(--soft-line);border-radius:10px;
  padding:14px 16px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.8;color:var(--text)}

/* option E: two column grid, compact */
.inE{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;list-style:none;
  counter-reset:s;padding:0;margin:0}
.inE li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.inE li::before{content:counter(s);width:26px;height:26px;border-radius:8px;
  background:var(--soft);color:var(--text);display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:600}
.inE strong{display:block;font-weight:600;font-size:15px;margin-bottom:2px}
.inE span{color:var(--muted);font-size:14px}

/* ============================================================ closer look, B family
   All five keep the paired row idea: one capture beside the words that explain it.
   Native ceilings apply throughout, 205 for the menu and 380 for the settings window. */
.b1 img[src$="menu.png"],.b2 img[src$="menu.png"],.b3 img[src$="menu.png"],
.b4 img[src$="menu.png"],.b5 img[src$="menu.png"]{max-width:205px}
.b1 img[src$="settings.png"],.b2 img[src$="settings.png"],.b3 img[src$="settings.png"],
.b4 img[src$="settings.png"],.b5 img[src$="settings.png"]{max-width:380px}
.b1 img,.b2 img,.b3 img,.b4 img,.b5 img{border-radius:13px;box-shadow:var(--shot-shadow);display:block}
.b1 h3,.b2 h3,.b3 h3,.b4 h3,.b5 h3{font-size:18px;margin:0 0 8px;font-weight:600}
.b1 p,.b2 p,.b3 p,.b4 p,.b5 p{margin:0;color:var(--muted);font-size:15px;max-width:42ch}

/* B1, hairline rule between the two rows */
.b1 .row{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;
  padding:28px 0;border-bottom:1px solid var(--rule)}
.b1 .row:first-child{padding-top:0}
.b1 .row:last-child{border-bottom:0;padding-bottom:0}
.b1 .row.flip{grid-template-columns:1fr auto}
.b1 .row.flip .art{order:2}

/* B2, no rules, wider gutter, more air */
.b2 .row{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;padding:34px 0}
.b2 .row:first-child{padding-top:6px}
.b2 .row:last-child{padding-bottom:0}
.b2 .row.flip{grid-template-columns:1fr auto}
.b2 .row.flip .art{order:2}
.b2 p{font-size:15.5px;line-height:1.62}

/* B3, small label above each heading */
.b3 .row{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--rule)}
.b3 .row:first-child{padding-top:0}
.b3 .row:last-child{border-bottom:0;padding-bottom:0}
.b3 .row.flip{grid-template-columns:1fr auto}
.b3 .row.flip .art{order:2}
.b3 .eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin:0 0 9px}

/* B4, each capture sits on its own tinted plate */
.b4 .row{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;padding:14px 0}
.b4 .row.flip{grid-template-columns:1fr auto}
.b4 .row.flip .art{order:2}
.b4 .art{background:var(--glass-inner);border-radius:18px;padding:24px;display:flex;justify-content:center}
.b4 .row:first-child{padding-top:0}
.b4 .row:last-child{padding-bottom:0}

/* B5, no alternating, both images on the same side for a steady scan line */
.b5 .row{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--rule)}
.b5 .row:first-child{padding-top:0}
.b5 .row:last-child{border-bottom:0;padding-bottom:0}
.b5 .art{display:flex;justify-content:center}

/* ============================================================ install, D family
   All five keep two routes, the download and the source build. */
.d1 .track,.d2 .track,.d3 .track,.d4 .track,.d5 .track{background:var(--glass-inner);
  border-radius:16px;padding:24px}
.d1 h3,.d2 h3,.d3 h3,.d4 h3,.d5 h3{font-size:15px;margin:0 0 4px;font-weight:600}
.d2 .track.lead h3{margin-bottom:16px}
.d1 .hint,.d2 .hint,.d3 .hint,.d4 .hint,.d5 .hint{font-size:12.5px;color:var(--faint);margin:0 0 18px}
.d1 ol,.d2 ol,.d3 ol,.d4 ol,.d5 ol{list-style:none;counter-reset:s;padding:0;margin:0}
.d1 ol li,.d2 ol li,.d3 ol li,.d4 ol li,.d5 ol li{counter-increment:s;position:relative;
  padding-left:32px;margin-bottom:15px}
.d1 ol li:last-child,.d2 ol li:last-child,.d3 ol li:last-child,
.d4 ol li:last-child,.d5 ol li:last-child{margin-bottom:0}
.d1 ol li::before,.d2 ol li::before,.d3 ol li::before,.d4 ol li::before,.d5 ol li::before{
  content:counter(s);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;
  background:var(--soft);color:var(--muted);display:flex;align-items:center;
  justify-content:center;font-size:11.5px}
.d1 strong,.d2 strong,.d3 strong,.d4 strong,.d5 strong{display:block;font-weight:600;font-size:14.5px}
.d1 span,.d2 span,.d3 span,.d4 span,.d5 span{color:var(--muted);font-size:13.5px}
.d1 pre,.d2 pre,.d3 pre,.d4 pre,.d5 pre{background:var(--soft);border:1px solid var(--soft-line);
  border-radius:10px;padding:14px 16px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.8;color:var(--text)}

/* D1, two equal cards */
.d1{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* D2, the download route carries more weight than the source route */
.d2{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:start}
.d2 .track.lead{background:var(--glass-inner);border:1px solid var(--soft-line)}
.d2 .badge{display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--solid);color:var(--solid-ink);border-radius:99px;padding:3px 9px;
  margin-bottom:12px;font-weight:600}

/* D3, one card, tabs to switch route */
.d3 .tabs{display:inline-flex;background:var(--soft);border:1px solid var(--soft-line);
  border-radius:99px;padding:3px;gap:3px;margin-bottom:22px}
.d3 .tabs button{appearance:none;border:0;background:none;cursor:pointer;padding:7px 18px;
  border-radius:99px;font-size:14px;color:var(--muted);font-weight:500}
.d3 .tabs button[aria-selected="true"]{background:var(--glass-inner);color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.1)}
.d3 [hidden]{display:none}
.d3 .track{padding:0;background:none}

/* D4, download across the full width, source build as a strip beneath */
.d4 .primary{margin-bottom:22px}
.d4 .primary ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.d4 .primary ol li{margin-bottom:0}
.d4 .secondary{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:center}
.d4 .secondary .hint{margin:0}

/* The chosen install layout carries an action row inside most steps, so the steps need more
   room between them than the tighter comparison variants did. */
.d2 ol li{margin-bottom:26px;padding-left:34px}
.d2 ol li:last-child{margin-bottom:0}
.d2 ol li::before{top:1px}
.d2 strong{margin-bottom:4px}
.d2 span{display:block;line-height:1.5}

/* Actions inside a step, so every step is something you can act on rather than read */
.instep-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.instep-btn{display:inline-block;background:var(--solid);color:var(--solid-ink);
  padding:7px 17px;border-radius:99px;font-size:13.5px;font-weight:600;white-space:nowrap}
.instep-btn:hover{text-decoration:none;opacity:.9}
.instep-link{font-size:13.5px;white-space:nowrap}
.instep-link::after{content:" \203A";font-weight:600}
.d2 .track code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--soft);border:1px solid var(--soft-line);border-radius:5px;padding:1px 6px;
  white-space:nowrap}

/* D5, both routes headed by a small marker */
.d5{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.d5 .head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.d5 .mark{width:28px;height:28px;border-radius:9px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--text)}
.d5 .mark svg{width:15px;height:15px}
.d5 .head h3{margin:0}
.d5 .head .hint{margin:0}

@media (max-width:760px){
  .b1 .row,.b2 .row,.b3 .row,.b4 .row,.b5 .row,
  .d1,.d2,.d5,.d4 .secondary{grid-template-columns:1fr}
  .b1 .row.flip .art,.b2 .row.flip .art,.b3 .row.flip .art,.b4 .row.flip .art{order:0}
}

/* faq */
.qa-list details{border-bottom:1px solid var(--rule)}
.qa-list details:last-child{border-bottom:0}
.qa-list summary{padding:15px 0;font-weight:500;font-size:15px;display:flex;gap:11px;align-items:flex-start}
.qa-list summary::before{content:"+";color:var(--accent);font-weight:400;flex-shrink:0;line-height:1.5}
.qa-list details[open] summary::before{content:"-"}
.qa-list p{color:var(--muted);font-size:14px;margin:0 0 15px 22px}

/* document pages */
.doc{padding-top:46px;padding-bottom:20px}
.doc h1{font-size:34px;font-weight:700;letter-spacing:-.022em;margin:0 0 8px}
.doc .stamp{font-size:13px;color:var(--faint);margin:0}
.panel h3{font-size:16px;margin:22px 0 5px;font-weight:600}
.panel h3:first-of-type{margin-top:0}
.panel p{margin:0 0 4px;color:var(--muted);font-size:15px;max-width:66ch}
.panel ul{margin:6px 0 0;padding-left:20px;color:var(--muted);font-size:15px}
.panel li{margin-bottom:6px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
th{font-weight:400;color:var(--faint);width:38%}

footer{padding-top:26px;padding-bottom:56px;font-size:12px;color:var(--faint)}
footer .shell{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
footer a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:760px){
  .clA,.clB .row,.clC .plate,.inD,.inE{grid-template-columns:1fr}
  .clB .row.flip .art{order:0}
  .clE img{height:auto;max-width:280px}
}
@media (max-width:620px){
  .bar nav{display:none}
  .hero{padding-top:52px}
  .panel{padding:24px}
}

/* The right column stacks the two developer routes beside the recommended download. */
.d2 .stack{display:flex;flex-direction:column;gap:22px;min-width:0}