/* A lighter editorial surface framing the interactive sculpture. */
.spatial-hero.hero{--scene-bg:#d2c5f2;--scene-ink:#2b1d40;background:radial-gradient(ellipse at 68% 44%,#fff9 0%,#fff0 55%),var(--scene-bg);border-radius:0 0 38px 38px}
.spatial-hero[data-palette="1"]{--scene-bg:#c9e8da}.spatial-hero[data-palette="2"]{--scene-bg:#f0cebc}
.topbar{background:#d2c5f2;padding-top:20px;padding-bottom:20px}.brand .logo-mark{box-shadow:0 5px 12px #6b4bb41a}.brand strong{letter-spacing:-1.2px}.topbar .chip{font-weight:500;min-height:38px;backdrop-filter:blur(12px)}
.spatial-caption{font-size:9px;letter-spacing:1.5px;align-items:center;opacity:.62;top:26px}.spatial-caption>span:last-child{display:flex;align-items:center;gap:7px}.spatial-caption>span:last-child:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
.spatial-copy{top:47%;width:47%}.spatial-copy .eyebrow{font-weight:500;font-size:10px;letter-spacing:1.1px;margin-bottom:24px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #3a21571b;background:#ffffff24;border-radius:100px}.spatial-copy .eyebrow:before{margin:0;width:4px;height:4px}
.spatial-hero.hero h1{font-size:clamp(62px,6.7vw,96px);font-weight:600;line-height:1.04;letter-spacing:-.064em;margin-bottom:24px}.spatial-hero.hero p{font-size:14px;max-width:325px;line-height:1.85;color:#524263}
.spatial-copy>.eyebrow,.spatial-copy>h1{opacity:calc(var(--intro-copy,1)*var(--story-copy-alpha,1));transform:translateY(calc((1 - var(--intro-copy,1))*22px + var(--story-copy-shift,0px)));filter:blur(calc((1 - var(--intro-copy,1))*7px))}
.spatial-hero.hero .spatial-copy>p{opacity:calc(var(--intro-detail,1)*var(--story-copy-alpha,1));transform:translateY(calc((1 - var(--intro-detail,1))*15px + var(--story-copy-shift,0px)))}
.spatial-actions{opacity:var(--intro-actions,1);translate:0 calc((1 - var(--intro-actions,1))*12px);gap:12px}.spatial-actions button{min-height:53px;padding:14px 25px;font-size:12px;font-weight:500}.spatial-primary{background:#30203f;box-shadow:0 5px 0 #29173f12,0 12px 25px #4c2c6410}.spatial-secondary{background:#fff3;border-color:#43275b24;box-shadow:inset 0 1px 0 #fff5}
.scene-atmosphere{position:absolute;width:590px;height:590px;right:0;top:50%;border-radius:50%;transform:translateY(-50%);z-index:0;pointer-events:none;background:radial-gradient(ellipse,#fff4,transparent 67%);box-shadow:0 0 0 1px #ffffff18,0 0 0 60px #ffffff09,0 0 0 120px #ffffff06}
.scene-word{font-size:24vw;opacity:.035;bottom:-10px}.scene-orbit-label{position:absolute;top:26px;left:52%;z-index:4;display:flex;align-items:center;gap:8px;letter-spacing:1.5px;font-size:8px;color:#514160;opacity:.55;pointer-events:none}.scene-orbit-label i{width:13px;height:13px;border:1px solid currentColor;border-radius:50%;position:relative}.scene-orbit-label i:after{content:'';position:absolute;inset:4px;border-radius:50%;background:currentColor}
.scene-switch{top:auto;bottom:102px;right:6%;border-color:#fff7;background:#ffffff40;box-shadow:0 4px 18px #37204406;padding:3px;backdrop-filter:blur(10px)}.scene-switch button{transition:background .3s,box-shadow .3s}.scene-switch button:before{box-shadow:inset 0 1px 1px #ffffff60}.scene-switch button[aria-pressed=true]{background:#fff9;box-shadow:0 2px 7px #3e255b14}.scene-hint{left:56%;bottom:118px;transform:none;font-size:9px;letter-spacing:1px}
.spatial-bottom{bottom:24px;padding-top:16px;border-top:1px solid #33204217;align-items:center}.spatial-controls{gap:8px}.spatial-motion{font-size:9px}.spatial-motion i{width:27px;height:27px}.scene-replay{display:flex;gap:7px;align-items:center;min-height:44px;padding:0 7px;font-size:9px;color:inherit}.scene-replay svg{width:17px;height:17px}.scene-replay:hover svg{rotate:-30deg;transition:rotate .25s}.spatial-scroll{font-size:10px;letter-spacing:.4px}.spatial-scroll i{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid #33204220;font-size:14px}
.spatial-hero[data-intro=playing] .scene-switch,.spatial-hero[data-intro=playing] .scene-hint{opacity:var(--intro-actions,1)}
@media(min-width:851px){.spatial-hero.hero{min-height:620px}.spatial-hero.hero:after{background:linear-gradient(90deg,var(--scene-bg),transparent 60%)}.spatial-canvas{left:0;right:0}}
@media(max-width:850px){
 .topbar{padding-top:14px;padding-bottom:14px}.spatial-hero.hero{min-height:740px;background:radial-gradient(ellipse at 55% 57%,#fff8,transparent 56%),var(--scene-bg);border-radius:0 0 28px 28px}
 .spatial-hero.hero:after{background:linear-gradient(0deg,var(--scene-bg),transparent 26%,transparent 80%,var(--scene-bg));opacity:.25}
 .spatial-caption{top:20px;font-size:8px;letter-spacing:1px}.scene-orbit-label{display:none}
 .spatial-copy{top:62px;width:calc(100% - 48px);bottom:0;transform:none}.spatial-copy .eyebrow{font-size:8px;padding:6px 9px;letter-spacing:.9px;margin-bottom:16px}.spatial-hero.hero h1{font-size:clamp(42px,11.5vw,61px);line-height:1.05;letter-spacing:-2.5px;margin-bottom:15px}.spatial-hero.hero p{font-size:12px;line-height:1.8;max-width:300px}
 .spatial-canvas{top:270px;bottom:190px;left:0;right:0;overflow:visible}.spatial-canvas canvas{touch-action:pan-y pinch-zoom}
 .scene-atmosphere{width:290px;height:290px;top:51%;left:50%;right:auto;transform:translate(-50%,-28%);box-shadow:0 0 0 1px #fff3,0 0 0 35px #fff1,0 0 0 70px #fff1}
 .scene-word{bottom:205px;font-size:30vw;left:4%;opacity:.025}
 .scene-switch{bottom:151px;right:24px;top:auto;padding:0}.scene-hint{left:24px;bottom:167px;max-width:43%;font-size:9px;letter-spacing:.6px}.scene-switch button{min-width:40px!important;min-height:40px!important;width:40px;height:40px}.scene-switch button:before{inset:10px}
 .spatial-actions{bottom:85px;gap:8px}.spatial-actions button{min-height:49px;font-size:11px;padding:12px 13px;letter-spacing:0}
 .spatial-bottom{left:24px;right:24px;bottom:18px;padding-top:8px;gap:5px}.spatial-controls{gap:2px}.spatial-motion{font-size:9px;gap:5px}.spatial-motion span{max-width:62px}.scene-replay{padding:0 5px;font-size:9px}.scene-replay span{max-width:60px;text-align:start;line-height:1.3}.scene-replay svg{width:16px}.spatial-scroll{font-size:9px;gap:5px}.spatial-scroll i{width:22px;height:22px;font-size:12px}.spatial-sensor{width:32px}
}
@media(max-width:540px){.topbar{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px}.brand .logo-mark{width:31px;height:31px;border-radius:10px}.brand strong{font-size:19px}.brand span{font-size:8px}.topbar .chip{min-height:36px;font-size:10px;padding:0 11px}.spatial-hero.hero h1:lang(zh),.spatial-hero.hero h1:lang(zh-TW){font-size:51px;line-height:1.12;letter-spacing:-2px}.spatial-bottom{bottom:calc(18px + env(safe-area-inset-bottom))}.spatial-actions{bottom:calc(85px + env(safe-area-inset-bottom))}}
@media(max-width:360px){.spatial-copy{left:20px;width:calc(100% - 40px)}.spatial-caption,.spatial-bottom{left:20px;right:20px}.spatial-hero.hero h1:lang(zh),.spatial-hero.hero h1:lang(zh-TW){font-size:46px}.spatial-hero.hero p{font-size:11px}.scene-hint{left:20px}.scene-switch{right:20px}.spatial-controls{gap:0}.scene-replay span{display:none}.scene-replay{width:33px;justify-content:center}.spatial-canvas{top:275px;bottom:192px}}
.scene-replay:disabled{opacity:.35;cursor:default}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .spatial-copy>*{filter:none!important;transform:none!important;opacity:1!important}html:not([data-motion=on]) .spatial-actions{opacity:1;translate:none}}