@charset "UTF-8";
:root{--ink:#4d294c;--paper:#f3eee6}
.touch-guide{display:none}
.home-hint{position:absolute;left:0;right:0;bottom:25px;margin:0;text-align:center;font-size:13px;letter-spacing:.1em;color:#4d294cb3;pointer-events:none}
@media(max-width:600px){.home-hint{bottom:auto;top:calc(50% + 28.5714vw + 22px);font-size:12px}}
.portfolio-stage{position:absolute;inset:0;isolation:isolate;overflow:hidden}
.world-sound{position:absolute;right:24px;top:24px;z-index:6;border:1px solid #ffffff80;background:#fffaf2de;color:var(--ink);padding:11px 17px;border-radius:30px;font-size:12px;box-shadow:0 3px 18px #3a2e3c15}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #61416a;outline-offset:5px}
.hero{position:relative;height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--paper)}
.home-stage{position:relative;width:min(100vw,175svh);aspect-ratio:7/4;isolation:isolate}
.home-stage>video,.home-still,.home-letters{position:absolute;inset:0;width:100%;height:100%;display:block}
.home-stage>video{object-fit:contain}
.home-letters{pointer-events:none;opacity:0}
.hero.is-ready .home-letters{opacity:1}
.home-letter{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;pointer-events:none;transform:scale(1);transition:transform .25s cubic-bezier(.2,.7,.2,1);-webkit-tap-highlight-color:transparent}
.hero.is-ready .home-letter{pointer-events:auto}
.home-letter img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.home-letter:hover,.home-letter:focus-visible{transform:scale(1.055);z-index:2;outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.intro{position:absolute;left:4%;bottom:4%;max-width:285px}
.intro p{font-size:13px;line-height:1.6;margin:0 0 14px;text-wrap:balance}
.explore{border:1px solid #6b41631a;border-radius:40px;background:#fffdfb;padding:13px 21px;min-width:165px;color:var(--ink);font-size:12px;font-weight:600;display:flex;gap:30px;align-items:center;justify-content:space-between;box-shadow:0 3px 12px #553b5010;transition:transform .25s,opacity .25s}
.explore span{font-size:18px;font-weight:400}.explore:enabled:hover{transform:translateY(-3px)}.explore:disabled{opacity:.45;cursor:default}
.welcome{position:absolute;right:4%;bottom:4%;font-size:clamp(18px,2.2vw,32px);line-height:1.1;letter-spacing:-.045em;font-weight:400;margin:0}.welcome strong{font-weight:800}
@media(max-width:600px){.intro{left:6%;bottom:6%;max-width:195px}.intro p{font-size:11px;max-width:170px}.explore{min-width:145px;padding:12px 17px}.welcome{right:6%;bottom:20%;font-size:21px}}
@media(prefers-reduced-motion:reduce){.home-letter,.explore{transition:none}}
[hidden]{display:none!important}
.world{height:100svh;width:100%;background:#ebd7c5;display:grid;place-items:center;position:relative;overflow:hidden}
.world-stage{position:relative;width:min(100vw,177.7778svh);aspect-ratio:16/9;isolation:isolate}
.world-stage>video,.world-still,.world-items{position:absolute;inset:0;width:100%;height:100%;display:block}
.world-stage>video{object-fit:contain}
.world-items{pointer-events:none;opacity:0}
.world.is-ready .world-items{opacity:1}
.world-object{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;pointer-events:none;transform:scale(1);transition:transform .24s cubic-bezier(.2,.7,.2,1);-webkit-tap-highlight-color:transparent}
.world.is-ready .world-object{pointer-events:auto}
.world-object img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.world-object:hover,.world-object:focus-visible{transform:scale(1.075);z-index:2;outline:none;filter:drop-shadow(0 5px 6px #67496b28)}
.back,.play-retry{position:absolute;z-index:5;display:grid;place-items:center;border:1px solid #ffffff80;background:#fffaf2de;color:var(--ink);border-radius:50%;width:48px;height:48px;font-size:25px;box-shadow:0 3px 18px #3a2e3c15}
.back{top:28px;left:28px;transition:transform .2s}
.back:hover{transform:translateX(-3px)}
.gesture{height:100svh;display:flex;flex-direction:column;background:#f3eee6}
.gesture-toolbar{flex:0 0 66px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid #61416a1a}
.gesture-return{border:1px solid #61416a24;border-radius:30px;background:#fffaf2;color:var(--ink);padding:11px 22px;font-size:14px;transition:transform .2s}
.gesture-return:hover{transform:translateX(-2px)}
.gesture-host{flex:1;min-height:0}.gesture-host iframe{display:block;width:100%;height:100%;border:0;background:#f7f4ee}
.play-retry{left:calc(50% - 30px);top:calc(50% - 30px);width:60px;height:60px;font-size:35px}
@media(max-width:800px){.back{top:20px;left:20px;width:42px;height:42px}.world-object:hover,.world-object:focus-visible{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.world-object,.back{transition:none}}

.portfolio{position:relative;isolation:isolate;height:100svh;min-height:680px;overflow:hidden;background:linear-gradient(125deg,#f2e5d6,#ebd7c5 60%,#e6d0c5);color:#3a2e3c}
.scene{position:absolute;inset:0;z-index:-2;overflow:hidden;mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.12) 22%,#000 43%,#000 85%,transparent)}
.scene video,.scene canvas{width:100%;height:100%;object-fit:cover;object-position:66% center;display:block;opacity:.96}
.scene canvas{position:absolute;inset:0;pointer-events:none}
.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#ebd7c5a6,transparent 22%,transparent 85%,#ebd7c51a);pointer-events:none}
.portfolio h1{position:absolute;left:5.2%;top:29%;margin:0;font-size:clamp(128px,19.5vw,340px);line-height:.8;font-weight:900;letter-spacing:-.085em;display:flex;align-items:flex-end}
.title-dot{width:.055em;height:.055em;border-radius:50%;background:currentColor;margin:0 0 .055em .075em}
.portfolio .intro{left:5.5%;bottom:11%;max-width:300px}.portfolio .intro p{font-size:15px;line-height:1.65;max-width:280px;margin-bottom:25px;color:#564c54}
.portfolio .explore{padding:18px 24px;min-width:180px;font-size:13px;gap:40px;color:#3a2e3c}
.portfolio .welcome{right:5.2%;bottom:10.8%;font-size:clamp(24px,3vw,52px)}
.decorations{position:absolute;inset:0;z-index:-1;pointer-events:none}
.orbit{position:absolute;border:1px solid #61416a61;border-radius:50%}.orbit-large{width:83vw;height:83vw;left:30%;top:47%}.orbit-small{width:68px;height:68px;left:32%;bottom:19%}.orbit-top{width:145px;height:145px;right:-45px;top:23%}
.star{position:absolute;right:6%;top:7%;font-size:35px;color:#665071}
.bottom-line{position:absolute;left:5.5%;right:5.5%;bottom:5%;height:1px;background:#57404b2b}
@media(max-width:800px) and (pointer:fine){.portfolio{min-height:720px}.scene{inset:22% -25% 20% -55%;mask-image:linear-gradient(0deg,transparent,#000 20%,#000 85%,transparent)}.scene video,.scene canvas{object-position:85% center}.portfolio h1{left:7%;top:15%;font-size:clamp(105px,27vw,190px)}.portfolio .intro{left:7%;bottom:9%;width:205px}.portfolio .intro p{font-size:13px;max-width:195px}.portfolio .welcome{right:7%;bottom:24%;font-size:24px}.portfolio .explore{min-width:166px;padding:15px 20px;gap:28px}.orbit-large{width:145vw;height:145vw;left:20%;top:48%}.orbit-small{left:8%;bottom:37%;width:48px;height:48px}.orbit-top{top:5%;width:100px;height:100px}.star{right:8%;top:5%;font-size:25px}}


@media(pointer:coarse){
 .portfolio{position:relative;height:100svh;min-height:0;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none;background:#ebd7c5}
 .portfolio-stage{position:relative;inset:auto;width:min(100vw,177.7778svh);aspect-ratio:16/9;container-type:inline-size;background:linear-gradient(125deg,#f2e5d6,#ebd7c5 60%,#e6d0c5)}
 .portfolio .scene{inset:0;mask-image:linear-gradient(to right,transparent,#000 36%,#000 87%,transparent)}
 .portfolio .scene video,.portfolio .scene canvas{object-position:66% center}
 .portfolio h1{left:5.2%;top:28%;font-size:19.5cqw}
 .portfolio .intro{left:5.5%;bottom:10.5%;width:29%;max-width:none}
 .portfolio .intro p{font-size:clamp(7px,1.55cqw,14px);line-height:1.5;margin-bottom:2cqw}
 .portfolio .explore{min-width:0;padding:1.8cqw 2.5cqw;font-size:clamp(8px,1.5cqw,13px);gap:4cqw}
 .portfolio .explore span{font-size:2.3cqw}
 .portfolio .welcome{right:5.2%;bottom:10.5%;font-size:3.2cqw}
 .portfolio .orbit-large{width:83cqw;height:83cqw;left:30%;top:47%}
 .portfolio .orbit-small{width:7cqw;height:7cqw;left:32%;bottom:19%}
 .portfolio .orbit-top{width:15cqw;height:15cqw;right:-5cqw;top:23%}
 .portfolio .star{top:7%;right:6%;font-size:3.5cqw}
 .portfolio .intro-back{left:20px;top:20px;width:42px;height:42px;font-size:25px}
 .touch-guide{display:block;position:absolute;left:0;right:0;top:calc(50% + min(28.125vw,50svh) + 20px);text-align:center;font-size:12px;opacity:.6;margin:0;pointer-events:none}
}
@media(pointer:coarse) and (orientation:landscape){.touch-guide{top:auto;bottom:8px;font-size:10px}.portfolio .intro-back{left:12px;top:12px;width:32px;height:32px;font-size:20px}}
.portfolio-heading{position:absolute;left:5.2%;top:29%}.portfolio-heading h1{position:static;margin:0}.belly-description{font-size:16px;letter-spacing:.05em;line-height:1.6;margin:22px 0 0;color:#564c54}


.world-tooltip{position:absolute;z-index:8;padding:8px 13px;border-radius:20px;background:#4d294ce8;color:#fffaf4;font-size:clamp(10px,1vw,14px);white-space:nowrap;transform:translate(-50%,-100%);pointer-events:none;box-shadow:0 4px 15px #4d294c22}
@keyframes world-speech-in{from{opacity:0;transform:translate(-50%,-90%) scale(.9)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
@media(pointer:coarse){.portfolio-heading{left:5.2%;top:28%}.portfolio-heading h1{position:static}.belly-description{font-size:clamp(8px,1.7cqw,15px);margin:2cqw 0 0}.world-tooltip{padding:6px 9px}.world-object{touch-action:manipulation}}
@media(max-width:800px) and (pointer:fine){.portfolio-heading{left:7%;top:15%}.belly-description{font-size:13px;margin-top:18px}}
@media(prefers-reduced-motion:reduce){}
@media(pointer:coarse){.portfolio-heading h1{font-size:18cqw}.belly-description{margin-top:1.5cqw}}

/* A small note from Belly, shown only after the room animation settles. */
.world-message{position:absolute;z-index:4;left:60%;top:29%;transform:translate(-50%,-100%);display:flex;align-items:center;gap:11px;padding:14px 22px 16px 14px;margin:0;border-radius:22px 22px 22px 7px;background:linear-gradient(120deg,#fffdf8fa,#faf0fff5);border:1px solid #ffffffdd;color:#63486e;box-shadow:0 10px 30px #6c4b6e18,0 2px 4px #6c4b6e0a,inset 0 0 0 3px #ffffff55;white-space:nowrap;pointer-events:none;animation:world-speech-in .45s cubic-bezier(.2,.8,.2,1) both;transition:opacity .3s,translate .3s}
.world-message:after{content:'';position:absolute;left:22px;bottom:-8px;width:16px;height:16px;border-radius:0 0 4px 0;background:#fffaf8;transform:skewY(-28deg);z-index:-1;box-shadow:0 3px 3px #6c4b6e05}
.world-message-icon{width:34px;height:34px;border-radius:50%;background:#eadcf080;display:grid;place-items:center;color:#b18bbc;flex:none}.world-message-icon svg{width:23px;height:23px}.world-message-copy{display:flex;flex-direction:column;gap:5px}.world-message-copy small{font-size:7px;letter-spacing:2px;color:#b49abd}.world-message-copy>span{font-size:clamp(11px,1.1vw,16px);letter-spacing:.06em}.world-message-timer{position:absolute;bottom:4px;left:20px;right:20px;height:2px;border-radius:3px;background:linear-gradient(90deg,#d9c6e5,#b497c4);transform-origin:left;animation:world-note-timer 5s linear both;opacity:.55}.world-message.is-leaving{opacity:0;translate:0 -5px}
@keyframes world-note-timer{to{transform:scaleX(0)}}
@media(pointer:coarse){.world-message{gap:7px;padding:9px 13px 11px 9px;border-radius:16px 16px 16px 5px;left:61%;top:27%}.world-message-icon{width:25px;height:25px}.world-message-icon svg{width:18px;height:18px}.world-message-copy{gap:3px}.world-message-copy small{font-size:5px;letter-spacing:1.4px}.world-message-copy>span{font-size:clamp(9px,2.4vw,13px);letter-spacing:0}.world-message:after{width:11px;height:11px;left:15px;bottom:-5px}.world-message-timer{left:13px;right:13px;height:1px}}
@media(prefers-reduced-motion:reduce){.world-message,.world-message-timer{animation:none;transition:none}.world-message-timer{display:none}}
.xiamen-entry-hint{position:absolute;z-index:7;right:1.1%;top:49%;display:flex;align-items:center;gap:6px;border:1px solid #fff9;border-radius:30px;padding:7px 12px;background:#fff8edec;color:#755574;box-shadow:0 3px 14px #7256771a;font-size:clamp(10px,.85vw,13px);cursor:pointer;transition:background .2s,translate .2s}.xiamen-entry-hint:hover{background:#fff;translate:0 -2px}.xiamen-entry-hint:before{content:'';position:absolute;width:1px;height:12px;bottom:100%;right:38%;background:#fff9}.xiamen-entry-hint>span:first-child{color:#ad8fb6;font-size:15px}
.xiamen-page{height:100svh;min-height:0;display:flex;flex-direction:column;background:#f7f3e9}.xiamen-toolbar{flex:none;min-height:58px;padding:10px clamp(12px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #796c5920;color:#69715c;background:#fffaf3}.xiamen-return{border:1px solid #81705e25;border-radius:30px;background:#fff;padding:10px 16px;color:#66506b;cursor:pointer;font:inherit;font-size:13px}.xiamen-toolbar>span{font-size:12px;letter-spacing:.08em}.xiamen-toolbar i{font-style:normal;opacity:.4;margin:0 8px}.xiamen-host{flex:1;min-height:0}.xiamen-host iframe{display:block;border:0;width:100%;height:100%;background:#faf6ed}
@media(pointer:coarse){.xiamen-entry-hint{padding:5px 7px;gap:3px;font-size:10px;right:.8%}.xiamen-entry-hint>span:first-child{font-size:11px}.xiamen-toolbar{min-height:52px;padding:8px 10px}.xiamen-return{padding:8px 11px;font-size:11px}.xiamen-toolbar>span{font-size:10px;letter-spacing:0}.xiamen-toolbar i{margin:0 3px}}

.home-stage>.mobile-intro{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.xiamen-toolbar{position:absolute;left:0;top:0;right:auto;min-height:0;padding:0;border:0;background:none;z-index:40}.xiamen-toolbar>span{display:none}.xiamen-return{margin:18px;background:#fff8e9df;backdrop-filter:blur(15px);font-size:12px;border-color:#fff9}.xiamen-host{position:absolute;inset:0}.xiamen-page{position:relative;background:#fff6e7}.xiamen-page.is-in-trip>.xiamen-toolbar{display:none}