:root{color-scheme:light;background:#e3dcd4;color:#3b2115;font-family:'Nunito',ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%}
.scene{--figure:min(54svh,76vw,460px);min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,4svh,40px);padding:28px 20px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 43%,#eee9e2 0,#e3dcd4 70%,#d9d0c6 100%)}
h1{margin:0;font-weight:900;font-size:clamp(44px,9svh,88px);line-height:1.05;letter-spacing:-.045em;text-align:center}
.stage{position:relative;width:var(--figure);height:var(--figure);flex:none}
.character{display:block;position:relative;padding:0;margin:0;border:0;background:transparent;width:100%;height:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:default;transform:translate3d(var(--x,0px),var(--y,0px),0) rotate(var(--turn,0deg));transition:transform .22s ease-out;outline:none}
.character:focus-visible{outline:2px solid #80532e;outline-offset:6px;border-radius:35%}
.motion{display:block;width:100%;height:100%;transform-origin:50% 90%;will-change:transform}
.character img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.shadow{position:absolute;left:50%;bottom:1%;width:74%;height:6%;transform:translateX(-50%);border-radius:50%;background:#59402c;opacity:.19;filter:blur(12px);transition:transform .35s,opacity .35s;z-index:-1}
.scene.active .character{cursor:pointer}
.scene.active .motion{animation:greeting 1.15s ease-in-out infinite}
.scene.active .shadow{transform:translateX(-50%) scale(.88);opacity:.12}
@keyframes greeting{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(-2.4deg)}50%{transform:translateY(-5px) rotate(1deg)}75%{transform:translateY(-11px) rotate(2deg)}}
.socials{display:flex;align-items:center;justify-content:center;gap:clamp(30px,5vw,48px)}
.socials a{color:inherit;display:grid;place-items:center;width:48px;height:48px;border-radius:10px;transition:transform .2s}
.socials svg{width:38px;height:38px}
.socials a:hover{transform:translateY(-3px)}
.socials a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.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}
.error{max-width:28rem;text-align:center;font-size:1rem}
[hidden]{display:none!important}
@media(max-width:600px) and (orientation:portrait){.scene{--figure:min(86vw,48svh,400px);gap:clamp(32px,6svh,60px)}h1{font-size:clamp(44px,12vw,62px)}}
@media(max-height:480px) and (orientation:landscape){.scene{--figure:53svh;gap:10px;padding:12px}h1{font-size:36px}.socials a{width:44px;height:44px}.socials svg{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.character{transform:none;transition:none}.scene.active .motion{animation:none}.shadow,.socials a{transition:none}.scene.active .character img{filter:drop-shadow(0 0 12px #ae814133)}}