*{box-sizing:border-box}html,body{margin:0;background:#101617;color:#E9E2D2;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #E3AC62;outline-offset:5px}.room{position:relative;min-height:650px;height:100dvh;overflow:clip;isolation:isolate}.plane{position:absolute;z-index:-2;overflow:visible}.plane>img,.lamp-dark,.lamp-dark img,.desk-dark,.desk-dark img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.room::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(9,16,21,.94),rgba(9,16,21,.08) 40%,transparent 75%)}
.lamp-dark,.desk-dark{opacity:0;transition:opacity .45s;mask-image:radial-gradient(ellipse 28% 32% at 81% 34%,#000 25%,transparent 100%)}.lamp-dark img,.desk-dark img{filter:brightness(.26) saturate(.35)}.lamp-off .lamp-dark,.lamp-off .desk-dark{opacity:1}
.raccoon{position:absolute;left:31%;top:13.6%;width:50%;height:50%;pointer-events:none}.character-color,.breath,.body,.tail,.head-aim,.head-react{position:absolute;inset:0}.raccoon img{position:absolute;inset:0;width:100%;height:100%}.character-color{filter:brightness(1);transition:filter .45s}.lamp-off .character-color{filter:brightness(.62) saturate(.7)}.breath{transform-origin:65% 60%;animation:breathe 4.8s ease-in-out infinite}.body{clip-path:polygon(0 0,56% 0,56% 20%,61% 27%,69% 32%,82% 32%,82% 0,100% 0,100% 100%,45% 100%,45% 60%,0 60%)}.tail{clip-path:polygon(0 58%,40% 58%,47% 62%,45% 78%,44% 100%,0 100%);transform-origin:44% 62%}.head-aim{transform-origin:62% 35%;transform:translate(var(--head-x,0px),var(--head-y,0px)) rotate(var(--head-angle,0deg));transition:transform .14s ease-out}.head-react{mask-image:linear-gradient(#000 0%,#000 34%,transparent 40%);clip-path:polygon(54% 0,82% 0,82% 40%,68% 40%,60% 33%,54% 23%);transform-origin:62% 35%}.blink{clip-path:ellipse(4.6% 4.3% at 68.5% 23%);opacity:0;animation:blink 5.8s steps(1) infinite}.desk-front,.desk-dark{clip-path:polygon(56.3% 39.8%,93% 39.8%,93% 75%,65% 75%,64% 65%,56.3% 65%)}.book-light{position:absolute;left:70%;top:45%;width:23%;height:15%;clip-path:polygon(0 18%,44% 2%,53% 8%,95% 0,100% 66%,58% 100%,5% 66%);background:#E6B86B;opacity:0;mix-blend-mode:soft-light;transition:opacity .3s}.book-active .book-light{opacity:.42}
.greeting .head-react{animation:hello-head 1.1s ease-in-out}.greeting .tail{animation:tail-hello 1.1s ease-in-out}.lamp-react .head-react{animation:lamp-head .9s ease-in-out}.book-react .head-react{animation:book-head .8s ease-in-out}.inactive .anim,.is-reading .breath,.is-reading .blink{animation-play-state:paused!important}.inactive .head-aim{transform:none}.identity{position:absolute;left:6vw;right:6vw;bottom:5.8vh;pointer-events:none}.identity h1{margin:0;font:clamp(3.5rem,7.4vw,7.2rem)/.96 Georgia,"Times New Roman",serif;letter-spacing:-.055em;font-weight:400;text-shadow:0 2px 30px #101617}.identity p{margin:1rem 0 0;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.4;text-shadow:0 2px 15px #000}.object{position:absolute;display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.55rem .85rem;border:1px solid #AD8B5C;border-radius:2px;background:rgba(16,22,23,.84);color:#F4E9D6;white-space:nowrap;box-shadow:0 3px 18px #0004}.object::before{content:"";width:7px;height:7px;border-radius:50%;background:#E3AC62;box-shadow:0 0 0 4px #E3AC621A}.object:hover{background:#493D2E}.character-hit,.lamp-switch{position:absolute;border:0;background:none;border-radius:45%;padding:0;color:#F4E9D6}.lamp-switch{border-radius:45%}.scene-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mobile-controls{display:none}.room.is-reading .identity{opacity:0}.room.is-reading .scene-controls,.room.is-reading .mobile-controls{visibility:hidden}.room-panel{position:fixed;inset:0 auto 0 0;margin:0;width:min(43rem,49vw);height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-right:1px solid #725D42;background:#101617;color:#E9E2D2;overflow:auto;box-shadow:30px 0 90px #0006}.room-panel::backdrop{background:#070D1322}.panel-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2rem 2.5rem 1.4rem;background:#101617}.panel-head h2{margin:0;font:2.3rem/1.05 Georgia,serif;font-weight:400;letter-spacing:-.035em}.close{min-height:44px;padding:.4rem .8rem;border:1px solid #78684F;background:none;color:#E9E2D2}.reading-copy{padding:0 2.5rem 2.5rem;max-width:43rem}.reading-copy p{font-size:1.05rem;line-height:1.75;margin:0 0 1.4rem}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}@keyframes blink{0%,91%,96%,100%{opacity:0}92%,95%{opacity:1}}@keyframes hello-head{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg) translateY(-2px)}60%{transform:rotate(2deg)}}@keyframes tail-hello{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}65%{transform:rotate(6deg)}}@keyframes lamp-head{0%,100%{transform:rotate(0)}45%{transform:rotate(5deg)}}@keyframes book-head{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg) translateY(2px)}}
@media(max-width:760px),(max-aspect-ratio:4/3){.room{height:100svh}.plane{mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%)}.identity{left:1.25rem;right:1.25rem;bottom:7rem}.identity h1{max-width:9ch;font-size:3.8rem}.identity p{font-size:1rem;max-width:22rem;line-height:1.5}.scene-controls .object{display:none}.mobile-controls{display:block;position:absolute;bottom:1.5rem;left:1.25rem;right:1.25rem}.mobile-controls nav{display:flex;gap:6px}.mobile-controls button{flex:1;min-height:48px;min-width:0;padding:.5rem .3rem;border:1px solid #8A7352;background:#1A2427E8;color:#F4E9D6;font-size:.875rem}.room::after{background:linear-gradient(0deg,#101617 5%,#101617D9 35%,transparent 70%)}.room-panel{width:100%;border:0}.panel-head{padding:1.35rem 1.25rem}.panel-head h2{font-size:2rem}.reading-copy{padding:0 1.25rem 1.5rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.head-aim{transform:none!important}.blink{opacity:0!important}.greeting .character-color{filter:brightness(1.08)}.greeting.lamp-off .character-color{filter:brightness(.68) saturate(.7)}}

.lamp-flicker .lamp-dark,.lamp-flicker .desk-dark{animation:lamp-discovery .28s linear both}
@keyframes lamp-discovery{0%,100%{opacity:0}25%{opacity:.2}48%{opacity:.03}65%{opacity:.12}}

.room-panel.contact-panel{inset:50% auto auto 6vw;margin:0;transform:translateY(-50%);width:min(31rem,calc(100vw - 2.5rem));height:auto;max-height:calc(100dvh - 3rem);border:1px solid #725D42;border-radius:4px;box-shadow:0 24px 80px #0007}
.contact-panel .panel-head{padding:1.65rem 1.75rem 1.3rem;gap:1rem}
.contact-panel .panel-head h2{font-size:2.15rem}
.contact-panel .reading-copy{padding:0 1.75rem 1.75rem}
.contact-card a{color:inherit;text-decoration:none}
.contact-email{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:12px;padding:1.1rem 1rem;border:1px solid #B39362;border-radius:3px;background:#E3AC6212}
.contact-email>svg{width:26px;height:26px;color:#E3AC62}
.contact-method{display:block;margin-bottom:.25rem;font-size:.875rem;color:#C8B79C}
.contact-email strong{display:block;font-size:clamp(1rem,1.8vw,1.4rem);font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.contact-social{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
.contact-social a{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:48px;padding:.7rem .6rem;border:1px solid #4D493F;border-radius:3px;color:#DED8CB}
.contact-social svg{width:18px;height:18px;flex:none}
.contact-card a:hover{border-color:#E3AC62;background:#E3AC621A}
.contact-card a:focus-visible{outline:2px solid #E3AC62;outline-offset:4px}
@media(max-width:760px),(max-aspect-ratio:4/3){.room-panel.contact-panel{inset:50% auto auto 50%;transform:translate(-50%,-50%)}.contact-panel .panel-head{padding:1.25rem 1.1rem 1.1rem}.contact-panel .panel-head h2{font-size:1.9rem}.contact-panel .reading-copy{padding:0 1.1rem 1.25rem}}

@media(max-width:360px){.contact-social{grid-template-columns:1fr}.contact-social a{justify-content:flex-start;padding-inline:1rem}}

@media(max-width:760px){.room{min-height:760px}}