:root{color-scheme:light;--ink: #171813;--paper: #f4f1e8;--paper-deep: #e7e2d5;--acid: #d9ff43;--acid-dark: #b9df25;--muted: #716f67;--line: rgba(23, 24, 19, .2);--good: #2c7d54;--bad: #c2483d;font-family:Manrope,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.site-header{min-height:78px;padding:0 clamp(24px,5vw,78px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:20px;font-weight:800;letter-spacing:-.06em}.brand-mark{width:34px;height:27px;display:grid;place-items:center;background:var(--ink);color:var(--acid);font-family:DM Mono,monospace;font-size:13px;letter-spacing:-.12em}.brand-dot{color:#89a816}.lab-label,.eyebrow,.duration-control,.restart-button,.metric-label,.field-prompt,.typing-help,.results-kicker,.result-grid span,.button,footer,.detail-index{font-family:DM Mono,monospace}.lab-label{color:var(--muted);font-size:11px;letter-spacing:.12em}.hero{display:flex;flex-direction:column;background:linear-gradient(rgba(23,24,19,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,24,19,.035) 1px,transparent 1px),#efebdf;background-size:32px 32px;border-bottom:1px solid var(--line)}.hero-copy{min-height:440px;padding:clamp(72px,8vw,130px) clamp(32px,7vw,110px);display:grid;grid-template-columns:minmax(420px,.9fr) minmax(320px,1.1fr);grid-template-rows:auto auto;column-gap:10vw;align-items:end;background:var(--paper);border-top:1px solid var(--line)}.hero-copy .eyebrow{grid-column:1;grid-row:1}.hero-copy h1{grid-column:1;grid-row:2}.hero-copy .lede{grid-column:2;grid-row:2;margin-bottom:8px}.eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 34px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.eyebrow span{width:30px;height:2px;background:var(--ink)}h1,h2,h3,p{margin-top:0}h1{margin-bottom:34px;font-size:clamp(56px,6vw,102px);font-weight:700;line-height:.91;letter-spacing:-.075em}h1 em,.results h2 em{font-family:Georgia,serif;font-weight:400}.lede{max-width:470px;margin:0;color:var(--muted);font-size:17px;line-height:1.7}.test-shell{width:min(920px,calc(100% - 48px));min-height:calc(100vh - 78px);margin:0 auto;padding:clamp(72px,9vw,130px) 0;display:flex;flex-direction:column;justify-content:center}.test-topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:34px}.duration-control{display:flex;align-items:center;gap:5px;font-size:11px}.duration-control>span{margin-right:8px;color:var(--muted);letter-spacing:.1em}.duration-control button{min-width:38px;padding:7px 8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}.duration-control button:hover{border-color:var(--line);color:var(--ink)}.duration-control button.is-active{background:var(--ink);color:var(--acid)}.restart-button{display:inline-flex;align-items:center;gap:7px;padding:8px 0;border:0;background:transparent;color:var(--muted);font-size:10px;letter-spacing:.08em;cursor:pointer}.restart-button:hover{color:var(--ink)}.restart-button svg{width:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7}.metrics{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;border:1px solid var(--ink);background:var(--paper)}.metric{min-height:94px;padding:17px 20px;display:flex;align-items:baseline;gap:8px;border-right:1px solid var(--line)}.metric:last-child{border:0}.metric-primary{background:var(--acid)}.metric-value{font-family:DM Mono,monospace;font-size:clamp(29px,3vw,46px);font-weight:300;line-height:1;letter-spacing:-.08em}.metric-label{color:var(--muted);font-size:9px;letter-spacing:.08em}.words-viewport{height:185px;overflow:hidden;padding:29px 8px 24px;border-inline:1px solid var(--ink);background:#f4f1e8e6;scroll-behavior:smooth}.word-stream{display:flex;flex-wrap:wrap;align-content:flex-start;gap:11px 15px;font-family:DM Mono,monospace;font-size:clamp(20px,2vw,29px);line-height:1.45;color:#85837c}.word{position:relative;padding:0 2px;transition:color .12s ease,background .12s ease}.word.is-current{background:var(--acid);color:var(--ink)}.word.is-current:before{content:"";position:absolute;inset:0 auto 0 -5px;width:2px;background:var(--ink);animation:blink 1s step-end infinite}.word.is-correct{color:var(--good)}.word.is-wrong,.word.has-mismatch{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}@keyframes blink{50%{opacity:0}}.typing-field{min-height:88px;padding:15px 20px 13px;display:flex;flex-direction:column;border:1px solid var(--ink);background:var(--ink);cursor:text}.field-prompt{color:#a9a99e;font-size:9px;letter-spacing:.09em}.typing-field input{width:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--acid);font-family:DM Mono,monospace;font-size:28px;caret-color:var(--acid)}.typing-help{margin:12px 0 0;color:var(--muted);font-size:9px;line-height:1.5}.is-running .metric-timer{background:var(--ink);color:var(--acid)}.is-running .metric-timer .metric-label{color:#999b8e}.results{margin-top:34px;padding:clamp(30px,4vw,54px);background:var(--ink);color:var(--paper)}.results-kicker{color:var(--acid);font-size:10px;letter-spacing:.14em}.results h2{margin-bottom:34px;font-size:clamp(38px,5vw,68px);line-height:.95;letter-spacing:-.06em}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid rgba(244,241,232,.25)}.result-grid div{padding:20px 12px 20px 0}.result-grid strong{display:block;color:var(--acid);font-family:DM Mono,monospace;font-size:28px;font-weight:300}.result-grid span{color:#999b8e;font-size:8px;letter-spacing:.08em}.best-line{margin:18px 0;color:#c7c7bc;font-family:DM Mono,monospace;font-size:10px}.result-actions{display:flex;gap:10px}.button{padding:13px 18px;border:1px solid var(--acid);font-size:10px;letter-spacing:.08em;cursor:pointer}.button-primary{background:var(--acid);color:var(--ink)}.button-secondary{background:transparent;color:var(--acid)}.button:hover{background:var(--acid-dark);color:var(--ink)}.details{padding:clamp(72px,10vw,150px) clamp(24px,7vw,110px);display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}.details h2{font-size:clamp(42px,5.3vw,80px);line-height:.98;letter-spacing:-.065em}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}.detail-grid article{min-height:290px;padding:22px 24px 20px 0;border-right:1px solid var(--line)}.detail-grid article:not(:first-child){padding-left:24px}.detail-grid article:last-child{border-right:0}.detail-index{color:var(--muted);font-size:10px}.detail-grid h3{margin:58px 0 16px;font-size:25px;letter-spacing:-.05em}.detail-grid p{color:var(--muted);font-size:14px;line-height:1.7}footer{min-height:130px;padding:30px clamp(24px,5vw,78px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ink);color:#999b8e;font-size:9px;letter-spacing:.06em}.brand-footer{color:var(--paper)}.brand-footer .brand-mark{background:var(--acid);color:var(--ink)}footer p{margin:0}@media(max-width:980px){.hero-copy{grid-template-columns:1fr 1fr;column-gap:8vw}.test-shell{min-height:720px}.details{grid-template-columns:1fr}}@media(max-width:660px){.site-header{min-height:66px}.hero{min-height:auto}.hero-copy{min-height:510px;padding:78px 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}h1{font-size:clamp(53px,17vw,74px)}.test-shell{width:calc(100% - 36px);min-height:660px;padding:52px 0}.test-topbar{align-items:flex-end}.metrics{grid-template-columns:repeat(2,1fr)}.metric{min-height:78px;border-bottom:1px solid var(--line)}.metric:nth-child(2){border-right:0}.metric:nth-child(3),.metric:nth-child(4){border-bottom:0}.words-viewport{height:172px}.word-stream{font-size:20px;gap:9px 12px}.result-grid{grid-template-columns:repeat(2,1fr)}.details{padding-inline:24px}.detail-grid{grid-template-columns:1fr}.detail-grid article{min-height:auto;padding:24px 0 32px!important;border-right:0;border-bottom:1px solid var(--line)}.detail-grid h3{margin-top:30px}footer{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.word.is-current:before{animation:none}*{scroll-behavior:auto!important}}
