@charset "UTF-8";
.scene-download{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}.scene-download .text-link{font-size:13px}.scene-download .small-note{font-size:11px}
:root{color-scheme:light dark;--bg:#fff9eb;--surface:#fffcf4;--paper:#fffef9;--ink:#173e40;--muted:#506b66;--accent:#116a61;--accent-ink:#fffcf4;--soft:#e7f0e8;--line:#c5d3c9;--image-bg:#dfebe7;--focus:#af6022;--shadow:#1b60591c;--icon-filter:none;font-family:"Avenir Next","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;font-size:16px;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button,a{touch-action:manipulation}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.28;letter-spacing:-.025em}h1,h2{font-weight:800}img{max-width:100%;display:block}button{color:inherit}body:has(dialog[open]){overflow:hidden}[hidden]{display:none!important}.icon{width:20px;height:20px;flex:none;filter:var(--icon-filter)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:11px 18px;border:1.5px solid transparent;border-radius:12px;font-weight:700;text-decoration:none;white-space:nowrap;line-height:1.4}.button:active{transform:scale(.98)}.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.primary .icon{filter:brightness(0) invert(.97)}.secondary{background:var(--surface);border-color:var(--line)}.ghost{background:transparent;border-color:transparent}.ghost:hover,.secondary:hover{background:var(--soft)}.icon-button{padding:11px;min-width:48px}.compact-button{padding:7px 10px;min-height:44px;font-size:14px}.full-button{width:100%;white-space:normal}.text-link,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;color:var(--accent);font-weight:700;text-decoration:none}.text-button{border:0;background:transparent;padding:7px 0;cursor:pointer;font-size:14px;line-height:1.4}.text-link:hover,.text-button:hover{text-decoration:underline}.small-note{font-size:13px;line-height:1.6;color:var(--muted)}.translation{font-size:15px;line-height:1.6;color:var(--muted)}.english{font-size:18px;line-height:1.55;font-weight:650}.notice{font-size:14px;color:var(--muted)}.skip-link{position:fixed;left:16px;top:12px;transform:translateY(-180%);z-index:3;background:var(--accent);color:var(--accent-ink);padding:10px 18px;border-radius:12px}.skip-link:focus{transform:none}
.site-header{max-width:1376px;height:88px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 48px}.brand{display:flex;align-items:center;gap:18px;text-decoration:none;flex:none}.brand img{width:146px;height:62px;object-fit:contain}.brand span{font-weight:750;font-size:17px;border-left:1px solid var(--line);padding-left:18px;white-space:nowrap}.home-hero{max-width:1280px;margin:12px auto 0;display:grid;grid-template-columns:.76fr 1.24fr;align-items:center;gap:42px;padding:0 36px 20px}.hero-copy{padding:22px 0 22px 18px}.hero-copy h1{font-size:clamp(36px,4.1vw,54px);line-height:1.22}.hero-copy p{font-size:18px;line-height:1.75;color:var(--muted);margin:22px 0 28px}.family-hero{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:24px}.shelf-section{max-width:1208px;margin:36px auto 0;padding:0 18px;scroll-margin-top:24px}.section-heading{margin-bottom:26px}.section-heading h2{font-size:29px}.section-heading p{margin-top:8px;font-size:16px;color:var(--muted)}.book-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px}.book-card{min-width:0}.book-link{display:block;text-decoration:none}.book-cover{width:100%;height:auto;aspect-ratio:1200/1334;object-fit:contain;border-radius:6px;box-shadow:4px 5px 0 var(--shadow);transition:transform .2s ease}.book-link:hover .book-cover{transform:translateY(-5px) rotate(-1deg)}.book-card-copy{padding:17px 0 0}.book-card h3{font-size:20px;line-height:1.45}.book-card p{color:var(--muted);font-size:14px;margin:6px 0 8px}.book-meta{color:var(--muted);font-size:12px}.book-action{display:flex;align-items:center;gap:9px;color:var(--accent);font-weight:750;margin-top:13px;min-height:44px}.resume-link{display:block;margin:22px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:650;background:var(--soft)}.parent-intro{max-width:1172px;margin:80px auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:34px 0 0;border-top:1px solid var(--line)}.parent-intro h2{font-size:32px}.parent-intro>div>p{color:var(--muted);margin:20px 0 16px;font-size:16px}.parent-method{margin:0;padding:0 0 0 28px;display:grid;gap:20px}.parent-method li{padding-left:10px}.parent-method strong{display:block;font-size:18px;margin-bottom:5px}.parent-method span{color:var(--muted);font-size:15px}.site-footer{max-width:1268px;margin:auto;padding:26px 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:14px}.site-footer>span{font-weight:700}.error-state{padding:36px;border:1px solid var(--line);border-radius:22px;background:var(--surface);max-width:680px;margin:32px auto}.error-state p{margin:12px 0 20px}.loading-state{padding:80px 18px;text-align:center;color:var(--muted)}
.play-header{height:82px;max-width:1500px;padding:12px 32px;border-bottom:1px solid var(--line)}.play-header .brand img{width:100px;height:50px}.play-header .brand span{font-size:15px}.back-link{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none}.play-main{max-width:1440px;margin:auto;padding:32px}.workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(380px,.86fr);gap:34px;align-items:start}.scene-column{position:sticky;top:24px;min-width:0}.scene-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.book-name{font-size:14px;color:var(--muted);margin-bottom:5px}.scene-heading h1{font-size:27px}.scene-heading .button{font-size:14px;padding-inline:13px;flex:none}.scene-frame{background:var(--paper);border-radius:17px;padding:10px;border:1px solid var(--line);box-shadow:0 4px 0 var(--shadow);overflow:hidden}.scene-frame>img{width:100%;height:auto;object-fit:contain}.scene-frame figcaption{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding:10px 4px 2px}.scene-navigation{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:20px}.scene-navigation>div{text-align:center}.scene-navigation strong{display:block;font-size:17px}.scene-navigation span{display:block;font-size:12px;color:var(--muted)}.sticker-row{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding:19px 0;border-block:1px solid var(--line);gap:12px}.sticker-row strong{font-size:14px;display:block}.sticker-row>div>span{color:var(--muted);font-size:12px}.stickers{display:flex;gap:9px;font-size:28px;line-height:1.4;flex:none}.sticker{opacity:.24;filter:grayscale(.7);display:inline-block}.sticker.collected{opacity:1;filter:none}.scene-context{margin-top:18px}.scene-context summary{font-weight:700;padding:10px 0;min-height:44px;cursor:pointer}.scene-context>.english{margin:12px 0 7px;font-size:17px}.scene-context>.translation{margin-bottom:12px}.word-list{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.word-list>span{padding:5px 11px;background:var(--soft);border-radius:8px;font-size:13px}.phase-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;border:1px solid var(--line);border-radius:14px;margin-bottom:17px;background:var(--soft)}.phase-tabs button{min-height:44px;border:0;border-radius:10px;background:transparent;font-weight:750;padding:8px;color:var(--muted)}.phase-tabs button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.coach-surface{padding:25px 26px 22px;background:var(--surface);border-radius:22px;border:1px solid var(--line);min-width:0;box-shadow:0 4px 0 var(--shadow)}.coach-topline{margin-bottom:22px}.coach-topline h2{font-size:23px;margin-bottom:6px}.coach-topline>span{font-size:12px;color:var(--muted)}label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}select,textarea{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;color:var(--ink);font-size:16px}select{min-height:48px;padding:10px 12px}textarea{padding:12px;resize:vertical;min-height:100px}textarea::placeholder{color:var(--muted)}#warmup-tip{margin:10px 0 24px}.say-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin:10px 0 8px}.prompt-english{font-size:clamp(25px,2.1vw,32px);font-weight:750;line-height:1.38;letter-spacing:-.025em;overflow-wrap:anywhere}.prompt-translation{margin-top:9px;margin-bottom:22px}.example-details,.answer-details,.note-details{border-top:1px solid var(--line);margin-top:20px}.example-details summary,.answer-details summary,.note-details summary{font-size:14px;font-weight:700;min-height:48px;padding:13px 0;cursor:pointer}.dialogue-example{display:grid;gap:7px;padding:4px 0 16px}.dialogue-example>span{font-size:12px;color:var(--accent);font-weight:700;margin-top:7px}.warmup-navigation{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:14px 0 22px}.warmup-navigation>span{font-size:13px;color:var(--muted);white-space:nowrap}.warmup-navigation .button{font-size:14px;padding-inline:14px}.bridge{padding:15px 0;border-top:1px solid var(--line);margin-bottom:18px}.bridge .translation{margin-top:5px}#warmup-support-open{width:100%;margin:12px 0 0;font-size:13px}.question-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.question-type{font-size:14px;color:var(--accent);font-weight:700}.answer-copy{padding:0 0 16px}.answer-copy>.translation{margin:7px 0 20px}.simple-answer{padding:15px 18px;background:var(--soft);border-radius:12px;margin-bottom:12px}.simple-answer>span{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}.simple-answer .text-button{font-size:13px;min-height:44px}.response-actions{border:0;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.response-actions legend{font-size:13px;font-weight:700;margin-bottom:10px}.response-actions .button{padding:10px 7px;font-size:13px;min-height:44px;white-space:normal}.response-actions .button[aria-pressed=true]{background:var(--soft);border-color:var(--accent)}.coaching-hint{margin-top:16px;padding:18px 0 0;border-top:1px solid var(--line)}.coaching-hint>strong{display:block;font-size:13px;color:var(--accent);margin-bottom:7px}.coaching-hint>.translation{margin-top:5px}.coaching-hint>.small-note{margin-top:10px}.note-details{margin-top:18px}.note-details label{font-weight:500;margin-top:4px;font-size:13px}.note-details .small-note{margin-top:8px}.question-navigation{display:flex;align-items:center;justify-content:space-between;margin:14px 0 10px}.question-navigation span{font-size:13px;color:var(--muted);text-align:center}.progress-note{text-align:center;margin-top:12px}.finished-state{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}.finished-state p{color:var(--muted);margin-top:7px}.status-message{margin:17px 0;padding:12px 15px;border-radius:12px;background:var(--soft)}.export-notes{display:flex;margin:16px auto 0;font-size:13px}
dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:24px;border-radius:22px;box-shadow:0 20px 70px #173e4040}dialog::backdrop{background:#113a3bb3}dialog header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}dialog header h2{font-size:23px;padding-top:10px}dialog header>div>p{font-size:14px;color:var(--muted);margin-top:8px}.text-dialog{width:min(720px,calc(100% - 32px));max-height:calc(100dvh - 32px)}.question-list-items{display:grid;grid-template-columns:1fr 1fr;gap:10px}.question-list-item{display:grid;grid-template-columns:25px 1fr;column-gap:10px;text-align:left;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;min-height:76px;line-height:1.5}.question-list-item>span{color:var(--accent);font-weight:750;font-size:13px}.question-list-item>div>strong{font-size:14px;display:block;font-weight:650}.question-list-item>div>small{font-size:12px;color:var(--muted);display:block;margin-top:4px}.question-list-item[aria-current=true]{border:2px solid var(--accent);padding:11px}.question-list-item.completed>span::after{content:' ✓';display:block}.guide-intro{font-size:17px;margin-bottom:20px}.guide-steps{display:grid;gap:20px;padding-left:27px;margin:0 0 24px}.guide-steps li{padding-left:8px}.guide-steps strong{font-size:16px}.guide-steps p{font-size:14px;color:var(--muted);margin-top:7px}.guide-dialog>.small-note{margin-bottom:20px}.support-example{padding:18px 0;border-top:1px solid var(--line)}.support-example h3{font-size:16px;margin-bottom:9px}.support-example .translation,.support-example .small-note{margin-top:7px}.picture-viewer{width:calc(100% - 28px);max-width:1600px;height:calc(100dvh - 28px);max-height:calc(100dvh - 28px);padding:16px;overflow:hidden}.picture-viewer header{height:50px;margin:0 0 12px;align-items:center}.picture-viewer header h2{font-size:19px;padding:0}.picture-viewer header>div{display:flex;gap:8px;flex:none}.viewer-scroll{height:calc(100% - 98px);display:flex;align-items:center;justify-content:center;overflow:auto;background:var(--image-bg);border-radius:12px}.viewer-scroll>img{width:100%;height:100%;max-width:100%;object-fit:contain;flex:none}.viewer-scroll.zoomed{display:block}.viewer-scroll.zoomed>img{width:200%;max-width:none;height:auto;object-fit:initial}.picture-viewer>.small-note{margin-top:10px;font-size:12px}.reward-burst{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}.reward-particle{position:absolute;left:50%;top:55%;font-size:28px;animation:sticker-burst 1s ease-out forwards}.reward-particle:nth-child(2){left:38%;animation-delay:30ms}.reward-particle:nth-child(3){left:62%;animation-delay:50ms}.reward-particle:nth-child(4){left:26%;animation-delay:80ms}.reward-particle:nth-child(5){left:74%;animation-delay:90ms}.reward-particle:nth-child(6){left:45%;animation-delay:40ms}@keyframes sticker-burst{from{opacity:1;transform:translateY(0) scale(.6)}to{opacity:0;transform:translateY(-150px) rotate(25deg) scale(1.3)}}
@media(prefers-color-scheme:dark){:root{--bg:#163737;--surface:#214442;--paper:#264c48;--ink:#fbf5e7;--muted:#c0d0c7;--accent:#a8e0cb;--accent-ink:#163737;--soft:#2b504b;--line:#50746a;--image-bg:#173e3c;--focus:#f2bc76;--shadow:#0d282940;--icon-filter:invert(.93)}.primary .icon{filter:brightness(0)}.book-cover{box-shadow:4px 5px 0 #0d282955}dialog::backdrop{background:#081d1dcc}}
@media(min-width:1480px){.workspace{gap:50px}.coach-surface{padding:30px 32px}.play-main{padding-inline:40px}}
@media(max-width:1100px){.home-hero{gap:25px;padding-inline:30px}.hero-copy{padding-left:0}.site-header{padding-inline:30px}.shelf-section{padding-inline:30px}.parent-intro{padding-inline:30px;gap:45px}.workspace{gap:22px;grid-template-columns:minmax(0,1fr) minmax(350px,.93fr)}.play-main{padding:26px 24px}.play-header{padding-inline:24px}.scene-heading h1{font-size:23px}.coach-surface{padding:22px}.scene-heading .button{padding-inline:10px}.scene-frame figcaption{font-size:11px}}
@media(max-width:780px){.site-header{height:78px;padding:10px 20px}.brand{gap:10px}.brand img{width:112px;height:54px}.brand span{font-size:15px;padding-left:10px}.site-header>.text-link{font-size:14px;gap:6px}.home-hero{margin-top:8px;padding:0 20px;grid-template-columns:1fr;gap:24px}.hero-copy{padding:10px 0 0}.hero-copy h1{font-size:38px}.hero-copy p{font-size:16px;margin:14px 0 20px}.hero-copy h1 br{display:block}.family-hero{max-height:340px;object-fit:cover}.shelf-section{margin-top:36px;padding-inline:20px}.section-heading h2{font-size:25px}.book-grid{grid-template-columns:1fr 1fr;gap:26px 18px}.book-card h3{font-size:17px}.book-card p{font-size:13px}.book-meta{font-size:11px}.book-action{font-size:14px;margin-top:7px}.book-card-copy{padding-top:12px}.parent-intro{margin:52px 20px;padding:28px 0 0;grid-template-columns:1fr;gap:30px}.parent-intro h2{font-size:28px}.parent-method{gap:17px}.site-footer{padding:22px 20px;flex-direction:column;gap:8px}.play-header{height:72px;padding:10px 18px;gap:9px}.play-header .brand img{width:80px;height:45px}.play-header .brand span{display:none}.play-header .button{min-height:44px;padding:8px;font-size:13px}.back-link{font-size:14px;gap:6px}.play-main{padding:22px 18px 40px}.workspace{grid-template-columns:1fr;gap:25px}.scene-column{position:static}.scene-heading{margin-bottom:13px}.scene-heading h1{font-size:23px}.scene-heading .button{font-size:12px;min-height:44px}.book-name{font-size:12px}.scene-frame{padding:8px;border-radius:13px}.scene-frame figcaption{font-size:11px;flex-wrap:wrap;gap:5px}.scene-navigation{margin-top:15px}.scene-navigation .button{min-height:44px;min-width:44px}.scene-navigation strong{font-size:15px}.sticker-row{margin-top:18px;padding:14px 0}.stickers{font-size:26px;gap:7px}.scene-context{margin-top:8px}.scene-context summary{font-size:14px}.coach-surface{padding:22px 20px}.prompt-english{font-size:27px}.coach-topline{margin-bottom:18px}.phase-tabs{margin-bottom:13px}.question-list-items{grid-template-columns:1fr}.text-dialog{padding:20px}.picture-viewer{padding:12px;width:calc(100% - 18px);height:calc(100dvh - 18px);max-height:calc(100dvh - 18px)}.picture-viewer header{height:auto;min-height:50px;align-items:center;gap:8px}.picture-viewer header h2{font-size:16px;max-width:45%;line-height:1.4}.picture-viewer header .button{font-size:12px;padding:10px;min-height:44px}.viewer-scroll{height:calc(100% - 112px)}.picture-viewer>.small-note{font-size:11px}.scene-column>.scene-context:not([open]){margin-bottom:0}}
@media(max-width:370px){.site-header{padding-inline:16px}.brand img{width:95px}.home-header .brand span{font-size:13px;padding-left:7px}.home-header .text-link{font-size:12px}.home-hero{padding-inline:16px}.hero-copy h1{font-size:34px}.play-main{padding-inline:14px}.coach-surface{padding-inline:17px}.prompt-english{font-size:25px}.response-actions{gap:5px}.response-actions .button{font-size:12px}.scene-heading h1{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.book-link:hover .book-cover{transform:none}.reward-burst{display:none}}