/* Homepage-only polish; the original tool routes retain their own appearance. */
/* Clock-inspired paired numerals stay beside the product name. */
.show-titleline{display:flex;align-items:center;gap:20px;min-width:0;margin-bottom:12px}
.show-index{display:inline-flex;align-items:center;justify-content:center;color:#e89043;line-height:1;flex:none;filter:drop-shadow(0 5px 9px #e67e2220)}
.section-numeral{display:block;width:176px;height:auto;overflow:visible}
.show-copy h2{font-size:44px;line-height:1.55;letter-spacing:-.8px;min-width:0}
.show-shell{padding-block:82px}
.show-coming{display:inline-block;margin-top:2px}
.chapter-pinyin .show-titleline,.chapter-notes .show-titleline,.chapter-games .show-titleline{justify-content:center}
html[lang=zh-Hans] .show-copy h2{font-size:48px}
@media(max-width:1439px){
 .chapter-pinyin .show-shell,.chapter-dictionary .show-shell,.chapter-notes .show-shell{display:flex;flex-direction:column;gap:36px}
 .chapter-pinyin .show-copy,.chapter-dictionary .show-copy,.chapter-notes .show-copy{max-width:880px;width:100%;text-align:center}
 .chapter-pinyin .show-titleline,.chapter-dictionary .show-titleline,.chapter-notes .show-titleline{justify-content:center}
 .chapter-dictionary .show-description{margin-inline:auto}
}
@media(min-width:1440px){
 .chapter-pinyin .show-shell,.chapter-dictionary .show-shell,.chapter-notes .show-shell{display:grid;direction:ltr;width:min(1680px,calc(100% - 80px));grid-template-columns:minmax(0,1fr) clamp(440px,30.55vw,490px);gap:40px;align-items:center}
 .chapter-pinyin .show-copy,.chapter-notes .show-copy{grid-column:2;grid-row:1}
 .chapter-pinyin .show-visual,.chapter-notes .show-visual{grid-column:1;grid-row:1}
 .chapter-dictionary .show-shell{grid-template-columns:clamp(440px,30.55vw,490px) minmax(0,1fr)}
 .chapter-dictionary .show-copy{grid-column:1;grid-row:1}
 .chapter-dictionary .show-visual{grid-column:2;grid-row:1;max-width:820px}
 .chapter-pinyin .show-copy,.chapter-dictionary .show-copy,.chapter-notes .show-copy{width:100%;max-width:none;text-align:start;direction:rtl}
 html[dir=ltr] .chapter-pinyin .show-copy,html[dir=ltr] .chapter-dictionary .show-copy,html[dir=ltr] .chapter-notes .show-copy{direction:ltr}
 .chapter-pinyin .show-titleline,.chapter-dictionary .show-titleline,.chapter-notes .show-titleline{justify-content:flex-start;gap:16px}
 .chapter-pinyin .show-copy h2,.chapter-dictionary .show-copy h2,.chapter-notes .show-copy h2{font-size:clamp(40px,2.78vw,46px)}
 .chapter-pinyin .show-tagline,.chapter-notes .show-tagline{font-size:26px}
 .chapter-pinyin .show-tagline br,.chapter-notes .show-tagline br{display:initial}
 .chapter-pinyin .show-description,.chapter-notes .show-description{margin-inline:0}
 .chapter-notes .notes-showcase{--note-width:640px;direction:rtl}
 html[dir=ltr] .chapter-notes .notes-showcase{direction:ltr}
 .chapter-notes .notes-paper-stage{overflow:visible;padding-block:18px 26px}
 .chapter-notes .notes-paper-peek{width:calc(var(--note-width)*.64);top:105px}
 .chapter-notes .notes-paper-before{left:calc(50% - var(--note-width)*.69)}
 .chapter-notes .notes-paper-after{right:calc(50% - var(--note-width)*.69)}
}
@media(max-width:800px){
 .show-titleline{justify-content:center;gap:16px;margin-bottom:14px}
 .section-numeral{width:126px}
 .show-copy h2,html[lang=zh-Hans] .show-copy h2{font-size:34px}
 .show-shell{padding-block:56px}
}
@media(max-width:360px){.show-titleline{gap:12px}.section-numeral{width:102px}.show-copy h2,html[lang=zh-Hans] .show-copy h2{font-size:29px}}

html[data-theme=dark]{--paper:#1b2e41;--ink:#f1f5f8;--hero-ink:#f1f5f8;--hero-secondary:#c1cfdb;--hero-surface:#233446;color-scheme:dark}
html[data-theme=dark] .ambient{background:radial-gradient(ellipse at 25% 37%,#49677e35,transparent 55%),linear-gradient(125deg,#293f53,#1d3044 75%)}
html[data-theme=dark] .ambient::after{opacity:.25}
html[data-theme=dark] .hello-divider{background:#c7d9e44a}
html[data-theme=dark] .learning-story{--show-surface:#1d3145;--show-surface-soft:#2a4156;--show-ink:#f1f5f8;--show-muted:#bbccda;--show-line:#c9dce829;--show-accent:#f1aa6a}
html[data-theme=dark] .learn-chapter{border:0}
html[data-theme=dark] .chapter-pinyin{background:#21374c}
html[data-theme=dark] .chapter-dictionary{background:#1c3044}
html[data-theme=dark] .chapter-notes{background:#253c50}
html[data-theme=dark] .chapter-games{background:radial-gradient(ellipse at 50% 66%,#506e8826,transparent 65%),#1d3449}
html[data-theme=dark] .chapter-tests{background:#21384d}
html[data-theme=dark] .show-visual.live-pinyin{background:#21384d;border-color:#4a6073}
html[data-theme=dark] .dictionary-tour.live-dictionary.dictionary-preview{--dt-paper:#2b4257;--dt-ink:#f1f5f8;--dt-muted:#c1d0de;--dt-line:#52687c;--dt-soft:#344e65;--dt-blue:#aad2ef;--dt-orange:#f4b27a;--dt-first:#f1f5f8}
html[data-theme=dark] .dictionary-tour .dt-tool{border:1px solid var(--dt-line);border-radius:16px}
html[data-theme=dark] .dictionary-tour [data-tone="2"],html[data-theme=dark] .dictionary-tour .dt-character-portrait{color:#68bee0}
html[data-theme=dark] .dictionary-tour [data-tone="3"]{color:#75bd96}
html[data-theme=dark] .dictionary-tour [data-tone="4"]{color:#ed9696}
html[data-theme=dark] .dictionary-tour .dt-accent[data-tone]{color:inherit}
html[data-theme=dark] .dictionary-tour .dt-character-selector span[aria-current=true]{background:#e67e2219;color:var(--dt-ink)}
html[data-theme=dark] .dictionary-tour .dt-writer-canvas{background-color:#20364a;border-color:#52687c;background-image:linear-gradient(45deg,transparent 49.8%,#506579 49.8%,#506579 50.2%,transparent 50.2%),linear-gradient(-45deg,transparent 49.8%,#506579 49.8%,#506579 50.2%,transparent 50.2%),linear-gradient(90deg,transparent 49.8%,#506579 49.8%,#506579 50.2%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#506579 49.8%,#506579 50.2%,transparent 50.2%)}
html[data-theme=dark] .dictionary-tour .dt-stroke-outline{fill:#526b80}
html[data-theme=dark] .dictionary-tour .dt-writing-stroke{stroke:#eff5fa}
html[data-theme=dark] .dictionary-tour .dt-writing-fallback{color:#eff5fa33}
html[data-theme=dark] .ribbon-game{box-shadow:0 20px 40px #00000020}
html[data-theme=dark] .site-footer{background:#1a2e41;color:#eef3f7}
html[data-theme=dark] .footer-motto,html[data-theme=dark] .footer-meta{color:#bccddb}
html[data-theme=dark] .site-footer h2{color:#f1aa6a}
html[data-theme=dark] .footer-meta,html[data-theme=dark] .footer-beta{border-color:#cadde52c}
html[data-theme=dark] .footer-emblem{background:#dce7ef}
@media(max-width:980px){html[data-theme=dark] .header-nav{background:#243b50fa;border-color:#cadde52c}}

/* The landscape now belongs to the footer's bottom, with no intervening band. */
.site-footer{isolation:isolate;overflow:hidden}
.footer-landscape{position:absolute;z-index:-1;inset:auto 0 0;height:160px;pointer-events:none;background:url('./mountains.webp') center 72% / cover no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 45%);filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.18}
html[data-theme=light] .footer-landscape{filter:grayscale(.55);mix-blend-mode:multiply;opacity:.42}
.footer-meta{position:relative;min-height:106px;padding-block:20px;border-top:0}
@media(max-width:600px){.footer-landscape{height:155px;background-size:auto 260px;background-position:center 66%}.footer-meta{min-height:105px}}

.dictionary-tour .dt-tool{padding-bottom:20px}
.dictionary-tour .dt-audio-status:empty{display:none}
.dictionary-tour .dt-audio-status{font-size:12px;color:var(--dt-muted);text-align:center;padding-top:10px}


/* One continuous canvas: neighbouring chapters meet at the same colour. */
:root{--story-canvas:#f7f8f6;--story-wash:#edf2f2;--story-note-wash:#f3f0e9;--story-game-wash:#edf3f1;--story-footer:#f4f6f7;--chapter-space:76px;--chapter-height:clamp(900px,100svh,1080px)}
html[data-theme=dark]{--story-canvas:#21374b;--story-wash:#263e53;--story-note-wash:#293f53;--story-game-wash:#243d51;--story-footer:#1a2e41}
html[data-theme] .learning-story{background:var(--story-canvas)}
html[data-theme] .learn-chapter{background:linear-gradient(to bottom,var(--story-canvas),var(--chapter-wash,var(--story-wash)) 40%,var(--chapter-wash,var(--story-wash)) 60%,var(--story-canvas));border:0}
.chapter-notes{--chapter-wash:var(--story-note-wash)}
.chapter-games{--chapter-wash:var(--story-game-wash)}
.show-shell{min-height:var(--chapter-height);padding-block:var(--chapter-space)}
.chapter-games .show-shell{justify-content:center}
html[data-theme] .chapter-tests{background:linear-gradient(to bottom,var(--story-canvas),var(--story-wash) 35%,var(--story-canvas) calc(100% - 160px),var(--story-footer))}
.chapter-tests .show-shell{padding-bottom:164px}
.masthead{--masthead-height:var(--chapter-height);background:var(--story-canvas)}
/* Fade the complete ambient layer, including its texture, into the same canvas
   as the first chapter. Both sides hold that colour at the shared edge. */
.ambient{mask-image:linear-gradient(to bottom,#000 55%,transparent 94%)}
.ambient::before{content:none}
html[data-theme] .chapter-pinyin{background:linear-gradient(to bottom,var(--story-canvas) 0,var(--story-canvas) 64px,var(--story-wash) 40%,var(--story-wash) 60%,var(--story-canvas))}
.hero-copy{padding-block-start:clamp(100px,14svh,155px)}
.hero-art{bottom:clamp(45px,8svh,110px)}
.notes-paper-stage{overflow:visible}
/* Faster travel and shorter dwell; the approved cards and input behaviour stay. */
.game-track{transition-duration:.46s}
.ribbon-game{transition-duration:.46s}

/* Motion adds an entrance, never a scroll hold or a required interaction. */
@keyframes chapter-copy-arrive{from{opacity:.45;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes chapter-visual-arrive{from{opacity:.65;transform:translateY(32px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hero-copy-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 .hero-copy{animation:hero-copy-arrive .75s ease-out both}
 .learn-chapter .show-copy.is-arriving{animation:chapter-copy-arrive .7s cubic-bezier(.2,.7,.25,1) both}
 .learn-chapter .show-visual.is-arriving{animation:chapter-visual-arrive .9s cubic-bezier(.2,.7,.25,1) both}
}
@media(min-width:1440px){.chapter-notes .show-shell{padding-block:44px}.chapter-notes .show-visual{z-index:3}}
@media(min-width:801px) and (max-width:1439px){
 :root{--chapter-height:960px;--chapter-space:76px}
 .chapter-pinyin .show-shell,.chapter-dictionary .show-shell,.chapter-notes .show-shell{justify-content:center}
 .chapter-dictionary .show-shell{gap:62px}
}
@media(max-width:800px){
 :root{--chapter-height:auto;--chapter-space:72px}
 .masthead{--masthead-height:calc(580px + 56.25vw)}
 .hero-copy{padding-block-start:48px}
 .hero-art{bottom:34px}
 .show-shell{min-height:0}
 .chapter-tests .show-shell{padding-bottom:138px}
}
@media(min-width:761px) and (max-width:800px){.masthead{--masthead-height:840px}.hero-copy{padding-block-start:120px}.hero-art{bottom:90px}}
@media(prefers-reduced-motion:reduce){
 .hero-copy,.learn-chapter .show-copy,.learn-chapter .show-visual{animation:none!important}
 .game-track,.ribbon-game{transition-duration:0s}
}

.dictionary-dragon-icon{display:inline-block;width:34px;height:34px;object-fit:contain;vertical-align:middle;margin-inline-start:12px}

html[data-theme=light] .site-footer{background:var(--story-footer)}
.chapter-dictionary .show-tagline br{display:none}
.chapter-dictionary .show-tagline>span{display:block}

/* A quiet definition belongs directly under the product's name. */
.show-product-name{position:relative;min-width:140px;text-align:center}
.show-aliases{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);width:max-content;max-width:240px;margin:0;color:var(--show-muted);opacity:.72;font:400 13px/1.9 var(--body-font);letter-spacing:0;text-align:center}
html[lang=zh-Hans] .show-aliases{font-family:Yuanti,sans-serif;font-size:17px;font-weight:300}
@media(max-width:800px){.chapter-notes .show-titleline{margin-bottom:28px}.show-product-name{min-width:120px}.show-aliases{font-size:11px;max-width:190px}html[lang=zh-Hans] .show-aliases{font-size:15px}}

/* The chapter number sits above its product name, with room for the full name. */
.learning-story .show-titleline{flex-direction:column;align-items:center;gap:18px;margin-bottom:14px}
.learning-story .show-copy h2{font-size:52px;line-height:1.5;letter-spacing:-.6px}
html[lang=zh-Hans] .learning-story .show-copy h2{font-size:56px;line-height:1.4;letter-spacing:0}
.learning-story .show-product-name{text-align:inherit}
.learning-story .show-aliases{position:static;transform:none;width:auto;max-width:none;margin-top:5px;text-align:inherit}
@media(min-width:1440px){
 .chapter-pinyin .show-titleline,.chapter-dictionary .show-titleline,.chapter-notes .show-titleline{align-items:flex-start}
}
@media(min-width:801px){.chapter-tests .show-titleline{align-items:flex-start}}
@media(max-width:800px){
 .learning-story .show-titleline{gap:14px;margin-bottom:16px}
 .learning-story .show-copy h2{font-size:40px}
 html[lang=zh-Hans] .learning-story .show-copy h2{font-size:44px}
}
@media(max-width:360px){
 .learning-story .show-copy h2{font-size:34px}
 html[lang=zh-Hans] .learning-story .show-copy h2{font-size:38px}
}
/* Give the second mobile footer column breathing room from the screen edge. */
@media(max-width:600px){
 .site-footer .footer-tools{grid-template-columns:repeat(2,max-content);justify-content:space-between;column-gap:24px;padding-inline-end:20px}
}

/* Keep trial entry with the navigation and align contact text in page direction. */
.site-footer .footer-tools > .footer-beta{margin-top:0;padding-top:0;border-top:0}
@media(max-width:600px){
 .site-footer .footer-contact{display:flex;flex-direction:column;align-items:flex-start}
 .site-footer .footer-contact > .email{align-self:flex-start;max-width:100%}
}

/* Neutral white illumination keeps the original directional highlights in night mode.
   Keep the separate orange tone curves and original pinyin unfiltered. */
html[data-theme=dark] .stage-image {
  filter: drop-shadow(0 12px 10px #0003);
}
html[data-theme=dark] .tree {
  filter: blur(1.7px) grayscale(.65) brightness(.7);
}
@media(max-width:760px) {
  html[data-theme=dark] .tree {
    filter: blur(1px) grayscale(.65) brightness(.65);
  }
}

.stage-moonlight{display:none}
html[data-theme=dark] .stage-daylight{display:none}
html[data-theme=dark] .stage-moonlight{display:block}

/* Distinct chapter fields, with short transitions rather than a shared wash.
   The hero still meets chapter one at its original canvas colour. */
/* Light is an editorial paper palette: ivory, blue mist and warm stock.
   Dark is independently composed from ink/navy, varying depth rather than hue.
   Neither palette is derived through inversion, filters or a shared transform. */
:root{--chapter-edge:64px}
html[data-theme=light]{--chapter-one:#faf8f3;--chapter-two:#e9eff3;--chapter-three:#f3eee4;--chapter-four:#e3ecf2;--chapter-five:#f7f5ef}
html[data-theme=dark]{--chapter-one:#203951;--chapter-two:#152b42;--chapter-three:#294159;--chapter-four:#162e47;--chapter-five:#213750}
html[data-theme] .chapter-pinyin{background:linear-gradient(to bottom,var(--story-canvas),var(--chapter-one) var(--chapter-edge))}
html[data-theme] .chapter-dictionary{background:linear-gradient(to bottom,var(--chapter-one),var(--chapter-two) var(--chapter-edge))}
html[data-theme] .chapter-notes{background:linear-gradient(to bottom,var(--chapter-two),var(--chapter-three) var(--chapter-edge))}
html[data-theme] .chapter-games{background:linear-gradient(to bottom,var(--chapter-three),var(--chapter-four) var(--chapter-edge))}
html[data-theme] .chapter-tests{background:linear-gradient(to bottom,var(--chapter-four),var(--chapter-five) var(--chapter-edge),var(--chapter-five) calc(100% - 100px),var(--story-footer))}
/* Clip the horizontal ribbon at the page edge only. Its shadow is free to
   paint over the next chapter instead of ending at a rectangular window. */
.learning-story{overflow-x:clip;overflow-y:visible}
.chapter-games{z-index:2;overflow:visible}
.chapter-tests{z-index:1}
.game-ribbon .game-window{overflow:visible}
@media(max-width:800px){:root{--chapter-edge:40px}}