@layer components{.paper-grain{z-index:100;pointer-events:none;opacity:.075;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");background-size:180px 180px,700px 700px;position:fixed;inset:0}.dark .paper-grain{opacity:.06;mix-blend-mode:screen}.hero-fade-bottom{-webkit-mask-image:linear-gradient(#000 0% 62%,#0000 100%);mask-image:linear-gradient(#000 0% 62%,#0000 100%)}.hero-fade-both{-webkit-mask-image:linear-gradient(#0000 0%,#000 28% 70%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 28% 70%,#0000 100%)}.site-header[data-scrolled=true]{background-color:color-mix(in oklab, var(--background) 82%, transparent);box-shadow:0 1px 0 var(--border);-webkit-backdrop-filter:saturate(1.4)blur(14px)}.phone{--phone-radius:58px;--phone-bezel:12px;border-radius:var(--phone-radius);padding:var(--phone-bezel);background:linear-gradient(145deg,#2b2b2e,#0d0d0f 40%,#1c1c1f);position:relative;box-shadow:inset 0 0 0 1.5px #6d6d72,inset 0 0 0 3.5px #121214,0 30px 60px -20px #141e3259,0 10px 20px -10px #00000040}.phone-screen{border-radius:calc(var(--phone-radius) - var(--phone-bezel));background:var(--screen);color:#111;position:relative;overflow:hidden}.dark .phone-screen{color:#f2f2f2}.bubble{--bubble-bg:#e9e9eb;--bubble-fg:#111;background:var(--bubble-bg);width:fit-content;max-width:78%;color:var(--bubble-fg);overflow-wrap:anywhere;text-align:left;border-radius:18px;padding:7px 12px 8px;font-size:clamp(12.5px,3.4vw,14px);line-height:1.32;position:relative}.dark .bubble{--bubble-bg:#26262a;--bubble-fg:#f2f2f2}.bubble[data-from=me]{--bubble-bg:#64748a;--bubble-fg:#fff;margin-left:auto}.dark .bubble[data-from=me]{--bubble-bg:#4b5f78}.bubble[data-tail=true]:before,.bubble[data-tail=true]:after{content:"";height:17px;position:absolute;bottom:0}.bubble[data-tail=true]:before{background:var(--bubble-bg);width:18px}.bubble[data-tail=true]:after{background:var(--screen);width:10px}.bubble[data-from=them][data-tail=true]:before{border-bottom-right-radius:14px;left:-6px}.bubble[data-from=them][data-tail=true]:after{border-bottom-right-radius:10px;left:-10px}.bubble[data-from=me][data-tail=true]:before{border-bottom-left-radius:14px;right:-6px}.bubble[data-from=me][data-tail=true]:after{border-bottom-left-radius:10px;right:-10px}.typing-dot{opacity:.35;background:currentColor;border-radius:999px;width:7px;height:7px;animation:1.2s ease-in-out infinite typing-dot}.typing-dot:nth-child(2){animation-delay:.15s}.typing-dot:nth-child(3){animation-delay:.3s}.bubble-enter{transform-origin:var(--bubble-origin,bottom left);animation:.42s cubic-bezier(.2,0,0,1) both bubble-in}.bubble[data-from=me].bubble-enter{--bubble-origin:bottom right}.float-tile{animation:7s ease-in-out infinite alternate float-tile}.hero-enter>*{animation:.7s cubic-bezier(.2,0,0,1) both hero-in}.hero-enter>:nth-child(2){animation-delay:80ms}.hero-enter>:nth-child(3){animation-delay:.16s}.hero-enter>:nth-child(4){animation-delay:.24s}.hero-enter>:nth-child(5){animation-delay:.36s}.wordmark{background-image:linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 32%, transparent), color-mix(in oklab, var(--foreground) 4%, transparent) 85%);color:#0000;-webkit-background-clip:text;background-clip:text}}@keyframes typing-dot{0%,60%,to{opacity:.35;transform:translateY(0)}30%{opacity:.8;transform:translateY(-2px)}}@keyframes bubble-in{0%{opacity:0;transform:translateY(8px)scale(.96)}to{opacity:1;transform:none}}@keyframes float-tile{0%{transform:translateY(-5px) rotate(var(--tilt,0deg))}to{transform:translateY(5px) rotate(var(--tilt,0deg))}}@keyframes hero-in{0%{opacity:0;filter:blur(4px);transform:translateY(10px)}to{opacity:1;filter:blur();transform:none}}@media (prefers-reduced-motion:reduce){.typing-dot,.bubble-enter,.float-tile,.hero-enter>*{animation:none!important}}