@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/inter.woff2) format('woff2')}
:root{--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;--logo:#60c2cf;--ease:cubic-bezier(.2,.8,.2,1)}
html[data-theme=dark]{--bg:#2c2e32;--bg2:#36393e;--bg3:#232528;--fg:#f4f4f2;--mut:#a3a5a9;--hair:rgba(244,244,242,.16);--panel:rgba(255,255,255,.06);--acc:#60c2cf;--acc-ink:#60c2cf;--btn-fg:#2c2e32;color-scheme:dark}
html[data-theme=light]{--bg:#f2f1ee;--bg2:#f7f6f3;--bg3:#e9e7e2;--fg:#111112;--mut:#6e6e73;--hair:rgba(17,17,18,.13);--panel:rgba(255,255,255,.55);--acc:#60c2cf;--acc-ink:#1b8f9e;--btn-fg:#f2f1ee;color-scheme:light}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--font);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .5s var(--ease),color .5s var(--ease)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--acc-ink);outline-offset:4px;border-radius:6px}
.label{font:500 11px/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

.top{position:absolute;inset:0 0 auto;z-index:10;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px clamp(18px,3.4vw,44px);padding-top:max(18px,env(safe-area-inset-top));pointer-events:none}
.top>*{pointer-events:auto}
.mini{display:block;line-height:0;justify-self:start}
.mini img{display:block;height:16px;width:auto}
.status{margin:0;display:flex;align-items:center;gap:9px}
.status i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(96,194,207,.55)}70%,100%{box-shadow:0 0 0 8px rgba(96,194,207,0)}}
.right{justify-self:end;display:flex;align-items:center;gap:18px}
.navlink{font-size:14px;font-weight:500;text-decoration:none;color:var(--fg);position:relative;padding:4px 0;transition:opacity .3s}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--logo);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.navlink:hover::after,.navlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.back span{display:inline-block;transition:transform .35s var(--ease)}
.back:hover span{transform:translateX(-4px)}
.toggle{position:relative;width:62px;height:30px;border-radius:99px;border:1px solid var(--hair);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.toggle svg{width:13px;height:13px;fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;position:relative;z-index:1;opacity:.5;transition:opacity .3s}
.toggle .moon{fill:var(--fg);stroke:none}
.toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:22px;border-radius:99px;background:var(--hair);transition:transform .45s var(--ease)}
html[data-theme=dark] .toggle .knob{transform:translateX(29px)}
html[data-theme=dark] .toggle .moon,html[data-theme=light] .toggle .sun{opacity:1}

.stage{background:radial-gradient(120% 90% at 50% 35%,var(--bg2),var(--bg) 55%,var(--bg3));transition:background .5s;position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#gl.grabbing{cursor:grabbing}
#gl.over-hook{cursor:pointer}
.fallback{position:absolute;left:50%;top:50%;width:min(80vw,820px);transform:translate(-50%,-50%)}
.intro{position:absolute;left:0;right:0;top:clamp(78px,11vh,104px);z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 18px}
.intro>*{pointer-events:auto}
h1,h2{font-family:var(--font);font-weight:600;letter-spacing:-.035em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(26px,2.6vw,38px)}
.introrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 14px;margin-top:18px}
.intro h1{pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px 0 14px;border-radius:99px;background:var(--logo);color:#16181b;font:600 14px/1 var(--font);letter-spacing:-.01em;text-decoration:none;box-shadow:0 6px 24px rgba(96,194,207,.28);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pill svg{width:12px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;transform-origin:50% 0;margin-top:-2px}
.pill:hover,.pill.hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(96,194,207,.38)}
.pill:hover svg,.pill.hover svg,.pill:focus-visible svg{animation:swing 1.1s ease-in-out infinite}
.pill:active{transform:scale(.96)}
@keyframes swing{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.pill:not(.ghost) svg{animation:swing 1.1s ease-in-out 1.2s 2}
.pill.ghost{background:transparent;color:var(--fg);border:1px solid var(--hair);box-shadow:none;cursor:pointer;font-family:var(--font)}
.pill.ghost:hover,.pill.ghost.hover{border-color:var(--logo);box-shadow:0 0 0 3px rgba(96,194,207,.15);transform:translateY(-2px)}
.pill .bricks{width:16px;height:13px;fill:none;stroke:var(--logo);stroke-width:1.6;margin:0;transform-origin:50% 100%}
.pill.ghost:hover .bricks,.pill.ghost.hover .bricks{animation:hop .7s var(--ease) infinite}
.pill.ghost[aria-busy=true]{opacity:.55;pointer-events:none}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px) rotate(-6deg)}}
.mail{display:inline-block;margin-top:12px;font-size:14px;color:var(--mut);text-decoration:none;transition:color .3s}
.mail:hover{color:var(--fg)}
.stat{position:absolute;left:50%;bottom:clamp(30px,5vh,52px);transform:translateX(-50%);margin:0;white-space:nowrap;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s}
.stat.on{opacity:1}

.dock{position:absolute;right:clamp(18px,3.4vw,44px);bottom:clamp(18px,4vh,40px);z-index:3;display:flex;align-items:flex-end;gap:18px;padding:14px 16px 12px;border:1px solid var(--hair);border-radius:22px;background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ctl{display:flex;flex-direction:column;align-items:center;gap:8px}
.ctl .label{font-size:10px}
.pad{position:relative;width:92px;height:92px;border-radius:50%;border:1px solid var(--hair);touch-action:none;cursor:grab;background:radial-gradient(circle,transparent 30%,var(--hair) 31%,transparent 32%)}
.pad::before,.pad::after{content:"";position:absolute;background:var(--hair)}
.pad::before{left:50%;top:10px;bottom:10px;width:1px}
.pad::after{top:50%;left:10px;right:10px;height:1px}
.nub,.grip{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--fg);box-shadow:0 2px 10px rgba(0,0,0,.25);transition:transform .35s var(--ease);z-index:1}
.nub::after,.grip::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--logo)}
.dragging .nub,.dragging .grip{transition:none}
.lever{position:relative;width:34px;height:92px;border-radius:99px;border:1px solid var(--hair);touch-action:none;cursor:grab}
.lever::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;background:var(--hair)}
.lever .grip{width:28px;height:28px;margin:-14px 0 0 -14px}
.lever .grip::after{inset:9px}
.acts{display:flex;flex-direction:column;gap:8px;padding-bottom:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:99px;border:1px solid var(--fg);background:var(--fg);color:var(--btn-fg);font:500 14px/1 var(--font);letter-spacing:-.01em;cursor:pointer;transition:transform .3s var(--ease),opacity .3s,background .3s,color .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.28;cursor:default}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--hair)}
.btn.ghost:hover{border-color:var(--fg)}
.hint{margin:0 0 4px;font-size:9.5px;line-height:1.5;letter-spacing:.1em;opacity:.8}


@media (max-width:760px){
 .stage{height:auto;min-height:0;overflow:visible;padding-top:70px;display:flex;flex-direction:column}
 .intro{position:static;padding:8px 18px 0;order:-1}
 h1{font-size:24px;max-width:none}
 .introrow{margin-top:14px;gap:10px}
 .pill{height:36px;font-size:13px}
 .mail{margin-top:10px}
 #gl{position:relative;inset:auto;height:52svh;min-height:340px}
 .stat{bottom:auto;top:calc(70px + 70px + 52svh - 30px)}
 .dock{position:relative;right:auto;bottom:auto;margin:0 14px 18px;justify-content:space-between;gap:10px;padding:14px}
 .acts{padding-bottom:22px}
 .status{font-size:10px}
}
@media (max-width:370px){.pad{width:80px;height:80px}.lever{height:80px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* page transitions */
@view-transition{navigation:auto}
.top{view-transition-name:topbar}
::view-transition-old(root){animation:vt-out .42s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
.home #gl{animation:fadein 1s var(--ease) both}
@keyframes fadein{from{opacity:0}}
.home .intro,.home .dock{transition:opacity .4s var(--ease),transform .5s var(--ease)}
.leaving.home .intro,.leaving.home .dock,.leaving.home .stat{opacity:0;transform:translateY(14px)}
.home #gl{transition:opacity .2s linear}

/* contact page */
.cpage{min-height:100svh;overflow-x:clip;background:radial-gradient(120% 90% at 30% 30%,var(--bg2),var(--bg) 55%,var(--bg3)) fixed}
.cpage .top{position:absolute}
.orb{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(closest-side,rgba(96,194,207,.16),transparent);pointer-events:none;z-index:0;transform:translate(70vw,40vh);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
html[data-theme=light] .orb{background:radial-gradient(closest-side,rgba(96,194,207,.22),transparent)}
.cwrap{position:relative;z-index:1;min-height:100svh;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.1fr minmax(0,500px);gap:48px clamp(40px,8vw,140px);align-items:center;padding:120px clamp(18px,3.4vw,44px) 80px}
.big{font-size:clamp(56px,9vw,136px);letter-spacing:-.05em;line-height:.95;margin:14px 0 30px}
.big .w{display:inline-block;white-space:nowrap}
.big .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(6deg);filter:blur(8px);animation:ch .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
@keyframes ch{to{opacity:1;transform:none;filter:none}}
.big .w:last-child .ch:last-child{color:var(--logo)}
.rv{opacity:0;transform:translateY(22px);filter:blur(6px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * 90ms + 200ms)}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.big-mail{display:inline-block;font:600 clamp(22px,2.4vw,34px)/1.1 var(--font);letter-spacing:-.03em;text-decoration:none;color:var(--fg);background:linear-gradient(var(--logo),var(--logo)) 0 100%/0 2px no-repeat;padding-bottom:6px;transition:background-size .6s var(--ease),color .3s;overflow-wrap:anywhere}
.big-mail:hover,.big-mail:focus-visible{background-size:100% 2px}
.c-meta{display:flex;align-items:center;gap:16px;margin-top:16px}
.copy{border:1px solid var(--hair);background:none;border-radius:99px;padding:7px 15px;font-size:13px;cursor:pointer;transition:border-color .3s,transform .3s var(--ease)}
.copy:hover{border-color:var(--fg)}
.copy:active{transform:scale(.95)}
.wo{display:grid;gap:10px}
.fld{position:relative;display:block;padding-top:18px}
.fld input,.fld textarea{width:100%;font:400 18px/1.4 var(--font);letter-spacing:-.01em;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:10px 0;border-radius:0;outline:0;resize:vertical}
.fld span{position:absolute;left:0;top:28px;font-size:17px;color:var(--mut);pointer-events:none;transform-origin:left top;transition:transform .4s var(--ease),color .3s}
.fld input:focus+span,.fld input:not(:placeholder-shown)+span,.fld textarea:focus+span,.fld textarea:not(:placeholder-shown)+span{transform:translateY(-24px) scale(.72);color:var(--fg)}
.fld i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--logo);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.fld:focus-within i{transform:scaleX(1)}
.fld textarea{min-height:92px}
.send{margin-top:22px;height:50px;padding:0 26px;gap:12px;overflow:hidden}
.send .arr{display:inline-block;transition:transform .45s var(--ease)}
.send:hover{transform:translateY(-2px)}
.send:hover .arr{transform:translateX(5px)}
.wo.done .send{background:var(--logo);border-color:var(--logo);color:#1b1d20}
.wo.done .send .arr{transform:translateX(40px);opacity:0}
.hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}
.form-note{min-height:1.4em;margin:12px 0 0;font-size:15px;color:var(--fg)}
.form-note.err{color:#e5484d}
html[data-theme=light] .form-note.err{color:#c4262e}
.leaving.cpage .cwrap{transition:opacity .35s ease,transform .38s cubic-bezier(.4,0,.2,1),filter .35s;opacity:0;transform:translateY(-18px);filter:blur(6px)}
@media (max-width:860px){
 .cwrap{grid-template-columns:1fr;align-items:start;padding-top:110px;gap:36px}
 .big{font-size:clamp(56px,17vw,96px);margin-bottom:22px}
}
@media (max-width:560px){ .status{display:none} .top{grid-template-columns:auto 1fr} .right{gap:14px} }
@media (prefers-reduced-motion:reduce){.rv,.big .ch{opacity:1;transform:none;filter:none;animation:none}}