/* Five product introductions in ordinary document flow. */
.learning-story{--show-surface:#112b3a;--show-surface-soft:#183341;--show-ink:#f3f6f5;--show-muted:#b8cbd2;--show-line:#a6b7c12b;--show-accent:#f7a65d;color:var(--show-ink);background:var(--show-surface);overflow:clip}
html[data-theme=light] .learning-story{--show-surface:#f8f9f7;--show-surface-soft:#edf2f1;--show-ink:#20394b;--show-muted:#536a77;--show-line:#20394b20;--show-accent:#ad5011}
.learning-story [hidden]{display:none!important}
.learn-chapter{position:relative;isolation:isolate;scroll-margin-top:40px}
.show-shell{width:min(1280px,calc(100% - 112px));margin-inline:auto;padding-block:100px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:80px}
.show-copy{position:relative;z-index:2;min-width:0;max-width:540px}
.show-eyebrow{display:flex;align-items:center;gap:14px;color:var(--show-accent);font:400 14px/2 Century,sans-serif;margin-bottom:8px}
.show-copy h2{font-size:clamp(46px,4.7vw,70px);line-height:1.6;letter-spacing:-1.3px;font-weight:500;text-wrap:balance}
.show-tagline{font-size:28px;line-height:1.85;letter-spacing:-.4px;margin-top:12px;text-wrap:balance}.show-tagline span{color:var(--show-muted)}
.show-description{font-size:18px;line-height:2.1;margin-top:18px;max-width:560px;color:var(--show-muted);text-wrap:pretty}
.show-action{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:50px;margin-top:24px;padding:9px 22px;color:#fff;background:#e67e22;border-radius:8px;font-size:15px;line-height:2}
.show-action:is(:hover,:active,:focus-visible){background:#d76b16;color:#fff}.show-action svg{width:19px;height:19px;flex:none}html[dir=rtl] .show-action svg{transform:scaleX(-1)}
.learning-story button:focus-visible,.learning-story a:focus-visible{outline:3px solid var(--show-accent);outline-offset:4px}
.show-coming{padding:1px 12px;border-radius:24px;background:var(--show-line);color:var(--show-ink);font:400 12px/2 var(--body-font)}
.show-visual{position:relative;margin:0;width:100%;min-width:0;z-index:1}
.chapter-pinyin{background:var(--show-surface-soft)}
.chapter-dictionary .show-copy{grid-column:2;grid-row:1}.chapter-dictionary .show-visual{grid-column:1;grid-row:1}
.chapter-notes{background:#263b40}html[data-theme=light] .chapter-notes{background:#f3eee4}
.chapter-games{background:radial-gradient(ellipse at 50% 65%,#25727745,transparent 68%),#0b2d37}html[data-theme=light] .chapter-games{background:radial-gradient(ellipse at 50% 65%,#acd7d269,transparent 68%),#e6f0ec}
.chapter-tests{background:radial-gradient(ellipse at 25% 55%,#4560713b,transparent 58%),var(--show-surface)}
.chapter-pinyin .show-shell,.chapter-notes .show-shell,.chapter-games .show-shell{display:flex;flex-direction:column;gap:44px}
.chapter-pinyin .show-copy,.chapter-notes .show-copy,.chapter-games .show-copy{width:100%;max-width:880px;text-align:center}
.chapter-pinyin .show-eyebrow,.chapter-notes .show-eyebrow,.chapter-games .show-eyebrow{justify-content:center}
.chapter-pinyin .show-tagline br,.chapter-notes .show-tagline br,.chapter-games .show-tagline br{display:none}
.chapter-pinyin .show-tagline span::before,.chapter-notes .show-tagline span::before,.chapter-games .show-tagline span::before{content:' '}
.chapter-pinyin .show-description,.chapter-notes .show-description,.chapter-games .show-description{margin-inline:auto;max-width:710px}
.chapter-notes .show-shell{width:min(1320px,calc(100% - 56px))}
.chapter-games .show-shell{width:100%;gap:34px}
.chapter-games .show-copy{width:calc(100% - 48px)}
.game-ribbon{max-width:1920px!important}.game-window{direction:ltr;overflow:clip;padding-block:8px 24px}.game-track{display:flex;gap:24px;width:max-content;align-items:center;transition:transform .8s cubic-bezier(.22,.7,.24,1)}
.ribbon-game{width:min(49vw,550px);flex:none;margin:0;background:var(--show-surface-soft);border-radius:16px;overflow:hidden;transform-origin:center;box-shadow:0 18px 40px #00131a26;transition:transform .8s cubic-bezier(.22,.7,.24,1),opacity .8s ease}
.game-track[data-instant] ,.game-track[data-instant] .ribbon-game{transition:none}
.ribbon-game>img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover}
.ribbon-game figcaption{padding:17px 24px;min-height:112px}.ribbon-game h3{font-size:22px;font-weight:500;line-height:1.8}.ribbon-game p{font-size:14px;line-height:1.9;color:var(--show-muted);margin-top:5px}
.ribbon-controls{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding-inline:20px}
.ribbon-index{display:flex;justify-content:center;direction:ltr}.ribbon-index button{display:grid;place-items:center;width:36px;height:44px;border:0;background:transparent;color:var(--show-muted);padding:0;cursor:pointer}.ribbon-index button span{height:4px;width:12px;background:currentColor;border-radius:3px;opacity:.4;transition:width .3s}.ribbon-index button[aria-current=true] span{width:28px;background:#e67e22;opacity:1}
.ribbon-motion{min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--show-muted);font:400 11px/2 var(--body-font);text-decoration:underline;text-underline-offset:5px;padding:4px 8px;cursor:pointer}.ribbon-motion:hover{color:var(--show-ink)}
.dt-feature-panels,.assessment-panels{position:relative}
html[lang=zh-Hans] .show-copy h2{font-weight:300;letter-spacing:0;font-size:clamp(48px,4.8vw,72px);line-height:1.4}html[lang=zh-Hans] .show-tagline{font-size:32px;letter-spacing:0}html[lang=zh-Hans] .show-description{font-size:24px;line-height:1.7}html[lang=zh-Hans] .show-action{font-size:21px}html[lang=zh-Hans] .show-coming{font-size:17px}html[lang=zh-Hans] .ribbon-game h3{font-size:28px;font-weight:300}html[lang=zh-Hans] .ribbon-game p{font-size:20px}html[lang=zh-Hans] .ribbon-motion{font-size:17px}
@media(max-width:1100px){.show-shell{width:calc(100% - 64px);gap:40px;padding-block:80px}.show-copy h2{font-size:50px}.show-tagline{font-size:24px}.show-description{font-size:17px}.show-action{font-size:14px}}
@media(max-width:800px){
 .show-shell{width:calc(100% - 36px);display:flex;flex-direction:column;gap:32px;padding-block:64px}.show-copy{max-width:620px;text-align:center}.show-eyebrow{justify-content:center;margin-bottom:4px;font-size:12px}.show-copy h2{font-size:40px;line-height:1.6;letter-spacing:-.7px}.show-tagline{font-size:22px;margin-top:5px;line-height:1.9}.show-tagline br{display:none}.show-tagline span::before{content:' '}.show-description{font-size:15px;line-height:2;margin:12px auto 0;max-width:530px}.show-action{font-size:13px;min-height:46px;margin-top:18px;padding:7px 18px}.show-visual{max-width:640px;margin-inline:auto}.show-coming{font-size:11px}.chapter-dictionary .show-copy,.chapter-dictionary .show-visual{grid-row:auto;grid-column:auto}
 .chapter-pinyin .show-shell,.chapter-notes .show-shell,.chapter-games .show-shell{gap:32px}.chapter-notes .show-shell{width:100%}.chapter-notes .show-copy{width:calc(100% - 36px)}
 .game-track{gap:12px}.ribbon-game{width:min(66vw,440px)}.ribbon-game figcaption{padding:14px 17px;min-height:120px}.ribbon-game h3{font-size:19px}.ribbon-game p{font-size:12px}.ribbon-index button{width:32px}.ribbon-controls{gap:4px 16px}
 html[lang=zh-Hans] .show-copy h2{font-size:46px}html[lang=zh-Hans] .show-tagline{font-size:26px}html[lang=zh-Hans] .show-description{font-size:20px}html[lang=zh-Hans] .show-action{font-size:19px}html[lang=zh-Hans] .ribbon-game h3{font-size:25px}html[lang=zh-Hans] .ribbon-game p{font-size:18px}
}
@media(max-width:360px){.show-shell{width:calc(100% - 28px)}.show-copy h2{font-size:36px}.show-tagline{font-size:20px}.show-description{font-size:14px}.ribbon-game{width:68vw}.ribbon-game h3{font-size:18px}.ribbon-game p{font-size:11px}.ribbon-index button{width:30px}}
@media(prefers-reduced-motion:reduce){.learning-story *{scroll-behavior:auto!important}.game-track,.ribbon-game,.ribbon-index button span{transition:none}}