.zit-shell{position:relative;width:100%;height:100%;min-height:420px;overflow:visible;isolation:isolate}
.zit-canvas{position:absolute;top:0;bottom:0;left:clamp(220px,24vw,420px);right:-2%;z-index:2;opacity:0;transition:opacity .35s ease}
.zit-canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.zit-fallback{position:absolute;z-index:1;top:50%;right:-2%;left:auto;transform:translateY(-50%);display:block;width:min(76%,980px);height:min(92%,850px);object-fit:contain;object-position:right center;transition:opacity .35s ease;filter:drop-shadow(0 24px 30px rgba(30,42,38,.08))}
.zit-shell.is-interactive.is-ready .zit-canvas{opacity:1}
.zit-shell.is-interactive.is-ready .zit-fallback{opacity:0;pointer-events:none}
.zit-shell.is-static .zit-canvas{display:none}
.zit-counter,.zit-hint,.zit-bonk,.zit-flash{opacity:0;pointer-events:none}
.zit-shell.is-interactive.is-ready .zit-counter,.zit-shell.is-interactive.is-ready .zit-hint{opacity:1}
.zit-counter{position:absolute;z-index:5;right:4%;bottom:10.8%;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.12em;color:rgba(30,42,38,.54);transition:opacity .25s ease}
.zit-counter strong{margin-left:6px;color:#1e2a26;font-size:18px;letter-spacing:-.03em}
.zit-hint{position:absolute;z-index:5;right:4%;bottom:5%;display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid rgba(30,42,38,.16);border-radius:999px;background:rgba(255,247,232,.72);backdrop-filter:blur(10px);color:#1e2a26;font-size:10px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.11em;transition:opacity .2s ease,transform .2s ease}
.zit-hint span{width:7px;height:7px;border-radius:50%;background:#ffd17b;box-shadow:0 0 0 4px rgba(255,209,123,.18)}
.zit-shell.is-tree-hover .zit-hint{transform:scale(1.05);background:rgba(255,247,232,.92)}
.zit-bonk{position:absolute;z-index:7;right:22%;top:27%;color:#2e1a27;font-size:clamp(54px,6vw,92px);font-weight:900;line-height:.75;letter-spacing:-.07em;text-shadow:0 7px 0 rgba(255,209,123,.95);transform:rotate(-10deg) scale(.5)}
.zit-bonk.is-visible{animation:zitBonk .6s cubic-bezier(.16,.88,.22,1)}
@keyframes zitBonk{0%{opacity:0;transform:translateY(10px) rotate(-16deg) scale(.35)}25%{opacity:1;transform:translateY(0) rotate(8deg) scale(1.13)}75%{opacity:1;transform:translateY(-5px) rotate(-4deg) scale(1)}100%{opacity:0;transform:translateY(-28px) rotate(-8deg) scale(.86)}}
.zit-flash{position:absolute;z-index:6;inset:0;background:radial-gradient(circle at 48% 45%,rgba(255,209,123,.42),transparent 17%)}
.zit-flash.is-visible{animation:zitFlash .35s ease-out}
@keyframes zitFlash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@media(max-width:900px){.zit-shell{min-height:260px}.zit-canvas{left:0;right:0}.zit-fallback{top:50%;right:0;left:0;transform:translateY(-50%);margin-inline:auto;width:min(100%,620px);height:100%;object-position:center center;filter:none}.zit-counter,.zit-hint,.zit-bonk,.zit-flash{display:none!important}}
@media(prefers-reduced-motion:reduce){.zit-canvas{display:none!important}.zit-fallback{opacity:1!important}.zit-counter,.zit-hint,.zit-bonk,.zit-flash{display:none!important}}