:root{--navy:#174f75;--blue:#2b7198;--sky:#eaf8ff;--cream:#fffaf0;--gold:#ffb631;--mint:#8ee0d3;--line:#b9dfef;--text:#294b60;--muted:#637b89;--green:#237a67;--coral:#e6765f}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-rounded,"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:linear-gradient(180deg,#eaf8ff 0,#fffaf2 48%,#eefbff 100%);min-height:100vh}
button,select,textarea{font:inherit}
.wrap{max-width:1120px;margin:auto;padding:18px 18px 70px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(135deg,#174f75,#2b7198);color:#fff;border-radius:26px;padding:20px 24px;box-shadow:0 10px 0 rgba(23,79,117,.12)}
.brand{display:flex;align-items:center;gap:14px}.brand img{width:62px;height:62px;border-radius:18px;object-fit:cover;background:#fff;border:3px solid #fff}.brand h1{font-size:1.35rem;margin:0 0 4px}.brand p{margin:0;opacity:.86;font-size:.92rem}.top a{color:#174f75;background:#fff;text-decoration:none;font-weight:850;padding:11px 15px;border-radius:14px}
.progress-shell{margin:18px 0 14px;background:#fff;border:2px solid var(--line);border-radius:22px;padding:16px 18px}.progress-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.progress-row strong{color:var(--navy)}.progress{height:12px;border-radius:999px;background:#e5f1f6;overflow:hidden}.progress>div{height:100%;width:10%;background:linear-gradient(90deg,var(--mint),var(--gold));transition:width .35s ease}
.learning-path{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:14px 0 18px}.path-stage{background:#fff;border:2px solid #d7edf6;border-radius:18px;padding:12px 8px;text-align:center;color:#567487;font-weight:800;font-size:.82rem}.path-stage.active{border-color:var(--gold);background:#fff8df;color:var(--navy);box-shadow:0 5px 0 rgba(255,182,49,.18)}
.mission{background:rgba(255,255,255,.96);border:2px solid var(--line);border-radius:30px;padding:26px;min-height:610px;box-shadow:0 16px 35px rgba(34,94,126,.10)}.step{display:none}.step.active{display:block}.eyebrow{display:inline-flex;padding:6px 11px;background:#edf7fb;border-radius:999px;color:#286889;font-weight:850;font-size:.82rem}.step h2{font-size:clamp(1.7rem,3.5vw,2.8rem);color:var(--navy);margin:14px 0 8px}.lead{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 0 22px}
.warmup-note,.sync-note{background:linear-gradient(90deg,#e9f8ff,#fff5d8);border-radius:18px;padding:13px 16px;margin-bottom:16px;font-weight:700;color:var(--navy)}
.vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.vocab-card{background:#fffdf8;border:2px solid #f1d79a;border-radius:20px;padding:14px;display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center}.vocab-card.done{border-color:#66cdbc;background:#effcf8}.vocab-art{width:100%;height:125px;object-fit:cover;border-radius:14px;background:#eef8fb}.art-pending{height:125px;border-radius:14px;background:linear-gradient(145deg,#e9f7fc,#fff7dc);border:2px dashed #9cccdc;display:grid;place-items:center;padding:12px;text-align:center;color:#52798d;font-size:.8rem;font-weight:750}.vocab-number{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;background:#ff8c32;color:white;font-weight:900;margin-right:7px}.vocab-card h3{font-size:1rem;color:var(--navy);margin:0 0 6px}.vocab-meaning{font-size:.88rem;color:var(--muted);line-height:1.35;margin:0 0 8px}.vocab-example{font-size:.9rem;line-height:1.4;margin:0 0 10px}.vocab-actions,.controls{display:flex;gap:8px;flex-wrap:wrap}.vocab-status,.sentence-status,.feedback{font-size:.84rem;color:var(--green);min-height:1.2em;margin-top:8px;font-weight:750}.recording{color:#aa442f!important}
.btn{border:0;border-radius:15px;padding:12px 16px;font-size:.95rem;font-weight:850;cursor:pointer}.btn.primary{background:var(--gold);color:#3f2b0f;box-shadow:0 5px 0 #d99213}.btn.secondary{background:#fff;border:2px solid var(--line);color:var(--navy)}.btn.success{background:#dff8f2;border:2px solid #77cebd;color:#17695c}.btn:active{transform:translateY(2px)}.btn[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.story-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:22px;align-items:stretch}.scene{border-radius:24px;background:linear-gradient(145deg,#d9f3ff,#fff6d9);min-height:350px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid #d5ebf4}.scene img{width:100%;height:100%;max-height:360px;object-fit:cover}.story-card{background:#fffaf0;border:2px solid #f4dca5;border-radius:24px;padding:22px}.story-transcript{font-size:1.05rem;line-height:1.9;margin:0}.story-sentence{display:inline;border-radius:8px;padding:3px 4px;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}.story-sentence.selected-start{box-shadow:0 0 0 2px #75c4e7}.story-sentence.current-reading{background:#fff0aa;box-shadow:0 0 0 2px #f1be38;color:#173a57}
.sentence-list,.sequence{display:grid;gap:12px}.read-row,.event{background:#fff;border:2px solid #d7e9f1;border-radius:18px;padding:14px}.read-row.listened{border-color:#66cdbc;background:#effcf8}.read-sentence{font-size:1rem;line-height:1.65;margin:0}.read-sentence.current-reading{background:#fff0aa;border-radius:8px;padding:4px}.read-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.clue-grid,.quiz-grid,.frame-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.clue-card,.quiz-card,.frame{background:#fff;border:2px solid #d9eaf2;border-radius:20px;padding:16px}.clue-card h3,.quiz-card h3{margin:0 0 10px;color:var(--navy)}.option{display:block;width:100%;text-align:left;background:#f7fbfd;border:2px solid #dcecf3;border-radius:14px;padding:12px;margin:8px 0;font-weight:700;color:var(--text);cursor:pointer}.option.selected{border-color:#45b9a7;background:#e6fbf7}.option.wrong{animation:shake .25s;background:#fff2ee;border-color:#ef9b86}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.event{display:grid;grid-template-columns:46px 1fr 34px;align-items:center;gap:12px;touch-action:none;user-select:none}.event.selected{border-color:var(--gold);background:#fff9e7}.event .num{width:38px;height:38px;border-radius:12px;background:#e7f7fb;display:grid;place-items:center;font-weight:900;color:var(--navy)}.event p{margin:0;font-weight:750}.handle{font-size:1.3rem;color:#7293a4;text-align:center}.frame select{width:100%;margin-top:10px;border:2px solid #cfe5ee;border-radius:12px;padding:11px;background:#fff;color:var(--text)}.retell-preview{margin-top:18px;background:#fff8df;border:2px solid #f2d27b;border-radius:20px;padding:18px;line-height:1.75;font-size:1.03rem}.support-list{display:grid;gap:12px}.support-line{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#fff;border:2px solid #d5e9f1;border-radius:16px;padding:14px}.support-line.done{border-color:#65c9b8;background:#ecfbf7}.support-line p{margin:0;font-weight:750;line-height:1.55}
.speak-box{text-align:center;max-width:820px;margin:20px auto;background:#f1fbff;border:2px solid #c4e7f5;border-radius:24px;padding:24px}.speak-state{min-height:28px;font-weight:850;color:var(--navy)}.mic-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}.recording-summary{min-height:72px;margin-top:18px;background:#fff;border:2px solid #d5e9f1;border-radius:16px;padding:14px;text-align:left}.complete{text-align:center;padding:20px}.badge-big{width:120px;height:120px;margin:10px auto 20px;border-radius:50%;display:grid;place-items:center;font-size:3.8rem;background:linear-gradient(145deg,#fff0a6,#ffb631);box-shadow:0 12px 0 #d99213}.rank{display:inline-flex;padding:9px 15px;border-radius:999px;background:#e7fbf6;color:#137262;font-weight:900}.reward-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:18px 0}.reward{padding:10px 14px;border-radius:999px;background:#fff;border:2px solid #d5e8ef;font-weight:850}.footer-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
@media(max-width:760px){.wrap{padding:10px 10px 45px}.top{padding:14px;align-items:flex-start}.brand img{width:50px;height:50px}.top a{font-size:.82rem;padding:9px 10px}.learning-path{grid-template-columns:repeat(3,minmax(0,1fr))}.mission,.story-card,.vocab-card>div{min-width:0}.mission{padding:17px;min-height:0}.story-grid{grid-template-columns:1fr}.scene{min-height:210px}.scene img{max-height:250px}.clue-grid,.quiz-grid,.frame-grid{grid-template-columns:1fr}.vocab-card{grid-template-columns:120px minmax(0,1fr)}.vocab-art,.art-pending{height:110px}.step h2{font-size:1.75rem}.support-line{grid-template-columns:1fr}.support-line .btn{width:100%}.story-transcript{font-size:1rem;line-height:1.8}.footer-nav{position:sticky;bottom:6px;background:rgba(255,255,255,.94);padding:9px;border-radius:16px;z-index:3}}
@media(max-width:560px){.top{display:block;border-radius:20px}.top a{display:inline-block;margin-top:10px}.brand h1{font-size:1.08rem}.brand p{font-size:.8rem}.progress-row{align-items:flex-start;flex-wrap:wrap}.learning-path{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.vocab-grid{grid-template-columns:1fr}.vocab-card{grid-template-columns:104px minmax(0,1fr);padding:11px}.vocab-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.vocab-actions .btn{width:100%;padding:10px 7px}.read-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.read-actions .btn{width:100%}}
@media(max-width:430px){.wrap{padding:7px 7px 38px}.progress-shell{padding:12px}.progress-row{font-size:.82rem}.path-stage{padding:8px 5px;font-size:.7rem}.mission{border-radius:22px;padding:14px}.vocab-card{grid-template-columns:92px minmax(0,1fr);padding:9px}.vocab-art,.art-pending{height:92px}.btn{padding:11px 10px;font-size:.86rem}.scene{min-height:180px}.footer-nav .btn{flex:1}.reward-row{display:grid}.speak-box{padding:16px}}