:root{--brand-sage:#9caf88;--brand-deep:#4f6b4a;--brand-light:#eef2ea;--brand-ink:#1f2a1e;--brand-muted:#56634f;--tone-sage:var(--brand-ink);--tone-bot:var(--brand-deep);--tone-muted:#3b4737;--light:#eef2ea;--veil:238,242,234}*,:before,:after{box-sizing:border-box}html,body{background:var(--light);height:100%;margin:0;font-family:Outfit,Avenir Next,Segoe UI,system-ui,sans-serif;overflow:hidden}#bg{width:100%;height:100%;display:block;position:fixed;inset:0}.veil{pointer-events:none;background:radial-gradient(ellipse 45% 40% at 50% 48%, rgba(var(--veil),.92) 0%, rgba(var(--veil),.55) 55%, rgba(var(--veil),0) 100%);position:fixed;inset:0}main{height:100%;padding:env(safe-area-inset-top,0px) 24px env(safe-area-inset-bottom,0px);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}:root[data-tone=dark]{--tone-sage:var(--brand-light);--tone-bot:var(--brand-sage);--tone-muted:#c9d5be}.mark{width:clamp(120px,22vmin,190px);height:auto;animation:.9s cubic-bezier(.2,.8,.2,1) both arrive}h1{letter-spacing:-.03em;color:var(--tone-sage);margin:clamp(14px,3vmin,26px) 0 0;font-size:clamp(56px,13vmin,120px);font-weight:700;line-height:.95;animation:.9s cubic-bezier(.2,.8,.2,1) .12s both arrive}h1 span{color:var(--tone-bot)}h1,h1 span,.domain{transition:color 1.2s}.ear,.arm{fill:var(--brand-deep)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.domain{letter-spacing:.32em;color:var(--tone-muted);margin:clamp(12px,2.4vmin,20px) 0 0;padding-left:.32em;font-size:clamp(13px,2vmin,17px);font-weight:500;animation:.9s cubic-bezier(.2,.8,.2,1) .24s both arrive}.mark{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;overflow:visible}.mark:focus-visible{outline:2px solid var(--brand-deep);outline-offset:8px;border-radius:28px}.bob{transform-box:view-box;transform-origin:60px 100px}.blink{transform-origin:50% 60px;transform-box:view-box;animation:5s infinite blink}.grin,.z{opacity:0}.z{fill:var(--brand-muted);font-size:11px;font-weight:700}.mark[data-mood=dozing] .blink{animation:none;transform:scaleY(.1)}.mark[data-mood=dozing] .z{animation:2.6s ease-in-out infinite snooze}.mark[data-mood=happy] .bob{animation:.6s cubic-bezier(.3,.7,.4,1) hop}.mark[data-mood=happy] .smile,.mark[data-mood=waving] .smile{opacity:0}.mark[data-mood=happy] .grin,.mark[data-mood=waving] .grin{opacity:1}.arm{opacity:0;transform-box:view-box;transform-origin:105px 64px}.mark[data-mood=waving] .arm{animation:1.8s ease-in-out wave}.again{border:1px solid color-mix(in srgb, currentColor 45%, transparent);min-height:36px;color:var(--tone-muted);font:inherit;letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:999px;align-items:center;gap:7px;margin:clamp(16px,3vmin,26px) 0 0;padding:7px 16px 7px 13px;font-size:14px;font-weight:500;line-height:1.2;transition:color 1.2s,border-color .2s;animation:.9s cubic-bezier(.2,.8,.2,1) .36s both arrive;display:inline-flex}.again:hover{border-color:currentColor}.again:focus-visible{outline-offset:3px;outline:2px solid}.again svg{flex:none;width:15px;height:15px}.hint{letter-spacing:.04em;color:var(--tone-muted);margin:8px 0 0;font-size:12px;font-weight:500;transition:color 1.2s,opacity .6s,visibility 0s .6s;animation:.9s cubic-bezier(.2,.8,.2,1) .48s backwards arrive}.hint[data-learned]{opacity:0;visibility:hidden}.leaf{pointer-events:none;width:22px;height:22px;animation:leaf var(--dur) linear var(--delay) both;position:fixed;left:-40px}.leaf svg{width:100%;height:100%;animation:1.3s ease-in-out infinite alternate sway;display:block}.leaf .blade{fill:var(--brand-sage)}.leaf:nth-child(odd) .blade{fill:var(--brand-deep)}.leaf .vein{stroke:var(--brand-light);stroke-width:1.2px;fill:none}@keyframes blink{0%,94%,to{transform:none}96%{transform:scaleY(.1)}}@keyframes arrive{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes hop{0%,to{transform:none}35%{transform:translateY(-9px)scale(1.03,.97)}65%{transform:translateY(1px)scale(.98,1.02)}}@keyframes wave{0%{opacity:0;transform:rotate(-20deg)}10%{opacity:1;transform:rotate(-150deg)}25%,55%{transform:rotate(-122deg)}40%,70%{transform:rotate(-162deg)}88%{opacity:1;transform:rotate(-145deg)}to{opacity:0;transform:rotate(-20deg)}}@keyframes leaf{0%{opacity:0;transform:translate(0)rotate(0)}8%,90%{opacity:1}to{opacity:0;transform:translate(calc(100vw + 80px), var(--fall)) rotate(var(--spin))}}@keyframes sway{0%{transform:translateY(-10px)rotate(-18deg)}to{transform:translateY(10px)rotate(18deg)}}@keyframes snooze{0%{opacity:0;transform:translateY(4px)}30%{opacity:1}to{opacity:0;transform:translate(6px,-14px)}}@media (prefers-reduced-motion:reduce){.mark,h1,.domain,.again,.hint,.blink,.bob,.z{animation:none!important}.again,.hint,h1,h1 span,.domain{transition:none}}
