/* Siroby opening universe. The static layout below is complete on its own; html.u-live pins the WebGL scene. */
.u-universe{position:relative;background:radial-gradient(ellipse 80% 70% at 68% 42%,#dbe9ff 0,#eef5ff 42%,#f8fbff 76%);border-bottom:1px solid #dfe9f6}
.u-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#4f6c95}
.u-canvas,.u-back,.u-hud,.u-manifesto .u-mono,[data-u-readout],.u-index,.u-count{display:none}
.u-sticky{position:relative}
.u-intro{display:grid;grid-template-columns:.92fr 1.15fr;align-items:center;gap:16px;width:calc(100% - 112px);max-width:1680px;margin:auto;padding:48px 0 24px;min-height:calc(100svh - 160px)}
.u-intro .f-lead{max-width:520px}
.u-fallback{position:relative;width:115%;max-width:none;filter:drop-shadow(0 25px 28px #3e72a416)}
.u-manifesto,.u-gallery,.u-foot{width:calc(100% - 112px);max-width:1680px;margin:0 auto}
.u-manifesto p{max-width:640px;font-size:17px;color:#536783;line-height:1.85;margin:0}
.u-gallery{padding:56px 0 40px}
.u-gallery-title{font-size:clamp(32px,3.6vw,56px)!important}
.u-panels{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.u-panels img{display:block;width:100%;height:auto;margin-bottom:14px}
.u-num{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#4f74b1;margin-bottom:8px}
.u-title{font-size:clamp(24px,2.1vw,32px);font-weight:700;letter-spacing:-.05em;line-height:1.12;margin:0 0 10px;color:#102554}
.u-title em{font-style:normal;color:#1750fa}.u-line{display:block}.u-w{display:inline-block}
.u-panels p{font-size:15px;line-height:1.75;color:#536783;margin:0}
.u-outro{display:none}
.u-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0 22px;color:#637696;font-size:12px}
.u-foot a{display:flex;align-items:center;gap:12px;font-size:13px}
.u-foot button{background:transparent;color:#637696;font-size:12px;padding:6px}

/* Live, pinned scene */
.u-live .u-universe{height:820svh;border:0}
.u-live .u-sticky{position:sticky;top:80px;height:calc(100svh - 80px);overflow:hidden}
.u-live .u-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2}
.u-live .u-back{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.u-grid{position:absolute;left:-30%;right:-30%;bottom:-38%;height:90%;background-image:linear-gradient(#1750fa14 1px,transparent 1px),linear-gradient(90deg,#1750fa14 1px,transparent 1px);background-size:72px 72px;transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 40%,#000 70%,transparent);animation:uGrid 6s linear infinite}
@keyframes uGrid{to{background-position:0 72px,0 0}}
.u-mega{position:absolute;left:56px;top:calc(50% - 1.32em);margin:0;font-size:min(15.5vw,25vh);line-height:.88;font-weight:700;letter-spacing:-.065em;background:linear-gradient(170deg,#102554 20%,#1750fa 60%,#7fb3ff);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;white-space:nowrap}
.u-ghost{position:absolute;right:-1vw;bottom:2vh;margin:0;font-size:min(18vw,30vh);font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px #1750fa30;opacity:0;white-space:nowrap}
.u-ghost.is-glitch{animation:uGlitch .8s cubic-bezier(.2,.7,.2,1)}
@keyframes uGlitch{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:none}}
.u-live .u-hud{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
.u-hud i{position:absolute;width:22px;height:22px;border:0 solid #1750fa66}
.u-hud i:nth-child(1){top:18px;left:18px;border-width:1px 0 0 1px}.u-hud i:nth-child(2){top:18px;right:18px;border-width:1px 1px 0 0}.u-hud i:nth-child(3){bottom:18px;left:18px;border-width:0 0 1px 1px}.u-hud i:nth-child(4){bottom:18px;right:18px;border-width:0 1px 1px 0}
.u-hud-tag{position:absolute;top:22px;left:52px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.16em;color:#5b77a0}
.u-bar{position:absolute;right:28px;top:calc(50% - 15vh);width:2px;height:30vh;background:#1750fa1f;overflow:hidden}.u-bar b{position:absolute;inset:0;background:linear-gradient(#1750fa,#1ccfcb);transform-origin:top;transform:scaleY(0)}
.u-live .u-layer{position:absolute;z-index:3;opacity:0;visibility:hidden;width:auto;max-width:none;margin:0;padding:0;min-height:0}
.u-live .u-intro{display:flex;align-items:center;left:56px;top:0;bottom:40px;width:min(600px,44vw);opacity:1;visibility:visible}
.u-live .u-intro .f-actions{margin:28px 0}.u-live .u-intro .f-hero-stats{margin-top:34px}
.u-live .u-fallback,.u-live .u-gallery-title,.u-live .u-panels img{display:none}
.u-live .u-manifesto{right:64px;bottom:92px;width:min(560px,40vw)}
.u-live .u-manifesto .u-mono{display:block;margin-bottom:16px}.u-live .u-statement{font-size:clamp(24px,2.3vw,38px);line-height:1.3;font-weight:600;letter-spacing:-.035em;color:#102554;max-width:none}
.u-live .u-gallery{inset:0;pointer-events:none}
.u-live .u-gallery[data-u-on] .u-index,.u-live .u-gallery[data-u-on] .u-panels{pointer-events:auto}
.u-live .u-index{display:flex;align-items:center;flex-wrap:wrap;gap:4px 22px;position:absolute;left:56px;top:40px;max-width:54vw}
.u-index p{margin:0 6px 0 0}
.u-index button{display:flex;align-items:center;gap:10px;background:transparent;padding:6px 0;font-size:15px;font-weight:500;color:#5a6f8f;transition:color .25s,transform .25s}
.u-index button span{color:#1750fa;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.u-index button[aria-current="true"]{color:#102554;font-weight:700;transform:translateX(4px)}.u-index button[aria-current="true"] span,.u-index button:hover span{opacity:1;transform:none}
.u-index button:hover{color:#1750fa}
.u-live .u-count{display:block;position:absolute;right:64px;top:34px;color:#5b77a0}.u-count b{font-family:inherit;font-size:64px;letter-spacing:-.05em;color:#102554;font-weight:600;margin-right:6px}
.u-live .u-panels{display:block;position:absolute;left:56px;top:96px;bottom:84px;width:min(46vw,800px);margin:0}
.u-live .u-panels li{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform-origin:0 50%;will-change:transform,opacity;pointer-events:none}
.u-live .u-panels .u-title{font-size:clamp(48px,5.2vw,98px);line-height:1.04;letter-spacing:-.06em;margin:0 0 24px;perspective:700px}
.u-live .u-panels .u-num{font-size:13px;letter-spacing:.14em;margin-bottom:20px}
.u-live .u-panels p{font-size:18px;line-height:1.75;max-width:470px}
.u-live .u-note{position:absolute;right:64px;bottom:88px;max-width:240px;text-align:right;margin:0}
.u-live .u-outro{display:flex;flex-direction:column;justify-content:center;left:56px;top:0;bottom:40px;width:min(640px,46vw)}
.u-live .u-outro h2{font-size:clamp(40px,5vw,84px)}
.u-live .u-foot{position:absolute;z-index:5;left:56px;right:56px;bottom:0;width:auto;max-width:none;padding:0 0 18px}
.u-live [data-u-readout]{display:block;font-size:11px;letter-spacing:.1em;color:#7a8fb0;white-space:pre}
@media(max-width:1100px){.u-intro,.u-manifesto,.u-gallery,.u-foot{width:calc(100% - 64px)}.u-panels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){.u-intro{grid-template-columns:1fr;max-width:780px;min-height:0;padding-top:40px}.u-fallback{width:100%;margin-top:12px}.u-intro,.u-manifesto,.u-gallery,.u-foot{width:calc(100% - 40px)}
 .u-live .u-sticky{top:68px;height:calc(100svh - 68px)}}
@media(max-width:760px){.u-panels{grid-template-columns:1fr}
 .u-live .u-universe{height:760svh}
 .u-live .u-intro{left:20px;right:20px;top:auto;bottom:56px;width:auto;align-items:flex-end}
 .u-live .u-intro h1{font-size:clamp(38px,10.5vw,52px);margin-bottom:14px}.u-live .u-intro .f-lead{font-size:15px;line-height:1.7;margin-bottom:0}.u-live .u-intro .f-kicker{margin-bottom:14px}
 .u-live .u-intro .f-actions{margin:18px 0 0;gap:18px}.u-live .u-intro .f-hero-stats{display:none}
 .u-mega{left:20px;top:7%;font-size:22vw}
 .u-live .u-manifesto{left:20px;right:20px;bottom:64px;width:auto}.u-live .u-statement{font-size:22px}
 .u-live .u-index{left:16px;right:16px;top:16px;max-width:none;flex-wrap:nowrap;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.u-index p{display:none}
 .u-index button{flex:none;font-size:13px;padding:8px 13px;border-radius:100px;background:#ffffffb8;border:1px solid #dbe6f5}.u-index button span{display:none}.u-index button[aria-current="true"]{transform:none;background:#1750fa;color:#fff;border-color:#1750fa}
 .u-live .u-count{right:20px;top:60px}.u-count b{font-size:34px}
 .u-live .u-panels{left:20px;right:20px;top:auto;bottom:56px;height:48%;width:auto}.u-live .u-panels li{justify-content:flex-end;transform-origin:0 100%}
 .u-live .u-panels .u-title{font-size:clamp(36px,10.5vw,52px);margin-bottom:12px}.u-live .u-panels .u-num{font-size:11px;margin-bottom:10px}.u-live .u-panels p{font-size:15px;line-height:1.65}
 .u-live .u-gallery::before{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(#f6f9ff00,#f6f9ffd9 38%,#f6f9fff2);pointer-events:none}
 .u-live .u-note,.u-hud-tag,.u-live [data-u-readout],.u-bar{display:none}
 .u-live .u-outro{left:20px;right:20px;width:auto;justify-content:flex-end;bottom:64px}.u-live .u-outro h2{font-size:clamp(36px,10vw,50px)}
 .u-live .u-foot{left:20px;right:20px;padding-bottom:14px}.u-foot a{font-size:11px}
 .u-ghost{font-size:26vw;bottom:auto;top:20%}}
@media(prefers-reduced-motion:reduce){.u-grid,.u-ghost.is-glitch{animation:none}}

/* 3D scroll for the homepage chapters that follow the opening scene */
.f-3d .f-frame{transition:none}
.f-3d .f-frame-stack{transform-style:preserve-3d}
.f-library-stage .f-main-art{transform-origin:50% 100%}
.f-3d .f-rise{opacity:0;transform:perspective(900px) translate3d(0,44px,-40px) rotateX(36deg);transform-origin:50% 100%;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.f-3d .f-rise.is-in{opacity:1;transform:none}
.f-marquee span,.f-marquee i{transform:translate3d(var(--mx,0px),0,0)}
@media print{.f-rise{opacity:1!important;transform:none!important}}