/* 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:#080c19; --panel:#111c30; --edge:#344460; --field:#0c1425;
    --lime:#c6ff4e; --mag:#ff66af; --cream:#edf4ff; --dim:#8b9dbf; --body:#b4c5e1;
    --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); }
  button.navlink, button.navbtn { border:0; font-family:inherit; font-size:inherit; }
  button.navlink { background:none; }
  .navlink:disabled, .navlink[aria-disabled="true"] { opacity:.45; cursor:not-allowed; pointer-events:none; }
  .navbtn:disabled, .navbtn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; pointer-events:none; transform:none; }

  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; }

  .dl-notice { padding:20px 22px; margin:24px 0 0; }
  .dl-notice .eyebrow { font-size:11px; margin-bottom:10px; color:var(--lime); }
  .dl-notice p { margin:0 0 10px; font-size:14px; line-height:1.65; color:var(--body); }
  .dl-notice p:last-child { margin-bottom:0; }
  .dl-notice strong { color:var(--cream); }
  .dl-notice a { color:var(--lime); text-decoration:underline; }

  .dl-section-hd { font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin:36px 0 16px; }

  .platforms { display:grid; gap:14px; }
  .platforms.tri { grid-template-columns:repeat(3,1fr); }
  .platforms.duo { grid-template-columns:repeat(2,1fr); }
  @media (max-width:960px) { .platforms.tri, .platforms.duo { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px) { .platforms.tri, .platforms.duo { 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; }
  .pbtns.duo { grid-template-columns:repeat(2,1fr); }
  @media (max-width:440px) { .pbtns.duo { grid-template-columns:1fr; } }
  .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:2px solid transparent; 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); }

  .steps code { font-family:'Space Mono',monospace; font-size:12px; color:var(--cream); background:var(--bg); padding:2px 6px; border-radius:4px; }

  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; }
  }

.arcade{--play:#c6ff4e;position:relative;color:#edf4ff;background:#080c19}.arcade[data-player=pay]{--play:#ff66af}.arc-compare{max-width:1320px;margin:auto;padding:12px 30px;display:flex;justify-content:space-between;font:12px 'Space Mono',monospace;color:#aab5ce}.arc-compare a{color:#c6ff4e}.arc-hero{position:relative;min-height:780px;overflow:hidden;background:radial-gradient(ellipse at 80% 70%,#17224e,#080c19 70%)}.arc-hero canvas{position:absolute;inset:0;width:100%;height:100%}.arc-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080c19f5,#080c19b0 35%,transparent 72%);pointer-events:none}.arc-content{position:relative;z-index:2;max-width:1320px;margin:auto;padding:45px 30px 70px}.arc-label{font:12px 'Space Mono',monospace;letter-spacing:.15em;color:var(--play)}.arc-players{display:flex;gap:8px;margin:20px 0 45px;flex-wrap:wrap}.arc-players button{border:1px solid #536083;color:#bbc7e1;background:#10182a;padding:14px 18px;cursor:pointer;font:13px 'Space Mono',monospace;border-radius:4px;position:relative}.arc-players button[aria-pressed=true]{background:var(--play);color:#080c19;border-color:var(--play);box-shadow:4px 4px 0 #35414d}.arc-copy{max-width:680px}.arc-copy h1{font-size:clamp(50px,6.5vw,91px);line-height:.95;font-weight:800;letter-spacing:-.06em;margin:0 0 25px;text-shadow:0 3px 0 #080c19}.arc-copy h1 em{font-style:normal;color:var(--play)}.arc-copy>p{font-size:20px;line-height:1.6;max-width:490px;color:#b9c7e2;min-height:96px}.arc-actions{display:flex;align-items:center;gap:25px;margin-top:32px;flex-wrap:wrap}.arc-start{font:14px 'Space Mono',monospace;padding:18px 26px;background:var(--play);color:#080c19;text-decoration:none;box-shadow:5px 5px #34435c}.arc-actions>a:last-child{font:12px 'Space Mono',monospace;color:#bbc7e1}.arc-controls{display:flex;gap:15px;align-items:center;margin-top:65px;font:11px 'Space Mono',monospace}.arc-controls button{padding:11px 13px;border:1px solid #596b91;background:#080c19;color:#d7e4ff;cursor:pointer}.arc-controls span{max-width:190px;color:#8b9dbf}.arc-sky{position:absolute;right:0;top:180px;bottom:30px;width:40%;z-index:3;cursor:default}.arc-hud{position:absolute;right:40px;top:38px;z-index:2;text-align:right;font:12px/1.8 'Space Mono',monospace;color:#799bb1}.arc-hud strong{display:block;color:var(--play);font-size:17px}.arc-detail{padding:90px 30px;max-width:1200px;margin:auto}.arc-detail h2{font-size:clamp(38px,5vw,64px);line-height:1.03;letter-spacing:-.05em;margin:20px 0 45px;max-width:750px}.arc-loadout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.arc-slot{border:1px solid #3b5071;padding:30px;background:#111c30;position:relative}.arc-slot>span{font:12px 'Space Mono',monospace;color:var(--play)}.arc-slot h3{font-size:25px;line-height:1.2;letter-spacing:-.025em}.arc-slot p{font-size:17px;line-height:1.6;color:#b4c5e1}.arc-pips{display:flex;gap:7px;margin:22px 0}.arc-pips i{height:8px;background:var(--play);flex:1}.arc-pips i:last-child{background:#344460}.arc-receipt{max-width:850px;background:#111c30;padding:35px;border:1px solid #3b5071}.arc-receipt>div{display:flex;justify-content:space-between;border-bottom:1px solid #35465f;padding:18px 0;gap:25px;font:15px 'Space Mono',monospace}.arc-receipt>div b{color:var(--play)}.arc-receipt>p{font:12px/1.6 'Space Mono',monospace;color:#8ba4cb}.arc-pricing{padding:75px 30px;background:#10192b}.arc-pricing-inner{max-width:1140px;margin:auto;display:flex;justify-content:space-between;gap:65px;align-items:center}.arc-pricing h2{font-size:65px;letter-spacing:-.05em;line-height:1;margin:15px 0}.arc-pricing p{font-size:18px;line-height:1.6;max-width:650px;color:#b4c5e1}.arc-faq{padding:70px 30px;max-width:1100px;margin:auto}.arc-faq h2{font:30px 'Space Mono',monospace}.arc-faq details{border-bottom:1px solid #344460}.arc-faq summary{font-size:20px;padding:22px 0;cursor:pointer}.arc-faq p{font-size:17px;line-height:1.7;color:#b4c5e1}[hidden]{display:none!important}.arc-players button:focus-visible,.arc-controls button:focus-visible{outline:3px solid #fff;outline-offset:5px}@media(max-width:760px){.arc-hero{min-height:880px}.arc-content{padding:30px 22px 150px}.arc-players{margin-bottom:35px}.arc-players button{font-size:11px;padding:12px 13px}.arc-copy h1{font-size:55px}.arc-copy>p{font-size:18px}.arc-hero:after{background:linear-gradient(#080c19e8,#080c19a0 60%,transparent)}.arc-hud{display:none}.arc-sky{width:100%;top:auto;height:140px;bottom:0}.arc-controls{margin-top:40px}.arc-loadout{grid-template-columns:1fr}.arc-pricing-inner{display:block}.arc-pricing h2{font-size:52px}.arc-pricing .arc-start{display:inline-block;margin-top:20px}.arc-compare{font-size:10px;padding:12px 22px;gap:20px}}
/* Equal X/Y drawing scale preserves circles, ships and maze cells at every width. */
.arc-hero canvas{inset:auto;right:0;top:90px;width:55%;height:calc(100% - 110px)}.arc-sky{top:110px;right:0;width:52%;bottom:30px}.arc-hero:after{background:linear-gradient(90deg,#080c19 0%,#080c19dd 28%,#080c1940 49%,transparent 62%)}.arc-hud{font-size:11px}.arc-hud strong{font-size:16px}.arc-copy{max-width:56%}.arc-copy h1{font-size:clamp(48px,6vw,84px)}.arc-controls{max-width:580px;flex-wrap:wrap;gap:10px}.arc-controls button{font-size:11px}.arc-controls>span{font-size:11px;max-width:225px}.arc-content{pointer-events:none}.arc-content a,.arc-content button{pointer-events:auto}@media(max-width:760px){.arc-hero{min-height:1100px}.arc-content{padding-bottom:410px}.arc-copy{max-width:100%}.arc-copy h1{font-size:clamp(45px,12vw,65px)}.arc-hero canvas{top:auto;bottom:15px;right:0;width:100%;height:370px}.arc-sky{top:auto;bottom:15px;width:100%;height:370px}.arc-hero:after{display:none}.arc-controls{margin-top:28px}.arc-hud{display:none}}@media(prefers-reduced-motion:reduce){.arc-copy h1{transition:none}}

body:has(.arcade){background:#080c19}.arcade{background:transparent}.arc-hero,.arcade[data-player=code] .arc-hero{overflow:visible;background:transparent}.arc-hero canvas{top:-190px;bottom:auto;height:calc(100% + 500px);width:58%;z-index:0;mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%)}.arc-compare{position:relative;z-index:3;background:transparent}.arc-detail{position:relative;z-index:2;background:transparent}.arc-sky{top:0;bottom:-160px;width:54%}.arc-hud{z-index:3}.arc-content{z-index:4}.arc-pricing,.arc-faq{position:relative;z-index:2}@media(max-width:760px){.arc-hero canvas{top:-140px;bottom:auto;width:100%;height:calc(100% + 470px);opacity:.7;mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%)}.arc-content{background:linear-gradient(#080c19b0 0%,#080c19e0 42%,transparent 70%)}.arc-sky{top:auto;bottom:-130px;height:530px;width:100%}}

/* Use the hero's exact gutter for both ends of the top navigation. */
body:has(.arcade)>.wrap{max-width:1320px;padding-inline:30px}
@media(max-width:760px){body:has(.arcade)>.wrap{padding-inline:22px}}


/* One full-width page shell and shared gutters prevent header/content drift. */
body:has(.arcade){--page-gutter:clamp(22px,3vw,48px);width:100%;min-width:0;overflow-x:clip}
body:has(.arcade)>main{width:100%;min-width:0}
body:has(.arcade)>.wrap,.arc-compare,.arc-content,.arc-detail,.arc-faq{width:100%;max-width:none;margin-inline:0;padding-inline:var(--page-gutter,30px)}
body:has(.arcade) .navlinks{margin-left:auto;justify-content:flex-end}
.arc-pricing{padding-inline:var(--page-gutter)}.arc-pricing-inner{max-width:none}
body:has(.arcade) .foot .wrap{max-width:none;padding-inline:var(--page-gutter)}



/* A full-width sky, with a separate right-side coordinate space for the game. */
.arc-hero canvas{left:0;right:0;width:100%;top:-190px;height:calc(100% + 430px);background:radial-gradient(ellipse at 78% 38%,#17224e88,transparent 72%);mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%)}
.arc-hero:after{display:none}
@media(max-width:760px){.arc-hero canvas{top:-140px;height:calc(100% + 380px)}.arc-content{background:transparent}.arc-copy>p{color:#c0cce2;text-shadow:0 1px 5px #080c19}}

/* Feather the moving sky behind copy without introducing a panel edge. */
.arc-hero:after{display:block;inset:auto;left:0;right:0;top:-190px;height:calc(100% + 430px);z-index:1;background:linear-gradient(90deg,#080c19d9 0%,#080c19c7 32%,#080c1999 43%,#080c1940 55%,#080c1900 67%);mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);pointer-events:none}
@media(max-width:760px){.arc-hero:after{top:-140px;height:calc(100% + 380px);background:linear-gradient(to bottom,#080c19bb 0%,#080c19bb 32%,#080c1980 44%,#080c1900 66%)}}



.arc-sky:focus,.arc-sky:focus-visible{outline:none;box-shadow:none}.arc-sky:focus-visible::after{content:"";position:absolute;right:12px;bottom:12px;width:14px;height:14px;border-right:1px solid #799bb1;border-bottom:1px solid #799bb1;pointer-events:none}

  /* 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; }
  /* The footer earns more width than the 1060 content column so the logo, social
     and links sit on one line where the viewport allows; footright still wraps
     its own contents when space runs out. */
  .foot .wrap { max-width:1320px; }
  .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; } }