:root, :root[data-theme="light"]{
    color-scheme: light;
    --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef1f5;
    --ink:#14202b; --body:#48525f; --muted:#7b8794;
    --line:#e4e8ed; --line-2:#d5dbe2;
    --accent:#e0590c; --accent-fill:#ff7a18; --accent-ink:#1c1206; --accent-soft:#fff3e9;
    --good:#3f9d63; --good-soft:#e9f5ee;
    --term-bg:#0f1620; --term-fg:#ccd6e2; --term-dim:#66717f;
    --term-cyan:#5fa8b6; --term-green:#59a578; --term-yellow:#c3a457; --term-red:#d07a6b; --term-accent:#ff9455; --term-line:#1c2836;
    --shadow-sm:0 1px 2px rgba(20,32,43,.05);
    --shadow:0 2px 4px rgba(20,32,43,.04), 0 12px 32px rgba(20,32,43,.09);
    --shadow-term:0 3px 8px rgba(20,32,43,.10), 0 24px 60px rgba(20,32,43,.20);
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme]){
    color-scheme: dark;
    --bg:#0a0e14; --surface:#111823; --surface-2:#0d131c;
    --ink:#e9eef4; --body:#aeb8c5; --muted:#798593;
    --line:#1e2732; --line-2:#2a343f;
    --accent:#ff8a3d; --accent-fill:#ff7a18; --accent-ink:#1c1206; --accent-soft:#25190f;
    --good:#5cb37e; --good-soft:#12241a;
    --term-bg:#0c121b; --term-fg:#ccd6e2; --term-dim:#65707e;
    --term-cyan:#6bb4c2; --term-green:#61ae82; --term-yellow:#ccae5e; --term-red:#dc8272; --term-accent:#ff9455; --term-line:#182430;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 4px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.42);
    --shadow-term:0 3px 10px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.55);
  }}
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#0a0e14; --surface:#111823; --surface-2:#0d131c;
    --ink:#e9eef4; --body:#aeb8c5; --muted:#798593;
    --line:#1e2732; --line-2:#2a343f;
    --accent:#ff8a3d; --accent-fill:#ff7a18; --accent-ink:#1c1206; --accent-soft:#25190f;
    --good:#5cb37e; --good-soft:#12241a;
    --term-bg:#0c121b; --term-fg:#ccd6e2; --term-dim:#65707e;
    --term-cyan:#6bb4c2; --term-green:#61ae82; --term-yellow:#ccae5e; --term-red:#dc8272; --term-accent:#ff9455; --term-line:#182430;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 4px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.42);
    --shadow-term:0 3px 10px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.55);
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--body);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
  .mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
  a{color:var(--accent); text-decoration:none}
  a:hover{text-decoration:underline; text-underline-offset:3px}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
  .wrap{max-width:1140px; margin:0 auto; padding:0 28px}

  /* nav (shared) */
  header.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 86%,transparent);
    backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; gap:22px; height:62px}
  .brand{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:600; color:var(--ink); font-size:15px;
    display:inline-flex; align-items:center; gap:9px; letter-spacing:-.01em}
  .brand:hover{text-decoration:none}
  .brand .dot{width:9px; height:9px; border-radius:2px; background:var(--accent-fill);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 22%,transparent)}
  .nav-links{display:flex; gap:4px; margin-left:8px}
  .nav-links a{font-family:ui-monospace,Menlo,monospace; font-size:13.5px; color:var(--body); padding:7px 11px; border-radius:7px}
  .nav-links a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
  .nav-links a.here{color:var(--accent); background:var(--accent-soft)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
  .btn{display:inline-flex; align-items:center; gap:8px; font-family:ui-monospace,Menlo,monospace; font-size:13.5px;
    font-weight:500; padding:11px 17px; border-radius:9px; border:1px solid transparent; cursor:pointer; transition:.18s}
  .btn-primary{background:var(--accent-fill); color:var(--accent-ink); box-shadow:var(--shadow-sm)}
  .btn-primary:hover{filter:brightness(1.05); transform:translateY(-1px); text-decoration:none}
  .btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line-2)}
  .btn-ghost:hover{border-color:var(--accent); text-decoration:none}

  /* breadcrumb + header */
  .crumb{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--muted); padding:26px 0 0;
    display:flex; gap:8px; align-items:center}
  .crumb a{color:var(--muted)} .crumb a:hover{color:var(--accent)}
  .crumb .sep{opacity:.5}
  .thead{padding:16px 0 8px; border-bottom:1px solid var(--line)}
  .thead h1{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink); font-size:clamp(1.9rem,4vw,2.6rem);
    font-weight:600; letter-spacing:-.02em; margin:6px 0 8px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
  .thead h1 .slug{color:var(--accent)}
  .thead .sub{font-size:1.1rem; color:var(--body); max-width:60ch; margin:0 0 18px}
  .tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px}
  .tag{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--muted); background:var(--surface-2);
    border:1px solid var(--line); border-radius:20px; padding:3px 11px}
  .tag.ok{color:var(--good); background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 28%,transparent)}
  .try{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px}

  /* code / command block with copy (shared .ex behavior) */
  .ex{position:relative; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; color:var(--ink);
    background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:12px 46px 12px 14px;
    overflow-x:auto; white-space:nowrap; box-shadow:var(--shadow-sm)}
  .ex .d{color:var(--accent)} .ex .dim{color:var(--muted)}
  .ex.lg{font-size:15px; padding:15px 50px 15px 16px}
  .ex-copy{position:absolute; top:50%; transform:translateY(-50%); right:7px; display:inline-flex; align-items:center;
    justify-content:center; width:28px; height:28px; padding:0; background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; color:var(--muted); cursor:pointer; transition:color .15s, border-color .15s}
  .ex-copy:hover{color:var(--accent); border-color:var(--accent)}
  .ex-copy.done{color:var(--good); border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
  .ex-copy svg{width:14px; height:14px; display:block}

  /* layout */
  .doc{display:grid; grid-template-columns:1fr 300px; gap:52px; padding:38px 0 70px; align-items:start}
  .doc-main{min-width:0}
  .doc-main h2{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink); font-size:1.28rem;
    font-weight:600; letter-spacing:-.01em; margin:38px 0 12px}
  .doc-main h2:first-child{margin-top:0}
  .doc-main p{margin:0 0 14px; max-width:66ch}
  .doc-main h3{font-family:ui-monospace,Menlo,monospace; color:var(--ink); font-size:.98rem; font-weight:600; margin:22px 0 8px}
  /* long-form legal / doc prose (/privacy, /terms) — native to the .doc chrome */
  .doc-main h2{scroll-margin-top:80px}
  .doc-main ul{margin:0 0 15px; padding-left:20px; max-width:66ch}
  .doc-main li{margin:0 0 7px; color:var(--body)}
  .doc-main li::marker{color:var(--muted)}
  .doc-main strong{color:var(--ink); font-weight:600}
  .doc-main code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85em; color:var(--accent);
    background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:.5px 5px}
  .doc-main a{text-decoration:underline; text-underline-offset:2px}
  .doc-eff{color:var(--muted); font-size:.9rem; margin:0 0 22px}
  .table-scroll{overflow-x:auto; margin:2px 0 18px}
  .legal-table{margin:0}
  .label{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); margin:0 0 7px}
  .stack{display:flex; flex-direction:column; gap:14px}

  /* terminal output */
  .term{background:var(--term-bg); border:1px solid var(--term-line); border-radius:12px; overflow:hidden;
    box-shadow:var(--shadow-term); font-family:ui-monospace,Menlo,Consolas,monospace; margin:4px 0}
  .term-head{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--term-line)}
  .lamps{display:flex; gap:7px}.lamps i{width:11px;height:11px;border-radius:50%;background:#3a4756;display:block}
  .term-title{margin-left:6px; color:var(--term-dim); font-size:12px}
  .term-body{padding:15px 17px; overflow-x:auto; font-size:13px; line-height:1.75; color:var(--term-fg); white-space:pre}
  .term-body .p{color:var(--term-accent)} .term-body .cy{color:var(--term-cyan)} .term-body .dm{color:var(--term-dim)}

  /* options table */
  .opt{width:100%; border-collapse:collapse; font-size:.92rem; margin:2px 0 8px}
  .opt th{text-align:left; font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line)}
  .opt td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--body)}
  .opt td code{font-family:ui-monospace,Menlo,monospace; font-size:.86rem; color:var(--accent);
    background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; white-space:nowrap}
  .opt tr:last-child td{border-bottom:0}

  /* recipe */
  .recipe{border:1px solid var(--line); border-radius:11px; padding:15px 16px; background:var(--surface); box-shadow:var(--shadow-sm)}
  .recipe .rt{font-weight:600; color:var(--ink); font-size:.95rem; margin:0 0 9px}

  /* sidebar */
  aside{position:sticky; top:82px; display:flex; flex-direction:column; gap:16px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 17px; box-shadow:var(--shadow-sm)}
  .card h4{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); margin:0 0 12px}
  .facts{display:flex; flex-direction:column; gap:9px}
  .fact{display:flex; justify-content:space-between; gap:10px; font-size:.9rem}
  .fact .k{color:var(--muted)} .fact .v{color:var(--ink); font-family:ui-monospace,Menlo,monospace; font-size:.85rem}
  .vote{display:flex; gap:9px; margin-bottom:12px}
  .vote button{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--body); background:var(--surface-2);
    border:1px solid var(--line); border-radius:9px; padding:9px; cursor:pointer; transition:.15s}
  .vote button:hover{border-color:var(--accent); color:var(--ink)}
  .vote button.up.on{color:var(--good); border-color:color-mix(in srgb,var(--good) 45%,var(--line)); background:var(--good-soft)}
  .vote .n{font-variant-numeric:tabular-nums}
  .crowd-note{font-size:.8rem; color:var(--muted); margin:10px 0 0}
  .related a{display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); color:var(--body)}
  .related a:last-child{border-bottom:0}
  .related a:hover{text-decoration:none}
  .related .rn{font-family:ui-monospace,Menlo,monospace; color:var(--accent); font-weight:600; font-size:.9rem}
  .related .rd{font-size:.82rem; color:var(--muted)}

  /* footer (shared, condensed) */
  footer{border-top:1px solid var(--line); background:var(--surface); padding:40px 0 30px}
  .foot-bar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
    font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted)}
  .foot-bar a{color:var(--body)} .foot-bar .fam{display:flex; gap:16px; flex-wrap:wrap}
  .theme-select{display:inline-flex; align-items:center; gap:10px}
  .ts-seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px}
  .ts-seg button{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--body); background:transparent;
    border:0; padding:5px 11px; border-radius:6px; cursor:pointer}
  .ts-seg button:hover{color:var(--ink)} .ts-seg button.is-active{background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm)}

  @media (max-width:860px){
    .doc{grid-template-columns:1fr; gap:34px}
    aside{position:static; flex-direction:row; flex-wrap:wrap}
    aside .card{flex:1; min-width:240px}
    .nav-links{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important}}

  /* skip-link (keyboard a11y) */
  .skip{position:absolute; left:-9999px; top:0; background:var(--accent-fill); color:var(--accent-ink);
    padding:9px 14px; border-radius:0 0 8px 0; font-family:ui-monospace,Menlo,monospace; font-size:13px; z-index:100}
  .skip:focus{left:0; text-decoration:none}

  /* ═══════════════ page components (home / tools / cli / sections) ═══════════════ */
  /* terminal colour scheme (scoped, unified with tool.php sample_html) */
  .term-body .gn{color:var(--term-green)} .term-body .yl{color:var(--term-yellow)}
  .term-body .rd{color:var(--term-red)} .term-body .ac{color:var(--term-accent)} .term-body .cmd{color:var(--term-fg)}
  .caret{display:inline-block; width:8px; height:1.05em; vertical-align:-2px; background:var(--term-accent);
    margin-left:2px; animation:blink 1.15s step-end infinite}
  @keyframes blink{50%{opacity:0}}
  .term-head{background:linear-gradient(180deg, color-mix(in srgb,var(--term-fg) 6%, var(--term-bg)), var(--term-bg))}

  /* section scaffolding */
  section{padding:76px 0}
  .brand b{font-weight:600}
  .eyebrow{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin:0 0 18px}
  .eyebrow::before{content:"\25B8"; color:var(--accent); opacity:.9}
  h2.sec{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink);
    font-size:clamp(1.5rem,3vw,2rem); font-weight:600; letter-spacing:-.01em; margin:0 0 12px; text-wrap:balance}
  .sec-lead{max-width:62ch; color:var(--body); margin:0 0 34px; font-size:1.03rem}
  .theme-select .ts-label{font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted)}

  /* hero (home + cli) */
  .hero{padding:60px 0 42px}
  .hero-grid{display:grid; grid-template-columns:1.02fr 1.12fr; gap:52px; align-items:center}
  h1.hero-h{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink);
    font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.13; font-weight:600; letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance}
  h1.hero-h .ac{color:var(--accent)}
  .hero p.lede{font-size:1.12rem; color:var(--body); max-width:52ch; margin:0 0 24px}
  .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 14px}
  .hero-note{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--muted)}
  .hero .ex.lg{margin-bottom:8px}
  .install{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line-2);
    border-radius:10px; padding:11px 13px; max-width:460px; box-shadow:var(--shadow-sm)}
  .install code{font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--ink); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis}
  .install code .d{color:var(--accent)}
  .copy{margin-left:auto; flex:none; background:var(--surface-2); border:1px solid var(--line); color:var(--body);
    font-family:ui-monospace,monospace; font-size:11.5px; padding:5px 9px; border-radius:6px; cursor:pointer}
  .copy:hover{color:var(--ink); border-color:var(--accent)}

  /* two ways in (home) */
  .two{display:grid; grid-template-columns:1fr 1fr; gap:22px}
  .way{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; box-shadow:var(--shadow-sm)}
  .way h3{font-family:ui-monospace,Menlo,monospace; color:var(--ink); font-size:1.05rem; font-weight:600; margin:0 0 6px}
  .way p{margin:0 0 16px; font-size:.95rem; color:var(--body)}
  .way .badge{font-family:ui-monospace,monospace; font-size:11px; color:var(--accent); background:var(--accent-soft);
    border:1px solid color-mix(in srgb,var(--accent) 30%, transparent); padding:2px 8px; border-radius:20px; margin-left:8px; vertical-align:1px}

  /* tool grid (home + /tools) */
  .group{margin-bottom:36px}
  .group:last-child{margin-bottom:0}
  .group-head{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin:0 0 15px; display:flex; align-items:center; gap:12px}
  .group-head::after{content:""; flex:1; height:1px; background:var(--line)}
  .group-head .https{font-family:ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.05em; text-transform:none;
    color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
    border-radius:20px; padding:2px 9px}
  .tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:13px}
  .tool{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:17px 18px;
    box-shadow:var(--shadow-sm); transition:border-color .18s, transform .18s, box-shadow .18s}
  .tool:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow)}
  .tool .name{font-family:ui-monospace,Menlo,monospace; font-weight:600; color:var(--ink); font-size:15.5px;
    text-decoration:none; display:inline-block}
  .tool .name:hover, .tool:hover .name{color:var(--accent); text-decoration:none}
  .tool .desc{font-size:.9rem; color:var(--body); margin:6px 0 13px; line-height:1.55}
  .tool .ex{font-size:12px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 38px 8px 10px; box-shadow:none}
  .tool .ex .d{color:var(--accent)}
  .tool .ex .ex-copy{width:26px; height:26px; background:var(--surface); right:5px}
  .tool .ex .ex-copy svg{width:13px; height:13px}
  .group.hide{display:none}

  /* /tools header + filter */
  .toolbox-head{padding:44px 0 8px}
  h1.th{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink);
    font-size:clamp(1.9rem,4.2vw,2.7rem); font-weight:600; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
  h1.th .ac{color:var(--accent)}
  .th-lead{max-width:60ch; color:var(--body); margin:0 0 26px; font-size:1.06rem}
  .filter{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line-2);
    border-radius:11px; padding:0 14px; max-width:460px; box-shadow:var(--shadow-sm); transition:border-color .18s}
  .filter:focus-within{border-color:var(--accent)}
  .filter svg{width:16px; height:16px; color:var(--muted); flex:none}
  .filter input{flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px;
    font-family:ui-monospace,Menlo,monospace; padding:12px 0}
  .filter input::placeholder{color:var(--muted)}
  .filter kbd{font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--muted); background:var(--surface-2);
    border:1px solid var(--line); border-radius:5px; padding:2px 6px; flex:none}
  .count{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--muted); margin:14px 0 0}
  .groups{padding:30px 0 76px}
  .no-match{display:none; font-family:ui-monospace,Menlo,monospace; font-size:.95rem; color:var(--muted);
    padding:24px 0; text-align:center}
  .no-match.show{display:block}

  /* why + showcase (home) */
  .why{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 44px}
  .val h3{font-family:ui-monospace,Menlo,monospace; color:var(--ink); font-size:1.02rem; font-weight:600; margin:0 0 8px;
    display:flex; align-items:baseline; gap:9px}
  .val h3 .k{color:var(--accent); font-size:.85em}
  .val p{margin:0; font-size:.96rem; color:var(--body); max-width:48ch}
  .showcase-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center}

  /* cli page */
  section.blk{padding:52px 0; border-top:1px solid var(--line)}
  .inst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px}
  .inst h3{font-family:ui-monospace,Menlo,monospace; color:var(--ink); font-size:.98rem; font-weight:600; margin:0 0 4px}
  .inst p{margin:0 0 10px; font-size:.88rem; color:var(--muted); max-width:34ch}
  .note-line{font-size:.92rem; color:var(--body)}
  .note-line .mono{color:var(--ink)}
  .runs{background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:16px 18px; margin:0 0 24px;
    font-size:.98rem; color:var(--body)}
  .runs .mono{color:var(--accent)}
  .safe-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .safe .st{font-family:ui-monospace,Menlo,monospace; color:var(--ink); font-size:1rem; font-weight:600; margin:0 0 8px;
    display:flex; align-items:baseline; gap:9px}
  .safe .st .k{color:var(--accent); font-size:.82em; font-weight:600}
  .safe p{margin:0; font-size:.94rem; color:var(--body)}
  .safe p code{font-family:ui-monospace,Menlo,monospace; font-size:.85em; color:var(--accent);
    background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px}
  .safe .full{grid-column:1 / -1}

  /* news placeholder */
  .empty-state{max-width:60ch; margin:8px 0 0}
  .empty-state .term{margin:22px 0}

  /* mega-footer (promoted to shared) */
  footer{padding:56px 0 30px}
  .foot-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px}
  .foot-brand .brand{font-size:16px; margin-bottom:12px}
  .foot-brand p{font-size:.9rem; color:var(--muted); max-width:32ch; margin:0}
  .fcol h4{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); margin:0 0 13px}
  .fcol a{display:block; color:var(--body); font-size:.92rem; padding:4px 0}
  .fcol a:hover{color:var(--accent); text-decoration:none}
  .fcol a .svc{color:var(--muted); font-size:.82em}
  .foot-bar{margin-top:44px; padding-top:22px; border-top:1px solid var(--line)}
  .foot-bar .cmd-wink{color:var(--body)} .foot-bar .cmd-wink .d{color:var(--accent)}

  /* responsive (page components) */
  @media (max-width:900px){
    .hero-grid, .showcase-grid{grid-template-columns:1fr; gap:34px}
    .two, .why-grid, .inst-grid, .safe-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr; gap:26px}
    .foot-brand{grid-column:1 / -1}
    section{padding:56px 0}
  }
  @media (max-width:560px){
    .hero-cta{flex-direction:column; align-items:stretch}
    .hero-cta .btn{justify-content:center}
    .foot-grid{grid-template-columns:1fr}
  }

  /* ═══════════════ contact + 404 ═══════════════ */
  /* contact form */
  .form-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 26px 24px; box-shadow:var(--shadow)}
  form .fields{display:flex; flex-direction:column; gap:18px}
  .field{display:flex; flex-direction:column; gap:7px; min-width:0}
  .flabel{font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.06em; color:var(--ink);
    display:flex; align-items:baseline; gap:8px}
  .flabel .req{color:var(--accent); font-size:11px; letter-spacing:.04em}
  .flabel .opt-t{color:var(--muted); font-size:11px; letter-spacing:.04em; font-weight:400}
  .input, .textarea{width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface-2);
    border:1px solid var(--line-2); border-radius:9px; padding:11px 13px; transition:border-color .15s, background .15s;
    -webkit-appearance:none; appearance:none}
  .input::placeholder, .textarea::placeholder{color:var(--muted)}
  .input:focus, .textarea:focus{outline:none; border-color:var(--accent); background:var(--surface)}
  .textarea{resize:vertical; min-height:150px; line-height:1.6}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px}
  .form-actions .btn-primary{padding:12px 22px}
  .sending-note{font-size:.86rem; color:var(--muted); margin:0}
  .fineprint{display:flex; gap:11px; align-items:flex-start; margin:20px 0 0; padding-top:18px;
    border-top:1px solid var(--line); font-size:.84rem; color:var(--muted); line-height:1.55}
  .fineprint svg{flex:none; width:16px; height:16px; margin-top:2px; color:var(--muted)}
  .fineprint b{color:var(--body); font-weight:600}
  .form-err{display:flex; gap:10px; align-items:flex-start; background:color-mix(in srgb,#e5484d 12%, var(--surface));
    border:1px solid color-mix(in srgb,#e5484d 42%, var(--line)); color:var(--ink); border-radius:11px;
    padding:12px 15px; margin:0 0 20px; font-size:.9rem}
  /* contact sidebar */
  .before a{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); color:var(--body)}
  .before a:last-child{border-bottom:0}
  .before a:hover{text-decoration:none} .before a:hover .bt{color:var(--accent)}
  .before .ic{flex:none; width:17px; height:17px; margin-top:2px; color:var(--muted)}
  .before a:hover .ic{color:var(--accent)}
  .before .bt{font-family:ui-monospace,Menlo,monospace; font-size:.9rem; color:var(--ink); font-weight:600; display:block; line-height:1.4}
  .before .bd{font-size:.8rem; color:var(--muted); display:block; line-height:1.45}
  .attrib p{margin:0; font-size:.9rem; color:var(--body)}
  .attrib .op{font-family:ui-monospace,Menlo,monospace; font-size:.82rem; color:var(--muted); margin-top:10px}
  /* thanks page */
  .thanks{max-width:520px; margin:60px auto; text-align:center}
  .thanks .icon{width:52px; height:52px; color:var(--good); margin:0 auto 18px}
  .thanks h1{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink); font-size:1.7rem;
    font-weight:600; letter-spacing:-.02em; margin:0 0 10px}
  .thanks p{color:var(--body); margin:0 0 22px}

  /* 404 */
  .nf{min-height:calc(100vh - 62px - 220px); display:flex; align-items:center; justify-content:center; padding:56px 0 64px}
  .nf-in{width:100%; max-width:600px; text-align:center; display:flex; flex-direction:column; align-items:center; margin:0 auto}
  .nf .term{width:100%; text-align:left; margin:0 0 34px}
  .nf-code{font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--muted); margin:0 0 14px}
  .nf-code b{color:var(--accent); font-weight:600}
  .nf h1{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink);
    font-size:clamp(1.7rem,4vw,2.35rem); font-weight:600; letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance}
  .nf p.lead{font-size:1.05rem; color:var(--body); max-width:52ch; margin:0 0 28px}
  .nf p.lead .mono{color:var(--ink)}
  .nf-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
  @media (max-width:560px){ .nf-cta{flex-direction:column; align-items:stretch; width:100%; max-width:320px} .nf-cta .btn{justify-content:center} }

  /* nav curl-first command chip (replaces the old "Install the CLI" push) */
  .nav-cmd{padding:7px 11px; border-radius:9px; max-width:none}
  .nav-cmd code{font-size:12.5px}
  .nav-cmd .copy{padding:4px 8px; font-size:11px}
  @media (max-width:420px){ .nav-cmd code{font-size:11.5px} }

  /* ═══════════════ /man wiki ═══════════════ */
  .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  /* badges (command status / recipe facets) */
  .badge{display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:10.5px; font-weight:600;
    letter-spacing:.02em; padding:2px 8px; border-radius:20px; border:1px solid transparent; vertical-align:middle}
  .badge.draft{color:#b4791b; background:color-mix(in srgb,#e5a83a 16%,var(--surface)); border-color:color-mix(in srgb,#e5a83a 42%,var(--line))}
  .badge.destructive{color:#d0463b; background:color-mix(in srgb,#e5484d 14%,var(--surface)); border-color:color-mix(in srgb,#e5484d 44%,var(--line))}
  .badge.difficulty{color:#8163c4; background:color-mix(in srgb,#8a6bb0 15%,var(--surface)); border-color:color-mix(in srgb,#8a6bb0 42%,var(--line))}
  .badge.platform{color:#4277c9; background:color-mix(in srgb,#4f7cc4 14%,var(--surface)); border-color:color-mix(in srgb,#4f7cc4 42%,var(--line))}

  /* command header */
  .cmd-head{padding:2px 0 10px; border-bottom:1px solid var(--line)}
  .cmd-title{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 8px}
  .cmd-title h1{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--ink);
    font-size:clamp(2rem,5vw,2.8rem); font-weight:600; letter-spacing:-.02em; margin:0}
  .cmd-sub{font-size:1.08rem; color:var(--body); max-width:66ch; margin:0 0 15px}
  .meta-facts{display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; font-family:ui-monospace,Menlo,monospace;
    font-size:12px; color:var(--muted); margin:0 0 15px}
  .meta-facts .mf{display:inline-flex; align-items:center; gap:6px}
  .meta-facts .mf b{color:var(--body); font-weight:600; font-variant-numeric:tabular-nums}
  .meta-facts .mf a{color:var(--accent)}
  .meta-facts .sep{opacity:.4}
  .soon{font-family:ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
    border-radius:20px; padding:2px 7px; margin-left:7px}
  .soon-on-accent{color:var(--accent-ink); background:color-mix(in srgb,#fff 28%,transparent); border-color:transparent}
  .soon-note{display:flex; align-items:flex-start; gap:9px; background:var(--surface-2); border:1px solid var(--line);
    border-radius:10px; padding:10px 13px; font-size:.85rem; color:var(--body); margin:0 0 12px; max-width:70ch}
  .soon-note svg{flex:none; color:var(--accent); margin-top:3px}
  .soon-note b{color:var(--ink)}
  .edit-actions{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:0 0 6px}
  .try-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 2px}

  /* example card + recipe extras (recipe base is shared) */
  .eg{border:1px solid var(--line); border-radius:11px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden}
  .eg .eg-t{font-size:.94rem; color:var(--ink); padding:12px 15px 0; margin:0}
  .eg .ex{border:0; border-radius:0; box-shadow:none; background:transparent; margin-top:4px}
  .eg .ex .ex-copy{background:var(--surface-2)}
  .recipe .rbadges{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 10px}
  .recipe .why{font-size:.88rem; color:var(--muted); margin:10px 0 0}

  /* on-this-page TOC */
  .toc{display:flex; flex-direction:column; gap:2px}
  .toc a{font-family:ui-monospace,Menlo,monospace; font-size:.88rem; color:var(--body); padding:5px 0}
  .toc a:hover{color:var(--accent); text-decoration:none}
  .card .edit-cta{margin-top:14px} .card .edit-cta .btn{width:100%; justify-content:center}

  /* index contribute block */
  .contribute{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 28px;
    box-shadow:var(--shadow-sm); margin:8px 0 60px}
  .contribute p{color:var(--body)}

  /* disabled affordances (e.g. the SOON "Suggest an edit" buttons) — visibly, not just programmatically, inert */
  .btn[aria-disabled="true"]{cursor:not-allowed; opacity:.6}
  .btn[aria-disabled="true"]:hover{transform:none; filter:none; border-color:var(--line-2); box-shadow:var(--shadow-sm)}
  .doc-main h2 .add{cursor:not-allowed}

  /* copy button on terminal panels (.term) — sits at the right of the header */
  .term-copy{margin-left:auto; flex:none; display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; padding:0; background:color-mix(in srgb,var(--term-fg) 8%, transparent);
    border:1px solid var(--term-line); border-radius:6px; color:var(--term-dim); cursor:pointer;
    transition:color .15s, border-color .15s}
  .term-copy:hover{color:var(--term-fg); border-color:var(--term-dim)}
  .term-copy.done{color:var(--term-green); border-color:color-mix(in srgb,var(--term-green) 55%,var(--term-line))}
  .term-copy svg{width:14px; height:14px; display:block}

/* /u browser drop uploader (progressive enhancement; hidden until curlhub.js reveals it) */
.drop[hidden]{display:none}
.drop{margin:0 0 34px}
.drop-zone{display:block; border:1.5px dashed var(--line-2); border-radius:12px; background:var(--surface-2);
  padding:30px 22px; text-align:center; transition:border-color .18s, background .18s}
.drop-zone:focus-within{border-color:var(--accent)}          /* visible focus for the clipped file input */
.drop.is-drag .drop-zone{border-color:var(--accent); background:var(--accent-soft)}
.drop.is-busy .drop-zone{opacity:.7}
.drop-zone svg{width:30px; height:30px; color:var(--muted); margin:0 0 10px}
.drop-lead{margin:0 0 6px; color:var(--body); display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap}
.drop-btn{padding:7px 13px}
.drop-hint{margin:6px 0 0; font-size:.85rem; color:var(--muted)}
.drop-status{margin:12px 0 0; font-size:.9rem; color:var(--body); min-height:1.2em}
.drop-error{margin:14px 0 0}                 /* .form-err supplies the box + AA contrast */
.drop-result{margin:16px 0 0}
.drop-result h3{font-family:ui-monospace,Menlo,monospace; color:var(--ink); font-size:1rem; font-weight:600; margin:0 0 12px}
.drop-result h3:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.drop-result .ex{margin:0 0 10px}
.drop-note{font-size:.88rem; color:var(--muted); margin:12px 0 16px; max-width:66ch}
@media (prefers-reduced-motion:reduce){ .drop-zone{transition:none} }

/* ── analytics consent banner ─────────────────────────────────────────────
   Fixed to the viewport bottom on purpose: it must never push layout and add
   CLS. Server-rendered with [hidden]; consent.js unhides it only for visitors
   who haven't decided, so it never flashes for people who already answered
   and never appears at all without JS (no JS -> no GA4 to consent to). */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line-2); box-shadow:var(--shadow);
  max-height:60vh; overflow-y:auto; overscroll-behavior:contain}
.consent[hidden]{display:none}
/* Height reserved by consent.js so the fixed bar never sits on top of the footer controls —
   including the Analytics button that reopens it (WCAG 2.2 SC 2.4.11). Padding only extends
   document height, so this reserves space without shifting any laid-out element (CLS 0). */
body.consent-open{padding-bottom:var(--consent-h,0px)}
.consent-in{max-width:1140px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.consent-txt{flex:1 1 420px; min-width:0}
.consent-h{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-size:.95rem; font-weight:600; color:var(--ink); margin:0 0 5px}
.consent-h .d{color:var(--accent)}
.consent-h:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.consent-txt p{margin:0; font-size:.88rem; line-height:1.6; color:var(--body); max-width:80ch}
.consent-act{display:flex; gap:10px; flex:none; margin-left:auto}
@media (max-width:700px){
  .consent-in{padding:14px 20px; gap:14px}
  .consent-act{width:100%; margin-left:0}
  .consent-act .btn{flex:1; justify-content:center}
}
/* footer control to reopen the choice — a consent model with no withdrawal path
   is not consent. Styled as the sibling footer links, not as a button. */
.consent-reopen{background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--body); text-decoration:underline; text-underline-offset:3px}
.consent-reopen:hover{text-decoration:underline; text-underline-offset:3px}
/* current-setting line, shown only when the banner is reopened from the footer */
.consent-txt .consent-state{margin:7px 0 0; font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-size:.8rem; color:var(--body)}
/* in-banner link: accent is 3.74:1 on --surface in light theme, so carry the underline for
   affordance and a passing colour instead — this is a consent surface, legibility first */
.consent-txt a{color:var(--body); text-decoration:underline; text-underline-offset:3px}
.consent-txt a:hover{color:var(--accent)}
.consent-state[hidden]{display:none}