/* 第五幕：同一幅可触碰的画面；样式限定在本幕，不覆盖前四幕。 */
.companion-scene{--ink:#28594f;--muted:#60796c;--accent:#9c7844;position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;padding:32px clamp(24px,6vw,96px);color:var(--ink);background:#e4eade;overflow:clip;transition:background .8s ease}
.companion-scene::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 77% 45%,#b7d6c08c,transparent 53%),radial-gradient(ellipse at 10% 5%,#faf1dbbf,transparent 58%);transition:opacity .8s}
.companion-scene[data-experience=sand]{background:#ede6d4}.companion-scene[data-experience=sand]::before{opacity:.5}
.companion-scene[data-experience=pond]{background:#dae9df}
.companion-wrap{width:min(1240px,100%);margin:auto;min-width:0}
.companion-topline{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #6c8f733b;padding-bottom:16px;font:11px/1.5 -apple-system,'PingFang SC',sans-serif;letter-spacing:.14em}
.companion-topline a{color:var(--muted);text-decoration:none;letter-spacing:0;padding:5px 0}
.companion-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,62px);align-items:center;padding:clamp(24px,5svh,56px) 0}
.companion-copy,.companion-experience{min-width:0}
.companion-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--muted)}
.companion-copy h2{font:400 clamp(36px,3.65vw,56px)/1.45 'Songti SC','STSong',serif;letter-spacing:.025em;margin:20px 0 38px}
.companion-copy h2>span{color:#7e8b55}
.companion-features{max-width:400px}
.companion-feature{display:flex;align-items:center;gap:22px;padding:18px 0;border-top:1px solid #7d98753b}
.companion-mark{font:28px/1 'Songti SC',serif;color:#9c895d;display:block;transform-origin:center}
.companion-feature h3{font:400 20px/1.5 'Songti SC',serif;margin:0 0 4px}.companion-feature h3 i{font-style:normal;color:#9ba98a;font-size:14px;margin:0 4px}
.companion-feature p{font:12px/1.75 -apple-system,'PingFang SC',sans-serif;color:var(--muted);margin:0}
.companion-zhiwei{white-space:nowrap}
.experience-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:12px/1.6 'Songti SC',serif;color:#60795c;letter-spacing:.06em}
.experience-pause{font:10px/1.6 -apple-system,'PingFang SC',sans-serif;color:#687a62;cursor:pointer;border:0;border-bottom:1px solid #82987770;background:transparent;padding:8px 0;flex-shrink:0}
.experience-canvas-wrap{height:clamp(260px,43svh,470px);position:relative;margin:8px -22px 6px}
#companion-canvas{width:100%;height:100%;display:block;touch-action:pan-y;transition:opacity .22s ease;cursor:crosshair}
.experience-canvas-wrap.is-changing canvas{opacity:0}
.experience-caption{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font:10px/1.5 -apple-system,'PingFang SC',sans-serif;letter-spacing:.25em;color:#70866a;pointer-events:none;white-space:nowrap}
.experience-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #78947750}
.experience-tabs button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;font:17px/1.5 'Songti SC',serif;color:#607c68;background:none;border:0;padding:17px 0;cursor:pointer;white-space:nowrap;transition:color .3s}
.experience-tabs button>span{font:10px/1 Georgia,serif;color:#8f9b7b}
.experience-tabs button::before{content:'';position:absolute;top:-1px;left:8%;width:84%;height:2px;background:#a58a4e;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.experience-tabs button[aria-selected=true]{color:#325c45}.experience-tabs button[aria-selected=true]::before{transform:scaleX(1)}
.experience-tabs button[aria-selected=true]>span{color:#9d783f}
.experience-detail{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:50px;border-top:1px solid #7894772b}
.experience-detail p{font:12px/1.8 -apple-system,'PingFang SC',sans-serif;color:#5a7563;margin:0;max-width:340px}
.experience-touch{flex-shrink:0;cursor:pointer;color:#385f49;font:12px/1.5 'Songti SC',serif;border:0;background:transparent;padding:12px 0}.experience-touch span{margin-left:10px;color:#9d7b3c}
.companion-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #6c8f733b;padding-top:18px;color:#657d68;font:10px/1.5 -apple-system,'PingFang SC',sans-serif;letter-spacing:.07em}
.companion-bottom>span:last-child{color:#788574;letter-spacing:0}
.experience-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.companion-scene button:focus-visible,.companion-scene a:focus-visible{outline:2px solid #947943;outline-offset:4px}
.companion-scene button:disabled{cursor:default;opacity:.55}
.companion-layout{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.65,.2,1)}
.companion-scene.motion-ready:not(.is-visible) .companion-layout{opacity:.15;transform:translateY(36px)}
@media(min-width:721px) and (max-height:760px){.companion-scene{padding-top:22px;padding-bottom:22px}.companion-layout{padding:24px 0}.companion-copy h2{font-size:42px;margin:14px 0 22px}.companion-feature{padding:14px 0}.experience-canvas-wrap{height:36svh;min-height:240px}}
@media(min-width:721px) and (max-width:1050px){.companion-layout{gap:28px;grid-template-columns:1fr 1.05fr}.companion-copy h2{font-size:36px}.companion-feature{gap:15px}.companion-feature h3{font-size:18px}.experience-tabs button{font-size:15px;gap:6px}.experience-detail{gap:10px}}
@media(max-width:720px){
 .companion-scene{padding:20px 24px}.companion-topline{font-size:10px;padding-bottom:10px}
 .companion-layout{grid-template-columns:1fr;gap:22px;padding:22px 0 16px}
 .companion-eyebrow{font-size:10px}.companion-copy h2{font-size:34px;line-height:1.4;margin:10px 0 20px}
 .companion-features{display:grid;grid-template-columns:repeat(3,1fr);max-width:none;gap:12px}.companion-feature{display:block;padding:10px 0 0}.companion-mark{display:none}
 .companion-feature h3{font-size:15px;margin-bottom:5px;line-height:1.5}.companion-feature h3 i{display:none}.companion-zhiwei{display:block}.companion-feature p{font-size:10px;line-height:1.7}
 .experience-top{font-size:11px}.experience-pause{padding:4px 0;font-size:10px}.experience-canvas-wrap{height:29svh;min-height:190px;margin:0 -16px}
 .experience-tabs button{font-size:15px;padding:12px 0;gap:7px}.experience-tabs button>span{font-size:9px}.experience-caption{font-size:9px;bottom:4px}
 .experience-detail{min-height:45px;gap:8px}.experience-detail p{font-size:10px;max-width:230px}.experience-touch{font-size:11px}.experience-touch span{margin-left:5px}
 .companion-bottom{padding-top:12px;gap:10px;font-size:9px;letter-spacing:0}.companion-bottom>span:last-child{max-width:118px;text-align:right}
}
@media(max-width:720px) and (max-height:740px){.companion-scene{padding:14px 20px}.companion-layout{padding:14px 0 10px;gap:14px}.companion-copy h2{font-size:29px;margin:7px 0 13px}.companion-feature h3{font-size:14px}.experience-canvas-wrap{height:27svh;min-height:164px}.experience-tabs button{padding:10px 0}.companion-bottom{padding-top:9px}}
@media(prefers-reduced-motion:reduce){.companion-scene,.companion-scene *,.companion-scene *::before{transition:none!important;animation:none!important}.companion-scene.motion-ready:not(.is-visible) .companion-layout{opacity:1;transform:none}}