:root{--ink:#1e1f20;--paper:#eeeede;--muted:#a1a3a3;--line:rgba(234,234,232,.15);--peach:#d8c7a7;--ease:cubic-bezier(.18,.9,.16,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--ink);color:var(--paper)}
body{font-family:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,.scene-zone:focus-visible{outline:1px solid var(--peach);outline-offset:7px}
.site-shell{background:radial-gradient(ellipse at 24% 24%,#393a3b66,transparent 56%),radial-gradient(ellipse at 80% 54%,#3032336b,transparent 49%),linear-gradient(135deg,#232425,#1b1c1d 57%,#252627);height:100svh;min-height:560px;position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.grain{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.filter-defs{position:absolute;pointer-events:none}
.site-header{position:absolute;z-index:10;top:0;left:0;right:0;height:104px;margin:0 4.2%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px}.brand-name{font-size:17px;font-weight:500;letter-spacing:.15em;line-height:1.35}.brand-logo{display:block;width:43px;height:43px;flex:0 0 auto;fill:var(--paper)}
.replay-button{width:34px;height:34px;padding:7px;color:#b9bcb8;transition:color .25s,transform .5s var(--ease)}.replay-button svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}.replay-button:hover{color:var(--peach);transform:rotate(-35deg)}
.hero{height:100%;position:relative}.atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}.backdrop-drawing{position:absolute;inset:0;width:100%;height:100%;opacity:.8}.ambient-light{position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 38%,#758d6f0e,transparent 42%),radial-gradient(ellipse at 50% 87%,#5d847306,transparent 40%)}
.ambient-horizon{position:absolute;left:9%;right:9%;top:72%;height:1px;opacity:.34;background:linear-gradient(90deg,transparent,#aaacad3b 30%,#aaacad3b 70%,transparent)}
.hero-copy{position:absolute;left:0;right:0;top:58.5%;z-index:4;pointer-events:none;perspective:1000px;text-align:center}
.hero-copy::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:-60px;bottom:-60px;pointer-events:none;background:linear-gradient(transparent,#1d1e1f40 28%,#1d1e1f99 52%,#1d1e1f40 76%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
#hero-title{position:relative;font-size:min(11.5vw,18svh,164px);font-weight:300;line-height:1;margin:0;white-space:nowrap;transform-origin:50% 70%;color:var(--paper)}
.title-line,.title-sheen{display:flex;justify-content:center;align-items:center;gap:.22em;perspective:800px;padding:.1em .1em;margin:-.1em 0;transform-origin:50% 80%}
.char{display:block;position:relative;width:.91em;height:1.07em;transform-origin:50% 100%;backface-visibility:hidden;will-change:transform;flex:0 0 auto}
.char svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 1px 2px #0c100cc9);stroke:none}
.type-detail{display:flex;align-items:center;justify-content:center;gap:24px;margin:25px auto 0;position:relative;color:#cbcdbf}
.english-title{font-family:Georgia,"Times New Roman",serif;font-size:clamp(18px,2.1vw,28px);font-weight:400;letter-spacing:.065em;white-space:nowrap;line-height:1.3;text-shadow:0 2px 8px #10150f}
.detail-rule{width:48px;height:1px;position:relative;background:linear-gradient(90deg,transparent,#d4d6d455)}.detail-rule:last-child{transform:rotate(180deg)}.detail-rule::after{content:"";position:absolute;right:0;top:-1px;width:3px;height:3px;background:#d0d2d080;transform:rotate(45deg)}
.scene-zone{position:absolute;inset:0;z-index:2;touch-action:pan-y;cursor:grab;outline-offset:-30px}
.scene-zone.is-dragging{cursor:grabbing}
.scene-stage{position:absolute;top:-1%;left:0;right:0;margin:auto;width:min(88vw,110svh);height:84%;transform-origin:50% 50%;will-change:transform,opacity}
.scene-zone canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}.scene-zone.is-ready canvas{opacity:1}
.scene-halo{position:absolute;width:70%;height:76%;left:15%;top:12%;border-radius:50%;background:radial-gradient(ellipse,#ffffff0c,transparent 67%);pointer-events:none}
.scene-fallback{position:absolute;inset:0;display:grid;place-items:center;perspective:600px;pointer-events:none}.is-ready .scene-fallback{display:none}.fallback-loop{position:absolute;width:48%;aspect-ratio:1;border-radius:50%;border:70px solid #e4d8ba;transform:rotateY(-35deg) rotateX(24deg) rotateZ(-30deg);box-shadow:inset 15px 20px 18px #f8f7e9,inset -18px -15px 20px #956641,12px 15px 22px #0005;filter:drop-shadow(0 0 20px #deb89020)}.fallback-loop.second{width:39%;border-width:45px;border-color:#a7b3a7;transform:rotateY(55deg) rotateX(25deg) rotateZ(22deg);opacity:.85}
.scene-cursor{position:absolute;left:0;top:0;width:64px;height:64px;z-index:5;pointer-events:none;opacity:0;transition:opacity .25s;display:none;place-items:center;margin:-32px 0 0 -32px}.scene-cursor.visible{opacity:1}.scene-cursor svg{position:absolute;inset:0;fill:none;stroke:#eeeede50;stroke-width:.8;transform:rotate(-90deg)}.scene-cursor .charge-ring{stroke:var(--peach);stroke-width:1.5;stroke-dasharray:182.212;stroke-dashoffset:182.212}.scene-cursor span{font-size:9px;letter-spacing:.12em;color:#efefdf}
.transition-flash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#ffffff14,transparent 60%);pointer-events:none;opacity:0;z-index:3;transition:opacity .6s}.site-shell.leaping .transition-flash{opacity:1}
.hero-footer{position:absolute;bottom:0;left:4.2%;right:4.2%;height:78px;display:flex;justify-content:space-between;align-items:center;z-index:9}.mission-label{font:9px/1.5 Arial,sans-serif;letter-spacing:.2em;color:#999c9b}.motion-button{display:grid;place-items:center;width:32px;height:34px;color:#b8bbb8}.motion-icon{display:flex;gap:4px;align-items:center;height:16px}.motion-icon i{display:block;width:1px;height:10px;background:currentColor;animation:wave 1.2s ease-in-out infinite alternate}.motion-icon i:nth-child(2){height:15px;animation-delay:.4s}.motion-icon i:nth-child(3){height:7px;animation-delay:.8s}@keyframes wave{to{height:4px}}.motion-button[aria-pressed=true] .motion-icon i{animation:none;height:7px}
.js body:not(.intro-started) .site-header,.js body:not(.intro-started) .hero-footer,.js body:not(.intro-started) .scene-stage,.js body:not(.intro-started) .title-line,.js body:not(.intro-started) .type-detail{opacity:0}.intro-playing .scene-zone{pointer-events:none}
@media(max-height:760px) and (min-width:701px){.site-header{height:86px}.hero-footer{height:65px}.type-detail{margin-top:21px}}
@media(max-width:700px){.site-shell{min-height:560px}.site-header{height:84px;margin:0 7%}.brand{gap:10px}.brand-name{font-size:14px;letter-spacing:.12em}.brand-logo{width:35px;height:35px}.replay-button{width:30px;height:30px;padding:7px}.scene-stage{top:10.5%;left:-9%;right:auto;width:118%;height:64%;margin:0}.hero-copy{top:55%;perspective:600px}#hero-title{font-size:18vw}.title-line,.title-sheen{gap:.18em}.type-detail{gap:12px;margin-top:22px}.english-title{font-size:17px;letter-spacing:.025em}.detail-rule{width:22px}.hero-copy::before{left:-10%;right:-10%;top:-40px;bottom:-50px}.hero-footer{height:65px;left:7%;right:7%}.mission-label{font-size:6px;letter-spacing:.13em}.motion-button{width:25px}.scene-cursor{display:none}.fallback-loop{border-width:45px}.fallback-loop.second{border-width:32px}.backdrop-drawing{left:-70%;width:240%;height:100%;opacity:.65}.ambient-horizon{top:73%;left:6%;right:6%}}
@media(max-width:700px) and (max-height:720px){.site-header{height:70px}.scene-stage{top:7%;height:69%}.hero-copy{top:57%}#hero-title{font-size:17.3vw}.type-detail{margin-top:19px}.hero-footer{height:54px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scene-cursor{display:none}.motion-icon i{animation:none}.js .intro-playing .hero-copy{filter:none}}

/* Layered charcoal, soft white light and a contrasted Song title. */
.brand-name{font-size:14px;font-weight:400;letter-spacing:.12em;color:#d8d9d6}
.ambient-light{background:radial-gradient(ellipse at 50% 29%,#ffffff14,transparent 45%),radial-gradient(ellipse at 5% 62%,#c8cbcc0d,transparent 42%),radial-gradient(ellipse at 89% 39%,#e2e4e510,transparent 38%)}
.signal-bloom{position:absolute;inset:0;background:radial-gradient(ellipse at 23% 27%,#ffffff0d,transparent 27%),radial-gradient(ellipse at 77% 62%,#ffffff0e,transparent 29%);opacity:.85;animation:signal-breathe 13s ease-in-out infinite alternate}
.signal-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.signal-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 28%,#1011121c 82%),linear-gradient(#1e1f202b,transparent 22%,transparent 78%,#1e1f207d)}
.backdrop-drawing{opacity:.42}.ambient-horizon{opacity:.24}
.title-line,.title-sheen{gap:.28em}.char{width:.9em}.char svg{filter:drop-shadow(0 1px 3px #0b110bc9)}
.english-title{font-size:clamp(17px,1.7vw,23px);letter-spacing:.095em;color:#d1d2ce}.type-detail{gap:22px;margin-top:26px}.detail-rule{width:40px}
.site-shell.is-paused .signal-bloom{animation-play-state:paused}
@keyframes signal-breathe{from{opacity:.5}to{opacity:1}}
@media(max-width:700px){.brand-name{font-size:12px;letter-spacing:.06em}.title-line,.title-sheen{gap:.22em}.type-detail{gap:12px;margin-top:24px}.english-title{font-size:16px;letter-spacing:.03em}.detail-rule{width:20px}.signal-shade{background:radial-gradient(ellipse at 50% 42%,transparent 25%,#10111214 85%),linear-gradient(#1e1f2040,transparent 24%,transparent 76%,#1e1f207d)}}
@media(prefers-reduced-motion:reduce){.signal-bloom{animation:none}}

/* A stationary title is revealed by a soft white light front. */
.title-sheen{position:absolute;inset:0;opacity:0;color:#fff;pointer-events:none;filter:blur(.45px);mask-image:linear-gradient(90deg,transparent 40%,#000 50%,transparent 60%);mask-size:250% 100%;mask-repeat:no-repeat;mask-position:100% 0}
.title-sheen .char svg{filter:drop-shadow(0 0 7px #ffffff30)}
.intro-playing .title-line{mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-size:250% 100%;mask-repeat:no-repeat}
@media(prefers-reduced-motion:reduce){.title-sheen{display:none}}


/* Quiet onward navigation remains above, and outside, the sculpture input plane. */
.hero-explore{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;min-height:40px;padding:8px 4px;font-size:10px;font-weight:400;letter-spacing:.14em;white-space:nowrap;color:#b8bbb8;transition:color .25s}
.hero-explore svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.hero-explore:hover{color:var(--paper)}
@media(max-width:700px){.hero-explore{font-size:9px;gap:6px;letter-spacing:.08em}}

/* Latest 01 composition, retaining all's shared backdrop and pointer behavior. */
.site-shell .scene-stage{top:8%}
.site-shell .hero-copy{top:85%;perspective:none}
.site-shell .hero-copy::before{content:none}
.site-shell .type-detail{margin-top:0}
.site-shell .hero-heading-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){.site-shell .scene-stage{top:18%}.site-shell .hero-copy{top:84%}}
@media(max-width:700px) and (max-height:720px){.site-shell .scene-stage{top:15.5%}}