:root{color:#24211d;font-synthesis:none;text-rendering:optimizelegibility;--ink:#24211d;--muted:#70675f;--paper:#fffdf8;--cream:#f5efe4;--line:#ddd4c6;--red:#c64b40;--green:#16775b;--green-dark:#0d5b44;--blue:#2f79bf;background:#f5efe4;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{background:radial-gradient(circle at 14% 6%, #2f79bf1c, transparent 30%), linear-gradient(180deg, #fffaf0 0%, var(--cream) 100%);min-width:320px;min-height:100dvh;margin:0}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.app-shell{width:100%;max-width:760px;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:14px;margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.eyebrow{color:var(--red);letter-spacing:.16em;text-transform:uppercase;margin:0 0 4px;font-size:.72rem;font-weight:800}.topbar h1,.script-panel h2,.focus-panel h2{margin:0;font-family:Georgia,Times New Roman,serif}.topbar h1{font-size:clamp(1.8rem,7vw,3rem);line-height:1.05}.scene-card,.practice-card,.script-panel,.focus-panel{background:var(--paper);border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 55px #4e3a201f}.scene-card{grid-template-columns:minmax(0,.92fr) minmax(260px,1fr);align-items:stretch;gap:14px;padding:14px;display:grid}.scene-text{align-content:center;gap:14px;padding:6px;display:grid}.scene-text p{color:var(--muted);margin:0;font-size:1rem;line-height:1.35}.role-switch,.mode-switch{border:1px solid var(--line);background:#ffffffb8;border-radius:18px;gap:6px;padding:5px;display:grid}.role-switch{grid-template-columns:1fr}.mode-switch{grid-template-columns:1fr 1fr}.role-switch button,.mode-switch button,.secondary-button{cursor:pointer;border-radius:14px;min-height:44px;padding:9px 13px;font-weight:800}.role-switch button,.mode-switch button{color:var(--muted);background:0 0;border:0}.role-switch button.active,.mode-switch button.active{color:#fff;background:linear-gradient(145deg,#3187d7,#1d5e9a);box-shadow:0 9px 20px #2721191f}.secondary-button{color:var(--ink);border:1px solid var(--line);background:#fff}.step-description{border:1px solid var(--line);background:radial-gradient(circle at 16% 18%,#2f79bf1a,#0000 28%),#f8f2e8;border-radius:20px;align-content:center;gap:12px;min-height:230px;padding:20px;display:grid}.step-description span{color:var(--red);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;font-weight:900}.step-description strong{color:var(--muted);font-size:.85rem}.step-description p{color:var(--ink);margin:0;font-size:clamp(1.18rem,3.2vw,1.7rem);font-weight:750;line-height:1.28}.practice-card{gap:13px;padding:18px 16px;display:grid;position:relative;overflow:hidden}.practice-card.userTurn{border-color:#16775b61;box-shadow:0 18px 55px #16775b21}.card-meta,.speaker-row,.tool-row,.controls{justify-content:space-between;align-items:center;gap:10px;display:flex}.card-meta{color:var(--muted);font-size:.82rem}.card-meta strong{color:var(--green);text-transform:uppercase}.speaker-row h2{margin:0;font-size:1.28rem}.icon-button{min-height:42px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:8px;padding:8px 12px;font-weight:800;display:inline-flex}.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:22px}.japanese-line{color:#111;text-align:center;margin:0;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-size:clamp(2rem,8vw,4.2rem);font-weight:600;line-height:1.25}.your-turn-prompt{text-align:center;background:#f2faf6;border:2px dashed #16775b61;border-radius:22px;place-items:center;gap:10px;min-height:150px;padding:22px;display:grid}.your-turn-prompt span{color:var(--green);font-size:clamp(1.5rem,6vw,2.4rem);font-weight:900}.your-turn-prompt p{max-width:460px;color:var(--muted);margin:0;font-size:1rem;line-height:1.35}.answer-space{place-items:center;min-height:42px;display:grid}.english-line{color:var(--red);text-align:center;margin:0;font-size:clamp(1.05rem,4vw,1.32rem);font-weight:800}.audio-error{color:var(--red);text-align:center;margin:0;font-size:.78rem;font-weight:700}.primary-reveal-button{background:var(--green);color:#fff;cursor:pointer;border:0;border-radius:14px;min-height:48px;padding:10px 14px;font-weight:900}.controls{min-height:72px}.answer-button{color:#fff;cursor:pointer;border:0;border-radius:20px;flex:1;min-height:68px;padding:12px 13px;font-weight:900;box-shadow:0 9px 20px #27211929}.answer-button:disabled{opacity:.45;cursor:default}.back-button{background:linear-gradient(145deg,#7b746b,#514a44)}.next-button{background:linear-gradient(145deg, #21896a, var(--green-dark))}.script-panel,.focus-panel{padding:16px}.script-panel h2,.focus-panel h2{margin-bottom:10px;font-size:1.25rem}.script-line{border-top:1px solid var(--line);grid-template-columns:92px 1fr;gap:10px;padding:9px 0;display:grid}.script-line strong{color:var(--muted);font-size:.88rem}.script-line span{font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-weight:650}.focus-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;display:grid}.focus-grid article{border:1px solid var(--line);background:#f8f2e8;border-radius:12px;align-content:center;gap:4px;min-height:86px;padding:10px;display:grid}.focus-grid strong{font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;font-size:1.08rem}.focus-grid span{color:var(--muted);font-size:.82rem;font-weight:700}.fade-enter-active,.fade-leave-active{transition:opacity .18s,transform .18s}.fade-enter-from,.fade-leave-to{opacity:0;transform:translateY(6px)}@media (width<=680px){.topbar{align-items:flex-start}.scene-card{grid-template-columns:1fr}.step-description{min-height:210px}.script-line{grid-template-columns:1fr;gap:3px}}@media (width<=480px){.tool-row{flex-direction:column;align-items:stretch}.controls{flex-direction:column}.answer-button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}