.scene-card{background:#f7f9fa;border:1px solid #cfdee7;border-radius:18px;width:100%;margin:18px 0 24px;overflow:hidden}.scene-card img{object-fit:contain;width:100%;max-width:100%;height:auto;display:block}:root{--navy:#17345f;--blue:#2366a8;--sky:#e9f4fb;--yellow:#f4c653;--cream:#fbf7ee;--ink:#1e2b3c;--muted:#657384;--line:#d9e0e4;--white:#fffefa}*{box-sizing:border-box}html{background:var(--cream);min-height:100%}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 8% 10%,#f4c6533d,transparent 24rem),radial-gradient(circle at 95% 86%,#2366a81f,transparent 28rem),var(--cream);margin:0;font-family:Hiragino Sans,Yu Gothic,Noto Sans JP,system-ui,sans-serif}button{font:inherit}.page-shell{flex-direction:column;width:min(820px,100% - 28px);min-height:100vh;margin:0 auto;padding:34px 0 22px;display:flex}.welcome-card,.practice-card,.done-card{background:#fffefaf5;border:1px solid #17345f21;border-radius:30px;position:relative;overflow:hidden;box-shadow:0 26px 80px #17345f1f}.welcome-card{margin:auto 0;padding:clamp(32px,7vw,66px)}.welcome-card:after,.done-card:after{content:"";border:30px solid #f4c65338;border-radius:50%;width:180px;height:180px;position:absolute;top:-68px;right:-76px}.lesson-chip,.prompt-tag{color:var(--navy);background:#e6f1f8;border-radius:999px;padding:7px 13px;font-size:.78rem;font-weight:800;display:inline-block}.kicker{color:var(--blue);letter-spacing:.15em;margin:25px 0 8px;font-size:.72rem;font-weight:850}.welcome-card h1,.done-card h1{color:var(--navy);margin:0;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(2.5rem,8vw,4.6rem);line-height:1.15}.welcome-card h1 span{color:var(--blue)}.welcome-copy{max-width:560px;color:var(--muted);margin:23px 0 28px;font-size:1.05rem;line-height:1.85}.primary-button,.next-button,.listen-button,.hint-toggle{cursor:pointer;border:0;transition:all .15s}.primary-button,.next-button{color:#fff;background:var(--navy);border-radius:14px;padding:15px 22px;font-weight:800}.primary-button:hover,.next-button:hover:not(:disabled){background:#102845;transform:translateY(-1px)}.welcome-meta{flex-wrap:wrap;gap:8px;margin-top:28px;display:flex}.welcome-meta span{color:#667485;background:#f3f4f3;border-radius:8px;padding:6px 10px;font-size:.75rem;font-weight:700}footer{color:#7c8791;text-align:center;margin-top:auto;padding-top:18px;font-size:.77rem}.practice-header{justify-content:space-between;align-items:end;gap:20px;margin:12px 0 18px;display:flex}.practice-header .kicker{margin:0 0 5px}.practice-header h1{color:var(--navy);margin:0;font-family:Yu Mincho,serif;font-size:clamp(1.55rem,4vw,2.35rem)}.step-count{color:var(--muted)}.step-count strong{color:var(--blue);font-size:2.25rem}.progress{background:#dae2e6;border-radius:999px;height:7px;margin-bottom:18px;overflow:hidden}.progress div{background:linear-gradient(90deg,var(--yellow),#efa844);height:100%}.practice-card{padding:clamp(24px,5.5vw,48px)}.prompt-tag{color:#76601d;background:#fff0bc;border-radius:8px}.instruction{color:var(--muted);margin:20px 0 11px;font-size:.88rem}.listen-button{width:100%;min-height:68px;color:var(--navy);background:var(--sky);text-align:left;border:1px solid #b8d1e1;border-radius:17px;align-items:center;gap:15px;padding:13px 18px;font-weight:800;display:flex}.listen-button.playing{color:#fff;background:var(--blue)}.speaker{color:#fff;background:var(--blue);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.playing .speaker{color:var(--blue);background:#fff}.question-panel{border-left:5px solid var(--yellow);background:#faf8f1;border-radius:0 16px 16px 0;margin:27px 0 20px;padding:23px 24px}.question-label{color:#8c7952;letter-spacing:.12em;font-size:.72rem;font-weight:850}.question-panel h2{color:var(--navy);margin:8px 0 0;font-family:Yu Mincho,serif;font-size:clamp(1.3rem,3.7vw,1.9rem);line-height:1.65}.answer-zone{color:#4d5966;background:#f0f2f3;border-radius:16px;align-items:center;gap:17px;min-height:88px;margin-bottom:17px;padding:15px 18px;display:flex}.answer-zone.ready{color:#315c4c;background:#eaf5ef}.answer-zone p{margin:3px 0 0;font-size:.84rem}.countdown{border:4px solid var(--yellow);width:54px;height:54px;color:var(--navy);background:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:1.5rem;font-weight:900;display:flex}.hint-wrap{border-top:1px solid var(--line);padding-top:16px}.hint-toggle{width:100%;color:var(--blue);background:0 0;justify-content:space-between;padding:11px 3px;font-size:.88rem;font-weight:800;display:flex}.hint-box{color:var(--navy);background:#fff6d6;border-radius:13px;padding:15px 18px}.hint-box p{margin:5px 0;font-size:1.02rem;font-weight:750}.navigation{justify-content:flex-end;margin-top:22px;display:flex}.next-button{justify-content:center;gap:15px;min-width:165px;display:flex}.next-button:disabled{color:#8b949b;cursor:not-allowed;background:#e0e4e6}.done-card{text-align:center;width:min(630px,100%);margin:auto;padding:clamp(35px,7vw,64px)}.done-icon{color:#fff;background:var(--blue);border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 20px;font-size:2rem;font-weight:900;display:flex}.done-card .kicker{margin-top:0}.done-card h1{font-size:clamp(2rem,6vw,3.3rem)}.done-card>p{color:var(--muted);line-height:1.8}.done-summary{justify-content:center;align-items:baseline;gap:10px;margin:24px 0;display:flex}.done-summary strong{color:var(--blue);font-size:3.8rem}.done-summary span{color:var(--muted);font-weight:700}.info-card{background:linear-gradient(145deg,#eef7fc,#fffaf0);border:1px solid #b9cfdf;border-radius:20px;max-width:620px;margin:18px 0 27px;padding:20px}.info-title{border-bottom:1px solid #cfdee7;align-items:center;gap:12px;padding-bottom:14px;display:flex}.info-title>span{color:#fff;background:var(--blue);border-radius:50%;justify-content:center;align-items:center;width:43px;height:43px;display:flex}.info-card small{color:#6d7d8a;letter-spacing:.11em;font-size:.65rem;font-weight:850;display:block}.info-card strong{color:var(--navy);margin-top:2px;display:block}.info-grid{grid-template-columns:repeat(3,1fr);gap:10px;padding-top:14px;display:grid}.info-grid>div{text-align:center;background:#ffffffd9;border-radius:14px;flex-direction:column;justify-content:center;min-height:92px;padding:12px;display:flex}.info-grid>div>span{font-size:1.5rem}.info-card.compact{margin:0 0 20px;padding:13px}.info-card.compact .info-title{display:none}.info-card.compact .info-grid{padding:0}.info-card.compact .info-grid>div{min-height:72px;padding:8px}@media (width<=620px){.page-shell{width:min(100% - 20px,820px);padding-top:21px}.welcome-card,.practice-card,.done-card{border-radius:22px}.practice-card{padding:22px 18px}.question-panel{padding:19px 16px}.next-button{width:100%}.info-grid{gap:6px}.info-grid>div{padding:8px 4px}.info-card strong{font-size:.86rem}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}