:root{--mist:#9fb3c4;--bone:#e9eef2;--amber:#e8b36a;--f:'Bricolage Grotesque',system-ui,sans-serif}
*{margin:0;box-sizing:border-box}
html{background:#07090c}
body{font-family:var(--f);color:var(--bone);overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
#bg{position:fixed;inset:0;background:#07090c;z-index:0}
#bg:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 62% 42%,rgba(110,150,185,.17),transparent 70%),radial-gradient(40% 40% at 15% 95%,rgba(60,90,120,.14),transparent)}
#fx,#stage{position:fixed;inset:0;width:100%;height:100%}
#fx{z-index:1;pointer-events:none}
#stage{z-index:2;pointer-events:none;overflow:visible}
#sp{height:1920vh}
#prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:0 50%;z-index:20}

header{position:fixed;inset:0;z-index:15;pointer-events:none}
header>*{pointer-events:auto}
.brand{position:absolute;left:4vw;top:2.2rem;font-size:.78rem;font-weight:500;letter-spacing:.24em}
nav{position:absolute;right:2.2vw;top:50%;translate:0 -50%;display:grid;gap:.2rem;justify-items:end}
nav a{display:flex;align-items:center;gap:.8rem;padding:.45rem .3rem;font-size:.68rem;letter-spacing:.16em;color:var(--mist);opacity:.5;transition:opacity .3s}
nav span{opacity:0;transform:translateX(8px);transition:.35s}
nav i{width:6px;height:6px;border-radius:50%;background:currentColor;transition:.3s}
nav a:hover,nav a.on{opacity:1;color:var(--bone)}
nav a:hover span,nav a.on span{opacity:1;transform:none}
nav a.on i{background:var(--amber);box-shadow:0 0 12px var(--amber);transform:scale(1.5)}
.note{position:fixed;right:4vw;bottom:2.2rem;z-index:15;font-size:.7rem;color:var(--mist);opacity:.55;max-width:15rem;text-align:right;line-height:1.4}

.cur,.ring{position:fixed;left:0;top:0;z-index:99;pointer-events:none;border-radius:50%}
.cur{width:6px;height:6px;margin:-3px;background:var(--bone)}
.ring{width:38px;height:38px;margin:-19px;border:1px solid rgba(233,238,242,.45);transition:width .3s,height .3s,margin .3s,border-color .3s}
.ring.big{width:64px;height:64px;margin:-32px;border-color:var(--amber)}
@media(hover:none){body{cursor:auto}.cur,.ring{display:none}}

.p{position:fixed;left:6vw;bottom:19vh;max-width:30rem;z-index:5;visibility:hidden;pointer-events:none;will-change:transform,opacity}
.p h2{font-weight:500;font-size:clamp(2rem,4.3vw,4.1rem);line-height:1;letter-spacing:-.03em}
.p p{margin-top:1.1rem;color:var(--mist);font-size:1.02rem;line-height:1.55;max-width:26rem}
.tag{display:inline-block;margin-bottom:1.1rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .75rem;border:1px solid currentColor;border-radius:99px}
.doc{color:var(--amber)}.con{color:var(--mist)}
.big{margin-top:1rem;font-size:clamp(4.5rem,11vw,9.5rem);font-weight:300;line-height:.9;letter-spacing:-.05em;color:var(--amber);font-variant-numeric:tabular-nums}
.big small{font-size:1.3rem;letter-spacing:0;margin-left:.5rem;color:var(--mist)}

.hero{visibility:visible;inset:0;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:0 5vw 11vh}
.hero h1{font-weight:800;font-size:clamp(2.6rem,8.6vw,9rem);line-height:.9;letter-spacing:-.05em}
.hero .ch{display:inline-block;will-change:transform}
.hero .w{display:inline-block;overflow:hidden;padding-bottom:.08em}
.hero p{margin-top:1.4rem;max-width:30rem}
.cue{margin-top:2rem;font-size:.7rem;letter-spacing:.3em;color:var(--mist);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.cue:after{content:"";width:1px;height:42px;background:linear-gradient(var(--amber),transparent);animation:drop 2s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.ctr{inset:0;left:0;max-width:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 6vw}
.lines span{display:block;font-weight:500;font-size:clamp(2rem,6.4vw,6rem);line-height:1.08;letter-spacing:-.04em;opacity:.12}
.fin h2{font-weight:800;font-size:clamp(2.2rem,7vw,7rem);line-height:.95;letter-spacing:-.045em}
.fin footer{position:absolute;bottom:2.2rem;left:0;right:0;font-size:.75rem;letter-spacing:.14em;color:var(--mist);line-height:1.8}

.mri{position:fixed;z-index:3;left:60%;top:50%;translate:-50% -50%;width:min(58vw,56vh*1.31);aspect-ratio:250/190;overflow:hidden;background:#090b0d;border:1px solid rgba(255,255,255,.15);visibility:hidden}
.mri svg{width:100%;height:100%;display:block;filter:grayscale(1) contrast(1.4) brightness(1.2)}
.mri svg ellipse{filter:none}
.mri:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#cfe6ff,transparent);box-shadow:0 0 24px 6px rgba(160,200,255,.35)}
.mri b{position:absolute;left:.8rem;bottom:.6rem;font-size:.68rem;font-weight:400;letter-spacing:.12em;color:#9aa6ae;z-index:2}
.mri.sm{left:6vw;top:16vh;translate:0 0;width:min(32vw,36vh*1.31)}
#vi{position:fixed;z-index:5;right:9vw;top:16vh;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);opacity:0;visibility:hidden}
#lk{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0}

.tlw{position:fixed;left:0;right:0;bottom:7vh;z-index:4;overflow:hidden;visibility:hidden;pointer-events:none}
#tr{display:flex;width:max-content}
.st{width:42vw;flex:none;position:relative;padding-top:1.4rem;opacity:.28}
.st:before{content:"";position:absolute;top:0;left:0;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--amber)}
.st:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(159,179,196,.3)}
.st b{font-weight:500;font-size:clamp(1.3rem,2.8vw,2.6rem);letter-spacing:-.03em}

@media(max-width:760px){
  .brand{left:5vw;top:1.3rem;font-size:.66rem}
  nav{right:.4rem;gap:0}nav span{display:none}nav a{padding:.55rem .6rem}
  .note{right:auto;left:5vw;top:3.2rem;bottom:auto;text-align:left;max-width:70vw;font-size:.62rem}
  .p{left:5vw;right:5vw;bottom:8vh;max-width:none;padding-right:2.4rem}
  .p h2{font-size:clamp(1.7rem,8vw,2.4rem)}
  .p p{font-size:.92rem}
  .big{font-size:3.6rem}.hero{padding:0 5vw 9vh}
  .mri{left:50%;top:34%;width:84vw}
  .mri.sm{left:5vw;top:15vh;width:46vw}
  #vi{right:5vw;top:15vh}
  .tlw{bottom:auto;top:13vh}.st{width:70vw}
  .fin footer{padding:0 5vw}
}
@media(prefers-reduced-motion:reduce){.cue:after{animation:none}}

#anat>*:not(#tn),#cbg{visibility:hidden}
#photo image{mix-blend-mode:screen}
#spot{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(closest-side,rgba(150,130,255,.2),rgba(80,120,200,.07) 55%,transparent);z-index:1;pointer-events:none}
@media(hover:none){#spot{display:none}}