.origin-home { margin:0; overflow-x:hidden; background:#f7f7eb; }
.home-experience { position:relative; background:#79bde4; }
.forest-hub { position:relative; height:max(760px,100svh); overflow:hidden; isolation:isolate; color:#173a32; }
.forest-world-camera { position:absolute; top:0; left:0; transform-origin:0 0; }
.forest-world-background { display:block; width:100%; height:100%; }
.forest-world-content { z-index:3; pointer-events:none; }
.forest-ground-interaction { position:absolute; inset:0; pointer-events:auto; touch-action:pan-y; cursor:crosshair; }
.forest-header { position:absolute; z-index:100; inset:0 0 auto; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 6%; background:linear-gradient(90deg,#f1f8eaaa,#ffffff50 65%,#d7efbc10); backdrop-filter:blur(8px); gap:30px; }
.forest-wordmark { display:flex; gap:10px; align-items:center; white-space:nowrap; font-size:clamp(21px,1.8vw,31px); letter-spacing:-1px; color:#1b3032; }
.brand-sprout { width:36px; height:40px; color:#53973b; }
.brand-sprout svg { width:100%; height:100%; fill:#c6df87; }
.forest-wordmark strong { font-weight:850; }
.forest-wordmark strong span { font-size:.8em; }
.forest-header nav { display:flex; gap:36px; font-size:14px; font-weight:650; }
.forest-header nav a { padding:25px 0; position:relative; }
.forest-header nav a.is-current::after { content:''; position:absolute; bottom:17px; height:3px; border-radius:9px; background:#254431; left:0; right:0; }
.forest-header-actions { display:flex; align-items:center; gap:20px; }
.forest-account svg { width:24px; height:24px; }
.forest-explore { padding:10px 25px; border-radius:30px; background:#74ad46; color:white; font-weight:700; box-shadow:0 6px 20px #17351e24; white-space:nowrap; }
.forest-explore span { padding-left:16px; }
.forest-title { position:absolute; z-index:9; top:15%; left:29%; width:47%; text-align:center; color:white; pointer-events:none; text-shadow:0 3px 10px #22485d35; }
.forest-title p { color:white; }
.forest-kicker { font-size:clamp(13px,1.35vw,21px); letter-spacing:.22em; font-weight:650; }
.forest-title h1 { font-family:'STKaiti','KaiTi','Microsoft YaHei',sans-serif; font-size:clamp(38px,4.45vw,78px); line-height:1.35; font-weight:900; letter-spacing:.02em; margin:9px -30px 3px; transform:rotate(-2deg); white-space:nowrap; }
.title-leaf { display:inline-block; color:#e0edb1; font-size:.5em; vertical-align:top; transform:rotate(20deg); }
.forest-subtitle { font-size:clamp(13px,1.4vw,23px); letter-spacing:.06em; }
.forest-start { pointer-events:auto; display:inline-flex; align-items:center; gap:28px; margin-top:21px; padding:12px 34px; background:linear-gradient(#fff0c5,#ffe1a2); color:#333e32; border:1px solid #fff2d0; border-radius:50px; font-size:18px; font-weight:800; box-shadow:0 8px 22px #354c2724; text-shadow:none; }
.forest-start span { font-size:30px; line-height:1; }
.forest-signpost { position:absolute; z-index:25; left:7%; top:45%; width:clamp(222px,18.6vw,330px); display:grid; gap:3px; }
.signpost-pole { position:absolute; top:8%; bottom:-8%; width:11%; left:22%; background:linear-gradient(90deg,#6c4427,#ab713d,#69412b); border-radius:10px; z-index:-1; box-shadow:5px 4px 7px #2c371955; transform:rotate(2deg); }
.forest-sign { position:relative; aspect-ratio:3.4; display:flex; align-items:center; gap:14px; padding:6% 11%; background:url('/assets/forest-brand-story-20260926-v2/world/master-v1/wood-sign.svg') center/100% 100% no-repeat; color:#332b1c; filter:drop-shadow(0 5px 3px #3e3a2c38); transition:transform .18s,filter .18s; transform:rotate(2deg); }
.forest-sign:nth-of-type(2n) { transform:rotate(-2deg); }
.forest-sign:hover,.forest-sign:focus-visible { transform:translateX(7px) rotate(0); filter:brightness(1.08) drop-shadow(0 8px 8px #27321650); }
.forest-sign svg { flex-shrink:0; width:32px; height:32px; }
.forest-sign span:not(.sign-arrow) { display:flex; flex-direction:column; }
.forest-sign strong { font-size:clamp(16px,1.45vw,23px); line-height:1.4; }
.forest-sign small { font-size:clamp(10px,.85vw,14px); opacity:.78; white-space:nowrap; }
.sign-arrow { position:absolute; right:9%; opacity:0; }
.forest-sign:hover .sign-arrow { opacity:1; }
.forest-message { position:absolute; right:7%; top:46%; width:180px; padding:23px 20px; background:#c99053; background-image:url('/assets/forest-brand-story-20260926-v2/world/master-v1/wood-sign.svg'); background-size:100% 100%; border-radius:12px; transform:rotate(-9deg); box-shadow:7px 10px 16px #2a35142a; color:#52381f; font-family:'KaiTi','Microsoft YaHei',sans-serif; }
.forest-message span { display:block; font-size:24px; line-height:1.45; }
.forest-message small { display:block; text-align:right; font-size:20px; }
.forest-hotspot { position:absolute; left:var(--world-x); top:var(--world-y); width:var(--prop-width); aspect-ratio:1; translate:-50% -100%; pointer-events:auto; z-index:8; border-radius:50%; }
.place-visual { position:absolute; inset:0; display:grid; place-items:center; transition:filter .25s; }
.place-caption { position:absolute; top:100%; left:50%; translate:-50% 0; font-size:12px; color:white; background:#254d3277; border-radius:20px; padding:3px 9px; white-space:nowrap; opacity:0; transition:opacity .2s; }
.forest-hotspot:hover .place-caption,.forest-hotspot:focus-visible .place-caption,.forest-hotspot.is-interacting .place-caption { opacity:1; }
.forest-hotspot:hover .place-visual,.forest-hotspot.is-interacting .place-visual { filter:drop-shadow(0 0 14px #fff18d); }
.scene-book { width:65%; padding:8%; color:#634025; background:linear-gradient(135deg,#ffefbe,#d6a75b); border:3px solid #95612f; border-radius:9px; transform:rotate(-10deg); box-shadow:5px 9px 0 #895e34; }
.scene-book svg { display:block; width:100%; }
.scene-seed { width:60%; color:#a5d85f; filter:drop-shadow(0 0 14px #ffe275); animation:seed-glimmer 3s ease-in-out infinite; }
.scene-seed svg { width:100%; fill:#ddf198; }
.scene-portal { position:absolute; inset:0 14%; border-radius:48% 48% 6% 6%; border:2px solid #ffe69666; background:radial-gradient(ellipse,#ffea9966,transparent 70%); opacity:.45; box-shadow:0 0 15px #ffe68055; }
.is-interacting .scene-portal { opacity:1; box-shadow:0 0 35px #ffe78f; animation:seed-glimmer .6s infinite; }
.scene-treehouse-glow { width:100%; height:100%; background:url('/assets/forest-brand-story-20260926-v2/world/home/props/prop_growth_treehouse.png') center/contain no-repeat; filter:drop-shadow(0 3px 4px #40532544); }
.forest-yaya-layer { position:absolute; inset:0; pointer-events:none; }
.yaya-position-layer { position:absolute; top:0; left:0; width:clamp(190px,24vw,390px); aspect-ratio:1; transform-origin:50% 96%; will-change:transform; }
.yaya-facing-layer { position:absolute; inset:0; transform-origin:50% 96%; }
.yaya-position-layer[data-facing='left'] .yaya-facing-layer { transform:scaleX(-1); }
.yaya-sprite { position:absolute; inset:0; background-image:url('/assets/forest-brand-story-20260926-v2/world/master-v1/yaya-poses.png'); background-size:400% 200%; background-position:var(--frame-x,0%) var(--frame-y,0%); background-repeat:no-repeat; transform-origin:50% 96%; animation:yaya-breathe 3.5s ease-in-out infinite; }
.yaya-position-layer[data-walking='true'] .yaya-sprite { background-image:url('/assets/forest-brand-story-20260926-v2/world/master-v1/pet-walk-v2.png'); background-size:200% 200%; animation:none; transform:translateY(var(--gait-lift,0%)) rotate(var(--gait-roll,0deg)); }
.yaya-position-layer[data-walking='true'] .yaya-shadow { transform:scaleX(var(--gait-shadow,1)); }
.yaya-position-layer[data-state='celebrating'] .yaya-sprite { animation:yaya-celebrate .7s ease-in-out infinite; }
.yaya-position-layer[data-activity='look'] .yaya-sprite { animation:yaya-look 1.4s ease-in-out; }
.yaya-shadow { position:absolute; width:43%; height:7%; bottom:1%; left:28.5%; background:radial-gradient(ellipse,#66431f50,transparent 70%); border-radius:50%; }
.yaya-emote { position:absolute; top:-8%; left:52%; background:#fff7d9ee; border-radius:18px 18px 18px 0; padding:5px 12px; font-size:14px; opacity:0; transition:opacity .2s; white-space:nowrap; color:#556d34; }
.yaya-emote:not(:empty) { opacity:1; }
.world-click-marker { position:absolute; width:20px; height:12px; border:2px solid #fff9cb; border-radius:50%; transform:translate(-50%,-50%); opacity:0; }
.world-click-marker.is-visible { animation:click-ripple .8s ease-out; }
.forest-bottom { position:absolute; z-index:30; bottom:24px; left:4%; right:4%; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.forest-bottom button { cursor:pointer; color:#f8ffe7; background:#234b3680; border:1px solid #eefcd638; border-radius:22px; padding:8px 15px; font-size:12px; backdrop-filter:blur(8px); }
.forest-bottom p { color:#fffde8; font-size:12px; text-shadow:0 1px 5px #33492b; }
.forest-scroll { position:absolute; z-index:20; bottom:3%; left:50%; translate:-50% 0; font-size:11px; color:#655636; display:grid; text-align:center; }
.forest-scroll span { font-size:24px; }
.forest-scene-transition { position:absolute; inset:0; z-index:150; background:#fff5d3; opacity:0; pointer-events:none; transition:opacity .35s; }
.forest-scene-transition.is-active { opacity:1; }
.forest-world-debug { display:none; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:99; }
.is-world-debug .forest-world-debug { display:block; }
.forest-world-debug text { font: .008px monospace; fill:#123e2d; paint-order:stroke; stroke:white; stroke-width:.001; }
.forest-world-debug-panel { position:absolute; z-index:110; right:10px; bottom:60px; padding:10px; white-space:pre; background:#112f28dd; color:#fff8d2; font:11px monospace; pointer-events:none; }
.forest-discover { max-width:1200px; padding:85px 30px; margin:auto; text-align:center; }
.section-eyebrow { letter-spacing:.2em; font-size:11px; color:#7b914b; }
.forest-discover h2 { margin:12px 0; font-size:30px; color:#264d36; }
.forest-discover>div { display:grid; grid-template-columns:repeat(4,1fr); margin-top:40px; gap:28px; }
.forest-discover>div>a { padding:20px 5px; }
.forest-discover svg { height:38px; width:38px; color:#86a746; }
.forest-discover h3 { font-size:19px; margin:12px 0 5px; }
.forest-discover>div p { font-size:13px; }
.forest-discover>div span { display:block; color:#739249; font-size:13px; margin-top:18px; }
.forest-footer { display:flex; align-items:center; gap:25px; padding:30px 6%; background:#1f4936; color:#f4f6de; }
.forest-footer p { color:#c5d8bd; flex:1; font-size:13px; }
@keyframes yaya-breathe { 50% { transform:scale(1.015,1.025) rotate(.6deg); } }
@keyframes yaya-step { 50% { transform:translateY(-2.5%) rotate(-1deg); } }
@keyframes yaya-look { 30% { transform:rotate(-4deg); } 70% { transform:rotate(3deg); } }
@keyframes yaya-celebrate { 50% { transform:translateY(-6%) rotate(3deg); } }
@keyframes seed-glimmer { 50% { filter:brightness(1.2) drop-shadow(0 0 13px #fff08e); } }
@keyframes click-ripple { from { opacity:1; scale:.5; } to { opacity:0; scale:2; } }
@media(min-width:1800px) { .forest-hub { min-height:1000px; } }
@media(max-width:1100px) { .forest-header { padding-inline:4%; gap:18px; } .forest-header nav { gap:18px; font-size:12px; } .forest-wordmark strong span { display:none; } .forest-message { right:3%; width:140px; padding:19px; } .forest-message span { font-size:19px; } .forest-signpost { left:3%; width:220px; } .forest-title { left:25%; width:56%; } }
@media(max-width:700px) { .forest-hub { height:900px; min-height:100svh; } .forest-header { height:62px; padding:0 18px; } .forest-wordmark { font-size:21px; } .brand-sprout { width:27px; } .forest-header nav,.forest-account { display:none; } .forest-explore { font-size:11px; padding:8px 12px; } .forest-explore span { padding-left:3px; } .forest-title { left:5%; width:90%; top:13%; } .forest-title h1 { font-size:clamp(31px,8vw,50px); margin-inline:0; } .forest-title .forest-kicker { font-size:12px; } .forest-subtitle { font-size:13px; } .forest-start { margin-top:15px; padding:9px 25px; font-size:15px; } .forest-signpost { top:36%; left:4%; width:180px; gap:1px; } .forest-sign { gap:8px; } .forest-sign svg { width:24px; height:24px; } .forest-sign strong { font-size:15px; } .forest-sign small { font-size:9px; } .forest-message { display:none; } .forest-bottom { bottom:15px; left:12px; right:12px; } .forest-bottom p { display:none; } .forest-bottom button { font-size:10px; padding:8px 10px; } .forest-scroll { bottom:7%; } .yaya-position-layer { width:240px; } .forest-discover { padding:50px 20px; } .forest-discover h2 { font-size:23px; } .forest-discover>div { grid-template-columns:1fr 1fr; gap:10px; } .forest-footer { flex-wrap:wrap; gap:10px; } .forest-footer p { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { .yaya-sprite,.scene-seed,.scene-portal { animation:none!important; } .forest-sign { transition:none; } }