@font-face{font-family:"Gilda Display";src:url("../fonts/gilda-display.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Roobert";src:url("../fonts/roobert-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Roobert";src:url("../fonts/roobert-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Roobert";src:url("../fonts/roobert-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Roobert";src:url("../fonts/roobert-700.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#F4F4F1;--bg-2:#ECECE8;--ink:#131316;--ink-2:#5F5F69;--ink-3:#9A9AA2;--rule:#DCDCD6;
  --accent:#2136D9;--accent-soft:rgba(33,54,217,.10);
  --c1:#2136D9;--c2:#E0563B;--c3:#E8A317;--c4:#1B9C8A;--c5:#7A4BD6;
  --aurora:.55;--pt:.55;
  --serif:"Gilda Display","Times New Roman",Georgia,serif;
  --sans:"Roobert","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E0E11;--bg-2:#15151A;--ink:#EDEDE8;--ink-2:#A3A3AB;--ink-3:#63636B;--rule:#26262C;
  --accent:#6D7CFF;--accent-soft:rgba(109,124,255,.14);
  --c1:#6D7CFF;--c2:#FF7A5C;--c3:#FFC247;--c4:#3FD1BC;--c5:#A98BFF;--aurora:.42;--pt:.7}}
:root[data-theme="dark"]{
  --bg:#0E0E11;--bg-2:#15151A;--ink:#EDEDE8;--ink-2:#A3A3AB;--ink-3:#63636B;--rule:#26262C;
  --accent:#6D7CFF;--accent-soft:rgba(109,124,255,.14);
  --c1:#6D7CFF;--c2:#FF7A5C;--c3:#FFC247;--c4:#3FD1BC;--c5:#A98BFF;--aurora:.42;--pt:.7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(18px,4vw,48px)}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.035}}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.035}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:21px;letter-spacing:.005em}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;animation:ring 3.4s var(--ease) infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
nav .right{display:flex;align-items:center;gap:18px}
nav .links{display:flex;gap:26px}
nav .links a{font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-2);padding:12px 0;position:relative;transition:color .3s}
nav .links a.on,nav .links a:hover{color:var(--ink)}
nav .links a::after{content:"";position:absolute;left:0;bottom:8px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
nav .links a.on::after{transform:scaleX(1)}
.menu{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;padding:0;margin-right:-11px}
.menu span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:transform .5s var(--ease),top .5s var(--ease)}
.menu span:first-child{top:18px}.menu span:last-child{top:25px}
.menu[aria-expanded="true"] span:first-child{top:21.5px;transform:rotate(45deg)}.menu[aria-expanded="true"] span:last-child{top:21.5px;transform:rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:35;background:var(--bg);overflow:hidden auto;padding-top:calc(64px + env(safe-area-inset-top,0px))}
.overlay .aurora{opacity:calc(var(--aurora)*.6)}
.overlay .wrap{position:relative;display:grid;padding-block:24px calc(40px + env(safe-area-inset-bottom,0px))}
.overlay .wrap>a{font-family:var(--serif);font-size:clamp(34px,9vw,46px);line-height:1.1;text-decoration:none;padding:18px 0;border-bottom:1px solid var(--rule);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.overlay .wrap>a:nth-child(2){transition-delay:.06s}.overlay .wrap>a:nth-child(3){transition-delay:.12s}.overlay .wrap>a:nth-child(4){transition-delay:.18s}.overlay .ov-foot{transition:opacity .8s var(--ease) .26s}
.overlay.pre .wrap>a,.overlay.pre .ov-foot{opacity:.001;transform:translateY(18px);transition:none}
.ov-foot{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:28px;font-size:14px;font-weight:500}
.ov-foot a{text-decoration:none;color:var(--ink-2)}
html.lock{overflow:hidden}
@media (max-width:900px){nav .links{display:none}.menu{display:block}}
.lnk{position:relative;text-decoration:none;font-weight:500;font-size:14px;padding-bottom:3px}
.lnk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(.3);transform-origin:left;transition:transform .6s var(--ease)}
.lnk:hover::after{transform:scaleX(1)}
.tgl{width:34px;height:20px;border-radius:999px;border:1px solid var(--ink-3);background:transparent;position:relative;cursor:pointer;padding:0}
.tgl::before{content:"";position:absolute;inset:-12px}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform .5s var(--ease)}
:root[data-theme="dark"] .tgl::after{transform:translateX(14px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tgl::after{transform:translateX(14px)}}
.hero{position:relative;overflow:hidden;padding-block:clamp(72px,12vw,150px) clamp(64px,10vw,120px);touch-action:pan-y}
.aurora{position:absolute;inset:-20%;filter:blur(70px);opacity:var(--aurora);pointer-events:none;
  background:radial-gradient(38% 42% at 22% 30%,var(--c1) 0%,transparent 70%),radial-gradient(30% 34% at 78% 22%,var(--c2) 0%,transparent 70%),radial-gradient(34% 36% at 70% 78%,var(--c4) 0%,transparent 70%),radial-gradient(28% 30% at 30% 82%,var(--c3) 0%,transparent 70%),radial-gradient(26% 28% at 55% 50%,var(--c5) 0%,transparent 70%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-4%,3%) rotate(6deg) scale(1.06)}100%{transform:translate(3%,-3%) rotate(-5deg) scale(1.02)}}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg) 100%);pointer-events:none;z-index:1}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.hero .in{position:relative;z-index:2;display:grid;gap:26px;max-width:760px;pointer-events:none}
.hero .in a{pointer-events:auto}
.hero h1{font-family:var(--serif);font-size:clamp(44px,7.6vw,104px);line-height:.98;letter-spacing:-.012em}
.hero h1 em{font-style:normal;color:var(--ink-2);display:block;white-space:nowrap}
@media (max-width:380px){.hero h1{font-size:38px}}
section{scroll-margin-top:72px}
.lede{font-size:clamp(18px,2.1vw,23px);line-height:1.45;max-width:30em;color:var(--ink)}
.cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:6px}
.btn{font:500 14px/1 var(--sans);letter-spacing:.02em;padding:15px 24px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);text-decoration:none;display:inline-block;transition:transform .25s ease-out,background .3s;will-change:transform}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.rv{display:block;overflow:hidden}
.rv>span{display:block;transform:translateY(0);transition:transform 1.15s var(--ease)}
.pre .rv>span{transform:translateY(112%);transition:none}
.rv:nth-child(2)>span{transition-delay:.08s}.rv:nth-child(3)>span{transition-delay:.16s}
.fade{transition:opacity 1s var(--ease) .35s,transform 1s var(--ease) .35s}
.pre .fade{opacity:.001;transform:translateY(10px);transition:none}
section.blk{--pad:clamp(64px,10vw,130px);padding-block:var(--pad);position:relative}
.blk>.wrap{position:relative}
.blk>.wrap::before{content:"";position:absolute;left:0;right:0;top:calc(-1*var(--pad));height:1px;background:var(--rule);transform-origin:left;transition:transform 1.5s var(--ease)}
.blk.pre>.wrap::before{transform:scaleX(0)}
.blk>.wrap::after{content:"";position:absolute;left:0;top:calc(-1*var(--pad));height:1px;width:140px;background:linear-gradient(90deg,transparent,var(--accent));opacity:0;pointer-events:none}
.blk.go>.wrap::after{animation:comet 1.5s var(--ease) forwards}
@keyframes comet{0%{left:0;opacity:1}85%{opacity:1}100%{left:calc(100% - 140px);opacity:0}}
.blk .head>*,.blk .col,.blk .loop,.blk .pr-list,.contact>.wrap>*{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.blk .head>:nth-child(2),.blk .col:nth-child(2){transition-delay:.1s}.blk .col:nth-child(3){transition-delay:.2s}.blk .loop,.blk .pr-list,.contact>.wrap>:nth-child(2){transition-delay:.18s}
.pre .head>*,.pre .col,.pre .loop,.pre .pr-list,.contact.pre>.wrap>*{opacity:.001;transform:translateY(22px);transition:none}
.track{position:fixed;left:32px;top:22vh;height:56vh;width:1px;background:var(--rule);z-index:30;display:none}
@media (min-width:1200px){.track{display:block}}
.track b{position:absolute;left:-3px;width:7px;height:1px;background:var(--ink-3)}
.track i{position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translateY(var(--y,0px));will-change:transform}
.thesis{font-family:var(--serif);font-size:clamp(26px,3.6vw,46px);line-height:1.22;max-width:24em}
.thesis span{color:var(--ink-3);transition:color .55s}
.thesis span.on{color:var(--ink)}
.thesis span.hi.on{color:var(--accent)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px;margin-bottom:clamp(36px,5vw,64px)}
@media (max-width:720px){.head{grid-template-columns:1fr;gap:10px}}
.head h2{font-family:var(--serif);font-size:clamp(30px,4vw,50px);line-height:1.08}
.head .eyebrow{padding-top:10px}
.head p{margin-top:14px;color:var(--ink-2);max-width:34em}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
@media (max-width:820px){.cols{grid-template-columns:1fr;gap:36px}}
.col{display:grid;gap:18px;align-content:start;transition:opacity .5s}
@media (hover:hover){.cols:hover .col:not(:hover){opacity:.42}.col:hover svg *{animation-duration:1.5s!important}}
.col svg{width:100%;max-width:220px;height:auto;display:block}
.col h3{font-size:20px;font-weight:500;line-height:1.3}
.col p{color:var(--ink-2);font-size:16px;max-width:26em}
.d1 line{stroke:var(--rule);stroke-width:1.5}
.d1 circle{fill:var(--ink-3)}
.d1 .go{fill:var(--c1);animation:hop 3.2s var(--ease) infinite}
@keyframes hop{0%{cx:24;cy:70}28%{cx:70;cy:22}56%{cx:126;cy:48}80%{cx:176;cy:70}100%{cx:24;cy:70}}
.d1 .trail{fill:none;stroke:var(--c1);stroke-width:1.5;stroke-dasharray:6 8;animation:dash 3.2s linear infinite;opacity:.55}
@keyframes dash{to{stroke-dashoffset:-56}}
.d2 rect{fill:var(--ink-3);animation:wave 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.d2 rect:nth-child(4n+1){fill:var(--c2)}.d2 rect:nth-child(4n+2){animation-delay:.25s}.d2 rect:nth-child(4n+3){animation-delay:.5s;fill:var(--c3)}.d2 rect:nth-child(4n){animation-delay:.75s}
@keyframes wave{0%,100%{opacity:.22;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.d3 .frame{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.d3 .sel{fill:color-mix(in srgb,var(--c4) 18%,transparent);stroke:var(--c4);stroke-width:1.5;animation:sel 3.4s var(--ease) infinite}
@keyframes sel{0%,30%{opacity:0}42%,68%{opacity:1}80%,100%{opacity:0}}
.d3 .cur{fill:var(--c4);animation:cur 3.4s var(--ease) infinite}
@keyframes cur{0%{transform:translate(0,0)}38%{transform:translate(58px,20px)}70%{transform:translate(34px,48px)}100%{transform:translate(0,0)}}
.d3 .ln{stroke:var(--rule);stroke-width:1.5}
.loop svg{width:100%;height:auto;display:block;max-width:900px;margin-inline:auto}
.loop text{font-family:var(--sans);font-size:11px;letter-spacing:.14em;fill:var(--ink-2);font-weight:500}
.loop .track{fill:none;stroke:var(--rule);stroke-width:1.5}
.loop .draw{fill:none;stroke:url(#g);stroke-width:2.5;stroke-linecap:round}
.loop .rider{fill:var(--accent)}
.loop p{margin-top:36px;color:var(--ink-2);max-width:34em}
@media (max-width:640px){.loop text{font-size:22px;letter-spacing:.1em}.loop .draw{stroke-width:5}.loop .track{stroke-width:3}.loop .rider{r:14}}
.pr ul{margin:0;padding:0;border-top:1px solid var(--rule)}
.contact{position:relative}
.pr li{list-style:none;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:clamp(22px,3vw,36px);line-height:1.15}
.pr i{width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.4);transition:opacity .45s,transform .6s var(--ease)}
.pr li:hover i,.pr li.on i{opacity:1;transform:scale(1)}
.contact{padding-block:clamp(80px,14vw,170px)}
.contact .eyebrow{margin-bottom:22px}
.contact a.big{font-family:var(--serif);font-size:clamp(24px,5.6vw,72px);line-height:1.05;text-decoration:none;letter-spacing:-.01em;display:inline-flex;align-items:baseline;gap:.12em;word-break:break-all}
.contact a.big b{width:.22em;height:.22em;border-radius:50%;background:var(--accent);display:inline-block;transform:translateY(-.02em);animation:ring 3.4s var(--ease) infinite}
.contact a.big:hover{color:var(--accent)}
footer{border-top:1px solid var(--rule);padding-block:28px 56px;font-size:13px;color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .links{display:flex;gap:22px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
[hidden]{display:none!important}
.legal{padding-block:clamp(56px,8vw,100px) clamp(80px,10vw,140px)}
.legal .wrap{max-width:760px}
.legal h1{font-family:var(--serif);font-size:clamp(36px,5vw,60px);line-height:1.05;margin-bottom:10px}
.legal .upd{color:var(--ink-2);font-size:14px;margin-bottom:44px}
.legal h2{font-family:var(--sans);font-weight:600;font-size:17px;margin:40px 0 12px}
.legal p,.legal li{color:var(--ink);font-size:16px;line-height:1.7}
.legal p+p{margin-top:12px}
.legal ul{padding-left:20px;margin:10px 0}
.legal .back{display:inline-block;margin-bottom:36px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001s!important}.pre .rv>span,.pre .fade{transform:none;opacity:1}}
