/* Home and guide use one original bitmap each. The body owns the continuous
   atmosphere; neither scene mounts another forest or a colored edge cover. */
html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]){--nw-light-x:78%;--nw-light-y:280px;--nw-light-w:75%;--nw-light-h:620px;--nw-light-color:rgba(76,115,137,.32);--nw-tide-x:68%;--nw-tide-y:650px;--nw-tide-w:95%;--nw-tide-h:700px;--nw-tide-color:rgba(39,80,75,.43);overflow-x:clip}
html:root[data-theme="dim"] body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]){--nw-light-color:rgba(119,145,154,.22);--nw-tide-color:rgba(65,93,94,.34)}
html:root[data-theme="dawn"] body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]){--nw-light-color:rgba(153,187,199,.55);--nw-tide-color:rgba(139,177,166,.48)}
/* The removed SVG extension must not compete with the body gradients. */
html:root body[data-locale="zh-tw"][data-page="home"]::before,
html:root body[data-locale="zh-tw"][data-page="home"]::after{content:none!important;background:none!important}
html:root body[data-locale="zh-tw"][data-page="home"] .home-opening{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.48fr);align-items:center;gap:20px;width:100%;max-width:1500px;margin:0 auto;min-height:0;height:auto;aspect-ratio:auto;padding:48px 40px 60px;overflow:visible;background:transparent!important;border:0;box-shadow:none}
html:root body[data-locale="zh-tw"][data-page="home"] .home-copy{position:relative;inset:auto;width:100%;max-width:500px;margin:0;padding:12px 0;z-index:1;background:none;box-shadow:none;color:var(--text)!important}
html:root body[data-locale="zh-tw"][data-page="home"] .home-copy::before,
html:root body[data-locale="zh-tw"][data-page="home"] .home-copy::after{content:none!important;background:none!important}
html:root body[data-locale="zh-tw"][data-page="home"] .home-opening h1{font-size:clamp(2.8rem,4.1vw,4.5rem);line-height:1.35;margin-top:16px}
html:root body[data-locale="zh-tw"][data-page="home"] .home-opening :is(.definition,.tiny){color:var(--text-muted)!important}
html:root body[data-locale="zh-tw"][data-page="home"] .home-opening .definition{margin-left:0;font-size:1rem}
html:root body[data-locale="zh-tw"][data-page="home"] .home-opening .eyebrow{color:var(--accent)!important}
html:root body[data-locale="zh-tw"][data-page="home"] .home-opening .text-link{color:var(--accent-soft)!important}
/* Enlarge the measured layout area, never crop or stretch the source. */
html:root body[data-locale="zh-tw"][data-page="how-it-works"] .how-opening{max-width:1500px;padding:36px 40px 48px;overflow:visible}
html:root body[data-locale="zh-tw"][data-page="how-it-works"] .how-opening-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.48fr);gap:28px;align-items:center;overflow:visible}
html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]) :is(.home-scene,.how-tree-scene){position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;min-width:0;min-height:0!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;padding:clamp(12px,2vw,30px) 0!important;align-self:center;z-index:0;overflow:visible!important;pointer-events:none;background:none!important;border:0!important;outline:0;box-shadow:none!important;border-radius:0!important;mask:none!important;-webkit-mask:none!important}
html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]) :is(.home-opening,.home-scene,.how-tree-scene)::before,
html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]) :is(.home-opening,.home-scene,.how-tree-scene)::after{content:none!important;background:none!important}
/* Independent alpha ramps multiply at every corner. The subjects lie within
   the opaque 18–84% horizontal and 17–83% vertical interior of this asset.
   Only the peripheral sky, canopy and ground dissolve. */
html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]) :is(.home-scene img,.how-tree-image){position:static!important;display:block;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:1774/887!important;object-fit:contain!important;object-position:center!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important;clip-path:none!important;--scene-alpha-x:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.06) 3%,rgba(0,0,0,.24) 7%,rgba(0,0,0,.58) 12%,rgba(0,0,0,.88) 16%,#000 20%,#000 83%,rgba(0,0,0,.88) 87%,rgba(0,0,0,.58) 91%,rgba(0,0,0,.24) 95%,rgba(0,0,0,.06) 98%,transparent 100%);--scene-alpha-y:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.06) 3%,rgba(0,0,0,.24) 7%,rgba(0,0,0,.58) 11%,rgba(0,0,0,.88) 15%,#000 18%,#000 83%,rgba(0,0,0,.88) 87%,rgba(0,0,0,.58) 91%,rgba(0,0,0,.24) 95%,rgba(0,0,0,.06) 98%,transparent 100%);mask-image:var(--scene-alpha-x),var(--scene-alpha-y)!important;mask-size:100% 100%!important;mask-repeat:no-repeat!important;mask-composite:intersect!important;-webkit-mask-image:var(--scene-alpha-x),var(--scene-alpha-y)!important;-webkit-mask-size:100% 100%!important;-webkit-mask-repeat:no-repeat!important;-webkit-mask-composite:source-in!important}
/* Dawn exposes a wider mist-colored transition while keeping all central
   characters opaque; dim keeps the source's warm light intact. */
html:root[data-theme="dawn"] body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]) :is(.home-scene img,.how-tree-image){--scene-alpha-y:linear-gradient(180deg,transparent,rgba(0,0,0,.06) 4%,rgba(0,0,0,.24) 9%,rgba(0,0,0,.58) 14%,rgba(0,0,0,.88) 18%,#000 21%,#000 82%,rgba(0,0,0,.88) 86%,rgba(0,0,0,.58) 91%,rgba(0,0,0,.24) 95%,rgba(0,0,0,.06) 98%,transparent)}
.home-story-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
.home-story-links a{display:block;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);transition:transform .2s}
.home-story-links a:hover,.home-story-links a:focus-visible{transform:translateY(-3px)}
.home-story-links h3{font-size:1.25rem;margin-bottom:8px}
.home-story-links p{color:var(--text-muted);margin:0}
.home-start-note{max-width:650px;margin:24px auto;color:var(--text-muted)}
@media(max-width:1000px){
 html:root body[data-locale="zh-tw"][data-page="home"] .home-opening{grid-template-columns:1fr;gap:12px;padding:36px 24px 32px}
 html:root body[data-locale="zh-tw"][data-page="home"] .home-copy{max-width:700px;margin:auto;padding:0}
 html:root body[data-locale="zh-tw"][data-page="how-it-works"] .how-opening{padding:28px 24px 24px}
 html:root body[data-locale="zh-tw"][data-page="how-it-works"] .how-opening-grid{grid-template-columns:1fr;gap:12px}
 html:root body[data-locale="zh-tw"][data-page="how-it-works"] .how-opening-copy{max-width:700px;width:100%;margin:auto}
 html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]) :is(.home-scene,.how-tree-scene){max-width:1000px!important;justify-self:center;padding:20px 0!important}
 html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]){--nw-light-x:58%;--nw-light-y:780px;--nw-light-w:140%;--nw-light-h:660px;--nw-tide-x:55%;--nw-tide-y:1100px;--nw-tide-w:150%;--nw-tide-h:700px}
}
@media(max-width:640px){
 html:root body[data-locale="zh-tw"][data-page="home"] .home-opening{padding:32px 16px 20px}
 html:root body[data-locale="zh-tw"][data-page="how-it-works"] .how-opening{padding:24px 16px 20px}
 html:root body[data-locale="zh-tw"][data-page="home"] .home-opening h1{font-size:clamp(2.8rem,9vw,4rem)}
 html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]) :is(.home-scene,.how-tree-scene){width:calc(100% + 24px)!important;margin-inline:-12px!important;padding:24px 0!important}
 html:root body[data-locale="zh-tw"]:is([data-page="home"],[data-page="how-it-works"]){--nw-light-y:850px;--nw-light-h:480px;--nw-tide-y:1150px;--nw-tide-h:580px}
 .home-opening .actions>.button{width:100%}
 .home-story-links{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.home-story-links a{transition:none}.home-story-links a:hover,.home-story-links a:focus-visible{transform:none}}
