:root{color-scheme:dark;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;background:#061012}*{box-sizing:border-box}body,html{width:100%;height:100%;margin:0;overflow:hidden;background:#061012}.studio-page{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 46%,#183034 0,#0b1c20 48%,#040a0c 100%)}.studio-page:after{position:absolute;z-index:1;inset:0;content:"";pointer-events:none;background:linear-gradient(90deg,rgba(3,10,12,.4),transparent 16%,transparent 84%,rgba(3,10,12,.4))}.scene-viewport{z-index:2;inset:0}.scene-viewport,.studio-scene{position:absolute;overflow:hidden}.studio-scene{top:0;height:100%;aspect-ratio:1672/941;isolation:isolate;box-shadow:0 0 48px rgba(0,0,0,.68);transform:translate3d(var(--scene-x),0,0);transition:transform 1.25s steps(12);will-change:transform}.room-image{z-index:0;width:100%;height:100%;object-fit:fill;image-rendering:pixelated}.frog-actor{position:absolute;z-index:5;top:var(--actor-y);left:var(--actor-x);width:var(--actor-size);aspect-ratio:3/4;transform:translate(-50%,-50%);transition:top 1.25s steps(12),left 1.25s steps(12),width 1.25s steps(12);animation:frog-breathe 2.7s steps(3) infinite}.frog-image{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.frog-shadow{position:absolute;z-index:1;right:15%;bottom:10%;left:15%;height:17%;border-radius:50%;background:rgba(3,8,8,.42)}.frog-checking-mail .frog-image,.frog-working .frog-image{animation:frog-focus 1.1s steps(2) infinite}.frog-bathing .frog-image{animation:frog-float 1.8s steps(3) infinite}.frog-sleeping{animation:frog-sleep 3.2s steps(4) infinite}.frog-eating .frog-image{animation:frog-nom .72s steps(2) infinite}.activity-effect{position:absolute;z-index:4;color:#f7ef9a;font-size:clamp(.5rem,1.05vw,1rem);font-weight:900;line-height:1;text-shadow:2px 2px 0 #182b2a}.effect-typing{top:12%;right:-10%;display:flex;gap:.22em}.effect-typing i{width:.35em;height:.35em;background:currentColor;animation:typing-dot .75s steps(2) infinite}.effect-typing i:nth-child(2){animation-delay:.15s}.effect-typing i:nth-child(3){animation-delay:.3s}.effect-idle,.effect-resting{top:-2%;right:-4%;animation:effect-hover 1.8s steps(3) infinite}.effect-bubbles{inset:0}.effect-bubbles i{position:absolute;bottom:20%;width:.55em;height:.55em;border:2px solid #c7f6ef;border-radius:50%;animation:bubble-rise 2s steps(8) infinite}.effect-bubbles i:first-child{left:5%;animation-delay:0s}.effect-bubbles i:nth-child(2){left:31%;animation-delay:.7s}.effect-bubbles i:nth-child(3){right:25%;animation-delay:1.2s}.effect-bubbles i:nth-child(4){right:3%;animation-delay:.35s}.effect-sleeping{top:-18%;right:-16%;animation:sleep-letter 2s steps(5) infinite}.effect-sleeping span{font-size:.65em}.effect-eating{top:-8%;right:-24%;font-size:clamp(.4rem,.75vw,.72rem);animation:nom-pop .72s steps(2) infinite}.effect-mail{top:-9%;right:-7%;animation:mail-bob 1.2s steps(3) infinite}.scene-vignette{position:absolute;z-index:8;inset:0;pointer-events:none;box-shadow:inset 0 0 8vh rgba(0,10,12,.48)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes frog-breathe{0%,to{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-1.2%)}}@keyframes frog-focus{0%,to{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}@keyframes frog-float{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4%) rotate(1deg)}}@keyframes frog-sleep{0%,to{transform:translate(-50%,-50%) scaleY(.96)}50%{transform:translate(-50%,-50%) scaleY(1)}}@keyframes frog-nom{0%,to{transform:scale(1)}50%{transform:scale(1.04,.96)}}@keyframes typing-dot{0%,40%{opacity:.24;transform:translateY(0)}50%,to{opacity:1;transform:translateY(-45%)}}@keyframes effect-hover{0%,to{transform:translateY(0);opacity:.75}50%{transform:translateY(-18%);opacity:1}}@keyframes bubble-rise{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}to{opacity:0;transform:translateY(-430%) scale(1.2)}}@keyframes sleep-letter{0%{opacity:0;transform:translateY(20%) scale(.8)}25%,65%{opacity:1}to{opacity:0;transform:translate(45%,-90%) scale(1.1)}}@keyframes nom-pop{0%,to{transform:scale(.9);opacity:.7}50%{transform:scale(1.08);opacity:1}}@keyframes mail-bob{0%,to{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-18%)}}@media (prefers-reduced-motion:reduce){.activity-effect,.activity-effect i,.frog-actor,.frog-image,.studio-scene{transition:none!important;animation:none!important}}