@font-face{font-family:Spartan;src:url(Spartan-400.ttf) format('truetype');font-display:swap}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101113;color:#e9e9e7;font-family:Spartan,Arial,sans-serif}header,footer{position:fixed;left:clamp(24px,4.5vw,72px);right:clamp(24px,4.5vw,72px);display:flex;justify-content:space-between;align-items:center;z-index:2;pointer-events:none}header{top:38px;font-size:14px;letter-spacing:.17em}header .label{font-size:11px;letter-spacing:.12em;color:#73777b}footer{bottom:28px;font-size:12px;letter-spacing:.015em;color:#93979b}canvas{display:block;width:100vw;height:100svh;touch-action:none}button{pointer-events:auto;display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff15;border-radius:50%;background:transparent;color:#afb3b7;cursor:pointer}button:hover{color:white;border-color:#ffffff55}button:focus-visible{outline:1px solid white;outline-offset:5px}button svg{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}@media(max-width:600px){header{top:26px}header .label{font-size:10px}footer{bottom:20px}}

@font-face{font-family:Spartan;src:url(Spartan-600.ttf) format('truetype');font-weight:600;font-display:swap}.logo{width:44px;height:32px;object-fit:contain;filter:invert(1)}.copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:24px}h1{font-size:clamp(34px,4.45vw,76px);font-weight:600;line-height:1.2;letter-spacing:-.05em;margin:0}h1 span{color:#7777f2}.copy p{font-size:14px;color:#999b9e;margin:28px 0 0;line-height:1.7}@media(max-width:600px){h1{font-size:clamp(30px,8vw,46px)}.copy p{font-size:12px}}

canvas{cursor:grab}canvas.dragging{cursor:grabbing}
/* Split typography frames the particle sphere. */
html,body{background:#08090a}.copy{padding:0}h1{position:absolute;inset:0;display:grid;grid-template-columns:1fr min(25.2vw,44.64svh) 1fr;align-items:center;gap:16px;padding:0 4.5vw;font-size:clamp(22px,3.05vw,54px);letter-spacing:-.055em;white-space:nowrap}h1 .title-left{grid-column:1;color:#e9e9e7;text-align:right}h1 .title-right{grid-column:3;text-align:left}.copy p{position:absolute;top:calc(50% + min(17.5vw,31svh) + 35px);margin:0;font-size:14px}
@media(max-width:700px){h1{display:flex;flex-direction:column;justify-content:space-between;inset:calc(50% - min(32vw,23svh) - 68px) 0 auto;height:calc(min(64vw,46svh) + 124px);font-size:clamp(27px,7vw,42px);gap:0}.copy p{top:calc(50% + min(32vw,23svh) + 84px);font-size:12px}}

@keyframes title-unfold{0%,25%{transform:translate(var(--intro-x,0px),var(--intro-y,0px))}100%{transform:translate(0,0)}}
@keyframes subtitle-reveal{0%,55%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.entering h1 span{animation:title-unfold 2.8s cubic-bezier(.22,.65,.25,1) both}.entering .copy p{animation:subtitle-reveal 3.4s ease both}
@media(prefers-reduced-motion:reduce){.entering h1 span,.entering .copy p{animation:none}}

body:not(.intro-ready) .copy{visibility:hidden}