:root{--story-world:url('./art/discovery-hsk.webp');--novel:#006456;--novel-bg:#d3f3e4}
:root[data-system=traditional]{--story-world:url('./art/discovery-tocfl.webp');--novel:#8b236a;--novel-bg:#f9dff0}
.pocket-nav{grid-template-columns:repeat(6,minmax(0,1fr))}.pocket-nav button{font-size:10px;padding-inline:2px}.pocket-nav button svg{width:22px;height:22px}
.story-hub{border-radius:28px;overflow:hidden;background:var(--paper);box-shadow:0 10px 35px #45291615;margin-bottom:24px}.story-hub-head{height:265px;position:relative;padding:22px;background:linear-gradient(0deg,var(--brand-dark),transparent 94%),var(--story-world) center top/cover;color:#fff5df}.story-hub-head h1{font-size:31px;line-height:1.06;max-width:230px;margin:25px 0 0;position:relative;z-index:1}.story-hub-head h1 span{display:block;font-size:13px;line-height:1.5;max-width:175px;font-weight:500;margin-top:14px}.story-hub-head img{position:absolute;right:4px;bottom:8px;width:112px;filter:drop-shadow(0 10px 10px #15000045)}.story-route{display:inline-block;font-size:10px;letter-spacing:.06em;font-weight:800;border-radius:30px;padding:7px 12px;background:#fff2df;color:var(--brand-dark)}.story-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:17px 10px;text-align:center}.story-summary span{font-size:10px;color:var(--muted)}.story-summary b{display:block;font-size:23px;color:var(--brand-dark)}
.story-main-cta{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;min-height:54px;font-size:16px;font-weight:800;border-radius:18px;padding:14px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));box-shadow:0 5px 0 var(--brand-dark),0 8px 18px #3e1c1c19;color:#fff6e8}.story-hub>.story-main-cta{width:calc(100% - 36px);margin:0 18px}.story-hint{font-size:12px;color:var(--muted);line-height:1.5;text-align:center;padding:0 14px}.story-chapter{margin:23px 18px 15px;border:1px solid var(--border);border-radius:18px;padding:14px 16px;background:var(--brand-soft)}.story-chapter label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;gap:12px}.story-chapter select{max-width:180px;min-height:40px;padding:7px;font-size:12px;border-radius:12px}.story-chapter p{font-weight:750;margin:10px 0 0;font-size:15px}.story-world{position:relative;background:var(--story-world) center center/cover;isolation:isolate;overflow:hidden}.story-world:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff4e350 40%,#fff4e350 70%,transparent);z-index:-1}:root[data-system=traditional] .story-world:before{background:linear-gradient(90deg,transparent,#dcf2ff45 40%,#dcf2ff45 70%,transparent)}.story-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.story-trail path{stroke:#fff9e8a8;stroke-width:11;fill:none;stroke-linecap:round;stroke-dasharray:2 18;filter:drop-shadow(0 2px 2px #6b493160)}
.story-stop{position:absolute;left:var(--x);transform:translateX(-50%);width:160px;display:flex;flex-direction:column;align-items:center}.story-stop>button{position:relative;width:67px;height:67px;border-radius:50%;border:4px solid #fff1ce;background:linear-gradient(145deg,var(--brand),var(--brand-dark));box-shadow:0 6px 0 var(--brand-dark),0 8px 18px #332a3f45;color:#fff8e0;font-size:27px;font-weight:800;padding:0;display:grid;place-items:center}.story-stop>button small{position:absolute;right:-6px;bottom:-3px;font-size:14px}.story-stop.complete>button{background:linear-gradient(140deg,#4b987c,#236b57);box-shadow:0 6px 0 #1b5747,0 8px 15px #25483040}.story-stop.locked>button{background:linear-gradient(145deg,#ddddd3,#a8b6b9);border-color:#eeeee5;box-shadow:0 5px 0 #859498;color:#53636b;opacity:1}.story-stop.current>button{outline:4px solid #ffc867;outline-offset:5px;animation:story-glow 2.5s ease-in-out infinite}.story-stop-name{font-size:11px;font-weight:800;background:#fff6e9ec;color:var(--brand-dark);padding:4px 10px;border-radius:18px;margin-top:10px;box-shadow:0 2px 5px #50352c20}.story-here{position:absolute;bottom:102px;white-space:nowrap;font-size:10px;font-weight:800;background:var(--brand);color:#fff8e8;padding:6px 9px;border-radius:20px;z-index:1}.story-travel-note{padding:20px;background:var(--brand-soft);font-size:13px}.story-travel-note p{margin-bottom:0;font-size:12px}
:root[data-story-playing=true] .pocket-header,:root[data-story-playing=true] .pocket-toolbar,:root[data-story-playing=true] .pocket-sync,:root[data-story-playing=true] .pocket-nav{display:none}:root[data-story-playing=true] body{padding-bottom:20px}:root[data-story-playing=true] main{padding-top:env(safe-area-inset-top)}.story-lesson-top{position:sticky;top:0;background:var(--page);display:flex;align-items:center;gap:15px;padding:15px 0;z-index:4}.story-lesson-top>button{background:transparent;color:var(--muted);box-shadow:none;font-size:20px;padding:6px;min-width:38px;min-height:42px}.story-lesson-top progress{width:100%;height:12px;accent-color:var(--brand);border:0;border-radius:20px}.story-lesson-top progress::-webkit-progress-bar{background:var(--border);border-radius:20px}.story-lesson-top progress::-webkit-progress-value{background:linear-gradient(90deg,var(--brand),#e6aa58);border-radius:20px}.story-lesson-top>span{font-size:11px;white-space:nowrap}.story-lesson-card{background:var(--paper);padding:24px 20px;border:1px solid var(--border);border-radius:25px;min-height:450px;box-shadow:0 12px 30px #5a2e3010}.story-lesson-card h1{font-size:28px;line-height:1.15;margin:14px 0 20px}.story-lesson-card>p{line-height:1.6;font-size:14px}.story-kicker{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:850}.story-lesson-card .story-main-cta{margin-top:26px}.story-new{color:var(--novel)!important;background:var(--novel-bg);border-radius:7px;font-weight:800}.story-word{display:inline-block;vertical-align:baseline;font-size:inherit;line-height:1.55;color:inherit;padding:1px 3px;border:0;border-bottom:1px dotted var(--border);border-radius:4px;background:transparent;box-shadow:none;margin:1px 0;min-height:36px;min-width:24px}.story-word:hover{background:var(--brand-soft)}.story-word.story-new{border-bottom:2px solid var(--novel)}.story-new-cards{display:grid;gap:14px}.story-new-cards>div{padding:18px;border:1px solid var(--novel);border-radius:22px;background:var(--novel-bg);text-align:center}.story-new-cards small{display:block;color:var(--novel);font-size:10px;letter-spacing:.13em;font-weight:900}.story-new-cards .story-word{font-size:45px;display:block;margin:auto}.story-new-cards em{font-style:normal;color:var(--novel)}.story-new-cards p{font-weight:700;margin:8px}.story-new-cards>div>button:last-child{background:#ffffffb0;color:var(--novel);box-shadow:none;padding:9px 16px;border-radius:14px}.story-context{color:var(--muted);font-size:13px!important}.story-tap-tip{font-size:11px!important}.story-tap-tip .story-new{display:inline-block;padding:3px 6px;margin-top:6px}.story-dialogue{padding:16px;margin:15px 0 15px 0;border-radius:20px 20px 20px 3px;background:var(--brand-soft);border:1px solid var(--border);max-width:95%}.story-dialogue.mila{margin-left:5%;border-radius:20px 20px 3px 20px;background:color-mix(in srgb,var(--shine) 35%,var(--paper))}.story-dialogue>small{font-size:10px;font-weight:900;color:var(--muted)}.story-dialogue>p{font-size:25px;line-height:1.7;margin:9px 0}.story-line-tools{display:flex;gap:12px}.story-line-tools button{background:transparent;color:var(--muted);font-size:11px;box-shadow:none;padding:5px;min-height:34px}.story-line-help p{font-size:12px;line-height:1.5}.story-grammar{font-size:13px;background:var(--brand-soft);padding:14px;border-radius:14px;margin-top:18px}.story-grammar summary{cursor:pointer;font-weight:750}.story-options{display:grid;gap:12px;margin:24px 0}.story-options>button,.story-matching button{border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:16px;min-height:58px;font-weight:650;box-shadow:0 3px 0 var(--border);padding:13px}.story-options>button:hover{background:var(--brand-soft)}.story-audio-big{width:100%;margin:15px 0;border-radius:18px;min-height:70px;font-size:19px;background:var(--brand-soft);color:var(--brand-dark)}.story-exercise-cn{font-size:27px!important;line-height:1.8}.story-matching{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin:22px 0}.story-matching>div{display:grid;gap:13px}.story-matching button{padding:10px 7px;font-size:13px;min-height:72px}.story-matching>div:first-child button{font-size:24px}.story-matching .selected{outline:3px solid var(--brand);background:var(--brand-soft)}.story-matching .matched{opacity:1!important;background:#d8f0dc!important;border-color:#4b8861;color:#255e39;box-shadow:none}.story-built{min-height:76px;padding:12px;background:var(--brand-soft);border-radius:16px;margin:20px 0;border:1px dashed var(--brand);display:flex;flex-wrap:wrap;gap:8px;align-items:center}.story-built>span{font-size:12px;color:var(--muted)}.story-blocks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.story-blocks button,.story-built button{font-size:20px;padding:9px 12px;min-height:45px;border-radius:12px;background:var(--paper);color:var(--ink);border:1px solid var(--border);box-shadow:0 3px 0 var(--border)}.story-blocks button:disabled{visibility:hidden}.story-soft{display:block;width:100%;margin:15px 0 0;background:transparent;color:var(--brand);border:1px solid var(--border);box-shadow:none;border-radius:16px;min-height:46px}.story-feedback{padding:16px;border-radius:16px;background:#ffe7c7;color:#784600;margin-top:20px;font-size:14px}.story-feedback.success{background:#d8f0dc;color:#255e39}.story-recall-meaning{font-size:23px;font-weight:800;text-align:center;padding:28px 16px;border-radius:22px;background:var(--brand-soft);margin:22px 0}.story-lesson-card form label{font-size:13px;display:block}.story-lesson-card form input{width:100%;min-height:54px;margin:10px 0 15px;box-sizing:border-box;border-radius:15px;font-size:20px;padding:12px}.story-lesson-card form button{width:100%;border-radius:15px;min-height:48px}.story-hint-model{text-align:center;font-size:21px!important}.story-player audio{width:100%;margin:18px 0}.story-finish{text-align:center;padding:24px 12px}.story-finish>img{height:200px;filter:drop-shadow(0 12px 18px #50362626);display:block;margin:10px auto 24px}.story-finish>small{letter-spacing:.13em;font-size:10px;font-weight:900;color:var(--brand)}.story-finish h1{font-size:30px}.story-finish>p{font-size:14px;line-height:1.6}.story-memory{display:inline-block;background:var(--novel-bg);padding:8px 14px;margin:5px;border-radius:20px}.story-weak{background:var(--brand-soft);padding:14px;border-radius:16px;margin:20px 0}.story-confetti{font-size:26px;color:#be8427;word-spacing:50px;animation:story-float 2s ease-out}.story-loading{text-align:center;padding:35px 20px}.story-loading img{height:160px}.story-word-sheet{border:1px solid var(--border);border-radius:28px 28px 0 0;background:var(--paper);color:var(--ink);padding:25px;position:fixed;inset:auto 0 0;margin:0 auto;max-width:500px;width:100%;box-sizing:border-box;max-height:85dvh;overflow:auto;box-shadow:0 -12px 50px #13243640}.story-word-sheet::backdrop{background:#14233780;backdrop-filter:blur(5px)}.story-word-sheet>[data-story-close]{position:absolute;top:14px;right:16px;box-shadow:none;background:var(--brand-soft);color:var(--ink);border-radius:50%;height:38px;width:38px;padding:0}.story-word-sheet>small{font-size:10px;letter-spacing:.12em;color:var(--muted)}.story-word-sheet h2{font-size:50px;margin:17px 0 8px;display:inline-block;padding:0 10px}.story-sheet-pinyin{font-size:21px;color:var(--brand)}.story-sheet-definition{font-size:20px;font-weight:750}.story-sheet-example{padding:15px;background:var(--brand-soft);border-radius:17px;margin-top:24px}.story-sheet-example small{font-size:9px;font-weight:850;letter-spacing:.1em}.story-sheet-example p{font-size:13px}.story-sheet-example p[lang=zh]{font-size:22px}.story-feature-link{background:var(--story-world) center 15%/cover;border-radius:24px;padding:23px;position:relative;isolation:isolate;overflow:hidden;color:#fff4df;margin:22px 0}.story-feature-link:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--brand-dark),transparent);z-index:-1}.story-feature-link h2{font-size:25px;max-width:230px}.story-feature-link p{font-size:13px;max-width:230px}.story-feature-link button{background:#fff2cf;color:var(--brand-dark);border-radius:14px;font-weight:800}
@keyframes story-glow{50%{outline-color:#ffedb4;transform:translateY(-2px)}}@keyframes story-float{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.story-stop.current>button,.story-confetti{animation:none}*{scroll-behavior:auto!important}}@media(min-width:600px){.story-hub-head{height:330px}.story-hub-head img{width:145px;right:35px}.story-hub-head h1{font-size:43px;max-width:380px}.story-world{background-size:cover}.story-lesson-card{padding:32px}.story-dialogue>p{font-size:29px}}

.story-word-sheet>small{display:block}.story-word-sheet h2{display:block;width:fit-content}.pocket-nav button[aria-current=false]{background:transparent;color:var(--muted);box-shadow:none}

.story-review-button{display:block;width:calc(100% - 36px);margin:20px 18px;background:var(--brand-soft);color:var(--brand-dark);border:1px solid var(--border);border-radius:17px;text-align:left;box-shadow:none;font-weight:850}.story-review-button span{display:block;font-size:11px;font-weight:500;margin-top:5px}