@font-face{font-family:StudioHand;src:url('fonts/caveat.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:StudioChinese;src:url('fonts/ma-shan-zheng.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--studio-ink:#473d2f;--studio-paper:#fbf3e5;--studio-ui:'PingFang SC','Microsoft YaHei',sans-serif;--studio-serif:'Songti SC','STSong',serif}
body[data-studio-page] .studio-header{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:100%;height:96px;padding:10px clamp(20px,3vw,46px)!important;margin:0!important;background:none!important;border:0!important;z-index:12;pointer-events:none;box-sizing:border-box;color:var(--studio-ink);letter-spacing:0}
body[data-studio-page] .studio-header .studio-brand{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important;text-decoration:none!important;color:var(--studio-ink);text-shadow:0 1px 8px #fff6;line-height:1.1;pointer-events:auto;width:max-content;font-style:normal!important}
body[data-studio-page] .studio-brand .studio-signature{font:500 31px/1 StudioHand,'Bradley Hand',cursive!important;letter-spacing:.1px!important;color:inherit;display:block!important;margin:0!important;text-transform:none}
body[data-studio-page] .studio-brand .studio-chinese{font:400 16px/1.25 StudioChinese,'Kaiti SC',serif!important;letter-spacing:3px!important;display:block!important;margin:3px 0 0 3px!important;color:inherit}
body[data-studio-page] .studio-brand .studio-tagline{font:400 9px/1.4 var(--studio-ui)!important;letter-spacing:2px!important;display:block!important;margin:5px 0 0!important;color:inherit;opacity:.78}
body[data-studio-page] .studio-header .studio-return{grid-column:1;grid-row:1;justify-self:start}
body[data-studio-page] .studio-header .studio-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:9px;pointer-events:auto}
body[data-studio-page] .studio-header :is(.studio-return,.studio-actions>button,.controls>button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 13px!important;border:1px solid #9b886845!important;border-radius:5px!important;background:#fbf3e5eb!important;box-shadow:0 2px 7px #3c29130d!important;color:#514737!important;font:400 12px/1.4 var(--studio-ui)!important;letter-spacing:.3px!important;white-space:nowrap;text-shadow:none;cursor:pointer;backdrop-filter:blur(8px)}
body[data-studio-page] .studio-header :is(#page-music,#sound){width:36px!important;min-width:36px!important;height:36px!important;padding:0!important;border-radius:50%!important;font:18px/1 Georgia,serif!important}
body[data-studio-page] .studio-header [aria-pressed=true][data-music-toggle]{background:#657455!important;color:#fff6df!important}
body[data-studio-page] .studio-header :is(a,button):focus-visible{outline:2px solid #657455;outline-offset:4px}
body[data-studio-page] .studio-header [hidden],body[data-studio-page] #archive-music[hidden]{display:none!important}
body[data-studio-page] .studio-header .studio-actions>#motion{font-size:11px!important}
body[data-studio-page=contact] .studio-header{position:absolute!important;top:0!important;left:0!important}
body[data-studio-page=contact] .studio-actions>#motion{display:none!important}
body[data-studio-page=computer] .room{padding-top:0}
body[data-studio-page=computer] .studio-header{padding-inline:0!important}
body[data-studio-page=homepage] .studio-header{position:absolute!important;top:0!important;left:0!important;height:auto;min-height:130px;grid-template-columns:1fr auto;padding-top:28px!important;align-items:start}
body[data-studio-page=homepage] .studio-header .studio-brand{grid-column:1;justify-self:start;align-items:flex-start;color:#493c2d;transform:rotate(-2deg)!important;transform-origin:left center;text-shadow:0 1px 12px #fff9,0 0 22px #fff5}
body[data-studio-page=homepage] .studio-brand .studio-signature{font-size:clamp(37px,3.5vw,52px)!important}
body[data-studio-page=homepage] .studio-brand .studio-chinese{font-size:22px!important;letter-spacing:4px!important;margin-top:4px!important}
body[data-studio-page=homepage] .studio-brand .studio-tagline{font-size:10px!important;margin-top:9px!important;letter-spacing:2.5px!important}
body[data-studio-page=homepage] .studio-header .controls{grid-column:2;grid-row:1;justify-self:end;display:flex;gap:8px;align-items:center;pointer-events:auto;padding-top:3px}
body[data-studio-page=homepage].night .studio-brand,body[data-studio-weather=night] .studio-brand{color:#f7ead3!important;text-shadow:0 1px 7px #211a14cc!important}
body[data-studio-page=homepage] #return{display:none!important}
body[data-studio-page=homepage] footer :is(#find,#photo-button){border-radius:5px;background:#fbf3e5e8;border:1px solid #9b886845;font:12px/1.4 var(--studio-ui);box-shadow:0 2px 7px #3c29130d}
body[data-studio-page=homepage] .nearby-label{font-family:var(--studio-ui);font-size:12px;letter-spacing:.3px}
body[data-studio-page=contact] .letter h2,body[data-studio-page=experience] .archive-title{font-family:var(--studio-serif);font-weight:500}
@media(max-width:700px){
 body[data-studio-page] .studio-header{height:112px;grid-template-columns:1fr 1fr;grid-template-rows:57px 35px;gap:2px 8px;padding:7px 14px 10px!important}
 body[data-studio-page] .studio-header .studio-brand{grid-column:1/-1;grid-row:1}
 body[data-studio-page] .studio-brand .studio-signature{font-size:26px!important}
 body[data-studio-page] .studio-brand .studio-chinese{font-size:14px!important;margin-top:0!important}
 body[data-studio-page] .studio-brand .studio-tagline{font-size:8px!important;margin-top:2px!important;letter-spacing:1.5px!important}
 body[data-studio-page] .studio-header .studio-return{grid-column:1;grid-row:2}
 body[data-studio-page] .studio-header .studio-actions{grid-column:2;grid-row:2;gap:6px}
 body[data-studio-page] .studio-header :is(.studio-return,.studio-actions>button){font-size:11px!important;min-height:32px;padding:6px 10px!important}
 body[data-studio-page] .studio-header #page-music{height:32px!important;width:32px!important;min-width:32px!important}
 body[data-studio-page=homepage] .studio-header{min-height:122px;height:auto;grid-template-columns:1fr auto;grid-template-rows:auto;padding:20px 18px!important}
 body[data-studio-page=homepage] .studio-header .studio-brand{grid-column:1;grid-row:1}
 body[data-studio-page=homepage] .studio-brand .studio-signature{font-size:36px!important}
 body[data-studio-page=homepage] .studio-brand .studio-chinese{font-size:19px!important;margin-top:5px!important}
 body[data-studio-page=homepage] .studio-brand .studio-tagline{font-size:9px!important;margin-top:7px!important;letter-spacing:1.5px!important}
 body[data-studio-page=contact] .studio-header{position:relative!important}
 body[data-studio-page=journal] main{height:calc(100svh - 112px)}
}
body[data-studio-page] .studio-header .studio-brand{justify-self:center}
body[data-studio-page=homepage] .studio-header .studio-brand{justify-self:start}
body[data-studio-page=journal] main{height:calc(100svh - 96px)}
body[data-studio-page=vibe-coding][data-studio-weather=night] .studio-brand{color:var(--studio-ink)!important;text-shadow:0 1px 8px #fff6!important}
@media(max-width:700px){body[data-studio-page=journal] main{height:calc(100svh - 112px)}}
/* Light ink stays legible on the darker oak corners. */
body:is([data-studio-page=journal],[data-studio-page=experience],[data-studio-page=games],[data-studio-page=music],[data-studio-page=contact]) .studio-header .studio-brand{color:#fff0d4;text-shadow:0 1px 4px #3c241c99,0 0 12px #3c241c44}
/* Reserve the same top band above the photograph so the signature never crosses the pen. */
body[data-studio-page=contact] .studio-header{position:relative!important;background:#8d6746!important}
body[data-studio-page] .studio-actions>#page-music{display:inline-flex!important}
body[data-studio-page=music]:not(.night) .studio-header .studio-brand{color:var(--studio-ink);text-shadow:0 1px 8px #fff6}
@media(max-width:700px){body[data-studio-page=vibe-coding] .studio-header .studio-brand{color:#fff0d4!important;text-shadow:0 1px 4px #3c241c99!important}}
body[data-studio-page=homepage] .studio-brand .studio-tagline{font-size:11px!important;opacity:.9;letter-spacing:1.8px!important}
@media(max-width:700px){body[data-studio-page=homepage] .studio-brand .studio-tagline{font-size:10px!important}}
/* Every inner page is viewed through the same 1280 × 800 scene, with real viewport chrome. */
body.studio-embedded{height:800px!important;min-height:0!important;overflow:hidden!important;background:transparent!important}
html:has(body.studio-embedded){background:transparent!important;overflow:hidden!important}
.studio-embedded .page-room-background{display:none!important}
body.studio-embedded .studio-header .studio-return{visibility:hidden!important}
body.studio-embedded :is(#preview-entry,#show-entry,#replay){display:none!important}
body.studio-embedded[data-studio-page=contact] .studio-header{position:absolute!important;inset:0 0 auto!important;background:none!important}
body.studio-embedded[data-studio-page=contact] main{height:800px!important}
body.studio-embedded[data-studio-page=contact] .studio-brand{padding:7px 16px!important;background:radial-gradient(ellipse,#f7ecdad9 35%,#f7ecda88 65%,transparent 75%)!important;color:#493d2f!important;text-shadow:0 1px 4px #fff8!important}
body.studio-embedded[data-studio-page=music] .listening-note{top:120px!important}
body.studio-embedded[data-studio-page=music] .listening-corner{top:400px!important}
body.studio-embedded[data-studio-page=music] #message{bottom:60px!important}
body.studio-embedded[data-studio-page=vibe-coding] .heading{margin:5px 0 8px!important}
body.studio-embedded[data-studio-page=vibe-coding] h1{font-size:64px!important;line-height:1.05;margin:6px 0 10px!important}
body.studio-embedded[data-studio-page=vibe-coding] .heading .intro{max-width:790px!important;margin:10px auto 0!important;font-size:12px;line-height:1.7}
body.studio-embedded[data-studio-page=vibe-coding] .intro p{margin:0 0 7px}
body.studio-embedded[data-studio-page=vibe-coding] .gallery{max-width:1040px;margin:6px auto 0!important;padding-top:0!important}
body.studio-embedded[data-studio-page=vibe-coding] .cards{padding:15px 18px 18px!important;gap:25px!important}
body.studio-embedded[data-studio-page=vibe-coding] .card-label h2{font-size:20px}
body.studio-embedded[data-studio-page=vibe-coding] .page-footer{margin:8px auto 0!important;padding:9px 24px!important;max-width:1000px;background:none!important;font-size:10px}
body[data-studio-page=homepage] #content #frames{position:absolute;inset:0;background-position:center;background-size:cover;background-color:#8c7354}
body[data-studio-page=homepage] #frames>iframe{position:absolute;left:50%;top:50%;width:1280px!important;height:800px!important;border:0;transform-origin:center}
body[data-studio-page=homepage] #content #return,body[data-studio-page=homepage] #return-secondary{display:block!important;position:absolute;z-index:30;left:20px;top:20px;bottom:auto;right:auto;padding:10px 15px;border:1px solid #9b886860;border-radius:5px;background:#fff6e8ed;color:#514737;font:12px/1.4 var(--studio-ui);box-shadow:0 2px 7px #3c291320;cursor:pointer}
body[data-studio-page=homepage] #return-secondary{left:auto;right:20px;top:auto;bottom:20px}
body[data-studio-page=homepage] #return-secondary[hidden]{display:none!important}
body[data-studio-page=homepage] .studio-header .studio-brand{padding:12px 18px!important;margin:-12px -18px!important;background:radial-gradient(ellipse at 45% 48%,#fff4dfeF 15%,#fff4dfd9 48%,#fff4df66 70%,transparent 82%)!important;text-shadow:0 1px 1px #fff8!important;color:#35281d!important}
body[data-studio-page=homepage].night .studio-header .studio-brand{background:radial-gradient(ellipse,#25251fe8 20%,#25251f99 60%,transparent 82%)!important;color:#fff0d2!important;text-shadow:0 2px 4px #000b!important}
@media(max-width:700px){body[data-studio-page=homepage] #content #return,body[data-studio-page=homepage] #return-secondary{font-size:11px;padding:9px 12px;left:12px;top:12px}body[data-studio-page=homepage] #return-secondary{left:auto;right:12px;top:auto;bottom:12px}}
body.studio-embedded .studio-header{visibility:hidden!important}
body[data-studio-page=homepage] .scene-brand{position:absolute;z-index:28;left:50%;top:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:#44382c;padding:5px 20px;text-shadow:0 1px 4px #fff9;background:radial-gradient(ellipse,#fff1dce6 20%,#fff1dc88 60%,transparent 80%);pointer-events:none}
body[data-studio-page=homepage] .scene-brand .studio-signature{font-size:31px!important;line-height:1!important}
body[data-studio-page=homepage] .scene-brand .studio-chinese{font-size:16px!important;margin-top:3px!important}
body[data-studio-page=homepage] .scene-brand .studio-tagline{font-size:9px!important;margin-top:5px!important}
.scene-controls{position:absolute;right:20px;top:20px;display:flex;align-items:center;gap:8px;z-index:30}
.scene-controls button{width:36px;height:36px;padding:0;border:1px solid #9b886860;border-radius:50%;background:#fff6e8ed;color:#514737;font:18px/1 Georgia,serif;cursor:pointer}
.scene-controls button[hidden]{display:none}
@media(max-width:700px){body[data-studio-page=homepage] .scene-brand{top:12px;padding:3px 10px}body[data-studio-page=homepage] .scene-brand .studio-signature{font-size:24px!important}body[data-studio-page=homepage] .scene-brand .studio-chinese{font-size:14px!important}.scene-controls{right:12px;top:12px;gap:5px}.scene-controls button{width:32px;height:32px}}
body[data-studio-page=homepage] .scene-brand .studio-signature{font-family:StudioHand,'Bradley Hand',cursive!important;font-weight:500}
body[data-studio-page=homepage] .scene-brand .studio-chinese{font-family:StudioChinese,'Kaiti SC',serif!important;font-weight:400;letter-spacing:3px}
body[data-studio-page=homepage] .scene-brand .studio-tagline{font-family:var(--studio-ui)!important;letter-spacing:1.5px}
body.studio-embedded[data-studio-page=contact] .desk{background:none!important}
body.studio-embedded[data-studio-page=contact] .desk::before{content:'';position:absolute;inset:0;pointer-events:none;background:url('../contact/assets/contact-physical-scene-v2.png') center/100% 100% no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent),linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
#frames[data-weather=night]::before,#frames[data-weather=rain]::before{content:'';position:absolute;inset:0;pointer-events:none;background:#17233366}
#frames[data-weather=rain]::before{background:#526b7126}
#frames>iframe{z-index:1}
/* The signature is ink on the scene, without an oval spotlight or translucent plate. */
body[data-studio-page=homepage] .studio-header .studio-brand,
body[data-studio-page=homepage].night .studio-header .studio-brand,
body[data-studio-page=homepage] .scene-brand{background:none!important;border:0!important;box-shadow:none!important}
body[data-studio-page=homepage] .scene-brand{color:#3f3023;text-shadow:0 1px 1px #fff8;-webkit-text-stroke:.15px #f4e5ce80;padding:0 8px}
body[data-studio-page=homepage] .scene-brand .studio-signature{font-size:28px!important}
body[data-studio-page=homepage] .scene-brand .studio-chinese{font-size:15px!important}
body[data-studio-page=homepage] .scene-brand .studio-tagline{font-size:9px!important}
body[data-studio-page=homepage] .studio-header .studio-brand{color:#35281d!important;text-shadow:0 1px 2px #fff9!important;-webkit-text-stroke:.25px #f3e6cf99}
body[data-studio-page=homepage].night :is(.studio-header .studio-brand,.scene-brand){color:#fff0d5!important;text-shadow:0 1px 3px #1b1615cc!important;-webkit-text-stroke:0 transparent}
body.studio-embedded[data-studio-page=contact] .desk::before{mask-image:none!important;mask-composite:add!important}
@media(max-width:700px){body[data-studio-page=homepage] .scene-brand .studio-signature{font-size:24px!important}body[data-studio-page=homepage] .scene-brand .studio-chinese{font-size:14px!important}}

body.studio-embedded[data-studio-page=contact] .desk>.mail-actions{left:180px;top:944px;width:600px;gap:16px}
body[data-studio-page=homepage] .scene-brand{color:#fff0d4;text-shadow:0 1px 2px #39271dbb;-webkit-text-stroke:0 transparent}
body[data-studio-page=homepage]:is([data-section=music],[data-section=computer],[data-section=vibe-coding]) .scene-brand{color:#403328;text-shadow:0 1px 2px #fff8}
body[data-studio-page=homepage].night .scene-brand{color:#fff0d4!important;text-shadow:0 1px 3px #1b1615cc!important}
/* Contact has one continuous photograph behind the live paper overlays. */
body.studio-embedded[data-studio-page=contact] .desk::before{background:none!important}
.contact-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.contact-backdrop[hidden]{display:none!important}
#frames[data-scene=contact]::before{display:none!important}

/* Contact photograph v5: actions follow the integrated name card. */
body.studio-embedded[data-studio-page=contact] .desk>.mail-actions{left:180px;top:964px;width:600px}

/* The computer uses the title area for a taller display. */
body[data-studio-page=homepage][data-section=computer] .scene-brand{display:none!important}
body.studio-embedded[data-studio-page=computer] .studio-header{display:none!important}
body.studio-embedded[data-studio-page=computer] .room{padding-top:64px!important;grid-template-rows:minmax(0,1fr) 24px auto}

body.studio-embedded[data-studio-page=contact] .letter h2{font-size:36px}
body.studio-embedded[data-studio-page=contact] .letter-desc{font-size:16px}
body.studio-embedded[data-studio-page=contact] label{font-size:18px}
body.studio-embedded[data-studio-page=contact] input,body.studio-embedded[data-studio-page=contact] textarea{font-size:19px}
body.studio-embedded[data-studio-page=contact] .privacy{margin-top:30px;font-size:13px}

body.studio-embedded[data-studio-page=contact] main{overflow:clip!important}


/* Motion preferences follow the system; no manual motion control is shown. */
body #motion{display:none!important}