.key-press-tool:where(.astro-kuybveyo){--key-violet:#a78bfa;--key-violet-soft:#a78bfa24;background:radial-gradient(circle at 88% 0,#a78bfa21,#0000 22rem),linear-gradient(145deg,#161623fa,#0c121bfa);gap:24px;width:100%;margin-top:12px;padding:clamp(22px,4vw,42px);display:grid}.key-press-tool-header:where(.astro-kuybveyo),.key-press-event-heading:where(.astro-kuybveyo){justify-content:space-between;gap:18px;display:flex}.key-press-tool-header:where(.astro-kuybveyo)>div:where(.astro-kuybveyo){gap:14px;max-width:820px;display:grid}.key-press-tool:where(.astro-kuybveyo) h1:where(.astro-kuybveyo){text-transform:uppercase;margin-top:4px;font-size:clamp(2.2rem,6vw,4.5rem)}.key-press-tool:where(.astro-kuybveyo) h2:where(.astro-kuybveyo){font-size:clamp(1.35rem,3vw,1.9rem)}.key-press-tool-description:where(.astro-kuybveyo){color:var(--muted-strong);max-width:760px;font-size:clamp(1rem,2vw,1.15rem)}.key-press-feature-row:where(.astro-kuybveyo){color:var(--muted);flex-wrap:wrap;gap:8px;font-size:13px;display:flex}.key-press-feature-row:where(.astro-kuybveyo) span:where(.astro-kuybveyo):first-child,.key-press-feature-row:where(.astro-kuybveyo) span:where(.astro-kuybveyo):nth-child(4){color:var(--teal)}.key-press-controls:where(.astro-kuybveyo){gap:16px;display:grid}.key-press-duration-fieldset:where(.astro-kuybveyo){border:0;gap:12px;min-width:0;margin:0;padding:0;display:grid}.key-press-duration-fieldset:where(.astro-kuybveyo) legend:where(.astro-kuybveyo){color:var(--text);font-family:var(--font-heading);margin-bottom:4px;font-size:1.15rem;font-weight:700}.key-press-duration-options:where(.astro-kuybveyo){grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.key-press-duration-button:where(.astro-kuybveyo){border:1px solid var(--line);background:var(--panel-deep);color:var(--muted-strong);cursor:pointer;text-align:center;border-radius:12px;align-content:center;gap:3px;min-width:0;min-height:66px;padding:9px 7px;transition:border-color .16s,background .16s,color .16s,transform .16s;display:grid}.key-press-duration-button:where(.astro-kuybveyo) strong:where(.astro-kuybveyo){color:var(--text);font-family:var(--font-heading);font-size:1.15rem}.key-press-duration-button:where(.astro-kuybveyo) span:where(.astro-kuybveyo){color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.key-press-duration-button:where(.astro-kuybveyo):hover,.key-press-duration-button:where(.astro-kuybveyo).is-active{border-color:var(--key-violet);background:var(--key-violet-soft);color:var(--text);transform:translateY(-1px)}.key-press-duration-button:where(.astro-kuybveyo).is-active{border-color:var(--orange);background:var(--orange-soft)}.key-press-toolbar:where(.astro-kuybveyo){justify-content:space-between;align-items:center;gap:16px;display:flex}.key-press-toolbar:where(.astro-kuybveyo) p:where(.astro-kuybveyo){color:var(--muted);font-size:14px}.key-press-toolbar:where(.astro-kuybveyo) strong:where(.astro-kuybveyo){color:var(--text)}.key-press-test-zone:where(.astro-kuybveyo){color:var(--text);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 50% 40%,#a78bfa21,#0000 34%),linear-gradient(135deg,#0f1824fc,#080d15fc);border:1px dashed #4c7babbf;border-radius:20px;align-content:center;place-items:center;gap:12px;min-height:300px;padding:32px;display:grid;position:relative;overflow:hidden}.key-press-test-zone:where(.astro-kuybveyo):before,.key-press-test-zone:where(.astro-kuybveyo):after{content:"";pointer-events:none;border:1px solid #a78bfa1f;border-radius:50%;position:absolute}.key-press-test-zone:where(.astro-kuybveyo):before{width:270px;height:270px}.key-press-test-zone:where(.astro-kuybveyo):after{border-color:#2dd4bf1a;width:430px;height:430px}.key-press-test-zone:where(.astro-kuybveyo):hover,.key-press-tool:where(.astro-kuybveyo)[data-phase=running] .key-press-test-zone:where(.astro-kuybveyo){background:radial-gradient(circle at 50% 40%,#2dd4bf29,#0000 38%),linear-gradient(135deg,#12202bfc,#081018fc);border-color:#a78bfad1}.key-press-test-zone:where(.astro-kuybveyo):focus-visible{outline:3px solid var(--orange);outline-offset:4px}.key-press-zone-question:where(.astro-kuybveyo),.key-press-zone-label:where(.astro-kuybveyo),.key-press-zone-key:where(.astro-kuybveyo),.key-press-zone-status:where(.astro-kuybveyo),.key-press-zone-privacy:where(.astro-kuybveyo){z-index:1;position:relative}.key-press-zone-question:where(.astro-kuybveyo){color:var(--key-violet);font-family:var(--font-mono);text-shadow:0 0 24px #a78bfa8c;font-size:clamp(3.8rem,10vw,5.8rem);line-height:.8}.key-press-zone-label:where(.astro-kuybveyo){color:var(--muted-strong);text-align:center;font-size:clamp(1rem,2vw,1.2rem)}.key-press-zone-key:where(.astro-kuybveyo){color:var(--text);font-family:var(--font-mono);letter-spacing:.15em;background:linear-gradient(#f4f7fb1f,#f4f7fb0a);border:1px solid #f4f7fb38;border-bottom:4px solid #f4f7fb1f;border-radius:10px;place-items:center;min-width:110px;min-height:44px;padding:5px 18px;display:grid}.key-press-zone-status:where(.astro-kuybveyo),.key-press-zone-privacy:where(.astro-kuybveyo){color:var(--muted);text-align:center;font-size:13px}.key-press-zone-privacy:where(.astro-kuybveyo){color:var(--teal)}.key-press-progress:where(.astro-kuybveyo){background:#3a4c619e;border-radius:999px;height:6px;overflow:hidden}.key-press-progress:where(.astro-kuybveyo) span:where(.astro-kuybveyo){border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--key-violet),var(--orange));width:0;height:100%;transition:width .1s linear;display:block}.key-press-metrics:where(.astro-kuybveyo){grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.key-press-metric-card:where(.astro-kuybveyo){border:1px solid var(--line);background:#0d141dd1;border-radius:14px;align-content:center;gap:6px;min-height:112px;padding:16px;display:grid}.key-press-metric-card:where(.astro-kuybveyo) span:where(.astro-kuybveyo),.key-press-metric-card:where(.astro-kuybveyo) small:where(.astro-kuybveyo){color:var(--muted);font-size:12px}.key-press-metric-card:where(.astro-kuybveyo) strong:where(.astro-kuybveyo){color:var(--text);font-family:var(--font-mono);white-space:nowrap;font-size:clamp(1.35rem,3vw,1.8rem)}.key-press-metric-card--highlight:where(.astro-kuybveyo){background:var(--key-violet-soft);border-color:#a78bfa75}.key-press-result-panel:where(.astro-kuybveyo){background:linear-gradient(135deg,#113034e6,#0d1b22f5);border:1px solid #2dd4bf6b;border-radius:16px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 24px;padding:24px;display:grid}.key-press-result-panel:where(.astro-kuybveyo)[hidden]{display:none}.key-press-result-panel:where(.astro-kuybveyo) p:where(.astro-kuybveyo):not(.eyebrow){color:var(--muted-strong)}.key-press-result-grade:where(.astro-kuybveyo){color:var(--orange);font-family:var(--font-mono);font-size:clamp(3rem,8vw,5.5rem);line-height:1}.key-press-result-actions:where(.astro-kuybveyo){flex-wrap:wrap;grid-column:1/-1;gap:10px;display:flex}.key-press-event-panel:where(.astro-kuybveyo){border-top:1px solid #3a4c619e;gap:14px;padding-top:20px;display:grid}.key-press-event-heading:where(.astro-kuybveyo){align-items:end}.key-press-event-heading:where(.astro-kuybveyo)>span:where(.astro-kuybveyo){color:var(--muted);font-size:13px}.key-press-event-log:where(.astro-kuybveyo){gap:8px;min-height:44px;margin:0;padding:0;list-style:none;display:grid}.key-press-event-columns:where(.astro-kuybveyo),.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row{grid-template-columns:minmax(72px,.55fr) minmax(0,1.8fr) minmax(108px,.9fr);align-items:center;gap:14px;display:grid}.key-press-event-columns:where(.astro-kuybveyo){color:var(--muted);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding:0 14px;font-size:11px}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row{color:var(--muted);background:#0d141dc2;border:1px solid #3a4c6194;border-radius:10px;min-height:46px;padding:9px 14px;transition:border-color .16s,background .16s,transform .16s}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row:hover{background:#191f32e6;border-color:#a78bfa94;transform:translate(2px)}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row.is-down{border-left:3px solid var(--teal)}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row.is-up{border-left:3px solid var(--key-violet)}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-time{color:var(--muted);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-key{color:var(--text);font-family:var(--font-mono);letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-type{color:var(--muted-strong);font-family:var(--font-body);letter-spacing:.03em;text-align:right;font-size:12px;font-weight:700}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row.is-down .key-press-event-type{color:var(--teal)}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row.is-up .key-press-event-type{color:var(--key-violet)}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-empty{color:var(--muted);font-family:var(--font-body);padding:10px 14px;display:block}@media (max-width:980px){.key-press-metrics:where(.astro-kuybveyo){grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:720px){.key-press-tool:where(.astro-kuybveyo){gap:20px;margin-top:0;padding:20px 16px}.key-press-tool-header:where(.astro-kuybveyo),.key-press-event-heading:where(.astro-kuybveyo){gap:10px;display:grid}.key-press-duration-options:where(.astro-kuybveyo){grid-template-columns:repeat(3,minmax(0,1fr))}.key-press-toolbar:where(.astro-kuybveyo){flex-direction:column;align-items:stretch;gap:10px}.key-press-toolbar:where(.astro-kuybveyo) .site-button-alt:where(.astro-kuybveyo){width:100%}.key-press-test-zone:where(.astro-kuybveyo){min-height:270px;padding:24px 14px}.key-press-metrics:where(.astro-kuybveyo){grid-template-columns:repeat(2,minmax(0,1fr))}.key-press-result-panel:where(.astro-kuybveyo){grid-template-columns:minmax(0,1fr) auto}}@media (max-width:460px){.key-press-duration-options:where(.astro-kuybveyo){grid-template-columns:repeat(2,minmax(0,1fr))}.key-press-metric-card:where(.astro-kuybveyo){min-height:92px;padding:13px}.key-press-result-panel:where(.astro-kuybveyo){grid-template-columns:1fr;display:grid}.key-press-result-grade:where(.astro-kuybveyo){justify-self:start}.key-press-result-actions:where(.astro-kuybveyo){grid-template-columns:1fr;display:grid}.key-press-result-actions:where(.astro-kuybveyo) .site-button:where(.astro-kuybveyo),.key-press-result-actions:where(.astro-kuybveyo) .site-button-alt:where(.astro-kuybveyo){width:100%}.key-press-event-columns:where(.astro-kuybveyo),.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row{grid-template-columns:minmax(58px,.65fr) minmax(0,1.45fr) minmax(92px,1fr);gap:8px}.key-press-event-columns:where(.astro-kuybveyo){padding:0 12px;font-size:10px}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row{padding:8px 12px}.key-press-event-log:where(.astro-kuybveyo) .key-press-event-type{font-size:11px}}@media (prefers-reduced-motion:reduce){.key-press-duration-button:where(.astro-kuybveyo),.key-press-event-log:where(.astro-kuybveyo) .key-press-event-row,.key-press-progress:where(.astro-kuybveyo) span:where(.astro-kuybveyo){transition:none}}.key-press-page:where(.astro-apwji6b3){padding-bottom:72px}.key-press-page:where(.astro-apwji6b3)>.guide-article:where(.astro-apwji6b3){width:100%;max-width:none;margin-top:clamp(20px,2.5vw,32px)}.key-press-page:where(.astro-apwji6b3)>.key-press-tool:where(.astro-apwji6b3){width:100%}.key-press-page:where(.astro-apwji6b3) .game-grid:where(.astro-apwji6b3) .site-card:where(.astro-apwji6b3){min-height:220px}.key-press-page:where(.astro-apwji6b3) .key-press-related:where(.astro-apwji6b3){margin-top:8px}.key-press-page:where(.astro-apwji6b3) .related-tests:where(.astro-apwji6b3) a:where(.astro-apwji6b3){min-height:112px}@media (max-width:720px){.key-press-page:where(.astro-apwji6b3) .game-grid:where(.astro-apwji6b3) .site-card:where(.astro-apwji6b3){min-height:0}}