:root{--ink:#10233f;--blue:#145bd7;--cyan:#22b8cf;--paper:#f4f7fb;--white:#fff;--red:#e34545;--muted:#66758b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:var(--paper)}
body{background-image:linear-gradient(rgba(20,91,215,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,91,215,.035) 1px,transparent 1px);background-size:32px 32px}
.app{width:min(920px,calc(100% - 32px));margin:0 auto;padding:34px 0 24px}
.masthead{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.brand{display:grid;place-items:center;width:70px;height:70px;background:var(--ink);color:#fff;font-weight:900;font-size:1.35rem;letter-spacing:.08em;border-radius:8px;box-shadow:8px 8px 0 var(--cyan)}
.eyebrow{margin:0 0 4px;color:var(--blue);font:700 .78rem/1.2 Arial,sans-serif;letter-spacing:.2em}
h1{margin:0;font-size:clamp(1.6rem,4vw,2.5rem);letter-spacing:.04em}
.sound-toggle{margin-left:auto;border:1px solid #cbd6e4;background:#fff;color:var(--ink);padding:10px 14px;border-radius:5px;font:700 .86rem/1 "Yu Gothic UI",Meiryo,sans-serif;cursor:pointer;box-shadow:0 3px 0 #dbe3ef;white-space:nowrap}
.sound-toggle:hover{border-color:var(--blue);color:var(--blue)}
.sound-toggle:focus-visible{outline:3px solid rgba(34,184,207,.45);outline-offset:3px}
.sound-toggle[aria-pressed="false"]{color:var(--muted);background:#edf1f6;box-shadow:none;transform:translateY(2px)}
.notice{display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;padding:18px 24px;margin-bottom:18px;border-left:7px solid var(--cyan)}
.notice p{margin:0;font-size:clamp(1rem,2.5vw,1.28rem);font-weight:700;line-height:1.55}
.notice-icon{display:grid;place-items:center;flex:0 0 32px;height:32px;border:2px solid var(--cyan);color:var(--cyan);font-weight:900;border-radius:50%}
.guide-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;padding:11px 14px;border:1px solid var(--cyan);color:#fff;font-size:.82rem;font-weight:800;line-height:1.4;text-decoration:none;white-space:nowrap}
.guide-link span{color:var(--cyan);font-size:1.15rem;transition:transform .18s ease}
.guide-link:hover{background:var(--cyan);color:var(--ink)}
.guide-link:hover span{color:var(--ink);transform:translateX(3px)}
.guide-link:focus-visible{outline:3px solid #fff;outline-offset:3px}
.home-links{margin:0 0 18px}
.home-links a{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:14px;padding:15px 18px;background:#fff;border:1px solid #cbd6e4;color:var(--ink);text-decoration:none;box-shadow:0 5px 0 #dbe3ef}
.home-links a>span{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;background:var(--blue);color:#fff;font:900 1.15rem Arial,sans-serif;border-radius:50%}
.home-links strong{font-size:.98rem}.home-links small{color:var(--muted);font-size:.8rem;margin-top:2px}.home-links i{grid-column:3;grid-row:1/3;color:var(--blue);font-style:normal;font-size:1.35rem;transition:transform .18s ease}
.home-links a:hover{border-color:var(--blue);background:#f8fbff}.home-links a:hover i{transform:translateX(4px)}.home-links a:focus-visible{outline:3px solid rgba(34,184,207,.5);outline-offset:3px}
.panel{background:var(--white);border:1px solid #dbe3ef;box-shadow:0 18px 50px rgba(16,35,63,.1);padding:clamp(28px,6vw,58px);text-align:center;min-height:430px}
.ready-screen h2,.result-screen h2{font-size:clamp(1.55rem,4vw,2.25rem);margin:12px 0}
.ready-screen>p{color:var(--muted);line-height:1.8}
.time-mark{width:104px;height:104px;margin:0 auto;display:grid;place-items:center;border-radius:50%;border:8px solid #dce8fb;color:var(--blue);font:900 1.65rem Arial,sans-serif}
.space-key{display:inline-flex;align-items:center;gap:14px;margin-top:24px;padding:14px 22px;background:var(--blue);color:#fff;font-weight:700;box-shadow:0 5px 0 #0b3c9b;border-radius:5px}
.space-key span{padding:6px 18px;background:#fff;color:var(--ink);font:700 .78rem Arial,sans-serif;letter-spacing:.12em;border-radius:3px}
.mobile-start{display:none;margin:24px auto 0;padding:16px 28px;border:0;border-radius:6px;background:var(--blue);color:#fff;font:800 1rem/1.4 "Yu Gothic UI",Meiryo,sans-serif;box-shadow:0 5px 0 #0b3c9b;cursor:pointer;touch-action:manipulation}
.mobile-start:active{transform:translateY(3px);box-shadow:0 2px 0 #0b3c9b}
.mobile-start:focus-visible{outline:3px solid rgba(34,184,207,.55);outline-offset:4px}
.mobile-keyboard-input{position:fixed;left:50%;bottom:0;width:1px;height:1px;opacity:.01;border:0;padding:0;pointer-events:none}
.ready-screen .key-note{font-size:.9rem;margin-bottom:0;color:var(--muted)}
.status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.status-row>div{padding:12px 18px;background:#f4f7fb;border-left:4px solid var(--blue)}
.status-label{display:block;color:var(--muted);font-size:.82rem;font-weight:700;margin-bottom:4px}
.status-row strong{font:800 1.55rem Arial,sans-serif}
.progress-track{height:6px;background:#e2e9f3;margin:18px 0 44px;overflow:hidden}
.progress-track div{height:100%;width:100%;background:var(--cyan);transform-origin:left}
.instruction{color:var(--muted);font-weight:700}
.characters{display:flex;justify-content:center;gap:clamp(8px,2vw,18px);margin:28px 0}
.char{display:grid;place-items:center;width:clamp(52px,11vw,86px);height:clamp(68px,13vw,102px);background:#f2f5f9;border:2px solid #cbd6e4;border-bottom-width:6px;border-radius:8px;font:800 clamp(2rem,6vw,3.6rem)/1 Consolas,"Courier New",monospace;text-transform:none}
.char.current{border-color:var(--blue);background:#eef4ff;transform:translateY(-5px);box-shadow:0 8px 0 #cfe0ff}
.char.done{background:var(--ink);border-color:var(--ink);color:#fff;transform:none;box-shadow:none}
.char.error{animation:shake .16s linear 2;border-color:var(--red)}
.feedback{min-height:24px;color:var(--muted);font-weight:700}
.feedback.miss{color:var(--red)}
.score-box{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:24px auto;background:var(--ink);color:#fff;padding:26px;width:min(360px,100%);border-bottom:7px solid var(--cyan)}
.score-box span{font-weight:700}.score-box strong{font:900 4.7rem/1 Arial,sans-serif}.score-box small{font-weight:700}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dbe3ef}
.result-grid div{padding:18px 8px}.result-grid div+div{border-left:1px solid #dbe3ef}
.result-grid span{display:block;color:var(--muted);font-size:.85rem}.result-grid strong{font:800 1.55rem Arial,sans-serif;margin-right:3px}
.level-result-heading{margin:22px auto 8px;font-size:1rem;color:var(--ink);letter-spacing:.03em}
.level-result{display:flex;align-items:center;gap:16px;width:min(520px,100%);margin:0 auto 12px;padding:16px 18px;background:#eef4ff;border-left:6px solid var(--blue);text-align:left}
.level-result>span{flex:0 0 auto;padding:9px 12px;background:var(--blue);color:#fff;font:900 .88rem Arial,sans-serif;letter-spacing:.04em}.level-result strong{display:block;font-size:1.15rem}.level-result p{margin:3px 0 0;color:var(--muted);font-size:.88rem;line-height:1.55}
.result-level-link{display:flex;width:max-content;margin:0 auto 14px;color:var(--blue);font-weight:800;text-underline-offset:4px}.result-level-link:hover{color:var(--ink)}.result-level-link:focus-visible{outline:3px solid rgba(34,184,207,.5);outline-offset:3px}.compact{margin-top:8px}
footer{text-align:center;color:#8390a1;font:700 .7rem/1.9 Arial,sans-serif;letter-spacing:.14em;padding:12px}
footer a{color:inherit;text-underline-offset:3px}
footer a:hover{color:var(--blue)}
[hidden]{display:none!important}
.characters{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:4px 1px;max-width:100%;min-height:92px;margin:24px auto;white-space:pre-wrap}
.char{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:1.15em;height:2.15em;padding:0 .06em;border:0;border-bottom:3px solid #cbd6e4;border-radius:3px;font:700 clamp(1rem,3vw,1.55rem)/1.2 Consolas,"Courier New",monospace;white-space:pre}
.char.current{border-bottom-color:var(--blue);transform:translateY(-2px);box-shadow:none}
.char.done{border-bottom-color:var(--ink)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:620px){.app{width:min(100% - 20px,920px);padding-top:18px}.masthead{gap:12px}.brand{width:56px;height:56px;box-shadow:5px 5px 0 var(--cyan)}.sound-toggle{padding:9px;font-size:.78rem}.notice{padding:14px;flex-wrap:wrap}.notice p{flex:1;min-width:calc(100% - 52px)}.guide-link{width:100%;margin-left:0}.desktop-only,.desktop-start{display:none}.mobile-start{display:block}.panel{min-height:390px;padding:28px 16px}.status-row>div{padding:10px}.status-row strong{font-size:1.25rem}.progress-track{margin-bottom:34px}.space-key{flex-direction:column;gap:8px}.result-grid{grid-template-columns:1fr}.result-grid div+div{border-left:0;border-top:1px solid #dbe3ef}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* Blind touch guide */
.guide-app{width:min(1080px,calc(100% - 32px))}
.guide-masthead{margin-bottom:30px}
.guide-hero{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:32px;background:var(--ink);color:#fff;padding:clamp(30px,6vw,62px);border-bottom:8px solid var(--cyan);box-shadow:0 18px 50px rgba(16,35,63,.14)}
.guide-kicker{display:inline-block;margin:0 0 16px;padding:6px 10px;background:var(--cyan);color:var(--ink);font-size:.76rem;font-weight:900;letter-spacing:.08em}
.guide-hero h2{margin:0 0 16px;font-size:clamp(1.8rem,4.8vw,3.25rem);line-height:1.25;letter-spacing:.02em}
.guide-hero h2 em{color:var(--cyan);font-style:normal}
.guide-hero p:last-child{margin:0;max-width:660px;color:#dbe7f7;line-height:1.85;font-weight:600}
.covered-hands{position:relative;min-height:190px;display:flex;align-items:flex-end;justify-content:center;gap:28px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));overflow:hidden}
.towel{position:absolute;inset:25px 22px auto;padding:25px 10px 45px;background:#e9f0f8;color:var(--ink);text-align:center;font-weight:900;line-height:1.5;clip-path:polygon(5% 0,95% 3%,100% 85%,76% 92%,53% 86%,28% 96%,0 84%);filter:drop-shadow(0 8px 8px rgba(0,0,0,.2))}
.hand{position:relative;z-index:1;color:#f5bd8b;font-size:3rem;line-height:1;transform:rotate(-10deg)}
.hand-right{transform:scaleX(-1) rotate(-10deg)}
.step-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:20px 0 44px;background:#cbd6e4;border:1px solid #cbd6e4}
.step-nav a{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 8px;background:#fff;color:var(--ink);font-size:.84rem;font-weight:800;text-decoration:none}
.step-nav a:hover{color:var(--blue);background:#f7faff}
.step-nav span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--ink);color:#fff;font:800 .75rem Arial,sans-serif}
.lesson-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);align-items:center;gap:clamp(28px,6vw,70px);margin:0 0 22px;padding:clamp(28px,5vw,50px);background:#fff;border:1px solid #dbe3ef;box-shadow:0 12px 34px rgba(16,35,63,.07);scroll-margin-top:20px}
.step-label{margin:0 0 9px;color:var(--blue);font:900 .75rem/1.2 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.lesson-copy h2,.important-card h2,.practice-summary h2{margin:0 0 16px;font-size:clamp(1.35rem,3vw,2rem);line-height:1.45}
.lesson-copy>p:not(.step-label),.important-card p{color:var(--muted);font-size:1rem;line-height:1.9}
kbd{display:inline-grid;place-items:center;min-width:2em;padding:.14em .36em;background:#f1f5fa;border:1px solid #bdc9d8;border-bottom-width:3px;border-radius:4px;color:var(--ink);font:800 .95em Consolas,"Courier New",monospace}
.tip{margin-top:20px;padding:15px 17px;background:#edfaff;border-left:5px solid var(--cyan);color:#334965;font-size:.9rem;line-height:1.65;font-weight:700}
.tip span{display:block;margin-bottom:4px;color:#087d90;font:900 .68rem Arial,sans-serif;letter-spacing:.14em}
.mini-keyboard,.keyboard-board{position:relative;padding:30px 18px;background:#eef3f8;border:1px solid #d2dce8;border-bottom:7px solid #c6d1df;border-radius:10px}
.keyboard-row{display:flex;justify-content:center;gap:clamp(3px,.7vw,7px)}
.keyboard-row+ .keyboard-row{margin-top:7px}
.keyboard-row span{display:grid;place-items:center;width:clamp(30px,4.5vw,47px);aspect-ratio:1;background:#fff;border:1px solid #bec9d7;border-bottom-width:4px;border-radius:5px;font:800 clamp(.68rem,1.4vw,.9rem) Arial,sans-serif}
.home-keys{padding:42px 12px 32px}
.home-keys .keyboard-row span{width:clamp(32px,5.4vw,50px)}
.keyboard-row .key-focus,.keyboard-row .path-left,.keyboard-row .path-right{position:relative;color:#fff;border-color:transparent}
.keyboard-row .key-focus,.keyboard-row .path-left{background:var(--blue)}
.keyboard-row .path-right{background:#087f91}
.keyboard-row .key-focus i,.keyboard-row .home-mark:after{content:"";position:absolute;bottom:6px;width:14px;height:3px;border-radius:3px;background:#fff;opacity:.9}
.finger-labels{display:flex;justify-content:center;gap:clamp(68px,13vw,128px);margin-top:18px;font-size:.72rem;color:var(--muted)}
.finger-labels b:first-child{color:var(--blue)}.finger-labels b:last-child{color:#087f91}
.routes{display:grid;gap:9px;margin-top:22px}
.routes>div{display:flex;align-items:center;gap:12px;padding:10px;background:#f5f8fc}
.route-side{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;font-weight:900}.route-side.left{background:var(--blue)}.route-side.right{background:#087f91}
.routes strong{display:flex;align-items:center;gap:7px}.routes i{color:#8a98aa;font-style:normal}
.keyboard-board{padding:38px 12px}
.letter-row{transform:translateX(6px)}.home-row{transform:translateX(13px)}.lower-row{transform:translateX(19px)}
.move-arrow{position:absolute;z-index:2;top:20px;color:var(--blue);font:900 2.8rem/1 Arial,sans-serif;filter:drop-shadow(0 2px 0 #fff)}
.arrow-left{left:39%}.arrow-right{left:68%}.move-arrow.down{top:auto;bottom:13px}.move-arrow.down.arrow-left{left:40%}.move-arrow.down.arrow-right{left:69%;color:#087f91}.move-arrow.arrow-right{color:#087f91}
.lower-board{padding-top:38px;padding-bottom:42px}
.important-card{display:grid;grid-template-columns:auto 1fr minmax(180px,.34fr);align-items:center;gap:28px;margin:44px 0 22px;padding:clamp(28px,5vw,48px);background:#fff8e8;border:2px solid #f4c65d;border-left:10px solid #f0b429;scroll-margin-top:20px}
.important-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#f0b429;color:var(--ink);font:900 2.2rem Arial,sans-serif}
.important-card strong{color:var(--ink);background:linear-gradient(transparent 62%,#ffe08b 62%)}
.movement-demo{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.72rem;font-weight:900;color:var(--muted)}
.palm{display:grid;place-items:center;width:100px;height:70px;border-radius:50% 50% 42% 42%;background:var(--ink);color:#fff;font-size:1.1rem;box-shadow:0 0 0 9px rgba(20,91,215,.12)}
.motion:before{display:inline-block;margin-right:7px;color:var(--blue);font-size:1.3rem}.motion.up:before{content:"↑"}.motion.down:before{content:"↓"}
.encouragement{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:26px;margin:22px 0;padding:clamp(28px,5vw,48px);background:linear-gradient(135deg,#eaf2ff 0%,#f4fcff 100%);border:2px solid var(--blue);border-right:10px solid var(--cyan);box-shadow:0 12px 34px rgba(20,91,215,.12)}
.encouragement-mark{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:var(--blue);color:#fff;font:900 1rem Arial,sans-serif;letter-spacing:.12em;box-shadow:7px 7px 0 var(--cyan)}
.encouragement p{margin:0 0 8px;color:var(--blue);font-size:.82rem;font-weight:900;letter-spacing:.1em}
.encouragement blockquote{margin:0 0 12px;color:var(--ink);font-size:clamp(1.2rem,3vw,1.75rem);font-weight:900;line-height:1.6}
.encouragement strong{display:inline-block;padding:7px 12px;background:var(--ink);color:#fff;font-size:clamp(.92rem,2vw,1.08rem);line-height:1.6}
.practice-summary{margin-top:22px;padding:clamp(30px,6vw,58px);background:var(--ink);color:#fff;text-align:center}
.practice-summary .eyebrow{color:var(--cyan)}
.practice-summary ol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 0;padding:0;list-style:none;counter-reset:item}
.practice-summary li{display:flex;align-items:center;gap:12px;padding:16px;background:rgba(255,255,255,.08);text-align:left;font-size:.9rem;font-weight:700;line-height:1.55}
.practice-summary li span{display:grid;place-items:center;flex:0 0 33px;height:33px;border-radius:50%;background:var(--cyan);color:var(--ink);font:900 .85rem Arial,sans-serif}
@media(max-width:800px){.guide-hero,.lesson-card{grid-template-columns:1fr}.covered-hands{min-height:165px}.lesson-card{gap:28px}.important-card{grid-template-columns:auto 1fr}.movement-demo{grid-column:1/-1;flex-direction:row;justify-content:center}.practice-summary ol{grid-template-columns:1fr}}
@media(max-width:620px){.guide-app{width:min(100% - 20px,1080px)}.guide-masthead h1{font-size:1.45rem}.guide-hero{padding:28px 20px}.step-nav{grid-template-columns:repeat(2,1fr);margin-bottom:22px}.lesson-card{padding:28px 16px}.keyboard-board{margin-inline:-7px;padding-inline:5px}.keyboard-row{gap:3px}.keyboard-row span{width:calc((100vw - 70px)/10);max-width:39px}.home-keys .keyboard-row span{width:calc((100vw - 65px)/9);max-width:43px}.finger-labels{gap:58px}.important-card{grid-template-columns:1fr;padding:26px 20px}.important-icon{width:48px;height:48px}.movement-demo{grid-column:auto}.movement-demo{flex-direction:column}.encouragement{grid-template-columns:1fr;padding:28px 20px}.encouragement-mark{width:60px;height:60px;box-shadow:5px 5px 0 var(--cyan)}}

/* Score levels */
.levels-app{width:min(980px,calc(100% - 32px))}
.levels-intro{padding:clamp(28px,5vw,48px);background:var(--ink);color:#fff;border-bottom:8px solid var(--cyan);box-shadow:0 18px 50px rgba(16,35,63,.14)}
.levels-intro .eyebrow{color:var(--cyan)}.levels-intro h2{margin:7px 0 13px;font-size:clamp(1.75rem,4vw,2.8rem)}.levels-intro p:last-child{margin:0;color:#dbe7f7;line-height:1.8;font-weight:600}
.level-list{display:grid;gap:12px;margin:20px 0}
.level-card{display:grid;grid-template-columns:86px 150px 1fr;align-items:center;gap:20px;padding:22px 26px;background:#fff;border:1px solid #dbe3ef;border-left:8px solid var(--level-color);box-shadow:0 8px 24px rgba(16,35,63,.07)}
.level-number{display:grid;place-items:center;width:68px;height:68px;background:var(--level-color);color:#fff;font:900 1rem Arial,sans-serif;border-radius:50%}.level-title strong{display:block;font-size:1.4rem}.level-title span{display:block;margin-top:4px;color:var(--blue);font:900 .93rem Arial,sans-serif}.level-card p{margin:0;color:var(--muted);line-height:1.75;font-weight:600}
.level-5{--level-color:#d28b00}.level-4{--level-color:#145bd7}.level-3{--level-color:#087f91}.level-2{--level-color:#3b8c57}.level-1{--level-color:#66758b}
.levels-note{padding:24px 28px;background:#edfaff;border-left:7px solid var(--cyan)}.levels-note h2{margin:0 0 8px;font-size:1.2rem}.levels-note p{margin:0;color:#334965;line-height:1.8;font-weight:600}.levels-note strong{color:var(--ink)}
.back-link{display:inline-flex;align-items:center;gap:8px;margin:24px 0 4px;padding:13px 18px;background:var(--blue);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 4px 0 #0b3c9b;border-radius:4px}.back-link:hover{background:var(--ink)}.back-link:focus-visible{outline:3px solid rgba(34,184,207,.5);outline-offset:3px}
.levels-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.levels-actions .back-link{margin-right:0}
@media(max-width:680px){.levels-app{width:min(100% - 20px,980px)}.level-card{grid-template-columns:58px 1fr;gap:14px;padding:18px 16px}.level-number{width:54px;height:54px;font-size:.84rem}.level-card p{grid-column:1/-1}.level-title strong{font-size:1.2rem}}