/* Fonts are self-hosted: no third-party request, nothing to be blocked or go
     away, and the full glyph set rather than a subset picked from today's copy.
     Bricolage is the variable font (wght 200-800, opsz 12-96). OFL licences sit
     alongside the files in assets/fonts/. */
  @font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/assets/fonts/bricolage.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Space Mono';
    src: url('/assets/fonts/spacemono-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'Space Mono';
    src: url('/assets/fonts/spacemono-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  :focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
  body {
    --bg:#1b1035; --panel:#2a1a52; --edge:#3b2670;
    --lime:#c6f24e; --mag:#ff4fa3; --cream:#f4efff; --dim:#9b8ac4; --body:#cbbdea;
    margin:0; background:var(--bg); color:var(--cream);
    font-family:'Bricolage Grotesque', system-ui, sans-serif;
    background-image:
      radial-gradient(circle at 10% 2%, rgba(255,79,163,.15), transparent 40%),
      radial-gradient(circle at 90% 14%, rgba(198,242,78,.10), transparent 38%);
    background-attachment: fixed;
    display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
  }
  .wrap { max-width:1060px; margin:0 auto; padding:0 26px; width:100%; }
  a { color: var(--lime); }

  /* nav */
  nav { position:relative; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:24px 0 0; gap:16px; }
  .logo { font-weight:800; font-size:19px; letter-spacing:-.035em; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cream); }
  .logo b { color:var(--lime); }
  .bot { width:27px; height:27px; flex:none; overflow:visible; }
  .bot .head { fill:none; stroke:var(--cream); stroke-width:2.5; }
  .bot .stem { stroke:var(--cream); stroke-width:2.1; stroke-linecap:round; fill:none; }
  .bot .eye, .bot .mouth { fill:var(--cream); }
  .bot .ball { fill:var(--lime); }
  .navlinks { display:flex; gap:16px; align-items:center; }
  .navlink { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--dim); text-decoration:none; padding:9px 4px; }
  .navlink:hover { color:var(--cream); }
  .navbtn { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; font-weight:700;
    background:var(--lime); color:var(--bg); text-decoration:none; padding:9px 18px; border-radius:100px; transition:transform .15s; }
  .navbtn:hover { transform:translateY(-1px); }

  main { flex:1 0 auto; }

  /* the inline SVG <symbol> sheet each page carries; never painted itself */
  .symbols { position:absolute; }

  /* small one-off utilities, so no element needs a style attribute
     (a strict Content-Security-Policy blocks those) */
  .field.tight { margin-bottom:0; }
  .field .opt { text-transform:none; letter-spacing:0; }
  .field input.code { text-transform:uppercase; letter-spacing:.18em; }

  /* Blinking cursor. Drawn rather than typed: U+25AE is in neither of our fonts,
     so as a character it silently fell back to whatever the OS had. */
  .cursor {
    display:inline-block; width:.42em; height:1em; vertical-align:-.14em;
    background:var(--lime); animation:blink 1.15s steps(1) infinite;
  }

  /* 404 */
  .doc.nf { text-align:center; max-width:520px; margin:0 auto; }
  .doc.nf .upd { margin:0 0 14px; }
  .doc.nf .nf-cta { margin-top:30px; }
  .doc.nf .nf-links { margin-top:26px; }

  /* placeholder banner */
  .stub {
    margin:34px 0 0; border:2px dashed var(--mag); border-radius:12px; padding:15px 18px;
    font-family:'Space Mono',monospace; font-size:12px; line-height:1.6; color:var(--body);
  }
  .stub b { color:var(--mag); letter-spacing:.06em; }

  /* doc pages */
  .doc { padding:44px 0 80px; max-width:680px; }
  .doc h1 { font-size:clamp(34px,6vw,54px); font-weight:800; line-height:.9; letter-spacing:-.045em; margin:0 0 10px; }
  .doc .upd { font-family:'Space Mono',monospace; font-size:12px; color:var(--dim); margin:0 0 40px; letter-spacing:.05em; }
  .doc h2 { font-size:20px; font-weight:800; letter-spacing:-.025em; margin:38px 0 12px; }
  .doc h2 .num { font-family:'Space Mono',monospace; font-size:12px; color:var(--mag); margin-right:10px; font-weight:700; }
  .doc p, .doc li { color:var(--body); font-size:15px; line-height:1.7; }
  .doc p { margin:0 0 14px; }
  .doc ul { margin:0 0 14px; padding-left:20px; }
  .doc li { margin-bottom:7px; }

  /* auth pages */
  .auth { display:flex; justify-content:center; padding:56px 0 80px; }
  .authcard { width:100%; max-width:420px; }
  .authcard .kick { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
  @keyframes blink { 50% { opacity:0; } }
  .authcard h1 { font-size:clamp(32px,5.4vw,44px); font-weight:800; line-height:.9; letter-spacing:-.04em; margin:0 0 10px; }
  .authcard .lede { color:var(--body); font-size:15px; line-height:1.6; margin:0 0 30px; }
  .form { background:var(--panel); border:2px solid var(--edge); border-radius:16px; padding:26px 24px; }
  .field { margin-bottom:17px; }
  .field:last-of-type { margin-bottom:22px; }
  .field label { display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
  .field input {
    width:100%; background:#1f1240; border:2px solid var(--edge); border-radius:9px;
    padding:12px 14px; color:var(--cream); font-family:'Bricolage Grotesque',sans-serif; font-size:15px;
  }
  .field input::placeholder { color:#6f5f9a; }
  .field input:focus { border-color:var(--lime); outline:none; }
  .field .hint { font-family:'Space Mono',monospace; font-size:10px; color:var(--dim); margin-top:6px; letter-spacing:.04em; }
  .submit {
    width:100%; appearance:none; border:0; cursor:pointer; background:var(--lime); color:var(--bg);
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:16px; letter-spacing:-.02em;
    padding:14px; border-radius:100px; transition:transform .15s;
  }
  .submit:hover { transform:translateY(-2px); }
  .submit.pink { background:var(--mag); color:var(--cream); }
  .alt { text-align:center; margin:20px 0 0; font-size:14px; color:var(--body); }
  .alt a { text-decoration:none; font-weight:600; }
  .alt a:hover { text-decoration:underline; }
  .legalnote { margin:16px 0 0; font-family:'Space Mono',monospace; font-size:10px; line-height:1.6; color:var(--dim); text-align:center; }
  .legalnote a { color:var(--dim); }


  /* download page */
  .dl { padding:44px 0 80px; }
  .dl h1 { font-size:clamp(36px,6.4vw,60px); font-weight:800; line-height:.9; letter-spacing:-.045em; margin:0 0 14px; }
  .dl h1 u { text-decoration:none; color:var(--lime); }
  .dl .lede { color:var(--body); font-size:17px; line-height:1.6; max-width:44ch; margin:0 0 36px; }
  .primary { background:var(--panel); border:2px solid var(--edge); border-radius:16px; padding:28px 26px; max-width:520px; }
  .primary .for { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-bottom:14px; }
  .primary .name { font-size:26px; font-weight:800; letter-spacing:-.03em; margin:0 0 6px; }
  .primary .meta { font-family:'Space Mono',monospace; font-size:11px; color:var(--dim); margin:0 0 22px; letter-spacing:.05em; }
  .primary .go { display:inline-block; background:var(--lime); color:var(--bg); text-decoration:none; font-weight:800;
    font-size:16px; letter-spacing:-.02em; padding:14px 30px; border-radius:100px; transition:transform .15s; }
  .primary .go:hover { transform:translateY(-2px); }

  .others { margin:44px 0 0; }
  .others .hd { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:14px; }
  .tile { background:var(--panel); border:2px solid var(--edge); border-radius:14px; padding:20px; text-decoration:none; display:block; transition:border-color .15s, transform .15s; }
  .tile:hover { border-color:var(--lime); transform:translateY(-2px); }
  .tile .t { font-size:17px; font-weight:800; letter-spacing:-.025em; color:var(--cream); margin-bottom:5px; }
  .tile .s { font-family:'Space Mono',monospace; font-size:11px; color:var(--dim); letter-spacing:.05em; }
  .tile.soon { opacity:.6; pointer-events:none; border-style:dashed; }
  .tile.soon .s { color:var(--mag); }

  .steps { margin:52px 0 0; padding-top:0; }
  .steps .hd { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-bottom:22px; }
  .steps ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; counter-reset:s; }
  .steps li { counter-increment:s; }
  .steps li::before { content:counter(s,decimal-leading-zero); display:block; font-family:'Space Mono',monospace;
    font-size:12px; font-weight:700; color:var(--mag); margin-bottom:10px; letter-spacing:.08em; }
  .steps h3 { margin:0 0 7px; font-size:17px; font-weight:800; letter-spacing:-.025em; }
  .steps p { margin:0; font-size:14px; line-height:1.65; color:var(--body); }


  /* combined auth */
  .oauth { display:grid; gap:9px; margin-bottom:18px; }
  .oauth a, .oauth button {
    display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
    width:100%; appearance:none; cursor:pointer; font-family:inherit;
    background:#1f1240; border:2px solid var(--edge); border-radius:9px; padding:11px;
    color:var(--cream); font-size:14px; font-weight:600; transition:border-color .15s;
  }
  .oauth a:hover, .oauth button:hover { border-color:var(--lime); }
  .oauth svg { width:16px; height:16px; fill:currentColor; }
  .field .hint button {
    appearance:none; border:0; background:none; padding:0; cursor:pointer;
    font-family:inherit; font-size:inherit; letter-spacing:inherit; color:var(--lime);
  }
  .field .hint button:hover { text-decoration:underline; }
  .divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
  .divider::before, .divider::after { content:''; flex:1; height:2px; background:var(--edge); }
  .divider span { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
  .step[hidden] { display:none; }
  .who {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:#1f1240; border:2px solid var(--edge); border-radius:9px; padding:10px 12px; margin-bottom:18px;
  }
  .who .addr { font-size:14px; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .who button {
    appearance:none; border:0; background:none; cursor:pointer; flex:none;
    font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--lime);
  }
  .who button:hover { text-decoration:underline; }
  .newtag {
    display:inline-block; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.1em;
    background:var(--mag); color:var(--cream); padding:2px 7px; border-radius:100px; font-weight:700; margin-left:8px;
  }
  .demo {
    margin:18px 0 0; border:2px dashed var(--edge); border-radius:10px; padding:12px 14px;
    font-family:'Space Mono',monospace; font-size:10px; line-height:1.7; color:var(--dim); letter-spacing:.04em;
  }
  .demo b { color:var(--lime); }


  /* ---------- download page: platform marks, stores, notify ---------- */
  .mark { width:30px; height:30px; flex:none; color:var(--cream); display:block; }
  .mark-sm { width:15px; height:15px; flex:none; }

  .platforms { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  @media (max-width:1000px) { .platforms { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px)  { .platforms { grid-template-columns:1fr; } }

  .pcard { background:var(--panel); border:2px solid var(--edge); border-radius:16px; padding:22px 18px; display:flex; flex-direction:column; }
  .pcard.soon { background:transparent; border-style:dashed; }
  .ptop { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .pcard.soon .mark { color:var(--dim); }
  .pcard.live .mark { color:var(--cream); }
  .tag { font-family:'Space Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; padding:5px 10px; border-radius:100px; white-space:nowrap;
    color:var(--mag); border:1.5px solid var(--mag); }
  .tag.out { color:var(--bg); background:var(--lime); border-color:var(--lime); }
  .pcard h2 { font-size:21px; font-weight:800; letter-spacing:-.035em; margin:0 0 5px; }
  .pcard.soon h2 { color:var(--body); }
  .pcard .meta { font-family:'Space Mono',monospace; font-size:11px; color:var(--dim); letter-spacing:.04em; margin:0 0 20px; line-height:1.6; }
  .pbtns { display:grid; grid-template-columns:1fr; gap:9px; margin-top:auto; }
  .pcard .go, .pcard .store { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    cursor:pointer; font-family:'Bricolage Grotesque',sans-serif; text-align:center; }
  .pcard .go { background:var(--lime); color:var(--bg); text-decoration:none; font-weight:800; font-size:14px;
    letter-spacing:-.02em; padding:12px 16px; border-radius:100px; border:0; transition:transform .15s; }
  .pcard .go:hover { transform:translateY(-2px); }
  .pcard .go.ghost { background:transparent; color:var(--body); border:2px solid var(--edge); font-weight:700; }
  .pcard .go.ghost:hover { border-color:var(--mag); color:var(--cream); }
  .pcard .store { background:transparent; border:2px solid var(--edge); border-radius:100px; padding:12px 16px;
    color:var(--body); font-size:13px; font-weight:600; transition:border-color .15s,color .15s; text-decoration:none; }
  .pcard .store:hover { border-color:var(--lime); color:var(--cream); }
  .pcard.soon .store:hover { border-color:var(--mag); }
  .pcard .sig { font-family:'Space Mono',monospace; font-size:10px; color:var(--dim); letter-spacing:.04em;
    margin:16px 0 0; line-height:1.6; text-align:center; }
  .pcard .sig span { color:var(--body); }

  dialog.notify {
    border:2px solid var(--edge); background:var(--panel); border-radius:16px; padding:28px 26px;
    width:min(420px, calc(100vw - 34px)); color:var(--cream); font-family:'Bricolage Grotesque',sans-serif;
  }
  dialog.notify::backdrop { background:rgba(12,7,26,.78); }
  dialog.notify .kick { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:11px; }
  dialog.notify h2 { font-size:25px; font-weight:800; letter-spacing:-.035em; margin:0 0 8px; }
  dialog.notify .why { color:var(--body); font-size:14px; line-height:1.6; margin:0 0 22px; }
  dialog.notify .row { display:flex; gap:10px; }
  dialog.notify .row input { flex:1; min-width:0; }
  dialog.notify .row .submit { width:auto; padding:13px 22px; font-size:15px; white-space:nowrap; }
  dialog.notify .say { font-family:'Space Mono',monospace; font-size:11px; line-height:1.6; letter-spacing:.04em; margin:14px 0 0; min-height:1.2em; }
  dialog.notify .say.ok  { color:var(--lime); }
  dialog.notify .say.err { color:var(--mag); }
  dialog.notify .shut { appearance:none; border:0; background:none; cursor:pointer; color:var(--dim);
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-top:18px; padding:0; }
  dialog.notify .shut:hover { color:var(--cream); }

  .elsewhere { margin:26px 0 0; border:2px dashed var(--edge); border-radius:12px; padding:15px 20px; text-align:center; }
  .elsewhere p { margin:0; font-size:14px; line-height:1.6; color:var(--body); }
  .elsewhere a { color:var(--lime); text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:3px; text-decoration-color:var(--edge); }
  .elsewhere a:hover { text-decoration-color:var(--lime); }

  /* ---------- help page ---------- */
  .help { padding:44px 0 80px; }
  .help h1 { font-size:clamp(36px,6.4vw,60px); font-weight:800; letter-spacing:-.045em; margin:0 0 14px; }
  .help h1 u { text-decoration:none; color:var(--lime); }
  .help .lede { color:var(--body); font-size:17px; line-height:1.6; max-width:48ch; margin:0 0 40px; }

  .routes { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media (max-width:860px) { .routes { grid-template-columns:1fr; } }
  .rt {
    background:var(--panel); border:2px solid var(--edge); border-radius:16px; padding:24px 22px;
    display:flex; flex-direction:column; text-align:left; cursor:pointer; text-decoration:none;
    font-family:'Bricolage Grotesque',sans-serif; transition:border-color .15s, transform .15s;
  }
  .rt:hover { border-color:var(--lime); transform:translateY(-2px); }
  .rt .ico { width:26px; height:26px; color:var(--lime); margin-bottom:16px; }
  .rt .ico .head { fill:none; stroke:currentColor; stroke-width:2.5; }
  .rt .ico .stem { stroke:currentColor; stroke-width:2.1; stroke-linecap:round; fill:none; }
  .rt .ico .eye, .rt .ico .mouth, .rt .ico .ball { fill:currentColor; }
  .rt h2 { font-size:20px; font-weight:800; letter-spacing:-.03em; margin:0 0 6px; color:var(--cream); }
  .rt p { font-size:14px; line-height:1.6; color:var(--body); margin:0 0 16px; }
  .rt .when { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:auto; }
  .rt .when b { color:var(--lime); font-weight:700; }

  .reasons { margin:56px 0 0; border-top:2px solid var(--edge); padding-top:34px; }
  .reasons .hd { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-bottom:20px; }
  .rgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px 34px; }
  .rgrid h3 { font-size:16px; font-weight:800; letter-spacing:-.02em; margin:0 0 7px; }
  .rgrid p { font-size:14px; line-height:1.65; color:var(--body); margin:0; }
  .rgrid p a { color:var(--lime); text-decoration:none; border-bottom:1px solid var(--edge); }
  .rgrid p a:hover { border-color:var(--lime); }

  .foot { position:relative; z-index:50; }
  .msg { margin:56px 0 0; border-top:2px solid var(--edge); padding-top:34px; }
  .msg .hd { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-bottom:20px; }
  /* 10% inset either side, released as the viewport narrows so the form keeps
     its full width on a phone (the .wrap already supplies 26px of edge padding) */
  .msgform { background:var(--panel); border:2px solid var(--edge); border-radius:16px;
    padding:26px 24px; width:100%; margin-inline:auto;
    max-width:clamp(320px, 80%, 1060px); }
  @media (max-width:600px) { .msgform { max-width:100%; } }
  .msgform .two { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
  .msgform select, .msgform textarea {
    width:100%; background:#1f1240; border:2px solid var(--edge); border-radius:9px;
    padding:12px 13px; color:var(--cream); font-family:'Bricolage Grotesque',sans-serif; font-size:15px;
  }
  .msgform textarea { min-height:130px; resize:vertical; line-height:1.6; }
  @media (min-width:820px) { .msgform textarea { min-height:170px; } }
  .msgform select:focus, .msgform textarea:focus { border-color:var(--lime); outline:none; }
  .msgform .say { font-family:'Space Mono',monospace; font-size:11px; line-height:1.6; letter-spacing:.04em; margin:14px 0 0; min-height:1.2em; }
  .msgform .say.ok { color:var(--lime); }
  .msgform .say.err { color:var(--mag); }

  .elsewhere { margin:44px 0 0; border:2px dashed var(--edge); border-radius:12px; padding:15px 20px; text-align:center; }
  .elsewhere p { margin:0; font-size:14px; line-height:1.6; color:var(--body); }
  .elsewhere a { color:var(--lime); text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:3px; text-decoration-color:var(--edge); }
  .elsewhere a:hover { text-decoration-color:var(--lime); }

  /* floating bot launcher */
  .botfab {
    position:fixed; right:22px; bottom:22px; z-index:40;
    transition:opacity .2s, transform .2s, visibility .2s;
    width:56px; height:56px; border-radius:50%; border:2px solid var(--edge);
    background:var(--lime); color:var(--bg); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.7); transition:transform .15s;
  }
  .botfab:hover { transform:translateY(-3px) rotate(-4deg); }
  /* stand down while the footer is on screen so it can't swallow those clicks */
  .botfab.tucked { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); }
  .botfab svg { width:30px; height:30px; }
  .botfab .head { fill:none; stroke:currentColor; stroke-width:2.5; }
  .botfab .stem { stroke:currentColor; stroke-width:2.1; stroke-linecap:round; fill:none; }
  .botfab .eye, .botfab .mouth, .botfab .ball { fill:currentColor; }

  .botpanel {
    position:fixed; right:22px; bottom:88px; z-index:41; width:min(340px, calc(100vw - 44px));
    background:var(--panel); border:2px solid var(--edge); border-radius:16px; overflow:hidden;
    box-shadow:0 20px 50px -18px rgba(0,0,0,.8);
  }
  .botpanel[hidden] { display:none; }
  .botpanel .bar { display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; border-bottom:2px solid var(--edge); background:rgba(198,242,78,.07); }
  .botpanel .bar .who { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--lime); font-weight:700; }
  .botpanel .bar button { appearance:none; border:0; background:none; cursor:pointer; color:var(--dim); font-size:18px; line-height:1; padding:0 2px; }
  .botpanel .bar button:hover { color:var(--cream); }
  .botpanel .log { padding:16px; font-size:14px; line-height:1.6; color:var(--body); }
  .botpanel .log .b { background:#1f1240; border:1.5px solid var(--edge); border-radius:12px; padding:11px 13px; }
  .botpanel .foot2 { padding:12px 16px 16px; }
  .botpanel input {
    width:100%; background:#1f1240; border:2px solid var(--edge); border-radius:9px;
    padding:11px 13px; color:var(--cream); font-family:'Bricolage Grotesque',sans-serif; font-size:14px;
  }
  .botpanel input:focus { border-color:var(--lime); outline:none; }
  .botpanel .note { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.06em; color:var(--dim); margin:9px 0 0; text-align:center; }

  /* ---------- alternatives directory ---------- */
  .altpage a, .altfoot a { border-bottom:0 !important; }   /* never a border + underline together */
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  .altpage { padding:44px 0 0; }   /* footer supplies the gap below: 20px margin + 30px padding ≈ the 52px above */
  .altpage .kick { display:flex; align-items:center; justify-content:center; gap:11px; margin:0 0 22px; }
  .altpage .kick .ship { width:26px; height:auto; }
  .altpage .kick .ship.a { fill:var(--lime); }
  .altpage .kick .ship.b { fill:var(--mag); }
  .altpage .kick span { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); }
  .altpage h1 { font-size:clamp(34px,6vw,56px); font-weight:800; line-height:.9; letter-spacing:-.045em;
    margin:0 auto 18px; text-align:center; max-width:20ch; }
  .altpage h1 u { text-decoration:none; color:var(--lime); }
  .altpage .lede { color:var(--body); font-size:17px; line-height:1.6; max-width:62ch; margin:0 auto 14px; text-align:center; }
  .altpage .lede:last-of-type { margin-bottom:34px; }
  .altpage .lede em { font-style:normal; font-weight:700; color:var(--cream); }
  .altpage .lede a { color:var(--lime); text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:3px; text-decoration-color:var(--edge); border-bottom:0; }
  .altpage .lede a:hover { text-decoration-color:var(--lime); }

  .filters { padding:26px 0; margin:0 0 4px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); }
  .frow { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
  .frow:last-child { margin-bottom:0; }
  .frow .lab { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--dim); width:92px; flex:none; padding-top:8px; }
  .frow .chips { flex:1; display:flex; gap:7px; flex-wrap:wrap; min-width:0; }
  .chip { appearance:none; cursor:pointer; background:transparent; border:1.5px solid var(--edge); border-radius:100px;
    padding:6px 13px; color:var(--body); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.04em;
    transition:border-color .15s, color .15s, background .15s; }
  .chip:hover { border-color:var(--dim); color:var(--cream); }
  .chip.ico { display:inline-flex; align-items:center; gap:7px; padding-left:11px; }
  .chip.ico svg { width:16px; height:16px; fill:currentColor; flex:none; }
  .chip[aria-pressed="true"] { background:var(--lime); border-color:var(--lime); color:var(--bg); font-weight:700; }
  /* selected chips take the same fill as the matching badge on a card */
  .chip.c1[aria-pressed="true"] { background:#c6f24e; border-color:transparent; color:var(--bg); }
  .chip.c2[aria-pressed="true"] { background:#5fd8f0; border-color:transparent; color:var(--bg); }
  .chip.c3[aria-pressed="true"] { background:#ffb84d; border-color:transparent; color:var(--bg); }
  .chip.c4[aria-pressed="true"] { background:#ff4fa3; border-color:transparent; color:var(--cream); }
  .chip.c5[aria-pressed="true"] { background:#b98cff; border-color:transparent; color:var(--bg); }
  .chip.c6[aria-pressed="true"] { background:#6ee7a8; border-color:transparent; color:var(--bg); }
  .chip.t-focused[aria-pressed="true"],
  .chip.t-comprehensive[aria-pressed="true"],
  .chip.pricechip[aria-pressed="true"] { background:var(--edge2); border-color:transparent; color:var(--cream); }
  .chip.t-superuser[aria-pressed="true"] { background:var(--mag); border-color:transparent; color:var(--cream); }
  .search { flex:1; min-width:180px; background:#1f1240; border:2px solid var(--edge); border-radius:9px;
    padding:9px 12px; color:var(--cream); font-family:'Bricolage Grotesque',sans-serif; font-size:14px; }
  .search:focus { border-color:var(--lime); outline:none; }
  .count { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--dim);
    margin:0 0 18px; text-align:right; }
  .count b { color:var(--lime); }
  .clear { appearance:none; background:none; border:0; cursor:pointer; color:var(--mag);
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; text-decoration:underline; padding:0; margin-left:8px; }

  .tools { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }
  .tool { text-align:left; position:relative; background:var(--panel); border:2px solid var(--edge); border-radius:14px;
    padding:20px 18px 18px; display:flex; flex-direction:column; overflow:hidden;
    transition:border-color .18s, transform .18s; }
  .tool::before {
    content:''; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .25s;
    background:radial-gradient(120% 90% at 90% 0%, rgba(198,242,78,.13), transparent 60%),
               radial-gradient(90% 70% at 0% 100%, rgba(255,79,163,.10), transparent 60%);
  }
  .tool:hover { border-color:var(--dim); transform:translateY(-2px); }
  .tool:hover::before { opacity:1; }
  .tool > * { position:relative; }
  .tool[hidden] { display:none; }
  .tool.caution { border-style:dashed; }

  .thead { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .thead h3 { font-size:17px; font-weight:800; letter-spacing:-.025em; margin:0; color:var(--cream); }
  .thead h3 a { color:inherit; text-decoration:none; border-bottom:0; }
  .thead h3 a:hover { color:var(--lime); text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:3px; text-decoration-color:var(--lime); }
  .plats { display:flex; gap:6px; flex:none; padding-top:3px; }
  .pl svg { width:17px; height:17px; fill:var(--dim); display:block; }
  .tool:hover .pl svg { fill:var(--body); }

  .badges { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:13px; }
  .bdg { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase;
    border-radius:100px; padding:3px 9px; border:1.5px solid var(--edge); color:var(--dim); }
  .bdg.cat { border-color:transparent; color:var(--bg); font-weight:700; }
  .bdg.cat.c1 { background:#c6f24e; }   /* tracking quota */
  .bdg.cat.c2 { background:#5fd8f0; }   /* cli tools */
  .bdg.cat.c3 { background:#ffb84d; }   /* tokenizers */
  .bdg.cat.c4 { background:#ff4fa3; color:var(--cream); }  /* observability */
  .bdg.cat.c5 { background:#b98cff; }   /* context packers */
  .bdg.cat.c6 { background:#6ee7a8; }   /* codebase analysers */
  .bdg.tier, .bdg.price { background:var(--edge2); border-color:transparent; color:var(--cream); font-weight:700; }
  .bdg.tier.t-superuser { background:var(--mag); color:var(--cream); }
  /* borderless: drop the horizontal padding so the visual gap matches the filled pills */
  /* borderless: the neighbouring pill's own 9px inner padding already reads as space,
     so pull back to keep the perceived gap equal to the 6px between fills */
  .bdg.lic { background:transparent; border:0; color:var(--body); padding:3px 0; margin-left:-2px; }

  .bestfor { font-size:14px; line-height:1.6; color:var(--body); margin:0 0 12px; }
  .bestfor:empty, .feats:empty { display:none; }
  .feats { font-size:13px; line-height:1.6; color:var(--dim); margin:0 0 14px; }
  .warn, .unver { font-family:'Bricolage Grotesque',sans-serif; font-style:italic; font-size:12.5px;
    line-height:1.55; letter-spacing:0; margin:0 0 12px; }
  .warn { color:var(--mag); }
  .unver { color:var(--dim); }
  .warn b, .unver b { font-style:normal; font-weight:700; letter-spacing:0; }

  .tlinks { margin-top:auto; padding-top:14px; display:flex; gap:8px; justify-content:flex-end; align-items:center; }
  .act { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    border:2px solid var(--edge); border-radius:50%; color:var(--dim); text-decoration:none;
    transition:border-color .15s,color .15s,background .15s,transform .15s; }
  .act svg { width:17px; height:17px; fill:currentColor; }
  .act:hover { border-color:var(--cream); color:var(--cream); transform:translateY(-2px); }
  .nolink { font-family:'Space Mono',monospace; font-size:10px; color:var(--mag); letter-spacing:.05em; }
  .empty { font-family:'Space Mono',monospace; font-size:12px; color:var(--dim); padding:40px 0; text-align:center; }
  .empty[hidden] { display:none; }

  .altfoot { margin:52px 0 0; padding-top:10px; text-align:center; }
  .altfoot p { font-size:14px; line-height:1.7; color:var(--body); max-width:62ch; margin:0 auto 10px; }
  .altfoot a { color:var(--lime); text-decoration:underline; text-decoration-thickness:1px;
    text-underline-offset:3px; text-decoration-color:var(--edge); border-bottom:0; }
  .altfoot a:hover { text-decoration-color:var(--lime); }

  @media (max-width:620px) {
    .altpage .lede br { display:none; }
    .frow { flex-direction:column; gap:8px; }
    .frow .lab { width:auto; padding-top:0; }
  }

  /* ---------- player select ---------- */
  .select { margin: 58px 0 34px; }
  .select .prompt {
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color: var(--dim); margin-bottom: 13px;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .players { display:inline-flex; gap:8px; background: var(--panel); border:2px solid var(--edge); border-radius:100px; padding:6px; flex-wrap:wrap; }
  .players button {
    appearance:none; border:0; cursor:pointer; background:transparent; color: var(--dim);
    font-family:'Space Mono',monospace; font-weight:700; font-size:12px; letter-spacing:.09em;
    text-transform:uppercase; padding: 11px 22px; border-radius:100px;
    transition: background .18s, color .18s;
  }
  .players button:hover { color: var(--cream); }
  .players button[aria-selected="true"] { background: var(--lime); color: var(--bg); }
  .players button[aria-selected="true"].p2 { background: var(--mag); color: var(--cream); }

  /* ---------- hero ---------- */
  .hero { padding: 0 0 6px; }
  /* Scoped to .hero on purpose. As a bare `h1` this leaked its 14ch max-width
     onto every other page, which quietly un-centred the alternatives headline. */
  .hero h1 {
    font-weight:800; font-size: clamp(40px, 8.6vw, 92px); line-height:.9;
    letter-spacing:-.048em; margin: 0 0 22px; max-width: 14ch;
  }
  .hero h1 u { text-decoration:none; color: var(--lime); }
  .hero h1 .m { color: var(--mag); }
  .sub { font-size: clamp(16px,2vw,19px); line-height:1.55; color: var(--body); max-width: 46ch; margin: 0 0 34px; }

  .actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  .cta {
    display:inline-block; background: var(--lime); color: var(--bg); text-decoration:none;
    padding:15px 30px; border-radius:100px; font-weight:800; font-size:15px; letter-spacing:-.02em;
    transition: transform .15s;
  }
  .cta.pink { background: var(--mag); color: var(--cream); }
  .cta:hover { transform: translateY(-2px) rotate(-1deg); }
  .cta2 { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.07em; color: var(--dim); text-decoration:none; padding:15px 6px; }
  .cta2:hover { color: var(--cream); }

  /* ---------- view swapping ---------- */
  /* the hidden panel is absolutely positioned; if it is taller than the visible one
     it still extends the document's scroll area and leaves dead space under the
     footer. clip it to the stage. */
  .stage { position:relative; overflow:clip; }
  .view {
    position:absolute; inset:0 0 auto 0; width:100%;
    opacity:0; pointer-events:none; visibility:hidden;
    transform: translateY(6px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1), visibility 0s linear .5s;
  }
  .view.on {
    position:relative;            /* visible panel sits in flow so .stage sizes itself */
    opacity:1; pointer-events:auto; visibility:visible;
    transform:none; z-index:1;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1), visibility 0s;
  }

  /* ---------- 1P: token meters ---------- */
  .meter { display:grid; grid-template-columns: repeat(auto-fit,minmax(212px,1fr)); gap:14px; margin: 48px 0 0; }
  .token { background: var(--panel); border:2px solid var(--edge); border-radius:14px; padding:20px 20px 17px; }
  .token .nm { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--dim); margin-bottom:14px; }
  .token .pips { display:flex; gap:4px; margin-bottom:13px; }
  .token .pip { flex:1; height:22px; border-radius:3px; background: var(--edge); }
  .token .pip.on { background: var(--lime); }
  .token.low .pip.on { background: var(--mag); animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity:.45; } }
  .token .txt { font-size:14px; color: var(--body); }
  .token .txt b { color: var(--cream); font-weight:700; }
  .token.low .txt b { color: var(--mag); }

  .tally { margin:34px 0 0; border-top:2px solid var(--edge); border-bottom:2px solid var(--edge); padding:20px 0; display:flex; gap:34px; flex-wrap:wrap; justify-content:center; text-align:center; }
  .tally div { font-family:'Space Mono',monospace; font-size:12px; color: var(--dim); }
  .tally div b { color: var(--lime); }

  /* ---------- 2P: high score board ---------- */
  .board { margin: 48px 0 0; background: var(--panel); border:2px solid var(--edge); border-radius:16px; overflow:hidden; }
  .bhead {
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    padding:18px 22px; border-bottom:2px solid var(--edge); background: rgba(255,79,163,.07);
  }
  .bhead .t { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color: var(--mag); font-weight:700; }
  .bhead .n { font-family:'Space Mono',monospace; font-size:12px; color: var(--dim); }
  .bhead .n b { color: var(--cream); }

  .brow {
    display:grid; grid-template-columns: 62px 1fr 66px 104px; gap:12px; align-items:center;
    padding:14px 22px; border-bottom:1px solid var(--edge);
    font-family:'Space Mono',monospace; font-size:14px;
  }
  .brow:last-of-type { border-bottom:0; }
  .brow .r { text-align:right; }
  .bcols {
    padding:11px 22px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
    color: var(--dim); background: rgba(0,0,0,.14); border-bottom:2px solid var(--edge);
  }
  .brow .rk { color: var(--dim); font-weight:700; letter-spacing:.05em; }
  .brow .pl { color: var(--cream); font-weight:700; letter-spacing:.06em; }
  .brow .pl em {
    display:block; font-style:normal; font-size:10px; letter-spacing:.09em;
    text-transform:uppercase; color: var(--dim); font-weight:400; margin-top:3px;
  }
  .brow .pn { color: var(--body); }
  .brow .sc { color: var(--body); letter-spacing:.11em; font-size:12px; }
  .brow.top { background: rgba(255,79,163,.09); }
  .brow.top .rk, .brow.top .sc { color: var(--mag); font-weight:700; }
  .brow.top .pl em { color: var(--mag); animation: blink 1.15s steps(1) infinite; }
  .brow.hot .sc { color: var(--mag); font-weight:700; }
  .bfoot { padding:15px 22px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em; color: var(--dim); background: rgba(0,0,0,.16); }
  .bfoot b { color: var(--lime); }
  @media (max-width: 560px) {
    .brow { grid-template-columns: 52px 1fr 84px; }
    .brow .pn, .bcols span:nth-child(3) { display:none; }
  }

  /* ---------- cards ---------- */
  .cards { padding: 88px 0 0; display:grid; grid-template-columns: repeat(auto-fit,minmax(258px,1fr)); gap:18px; }
  .card { background: var(--panel); border:2px solid var(--edge); border-radius:16px; padding:26px 24px 24px; }
  .card .ico { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--mag); margin-bottom:15px; }
  .card h3 { margin:0 0 10px; font-size:20px; font-weight:800; letter-spacing:-.028em; }
  .card p { margin:0; font-size:15px; line-height:1.6; color: var(--body); }
  .card p.lines { line-height:2.15; }

  /* ---------- close ---------- */
  .close { padding: 92px 0 116px; text-align:center; }
  .close h2 { font-size: clamp(30px,5.4vw,54px); font-weight:800; letter-spacing:-.045em; margin:0 0 16px; }
  .close p { color: var(--body); margin:0 0 30px; }
  .close p.alt { font-size:14px; color: var(--dim); margin-top:-20px; }
  .fine { margin-top:18px; font-family:'Space Mono',monospace; font-size:11px; color: var(--dim); letter-spacing:.05em; }


  /* footer */
  .foot { flex:none; padding:30px 0 40px; margin-top:auto; }
  .footbase { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
  .parentwrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .parent { display:inline-block; text-decoration:none; line-height:0; }
  .cloudy { width:93px; height:auto; opacity:.9; transition:opacity .15s; }
  .parent:hover .cloudy { opacity:1; }
  .copy { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; line-height:1.2; color:var(--dim); }
  .footlinks { display:flex; gap:26px; flex-wrap:wrap; }
  .footlinks a { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--dim); text-decoration:none; }
  .footlinks a:hover { color:var(--cream); }
  .social { display:flex; gap:6px; align-items:center; margin-right:14px; }
  .social a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:50%; color:var(--dim); border:1.5px solid transparent; transition:color .15s, border-color .15s; }
  .social a:hover { color:var(--cream); border-color:var(--edge); }
  .social svg { width:17px; height:17px; }
  .footright { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

  @media (max-width:560px) { .footbase { flex-direction:column; align-items:flex-start; gap:20px; } }
  @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }