/* 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; --field:#1f1240;
    --lime:#c6f24e; --mag:#ff4fa3; --cream:#f4efff; --dim:#9b8ac4; --body:#cbbdea;
    --cat1:var(--lime); --cat2:#5fd8f0; --cat3:#ffb84d; --cat4:var(--mag); --cat5:#b98cff; --cat6:#6ee7a8;
    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); }
  /* eyebrow: the Space Mono caps label used for kickers, form titles and nav
     actions. The base carries the type recipe and dim colour; .hd/.wide/.tight
     set the letter-spacing, and page rules layer their own spacing and weight
     on top. */
  .eyebrow { font-family:'Space Mono',monospace; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
  .eyebrow.hd { letter-spacing:.13em; }
  .eyebrow.wide { letter-spacing:.16em; }
  .eyebrow.tight { letter-spacing:.08em; }

  /* panel: the shared card surface — panel fill, edge border, 16px radius.
     The .r14 modifier drops the radius for the tighter cards. Component rules
     layer their own padding, layout, overflow and shadows on top. */
  .panel { background:var(--panel); border:2px solid var(--edge); border-radius:16px; }
  .panel.r14 { border-radius:14px; }
  .navlinks { display:flex; gap:16px; align-items:center; }
  .navlink { letter-spacing:.06em; color:var(--dim); text-decoration:none; padding:9px 4px; }
  .navlink:hover { color:var(--cream); }
  .navbtn { letter-spacing:.06em; font-weight:400;
    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; }

  /* 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 { 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 { 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:14px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
  .field input {
    width:100%; background:var(--field); 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:disabled { opacity:.45; cursor:default; transform:none; }
  .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 .accent { 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:14px; 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:14px; 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 { 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:var(--field); 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:13px; 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:var(--field); 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:13px; 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); }

  /* "elsewhere" callout — shared by download and help. Each page scopes its
     own top margin (.dl .elsewhere / .help .elsewhere) so the two never leak
     across pages via a bare .elsewhere margin. */
  .elsewhere { 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); }


  /* ---------- 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 { 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 {
    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 { 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);
    margin-top:18px; padding:0; }
  dialog.notify .shut:hover { color:var(--cream); }

  .dl .elsewhere { margin:26px 0 0; }

  /* ---------- 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 .accent { 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 {
    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:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:auto; }
  .rt .when b { color:var(--lime); font-weight:400; }

  .reasons { margin:56px 0 0; padding-top:34px; }
  .reasons .hd { 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); }

  .msg { margin:56px 0 0; padding-top:34px; }
  .msg .hd { margin-bottom:20px; }
  .msgform > .hd { color:var(--lime); }
  /* 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 {
    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 textarea {
    width:100%; background:var(--field); border:2px solid var(--edge); border-radius:9px;
    padding:12px 14px; color:var(--cream); font-family:'Bricolage Grotesque',sans-serif; font-size:15px;
  }
  /* the topic picker is a styled listbox: native <select> popups are OS
     chrome — unstyleable, and they open wherever the OS pleases, including
     straight up over the field itself */
  .msgform .pick { position:relative; margin-bottom:17px; }
  .msgform .pickbtn {
    width:100%; height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--field); border:2px solid var(--edge); border-radius:9px;
    padding:12px 14px; color:var(--cream); font-family:'Bricolage Grotesque',sans-serif; font-size:15px;
    cursor:pointer; text-align:left;
  }
  .msgform .pickbtn:focus, .msgform .pick.open .pickbtn { border-color:var(--lime); outline:none; }
  .msgform .pickbtn svg { width:12px; height:8px; flex:none; transition:transform .15s; }
  .msgform .pick.open .pickbtn svg { transform:rotate(180deg); }
  .msgform .picklist {
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
    margin:0; padding:6px; list-style:none; max-height:264px; overflow:auto;
    background:var(--field); border:2px solid var(--edge); border-radius:9px;
    box-shadow:0 14px 34px -12px rgba(0,0,0,.65);
  }
  .msgform .picklist li { padding:10px 12px; border-radius:6px; color:var(--body); font-size:15px; cursor:pointer; }
  .msgform .picklist li:hover, .msgform .picklist li[aria-selected="true"] { background:var(--panel); color:var(--cream); }
  /* data-appearance="interaction-only": invisible unless a challenge is
     needed, so it takes no space when hidden. When a challenge does render,
     give it the field rhythm. */
  .msgform .cf-turnstile:not(:empty) { margin:0 0 17px; }
  .msgform .cf-turnstile iframe { border-radius:9px; }
  @keyframes done-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  @keyframes done-out { to { opacity:0; transform:translateY(-6px); } }
  .msgform textarea { min-height:130px; resize:vertical; line-height:1.6; }
  @media (min-width:820px) { .msgform textarea { min-height:170px; } }
  .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); }

  /* Smart Feedback verdict panels: mood (the themed done/denied state),
     xlate (translation consent), verify (sender check) and debug (dry-run
     metadata). All share the same swap rhythm. */
  .msgform .verdict { display:none; text-align:center; padding:22px 12px 16px; }
  /* display rules below would otherwise beat the UA [hidden] rule and show
     every button group on every panel */
  .msgform .verdict [hidden] { display:none !important; }
  .msgform.mood [data-formbody], .msgform.xlate [data-formbody], .msgform.debug [data-formbody], .msgform.verify [data-formbody] { display:none; }
  /* in a verdict state the form becomes a column: eyebrow on top, panel
     content centred in the space below it, not in the panel as a whole */
  .msgform.mood, .msgform.xlate, .msgform.debug, .msgform.verify { display:flex; flex-direction:column; min-height:460px; }
  .msgform.mood:has(.v-mood[data-deliver]) { min-height:360px; }   /* received boxes: shorter, one shared height */
  .msgform.notrecv > .hd { color:var(--mag); }
  .msgform.mood .v-mood, .msgform.xlate .v-xlate, .msgform.debug .v-debug, .msgform.verify .v-verify { display:flex; flex-direction:column; justify-content:center; flex:1; animation:done-in .45s ease both; }
  .msgform.fading .v-mood { animation:done-out .6s ease both; }
  .msgform.mood .v-mood[data-deliver] { cursor:pointer; }
  .msgform .verdict .vb { width:64px; height:64px; color:var(--mag); margin:0 auto 14px; display:block; }
  .msgform .verdict .vt { color:var(--cream); font-size:16px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
  .msgform .verdict .vr { color:var(--body); font-size:14px; line-height:1.6; margin:0 0 16px; }
  /* one row, always, every button the same width as the widest: the grid
     hugs its content so the 1fr columns size to the widest button, and the
     buttons shrink on narrow screens rather than wrap */
  .msgform .verdict .vbtns { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; width:fit-content; max-width:100%; margin:14px auto 12px; }
  .msgform .verdict .vbtns .submit, .msgform .verdict .vbtns .vbtn2 { white-space:nowrap; }
  /* cross-panel width parity: primaries match the widest pair, secondaries match 'Confirm email' */
  .msgform .verdict .vbtns .submit { min-width:212px; }
  .msgform .verdict .vbtns .vbtn2 { min-width:143px; }
  @media (max-width:600px) {
    /* too narrow for one line of text per button: the text wraps inside the
       buttons instead; the row stays single and the widths stay equal */
    .msgform .verdict .vbtns { gap:7px; width:100%; }
    .msgform .verdict .vbtns .submit, .msgform .verdict .vbtns .vbtn2 { padding:10px 8px; font-size:13px; line-height:1.25; white-space:normal; }
  }
  /* bilingual panels: the translation sits under the English, dimmed */
  .msgform .verdict .xl { color:var(--dim); }
  .msgform .verdict .xt { display:block; font-size:12px; font-weight:400; letter-spacing:0; color:var(--dim); margin-top:3px; }
  /* the mood panel apes the arcade response screen: big badge, headline,
     full-width body, one row of actions. The classifier's verdict (category,
     confidence, sentiment) is never shown to the sender */
  .v-mood .vb { width:110px; height:110px; }
  .v-mood .vt { font-size:clamp(19px,3vw,24px); letter-spacing:-.03em; }
  /* mood accents: lime for friendly, cream for formal, magenta for refused */
  .v-mood[data-mood=normal] .vb,
  .v-mood[data-mood=techs] .vb { color:var(--lime); }
  .v-mood[data-mood=sober] .vb { color:var(--lime); }
  .v-mood[data-mood=huh] .vb,
  .msgform .verdict.v-xlate .vb,
  .msgform .verdict.v-verify .vb { color:var(--cream); }
  .v-mood[data-mood=tbnt] .vb { color:var(--mag); }
  .v-mood[data-mood=denied] .vb,
  .v-mood[data-mood=naughty] .vb { color:var(--mag); }
  .msgform .verdict.v-xlate .vt { margin-bottom:0; }
  .msgform .verdict.v-xlate .vt.xl { margin-bottom:14px; }
  .msgform .verdict.v-xlate .vr { margin-bottom:0; }
  .msgform .verdict.v-xlate .vr.xl { margin-bottom:10px; }
  .msgform .verdict.v-xlate .vr.xl:last-of-type { margin-bottom:0; }
  .vbtn2 {
    display:inline-block; background:none; border:2px solid var(--edge); border-radius:9px;
    padding:12px 18px; color:var(--cream); font-family:'Bricolage Grotesque',sans-serif;
    font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
    transition:border-color .15s, transform .15s;
  }
  .vbtn2:hover { border-color:var(--lime); transform:translateY(-2px); }
  .msgform .v-debug pre {
    background:var(--field); border:2px solid var(--edge); border-radius:9px;
    padding:14px; margin:0 0 16px; max-height:300px; overflow:auto;
    text-align:left; white-space:pre-wrap; word-break:break-word;
    font-family:'Space Mono',monospace; font-size:12px; line-height:1.6; color:var(--body);
  }
  .msgform .v-debug .eprev { margin:0 0 16px; }
  .msgform .v-debug .epsub { font-family:'Space Mono',monospace; font-size:12px; color:var(--cream); margin:0 0 8px; }
  /* inline styles inside the email copy are dropped by the CSP: this is a
     structural preview, not a pixel preview */
  .msgform .v-debug .epbody {
    background:var(--field); border:2px solid var(--edge); border-radius:9px;
    padding:14px; text-align:left; font-size:14px; line-height:1.6; color:var(--body);
  }

  .help .elsewhere { margin:44px 0 0; }

  /* floating bot launcher */
  .botfab {
    position:fixed; right:22px; bottom:22px; z-index:40;
    transition:opacity .2s, transform .15s, 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);
  }
  .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; }
  #h-bot .head { fill:none; stroke:currentColor; stroke-width:2.5; }
  #h-bot .stem { stroke:currentColor; stroke-width:2.1; stroke-linecap:round; fill:none; }
  #h-bot .eye, #h-bot .mouth, #h-bot .ball { fill:currentColor; }

  .botpanel {
    position:fixed; right:22px; bottom:88px; z-index:41; width:min(340px, calc(100vw - 44px));
    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:14px; 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:var(--field); border:1.5px solid var(--edge); border-radius:12px; padding:11px 13px; }
  .botpanel .foot2 { padding:12px 16px 16px; }
  .botpanel input {
    width:100%; background:var(--field); 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:28ch; }
  .altpage h1 .accent { color:var(--lime); }
  .altpage .lede { color:var(--body); font-size:24px; 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; }
  .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:13px; 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:var(--cat1); border-color:transparent; color:var(--bg); }
  .chip.c2[aria-pressed="true"] { background:var(--cat2); border-color:transparent; color:var(--bg); }
  .chip.c3[aria-pressed="true"] { background:var(--cat3); border-color:transparent; color:var(--bg); }
  .chip.c4[aria-pressed="true"] { background:var(--cat4); border-color:transparent; color:var(--cream); }
  .chip.c5[aria-pressed="true"] { background:var(--cat5); border-color:transparent; color:var(--bg); }
  .chip.c6[aria-pressed="true"] { background:var(--cat6); border-color:transparent; color:var(--bg); }
  .chip.t-focused[aria-pressed="true"],
  .chip.t-comprehensive[aria-pressed="true"],
  .chip.pricechip[aria-pressed="true"] { background:transparent; 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:var(--field); 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;
    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; }
  .tool.ours { border-color:var(--lime); }
  .tool.ours:hover { border-color:var(--lime); }

  .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:var(--cat1); }   /* tracking quota */
  .bdg.cat.c2 { background:var(--cat2); }   /* cli tools */
  .bdg.cat.c3 { background:var(--cat3); }   /* tokenizers */
  .bdg.cat.c4 { background:var(--cat4); color:var(--cream); }  /* observability */
  .bdg.cat.c5 { background:var(--cat5); }   /* context packers */
  .bdg.cat.c6 { background:var(--cat6); }   /* codebase analysers */
  .bdg.tier, .bdg.price { background:transparent; 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; }
  .bdg.ours { background:var(--lime); border-color:transparent; color:var(--bg); font-weight:700; }

  .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 { margin-bottom: 13px; }
  .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 .accent { 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 { padding:20px 20px 17px; }
  .token .nm { 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; 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:14px; 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 { padding:26px 24px 24px; }
  .card .ico { font-family:'Space Mono',monospace; font-size:14px; 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 .closenote { 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; }


  /* legal pages: the privacy policy and the terms of service. Long-form
     documents, so tables and emphasis get real styles here rather than
     leaning on the base .doc rules alone. */
  .doc .tbl { overflow-x:auto; margin:0 0 16px; }
  .doc table { width:100%; border-collapse:collapse; font-size:13px; }
  .doc th { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--dim); text-align:left; padding:9px 11px;
    border:2px solid var(--edge); background:var(--field); }
  .doc td { color:var(--body); line-height:1.55; padding:9px 11px;
    border:2px solid var(--edge); vertical-align:top; }
  .doc strong { color:var(--cream); font-weight:700; }
  .doc code { font-family:'Space Mono',monospace; font-size:.86em; color:var(--lime); }
  .doc h2 { margin-top:44px; }

  /* footer */
  .foot { flex:none; padding:30px 0 40px; margin-top:auto; position:relative; z-index:50; }
  .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.hot { color:var(--lime); }
  .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; } body { background-attachment:scroll; } }
  @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } html { scroll-behavior:auto !important; } }