@font-face{font-family:"Press Start 2P";src:url(fonts/pressstart2p.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(fonts/vt323.woff2) format("woff2");font-display:swap}

:root{
  --night:#0b0c1a; --panel:#14162c; --ink:#f4ecd8; --dim:#a7a4c4;
  --amber:#ffb53d; --orange:#f08a1c; --rust:#b8500f;
  --violet:#7a4dff; --cyan:#4de3ff; --plum:#3a1a6e;
  --px:4px;   /* one "pixel" of the chunky borders */
  --f:256px;  /* sprite frame edge: 128 px art shown at 2x */
  --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' shape-rendering='crispEdges'%3E%3Crect x='20' y='40' width='2' height='2' fill='%23f4ecd8'/%3E%3Crect x='180' y='90' width='2' height='2' fill='%234de3ff'/%3E%3Crect x='260' y='210' width='2' height='2' fill='%23f4ecd8'/%3E%3Crect x='90' y='260' width='2' height='2' fill='%23ffb53d'/%3E%3Crect x='130' y='150' width='2' height='2' fill='%23a7a4c4'/%3E%3Crect x='300' y='20' width='2' height='2' fill='%23a7a4c4'/%3E%3Crect x='60' y='120' width='2' height='2' fill='%237a4dff'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--night);overflow-x:hidden;
  font:30px/1.2 "VT323",ui-monospace,Menlo,monospace}
h1,h2,h3,.btn,.hud,.price,.tag{font-family:"Press Start 2P",ui-monospace,monospace;font-weight:400}
h1,h2,h3,p{margin:0}
a{color:var(--cyan)}

/* Starfield, two depths, and a CRT scanline overlay. */
.sky,.sky::after{position:fixed;inset:0;z-index:-1;pointer-events:none;content:"";
  background:var(--stars) 0 0/320px 320px;animation:drift 80s linear infinite}
.sky::after{background-size:640px 640px;opacity:.9;animation-duration:40s}
@keyframes drift{to{background-position:0 640px}}
.crt{position:fixed;inset:0;z-index:9;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 4px);
  box-shadow:inset 0 0 160px rgba(0,0,0,.75)}

.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
/* Navigation: the HUD line. The current page is lit. */
.hud{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:18px 0;font-size:12px;line-height:1.6;color:var(--dim)}
.hud b{color:var(--amber);font-weight:400}
.hud a{color:var(--dim);text-decoration:none}
.hud a:hover,.hud a:focus-visible{color:var(--ink);outline:0}
.hud a[aria-current="page"]{color:var(--amber)}
.hud .links{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Title screen */
.title{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:24px;padding:24px 0 56px}
h1{font-size:clamp(28px,4.2vw,56px);line-height:1;color:var(--amber);
  text-shadow:.06em .06em 0 var(--rust),.12em .12em 0 var(--plum)}
.tagline{margin-top:28px;font-size:34px;line-height:1.1;max-width:15em}
.hero-copy{margin-top:24px;font-size:28px;line-height:1.25}
.hero-llm{margin-top:16px;font-size:24px;color:var(--cyan)}
.versus{display:block;margin-top:24px;padding:14px 18px;max-width:18em;font-size:26px;line-height:1.15;
  color:var(--ink);text-decoration:none;background:var(--panel);
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--cyan),0 var(--px) 0 0 var(--cyan),
    calc(-1*var(--px)) 0 0 0 var(--cyan),var(--px) 0 0 0 var(--cyan)}
.versus small{display:block;margin-bottom:6px;font:10px/1.6 "Press Start 2P",monospace;color:var(--cyan)}
.versus span{color:var(--amber)}
.versus:hover,.versus:focus-visible{outline:0;background:var(--plum)}
.hero-side{display:grid;justify-items:center;gap:40px;align-self:start}
.hero-screen{margin:0;width:100%;max-width:440px}
.hero-screen video{cursor:pointer}
.hero-replay{position:absolute;top:12px;right:12px;z-index:2;padding:10px 12px;border:0;cursor:pointer;
  font:10px/1 "Press Start 2P",monospace;color:var(--night);background:var(--amber);
  box-shadow:0 3px 0 var(--rust)}
.hero-replay:hover,.hero-replay:focus-visible{background:var(--ink);outline:0}
.screen.hero-screen video{aspect-ratio:960/1200}
.hero-screen figcaption{margin:0;padding:10px 12px;background:var(--night);font-size:20px;line-height:1.3}
.hero-side .art{--f:clamp(180px,22vw,240px)}
.art{--f:clamp(240px,36vw,384px);justify-self:center;
  filter:drop-shadow(0 18px 0 rgba(0,0,0,.35))}

.btn{display:inline-block;margin-top:32px;padding:20px 24px;font-size:16px;line-height:1;
  text-decoration:none;color:var(--night);background:var(--amber);cursor:pointer;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--rust),
    calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--rust),
    0 calc(2*var(--px)) 0 0 var(--night),0 calc(3*var(--px)) 0 0 var(--rust)}
.btn:hover,.btn:focus-visible{background:var(--ink);outline:0;transform:translateY(var(--px))}
.btn[aria-disabled="true"]{background:var(--dim);cursor:not-allowed;transform:none}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sys{margin-top:22px;color:var(--dim);font-size:24px}
.sys code{color:var(--ink);font:inherit;user-select:all}

/* "Send me the Mac link": the email box on get.html and, on phones and tablets, on the homepage
   in place of the download button. A coarse pointer swaps them before any script runs. */
.getlink{margin-top:32px;max-width:26em}
.getlink label{display:block;font-size:24px;color:var(--dim)}
.getlink input[type="email"]{display:block;width:100%;margin-top:8px;padding:14px 16px;font:inherit;font-size:28px;
  color:var(--ink);background:var(--panel);border:var(--px) solid var(--dim);border-radius:0;outline:0}
.getlink input[type="email"]:focus{border-color:var(--amber)}
.getlink .btn{margin-top:20px;border:0}
.getlink-hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
.getlink-status{min-height:1.2em}
.getlink-status.ok{color:var(--cyan)}
@media (pointer:coarse){.title #getlink-swap{display:block}.title [data-mac-only]{display:none}}

/* Stage headings and pixel-cornered panels */
h2{font-size:clamp(16px,3.2vw,24px);line-height:1.5;color:var(--cyan);margin:0 0 28px;
  text-shadow:3px 3px 0 var(--plum)}
h2 small{display:block;font-size:11px;color:var(--dim);text-shadow:none;margin-bottom:10px}
section{padding:56px 0}
.panel{background:var(--panel);padding:26px 28px;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),
    calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink)}

.play{display:grid;grid-template-columns:var(--f) minmax(0,1fr);column-gap:36px;align-items:center}
.play .sprite{grid-row:1/span 2}
.sprite{width:var(--f);height:var(--f);image-rendering:pixelated;
  background:url(img/robot-sheet.png) 0 0/calc(8*var(--f)) calc(4*var(--f)) no-repeat;
  animation:sx .8s steps(8) infinite,sy 3.2s steps(4) infinite}
@keyframes sx{to{background-position-x:calc(-8*var(--f))}}
@keyframes sy{to{background-position-y:calc(-4*var(--f))}}
.sprite-mouse{
  background-image:url(img/robot-mouse-sheet.png);
  background-size:calc(4*var(--f)) calc(2*var(--f));
  animation:mouse-x .4s steps(4) infinite,mouse-y .8s steps(2) infinite}
@keyframes mouse-x{to{background-position-x:calc(-4*var(--f))}}
@keyframes mouse-y{to{background-position-y:calc(-2*var(--f))}}
.talk p{font-size:32px;line-height:1.15}
.talk .who{color:var(--amber)}
.talk .typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  width:0;animation:type 2.4s steps(31) .6s forwards}
@keyframes type{to{width:31ch}}
.talk .reply{opacity:0;animation:show 0s 3.4s forwards}
@keyframes show{to{opacity:1}}
.about{margin-top:28px}

/* Attract mode: the demo video sits above the CRT scanlines so text stays sharp. */
.demo{padding-top:8px}
.screen{position:relative;z-index:10;background:#000;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),
    calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink)}
.screen video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}

/* Select mode */
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.mode{display:flex;flex-direction:column;align-items:flex-start}
.mode h3{font-size:18px;line-height:1.4;color:var(--amber)}
.mode.private h3{color:var(--cyan)}
.price{font-size:30px;margin:18px 0 6px}
.price span{font-size:12px;color:var(--dim)}
.mode p{margin-top:14px}
.mode .btn,.mode .how{margin-top:auto}
.mode .how{font-size:30px;line-height:1.2;padding:20px 0 0}
.mode .gap{height:28px}
.tag{display:inline-block;margin-top:16px;padding:8px 10px;font-size:10px;line-height:1.5;
  color:var(--night);background:var(--amber)}
.deal{color:var(--amber)}

footer{padding:40px 0 72px;color:var(--dim);font-size:24px;display:flex;flex-wrap:wrap;gap:8px 28px}
footer a{color:var(--dim)}
/* Fat footer, shared by every page. The first column runs in two halves so no column towers. */
footer.fat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 32px;margin-top:72px;padding:48px 0 72px;border-top:var(--px) solid var(--panel)}
footer.fat .cols{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,31fr) minmax(0,29fr) minmax(0,19fr) minmax(0,9fr);gap:40px 32px;padding-bottom:40px;border-bottom:2px solid var(--panel)}
footer.fat .cols>div:first-child{columns:2;column-gap:24px}
footer.fat h3{column-span:all;font-size:10px;line-height:1.6;letter-spacing:1px;color:var(--amber);margin:0 0 18px}
footer.fat a{display:block;margin:0 0 12px;font-size:20px;line-height:1.15;text-decoration:none;break-inside:avoid}
footer.fat a:hover,footer.fat a:focus-visible{color:var(--ink)}
footer.fat .company{margin:28px 0 0;font-size:19px;line-height:1.35}
footer.fat p.company a{display:inline;margin:0;font-size:inherit}
footer.fat .copy{margin:28px 0 0;align-self:end;font-size:19px;line-height:1.35}
.legal footer.fat a{font-size:20px}
/* Article pages have a narrow column; their footer keeps the full site width. */
@media (min-width:841px){.legal footer.fat{position:relative;left:50%;transform:translateX(-50%);width:min(1000px,calc(100vw - 56px))}}
@media (max-width:1040px){footer.fat .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){footer.fat{grid-template-columns:minmax(0,1fr)}footer.fat .copy{margin-top:12px}}
@media (max-width:560px){footer.fat .cols>div:first-child{columns:1}}

@media (max-width:760px){
  :root{--f:128px}
  body{font-size:26px}
  .title,.modes,.play{grid-template-columns:minmax(0,1fr)}
  .play .sprite{grid-row:auto}
  .title{text-align:center;padding-top:8px}
  .tagline{margin-inline:auto}
  .versus{margin-inline:auto}
  .art{--f:clamp(200px,64vw,320px);margin:0 auto;grid-row:1}
  .hero-side{grid-row:1;gap:24px}
  .hero-side .art{display:none}
  .screen.hero-screen video{aspect-ratio:960/1200}
  .play{justify-items:center;row-gap:20px}
  .talk{width:100%}
  .screen{max-width:480px;margin:0 auto}
  .screen:not(.tall){max-width:720px}
  .screen video{aspect-ratio:16/9}
  .talk p{font-size:26px}
  .talk .typed{display:inline;white-space:normal;width:auto;animation:none}
  .talk .reply{opacity:1;animation:none}
}
@media (prefers-reduced-motion:reduce){
  .sky,.sky::after,.art,.blink,.sprite{animation:none}
  .talk .typed{width:auto;animation:none}
  .talk .reply{opacity:1;animation:none}
}

/* Pricing page */
.pricing h2{margin-top:8px}
.pricing .modes{margin-top:8px}
.fine{margin-top:28px;color:var(--dim)}

/* Legal pages */
.legal .wrap{max-width:800px;padding-bottom:72px}
.legal h1{font-size:clamp(18px,4vw,28px);line-height:1.4;text-shadow:3px 3px 0 var(--plum);margin:40px 0 8px}
.legal h2{font-size:13px;line-height:1.6;color:var(--cyan);margin:40px 0 12px;text-shadow:none}
.legal p,.legal li{margin:0 0 14px;font-size:26px;line-height:1.3}
.legal ul{padding-left:1.2em;margin:0 0 14px}
.legal .when{color:var(--dim)}
.legal table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:26px;line-height:1.3}
.legal th,.legal td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:2px solid var(--panel)}
.legal th{color:var(--amber);font-weight:400}
.legal code{font-family:inherit;color:var(--amber)}

/* Comparison articles (compare/) reuse the legal page layout. */
.article .kicker{margin:40px 0 0;font:11px/1.6 "Press Start 2P",monospace;color:var(--dim)}
.article h1{margin-top:12px}
.article .lede{font-size:30px;line-height:1.25;margin:18px 0 10px}
.article em{font-style:normal;color:var(--amber)}
.article b{font-weight:400;color:var(--amber)}
.article .btn{margin:8px 0 18px}
.shot{margin:28px 0;padding:0}
.shot img{display:block;width:100%;height:auto;position:relative;z-index:10;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),
    calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink)}
.shot figcaption{margin-top:14px;font-size:24px;line-height:1.3;color:var(--dim)}
.table-scroll{overflow-x:auto;margin:0 0 18px}
.table-scroll table{min-width:560px;margin:0}
.bars{margin:18px 0 10px;display:grid;gap:10px}
.bar{display:grid;grid-template-columns:7em minmax(0,1fr) 2.5em;align-items:center;gap:12px;font-size:24px}
.bar i{display:block;height:18px;width:calc(var(--v)*1%/.64);min-width:4px;background:var(--amber)}
.bar:first-child i{background:var(--cyan)}
.bar b{color:var(--ink)}
.shot img{max-width:760px;margin:0 auto}
.rounds{list-style:none;padding:0}
.rounds a[aria-current="page"]{color:var(--amber);text-decoration:none}
.rounds a[aria-current="page"]::after{content:"  ◀ you are here";color:var(--dim)}
.term{margin:0 0 18px;padding:18px 20px;overflow-x:auto;background:#000;color:var(--ink);font:22px/1.25 "VT323",ui-monospace,Menlo,monospace;position:relative;z-index:10;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--dim),0 var(--px) 0 0 var(--dim),calc(-1*var(--px)) 0 0 0 var(--dim),var(--px) 0 0 0 var(--dim)}
.term span{color:var(--amber)}

/* Task guides (guides/) reuse the article layout: a near-square app recording and a FAQ. */
.screen.tall{max-width:728px;margin:28px auto 14px}
.screen.tall video{aspect-ratio:1456/1400}
.answer{margin:18px 0;padding:16px 20px;background:var(--panel);border-left:var(--px) solid var(--amber)}
.legal .answer p:last-child{margin-bottom:0}
.faq h3{font:inherit;font-size:28px;line-height:1.25;color:var(--amber);margin:26px 0 6px}

/* Tutorials page (tutorials.html): YouTube click-to-play facades. Only the thumbnail
   (i.ytimg.com) loads until a visitor presses play; then a youtube-nocookie iframe
   replaces the card. The launch film is 16:9, the Shorts 9:16 (thumbnails cropped). */
.tutorials .kicker{margin:24px 0 0;font:11px/1.6 "Press Start 2P",monospace;color:var(--dim)}
.tutorials h1{margin-top:12px;font-size:clamp(28px,6vw,56px);line-height:1.2}
.tutorials .lede{margin-top:24px;max-width:32em;font-size:30px;line-height:1.2}
.tutorials .note{margin-top:14px;color:var(--dim);font-size:24px}
.tut-film{padding-top:48px}
.yt-box{aspect-ratio:16/9}
.yt-box.yt-tall{aspect-ratio:9/16}
.yt,.yt-player{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:#000}
.yt{overflow:hidden;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}
.yt img{display:block;width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;left:50%;top:50%;width:88px;height:64px;margin:-32px 0 0 -44px;
  display:grid;place-items:center;background:var(--amber);
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--rust),
    calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--rust),
    0 calc(2*var(--px)) 0 0 var(--night),0 calc(3*var(--px)) 0 0 var(--rust)}
.yt-play::after{content:"";width:24px;height:44px;margin-left:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11' shape-rendering='crispEdges' fill='%230b0c1a'%3E%3Crect x='0' y='0' width='1' height='11'/%3E%3Crect x='1' y='1' width='1' height='9'/%3E%3Crect x='2' y='2' width='1' height='7'/%3E%3Crect x='3' y='3' width='1' height='5'/%3E%3Crect x='4' y='4' width='1' height='3'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.yt:hover .yt-play,.yt:focus-visible .yt-play{background:var(--ink)}
.yt:focus-visible{outline:var(--px) solid var(--amber);outline-offset:calc(-2*var(--px))}
.tut-film .yt-play{transform:scale(1.5)}
.yt-time{position:absolute;right:10px;bottom:10px;padding:6px 8px;font:10px/1 "Press Start 2P",monospace;
  color:var(--ink);background:rgba(11,12,26,.85)}
.shorts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 36px}
.short{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.short .screen{width:100%}
.short h3{margin:24px 0 12px;font-size:12px;line-height:1.6;color:var(--amber);text-transform:uppercase}
.asks{list-style:none;margin:0;padding:0}
.asks li{margin:0 0 8px;font-size:24px;line-height:1.15;overflow-wrap:anywhere}
.asks .who{color:var(--amber)}
.asks .found{color:var(--cyan)}
.short .aside{margin-top:4px;font-size:22px;color:var(--dim)}
.short .more{margin-top:10px;font-size:24px}
.versus.channel{margin-top:56px;max-width:22em}
#try p{max-width:32em}
.demo-links{display:flex;flex-wrap:wrap;gap:6px 28px}
.demo-links a{white-space:nowrap}
@media (max-width:980px){.shorts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .shorts{grid-template-columns:minmax(0,1fr)}
  .short{width:100%;max-width:340px;margin:0 auto}
  .yt-box.yt-tall{max-width:none}
  .versus.channel{margin-inline:0}
  .tut-film .yt-play{transform:none}
}
/* Phones: keep the HUD links on one row under the 1UP line. */
@media (max-width:480px){.hud .links{gap:8px 14px;font-size:10px}}

/* FindBench hero and the vertical privacy video (2026-09-26). */
.bench-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;margin-top:24px}
.bench-grid .about{margin-top:0}
.bench-art img,.hero-img{display:block;width:100%;height:auto;image-rendering:pixelated;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink)}
.hero-img{margin:24px 0 8px}
.perks{margin:18px 0 0;padding-left:1.1em}
.perks li{margin:0 0 8px}
.screen.vertical{max-width:380px;margin:0 auto}
.screen.vertical video,.legal .screen.vertical video{aspect-ratio:1080/1920}
.legal .screen.vertical{margin:28px auto 14px}
.legal ol{padding-left:1.4em;margin:0 0 14px}
.bench tr.win td{color:var(--amber)}
@media (max-width:760px){
  .bench-grid{grid-template-columns:minmax(0,1fr)}
  .screen.vertical{max-width:320px}
  .screen.vertical video{aspect-ratio:1080/1920}
}

/* FindBench results board (findbench-board.js). Styled after the lab art: a dark instrument
   screen with brass corners, glowing bars (Shlex #c8821e, cloud #8070c8, validated on #14162c),
   and a wall of test drawers with pass/fail lights below. */
.fb{margin:24px 0 28px}
.fb-controls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.fb-toggle{font:10px/1.6 "Press Start 2P",monospace;color:var(--dim);background:var(--panel);border:2px solid #2a2d4a;padding:8px 12px;cursor:pointer}
.fb-toggle[aria-pressed="true"]{color:var(--night);background:var(--amber);border-color:var(--amber)}
.fb-toggle:focus-visible,.fb-row:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.fb-screen{position:relative;padding:22px 24px 16px;background:linear-gradient(#0e1124,#0a0c1b);
  border:6px solid #1c1f33;box-shadow:inset 0 0 0 2px #05060d,inset 0 0 40px rgba(0,0,0,.6),0 0 0 2px #2a2d4a}
.fb-screen::before,.fb-screen::after{content:"";position:absolute;width:22px;height:22px;border:5px solid #8a6a2e;pointer-events:none}
.fb-screen::before{top:-9px;left:-9px;border-right:0;border-bottom:0}
.fb-screen::after{bottom:-9px;right:-9px;border-left:0;border-top:0}
.fb-head{margin:0 0 14px}
.fb-head b{display:block;font:12px/1.6 "Press Start 2P",monospace;color:var(--ink)}
.fb-head span{font-size:22px;color:var(--dim)}
.fb-rows{display:grid;gap:10px}
.fb-row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) 140px;gap:4px 14px;align-items:center;width:100%;
  padding:6px 8px;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-left:3px solid transparent;cursor:pointer}
.fb-row[aria-pressed="true"]{background:rgba(255,255,255,.04);border-left-color:var(--dim)}
.fb-row.is-shlex[aria-pressed="true"]{border-left-color:#c8821e}
.fb-name{display:block;font-size:24px;line-height:1.05;color:var(--ink)}
.fb-meta{display:block;font-size:19px;line-height:1.1;color:var(--dim)}
.fb-track{position:relative;height:22px;background:linear-gradient(rgba(167,164,196,.18),rgba(167,164,196,.18)) 25% 0/1px 100% no-repeat,linear-gradient(rgba(167,164,196,.18),rgba(167,164,196,.18)) 50% 0/1px 100% no-repeat,linear-gradient(rgba(167,164,196,.18),rgba(167,164,196,.18)) 75% 0/1px 100% no-repeat,linear-gradient(rgba(167,164,196,.18),rgba(167,164,196,.18)) 100% 0/1px 100% no-repeat}
.fb-bar{position:absolute;left:0;top:3px;bottom:3px;background:#8070c8;border-radius:0 3px 3px 0;
  box-shadow:0 0 10px rgba(128,112,200,.45);min-width:2px}
.is-shlex .fb-bar{background:#c8821e;box-shadow:0 0 14px rgba(255,181,61,.55);border-top:2px solid #ffd27a}
.fb-val{font-size:26px;color:var(--ink);white-space:nowrap;text-align:right}
.fb-val small{font-size:19px;color:var(--dim)}
.fb-drawers{display:grid;grid-template-columns:repeat(auto-fill,minmax(17px,1fr));gap:4px;margin:18px 0 8px;padding:10px;
  background:#101326;border:4px solid #1c1f33}
.fb-drawers i{display:block;aspect-ratio:1;background:#1f2238;border-radius:2px;position:relative}
.fb-drawers i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%}
.fb-drawers i.p::after{background:#5cff8a;box-shadow:0 0 4px #5cff8a}
.fb-drawers i.f{background:#2a1c2a}
.fb-drawers i.f::after{background:transparent;border:2px solid #ff4d5e;box-sizing:border-box;box-shadow:0 0 4px #ff4d5e}
.fb-caption{font-size:22px;color:var(--dim);margin:0 0 6px}
.fb-caption b{font-weight:400;color:var(--ink)}
.fb-key{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:20px;color:var(--dim)}
.fb-key .k::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-1px;border-radius:2px}
.k-shlex::before{background:#c8821e}.k-cloud::before{background:#8070c8}
.k-pass::before{background:#5cff8a;border-radius:50%!important;width:10px!important;height:10px!important}
.k-fail::before{background:transparent!important;border:2px solid #ff4d5e;box-sizing:border-box;border-radius:50%!important;width:10px!important;height:10px!important}
.legal .fb p.fb-caption{font-size:22px}
@media (max-width:760px){
  .fb-screen{padding:16px 12px 12px}
  .fb-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "track val"}
  .fb-val small{display:block}
  .fb-label{grid-area:label}.fb-val{grid-area:val}.fb-track{grid-area:track}
  .fb-drawers{grid-template-columns:repeat(auto-fill,minmax(12px,1fr));gap:3px}
}
@media (forced-colors:active){.fb-bar{background:CanvasText}.is-shlex .fb-bar{background:Highlight}}

/* benchmark.html polish (2026-09-26): short-version box, example card, sub-heads. */
.legal .tldr{margin:28px 0 8px;padding:18px 22px 6px;background:var(--panel);border-left:var(--px) solid var(--cyan)}
.legal .tldr h2{margin:0 0 12px}
.legal .tldr li{margin-bottom:12px}
.legal .example{margin:0 0 18px;padding:16px 20px 4px;border:2px dashed #2a2d4a;background:rgba(20,22,44,.5)}
.legal .example p{margin-bottom:12px}
.legal .example .when{font-size:20px;margin-bottom:8px}
.legal h3.sub{font-size:11px;line-height:1.6;color:var(--amber);margin:28px 0 10px}
.bench-hero .bench-sub{margin:10px 0 0;font-size:26px;line-height:1.25;color:var(--ink)}

/* 2026-09-26 UX review fixes */
.fb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fb{position:relative}
.table-scroll:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.legal figure.shot{margin:24px 0 8px}
.legal figure.shot figcaption{margin-top:8px;font-size:22px;color:var(--dim)}
@media (max-width:400px){.demo-links a{white-space:normal}}

/* Speed stat tiles (landing #findbench and benchmark.html "Speed"). Colours as the board. */
.speed-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 10px;max-width:640px}
.speed-tiles .tile{background:var(--panel);padding:12px 16px;border-left:6px solid #8070c8}
.speed-tiles .tile.is-shlex{border-left-color:#c8821e}
.speed-tiles b{display:block;font:28px/1.2 "Press Start 2P",monospace;color:var(--ink);font-weight:400;margin-bottom:6px}
.speed-tiles .is-shlex b{color:var(--amber)}
.speed-tiles span{display:block;font-size:22px;line-height:1.15;color:var(--dim)}
.speed-note{margin:0 0 6px;font-size:24px;color:var(--dim);max-width:44em}
.speed-note small{display:block;font:10px/1.6 "Press Start 2P",monospace;color:var(--cyan);margin-bottom:4px}
@media (max-width:420px){.speed-tiles b{font-size:20px}}

/* Below-the-fold sections skip layout and paint until they are near the screen. */
#private,#demo,#play{content-visibility:auto;contain-intrinsic-size:auto 900px}
.legal code{overflow-wrap:anywhere;word-break:break-all}
@media (max-width:760px){.title h1{font-size:clamp(28px,8vw,56px)}}

.bench-hero .plurals{margin:0 0 18px;padding:14px 18px;background:var(--panel);border-left:var(--px) solid var(--cyan)}
.bench-hero .plurals h3{margin:0 0 8px;font:11px/1.8 "Press Start 2P",monospace;color:var(--amber);letter-spacing:0;text-transform:none}
.bench-hero .plurals p{margin:0}