.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.pv{margin:0;background:#f6efe6;color:#4a3b2f;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}
body.pv>.top{display:none}
.home-stage{background:#f6efe6}
.scene{position:relative;isolation:isolate;overflow:hidden}
.scene-bg{display:block;margin:0}
.scene-bg img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%)}
.scene-ui{position:absolute;left:0;right:0;top:0;height:28%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px clamp(14px,4vw,40px) 0;pointer-events:none;z-index:3;overflow:visible}
.scene-ui a,.scene-ui .chips{pointer-events:auto}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin:0 0 6px;padding:5px 9px;border-radius:999px;background:rgba(255,252,248,.55);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 22px rgba(100,80,110,.08)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;text-decoration:none;color:#5a4130;font-size:14.5px;letter-spacing:.03em}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.chip:hover,.chip:focus-visible{background:rgba(255,255,255,.88)}
.chip-g{--c:#d98978}.chip-k{--c:#d4a45a}.chip-t{--c:#6f9db8}.chip-m{--c:#9580b8}.chip-l{--c:#6f9e78}
.title-block{text-align:center;display:flex;flex-direction:column;align-items:center;margin-top:0;gap:0}
.title-block h1,.gate-card h1{margin:0;line-height:0}
.t-zh{display:block;width:min(560px,78vw);height:auto;overflow:visible;filter:drop-shadow(0 6px 16px rgba(100,80,110,.12))}
.ch{transform-box:fill-box;transform-origin:50% 100%;animation:hop 6s ease-in-out infinite}
.ch1{animation-delay:-.9s}.ch2{animation-delay:-1.8s}.ch3{animation-delay:-2.7s}.ch4{animation-delay:-3.6s}.ch5{animation-delay:-4.5s}.ch6{animation-delay:-5.4s}
@keyframes hop{0%,100%{transform:translateY(0)}14%{transform:translateY(-4px)}28%{transform:translateY(0)}}
.d-star{transform-box:fill-box;transform-origin:center;animation:spin 8s ease-in-out infinite}
@keyframes spin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(1.08)}}
.en{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 0}
.t-en{display:block;width:min(240px,48vw);height:auto}
.dash{width:7px;height:7px;border-radius:50%;background:#e0b0a2;opacity:.85}
.dash:last-child{background:#b0a0d0}
.whisper{margin:6px 0 0;color:#7a6570;font-size:13px;letter-spacing:.22em;padding-left:.22em}
.addrs{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0;padding:3px 10px;border-radius:999px;background:rgba(255,252,248,.55);border:1px solid rgba(255,255,255,.65);font-size:11.5px;letter-spacing:.05em;color:#8a7468}
.addrs a{color:#7d6457;text-decoration:none}
.addrs a:hover{color:#4f3828;text-decoration:underline;text-underline-offset:3px}
/* invisible click hotspots only — NO visible house-name pills */
.hot{position:absolute;z-index:4;border-radius:0;opacity:0;background:transparent}
.hot:hover,.hot:focus-visible{opacity:0;background:transparent;outline:none}
.hot:active{opacity:0}
.hot-g{left:8.2%;top:27.5%;width:22.0%;height:38.0%;clip-path:polygon(36.0% 1.0%, 46.0% 0.0%, 56.0% 0.0%, 66.0% 2.0%, 76.0% 5.0%, 85.0% 10.0%, 92.0% 17.0%, 96.0% 26.0%, 99.0% 36.0%, 99.0% 48.0%, 97.0% 58.0%, 94.0% 66.0%, 90.0% 74.0%, 84.0% 81.0%, 76.0% 87.0%, 66.0% 92.0%, 56.0% 96.0%, 46.0% 98.0%, 36.0% 99.0%, 26.0% 97.0%, 18.0% 93.0%, 12.0% 87.0%, 7.0% 79.0%, 3.0% 69.0%, 1.0% 58.0%, 1.0% 46.0%, 2.0% 34.0%, 5.0% 24.0%, 10.0% 15.0%, 16.0% 9.0%, 24.0% 4.0%, 30.0% 2.0%)}
.hot-k{left:29.2%;top:34.5%;width:18.2%;height:36.5%;clip-path:polygon(6.0% 30.0%, 10.0% 18.0%, 16.0% 10.0%, 22.0% 12.0%, 28.0% 6.0%, 36.0% 1.0%, 46.0% 0.0%, 54.0% 2.0%, 60.0% 8.0%, 64.0% 14.0%, 68.0% 10.0%, 74.0% 3.0%, 82.0% 0.0%, 90.0% 2.0%, 96.0% 10.0%, 99.0% 22.0%, 99.0% 40.0%, 98.0% 56.0%, 95.0% 70.0%, 90.0% 82.0%, 82.0% 92.0%, 70.0% 98.0%, 54.0% 99.0%, 38.0% 98.0%, 24.0% 94.0%, 14.0% 88.0%, 7.0% 78.0%, 3.0% 64.0%, 2.0% 48.0%, 3.0% 34.0%, 5.0% 28.0%)}
.hot-t{left:44.2%;top:32.0%;width:15.4%;height:35.8%;clip-path:polygon(40.0% 0.0%, 50.0% 0.0%, 58.0% 2.0%, 66.0% 7.0%, 74.0% 14.0%, 82.0% 24.0%, 88.0% 34.0%, 93.0% 44.0%, 96.0% 54.0%, 98.0% 64.0%, 96.0% 76.0%, 90.0% 88.0%, 80.0% 95.0%, 66.0% 99.0%, 50.0% 99.0%, 34.0% 97.0%, 22.0% 92.0%, 12.0% 84.0%, 6.0% 72.0%, 3.0% 58.0%, 3.0% 44.0%, 6.0% 32.0%, 12.0% 22.0%, 20.0% 14.0%, 28.0% 8.0%, 34.0% 3.0%)}
.hot-m{left:56.6%;top:32.5%;width:20.2%;height:36.0%;clip-path:polygon(10.0% 18.0%, 20.0% 6.0%, 32.0% 1.0%, 46.0% 0.0%, 60.0% 0.0%, 72.0% 3.0%, 82.0% 9.0%, 90.0% 16.0%, 96.0% 26.0%, 99.0% 38.0%, 99.0% 52.0%, 97.0% 66.0%, 93.0% 78.0%, 86.0% 88.0%, 76.0% 95.0%, 62.0% 99.0%, 46.0% 99.0%, 30.0% 96.0%, 18.0% 90.0%, 10.0% 80.0%, 5.0% 68.0%, 2.0% 52.0%, 2.0% 36.0%, 4.0% 24.0%, 7.0% 18.0%)}
.hot-l{left:75.0%;top:38.0%;width:19.4%;height:37.5%;clip-path:polygon(10.0% 22.0%, 18.0% 8.0%, 28.0% 2.0%, 38.0% 0.0%, 50.0% 0.0%, 60.0% 2.0%, 70.0% 6.0%, 80.0% 12.0%, 88.0% 20.0%, 94.0% 30.0%, 98.0% 42.0%, 99.0% 56.0%, 97.0% 70.0%, 92.0% 82.0%, 84.0% 91.0%, 72.0% 97.0%, 56.0% 99.0%, 40.0% 98.0%, 26.0% 94.0%, 14.0% 86.0%, 6.0% 74.0%, 2.0% 60.0%, 1.0% 46.0%, 3.0% 32.0%, 6.0% 24.0%)}

/* t892c: precise silhouette clips; enlarge treehouse; overflow visible */
.house-sprites{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;container-type:size}
.hs{position:absolute;overflow:visible;pointer-events:none;transform-origin:50% 100%;
  background-repeat:no-repeat;will-change:transform;
  background-image:url(hero-fullbleed.webp?v=20261109t894);
  background-size:100cqw 100cqh;
  filter:drop-shadow(0 0 0 transparent);transition:filter .2s ease}
.hs-g{left:8.2%;top:27.5%;width:22.0%;height:38.0%;clip-path:polygon(36.0% 1.0%, 46.0% 0.0%, 56.0% 0.0%, 66.0% 2.0%, 76.0% 5.0%, 85.0% 10.0%, 92.0% 17.0%, 96.0% 26.0%, 99.0% 36.0%, 99.0% 48.0%, 97.0% 58.0%, 94.0% 66.0%, 90.0% 74.0%, 84.0% 81.0%, 76.0% 87.0%, 66.0% 92.0%, 56.0% 96.0%, 46.0% 98.0%, 36.0% 99.0%, 26.0% 97.0%, 18.0% 93.0%, 12.0% 87.0%, 7.0% 79.0%, 3.0% 69.0%, 1.0% 58.0%, 1.0% 46.0%, 2.0% 34.0%, 5.0% 24.0%, 10.0% 15.0%, 16.0% 9.0%, 24.0% 4.0%, 30.0% 2.0%);background-position:-8.2cqw -27.5cqh}
.hs-k{left:29.2%;top:34.5%;width:18.2%;height:36.5%;clip-path:polygon(6.0% 30.0%, 10.0% 18.0%, 16.0% 10.0%, 22.0% 12.0%, 28.0% 6.0%, 36.0% 1.0%, 46.0% 0.0%, 54.0% 2.0%, 60.0% 8.0%, 64.0% 14.0%, 68.0% 10.0%, 74.0% 3.0%, 82.0% 0.0%, 90.0% 2.0%, 96.0% 10.0%, 99.0% 22.0%, 99.0% 40.0%, 98.0% 56.0%, 95.0% 70.0%, 90.0% 82.0%, 82.0% 92.0%, 70.0% 98.0%, 54.0% 99.0%, 38.0% 98.0%, 24.0% 94.0%, 14.0% 88.0%, 7.0% 78.0%, 3.0% 64.0%, 2.0% 48.0%, 3.0% 34.0%, 5.0% 28.0%);background-position:-29.2cqw -34.5cqh}
.hs-t{left:44.2%;top:32.0%;width:15.4%;height:35.8%;clip-path:polygon(40.0% 0.0%, 50.0% 0.0%, 58.0% 2.0%, 66.0% 7.0%, 74.0% 14.0%, 82.0% 24.0%, 88.0% 34.0%, 93.0% 44.0%, 96.0% 54.0%, 98.0% 64.0%, 96.0% 76.0%, 90.0% 88.0%, 80.0% 95.0%, 66.0% 99.0%, 50.0% 99.0%, 34.0% 97.0%, 22.0% 92.0%, 12.0% 84.0%, 6.0% 72.0%, 3.0% 58.0%, 3.0% 44.0%, 6.0% 32.0%, 12.0% 22.0%, 20.0% 14.0%, 28.0% 8.0%, 34.0% 3.0%);background-position:-44.2cqw -32.0cqh}
.hs-m{left:56.6%;top:32.5%;width:20.2%;height:36.0%;clip-path:polygon(10.0% 18.0%, 20.0% 6.0%, 32.0% 1.0%, 46.0% 0.0%, 60.0% 0.0%, 72.0% 3.0%, 82.0% 9.0%, 90.0% 16.0%, 96.0% 26.0%, 99.0% 38.0%, 99.0% 52.0%, 97.0% 66.0%, 93.0% 78.0%, 86.0% 88.0%, 76.0% 95.0%, 62.0% 99.0%, 46.0% 99.0%, 30.0% 96.0%, 18.0% 90.0%, 10.0% 80.0%, 5.0% 68.0%, 2.0% 52.0%, 2.0% 36.0%, 4.0% 24.0%, 7.0% 18.0%);background-position:-56.6cqw -32.5cqh}
.hs-l{left:75.0%;top:38.0%;width:19.4%;height:37.5%;clip-path:polygon(10.0% 22.0%, 18.0% 8.0%, 28.0% 2.0%, 38.0% 0.0%, 50.0% 0.0%, 60.0% 2.0%, 70.0% 6.0%, 80.0% 12.0%, 88.0% 20.0%, 94.0% 30.0%, 98.0% 42.0%, 99.0% 56.0%, 97.0% 70.0%, 92.0% 82.0%, 84.0% 91.0%, 72.0% 97.0%, 56.0% 99.0%, 40.0% 98.0%, 26.0% 94.0%, 14.0% 86.0%, 6.0% 74.0%, 2.0% 60.0%, 1.0% 46.0%, 3.0% 32.0%, 6.0% 24.0%);background-position:-75.0cqw -38.0cqh}
.scene:has(.hot-g:hover) .hs-g,.scene:has(.hot-g:focus-visible) .hs-g,.hs-g.hopping,
.scene:has(.hot-k:hover) .hs-k,.scene:has(.hot-k:focus-visible) .hs-k,.hs-k.hopping,
.scene:has(.hot-t:hover) .hs-t,.scene:has(.hot-t:focus-visible) .hs-t,.hs-t.hopping,
.scene:has(.hot-m:hover) .hs-m,.scene:has(.hot-m:focus-visible) .hs-m,.hs-m.hopping,
.scene:has(.hot-l:hover) .hs-l,.scene:has(.hot-l:focus-visible) .hs-l,.hs-l.hopping{
  animation:houseHop .48s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 10px 14px rgba(90,70,60,.22))}
@keyframes houseHop{
  0%,100%{transform:translateY(0) scale(1)}
  32%{transform:translateY(-28px) scale(1.045)}
  58%{transform:translateY(-8px) scale(1.02)}
}
.cards{list-style:none;margin:-72px auto 0;padding:0 clamp(12px,3vw,32px) 8px;max-width:1240px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;z-index:5}
.card{display:flex;flex-direction:column;align-items:center;text-decoration:none;background:rgba(255,252,247,.94);border:1px solid #efe3d3;border-radius:18px;padding:12px 8px 14px;box-shadow:0 6px 18px rgba(120,90,60,.08)}
.card:hover{transform:translateY(-3px)}
.card img{width:min(127px,100%);height:auto}
.card-name{font-size:16px;font-weight:600;margin-top:4px}
.card-note{font-size:12px;color:#9a8574}
.foot{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:6px;max-width:1240px;margin:20px auto 0;padding:16px clamp(14px,4vw,40px) 24px;font-size:14px;color:#7c6857;border-top:1px solid #eadfce}
.foot p{margin:0}.pv-note{font-size:12px;color:#a08c7c}.pv-note a{color:#8a6a55}.pv-note .sep{margin:0 .15em;opacity:.7}
.music{position:fixed;right:clamp(10px,2vw,18px);bottom:clamp(10px,2vw,18px);z-index:20;width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(230,214,194,.7);background:rgba(255,250,243,.82);color:#8a6a55;cursor:pointer;box-shadow:0 3px 12px rgba(120,90,60,.12);backdrop-filter:blur(6px);font:inherit}
.music.on{background:rgba(200,160,180,.9);color:#fff;border-color:transparent}
.music:focus-visible{outline:3px solid #5a4130;outline-offset:2px}
.music-icon{display:flex;width:16px;height:16px}
.music-icon svg{width:16px;height:16px;fill:currentColor;display:none}
.music .i-play{display:block;transform:translateX(1px)}
.music.on .i-play{display:none}.music.on .i-pause{display:block}
/* login */
body.login{min-height:100vh}
/* during open: sky behind clouds, scene covers viewport — no cream letterbox */
body.login.locked,body.login.entering{background:#eaf1f8}
body.login.locked .home-stage,body.login.entering .home-stage{background:#eaf1f8}
body.login.locked .scene,body.login.entering .scene{min-height:100%;height:100%}
body.login.locked .scene-bg,body.login.entering .scene-bg{display:block;height:100%}
body.login.locked .scene-bg img,body.login.entering .scene-bg img{width:100%;height:100%;min-height:100vh;min-height:100dvh;object-fit:cover;object-position:center 38%}
body.login.entered,body.login.entered .home-stage{background:#f6efe6}

body.login.locked{overflow:hidden;height:100vh;height:100dvh}
body.login.locked .home-stage{position:fixed;inset:0;overflow:hidden;transform:scale(1.06);transform-origin:50% 40%;filter:blur(1.2px);pointer-events:none}
body.login.locked .cards,body.login.locked .foot,body.login.locked .music,body.login.locked .chips,body.login.locked .title-block,body.login.locked .hot,body.login.locked .house-sprites{opacity:0;visibility:hidden}
.gate{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:28px 16px;background:rgba(200,210,230,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .25s ease,visibility .25s}
.gate.out{opacity:0;visibility:hidden;pointer-events:none}
.gate-card{width:min(500px,100%);text-align:center;padding:34px clamp(20px,5vw,42px) 26px;border-radius:28px;background:rgba(255,252,248,.72);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(14px);box-shadow:0 22px 50px rgba(90,100,130,.12);display:flex;flex-direction:column;align-items:center}
.gate-moon svg{width:52px;height:52px;margin:0 auto 10px;display:block}
.gate-card .t-zh{width:min(360px,74vw)}.gate-card .t-en{width:min(210px,52vw)}
.gate-hint{margin:14px 0 16px;color:#7a6570;font-size:14px;letter-spacing:.18em}
.pw{display:flex;align-items:center;gap:8px;width:100%;padding:6px 6px 6px 16px;border-radius:999px;background:#fffdf9;border:1px solid #ead9c8}
.pw:focus-within{border-color:#b8c8dc;box-shadow:0 0 0 4px rgba(180,200,220,.25)}
.key{width:20px;height:20px;color:#9aa8bc;flex:none}
.pw input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:#4a3b2f;padding:8px 0}
.pw input::placeholder{color:#b8a594}
.pw button{flex:none;border:0;cursor:pointer;font:inherit;font-size:15px;color:#fff;padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,#a8b8d0,#8aa0c0)}
.gate-card .addrs{margin-top:8px}.gate-card .pv-note{margin:12px 0 0;font-size:11.5px;color:#a8958a}
body.login.entering .home-stage{animation:stageZoom 3.2s cubic-bezier(.22,.65,.2,1) both;filter:none;pointer-events:none}
body.login.entering .chips,body.login.entering .title-block{animation:floatIn 1.1s ease 1.4s both}
body.login.entering .cards,body.login.entering .foot{animation:floatIn 1s ease 2s both}
@keyframes stageZoom{0%{transform:scale(1.05);transform-origin:50% 42%;filter:blur(1px)}35%{filter:none}100%{transform:scale(1);transform-origin:50% 42%;filter:none}}
@keyframes floatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.login.entered .home-stage{position:static;transform:none;filter:none;overflow:visible;pointer-events:auto}
body.login.entered{overflow:auto;height:auto}
body.login.entered .chips,body.login.entered .title-block,body.login.entered .cards,body.login.entered .foot,body.login.entered .hot{opacity:1;visibility:visible}
/* t866: storybook wooden double doors parting — CSP-safe, NEVER class "go" */
.puff-veil{position:fixed;inset:0;z-index:50;display:none;pointer-events:none;background:transparent;overflow:hidden}
.puff-veil.puffing{display:block;pointer-events:auto;cursor:pointer}
.story-doors{position:absolute;inset:0;z-index:1;pointer-events:none}
.sd{position:absolute;top:0;bottom:0;width:52%;overflow:hidden}
.sd-l{left:-1%;transform-origin:left center}
.sd-r{right:-1%;transform-origin:right center}
.sd-panel{position:absolute;inset:0;border-radius:18px 4px 4px 18px;
  background:
    repeating-linear-gradient(90deg,rgba(140,110,90,.07) 0 2px,transparent 2px 11px),
    linear-gradient(180deg,#f3e4d2 0%,#e8d4be 42%,#dcc4a8 100%);
  box-shadow:inset -10px 0 24px rgba(120,90,70,.12), inset 0 0 0 3px rgba(255,248,240,.55), 0 10px 36px rgba(90,70,60,.18)}
.sd-r .sd-panel{border-radius:4px 18px 18px 4px;
  box-shadow:inset 10px 0 24px rgba(120,90,70,.12), inset 0 0 0 3px rgba(255,248,240,.55), 0 10px 36px rgba(90,70,60,.18)}
/* oval window + cross + star — all CSS, no inline */
.sd-win{position:absolute;top:11%;left:50%;width:38%;height:22%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle at 45% 40%,#cfe3f7 0 55%,#9bb8d8 100%);
  box-shadow:inset 0 0 0 5px rgba(255,250,245,.9), inset 0 0 0 8px rgba(180,150,120,.35), 0 4px 12px rgba(100,80,60,.15)}
.sd-win::before,.sd-win::after{content:"";position:absolute;background:rgba(255,250,245,.92)}
.sd-win::before{left:50%;top:12%;bottom:12%;width:3px;transform:translateX(-50%);border-radius:2px}
.sd-win::after{top:50%;left:14%;right:14%;height:3px;transform:translateY(-50%);border-radius:2px}
.sd-knob{position:absolute;top:48%;width:22px;height:34px;border-radius:12px;
  background:radial-gradient(circle at 35% 30%,#ffe29a,#e0b14a 60%,#c4922e);
  box-shadow:0 3px 8px rgba(120,80,40,.28), inset 0 1px 0 rgba(255,255,255,.55)}
.sd-l .sd-knob{right:14%}
.sd-r .sd-knob{left:14%}
/* fluffy cloud motif on door (organic blob, not a bare circle) */
.sd-fluff{position:absolute;left:50%;bottom:18%;width:46%;height:14%;transform:translateX(-50%);
  background:
    radial-gradient(ellipse 40% 70% at 22% 55%,#fff 0 60%,transparent 61%),
    radial-gradient(ellipse 45% 75% at 50% 40%,#fffef9 0 62%,transparent 63%),
    radial-gradient(ellipse 40% 70% at 78% 58%,#fff 0 60%,transparent 61%),
    radial-gradient(ellipse 70% 55% at 50% 70%,#f7fbff 0 58%,transparent 59%);
  opacity:.92;filter:drop-shadow(0 3px 6px rgba(140,120,100,.12))}
.puff-veil.puffing .sd-l{animation:doorOpenL 1.85s cubic-bezier(.45,.05,.25,1) .08s both}
.puff-veil.puffing .sd-r{animation:doorOpenR 1.85s cubic-bezier(.45,.05,.25,1) .08s both}
@keyframes doorOpenL{
  0%{transform:translateX(0) rotateY(0);opacity:1}
  55%{opacity:1}
  100%{transform:translateX(-102%) rotateY(-8deg);opacity:0}
}
@keyframes doorOpenR{
  0%{transform:translateX(0) rotateY(0);opacity:1}
  55%{opacity:1}
  100%{transform:translateX(102%) rotateY(8deg);opacity:0}
}

/* t876: fluffy cloud peel stacked ON doors — irregular soft masses (not circles/panels) */
.cloud-peel{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.cl{position:absolute;display:block;pointer-events:none;border-radius:0;
  filter:drop-shadow(0 10px 22px rgba(120,130,150,.14));
  will-change:transform,opacity}
/* each cloud = overlapping wide ellipses → lumpy fluff, not dots */
.cl1{left:-14%;top:-6%;width:58%;height:52%;opacity:.96;
  background:
    radial-gradient(ellipse 58% 48% at 22% 62%,rgba(255,255,255,.97) 0 52%,transparent 68%),
    radial-gradient(ellipse 62% 55% at 48% 40%,rgba(255,252,248,.98) 0 55%,transparent 72%),
    radial-gradient(ellipse 50% 46% at 78% 58%,rgba(248,252,255,.94) 0 50%,transparent 66%),
    radial-gradient(ellipse 80% 42% at 50% 78%,rgba(255,255,255,.9) 0 48%,transparent 64%),
    radial-gradient(ellipse 40% 38% at 12% 40%,rgba(245,250,255,.82) 0 45%,transparent 62%)}
.cl2{right:-16%;top:-8%;width:62%;height:56%;opacity:.93;
  background:
    radial-gradient(ellipse 55% 50% at 28% 48%,rgba(255,255,255,.96) 0 54%,transparent 70%),
    radial-gradient(ellipse 68% 58% at 62% 34%,rgba(255,250,245,.97) 0 56%,transparent 74%),
    radial-gradient(ellipse 48% 44% at 88% 60%,rgba(245,250,255,.9) 0 48%,transparent 64%),
    radial-gradient(ellipse 82% 40% at 52% 80%,rgba(255,255,255,.88) 0 46%,transparent 62%),
    radial-gradient(ellipse 36% 36% at 40% 62%,rgba(250,252,255,.8) 0 42%,transparent 58%)}
.cl3{left:8%;top:22%;width:48%;height:40%;opacity:.8;
  background:
    radial-gradient(ellipse 60% 52% at 30% 48%,rgba(255,255,255,.92) 0 52%,transparent 68%),
    radial-gradient(ellipse 55% 48% at 68% 42%,rgba(250,252,255,.88) 0 50%,transparent 66%),
    radial-gradient(ellipse 75% 40% at 50% 72%,rgba(255,255,255,.78) 0 46%,transparent 62%)}
.cl4{right:6%;top:26%;width:52%;height:42%;opacity:.76;
  background:
    radial-gradient(ellipse 58% 50% at 34% 46%,rgba(255,252,250,.9) 0 52%,transparent 68%),
    radial-gradient(ellipse 62% 48% at 72% 40%,rgba(248,250,255,.86) 0 50%,transparent 66%),
    radial-gradient(ellipse 78% 38% at 50% 76%,rgba(255,255,255,.75) 0 44%,transparent 60%)}
.cl5{left:-12%;bottom:-4%;width:56%;height:48%;opacity:.9;
  background:
    radial-gradient(ellipse 60% 50% at 26% 50%,rgba(255,255,255,.95) 0 54%,transparent 70%),
    radial-gradient(ellipse 55% 48% at 58% 36%,rgba(255,250,248,.92) 0 52%,transparent 68%),
    radial-gradient(ellipse 48% 44% at 84% 58%,rgba(245,248,255,.86) 0 48%,transparent 64%),
    radial-gradient(ellipse 80% 40% at 48% 78%,rgba(255,255,255,.84) 0 46%,transparent 62%)}
.cl6{right:-14%;bottom:-6%;width:60%;height:50%;opacity:.88;
  background:
    radial-gradient(ellipse 58% 52% at 30% 44%,rgba(255,255,255,.94) 0 54%,transparent 70%),
    radial-gradient(ellipse 64% 55% at 66% 52%,rgba(250,252,255,.92) 0 56%,transparent 72%),
    radial-gradient(ellipse 46% 42% at 88% 38%,rgba(255,252,248,.85) 0 48%,transparent 64%),
    radial-gradient(ellipse 82% 38% at 50% 80%,rgba(255,255,255,.82) 0 44%,transparent 60%)}
.cl7{left:26%;top:2%;width:42%;height:34%;opacity:.74;
  background:
    radial-gradient(ellipse 70% 55% at 38% 52%,rgba(255,255,255,.88) 0 52%,transparent 68%),
    radial-gradient(ellipse 58% 48% at 72% 40%,rgba(248,250,255,.82) 0 48%,transparent 64%),
    radial-gradient(ellipse 75% 36% at 50% 78%,rgba(255,255,255,.7) 0 42%,transparent 58%)}
.cl8{left:40%;bottom:10%;width:44%;height:36%;opacity:.7;
  background:
    radial-gradient(ellipse 65% 52% at 32% 48%,rgba(255,252,250,.86) 0 52%,transparent 68%),
    radial-gradient(ellipse 60% 48% at 70% 55%,rgba(245,250,255,.8) 0 50%,transparent 66%),
    radial-gradient(ellipse 78% 36% at 50% 78%,rgba(255,255,255,.68) 0 42%,transparent 58%)}
.puff-veil.puffing .cl1{animation:cloudPeelL 2.15s cubic-bezier(.4,.05,.25,1) .32s both}
.puff-veil.puffing .cl2{animation:cloudPeelR 2.15s cubic-bezier(.4,.05,.25,1) .38s both}
.puff-veil.puffing .cl3{animation:cloudPeelL 2.05s cubic-bezier(.4,.05,.25,1) .52s both}
.puff-veil.puffing .cl4{animation:cloudPeelR 2.05s cubic-bezier(.4,.05,.25,1) .58s both}
.puff-veil.puffing .cl5{animation:cloudPeelL 2.2s cubic-bezier(.4,.05,.25,1) .48s both}
.puff-veil.puffing .cl6{animation:cloudPeelR 2.2s cubic-bezier(.4,.05,.25,1) .54s both}
.puff-veil.puffing .cl7{animation:cloudPeelUp 2s cubic-bezier(.4,.05,.25,1) .42s both}
.puff-veil.puffing .cl8{animation:cloudPeelDown 2s cubic-bezier(.4,.05,.25,1) .62s both}
@keyframes cloudPeelL{
  0%{transform:translate(0,0) scale(1);opacity:1}
  45%{opacity:.8}
  100%{transform:translate(-58%,-10%) scale(1.14);opacity:0}
}
@keyframes cloudPeelR{
  0%{transform:translate(0,0) scale(1);opacity:1}
  45%{opacity:.8}
  100%{transform:translate(58%,-8%) scale(1.12);opacity:0}
}
@keyframes cloudPeelUp{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(-8%,-72%) scale(1.16);opacity:0}
}
@keyframes cloudPeelDown{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(10%,58%) scale(1.1);opacity:0}
}
.puff-skip{position:absolute;left:0;right:0;bottom:22px;margin:0;text-align:center;z-index:3;font-size:12.5px;letter-spacing:.2em;color:rgba(100,85,75,.8);animation:skipfade 2s linear both;text-shadow:0 1px 0 rgba(255,255,255,.7)}
@keyframes skipfade{0%,12%{opacity:0}28%,68%{opacity:1}100%{opacity:0}}
@media (max-width:820px){
 .scene-ui{height:26%}
 .title-block{margin-top:0}
 .chips{border-radius:22px;gap:4px;max-width:380px;margin-bottom:4px}
 .chip{padding:4px 9px;font-size:12.5px}
 .t-zh{width:min(300px,82vw)}.t-en{width:min(170px,46vw)}
 .whisper{font-size:11.5px;letter-spacing:.14em;margin-top:4px}
 .addrs{margin-top:4px;font-size:11px}
 .cards{grid-template-columns:repeat(2,1fr);margin-top:-20px}.cards li:last-child{grid-column:1/-1}
 .music{width:36px;height:36px}
   .hot-g{left:8.2%;top:27.5%;width:22.0%;height:38.0%;clip-path:polygon(36.0% 1.0%, 46.0% 0.0%, 56.0% 0.0%, 66.0% 2.0%, 76.0% 5.0%, 85.0% 10.0%, 92.0% 17.0%, 96.0% 26.0%, 99.0% 36.0%, 99.0% 48.0%, 97.0% 58.0%, 94.0% 66.0%, 90.0% 74.0%, 84.0% 81.0%, 76.0% 87.0%, 66.0% 92.0%, 56.0% 96.0%, 46.0% 98.0%, 36.0% 99.0%, 26.0% 97.0%, 18.0% 93.0%, 12.0% 87.0%, 7.0% 79.0%, 3.0% 69.0%, 1.0% 58.0%, 1.0% 46.0%, 2.0% 34.0%, 5.0% 24.0%, 10.0% 15.0%, 16.0% 9.0%, 24.0% 4.0%, 30.0% 2.0%)}
   .hot-k{left:29.2%;top:34.5%;width:18.2%;height:36.5%;clip-path:polygon(6.0% 30.0%, 10.0% 18.0%, 16.0% 10.0%, 22.0% 12.0%, 28.0% 6.0%, 36.0% 1.0%, 46.0% 0.0%, 54.0% 2.0%, 60.0% 8.0%, 64.0% 14.0%, 68.0% 10.0%, 74.0% 3.0%, 82.0% 0.0%, 90.0% 2.0%, 96.0% 10.0%, 99.0% 22.0%, 99.0% 40.0%, 98.0% 56.0%, 95.0% 70.0%, 90.0% 82.0%, 82.0% 92.0%, 70.0% 98.0%, 54.0% 99.0%, 38.0% 98.0%, 24.0% 94.0%, 14.0% 88.0%, 7.0% 78.0%, 3.0% 64.0%, 2.0% 48.0%, 3.0% 34.0%, 5.0% 28.0%)}
   .hot-t{left:44.2%;top:32.0%;width:15.4%;height:35.8%;clip-path:polygon(40.0% 0.0%, 50.0% 0.0%, 58.0% 2.0%, 66.0% 7.0%, 74.0% 14.0%, 82.0% 24.0%, 88.0% 34.0%, 93.0% 44.0%, 96.0% 54.0%, 98.0% 64.0%, 96.0% 76.0%, 90.0% 88.0%, 80.0% 95.0%, 66.0% 99.0%, 50.0% 99.0%, 34.0% 97.0%, 22.0% 92.0%, 12.0% 84.0%, 6.0% 72.0%, 3.0% 58.0%, 3.0% 44.0%, 6.0% 32.0%, 12.0% 22.0%, 20.0% 14.0%, 28.0% 8.0%, 34.0% 3.0%)}
   .hot-m{left:56.6%;top:32.5%;width:20.2%;height:36.0%;clip-path:polygon(10.0% 18.0%, 20.0% 6.0%, 32.0% 1.0%, 46.0% 0.0%, 60.0% 0.0%, 72.0% 3.0%, 82.0% 9.0%, 90.0% 16.0%, 96.0% 26.0%, 99.0% 38.0%, 99.0% 52.0%, 97.0% 66.0%, 93.0% 78.0%, 86.0% 88.0%, 76.0% 95.0%, 62.0% 99.0%, 46.0% 99.0%, 30.0% 96.0%, 18.0% 90.0%, 10.0% 80.0%, 5.0% 68.0%, 2.0% 52.0%, 2.0% 36.0%, 4.0% 24.0%, 7.0% 18.0%)}
   .hot-l{left:75.0%;top:38.0%;width:19.4%;height:37.5%;clip-path:polygon(10.0% 22.0%, 18.0% 8.0%, 28.0% 2.0%, 38.0% 0.0%, 50.0% 0.0%, 60.0% 2.0%, 70.0% 6.0%, 80.0% 12.0%, 88.0% 20.0%, 94.0% 30.0%, 98.0% 42.0%, 99.0% 56.0%, 97.0% 70.0%, 92.0% 82.0%, 84.0% 91.0%, 72.0% 97.0%, 56.0% 99.0%, 40.0% 98.0%, 26.0% 94.0%, 14.0% 86.0%, 6.0% 74.0%, 2.0% 60.0%, 1.0% 46.0%, 3.0% 32.0%, 6.0% 24.0%)}
 .hs{background-image:url(hero-fullbleed-m.webp?v=20261109t894)}
 .hs-g{left:8.2%;top:27.5%;width:22.0%;height:38.0%;clip-path:polygon(36.0% 1.0%, 46.0% 0.0%, 56.0% 0.0%, 66.0% 2.0%, 76.0% 5.0%, 85.0% 10.0%, 92.0% 17.0%, 96.0% 26.0%, 99.0% 36.0%, 99.0% 48.0%, 97.0% 58.0%, 94.0% 66.0%, 90.0% 74.0%, 84.0% 81.0%, 76.0% 87.0%, 66.0% 92.0%, 56.0% 96.0%, 46.0% 98.0%, 36.0% 99.0%, 26.0% 97.0%, 18.0% 93.0%, 12.0% 87.0%, 7.0% 79.0%, 3.0% 69.0%, 1.0% 58.0%, 1.0% 46.0%, 2.0% 34.0%, 5.0% 24.0%, 10.0% 15.0%, 16.0% 9.0%, 24.0% 4.0%, 30.0% 2.0%);background-position:-8.2cqw -27.5cqh}
 .hs-k{left:29.2%;top:34.5%;width:18.2%;height:36.5%;clip-path:polygon(6.0% 30.0%, 10.0% 18.0%, 16.0% 10.0%, 22.0% 12.0%, 28.0% 6.0%, 36.0% 1.0%, 46.0% 0.0%, 54.0% 2.0%, 60.0% 8.0%, 64.0% 14.0%, 68.0% 10.0%, 74.0% 3.0%, 82.0% 0.0%, 90.0% 2.0%, 96.0% 10.0%, 99.0% 22.0%, 99.0% 40.0%, 98.0% 56.0%, 95.0% 70.0%, 90.0% 82.0%, 82.0% 92.0%, 70.0% 98.0%, 54.0% 99.0%, 38.0% 98.0%, 24.0% 94.0%, 14.0% 88.0%, 7.0% 78.0%, 3.0% 64.0%, 2.0% 48.0%, 3.0% 34.0%, 5.0% 28.0%);background-position:-29.2cqw -34.5cqh}
 .hs-t{left:44.2%;top:32.0%;width:15.4%;height:35.8%;clip-path:polygon(40.0% 0.0%, 50.0% 0.0%, 58.0% 2.0%, 66.0% 7.0%, 74.0% 14.0%, 82.0% 24.0%, 88.0% 34.0%, 93.0% 44.0%, 96.0% 54.0%, 98.0% 64.0%, 96.0% 76.0%, 90.0% 88.0%, 80.0% 95.0%, 66.0% 99.0%, 50.0% 99.0%, 34.0% 97.0%, 22.0% 92.0%, 12.0% 84.0%, 6.0% 72.0%, 3.0% 58.0%, 3.0% 44.0%, 6.0% 32.0%, 12.0% 22.0%, 20.0% 14.0%, 28.0% 8.0%, 34.0% 3.0%);background-position:-44.2cqw -32.0cqh}
 .hs-m{left:56.6%;top:32.5%;width:20.2%;height:36.0%;clip-path:polygon(10.0% 18.0%, 20.0% 6.0%, 32.0% 1.0%, 46.0% 0.0%, 60.0% 0.0%, 72.0% 3.0%, 82.0% 9.0%, 90.0% 16.0%, 96.0% 26.0%, 99.0% 38.0%, 99.0% 52.0%, 97.0% 66.0%, 93.0% 78.0%, 86.0% 88.0%, 76.0% 95.0%, 62.0% 99.0%, 46.0% 99.0%, 30.0% 96.0%, 18.0% 90.0%, 10.0% 80.0%, 5.0% 68.0%, 2.0% 52.0%, 2.0% 36.0%, 4.0% 24.0%, 7.0% 18.0%);background-position:-56.6cqw -32.5cqh}
 .hs-l{left:75.0%;top:38.0%;width:19.4%;height:37.5%;clip-path:polygon(10.0% 22.0%, 18.0% 8.0%, 28.0% 2.0%, 38.0% 0.0%, 50.0% 0.0%, 60.0% 2.0%, 70.0% 6.0%, 80.0% 12.0%, 88.0% 20.0%, 94.0% 30.0%, 98.0% 42.0%, 99.0% 56.0%, 97.0% 70.0%, 92.0% 82.0%, 84.0% 91.0%, 72.0% 97.0%, 56.0% 99.0%, 40.0% 98.0%, 26.0% 94.0%, 14.0% 86.0%, 6.0% 74.0%, 2.0% 60.0%, 1.0% 46.0%, 3.0% 32.0%, 6.0% 24.0%);background-position:-75.0cqw -38.0cqh}

 .sd-knob{width:16px;height:26px}
}
@media (prefers-reduced-motion:reduce){
 .ch,.d-star{animation:none!important}
 body.login.entering .chips,body.login.entering .title-block,body.login.entering .cards,body.login.entering .foot{animation:none!important}
 body.login.entering .home-stage{animation:stageZoomFast 1.3s ease both!important;filter:none}
 .puff-veil.puffing .sd-l{animation:doorOpenL 1.1s ease .02s both!important}
 .puff-veil.puffing .sd-r{animation:doorOpenR 1.1s ease .02s both!important}
 .puff-skip{animation:none!important;opacity:.75}
 .hs,.hs.hopping{animation:none!important;filter:none!important}
 .puff-veil.puffing .cl1,.puff-veil.puffing .cl2,.puff-veil.puffing .cl3,.puff-veil.puffing .cl4,
 .puff-veil.puffing .cl5,.puff-veil.puffing .cl6,.puff-veil.puffing .cl7,.puff-veil.puffing .cl8{animation:cloudPeelFast 1.05s ease .08s both!important}
 @keyframes cloudPeelFast{0%{opacity:1}100%{opacity:0;transform:scale(1.05)}}

 @keyframes stageZoomFast{0%{transform:scale(1.03);transform-origin:50% 40%}100%{transform:scale(1);transform-origin:50% 40%}}
}

@keyframes gateShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.gate.shake .gate-card{animation:gateShake .4s ease}

/* t902: tall/portrait — keep hero cover + door/cloud native proportions; landscape unchanged */
@media (orientation: portrait){
  body.login.locked,body.login.entering{
    overflow:hidden;
    height:100vh;height:100dvh;min-height:100svh;
    background:#eaf1f8;
  }
  body.login.locked .home-stage,body.login.entering .home-stage{
    position:fixed;inset:0;overflow:hidden;background:#eaf1f8;
  }
  body.login.locked .scene,body.login.entering .scene{
    position:absolute;inset:0;min-height:0;height:auto;
  }
  body.login.locked .scene-bg,body.login.entering .scene-bg{
    position:absolute;inset:0;display:block;height:auto;margin:0;
  }
  body.login.locked .scene-bg img,body.login.entering .scene-bg img{
    position:absolute;inset:0;width:100%;height:100%;min-height:0;
    object-fit:cover;object-position:center 38%;
  }
  /* door chrome: vmin + aspect-ratio — no tall-viewport % squeeze */
  .sd-win{
    width:17vmin;height:auto;aspect-ratio:7/5;top:12%;
  }
  .sd-fluff{
    width:22vmin;height:auto;aspect-ratio:16/5;bottom:15%;
  }
  .sd-knob{width:2.4vmin;height:3.8vmin}
  /* cloud puffs: width + aspect-ratio (never width% and height% together) */
  .cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8{height:auto}
  .cl1{left:-22%;top:-2%;width:78vmin;aspect-ratio:1.55/1}
  .cl2{right:-24%;top:-4%;left:auto;width:82vmin;aspect-ratio:1.5/1}
  .cl3{left:4%;top:26%;width:64vmin;aspect-ratio:1.55/1}
  .cl4{right:2%;top:30%;left:auto;width:68vmin;aspect-ratio:1.5/1}
  .cl5{left:-20%;bottom:0;top:auto;width:74vmin;aspect-ratio:1.55/1}
  .cl6{right:-22%;bottom:-2%;top:auto;left:auto;width:78vmin;aspect-ratio:1.5/1}
  .cl7{left:20%;top:6%;width:56vmin;aspect-ratio:1.55/1}
  .cl8{left:28%;bottom:14%;top:auto;width:58vmin;aspect-ratio:1.5/1}
}