:root{color-scheme:light;--ink:#18233d;--muted:#61708b;--line:#dbe2ee;--blue:#3b5de9;--light:#f5f7fc;--mint:#d9f5e8}*{box-sizing:border-box}body{margin:0;background:#eef2f8;color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app{max-width:1100px;margin:auto;padding:24px}.app-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px}.app-header h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:.3rem 0}.app-header p{margin:0;color:var(--muted)}.eyebrow{color:#4663ac;font-size:.72rem;font-weight:800;letter-spacing:.13em}.local-badge{background:#dfe8ff;border-radius:99px;padding:6px 12px;font-size:.8rem;white-space:nowrap}.tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto}.tabs button{white-space:nowrap}.tabs button.active{background:var(--ink);color:#fff}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:18px;box-shadow:0 12px 32px #1e315012}h2{font-size:1.5rem;line-height:1.25;margin:.35rem 0}p{margin:.4rem 0 1rem;color:var(--muted)}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:10px 15px;font-weight:700}button:hover,button:focus-visible{border-color:var(--blue);outline:2px solid transparent;box-shadow:0 0 0 3px #3b5de930}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:var(--blue);border-color:var(--blue);color:#fff}.intro-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(115deg,#fff,#e5edff)}.progress-ring{display:grid;place-items:center;min-width:125px;min-height:125px;border:10px solid #b8c9fb;border-radius:50%;background:#fff;text-align:center}.progress-ring strong{font-size:1.25rem}.progress-ring small{display:block;color:var(--muted)}.unit{margin:25px 0}.unit h2{font-size:1.2rem}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lesson-card{text-align:left;display:flex;flex-direction:column;gap:4px;min-height:92px}.lesson-card small{color:var(--muted)}.lesson-card.current{border-color:var(--blue);background:#edf1ff}.lesson-card.done{border-color:#85d9b5;background:#effbf5}.practice-top{display:flex;justify-content:space-between;gap:15px}.metrics{display:flex;gap:12px;align-items:flex-start;white-space:nowrap}.metrics span{background:var(--light);border-radius:9px;padding:5px 10px}.metrics strong{font-size:1.15rem}.progress-line{height:7px;background:#e4eafa;border-radius:99px;overflow:hidden;margin:10px 0 22px}.progress-line div{height:100%;width:0;background:var(--blue)}.text-display{font:clamp(1.3rem,3vw,2rem)/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;min-height:130px;max-height:220px;overflow:auto;word-break:break-word;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fafbfe}.text-display:focus{outline:2px solid var(--blue)}.text-display .correct{color:#248663}.text-display .wrong{color:#d34252;background:#fee8eb}.text-display .current{background:#d9e3ff;border-radius:3px}.key-hint{min-height:24px;color:var(--ink);font-weight:700}.practice-actions{display:flex;gap:8px;margin-top:16px}.result-panel{background:var(--mint)}#keyboard{overflow-x:auto;padding:8px 0}.kb-row{display:flex;gap:3px;margin:3px auto;min-width:600px;max-width:900px}.kb-key{position:relative;display:grid;place-items:center;min-width:0;height:35px;border:1px solid #cdd8ec;border-radius:5px;background:#fff;font-size:.74rem;font-weight:700}.kb-key.next{background:#f9df9d;border-color:#d6a84a}.kb-key.pressed{background:#b5ecd0}.kb-key.wrong{background:#ffc5ce}.kb-upper{position:absolute;top:0;left:3px;font-size:.52rem}.kb-lower{align-self:end;font-size:.65rem}.kb-bump:after{content:"";position:absolute;bottom:3px;width:10px;height:2px;background:#7183ae}.rain-hud{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.rain-area{position:relative;height:330px;overflow:hidden;background:linear-gradient(#122a53,#233f75);border-radius:15px}.rain-ground{position:absolute;left:0;right:0;bottom:0;height:18px;background:#75d3aa}.rain-word{position:absolute;padding:7px 10px;background:#fff;border-radius:8px;font:bold 1rem ui-monospace,monospace;white-space:nowrap;box-shadow:0 4px 10px #06143144}.rain-word.active{outline:3px solid #ffcb67}.rain-word .done{color:#269a72}.rain-word.pop,.rain-word.splat{opacity:0;transition:opacity .3s}.game-actions{display:flex;gap:8px}.result-panel button{margin:8px 8px 0 0}footer{display:flex;gap:20px;justify-content:space-between;padding:8px 0 20px;font-size:.85rem}footer a{color:#3658d5}@media(max-width:650px){.app{padding:16px}.app-header,.intro-panel,.practice-top{display:block}.local-badge{display:inline-block;margin-top:12px}.progress-ring{margin:16px 0}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{margin-top:10px}.panel{padding:17px}.rain-area{height:270px}}