.ath-keyboard-workflow{display:grid;gap:1rem;padding:1rem;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:1rem;background:linear-gradient(135deg,color-mix(in srgb,var(--athaa-c1,var(--wp--preset--color--primary,#0f6c7f)) 8%,transparent),color-mix(in srgb,currentColor 3%,transparent));}
.ath-keyboard-workflow__head{display:flex;justify-content:space-between;gap:1rem;align-items:center;}
.ath-keyboard-workflow__head h5{margin:.15rem 0 .35rem;font-size:clamp(1.25rem,2.2vw,1.7rem);}
.ath-keyboard-workflow__head p{max-width:55ch;margin:0;color:color-mix(in srgb,currentColor 72%,transparent);}
.ath-keyboard-workflow__head img{width:6rem;height:4rem;object-fit:contain;opacity:.9;}
.ath-keyboard-workflow__eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--athaa-c1,var(--wp--preset--color--primary,#0f6c7f));}
.ath-keyboard-workflow__stats{display:flex;flex-wrap:wrap;gap:.55rem;}
.ath-keyboard-workflow__stats span{display:grid;gap:.1rem;min-width:5.2rem;padding:.55rem .7rem;border-radius:.65rem;background:color-mix(in srgb,currentColor 6%,transparent);}
.ath-keyboard-workflow__stats strong{font-size:1.15rem;}
.ath-keyboard-workflow__stats small{font-size:.68rem;opacity:.65;text-transform:uppercase;letter-spacing:.06em;}
.ath-keyboard-workflow__preset{display:grid;gap:.25rem;max-width:20rem;}
.ath-keyboard-workflow__preset span{font-size:.75rem;font-weight:700;}
.ath-keyboard-workflow__target{display:flex;flex-wrap:wrap;gap:0;padding:.8rem;border-radius:.7rem;background:color-mix(in srgb,currentColor 7%,transparent);font:700 clamp(1rem,2vw,1.25rem)/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em;}
.ath-keyboard-workflow__target span{border-bottom:2px solid transparent;}
.ath-keyboard-workflow__target span.is-correct{color:var(--athaa-c2,#1f8f81);}
.ath-keyboard-workflow__target span.is-wrong{color:#b54747;background:color-mix(in srgb,#b54747 12%,transparent);}
.ath-keyboard-workflow__target span.is-current{border-bottom-color:var(--athaa-c1,var(--wp--preset--color--primary,#0f6c7f));}
.ath-keyboard-workflow textarea{width:100%;resize:vertical;}
.ath-keyboard-workflow__actions{display:flex;gap:.55rem;flex-wrap:wrap;}
.ath-keyboard-workflow__actions button{min-height:2.3rem;padding:.5rem .8rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:.55rem;background:color-mix(in srgb,currentColor 4%,transparent);color:inherit;font-weight:700;cursor:pointer;}
.ath-keyboard-workflow__actions button:first-child{border-color:var(--athaa-c1,var(--wp--preset--color--primary,#0f6c7f));background:var(--athaa-c1,var(--wp--preset--color--primary,#0f6c7f));color:#fff;}
.ath-keyboard-workflow__actions button:disabled{opacity:.45;cursor:not-allowed;}
.ath-keyboard-workflow__progress{height:.35rem;overflow:hidden;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);}
.ath-keyboard-workflow__progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--athaa-c1,var(--wp--preset--color--primary,#0f6c7f)),var(--athaa-c2,#1f8f81));transition:width .15s ease;}
.ath-keyboard-workflow__status{margin:0;color:color-mix(in srgb,currentColor 72%,transparent);}
.ath-keyboard-workflow__result{padding:.7rem .8rem;border-left:3px solid var(--athaa-c2,#1f8f81);background:color-mix(in srgb,var(--athaa-c2,#1f8f81) 9%,transparent);}
@media (max-width:600px){.ath-keyboard-workflow__head{align-items:flex-start}.ath-keyboard-workflow__head img{width:4.5rem;height:3.2rem}.ath-keyboard-workflow__stats span{min-width:4.45rem}}
@media (prefers-reduced-motion:reduce){.ath-keyboard-workflow__progress span{transition:none}}