.typing-practice{--typing-ink: #153044;--typing-teal: #167b77;--typing-coral: #e58d68;padding:clamp(18px,3vw,32px);border:1px solid #d8e4e7;border-radius:24px;background:linear-gradient(145deg,#f7fbfb,#eef5f4 62%,#f8f5ef);box-shadow:0 20px 56px #17344912}.typing-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:22px}.typing-toolbar label{margin-right:2px;color:#41586a;font-size:.87rem;font-weight:750}.typing-toolbar select{min-height:44px;padding:0 36px 0 12px;border:1px solid #cbd8dc;border-radius:12px;background:#fff;color:#243c4a}.typing-toolbar .tool-button{min-height:44px;border-radius:12px}.typing-practice-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:stretch;gap:16px}.typing-prompt-card,.typing-input-card{min-width:0;padding:clamp(17px,2.5vw,25px);border:1px solid #d6e1e4;border-radius:19px;background:#fff;box-shadow:0 10px 24px #1734490b}.typing-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#748a94;font-size:.68rem;font-weight:850;letter-spacing:.14em}.typing-card-top span:last-child{color:var(--typing-teal);font-variant-numeric:tabular-nums}.typing-prompt-text{min-height:130px;margin-block:25px 22px;color:var(--typing-ink);font-size:clamp(1.25rem,2.3vw,1.85rem);font-weight:680;letter-spacing:-.035em;line-height:1.7}.typing-progress-track{height:7px;overflow:hidden;border-radius:99px;background:#e8efef}.typing-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--typing-teal),#58b4a4,var(--typing-coral));transition:width .16s ease}.typing-input-card{display:flex;flex-direction:column;gap:10px;color:#536a78;font-size:.78rem;font-weight:800;letter-spacing:.05em}.typing-input-card textarea{flex:1;width:100%;min-height:164px;resize:vertical;padding:15px;border:1px solid #d2dfe1;border-radius:12px;background:#f8fbfb;color:#173a4b;font-size:1.02rem;line-height:1.7}.typing-input-card textarea:disabled{color:#758a91;background:#f5f7f7}.typing-input-card textarea::placeholder{color:#91a3a8}.typing-practice :is(button,select,textarea):focus-visible{outline:3px solid #62aaa4;outline-offset:3px}.typing-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:16px}.typing-results article{display:flex;min-height:84px;flex-direction:column;justify-content:space-between;gap:10px;padding:14px 16px;border:1px solid #d9e4e4;border-radius:15px;background:#ffffffd9}.typing-results article>span{color:#6f828a;font-size:.63rem;font-weight:850;letter-spacing:.12em}.typing-results strong{color:var(--typing-ink);font-size:1.42rem;font-variant-numeric:tabular-nums;line-height:1}.typing-results strong small{color:#71858e;font-size:.68rem}.typing-status{margin-top:14px;border-color:#cfe0de;background:#ffffffd9}.typing-method-note{display:flex;gap:14px;align-items:baseline;margin-top:20px;padding:16px 18px;border-left:3px solid #75aaa3;border-radius:0 12px 12px 0;background:#f4f8f6;color:#526672}.typing-method-note strong{flex:0 0 auto;color:#264553;font-size:.87rem}.typing-method-note p{font-size:.85rem;line-height:1.6}.typing-practice :is(select,textarea,button):disabled{cursor:not-allowed}@media(max-width:760px){.typing-practice-layout{grid-template-columns:1fr}.typing-prompt-text{min-height:0}.typing-input-card textarea{min-height:135px}}@media(max-width:560px){.typing-toolbar{display:grid;grid-template-columns:auto minmax(100px,1fr)}.typing-toolbar .tool-button{grid-column:span 2}.typing-results{grid-template-columns:repeat(2,minmax(0,1fr))}.typing-method-note{align-items:flex-start;flex-direction:column;gap:5px}}
