@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
.page-subtitle{font-size:1rem;font-weight:500;line-height:1.7;color:var(--ink);margin:5px 0 0}
:root{color-scheme:light;--ink:#263e57;--muted:#617185;--paper:#fffefa;--bg:#f4f6f7;--line:#dce3e9;--gold:#a87c30;--accent:#cf5964;--tint:#fff0f0;--red:#d65c6a;--blue:#57b7d8;--green:#6ea985;--yellow:#dfb954;--purple:#a18ac8;font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;font-synthesis:none;font-size:16px;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #207fad;outline-offset:4px}button{touch-action:manipulation}a{color:inherit}svg{display:block}button svg{flex:none}header{background:var(--paper);border-bottom:1px solid var(--line)}.topbar{max-width:1200px;padding:24px 32px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;gap:13px;align-items:center}.brand-icon{color:var(--gold);width:37px;height:37px}.brand-title{font-size:1.35rem;font-weight:600;letter-spacing:.18em;line-height:1.6}.brand-sub{font-size:.75rem;color:var(--muted);letter-spacing:.23em}.five-stars{display:flex;gap:9px;align-items:center}.five-stars svg{width:15px;height:15px}.top-note{display:flex;align-items:center;gap:22px;font-size:.875rem;color:var(--muted)}
main{max-width:1200px;margin:0 auto;padding:32px 32px 22px}.intro{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:24px}.eyebrow{font-size:.75rem;color:var(--gold);letter-spacing:.15em;margin:0 0 7px}h1{font-size:1.9rem;line-height:1.5;letter-spacing:.035em;margin:0;font-weight:600}.intro-note{font-size:.875rem;color:var(--muted);margin:7px 0 0}.script-switch{display:flex;background:#e9eef2;border:1px solid #dbe3e9;border-radius:14px;padding:5px;gap:4px;flex-shrink:0}.script-switch button{background:none;border:0;border-radius:10px;padding:11px 22px;font-size:.9375rem;font-weight:600;min-height:46px;transition:background .15s}.script-switch button[aria-pressed=true]{background:var(--ink);box-shadow:0 2px 5px #263e5720;color:#fff}.script-switch button[aria-pressed=false]{background:var(--paper);color:var(--ink)}.script-switch button[aria-pressed=false]:hover{background:#f0f5f8}
.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-areas:'letters practice';gap:24px;align-items:start}.practice{grid-area:practice;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 30px #263e5705;overflow:hidden;min-width:0}.practice-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:21px 26px 17px;border-bottom:1px solid #e8edf0}.current-id{display:flex;align-items:center;gap:15px;min-width:0}.current-char{font-size:2.65rem;line-height:1.2;color:var(--accent)}.current-meta{display:flex;flex-direction:column;gap:3px}.current-sound{font-family:inherit;font-size:1rem;font-weight:500;letter-spacing:.07em}.current-info{font-size:.8125rem;color:var(--muted)}.sound-button{border:1px solid var(--line);background:var(--paper);width:45px;height:45px;display:grid;place-items:center;border-radius:50%;margin-left:6px}.stroke-count{font-size:.875rem;color:var(--muted);white-space:nowrap}.board-wrap{padding:18px 36px 0;max-width:560px;margin:auto;position:relative}.board{width:100%;aspect-ratio:1;background:#fffefa;border:1px solid #dce3e6;border-radius:12px;position:relative;overflow:hidden;box-shadow:inset 0 0 45px #bfab7905;touch-action:none;user-select:none;-webkit-user-select:none}.board svg{width:100%;height:100%;touch-action:none}.grid-line{stroke:#dfe5e9;stroke-width:.24;stroke-dasharray:1.5 1.6}.guide-path{fill:none;stroke:#d4dde2;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s}.guide-number{fill:#617587;font-family:'Noto Sans JP',sans-serif;font-size:4.5px}.user-path{fill:none;stroke:var(--accent);stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}.demo-path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.start-star{color:var(--gold)}.board-corner{position:absolute;right:11px;bottom:9px;font-size:.75rem;color:#83909c;pointer-events:none}.instruction{min-height:26px;text-align:center;font-size:.875rem;color:var(--muted);margin:15px 15px 11px;line-height:1.7}.instruction.success{color:#35744e}.toolbar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 18px 17px}.tool{border:1px solid var(--line);border-radius:10px;padding:10px 13px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:.875rem;background:#fff;white-space:nowrap}.tool:hover:not(:disabled){background:#f2f6f8}.tool.active{background:#edf3f6;border-color:#b5c6d3}.guide-control{display:inline-flex;align-items:center;gap:7px;font-size:.875rem;cursor:pointer;min-height:44px;padding:0 8px}.guide-control input{accent-color:var(--ink);width:17px;height:17px}.practice-bottom{background:#f9fafb;border-top:1px solid #e5ebef;padding:17px 25px;display:flex;gap:14px;align-items:center;justify-content:space-between}.finish-note{color:var(--muted);font-size:.8125rem;line-height:1.8;margin:0;max-width:190px}.primary-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:13px;padding:13px 22px;min-height:50px;font-size:.9375rem;font-weight:500;transition:background .15s}.primary-button:hover:not(:disabled){background:#354f6c}.primary-button:disabled{background:#bac4cd;border-color:#bac4cd;opacity:1;color:#fff}.primary-button.finished{background:#416b58;border-color:#416b58}.next-button{border:0;background:none;color:var(--ink);padding:10px 3px;display:flex;align-items:center;gap:6px;font-size:.875rem;min-height:44px}.bottom-actions{display:flex;align-items:center;gap:16px}.mobile-pick{display:none}
.letter-panel{grid-area:letters;background:var(--paper);border:1px solid var(--line);border-radius:21px;overflow:hidden;min-width:0}.letter-panel summary{display:flex;list-style:none;align-items:center;justify-content:space-between;gap:10px;padding:21px 22px 15px;pointer-events:none}.letter-panel summary::-webkit-details-marker{display:none}.letter-panel summary h2{font-size:1rem;font-weight:600;margin:0}.summary-arrow{display:none}.letter-inner{padding:0 18px 19px}.column-stars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:4px 0 12px}.column-stars div{display:flex;align-items:center;flex-direction:column;gap:6px}.column-stars svg{width:15px;height:15px}.column-stars span{font-size:.75rem;color:var(--muted)}.kana-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px 6px}.kana-button{height:44px;min-width:0;background:#f9fafb;border:1px solid transparent;border-radius:10px;position:relative;font-size:1.22rem;line-height:1;color:var(--ink);display:grid;place-items:center;transition:background .15s,border-color .15s}.kana-button:hover{border-color:#c6d2dc;background:#f0f4f6}.kana-button[aria-pressed=true]{background:var(--cell-tint);border-color:var(--cell-accent);color:var(--cell-accent);box-shadow:0 2px 5px #263e5707;font-weight:700}.kana-button.done:after{content:'✓';position:absolute;right:3px;top:2px;font-size:.62rem;color:#548166}.letter-foot{margin:17px 0 0;font-size:.8125rem;color:var(--muted);text-align:center;line-height:1.7}.star-divider{display:flex;align-items:center;justify-content:center;gap:9px;margin:26px 0 12px}.star-divider:before,.star-divider:after{content:'';height:1px;width:37px;background:#ccd5de}.star-divider svg{width:12px;height:12px;color:var(--gold)}footer{max-width:1200px;margin:auto;padding:0 32px 28px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:.75rem;color:var(--muted)}.footer-sign{letter-spacing:.07em}.credits{max-width:600px;font-size:.75rem;line-height:1.9}.credits summary{cursor:pointer;text-align:right}.credits p{margin:8px 0 0;text-align:right}.icon{width:18px;height:18px}.demo-star{fill:#d7ae59;filter:drop-shadow(0 0 1px #d7ae5966)}.completion-star{color:#d5ae53}.jump-link{position:absolute;left:16px;top:-70px;background:white;padding:12px;z-index:9}.jump-link:focus{top:12px}
@media(min-width:1050px){.board-wrap{max-width:518px}.kana-button{height:46px}.letter-inner{padding-bottom:21px}.practice-bottom{padding-top:18px;padding-bottom:18px}}
@media(max-width:900px){.topbar{padding:19px 24px}main{padding:26px 24px 18px}.workspace{grid-template-columns:268px minmax(0,1fr);gap:18px}.letter-inner{padding-left:13px;padding-right:13px}.practice-head{padding:19px}.board-wrap{padding:16px 22px 0}.practice-bottom{flex-wrap:wrap;padding:16px 18px}.finish-note{max-width:none}.bottom-actions{width:100%;justify-content:space-between}.primary-button{flex:1}.tool{padding:9px}.intro{gap:15px}h1{font-size:1.65rem}.script-switch button{padding:10px 14px}.top-note>span{display:none}}
@media(max-width:700px){.topbar{padding:14px 18px}.brand-icon{width:29px;height:29px}.brand{gap:10px}.brand-title{font-size:1.13rem}.brand-sub{font-size:.75rem;letter-spacing:.13em}.five-stars{gap:5px}.five-stars svg{width:11px;height:11px}main{padding:21px 14px 16px}.intro{display:block;margin-bottom:15px}.eyebrow{display:none}h1{font-size:1.5rem}.intro-note{font-size:.875rem;margin-top:5px}.script-switch{margin-top:17px;width:100%;padding:4px;border-radius:12px}.script-switch button{flex:1;min-height:43px;padding:8px}.workspace{display:flex;flex-direction:column;gap:16px}.practice{width:100%;border-radius:19px}.practice-head{padding:14px 17px}.current-char{font-size:2.3rem}.current-id{gap:12px}.sound-button{width:41px;height:41px}.board-wrap{padding:15px 18px 0;max-width:445px}.board{border-radius:8px}.instruction{font-size:.875rem;margin:13px 12px 10px;min-height:24px}.toolbar{padding:0 10px 14px;gap:6px}.tool{font-size:.8125rem;padding:9px 10px;min-height:43px}.tool svg{width:16px;height:16px}.guide-control{font-size:.8125rem;padding:0 5px;gap:5px}.guide-control input{width:16px;height:16px}.practice-bottom{padding:13px 16px;gap:7px}.finish-note{font-size:.8125rem}.bottom-actions{gap:12px}.primary-button{min-height:47px;padding:11px 14px;font-size:.9375rem}.next-button{font-size:.8125rem}.mobile-pick{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-size:.8125rem;border-bottom:1px solid #bdc9d3;padding:2px 0}.stroke-meta{display:flex;align-items:flex-end;gap:5px;flex-direction:column}.letter-panel{width:100%;border-radius:16px}.letter-panel summary{padding:18px;pointer-events:auto;cursor:pointer}.summary-arrow{display:block;transition:transform .15s}.letter-panel[open] .summary-arrow{transform:rotate(180deg)}.letter-inner{padding:0 18px 19px}.column-stars{margin-top:0}.kana-grid{gap:8px}.kana-button{height:49px;font-size:1.3rem}.letter-foot{margin-top:15px}.star-divider{margin-top:19px}footer{padding:0 18px 23px;align-items:flex-start;flex-wrap:wrap;justify-content:center;text-align:center;gap:8px}.credits summary{text-align:center}.credits p{text-align:center}.footer-sign{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:700px){.tool,.guide-control,.next-button,.mobile-pick{font-size:.875rem}}

@font-face{font-family:'Irohaboshi Handwriting Kana';src:url('./fonts/irohaboshi-handwriting-kana.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Irohaboshi Local Kyokasho';src:local('UD Digi Kyokasho N-R'),local('UD Digi Kyokasho NP-R'),local('UD Digi Kyokasho NK-R'),local('UDDigiKyokashoN-R'),local('YuKyokasho Yoko Medium'),local('YuKyokashoYoko-Medium'),local('YuKyokasho Medium'),local('YuKyokasho-Medium');font-style:normal;font-weight:400;font-display:swap}
.current-char,.kana-button{font-family:var(--practice-font,'Irohaboshi Handwriting Kana'),'Noto Sans JP',sans-serif!important;font-weight:400!important}
.textbook-outline{fill:#cbd5dd;stroke:none}
.audio-reference{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 26px 0;font-size:.875rem;color:var(--muted);line-height:1.7}
.audio-reference a{text-underline-offset:4px;color:#476885;white-space:nowrap}
@media(max-width:700px){.audio-reference{padding:11px 17px 0;font-size:.875rem;gap:5px 12px}}

.letter-glyph{display:block;width:1em;height:1em;fill:currentColor}
.textbook-text{font-family:var(--practice-font);font-size:100px;font-weight:400}
.font-note{margin:10px 18px 0;text-align:center;color:var(--muted);font-size:.75rem;line-height:1.7}

.audio-guidance{margin:12px 26px 0;padding:13px 15px;background:#f2f6f8;border:1px solid var(--line);border-radius:12px;font-size:.875rem;line-height:1.8;color:var(--muted)}
.audio-guidance strong{display:block;color:var(--ink);font-weight:600}
.audio-guidance p{margin:6px 0 0}
.audio-guidance #pronunciation-note{color:var(--ink)}
@media(max-width:700px){.audio-guidance{margin:12px 17px 0;padding:12px 13px}}