:root{--blob:62vmin;--irid:.92;--grid:1;--a1:#7cc8ff;--a2:#b79dff;--a3:#ff9ecb;--a4:#9df7d8;--ink:#0d1117}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f6fa;color:var(--ink);font-family:"Zen Kaku Gothic New",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#2a3570;text-decoration:none}
a:hover{color:#7059b3}
header nav a:hover{background:rgba(255,255,255,.85)}
[data-pcard] a:hover{background:rgba(255,255,255,.6)}
[data-pcard] button:hover{background:#fff}
@keyframes flowLeft{from{transform:translate3d(2%,0,0)}to{transform:translate3d(-52%,0,0)}}
@keyframes flowRight{from{transform:translate3d(-52%,0,0)}to{transform:translate3d(2%,0,0)}}
@keyframes creepL{0%{translate:0 0}100%{translate:-50% 0}}
@keyframes creepR{0%{translate:-50% 0}100%{translate:0 0}}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,64px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes orbA{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(12%,-8%,0) scale(1.18)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes orbB{0%{transform:translate3d(0,0,0) scale(1.1)}50%{transform:translate3d(-14%,10%,0) scale(.9)}100%{transform:translate3d(0,0,0) scale(1.1)}}
@keyframes spinR{to{rotate:360deg}}
@keyframes orbitGlow{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes ozGrid{from{background-position:0 0}to{background-position:0 240px}}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes bobY{0%{translate:0 10px}50%{translate:0 -10px}100%{translate:0 10px}}
@keyframes bobY2{0%{translate:0 -8px}50%{translate:0 12px}100%{translate:0 -8px}}
@keyframes sheen{0%{translate:-120% 0}100%{translate:220% 0}}
@keyframes paneFly{0%{opacity:0;transform:translateZ(-2400px)}18%{opacity:1}72%{opacity:1}100%{opacity:0;transform:translateZ(700px)}}
@keyframes paneText{0%{opacity:0;transform:translate3d(0,18px,0);filter:blur(6px)}16%,84%{opacity:1;transform:none;filter:blur(0)}100%{opacity:0;transform:translate3d(0,-14px,0);filter:blur(5px)}}
@keyframes coreGlow{0%{opacity:0;scale:.5}40%,70%{opacity:.9;scale:1}100%{opacity:0;scale:1.9}}
@keyframes hueDrift{to{filter:hue-rotate(360deg)}}
@keyframes ozOrbit{to{rotate:360deg}}
@keyframes ozTick{0%,88%{opacity:.25}92%{opacity:1}100%{opacity:.25}}
@keyframes ozEdge{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes gateGrid{to{background-position:0 6vmin}}
@keyframes gateSpinR{to{rotate:-360deg}}
@keyframes dustDrift{0%,100%{transform:translate3d(0,0,0);opacity:.28}50%{transform:translate3d(6px,-22px,0);opacity:.7}}
@keyframes shaftBreathe{0%,100%{opacity:.55;transform:scaleY(1)}50%{opacity:.9;transform:scaleY(1.06)}}
@keyframes gateBurst{from{opacity:.85;scale:1}to{opacity:0;scale:1.7}}
@keyframes filmShift{0%,100%{transform:translate3d(-6%,-4%,0) scale(1.18)}50%{transform:translate3d(6%,5%,0) scale(1.3)}}
@keyframes chromeTurn{to{rotate:360deg}}
@keyframes lineIn{from{opacity:0;transform:translate3d(0,105%,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes maskIn{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ruleWide{0%{opacity:1;transform:scaleX(1)}70%{opacity:.5}100%{opacity:0;transform:scaleX(2.4)}}
@keyframes upFar{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-30vh,0)}}
@keyframes upMid{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-20vh,0)}}
@keyframes upNear{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-12vh,0)}}
@keyframes voyLife{0%,96%{opacity:1}99%{opacity:.7}100%{opacity:0}}
@keyframes voyage{
 0%{transform:translate3d(7vw,9vh,0) scale(.95) rotate(0deg)}
 12%{transform:translate3d(2vw,-3vh,0) scale(1.02) rotate(40deg)}
 18%{transform:translate3d(-24vw,20vh,0) scale(.86) rotate(72deg)}
 23%{transform:translate3d(-38vw,-14vh,0) scale(.34) rotate(108deg)}
 27%{transform:translate3d(-6vw,-26vh,0) scale(.2) rotate(146deg)}
 31%{transform:translate3d(30vw,-8vh,0) scale(.46) rotate(182deg)}
 35%{transform:translate3d(34vw,18vh,0) scale(1.02) rotate(214deg)}
 39%{transform:translate3d(6vw,28vh,0) scale(1.28) rotate(238deg)}
 43%{transform:translate3d(-18vw,4vh,0) scale(.9) rotate(262deg)}
 48%{transform:translate3d(-30vw,-14vh,0) scale(1.06) rotate(284deg)}
 55%{transform:translate3d(4vw,-9vh,0) scale(1.05) rotate(304deg)}
 63%{transform:translate3d(-22vw,-20vh,0) scale(.92) rotate(322deg)}
 69%{transform:translate3d(-42vw,-30vh,0) scale(.82) rotate(338deg)}
 76%{transform:translate3d(-12vw,-3vh,0) scale(.42) rotate(356deg)}
 82%{transform:translate3d(0vw,6vh,0) scale(.14) rotate(378deg)}
 90%{transform:translate3d(0vw,6vh,0) scale(.14) rotate(404deg)}
 93%{transform:translate3d(0vw,4.2vh,0) scale(.128) rotate(420deg)}
 95.5%{transform:translate3d(0vw,1.6vh,0) scale(.105) rotate(440deg)}
 97.5%{transform:translate3d(0vw,-1vh,0) scale(.072) rotate(466deg)}
 99%{transform:translate3d(0vw,-2.4vh,0) scale(.034) rotate(500deg)}
 100%{transform:translate3d(0vw,-3vh,0) scale(0) rotate(536deg)}
}
@keyframes panelIn{from{opacity:0;transform:translate3d(0,34px,0) scale(.92)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes glowPulse{0%,100%{opacity:.16;transform:scale(1)}50%{opacity:.3;transform:scale(1.16)}}
@keyframes cue{0%{transform:translate3d(0,-6px,0);opacity:0}40%{opacity:1}100%{transform:translate3d(0,14px,0);opacity:0}}
@media (max-width: 720px){
 header nav{display:none!important}
 header{padding:62px 20px 14px!important;align-items:flex-start!important}
 header > a{gap:8px!important}

 #top{height:220vh!important}
 :root{--blob:40vmin!important}
 [data-voyager]{margin-top:calc(var(--blob) / -2)!important;margin-left:calc(var(--blob) / -2)!important}
 /* HERO blob glow: blur(46px) needs ~138px of bleed per side, but at --blob:40vmin the
    glow box is only 188px. WebKit sizes the raster tile of a filtered element inside a
    scroll-driven position:fixed layer from that box, so the bleed is cut off and the
    right/bottom edges read as a rectangle. Fade the glow to zero inside its own box and
    keep the blur proportionate to it. Desktop is unaffected (62vmin box, 21% bleed). */
 [data-voyager] > div:first-of-type{filter:blur(24px) saturate(160%)!important;mask-image:radial-gradient(closest-side,#000 36%,rgba(0,0,0,.5) 64%,transparent 92%)!important;-webkit-mask-image:radial-gradient(closest-side,#000 36%,rgba(0,0,0,.5) 64%,transparent 92%)!important}
 #top h1{font-size:clamp(30px,9.6vw,42px)!important;line-height:1.1!important}
 #top [data-pin] > div{padding:17vh 20px 4vh!important;gap:12px!important}
 [data-track="hero"] [data-pin] > div[aria-hidden]{display:none!important}
 #top [data-pin] > div:nth-of-type(3){top:96px!important;right:18px!important}

 [data-track="bridge"]{height:240vh!important}
 [data-track="bridge"] [data-pin]{padding:0 20px!important;gap:14px!important}
 [data-track="bridge"] p{padding:0!important}

 #message{height:440vh!important}
 [data-msgrow]{inset:0 0 176px!important;padding:11vh 20px 4vh!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;gap:10px!important}
 [data-msgkey]{flex:0 0 auto!important;flex-direction:row!important;align-items:baseline!important;align-self:flex-start!important;text-align:left!important;gap:10px!important;width:auto!important}
 [data-msgkey] > span[aria-hidden]{display:none!important}
 [data-msgstage]{flex:0 0 auto!important;width:100%!important;max-width:none!important;min-height:0!important;align-items:flex-start!important}
 [data-msgstage] > div{width:100%!important;min-height:0!important}
 #message [data-rail]{display:none!important}
 [data-msgpanel]{inset:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5) 26%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.88) 66%,rgba(255,255,255,.45) 80%,rgba(255,255,255,0))!important;backdrop-filter:blur(3.5px) saturate(150%)!important;-webkit-backdrop-filter:blur(3.5px) saturate(150%)!important;mask-image:linear-gradient(transparent,#000 22%,#000 76%,transparent)!important;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 76%,transparent)!important}
 #message h3{font-size:clamp(19px,5.8vw,26px)!important;line-height:1.22!important;min-height:0!important}
 #message h2{font-size:clamp(22px,6.4vw,26px)!important;line-height:1.24!important}
 #message p{font-size:13px!important;line-height:1.9!important;letter-spacing:.03em!important;max-width:none!important;min-height:0!important}
 #message [data-pin] > div:last-of-type{left:16px!important;right:16px!important;bottom:120px!important;align-items:center!important;gap:10px!important}
 #message [data-pin] > div:last-of-type button span:last-of-type{display:none!important}

 [data-track="flow"]{height:170vh!important}
 [data-flow] span{font-size:34px!important;padding-right:18px!important;letter-spacing:.01em!important}

 #partner [data-pin]{padding-top:8vh!important}
 #partner [data-pin] > div{margin-top:0!important}
 #partner [data-stage]{transform:none!important}
 #partner [data-pin] > div:first-of-type{left:20px!important;top:104px!important}
 #partner [data-pin] > div:first-of-type h2{display:none!important}
 #partner [data-orb]{width:clamp(72px,24vw,100px)!important}
 #partner [data-orb] span{font-size:10px!important}

 [data-pcard]{left:50%!important;right:auto!important;translate:-50% 0!important;width:85%!important;top:52vh!important;bottom:14px!important;max-height:none!important;overflow:hidden!important;padding:16px 16px 18px!important;gap:8px!important;border-radius:20px!important}
 [data-pcard] > div:nth-of-type(2){aspect-ratio:16/6!important;border-radius:12px!important;flex:0 1 auto!important;min-height:0!important}
 [data-pcard] span[role="img"]{width:38%!important}
 [data-pcard] p{font-size:12px!important;line-height:1.7!important}
 [data-pcard] a{font-size:12px!important;padding:11px 14px!important}
 [data-pcard] > div:last-of-type{margin-top:auto!important}

 #contact{min-height:auto!important;padding:10vh 20px 7vh!important}
 #contact h2{font-size:clamp(24px,7.4vw,34px)!important}
 #contact [data-gate]{width:min(62vw,240px)!important}
 #contact > div:first-of-type{gap:12px!important}

 footer{padding:6vh 20px 5vh!important;font-size:12px!important}

 /* iOS Safari rasterises a backdrop-filter layer to the element's bounding box
    when the element is inside a scaled/animated ancestor, so the ring's blur
    shows up as a square behind the blob. The radial-gradient alone clips to the
    border-radius correctly. */
 #partner [data-orbring]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

 /* type balance at 375-430px */
 #top h1{font-size:clamp(32px,10.4vw,44px)!important}
 #top [data-pin] > div > p{font-size:14px!important;letter-spacing:.16em!important}
 #top [data-pin] > div > div > p{font-size:11.5px!important;letter-spacing:.34em!important}
 #message p{font-size:13.5px!important;line-height:2!important}
 #partner [data-orb] span[data-orbtext]{font-size:12px!important}
 #partner [data-orb] span[data-orbtext]:last-of-type{font-size:10.5px!important}
 [data-pcard] p{font-size:13px!important;line-height:1.85!important}
 #contact h2{font-size:clamp(26px,7.8vw,36px)!important}
 #contact p:not([data-gate-hint]){font-size:13.5px!important;line-height:2!important;letter-spacing:.05em!important}
}
@media (prefers-reduced-motion: reduce){
 *{animation:none!important;transition:none!important}
 [data-track]{height:auto!important}
 [data-pin]{position:static!important;height:auto!important;overflow:visible!important;display:block!important}
 [data-scene]{position:relative!important;inset:auto!important;opacity:1!important;transform:none!important;padding:9vh 0!important;min-height:0!important}
 [data-flow]{transform:none!important;width:auto!important}
 [data-fade]{opacity:1!important;transform:none!important}
 [data-bar]{transform:scaleX(1)!important}
 [data-rail]{position:static!important;flex-direction:row!important;flex-wrap:wrap!important;gap:18px!important;padding:0 0 4vh clamp(40px,10vw,140px)}
 [data-rail] span{opacity:1!important}
 #partner{height:auto!important}
 #partner [data-pin]{padding:6vh clamp(20px,6vw,96px)!important;display:flex!important;flex-direction:column!important;gap:4vh!important}
 #partner [data-pin] > *{position:static!important;inset:auto!important;max-width:none!important}
 #partner [data-stage]{display:flex!important;flex-wrap:wrap!important;align-items:flex-end!important;gap:40px!important}
 [data-deco]{display:none!important}
 [data-orb]{position:static!important;offset-path:none!important;scale:none!important;opacity:1!important;width:150px!important;margin:0!important}
 [data-dock] > div{opacity:1!important}
 [data-voyager]{display:none!important}
}