:root{--bg:#090c0d;--paper:#f4f4e9;--muted:#999f9f;--lime:#dfff68;--line:rgba(241,245,232,.15);--header:92px;color-scheme:dark;font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans SC",sans-serif;color:var(--paper);background:var(--bg)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header)}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:6px}button:disabled{cursor:wait}a,button{transition:background .2s,color .2s,transform .2s}button:hover,.button:hover{transform:translateY(-2px)}[hidden]{display:none!important}.skip{position:fixed;top:-80px;left:20px;background:var(--lime);color:#111;padding:16px;z-index:100}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.header{height:var(--header);padding:0 4.4%;display:flex;align-items:center;justify-content:space-between;gap:32px;position:absolute;inset:0 0 auto;z-index:30;background:linear-gradient(#090c0df5,#090c0d00)}.brand{width:232px;display:block}.brand img{display:block;width:100%;height:auto}.header nav{display:flex;gap:40px;align-items:center;font-size:14px;color:#bfc2c0}.header nav a{padding:15px 0;position:relative}.header nav .current{color:var(--paper)}.header nav .current:after{content:"";position:absolute;width:19px;height:2px;background:var(--lime);bottom:2px;left:calc(50% - 9px)}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;background:var(--lime);color:#11150b;border-radius:99px;padding:17px 27px;font-size:14px;font-weight:600;white-space:nowrap}.button:hover{background:#edffa9}.button span{font-size:21px;line-height:1}.header .button{padding:13px 24px}.hero{height:100svh;min-height:640px;max-height:1200px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 72% 55%,#11161865,transparent 65%)}#planet{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline-offset:-6px}#planet:active{cursor:grabbing}.intro{position:absolute;top:29%;left:5%;width:40%;pointer-events:none;transition:opacity .45s,transform .65s}.intro-actions{pointer-events:auto;display:flex;gap:30px;align-items:center;margin-top:38px}.eyebrow{font-size:10px;letter-spacing:.32em;font-family:"Segoe UI",sans-serif;font-weight:500;margin:0 0 24px}.intro h1{font-size:clamp(48px,5.1vw,92px);line-height:1.24;letter-spacing:-.055em;font-weight:650;margin:0}.intro h1 em{font-style:normal;color:var(--lime)}.intro-copy{color:#b2b6b7;font-size:clamp(14px,1.25vw,19px);line-height:1.9;margin:29px 0 0}.text-link{font-size:13px;border-bottom:1px solid #9b9f98;padding:8px 0}.planet-label{position:absolute;right:6%;top:18%;display:flex;gap:14px;font-size:14px;pointer-events:none;transition:opacity .4s}.planet-label small{display:block;color:var(--muted);font-size:8px;letter-spacing:.26em;margin-top:7px}.label-line{width:70px;height:25px;border-top:1px solid #7c847c;transform:skewY(-28deg);margin-top:22px}.label-line:after{content:"";position:absolute;right:-3px;top:-3px;width:5px;height:5px;background:var(--paper);border-radius:50%}.planet-caption{position:absolute;top:63%;right:4.6%;font-size:11px;border:1px solid #ffffff28;background:#0c1014c7;backdrop-filter:blur(12px);padding:13px 18px;border-radius:28px;pointer-events:none;transition:opacity .4s}.planet-caption i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:10px}.scene-tools{position:absolute;left:68%;bottom:12%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;border:1px solid #ffffff28;background:#0a0e10b0;backdrop-filter:blur(10px);border-radius:40px;padding:5px 9px;font-size:11px;white-space:nowrap}.scene-tools p{margin:0 6px;color:#b9bcbd}.scene-tools p span{margin:0 5px}.scene-tools button{font-size:21px;width:31px;height:31px;color:#d3d7d5}.hero-bottom{position:absolute;left:4.5%;right:4.5%;bottom:0;height:85px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#a6acaa;font-size:11px;z-index:5}.hero-bottom>span{font-size:9px;letter-spacing:.35em}.hero-bottom p i{font-style:normal;margin:0 23px;color:#616869}.hero-bottom a{display:flex;align-items:center;gap:25px}.hero-bottom b{font-size:25px;font-weight:400}.loading{position:absolute;inset:0;background:#090c0d;z-index:25;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .6s;pointer-events:none}.loading.loaded{opacity:0}.loading-hex{width:60px;height:66px;background:var(--lime);color:#0b0e0b;display:grid;place-items:center;clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);font-size:28px;font-weight:900;animation:breath 1.6s infinite}.loading p{font-size:13px;text-align:center;margin:25px 0}.loading span{display:block;font-size:8px;letter-spacing:.24em;color:#6d7674;margin-top:12px}.loading-track{width:180px;height:1px;background:#30372e}.loading-track i{display:block;width:100%;height:1px;background:var(--lime);transform-origin:left;animation:load 1s ease-out both}
.explore-toolbar{position:absolute;inset:110px 4.5% auto;display:flex;align-items:center;z-index:21}.back{display:flex;align-items:center;gap:12px;font-size:12px}.back span{width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff25;background:#121718a6;border-radius:50%;font-size:21px}.back b{font-weight:400}.hero[data-mode=grid] .intro,.hero[data-mode=focus] .intro{opacity:0;transform:translateX(-40px);visibility:hidden}.hero:not([data-mode=globe]) .planet-label,.hero:not([data-mode=globe]) .planet-caption{opacity:0}.hero[data-mode=grid] .scene-tools{left:50%;z-index:15;bottom:105px}.hero[data-mode=focus] .scene-tools{display:none}.hero:not([data-mode=globe]) .hero-bottom{background:linear-gradient(transparent,#090c0d 45%)}
.focus-layer{position:absolute;inset:165px 0 86px;z-index:20;overflow-y:auto;scrollbar-width:thin}.focus-layout{min-height:100%;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;max-width:1000px;margin:auto;padding:4px 30px 65px}.room-card{text-align:center;--room-x:0%;--room-y:0%}.room-hex{position:relative;width:min(100%,42vh,370px);aspect-ratio:.88;margin:0 auto 15px;background:linear-gradient(105deg,#cfff3e 4%,#f6f3d9 61%,#f4de93);clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);animation:room-in .65s cubic-bezier(.16,1,.3,1) both}.room-image{position:absolute;inset:9px;clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);background-image:url('assets/rooms/room-01.webp');background-size:cover;background-position:50% 50%}.preview-label{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);padding:7px 13px;font-size:10px;border:1px solid #ecefb04a;background:#14140cd6;border-radius:20px;white-space:nowrap;color:#e4e6bd}.room-kicker{font-size:8px;letter-spacing:.22em;color:#a9ad93;margin:9px 0}.room-card h2{font-size:29px;letter-spacing:-.04em;margin:10px 0 8px}.room-card>p:not(.eyebrow){color:#aeb3ae;font-size:12px;margin:0 0 18px}.outline{color:var(--paper);background:#090c0d95;border:1px solid var(--lime);padding:12px 25px;font-size:12px}.outline:hover{color:#131a07}.conversation h3{font-size:20px;font-weight:500;margin:0 0 9px}.mock-label{font-size:10px;color:#8d968d;margin:0 0 35px}.bubble{position:relative;display:flex;gap:14px;margin:0 0 21px;opacity:0;transform:translateY(14px);animation:bubble-in .55s ease forwards}.bubble:nth-of-type(1){animation-delay:.7s}.bubble:nth-of-type(2){animation-delay:2.2s;margin-left:21px}.bubble:nth-of-type(3){animation-delay:3.7s;margin-left:5px}.avatar{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;color:#1b2321;font-size:14px;margin-top:10px}.mint{background:#d5f7d8}.pink{background:#ffd8d5}.lilac{background:#d9ddff}.bubble>div{padding:14px 19px;background:linear-gradient(135deg,#252b2ce0,#121617e6);border:1px solid #b4c0ad3a;border-radius:21px 21px 21px 4px;backdrop-filter:blur(20px);min-width:220px}.bubble small{font-size:10px;color:#a9b2aa}.bubble p{font-size:12px;line-height:1.8;margin:6px 0 0}.join-link{display:flex;align-items:center;justify-content:space-between;border:1px solid #c9cec74d;border-radius:30px;color:#bac0b9;font-size:12px;padding:14px 20px;margin-top:40px}.close-focus{position:absolute;right:5%;top:6px;border:1px solid #ffffff30;border-radius:50%;width:38px;height:38px;font-size:25px;background:#141b1bd0}.room-switch{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;font-size:10px;color:#b0b8ad;white-space:nowrap}.room-switch button{font-size:20px;padding:5px 12px}.create-section{padding:120px 8% 90px;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;background:#121715}.section-head{align-self:center}.section-head .eyebrow{font-size:9px;color:#b9c596}.section-head h2,.about-section h2{font-size:clamp(30px,3.5vw,54px);line-height:1.4;font-weight:500;letter-spacing:-.05em;margin:0 0 25px}.section-head>p:last-child,.about-section>p:not(.eyebrow){font-size:13px;line-height:2.1;color:#a5afa5}.creation-visual{position:relative;aspect-ratio:1.25}.atlas-room{width:100%;height:100%;background-image:url('assets/rooms.webp');background-size:400% 400%;background-position:0 0;border-radius:3px}.creation-visual>span{position:absolute;top:18px;right:18px;padding:6px 11px;border-radius:20px;background:#09110d99;font-size:9px}.idea-note{position:absolute;bottom:-20px;left:-25px;right:40px;background:#e3e9cf;color:#293122;padding:24px 22px;font-size:13px;box-shadow:0 12px 40px #0003;display:flex;justify-content:space-between}.idea-note i{font-style:normal}.steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:30px}.steps article{border-top:1px solid #ffffff25;padding-top:25px}.steps small{font-size:9px;color:#b0c07d;letter-spacing:.2em}.steps h3{font-size:19px;font-weight:500;margin-top:20px}.steps p{font-size:12px;color:#9ba699;line-height:1.9;max-width:280px}.about-section{text-align:center;padding:120px 25px 140px;background:radial-gradient(ellipse at bottom,#25301a55,transparent 66%)}.about-section .eyebrow{color:#b7c291}.about-section .button{margin-top:25px}footer{padding:30px 4.5%;border-top:1px solid #ffffff15;display:flex;gap:32px;align-items:center;color:#818a81;font-size:10px}footer img{width:150px}footer>span{font-size:8px;letter-spacing:.15em}footer div{display:flex;gap:25px;margin-left:auto}footer small{font-size:9px}
@keyframes bubble-in{to{opacity:1;transform:translateY(0)}}@keyframes room-in{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}@keyframes breath{50%{opacity:.55;transform:scale(.92)}}@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-aspect-ratio:1/1) and (min-width:1600px){.focus-layout{max-width:1240px;gap:120px}.room-hex{width:440px}.conversation h3{font-size:25px}.bubble p{font-size:14px}.bubble>div{padding:19px 24px}.room-card h2{font-size:36px}.room-card>p:not(.eyebrow){font-size:14px}.focus-layer{top:180px}}
@media(min-aspect-ratio:1/1) and (max-width:1100px){.header nav{gap:22px}.brand{width:180px}.intro{left:5%;width:45%}.intro h1{font-size:5.6vw}.intro-actions{gap:20px}.intro .button{padding:15px 22px;font-size:12px}.planet-caption{right:3%;font-size:9px}.focus-layout{gap:30px;max-width:880px}.hero-bottom p i{margin:0 12px}.create-section{gap:45px}.room-hex{width:310px}.room-card h2{font-size:25px}.bubble>div{min-width:0}.conversation h3{font-size:18px}}
@media(aspect-ratio < 1/1){:root{--header:74px}.header{padding:0 6%;gap:20px}.brand{width:157px}.header nav{display:none}.header .button{font-size:11px;padding:11px 17px;gap:12px}.hero{min-height:810px;height:100svh;max-height:1100px}.intro{top:115px;left:7%;width:86%;text-align:left}.intro .eyebrow{font-size:8px;margin-bottom:15px;letter-spacing:.25em}.intro h1{font-size:43px;line-height:1.18}.intro h1 br{display:none}.intro h1 em{display:block}.intro-copy{font-size:12px;margin-top:15px;line-height:1.8}.intro-copy br{display:none}.intro-actions{margin-top:18px;gap:22px}.intro .button{font-size:11px;padding:12px 18px;gap:20px}.text-link{font-size:10px}.planet-label{top:42%;right:8%;font-size:10px}.planet-label small{font-size:6px}.label-line{width:30px;height:10px;margin-top:15px}.planet-caption{display:none}.scene-tools{left:50%;bottom:89px;font-size:10px;padding:3px 6px}.hero-bottom{height:65px;left:7%;right:7%}.hero-bottom>span{font-size:7px;letter-spacing:.18em}.hero-bottom p{display:none}.hero-bottom a{font-size:10px;gap:15px}.explore-toolbar{top:90px;left:5%;right:5%;display:block}.back{font-size:10px;gap:8px}.back span{width:30px;height:30px;font-size:17px}.hero[data-mode=grid] .scene-tools{bottom:85px}.focus-layer{inset:186px 0 65px}.focus-layout{display:flex;flex-direction:column;gap:27px;padding:0 6% 75px}.room-card{width:100%}.room-hex{width:235px;margin-bottom:10px}.room-kicker{font-size:7px}.room-card h2{font-size:23px}.room-card>p:not(.eyebrow){font-size:10px;margin-bottom:13px}.outline{padding:10px 21px;font-size:10px}.conversation{width:100%;max-width:360px}.conversation h3{font-size:17px}.mock-label{margin-bottom:19px}.bubble{margin-bottom:13px;gap:12px}.bubble>div{padding:10px 15px}.bubble p{font-size:11px}.avatar{width:30px;height:30px;font-size:12px}.join-link{margin-top:20px;font-size:11px}.close-focus{top:0;right:5%;width:31px;height:31px;font-size:21px}.room-switch{position:relative;bottom:auto;margin-top:-49px;margin-bottom:20px;justify-content:center}.create-section{padding:75px 7%;grid-template-columns:1fr;gap:35px}.section-head h2{font-size:32px}.section-head>p:last-child{font-size:12px}.creation-visual{margin:0 8px 15px}.idea-note{font-size:10px;padding:17px 15px;left:-10px;right:20px}.steps{grid-template-columns:1fr;gap:22px;margin-top:20px}.steps h3{font-size:19px;margin:14px 0}.steps p{max-width:none}.about-section{padding:75px 7% 90px}.about-section h2{font-size:34px}.about-section>p:not(.eyebrow){font-size:12px}footer{padding:28px 7%;display:grid;grid-template-columns:1fr 1fr;gap:25px}footer img{width:130px}footer>span{display:none}footer div{gap:18px;margin:0;justify-content:flex-end;font-size:9px}footer small{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}

/* Keep focused previews contained on laptop-height viewports. */
body:has(.hero:not([data-mode=globe])) .header{background:#090c0dee;backdrop-filter:blur(16px)}
@media(min-aspect-ratio:1/1){.room-hex{width:min(100%,clamp(190px,calc((100svh - 470px)*.88),440px))}.focus-layout{padding-bottom:30px}.conversation .join-link{margin-top:28px}}



/* Room previews keep the complete in-game isometric composition. */
.hero[data-mode=focus] .hero-bottom{display:none}
.focus-layer{inset:0;overflow:hidden}
.focus-layout{display:block;position:relative;max-width:none;min-height:100%;height:100%;padding:0}
.room-card{text-align:left}
.room-hex{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;clip-path:none;background:#192019;animation:room-reveal .85s cubic-bezier(.16,1,.3,1) both}
.room-image{inset:0;clip-path:none;background-size:cover;background-position:50% 50%}
.room-hex:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061016d9,transparent 35%,transparent 73%,#07101975),linear-gradient(90deg,#06101930,transparent 45%,#06101945);pointer-events:none}
.preview-label{top:104px;bottom:auto;left:50%;z-index:2}
.room-description-block{position:absolute;left:5%;bottom:95px;z-index:3;max-width:340px;text-shadow:0 2px 16px #0008}
.room-description-block h2{font-size:30px;line-height:1.4;margin:8px 0}
.room-description-block #room-description{font-size:11px;color:#d1d8d3;margin:0 0 19px}
.room-description-block .outline{background:#091416b8}
.conversation{position:absolute;right:5%;top:31%;z-index:3;width:320px}
.conversation h3{font-size:19px;text-shadow:0 2px 12px #000b}
.conversation .mock-label{color:#d2d7ce;margin-bottom:27px;text-shadow:0 2px 8px #000}
.conversation .join-link{display:none}
.close-focus{top:104px;right:5%;z-index:6}
.room-switch{bottom:25px;z-index:4;color:#e0e8de}
@keyframes room-reveal{from{opacity:.25;clip-path:polygon(50% 35%,60% 42%,60% 58%,50% 65%,40% 58%,40% 42%)}to{opacity:1;clip-path:polygon(50% -60%,160% 0,160% 100%,50% 160%,-60% 100%,-60% 0)}}
@media(min-aspect-ratio:1/1){.focus-layout{padding:0}.focus-layer{top:0}.room-hex{width:100%}}
@media(aspect-ratio < 1/1){.focus-layer{inset:0}.focus-layout{display:block;height:100%;padding:0}.room-hex{width:100%;height:100%;margin:0}.preview-label{top:96px;font-size:8px}.close-focus{top:90px}.room-description-block{left:7%;bottom:51px;max-width:86%}.room-description-block h2{font-size:19px;margin:3px 0}.room-description-block .room-kicker,.room-description-block #room-description,.room-description-block .outline{display:none}.conversation{top:auto;bottom:108px;left:7%;right:7%;width:auto;max-width:none}.conversation h3,.conversation .mock-label{display:none}.conversation .bubble{gap:8px;margin:0 0 9px}.conversation .bubble:nth-of-type(2){margin-left:18px}.conversation .bubble:nth-of-type(3){margin-left:4px}.conversation .bubble>div{padding:8px 12px;background:#0e1b24c9;max-width:260px}.conversation .bubble p{font-size:10px;margin-top:2px;line-height:1.6}.conversation .bubble small{font-size:8px}.conversation .avatar{width:25px;height:25px;font-size:10px;margin-top:7px}.room-switch{position:absolute;bottom:10px;margin:0;font-size:9px;gap:12px}}

/* Centered planet against a quiet night sky. */
.hero{max-height:none;background:radial-gradient(ellipse at 50% 40%,#14223970 0,transparent 65%),linear-gradient(160deg,#080e18,#0c1523 55%,#080e16)}
.intro{top:auto;bottom:120px;left:4.5%;width:29%;max-width:370px}
.intro .eyebrow{font-size:9px;letter-spacing:.25em;margin-bottom:17px;color:#cad1db}
.intro h1{font-size:clamp(30px,3vw,54px);line-height:1.22}
.intro-copy{font-size:clamp(12px,1vw,15px);line-height:1.9;margin-top:19px;color:#adb9c9}
.intro-actions{margin-top:24px;gap:24px}
.intro .button{padding:14px 22px;font-size:12px;gap:22px}
.intro .text-link{font-size:11px}
.hero[data-mode=globe] .scene-tools{display:none}
.hero[data-mode=globe] .hero-bottom{left:4.5%;right:auto;bottom:30px;height:auto;display:block;border:0;pointer-events:none}
.hero[data-mode=globe] .hero-bottom>span{font-size:8px;letter-spacing:.24em}
.hero[data-mode=globe] .hero-bottom p{font-size:10px;margin:13px 0 0;color:#8491a2}
.hero[data-mode=globe] .hero-bottom p i{margin:0 12px}
.hero[data-mode=globe] .hero-bottom a{display:none}
.click-cue{position:absolute;left:50%;top:calc(50% + var(--planet-radius,35vh) + 18px);transform:translateX(-50%);width:64px;height:64px;color:#e6ecd9;z-index:6;border-radius:50%;opacity:.85}
.click-cue svg{position:absolute;left:20px;top:14px;width:28px;height:34px;animation:tap-hand 2.8s ease-in-out infinite}
.tap-ripple,.tap-ripple:after{position:absolute;left:20px;top:6px;width:24px;height:24px;border:1px solid #dfeab4;border-radius:50%;animation:tap-ring 2.8s ease-out infinite;pointer-events:none}
.tap-ripple:after{content:'';left:-1px;top:-1px;animation-delay:.3s}
.click-cue:hover{color:var(--lime);opacity:1}
@keyframes tap-hand{0%,55%,100%{transform:translateY(0)}18%,30%{transform:translateY(-5px) scale(.95)}}
@keyframes tap-ring{0%,12%{transform:scale(.5);opacity:0}22%{opacity:.65}60%,100%{transform:scale(1.9);opacity:0}}
@media(min-aspect-ratio:1/1) and (max-width:1100px){.intro{width:29%}.intro-actions{gap:15px;flex-wrap:wrap}.intro .button{padding:12px 16px}.intro h1{font-size:32px}}
@media(aspect-ratio < 1/1){.hero{min-height:810px;max-height:none}.intro{top:auto;bottom:60px;left:7%;width:86%;max-width:none}.intro .eyebrow{font-size:7px;margin-bottom:9px}.intro h1{font-size:28px;line-height:1.25}.intro h1 br{display:none}.intro h1 em{display:inline}.intro-copy{font-size:11px;margin-top:10px}.intro-actions{margin-top:14px;gap:22px}.intro .button{padding:10px 16px;font-size:10px}.intro .text-link{font-size:10px}.hero[data-mode=globe] .hero-bottom{left:7%;bottom:23px}.hero[data-mode=globe] .hero-bottom>span{font-size:7px}.hero[data-mode=globe] .hero-bottom p{display:none}.click-cue{top:calc(50% + var(--planet-radius,155px) + 2px);width:48px;height:48px}.click-cue svg{width:22px;height:27px;left:15px;top:8px}.tap-ripple,.tap-ripple:after{width:20px;height:20px;left:14px;top:0}.tap-ripple:after{left:-1px;top:-1px}}
/* Transparent in-game previews sit on a quiet stage without stretching or cropping. */
.hero[data-mode=focus] .room-hex{background:radial-gradient(ellipse at 38% 46%,#2b3c43 0,#14232d 38%,#0a121e 76%)}
.hero[data-mode=focus] .room-image{inset:130px 370px 130px 5%;background-image:url('assets/rooms/room-01.webp');background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 24px 30px #0005)}
.hero[data-mode=focus] .room-hex:after{background:linear-gradient(0deg,#061016a8,transparent 24%)}
.hero[data-mode=focus] .room-description-block{bottom:75px;max-width:440px}
@media(min-aspect-ratio:1/1) and (min-width:1600px){.hero[data-mode=focus] .room-image{inset:160px 30% 150px 8%;background-size:auto min(100%,680px)}}
@media(max-width:1000px) and (min-aspect-ratio:1/1){.hero[data-mode=focus] .room-image{inset:150px 290px 150px 3%}.hero[data-mode=focus] .conversation{width:250px;right:4%}.hero[data-mode=focus] .conversation h3{font-size:16px}}
@media(aspect-ratio < 1/1){.hero[data-mode=focus] .room-image{inset:135px 5% 325px;background-size:contain}.hero[data-mode=focus] .room-description-block{bottom:62px}.hero[data-mode=focus] .room-description-block #room-description{display:block;font-size:9px;margin:5px 0 0}.hero[data-mode=focus] .conversation{bottom:126px}.hero[data-mode=focus] .conversation .mock-label{display:block;font-size:8px;margin:0 0 8px}.hero[data-mode=focus] .room-switch{bottom:16px}}

/* Window-facing room loops use the full frame without cropping. */
.room-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:12px}.room-loop[hidden]{display:none}