@keyframes test-fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes test-glow-pulse{0%,to{opacity:.45;transform:scale(1)}50%{opacity:.65;transform:scale(1.06)}}@keyframes react-countdown{0%{opacity:0;transform:scale(1.6)}20%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7)}}@keyframes react-go-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes react-dots{0%,80%,to{opacity:.3;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}@keyframes click-ring-pulse{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}@keyframes tab-slide-in{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}@keyframes hero-chip-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.test-page{min-height:100vh}.test-hero{text-align:center;padding:100px 0 80px;position:relative;overflow:hidden}.test-hero-inner{z-index:2;animation:.7s cubic-bezier(.2,.8,.2,1) both test-fade-up;position:relative}.test-hero-glow{background:radial-gradient(ellipse at center, var(--cyan-glow), transparent 65%);filter:blur(60px);opacity:.45;pointer-events:none;z-index:0;width:700px;height:400px;animation:4s ease-in-out infinite test-glow-pulse;position:absolute;top:-60px;left:50%;transform:translate(-50%)}.test-hero-badge{color:var(--cyan);letter-spacing:.04em;text-transform:uppercase;background:#4ce6dc0f;border:1px solid #4ce6dc38;border-radius:999px;align-items:center;gap:8px;margin-bottom:28px;padding:6px 14px;font-size:12px;font-weight:600;display:inline-flex}.test-hero-h1{font-family:var(--font-display);letter-spacing:-.03em;color:var(--text);margin:0 0 20px;font-size:clamp(36px,5.5vw,68px);font-weight:700;line-height:1.08}.test-hero-accent{background:linear-gradient(135deg, var(--cyan) 0%, var(--cyan-hot) 50%, var(--purple) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.test-hero-sub{color:var(--text-dim);max-width:560px;margin:0 auto 32px;font-size:clamp(15px,1.6vw,18px);line-height:1.6}.test-hero-chips{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.test-chip{border:1px solid var(--line-strong);color:var(--text-dim);background:#ffffff08;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;animation:.5s cubic-bezier(.2,.8,.2,1) both hero-chip-in}.test-hub{padding:0 0 80px}.test-tabs{border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);scrollbar-width:none;background:#0c0c12b3;border-radius:14px;gap:4px;margin-bottom:20px;padding:4px;display:flex;overflow-x:auto}.test-tabs::-webkit-scrollbar{display:none}.test-tab{color:var(--text-mute);font-family:var(--font-body);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:500;transition:color .18s,background .18s,border-color .18s;display:flex;position:relative}.test-tab:hover{color:var(--text-dim);background:#ffffff0a}.test-tab--active{color:var(--cyan);background:#4ce6dc14;border-color:#4ce6dc38;animation:.2s both tab-slide-in}.test-tab-icon{font-size:16px;line-height:1}.test-tab-label{font-weight:600}.test-tab-check{color:var(--cyan);background:#4ce6dc1f;border-radius:999px;padding:1px 6px;font-size:11px;font-weight:700}.test-active-panel{border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(#ffffff05,#ffffff01);border-radius:16px;overflow:hidden}.test-panel{flex-direction:column;gap:24px;padding:32px;display:flex}.tpanel-header{flex-direction:column;gap:6px;display:flex}.tpanel-title{font-family:var(--font-display);color:var(--text);letter-spacing:-.02em;margin:0;font-size:20px;font-weight:700}.tpanel-desc{color:var(--text-dim);margin:0;font-size:14px;line-height:1.55}.tpanel-disclaimer{color:var(--text-mute);border-top:1px solid var(--line);margin:0;padding-top:4px;font-size:12px;line-height:1.5}.tpanel-save-btn{align-self:flex-start}.tpanel-actions{flex-wrap:wrap;gap:10px;display:flex}.test-metrics{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.metric-card{border:1px solid var(--line);background:#ffffff05;border-radius:12px;flex-direction:column;gap:5px;padding:18px 20px;display:flex}.metric-value{font-family:var(--font-display);color:var(--text);letter-spacing:-.03em;font-size:28px;font-weight:700;line-height:1;transition:color .3s}.metric-value--label{font-size:20px}.metric-label{color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:500}.graph-wrap{flex-direction:column;gap:8px;display:flex}.graph-title{color:var(--text-mute);text-transform:uppercase;letter-spacing:.07em;align-items:center;gap:10px;font-size:12px;font-weight:600;display:flex}.graph-title-sub{color:var(--cyan);text-transform:none;letter-spacing:0;font-weight:500}.graph-axis-label{color:var(--text-mute);text-align:right;opacity:.6;font-size:11px}.mouse-canvas-wrap{border:1px solid var(--line);cursor:crosshair;background:#05050799;border-radius:12px;width:100%;height:320px;position:relative;overflow:hidden}.mouse-canvas{width:100%;height:100%;display:block}.canvas-prompt{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.canvas-prompt-icon{color:var(--text-mute);opacity:.4;font-size:36px;animation:3s ease-in-out infinite float-y}.canvas-prompt-text{color:var(--text-mute);opacity:.5;font-size:14px;font-weight:500}.jitter-graph{border:1px solid var(--line);background:#00000040;border-radius:8px;width:100%;height:80px;display:block}.click-arena{justify-content:center;align-items:center;padding:32px 0;display:flex}.click-target{cursor:pointer;background:#4ce6dc0a;border:2px solid #4ce6dc4d;border-radius:50%;justify-content:center;align-items:center;width:160px;height:160px;transition:border-color .2s,background .2s,transform .1s;display:flex;position:relative}.click-target:hover:not(:disabled){background:#4ce6dc14;border-color:#4ce6dc8c;transform:scale(1.03)}.click-target:active:not(:disabled){transform:scale(.96)}.click-target--active{border-color:#4ce6dc80}.click-target--done{background:#4ce6dc0f;border-color:#4ce6dc99}.click-ring{pointer-events:none;border:2px solid #4ce6dc66;border-radius:50%;position:absolute;inset:-2px}.click-ring-1{animation:2s ease-out infinite click-ring-pulse}.click-ring-2{animation:2s ease-out 1s infinite click-ring-pulse}.click-target-inner{z-index:1;flex-direction:column;align-items:center;gap:2px;display:flex;position:relative}.click-big{font-family:var(--font-display);color:var(--text);letter-spacing:-.04em;font-size:36px;font-weight:700;line-height:1}.click-sub{color:var(--text-dim);font-size:13px;font-weight:500}.interval-graph-wrap{flex-direction:column;gap:10px;display:flex}.interval-bars{border:1px solid var(--line);background:#00000040;border-radius:8px;align-items:flex-end;gap:6px;height:80px;padding:8px;display:flex}.interval-bar-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:100%;display:flex}.interval-bar{border-radius:3px 3px 0 0;width:100%;min-height:4px;transition:height .2s}.interval-bar-val{color:var(--text-mute);font-size:9px;font-family:var(--font-mono);white-space:nowrap}.reaction-arena{border:1px solid var(--line-strong);cursor:pointer;-webkit-user-select:none;user-select:none;background:#05050780;border-radius:14px;outline:none;justify-content:center;align-items:center;width:100%;min-height:280px;transition:background .25s,border-color .25s;display:flex;position:relative;overflow:hidden}.reaction-arena:focus-visible{box-shadow:0 0 0 2px var(--cyan)}.reaction-arena--wait{background:#050507b3;border-color:#ffffff14}.reaction-arena--go{background:#4ce6dc12;border-color:#4ce6dc80;box-shadow:inset 0 0 80px #4ce6dc0f,0 0 40px #4ce6dc26}.reaction-arena--early{background:#ff3b3b0f;border-color:#ff3b3b66}.reaction-arena--done{background:#4ce6dc0d;border-color:#4ce6dc4d}.reaction-idle,.reaction-countdown,.reaction-waiting,.reaction-go{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:20px;display:flex}.reaction-start-icon{opacity:.4;font-size:48px}.reaction-cta{color:var(--text-mute);font-size:15px;font-weight:500}.reaction-early-label{font-family:var(--font-display);color:var(--red);letter-spacing:-.02em;font-size:32px;font-weight:700}.reaction-result{flex-direction:column;align-items:center;gap:6px;display:flex}.reaction-ms{font-family:var(--font-display);color:var(--cyan);letter-spacing:-.04em;font-size:52px;font-weight:700;line-height:1}.reaction-ms span{color:var(--text-dim);margin-left:2px;font-size:28px}.reaction-cat{color:var(--text-dim);font-size:16px;font-weight:600}.reaction-countdown-num{font-family:var(--font-display);color:var(--text);letter-spacing:-.06em;font-size:96px;font-weight:700;line-height:1;animation:.95s cubic-bezier(.3,.7,.3,1) both react-countdown}.reaction-countdown-sub{color:var(--text-mute);font-size:15px;font-weight:500}.reaction-dots{gap:10px;display:flex}.reaction-dots span{background:var(--text-dim);border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite react-dots}.reaction-dots span:nth-child(2){animation-delay:.2s}.reaction-dots span:nth-child(3){animation-delay:.4s}.reaction-waiting-sub{color:var(--text-mute);font-size:15px;font-weight:500}.reaction-go-text{font-family:var(--font-display);color:var(--cyan);letter-spacing:-.05em;text-shadow:0 0 40px var(--cyan-glow), 0 0 80px var(--cyan-glow);font-size:80px;font-weight:700;line-height:1;animation:.25s cubic-bezier(.2,.8,.2,1) both react-go-pop}.reaction-go-sub{color:var(--cyan);opacity:.8;font-size:16px;font-weight:600}.attempts-strip{color:var(--text-dim);border:1px solid var(--line);background:#ffffff05;border-radius:8px;align-items:center;gap:10px;padding:10px 14px;font-size:13px;display:flex}.attempts-sep{color:var(--text-mute)}.reaction-timeline-wrap{flex-direction:column;gap:10px;display:flex}.reaction-timeline{background:#ffffff0f;border-radius:999px;height:10px;position:relative;overflow:visible}.reaction-timeline-fill{background:linear-gradient(90deg, var(--cyan), var(--amber));border-radius:999px;height:100%;transition:width .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px #4ce6dc66}.reaction-timeline-mark{flex-direction:column;align-items:center;gap:2px;display:flex;position:absolute;top:-14px;transform:translate(-50%)}.rtm-line{background:#ffffff1f;width:1px;height:28px;margin-top:10px}.rtm-label{color:var(--text-mute);font-size:10px;font-family:var(--font-mono);margin-top:2px}.reaction-timeline-labels{justify-content:space-between;margin-top:6px;font-size:11px;font-weight:600;display:flex}.demo-tag{color:var(--amber);text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;background:#fbbf2412;border:1px solid #fbbf2440;border-radius:4px;margin-right:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.frame-compare-grid{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.frame-demo-card{border:1px solid var(--line);background:#ffffff04;border-radius:12px;flex-direction:column;gap:10px;padding:16px;display:flex}.frame-demo-card--bad{border-color:#fbbf242e}.frame-demo-card--good{border-color:#4ce6dc33}.frame-demo-card-label{color:var(--text-dim);align-items:center;gap:7px;font-size:13px;font-weight:600;display:flex}.fdot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.fdot--bad{background:var(--amber);box-shadow:0 0 6px var(--amber)}.fdot--good{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.frame-canvas{background:#00000059;border-radius:8px;width:100%;height:110px;display:block}.frame-demo-card-desc{color:var(--text-mute);margin:0;font-size:12px;line-height:1.4}.frame-vs-divider{font-family:var(--font-display);color:var(--text-mute);letter-spacing:.1em;text-align:center;font-size:11px;font-weight:800}.ft-section{flex-direction:column;gap:12px;display:flex}.ft-compare{grid-template-columns:1fr 1fr;gap:16px;display:grid}.ft-col{flex-direction:column;gap:8px;display:flex}.ft-col-label{text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600}.ft-bars{border:1px solid var(--line);background:#00000047;border-radius:8px;align-items:flex-end;gap:4px;height:90px;padding:8px;display:flex}.ft-bar{border-radius:3px 3px 0 0;flex:1;min-height:4px}.frame-info-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.frame-info-item{border:1px solid var(--line);background:#ffffff04;border-radius:10px;align-items:flex-start;gap:12px;padding:14px;display:flex}.frame-info-icon{flex-shrink:0;margin-top:1px;font-size:18px}.frame-info-icon--warn{color:var(--amber)}.frame-info-icon--good{color:var(--cyan)}.frame-info-item strong{color:var(--text);margin-bottom:3px;font-size:13px;font-weight:600;display:block}.frame-info-item p{color:var(--text-dim);margin:0;font-size:12px;line-height:1.45}.results-section{padding:0 0 60px;animation:.5s both test-fade-up}.results-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(135deg,#4ce6dc0a,#0c0c12f2);border:1px solid #4ce6dc33;border-radius:16px;padding:28px;box-shadow:0 0 60px #4ce6dc0f}.results-card-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.results-card-title{font-family:var(--font-display);color:var(--text);letter-spacing:-.02em;font-size:20px;font-weight:700}.results-card-sub{color:var(--text-dim);margin-top:2px;font-size:13px}.results-copy-btn{flex-shrink:0}.results-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;display:grid}.result-item{border:1px solid var(--line);background:#ffffff05;border-radius:12px;align-items:flex-start;gap:14px;padding:16px;display:flex}.result-item-icon{color:var(--text-mute);flex-shrink:0;margin-top:2px;font-size:22px}.result-item-body{flex-direction:column;gap:3px;display:flex}.result-item-value{font-family:var(--font-display);letter-spacing:-.03em;font-size:28px;font-weight:700;line-height:1;transition:color .3s}.result-item-unit{color:var(--text-dim);margin-left:1px;font-size:16px;font-weight:500}.result-item-name{color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600}.result-item-tag{color:var(--cyan);font-size:13px;font-weight:600}.test-cta-section{padding:0 0 100px}.test-cta-card{border:1px solid var(--line-strong);text-align:center;background:linear-gradient(135deg,#ffffff05,#0c0c12e6);border-radius:20px;padding:56px 52px;position:relative;overflow:hidden}.test-cta-card:before{content:"";filter:blur(40px);pointer-events:none;background:radial-gradient(#4ce6dc14,#0000 70%);width:500px;height:300px;position:absolute;top:-80px;left:50%;transform:translate(-50%)}.test-cta-tag{color:var(--cyan);letter-spacing:.06em;text-transform:uppercase;background:#4ce6dc0f;border:1px solid #4ce6dc38;border-radius:999px;margin-bottom:20px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-block}.test-cta-h2{font-family:var(--font-display);color:var(--text);letter-spacing:-.03em;margin:0 0 14px;font-size:clamp(26px,3.5vw,40px);font-weight:700}.test-cta-body{color:var(--text-dim);max-width:500px;margin:0 auto 28px;font-size:16px;line-height:1.6}.test-cta-features{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;margin-bottom:32px;display:flex}.cta-feat{color:var(--text-dim);align-items:center;gap:7px;font-size:14px;font-weight:500;display:flex}.cta-feat-icon{color:var(--cyan);font-weight:700}.test-cta-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}@media (max-width:900px){.test-metrics{grid-template-columns:repeat(3,1fr)}.frame-compare-grid{grid-template-columns:1fr;gap:12px}.frame-vs-divider{text-align:center}.frame-info-grid,.ft-compare{grid-template-columns:1fr}.test-cta-card{padding:40px 28px}}@media (max-width:640px){.test-hero{padding:72px 0 56px}.test-panel{gap:18px;padding:20px}.test-tab-label{display:none}.test-tab{flex:none;padding:12px}.test-metrics{grid-template-columns:repeat(3,1fr);gap:8px}.metric-card{padding:12px}.metric-value{font-size:22px}.mouse-canvas-wrap{height:220px}.results-grid{grid-template-columns:1fr 1fr}.test-cta-features{flex-direction:column;gap:10px}}
