:root{color-scheme:light;background:#f5f5f1;color:#495045;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;padding:20px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}[hidden]{display:none!important}
.canvas{--x:0px;--y:0px;--tilt:0deg;position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 40px);min-height:calc(100svh - 40px);background:#fff}
.light-field{position:absolute;inset:-15%;pointer-events:none;background:radial-gradient(ellipse at 72% 25%,#e5eadd65,transparent 47%),linear-gradient(125deg,transparent 40%,#f7f8f335 48%,#e9eddf38 55%,transparent 64%);transform:translate3d(calc(var(--x)*-.6),calc(var(--y)*-.6),0);animation:breathe 16s ease-in-out infinite}
.orbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:translate3d(calc(var(--x)*-.3),calc(var(--y)*-.3),0)}.orbit ellipse{fill:none;stroke:#dfe3da;stroke-width:1;vector-effect:non-scaling-stroke}
.composition{position:absolute;width:min(42vw,560px);height:auto;aspect-ratio:1;left:51%;top:9%;pointer-events:none;animation:enter-art 1.4s ease both}
.composition svg{width:100%;height:100%;display:block}.ground-shadow{position:absolute;inset:0;transform:translate3d(calc(var(--x)*-.65),calc(var(--y)*-.3),0)}
.geometry{position:absolute;inset:0;transform:translate3d(var(--x),var(--y),0) rotate(var(--tilt));will-change:transform}.geometry svg{animation:float 9s ease-in-out infinite}
.grain{position:absolute;inset:0;opacity:.019;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.mail{width:max-content;position:absolute;left:10%;bottom:19%;display:flex;align-items:center;max-width:calc(100% - 48px);color:inherit;text-decoration:none;outline-offset:8px;touch-action:manipulation;animation:enter-mail .9s ease both}
.mail-icon{width:66px;height:66px;flex:none;display:grid;place-items:center;border:1px solid #e3e6de;border-radius:19px;background:linear-gradient(135deg,#ffffff,#fafbf8);box-shadow:0 3px 7px #52604304,0 12px 30px #52604306,inset 0 1px #fff;transition:border-color .3s,box-shadow .3s,transform .3s}
.mail-icon svg{width:29px;height:29px;stroke:#727d67;stroke-width:1.15;fill:none;stroke-linejoin:round;stroke-linecap:round}
.reveal{flex-shrink:0;display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .4s cubic-bezier(.2,.7,.3,1),opacity .25s}
.reveal-inner{overflow:hidden;min-width:0;display:flex;align-items:center;gap:18px;visibility:hidden;transition:visibility 0s .4s}
.email{padding-left:23px;font-size:18px;font-weight:400;letter-spacing:-.035em;line-height:1.5;white-space:nowrap}.mail-arrow{width:19px;height:19px;flex:none;margin-right:4px;fill:none;stroke:#87927d;stroke-width:1.1;transition:transform .25s}
.mail[data-open="true"] .reveal{grid-template-columns:1fr;opacity:1}.mail[data-open="true"] .reveal-inner{visibility:visible;transition-delay:0s}.mail[data-open="true"] .mail-icon{border-color:#cbd2c1;box-shadow:0 4px 12px #52604307,0 14px 30px #5260430a}.mail:hover .mail-arrow{transform:translate(2px,-2px)}.mail:active .mail-icon{transform:scale(.97)}.mail:focus-visible,.motion-toggle:focus-visible{outline:1px solid #87927d}.mail:focus-visible .mail-icon{border-color:#87927d}
.motion-toggle{position:absolute;right:4%;bottom:5%;width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;color:#89917f;opacity:.65;cursor:pointer;touch-action:manipulation;outline-offset:3px}.motion-toggle svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}.motion-toggle[aria-pressed="true"]{opacity:1;color:#657652}.motion-toggle:hover{opacity:1}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes enter-art{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes enter-mail{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
::selection{background:#e3e8da;color:#30392b}.is-hidden .geometry svg,.is-hidden .light-field{animation-play-state:paused}
@media(max-width:680px){body{padding:12px}.canvas{min-height:calc(100vh - 24px);min-height:calc(100svh - 24px)}.composition{width:min(94vw,430px);left:50%;top:13%;margin-left:min(-47vw,-215px)}.orbit{width:180%;left:-43%;height:90%;top:-10%}.mail{left:50%;bottom:21%;transform:translateX(-50%);animation:none;max-width:calc(100% - 32px)}.mail-icon{width:58px;height:58px;border-radius:17px}.mail-icon svg{width:26px;height:26px}.email{font-size:16px;padding-left:14px;letter-spacing:-.04em}.reveal-inner{gap:10px}.mail-arrow{width:16px;height:16px;margin-right:2px}.motion-toggle{right:5%;bottom:4%}.composition{margin-left:0;transform:translateX(-50%);animation:none}}
@media(max-width:360px){.email{font-size:15px;padding-left:10px}.reveal-inner{gap:6px}.mail-icon{width:52px;height:52px}.mail-arrow{width:14px;height:14px}}
@media(max-height:500px) and (min-width:681px){.composition{width:360px;top:-15%;left:52%}.mail{bottom:18%}.mail-icon{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.geometry,.ground-shadow,.light-field,.orbit{transform:none!important}.mail:hover .mail-arrow{transform:none}.geometry{will-change:auto}}
@media(forced-colors:active){.composition,.orbit,.light-field,.grain{display:none}.mail-icon{border:1px solid ButtonText}.mail,.mail-icon svg{color:LinkText;stroke:LinkText}.email{color:LinkText}}