.dive{display:none}
html.mo .dive{display:block;position:relative}
.stage{opacity:var(--k,1);position:relative;display:grid;place-items:center;height:min(56vh,480px);overflow:hidden;border-top:1px solid var(--line)}
.stage > *{grid-area:1/1}
.poster{width:100%;height:100%;position:relative;--po:.335;--pi:.216;--ps:1.18;
  background:radial-gradient(circle at 50% 50%,transparent 0 calc(var(--pi) * 100% - .6%),var(--line) calc(var(--pi) * 100% - .4%) calc(var(--pi) * 100%),
    transparent calc(var(--pi) * 100% + .2%) calc(var(--po) * 100% - .5%),var(--line) calc(var(--po) * 100% - .3%) calc(var(--po) * 100%),transparent calc(var(--po) * 100% + .2%))}
.poster::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%,var(--glow-scene),transparent 78%);background-position:inherit;
  --pm:linear-gradient(to bottom,transparent calc((50% + var(--ry,0px)) * (1 - 1 / var(--ps))),black calc((50% + var(--ry,0px)) * (1 - 1 / var(--ps)) + 50px)),
    linear-gradient(to right,transparent,black 36px,black calc(100% - 36px),transparent);
  -webkit-mask-image:var(--pm);mask-image:var(--pm);-webkit-mask-composite:source-in;mask-composite:intersect}
.core{opacity:var(--k,1);width:clamp(28px,5vmin,48px);aspect-ratio:1;border-radius:50%;background:var(--lime);box-shadow:0 0 48px 12px color-mix(in srgb,var(--lime) 30%,transparent)}
.ring{width:min(46vmin,420px);aspect-ratio:1;border-radius:50%;border:clamp(10px,2vmin,22px) solid var(--raise2);box-shadow:0 0 0 2px var(--lime),inset 0 0 0 2px var(--lime)}
.cta,.pill{transition:background-color var(--dur-xs) var(--ease-ui),scale var(--dur-xs) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){a.cta:hover{background:var(--sweep)}
 }
[data-magnetic]{transition:transform var(--dur-xs) var(--ease-ui),background-color var(--dur-xs) var(--ease-ui),scale var(--dur-xs) var(--ease-ui)}
.cta:focus-visible{outline-offset:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}
 }
html.calm *,html.calm *::before,html.calm *::after{transition:none!important}
html.tsw *,html.tsw *::before,html.tsw *::after{transition:none!important}
.tt{transition:scale var(--dur-xs) var(--ease-ui)}
.tt svg{transition:rotate var(--dur-xs) var(--ease-ui)}
.tt:active{scale:.94}
@media (prefers-reduced-motion:no-preference){html.tsw:not(.calm) .tt svg{transition:rotate var(--dur-xs) var(--ease-ui)!important}
 }
@keyframes entry-up{from{transform:translateY(28px)}to{transform:none}}
@keyframes entry-light{from{opacity:.4;scale:.92}to{opacity:1;scale:1}}
@keyframes drift-l{from{translate:0 0}to{translate:-2vw 0}}
@keyframes drift-r{from{translate:0 0}to{translate:2vw 0}}
@keyframes light-drift{from{translate:0 0;opacity:1}to{translate:-26vw 36vh;opacity:0}}
@keyframes rv-in{0%{translate:0 24px;opacity:.75}100%{translate:0 0;opacity:1}}
@keyframes rv-scale{0%{translate:0 24px;scale:.92;opacity:.75}100%{translate:0 0;scale:1;opacity:1}}
@keyframes rv-late{0%,25%{translate:0 24px;opacity:.75}100%{translate:0 0;opacity:1}}
@keyframes dive-poster{from{scale:var(--ps);opacity:.6}to{scale:1;opacity:1}}
@keyframes dive-core{0%{scale:1.8}45%,100%{scale:1}}
@keyframes dive-hold{from{translate:0 0}to{translate:0 -20px}}
@keyframes dive-out{from{opacity:1}to{opacity:0}}
@keyframes dive-ring{0%{scale:.55;opacity:.5}25%{scale:1;opacity:1}85%{opacity:1}100%{scale:9;opacity:0}}
@media (prefers-reduced-motion:no-preference){html.mo .name .l1{animation:entry-up .8s var(--ease-out) backwards}
html.mo .name .l2{animation:entry-up .8s var(--ease-out) .08s backwards}
html.mo .role{animation:entry-up .8s var(--ease-out) .16s backwards}
html.mo .caps{animation:entry-up .8s var(--ease-out) .24s backwards}
html.mo .hero .cta{animation:entry-up .8s var(--ease-out) .32s backwards}
html.mo .hero .soc,html.mo .proj{animation:entry-up .8s var(--ease-out) .36s backwards}
html.mo .light::before{animation:entry-light 1.1s var(--ease-out) backwards}
}
html.mo .ch01 .light{animation:light-drift 1s linear both}
html.mo .hero .name .l1{animation:entry-up .8s var(--ease-out) backwards,drift-l 1s linear both}
html.mo .hero .name .l2{animation:entry-up .8s var(--ease-out) .08s backwards,drift-r 1s linear both}
html.mo .rv{animation:rv-in 1s linear both}
html.mo .rv-scale{transform-origin:0 50%;animation-name:rv-scale}
html.mo .rv-late{animation-name:rv-late}
html.mo .dive .poster{animation:dive-poster 1s linear both}
html.mo .dive .core{animation:dive-core 1s linear both,dive-hold 1s linear both}
html.mo .dive .ring{animation:dive-ring 1s linear both}
html.mo .dive{height:145vh}
html.mo .ch01 + .agents{margin-top:-145vh}
html.mo .stage{position:sticky;top:0;height:100svh;border-top:0;--rx:0px;--ry:0px}
@media (min-aspect-ratio:1001/1000){html.mo .stage{--rx:16vw}
 }
@media (max-aspect-ratio:999/1000){html.mo .stage{--rx:var(--agx,0px);--ry:var(--agy,-24svh)}
 }
html.mo .stage .ring,html.mo .stage .core{position:relative;left:var(--rx);top:var(--ry)}
html.mo .stage .poster{background-position:var(--rx) var(--ry);transform-origin:calc(50% + var(--rx)) calc(50% + var(--ry))}
@media (max-width:700px){html.mo .dive .stage{--dk:clamp(0px,calc(var(--agh,100svh) - 50svh - var(--ry) - 6px),calc(clamp(14px,2.5vmin,24px) + 2px));
  mask-image:radial-gradient(circle at calc(50% + var(--rx)) calc(50% + var(--ry)),black calc(var(--dk) - 4px),transparent var(--dk)),linear-gradient(to bottom,black calc(var(--agt,62svh) - 40px),transparent calc(var(--agt,62svh) - 12px))}
 }
@media (min-width:701px){html.mo .dive .stage{mask-image:linear-gradient(to right,transparent calc(var(--agr,40vw) + 12px),black max(calc(var(--agr,40vw) + 40px),min(calc(var(--agr,40vw) + 160px),calc(50% + var(--rx) - 48px))))}
 }
html.mo:not(.gl) .dive .stage{animation:dive-out 1s linear both}
@supports (animation-timeline:view()){html.mo .ch01 .light{animation-timeline:scroll(root);animation-duration:auto;animation-range:0 200vh}
html.mo .hero .name .l1,html.mo .hero .name .l2{animation-timeline:auto,scroll(root);animation-duration:.8s,auto;animation-range:normal,0 100vh}
html.mo .rv{animation-timeline:view();animation-duration:auto;animation-range:entry 0% entry 100%}
html.mo .dive{view-timeline:--dive block}
html.mo .dive .stage > *{animation-timeline:--dive;animation-duration:auto;animation-range:cover 100svh cover calc(100% - 100svh - 15vh)}
html.mo:not(.gl) .dive .stage{animation-timeline:--dive;animation-duration:auto;animation-range:cover calc(100% - 100svh - 15vh) cover calc(100% - 100svh)}
html.mo .dive .core{animation-timeline:--dive,--dive;animation-duration:auto,auto;animation-range:cover 100svh cover calc(100% - 100svh - 15vh),cover calc(100% - 100svh - 15vh) cover calc(100% - 100svh)}
}
html.tl .ch01 .light,html.tl .rv,html.tl .dive .stage > *{animation-duration:1s;animation-play-state:paused;animation-delay:calc(var(--p,1) * -1s)}
html.tl .hero .name .l1,html.tl .hero .name .l2{animation-duration:.8s,1s;animation-delay:0s,calc(var(--p,1) * -1s);animation-play-state:running,paused}
html.tl [data-tl=root]{--p:0}
html.tl:not(.gl) .dive .stage{animation-play-state:paused;animation-delay:calc(var(--h,1) * -1s)}
html.tl .dive .core{animation-duration:1s,1s;animation-play-state:paused,paused;animation-delay:calc(var(--p,1) * -1s),calc(var(--h,1) * -1s)}
canvas.sc{position:fixed;left:0;top:0;width:100%;height:100svh;pointer-events:none;z-index:-1;visibility:hidden;opacity:0}
html.mo main{position:relative}
html.gl:not(.xf) .ag-poster{display:none}
html.xf .ag-poster img,html.xf .cr-poster img{opacity:0;transition:opacity .16s var(--ease-ui)}
html.xs .ag-poster img,html.xs .cr-poster img{transition-duration:.08s}
html.mo .ag-track{height:185svh}
html.mo .ag-stage{position:sticky;top:0;height:100svh;min-height:0}
@media (min-width:701px) and (max-height:500px){html.mo .ag-stage,html.mo .cr-stage{height:auto;min-height:100svh}
 }
@media (min-width:701px) and (max-height:500px){html.mo .ag-stage{top:min(0px,calc(100svh - var(--sth,100svh)))}
 }
html.mo .ag-copy{text-shadow:0 0 3px var(--night),0 0 12px var(--night)}
.ag-poster{--ri:calc(min(46vmin,420px) / 2 - clamp(10px,2vmin,22px));--rx:0px;--ry:0px}
@media (min-aspect-ratio:1001/1000){.ag-poster{--rx:16vw}
 }
@media (max-aspect-ratio:999/1000){.ag-poster{--rx:var(--agx,0px);--ry:var(--agy,-24svh)}
 }
.ag-poster img{transform-origin:50% var(--apo,26%);translate:var(--apx,0px) var(--apy,0px);scale:var(--aps,1)}
@media (min-width:701px) and (max-width:1100px) and (max-height:500px){html.mo .stage,.ag-poster{--rx:21vw}
.ag-poster img{transform-origin:calc(50% + 16vw) 50%;translate:5vw 0;scale:.86}
}
@keyframes ag-in{0%{clip-path:circle(calc(var(--ri) * .55) at calc(50% + var(--rx)) calc(50% + var(--ry)))}25%{clip-path:circle(var(--ri) at calc(50% + var(--rx)) calc(50% + var(--ry)))}
  100%{clip-path:circle(calc(var(--ri) * 9) at calc(50% + var(--rx)) calc(50% + var(--ry)))}}
@keyframes ag-drift{from{translate:0 0;scale:1}to{translate:0 calc(var(--apd,1) * -40px);scale:calc(1 + .04 * var(--ads,1))}}
html.mo .ag-poster{animation:ag-in 1s linear both,ag-drift 1s linear both}
html.tl .ag-poster{animation:ag-in 1s linear both;animation-play-state:paused;animation-delay:calc(var(--p,1) * -1s)}
@supports (animation-timeline:view()){html.mo main{timeline-scope:--dive}
html.mo .ag-track{view-timeline:--ag block}
html.mo .ag-poster{animation-timeline:--dive,--ag;animation-duration:auto,auto;animation-range:cover 100svh cover calc(100% - 100svh - 15vh),cover calc(100svh + 30vh) cover calc(100% - 100svh)}
}
@keyframes dg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.dg .ln *{fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.dg .ln .lime{stroke:var(--lime);stroke-width:5}
.dg .p1{--a:0;--b:.3}
.dg .p2{--a:.25;--b:.5}
.dg .p3{--a:.45;--b:.7}
.dg .p4{--a:.65;--b:1}
.dg .tx.p1{--a:0;--b:.3}
.dg .tx.p4{--a:.65;--b:1}
.dg .ln *,.dg .tx{--s:calc(.05 + var(--a) * .45);--e:calc(.05 + var(--b) * .45)}
.dg .tx{fill:var(--text)}
@keyframes dg-label{from{opacity:.55}to{opacity:1}}
html.mo .dg .ln *{animation:dg-draw 1s linear both}
html.mo .dg .tx{animation:dg-label 1s linear both}
@supports (animation-timeline:view()){html.mo .dg{view-timeline:--dg block}
html.mo .dg .tx,html.mo .dg .ln *{animation-timeline:--dg;animation-duration:auto;animation-range:cover calc(var(--s) * 100%) cover calc(var(--e) * 100%)}
}
html.tl .dg .tx,html.tl .dg .ln *{animation-play-state:paused;animation-duration:calc((var(--e) - var(--s)) * 1s);animation-delay:calc((var(--s) - var(--p,1)) * 1s)}
canvas.sc.top{z-index:2}
html.gl:not(.xf) .cr-poster{display:none}
html.mo .cr-track{height:195svh}
html.mo .cr-stage{position:sticky;top:0;height:100svh;min-height:0}
html.mo .wk{position:sticky;top:0;z-index:1;height:100svh;margin-top:-100svh;padding:22svh var(--pad) 0;pointer-events:none;overflow:clip}
html.mo .wk-in{pointer-events:auto;translate:0 110svh;transform-origin:50% 40%}
html.mo .wlink{margin-top:0}
html.mo .craft{margin-bottom:-25svh}
html.gl .cr-copy{opacity:var(--co,1);translate:0 var(--cy,0px)}
@keyframes cr-poster-dive{0%{scale:1;opacity:1}60%,100%{scale:3;opacity:0}}
@keyframes cr-copy-out{0%{opacity:1;translate:0 0}15%{opacity:1}20%,100%{opacity:0;translate:0 -22svh}}
@media (max-width:700px){@keyframes cr-copy-out{0%{opacity:1;translate:0 0}15%{opacity:1}20%,100%{opacity:0;translate:0 22svh}}
}
@keyframes cr-wk-in{0%,20%{translate:0 110svh;scale:.7}100%{translate:0 0;scale:1}}
@keyframes cr-w-drift{from{translate:0 0}to{translate:0 -24px}}
@keyframes cr-p-drift{from{translate:0 0}to{translate:0 -24px}}
html.mo:not(.gl) .cr-poster,html.mo.xf .cr-poster{animation:cr-poster-dive 1s linear both}
html.mo:not(.gl) .cr-copy{animation:cr-copy-out 1s linear both}
html.mo:not(.gl) .wk-in{animation:cr-wk-in 1s linear both}
html.mo:not(.gl) .wk .wlink{animation:cr-w-drift 1s linear both}
@supports (animation-timeline:view()){html.mo .cr-track{view-timeline:--cr block}
html.mo:not(.gl) .cr-poster,html.mo.xf .cr-poster,html.mo:not(.gl) .cr-copy,html.mo:not(.gl) .wk-in{animation-timeline:--cr;animation-duration:auto;animation-range:cover calc(100% - 100svh - 60vh) cover calc(100% - 100svh)}
html.mo:not(.gl) .wk .wlink{animation-timeline:--cr;animation-duration:auto;animation-range:cover calc(100% - 100svh - 9vh) cover calc(100% - 100svh)}
html.mo:not(.gl) .cr-poster,html.mo.xf .cr-poster{animation-name:cr-poster-dive,cr-p-drift;animation-range:cover calc(100% - 100svh - 60vh) cover calc(100% - 100svh),cover 100svh cover calc(100% - 100svh - 60vh)}
}
html.tl:not(.gl) .cr-poster,html.tl.xf .cr-poster,html.tl:not(.gl) .cr-copy,html.tl:not(.gl) .wk-in{animation-play-state:paused;animation-delay:calc(var(--p,1) * -1s)}
html.tl:not(.gl) .wk .wlink{animation-play-state:paused;animation-duration:.15s;animation-delay:calc((.85 - var(--p,1)) * 1s)}
.craft{--wk-k:1.86;--wk-dy:-24px}
html.tl .craft{--wk-dy:0px}
html.mo:not(.gl)[data-theme=light] .craft .wk{background:none}
html.mo:not(.gl)[data-theme=light] .craft .wk::before{content:"";position:absolute;left:calc(50% + var(--wk-k) * 69.5 * max(100vw / 1600, 100svh / 1000));top:calc(50% + var(--wk-dy) - var(--wk-k) * 3.5 * max(100vw / 1600, 100svh / 1000));width:150vmax;height:300vmax;margin:-150vmax 0 0 -75vmax;border-radius:12vmax;background:var(--night);z-index:-1;scale:0;animation:cr-wk-paper 1s linear both;pointer-events:none}
@media (prefers-color-scheme:light){html.mo:not(.gl):not([data-theme]) .craft .wk{background:none}html.mo:not(.gl):not([data-theme]) .craft .wk::before{content:"";position:absolute;left:calc(50% + var(--wk-k) * 69.5 * max(100vw / 1600, 100svh / 1000));top:calc(50% + var(--wk-dy) - var(--wk-k) * 3.5 * max(100vw / 1600, 100svh / 1000));width:150vmax;height:300vmax;margin:-150vmax 0 0 -75vmax;border-radius:12vmax;background:var(--night);z-index:-1;scale:0;animation:cr-wk-paper 1s linear both;pointer-events:none}}
@media (max-width:700px){html.mo:not(.gl)[data-theme=light] .craft .wk::before{left:calc(50% - var(--wk-k) * 55 * max(100vw / 640, 100svh / 1386));top:calc(50% + var(--wk-dy) - var(--wk-k) * 289 * max(100vw / 640, 100svh / 1386))}
 @media (prefers-color-scheme:light){html.mo:not(.gl):not([data-theme]) .craft .wk::before{left:calc(50% - var(--wk-k) * 55 * max(100vw / 640, 100svh / 1386));top:calc(50% + var(--wk-dy) - var(--wk-k) * 289 * max(100vw / 640, 100svh / 1386))}}
}
@keyframes cr-wk-paper{0%,25%{scale:0}60%,100%{scale:1}}
@supports (animation-timeline:view()){html.mo:not(.gl)[data-theme=light] .craft .wk::before{animation-timeline:--cr;animation-duration:auto;animation-range:cover calc(100% - 100svh - 60vh) cover calc(100% - 100svh)}
 @media (prefers-color-scheme:light){html.mo:not(.gl):not([data-theme]) .craft .wk::before{animation-timeline:--cr;animation-duration:auto;animation-range:cover calc(100% - 100svh - 60vh) cover calc(100% - 100svh)}}
}
html.tl:not(.gl)[data-theme=light] .craft .wk::before{animation-play-state:paused;animation-delay:calc(var(--p,1) * -1s)}
@media (prefers-color-scheme:light){html.tl:not(.gl):not([data-theme]) .craft .wk::before{animation-play-state:paused;animation-delay:calc(var(--p,1) * -1s)}}
@keyframes m5-rise24{from{translate:0 24px}to{translate:0 0}}
@keyframes m5-rise32{from{translate:0 32px}to{translate:0 0}}
@keyframes m5-rail{from{translate:0 16px}to{translate:0 0}}
@keyframes m5-hair{from{transform:scaleX(.3)}to{transform:none}}
@keyframes m5-draw{from{transform:scaleX(0)}to{transform:none}}
@keyframes m5-layer7{from{opacity:.7}to{opacity:1}}
@keyframes m5-panel{from{transform:scaleX(1.06)}to{transform:none}}
@keyframes m5-q{from{scale:.92}to{scale:1}}
@keyframes m5-cta{0%,50%{translate:0 16px}100%{translate:0 0}}
@keyframes m5-igp{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m5-igs{from{transform:scale(.92)}to{transform:none}}
@keyframes m5-igr{from{transform:rotate(-60deg)}to{transform:none}}
@keyframes m5-ring{0%,70%{transform:scale(0)}85%,100%{transform:none}}
html.mo .exp li{animation:m5-rise24 1s linear both}
html.mo .exp li::before{animation:m5-hair 1s linear both}
html.mo .xrule{animation:m5-draw 1s linear both}
html.mo .taste .stmt{animation:m5-rise24 1s linear both}
html.mo .contact .panel::before{animation:m5-panel 1s linear both}
html.mo .contact .q{animation:m5-q 1s linear both}
html.mo .contact .cta{animation:m5-cta 1s linear both}
html.mo .appcard{animation:m5-rise32 1s linear both}
html.mo .appcard::after{animation:m5-layer7 1s linear both}
html.mo .ig .igp{animation:m5-igp 1s linear both}
html.mo .ig .igs{animation:m5-igs 1s linear both}
html.mo .ig .igr{animation:m5-igr 1s linear both}
html.mo .ig .igring{animation:m5-ring 1s linear both}
@media (min-width:701px){html.mo .rl{animation:m5-rail 1s linear both}
 }
@supports (animation-timeline:view()){html.mo .exp li{view-timeline:--row block}
html.mo .exp li,html.mo .exp li::before{animation-timeline:--row;animation-duration:auto;animation-range:entry 20% contain 30%}
html.mo .xrule{animation-timeline:view();animation-duration:auto;animation-range:cover 0% cover 40%}
html.mo .taste .stmt{animation-timeline:view();animation-duration:auto;animation-range:entry 0% cover 30%}
html.mo .g{view-timeline:--sec block}
html.mo .rl{animation-timeline:--sec;animation-duration:auto;animation-range:cover calc(100svh - var(--sec-top) - 20vh) cover calc(100svh - var(--sec-top))}
html.mo .contact .panel{view-timeline:--pn block}
html.mo .contact .panel::before,html.mo .contact .q,html.mo .contact .cta{animation-timeline:--pn;animation-duration:auto;animation-range:entry 0% entry 100%}
html.mo .appcard{view-timeline:--ac block}
html.mo .appcard,html.mo .appcard::after{animation-timeline:--ac;animation-duration:auto;animation-range:entry 0% cover 30%}
html.mo .ig{view-timeline:--ig block}
html.mo .ig .igp,html.mo .ig .igs,html.mo .ig .igr,html.mo .ig .igring{animation-timeline:--ig;animation-duration:auto;animation-range:cover 10% cover 50%}
html.mo .ig .igs2{animation-range:cover 18% cover 55%}
html.mo .ig .igs3{animation-range:cover 26% cover 60%}
}
html.tl .exp li,html.tl .exp li::before,html.tl .xrule,html.tl .taste .stmt,html.tl .rl,
html.tl .contact .panel::before,html.tl .contact .q,html.tl .contact .cta,html.tl .appcard,html.tl .appcard::after,html.tl .ig .igp,html.tl .ig .igs,html.tl .ig .igr,html.tl .ig .igring{animation-play-state:paused;animation-delay:calc(var(--p,1) * -1s)}