/* The fresh test homes (20 Oct 2026, staging: /home-a, /home-b) and /games. Neon Night, cleaner: the same colors, fonts,
   logo and pixel art as the site, but far less on screen: big type, lots of space, one idea per section, no sidebar.
   Tokens come from ds/tokens.css (via neon.css); game thumbnails from arcade-store.css. */
html,body{margin:0;background:var(--bg-0);color:var(--text-1);font-family:var(--font-body)}
body{min-height:100vh}
.h2{--wrap:1120px;--gap:clamp(16px,4vw,32px)}
.h2 :where(a:not([class])){color:inherit} /* plain links only: buttons keep their own colors */
.h2-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gap);box-sizing:border-box}
[hidden],.hidden{display:none!important}

/* Test ribbon: which page this is */
.h2-ribbon{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:8px var(--gap);background:#2A1A06;box-shadow:inset 0 -1px 0 #4A3410;font:600 13px/18px var(--font-body)}
.h2-ribbon b{font-family:var(--font-pixel);text-transform:uppercase;color:var(--accent)}
.h2-ribbon span{color:var(--text-2)}
.h2-ribbon a{margin-left:auto;color:var(--accent);font-weight:700;text-decoration:none}

/* Top bar */
.h2-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:16px 0}
.h2-top .bv-wordmark{font-size:26px;text-decoration:none}
.h2-nav{display:flex;gap:18px;flex-wrap:wrap}
.h2-nav a{text-decoration:none;color:var(--text-2);font-weight:600;font-size:15px}
.h2-nav a:hover{color:var(--text-1)}
.h2-sp{flex:1}
@media (max-width:640px){.h2-nav{order:3;width:100%;gap:16px}.h2-sp{display:none}.h2-top .bv-wordmark{font-size:22px}.h2-top .h2-btn--sm{min-height:34px;padding:0 10px;font-size:13px}.h2-top .bv-wordmark + .h2-nav + .h2-sp + .h2-btn--sm,.h2-top .bv-wordmark + .h2-nav + .h2-sp + .h2-btn--sm + .h2-btn--sm:only-of-type{margin-left:auto}}
.h2-btn.h2-btn--discord{background:#5865F2;color:#fff;box-shadow:0 4px 0 #3B44B5}
.h2-btn.h2-btn--sm.h2-btn--discord{box-shadow:0 3px 0 #3B44B5}
.h2-btn--discord svg{flex:none}
/* Phones: Discord as its icon, and Sign in in the footer, so the logo and the buttons fit on one row */
@media (max-width:480px){.h2-top .h2-hide-sm{display:none}.h2-top #h2-account{display:none}.h2-btn--discord{padding:0 8px}}

/* Buttons */
.h2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:0;
  background:var(--bg-2);color:var(--text-1);box-shadow:inset 0 0 0 2px var(--line-2),0 4px 0 var(--line-1);font:700 16px/1 var(--font-body);text-decoration:none;cursor:pointer}
.h2-btn:hover{filter:brightness(1.12)}
.h2-btn--play{background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 #B89A12;font:400 15px/1.3 var(--font-arcade);min-height:58px;padding:0 26px;text-align:center}
.h2-btn--agent{background:var(--agent);color:var(--on-agent);box-shadow:0 4px 0 #9E2A72}
.h2-btn--ghost{background:transparent}
.h2-btn--sm{min-height:38px;padding:0 14px;font-size:14px}
.h2-btn--sm.h2-btn--agent{box-shadow:0 3px 0 #9E2A72}

/* Type */
.h2-eyebrow{margin:0 0 14px;font:400 11px/1.6 var(--font-arcade);color:var(--accent);letter-spacing:.02em;text-transform:uppercase}
.h2-h1{margin:0;font:800 clamp(36px,6vw,64px)/1.05 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.h2-h1 em{font-style:normal;color:var(--agent)}
.h2-lead{margin:18px 0 0;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--text-2);max-width:56ch}
.h2-small{margin:16px 0 0;font-size:14px;color:var(--text-3)}
.h2-small a{color:var(--text-1)}
.h2 h2{margin:0;font:400 clamp(16px,2.4vw,22px)/1.35 var(--font-arcade);text-wrap:balance}
.h2 h3{margin:0;font:700 19px/1.3 var(--font-display)}
.h2-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Sections */
.h2-sec{padding:clamp(48px,8vw,88px) 0 0}
.h2-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;justify-content:space-between;margin-bottom:22px}
.h2-sec-head a{color:var(--human-text);font-weight:700;text-decoration:none}
.h2-sec-lead{margin:10px 0 0;color:var(--text-2);font-size:16px;line-height:1.5;max-width:60ch}

/* Hero (A): words beside the table scene */
.h2-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding:clamp(28px,6vw,72px) 0 0}
@media (max-width:860px){.h2-hero{grid-template-columns:minmax(0,1fr)}}
/* The scene: you and your agent at a little table, VS between you, a word bubble each */
.h2-scene{position:relative;aspect-ratio:5/4;max-width:100%;background:radial-gradient(120% 90% at 50% 100%,#2A1650 0%,#140C2C 70%);box-shadow:inset 0 0 0 2px var(--line-1);overflow:hidden}
.h2-scene .floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(255,79,184,.10)),repeating-linear-gradient(90deg,rgba(122,104,168,.25) 0 1px,transparent 1px 40px)}
.h2-scene .tbl{position:absolute;left:22%;right:22%;bottom:24%;height:12%;background:#3A2A63;box-shadow:0 -6px 0 #7A68A8,0 12px 0 #261747}
.h2-scene .spr{position:absolute;bottom:30%;width:18%;image-rendering:pixelated}
.h2-scene .spr.h{left:9%;filter:drop-shadow(0 0 14px rgba(47,214,245,.55))}
.h2-scene .spr.a{right:9%;filter:drop-shadow(0 0 14px rgba(255,79,184,.55))}
.h2-scene .vs{position:absolute;left:50%;bottom:44%;transform:translateX(-50%) rotate(-6deg);padding:8px 12px;background:var(--accent);color:var(--on-accent);font:400 clamp(14px,2.4vw,20px)/1 var(--font-arcade)}
.h2-scene .bub{position:absolute;max-width:44%;padding:10px 12px;font:600 clamp(12px,1.5vw,14px)/1.35 var(--font-body);background:var(--bg-1);box-shadow:inset 0 0 0 2px currentColor}
.h2-scene .bub.h{left:5%;top:7%;color:var(--human-text)}
.h2-scene .bub.a{right:5%;top:7%;color:var(--agent-text)}
.h2-scene .bub span{color:var(--text-1)}
@media (prefers-reduced-motion:no-preference){.h2-scene .spr{animation:h2-bob 1.6s steps(2) infinite}.h2-scene .spr.a{animation-delay:.8s}}
@keyframes h2-bob{50%{transform:translateY(-6px)}}

/* Steps */
.h2-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;counter-reset:s}
@media (max-width:860px){.h2-steps{grid-template-columns:minmax(0,1fr)}}
.h2-steps li{position:relative;padding:22px;background:var(--bg-1);box-shadow:inset 0 0 0 2px var(--line-1)}
.h2-steps .n{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;background:var(--accent);color:var(--on-accent);font:700 22px/1 var(--font-num);box-shadow:0 4px 0 #B89A12}
.h2-steps p{margin:8px 0 0;color:var(--text-2);font-size:15px;line-height:1.5}
.h2-steps a{display:inline-block;margin-top:12px;color:var(--agent-text);font-weight:700;text-decoration:none}

/* Game tiles */
.h2-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px}
.h2-tile{display:flex;flex-direction:column;background:var(--bg-1);box-shadow:inset 0 0 0 2px var(--line-1);text-decoration:none;transition:transform .12s}
.h2-tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--line-2)}
.h2-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.h2-art > :is(img,svg){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-art .th{position:absolute;inset:0}
.h2-tile-txt{display:grid;gap:4px;padding:14px 14px 4px}
.h2-tile-txt b{font:700 17px/1.25 var(--font-display)}
.h2-tile-txt small{color:var(--text-2);font-size:13px;line-height:1.4}
.h2-tile-go{margin:auto 14px 14px;padding-top:10px;font:400 11px/1 var(--font-arcade);color:var(--accent)}

/* A band (Create) */
.h2-band{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;margin-top:clamp(48px,8vw,88px);padding:clamp(24px,4vw,40px);background:linear-gradient(135deg,#2A1650,#1B1035);box-shadow:inset 0 0 0 2px var(--line-2)}
.h2-band > div{flex:1 1 320px;min-width:0}
.h2-band p{margin:12px 0 0;color:var(--text-2);font-size:16px;line-height:1.5;max-width:58ch}

/* For AI agents: plain words, easy for an agent to read */
.h2-agents{margin-top:clamp(48px,8vw,88px);padding:22px;background:#140C2C;box-shadow:inset 3px 0 0 var(--agent)}
.h2-agents p{margin:10px 0 0;color:var(--text-2);font-size:15px;line-height:1.6;max-width:80ch}
.h2-agents a{color:var(--text-1)}
.h2-agents code{font:13px/1.5 var(--font-num);color:var(--text-1);overflow-wrap:anywhere}

/* FAQ */
.h2-faq{display:grid;gap:10px;max-width:820px}
.h2-faq details{padding:16px 18px;background:var(--bg-1);box-shadow:inset 0 0 0 2px var(--line-1)}
.h2-faq summary{cursor:pointer;font:700 16px/1.4 var(--font-body)}
.h2-faq p{margin:10px 0 0;color:var(--text-2);line-height:1.6}

/* B: the question first */
.h2-hero-b{padding:clamp(32px,7vw,80px) 0 0;text-align:center}
.h2-pixel{margin:0;font:400 clamp(26px,5.6vw,52px)/1.2 var(--font-arcade);letter-spacing:.02em;text-wrap:balance}
.h2-pixel .h{color:var(--human)} .h2-pixel .vs{display:inline-block;margin:0 .15em;padding:.08em .2em;font-size:.7em;vertical-align:.12em;background:var(--accent);color:var(--on-accent);transform:rotate(-6deg)} .h2-pixel .a{color:var(--agent)}
.h2-hero-b .h2-lead{margin-left:auto;margin-right:auto}
.h2-cast{display:flex;justify-content:center;gap:clamp(60px,20vw,220px);margin-top:24px}
.h2-cast img{width:56px;image-rendering:pixelated}
.h2-ask{max-width:760px;margin:36px auto 0;padding:clamp(22px,4vw,36px);background:var(--bg-1);box-shadow:inset 0 0 0 2px var(--line-2),0 0 0 4px #120A26,0 0 40px -10px var(--agent);text-align:center}
.h2-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
@media (max-width:560px){.h2-doors{grid-template-columns:minmax(0,1fr)}}
.h2-door{display:grid;gap:6px;justify-items:center;padding:22px 16px;border:0;background:var(--bg-2);color:var(--text-1);box-shadow:inset 0 0 0 2px var(--line-2),0 5px 0 var(--line-1);cursor:pointer;font:inherit}
.h2-door b{font:400 15px/1.3 var(--font-arcade)}
.h2-door small{color:var(--text-2);font-size:14px}
.h2-door.yes{background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 #B89A12}
.h2-door.yes small{color:#4A4410}
.h2-door:hover{filter:brightness(1.1)}
.h2-path{max-width:var(--wrap);margin:36px auto 0;text-align:left}
.h2-path .h2-sec-head{margin-bottom:16px}
.h2-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
@media (max-width:760px){.h2-two{grid-template-columns:minmax(0,1fr)}}
.h2-two li{padding:24px;background:var(--bg-1);box-shadow:inset 0 0 0 2px var(--line-1)}
.h2-two .n{display:inline-grid;place-items:center;width:36px;height:36px;margin-right:10px;background:var(--accent);color:var(--on-accent);font:700 18px/1 var(--font-num);vertical-align:middle}
.h2-two p{margin:10px 0 16px;color:var(--text-2);line-height:1.55}
.h2-linkbtn{background:none;border:0;padding:0;color:var(--text-2);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px}
.h2-more{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;margin-top:40px;color:var(--text-2)}
.h2-more a{color:var(--human-text);font-weight:700;text-decoration:none}

/* Footer */
.h2-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:clamp(56px,9vw,96px);padding:28px 0 40px;box-shadow:inset 0 1px 0 var(--line-1);color:var(--text-3);font-size:14px}
.h2-foot nav{display:flex;flex-wrap:wrap;gap:10px 18px}
.h2-foot a{color:var(--text-2);text-decoration:none}
.h2-foot a:hover{color:var(--text-1)}

/* /games */
.h2-games-head{padding:clamp(28px,5vw,56px) 0 24px}

.h2-count{display:block;margin-top:6px;font-size:14px;color:var(--text-3)}
@media (max-width:360px){.h2-top{gap:10px 8px}.h2-top .bv-wordmark{font-size:20px}.h2-top .h2-btn--sm{padding:0 8px;font-size:12px}}
/* C (20 Oct 2026): the start page's "Not yet" panel, inside the question card */
.h2-door{text-decoration:none}
.h2-no{margin-top:20px;padding-top:18px;box-shadow:inset 0 1px 0 var(--line-1)}
.h2-no p{margin:0 auto;max-width:52ch;color:var(--text-2);line-height:1.55}
.h2-ask .h2-small a{color:var(--human-text);font-weight:700;text-decoration:none}
/* C's header has six links: tighter, Discord as its icon, and below 1140px the links get a row of their own */
.h2-top--long .h2-nav{gap:14px}.h2-top--long .h2-nav a{font-size:14px}
.h2-top--long .h2-hide-sm{display:none}.h2-top--long .h2-btn--discord{padding:0 9px}
@media (max-width:1140px){.h2-top--long .h2-nav{order:3;width:100%}.h2-top--long .h2-sp{flex:1;display:block}}
@media (max-width:640px){.h2-top--long .h2-sp{display:none}}
/* /games, one list of games (20 Oct 2026): All · By battleVS · Made by players */
.h2-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px}
.h2-filter button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--bg-2);color:var(--text-2);font:600 14px/1 var(--font-body);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2)}
.h2-filter button span{color:var(--text-3);font-weight:500;margin-left:2px}
.h2-filter button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.h2-filter button[aria-pressed="true"] span{color:inherit;opacity:.7}
.h2-filter button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.h2-filter-make{margin-left:auto;color:var(--human-text);font-weight:700;font-size:14px;text-decoration:none}
#cards > article[hidden]{display:none}
.h2-none{margin:8px 0 0;color:var(--text-2);max-width:60ch}
/* Test home D (20 Oct 2026): version C in front of today's hero background, full screen. The sky (stripes, stars, sun,
   skyline) is the arcade design's .gc-sky; the human jumps and the robot stands on the skyline, as on today's home. */
.h2-d{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding-bottom:clamp(150px,24vh,250px);box-sizing:border-box}
.h2-d-sky{z-index:-1}
.h2-d-sky .gc-sun{width:clamp(180px,20vw,290px);max-width:none;left:50%;bottom:clamp(60px,10vh,110px)} /* 21 Oct 2026: smaller, and on the right from 900px (it competed with the yellow Yes button) */
.h2-d-sky .gc-skyline{height:clamp(120px,26vh,260px);object-fit:cover;object-position:bottom}
.h2-d-cast{position:absolute;z-index:1;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:clamp(90px,26vw,360px);align-items:flex-end}
.h2-d-cast img{width:clamp(40px,4vw,56px);image-rendering:pixelated}
.h2-d-cast .gc-sprite.is-active{animation:h2-jump 1.8s infinite}
@keyframes h2-jump{0%,45%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.4,1)}62%{transform:translateY(-40px);animation-timing-function:linear}66%{transform:translateY(-40px);animation-timing-function:cubic-bezier(.6,0,.8,.2)}83%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.h2-d-cast .gc-sprite.is-active{animation:none}}
/* The words on the sky: the arcade hero's dark band behind the lead, a shadow on the small print */
.h2-hero-d .h2-eyebrow{color:#FFE14D;text-shadow:2px 2px 0 #120A26}
.h2-hero-d .h2-pixel{text-shadow:4px 4px 0 #120A26}
.h2-hero-d .h2-lead{display:inline-block;padding:8px 14px;background:rgba(18,10,38,.72);color:#F7F3FF}
.h2-d .h2-top{position:relative}
/* 21 Oct 2026: on the right, tucked behind the question box (760px + its 4px ring) so about a third of it is hidden */
@media (min-width:900px){.h2-d-sky .gc-sun{left:calc(50% + 384px + clamp(180px,20vw,290px) * .15)}}
body:has(.h2-d) .h2-ribbon{margin:0}
/* C and D (20 Oct 2026): the heading's VS is our VS mark (the favicon), at the height of the letters */
.h2-vs-ic{display:inline-block;width:1.15em;height:1.15em;margin:0 .12em;vertical-align:-.2em;filter:drop-shadow(3px 3px 0 #120A26)}
.h2-nowrap{white-space:nowrap}
/* C and D (20 Oct 2026), desktop and laptop: a shorter header (FAQ and For AI agents are in the links under the
   question) and a footer without the links already on the page. Phones keep everything. */
@media (min-width:900px){.h2-desk-hide{display:none!important}}
/* The new pages' top bar (20 Oct 2026): the yellow account button, as the old bar's: Sign in, or your username */
@media (min-width:900px){.h2-btn.h2-btn--me{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 0 var(--accent-lip,#B89A12);font:400 10px/1 var(--font-arcade);text-transform:uppercase;letter-spacing:.02em;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* 20 Oct 2026: the one header of the new pages (four links on desktop and laptop) fits on one row from 1000px (below that the links get a row of their own, as on phones) */
@media (min-width:1000px) and (max-width:1140px){.h2-top--home .h2-nav{order:0;width:auto}.h2-top--home .h2-sp{flex:1;display:block}}
.h2-top--home .h2-nav a{line-height:18px} /* the same on /games, whose older stylesheets set a taller line */
/* Where you are (20 Oct 2026): the current page's link in the header, white with a yellow underline */
.h2-nav a[aria-current="page"]{color:var(--text-1);box-shadow:inset 0 -3px 0 var(--accent);padding-bottom:4px}
/* Phones (21 Oct 2026): ☰ Menu on the left, the logo in the middle, Get <agent> on the right (and Discord from 480px);
   the links open from the menu as a panel under the bar. Desktop and laptop unchanged. */
.h2-menu-btn,.h2-menu-only{display:none}
@media (max-width:899px){
  .h2-top--home{position:relative;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:8px;min-height:44px;padding:12px 0}
  .h2-top--home .h2-menu-btn{display:inline-flex;align-items:center;justify-content:center;margin-right:auto;width:40px;height:40px;padding:0;border:0;background:var(--bg-2);color:var(--text-1);box-shadow:inset 0 0 0 2px var(--line-2);font:700 18px/1 var(--font-body);cursor:pointer}
  .h2-top--home .bv-wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px}
  .h2-top--home .h2-sp,.h2-top--home #h2-account{display:none}
  .h2-top--home .h2-btn--sm{min-height:36px;padding:0 10px;font-size:13px}
  .h2-top--home .h2-nav{display:none;position:absolute;z-index:30;top:100%;left:0;right:0;flex-direction:column;gap:0;width:auto;padding:6px 0;background:var(--bg-1);box-shadow:0 0 0 2px var(--line-2),0 18px 40px -12px rgba(0,0,0,.8)}
  .h2-top--home .h2-nav.is-open{display:flex}
  .h2-top--home .h2-nav a{display:block;padding:13px 16px;font-size:16px;line-height:20px;color:var(--text-1);box-shadow:none}
  .h2-top--home .h2-nav a[aria-current="page"]{color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
  .h2-top--home .h2-nav a + a{border-top:1px solid var(--line-1)}
  .h2-top--home .h2-menu-only{display:block}
  .h2-top--home .h2-menu-only.hidden{display:none}
}
@media (max-width:479px){.h2-top--home .h2-btn--discord{display:none!important}}
@media (min-width:480px){.h2-top--home .h2-menu-discord{display:none!important}}
@media (max-width:360px){.h2-top--home .bv-wordmark{font-size:19px}.h2-top--home .h2-btn--sm{padding:0 8px;font-size:12px}}
@media (max-width:899px){.h2-top--home{height:68px;box-sizing:border-box}} /* the same on every page (/games loads older stylesheets) */
@media (max-width:339px){.h2-top--home .bv-wordmark{font-size:17px}}
/* The home's question (21 Oct 2026, feedback): both answers look the same until one is picked (hover or focus lights it
   up); "Not yet" swaps the question for the Get <agent> step */
.h2-hero-d .h2-door{background:var(--bg-2);color:var(--text-1);box-shadow:inset 0 0 0 2px var(--line-2),0 5px 0 var(--line-1)}
.h2-hero-d .h2-door small{color:var(--text-2)}
.h2-hero-d .h2-door:hover,.h2-hero-d .h2-door:focus-visible{background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 #B89A12;filter:none}
.h2-hero-d .h2-door:hover small,.h2-hero-d .h2-door:focus-visible small{color:#4A4410}
.h2-get{display:grid;gap:12px;justify-items:center;text-align:center}
.h2-get[hidden]{display:none}
.h2-get:focus{outline:none}
.h2-get h2{margin:0}
.h2-get p{margin:0 auto;max-width:54ch;color:var(--text-2);line-height:1.55}
.h2-get .h2-get-btn{min-height:64px;padding:0 36px;font:400 16px/1.2 var(--font-arcade);margin:8px 0 4px;box-shadow:0 5px 0 #9E2A72}
.h2-get .h2-small{margin:0}
.h2-get .h2-small a{color:var(--human-text);font-weight:700;text-decoration:none}
.h2-linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--text-2);cursor:pointer}
.h2-linkbtn:hover{color:var(--text-1)}

/* How it works (21 Oct 2026): the hub's two doors, and the crumb and on-page links of its two pages */
.h2-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(28px,5vw,44px)}
@media (max-width:760px){.h2-paths{grid-template-columns:minmax(0,1fr)}}
.h2-path-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(22px,3vw,32px);background:var(--bg-1);box-shadow:inset 0 0 0 2px var(--line-1);color:var(--text-1);text-decoration:none;transition:box-shadow .15s,transform .15s}
.h2-path-card p{margin:0;color:var(--text-2);font-size:16px;line-height:1.55}
.h2-path-card .h2-eyebrow{margin:0}
.h2-path-card .go{margin-top:auto;padding-top:6px;font-weight:700}
.h2-path-card--play .h2-eyebrow,.h2-path-card--play .go{color:var(--human-text)}
.h2-path-card--make .h2-eyebrow,.h2-path-card--make .go{color:var(--agent-text)}
.h2-path-card--play:hover,.h2-path-card--play:focus-visible{box-shadow:inset 0 0 0 2px var(--human);transform:translateY(-2px)}
.h2-path-card--make:hover,.h2-path-card--make:focus-visible{box-shadow:inset 0 0 0 2px var(--agent);transform:translateY(-2px)}
.h2-crumb{margin:0 0 14px;font-size:14px;color:var(--text-3)}
.h2-crumb a{color:var(--text-2)}
.h2-onpage{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.h2-onpage a{padding:8px 14px;box-shadow:inset 0 0 0 2px var(--line-2);color:var(--text-1);font-weight:700;font-size:15px;text-decoration:none}
.h2-onpage a:hover,.h2-onpage a:focus-visible{box-shadow:inset 0 0 0 2px var(--human)}
.h2-steps--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.h2-steps--two{grid-template-columns:minmax(0,1fr)}}
.h2-steps--two .n{font-size:22px}
/* FAQ (21 Oct 2026): pictures of the steps, and lists inside answers */
.h2-faq details ul,.h2-faq details ol{margin:10px 0 0;padding-left:22px;color:var(--text-2);line-height:1.6}
.h2-faq details li+li{margin-top:4px}
.h2-faq details b{color:var(--text-1)}
.h2-faq details a{color:var(--human-text)}
.h2-shot{margin:14px 0 4px;max-width:640px}
.h2-shot img{display:block;width:100%;height:auto;box-shadow:0 0 0 2px var(--line-2)}
.h2-shot figcaption{margin-top:8px;font-size:13px;color:var(--text-3)}
.h2-shot--tall{max-width:340px}
@media (min-width:900px){.h2-phone-only{display:none!important}} /* 21 Oct 2026: shown on phones only */
.h2-menu-only[hidden]{display:none!important} /* 21 Oct 2026: Sign out until you're signed in */
/* 21 Oct 2026: the home's box keeps its size whatever it says (the question is two lines; "Welcome back" is one) */
.h2-hero-d #ask-h{display:flex;align-items:center;justify-content:center}
.h2-hero-d #ask-q[data-sized]{display:flex;flex-direction:column;justify-content:center} /* home-d.html keeps its size */
.h2-hero-d #ask[data-deciding] #ask-q{visibility:hidden} /* home-d.html: which box to show, before it shows */
.h2-hero-d #ask-h .ask-name{color:var(--agent,#FF4FB8);text-shadow:0 0 18px rgba(255,79,184,.35)} /* the agent's name, in the agents' pink */
/* 21 Oct 2026: on phones the box's small line can wrap to two lines ("Join the leaderboards: …"), so it always
   has room for two, and the box stays the same size whatever it says */
@media (max-width:560px){.h2-hero-d #ask-line{min-height:2.9em}}

/* 27 Oct 2026: the legal line under the footer links */
.h2-foot .foot-legal,.site-foot .foot-legal{flex-basis:100%;margin:0;font-size:13px;color:var(--text-3)}

/* 27 Oct 2026: the heading's typing cursor, in the agents' pink: it blinks while a name holds, and stays lit while typing */
.h2-hero-d #ask-h .ask-cur{display:inline-block;width:.5em;height:1em;margin-left:.06em;vertical-align:-.12em;background:var(--agent,#FF4FB8);box-shadow:0 0 12px rgba(255,79,184,.45);animation:ask-blink 1s steps(1,end) infinite}
.h2-hero-d #ask-h .ask-cur.is-typing{animation:none}
@keyframes ask-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-hero-d #ask-h .ask-cur{animation:none}}

/* 27 Oct 2026: "What are agents?": the agents we name, two by two */
.h2-agent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:480px}
.h2-agent-list a{display:grid;gap:2px;padding:12px 10px;background:var(--agent-soft,#3D1238);box-shadow:inset 0 0 0 2px var(--agent,#FF4FB8);color:var(--text-1);text-decoration:none;font:700 16px/1.3 var(--font-body)}
.h2-agent-list a:hover,.h2-agent-list a:focus-visible{background:#55184D;outline:none}
.h2-agent-list small{font-weight:400;font-size:13px;color:var(--text-2)}