*{box-sizing:border-box} :root{--bg:#0b0d27;--pink:#ff3f92;--cyan:#4df3ff;--text:#fff8ee;--muted:#aaa6c8;--sheet:url('/character-board.jpg?v=4')}body{margin:0;background:#070816;color:var(--text);font-family:system-ui,"Noto Sans JP",sans-serif}h2,h3,p{margin:0}label,summary{cursor:pointer;-webkit-tap-highlight-color:transparent}summary{list-style:none}summary::-webkit-details-marker{display:none}.state{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%)}.shell{position:relative;max-width:440px;height:100svh;min-height:620px;margin:0 auto;background:radial-gradient(ellipse at 18% 10%,#4df3ff0a,transparent 40%),radial-gradient(ellipse at 85% 35%,#ff3f9210,transparent 45%),#0b0d27;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 20px max(8px,env(safe-area-inset-bottom));overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;height:52px;flex-shrink:0}.brand{font-size:27px;color:var(--pink);font-weight:850;letter-spacing:.04em;line-height:1}.brand span{display:block;font-size:9px;color:var(--cyan);letter-spacing:0;margin-top:7px;font-weight:400}.chapter-menu summary{padding:9px 12px;border:1px solid #ffffff1a;border-radius:12px;color:#e8e2d2;font-size:12px}.journey{position:relative;height:44px;flex-shrink:0;font-size:10px;color:var(--muted);padding-top:12px}.phase{color:var(--cyan);font-weight:700}.chapter-title{float:right}.track{position:absolute;bottom:0;left:0;width:100%;height:4px;background:#262853;border-radius:5px}.track div{height:100%;width:25%;background:linear-gradient(90deg,var(--pink),var(--cyan));border-radius:5px;transition:width .2s}.flow{display:none;flex:1;min-height:0;flex-direction:column;gap:10px;padding-top:6px}.scene{position:relative;flex:1;min-height:150px;max-height:290px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#7a5cff12,transparent 65%)}.sprite{background-image:var(--sheet);background-repeat:no-repeat;mix-blend-mode:screen;flex-shrink:0}.stand{height:95%;max-height:285px}.study{width:min(72vw,270px)}.music{height:94%;max-height:250px}.cheer{height:96%;max-height:280px}.worried{width:175px}.stars{position:absolute;left:14%;right:14%;top:17%;display:flex;justify-content:space-between;color:var(--pink);font-size:18px}.stars span{color:var(--cyan);padding-top:42px;font-size:14px}.scene-caption{position:absolute;right:5px;bottom:14px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.15em;color:#aaa6c870}.speech{position:relative;border:1px solid #ff3f9235;background:linear-gradient(130deg,#24265b,#191b3e);border-radius:18px;padding:12px 16px;flex-shrink:0}.speech:before{content:'';position:absolute;left:45%;top:-6px;width:10px;height:10px;background:#24265b;transform:rotate(45deg);border-left:1px solid #ff3f9235;border-top:1px solid #ff3f9235}.speech small{font-size:10px;color:var(--pink);display:block;margin-bottom:4px}.speech p{font-size:15px;line-height:1.5;font-weight:600}.lesson-card,.result-card,.voice-card{border-radius:17px;background:#1b1d43;border:1px solid #ffffff0c;padding:13px 16px;flex-shrink:0}.word{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #ffffff0c}.word:last-child{border:0}.word b{font-size:18px}.word>span{font-size:12px;color:var(--muted)}.helper{font-size:10px;text-align:center;color:var(--muted);flex-shrink:0;line-height:1.5}.primary{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,var(--pink),#ff6aa9);border-radius:14px;padding:15px 17px;font-size:14px;font-weight:750;min-height:50px;flex-shrink:0;box-shadow:0 6px 22px #ff3f9215}.primary span{font-size:17px}.choices{display:grid;gap:7px;flex-shrink:0}.choice{padding:10px 12px;background:#1b1d43;border:1px solid #ffffff16;border-radius:14px;display:flex;align-items:center;gap:11px;min-height:51px}.choice b{font-size:14px;display:block}.choice small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.radio-dot{border:1px solid #ffffff40;border-radius:50%;width:15px;height:15px;flex-shrink:0}.voice-card{text-align:center}.kicker{font-size:9px;letter-spacing:.08em;color:var(--muted)}.voice-card strong,.result-card strong{display:block;font-size:20px;line-height:1.4;margin-top:7px}.voice-card p,.result-card p{font-size:11px;line-height:1.6;color:var(--muted);margin-top:10px}.waves{display:flex;justify-content:center;align-items:center;height:25px;gap:5px;margin-top:12px}.waves i{width:3px;height:8px;background:var(--cyan);border-radius:6px}.waves i:nth-child(2n){height:20px}.waves i:nth-child(3n){height:14px}.mic-icon{display:inline-grid;place-items:center;background:linear-gradient(130deg,#ff9b54,var(--pink));width:40px;height:40px;border-radius:50%;font-size:23px;margin-top:8px}.done>.good,.done>.retry{display:flex;flex-direction:column;flex:1;min-height:0;gap:10px}.done .scene{max-height:310px}.done .result-card{margin-top:0}.result-card .good{color:#83f7c7}footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);flex-shrink:0;padding:13px 0 8px;height:36px}.demo-note{font-size:8px;letter-spacing:.08em;text-align:center;color:#aaa6c870;flex-shrink:0}.menu,.sheet{position:absolute;z-index:5;left:12px;right:12px;border-radius:22px;border:1px solid #ffffff25;background:#141632;box-shadow:0 15px 45px #0009;padding:22px;overflow:auto}.menu{top:72px}.menu h2,.sheet h2{font-size:20px;margin-bottom:18px}.menu label{display:block;border:1px solid #ffffff15;border-radius:14px;padding:14px;margin-bottom:9px}.menu small{font-size:10px;color:var(--cyan);display:block}.menu strong{font-size:15px;display:block;margin-top:5px}.menu p{font-size:10px;color:var(--muted);line-height:1.6}.sheet{bottom:54px;max-height:calc(100% - 130px)}.sheet-face{width:120px;margin:0 auto 14px}.sheet h3{font-size:14px;margin-top:18px}.sheet p{font-size:12px;color:var(--muted);line-height:1.7;margin-top:9px}.sheet p.small{font-size:10px}.chile{padding:14px;background:#ff9b5410;border:1px solid #ff9b5430;border-radius:14px;margin-top:14px}.chile b{display:block;font-size:24px;color:#ff9b54}.chile span{font-size:12px;line-height:1.7}.sheet .close-hint{color:var(--cyan);font-size:10px}.c1,.c2,.c3,.answer,.phase{display:none}#c1:checked~.shell .c1,#c2:checked~.shell .c2,#c3:checked~.shell .c3{display:inline}#a1:checked~.shell .ans1,#a2:checked~.shell .ans2,#a3:checked~.shell .ans3{display:inline}#m-learn:checked~.shell .learn,#m-talk:checked~.shell .talk,#m-voice:checked~.shell .voice,#m-done:checked~.shell .done{display:flex}#m-learn:checked~.shell .p-learn,#m-talk:checked~.shell .p-talk,#m-voice:checked~.shell .p-voice,#m-done:checked~.shell .p-done{display:inline}#m-talk:checked~.shell .track div{width:50%}#m-voice:checked~.shell .track div{width:75%}#m-done:checked~.shell .track div{width:100%}#a1:checked~.shell .choice1,#a2:checked~.shell .choice2,#a3:checked~.shell .choice3{border-color:var(--pink);background:#ff3f9210}#a1:checked~.shell .choice1 .radio-dot,#a2:checked~.shell .choice2 .radio-dot,#a3:checked~.shell .choice3 .radio-dot{background:var(--pink);border-color:var(--pink);box-shadow:inset 0 0 0 3px #1b1d43}.retry{display:none!important}#c1:checked~#a2:checked~.shell .done .good,#c1:checked~#a3:checked~.shell .done .good{display:none!important}#c1:checked~#a2:checked~.shell .done>.retry,#c1:checked~#a3:checked~.shell .done>.retry{display:flex!important}#c1:checked~#a2:checked~.shell .result-card .retry,#c1:checked~#a3:checked~.shell .result-card .retry{display:block!important}summary:focus-visible,label:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.state:focus-visible~.shell{outline:2px solid var(--cyan);outline-offset:-2px}@media(max-height:730px){.shell{padding-top:8px}header{height:44px}.journey{height:35px;padding-top:7px}.flow{gap:7px}.scene{min-height:115px;max-height:205px}.study{width:220px}.word{padding:7px 0}.voice-card{padding:10px 14px}.voice-card p{margin-top:5px}.voice-card strong{font-size:18px}.speech{padding:10px 14px}.speech p{font-size:14px}.choice{padding:8px 12px;min-height:47px}.primary{min-height:45px;padding:12px 15px}footer{padding-top:9px;height:29px}.music{max-height:180px}}@media(min-width:441px){body{background:#070816}.shell{border-left:1px solid #ffffff0c;border-right:1px solid #ffffff0c}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}/* v5: single-page app with transparent standalone illustrations */
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.app-stage{display:flex;flex:1;min-height:0;flex-direction:column;gap:9px;padding-top:6px}.app-stage .character{height:100%;max-height:290px;width:90%;object-fit:contain;object-position:center;filter:drop-shadow(0 6px 18px #7a5cff15)}.app-stage .scene{min-height:120px;max-height:300px}.app-stage .primary{width:100%;justify-content:center;gap:8px}.choice{width:100%;text-align:left}.choice.chosen{border-color:var(--pink);background:#ff3f9210}.choice.chosen .radio-dot{background:var(--pink);border-color:var(--pink);box-shadow:inset 0 0 0 3px #1b1d43}.chapter-button{padding:8px 11px;border:1px solid #ffffff20;border-radius:12px;font-size:12px}.overall-progress{flex-shrink:0;padding-top:12px}.overall-progress .row{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:6px}.overall-progress strong{color:var(--cyan)}.total-track{height:5px;background:#262853;border-radius:8px;overflow:hidden}.total-track div{height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));transition:width .25s}.step-label{display:flex;justify-content:space-between;font-size:10px;padding:11px 0 3px;color:var(--muted);flex-shrink:0}.step-label span:first-child{color:var(--cyan)}footer button{font-size:10px;color:var(--muted);padding:8px 3px}footer button span{color:var(--cyan)}.success-text{color:#83f7c7}.alternate{flex-shrink:0;background:#ff9b540c;border:1px solid #ff9b5430;border-radius:12px;font-size:10px;color:var(--muted);padding:9px 12px}.alternate summary{color:#ffb36f;cursor:pointer}.alternate p{font-size:10px;line-height:1.5;margin-top:6px}.alternate[open]{max-height:105px;overflow:auto}.secondary{display:block;width:100%;background:#24265b;border:1px solid #ffffff20;border-radius:13px;padding:12px;margin-top:12px}.sheet-backdrop{position:absolute;inset:0;background:#0009;z-index:20;display:flex;align-items:flex-end;padding:12px 12px 42px;backdrop-filter:blur(3px)}.modal-sheet{background:#141632;border:1px solid #ffffff25;border-radius:23px;padding:24px 20px;width:100%;max-height:85%;overflow:auto;box-shadow:0 15px 45px #0009;position:relative}.modal-sheet h2{font-size:20px;margin:0 25px 17px 0}.modal-sheet h2 small{font-size:11px;color:var(--cyan);font-weight:400}.modal-sheet p{font-size:12px;line-height:1.7;color:var(--muted);margin-top:12px}.modal-sheet p.small{font-size:10px}.sheet-close{position:absolute;right:15px;top:15px;font-size:25px;width:32px;height:32px;border-radius:10px;background:#24265b}.chapter-entry{width:100%;display:block;text-align:left;border:1px solid #ffffff15;border-radius:14px;padding:14px;margin-bottom:9px}.chapter-entry small{font-size:10px;color:var(--cyan);display:block}.chapter-entry strong{font-size:15px;display:block;margin-top:5px}.book-word{padding:13px 0;border-bottom:1px solid #ffffff10;display:flex;flex-direction:column;gap:5px}.book-word b{font-size:19px}.book-word span{font-size:12px;color:var(--muted)}.book-empty{padding:30px 0;color:var(--muted);font-size:13px;line-height:1.7}.quiz-word{font-size:28px;text-align:center;color:var(--cyan);padding:35px 0 16px}.quiz-meaning{font-size:14px;color:var(--muted);text-align:center;min-height:50px}.modal-sheet .primary{margin-top:18px}.app-stage .result-card strong{font-size:18px}@media(max-height:730px){.overall-progress{padding-top:7px}.step-label{padding-top:8px}.app-stage{gap:6px}.app-stage .scene{min-height:100px;max-height:205px}.app-stage .character{max-height:205px}.app-stage .speech p{font-size:13px}.app-stage .result-card{padding:9px 13px}.app-stage .alternate{padding:7px 10px}.app-stage .result-card p{font-size:10px;margin-top:5px}}@media(max-height:650px){.app-stage .scene{min-height:85px}.app-stage .character{max-height:170px}.app-stage .choice{min-height:44px}}
.fallback-character{height:100%;max-height:290px;width:90%;object-fit:contain;object-position:center}.fallback-character.sheet-face{height:110px;width:110px}.app-stage .scene-caption{z-index:1}.app-stage .scene{overflow:visible}

/* Approved original illustration, displayed without redrawing its pose. */
.shell.is-welcome{min-height:0}.welcome-tag{color:var(--muted);font-size:10px;border:1px solid #ffffff20;border-radius:20px;padding:7px 12px}.welcome-intro{text-align:center;flex-shrink:0;padding:18px 0 4px}.welcome-eyebrow{color:var(--pink)!important;font-size:10px!important;letter-spacing:.1em;margin-bottom:10px!important}.welcome-intro h1{font-size:25px;line-height:1.55;letter-spacing:.06em;margin:0 0 9px}.welcome-intro>p{font-size:11px;color:var(--muted);line-height:1.8}.welcome-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px 0;background:radial-gradient(ellipse at 50% 65%,#7050ff20,transparent 68%)}.approved-standing{height:100%;aspect-ratio:360/876;position:relative;overflow:hidden;flex-shrink:0}.approved-standing img{position:absolute;width:348.333333%;height:143.150685%;left:-31.111111%;top:-17.351598%;max-width:none}.welcome-bottom{flex-shrink:0;padding:9px 0 12px}.welcome-bottom .primary{width:100%;justify-content:center}.welcome-bottom p{text-align:center;font-size:9px;color:var(--muted);margin-top:11px}.is-welcome .demo-note{margin-bottom:2px}#m-start:checked~.shell .start{display:flex}#m-start:checked~.shell>.journey,#m-start:checked~.shell>footer{display:none}.flow.start{min-height:0;gap:0}.flow.start .welcome-art{max-height:none}.start .welcome-intro{padding-top:18px}@media(max-height:730px){.welcome-intro{padding-top:8px}.welcome-intro h1{font-size:21px;line-height:1.4;margin-bottom:6px}.welcome-eyebrow{margin-bottom:6px!important}.welcome-bottom{padding-bottom:8px}.welcome-art{padding:5px 0}}@media(max-height:620px){.welcome-intro h1{font-size:18px}.welcome-intro>p{font-size:10px}.welcome-bottom p{margin-top:6px}}

/* Standalone app art: no model-sheet fragments or CSS cropping. */
.welcome-character{height:100%;width:100%;object-fit:contain;object-position:center;max-width:100%;display:block}.app-stage .scene{overflow:hidden}.app-stage .character{filter:none}.welcome-art{overflow:hidden}

.book-character{display:block;height:110px;max-width:100%;object-fit:contain;margin:0 auto 12px}

/* Encounter stories: one phone viewport, two vocabulary cards at a time. */
.pattern{font-size:11px;line-height:1.5;color:var(--cyan);flex-shrink:0;margin:0;padding:7px 10px;background:#24265b44;border-radius:9px}.speech .translation{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}.chapter-button{max-width:48%;font-size:11px;text-align:right;line-height:1.4}.review-heading{font-size:14px;color:var(--cyan);margin:22px 0 12px}.app-stage .scene{flex:1;min-height:70px}.app-stage .character{max-height:250px}.choices .choice b{font-size:15px;line-height:1.3;display:block}.choices .choice small{line-height:1.3}.app-stage .speech{flex-shrink:0}.app-stage .lesson-card,.app-stage .choices,.app-stage .primary,.app-stage .voice-card,.app-stage .result-card{flex-shrink:0}@media(max-height:730px){.app-stage .scene{min-height:45px}.app-stage .character{max-height:170px}.app-stage .speech{padding:8px 12px}.speech .translation{font-size:11px}.choices .choice b{font-size:13px}.pattern{font-size:10px;padding:5px 9px}}

.shell.is-intro{min-height:0}.story-intro{flex:1;min-height:0;overflow:auto;padding:12px 0 18px}.story-intro>img{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;border-radius:14px}.story-intro h1{font-size:19px;line-height:1.5;margin:18px 0 14px}.intro-copy p{font-size:13px;line-height:1.85;color:var(--muted);margin:0 0 13px}.intro-copy .intro-message{color:var(--cyan);font-size:17px;font-weight:700}.intro-bottom{flex-shrink:0;padding:10px 0}.intro-bottom button{width:100%;justify-content:center}.story-intro:focus-visible{outline:2px solid var(--cyan)}

.transition-stage{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;text-align:center;padding-top:14px}.transition-eyebrow{flex-shrink:0;color:var(--cyan);font-size:23px;font-weight:750;letter-spacing:.08em}.transition-art{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:10px}.transition-art img{height:100%;width:100%;object-fit:contain}.transition-copy{flex-shrink:0;padding:12px 0}.transition-copy p{font-size:13px;color:var(--muted);line-height:1.6}.transition-copy h1{font-size:23px;line-height:1.5;margin:8px 0;color:var(--text)}.transition-copy .small{font-size:10px}

.app-stage .lesson-card{max-height:240px;overflow:auto}.word .tutorial-note{font-size:11px;line-height:1.5;color:var(--muted);margin-top:6px}.lesson-card .word{flex-wrap:wrap}.word .tutorial-note{flex-basis:100%}

.tutorial-heading{font-size:13px;color:var(--cyan);margin:0 0 6px;line-height:1.4}

.tutorial-supplement{flex-shrink:0;padding:3px 4px;font-size:11px;line-height:1.5;color:var(--muted)}.tutorial-supplement small{display:block;color:var(--cyan);font-size:10px;margin-bottom:3px}.tutorial-supplement b{color:var(--text);font-size:12px}.tutorial-supplement p+p{margin-top:3px}

.explanation-box{display:block}.tutorial-supplement{display:block}.alternate summary{display:block}

.name-backdrop{z-index:100;position:fixed;inset:auto 0;top:0;height:100dvh;max-width:440px;margin-inline:auto;align-items:center;justify-content:center;padding:16px}.name-dialog{max-height:100%;overscroll-behavior:contain;scroll-padding-block:16px}.name-dialog h2{font-size:22px}.name-dialog .small{line-height:1.7;margin:12px 0}.name-label{display:block;margin:20px 0 8px;color:var(--cyan);font-size:13px}.name-dialog input{width:100%;border:1px solid #4df3ff66;background:#121431;color:var(--text);border-radius:12px;padding:14px;font:inherit;font-size:16px}.name-dialog input:focus{outline:2px solid var(--cyan);outline-offset:2px}.name-error{color:#ff9bbc;font-size:13px;min-height:20px;margin:8px 0}.name-dialog .primary{width:100%}

.voice-card .reply-translation,.result-card .reply-translation{font-size:13px;line-height:1.5;color:var(--muted);margin-top:6px}

.volume-menu{border-bottom:1px solid #ffffff22;padding:12px 0}.volume-menu>summary{font-size:16px;color:var(--cyan);font-weight:700}.scene-note{font-size:11px;line-height:1.5;color:var(--muted);margin:5px 0 8px}.app-stage{overflow-y:auto}.app-stage .choices .choice b,.app-stage.is-learn .lesson-card .word b{overflow-wrap:anywhere;font-size:14px;line-height:1.3}.app-stage .lesson-card .word b{overflow-wrap:anywhere}.tutorial-supplement{flex-shrink:0;font-size:11px;line-height:1.5}.tutorial-supplement small{color:var(--cyan)}@media(max-height:730px){.app-stage .choices .choice b,.app-stage.is-learn .lesson-card .word b{font-size:12px}}

/* Epilogue: same one-page hierarchy as the opening. */
.is-ending{min-height:0}.ending-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(6px,1.2svh,12px);padding-top:5px}.ending-art{width:100%;height:clamp(135px,29svh,270px);min-height:0;flex:1;object-fit:contain}.ending-stage h1{font-size:clamp(20px,3svh,25px);line-height:1.35;margin:0;flex-shrink:0}.ending-copy{font-size:13px;line-height:1.8;max-width:350px;flex-shrink:0}.ending-quote{flex-shrink:0;padding:7px 10px;max-width:100%}.ending-quote p[lang=es]{font-size:15px;line-height:1.5;color:var(--cyan);overflow-wrap:anywhere}.ending-quote p[lang=ja]{font-size:12px;line-height:1.6;margin-top:4px}.ending-close{flex-shrink:0;font-size:12px;line-height:1.7;color:var(--muted);max-width:340px}.ending-bottom{flex-shrink:0;display:flex;flex-direction:column;gap:7px;padding-top:14px}.ending-bottom .primary{justify-content:center;text-align:center}
.ending-bottom .primary,.ending-bottom .secondary{width:100%;min-height:41px;font-size:13px;padding:10px 14px}.ending-bottom>p{text-align:center;font-size:10px;color:var(--muted);line-height:1.5;margin-top:2px}@media(max-height:680px){.ending-stage{gap:5px}.ending-art{height:150px}.ending-copy{font-size:12px;line-height:1.6}.ending-quote{padding:4px}.ending-quote p[lang=es]{font-size:13px}.ending-close{font-size:11px}.ending-bottom{padding-top:7px;gap:5px}}

.save-warning{font-size:11px;line-height:1.5;color:#ffb5c9;text-align:center;padding:4px}.welcome-bottom .secondary{margin-top:8px;width:100%;font-size:12px;min-height:38px}

.pronounce{border:1px solid #4df3ff55;color:var(--cyan);background:#0e1638;border-radius:8px;font-size:11px;padding:6px 9px;margin-left:auto;min-height:32px}.pronounce:disabled{opacity:.5;cursor:default}.audio-name-note{display:block;flex-basis:100%;font-size:10px;color:var(--muted)}.recognition-panel{flex-shrink:0;padding:5px 0}.recognition-note,.recognition-status{font-size:11px;line-height:1.5;color:var(--muted);margin:4px 0}.recognition-panel .secondary{width:100%;font-size:12px;min-height:37px;padding:8px}.recognized-text{padding:8px;border:1px solid #4df3ff33;border-radius:9px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.recognized-text small{display:block;color:var(--cyan);font-size:10px}.recognition-status:empty{display:none}

.book-word-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.book-word-heading b{flex:1;min-width:0;overflow-wrap:anywhere}.book-word-heading .pronounce,.quiz-audio .pronounce{min-height:44px;flex-shrink:0}.book-word-heading .audio-name-note{width:100%}.quiz-audio{text-align:center;margin:0 0 14px}.quiz-audio .pronounce{margin:0}.quiz-audio .audio-name-note{margin-top:7px}

.pronunciation-title{font-size:14px;color:var(--cyan);margin:9px 0}.practice-model{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.practice-model .pronounce{margin-left:0;min-height:44px}.local-recognition{margin:12px 0}.local-recognition summary{font-size:12px;color:var(--cyan);padding:10px 0;cursor:pointer}.recognition-panel .secondary{min-height:44px}

.answer-result{display:flex;flex-direction:column;gap:6px;padding:12px;margin:10px 0;border:1px solid #ffb36f88;border-radius:12px;font-size:14px;overflow-wrap:anywhere}.answer-result.is-match{border-color:#83f7c7}.answer-result strong{font-size:13px;color:#ffb36f}.answer-result.is-match strong{color:#83f7c7}.answer-result small{font-size:11px;color:var(--muted);margin-top:5px}.answer-cancel{font-size:12px;padding:12px;color:var(--muted);min-height:44px}

.practice-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px}.practice-heading h3{font-size:14px;color:var(--cyan);margin:0}.practice-heading .pronounce{margin:0;min-height:44px;flex-shrink:0}.recognition-download{flex-shrink:0;padding:8px 0;color:var(--muted);font-size:11px}.download-heading{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}.recognition-download progress{display:block;width:100%;height:6px;accent-color:var(--cyan);border:0;border-radius:6px;overflow:hidden}.recognition-download progress::-webkit-progress-bar{background:#4df3ff22;border-radius:6px}.recognition-download progress::-webkit-progress-value{background:var(--cyan);border-radius:6px}

.record-control{display:flex;justify-content:center;padding:8px 0}.record-button{display:flex;align-items:center;justify-content:center;flex:0 0 64px;width:64px;height:64px;min-height:64px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#ff3295,#ff69b4);color:#fff;box-shadow:0 4px 20px #ff32952b;cursor:pointer;touch-action:manipulation}.record-button:disabled{opacity:.45;cursor:default}.record-button:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}.record-button.is-recording{box-shadow:0 0 0 6px #ff32952b,0 0 0 12px #ff329512}.record-button svg{display:block;flex-shrink:0}

/* Keep the listening portrait stable when recognition results appear. */
.app-stage.is-voice .scene{flex:0 0 clamp(150px,22svh,205px);height:clamp(150px,22svh,205px);min-height:clamp(150px,22svh,205px);max-height:none}.app-stage.is-voice .character{height:100%;max-height:none}

.pronounce.is-playing{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#ff3f9222;border-color:var(--pink);color:#ff7fba}.playback-bars{display:inline-flex;align-items:center;gap:2px;height:14px}.playback-bars i{width:2px;height:5px;border-radius:2px;background:currentColor;animation:audio-bars .65s ease-in-out infinite alternate}.playback-bars i:nth-child(2){height:12px;animation-delay:-.2s}.playback-bars i:nth-child(3){height:8px;animation-delay:-.4s}@keyframes audio-bars{to{transform:scaleY(.35)}}@media(prefers-reduced-motion:reduce){.playback-bars i{animation:none}}

/* The opening action becomes the preparation progress indicator. */
.welcome-progress{position:relative;overflow:hidden;isolation:isolate;background:#572448!important;opacity:1!important;cursor:wait}.welcome-progress-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(110deg,#ff3295,#ff65ae);z-index:-1;transition:width .2s ease}.welcome-progress-label{display:block;position:relative;font-size:clamp(11px,3.1vw,15px);white-space:normal;line-height:1.5}.welcome-progress.is-indeterminate .welcome-progress-fill{background:linear-gradient(110deg,#b82f77,#ff65ae,#b82f77);background-size:200% 100%;animation:welcome-preparing 1.8s linear infinite}@keyframes welcome-preparing{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.welcome-progress.is-indeterminate .welcome-progress-fill{animation:none}.welcome-progress-fill{transition:none}}

/* Fit the actual embedded viewport, including short browser/preview windows. */
html{width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;min-width:0;overflow-x:hidden}
.shell{width:100%;min-width:0;min-height:0;height:var(--app-height,100svh)}
.shell>header{min-width:0;gap:8px}
.brand{min-width:0}
.welcome-tag{flex-shrink:0}
.name-dialog input{font-size:16px;max-width:100%}

.choice.is-correct{border-color:#83f7c7;background:#83f7c70d}.choice.is-incorrect{border-color:#ffb36f;background:#ffb36f0d}
/* Question and correctness feedback share the same portrait frame and bubble. */
.app-stage.is-learn,.app-stage.is-talk{--talk-portrait-height:clamp(150px,22svh,205px)}
.app-stage.is-learn .scene,.app-stage.is-talk .scene{flex:0 0 var(--talk-portrait-height);height:var(--talk-portrait-height);min-height:var(--talk-portrait-height);max-height:none}
.app-stage.is-learn .character,.app-stage.is-talk .character{height:100%;max-height:none}
.speech.choice-response.is-correct{border-color:#83f7c755}
.speech.choice-response.is-incorrect{border-color:#ffb36f55}
.speech.choice-response.is-correct>.choice-correct{color:#83f7c7}
.speech.choice-response.is-incorrect>p:not(.translation){color:#ffb36f}
.purchase-price{font-size:30px;font-weight:800;color:var(--pink,#ff398f);margin:20px 0 12px}.purchase-price small{font-size:12px;color:var(--muted,#aaa8c4)}.purchase-signin{display:block;text-align:center;text-decoration:none}.purchase-admin{color:#66e6ef}.purchase-menu{background:none;border:0;cursor:pointer;width:100%;padding:8px;color:#aaa8c4}.locked-stage{overflow:auto;min-height:0;flex:1;padding:16px 0}.locked-stage .scene{height:180px;flex:none}.locked-stage .character{height:180px;max-height:none}

/* Study translations match the question bubble; let the page scroll as one surface. */
.app-stage.is-learn .lesson-card .word>span,.app-stage .speech .translation{font-size:13px;line-height:1.45}
.app-stage.is-learn .lesson-card{max-height:none;overflow:visible}

/* Short embedded browsers must remain scrollable instead of clipping controls. */
html,body{min-height:100%;overflow-y:auto}
.shell{min-height:480px;overflow:visible}
.shell.is-welcome,.shell.is-ending{min-height:480px}
.shell>*,.app-stage>*{min-width:0}
.sheet-backdrop{max-width:100%}

/* Each study expression is a Spanish/Japanese pair with its audio control on the right. */
.app-stage.is-learn .lesson-card .word{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.word-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.word-copy>b,.word-copy>span{display:block;overflow-wrap:anywhere}
.app-stage.is-learn .word-copy>span{font-size:13px;line-height:1.45;color:var(--muted)}
.app-stage.is-learn .word>.pronounce{grid-column:2;grid-row:1;margin:0}
.app-stage.is-learn .word>.audio-name-note{grid-column:1/-1}

/* v96: one document scroll, with tools after the page content. */
.shell,.shell.is-welcome,.shell.is-intro,.shell.is-ending{height:auto;min-height:max(480px,var(--app-height,100svh));overflow:visible}
.app-stage{flex:0 0 auto;min-height:auto;overflow:visible}
.app-stage .scene{flex:0 0 clamp(150px,22svh,205px);height:clamp(150px,22svh,205px);min-height:clamp(150px,22svh,205px);max-height:none}
.app-stage .character{height:100%;max-height:none}
.story-intro,.locked-stage{flex:0 0 auto;overflow:visible}
.welcome-art{flex:0 0 auto;height:clamp(300px,57svh,520px)}
.transition-art{flex:0 0 auto;height:clamp(300px,57svh,520px)}
.ending-art{flex:0 0 auto}
footer.utility-footer{position:static;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;height:auto;margin-top:8px;padding:2px 0;border:0;background:transparent}
.utility-footer button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:5px 0;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.utility-icon{display:block;width:16px;height:16px;flex-shrink:0;filter:none}
.utility-icon .icon-accent{stroke:#bd82ac}
.utility-footer button .utility-label{font-size:9px;line-height:1.4;color:var(--muted);white-space:nowrap}
.utility-footer button .utility-count{color:var(--muted)}
.utility-footer button:hover{background:#ffffff05;color:var(--cyan)}
.utility-footer button:active{transform:translateY(1px)}

/* Tool dialogs stay in the visible viewport while the document scrolls. */
.sheet-backdrop{position:fixed;inset:0;max-width:440px;margin-inline:auto}

/* v98: welcome and epilogues follow their content, without footer space. */
.shell.is-welcome,.shell.is-ending{height:auto;min-height:0}
.is-ending .ending-stage{flex:0 0 auto}
.is-welcome>footer,.is-ending>footer{display:none}

/* v99: continue the app canvas below short pages and through overscroll. */
html,body{background-color:var(--bg,#0b0d27)}

/* Chapter transitions follow the illustration and copy without a stretched gap. */
.shell.is-transition{min-height:0}
.transition-stage{flex:0 0 auto}
.purchase-content{font-size:13px;line-height:1.75}
.purchase-content h2{font-size:20px;line-height:1.5;margin:0 0 8px}
.purchase-content p{font-size:13px;line-height:1.75;margin:8px 0}
.purchase-content p.small,.purchase-content label.small{font-size:11px;line-height:1.75;color:var(--muted)}
.purchase-content .purchase-price{font-size:30px;line-height:1.4;font-weight:800;color:var(--pink);margin:16px 0 10px}
.purchase-content .purchase-price small{font-size:12px;color:var(--muted)}
.purchase-actions{margin:24px 0}
.purchase-content .primary,.purchase-content .secondary{width:100%;min-height:48px;padding:14px 18px;font-size:14px;line-height:1.5;box-sizing:border-box;justify-content:center;text-align:center}
.purchase-content form{margin:0}
.purchase-content #purchase-restore-form{display:grid;gap:12px;margin:24px 0 12px}
.purchase-content #purchase-email{display:block;width:100%;min-width:0;box-sizing:border-box;padding:14px;font-size:16px;background:#1b1d42;color:var(--text);border:1px solid #62648a;border-radius:12px}
.purchase-content .recognition-status:empty{display:none}
.purchase-portrait .scene{height:150px;min-height:150px;max-height:150px;flex:none;margin:0 0 6px}
.purchase-portrait .character{height:150px;max-height:none;width:100%;object-fit:contain}
.locked-stage .scene{height:150px;min-height:150px;max-height:150px;margin-bottom:6px}
.locked-stage .character{height:150px}
.modal-sheet .purchase-content .purchase-price{font-size:30px;color:var(--pink)}
.modal-sheet .purchase-content .purchase-price small{font-size:12px;color:var(--muted)}
.purchase-content .purchase-actions .primary{margin:0}