@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:Outfit;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/outfit-latin.woff2) format('woff2')}
/* Bright playground. Functional signals retain instant, high-contrast state changes. */
:root{--bg:#f4f5f8;--bg-2:#fff;--bg-3:#e9edf6;--line:#dce1ec;--line-2:#b2bdd3;--text:#17223b;--text-2:#536079;--text-3:#596780;--accent:#2852e8;--accent-ink:#fff;--accent-soft:#e7edff;--coral:#ff735b;--go:#bafb70;--go-ink:#142522;--go-text:#32640b;--wait:#ff806c;--wait-ink:#381a18;--wait-text:#ae301d;--focus:#2852e8;--shadow:0 16px 36px -20px #233f733b;--display:Outfit,system-ui,sans-serif;--body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--r:16px;--ease-out:cubic-bezier(.23,1,.32,1);color-scheme:light}
:root[data-theme=dark]{--bg:#101828;--bg-2:#182338;--bg-3:#23314b;--line:#30415f;--line-2:#526580;--text:#f0f3fd;--text-2:#bac6dd;--text-3:#a5b6d2;--accent:#a7bbff;--accent-ink:#122448;--accent-soft:#273a65;--go-text:#bafb70;--wait-text:#ff9a89;--focus:#adc5ff;--shadow:0 16px 36px -20px #0008;color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--line-2) var(--bg);scroll-padding-top:1rem}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--body);min-height:100vh;display:flex;flex-direction:column;caret-color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}a:hover{text-decoration-color:var(--accent)}
button,input,select{font:inherit}button{touch-action:manipulation}button:disabled{cursor:default}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.025em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,4.5vw,4rem)}h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:2.6rem 0 1rem}h3,.lbl{font-size:1.15rem;margin:1.6rem 0 .5rem}.lbl{font-family:var(--display);font-weight:600;line-height:1.2;max-width:none}
p{margin:.5rem 0 1rem}p,li,dd,dt{max-width:70ch}strong{font-weight:600}ul,ol{padding-left:1.3rem}li{margin:.3rem 0}code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}code{background:var(--bg-3);padding:.1em .3em;border-radius:4px}kbd{border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:.1em .45em}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 28px}main{flex:1}main>.wrap{padding-top:38px;padding-bottom:2rem}.lede{color:var(--text-2);font-size:1.05rem;line-height:1.65;max-width:58ch;margin:1rem 0 0}.tnum,.num{font-variant-numeric:tabular-nums}.num{font-family:var(--display);font-weight:600;line-height:1;font-size:clamp(4rem,12vw,7.5rem);letter-spacing:-.04em}.muted{color:var(--text-2)}.small{font-size:.9rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.icon{width:24px;height:24px;display:inline-block;vertical-align:middle;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}img{max-width:100%;height:auto}
/* The header stays compact; the complete suite is one visible scrollable rail. */
.site-head{background:var(--bg-2);border-bottom:1px solid var(--line)}.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:82px}.brand{display:inline-flex;align-items:center;font:600 1.5rem/1 var(--display);letter-spacing:-.04em;text-decoration:none;white-space:nowrap;min-height:44px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--accent);color:var(--accent-ink);border-radius:12px;margin-right:10px}.brand-mark .icon{width:25px;height:25px}.brand-end{font-weight:400}.brand-dot{color:var(--coral);font-size:1.6em;line-height:.5}.brand-note{font-size:.82rem;color:var(--text-2);margin:0;flex:1}.top-links{display:flex;gap:24px;margin-left:auto}.top-links a{font-size:.9rem;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:500}.top-links a:hover{color:var(--accent)}.theme-btn{display:grid;place-items:center;width:44px;height:44px;background:var(--bg);border:1px solid var(--line);border-radius:50%;color:var(--text-2);cursor:pointer;flex-shrink:0}.theme-btn .icon{width:20px;height:20px}.theme-btn .moon{display:none}:root[data-theme=light] .theme-btn .sun{display:none}:root[data-theme=light] .theme-btn .moon{display:block}
.site-nav{background:var(--bg-2);border-bottom:1px solid var(--line)}.tool-dock{display:flex;align-items:stretch;gap:6px;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:thin}.tool-dock a{display:flex;align-items:center;justify-content:center;gap:9px;flex:1 0 auto;min-height:46px;padding:9px 14px;border-radius:10px;text-decoration:none;color:var(--text-2);font-size:.86rem;font-weight:500;white-space:nowrap}.tool-dock a .icon{width:20px;height:20px}.tool-dock a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}.tool-dock a:hover{background:var(--bg-3);color:var(--text)}
/* First viewport: introduction and actual tool, no marketing detour. */
.home-hero{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:52px;align-items:center;padding:14px 0 36px}.hero-copy h1{font-size:clamp(3.2rem,4.8vw,4.35rem);line-height:1.02;font-weight:600;letter-spacing:-.035em}.hero-copy h1 span{color:var(--accent)}.hero-copy .lede{font-size:1.02rem;max-width:36ch}.hero-art{max-width:395px;margin:10px 0 0 -12px;overflow:hidden}.hero-art img{display:block;mix-blend-mode:multiply}:root[data-theme=dark] .hero-art img{mix-blend-mode:normal;border-radius:var(--r)}.hero-promise{display:flex;align-items:center;gap:9px;color:var(--text-2);font-size:.82rem;margin:.25rem 0 0}.hero-promise .icon{color:var(--accent);width:17px;height:17px}.hero-promise>span{margin:0 3px}.home-hero>.tool{min-width:0}.test-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.test-heading strong{font:500 1.15rem var(--display)}.test-heading>span{font-size:.72rem;color:var(--text-2)}
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:32px}.page-intro>div:first-child{max-width:800px}.intro-symbol{flex-shrink:0;width:108px;height:108px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border-radius:var(--r);transform:rotate(-7deg)}.intro-symbol .icon{width:57px;height:57px;stroke-width:1.2}.page-f1 .intro-symbol,.page-mouse .intro-symbol{background:#ffe4dc;color:#a83625}.page-audio .intro-symbol{background:#e7dfff;color:#6742ac}.page-pixel .intro-symbol{background:#e3f5d3;color:#3c681b}.reading-page{max-width:1050px}.reading-page .prose{max-width:74ch}.reading-page .page-intro{padding-bottom:25px;border-bottom:1px solid var(--line)}
/* Controls and real measurements. */
.btn{min-height:46px;padding:10px 18px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--text);font:500 .9rem/1.3 var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.btn:disabled{opacity:.55}.btn-go{background:var(--accent);color:var(--accent-ink);border-color:transparent}.btn-ghost{background:transparent}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:.9rem 0}.status{color:var(--text-2);font-size:.88rem;flex:1;min-width:200px}.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;background:var(--bg-3);border-radius:12px;margin-bottom:14px;max-width:100%}.seg button{min-height:42px;padding:0 19px;border:0;border-radius:8px;background:none;color:var(--text-2);font:500 .88rem var(--body);cursor:pointer}.seg button[aria-pressed=true]{background:var(--bg-2);color:var(--text);box-shadow:0 2px 4px #142a4812}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:1rem 0}.stat{background:var(--bg-2);padding:18px 20px}.stat>span{display:block;color:var(--text-2);font-size:.78rem;font-weight:500;margin-bottom:8px}.stat b{display:block;font:500 2.4rem/1.1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}.stat b small{font:400 .88rem var(--body);color:var(--text-2);margin-left:4px}.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:25px}.panel>.lbl:first-child{margin-top:0}.note{background:var(--bg-3);border-radius:10px;padding:16px 20px;color:var(--text-2);font-size:.9rem}.note.warn{background:#fff0e9;color:#7b3024}.tool{scroll-margin-top:20px}
/* Helpful guidance: numbered steps, readable reference blocks, native FAQs. */
.prose{max-width:82ch;margin:48px 0}.prose h2:first-child{margin-top:0}.prose>h2:not(:first-child){margin-top:2.4rem}.prose p{color:var(--text-2);font-size:.95rem;line-height:1.85}.prose p a{color:var(--accent)}.how-to{max-width:none!important;padding:28px 0 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 52px}.how-to h2{font-size:1.35rem;margin:0 0 23px}.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;list-style:none;padding:0;margin:0}.steps li{counter-increment:s;padding-left:42px;position:relative;margin:0;color:var(--text-2);font-size:.88rem;line-height:1.7}.steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--accent);font:500 1.4rem/1.25 var(--display)}.faq{max-width:none;padding-top:35px;border-top:1px solid var(--line)}.faq>h2{margin-bottom:24px}.faq details{border-bottom:1px solid var(--line);max-width:900px}.faq summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;padding:18px 0;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary h3{font-size:1.1rem;font-weight:500;line-height:1.4;margin:0}.faq summary::after{content:'';width:10px;height:10px;border:solid var(--text-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);flex-shrink:0;margin-right:6px}.faq details[open] summary::after{transform:rotate(225deg)}.faq details p{margin:0 0 24px;max-width:72ch}.related{max-width:none}.related ul{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}.related li{margin:0}.related a{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--line);background:var(--bg-2);border-radius:10px;text-decoration:none;font-size:.88rem}.tool-sections{display:flex;gap:16px;flex-wrap:wrap;margin:20px 0;font-size:.9rem;color:var(--accent)}
/* Discovery is an actual eight-tool directory, never placeholder feature cards. */
.explore{margin:48px 0 64px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading h2{margin:0 0 9px}.section-heading p{color:var(--text-2);font-size:.94rem;margin:0}.catalog-count{white-space:nowrap;font-size:.82rem;color:var(--text-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}.tool-library{display:grid;grid-template-columns:1fr 1fr;column-gap:42px}.tool-link{display:flex;align-items:center;gap:17px;text-decoration:none;min-height:120px;padding:22px 0;border-bottom:1px solid var(--line)}.tool-link>span:nth-child(2){flex:1;min-width:0}.tool-link strong{font:500 1.25rem/1.2 var(--display);display:block;margin-bottom:6px}.tool-link-desc{display:block;color:var(--text-2);font-size:.83rem;line-height:1.6;max-width:37ch}.tool-link-icon{display:grid;place-items:center;width:58px;height:58px;flex-shrink:0;border-radius:12px;background:var(--accent-soft);color:var(--accent)}.tool-link-icon .icon{width:29px;height:29px}.tone-f1 .tool-link-icon,.tone-mouse .tool-link-icon{background:#ffe4dc;color:#a83625}.tone-audio .tool-link-icon,.tone-spacebar .tool-link-icon{background:#e7dfff;color:#6742ac}.tone-pixel .tool-link-icon,.tone-controller .tool-link-icon{background:#e3f5d3;color:#3c681b}.tool-arrow{width:19px;height:19px;color:var(--text-2)}.mobile-art{display:none}
/* Consent remains optional, compact, and independent of every test. */
.analytics-choice{position:fixed;bottom:18px;left:18px;z-index:40;max-width:430px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);margin:0}.analytics-choice strong{font:500 1.1rem var(--display)}.analytics-choice p{color:var(--text-2);font-size:.8rem;line-height:1.6;margin:6px 0 13px}.analytics-choice a{color:var(--accent)}.analytics-actions{display:flex;gap:10px}.analytics-actions .btn{flex:1;padding:8px;font-size:.81rem;min-height:44px}
/* Footer is navigation, not another marketing block. */
.site-foot{border-top:1px solid var(--line);background:var(--bg-2);margin-top:20px;color:var(--text-2)}.site-foot>.wrap{display:grid;grid-template-columns:1.2fr 1.4fr .6fr;gap:30px;padding-top:45px;padding-bottom:35px}.footer-intro .brand{color:var(--text)}.footer-intro p{font:400 1.1rem/1.5 var(--display);margin:18px 0}.made-by{font-size:.75rem;display:inline-flex;gap:8px;align-items:center;min-height:44px;text-decoration:none}.made-by .icon{width:16px;height:16px}.footer-tools{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:18px}.footer-info{display:flex;flex-direction:column;align-items:flex-start}.site-foot nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:.84rem}.site-foot nav a:hover{color:var(--accent)}.site-foot .btn-ghost{grid-column:1/-1;justify-self:start;font-size:.78rem;margin-top:0;padding:0;min-height:44px;border:0}
/* reaction test */
.rt-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:clamp(250px,42vh,440px);border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);padding:1.25rem;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rt-panel[data-state="waiting"]{background:var(--wait);color:var(--wait-ink);border-color:transparent}
.rt-panel[data-state="go"]{background:var(--go);color:var(--go-ink);border-color:transparent}
.rt-panel[data-state="early"] .rt-msg{color:var(--wait-text)}
.rt-panel[data-state="result"] .rt-num{color:var(--go-text)}
.rt-panel[data-state="error"] .rt-msg{color:var(--wait-text)}
.rt-msg{font:500 clamp(1.2rem,3.5vw,1.8rem)/1.3 var(--display);max-width:none}
.rt-panel[data-state="go"] .rt-msg,.rt-panel[data-state="waiting"] .rt-msg{font-size:clamp(1.8rem,6vw,3rem);font-weight:700}
.rt-sub{margin-top:.6rem;font-size:.95rem;color:inherit;opacity:.8;max-width:none}
.rt-num{margin-bottom:.25rem}
.rt-lights{display:flex;gap:clamp(.4rem,2vw,1rem);margin-bottom:1.25rem}
.rt-lights i{display:block;width:clamp(34px,9vw,64px);height:clamp(34px,9vw,64px);border-radius:50%;background:#3A0E0E;border:2px solid #521515}
.rt-lights i.on{background:#FF2A2A;border-color:#FF6B6B}
.rt-panel[data-state="waiting"] .rt-lights i{background:#7A1414;border-color:#8F1F1F}
.rt-panel[data-state="waiting"] .rt-lights i.on{background:#FFE7E7;border-color:#fff}
.rt-note{color:var(--text-2);font-size:.95rem;margin:.75rem 0 .25rem;max-width:none}
.rt-attempts{list-style:none;padding:0;margin:.75rem 0;display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;max-width:none}
.rt-attempts li{margin:0;text-align:center;padding:.55rem .2rem;border:1px solid var(--line);border-radius:8px;color:var(--text-3);font:600 .95rem var(--display);font-variant-numeric:tabular-nums;max-width:none}
.rt-attempts li.done{color:var(--text);border-color:var(--line-2)}
.rt-summary p{max-width:none}

/* controller */
.ct-idle,.ct-error{text-align:center;padding:2rem 1rem}
.ct-idle svg{width:min(240px,70%);height:auto;color:var(--text-3);margin-bottom:1rem}
.ct-name{font:600 1.05rem var(--display);word-break:break-word;margin:0}
.ct-grid{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:768px){.ct-grid{grid-template-columns:1fr 1fr}}
.ct-buttons{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.4rem}
.ct-buttons li{margin:0;border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem;font-size:.85rem;font-weight:500;color:var(--text-2);max-width:none;min-height:44px;display:flex;align-items:center}
.ct-buttons li.on{background:var(--go);color:var(--go-ink);border-color:transparent}
.ct-sticks{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ct-stick svg{width:100%;max-width:180px;height:auto;display:block;margin:0 auto}
.ct-stick svg circle,.ct-stick svg line{stroke:var(--line-2);stroke-width:.03;fill:none}
.ct-stick svg .dot{fill:var(--go-text);stroke:none}
.ct-stick p{text-align:center;margin:.4rem 0 0;font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--text-2)}
.ct-trig{margin:.6rem 0}
.ct-trig span{display:flex;justify-content:space-between;font-size:.9rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.bar{height:12px;border-radius:6px;background:var(--bg-3);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--go)}

/* fps */
.fps-strip{position:relative;height:56px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);overflow:hidden;margin:.9rem 0}
.fps-bar{position:absolute;top:8px;left:0;width:14px;height:40px;background:var(--go);border-radius:3px;will-change:transform}

/* spacebar */
.sp-tap{width:100%;min-height:clamp(140px,26vh,220px);border:2px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);color:var(--text);font:700 clamp(1.2rem,4vw,1.6rem) var(--display);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sp-tap:active,.sp-tap.hit{background:var(--go);color:var(--go-ink);border-color:transparent}
.sp-big{text-align:center;padding:.5rem 0}

/* mouse */
.ms-grid{display:grid;gap:1rem}
@media (min-width:768px){.ms-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ms-area{display:flex;gap:1rem;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;cursor:crosshair;min-height:260px}
.ms-svg{width:min(150px,40%);height:auto;color:var(--text-3)}
.ms-btn{fill:var(--bg-3)}
.ms-btn.on{fill:var(--go);stroke:var(--go)}
.ms-counts{list-style:none;padding:0;margin:0;font-size:.9rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.ms-counts li{display:flex;justify-content:space-between;gap:1rem;margin:.15rem 0}
.ms-counts b{color:var(--text);font-weight:600}
.ms-wheel{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--text-2)}
.ms-wheel svg{width:32px;height:32px;color:var(--text-3)}
.ms-wheel svg.on{color:var(--go-text)}
.ms-dbl{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.ms-dbl .num{font-size:clamp(2.5rem,8vw,4rem)}
.ms-dbl[data-flag="bad"] .num{color:var(--wait-text)}
.ms-dbl[data-flag="ok"] .num{color:var(--go-text)}

/* dead pixel */
.dp-screen{position:fixed;inset:0;z-index:50;background:#fff;cursor:pointer;user-select:none;-webkit-user-select:none}
.dp-screen[hidden]{display:none}
.dp-hint{position:absolute;left:50%;top:1rem;transform:translateX(-50%);background:#0B0F17;color:#E6ECF8;padding:.7rem 1rem;border-radius:10px;font-size:.95rem;display:flex;gap:.75rem;align-items:center;max-width:calc(100% - 2rem)}
.dp-hint button{min-height:44px;padding:0 .8rem;border-radius:8px;border:1px solid #324268;background:#1A2236;color:#E6ECF8;font:500 .9rem var(--body);cursor:pointer}
.dp-exit{position:absolute;right:1rem;bottom:1rem;min-width:44px;min-height:44px;padding:0 .9rem;border-radius:10px;border:1px solid #324268;background:#0B0F17;color:#E6ECF8;font:500 .9rem var(--body);cursor:pointer;opacity:.6}
.dp-exit:hover,.dp-exit:focus-visible{opacity:1}
.px-box{position:fixed;left:calc(50% - 60px);top:calc(50% - 60px);z-index:60;width:120px;border-radius:8px;overflow:hidden;border:2px solid var(--line-2);background:var(--bg);touch-action:none;cursor:grab}
.px-box[hidden]{display:none}
.px-box canvas{display:block;width:120px;height:120px}
.px-bar{display:flex;justify-content:space-between;align-items:center;padding:.3rem .4rem;font-size:.8rem;font-variant-numeric:tabular-nums;background:var(--bg);color:var(--text)}
.px-bar button{min-height:44px;padding:0 .6rem;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--text);font:500 .8rem var(--body);cursor:pointer}

/* Tool surfaces inherit the same system without changing their measurement code. */
.rt-panel{background:#2852e8;color:white;border:0;min-height:300px;border-radius:var(--r);padding:30px 24px}.rt-msg{font:500 clamp(1.3rem,2.4vw,1.75rem)/1.25 var(--display);max-width:23ch}.rt-sub{font-size:.82rem;max-width:32ch}.rt-idle-mark{display:block;width:78px;height:78px;margin:0 0 20px;stroke:currentColor;stroke-width:1.3}.rt-idle-mark circle:first-child{opacity:.3}.rt-idle-mark path{fill:currentColor;stroke:none}.rt-panel:not([data-state=idle]) .rt-idle-mark{display:none}.rt-panel[data-state=early],.rt-panel[data-state=error]{background:var(--bg-2);color:var(--text);border:1px solid var(--line)}.rt-panel[data-state=result]{background:var(--accent-soft);color:var(--text)}.rt-panel[data-state=result] .rt-num{color:var(--accent)}.rt-panel[data-state=waiting]{background:var(--wait);color:var(--wait-ink)}.rt-panel[data-state=go]{background:var(--go);color:var(--go-ink)}.rt-note{font-size:.78rem;line-height:1.65;margin:11px 0}.rt-attempts{gap:7px;counter-reset:attempt}.rt-attempts li{font-weight:500;font-size:.87rem;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;padding:8px 3px;counter-increment:attempt}.rt-attempts li::before{content:'ROUND ' counter(attempt);display:block;font:500 .58rem/1.6 var(--body);letter-spacing:.07em;color:var(--text-2);margin-bottom:2px}.rt-attempts li.done{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.rt-summary p{font-size:.85rem;color:var(--text-2)}.page-f1 .tool,.page-audio .tool{max-width:900px}.page-f1 .rt-panel,.page-audio .rt-panel{min-height:340px}.ct-idle{padding:40px 15px}.ct-idle p{margin-left:auto;margin-right:auto}.ct-idle svg{color:var(--accent);width:190px;margin-bottom:25px}.ct-buttons li{border-radius:8px}.ct-name{font-size:1.25rem}.fps-strip{height:96px;background:var(--bg-3);border-color:var(--line);border-radius:10px}.fps-bar{height:56px;top:20px;background:var(--accent)}.page-fps .stats{margin:28px 0}.page-fps .stat b{font-size:3.1rem}.sp-tap{background:var(--accent-soft);border:1px solid var(--line-2);color:var(--accent);min-height:200px;font-weight:500;border-radius:var(--r)}.ms-area{background:var(--bg);border-radius:12px;margin-top:18px;min-height:300px}.ms-svg{color:var(--accent)}.ms-counts{font-size:.85rem}.ms-counts b{min-width:20px}.ms-dbl{padding:28px 24px}.ms-dbl .num{color:var(--accent)}.screen-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:24px}.screen-swatches i{height:84px;border-radius:10px;background:#fff;border:1px solid #dce1ec}.screen-swatches i:nth-child(2){background:#111827;border-color:#111827}.screen-swatches i:nth-child(3){background:#ff5f54;border-color:#ff5f54}.screen-swatches i:nth-child(4){background:#83d876;border-color:#83d876}.screen-swatches i:nth-child(5){background:#426aec;border-color:#426aec}.screen-swatches i:nth-child(6){background:linear-gradient(135deg,#fff,#202633)}.page-pixel .panel:first-child .row{gap:24px}.page-pixel .panel:first-child .btn{flex-shrink:0}.center{text-align:center;padding:5rem 1rem}.center p{margin-left:auto;margin-right:auto}
/* One finite entrance and small pointer feedback. No loops or delayed test signals. */
@media(prefers-reduced-motion:no-preference){.hero-art{animation:arrive 700ms var(--ease-out) both}.intro-symbol{animation:symbol-arrive 600ms var(--ease-out) both}.btn,.theme-btn,.related a{transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}.btn:active:not(:disabled),.theme-btn:active{transform:translateY(1px)}@keyframes arrive{from{transform:translateY(14px) rotate(-3deg)}to{transform:translateY(0) rotate(0)}}@keyframes symbol-arrive{from{transform:translateY(10px) rotate(-14deg)}to{transform:translateY(0) rotate(-7deg)}}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.tool-link-icon,.tool-arrow{transition:transform 220ms var(--ease-out)}.tool-link:hover .tool-link-icon{transform:translateY(-3px) rotate(-5deg)}.tool-link:hover .tool-arrow{transform:translateX(4px)}.btn:not(:disabled):hover{transform:translateY(-1px)}.theme-btn:hover{background:var(--bg-3)}}
@media(max-width:1020px){.brand-note{display:none}.home-hero{gap:28px;grid-template-columns:1fr 1.1fr}.hero-copy h1{font-size:3.35rem}.tool-dock{gap:3px}.tool-dock a{padding:9px 10px;font-size:.8rem}.tool-dock a .icon{width:18px}.hero-art{max-width:330px}.test-heading>span{display:none}}
@media(max-width:760px){.wrap{padding-left:20px;padding-right:20px}.site-head .wrap{min-height:70px;gap:14px}.brand{font-size:1.25rem}.brand-mark{width:32px;height:32px;margin-right:8px;border-radius:10px}.brand-mark .icon{width:23px;height:23px}.top-links{gap:14px}.top-links a{font-size:.8rem}.top-links a:last-child{display:none}.theme-btn{width:40px;height:40px}.tool-dock{gap:7px;padding-top:9px;padding-bottom:9px}.tool-dock a{flex:0 0 auto;flex-direction:column;gap:3px;min-width:71px;padding:6px 9px;font-size:.71rem;min-height:60px}.tool-dock a .icon{width:20px;height:20px}main>.wrap{padding-top:25px}.home-hero{display:flex;flex-direction:column;gap:25px;padding:0 0 8px;align-items:stretch}.hero-copy h1{font-size:clamp(2.8rem,9.5vw,4rem);line-height:1.03}.hero-copy h1 br{display:none}.hero-copy h1 span{display:block}.hero-copy .lede{font-size:.91rem;max-width:36ch;margin-top:12px}.hero-art{display:none}.hero-promise{font-size:.72rem;margin-top:13px}.test-heading{display:none}.home-hero .seg{display:flex;width:100%;margin-bottom:10px}.home-hero .seg button{flex:1}.rt-panel{min-height:225px;padding:24px 18px}.rt-idle-mark{width:57px;height:57px;margin-bottom:14px}.rt-msg{font-size:1.5rem}.rt-note{font-size:.73rem}.rt-attempts{margin-top:8px}.rt-attempts li{font-size:.76rem}.rt-attempts li::before{font-size:.53rem}.page-intro{gap:15px;margin-bottom:25px}.page-intro h1{font-size:2.5rem}.page-intro .lede{font-size:.9rem;line-height:1.65;margin-top:12px}.intro-symbol{width:67px;height:67px;border-radius:12px;align-self:flex-start;margin-top:5px}.intro-symbol .icon{width:38px;height:38px}.page-audio .intro-symbol,.page-f1 .intro-symbol,.page-spacebar .intro-symbol{display:none}.page-f1 .rt-panel,.page-audio .rt-panel{min-height:280px}.panel{padding:20px}.row{gap:12px}.status{min-width:100%;font-size:.84rem}.seg button{padding:0 16px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:15px}.stat>span{font-size:.73rem}.stat b{font-size:2.15rem}.page-fps .stats{grid-template-columns:repeat(3,minmax(0,1fr))}.page-fps .stat{padding:12px 9px}.page-fps .stat b{font-size:2.2rem}.page-fps .stat>span{font-size:.68rem}.page-fps .stat b small{font-size:.7rem}.sp-tap{min-height:170px;font-size:1.25rem}.how-to{margin:28px 0 38px;padding:25px 0}.steps{grid-template-columns:1fr;gap:19px}.steps li{padding-left:36px;font-size:.85rem}.steps li::before{font-size:1.2rem}.how-to h2{font-size:1.4rem}.prose{margin:38px 0}.prose p{font-size:.9rem}.prose h2{font-size:1.7rem}.explore{margin:38px 0 46px}.section-heading{align-items:flex-start}.section-heading h2{font-size:1.9rem}.section-heading p{font-size:.88rem}.catalog-count{display:none}.mobile-art{display:block;margin:0 auto 15px;max-width:440px}.mobile-art img{display:block;border-radius:var(--r)}.tool-library{grid-template-columns:1fr}.tool-link{min-height:105px;gap:15px;padding:19px 0}.tool-link strong{font-size:1.2rem}.tool-link-icon{width:50px;height:50px}.tool-link-desc{font-size:.8rem}.tool-link-icon .icon{width:26px}.faq summary{min-height:67px;padding:17px 0}.faq summary h3{font-size:1rem}.faq details p{font-size:.87rem}.site-foot>.wrap{grid-template-columns:1fr 1fr;gap:25px;padding-top:30px}.footer-intro{grid-column:1/-1}.footer-intro p{margin:15px 0 3px;font-size:1rem}.footer-tools{display:flex;flex-direction:column}.site-foot nav a{font-size:.8rem}.footer-info{padding-left:20px}.site-foot .btn-ghost{margin-top:-10px}.screen-swatches{gap:6px}.screen-swatches i{height:54px;border-radius:6px}.ms-area{min-height:265px;gap:15px}.ms-dbl{padding:22px 18px}.analytics-choice{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:14px 16px}.analytics-choice p{font-size:.74rem;margin:4px 0 10px}.analytics-choice strong{font-size:.98rem}.analytics-actions .btn{font-size:.76rem}.reading-page .intro-symbol{display:none}.reading-page .page-intro{margin-bottom:28px}.reading-page h1{font-size:2.5rem}}
@media(max-width:370px){.wrap{padding-left:16px;padding-right:16px}.top-links{display:none}.theme-btn{margin-left:auto}.hero-copy h1{font-size:2.6rem}.page-intro h1{font-size:2.15rem}.intro-symbol{display:none}.seg button{padding:0 13px}.page-fps .stat b{font-size:1.8rem}.ms-area{flex-wrap:wrap}.ms-svg{width:110px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.skip-link{position:fixed;top:5px;left:16px;z-index:100;padding:12px 18px;background:var(--accent);color:var(--accent-ink);border-radius:8px;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}