.keyboard{width:90%;max-width:1200px;padding:var(--space-4);margin:0 auto;background:linear-gradient(135deg,var(--panel),var(--panel-end));border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0;container-type:inline-size}.keyboard-row{display:grid;grid-template-columns:repeat(60,minmax(0,1fr));margin-bottom:var(--key-gap)}.cell{margin:0 calc(var(--key-gap) / 2);border-radius:var(--radius-md);border:2px solid var(--line-strong);text-align:center;color:var(--ink);font-size:var(--text-lg);font-weight:600;font-family:var(--font-mono);padding:var(--space-3) 6px;min-width:0;white-space:nowrap;display:flex;align-items:center;justify-content:center;cursor:default;transition:all .2s ease;box-shadow:var(--shadow-key);position:relative;-webkit-user-select:none;user-select:none}.key-shift{margin-left:.6ch}.key-compact{display:none;font-family:var(--font-symbols);font-size:1.5em;line-height:1}.cell:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,#ffffff26,#fff0);border-radius:var(--radius-md) var(--radius-md) 0 0;pointer-events:none}.cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-key-hover);border-color:var(--ink-muted)}.cell:active{transform:translateY(1px);box-shadow:var(--shadow-key-pressed)}.highlight{background-color:var(--key-target)!important;animation:pulseGlow .6s ease-in-out;border-color:var(--key-target-edge)!important;box-shadow:0 0 20px color-mix(in srgb,var(--key-target) 60%,transparent),0 0 40px color-mix(in srgb,var(--key-target) 40%,transparent),inset 0 0 15px #ffffff4d!important;transform:scale(1.05);color:var(--on-key-target)!important;font-weight:700}.weak{border-color:var(--weak-key);box-shadow:0 0 0 2px var(--weak-key),0 0 14px color-mix(in srgb,var(--weak-key) 60%,transparent),inset 0 -3px 8px #0000004d}.weak:after,.weak-key-dot{width:9px;height:9px;border-radius:50%;background:var(--weak-key);box-shadow:0 0 6px var(--weak-key)}.weak:after{content:"";position:absolute;top:5px;right:5px}.weak-key-legend{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--key-gap);color:var(--ink);font-size:var(--text-md)}.weak-key-dot{display:inline-block}@keyframes pulseGlow{0%{transform:scale(1);box-shadow:0 0 0 transparent}50%{transform:scale(1.08);box-shadow:0 0 30px color-mix(in srgb,var(--key-target) 80%,transparent),0 0 60px color-mix(in srgb,var(--key-target) 50%,transparent),inset 0 0 20px #fff6}to{transform:scale(1.05);box-shadow:0 0 20px color-mix(in srgb,var(--key-target) 60%,transparent),0 0 40px color-mix(in srgb,var(--key-target) 40%,transparent),inset 0 0 15px #ffffff4d}}@media (max-width: 768px){.keyboard{width:95%}}@container (max-width: 900px){.cell{font-size:var(--text-base);padding:var(--space-3) var(--space-1)}.key-full{display:none}.key-compact{display:inline}}@container (max-width: 660px){.cell{font-size:clamp(10px,4cqi,var(--text-base));padding:10px 0}.key-shift{display:none}}.length-toggle{float:right;display:flex;align-items:center;gap:var(--space-1);margin:0 0 var(--space-2) var(--space-4);padding:var(--space-1);border:2px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--bg-0);font-family:var(--font-sans);font-size:var(--text-lg);line-height:1}.length-toggle button{min-width:40px;padding:var(--space-1) var(--space-3);border:none;border-radius:var(--radius-pill);background:transparent;color:var(--ink-secondary);font:inherit;font-weight:600;cursor:pointer}.length-toggle button:hover{color:var(--ink)}.length-toggle button[aria-pressed=true]{background:var(--key-target);color:var(--on-key-target)}.length-toggle button:focus-visible{outline:2px solid var(--key-target);outline-offset:2px}.length-toggle-unit{padding:0 var(--space-2) 0 var(--space-1);color:var(--ink-secondary)}@media (max-width: 768px){.length-toggle{float:none;width:fit-content;margin:0 0 var(--space-3) auto;font-size:var(--text-base)}}.typing-display{font-size:var(--text-3xl);width:100%;max-width:1200px;margin:var(--space-4) auto;padding:var(--space-5);background:linear-gradient(135deg,var(--panel),var(--panel-end));border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);word-wrap:break-word;line-height:1.5;font-family:var(--font-mono);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--line);flex-shrink:0}.typed-portion{color:var(--typed);text-shadow:0 0 10px color-mix(in srgb,var(--typed) 50%,transparent);font-weight:600}.remaining-passage{color:var(--ink);text-shadow:0 2px 4px rgba(0,0,0,.3);opacity:.95}.practice-tag{display:block;width:fit-content;margin-bottom:var(--space-3);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--weak-key);color:var(--ink);font-size:var(--text-base);font-weight:600}@media (max-width: 768px){.typing-display{font-size:var(--text-2xl)}}.performance{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4) var(--space-6);font-size:var(--text-4xl);padding:var(--space-3);text-align:center;max-width:1200px;margin:0 auto;flex-shrink:0}.wpm{font-weight:700;padding:var(--space-4) var(--space-8);border-radius:var(--radius-lg);display:inline-block;text-shadow:0 2px 8px rgba(0,0,0,.5),0 0 20px currentColor;background:linear-gradient(135deg,var(--panel),var(--panel-end));box-shadow:var(--shadow-raised),0 0 40px currentColor;border:2px solid currentColor;animation:wpmAppear .5s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:2px}@keyframes wpmAppear{0%{transform:scale(.8) translateY(20px);opacity:0}60%{transform:scale(1.05) translateY(-5px)}to{transform:scale(1) translateY(0);opacity:1}}.personal-best{font-size:var(--text-2xl);color:var(--personal-best);text-shadow:0 0 15px color-mix(in srgb,var(--personal-best) 60%,transparent);font-weight:600}.completion-message{animation:fadeIn .5s ease-in}.completion-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.performance{font-size:var(--text-3xl)}.personal-best{font-size:var(--text-xl)}}.progress{width:90%;max-width:800px;margin:var(--space-5) auto;padding:var(--space-4) var(--space-5);background:var(--bg-1);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);color:var(--ink);box-sizing:border-box;flex-shrink:0}.progress h3{margin:0 0 var(--space-2);font-size:var(--text-lg);font-weight:600}.progress-chart{position:relative}.progress-chart svg{display:block;width:100%;height:auto;overflow:visible}.progress-grid{stroke:var(--line-subtle);stroke-width:1}.progress-best{stroke:var(--chart-best);stroke-width:1}.progress-line{fill:none;stroke:var(--chart-series);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.progress-dot{fill:var(--chart-series);stroke:var(--bg-1);stroke-width:2}.progress-crosshair{stroke:var(--ink-muted);stroke-width:1}.progress-tick{fill:var(--ink-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.progress-label{fill:var(--ink-secondary);font-size:var(--text-sm);font-weight:600}.progress-tooltip{position:absolute;transform:translate(-50%,calc(-100% - 12px));display:flex;flex-direction:column;gap:2px;padding:6px 10px;background:var(--bg-0);border:1px solid var(--line-subtle);border-radius:var(--radius-sm);font-size:var(--text-sm);white-space:nowrap;pointer-events:none}.progress-tooltip span{color:var(--ink-secondary)}.progress-table{margin-top:var(--space-2);font-size:var(--text-md);color:var(--ink-secondary)}.progress-table summary{cursor:pointer}.progress-table table{width:100%;margin-top:var(--space-2);border-collapse:collapse;font-variant-numeric:tabular-nums}.progress-table th,.progress-table td{padding:var(--space-1) var(--space-2);text-align:right;border-bottom:1px solid var(--line-subtle)}.progress-table th:nth-child(2),.progress-table td:nth-child(2),.progress-table th:nth-child(3),.progress-table td:nth-child(3){text-align:left}@media (max-width: 768px){.progress{width:95%;padding:var(--space-3)}}@media (max-width: 480px){.progress-tick{font-size:clamp(18px,calc(54px - 7.5vw),30px)}.progress-label{font-size:clamp(19.5px,calc(58.5px - 8.125vw),32.5px);text-anchor:end}}.dialog{width:min(680px,calc(100vw - 2 * var(--space-4)));max-height:calc(100vh - 2 * var(--space-4));padding:0;border:2px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--ink);box-shadow:var(--shadow-floating);font-family:var(--font-sans)}.dialog::backdrop{background:color-mix(in srgb,var(--bg-0) 75%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-content{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) var(--space-6)}.dialog h2{margin:0;padding-right:var(--space-8);font-size:var(--text-2xl);text-wrap:balance}.dialog p{margin:0;font-size:var(--text-base);line-height:1.45}.dialog-close{position:absolute;top:var(--space-3);right:var(--space-3);width:36px;height:36px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--ink-secondary);font-size:var(--text-2xl);line-height:1;cursor:pointer}.dialog-close:hover{color:var(--ink);background:var(--line-subtle)}.dialog-close:focus-visible,.dialog-action:focus-visible{outline:2px solid var(--key-target);outline-offset:2px}.dialog .dialog-action{align-self:center;margin-top:var(--space-1);padding:var(--space-3) var(--space-8);font-size:var(--text-lg)}.intro section{display:flex;flex-direction:column;gap:var(--space-2)}.intro h3{margin:0;font-size:var(--text-md);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--personal-best)}.intro-steps{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding-left:var(--space-5);font-size:var(--text-base);line-height:1.45}.intro-note{color:var(--ink-secondary)}.intro .intro-note{font-size:var(--text-md)}