/* Custom subset of JetBrains Mono 700 containing only the chars used
     by the ASCII logo (box-drawing glyphs aren't in any Google Fonts
     subset). Inlined as a 1.86 KB woff2 data URL so the logo renders
     on first paint without waiting on a network round-trip. */
  @font-face{
    font-family: 'BinvimAscii';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url(data:font/woff2;base64,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) format('woff2');
  }

  /* ── Catppuccin Mocha ─────────────────────────────────────── */
  :root{
    --base:#1e1e2e; --mantle:#181825; --crust:#11111b;
    --s0:#313244; --s1:#45475a; --s2:#585b70;
    --text:#cdd6f4; --sub1:#bac2de; --sub0:#a6adc8;
    --ov2:#9399b2; --ov1:#7f849c; --ov0:#898ea3;
    --rosewater:#f5e0dc; --flamingo:#f2cdcd; --pink:#f5c2e7;
    --mauve:#cba6f7; --red:#f38ba8; --maroon:#eba0ac;
    --peach:#fab387; --yellow:#f9e2af; --green:#a6e3a1;
    --teal:#94e2d5; --sky:#89dceb; --sapphire:#74c7ec;
    --blue:#89b4fa; --lavender:#b4befe;

    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --display:'Space Mono', 'JetBrains Mono', monospace;

    --col: 1100px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--base);color:var(--text)}
  html{overflow-x: clip}
  body{
    font-family:var(--mono);
    font-size:14px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
    padding:28px 16px 36px;
    overflow-x: clip;
    background: var(--base);
  }
  a{color:var(--sky); text-decoration:none}
  a:hover{color:var(--sapphire); text-decoration:underline; text-decoration-style:dotted}
  ::selection{background:var(--mauve);color:var(--crust)}


  /* ── Page column ──────────────────────────────────────────── */
  .page{
    max-width: var(--col);
    margin: 0 auto;
    position:relative;
  }

  /* fold-marker rule between sections */
  .fold{
    color:var(--ov0);
    font-size:12px;
    margin: 36px 0 18px;
    display:flex; align-items:center; gap:14px;
  }
  .fold .glyph{color:var(--ov1)}
  .fold .label{
    color:var(--mauve);
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin: 0;
    font-size: inherit;
  }
  .fold .rule{flex:1; border-top:1px dashed rgba(127,132,156,.35); height:1px}
  .fold .meta{color:var(--ov0)}

  /* ── HERO ─────────────────────────────────────────────────── */
  .hero{padding-top: 18px}
  .ascii-wm{
    display:block;
    color: var(--lavender);
    font-family: 'BinvimAscii', var(--mono);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.0;
    white-space: pre;
    margin: 0;
    text-shadow: 0 0 18px rgba(137,180,250,.28);
    /* Lock the grid so box-drawing rows align exactly */
    letter-spacing: 0;
    font-feature-settings: "kern" 0;
    font-variant-ligatures: none;
    font-kerning: none;
    transform-origin: left top;
  }
  .ascii-wm .pink{color:var(--lavender)}  /* unified */
  .blink{animation: blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  .dek{
    margin-top: 22px;
    font-family: var(--display);
    font-size: 28px;
    line-height: 1.25;
    color: var(--text);
    max-width: 26ch;
    font-weight:700;
    letter-spacing:-.01em;
  }
  .dek .accent{color:var(--peach)}
  .dek .strike{color:var(--ov1); text-decoration:line-through; text-decoration-color: var(--red); text-decoration-thickness:2px}

  .hero-tag{
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: .02em;
    color: var(--peach);
  }
  .hero-tag a{
    color: var(--peach);
    text-decoration: underline;
    text-decoration-color: rgba(250,179,135,.4);
    text-underline-offset: 3px;
  }
  .hero-tag a:hover{ text-decoration-color: var(--peach); }

  .lede{
    margin-top: 18px;
    color: var(--sub1);
    max-width: 64ch;
    font-size: 14px;
  }
  .lede em{color:var(--text); font-style:normal; font-weight:600}

  .install{
    margin-top: 22px;
    display:inline-block;
    background: var(--mantle);
    border: 1px solid var(--s0);
    border-left: 3px solid var(--green);
    font-size: 14px;
    min-width: 380px;
  }
  .install-tabs{
    display:flex; gap:0;
    border-bottom: 1px solid var(--s0);
    background: var(--crust);
  }
  .install-tabs .tab{
    appearance:none; background:transparent; border:none;
    color: var(--ov1);
    font-family: var(--mono); font-size: 12px;
    padding: 7px 16px;
    cursor:pointer;
    border-right: 1px solid var(--s0);
    letter-spacing:.04em;
  }
  .install-tabs .tab:hover{color:var(--text)}
  .install-tabs .tab.active{
    color: var(--mauve);
    background: var(--mantle);
    border-bottom: 1px solid var(--mantle);
    margin-bottom: -1px;
    font-weight: 700;
  }
  .install-tabs .tab .os{color:var(--ov0); margin-left:6px; font-size:10px; font-weight:400; letter-spacing:.05em}
  .install-tabs .tab.active .os{color:var(--ov1)}
  .install-line{
    display:flex; align-items:center; padding: 10px 14px;
  }
  .install .prompt{color:var(--green); margin-right:10px}
  .install .cmd{color:var(--text)}
  .install .copy{
    margin-left: 18px;
    color: var(--ov1);
    font-size:11px;
    cursor:pointer;
    border:1px solid var(--s0);
    padding: 2px 8px;
    background: transparent;
    font-family: var(--mono);
  }
  .install .copy:hover{color:var(--text); border-color:var(--ov0)}
  .install .copy.copied{color:var(--green); border-color:var(--green)}

  /* ── INSTALL CTA · :install / binvim-install ──────────────── */
  .icta{
    background: var(--mantle);
    border: 1px solid var(--s0);
    border-left: 3px solid var(--mauve);
    padding: 18px 22px 20px;
    margin: 0;
    position: relative;
  }
  .icta-head{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .icta-tag{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--crust);
    background: var(--peach);
    padding: 3px 8px;
    font-weight: 700;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .icta-title{
    margin: 0;
    font-family: var(--display);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.005em;
  }
  .icta-cmd-inline{
    color: var(--mauve);
    background: var(--crust);
    border: 1px solid var(--s0);
    padding: 1px 8px;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    margin-right: 4px;
  }
  .icta-rule{
    flex: 1;
    min-width: 24px;
    border-top: 1px dashed rgba(127,132,156,.35);
    height: 1px;
  }
  .icta-kicker{
    color: var(--ov0);
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .icta-text{
    color: var(--sub1);
    max-width: 78ch;
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
  }
  .icta-text code{
    color: var(--lavender);
    background: var(--crust);
    border: 1px solid var(--s0);
    padding: 0 5px;
    font-size: 12.5px;
  }

  .icta-rows{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 16px;
  }
  .icta-row{
    background: var(--crust);
    border: 1px solid var(--s0);
    border-left: 2px solid var(--green);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-items: center;
  }
  .icta-row:nth-child(2){ border-left-color: var(--peach); }
  .icta-num{
    grid-row: 1 / span 2;
    color: var(--ov0);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    align-self: start;
    padding-top: 2px;
  }
  .icta-where{
    color: var(--mauve);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
  }
  .icta-line{
    font-family: var(--mono);
    font-size: 16px;
    color: var(--text);
    font-weight: 600;
    background: transparent;
    padding: 0;
    border: none;
    justify-self: start;
    align-self: center;
  }
  .icta-pr{
    color: var(--green);
    margin-right: 8px;
    font-weight: 700;
  }
  .icta-row:nth-child(2) .icta-pr{ color: var(--peach); }
  .icta-note{
    grid-column: 2 / span 2;
    color: var(--ov2);
    font-size: 11.5px;
    line-height: 1.4;
  }
  .icta-note code{
    color: var(--sub1);
    background: var(--base);
    border: 1px solid var(--s0);
    padding: 0 4px;
    font-size: 11px;
  }

  .icta-bullets{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sub1);
    line-height: 1.55;
  }
  .icta-bullets li{
    padding-left: 22px;
    position: relative;
  }
  .icta-bullets li::before{
    content: "›";
    position: absolute;
    left: 6px;
    top: 0;
    color: var(--mauve);
    font-weight: 700;
  }
  .icta-bullets strong{ color: var(--text); font-weight: 600; }
  .icta-bullets em{ color: var(--peach); font-style: normal; font-weight: 600; }
  .icta-bullets code{
    color: var(--lavender);
    background: var(--crust);
    border: 1px solid var(--s0);
    padding: 0 5px;
    font-size: 11.5px;
  }
  .icta-bullets kbd{
    display: inline-block;
    background: var(--crust);
    border: 1px solid var(--s0);
    padding: 0 6px;
    color: var(--text);
    font-size: 11px;
    font-family: var(--mono);
    border-radius: 2px;
  }

  @media (max-width: 720px){
    .icta{ padding: 14px 14px 16px; }
    .icta-title{ font-size: 16px; }
    .icta-cmd-inline{ font-size: 14px; }
    .icta-kicker{ display: none; }
    .icta-rule{ display: none; }
    .icta-rows{
      grid-template-columns: 1fr;
    }
    .icta-line{ font-size: 14px; }
  }

  /* Compact variant — used by :update, which has a single entry
     point and shorter copy than :install. Same shell, tighter
     padding + smaller type, sapphire accent so the two blocks are
     visually distinct when sitting back-to-back. */
  .icta--sm{
    border-left-color: var(--sapphire);
    padding: 14px 18px 16px;
  }
  .icta--sm .icta-title{ font-size: 16px; }
  .icta--sm .icta-cmd-inline{ color: var(--sapphire); font-size: 14px; }
  .icta--sm .icta-tag{ background: var(--sapphire); }
  .icta--sm .icta-text{ font-size: 12.75px; margin-bottom: 12px; }
  .icta--sm .icta-bullets{ font-size: 12px; }
  .icta--sm .icta-bullets li::before{ color: var(--sapphire); }

  /* ── WHY / MANIFESTO ──────────────────────────────────────── */
  .why{ margin: 0; }
  .why-row{
    margin: 0 0 34px;
  }
  .why-row:last-child{ margin-bottom: 0; }

  .why-hdr{
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
    font-family: var(--mono);
  }
  .why-num{
    color: var(--peach);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .why-title{
    margin: 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1.2;
  }
  .why-title .accent{ color: var(--mauve); }
  .why-rule{
    flex: 1;
    height: 1px;
    border-top: 1px dashed rgba(127,132,156,.28);
    align-self: center;
    min-width: 24px;
  }
  .why-kicker{
    color: var(--ov2);
    font-size: 11.5px;
    font-style: italic;
    white-space: nowrap;
    letter-spacing: .03em;
    flex-shrink: 0;
  }

  .why-text{
    margin: 0;
    color: var(--sub1);
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 80ch;
  }
  .why-text code{
    background: rgba(69,71,90,.4);
    padding: 0 4px;
    color: var(--text);
    border-radius: 2px;
    font-size: 12px;
  }

  /* ── FAQ ──────────────────────────────────────────────────── */
  .faq{
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
  }
  .faq-item{
    border-left: 1px solid rgba(127,132,156,.22);
    padding-left: 16px;
  }
  .faq-q{
    margin: 0 0 7px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .02em;
    line-height: 1.3;
  }
  .faq-q::before{
    content: "? ";
    color: var(--mauve);
    font-weight: 700;
  }
  .faq-a{
    margin: 0;
    color: var(--sub1);
    font-size: 13.5px;
    line-height: 1.6;
  }
  .faq-a code{
    background: rgba(69,71,90,.4);
    padding: 0 4px;
    color: var(--text);
    border-radius: 2px;
    font-size: 12px;
  }
  @media (max-width: 720px){
    .faq{ grid-template-columns: 1fr; gap: 16px; }
  }

  .why-list{
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
  }
  .why-list li{
    position: relative;
    padding: 3px 0 3px 22px;
    color: var(--sub1);
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 84ch;
  }
  .why-list li::before{
    content: '▸';
    position: absolute; left: 0; top: 3px;
    color: var(--peach);
    font-size: 11px;
  }
  .why-list li code{
    background: rgba(69,71,90,.4);
    padding: 0 4px;
    color: var(--text);
    border-radius: 2px;
    font-size: 11.5px;
  }
  .why-list li em{
    font-style: italic; font-weight: 500;
    color: var(--text);
  }
  .why-list li strong{
    color: var(--peach);
    font-weight: 600;
  }

  @media (max-width: 600px){
    .why-hdr{ flex-wrap: wrap; gap: 8px 12px; }
    .why-rule{ display: none; }
    .why-kicker{ font-size: 10.5px; }
    .why-title{ font-size: 15px; }
  }

  /* ── FEATURE GRID ─────────────────────────────────────────── */
  .features{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--s0);
    background: var(--mantle);
  }
  .feat{
    padding: 18px 18px 20px;
    border-right: 1px solid var(--s0);
    border-bottom: 1px solid var(--s0);
    position:relative;
    display:flex; flex-direction:column;
  }
  .feat:nth-child(3n){border-right:none}
  .feat:nth-last-child(-n+3){border-bottom:none}
  .feat .num{
    color: var(--ov0); font-size: 11px; letter-spacing:.1em;
  }
  .feat h3{
    margin: 4px 0 8px; font-size: 16px; color: var(--text);
    font-family: var(--display); font-weight:700;
  }
  .feat h3 .accent{color:var(--mauve)}
  .feat p{
    margin: 0; color: var(--sub0); font-size: 13px; line-height:1.5;
    transition: max-height .4s cubic-bezier(.2,.7,.2,1);
  }
  .feat--clamped p{
    max-height: 7.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .feat-more{
    align-self: flex-start;
    margin-top: 10px;
    appearance: none;
    background: transparent;
    border: 1px solid var(--s0);
    color: var(--ov1);
    font-family: var(--mono);
    font-size: 11px;
    padding: 2px 10px;
    cursor: pointer;
    letter-spacing: .04em;
    transition: color .15s ease, border-color .15s ease;
  }
  .feat-more:hover{ color: var(--mauve); border-color: var(--ov0); }
  .feat .tags{margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; gap:6px}
  .feat .tag{
    font-size:11px; color: var(--sub1);
    background: var(--crust); border:1px solid var(--s0);
    padding: 1px 7px;
  }
  .feat .tag.b{color:var(--blue); border-color:rgba(137,180,250,.3)}
  .feat .tag.g{color:var(--green); border-color:rgba(166,227,161,.3)}
  .feat .tag.m{color:var(--mauve); border-color:rgba(203,166,247,.3)}
  .feat .tag.p{color:var(--peach); border-color:rgba(250,179,135,.3)}
  .feat .tag.y{color:var(--yellow); border-color:rgba(249,226,175,.3)}
  .feat .tag.t{color:var(--teal); border-color:rgba(148,226,213,.3)}

  /* ── KEYS / CHEATSHEET ──────────────────────────────────── */
  .keys{ position: relative; }

  .keys-filter{
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--s0);
    border-left: 3px solid var(--green);
    background: var(--mantle);
    padding: 8px 14px;
    font-family: var(--mono); font-size: 13px;
    cursor: text;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .keys-filter:focus-within{
    border-color: var(--s1);
    border-left-color: var(--mauve);
    box-shadow: -3px 0 22px -6px rgba(203,166,247,.35);
  }
  .keys-prompt{
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
    transition: color .2s ease;
  }
  .keys-filter:focus-within .keys-prompt{ color: var(--mauve); }
  .keys-filter input{
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--text); font: inherit;
    padding: 0;
    caret-color: var(--mauve);
  }
  .keys-filter input::placeholder{ color: var(--ov1); font-style: italic; }
  .keys-hint{
    color: var(--ov1); font-size: 10.5px;
    letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .keys-hint kbd{
    display: inline-block;
    background: var(--crust); border: 1px solid var(--s0);
    padding: 0 5px;
    color: var(--ov2); font-size: 10px;
    font-family: var(--mono);
    border-radius: 2px;
  }
  .keys-count{
    color: var(--ov0); font-size: 11px;
    white-space: nowrap;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    min-width: 40px; text-align: right;
  }

  .kgrid{
    column-count: 3;
    column-gap: 16px;
    column-fill: balance;
  }
  @media (max-width: 1024px){ .kgrid{ column-count: 2; } }
  @media (max-width: 640px){ .kgrid{ column-count: 1; } }

  .kg{
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: block;
    margin: 0 0 16px;
    background: var(--mantle);
    border: 1px solid var(--s0);
    padding: 13px 16px 14px;
  }
  .kg-hd{
    margin: 0 0 11px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(127,132,156,.22);
    color: var(--mauve);
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700;
  }
  .kg-com{ color: var(--ov0); margin-right: 6px; font-weight: 400; }
  .kg-sep{ color: var(--ov0); margin: 0 5px; font-weight: 400; }

  .kg-rows{ display: flex; flex-direction: column; gap: 6px; }

  .kr{
    display: grid;
    grid-template-columns: minmax(85px, max-content) 1fr;
    column-gap: 14px; row-gap: 2px;
    align-items: baseline;
    padding: 2px 3px;
    border-radius: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    transition: background .15s ease;
  }
  .kr:hover{ background: rgba(49,50,68,.32); }
  .kr .kk{ color: var(--peach); font-weight: 600; white-space: nowrap; }
  .kr .kk kbd{
    display: inline-block;
    background: var(--s0); border: 1px solid var(--s1);
    padding: 0 5px; margin-right: 2px;
    color: var(--text); font-family: var(--mono);
    font-size: 10.5px; line-height: 1.5;
    box-shadow: 0 1px 0 var(--crust);
    border-radius: 2px;
    min-width: 14px; text-align: center;
    vertical-align: 1px;
  }
  .kr .kk em{ color: var(--peach); font-style: italic; font-weight: 500; }
  .kr .kk code{
    background: transparent; padding: 0;
    color: var(--peach); font-family: var(--mono);
  }
  .kr .kd{ color: var(--sub1); }
  .kr .kd code{
    background: rgba(69,71,90,.4);
    padding: 0 4px;
    color: var(--text);
    border-radius: 2px;
    font-size: 11.5px;
  }

  .kr.is-hidden, .kg.is-empty{ display: none; }
  .kr mark{
    background: rgba(249,226,175,.20);
    color: var(--yellow);
    padding: 0 1px;
    border-radius: 1px;
  }

  .keys-empty{
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px dashed var(--s1);
    background: var(--mantle);
    color: var(--ov1);
    font-family: var(--mono); font-size: 13px;
  }
  .keys-empty-prompt{ color: var(--maroon); margin-right: 10px; font-weight: 700; }
  .keys-empty[hidden]{ display: none; }

  /* ── CONFIG (toml) ────────────────────────────────────────── */
  .codeblock{
    background: var(--mantle);
    border: 1px solid var(--s0);
    border-left: 3px solid var(--mauve);
    padding: 12px 16px 14px;
    font-size: 13px;
    overflow:auto;
    white-space:pre;
  }
  .codeblock .hd{
    color: var(--ov1); font-size: 11px; margin-bottom: 8px;
    display:flex; gap: 14px; border-bottom: 1px dashed rgba(127,132,156,.2);
    padding-bottom: 8px;
  }
  .codeblock .hd .pin{color:var(--mauve)}
  .codeblock .toml-section{color:var(--blue); font-weight:700}
  .codeblock .toml-key{color:var(--lavender)}
  .codeblock .toml-str{color:var(--green)}
  .codeblock .toml-num{color:var(--peach)}
  .codeblock .toml-bool{color:var(--peach)}
  .codeblock .toml-com{color:var(--ov0); font-style:italic}
  .codeblock .toml-punct{color:var(--ov2)}

  /* ── ARCHITECTURE / TREE ──────────────────────────────────── */
  .tree{
    background: var(--mantle);
    border: 1px solid var(--s0);
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.7;
    display:grid; grid-template-columns: 1fr 1fr; gap: 22px;
  }
  .tree pre{margin:0; color:var(--text); font-family: var(--mono)}
  .tree .dir{color:var(--blue); font-weight:600}
  .tree .file{color:var(--text)}
  .tree .ext{color:var(--ov1)}
  .tree .glyph{color:var(--ov0)}
  .tree .desc{color:var(--sub0); font-size:12px}
  .tree dl{margin:0; display:grid; grid-template-columns: 130px 1fr; row-gap: 5px; column-gap: 14px}
  .tree dt{color:var(--peach); font-weight:600}
  .tree dd{margin:0; color:var(--sub1); font-size: 12.5px}

  /* ── INSTALL · TOOL REGISTRY ──────────────────────────────── */
  .tools{ position: relative; }

  /* category accent colour, switched per row */
  .tools{
    --cat-lsp: var(--mauve);
    --cat-fmt: var(--yellow);
    --cat-dap: var(--red);
    --cat-util: var(--teal);
  }

  /* —— filter bar ——————————————————————————————————————— */
  .tools-bar{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .tools-filter{
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--s0);
    border-left: 3px solid var(--green);
    background: var(--mantle);
    padding: 8px 14px;
    font-family: var(--mono); font-size: 13px;
    cursor: text;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .tools-filter:focus-within{
    border-color: var(--s1);
    border-left-color: var(--mauve);
    box-shadow: -3px 0 22px -6px rgba(203,166,247,.35);
  }
  .tools-prompt{
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
    transition: color .2s ease;
  }
  .tools-filter:focus-within .tools-prompt{ color: var(--mauve); }
  .tools-filter input{
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--text); font: inherit;
    padding: 0;
    caret-color: var(--mauve);
  }
  .tools-filter input::placeholder{ color: var(--ov1); font-style: italic; }
  .tools-hint{
    color: var(--ov1); font-size: 10.5px;
    letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .tools-hint kbd{
    display: inline-block;
    background: var(--crust); border: 1px solid var(--s0);
    padding: 0 5px;
    color: var(--ov2); font-size: 10px;
    font-family: var(--mono);
    border-radius: 2px;
  }
  .tools-count{
    color: var(--ov0); font-size: 11px;
    white-space: nowrap;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    min-width: 54px; text-align: right;
  }

  /* —— category chips ——————————————————————————————————— */
  .tools-chips{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .tchip{
    appearance: none;
    background: var(--mantle);
    border: 1px solid var(--s0);
    color: var(--sub0);
    font: 12px/1 var(--mono);
    letter-spacing: .05em;
    padding: 6px 11px 6px 9px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 2px;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .tchip:hover{
    color: var(--text);
    border-color: var(--s1);
  }
  .tchip.is-on{
    color: var(--text);
    background: var(--crust);
    border-color: var(--s2);
  }
  .tchip .tdot{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ov0);
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow .2s ease;
  }
  .tchip .tdot--all{ background: linear-gradient(135deg, var(--mauve), var(--yellow) 45%, var(--teal)); }
  .tchip .tdot--lsp{ background: var(--cat-lsp); }
  .tchip .tdot--fmt{ background: var(--cat-fmt); }
  .tchip .tdot--dap{ background: var(--cat-dap); }
  .tchip .tdot--util{ background: var(--cat-util); }
  .tchip.is-on .tdot{
    box-shadow: 0 0 0 3px rgba(203,166,247,.18);
  }
  .tchip[data-cat="all"].is-on .tdot{ box-shadow: 0 0 0 3px rgba(180,190,254,.18); }
  .tchip[data-cat="lsp"].is-on .tdot{ box-shadow: 0 0 0 3px rgba(203,166,247,.22); }
  .tchip[data-cat="fmt"].is-on .tdot{ box-shadow: 0 0 0 3px rgba(249,226,175,.22); }
  .tchip[data-cat="dap"].is-on .tdot{ box-shadow: 0 0 0 3px rgba(243,139,168,.22); }
  .tchip[data-cat="util"].is-on .tdot{ box-shadow: 0 0 0 3px rgba(148,226,213,.22); }
  .tchip .tnum{
    color: var(--ov0);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    padding-left: 1px;
  }
  .tchip.is-on .tnum{ color: var(--sub1); }

  .tools-toggle{
    appearance: none;
    margin-left: auto;
    background: transparent;
    border: 1px dashed var(--s1);
    color: var(--ov1);
    font: 11px/1 var(--mono);
    letter-spacing: .08em;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 2px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .tools-toggle:hover{
    color: var(--text);
    border-color: var(--mauve);
    background: rgba(203,166,247,.06);
  }
  .tools-toggle .toggle-glyph{
    color: var(--mauve);
    font-weight: 700;
    font-size: 13px;
    width: 9px; text-align: center;
    transition: transform .25s ease;
  }
  .tools-toggle[aria-pressed="true"] .toggle-glyph{
    transform: rotate(45deg);
    color: var(--peach);
  }

  /* —— empty state ——————————————————————————————————————— */
  .tools-empty{
    border: 1px dashed var(--s1);
    background: var(--mantle);
    color: var(--ov1);
    font-size: 12.5px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .tools-empty .te-com{ color: var(--red); margin-right: 6px; }

  /* —— list ——————————————————————————————————————————— */
  .tools-list{
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--s0);
    background: var(--mantle);
    counter-reset: tool;
  }
  .trow{
    border-bottom: 1px dashed rgba(69,71,90,.45);
    position: relative;
  }
  .trow:last-child{ border-bottom: none; }
  .trow.is-hidden{ display: none; }

  /* category accent stripe on the left */
  .trow::before{
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--row-accent, transparent);
    opacity: 0;
    transition: opacity .15s ease;
  }
  .trow[data-cat~="lsp"]{ --row-accent: var(--cat-lsp); }
  .trow[data-cat~="fmt"]{ --row-accent: var(--cat-fmt); }
  .trow[data-cat~="dap"]{ --row-accent: var(--cat-dap); }
  .trow[data-cat~="util"]{ --row-accent: var(--cat-util); }
  .trow:hover::before,
  .trow.is-open::before{ opacity: .9; }

  /* head row */
  .trow-head{
    appearance: none;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    display: grid;
    grid-template-columns: 30px 56px 78px minmax(180px, 230px) 1fr 20px;
    align-items: baseline;
    gap: 14px;
    padding: 9px 14px 9px 16px;
    transition: background .12s ease;
  }
  .trow-head:hover{ background: rgba(49,50,68,.32); }
  .trow.is-open .trow-head{ background: rgba(49,50,68,.42); }
  .trow-head:focus-visible{
    outline: 1px solid var(--mauve);
    outline-offset: -1px;
  }

  .trow-num{
    color: var(--ov0);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-align: right;
  }
  .trow-cat{
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--crust);
    border: 1px solid var(--s0);
    white-space: nowrap;
  }
  .trow-cat--lsp{ color: var(--cat-lsp); border-color: rgba(203,166,247,.28); }
  .trow-cat--fmt{ color: var(--cat-fmt); border-color: rgba(249,226,175,.28); }
  .trow-cat--dap{ color: var(--cat-dap); border-color: rgba(243,139,168,.32); }
  .trow-cat--util{ color: var(--cat-util); border-color: rgba(148,226,213,.28); }
  .trow-lang{
    color: var(--ov1);
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trow-tool{
    color: var(--peach);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trow-pur{
    color: var(--sub1);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trow-pur code{
    background: rgba(69,71,90,.4);
    padding: 0 4px;
    color: var(--text);
    border-radius: 2px;
    font-size: 11.5px;
  }
  .trow-chev{
    color: var(--ov0);
    font-size: 15px;
    line-height: 1;
    text-align: right;
    transition: transform .2s ease, color .15s ease;
  }
  .trow.is-open .trow-chev{
    transform: rotate(90deg);
    color: var(--peach);
  }

  /* expanding body — by default visible (no-JS fallback). The .js-on
     class on .tools is added by scripts.js once it boots; only then do
     we switch into collapsed-by-default mode with the grid-template-rows
     animation. */
  .trow-body{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 0 14px 0 60px;
    border-top: 1px dashed rgba(69,71,90,.45);
    background: linear-gradient(180deg, var(--crust) 0%, var(--mantle) 100%);
    transition: grid-template-rows .25s ease;
  }
  .trow-body > .trow-cmd,
  .trow-body > .trow-copy{ overflow: hidden; min-height: 0; }

  .tools.js-on .trow-body{ grid-template-rows: 0fr; border-top-color: transparent; }
  .tools.js-on .trow.is-open .trow-body{
    grid-template-rows: 1fr;
    border-top-color: rgba(69,71,90,.45);
  }

  .tools.js-on .trow .trow-cmd,
  .tools.js-on .trow .trow-copy{
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .2s ease .05s, transform .2s ease .05s;
  }
  .tools.js-on .trow.is-open .trow-cmd,
  .tools.js-on .trow.is-open .trow-copy{
    opacity: 1;
    transform: none;
  }

  /* The chevron only makes sense when rows are click-to-expand. */
  .tools:not(.js-on) .trow-chev{ display: none; }
  .tools:not(.js-on) .trow-head{ cursor: default; }
  .tools:not(.js-on) .trow-head:hover{ background: transparent; }
  .trow-cmd{
    grid-column: 1;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--green);
    padding: 10px 0;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .trow-cmd .pr{ color: var(--ov1); margin-right: 6px; }
  .trow-cmd .aside{ color: var(--ov0); margin-left: 6px; font-size: 11.5px; }
  .trow-copy{
    grid-column: 2;
    appearance: none;
    background: transparent;
    border: 1px solid var(--s1);
    color: var(--ov1);
    font: 11px/1 var(--mono);
    letter-spacing: .06em;
    padding: 5px 9px;
    cursor: pointer;
    border-radius: 2px;
    align-self: center;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .trow-copy:hover{
    color: var(--mauve);
    border-color: var(--mauve);
    background: rgba(203,166,247,.06);
  }
  .trow-copy.is-copied{
    color: var(--green);
    border-color: var(--green);
    background: rgba(166,227,161,.08);
  }

  /* search highlight */
  .trow mark{
    background: rgba(249,226,175,.22);
    color: var(--text);
    padding: 0 2px;
    border-radius: 1px;
  }

  /* ── COMPARED / VS ────────────────────────────────────────── */
  .vs{
    border: 1px solid var(--s0);
    background: var(--mantle);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--s1) transparent;
  }
  .vs::-webkit-scrollbar{ height: 6px; }
  .vs::-webkit-scrollbar-thumb{ background: var(--s1); border-radius: 3px; }
  .vs::-webkit-scrollbar-track{ background: transparent; }

  .vs-grid{
    display: grid;
    grid-template-columns: minmax(170px, 1.3fr) repeat(5, minmax(140px, 1fr));
    min-width: 780px;
  }
  .vs-cell{
    padding: 12px 16px;
    border-right: 1px solid var(--s0);
    border-bottom: 1px solid var(--s0);
    font-size: 12.5px;
    color: var(--sub1);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    transition: background .15s ease;
  }
  .vs-cell:nth-child(6n){ border-right: none; }
  .vs-grid > .vs-cell:nth-last-child(-n+6){ border-bottom: none; }

  .vs-hdr{
    background: var(--crust);
    color: var(--mauve);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 14px; padding-bottom: 14px;
  }
  .vs-hdr-dim{
    color: var(--ov2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-style: italic;
  }
  .vs-dim{
    color: var(--sub0);
    font-size: 12px;
    letter-spacing: .01em;
  }
  .vs-num{
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 500;
  }

  /* binvim column accent: peach left-edge stripe + faint tint */
  .vs-binvim{
    background: rgba(250,179,135,.06);
    color: var(--text);
    font-weight: 600;
    position: relative;
  }
  .vs-binvim::before{
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--peach);
    pointer-events: none;
  }
  .vs-hdr.vs-binvim{
    color: var(--peach);
  }
  .vs-binvim:hover{ background: rgba(250,179,135,.10); }
  .vs-cell:not(.vs-hdr):not(.vs-binvim):hover{ background: rgba(49,50,68,.40); }

  .vs-y{ color: var(--green); font-weight: 700; margin-right: 2px; }
  .vs-n{ color: var(--red); font-weight: 700; margin-right: 2px; }
  .vs-m{ color: var(--yellow); font-weight: 700; margin-right: 2px; }

  /* ── Comparison pages (binvim vs …) ───────────────────────── */
  .vs-grid--duo{
    grid-template-columns: minmax(150px, 1.2fr) repeat(2, minmax(140px, 1fr));
    min-width: 0;
  }
  .vs-grid--duo > .vs-cell:nth-child(3n){ border-right: none; }
  .vs-grid--duo > .vs-cell:nth-last-child(-n+6){ border-bottom: 1px solid var(--s0); }
  .vs-grid--duo > .vs-cell:nth-last-child(-n+3){ border-bottom: none; }

  .cmp-top{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
    font-family: var(--mono);
    font-size: 12px;
  }
  .cmp-top a{ color: var(--sub0); text-decoration: none; }
  .cmp-top a:hover{ color: var(--mauve); }
  .cmp-top .wm{ color: var(--peach); font-weight: 700; letter-spacing: .04em; }
  .cmp-top .sep{ color: var(--ov0); }

  .cmp-h1{
    font-family: var(--display);
    font-size: clamp(28px, 6vw, 46px);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.06;
    margin: 0 0 14px;
    color: var(--text);
  }
  .cmp-h1 .accent{ color: var(--mauve); }

  .cmp-prose{ max-width: 80ch; }
  .cmp-prose h3{
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text);
    margin: 30px 0 10px;
  }
  .cmp-prose p{
    margin: 0 0 12px;
    color: var(--sub1);
    font-size: 14px;
    line-height: 1.65;
  }
  .cmp-prose strong{ color: var(--text); }
  .cmp-prose code{
    background: rgba(69,71,90,.4);
    padding: 0 4px;
    color: var(--text);
    border-radius: 2px;
    font-size: 12.5px;
  }
  .cmp-prose a{ color: var(--mauve); }

  .cmp-cta{
    margin-top: 4px;
    padding: 16px 18px;
    border: 1px solid var(--s0);
    background: var(--mantle);
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .cmp-cta .cmp-cmd{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
  }
  .cmp-cta .cmp-cmd .prompt{ color: var(--peach); margin-right: 8px; }
  .cmp-cta .cmp-go{ color: var(--mauve); text-decoration: none; font-family: var(--mono); font-size: 12.5px; }
  .cmp-cta .cmp-go:hover{ text-decoration: underline; }

  .cmp-links{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-family: var(--mono);
    font-size: 12.5px;
  }
  .cmp-links a{ color: var(--sub0); text-decoration: none; }
  .cmp-links a:hover{ color: var(--mauve); }
  .cmp-links a[aria-current="page"]{ color: var(--peach); }

  /* ── FOOTER ───────────────────────────────────────────────── */
  footer{
    margin-top: 56px; padding-top: 22px;
    border-top: 1px dashed rgba(127,132,156,.3);
    color: var(--ov1); font-size: 12px;
    display:flex; justify-content:space-between; align-items:flex-start; gap: 30px;
    flex-wrap:wrap;
  }
  footer .left .wm{color:var(--mauve); font-weight:700}
  footer .links{display:flex; gap: 18px; flex-wrap:wrap}
  footer .links a{color:var(--sub1)}
  footer .left p{margin: 4px 0 0; color:var(--ov2); max-width: 56ch}
  .end-marker{color:var(--ov0); margin-top:12px; font-size:11px}
  .end-marker .tilde{color:var(--ov1)}

  /* ── small screens ────────────────────────────────────────── */
  @media (max-width: 880px){
    :root{--col: 100%}
    .features, .tree{grid-template-columns: 1fr}
    .keys-filter{ flex-wrap: wrap; gap: 8px 12px; }
    .keys-hint{ display: none; }
    .feat{border-right:none; border-bottom:1px solid var(--s0)}

    /* Tools registry: stack chips, compact head, drop the deep indent on
       expanded bodies so commands have room to wrap on narrow screens. */
    .tools-filter{ flex-wrap: wrap; gap: 8px 12px; }
    .tools-hint{ display: none; }
    .tools-toggle{ margin-left: 0; }
    .trow-head{
      grid-template-columns: 22px 50px 1fr 16px;
      grid-template-areas:
        "num cat tool chev"
        ".   .   pur  .";
      row-gap: 2px;
      column-gap: 10px;
      padding: 10px 12px 10px 14px;
    }
    .trow-num{ grid-area: num; }
    .trow-cat{ grid-area: cat; }
    .trow-lang{ display: none; }
    .trow-tool{ grid-area: tool; }
    .trow-pur{
      grid-area: pur;
      font-size: 11.5px;
      white-space: normal;
      color: var(--sub0);
    }
    .trow-chev{ grid-area: chev; }
    .trow-body,
    .trow.is-open .trow-body{
      padding: 0 12px 0 12px;
      grid-template-columns: 1fr;
      row-gap: 4px;
    }
    .trow-cmd{ padding: 10px 0 4px; }
    .trow-copy{
      grid-column: 1;
      justify-self: start;
      margin-bottom: 10px;
    }
    /* ASCII logo: softer glow on mobile (font-size scaled by JS) */
    .ascii-wm{
      text-shadow: 0 0 10px rgba(137,180,250,.22);
    }
    /* Fold headers: hide decorative meta, soften letter-spacing, let the
       dashed rule break onto its own line so titles never wrap awkwardly. */
    .fold{
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      margin: 28px 0 14px;
    }
    .fold .label{ letter-spacing: .08em; }
    .fold .meta{ display: none; }
    .fold .rule{
      flex-basis: 100%;
      order: 99;
      margin-top: 2px;
    }

    /* Footer links: stack vertically, drop the bullet separators */
    footer .links{
      flex-direction: column;
      gap: 6px;
    }
    footer .links > span{ display: none; }

    /* Install card: drop min-width, distribute tabs evenly, hide 'os' subtext,
       let long commands scroll horizontally inside the row. */
    .install{
      display: block;
      width: 100%;
      min-width: 0;
    }
    .install-tabs{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .install-tabs .tab{
      padding: 8px 6px;
      font-size: 11px;
      text-align: center;
      letter-spacing: 0;
    }
    .install-tabs .tab:last-child{ border-right: none; }
    .install-tabs .tab .os{ display: none; }
    .install-line{
      padding: 10px 12px;
      gap: 8px;
      flex-wrap: nowrap;
    }
    .install .prompt{ margin-right: 0; flex-shrink: 0; }
    .install .cmd{
      flex: 1 1 0;
      min-width: 0;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
    }
    .install .cmd::-webkit-scrollbar{ display: none; }
    .install .copy{
      margin-left: 0;
      flex-shrink: 0;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .feat p{ transition: none; }
  }

  /* ── ANIMATIONS ───────────────────────────────────────────── */
  .scroll-bar{
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--mauve) 0%, var(--blue) 35%, var(--green) 70%, var(--peach) 100%);
    transform: scaleX(0); transform-origin: left center;
    z-index: 100; pointer-events: none;
    opacity: .9;
    transition: transform .08s linear;
  }

  @media (prefers-reduced-motion: no-preference){

    /* Hero cascade — dek/tag/lede/install fade up after the logo lands */
    .hero .dek      { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both .55s; }
    .hero .hero-tag { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both .65s; }
    .hero .lede     { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both .75s; }
    .hero .install  { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both .95s; }
    @keyframes heroIn{
      from{ opacity: 0; transform: translateY(14px); }
      to  { opacity: 1; transform: none; }
    }

    /* Install border-left pulses lavender once after it lands */
    .install{ animation: borderPulse 1.6s ease 1.15s 1 both; }
    @keyframes borderPulse{
      0%, 100%{ border-left-color: var(--green); box-shadow: none; }
      50%     { border-left-color: var(--lavender); box-shadow: -3px 0 22px -4px rgba(180,190,254,.55); }
    }

    /* Scroll-reveal containers */
    .fold, .why, .features, .keys, .codeblock, .tools, .vs, .faq, footer{
      opacity: 0; transform: translateY(18px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
      will-change: opacity, transform;
    }
    .fold.in, .why.in, .features.in, .keys.in, .codeblock.in, .tools.in, .vs.in, .faq.in, footer.in{
      opacity: 1; transform: none;
    }

    /* Fold marker: rule draws left→right, label slides in */
    .fold .rule{
      transform: scaleX(0); transform-origin: left center;
      transition: transform 1s cubic-bezier(.6,.0,.2,1) .15s;
    }
    .fold.in .rule{ transform: scaleX(1); }
    .fold .label{
      display: inline-block;
      opacity: 0; transform: translateX(-6px);
      transition: opacity .55s ease .1s, transform .55s ease .1s;
    }
    .fold.in .label{ opacity: 1; transform: none; }

    /* Inter-section lede paragraphs (direct children of <main class="page">) */
    .page > .lede{
      opacity: 0; transform: translateY(14px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .page > .lede.in{ opacity: 1; transform: none; }

    /* Feature cards: staggered rise + hover lift */
    .features .feat{
      opacity: 0; transform: translateY(20px);
      transition:
        opacity .55s ease,
        transform .35s cubic-bezier(.2,.7,.2,1),
        background .2s ease;
    }
    .features.in .feat{ opacity: 1; transform: none; }
    .features.in .feat:nth-child(1) { transition-delay: .04s; }
    .features.in .feat:nth-child(2) { transition-delay: .10s; }
    .features.in .feat:nth-child(3) { transition-delay: .16s; }
    .features.in .feat:nth-child(4) { transition-delay: .22s; }
    .features.in .feat:nth-child(5) { transition-delay: .28s; }
    .features.in .feat:nth-child(6) { transition-delay: .34s; }
    .features.in .feat:nth-child(7) { transition-delay: .40s; }
    .features.in .feat:nth-child(8) { transition-delay: .46s; }
    .features.in .feat:nth-child(9) { transition-delay: .52s; }
    .features.in .feat:nth-child(10){ transition-delay: .58s; }
    .features.in .feat:nth-child(11){ transition-delay: .64s; }
    .features.in .feat:nth-child(12){ transition-delay: .70s; }
    .features.in .feat:nth-child(13){ transition-delay: .76s; }
    .features.in .feat:nth-child(14){ transition-delay: .82s; }
    .features.in .feat:nth-child(15){ transition-delay: .88s; }
    .feat:hover{
      background: rgba(49,50,68,.4);
      transform: translateY(-2px);
    }

    /* Why — staggered rows + rules draw across */
    .why-row{
      opacity: 0; transform: translateY(12px);
      transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
    }
    .why.in .why-row{ opacity: 1; transform: none; }
    .why.in .why-row:nth-child(1){ transition-delay: .10s; }
    .why.in .why-row:nth-child(2){ transition-delay: .22s; }
    .why.in .why-row:nth-child(3){ transition-delay: .34s; }
    .why.in .why-row:nth-child(4){ transition-delay: .46s; }
    .why-row .why-rule{
      transform: scaleX(0); transform-origin: left center;
      transition: transform .8s cubic-bezier(.6,0,.2,1);
    }
    .why.in .why-row .why-rule{ transform: scaleX(1); }
    .why.in .why-row:nth-child(1) .why-rule{ transition-delay: .28s; }
    .why.in .why-row:nth-child(2) .why-rule{ transition-delay: .40s; }
    .why.in .why-row:nth-child(3) .why-rule{ transition-delay: .52s; }
    .why.in .why-row:nth-child(4) .why-rule{ transition-delay: .64s; }
    .why-row .why-kicker{
      opacity: 0;
      transition: opacity .5s ease;
    }
    .why.in .why-row .why-kicker{ opacity: 1; }
    .why.in .why-row:nth-child(1) .why-kicker{ transition-delay: .60s; }
    .why.in .why-row:nth-child(2) .why-kicker{ transition-delay: .72s; }
    .why.in .why-row:nth-child(3) .why-kicker{ transition-delay: .84s; }
    .why.in .why-row:nth-child(4) .why-kicker{ transition-delay: .96s; }

    /* Keys cheatsheet — staggered rows when the whole .keys section reveals */
    .keys .kg .kr{
      opacity: 0; transform: translateY(4px);
      transition: opacity .35s ease, transform .35s ease;
    }
    .keys.in .kr{ opacity: 1; transform: none; }
    .keys.in .kr:nth-child(1){ transition-delay: .08s; }
    .keys.in .kr:nth-child(2){ transition-delay: .12s; }
    .keys.in .kr:nth-child(3){ transition-delay: .16s; }
    .keys.in .kr:nth-child(4){ transition-delay: .20s; }
    .keys.in .kr:nth-child(5){ transition-delay: .24s; }
    .keys.in .kr:nth-child(6){ transition-delay: .28s; }
    .keys.in .kr:nth-child(7){ transition-delay: .32s; }
    .keys.in .kr:nth-child(8){ transition-delay: .36s; }
    .keys.in .kr:nth-child(9){ transition-delay: .40s; }

    /* Tool registry — filter bar fades in first, then a quick cascade of
       the first few rows so the eye has something to land on. Further
       rows just appear (no infinite stagger for 45 entries). */
    .tools .tools-bar{
      opacity: 0; transform: translateY(8px);
      transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
    }
    .tools.in .tools-bar{ opacity: 1; transform: none; }

    .tools .trow{
      opacity: 0; transform: translateY(4px);
      transition: opacity .35s ease, transform .35s ease;
    }
    .tools.in .trow{ opacity: 1; transform: none; }
    .tools.in .trow:nth-child(1){ transition-delay: .12s; }
    .tools.in .trow:nth-child(2){ transition-delay: .16s; }
    .tools.in .trow:nth-child(3){ transition-delay: .20s; }
    .tools.in .trow:nth-child(4){ transition-delay: .24s; }
    .tools.in .trow:nth-child(5){ transition-delay: .28s; }
    .tools.in .trow:nth-child(6){ transition-delay: .32s; }
    .tools.in .trow:nth-child(7){ transition-delay: .36s; }
    .tools.in .trow:nth-child(8){ transition-delay: .40s; }
    .tools.in .trow:nth-child(n+9){ transition-delay: .44s; }

    /* Copy button: pop on success */
    .install .copy{ transition: color .15s ease, border-color .15s ease, transform .25s ease; }
    .install .copy.copied{ animation: copiedPop .35s ease; }
    @keyframes copiedPop{
      0%   { transform: scale(1); }
      45%  { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
  }