:root{--ink: #18243b;--ink-soft: #5d6677;--paper: #f8f5ef;--card: #fffefa;--line: #dedbd3;--line-dark: #c9c5bb;--indigo: #263767;--indigo-hover: #1d2b55;--coral: #e9695f;--coral-soft: #f9e4df;--green: #40866d;--green-soft: #e7f3ed;--red: #c54f4f;--red-soft: #fae8e6;--shadow: 0 18px 50px rgba(39, 49, 71, .09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 6% 12%,rgba(233,105,95,.07),transparent 24rem),var(--paper);font-family:Inter,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit}button,label{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,label:has(input:focus-visible){outline:3px solid rgba(38,55,103,.2);outline-offset:3px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.75rem;height:1.55rem;padding:0 .4rem;border:1px solid var(--line-dark);border-bottom-width:2px;border-radius:.3rem;color:var(--ink);background:#ffffffb3;font-family:inherit;font-size:.72rem;font-weight:700}.app-shell{display:flex;min-height:100vh;flex-direction:column}.site-header{position:relative;z-index:10;border-bottom:1px solid rgba(201,197,187,.7);background:#f8f5efe0;backdrop-filter:blur(16px)}.header-inner{display:flex;width:min(1180px,100% - 48px);height:76px;margin:0 auto;align-items:center;justify-content:space-between}.brand{display:inline-flex;padding:0;border:0;align-items:center;gap:.65rem;background:transparent;cursor:pointer}.brand-mark{display:grid;width:2.45rem;height:2.45rem;border-radius:.65rem .65rem .65rem .18rem;place-items:center;color:#fff;background:var(--coral);box-shadow:0 7px 18px #e9695f40;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;font-size:1.35rem;line-height:1}.brand-name{font-size:1.15rem;font-weight:800;letter-spacing:-.04em}.brand-name span{color:var(--coral)}.header-note{color:#7c8290;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.quiet-button{display:inline-flex;padding:.6rem .85rem;border:0;border-radius:.55rem;align-items:center;gap:.45rem;color:var(--ink-soft);background:transparent;cursor:pointer;font-size:.82rem;font-weight:700}.quiet-button:hover{color:var(--ink);background:#2637670f}.quiet-button svg{width:1.15rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.setup-page,.practice-page{width:min(1180px,100% - 48px);margin:0 auto}.setup-page{padding:5rem 0 6rem}.hero{max-width:700px;margin-bottom:4.75rem}.eyebrow{display:flex;margin-bottom:1.15rem;align-items:center;gap:.65rem;color:var(--coral);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.eyebrow>span{width:1.75rem;height:2px;background:currentColor}.hero h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(3.15rem,7.5vw,6.5rem);font-weight:400;letter-spacing:-.065em;line-height:.92}.hero h1 em{color:var(--coral);font-weight:400}.hero>p{max-width:520px;margin:1.7rem 0 0;color:var(--ink-soft);font-size:1.05rem;line-height:1.7}.setup-layout{display:grid;align-items:start;gap:4.5rem;grid-template-columns:minmax(0,1fr) 330px}.step-section+.step-section{margin-top:4.5rem}.step-heading{display:flex;margin-bottom:1.8rem;align-items:flex-start;gap:1.1rem}.step-number{padding-top:.28rem;color:var(--coral);font-size:.72rem;font-weight:800;letter-spacing:.08em}.step-heading h2{margin:0 0 .35rem;font-family:Georgia,Times New Roman,serif;font-size:1.75rem;font-weight:500;letter-spacing:-.03em}.step-heading p{margin:0;color:var(--ink-soft);font-size:.87rem}.script-options{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr))}.script-option{display:flex;min-height:118px;padding:1.25rem 1.35rem;border:1px solid var(--line);border-radius:.8rem;align-items:center;gap:1.05rem;background:#fffefa99;cursor:pointer;text-align:left;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.script-option:hover{border-color:var(--line-dark);transform:translateY(-2px)}.script-option.selected{border-color:var(--indigo);background:var(--card);box-shadow:0 9px 30px #26376714}.script-option:last-child{grid-column:1/-1}.script-character{font-family:Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;font-size:3.1rem;line-height:1}.script-character.both-script{min-width:4.7rem;font-size:2.35rem;letter-spacing:-.18em}.script-copy{display:flex;flex:1;flex-direction:column;gap:.3rem}.script-copy strong{font-size:.98rem}.script-copy small{color:var(--ink-soft);font-size:.72rem;letter-spacing:.05em}.selection-dot{display:grid;width:1.15rem;height:1.15rem;border:1.5px solid var(--line-dark);border-radius:50%;place-items:center}.selected .selection-dot{border-color:var(--indigo)}.selected .selection-dot span{width:.55rem;height:.55rem;border-radius:50%;background:var(--indigo)}.quick-select{margin-bottom:2.5rem;padding:1.1rem;border:1px solid var(--line);border-radius:.75rem;background:#fffefa8c}.quick-select-heading{display:flex;margin-bottom:.85rem;align-items:center;justify-content:space-between;gap:1rem}.quick-select-heading>div{display:flex;flex-direction:column;gap:.18rem}.quick-select-heading strong{font-size:.78rem}.quick-select-heading span{color:var(--ink-soft);font-size:.68rem}.full-kana-button{display:inline-flex;min-height:2.3rem;padding:.5rem .75rem;border:1px solid var(--indigo);border-radius:.45rem;align-items:center;gap:.4rem;color:var(--indigo);background:transparent;cursor:pointer;font-size:.7rem;font-weight:800}.full-kana-button:hover,.full-kana-button.active{color:#fff;background:var(--indigo)}.full-kana-button svg{width:.9rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.preset-options{display:grid;gap:.55rem;grid-template-columns:repeat(3,minmax(0,1fr))}.preset-options>button{display:flex;min-width:0;min-height:4rem;padding:.65rem .7rem;border:1px solid var(--line);border-radius:.5rem;align-items:center;gap:.55rem;background:#fff;cursor:pointer;text-align:left}.preset-options>button:hover,.preset-options>button.active{border-color:#2637678c;background:#f3f3f7}.preset-options b{min-width:1.9rem;color:var(--coral);font-family:Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;font-size:1.45rem;font-weight:500;text-align:center}.preset-options span{display:flex;min-width:0;flex-direction:column;gap:.15rem}.preset-options strong{overflow:hidden;font-size:.69rem;text-overflow:ellipsis}.preset-options small{color:var(--ink-soft);font-size:.6rem}.kana-groups{display:flex;flex-direction:column;gap:2.25rem}.group-heading{display:flex;margin-bottom:.9rem;align-items:end;justify-content:space-between}.group-heading h3{margin:0 0 .2rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}.group-heading span{color:#8b8f98;font-size:.75rem}.select-all{padding:.35rem 0;border:0;border-bottom:1px solid currentColor;color:var(--indigo);background:transparent;cursor:pointer;font-size:.72rem;font-weight:700}.row-options{display:grid;gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr))}.row-option{display:flex;min-height:72px;padding:.9rem 1rem;border:1px solid var(--line);border-radius:.65rem;align-items:center;gap:.8rem;background:#fffefa85;cursor:pointer;transition:border-color .15s ease,background .15s ease}.row-option:hover{border-color:var(--line-dark);background:var(--card)}.row-option.selected{border-color:#26376773;background:#f3f3f7}.row-option input{position:absolute;width:1px;height:1px;opacity:0}.row-check{display:grid;width:1.15rem;height:1.15rem;flex:0 0 auto;border:1.5px solid var(--line-dark);border-radius:.25rem;place-items:center;background:#fff}.row-check svg{width:.85rem;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.selected .row-check{border-color:var(--indigo);background:var(--indigo)}.row-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:.25rem}.row-copy strong{font-size:.8rem}.row-copy small{overflow:hidden;color:var(--ink-soft);font-family:Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.row-count{color:#9b9da4;font-size:.68rem}.setup-sidebar{position:sticky;top:2rem;display:flex;flex-direction:column;gap:.9rem}.lesson-summary{position:relative;overflow:hidden;padding:2rem;border-radius:.85rem;color:#fff;background:var(--indigo);box-shadow:var(--shadow)}.summary-kana{position:absolute;top:-1.8rem;right:-.8rem;display:flex;flex-direction:column;color:#ffffff0b;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,sans-serif;font-size:5rem;line-height:.82;transform:rotate(-7deg)}.summary-label{position:relative;display:block;margin-bottom:.65rem;color:#ffffff8c;font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.lesson-summary h2{position:relative;margin:0;font-family:Georgia,Times New Roman,serif;font-size:1.75rem;font-weight:400}.summary-stats{position:relative;display:flex;margin:2.2rem 0 1.7rem;align-items:center;gap:1.5rem}.summary-stats>div:not(.stat-divider){display:flex;flex-direction:column;gap:.2rem}.summary-stats strong{font-family:Georgia,Times New Roman,serif;font-size:2rem;font-weight:400}.summary-stats span{color:#ffffff94;font-size:.7rem}.stat-divider{width:1px;height:2.4rem;background:#ffffff29}.summary-hint{min-height:3rem;margin:0 0 1.1rem;color:#ffffffa1;font-size:.76rem;line-height:1.6}.sound-option{position:relative;display:flex;margin-bottom:1.1rem;padding:.85rem .95rem;border:1px solid rgba(255,255,255,.14);border-radius:.55rem;align-items:center;gap:.75rem;background:#ffffff0f;cursor:pointer;transition:border-color .15s ease,background .15s ease}.sound-option:hover{border-color:#ffffff47;background:#ffffff1a}.sound-option.selected{border-color:#ffffff57;background:#ffffff1f}.sound-option input{position:absolute;width:1px;height:1px;opacity:0}.sound-check{display:grid;width:1.15rem;height:1.15rem;flex:0 0 auto;border:1.5px solid rgba(255,255,255,.35);border-radius:.25rem;place-items:center;background:#ffffff14}.sound-check svg{width:.85rem;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;opacity:0}.sound-option.selected .sound-check{border-color:#fff;background:var(--coral)}.sound-option.selected .sound-check svg{opacity:1}.sound-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:.15rem}.sound-copy strong{font-size:.78rem;font-weight:700}.sound-copy small{color:#ffffff94;font-size:.68rem;line-height:1.35}.primary-button,.secondary-button{display:inline-flex;min-height:3.25rem;padding:.85rem 1.25rem;border:0;border-radius:.55rem;align-items:center;justify-content:center;gap:.75rem;cursor:pointer;font-size:.82rem;font-weight:800;transition:background .15s ease,transform .15s ease,opacity .15s ease}.primary-button{color:#fff;background:var(--coral)}.primary-button:hover:not(:disabled){background:#dc5d54;transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;opacity:.38}.primary-button svg,.secondary-button svg{width:1.1rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.start-button{position:relative;width:100%}.keyboard-tip{display:flex;margin-top:1.1rem;align-items:center;justify-content:center;gap:.5rem;color:#ffffff75;font-size:.67rem}.keyboard-tip kbd{border-color:#ffffff38;color:#ffffffb8;background:#ffffff12}.stats-panel{padding:1.35rem;border:1px solid var(--line);border-radius:.75rem;background:#fffefa99}.stats-heading{display:flex;margin-bottom:1rem;align-items:center;justify-content:space-between}.stats-heading>div{display:flex;flex-direction:column;gap:.18rem}.stats-heading span{color:var(--coral);font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.stats-heading h2{margin:0;font-family:Georgia,Times New Roman,serif;font-size:1.15rem;font-weight:500}.stats-heading>svg{width:1.2rem;fill:none;stroke:var(--coral);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}.stats-grid{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(2,1fr)}.stats-grid>div{display:flex;min-height:4rem;padding:.65rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:column;justify-content:center;gap:.15rem}.stats-grid strong{font-family:Georgia,Times New Roman,serif;font-size:1.35rem;font-weight:400}.stats-grid span{color:var(--ink-soft);font-size:.58rem}.stats-panel>p{display:flex;margin:.8rem 0 0;align-items:center;gap:.4rem;color:#92949a;font-size:.58rem;line-height:1.4}.stats-panel>p svg{width:.9rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4}.practice-page{flex:1;padding:4.25rem 0 5rem}.practice-heading{display:flex;align-items:end;justify-content:space-between}.practice-heading h1{margin:0 0 .65rem;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.25rem,5vw,4rem);font-weight:400;letter-spacing:-.045em}.practice-heading p{margin:0;color:var(--ink-soft);font-size:.88rem}.progress-copy{display:flex;padding-bottom:.1rem;align-items:baseline;gap:.35rem;color:var(--ink-soft)}.progress-copy strong{color:var(--ink);font-family:Georgia,Times New Roman,serif;font-size:2rem;font-weight:400}.progress-copy span{font-size:.73rem}.progress-track{overflow:hidden;height:4px;margin:2.25rem 0 2.5rem;border-radius:1rem;background:#dfdcd5}.progress-track span{display:block;height:100%;border-radius:inherit;background:var(--coral);transition:width .25s ease}.practice-grid{display:grid;gap:.85rem;grid-template-columns:repeat(4,minmax(0,1fr))}.practice-card{min-width:0;padding:1.1rem;border:1px solid var(--line);border-radius:.75rem;background:var(--card);box-shadow:0 7px 24px #27314709;transition:border-color .17s ease,box-shadow .17s ease}.practice-card:focus-within{border-color:#2637678c;box-shadow:0 12px 30px #27314714}.practice-card.is-correct{border-color:#40866d99;background:linear-gradient(145deg,#fffefa 55%,#f0f8f4)}.practice-card.is-wrong{border-color:#c54f4f8c;background:linear-gradient(145deg,#fffefa 55%,#fdf0ed)}.card-topline{display:flex;align-items:center;justify-content:space-between;color:#a1a2a7;font-size:.65rem;font-weight:700}.status-icon{display:grid;width:1.2rem;height:1.2rem;border-radius:50%;place-items:center}.status-icon svg{width:.9rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.pending-icon{border:1px solid var(--line)}.correct-icon{color:var(--green);background:var(--green-soft)}.wrong-icon{color:var(--red);background:var(--red-soft)}.kana-character{display:grid;min-height:128px;place-items:center;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;font-size:clamp(3rem,5vw,4.6rem);line-height:1}.answer-label{display:block;margin-bottom:.4rem;color:#8c8f97;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.answer-input{width:100%;height:2.8rem;padding:0 .8rem;border:1px solid var(--line);border-radius:.45rem;color:var(--ink);background:#fff;font-size:1rem;font-weight:650}.answer-input::placeholder{color:#b1b2b7;font-weight:400}.answer-input:focus{border-color:var(--indigo);outline:3px solid rgba(38,55,103,.08)}.is-correct .answer-input{border-color:#40866d80}.is-wrong .answer-input{border-color:#c54f4f8c}.card-feedback{display:flex;min-height:1.15rem;margin-top:.6rem;align-items:center;gap:.3rem;color:#9a9ca3;font-size:1rem}.card-feedback strong{color:var(--red)}.feedback-correct{color:var(--green);font-weight:750}.lesson-actions{display:flex;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);align-items:center;justify-content:space-between}.lesson-actions>div{display:flex;flex-direction:column;gap:.2rem}.lesson-actions>div strong{font-size:.8rem}.lesson-actions>div span{color:var(--ink-soft);font-size:.7rem}.results-page{display:grid;width:min(760px,100% - 48px);min-height:calc(100vh - 147px);margin:0 auto;padding:4.5rem 0;flex:1;place-items:center}.results-card{position:relative;overflow:hidden;width:100%;padding:3.5rem;border:1px solid var(--line);border-radius:1rem;background:var(--card);box-shadow:var(--shadow);text-align:center}.result-decoration{position:absolute;top:-3rem;right:-2rem;color:#26376709;font-family:Yu Gothic,sans-serif;font-size:12rem;transform:rotate(10deg)}.score-ring{--score: 0%;position:relative;display:grid;width:132px;height:132px;margin:0 auto 2rem;border-radius:50%;place-items:center;background:conic-gradient(var(--coral) var(--score),#ebe8e1 0)}.score-ring:before{position:absolute;width:108px;height:108px;border-radius:50%;background:var(--card);content:""}.score-ring>div{position:relative;z-index:1;display:flex;flex-direction:column}.score-ring strong{font-family:Georgia,Times New Roman,serif;font-size:2rem;font-weight:400}.score-ring span{color:var(--ink-soft);font-size:.7rem}.result-eyebrow{display:inline-flex;margin-bottom:.8rem;align-items:center;gap:.4rem;color:var(--coral);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.result-eyebrow.success{color:var(--green)}.result-eyebrow svg{width:1.1rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.results-card h1{margin:0 0 .8rem;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.25rem,6vw,3.6rem);font-weight:400;letter-spacing:-.045em}.results-card>p{max-width:510px;margin:0 auto;color:var(--ink-soft);font-size:.9rem;line-height:1.7}.mistake-list{display:flex;max-width:540px;margin:1.75rem auto 0;flex-wrap:wrap;justify-content:center;gap:.5rem}.mistake-list>span{display:flex;min-width:3.6rem;padding:.5rem .65rem;border:1px solid #ead3cf;border-radius:.45rem;flex-direction:column;background:var(--red-soft)}.mistake-list b{font-family:Yu Gothic,sans-serif;font-size:1.25rem;font-weight:500}.mistake-list small{color:var(--red);font-size:.62rem}.result-actions{display:flex;margin-top:2.25rem;flex-wrap:wrap;justify-content:center;gap:.7rem}.secondary-button{border:1px solid var(--line-dark);color:var(--ink);background:transparent}.secondary-button:hover{border-color:var(--ink-soft);background:#f4f1eb}footer{display:flex;width:min(1180px,100% - 48px);min-height:70px;margin:auto auto 0;border-top:1px solid var(--line);align-items:center;justify-content:space-between;gap:1rem;color:#999a9e}footer>span{color:var(--coral);font-family:Yu Gothic,sans-serif;font-size:.9rem;letter-spacing:.18em}footer p{margin:0;font-size:.68rem}.audio-attribution{max-width:36rem;text-align:right;line-height:1.45}.audio-attribution a{color:#7a7c82;text-decoration:underline;text-decoration-color:#7a7c8259;text-underline-offset:.15em}.audio-attribution a:hover{color:var(--indigo);text-decoration-color:#26376773}@media(max-width:1000px){.setup-layout{gap:2.5rem;grid-template-columns:minmax(0,1fr) 290px}.practice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:820px){.setup-page{padding-top:3.5rem}.hero{margin-bottom:3.5rem}.setup-layout{display:flex;flex-direction:column}.setup-options,.setup-sidebar{width:100%}.setup-sidebar{position:relative;top:0}.stats-grid{grid-template-columns:repeat(4,1fr)}.practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.header-inner,.setup-page,.practice-page,footer{width:calc(100% - 32px)}footer{flex-direction:column;align-items:flex-start;justify-content:center;padding:1rem 0;gap:.45rem}.audio-attribution{max-width:none;text-align:left}.header-inner{height:66px}.header-note{display:none}.setup-page{padding:3rem 0 4rem}.hero h1{font-size:clamp(3rem,15vw,4.5rem)}.hero>p{font-size:.92rem}.script-options,.row-options{grid-template-columns:1fr}.script-option:last-child{grid-column:auto}.script-option{min-height:102px}.quick-select-heading{align-items:stretch;flex-direction:column}.full-kana-button{justify-content:center}.preset-options{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.step-section+.step-section{margin-top:3.5rem}.practice-page{padding:2.25rem 0 3rem}.practice-heading{display:block}.progress-copy{margin-top:1.2rem}.practice-grid{gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr))}.practice-card{padding:.75rem;border-radius:.6rem}.kana-character{min-height:80px;font-size:clamp(2.7rem,14vw,3.5rem)}.answer-label{margin-bottom:.3rem;font-size:.56rem}.answer-input{height:2.6rem;padding:0 .55rem;font-size:.9rem}.card-feedback{min-height:1rem;margin-top:.4rem;font-size:.78rem}.lesson-actions{align-items:stretch;flex-direction:column;gap:1rem}.lesson-actions .primary-button{width:100%}.results-page{width:calc(100% - 32px);padding:2.5rem 0}.results-card{padding:2.5rem 1.25rem}.result-actions{flex-direction:column}.result-actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}