/* All decorative art is raster imagery; CSS only lays out content and states. */
:root{color-scheme:dark;--paper:#f4ecd9;--soft:#c1c9d0;--gold:#efc58e;--night:#182536;font-family:'Microsoft YaHei','PingFang SC',sans-serif;color:var(--paper);background:var(--night)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100svh;height:100dvh;position:relative;font-size:15px;line-height:1.7}
a{color:inherit;text-decoration:none}button{font:inherit}h1,p{margin:0}a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}a:hover{color:var(--gold)}
.skip-link{position:fixed;top:-100px;left:24px;z-index:10;background:var(--night);padding:10px 20px}.skip-link:focus{top:16px}
.studio-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.studio-scene picture,.studio-scene img{display:block;width:100%;height:100%}.studio-scene img{object-fit:cover}
.studio-header{position:absolute;z-index:3;left:5.5%;right:5.5%;top:max(30px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;gap:24px}
.site-kind{font-size:14px;letter-spacing:.14em}.studio-header nav{display:flex;gap:28px;font-size:13px}.studio-header a{padding-block:8px}
#main{position:absolute;inset:0;outline:none}
.studio-intro{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-50%);width:43%;max-width:660px;pointer-events:none}
.studio-intro a{pointer-events:auto}
.author-role{font-size:14px;letter-spacing:.12em;color:var(--soft)}
h1{font-family:Consolas,'Courier New',monospace;font-weight:700;font-size:clamp(68px,7.3vw,124px);letter-spacing:-.075em;line-height:1.16;margin:13px 0 0}
.author-name{font-size:16px;letter-spacing:.16em;margin-top:10px;color:var(--gold)}
.introduction{font-size:15px;line-height:1.95;color:var(--soft);margin-top:30px}
.main-entrances{display:flex;align-items:center;gap:32px;margin-top:32px}
.primary-link{background:url('/assets/home/generated/button.webp') center/100% 100% no-repeat;padding:17px 30px;min-height:56px;font-size:15px;font-weight:700;color:var(--paper)}
.primary-link:hover{filter:brightness(1.16);color:var(--paper)}
.about-link{padding:12px 4px;text-decoration:underline;text-underline-offset:7px;font-size:15px}
.project-directory{margin-top:44px;max-width:470px}.project-directory p{font-size:11px;letter-spacing:.08em;color:#a5b1bd;margin-bottom:10px}
.project-directory nav{display:flex;flex-wrap:wrap;gap:7px 20px;font-size:12px;color:#d8d9d4}.project-directory a{padding-block:3px}
.scene-entrances{position:absolute;inset:0;pointer-events:none}.scene-link{position:absolute;pointer-events:auto;display:block;min-width:44px;min-height:44px}
.scene-link span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;background:url('/assets/home/generated/button.webp') center/100% 100% no-repeat;padding:10px 20px;font-size:12px;color:var(--paper)}
.scene-link:hover span,.scene-link:focus-visible span{filter:brightness(1.2)}
.scene-door span{left:auto;right:0;transform:none}
.scene-workbench{left:57%;top:55%;width:26%;height:29%}.scene-door{left:85%;top:32%;width:10%;height:32%}
.studio-pet{position:absolute;left:63%;top:38%;width:6%;height:8%;min-width:34px;min-height:34px}.studio-pet canvas{width:100%;height:100%;display:block}
.studio-footer{position:absolute;z-index:3;bottom:max(23px,env(safe-area-inset-bottom));left:5.5%;right:5.5%;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#bdc5cc}.studio-footer>div{display:flex;align-items:center;gap:24px}
.motion-toggle{border:0;padding:4px 0;background:none;color:inherit;cursor:pointer;font-size:11px}.motion-toggle:hover{color:var(--gold)}.motion-toggle[hidden]{display:none}
@media(max-width:1100px) and (orientation:landscape){.studio-intro{left:5.5%;width:47%}.project-directory{max-width:360px}.scene-door span{left:auto;right:0;transform:none}}
@media(max-width:900px) and (orientation:portrait){
 .studio-header{top:max(20px,env(safe-area-inset-top));left:6%;right:6%;gap:12px}.site-kind{font-size:11px;letter-spacing:.03em}.studio-header nav{gap:14px;font-size:11px}
 .studio-intro{top:10%;left:8%;width:84%;max-width:none;transform:none}
 .author-role{font-size:12px}h1{font-size:clamp(58px,12vw,94px);margin-top:7px}.author-name{font-size:13px;margin-top:3px}.introduction{margin-top:19px;font-size:13px;line-height:1.8}
 .main-entrances{gap:26px;margin-top:22px}.primary-link{padding:14px 23px;min-height:48px;font-size:13px}.about-link{font-size:13px}
 .project-directory{margin-top:16px;max-width:390px}.project-directory p{display:none}.project-directory nav{font-size:11px;gap:3px 10px}
 .scene-workbench{left:15%;top:63%;width:49%;height:20%}.scene-door{left:73%;top:55%;width:18%;height:22%}
 .scene-link span{font-size:10px;padding:8px 13px}.scene-door span{left:auto;right:0;transform:none}
 .studio-pet{left:48%;top:60%;width:9%;height:6%}
 .studio-footer{left:6%;right:6%;bottom:max(14px,env(safe-area-inset-bottom));font-size:9px}.studio-footer>div{gap:12px}.motion-toggle{font-size:10px}.art-caption{max-width:90px;text-align:right;line-height:1.5}
}
@media(max-height:730px) and (orientation:portrait){
 .studio-intro{top:12%}h1{font-size:56px}.author-role{font-size:11px}.author-name{font-size:12px}.introduction{margin-top:12px;font-size:12px}.main-entrances{margin-top:14px}.project-directory{margin-top:14px}.project-directory p{display:none}.project-directory nav{font-size:10px;gap:2px 13px}
}
@media(max-height:590px) and (orientation:portrait){.studio-intro{top:11%}h1{font-size:48px}.introduction{font-size:11px;margin-top:8px}.main-entrances{margin-top:10px}.primary-link{padding:11px 18px;min-height:44px}.project-directory{display:none}.studio-header nav{gap:10px}.site-kind{font-size:10px}}
@media(max-height:620px) and (orientation:landscape){
 .studio-header{top:12px}.studio-intro{top:50%}.author-role{font-size:11px}h1{font-size:60px;margin-top:2px}.author-name{font-size:12px;margin-top:0}.introduction{font-size:12px;margin-top:12px}.main-entrances{margin-top:16px;gap:24px}.primary-link{padding:12px 22px;min-height:44px;font-size:13px}.about-link{font-size:13px}.project-directory{display:none}.studio-footer{bottom:10px}.scene-link span{font-size:10px;padding:8px 14px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:360px){.art-caption{display:none}}

/* Object layers use the original generated pixels, registered to the scene. */
.interaction-layer,.interaction-object{position:absolute;pointer-events:none;background-repeat:no-repeat;opacity:0}
.interaction-layer{background-size:100% 100%;transition:opacity .18s}
.door-view,.desk-clean{z-index:1}
.door-view{transition:opacity .01s .68s}.desk-clean{transition:opacity .01s .55s}
.door-active .door-view,.desk-active .desk-clean{transition-delay:0s}
.interaction-object{z-index:2}
.interactions-ready .interaction-object{opacity:1}
.door-leaf{transform-origin:100% 50%;transition:transform .68s cubic-bezier(.2,.7,.2,1),filter .68s;backface-visibility:hidden}
.desk-model{transform-origin:50% 90%;transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .55s}
.interactions-ready.door-active .door-view,.interactions-ready.desk-active .desk-clean{opacity:1}
.door-active .door-leaf{transform:perspective(900px) rotateY(-78deg);filter:brightness(.72)}
.desk-active .desk-model{transform:translateY(-12px) rotate(-2deg);filter:brightness(1.09)}
.studio-pet{z-index:3}
.studio-header{justify-content:flex-end}
.studio-header nav{flex-wrap:wrap;justify-content:flex-end;row-gap:0;max-width:100%}
.studio-header nav a{white-space:nowrap}
.studio-scene img{object-position:right center}
@media(max-width:900px) and (orientation:portrait){.studio-scene img{object-position:center}}
.main-entrances{margin-top:34px;gap:34px}
.primary-link{font-size:16px;padding:14px 30px;min-height:50px}
.about-link{font-size:16px}
.studio-intro{transform:translateY(-48%)}
.scene-link:focus-visible{outline-offset:-2px}
@media(max-width:900px) and (orientation:portrait){.studio-intro{top:12%;transform:none}.main-entrances{margin-top:25px}.primary-link,.about-link{font-size:14px}.primary-link{min-height:46px;padding:12px 26px}.desk-active .desk-model{transform:translateY(-7px) rotate(-2deg)}}
@media(max-height:590px) and (orientation:portrait){.studio-intro{top:12%}.main-entrances{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.interaction-layer,.interaction-object{transition:none!important}}

/* Motion stays inside the scene's original raster objects. */
[hidden]{display:none!important}
.studio-pet canvas{position:absolute;left:-100%;top:-100%;width:300%;height:300%;pointer-events:none}
.scene-toys{position:absolute;inset:0;pointer-events:none}
.scene-toy{position:absolute;z-index:2;display:block;min-width:44px;min-height:44px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.pet-hit{cursor:pointer}
.scene-toy:focus-visible{outline-offset:3px}
.lantern-light{position:absolute;z-index:2;pointer-events:none;background-repeat:no-repeat;opacity:0;transition:filter .45s ease}
.ambience-ready .lantern-light{opacity:1;animation:lantern-flicker 5.7s ease-in-out infinite}
.ambience-ready .lantern-hanging{animation-duration:7.3s;animation-delay:-2.1s}
.lantern-dim .lantern-desk{animation:none;filter:brightness(.38) saturate(.7)}
@keyframes lantern-flicker{0%,100%{filter:brightness(1)}18%{filter:brightness(1.13)}27%{filter:brightness(.94)}39%{filter:brightness(1.08)}55%{filter:brightness(.98)}72%{filter:brightness(1.16)}85%{filter:brightness(1.04)}}
.desk-active .desk-model{animation:house-curiosity 2.8s ease-in-out infinite}
@keyframes house-curiosity{0%,100%{translate:0 0}50%{translate:0 -5px}}
.window-life{position:absolute;z-index:0;overflow:hidden;pointer-events:none;opacity:0}
.ambience-ready .window-life{opacity:1}
.window-flight{position:absolute;top:18%;left:-70px;width:var(--bird-size,58px);height:var(--bird-size,58px);opacity:0;animation:window-crossing 32s linear infinite}
.window-flight span{display:block;width:100%;height:100%;background:url('/assets/home/generated/distant-birds.webp') 0 0/200% 200% no-repeat;animation:window-wing .7s steps(1,end) infinite;filter:brightness(.55)}
.window-flight.flight-companion{top:24%;animation-delay:1.2s;scale:.72}
.flight-companion span{animation-delay:-.25s}
@keyframes window-crossing{0%{transform:translate(0,10px);opacity:0}3%{opacity:.7}29%{opacity:.7}34%{transform:translate(var(--flight-distance),-16px);opacity:0}100%{transform:translate(var(--flight-distance),-16px);opacity:0}}
@keyframes window-wing{0%,100%{background-position:0 0}25%{background-position:100% 0}50%{background-position:0 100%}75%{background-position:100% 100%}}
.scene-sleeping .studio-scene *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.studio-scene *{animation:none!important;transition:none!important}.window-life{display:none}.desk-active .desk-model{translate:none}}