:root{--blue:#0756a3;--navy:#082b4f;--gold:#f5b82e;--ink:#172536;--muted:#64748b;--bg:#eef5fb;--ok:#168a5b}*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,Arial;color:var(--ink);background:var(--bg)}header{background:linear-gradient(120deg,var(--navy),var(--blue));color:#fff;padding:18px}.brand{max-width:1100px;margin:auto;display:flex;align-items:center;gap:14px}.brand img{width:58px;height:58px;object-fit:contain;background:#fff;border-radius:50%}.brand h1{font-size:clamp(20px,4vw,30px);margin:0}.wrap{max-width:1100px;margin:26px auto;padding:0 18px}.panel,.card{background:#fff;border-radius:18px;padding:24px;box-shadow:0 8px 30px #0b3b6815}.entry{max-width:620px;margin:auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.stage{border:1px solid #d7e3ee;position:relative}.stage.locked{opacity:.55}.stage .status{font-size:13px;color:var(--muted)}label{font-weight:700;display:block;margin:13px 0 5px}input,select,textarea{width:100%;font:inherit;border:1px solid #b8c7d5;border-radius:10px;padding:12px}button,.button{display:inline-block;border:0;border-radius:10px;padding:12px 18px;background:var(--blue);color:#fff;font-weight:800;text-decoration:none;cursor:pointer}.secondary{background:#566579}.target{font:700 clamp(23px,4vw,38px)/1.7 ui-monospace,monospace;letter-spacing:2px;text-align:center;padding:22px;background:#f5f9fd;border-radius:14px;user-select:none}.practice{font:24px ui-monospace,monospace;min-height:140px;resize:vertical}.stats{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.pill{background:#e9f2fb;border-radius:999px;padding:8px 14px;font-weight:700}.timer{width:88px;height:88px;border-radius:50%;border:8px solid var(--gold);display:grid;place-items:center;font-size:22px;font-weight:900;margin:auto}.badge{color:var(--ok);font-weight:800}.notice{padding:12px;border-radius:10px;background:#fff5d6}.hidden{display:none}@media print{header,.actions,.no-print{display:none!important}body{background:#fff}.panel{box-shadow:none}}@media(max-width:600px){.wrap{margin:14px auto}.panel{padding:17px}.practice{font-size:19px}}

/* Stage 2 Home Row practice */
.training-panel{position:relative;isolation:isolate;overflow:hidden;width:100%}.training-content{position:relative;z-index:2}.training-panel.home-row::before{content:"";position:absolute;inset:88px 6% 76px;z-index:0;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='430' viewBox='0 0 920 430'%3E%3Cg fill='none' stroke='%230756a3' stroke-width='3'%3E%3Crect x='45' y='115' width='830' height='190' rx='30'/%3E%3Cg fill='%23d8eafa'%3E%3Crect x='92' y='155' width='60' height='60' rx='10'/%3E%3Crect x='162' y='155' width='60' height='60' rx='10'/%3E%3Crect x='232' y='155' width='60' height='60' rx='10'/%3E%3Crect x='302' y='155' width='60' height='60' rx='10'/%3E%3Crect x='372' y='155' width='60' height='60' rx='10'/%3E%3Crect x='488' y='155' width='60' height='60' rx='10'/%3E%3Crect x='558' y='155' width='60' height='60' rx='10'/%3E%3Crect x='628' y='155' width='60' height='60' rx='10'/%3E%3Crect x='698' y='155' width='60' height='60' rx='10'/%3E%3Crect x='768' y='155' width='60' height='60' rx='10'/%3E%3Crect x='330' y='235' width='260' height='45' rx='12'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23082b4f' font-family='Arial' text-anchor='middle'%3E%3Cg font-size='25' font-weight='700'%3E%3Ctext x='122' y='194'%3EA%3C/text%3E%3Ctext x='192' y='194'%3ES%3C/text%3E%3Ctext x='262' y='194'%3ED%3C/text%3E%3Ctext x='332' y='194'%3EF%3C/text%3E%3Ctext x='402' y='194'%3EG%3C/text%3E%3Ctext x='518' y='194'%3EH%3C/text%3E%3Ctext x='588' y='194'%3EJ%3C/text%3E%3Ctext x='658' y='194'%3EK%3C/text%3E%3Ctext x='728' y='194'%3EL%3C/text%3E%3Ctext x='798' y='194'%3E;%3C/text%3E%3Ctext x='460' y='265' font-size='18'%3ESPACE · THUMB%3C/text%3E%3C/g%3E%3Cg font-size='13'%3E%3Ctext x='122' y='95'%3EL Little%3C/text%3E%3Ctext x='192' y='73'%3EL Ring%3C/text%3E%3Ctext x='262' y='51'%3EL Middle%3C/text%3E%3Ctext x='367' y='29'%3EL Index%3C/text%3E%3Ctext x='553' y='29'%3ER Index%3C/text%3E%3Ctext x='658' y='51'%3ER Middle%3C/text%3E%3Ctext x='728' y='73'%3ER Ring%3C/text%3E%3Ctext x='798' y='95'%3ER Little%3C/text%3E%3C/g%3E%3C/g%3E%3Cg stroke='%230756a3' stroke-width='2'%3E%3Cpath d='M122 100v50M192 78v72M262 56v94M367 34l-35 116m35-116 35 116M553 34l35 116m-35-116-35 116M658 56v94M728 78v72M798 100v50'/%3E%3C/g%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:contain}.training-panel.home-row::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.76);pointer-events:none}.training-panel h2{margin-top:0}.training-panel .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 12px}.stat-item{min-width:0;padding:11px 14px;border:1px solid #d7e3ee;border-radius:12px;background:rgba(255,255,255,.88)}.stat-label{display:block;color:var(--muted);font-size:13px;font-weight:700}.stat-item strong{display:block;font-size:18px}.timer-track{width:100%;height:16px;overflow:hidden;border:1px solid #ccdae6;border-radius:999px;background:#e6edf4;margin:0 0 20px}.timer-bar{width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#28a4df);transform-origin:left center;transform:scaleX(1);will-change:transform}.practice:disabled{background:rgba(239,244,248,.92);color:var(--muted);cursor:not-allowed}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button,.actions .button{text-align:center}.training-panel .target,.training-panel .practice,.stat-item,.timer-track,.actions{position:relative;z-index:3}
@media(max-width:767px){.wrap{width:100%;margin:14px auto;padding:0 12px}.panel{width:100%;padding:17px}.training-panel .stats{grid-template-columns:1fr}.target{width:100%;padding:16px 10px;font-size:clamp(20px,7vw,30px);overflow-wrap:anywhere}.practice{width:100%;min-height:130px;font-size:19px;resize:vertical}.timer-track{width:100%}.actions{flex-direction:column}.actions button,.actions .button{width:100%}.training-panel.home-row::before{inset:150px 0 110px;background-size:100% auto}}
@media(max-width:360px){header{padding:14px 12px}.brand{gap:10px}.brand img{width:48px;height:48px}.wrap{padding:0 8px}.panel{padding:14px}.target{letter-spacing:1px}.stat-item{padding:9px 11px}}
/* Stage 2 interactive key guide */
.key-guide{position:relative;z-index:3;margin:16px 0 20px;padding:14px;border:1px solid #cbd9e6;border-radius:14px;background:rgba(255,255,255,.94)}.key-guide-help{margin:0 0 12px;text-align:center;color:var(--muted);font-size:14px}.key-guide-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.key-guide-key,.key-guide-key:disabled{position:relative;display:flex;flex:1 1 74px;max-width:98px;min-width:68px;min-height:78px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 6px;border:2px solid #9fb1c2;border-bottom-width:5px;border-radius:10px;background:#f4f7fa;color:#172536;opacity:1;cursor:default;box-shadow:0 2px 0 #d6e0e8}.key-guide-key.key-space{flex-basis:150px;max-width:190px}.key-name{font:900 20px/1 ui-monospace,monospace}.finger-name{font-size:10px;line-height:1.2;font-weight:700;text-align:center}.key-guide-key.current,.key-guide-key.current:disabled{border-color:#9a7100;background:#ffd84d;color:#342600;box-shadow:0 0 0 3px rgba(255,216,77,.3)}.key-guide-key.current::before{content:"Next";position:absolute;top:3px;right:5px;font-size:9px;font-weight:900;text-transform:uppercase}.key-guide-key.correct,.key-guide-key.correct:disabled{border-color:#08713d;background:#1f9d61;color:#fff}.key-guide-key.correct::before{content:"✓";position:absolute;top:2px;right:6px;font-size:15px;font-weight:900}.key-guide-key.wrong,.key-guide-key.wrong:disabled{border-color:#9f1d1d;background:#d93636;color:#fff;animation:keyWrongFlash .35s ease-in-out 2}.key-guide-key.wrong::before{content:"!";position:absolute;top:2px;right:7px;font-size:16px;font-weight:900}.key-guide-key.current.correct,.key-guide-key.current.correct:disabled{border-color:#9a7100;background:#ffd84d;color:#342600}.key-guide-key.current.correct::before{content:"Next";font-size:9px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@keyframes keyWrongFlash{50%{transform:translateY(2px);filter:brightness(.86)}}
@media(max-width:767px){.key-guide{padding:11px 8px}.key-guide-keys{gap:6px}.key-guide-key,.key-guide-key:disabled{flex-basis:60px;min-width:55px;max-width:76px;min-height:70px;padding:7px 4px}.key-guide-key.key-space{flex-basis:120px;max-width:152px}.key-name{font-size:18px}.finger-name{font-size:9px}}
@media(max-width:360px){.key-guide-keys{gap:5px}.key-guide-key,.key-guide-key:disabled{flex-basis:54px;min-width:50px;min-height:66px}.key-guide-key.key-space{flex-basis:108px;max-width:135px}.key-name{font-size:17px}.finger-name{font-size:8px}}