.tilo2d{--h:96%;--lid:#1a323c;position:relative;aspect-ratio:1.25;overflow:hidden;isolation:isolate;background:#e9f1e6;contain:paint}
.t2d-bg{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:center 22%;transform:translate(calc(var(--px,0)*-6px),calc(var(--py,0)*-3px));transition:transform .25s ease-out}
.t2d-figure,.t2d-desk{position:absolute;left:50%;bottom:2%}
.t2d-figure{height:var(--h);aspect-ratio:1024/1420;z-index:2;transform:translateX(-50%) translate(calc(var(--px,0)*3px),calc(var(--py,0)*1px));transition:transform .25s ease-out}
.t2d-desk{height:calc(var(--h)*.2782);width:auto;z-index:3;pointer-events:none;transform:translateX(-50%) translate(calc(var(--px,0)*5px),0);transition:transform .25s ease-out}
.t2d-inner{position:absolute;inset:0;animation:t2d-bob 3.2s ease-in-out infinite alternate}
.t2d-pose{position:absolute;left:0;top:0;width:100%;height:auto}
.t2d-wave{opacity:0}
.is-waving .t2d-wave{opacity:1}.is-waving .t2d-idle{opacity:0}
.tilo2d .t2d-hit{position:absolute;left:8%;top:2%;width:84%;height:68%;min-width:0;z-index:6;background:transparent;border:0;border-radius:40%;box-shadow:none;cursor:pointer;padding:0;margin:0}
.tilo2d .t2d-hit:focus-visible{outline:3px solid #2355c4;outline-offset:2px}
/* per-pose anchors (percent of figure box) */
.tilo2d{--glow-x:75.2%;--glow-y:54.2%;--ll-x:35.6%;--ll-y:39.4%;--lr-x:68.5%;--lr-y:32.7%;--sa-x:88%;--sa-y:46%;--sb-x:66.5%;--sb-y:63%}
.tilo2d.is-waving{--glow-x:76.2%;--glow-y:57%;--ll-x:36%;--ll-y:37.1%;--lr-x:69.3%;--lr-y:31.4%;--sa-x:9%;--sa-y:21%;--sb-x:90%;--sb-y:48%}
.t2d-glow{position:absolute;left:var(--glow-x);top:var(--glow-y);width:24%;height:30%;transform:translate(-50%,-50%) rotate(14deg);border-radius:50%;background:radial-gradient(ellipse at center,rgba(120,240,255,.55),rgba(120,240,255,.18) 55%,transparent 72%);mix-blend-mode:screen;pointer-events:none;animation:t2d-glow 2.6s ease-in-out infinite alternate}
.t2d-lid{position:absolute;left:var(--ll-x);top:var(--ll-y);width:21.4%;height:17.6%;transform:translate(-50%,-50%) scaleY(0);transform-origin:50% 0;border-radius:50%;background:var(--lid);pointer-events:none;animation:t2d-blink 4.2s infinite}
.t2d-lid:after{content:"";position:absolute;left:22%;right:22%;top:55%;height:14%;border-bottom:3px solid #f6e8d0;border-radius:0 0 50% 50%}
.t2d-lid-r{left:var(--lr-x);top:var(--lr-y)}
.t2d-spark{position:absolute;width:5.4%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);background:#fff7d6;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);pointer-events:none;filter:drop-shadow(0 0 3px rgba(255,200,80,.9))}
.t2d-spark-a{left:var(--sa-x);top:var(--sa-y);animation:t2d-twinkle 3.4s ease-in-out infinite}
.t2d-spark-b{left:var(--sb-x);top:var(--sb-y);width:4%;animation:t2d-twinkle 3.4s ease-in-out 1.7s infinite}
.tilo2d .tilo-speech{left:2%;top:4%;max-width:26%;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .2s,transform .2s;pointer-events:none;z-index:7;font-size:11px;padding:7px 9px}
.tilo2d.is-waving .tilo-speech{opacity:1;transform:none}
.tilo2d .scene-facts{z-index:7;bottom:4%;right:2%}
@keyframes t2d-bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes t2d-glow{from{opacity:.35}to{opacity:.9}}
@keyframes t2d-blink{0%,92%,100%{transform:translate(-50%,-50%) scaleY(0)}94%,96%{transform:translate(-50%,-50%) scaleY(1)}}
@keyframes t2d-twinkle{0%,55%,100%{transform:translate(-50%,-50%) scale(0) rotate(0)}75%{transform:translate(-50%,-50%) scale(1) rotate(25deg)}}
@media(max-width:900px){.tilo2d{aspect-ratio:1.15}}
@media(max-width:600px){.tilo2d{aspect-ratio:.95;--h:83%}.tilo2d .tilo-speech{max-width:40%;white-space:nowrap;font-size:9px;padding:5px 7px;top:3%}.tilo2d .scene-facts{max-width:34%;padding:4px 5px;font-size:7px;bottom:auto;top:3%}.tilo2d .scene-facts strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){.t2d-inner,.t2d-glow,.t2d-lid,.t2d-spark{animation:none}.t2d-glow{opacity:.6}.t2d-spark{display:none}.t2d-bg,.t2d-figure,.t2d-desk{transition:none}}