.typing-practice-container{width:min(100%,72rem);min-height:calc(100vh - 9rem);color:var(--text-color);flex-direction:column;align-items:center;margin:0 auto;padding:1rem 1rem 0;display:flex}.time-snippet_container{justify-content:flex-end;width:100%;margin-bottom:1rem;display:flex}.time-snippet{border:1px solid var(--surface-border);background:var(--surface-soft);box-shadow:var(--surface-shadow-soft);color:var(--text-muted);-webkit-backdrop-filter:blur(18px);border-radius:999px;padding:.7rem 1rem}.typing-practice-header{text-align:center;margin-bottom:.75rem;font-size:clamp(2.5rem,6vw,4.6rem);line-height:.98}.typing-practice-subtext{text-align:center;max-width:40rem;color:var(--text-muted);margin-bottom:1rem;font-size:1.05rem;line-height:1.7}.text-length-slider,.graph-container,.graph,.display-text,.input-box,.progress-bar,.overlay-content{border:1px solid var(--surface-border);background:var(--surface-bg);box-shadow:var(--surface-shadow);-webkit-backdrop-filter:blur(18px)}.text-length-slider{border-radius:1.4rem;width:min(100%,62rem);margin-bottom:1rem;padding:1rem 1.1rem}.text-length-label{color:var(--text-muted);text-align:center;margin-bottom:.75rem;display:block}.slider-controls{justify-content:center;align-items:center;gap:1rem;display:flex}.refresh-text-btn,.reset-button,.new-text-button,.length-button{cursor:pointer;border:none;border-radius:999px;padding:.82rem 1.15rem;font-weight:600}.refresh-text-btn{background:var(--surface-strong);color:var(--text-color);border:1px solid var(--surface-border)}.reset-button,.new-text-button,.length-button{background:var(--accent-color);color:var(--accent-contrast)}.refresh-text-btn:hover,.reset-button:hover,.new-text-button:hover,.length-button:hover{transform:translateY(-1px)}.slider{appearance:none;background:#94a3b84d;border-radius:999px;outline:none;width:min(100%,18rem);height:.45rem}.slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#2563eb;border:2px solid #fff;border-radius:999px;width:1.15rem;height:1.15rem}.slider::-moz-range-thumb{cursor:pointer;background:#2563eb;border:2px solid #fff;border-radius:999px;width:1.15rem;height:1.15rem}.progress-bar{border-radius:999px;width:min(100%,62rem);height:.85rem;margin-bottom:1.2rem;overflow:hidden}.progress{border-radius:inherit;background:linear-gradient(90deg,#2563eb 0%,#0f766e 100%);height:100%}.display-text{white-space:pre-wrap;word-wrap:break-word;-webkit-user-select:none;user-select:none;caret-color:#0000;border-radius:1.5rem;width:min(100%,62rem);margin-bottom:1rem;padding:1.35rem 1.4rem;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.8}.correct-text{color:#059669}.remaining-text{color:var(--text-muted)}.mistake{color:#dc2626}.input-box{width:min(100%,62rem);min-height:8rem;color:var(--text-color);background:var(--input-bg);resize:vertical;border-radius:1.4rem;outline:none;padding:1rem 1.1rem;line-height:1.6}.input-box:focus{border-color:#2563eb73;box-shadow:0 0 0 4px #2563eb1f}.input-error{border-color:#dc26266b}.overlay{z-index:1000;background:#030f1a94;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.overlay-content{text-align:center;border-radius:2rem;width:min(100%,30rem);padding:2rem}.overlay-content p{color:var(--text-muted);margin-top:.5rem}.congratulations-trophy-logo-image{width:auto;height:8rem;margin:0 auto 1rem;display:block}.graph-container{border-radius:1.6rem;width:min(100%,62rem);margin:1.5rem 0 0;padding:1.2rem}.graphs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.graph{border-radius:1.2rem;padding:1rem}@media (max-width:768px){.typing-practice-container{padding-inline:.75rem}.text-length-slider,.display-text,.input-box,.progress-bar,.graph-container{width:100%}.slider-controls{flex-direction:column}.graphs{grid-template-columns:1fr}}