:root{--text-primary:#E9E3E8;--text-secondary:#B8AFB7;--text-muted:#817780;--pink-text:#F078C5;--pink-accent:#FF4DB8;color:var(--text-primary)}
button,input,textarea,select{color:var(--text-primary)}
.header nav button,.intro p,.hotspot,.hotspot:hover,.hotspot:focus-visible,.exploring .hotspot,.player-title,.chat p,.playback button:nth-child(2){color:var(--text-primary)}
.intro small{color:var(--text-primary)}.hint-action{color:var(--pink-accent)}
.hotspot small,.player-title small,.timeline,.scene-caption p{color:var(--text-secondary)}
.chat h2,.contact,.header nav .active{color:var(--pink-text)}
.intro h1{white-space:normal;width:100%;margin:0 0 28px;line-height:0}
.intro h1 img{display:block;object-fit:contain;height:auto}
.hero-zaydi{width:46%;margin-bottom:4px}.hero-vdom{width:94%}
.intro p{margin-bottom:28px}.intro small{margin-top:20px}
.album,.avatar{overflow:hidden;background-image:none}
.album img,.avatar img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.035);object-position:50% 45%}
.album img{object-position:59% 50%}.avatar{border-radius:50%}
.eye-blink{transition:none}
.mili{position:absolute;left:560px;top:515px;width:155px;height:200px;object-fit:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility .55s;filter:drop-shadow(0 5px 5px #12071499)}
.world[data-scene=sofa] .mili{visibility:visible;opacity:1;transition-delay:.65s}
.photo-mili img{width:100%;height:100%;object-fit:contain}
/* Additive light over the untouched room artwork: the sign can never go dark. */
.gang-emission{inset:auto;left:775px;top:60px;width:240px;height:278px;background-position:-775px -60px;mask-image:radial-gradient(ellipse 100px 108px at 120px 139px,#000 60%,transparent 100%);opacity:.15;color:#F078C5;background-color:currentColor;background-blend-mode:luminosity;animation:gang-breathe 15s ease-in-out infinite,gang-therapy-color 52s ease-in-out infinite}
.gang-glow{left:655px;top:15px;width:480px;height:375px;opacity:.10;color:#F078C5;background:radial-gradient(ellipse at 50% 49%,currentColor,transparent 68%);filter:blur(28px);mix-blend-mode:screen;animation:gang-halo 15s ease-in-out infinite,gang-therapy-color 52s ease-in-out infinite}
/* Inner diffusion and a much weaker reflection confined to the nearest shelf. */
.gang-glow::before,.gang-glow::after{content:'';position:absolute;pointer-events:none;background:radial-gradient(ellipse,currentColor,transparent 70%)}
.gang-glow::before{left:130px;top:83px;width:220px;height:215px;opacity:.26}
.gang-glow::after{left:340px;top:85px;width:165px;height:165px;opacity:.20;transform:rotate(-12deg)}
@keyframes gang-breathe{0%,100%{opacity:.06}50%{opacity:.38}}
@keyframes gang-halo{0%,100%{opacity:.055}50%{opacity:.19}}
/* Direct color interpolation avoids the intermediate hues of a hue-rotation wheel. */
@keyframes gang-therapy-color{0%,100%{color:#F078C5}33.333%{color:#F3E2B8}66.667%{color:#D6B2F2}}
@media(prefers-reduced-motion:reduce){.gang-emission{animation:none!important;opacity:.085;filter:none}.gang-glow{animation:none!important;opacity:.045;color:#F078C5}}
.photo-mili{overflow:hidden}.photo-mili img{min-height:0;max-height:157px}
.global-sound{position:absolute;right:35px;top:90px;width:40px;height:36px;z-index:15;color:var(--text-secondary);background:#130d1899;font-size:19px}
.music-seek{width:100%;min-width:0;flex:1;height:4px;accent-color:var(--pink-text);cursor:pointer;margin:0}
.timeline span{white-space:nowrap}.player-title small{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window-view{position:absolute;inset:0;z-index:6;visibility:hidden;opacity:0;background:#080710;transition:opacity .6s ease,visibility .6s;overflow:hidden}
.window-view.is-visible{opacity:1;visibility:visible}
.city-frames{position:absolute;inset:0}.city-master{position:absolute;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease}.city-master.current{opacity:1}
.window-state-control{position:absolute;top:30px;left:290px;padding:10px 16px;display:flex;gap:15px;align-items:center;font-size:14px;color:var(--text-secondary);z-index:5}
.window-state-control select{font:inherit;color:var(--text-primary);background:#1d1321;border:1px solid #854066;border-radius:8px;padding:7px 10px;min-width:155px}
.window-loading{position:absolute;left:35px;bottom:40px;font-size:14px;color:var(--pink-text)}
.canvas[data-mode=window] .scene-caption{display:none}
.hands-container{position:absolute;width:760px;height:507px;left:calc(50% - 380px);bottom:-12px;transform:translateX(var(--hands-x,0px));transition:transform 1.5s ease;animation:hands-idle 19s ease-in-out infinite}
.hands-container img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.pov-hands{filter:drop-shadow(0 4px 8px #08040e44)}
.prop-detail{mask-image:radial-gradient(ellipse 19% 26% at 51% 46%,#000 30%,transparent 87%);opacity:.55;transform-origin:51% 60%;animation:prop-idle 23s ease-in-out infinite}
.hands-light{position:absolute;inset:0;mask-image:var(--hands-mask);mask-size:contain;mask-repeat:no-repeat;background:linear-gradient(110deg,transparent 25%,#e046bc23 48%,transparent 65%);mix-blend-mode:screen;animation:hand-reflection 29s ease-in-out infinite;pointer-events:none}
.window-atmosphere{position:absolute;inset:80px 70px;background:radial-gradient(ellipse at 40% 30%,#a38cda09,transparent 55%);animation:ambient-sky 41s ease-in-out infinite;pointer-events:none}
.weather-particles,.window-rare{position:absolute;inset:80px 65px;overflow:hidden;pointer-events:none}
.weather-particles i{position:absolute;left:var(--x);animation-delay:var(--delay);animation-duration:var(--duration);animation-iteration-count:infinite}
.city-twinkle{top:var(--y);width:1.2px;height:1.5px;background:#eed2ea;box-shadow:0 0 4px #f795d5;animation-name:soft-twinkle;opacity:.25}
.raindrop{top:-5%;width:1px;height:26px;background:linear-gradient(transparent,#b9b0d35c,transparent);animation-name:falling-rain;animation-timing-function:linear;opacity:.3}
.snowflake{top:-5%;width:var(--size);height:var(--size);border-radius:50%;background:#e9e3e8a8;filter:blur(.2px);animation-name:falling-snow;animation-timing-function:linear}
.glass-drop{top:var(--y);width:2px;height:16px;border-radius:50%;background:linear-gradient(#dcc8e033,transparent);animation-name:glass-slide;opacity:.25}
.window-view[data-weather=dawn] .window-atmosphere{background:linear-gradient(#ffab7340,transparent 48%);opacity:.12}
.window-view[data-weather=dawn] .hands-light{background:linear-gradient(115deg,transparent,#ffb07924,transparent)}
.window-view[data-weather=fog] .window-atmosphere{background:radial-gradient(ellipse at 35% 50%,#c0a6d432,transparent 60%),radial-gradient(ellipse at 70% 65%,#88729e26,transparent 55%);animation:fog-passing 37s ease-in-out infinite}
.window-view[data-weather=fog] .prop-detail{mask-image:radial-gradient(ellipse 20% 30% at 61% 24%,#000,transparent 80%);animation:none;opacity:0}
.window-view[data-weather=fog] .prop-detail.trace-heart{opacity:.6;animation:heart-trace 8s ease-in-out both}
.window-view[data-weather=event] .prop-detail{mask-image:radial-gradient(ellipse 18% 28% at 72% 28%,#000 20%,transparent 95%);animation:sparkler-breathe 6.7s ease-in-out infinite}
.window-view[data-weather=rain] .prop-detail{mask-image:radial-gradient(ellipse 16% 25% at 52% 38%,#000 20%,transparent 90%);animation:duck-rock 17s ease-in-out infinite}
.window-view[data-weather=snow] .hands-container{animation-duration:14s}.window-view[data-weather=snow] .prop-detail,.window-view[data-weather=dawn] .prop-detail{mask-image:radial-gradient(ellipse 18% 28% at 48% 24%,#000 25%,transparent 90%);animation:steam-drift 26s ease-in-out infinite}
.rain-passing .weather-particles{opacity:.8;transition:opacity 3s}.window-view[data-weather=rain] .weather-particles{transition:opacity 3s}
.firework{position:absolute;width:1px;height:1px}.firework i{position:absolute;width:2px;height:3px;background:#f78bcc;box-shadow:0 0 3px #eb9fcc;transform:rotate(var(--angle));animation:firework-spark 2.8s ease-out both}
.sky-transport{position:absolute;width:4px;height:1.5px;border-radius:50%;background:#d885cf;box-shadow:0 0 5px #cb4bc3;animation:transport-pass 8s ease-in-out both}
.distant-lightning{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 10%,#baa9e0,transparent 60%);animation:weak-lightning 2.2s ease-in-out both}
.window-view:not([data-playing=true]) *{animation-play-state:paused!important}
@keyframes hands-idle{0%,100%{transform:translate(var(--hands-x,0px),0) rotate(-.08deg)}47%{transform:translate(var(--hands-x,0px),-3px) rotate(.1deg)}}
@keyframes prop-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6px)}}
@keyframes hand-reflection{0%,100%{opacity:.18;transform:translateX(-2px)}50%{opacity:.65;transform:translateX(2px)}}
@keyframes ambient-sky{0%,100%{opacity:.18;transform:translateX(-8px)}50%{opacity:.4;transform:translateX(10px)}}
@keyframes fog-passing{0%,100%{opacity:.18;transform:translate(-12px,0)}55%{opacity:.46;transform:translate(13px,5px)}}
@keyframes soft-twinkle{0%,100%{opacity:.08}50%{opacity:.42}}
@keyframes falling-rain{to{transform:translate(-45px,920px)}}
@keyframes falling-snow{to{transform:translate(var(--drift),940px)}}
@keyframes glass-slide{0%,20%{opacity:0;transform:translateY(0)}40%{opacity:.3}100%{transform:translateY(140px);opacity:0}}
@keyframes steam-drift{0%,100%{transform:translateY(0);opacity:.2}55%{transform:translate(1px,-3px);opacity:.65}}
@keyframes duck-rock{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.45deg)}}
@keyframes sparkler-breathe{0%,100%{opacity:.2}40%{opacity:.65}70%{opacity:.4}}
@keyframes heart-trace{0%{clip-path:inset(0 0 100% 0);opacity:0}65%{clip-path:inset(0);opacity:.6}100%{clip-path:inset(0);opacity:0}}
@keyframes firework-spark{0%{opacity:0;transform:rotate(var(--angle)) translateY(0)}12%{opacity:.55}100%{opacity:0;transform:rotate(var(--angle)) translateY(var(--reach))}}
@keyframes transport-pass{0%{opacity:0;transform:translate(0,0)}20%{opacity:.5}80%{opacity:.4}100%{opacity:0;transform:translate(350px,-35px)}}
@keyframes weak-lightning{0%,100%{opacity:0}45%{opacity:.035}}
@media(prefers-reduced-motion:reduce){.window-view *{animation:none!important}.weather-particles,.window-rare{display:none}.window-view,.city-master{transition-duration:.1s}.hands-container{transform:none!important}}
/* Television stays in its original screen plane; videos retain their native ratio. */
.tv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#08060c;transform-origin:0 0;transform:matrix3d(.8,-.06087,0,-.00070766,0,.8,0,0,0,0,1,0,0,17.2032,0,1)}
.tv-off{z-index:1;pointer-events:none}.tv-open{position:absolute;inset:0;width:100%;height:100%;z-index:2}.tv-power-control{position:absolute;right:6px;bottom:9px;z-index:4;padding:5px 8px;font-size:11px;border-radius:7px;background:#120d18dd;color:var(--pink-text);border:1px solid #70415e}.tv-hint{z-index:3}.tv:hover .tv-video{filter:brightness(1.04)}.tv.is-off .tv-video{visibility:hidden}
.tv-spill{position:absolute;left:65%;top:27%;width:28%;height:42%;pointer-events:none;background:radial-gradient(ellipse at 50% 33%,currentColor,transparent 60%),radial-gradient(ellipse at 50% 85%,currentColor,transparent 65%);mix-blend-mode:screen;opacity:0;transition:color 2s ease,opacity 2.2s ease;filter:blur(14px)}
.world[data-scene=tv]{transform:matrix(3.1,0,0,3.1,-2932,-770)}
.canvas[data-mode=tv] .scene-caption{display:none}
.tv-channels{position:absolute;z-index:10;bottom:55px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:12px;background:#100b16e8}
.tv-channels button{min-width:175px;padding:13px 18px;font-size:15px;border:1px solid transparent;border-radius:9px;text-align:left}.tv-channels small{display:block;font-size:10px;color:var(--text-secondary);margin-bottom:6px;letter-spacing:2px}.tv-channels [aria-pressed=true]{background:#a32b6b30;border-color:#b4538f;color:var(--pink-text)}
.contact-panel{color:var(--text-primary);font-family:Arial,Helvetica,sans-serif;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:44px 46px 36px;border:1px solid #a44b80;border-radius:26px;background:linear-gradient(135deg,#221523f2,#100d16ed);box-shadow:0 18px 90px #0009,0 0 28px #df449625,inset 0 0 34px #a92e7010;backdrop-filter:blur(22px)}
.contact-panel::backdrop{background:#07050b87;backdrop-filter:blur(5px)}.contact-panel[open]{animation:contact-appear .3s ease-out}.contact-close{position:absolute;right:17px;top:12px;font-size:28px;color:var(--pink-text);width:34px;height:34px}.contact-kicker{font-size:11px;letter-spacing:3px;color:var(--pink-text);margin:0 0 19px}.contact-panel h2{font-size:30px;font-weight:500;margin:0 0 12px;line-height:1.2}.contact-lead{font-size:14px;line-height:1.5;color:var(--text-secondary);margin:0 0 26px}.contact-panel label{display:block;margin:16px 0 8px;font-size:14px}.contact-panel input,.contact-panel textarea{display:block;width:100%;font:inherit;font-size:15px;line-height:1.5;border:1px solid #604353;border-radius:10px;background:#0e0a1299;padding:12px 14px;outline:none}.contact-panel textarea{resize:vertical;min-height:100px;max-height:260px}.contact-panel input:focus,.contact-panel textarea:focus{border-color:var(--pink-text);box-shadow:0 0 0 2px #d5469426}.contact-panel [aria-invalid=true]{border-color:#df88a5}.field-error{font-size:12px;line-height:1.4;margin:5px 0 0;color:#ed9bb6}.field-error:empty{display:none}.contact-submit{display:flex;justify-content:center;gap:15px;align-items:center;width:100%;margin-top:23px;border-radius:11px;border:1px solid #f17ec1;background:linear-gradient(110deg,#ba397f,#8d2d70);padding:13px 20px;font-size:16px;box-shadow:0 0 20px #d7378520}.contact-submit:disabled{opacity:.6;cursor:wait}.contact-submit span{font-size:22px}.contact-status{font-size:14px;line-height:1.5;color:var(--text-secondary)}.contact-status:empty{display:none}.contact-status p{margin:12px 0 4px}.contact-error-title{color:#ed9bb6}.contact-status small{display:block;margin-top:10px;font-size:12px}.contact-status h3{font-size:27px;font-weight:500;color:var(--pink-text);margin:30px 0 14px}.contact-panel[data-state=success] .contact-status{padding-bottom:28px}.contact-panel[data-state=success] .contact-lead{display:none}@keyframes contact-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.contact-panel{padding:36px 24px 28px}.contact-panel h2{font-size:26px}}
.world[data-scene=tv] .tv-hint{display:none}
.world[data-scene=tv] .tv-power-control{font-size:9px;padding:4px 7px}
/* Native dialog is in the browser top layer, above the decorative DD cursor. */
body.custom-cursor:has(dialog[open]),body.custom-cursor dialog,body.custom-cursor dialog input,body.custom-cursor dialog textarea{cursor:auto}
body.custom-cursor dialog button{cursor:pointer}
body:has(dialog[open]) .dd-cursor{display:none}
.contact-panel[data-state=success] .contact-status{animation:contact-appear .35s ease-out}
.fog-silhouette{filter:blur(2px);background:#8e82a2;box-shadow:none;opacity:.1}
@media(max-width:800px){.weather-particles i:nth-child(n+25){display:none}.tv-spill{filter:none}}
/* Prevent focus from scrolling the scaled scene when a low toolbar receives focus. */
.canvas{overflow:clip}
/* Volume fits inside the existing player, above its playback timeline. */
.volume-control{position:absolute;left:89px;right:16px;top:96px;height:19px;display:flex;align-items:center;gap:7px;color:var(--text-secondary)}
.volume-control svg{width:16px;height:16px;flex-shrink:0;color:var(--pink-text)}
.volume-control input{flex:1;min-width:0;width:100%;height:16px;margin:0;accent-color:var(--pink-text);cursor:pointer}
.volume-control output{min-width:31px;text-align:right;font-size:10px;font-variant-numeric:tabular-nums}
.vibes .timeline{bottom:8px}
.volume-control input{appearance:none;-webkit-appearance:none;background:transparent;outline-offset:3px}
.volume-control input::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:#745268}
.volume-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;margin-top:-3.5px;border-radius:50%;background:var(--pink-text);box-shadow:0 0 6px #f078c540}
.volume-control input::-moz-range-track{height:3px;border-radius:4px;background:#745268}
.volume-control input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--pink-text)}


/* Reuse the exact registered artwork to overcome its baked-in pink, without redrawing letters. */
.gang-color-core{position:absolute;left:755px;top:40px;width:280px;height:318px;pointer-events:none;background: url('assets/derived/home/room.webp') -755px -40px / 1536px 1024px no-repeat;background-color:currentColor;background-blend-mode:luminosity;color:#F078C5;mask-image:radial-gradient(ellipse 135px 145px at 140px 159px,#000 72%,transparent 100%);opacity:.95;animation:gang-therapy-color 52s ease-in-out infinite}
.canvas[data-mode=window] .gang-color-core{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gang-color-core{animation:none!important;color:#F078C5}}

/* A helper glyph only; the DD pointer remains unchanged. */
.intro .explore-hint{position:relative;padding-left:23px}
.hint-mouse{position:absolute;left:0;top:50%;width:18px;height:18px;margin-top:-9px;color:#F078C5;filter:drop-shadow(0 0 3px #f078c530);transform-origin:50% 60%;animation:hint-mouse-nudge 3.6s ease-in-out infinite;pointer-events:none}
@keyframes hint-mouse-nudge{0%,35%,100%{transform:translateX(0) rotate(0deg)}65%{transform:translateX(1px) rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.hint-mouse{animation:none!important;transform:none}}
/* Rain belongs to the glass, inside the original window clip and behind the people. */
.homepage-glass-rain{position:absolute;left:235px;top:75px;width:310px;height:365px;clip-path:polygon(0 0,100% 18%,100% 98%,0 100%);overflow:hidden;pointer-events:none;background:linear-gradient(112deg,transparent 15%,#ada6cd06 43%,transparent 62%)}
.glass-bead{position:absolute;width:var(--bead-width);height:var(--bead-height);border-radius:48% 48% 43% 52%;opacity:var(--bead-alpha);border-left:.6px solid #100f2855;border-bottom:.7px solid var(--bead-light);background:radial-gradient(ellipse at 65% 24%,#ded8ed66,transparent 45%);animation:glass-bead-grow var(--bead-duration) ease-in-out var(--bead-delay) infinite}
.glass-bead:nth-child(4n){filter:blur(.45px)}
.glass-bead-large{backdrop-filter:blur(.6px) contrast(1.15);box-shadow:inset .5px 0 1px #ddd1e42e}
.glass-bead-sliding{animation-name:glass-bead-slide}
.glass-bead-sliding::before{content:'';position:absolute;bottom:65%;left:38%;width:1px;height:19px;border-radius:60%;background:linear-gradient(transparent,#aeb4cf2a);transform-origin:bottom;animation:glass-bead-tail var(--bead-duration) ease-in-out var(--bead-delay) infinite}
.glass-water-trail{position:absolute;width:7px;fill:none;stroke:#bcb0d1;stroke-width:.75;opacity:.12;filter:blur(.2px);stroke-dasharray:105;animation:glass-trail-merge var(--bead-duration) ease-in-out var(--bead-delay) infinite}
.homepage-distant-rain{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 60%,#abb4d707,transparent 70%)}
.homepage-distant-rain i{position:absolute;width:.6px;height:13px;background:linear-gradient(transparent,#b6b4cf45,transparent);opacity:.22;animation:homepage-rain-fall var(--rain-duration) linear var(--rain-delay) infinite}
.homepage-glass-rain:not([data-active=true]) *{animation-play-state:paused!important}
@keyframes glass-bead-grow{0%,100%{transform:scale(.85)}65%{transform:scale(1.1)}}
@keyframes glass-bead-slide{0%,35%{transform:translate(0,0) scale(.9);opacity:var(--bead-alpha)}48%{transform:translate(1px,6px) scale(1.08)}78%{opacity:var(--bead-alpha)}94%,100%{transform:translate(var(--bead-drift),var(--bead-travel)) scale(.9,1.3);opacity:0}}
@keyframes glass-bead-tail{0%,35%{transform:scaleY(.1);opacity:0}55%,85%{transform:scaleY(1);opacity:.6}100%{opacity:0}}
@keyframes glass-trail-merge{0%,30%{stroke-dashoffset:105;opacity:.03}65%{stroke-dashoffset:0;opacity:.18}100%{stroke-dashoffset:0;opacity:.03}}
@keyframes homepage-rain-fall{to{transform:translate(-30px,200px)}}
@media(prefers-reduced-motion:reduce){.homepage-glass-rain *{animation:none!important}.glass-bead{transform:none;opacity:var(--bead-alpha)}.glass-water-trail{stroke-dashoffset:0;opacity:.12}.glass-bead-sliding::before{animation:none;opacity:.3}.homepage-distant-rain i{opacity:.10}}
/* Review adjustments: a clearer helper and more separation from the sofa action. */
.intro .explore-hint{padding-left:29px}
.hint-mouse{width:24px;height:24px;margin-top:-12px}
.hotspot.sofa{top:584px}
/* Larger hit area remains entirely inside the physical TV screen. */
.tv-power-control{min-width:48px;min-height:34px;right:6px;bottom:10px;padding:6px 9px;touch-action:manipulation}
.world[data-scene=tv] .tv-power-control{min-width:32px;min-height:23px}
.homepage-distant-rain i{height:19px;opacity:.38}
@keyframes glass-trail-merge{0%,30%{stroke-dashoffset:105;opacity:.04}65%{stroke-dashoffset:0;opacity:.26}100%{stroke-dashoffset:0;opacity:.04}}
@media(prefers-reduced-motion:reduce){.homepage-distant-rain i{opacity:.10}}

/* Homepage polish: equal 28px gaps in the 1536px reference canvas. */
.intro .explore-hint{margin-top:28px;height:24px;line-height:24px}
.hotspot.sofa{top:601.64px}
.homepage-distant-rain i{width:var(--rain-width);height:var(--rain-length);opacity:var(--rain-alpha);background:linear-gradient(transparent,#c4c5e0a0 45%,transparent);filter:blur(var(--rain-softness))}
.glass-bead{border-bottom-width:1px;background:radial-gradient(ellipse at 65% 24%,#e7e2f19c,transparent 48%)}
.glass-bead-sliding::before{height:34px;background:linear-gradient(transparent,#bac1d967)}
.glass-water-trail{width:9px;stroke-width:1;stroke:#c5bcd8}
@keyframes glass-trail-merge{0%,20%{stroke-dashoffset:105;opacity:.13}65%{stroke-dashoffset:0;opacity:.46}100%{stroke-dashoffset:0;opacity:.13}}
@keyframes homepage-rain-fall{from{transform:translate(0,-80px)}to{transform:translate(var(--rain-drift),365px)}}
.chats.greetings-pending .chat{opacity:0}
.chats.greetings-ready .chat{animation:greeting-arrive .75s cubic-bezier(.22,.65,.3,1) 1.2s both}
.chats.greetings-ready .chat:nth-child(2){animation-duration:.85s;animation-delay:1.85s}
.chat .avatar{transition:box-shadow .4s ease}
.chat .avatar img{transition:transform .5s ease}
.chat:hover .avatar{box-shadow:0 0 10px #f078c526}
.chat:hover .avatar img{transform:scale(1.06)}
@keyframes greeting-arrive{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.chats.greetings-pending .chat{opacity:1}.chats.greetings-ready .chat{animation:none}.chat .avatar,.chat .avatar img{transition:none}.chat:hover .avatar img{transform:scale(1.035)}.homepage-distant-rain i{opacity:.14}.glass-water-trail{opacity:.3}}




/* Through-glass timeline owns motion; static rules provide the reduced-motion fallback. */
.window-approach-master{position:absolute;inset:0;width:1536px;height:1024px;object-fit:contain;transform-origin:0 0;opacity:0;pointer-events:none}
.window-approach-fill{position:absolute;left:220px;top:45px;width:345px;height:430px;background:#080710;opacity:0}
.window-travelling .world,.window-travelling .window-view{transition:none}
.window-view .city-frames{transform-origin:0 0}
.window-hands-stage{position:absolute;inset:0;pointer-events:none;transform-origin:50% 100%}
.window-glass-bridge{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(ellipse 5px 13px at 29% 32%,#c9c5dc80,transparent 80%),radial-gradient(ellipse 4px 10px at 69% 44%,#dcbedc70,transparent 85%),radial-gradient(ellipse 3px 8px at 48% 64%,#c4cbdb60,transparent 80%),linear-gradient(108deg,transparent 35%,#decde82a 48%,transparent 60%),radial-gradient(ellipse at center,transparent 58%,#0b081a80);filter:blur(.45px)}
@media(prefers-reduced-motion:reduce){.window-glass-bridge{display:none}.window-view{transition-duration:.01s}}

@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat/montserrat-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat/montserrat-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:block}
:root{font-family:Montserrat,Arial,sans-serif;font-weight:500}
button,input,select,textarea{font-family:inherit}button{font-weight:600}
.header nav button{font-size:15px;font-weight:600;letter-spacing:.08em}
.intro p{font-size:17px;line-height:28px;font-weight:500;width:300px;margin-bottom:8px}
.hotspot{font-weight:600}.hotspot small{font-weight:500}
.chat h2{font-weight:600;font-size:15px}.chat p{font-size:13px;font-weight:500;line-height:19px;white-space:normal}
.chat>div:last-child{min-width:0}.chat{gap:12px}
.window-view .hands-container{width:1440px;height:auto;aspect-ratio:var(--hands-ratio,2247 / 1024);left:calc(50% - 720px);bottom:-150px;overflow:visible}
.window-view .hands-container img{object-fit:contain}

/* Preserve the original hero column and CTA geometry with explicit reference line breaks. */
.intro p{width:100%;white-space:nowrap}.explore{height:48px;padding-top:0;padding-bottom:0}

/* Window pixels are laid out at the actual display scale, not enlarged as a scene texture. */
.canvas[data-mode=window]{transform:none;zoom:var(--scale,1)}
.window-view .pov-hands{filter:none}

.volume-control #music-mute{display:grid;place-items:center;width:18px;height:19px;padding:0;flex-shrink:0;color:var(--pink-text)}
.volume-control #music-mute[aria-pressed=true]{opacity:.5}

/* Accumulated homepage fixes: scene-relative layout. */
.intro{top:126px}.intro h1{margin:0 0 30px}.intro p{margin:0 0 20px;line-height:28px;overflow:visible}.intro .explore{display:flex;align-items:center;justify-content:center;gap:6px;margin:0}.explore b{margin:0;line-height:1;transform:none;position:static}.intro .explore-hint{margin-top:20px;color:#f078c5}.intro .hint-action{color:#f078c5}
.hotspot.sofa{top:710px;left:96px}
.homepage-mili{position:absolute;left:150px;top:560px;width:170px;height:140px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 5px #100711aa)}
.world[data-scene=sofa] .homepage-mili{visibility:hidden}
.photo-mili{background-image:linear-gradient(135deg,#edb17825,#f078c517),url('assets/derived/home/room.webp');background-size:100% 100%,768px 512px;background-position:center,-120px -255px;overflow:hidden}.photo-mili img{width:150px;height:145px;object-fit:contain;align-self:end;filter:drop-shadow(0 5px 3px #10071199)}
.polaroid-label{font-family:'Segoe Print','Bradley Hand',cursive!important;font-weight:400!important;font-size:17px!important}
.tv-power-control{inset:auto 6px 9px auto!important;width:48px!important;height:34px!important;z-index:5;pointer-events:auto}.tv-open{touch-action:manipulation}

/* Shared room hotspot language. */
.social-phone-hotspot.hotspot,.pet-hint.hotspot{gap:10px;padding:8px 13px 8px 8px;min-height:56px;border:1px solid #6d4056;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 12px #d7529810,0 3px 14px #0008;font-size:14px;font-weight:600;color:var(--text-primary)}
.social-phone-hotspot.hotspot b{font-size:inherit;font-weight:inherit}.social-phone-hotspot.hotspot small,.pet-hint.hotspot small{font-size:12px;font-weight:500;margin-top:5px;color:var(--text-secondary)}
.social-phone-hotspot.hotspot .icon svg{width:25px;height:25px;stroke:currentColor;filter:drop-shadow(0 0 3px #ff70d5)}
.social-phone-hotspot.hotspot:hover{border-color:#ff81cf;box-shadow:0 0 20px #e8399c55}
.pet-egg .pet-hint.hotspot{left:50%;right:auto;top:auto;bottom:calc(100% + 14px);transform:translateX(-50%);width:max-content;white-space:nowrap}
.intro .explore-hint{margin-top:30px;padding-left:50px;height:40px;line-height:40px;color:#E9E3E8}.intro .hint-action{color:#F078C5}
.intro .hint-icon{position:absolute;left:0;top:0;display:grid;margin:0;width:40px;height:40px}.hint-icon .hint-mouse{position:static;width:28px;height:28px;margin:0;color:inherit}

/* Brief discovery cue, restarted by every Explore click. */
@property --discovery-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.canvas.exploring .hotspot{border-color:#ff9fd8;box-shadow:0 0 12px #ff4db899,0 0 30px #ff4db844,inset 0 0 15px #f078c52b}
.canvas.exploring .hotspot:after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--discovery-angle),transparent 0deg 190deg,#ff4db8 260deg,#ffe0f4 300deg,transparent 355deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:discovery-orbit 1.6s linear 3}
.canvas.exploring .hotspot .icon{box-shadow:0 0 18px #ff65c6cc,inset 0 0 0 1px #ffc1e6;background:radial-gradient(circle,#f45fbac9,#a52c817d 55%,#32142a 75%)}
@keyframes discovery-orbit{to{--discovery-angle:360deg}}
@media(prefers-reduced-motion:reduce){.canvas.exploring .hotspot:after{animation:none;background:#f078c5}}
/* Reveal the existing badge from the physical phone, including keyboard focus. */
.canvas:not(.in-scene) .social-phone-hotspot{opacity:0;visibility:hidden;pointer-events:auto;transition:opacity .2s ease,visibility 0s linear .3s}
.canvas:not(.in-scene):has(.social-phone-trigger:hover,.social-phone-trigger:focus-visible) .social-phone-hotspot,
.canvas:not(.in-scene) .social-phone-hotspot:hover,
.canvas:not(.in-scene) .social-phone-hotspot:focus-within{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.social-phone-trigger .social-phone-hint{display:none}
.social-phone-hotspot::after{content:"";position:absolute;left:-18px;top:0;width:18px;height:100%}
.header .contact{display:inline-flex;align-items:center;justify-content:center;gap:12px;line-height:20px}
.header .contact span{display:inline-flex;align-items:center;justify-content:center;font-size:21px;line-height:20px;margin-left:0;vertical-align:baseline}
@media(prefers-reduced-motion:reduce){.canvas:not(.in-scene) .social-phone-hotspot{transition:none}}


.window-glass-bridge{background:#080710;filter:none}
/* Outpainted side wings; the original central city retains its existing size. */
.canvas[data-mode=window]{overflow:visible;mask-image:none}
.window-view{overflow:visible}
.window-extensions{position:absolute;top:0;bottom:0;left:calc(50% - 50vw / var(--scale,1));width:calc(100vw / var(--scale,1));overflow:hidden;background:#080710;pointer-events:none}
.window-extensions img{position:absolute;left:50%;top:50%;height:100%;width:100%;object-fit:cover;max-width:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .9s ease}
.window-extensions img.current{opacity:1}
.window-view .city-frames{mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
/* Lightweight atmosphere switcher, sharing the existing weather state. */
.window-state-control{gap:18px;padding:0 14px;height:48px;width:max-content;max-width:calc(100% - 310px);border:1px solid #79637170;border-radius:16px;background:rgba(25,20,30,.79);backdrop-filter:blur(14px);box-shadow:none;transform:scale(var(--control-scale,1));transform-origin:top left;overflow:hidden;font-family:Montserrat,Arial,sans-serif}
.atmosphere-label{font-size:10px;letter-spacing:.09em;color:#b6aab7;flex:none}
.atmosphere-options{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}
.atmosphere-options::-webkit-scrollbar{display:none}
.atmosphere-options button{position:relative;flex:none;height:44px;padding:0 10px;font-size:12px;font-weight:500;color:#d7cfd9;white-space:nowrap;border-radius:6px;transition:color .22s,background-color .22s}
.atmosphere-options button:hover{color:#fff0fa}
.atmosphere-options button[aria-pressed=true]{color:#f078c5;background:#b953a112}
.atmosphere-options button::after{content:"";position:absolute;height:1px;width:22px;left:calc(50% - 11px);bottom:5px;background:#f078c5;opacity:0;transition:opacity .22s}
.atmosphere-options button[aria-pressed=true]::after{opacity:1}
@media(max-width:1100px){.window-state-control{gap:12px;padding:0 10px}.atmosphere-options{gap:6px}.atmosphere-options button{padding:0 8px}}
@media(max-width:650px){.atmosphere-label{display:none}.window-state-control{padding:0 6px}}
/* A single quiet toolbar: the original return button joins the weather controls. */
.window-state-control{height:46px;gap:18px;padding:0 20px;border-color:rgba(168,146,167,.12);border-radius:12px;background:rgba(24,20,29,.64);backdrop-filter:blur(12px);box-shadow:none}
.window-state-control #back{position:static;flex:none;display:flex;align-items:center;gap:10px;height:44px;padding:0;margin:0 10px 0 0;border:0;border-radius:0;background:none;box-shadow:none;font-family:inherit;font-size:12px;font-weight:500;color:#d7cfd9;white-space:nowrap}
.window-state-control #back span{margin:0;font-size:9px;color:#9e909f}
.atmosphere-options{gap:12px}
.atmosphere-options button{padding:0 4px;font-size:12px;font-weight:500;border-radius:0;background:none}
.atmosphere-options button[aria-pressed=true]{background:transparent}
@media(max-width:1100px){.window-state-control{gap:14px;padding:0 18px}.atmosphere-options{gap:10px}.atmosphere-options button{padding:0 4px}}
@media(max-width:650px){.window-state-control{gap:12px;padding:0 12px}.window-state-control #back{margin-right:0}.window-state-control #back span{display:none}}
/* Window controls sit directly over the scene, without a surrounding plate. */
.window-state-control{background:transparent;border:0;box-shadow:none;backdrop-filter:none;border-radius:0}
.window-state-control #back span{display:none}
/* Map the broadcast aperture to the existing plasma, excluding only the baked CRT rim. */
.tv-display{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;overflow:hidden;transform-origin:0 0;transform:matrix3d(.8,-.06087,0,-.00070766,0,1.08215,0,0,0,0,1,0,0,17.2032,0,1)}
.tv-display .tv-video{inset:-4.65% -4.71%;width:109.42%;height:109.3%;object-fit:cover;transform:none;background:none}
/* Keep the opaque screen over the artwork baked into the room, including power-off. */
.tv{background:#08060c}
.tv.is-off .tv-display{visibility:visible}

/* Contact: a quiet glass panel, independent of the scaled room canvas. */
.contact-panel{font-family:Montserrat,Arial,sans-serif;font-weight:500;color:#eae5ed;width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:36px 38px 28px;border:1px solid #a99ab526;border-radius:20px;background:rgba(20,17,27,.93);box-shadow:0 20px 60px #0005;backdrop-filter:blur(20px);overscroll-behavior:contain;scrollbar-width:thin;scroll-padding:24px;overflow:auto}
.contact-panel::backdrop{background:#08060d99;backdrop-filter:blur(3px);animation:contact-backdrop-in .4s ease both}
.contact-panel[open]{animation:contact-panel-in .4s cubic-bezier(.2,.7,.3,1) both}
.contact-panel[open] .contact-heading,.contact-panel[open] .contact-field{animation:contact-content-in .35s ease both}
.contact-panel .contact-field:nth-child(1){animation-delay:50ms}.contact-panel .contact-field:nth-child(2){animation-delay:85ms}.contact-panel .contact-field:nth-child(3){animation-delay:120ms}
.contact-panel.is-closing[open]{animation:contact-panel-out .22s ease both}.contact-panel.is-closing::backdrop{animation:contact-backdrop-out .22s ease both}
.contact-panel .contact-close{right:14px;top:12px;color:#aea2b6;width:36px;height:36px;font-size:25px;font-weight:500;border-radius:50%}
.contact-panel .contact-kicker{font-size:10px;letter-spacing:1.8px;margin:0 0 18px;color:#d18cb6}
.contact-panel h2{font-size:29px;line-height:1.24;letter-spacing:-.7px;font-weight:500;margin:0 0 12px}
.contact-panel .contact-lead{font-size:12px;line-height:1.75;color:#aaa1b5;margin:0 0 27px;max-width:380px}
.contact-field{margin-top:15px}.contact-panel label{margin:0 0 8px;font-size:12px;color:#d4cbdc}
.contact-panel input,.contact-panel textarea{color:#eae5ed;background:#0d0b1390;border:1px solid #a89ab42b;border-radius:9px;padding:11px 12px;font-size:13px;line-height:1.5;min-height:44px;box-shadow:none;transition:border-color .2s;scroll-margin:24px}
.contact-panel input::placeholder,.contact-panel textarea::placeholder{color:#83798e}
.contact-panel textarea{min-height:86px;max-height:180px;resize:vertical}
.contact-panel input:focus,.contact-panel textarea:focus{border-color:#e080b8a6;box-shadow:0 0 0 2px #e080b80d}
.contact-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.contact-label-row label{margin:0}
.contact-types{display:flex;gap:3px}.contact-types button{font-size:10px;padding:7px 9px;color:#8e829b;font-weight:500;border-radius:6px;border:1px solid transparent}.contact-types button[aria-pressed=true]{color:#f19dcc;border-color:#cc73aa36;background:#cf70ac0b}
.contact-panel .contact-submit{width:auto;min-height:44px;margin-top:20px;padding:11px 18px;gap:28px;font-size:11px;letter-spacing:.5px;font-weight:600;background:#a944841c;border:1px solid #d779b571;border-radius:9px;box-shadow:none;color:#efb2d6}.contact-panel .contact-submit:hover{background:#a944842e}.contact-panel .contact-submit span{font-size:18px}
.contact-mail-note{font-size:10px;line-height:1.65;color:#908599;margin:9px 0 0;max-width:340px}
.contact-direct{border-top:1px solid #ab91bf1c;margin-top:22px;padding-top:16px;display:flex;gap:6px;flex-direction:column;font-size:11px;color:#94889f}.contact-direct a{color:#d5bacf;text-decoration:none;width:fit-content;padding:4px 0}.contact-direct a:hover{color:#ff9ed5}
.contact-panel .contact-status{font-size:12px;line-height:1.65;margin-top:14px;color:#c3b6cd}.contact-panel .contact-status:empty{display:none}.contact-panel[data-state=success] .contact-heading{display:none}.contact-panel .contact-status h3{font-size:25px;color:#eae5ed;margin:14px 0}
.contact-panel .field-error{font-size:11px;color:#eca9be}.contact-panel [aria-invalid=true]{border-color:#d77f9b}
.contact-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes contact-panel-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes contact-panel-out{to{opacity:0;transform:scale(.98)}}
@keyframes contact-content-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes contact-backdrop-in{from{background:#08060d00;backdrop-filter:blur(0)}to{background:#08060d99;backdrop-filter:blur(3px)}}
@keyframes contact-backdrop-out{to{background:#08060d00;backdrop-filter:blur(0)}}
@media(max-width:600px){.contact-panel{padding:32px 23px 24px}.contact-panel h2{font-size:26px}.contact-panel input,.contact-panel textarea{font-size:16px}.contact-panel .contact-kicker{font-size:9px}}
@media(prefers-reduced-motion:reduce){.contact-panel[open],.contact-panel[open] *, .contact-panel::backdrop{animation:none!important;transition:none!important}}
body:has(.contact-panel[open]){overflow:hidden}
.contact-panel{max-height:min(calc(100dvh - 28px),var(--contact-available-height,100dvh))}

/* Keep obsolete poster artwork and stale decoded frames out of channel changes. */
.tv-display{background:#08060c}.tv-display .tv-video[data-ready='false']{visibility:hidden}