.icon-button{position:relative;display:grid;place-items:center;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease-spring),filter .2s var(--ease-standard),opacity .35s var(--ease-standard),background .2s var(--ease-standard)}.icon-button svg{width:50%;height:50%}.icon-button--lg{width:80px;height:80px;border-radius:26px}.icon-button--md{width:60px;height:60px;border-radius:20px}.icon-button--sm{width:48px;height:48px;border-radius:16px}.icon-button--primary{background:var(--accent);color:#fff;box-shadow:0 4px 24px #0071e352}.icon-button--secondary{background:#ffffff6b;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:var(--accent);box-shadow:0 8px 24px #1e3c781f}@media(hover:hover){.icon-button:hover{transform:scale(1.04);filter:brightness(1.1)}}.icon-button:active{transform:scale(.92)}.icon-button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.icon-button.is-hidden{opacity:0;transform:scale(.6);pointer-events:none}.icon-button__tooltip{position:absolute;left:calc(100% + 12px);top:50%;padding:6px 10px;border-radius:8px;background:#1d1d1fdb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f5f5f7;font:500 13px/1.2 var(--font-sans);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-4px,-50%);transition:opacity .15s var(--ease-standard),transform .15s var(--ease-standard)}.icon-button__tooltip--left{left:auto;right:calc(100% + 12px);transform:translate(4px,-50%)}.icon-button:focus-visible .icon-button__tooltip{opacity:1;transform:translateY(-50%);transition-delay:.4s}@media(hover:hover){.icon-button:hover .icon-button__tooltip{opacity:1;transform:translateY(-50%);transition-delay:.4s}}@property --depth{syntax: "<number>"; inherits: true; initial-value: 0;}.ocean{--ocean-top: color-mix(in oklab, var(--ocean-shallow-top), var(--ocean-deep-top) calc(var(--depth) * 100%));--ocean-bottom: color-mix(in oklab, var(--ocean-shallow-bottom), var(--ocean-deep-bottom) calc(var(--depth) * 100%));position:fixed;inset:0;background:linear-gradient(var(--ocean-top),var(--ocean-bottom));transition:transform 1.2s cubic-bezier(.25,1.15,.4,1),--depth 1.2s var(--ease-standard);will-change:transform;animation:ocean-intro 1.2s cubic-bezier(.2,.8,.3,1) 2.3s both}.ocean__waves{position:absolute;left:0;right:0;bottom:calc(100% - 2px);height:70px;overflow:hidden;animation:ocean-swell 4s ease-in-out infinite}.ocean__wave{position:absolute;left:0;bottom:0;width:200%;animation:ocean-drift linear infinite;will-change:transform}.ocean__wave--back{fill:var(--ocean-wave-back);opacity:.6;bottom:10px}.ocean__wave--mid{fill:var(--ocean-wave-mid);opacity:.8;bottom:10px}.ocean__wave--front{fill:var(--ocean-top)}.ocean__depths{position:absolute;inset:0;overflow:hidden}.ocean__bubble{position:absolute;bottom:-20px;border-radius:50%;background:#ffffff59;opacity:0;animation:ocean-bubble linear infinite;will-change:transform}@keyframes ocean-intro{0%{translate:0 90px}to{translate:0 0}}@keyframes ocean-swell{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,8px,0)}}@keyframes ocean-drift{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes ocean-bubble{0%{transform:translateZ(0);opacity:0}8%{opacity:1}50%{transform:translate3d(12px,-50vh,0)}to{transform:translate3d(-8px,-100vh,0);opacity:1}}.whale{display:block;width:100%;overflow:visible}.whale__tail{transform-box:fill-box;transform-origin:left bottom}.whale__fin{transform-box:fill-box}.whale__fin--left{transform-origin:right center}.whale__fin--right{transform-origin:left center}.whale__flat{fill:var(--wole-blue);stroke:var(--wole-blue);stroke-width:2;opacity:0;pointer-events:none;transition:opacity .9s var(--ease-standard) .15s}.whale--flat .whale__flat{opacity:1;transition:none}.whale__eye{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease-spring)}.whale--sad .whale__eye--left{transform:translateY(5px) scaleY(.65) rotate(16deg)}.whale--sad .whale__eye--right{transform:translateY(5px) scaleY(.65) rotate(-16deg)}.whale--asleep .whale__eye{transform:translateY(6px) scale(1.2,.14);transition-duration:1.4s;transition-timing-function:cubic-bezier(.45,0,.2,1)}.whale__blink{transform-box:fill-box;transform-origin:center;animation:whale-blink 5s infinite}.whale--asleep .whale__blink{animation:none}.whale__eye-happy{transform-box:fill-box;transform-origin:center;animation:whale-eye-pop .45s var(--ease-spring)}.whale__spout{transform-box:fill-box;transform-origin:center bottom;animation:whale-spout .9s cubic-bezier(.2,.8,.3,1) forwards}@keyframes whale-blink{0%,90%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,1,.5)}93%{transform:scaleY(.08);animation-timing-function:cubic-bezier(0,.5,.5,1)}97%,to{transform:scaleY(1)}}@keyframes whale-eye-pop{0%{transform:scale(.4,.2);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes whale-spout{0%{transform:scale(.3,0);opacity:1}45%{transform:scaleY(1.08);opacity:1}to{transform:scaleX(1.25);opacity:0}}.pet{position:relative;display:flex;flex-direction:column;align-items:center}.pet__stage{position:relative;width:min(320px,70vw,calc((100dvh - 290px)*1.09));min-width:140px;cursor:pointer;border-radius:40%;-webkit-tap-highlight-color:transparent}.pet__stage:focus-visible{outline:2px solid var(--accent);outline-offset:8px}.pet__layer{will-change:transform}.pet__layer--reaction{transform-origin:50% 85%}.pet__intro{position:relative}.pet__stage .whale{transition:transform .5s var(--ease-spring)}@media(hover:hover){.pet__stage:hover .whale{transform:scale(1.04,.96) translateY(4px)}}@media(orientation:landscape)and (max-height:560px){.pet__stage{width:min(320px,45vw,calc((100dvh - 70px)*1.09))}}.pet__shadow{width:55%;height:24px;margin-top:var(--space-xs);border-radius:50%;background:radial-gradient(closest-side,rgba(70,120,200,.32),rgba(70,120,200,.12) 60%,transparent);will-change:transform,opacity;filter:opacity(0);transition:filter .6s var(--ease-standard)}.pet--settled .pet__shadow{filter:opacity(1)}.pet__zzz{position:absolute;top:10px;left:55%;height:60px;pointer-events:none}.pet__zzz span{position:absolute;font-weight:700;color:var(--text-secondary);opacity:0;animation:pet-zzz 3s cubic-bezier(.25,.6,.4,1) infinite}.pet__zzz span:nth-child(1){font-size:1rem}.pet__zzz span:nth-child(2){font-size:1.4rem;animation-delay:1s}.pet__zzz span:nth-child(3){font-size:1.9rem;animation-delay:2s}.pet__hearts span{position:absolute;top:10%;font-size:1.6rem;opacity:0;pointer-events:none;animation:pet-heart 2.2s cubic-bezier(.2,.7,.3,1) infinite}.pet__hearts span:nth-child(1){left:5%}.pet__hearts span:nth-child(2){left:45%;animation-delay:.5s}.pet__hearts span:nth-child(3){left:85%;animation-delay:1s}@keyframes pet-zzz{0%{transform:translate3d(0,40px,0) rotate(-10deg) scale(.6);opacity:0}25%{opacity:1}to{transform:translate3d(44px,-24px,0) rotate(10deg) scale(1);opacity:0}}@keyframes pet-heart{0%{transform:translateZ(0) scale(.4);opacity:0}20%{opacity:1}to{transform:translate3d(0,-100px,0) scale(1.15);opacity:0}}.app{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);padding:var(--space-md)}.intro-backdrop{position:fixed;inset:0;background:var(--wole-blue);pointer-events:none;transition:opacity .6s var(--ease-standard),visibility 0s .6s}.intro-backdrop.is-gone{opacity:0;visibility:hidden}@media(orientation:landscape)and (max-height:560px){.app{flex-direction:row;gap:var(--space-lg)}}.app__github{position:fixed;top:max(var(--space-md),env(safe-area-inset-top));right:max(var(--space-md),env(safe-area-inset-right));z-index:1;color:var(--text-primary);animation:github-in .6s var(--ease-standard) 3.2s both}@keyframes github-in{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}.app__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);animation:fade-up .6s var(--ease-standard) 3.2s both}:root{color-scheme:light;--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;--text-body: 400 17px/1.5 var(--font-sans);--bg-primary: #ffffff;--text-primary: #1d1d1f;--text-secondary: #86868b;--accent: #0071e3;--wole-blue: #1a8aff;--ocean-shallow-top: #5cc8e0;--ocean-shallow-bottom: #2a9cc8;--ocean-deep-top: #2a8ff0;--ocean-deep-bottom: #0b4fae;--ocean-wave-mid: #95d8f0;--ocean-wave-back: #cdeefa;--space-xs: 4px;--space-md: 16px;--space-lg: 24px;--ease-standard: cubic-bezier(.25, .1, .25, 1);--ease-spring: cubic-bezier(.25, 1.4, .4, 1)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden;font:var(--text-body);color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}