:root { --canvas:#080d13; --surface:#101822; --surface-2:#15212d; --ink:#f4f7f1; --muted:#aab5bd; --faint:#75828e; --line:rgba(231,242,235,.13); --signal:#c7f36b; --signal-deep:#86b830; --danger:#ef7f82; --radius:24px; --mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--canvas); } body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 88% -10%, rgba(73,117,91,.22), transparent 29rem), var(--canvas); font:16px/1.6 "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; } body::before { position:fixed; z-index:-1; inset:0; pointer-events:none; content:""; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size:5px 5px; } a { color:inherit; text-underline-offset:4px; } button { font:inherit; cursor:pointer; } ::selection { color:#0b1115; background:var(--signal); }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:9px 12px; color:#071011; font-weight:800; text-decoration:none; transform:translateY(-160%); border-radius:7px; background:var(--signal); transition:transform .18s ease; }.skip-link:focus { transform:translateY(0); }
.shell { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }.site-header { width:min(1240px, calc(100% - 48px)); min-height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; }.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:13px; font-weight:800; letter-spacing:.13em; text-decoration:none; }.brand span { display:grid; place-items:center; width:28px; height:28px; color:#071011; font-family:var(--mono); font-size:16px; font-weight:900; border-radius:5px; background:var(--signal); box-shadow:0 0 20px rgba(199,243,107,.18); } nav { display:flex; align-items:center; gap:28px; } nav a { position:relative; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; transition:color .2s ease; } nav a::after { position:absolute; right:0; bottom:-9px; left:0; height:1px; content:""; opacity:0; background:var(--signal); transform:scaleX(.3); transition:opacity .2s ease, transform .2s ease; } nav a:hover,nav a:focus-visible { color:var(--ink); } nav a:hover::after,nav a:focus-visible::after { opacity:1; transform:scaleX(1); }
.hero { position:relative; padding:68px 0 82px; overflow:clip; isolation:isolate; }.hero::before { position:absolute; z-index:-1; top:-64px; right:-176px; width:690px; height:560px; pointer-events:none; content:""; opacity:.25; background:linear-gradient(90deg, var(--canvas) 0%, transparent 42%), url("/assets/images/reaction-time-og.png") center/cover; filter:saturate(.75) contrast(1.1); mask-image:linear-gradient(to bottom, #000 38%, transparent 98%); }.hero-intro { display:flex; align-items:end; justify-content:space-between; gap:54px; margin-bottom:44px; }.eyebrow,.dialog-label { color:var(--signal); font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.16em; }.hero h1 { max-width:760px; margin:10px 0 13px; font-family:"Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", sans-serif; font-size:clamp(48px, 7.6vw, 88px); font-stretch:condensed; font-weight:900; line-height:.91; letter-spacing:-.075em; text-wrap:balance; }.lede { max-width:530px; margin:0; color:var(--muted); font-size:18px; text-wrap:pretty; }.hero-note { display:flex; width:240px; gap:13px; margin:0 0 4px; padding:12px 0 12px 15px; border-left:1px solid var(--signal); }.hero-note span { color:var(--signal); font-family:var(--mono); font-size:11px; font-weight:800; }.hero-note p { margin:0; color:#c0c8c8; font-size:12px; line-height:1.45; }
.test-layout { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(294px,.8fr); gap:18px; align-items:stretch; }.test-panel,.history-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg, rgba(27,39,51,.92), rgba(12,19,27,.95)); box-shadow:0 28px 75px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045); }.test-panel { padding:16px; }.test-panel::before { position:absolute; top:0; right:0; width:180px; height:180px; content:""; opacity:.55; background:radial-gradient(circle, rgba(199,243,107,.12), transparent 66%); }
.test-surface { position:relative; width:100%; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:38px; overflow:hidden; color:var(--ink); text-align:center; border:1px solid rgba(255,255,255,.07); border-radius:calc(var(--radius) - 8px); background:radial-gradient(circle at 50% 54%, #172232 0%, #0b111a 62%); transition:background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease; }.test-surface::before,.test-surface::after { position:absolute; width:min(39vw,360px); aspect-ratio:1; pointer-events:none; content:""; border:1px solid rgba(199,243,107,.1); border-radius:50%; }.test-surface::before { transform:scale(1.15); }.test-surface::after { transform:scale(.76); }.test-surface:hover { border-color:rgba(199,243,107,.36); transform:translateY(-2px); }.test-surface:active { transform:translateY(0) scale(.995); }.test-surface:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }.test-surface .surface-kicker,.test-surface strong,.test-surface > span:last-child { position:relative; z-index:1; }.test-surface .surface-kicker { color:#aebbb9; font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.18em; }.test-surface strong { max-width:590px; font-family:"Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", sans-serif; font-size:clamp(34px,4.6vw,56px); font-weight:900; line-height:.91; letter-spacing:-.065em; }.test-surface > span:last-child { max-width:270px; color:#b4bec4; font-size:14px; }.test-surface.state-ready { background:radial-gradient(circle at 50% 54%, #344454, #17212e 62%); }.test-surface.state-go { color:#071011; border-color:var(--signal); background:radial-gradient(circle, #ddff9b 0%, var(--signal) 55%, #92c643 100%); box-shadow:inset 0 0 70px rgba(255,255,255,.55), 0 0 38px rgba(199,243,107,.2); }.test-surface.state-go .surface-kicker,.test-surface.state-go > span:last-child { color:#1d321d; }.test-surface.state-go::before,.test-surface.state-go::after { border-color:rgba(7,16,17,.15); }.test-surface.state-result { background:radial-gradient(circle at 50% 54%, #223344 0%, #0d1520 65%); }
.attempt-progress { margin:20px 3px 17px; }.progress-copy { display:flex; justify-content:space-between; margin-bottom:8px; color:#c2cacd; font-family:var(--mono); font-size:11px; font-weight:700; }.progress-track { height:3px; overflow:hidden; background:rgba(255,255,255,.12); }.progress-track span { display:block; width:0; height:100%; background:var(--signal); box-shadow:0 0 10px var(--signal); transition:width .25s ease; }.live-stats,.summary-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }.live-stats div,.summary-stats div { min-width:0; padding:13px 11px 9px; border-right:1px solid var(--line); }.live-stats div:last-child,.summary-stats div:last-child { border-right:0; }.live-stats span,.summary-stats span { display:block; color:var(--faint); font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.live-stats strong,.summary-stats strong { display:block; overflow:hidden; margin-top:3px; color:var(--ink); font-family:var(--mono); font-size:16px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }.result-note { min-height:23px; margin:14px 3px 10px; color:#b4bfc3; font-size:13px; }.action-row,.dialog-actions { display:flex; flex-wrap:wrap; gap:9px; }
.button,.history-actions button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 14px; color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; border:1px solid var(--line); border-radius:6px; background:transparent; transition:transform .18s ease, background .18s ease, border-color .18s ease; }.button:hover,.history-actions button:hover { border-color:rgba(199,243,107,.58); background:rgba(199,243,107,.07); transform:translateY(-1px); }.button:active,.history-actions button:active { transform:translateY(0) scale(.98); }.button:focus-visible,.history-actions button:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }.button-primary { color:#09100f; border-color:var(--signal); background:var(--signal); }.button-primary:hover { background:#dcffa1; }.button-secondary { background:rgba(255,255,255,.055); }.button-ghost { color:#b8c2c8; }.button:disabled { opacity:.38; cursor:not-allowed; transform:none; }
.history-card { display:flex; flex-direction:column; padding:24px 20px 17px; background:linear-gradient(150deg, rgba(23,34,46,.88), rgba(12,18,26,.95)); }.history-card::after { position:absolute; top:0; right:0; width:70px; height:70px; content:""; border-top:1px solid var(--signal); border-right:1px solid var(--signal); opacity:.65; }.card-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; margin:0 0 22px; }.card-heading h2 { margin:3px 0 0; font-family:"Arial Narrow", "Avenir Next Condensed", sans-serif; font-size:25px; line-height:1; letter-spacing:-.055em; }.record-count { padding-top:3px; color:var(--signal); font-family:var(--mono); font-size:10px; white-space:nowrap; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th { padding:0 7px 10px; color:var(--faint); font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.09em; text-align:left; text-transform:uppercase; } td { padding:12px 7px; color:#cbd2d3; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; border-top:1px solid rgba(231,242,235,.08); } tbody tr { transition:background .16s ease; } tbody tr:hover { background:rgba(255,255,255,.035); } tbody tr.best-row td:nth-child(2) { color:var(--signal); font-weight:850; } .empty-row td { padding:30px 8px; color:var(--faint); font-family:inherit; text-align:center; }.history-actions { display:flex; gap:16px; margin-top:auto; padding-top:15px; }.history-actions button { min-height:auto; padding:0; color:#b6c3c5; border:0; }.history-actions button:last-child { color:#e69697; }
.ad-slot { display:flex; align-items:center; justify-content:space-between; min-height:66px; margin-bottom:86px; padding:0 18px; color:var(--faint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.ad-slot::before { width:38px; height:1px; content:""; background:var(--signal); }.ad-slot span { order:2; font-family:var(--mono); font-size:9px; font-weight:800; letter-spacing:.14em; }.ad-slot p { margin:0; font-size:12px; }.ad-banner { min-height:76px; }.ad-interstitial { min-height:48px; margin:15px 0; padding:0 10px; border-top-color:rgba(255,255,255,.1); border-bottom-color:rgba(255,255,255,.1); }
.guide,.learn,.faq { padding:0 0 94px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }.section-heading h2,.learn h2,.faq h2 { max-width:760px; margin:8px 0 0; font-family:"Arial Narrow", "Avenir Next Condensed", sans-serif; font-size:clamp(34px,4.8vw,58px); font-weight:900; line-height:.94; letter-spacing:-.065em; text-wrap:balance; }.section-intro { max-width:760px; margin:24px 0 30px; color:var(--muted); font-size:17px; }.benchmark-table { position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.benchmark-table::before { position:absolute; inset:0 auto 0 0; width:3px; content:""; background:linear-gradient(var(--signal), transparent 80%); }.benchmark-table th { padding:15px 18px 12px; }.benchmark-table td { padding:15px 18px; }.benchmark-table tr:first-child td { border-top:0; }.benchmark-table td:first-child { color:#eef3e9; }.benchmark-table td:nth-child(2) { font-family:inherit; font-weight:750; }.benchmark-table tbody tr:nth-child(-n+3) td:nth-child(2) { color:var(--signal); }
.learn { display:grid; grid-template-columns:.83fr 1fr; gap:86px; padding-top:5px; }.learn-copy { max-width:640px; color:var(--muted); font-size:17px; }.learn-copy p { margin:0 0 19px; }.learn-copy a,.article-copy a { color:var(--signal); font-weight:700; }.faq { padding-bottom:100px; }.faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 38px; margin-top:30px; border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); }.faq summary { padding:20px 32px 20px 0; color:#e3e9e4; font-size:15px; font-weight:700; cursor:pointer; list-style:none; position:relative; }.faq summary::-webkit-details-marker { display:none; }.faq summary::after { position:absolute; right:3px; top:14px; color:var(--signal); font-family:var(--mono); font-size:24px; font-weight:400; content:'+'; }.faq details[open] summary::after { content:'–'; }.faq details p { margin:0; padding:0 0 20px; color:var(--muted); font-size:14px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:30px 0 38px; color:var(--faint); font-size:12px; border-top:1px solid var(--line); }.site-footer p { margin:0; }.site-footer div { display:flex; gap:18px; }.site-footer a { text-decoration:none; }.site-footer div a:hover { color:var(--signal); }
dialog { width:min(580px, calc(100% - 32px)); padding:31px; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:15px; background:#121c27; box-shadow:0 28px 100px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.05); } dialog::backdrop { background:rgba(2,6,10,.77); backdrop-filter:blur(7px); }.round-dialog h2,.share-dialog h2 { margin:9px 0; font-family:"Arial Narrow", "Avenir Next Condensed", sans-serif; font-size:42px; font-weight:900; line-height:.95; letter-spacing:-.065em; }.round-dialog > p { color:var(--muted); }.summary-stats { grid-template-columns:repeat(3,1fr); margin:23px 0 14px; border:1px solid var(--line); }.world-note { padding:11px 13px; color:#c8d9c0; border-left:2px solid var(--signal); background:rgba(199,243,107,.07); }.dialog-close { position:absolute; top:14px; right:17px; width:34px; height:34px; color:var(--muted); font-size:28px; line-height:1; border:0; background:none; }.share-dialog canvas { width:100%; height:auto; margin:16px 0; border:1px solid var(--line); border-radius:7px; background:var(--canvas); }.copy-status { min-height:18px; margin:12px 0 0; color:var(--signal); font-size:13px; }
.article { max-width:880px; padding:85px 0 100px; }.article h1 { max-width:770px; margin:10px 0 15px; font-family:"Arial Narrow", "Avenir Next Condensed", sans-serif; font-size:clamp(50px,6.5vw,78px); font-weight:900; line-height:.94; letter-spacing:-.07em; text-wrap:balance; }.article .benchmark-table { margin:42px 0 0; }.article .ad-slot { margin:46px 0; }.article-copy { max-width:720px; color:var(--muted); font-size:17px; }.article-copy h2 { margin:48px 0 12px; color:var(--ink); font-family:"Arial Narrow", "Avenir Next Condensed", sans-serif; font-size:32px; line-height:1.05; letter-spacing:-.045em; }.article-copy p { margin:0 0 19px; }.article-cta { display:flex; align-items:center; justify-content:space-between; max-width:560px; margin-top:47px; padding:20px 22px; color:#071011; font-size:17px; font-weight:850; text-decoration:none; border-radius:7px; background:var(--signal); transition:transform .18s ease, background .18s ease; }.article-cta:hover { background:#dcffa1; transform:translateY(-2px); }.article-cta span { font-family:var(--mono); font-size:24px; }.not-found { min-height:calc(100vh - 172px); padding-top:clamp(90px,18vh,190px); }.not-found h1 { max-width:740px; margin:9px 0 14px; font-family:"Arial Narrow", "Avenir Next Condensed", sans-serif; font-size:clamp(54px,8vw,92px); font-weight:900; line-height:.9; letter-spacing:-.075em; }.not-found .article-cta { max-width:460px; }
@media (max-width:800px) { .shell,.site-header { width:min(100% - 30px, 1180px); }.site-header { min-height:68px; } nav { gap:16px; } nav a:nth-child(2),nav a:nth-child(3) { display:none; }.hero { padding:44px 0 60px; }.hero::before { top:-90px; right:-270px; opacity:.16; }.hero-intro { display:block; margin-bottom:30px; }.hero h1 { font-size:clamp(51px,15vw,75px); }.hero-note { width:auto; max-width:350px; margin-top:28px; }.test-layout,.learn { grid-template-columns:1fr; }.test-surface { min-height:310px; }.history-card { min-height:310px; }.live-stats { grid-template-columns:repeat(2,1fr); }.live-stats div:nth-child(2) { border-right:0; }.live-stats div:nth-child(-n+2) { border-bottom:1px solid var(--line); }.ad-slot { margin-bottom:60px; }.guide,.learn { padding-bottom:62px; }.faq { padding-bottom:68px; }.faq-list { grid-template-columns:1fr; }.site-footer { flex-wrap:wrap; }.site-footer p { order:3; width:100%; }.site-footer div { gap:13px; }.round-dialog h2,.share-dialog h2 { font-size:35px; }.summary-stats { grid-template-columns:1fr; }.summary-stats div { border-right:0; border-bottom:1px solid var(--line); }.summary-stats div:last-child { border-bottom:0; }.article { padding:50px 0 65px; }.article-copy { font-size:16px; }.article-copy h2 { margin-top:38px; }.not-found { min-height:calc(100vh - 150px); padding-top:90px; } }