/* The landing page (design 2.b). Most of its look is inline in index.html, copied from the design; this holds the tokens, the theme and what changes with width. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../vendor/inter/InterVariable.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/JetBrainsMono-latin.woff2") format("woff2")}
:root{color-scheme:light dark;
  --bg:light-dark(oklch(98.6% .002 265),oklch(17.5% .006 75));--surf:light-dark(oklch(100% 0 0),oklch(20.5% .006 75));--sunk:light-dark(oklch(96.7% .003 265),oklch(15.5% .005 75));
  --line:light-dark(oklch(92.6% .004 265),oklch(27.5% .006 75));--line2:light-dark(oklch(87.5% .005 265),oklch(35% .007 75));
  --ink:light-dark(oklch(20% .006 265),oklch(93% .008 85));--ink2:light-dark(oklch(42% .008 265),oklch(79% .008 80));--ink3:light-dark(oklch(53% .008 265),oklch(67% .008 80));
  --on-ink:light-dark(oklch(99% 0 0),oklch(17.5% .006 75));--acc:light-dark(oklch(62% .15 72),oklch(77% .13 76));--acc-ink:light-dark(oklch(46% .11 68),oklch(82% .1 82));
  --acc-bg:light-dark(oklch(62% .15 72 / .11),oklch(77% .13 76 / .14));--good:light-dark(oklch(62% .15 152),oklch(72% .15 152));
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  /* names the diagrams use */
  --surface:var(--surf);--sunken:var(--sunk);--line-2:var(--line2);--ink-3:var(--ink3);--accent:var(--acc);--accent-bg:var(--acc-bg);--accent-soft:var(--acc-bg);--accent-ink:light-dark(#fff,oklch(16.5% .004 265))}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:light-dark(oklch(46% .11 68),oklch(82% .1 82));text-underline-offset:3px}
a:hover{color:light-dark(oklch(36% .1 68),oklch(90% .07 85))}
button{font-family:inherit;cursor:pointer}
code{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* light and dark pictures */
.for-dark{display:none!important}
:root:not([data-theme=light]) .for-dark{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .for-dark{display:block!important}:root:not([data-theme=light]) .for-light{display:none!important}}
:root[data-theme=dark] .for-dark{display:block!important}
:root[data-theme=dark] .for-light{display:none!important}

/* the side list and version show from 980px */
.layout{grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.layout{grid-template-columns:170px minmax(0,1fr)}}
@media (max-width:979.98px){.wide{display:none!important}}
.nv,.nv span:first-child{color:var(--ink3)}
.nv:hover{color:var(--ink2)}
.nv.on{color:var(--ink)}
.nv.on span:first-child{color:var(--acc-ink)}

/* the system picker */
.osb{background:transparent;color:var(--ink3);box-shadow:none}
.osb[aria-pressed=true]{background:var(--surf);color:var(--ink);box-shadow:0 1px 2px oklch(0% 0 0 / .1)}

/* the four diagrams */
.diag svg{display:block;width:100%;height:auto;background:var(--surf);border:1px solid var(--line);border-radius:12px}
.diag svg text{font-family:inherit}
.d-box{fill:var(--sunken);stroke:var(--line-2);stroke-dasharray:6 5}
.d-board,.d-focus{fill:var(--surface);stroke:var(--line-2)}
.d-focus{fill:var(--accent-bg);stroke:var(--accent)}
.d-th{fill:var(--accent-soft);stroke:none}
.d-th.d-short{fill:var(--sunken)}
.d-ag{fill:var(--accent);stroke:none}
.d-core{fill:var(--accent-bg);stroke:var(--accent);stroke-width:2}
.d-mod rect{fill:var(--surface);stroke:var(--line-2)}
.d-mod text{fill:var(--ink);font-size:14px}
.d-search rect{stroke:var(--accent)}
.d-ln{fill:none;stroke:var(--ink-3);stroke-width:1.4}
.d-arr{stroke:var(--accent)}
.d-lab{fill:var(--ink);font-size:14px;font-weight:600}
.d-t{fill:var(--accent-ink);font-size:12px;text-anchor:middle;font-weight:500}
.d-t2{fill:var(--ink);font-size:12.5px}
.d-t3{fill:var(--ink);font-size:16px;font-weight:600}
.d-note{fill:var(--ink-3);font-size:12px}
/* Folds: from 641px the blocks sit open with their summaries hidden and the questions fold behind "+"; phones open everything (home.js). */
.m-sum{display:none}
.m-fold>:not(summary)+*{margin-top:18px!important}
.tg>summary::-webkit-details-marker,.m-sum::-webkit-details-marker,.m-more>summary::-webkit-details-marker{display:none}
.tg .sign::before{content:"+"}
.tg[open] .sign::before{content:"−"}
.m-more>summary{display:none}
/* ===== Phone layout, round 2 (Nov 2026): a light, editorial page. Content sits on the page, separated by space and hairlines;
   nothing folds, nothing scrolls sideways. Everything below is phone-only (max-width:640px); from 641px nothing changes. ===== */
.m-only,.m-sheet,.m-sbar,.m-hint,.m-toc-card,.m-fab,.m-pnav,.m-endnav,.ph-only{display:none}
@media (max-width:640px){
  .m-menu-btn:focus-visible{outline-offset:-6px;border-radius:12px}
  html.m-lock{overflow:hidden}
  #top:focus{outline:none}
  html:not(.js) .m-menu-btn,html:not(.js) .ph-cl{display:none!important}
  .layout{gap:0!important}
  .side.wide{display:none!important}
  .ph-only{display:block}
  .m-drop,#how .diag,.m-hint{display:none!important}
  main section{scroll-margin-top:64px!important}

  /* header: 52px, logo, a quiet Results link, a light menu icon */
  header>div{height:52px;box-sizing:border-box;padding:0 4px 0 16px!important;gap:0!important}
  header>div>a:first-child{min-height:44px}
  header>div>div{gap:0!important}
  #theme,#bees,header a[href="#install"],header a[href="/#install"],.wide{display:none!important}
  .m-only{display:inline-flex}
  .m-hres{align-items:center;min-height:44px;padding:0 10px;font-size:15px;font-weight:500;color:var(--acc-ink)!important;text-decoration:none;white-space:nowrap}
  .m-menu-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink)}
  .m-menu-btn svg{width:20px;height:20px}
  .m-menu-btn .m-x,.m-menu-btn.is-open .m-bars{display:none}
  .m-menu-btn.is-open .m-x{display:block}
  .ph-crumb{margin-left:6px;font-size:15px;font-weight:400;color:var(--ink3);white-space:nowrap}

  /* sheets (menu, contents): a plain list under the header */
  .m-sheet:not([hidden]){display:block}
  .m-sheet{position:fixed;inset:52px 0 0;z-index:30;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding:4px 16px calc(24px + env(safe-area-inset-bottom))}
  .ph-mres{display:block;padding:14px 0 16px;border-bottom:1px solid var(--line);color:var(--ink)!important;text-decoration:none}
  .ph-mres .k{display:block;font-size:13px;font-weight:600;color:var(--acc-ink)}
  .ph-mres .t{display:flex;justify-content:space-between;gap:12px;margin-top:2px;font-size:17px;font-weight:600;line-height:1.35}
  .ph-mres .t span:last-child{color:var(--acc-ink)}
  .ph-mlab{display:block;margin:18px 0 2px;font-size:13px;font-weight:500;color:var(--ink3)}
  .ph-mlist{margin:0;padding:0;list-style:none}
  .ph-mlist a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;min-height:44px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)!important;text-decoration:none}
  .ph-mlist .n{font-family:var(--mono);font-size:12px;color:var(--ink3)}
  .ph-mlist a[aria-current]{font-weight:600}
  .ph-mlist a[aria-current] .n{color:var(--acc-ink)}
  .ph-mext{display:flex;flex-wrap:wrap;column-gap:22px;border-bottom:1px solid var(--line)}
  .ph-mext a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--ink)!important;text-decoration:none}
  .ph-mext a::after{content:"↗";margin-left:3px;font-size:13px;color:var(--ink3)}
  .ph-mfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
  .ph-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:8px;background:var(--ink);color:var(--on-ink)!important;font-size:15px;font-weight:600;text-decoration:none}
  .ph-theme{display:flex;gap:16px}
  .ph-theme button{height:44px;padding:0;border:0;border-bottom:2px solid transparent;background:none;font-size:15px;color:var(--ink3)}
  .ph-theme button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--acc)}
  .ph-ver{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:13px;color:var(--ink3)!important;text-decoration:none;font-variant-numeric:tabular-nums}
  .ph-tl{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--acc-ink)!important;text-decoration:none}
  .ph-end{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:8px;border-top:1px solid var(--line)}

  /* hero: Install, then the Results link on one line; Demo and Docs as quiet text below */
  main>section:first-child{padding:28px 0 44px!important;gap:18px!important}
  h1{font-size:30px!important;line-height:1.16!important;letter-spacing:-.022em!important}
  main>section:first-child>div:has(>a[href="/results/"]){display:flex!important;flex-wrap:wrap;align-items:center;column-gap:20px!important;row-gap:0!important}
  main>section:first-child>div:has(>a[href="/results/"])>a{min-height:44px;display:inline-flex;align-items:center;padding:0!important;border:0!important;background:none!important;border-radius:0!important;font-size:15px!important;box-shadow:none!important}
  main>section:first-child>div:has(>a[href="/results/"])>a[href="#install"]{order:-2;padding:0 18px!important;border-radius:8px!important;background:var(--ink)!important;color:var(--on-ink)!important;font-weight:600!important}
  main>section:first-child>div:has(>a[href="/results/"])>a[href="/results/"]{order:-1;color:var(--acc-ink)!important;font-weight:500!important}
  main>section:first-child>div:has(>a[href="/results/"])>a:not([href="#install"]):not([href="/results/"]){color:var(--ink2)!important;font-weight:400!important;text-decoration:underline;text-decoration-color:var(--line2)}

  /* system picker: underline tabs; the command: a hairline row */
  [data-group]{display:flex!important;flex-wrap:nowrap!important;align-self:stretch!important;gap:18px!important;padding:0!important;background:none!important;border-radius:0!important;border-bottom:1px solid var(--line)}
  [data-group] .osb{height:44px;padding:0!important;margin-bottom:-1px;border-radius:0!important;background:none!important;box-shadow:none!important;border-bottom:2px solid transparent!important;font-size:15px!important;color:var(--ink3)!important;white-space:nowrap}
  [data-group] .osb[aria-pressed=true]{color:var(--ink)!important;border-bottom-color:var(--acc)!important}
  div:has(>.cmd){align-items:flex-start!important;gap:8px!important;padding:6px 0!important;background:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
  .cmd{padding-top:10px;white-space:normal!important;overflow-wrap:anywhere;overflow-x:visible!important;font-size:14px!important;line-height:1.6}
  [data-copy]{flex:none;min-height:44px;min-width:52px;padding:0 4px!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--acc-ink)!important;font-size:14px!important;font-weight:500}

  /* sections: one hairline above each, no folds */
  main>section[id]{padding:44px 0!important;gap:16px!important;border-top:1px solid var(--line)!important}
  main>section[id] h2{font-size:25px!important;line-height:1.2!important}
  .m-fold>.m-sum,.m-more>summary{display:none!important}
  .m-fold .m-h{display:block!important;font-size:18px!important;line-height:1.35;margin:0 0 8px!important}
  .m-fold{border:0!important;margin-top:12px!important;padding-top:24px!important;border-top:1px solid var(--line)!important}
  .m-fold>*{border:0!important;padding:0!important;background:none!important;border-radius:0!important;margin-top:0!important}
  .m-fold>div{gap:8px!important}
  #what>div:has(>.m-fold),#use>div:has(>.m-fold),#how>div:has(>.m-fold),#philosophy>div:has(>.m-fold),#install>div:has(>.m-fold){display:block!important;padding:0!important;border:0!important;background:none!important;margin-top:0!important}
  .tg>summary{pointer-events:none;list-style:none;padding:14px 0 4px!important;font-size:16px!important;font-weight:600!important}
  .tg .sign{display:none}
  .tg>summary::-webkit-details-marker{display:none}

  /* "Not a harness": two tinted panels become hairline rows */
  #harness [style*="background"]{background:none!important;border:0!important;padding:11px 0!important;border-top:1px solid var(--line)!important;border-radius:0!important}

  /* quotes: a plain list */
  .m-q{display:block!important;overflow:visible!important;margin:16px 0 0!important;padding:0!important;border-bottom:1px solid var(--line)}
  .m-q>div{padding:12px 0!important;border:0!important;border-top:1px solid var(--line)!important;background:none!important;box-shadow:none!important;border-radius:0!important;font-size:16px!important;color:var(--ink)}

  /* 02 In and out: the input, then "→ the answer" */
  #inout .m-fold>div>div:first-child{display:none!important}
  #inout .m-fold>div>div{display:block!important;padding:14px 0!important;border:0!important;border-top:1px solid var(--line)!important;background:none!important;border-radius:0!important}
  #inout .m-fold>div>div>span:first-child{display:block;font-weight:500;color:var(--ink)}
  #inout .m-fold>div>div>span:nth-child(2){display:none!important}
  #inout .m-fold>div>div>span:last-child{display:block;margin-top:4px;color:var(--ink2)!important;text-align:left!important;font-size:16px!important}
  #inout .m-fold>div>div>span:last-child::before{content:"→ ";color:var(--acc)}

  /* 03 What it built: the results link between two hairlines; pictures fit the column */
  #built>a[href="/results/"]{background:none!important;border:0!important;border-radius:0!important;padding:18px 0!important;border-top:1px solid var(--acc)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
  #built article>div:first-child:has(>img+img){display:grid!important;grid-template-columns:1fr 1fr;align-items:center;gap:12px!important;padding:0!important;background:none!important;border:0!important}
  #built article>div:first-child:has(>img+img) img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:6px;box-sizing:border-box;border-radius:8px;background:var(--sunk)}
  main dl{display:block!important;margin-top:16px!important;border-bottom:1px solid var(--line)}
  main dl dt{padding:11px 0 0!important;border-top:1px solid var(--line);font-size:13px!important;font-weight:500;color:var(--ink3)}
  main dl dd{margin:2px 0 0!important;padding:0 0 11px!important;border:0!important;font-size:16px!important;color:var(--ink);overflow-wrap:anywhere}
  .m-gal{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important;overflow:visible!important;margin:14px 0 0!important;padding:0!important}
  .m-gal>*{width:auto!important;gap:6px!important}
  .m-gal figure>div{padding:6px!important;border-radius:8px!important;aspect-ratio:1;display:grid;place-items:center}
  .m-gal img{aspect-ratio:1!important}
  .m-gal figcaption{font-size:14px!important;line-height:1.4}
  .m-dash{display:flex!important;flex-direction:column!important;gap:28px!important;overflow:visible!important;margin:12px 0 0!important;padding:24px 0 0!important;border-top:1px solid var(--line)!important}
  .m-dash>div:first-child{display:flex!important;flex-direction:column;gap:28px!important}
  .m-dash figure{flex:none!important;width:100%}
  .m-dash figure>div{border:1px solid var(--line)!important;border-radius:8px!important}
  .m-dash figcaption,main figcaption{font-size:14px!important}
  main video,main figure img{border-radius:8px}

  /* 04 How you use it and the install steps: numbered rows, no cards */
  #use>ol>li{display:block!important;padding:14px 0!important;border:0!important;border-top:1px solid var(--line)!important;background:none!important}
  #use>ol>li>span:first-child{display:flex!important;flex-direction:column;gap:2px!important;margin-bottom:4px}
  #use>ol{border-bottom:1px solid var(--line)!important}
  #steps{gap:0!important;padding-top:0!important;border-bottom:1px solid var(--line)}
  #steps>li{padding:12px 0!important;border-top:1px solid var(--line)}
  #steps>li:first-child{border-top:0}

  /* 05 Install: the cautions as a hairline list */
  .m-caut{display:block!important;background:none!important;padding:0!important;border-radius:0!important;border-bottom:1px solid var(--line)}
  .m-caut>*{padding:14px 0!important;border-top:1px solid var(--line)}
  .m-caut h4{font-size:16px!important}

  /* 06 How it connects: modules as a hairline list */
  .m-mods{display:block!important;overflow:visible!important;margin:0!important;padding:0!important;border-bottom:1px solid var(--line)!important}
  .m-mods>div{width:auto!important;display:flex!important;flex-direction:column;gap:4px!important;padding:14px 0!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:none!important}

  /* results page: contents line, contents list, phone charts, tables */
  .ph-list{margin:16px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
  .ph-list>li{padding:14px 0;border-top:1px solid var(--line)}
  .ph-list .t{display:block;font-weight:600;line-height:1.4;color:var(--ink)}
  .ph-list .d{display:block;margin-top:4px;line-height:1.55;color:var(--ink2)}
  .ph-list .m{display:block;margin-top:4px;font-size:13px;color:var(--ink3)}
  .ph-steps{margin:16px 0 0;padding:0;list-style:none}
  .ph-steps>li{display:grid;grid-template-columns:30px minmax(0,1fr);padding:14px 0;border-top:1px solid var(--line)}
  .ph-steps>li:last-child{border-bottom:1px solid var(--line)}
  .ph-steps .n{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--acc-ink)}
  .ph-steps .t{font-weight:600;line-height:1.45;color:var(--ink)}
  .ph-steps .d{margin:4px 0 0;line-height:1.55;color:var(--ink2)}
  .ph-cl{display:block;position:sticky;top:52px;z-index:15;background:var(--bg);border-bottom:1px solid var(--line)}
  .ph-cl>button{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 16px;border:0;background:none;color:var(--ink);text-align:left;font-size:15px}
  .ph-cl .n{font-family:var(--mono);font-size:13px;color:var(--acc-ink)}
  .ph-cl .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
  .ph-cl .c{display:inline-flex;align-items:center;gap:2px;font-size:14px;color:var(--ink3)}
  .ph-cl .c svg{width:16px;height:16px}
  .ph-cl .bar{position:absolute;left:0;bottom:-1px;height:1px;background:var(--acc)}
  .ph-cl .c.up svg{transform:rotate(180deg)}
  .ph-toc{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
  .ph-toc a{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;min-height:44px;padding:6px 0;border-top:1px solid var(--line);text-decoration:none}
  .ph-toc a{color:var(--ink)}
  .ph-toc .n{font-family:var(--mono);font-size:13px;color:var(--ink3)}
  .ph-toc a.sub{grid-template-columns:24px minmax(0,1fr);font-size:15px;color:var(--ink2);border-top-style:dashed}
  .ph-toc a.sub span:last-child{padding-left:14px}
  .ph-toc a[aria-current]{font-weight:600}
  .ph-toc a[aria-current] .n{color:var(--acc-ink)}
  .ph-bars{margin:16px 0 0;padding:0;list-style:none}
  .ph-bars>li{padding:9px 0}
  .ph-bars .l{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.4}
  .ph-bars .l b{font-weight:600;color:var(--ink)}
  .ph-bars .l span{color:var(--ink2)}
  .ph-bars .v{flex:none;font-variant-numeric:tabular-nums;color:var(--ink2)}
  .ph-bars .tr{height:6px;margin-top:6px;border-radius:3px;background:var(--line)}
  .ph-bars .f{height:100%;min-width:3px;border-radius:3px;background:var(--acc)}
  .ph-cap{margin:0;font-size:13px;line-height:1.45;color:var(--ink3)}
  .ph-dots{position:relative;margin-top:16px}
  .ph-dots ul{margin:0;padding:0;list-style:none}
  .ph-dots li{padding:6px 0 4px;font-size:14px;line-height:1.35;color:var(--ink2)}
  .ph-dots li.ref{color:var(--ink);font-weight:600}
  .ph-dots .tr{position:relative;height:16px;margin-top:4px}
  .ph-dots .tr::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line2)}
  .ph-dots .d{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink3)}
  .ph-dots .d.k{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--ink)}
  .ph-dots .d.a{width:3px;height:16px;margin:-8px 0 0 -1.5px;border-radius:1px;background:var(--acc)}
  .ph-dots .ln{position:absolute;top:29px;bottom:4px;width:1px;background:var(--acc);opacity:.55}
  .ph-axis{position:relative;height:26px;margin-top:4px;border-top:1px solid var(--line2);font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .ph-axis span{position:absolute;top:6px;transform:translateX(-50%)}
  .ph-axis span:first-child{transform:none}
  .ph-axis span:last-child{transform:translateX(-100%)}
  .ph-svg{display:block;width:100%;height:auto;margin-top:12px;overflow:visible}
  .ph-svg text{font-family:inherit;font-size:12px;fill:var(--ink3)}
  .ph-svg .v{font-size:13px;font-weight:600;fill:var(--ink)}
  .ph-svg .ref{fill:var(--ink2)}
  .ph-svg .g{stroke:var(--line)}
  .ph-svg .rl{stroke:var(--ink2);stroke-dasharray:5 4}
  .ph-svg .pl{stroke:var(--acc);fill:none;stroke-width:1.5}
  .ph-svg .pt{fill:var(--acc)}
  .ph-chain{margin:6px 0 0;padding:0;list-style:none;line-height:1.7;color:var(--ink2)}
  .ph-chain li{display:inline}
  .ph-chain li+li::before{content:" → ";color:var(--ink3)}

  /* body text never under 16px (inline 14/15px paragraphs, list items, values) */
  main :is(p,li,dd)[style*="font-size:14px"],main :is(p,li,dd,span)[style*="font-size:15px"]{font-size:16px!important}
}

/* ui-regen-1109-0818 (R45): the website home, from the handoff's site.changes.css §S1 */
/* Dark neutrals: the site's dark theme is warm (hue 75), while the app's is cool (hue 265), so the two looks part in the dark. Use the app's values. */
:root{
  --bg:light-dark(oklch(98.6% .002 265),oklch(16.5% .004 265));--surf:light-dark(oklch(100% 0 0),oklch(19.5% .004 265));--sunk:light-dark(oklch(96.7% .003 265),oklch(14.5% .004 265));
  --line:light-dark(oklch(92.6% .004 265),oklch(26.5% .005 265));--line2:light-dark(oklch(87.5% .005 265),oklch(34% .006 265));
  --ink:light-dark(oklch(20% .006 265),oklch(95% .003 265));--ink2:light-dark(oklch(42% .008 265),oklch(80% .005 265));--ink3:light-dark(oklch(53% .008 265),oklch(67% .006 265));
  --on-ink:light-dark(oklch(99% 0 0),oklch(16.5% .004 265))}
/* #bees stays where it is until it moves into the theme menu: hiding it first would take the switch away. */
/* The hero's four buttons (index.html, the flex row holding "Install it"): their styles are inline, so HANDOFF §S1.2 adds class="ghost" to
   "Read the docs" and "How we know it works" in the markup; this rule then wins over the inline style. */
@media (min-width:641px){
  a.ghost{border-color:transparent!important;background:none!important;color:var(--ink2)!important;padding-inline:12px!important}
  a.ghost:hover{color:var(--ink)!important;background:var(--sunk)!important}
  /* HANDOFF §S1.3: the hero's platform tabs, install line and note in one card */
  .inst-card{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px}
}
/* "Want it to work differently? Tell it.": the amber-tinted box (inline background:var(--acc-bg)) goes neutral. Amber is for links on the site. */
.m-fold>div[style*="--acc-bg"]{background:var(--sunk)!important;border:1px solid var(--line)}