/* Layout: a lab instrument's manual. One text column at 68ch, with wide
   "specimen" panels (file trees, code, diffs) that break out to the right. */
:root{
  --paper:#f5f7f8; --panel:#ffffff; --ink:#14202b; --ink-2:#4a5866; --rule:#d9e0e5;
  --accent:#2340c9; --accent-soft:#e6eafb;
  --add:#16794a; --add-bg:#e5f4ec; --del:#b42318; --del-bg:#fbe9e7;
  --defect:#b42318;
  --f-display:"Newsreader", Georgia, "Times New Roman", serif;
  --f-body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s1:.8125rem; --s2:.9375rem; --s3:1.0625rem; --s4:1.375rem; --s5:2rem; --s6:clamp(2.4rem,5.4vw,3.9rem);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0f151b; --panel:#161e26; --ink:#e4eaef; --ink-2:#9aa8b5; --rule:#273340;
  --accent:#8ea2ff; --accent-soft:#1d2550;
  --add:#5fd39a; --add-bg:#12301f; --del:#ff8a7a; --del-bg:#3a1712; --defect:#ff8a7a;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f151b; --panel:#161e26; --ink:#e4eaef; --ink-2:#9aa8b5; --rule:#273340;
  --accent:#8ea2ff; --accent-soft:#1d2550;
  --add:#5fd39a; --add-bg:#12301f; --del:#ff8a7a; --del-bg:#3a1712; --defect:#ff8a7a;
  color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none !important}  /* a hidden tab pane stays hidden, whatever its layout */
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s3);line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto}
code,pre,.mono{font-family:var(--f-mono)}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;line-height:1.15;margin:0}
h2{font-size:var(--s5)}
h3{font-size:var(--s4)}
p{margin:0}
.label{font-family:var(--f-mono);font-size:var(--s1);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:24px;padding-block:14px;flex-wrap:wrap}
.mark{font-family:var(--f-mono);font-weight:500;font-size:1rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.mark svg{flex:none}
nav{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--s2)}
nav a{color:var(--ink-2);text-decoration:none}
nav a:hover{color:var(--ink)}
.top .right{margin-left:auto;display:flex;gap:12px;align-items:center}
.pill{font-family:var(--f-mono);font-size:.75rem;border:1px solid var(--rule);border-radius:999px;padding:2px 10px;color:var(--ink-2);white-space:nowrap}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;padding-block:72px 64px;align-items:center}
.hero h1{font-size:var(--s6);letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lede{font-size:1.1875rem;color:var(--ink-2);max-width:34em;margin-top:20px}
.install{margin-top:28px;display:flex;align-items:center;gap:0;border:1px solid var(--rule);background:var(--panel);border-radius:6px;max-width:30rem}
.install code{flex:1;min-width:0;padding:12px 14px;font-size:var(--s2);overflow-x:auto;white-space:nowrap}
.install code::before{content:"$ ";color:var(--ink-2)}
.copy{font:inherit;font-size:var(--s1);font-family:var(--f-mono);border:0;border-left:1px solid var(--rule);background:transparent;color:var(--ink-2);padding:12px 14px;cursor:pointer}
.copy:hover{color:var(--ink)}
.ctas{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn{display:inline-block;font-size:var(--s2);font-weight:500;padding:10px 18px;border-radius:6px;text-decoration:none;border:1px solid var(--accent)}
.btn.primary{background:var(--accent);color:var(--paper)}
.btn.ghost{color:var(--accent)}
.hero .note{margin-top:14px;font-size:var(--s1);color:var(--ink-2)}

/* Specimen panels */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:8px;min-width:0}
.panel .cap{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule)}
.panel pre{margin:0;padding:16px;overflow-x:auto;font-size:.875rem;line-height:1.7}
.tree .c{color:var(--ink-2)}
.tree .d{color:var(--accent);font-weight:500}

/* Sections */
section.band{padding-block:72px;border-top:1px solid var(--rule)}
.intro{max-width:44rem;display:grid;gap:14px}
.intro p{color:var(--ink-2)}
.q{font-family:var(--f-display);font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.2;font-style:italic;max-width:24em;text-wrap:balance}

.steps{display:grid;gap:40px;margin-top:44px}
.step{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:40px;align-items:start}
.step .txt{display:grid;gap:10px}
.step .txt p{color:var(--ink-2);font-size:var(--s2)}
.stepno{font-family:var(--f-mono);font-size:var(--s1);color:var(--accent)}

/* Code with planted defects */
.code{display:grid;grid-template-columns:auto minmax(0,1fr);font-family:var(--f-mono);font-size:.84rem;line-height:1.75;overflow-x:auto;padding-block:12px}
.code .ln{color:var(--ink-2);text-align:right;padding:0 12px 0 16px;user-select:none}
.code .src{white-space:pre;padding-right:16px}
.code .bad{background:var(--del-bg)}
.code .bad.ln{color:var(--defect);font-weight:500}
.defects{display:grid;gap:8px;padding:14px 16px;border-top:1px solid var(--rule);font-size:var(--s1)}
.defects div{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:8px}
.defects b{font-family:var(--f-mono);font-weight:500;color:var(--defect)}


/* Candidates and private facts */
.cands{display:grid;gap:0}
.cand{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:12px;padding:10px 16px;font-size:var(--s2);border-bottom:1px solid var(--rule)}
.cand:last-child{border-bottom:0}
.cand b{font-family:var(--f-display);font-weight:500;font-size:1.1rem}
.cand span{color:var(--ink-2)}
.cand.lead b::after{content:"looks best";display:block;font-family:var(--f-mono);font-size:.68rem;font-weight:400;color:var(--accent);letter-spacing:.04em}
.private{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
.private>div{background:var(--panel);padding:14px 16px;display:grid;gap:8px;align-content:start;font-size:var(--s1);line-height:1.5}
.private .who{font-family:var(--f-mono);font-weight:500;font-size:.8rem}
.private .who i{display:block;font-style:normal;font-weight:400;color:var(--ink-2)}
.private .neg,.private .pos{font-family:var(--f-mono);font-size:.72rem;padding:0 6px;border-radius:3px;margin-right:4px}
.private .neg{background:var(--del-bg);color:var(--del)}
.private .pos{background:var(--add-bg);color:var(--add)}
@media (max-width:880px){.private{grid-template-columns:minmax(0,1fr)}}

/* Diff */
.diff{font-family:var(--f-mono);font-size:.84rem;line-height:1.7;padding-block:10px;overflow-x:auto}
.diff div{white-space:pre;padding:0 16px}
.diff .m{background:var(--del-bg);color:var(--del)}
.diff .p{background:var(--add-bg);color:var(--add)}
.diff .x{color:var(--ink-2)}

.soon{display:inline-block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;padding:1px 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent);vertical-align:middle;margin-left:6px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}

/* Why cards */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin-top:36px}
.why div{background:var(--panel);padding:26px 26px 28px;display:grid;gap:10px;align-content:start}
.why h3{font-size:1.25rem}
.why p{color:var(--ink-2);font-size:var(--s2)}

/* Ideas */
.ideas{display:grid;gap:0;margin-top:36px;border-top:1px solid var(--rule)}
.idea{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,15rem);gap:28px;padding-block:20px;border-bottom:1px solid var(--rule);align-items:baseline}
.idea h3{font-size:1.2rem}
.idea p{color:var(--ink-2);font-size:var(--s2)}
.idea code{font-size:.82rem;color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:2px 6px;justify-self:start}

/* Install tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);padding-inline:8px;overflow-x:auto}
.tabs button{font:inherit;font-size:var(--s2);background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabpane{padding:18px 16px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.tabpane ol{margin:0;padding-left:1.3rem;display:grid;gap:14px;font-size:var(--s2);grid-template-columns:minmax(0,1fr)}
.tabpane li p{color:var(--ink-2)}
.cmd{display:block;margin-top:6px;font-family:var(--f-mono);font-size:.84rem;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:8px 10px;overflow-x:auto;white-space:nowrap}

/* Run folder */
.runs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:36px;align-items:start}
.runs dl{margin:0;display:grid;gap:14px}
.runs dt{font-family:var(--f-mono);font-size:var(--s2);font-weight:500}
.runs dd{margin:2px 0 0;color:var(--ink-2);font-size:var(--s2)}

footer{border-top:1px solid var(--rule);padding-block:40px 56px;font-size:var(--s2);color:var(--ink-2)}
footer .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:28px}
footer h4{margin:0 0 8px;font-size:var(--s1);font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:880px){
  .hero,.step,.runs,.pair{grid-template-columns:minmax(0,1fr)}
  .hero{gap:36px;padding-block:44px}
  .step{gap:16px}
  .why{grid-template-columns:minmax(0,1fr)}
  .idea{grid-template-columns:minmax(0,1fr);gap:6px}
  footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  nav{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.copy,nav a{transition:color .15s,background-color .15s}
}

/* Tutorial section on the homepage */
.outline{list-style:none;margin:0;padding:0;counter-reset:o;display:grid;gap:0;border-top:1px solid var(--rule)}
.outline li{counter-increment:o;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);font-size:var(--s2)}
.outline li::before{content:counter(o);font-family:var(--f-mono);color:var(--accent)}
.outline li span{color:var(--ink-2)}
/* Example list and reference */
.exlist{display:grid;gap:0;margin-top:36px;border-top:1px solid var(--rule)}
.ex{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:28px;padding-block:14px;border-bottom:1px solid var(--rule);font-size:var(--s2)}
.ex code{font-size:.86rem}
.ex p{color:var(--ink-2)}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin-top:36px}
.refs a,.refs .refcard{background:var(--panel);padding:20px 22px;display:grid;gap:6px;text-decoration:none;color:var(--ink);align-content:start}
.refs a:hover{background:var(--accent-soft)}
.refs b{font-family:var(--f-display);font-weight:500;font-size:1.15rem}
.refs span{color:var(--ink-2);font-size:var(--s2)}
.refs code{font-size:.85em}
.refs i{font-style:normal;font-family:var(--f-mono);font-size:.75rem;color:var(--accent)}
/* Tutorial page */
.doc{max-width:46rem;margin:0 auto;padding-block:56px 72px}
.doc h1{font-size:clamp(2.2rem,4.6vw,3.2rem);letter-spacing:-.01em}
.doc .lede{font-size:1.1875rem;color:var(--ink-2);margin-top:16px}
.doc h2{font-size:1.75rem;margin-top:56px;padding-top:28px;border-top:1px solid var(--rule)}
.doc h2 .stepno{display:block;margin-bottom:6px}
.doc p,.doc ul,.doc ol{margin-top:14px}
.doc ul,.doc ol{padding-left:1.3rem;display:grid;gap:6px}
.doc li{color:var(--ink)}
.doc p code,.doc li code{font-size:.88em;background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:1px 5px}
.doc .panel{margin-top:18px}
.doc .cmd{margin-top:16px;padding:10px 12px;font-size:.9rem}
.doc .cmd::before{content:"$ ";color:var(--ink-2)}
.doc .out pre{color:var(--ink-2)}
.aside{margin-top:18px;padding:14px 16px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 6px 6px 0;font-size:var(--s2)}
.aside p:first-child{margin-top:0}
.toc{margin-top:28px;font-size:var(--s2)}
.nextprev{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
@media (max-width:880px){.refs{grid-template-columns:minmax(0,1fr)}.ex{grid-template-columns:minmax(0,1fr);gap:4px}}


/* Jumping to a section or step keeps its heading clear of the sticky header */
[id]{scroll-margin-top:72px}

/* Glossary tips: a dotted word shows its meaning on hover, focus or tap */
.t{border-bottom:1px dotted currentColor;cursor:help;position:relative;text-decoration:none}
.t::after{content:attr(data-tip);display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:20;
  width:max-content;max-width:min(19rem,72vw);background:var(--ink);color:var(--paper);
  font:400 .8125rem/1.45 var(--f-body);letter-spacing:0;text-transform:none;font-style:normal;
  padding:8px 10px;border-radius:6px;white-space:normal;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.t:hover::after,.t:focus::after{display:block}
.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:36px 0 0}
.gloss div{padding-block:12px;border-bottom:1px solid var(--rule)}
.gloss dt{font-family:var(--f-mono);font-size:var(--s2);font-weight:500}
.gloss dd{margin:2px 0 0;color:var(--ink-2);font-size:var(--s2)}

/* Hero install box with two tabs */
.hinstall{margin-top:28px;max-width:30rem}
.hinstall .tabs{border:1px solid var(--rule);border-bottom:0;border-radius:6px 6px 0 0;background:var(--panel)}
.hinstall .install{margin-top:0;border-radius:0 0 6px 6px}
.hinstall .hint{margin-top:8px;font-size:var(--s1);color:var(--ink-2)}

/* Describe: sentence → files → picture */
.trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:16px;margin-top:36px;align-items:stretch}
.trio .panel{display:flex;flex-direction:column}
.trio .say{padding:18px 16px;font-family:var(--f-display);font-size:1.35rem;line-height:1.35;font-style:italic}
.trio .panel .foot{margin-top:auto;padding:10px 16px;border-top:1px solid var(--rule);font-size:var(--s1);color:var(--ink-2)}
.flow{display:block;width:100%;height:auto;padding:12px 8px}
.flow .node rect{fill:var(--paper);stroke:var(--ink-2);stroke-width:1.2}
.flow .node.decide rect{stroke:var(--accent);stroke-width:2}
.flow .group{fill:none;stroke:var(--rule);stroke-width:1.2;stroke-dasharray:4 3}
.flow text{font-family:var(--f-mono);font-size:13px;fill:var(--ink)}
.flow .gl{font-size:11px;fill:var(--ink-2)}
.flow .edge{stroke:var(--ink-2);stroke-width:1.2;fill:none;marker-end:url(#arrow)}
.flow #arrow path{fill:var(--ink-2)}
.arrowsep{display:none}

/* Tutorial ladder on the homepage */
.ladder{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.ladder li{background:var(--panel)}
.ladder a{display:grid;gap:4px;padding:18px 20px;text-decoration:none;color:var(--ink);height:100%}
.ladder a:hover{background:var(--accent-soft)}
.ladder .no{font-family:var(--f-mono);font-size:var(--s1);color:var(--accent)}
.ladder b{font-family:var(--f-display);font-weight:500;font-size:1.15rem}
.ladder span{color:var(--ink-2);font-size:var(--s2)}
.ladder code{font-size:.85em}
.free{font-family:var(--f-mono);font-size:.7rem;padding:0 6px;border-radius:3px;background:var(--add-bg);color:var(--add);margin-left:6px;vertical-align:middle}

/* Research strip and what's coming */
details.yaml{margin-top:18px;max-width:40rem}
details.yaml summary{cursor:pointer;font-size:var(--s2);color:var(--accent)}
details.yaml .panel{margin-top:10px}
.coming{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin-top:36px}
.coming div{background:var(--panel);padding:22px 24px;display:grid;gap:8px;align-content:start}
.coming h3{font-size:1.2rem}
.coming p{color:var(--ink-2);font-size:var(--s2)}
.notify{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:36rem}
.notify input{flex:1;min-width:12rem;font:inherit;font-size:var(--s2);padding:10px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--ink)}
.notify button{font:inherit;font-size:var(--s2);font-weight:500;padding:10px 18px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--paper);cursor:pointer}
.notify-note{margin-top:8px;font-size:var(--s1);color:var(--ink-2)}

@media (max-width:880px){
  .trio,.ladder,.coming,.gloss{grid-template-columns:minmax(0,1fr)}
}

/* Tutorial: each step in the browser or in a terminal (D137) */
.via-switch{display:inline-flex;margin-top:18px;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--panel)}
.via-switch span{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2);padding:7px 10px;border-right:1px solid var(--rule)}
.via-switch button{font:inherit;font-size:var(--s1);background:none;border:0;padding:6px 12px;color:var(--ink-2);cursor:pointer}
.via-switch button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:500}
html[data-via="browser"] .via[data-via="terminal"],html[data-via="terminal"] .via[data-via="browser"]{display:none}
.via{border-left:2px solid var(--rule);padding-left:14px;margin-top:14px}
.via>:first-child{margin-top:0}
.doc b.ui{font-weight:600;white-space:nowrap}
.shot{margin:18px 0 0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--panel)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:8px 12px;border-top:1px solid var(--rule);font-size:var(--s1);color:var(--ink-2)}

/* ---- Homepage, Nov 2026: hero, live example, why, ladder ---- */
.hero2{padding-block:72px 40px;max-width:54rem}
.hero2 h1{font-size:var(--s6);letter-spacing:-.01em}
.hero2 h1 em{font-style:italic;color:var(--accent)}
.hero2 .lede{font-size:1.1875rem;color:var(--ink-2);max-width:40em;margin-top:20px}
.hero2 .ctas{margin-top:28px}
.hero2 .note{margin-top:14px;font-size:var(--s1);color:var(--ink-2)}
.demo-head{display:grid;gap:6px;max-width:48rem;margin-bottom:16px}
.demo-head p:last-child{color:var(--ink-2);font-size:var(--s2)}
.demo-head code{font-size:.88em}
.demo{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1.25fr) minmax(0,1fr);background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-bottom:80px;box-shadow:0 1px 0 var(--rule),0 18px 40px -28px rgba(20,32,43,.35)}
.demo .col{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--rule)}
.demo .col:nth-child(3){border-right:0}
.demo .cap{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule)}
.files{list-style:none;margin:0;padding:8px 0}
.files button{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;font:inherit;font-family:var(--f-mono);font-size:.82rem;text-align:left;background:none;border:0;padding:7px 16px;color:var(--ink);cursor:pointer}
.files button:hover{background:var(--paper)}
.files button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.files .k{font-size:.68rem;color:var(--ink-2);border:1px solid var(--rule);border-radius:3px;padding:0 5px;white-space:nowrap}
.viewer pre{margin:0;padding:16px;font-size:.8rem;line-height:1.7;overflow:auto;white-space:pre;flex:1;max-height:36rem}
.viewer .cm,.panel pre .cm{color:var(--ink-2)}
.viewer .cl{display:inline-block;min-width:100%;padding:0 6px;margin:0 -6px;border-radius:3px;cursor:crosshair}
.viewer .cl:hover{background:var(--accent-soft);color:var(--accent)}
.fx{display:block;width:100%;height:auto;padding:12px 10px;max-height:40rem}
.fx text{font-family:var(--f-mono);font-size:12.5px;fill:var(--ink)}
.fx .gl{font-size:10.5px;fill:var(--ink-2)}
.fx .grp rect{fill:none;stroke:var(--rule);stroke-width:1.3;stroke-dasharray:4 3}
.fx .nd rect{fill:var(--paper);stroke:var(--ink-2);stroke-width:1.2}
.fx .nd.dec rect{stroke:var(--accent);stroke-width:1.8}
.fx .nd.tk rect{stroke-dasharray:3 3}
.fx .e{fill:none;stroke:var(--ink-2);stroke-width:1.2;marker-end:url(#ah)}
.fx #ah path{fill:var(--ink-2)}
.fx .side{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.fx .on rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.4}
.fx .grp.on rect{fill:none;stroke:var(--accent);stroke-width:1.6}
.fx .nd.on text{fill:var(--accent);font-weight:500}
.fx .e.on{stroke:var(--accent);stroke-width:2.2}
.fx .side.on{stroke:var(--accent);opacity:1;stroke-width:1.8}
@media (prefers-reduced-motion:no-preference){.fx rect,.fx path{transition:fill .2s,stroke .2s,stroke-width .2s,opacity .2s}}
.demo .bar{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:14px 16px;border-top:1px solid var(--rule);background:var(--paper)}
.demo .bar .btn{cursor:pointer;font-family:var(--f-body);white-space:nowrap}
.log{margin:0;font-family:var(--f-mono);font-size:.76rem;line-height:1.55;color:var(--ink-2);height:9.4em;overflow:auto;white-space:pre}
@media (max-width:980px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .demo .col{border-right:0;border-bottom:1px solid var(--rule)}
  .files{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px}
  .files li{flex:none}
  .files button{border:1px solid var(--rule);border-radius:4px;padding:4px 8px}
  .files .k{display:none}
  .viewer pre{max-height:22rem}
  .fx{max-width:26rem;margin:0 auto}
  .demo .bar{grid-template-columns:minmax(0,1fr)}
}

/* Why: ten reasons, each with its organizational idea and a source */
.whys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin-top:36px}
.whys article{background:var(--panel);padding:24px 26px 26px;display:grid;gap:8px;align-content:start}
.whys .no{font-family:var(--f-mono);font-size:var(--s1);color:var(--accent)}
.whys h3{font-size:1.3rem}
.whys .org{font-family:var(--f-display);font-style:italic;font-size:1.08rem;color:var(--ink-2);margin-top:-2px}
.whys p{font-size:var(--s2)}
.whys code{font-size:.86em}
.whys .src{font-size:var(--s1);color:var(--ink-2);padding-top:8px;border-top:1px dashed var(--rule);margin-top:4px}
@media (max-width:880px){.whys{grid-template-columns:minmax(0,1fr)}}

/* Ladder: step 0, install, spans the row */
.ladder li.start{grid-column:1/-1}
.ladder li.start a{background:var(--accent-soft)}
.ladder li.start b{font-size:1.3rem}
.aside-line{margin-top:20px;font-size:var(--s2);color:var(--ink-2);max-width:52rem}
.aside-line code{font-size:.86em;word-break:break-word}

/* The big example's hook */
h2.hook{font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.15;max-width:22em}
h2.hook em{font-style:italic;color:var(--accent)}

/* Install page */
.uv{margin-top:18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);font-size:var(--s2)}
.uv b.big{font-family:var(--f-mono);font-size:1.3rem;color:var(--accent);font-weight:500}
.uv p{margin:0;color:var(--ink-2)}
.uv p+p{margin-top:6px}
.or{display:flex;align-items:center;gap:12px;margin-top:28px;font-family:var(--f-mono);font-size:var(--s1);color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--rule)}
.doc .tabpane .cmd{margin-top:8px}
.doc .tabpane ol{margin-top:0}
.cmdrow{display:flex;align-items:stretch;margin-top:8px}
.cmdrow .cmd{flex:1;min-width:0;margin-top:0 !important;border-radius:4px 0 0 4px}
.cmdrow .copy{border:1px solid var(--rule);border-left:0;border-radius:0 4px 4px 0;background:var(--panel)}
.doc ul,.doc ol{grid-template-columns:minmax(0,1fr)}
.doc li{min-width:0}

/* Hero example: the plain debate, and the fact checker the button adds */
.fx .add{display:none}
.fx.with .add{display:inline}
@media (prefers-reduced-motion:no-preference){.fx.with .add{animation:fxin .45s ease-out}}
@keyframes fxin{from{opacity:0}to{opacity:1}}
.viewer .cl.ins{background:var(--add-bg);color:var(--add)}
.viewer .cl.del{background:var(--del-bg);color:var(--del)}
.files .k.new{color:var(--add);border-color:var(--add);background:var(--add-bg)}
.demo .btns{display:flex;flex-direction:column;gap:8px}
.demo .btns .btn{text-align:center}
.demo-foot{margin:-60px 0 80px;max-width:48rem;font-size:var(--s2);color:var(--ink-2);padding:12px 16px;border-left:3px solid var(--add);background:var(--add-bg);border-radius:0 6px 6px 0}
.demo-foot b{color:var(--ink)}
@media (max-width:980px){.demo .btns{flex-direction:row;flex-wrap:wrap}}
.demo .bar .btn.ghost{background:transparent}
.fx.with .v0{display:none}

/* Watch a real run: the transcript of a recorded run */
.btn.primary.alt{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tx{grid-column:1/-1;border-top:1px solid var(--rule);background:var(--panel)}
.txhead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--rule)}
.txmeta{font-size:var(--s1);color:var(--ink-2);margin-top:4px}
.txmeta code{font-size:.92em}
.txctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.txbtn{font:inherit;font-family:var(--f-mono);font-size:.75rem;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:3px 8px;color:var(--ink-2);cursor:pointer}
.txbtn:hover{color:var(--ink)}
.txbtn.cur{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.txlist{max-height:34rem;overflow:auto;padding:8px 16px 16px;display:grid;gap:10px;scroll-behavior:smooth}
.turn{border:1px solid var(--rule);border-radius:8px;padding:12px 14px;background:var(--paper);max-width:52rem}
.turn.t-against{margin-left:auto}
.turn.t-fact_checker{max-width:40rem;margin-inline:auto;border-style:dashed}
.turn.t-judge{max-width:none;border-color:var(--accent);border-width:1.5px}
.turn header{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.turn .who{font-family:var(--f-mono);font-weight:500;font-size:.85rem}
.turn .who i{font-style:normal;font-weight:400;color:var(--ink-2);margin-left:6px}
.turn .meta{margin-left:auto;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2)}
.vd{font-family:var(--f-mono);font-size:.72rem;padding:0 6px;border-radius:3px;background:var(--accent-soft);color:var(--accent)}
.vd-pass{background:var(--add-bg);color:var(--add)}
.vd-fail{background:var(--del-bg);color:var(--del)}
.turn .body{font-size:var(--s2);line-height:1.6;white-space:pre-wrap}
.turn .body:not(.typing){white-space:normal}
.turn .body p+p{margin-top:8px}
.turn .body.typing::after{content:"▍";color:var(--accent)}
.turn details{margin-top:8px;font-size:var(--s1);color:var(--ink-2)}
.turn details summary{cursor:pointer;font-family:var(--f-mono)}
.turn details p{margin-top:6px}
.txfoot{padding:12px 16px;border-top:1px solid var(--rule);font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2);line-height:1.7}
@media (max-width:980px){.turn.t-against{margin-left:0}.txlist{max-height:28rem}}

/* Hero example: the file pane drawn as a folder tree, like an editor's explorer */
.ftree{padding:8px 0}
.ftree .root{display:flex;align-items:center;gap:6px;padding:7px 16px 5px 10px;font-family:var(--f-mono);font-size:.82rem;font-weight:500;color:var(--ink)}
.ftree .caret{font-size:.7rem;color:var(--ink);width:.8em;text-align:center}
.ftree .ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.ftree .root .ic{color:var(--ink)}
.ftree .files{padding:0}
.ftree .files li{position:relative}
.ftree .files li::before{content:"";position:absolute;left:32px;top:0;bottom:0;border-left:1px solid var(--ink-2)}
.ftree .files li:last-child::before{bottom:50%}
.ftree .files li::after{content:"";position:absolute;left:32px;top:50%;width:9px;border-top:1px solid var(--ink-2)}
.ftree .files button{padding-left:45px;align-items:center}
.ftree .fn{display:flex;align-items:center;gap:7px;min-width:0}
.ftree .fn .ic{color:var(--ink)}
.ftree .files button[aria-selected="true"] .ic{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.ftree .files li.added{animation:treein .4s ease-out}}
@keyframes treein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:980px){
  .ftree{padding:0}
  .ftree .root{padding:10px 12px 0}
  .ftree .files li::before,.ftree .files li::after{display:none}
  .ftree .files{padding:8px 12px 10px}
  .ftree .files button{padding:4px 8px}
  .ftree .fn .ic{display:none}
}