/* Trenyx site chrome, copied from trenyx site/chrome.css (fonts served from /static/fonts/). Keep in step with the site. */
@font-face{font-family:'Geist';src:url('/static/fonts/geist-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/static/fonts/geist-mono-latin.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
/* Metric-matched fallback, so Geist causes no shift. Geist hhea: 1005 / -295 / 0 at 1000upm (measured). */
@font-face{font-family:'Geist Fallback';src:local('Arial');size-adjust:104.76%;ascent-override:95.94%;descent-override:28.16%;line-gap-override:0%}

:root{
  /* Grounds */
  --paper:#FAFAFA; --white:#FFFFFF; --soft:#E3EBF8; --night:#131313; --night-2:#191B1F;
  --soft-2:#EEF3FB;     /* the M30 row highlight, 1.11 on white. Caught cells on it 3.01: on --soft they are 2.80 */
  /* Ink */
  --ink:#161616;        /* text on light, and MISSED */
  --text-2:#5E6064;     /* secondary on paper 6.04, on soft 5.25 */
  --text-night:#9CA0A6; /* secondary on night 7.07. A bug in flight, not yet decided: 6.89 on ink */
  /* Lines: always full opacity, never faded */
  --rule:#8A8C90;       /* section rules on paper, 3.23 */
  --rule-night:#5C5E62; /* section rules on night, 2.86 */
  --line:#C4C6CA;       /* frames, corner squares, 1.64 */
  --line-night:#303236; /* frames on night, 1.45 */
  /* Blues */
  --accent:#213BE3;       /* the brand: logo, links, primary button, ultramarine beats. White on it 7.50, on paper 7.19 */
  --accent-hover:#1A30C0; /* white on it 9.43, 1.26 from --accent */
  --signal:#2E8BFF;       /* CAUGHT, as filled area. Rare, and never a button. 3.22 on paper, 5.39 against ink. Text on it is ink, 5.39: white is 3.36 */
  --lit:#2E8BFF;          /* caught on the disc, accents on night. 5.53 on night. Never on --accent, 2.23 */
  --violet:#95BFFD;       /* pale marks on --accent 3.98, on --accent-hover 5.00, and 1px rings on night 9.86 */
  --deep:#102191;         /* quiet tiles on ultramarine, decorative. 1.70 from --accent, 1.42 from ink */
  /* Tiles */
  --tile-pale:#CCDAF2;  /* a tile or cell before its bug, 1.35 on paper: as calm as a passing build */
  --tile-gray:#5C5E62;  /* the rest of the disc */

  /* Names inner-page scripts and inline attributes already use. Keep them. */
  --faint:var(--text-2); --ink-3:var(--text-2); --text:var(--ink); --band:var(--soft);

  /* Type */
  --font:'Geist','Geist Fallback',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --w-reg:400; --w-med:500; --w-bold:600;   /* 600 only for <b> in long text. Headlines are always 500 */

  --fs-final:clamp(56px,10.6vw,168px);          /* final H2, the largest type on the page */
  --fs-stat:clamp(64px,8.8vw,140px);            /* proof numbers */
  --fs-h1:clamp(44px,min(5.7vw,10.4svh),92px);  /* hero */
  --fs-score:clamp(40px,5vw,72px);              /* "4 / 16" */
  --fs-h2:clamp(34px,4.2vw,60px);
  --fs-price:clamp(32px,2.8vw,40px);            /* "Free during early access" */
  --fs-h3:clamp(22px,1.7vw,24px);
  --fs-lead:clamp(18px,1.4vw,20px);
  --fs-body:16px; --fs-read:17px; --fs-small:14px; --fs-mono:12.5px;

  --lh-final:.94; --lh-stat:1; --lh-h1:1; --lh-h2:1.04; --lh-h3:1.2; --lh-lead:1.45; --lh-body:1.55; --lh-read:1.65; --lh-small:1.4;
  --ls-final:-.05em; --ls-stat:-.05em; --ls-h1:-.045em; --ls-h2:-.04em; --ls-h3:-.025em; --ls-lead:-.015em; --ls-body:-.01em; --ls-small:-.005em; --ls-mono:-.02em;

  /* Space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:192px;

  /* Layout */
  --frame:1480px; --gutter:24px; --margin:32px; --narrow:720px; --header:64px;
  --sec-y:clamp(72px,10vw,160px);

  /* Shape */
  --r-1:2px; --r-2:4px; --r-3:6px;     /* cells; windows and cards; buttons */
  --hair:1px solid var(--line); --strong:1px solid var(--rule); --hair-night:1px solid var(--line-night);
  --ring:0 0 0 1px var(--line); --ring-night:0 0 0 1px var(--line-night);  /* the only shadows. Zero blur */
  --focus:0 0 0 2px var(--paper),0 0 0 4px var(--accent);

  /* Motion */
  --e-arrive:cubic-bezier(.22,1,.36,1);  /* things arriving */
  --e-camera:cubic-bezier(.76,0,.24,1);  /* the camera, things that slam */
  --e-tool:cubic-bezier(.32,.72,0,1);    /* interface, surfaces */
  --e-snap:cubic-bezier(.001,0,0,1);     /* sharp start that settles */
  --e-press:cubic-bezier(.25,.46,.45,.94);
  --d-1:120ms; --d-2:180ms; --d-3:240ms; --d-4:320ms; --d-5:480ms; --d-6:900ms;
  /* Ambient periods, chosen to share no beat: 2.3s 4.3s 9.1s 12.1s. Mirrored in JS as TX.P */

  /* Cells */
  --cell-gap:8px;
  --sq:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect x='.5' y='.5' width='13' height='13' rx='2.5' fill='%23FAFAFA' stroke='%23C4C6CA'/%3E%3C/svg%3E");
  --sq-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect x='.5' y='.5' width='13' height='13' rx='2.5' fill='%23131313' stroke='%23303236'/%3E%3C/svg%3E");
  --pat-lined:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' preserveAspectRatio='none'%3E%3Cpath fill='%23FAFAFA' d='M0 3h16v2H0zM0 7h16v2H0zM0 11h16v2H0z'/%3E%3C/svg%3E");
  --pat-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='8'%3E%3Crect width='1' height='8' fill='%238A8C90'/%3E%3C/svg%3E");
  --pat-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='1'%3E%3Crect width='16' height='1' fill='%235C5E62'/%3E%3C/svg%3E");
  --pat-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='.5' y='4.5' width='23' height='23' fill='none' stroke='%23C4C6CA'/%3E%3C/svg%3E");
  --pat-deep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Crect width='40' height='40' fill='%23102191'/%3E%3C/svg%3E");

  --z-stage:1; --z-over:2; --z-header:50;
}
@media (max-width:767px){:root{--margin:16px;--header:56px;--cell-gap:6px}}

/* Element defaults. In a layer, so style.css and inline blocks win whatever the load order. */
@layer base{
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--w-reg) var(--fs-body)/var(--lh-body) var(--font);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--w-med)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4,h5,h6{font-size:var(--fs-body);line-height:var(--lh-h3)}
p{margin:0}
p+p{margin-top:var(--s-4)}
ul,ol{margin:0;padding-left:1.25em}
a{color:inherit}
b,strong{font-weight:var(--w-bold)}
img{max-width:100%;height:auto}
table{border-collapse:collapse}
code,pre{font-family:var(--mono);letter-spacing:var(--ls-mono)}
pre{margin:0;overflow-x:auto}
hr{margin-block:var(--s-6);border:0;border-top:var(--hair)}
button,input,textarea,select{font:inherit;letter-spacing:inherit}
input,textarea{width:100%;font:16px/1.4 var(--font);padding:12px 14px;background:var(--white);border:var(--strong);border-radius:var(--r-2);color:var(--ink)}
input:focus,textarea:focus{box-shadow:var(--focus);border-color:var(--accent)}
::placeholder{color:var(--text-2)}
[aria-invalid="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
}

html{overflow-x:clip;scroll-padding-top:calc(var(--header) + var(--s-5))}
::selection{background:var(--accent);color:var(--white)}
body{padding-top:var(--header)}
.home{padding-top:0}

/* Layout */
.wrap,.tx-wrap{width:min(100% - 2*var(--margin),var(--frame));margin-inline:auto}
.sec{padding-block:var(--sec-y)}
.rule-t,.rule-b{position:relative}
.rule-t::before,.rule-b::before{content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);border-top:var(--strong)}
.rule-t::before{top:0}
.rule-b::before{bottom:0}
[data-ground="night"] .rule-t::before,[data-ground="night"] .rule-b::before{border-top-color:var(--rule-night)}
.cs{--cs:var(--sq);position:absolute;inset:-7px;pointer-events:none;background:var(--cs) 0 0 no-repeat,var(--cs) 100% 0 no-repeat,var(--cs) 0 100% no-repeat,var(--cs) 100% 100% no-repeat}
[data-ground="night"] .cs{--cs:var(--sq-night)}
.win{position:relative;aspect-ratio:400/260;background:var(--paper);color:var(--ink);border-radius:var(--r-2)}

/* Labels and links */
.eyebrow{display:block;margin-bottom:var(--s-3);font-size:16px;font-weight:var(--w-med);color:var(--accent)}
[data-ground="night"] .eyebrow{color:var(--lit)}
.sr,.tx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--s-3);top:var(--s-3);z-index:calc(var(--z-header) + 1);padding:10px 14px;border-radius:var(--r-3);background:var(--accent);color:var(--white);font-size:14px;font-weight:var(--w-med);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}
.link{position:relative;display:inline-block;color:var(--accent);text-decoration:none}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left}
[data-ground="night"] .link{color:var(--lit)}
/* :where keeps this at the plain .prose a weight, which about.html's .about-links li a has to beat. */
.prose a:where(:not(.btn,.more)),.qa .link{display:inline;color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.qa .link::after{content:none}
.form-status.is-error{padding-left:12px;border-left:2px solid var(--ink);color:var(--ink);font-weight:var(--w-med)}

/* Buttons */
.btn,.tx-start{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding-inline:20px;border-radius:var(--r-3);font:500 16px/1 var(--font);letter-spacing:var(--ls-body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:scale var(--d-2) var(--e-press),translate var(--d-2) var(--e-press)}
.hero-actions .btn{height:52px;padding-inline:24px}
.tx-start{height:36px;padding-inline:14px;font-size:14px}
.btn-primary,.btn.primary,.tx-start{background:var(--accent);color:var(--white)}
.btn-ghost,.btn.ghost{background:none;color:var(--ink);border-color:var(--ink)}
.btn-invert{background:var(--white);color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:default}
.btn::before,.tx-start::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--violet);transform:scaleX(0);transform-origin:left}
.btn-ghost::before,.btn.ghost::before,.btn-invert::before{background:var(--accent)}
.btn::after,.tx-start::after{content:"";position:absolute;inset:-1px;border:1px solid currentColor;border-radius:inherit;opacity:0;transition:opacity 600ms var(--e-press) 100ms}
.arr{display:inline-block;transition:transform var(--d-2) var(--e-tool)}
[data-ground="night"] .btn-primary,.tx-nav[data-on="night"] .tx-start,.tx-nav[data-on="purple"] .tx-start{box-shadow:inset 0 0 0 1px var(--violet)}

@media (hover:hover) and (pointer:fine){
.btn-primary:hover,.btn.primary:hover,.tx-start:hover{background:var(--accent-hover)}
.tx-foot li a:hover,.tx-links a:hover,.tx-signin:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
}
@media (prefers-reduced-motion:no-preference){
.btn:active,.tx-start:active{scale:.98;translate:0 1px}
.btn:active::after,.tx-start:active::after{opacity:1;transition:none}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.btn:hover::before,.tx-start:hover::before{transform:none;transition:transform 320ms steps(16,end)}
a:hover .arr{transform:translateX(3px)}
.link::after{transition:transform var(--d-3) var(--e-tool)}
.link:hover::after{transform:scaleX(0);transform-origin:right}
}

/* Header. Paper by default, so it stays paper with no JS; chrome.js clears the fill at the top of the page. */
.tx-nav{position:fixed;inset:0 0 auto 0;height:var(--header);z-index:var(--z-header);background:var(--paper);color:var(--ink)}
.tx-nav.is-top{background:none}
.tx-nav.is-scrolled{border-bottom:var(--strong)}
.tx-nav[data-on="night"]{background:var(--night);border-bottom-color:var(--rule-night);color:var(--white)}
.tx-nav[data-on="purple"]{background:var(--accent);border-bottom-color:var(--deep);color:var(--white)}
.tx-nav-in{display:flex;align-items:center;gap:var(--s-5);height:100%}
.tx-brand{display:inline-flex;align-items:center;gap:var(--s-2);margin-inline-end:auto;color:inherit;font-size:18px;font-weight:var(--w-med);letter-spacing:var(--ls-h3);text-decoration:none}
.tx-mark{display:block;width:24px;height:24px}
.tx-bar{fill:var(--accent)}
.tx-nav[data-on="night"] .tx-bar,.tx-foot .tx-bar{fill:var(--lit)}
.tx-nav[data-on="purple"] .tx-bar{fill:var(--violet)}
.tx-brand .tx-bar{transition:transform var(--d-2) var(--e-tool)}
.tx-brand.is-lift .tx-bar{transform:translateY(-1px)}
.tx-links{display:flex;gap:var(--s-5)}
.tx-links a,.tx-signin{display:inline-flex;align-items:center;min-height:36px;color:inherit;font-size:14px;font-weight:var(--w-med);text-decoration:none}
.tx-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tx-menu{display:none}
.tx-menu summary{display:grid;place-items:center;width:44px;height:44px;margin-inline-end:-8px;list-style:none;cursor:pointer}
.tx-menu summary::-webkit-details-marker{display:none}
.tx-bars{position:relative;display:block;width:18px;height:10px}
.tx-bars::before,.tx-bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform var(--d-2) var(--e-tool)}
.tx-bars::before{top:0}
.tx-bars::after{bottom:0}
.tx-menu[open] .tx-bars::before{transform:translateY(4px) rotate(45deg)}
.tx-menu[open] .tx-bars::after{transform:translateY(-4px) rotate(-45deg)}
.tx-panel{position:fixed;inset:var(--header) 0 auto 0;background:var(--white);border-bottom:var(--strong)}
.tx-panel a{display:flex;align-items:center;height:48px;padding-inline:var(--margin);color:var(--ink);text-decoration:none}
.tx-panel a+a{border-top:var(--hair)}
.tx-run{position:absolute;left:0;right:0;bottom:0;display:flex;gap:2px;height:2px;pointer-events:none}
.tx-run b{flex:1}
.tx-run b.on{background:var(--accent)}
.tx-nav[data-on="night"] .tx-run b.on{background:var(--lit)}
.tx-nav[data-on="purple"] .tx-run b.on{background:var(--violet)}
@media (max-width:899px){.tx-links,.tx-signin{display:none}.tx-menu{display:block}}

/* Footer */
.tx-foot{margin-top:var(--s-8);padding-top:var(--s-8);background:var(--night);color:var(--white)}
.home .tx-foot{margin-top:0}
.tx-foot-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6) var(--gutter)}
.tx-tag{margin-top:var(--s-3);color:var(--text-night)}
.tx-foot h2{margin:0 0 var(--s-3);font-size:14px;line-height:var(--lh-small);letter-spacing:var(--ls-small);color:var(--text-night)}
.tx-foot ul{margin:0;padding:0;list-style:none}
.tx-foot li a{display:inline-flex;align-items:center;min-height:32px;color:var(--white);font-size:15px;text-decoration:none}
@media (max-width:767px){.tx-foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}.tx-foot-brand{grid-column:1 / -1}.tx-foot li a{min-height:40px}}

.tx-archived{background:var(--soft);font-size:14px;line-height:var(--lh-small)}
.tx-archived .tx-wrap{padding-block:10px}
.tx-archived b{font-weight:var(--w-med)}
.tx-archived a{color:var(--accent)}

/* Cells */
.cells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cell-gap);width:100%;position:relative}
.cell{display:block;position:relative;aspect-ratio:1;background-color:var(--ink);background-size:100% 100%;border-radius:var(--r-1)}
.cell[data-v="caught"]{background-color:var(--signal)}
.cell[data-v="unchecked"]{background-image:var(--pat-lined)}
.cell[data-v="partly"]::before{content:"";position:absolute;inset:0 0 50% 0;background:var(--tile-pale);border-radius:var(--r-1) var(--r-1) 0 0}
.cell[data-v="caught"]::before,.cell[data-v="caught"]::after{content:"";position:absolute;top:12%;width:12%;height:12%;background:var(--white)}
.cell[data-v="caught"]::before{left:12%}
.cell[data-v="caught"]::after{left:30%}
.cells--s{--cell-gap:4px}
.cells--s .cell[data-v="caught"]::before,.cells--s .cell[data-v="caught"]::after,
.legend .cell[data-v="caught"]::before,.legend .cell[data-v="caught"]::after,
.gh-cells .cell[data-v="caught"]::before,.gh-cells .cell[data-v="caught"]::after{display:none}
/* Run states. Shared: the hero (M10) and How it works (M24) both use them */
.cells.is-numbered .cell{order:0 !important}
.cells.is-run .cell:not(.is-on){background-color:var(--tile-pale);background-image:none}
.cells.is-run .cell:not(.is-on)::before,.cells.is-run .cell:not(.is-on)::after{display:none}
.cells.is-run .cell.is-plant:not(.is-on){box-shadow:inset 0 0 0 2px var(--ink)}
.cells.is-run .cell[data-v="caught"].is-on:not(.is-p1)::before{opacity:0}
.cells.is-run .cell[data-v="caught"].is-on:not(.is-p2)::after{opacity:0}
.cell-tag,.cell-cursor,.leader{display:none}
.motion .cell-tag,.motion .cell-cursor,.motion .leader{display:block;position:absolute;pointer-events:none}

/* Reveals and rolling digits */
.tx-pre{opacity:0;transform:translateY(var(--rise,16px))}
.tx-pre.tx-in{opacity:1;transform:none;transition:opacity var(--d-5) var(--e-arrive),transform var(--d-5) var(--e-arrive)}
.tx-bar0{transform:scaleX(0)}
.roll-d{display:inline-block;height:1em;line-height:1;overflow-y:clip;vertical-align:top}
.roll-c{display:block;transition:transform var(--d-6) var(--e-arrive)}
.roll-c>span{display:block;height:1em}
.roll--box{display:inline-block;line-height:1}

/* Focus, page cross-fade, reduced motion, print */
:focus-visible{outline:2px solid transparent;box-shadow:var(--focus);transition:box-shadow var(--d-1) var(--e-tool)}
.tx-nav[data-on] .tx-start:focus-visible,[data-ground="night"] .btn-primary:focus-visible{box-shadow:var(--focus)}
.final{--focus:0 0 0 2px var(--accent),0 0 0 4px var(--white)}
.btn:focus-visible,.tx-start:focus-visible{transition:box-shadow var(--d-1) var(--e-tool),scale var(--d-2) var(--e-press),translate var(--d-2) var(--e-press)}
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media print{.tx-nav{position:static}body{padding-top:0}.tx-pre{opacity:1;transform:none}}