@font-face{font-family:'Rubik Mono One';src:url(fonts/rubik-mono-one-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--y:#ffe600;--k:#0a0a0a;--r:#ff2d2d;--p:#fffbe3;--g:#6b6754;--disp:'Rubik Mono One',ui-monospace,monospace;--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--p);color:var(--k);font:17px/1.6 var(--sans);overflow-x:hidden}
a{color:var(--k);text-decoration-thickness:2px;text-underline-offset:3px}a:hover{color:var(--r)}
:focus-visible{outline:3px solid var(--r);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kick{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.haz{height:14px;background:repeating-linear-gradient(-45deg,var(--k) 0 12px,var(--y) 12px 24px)}
main{display:block}
/* header */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 18px;padding:12px 16px;background:var(--k);color:var(--y)}
.brand{font:400 15px/1 var(--disp);color:var(--y);text-decoration:none;letter-spacing:-.02em;position:relative}
.brand:hover{color:var(--y);animation:gl .4s steps(2) 2}
.top nav{display:flex;flex-wrap:wrap;gap:4px 16px;font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.top nav a{color:#f5f5f0;text-decoration:none;padding:7px 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a[aria-current]{color:var(--y);border-color:var(--y)}
/* hero */
.hero{position:relative;background:var(--y);padding:28px 16px 34px;overflow:hidden}
.hero>.haz{position:absolute;left:0;right:0;bottom:0}
.hero h1{font:400 clamp(3rem,15.5vw,10rem)/.9 var(--disp);letter-spacing:-.05em;margin:0 0 20px;position:relative}
.glitch{animation:gl .5s steps(2) .3s 2}
.hero h1:hover{animation:gl .5s steps(2) 2}
@keyframes gl{0%{text-shadow:.05em 0 var(--r),-.05em 0 #00b3ff;transform:translateX(.02em)}50%{text-shadow:-.04em 0 var(--r),.04em 0 #00b3ff;transform:translateX(-.02em) skewX(-5deg)}100%{text-shadow:none;transform:none}}
.lede{font-size:clamp(1.08rem,2.8vw,1.35rem);max-width:40rem;margin:0}
.ret{position:absolute;width:clamp(70px,16vw,170px);right:4%;top:18px;color:var(--k);opacity:.9;animation:ret 6s ease-in-out infinite}
@keyframes ret{0%,100%{transform:translate(0,0)}33%{transform:translate(-40%,30%)}66%{transform:translate(-10%,55%)}}
.hero.small{padding:28px 16px 26px;border-bottom:14px solid var(--k);border-image:repeating-linear-gradient(-45deg,var(--k) 0 12px,var(--y) 12px 24px) 14}
.hero.small h1{font:400 clamp(2rem,9vw,4.5rem)/.98 var(--disp);letter-spacing:-.04em}
/* checker */
.lab{background:var(--k);color:#f5f5f0;padding:22px 16px 30px}
.specimen{max-width:1100px;margin:0 auto}
.spec-hd{display:flex;justify-content:space-between;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--y);border:1px solid #333;border-bottom:0;padding:9px 12px}
.scanwrap{position:relative;overflow:hidden;border:1px solid #333}
textarea{display:block;width:100%;min-height:15rem;resize:vertical;font:500 16px/1.65 var(--mono);color:#f5f5f0;background:#111;border:0;padding:14px}
textarea::placeholder{color:#8b8b82}
.scanbar{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(transparent,rgba(255,230,0,.25) 80%,var(--y));mix-blend-mode:screen;transform:translateY(-110%);pointer-events:none}
.scanning .scanbar{animation:scan .65s ease-in-out}
@keyframes scan{from{transform:translateY(-110%)}to{transform:translateY(360%)}}
.spec-ft{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
button{font:500 15px/1 var(--mono);cursor:pointer;border-radius:3px}
.go{background:var(--y);color:var(--k);border:2px solid var(--y);padding:15px 22px;font-family:var(--disp);font-size:16px;letter-spacing:-.02em}
.go:hover{background:#fff;border-color:#fff}
.ghost{background:transparent;color:#f5f5f0;border:2px solid #444;padding:13px 14px}.ghost:hover{border-color:var(--y);color:var(--y)}
.local{font:500 13px var(--mono);color:#a5a59c;margin:12px 0 0}
.results{max-width:1100px;margin:26px auto 0;border-top:14px solid;border-image:repeating-linear-gradient(-45deg,var(--y) 0 12px,var(--k) 12px 24px) 14;padding-top:18px;scroll-margin-top:10px}
.score{display:flex;align-items:flex-start;gap:.2em;font-family:var(--disp);line-height:.8}
.score b{font-weight:400;font-size:clamp(6rem,30vw,12rem);letter-spacing:-.08em;color:var(--y)}
.results.bad .score b{color:var(--r)}.results.good .score b{color:#7dff9a}
.score span{font:500 14px/1.25 var(--mono);color:var(--y);padding-top:.7em}
.verdict{font-size:1.15rem;max-width:44rem;margin:16px 0}
.tally{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 20px}
.tally div{border:1px solid #333;padding:10px 12px}
.tally b{display:block;font:400 1.6rem/1 var(--disp)}
.tally small{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a5a59c}
.results h3{font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin:24px 0 10px}
.marked{background:#f5f5f0;color:var(--k);padding:14px;white-space:pre-wrap;font:500 15px/1.75 var(--mono);overflow-wrap:anywhere}
mark{background:var(--r);color:var(--k);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.soft{background:var(--y);box-shadow:inset 0 -3px 0 var(--k)}
.hits{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hits li{border-left:6px solid var(--r);background:#161616;padding:12px 14px;display:grid;gap:6px}
.hits li.soft{border-left-color:var(--y)}
.hits b{font:500 14px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.hits code{font:500 13px var(--mono);background:#2a2a2a;padding:1px 6px;margin:0 4px 4px 0;display:inline-block}
.hits a{color:var(--y);font:500 13px var(--mono)}
/* sections */
.how,.all,.prose,.wl{max-width:1100px;margin:0 auto;padding:34px 16px}
.how h2,.all>h2,.prose h2,.wl h2,.signup h2,.rel h2{font:400 clamp(1.3rem,5vw,2rem)/1.05 var(--disp);letter-spacing:-.04em;margin:0 0 14px}
.how ol{padding-left:1.3em;max-width:46rem}.how li{margin:0 0 10px}.how p{max-width:46rem}
.grp{margin:0 0 28px}.grp h2{font:400 1.2rem var(--disp);letter-spacing:-.03em;margin:0 0 4px}.grp h2 span{color:var(--r)}
.grp>p{margin:0 0 12px;color:var(--g)}
.tells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:6px}
.tells a{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline;text-decoration:none;background:#fff;border:2px solid var(--k);padding:10px 12px;box-shadow:4px 4px 0 var(--k);transition:transform .12s,box-shadow .12s}
.tells a:hover{color:var(--k);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--r)}
.tn{grid-row:1/3;font:400 1.1rem var(--disp);color:var(--r)}
.tells b{font-weight:700}.tells small{font:500 12px var(--mono);color:var(--g)}
/* signup */
.signup{max-width:1100px;margin:10px auto 36px;padding:22px 16px;background:var(--y);border:3px solid var(--k);box-shadow:8px 8px 0 var(--k);display:grid;gap:16px;width:calc(100% - 40px)}
.signup p{margin:0}
.su-form label{display:block;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.su-row{display:flex;flex-direction:column;gap:8px}
.su-row input{font:16px var(--sans);padding:14px;border:2px solid var(--k);background:#fff;min-width:0;border-radius:0}
.su-row button{background:var(--k);color:var(--y);border:2px solid var(--k);padding:15px 18px;font-family:var(--disp);font-size:14px}
.su-row button:hover{background:var(--r);color:var(--k)}
.su-note{font:500 13px var(--mono);margin-top:8px!important}
.su-ok{font:500 15px var(--mono);margin-top:10px!important}
.su-err{color:#b00000;margin-top:10px!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* tell page */
.tell{max-width:1100px;margin:0 auto;padding:0 16px}
.t-hd{padding:28px 0 18px;border-bottom:3px solid var(--k)}
.t-hd .kick a{color:var(--k)}
.t-hd h1{font:400 clamp(1.7rem,7vw,3.6rem)/1.02 var(--disp);letter-spacing:-.045em;margin:0 0 14px}
.flagline{margin:0;font:500 14px var(--mono)}
.badge{display:inline-block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;margin-right:6px;background:var(--r);color:var(--k)}
.badge.soft{background:var(--y);border:1px solid var(--k)}
.t-body{display:grid;gap:8px;padding:20px 0}
.why p{font-size:1.1rem;max-width:44rem;margin:0 0 14px}
.ba{display:grid;gap:10px;margin:8px 0 10px}
.ba>div{padding:16px;border:2px solid var(--k)}
.ba .b{background:var(--k);color:#f5f5f0}.ba .b .kick{color:var(--r)}
.ba .a{background:#fff}.ba .a .kick{color:#0a7d2a}
.ba p{margin:0;font:500 16px/1.65 var(--mono)}
.fix h2,.swaps h2,.match h2{font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:16px 0 6px}
.fix p{font-size:1.25rem;font-weight:700;margin:0;max-width:44rem}
.swaps ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.swaps li{background:#fff;border:2px solid var(--k);padding:6px 10px;font:500 14px var(--mono)}
.match p{margin:0 0 8px;max-width:44rem}
.mono{font:500 14px var(--mono)}
ul.mono{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 14px}
pre.mono{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px dashed var(--g);padding:10px;margin:0;font-size:12px;color:var(--g)}
.cta{margin:18px 0 0}
.btn{display:inline-block;background:var(--k);color:var(--y);text-decoration:none;font:400 15px/1 var(--disp);padding:16px 20px;border:2px solid var(--k)}
.btn:hover{background:var(--r);color:var(--k)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}
.pn a{display:block;text-decoration:none;border:2px solid var(--k);padding:10px 12px;font-weight:700;background:#fff}
.pn a:last-child{text-align:right}
.pn small{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g)}
.rel{padding:10px 0 20px}
/* word list */
.cloud{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:6px}
.cloud a{display:block;text-decoration:none;font:500 15px var(--mono);background:#fff;border:2px solid var(--k);padding:5px 10px}
.cloud a:hover{background:var(--r);color:var(--k)}
.cloud.ph a{background:var(--y)}
.small{font-size:.9rem;color:var(--g)}
.prose{max-width:46rem}.prose .ver ul{padding-left:1.2em}
/* footer */
.foot{background:var(--k);color:#d9d9d0;margin-top:20px}
.foot-in{max-width:1100px;margin:0 auto;padding:22px 16px 34px}
.foot-b{font:400 1rem var(--disp);color:var(--y);margin:0 0 6px}
.foot p{margin:0 0 10px;max-width:44rem}
.foot a{color:var(--y)}
.foot-s{font:500 13px/1.8 var(--mono)}
@media (min-width:700px){
 .top,.hero,.lab,.how,.all,.prose,.wl,.tell,.foot-in{padding-left:32px;padding-right:32px}
 .hero{padding-top:48px;padding-bottom:56px}
 .tally{grid-template-columns:repeat(4,1fr)}
 .tells{grid-template-columns:1fr 1fr}
 .signup{grid-template-columns:1fr 1fr;align-items:end;padding:28px}
 .su-row{flex-direction:row}.su-row input{flex:1}
 .ba{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
 .tells{grid-template-columns:repeat(3,1fr)}
 .lab{padding-top:34px;padding-bottom:44px}
 .results{display:grid;grid-template-columns:auto 1fr;gap:0 36px;align-items:start}
 .results .score{grid-row:1/3}
 .results h3,.results .marked,.results .hits{grid-column:1/-1}
 .hits{grid-template-columns:1fr 1fr}
 .t-body{grid-template-columns:1.25fr 1fr;gap:10px 40px;align-items:start}
 .t-body .why{grid-column:1/-1}.t-body .ba{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.top nav,.signup,.lab .spec-ft,.foot{display:none}}
@media (min-width:1164px){.top,.hero,.lab{padding-left:calc((100% - 1100px)/2);padding-right:calc((100% - 1100px)/2)}.ret{right:calc((100% - 1100px)/2)}}