@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;font-family:Manrope,Arial,sans-serif;background:#08090d;color:#f1f2f4}*{box-sizing:border-box}body{margin:0;min-height:100svh;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header{position:absolute;z-index:3;top:0;left:0;width:100%;padding:32px 4.5%;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:9px;font-size:30px;font-weight:700;letter-spacing:-1.6px}.logo svg{width:26px;height:32px;fill:none;stroke:currentColor;stroke-width:3}.logo span{align-self:flex-start;font-size:10px;margin-top:5px;letter-spacing:0}.private,.login{font-size:10px;letter-spacing:2px}.private{color:#9b9eac}.login{display:flex;align-items:center;gap:40px;border-bottom:1px solid #5f626c;padding:10px 0}
.entry{display:flex;align-items:center;gap:30px}
.request{font-size:10px;letter-spacing:2px;color:#9b9eac;padding:10px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.request:hover{color:#e9eaf0;border-bottom-color:#5f626c}.login span{font-size:20px}#sculpture{position:absolute;inset:0;height:100svh;min-height:740px;overflow:hidden;background:radial-gradient(ellipse at 72% 38%,#1b14322b,transparent 55%),#08090d}#sculpture canvas{display:block;width:100%;height:100%;position:relative;z-index:1;cursor:grab}#sculpture canvas:active{cursor:grabbing}.grain{pointer-events:none;position:fixed;inset:0;z-index:5;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.94' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}main{position:relative;z-index:2;min-height:100svh;pointer-events:none;display:flex;align-items:flex-end;padding:0 4.5% 120px;min-height:max(740px,100svh)}.intro{pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2.3px;color:#acb1c1;display:flex;align-items:center;gap:12px;margin:0 0 26px}.eyebrow span{width:5px;height:5px;background:#d9fbbb;box-shadow:0 0 16px #c8ffb6;border-radius:50%}h1{font-size:clamp(70px,8.6vw,160px);line-height:.98;font-weight:500;letter-spacing:-.075em;margin:0 0 32px}h1 span{background:linear-gradient(100deg,#fff 30%,#b3bcc9 100%);background-clip:text;color:transparent}.invitation{display:flex;gap:42px;align-items:center}.invitation p{font-size:13px;line-height:1.8;color:#adb1bd;margin:0}.cta{pointer-events:auto;display:flex;gap:38px;align-items:center;padding:15px 20px;border:1px solid #ffffff38;border-radius:4px;font-size:12px;background:#e8ebf50c;backdrop-filter:blur(16px);transition:background .3s,box-shadow .3s}.cta:hover{background:#ffffff1a;box-shadow:0 0 30px #aa9dff25}.cta span{font-size:18px}.scene-caption{position:absolute;right:6%;bottom:148px;display:flex;gap:14px;align-items:center;color:#aab1c7;font-size:10px;letter-spacing:.3px;z-index:2}.scene-caption .cross{font-size:20px;color:#defab8}.scene-caption i{height:1px;width:65px;background:linear-gradient(90deg,#a5a6be,transparent)}footer{position:absolute;bottom:0;left:0;z-index:3;width:100%;padding:25px 4.5%;border-top:1px solid #ffffff10;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.8px;color:#747a8b}.scene-controls{display:flex;gap:24px}.scene-controls button{background:none;border:0;padding:6px;color:#b7bcc9;font-size:11px}.scene-controls span{margin-left:12px}.skip{position:absolute;left:-9999px;z-index:10}.skip:focus{left:20px;top:20px;background:#08090d;padding:12px}a:focus-visible,button:focus-visible{outline:2px solid #d9fbbb;outline-offset:7px}.fallback{position:absolute;width:45vw;height:45vw;top:8%;right:5%;transform:rotate(-25deg)}.fallback i{display:block;border:12px solid #7971f3;border-right-color:#bcf0d7;border-bottom-color:#e9aa66;border-radius:45%;position:absolute;inset:10%;box-shadow:0 0 60px #ab7af229,inset 0 0 50px #786dd221;transform:rotateX(60deg) rotate(-15deg)}.fallback i:nth-child(2){inset:22%;transform:rotateY(45deg) rotate(50deg)}.fallback i:nth-child(3){inset:32%;border-width:30px;transform:rotateX(40deg)}.webgl .fallback{display:none}
@media(min-width:1800px){main{padding-bottom:160px}}@media(max-width:700px){header{padding:24px 6%}.private{display:none}.logo{font-size:26px}#sculpture{min-height:800px}main{padding:400px 6% 115px;min-height:max(800px,100svh);align-items:flex-end}h1{font-size:clamp(60px,12vw,84px);margin-bottom:25px}.eyebrow{font-size:7px;letter-spacing:1.3px}.invitation{gap:20px;flex-wrap:wrap}.invitation p{font-size:12px}.cta{padding:12px 16px}.scene-caption{top:145px;bottom:auto;right:6%;font-size:9px}footer{padding:20px 6%}.edition{display:none}.fallback{width:85vw;height:85vw;top:12%;right:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* A single pinned stage. Scrolling moves through the story, never through content blocks. */
body{height:420svh}header,#sculpture,main,footer,.scene-caption{position:fixed}#sculpture{height:100svh;min-height:0}main{inset:0;min-height:0;height:100svh}header{top:0}footer{bottom:0}.chapters{position:fixed;right:4.5%;top:43%;z-index:4;display:flex;flex-direction:column;gap:19px}.chapters button{position:relative;border:0;background:none;color:#686c7a;font-size:9px;letter-spacing:1px;padding:7px 0 7px 24px}.chapters button:before{content:'';width:4px;height:4px;background:#5d6474;border-radius:50%;position:absolute;left:0;top:50%}.chapters button[aria-current=step]{color:#fff}.chapters button[aria-current=step]:before{background:#e0ffba;box-shadow:0 0 12px #b6ffc6}.intro{max-width:750px}h1{font-size:clamp(66px,7.4vw,136px)}.intro.changing{animation:copy-in .65s cubic-bezier(.22,1,.36,1)}@keyframes copy-in{from{opacity:.1;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){main{padding-top:0;padding-bottom:110px}h1{font-size:clamp(48px,10vw,72px)}.chapters{right:6%;top:24%;gap:8px}.scene-caption{top:115px}.eyebrow{max-width:260px}.intro{max-width:95%}}@media(prefers-reduced-motion:reduce){.intro.changing{animation:none}}

.portrait-labels{position:absolute;inset:0;pointer-events:none;z-index:2}.portrait-labels span{position:absolute;top:0;left:0;font-size:7px;letter-spacing:2px;color:#e0e4f0;white-space:nowrap;text-shadow:0 1px 12px #000}.portrait-labels span:before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:#c4eecb;margin-right:9px;vertical-align:middle;box-shadow:0 0 8px #c4eecb}@media(max-width:700px){.portrait-labels span{font-size:6px;letter-spacing:1px}}
/* Portrait theatre: one central subject, typography and controls at the perimeter. */
main{padding-bottom:112px}.intro{max-width:490px}h1{font-size:clamp(46px,5.1vw,88px);letter-spacing:-.065em;margin-bottom:22px}.eyebrow{font-size:8px;letter-spacing:1.7px;margin-bottom:22px}.invitation{flex-direction:column;align-items:flex-start;gap:18px}.invitation p{font-size:12px;max-width:285px;line-height:1.7}.cta{padding:10px 17px;font-size:11px}.scene-caption{bottom:118px;right:6%}.private{letter-spacing:3px}.portrait-labels{display:none}@media(max-width:700px){main{padding-bottom:105px}.intro{max-width:310px}h1{font-size:44px}.eyebrow{font-size:6px}.invitation{gap:12px}.invitation p{font-size:11px;max-width:250px}.scene-caption{top:112px;bottom:auto}.chapters{top:38%}}

.flow-caption{position:absolute;right:6%;bottom:175px;z-index:2;display:flex;flex-direction:column;gap:8px;max-width:230px;color:#bfcfd9;pointer-events:none}.flow-caption small{font-size:7px;letter-spacing:1.8px;color:#7e909f}.flow-caption span{font-size:12px;letter-spacing:.1px}@media(max-width:700px){.flow-caption{top:160px;bottom:auto;right:6%;max-width:180px}.flow-caption span{font-size:10px}}

/* The workflow is the central object. Labels stay crisp in screen space. */
#sculpture{background:radial-gradient(ellipse at 55% 35%,#16303960,transparent 65%),#080c10}
.grain{opacity:.012}.graph-labels{position:absolute;inset:0;z-index:2;pointer-events:none}.job-label,.task-label{position:absolute;left:0;top:0;width:126px;will-change:transform;color:#e9eeec}.job-label small{display:block;font-size:7px;letter-spacing:1.2px;color:#9aaead;margin-bottom:7px}.job-label strong{display:block;font-size:12px;line-height:1.35;font-weight:500}.task-label{width:56px;font-size:6px;line-height:1.2;color:#c1d3d0;max-height:24px;overflow:hidden}.trace-status{position:absolute;left:50%;top:16%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:9px;letter-spacing:1.5px;color:#c5d4d1}.trace-status small{position:absolute;top:26px;left:0;width:100%;text-align:center;color:#788b8c;font-size:9px;letter-spacing:.1px}.trace-dot{width:5px;height:5px;background:#91e5cb;border-radius:50%}.trace-detail{color:#788b8c;letter-spacing:0}.intro{max-width:720px}h1{font-size:clamp(42px,4.7vw,78px)}main{padding-bottom:105px}.invitation{flex-direction:row;gap:28px;align-items:center}.invitation p{max-width:350px}.scene-caption{bottom:135px}.flow-caption{display:none}#sculpture canvas{cursor:default}
@media(max-width:700px){.job-label{width:52px}.job-label small{font-size:4px;letter-spacing:.2px;margin-bottom:3px}.job-label strong{font-size:6px}.task-label{width:25px;font-size:3px;max-height:12px}.trace-status{top:18%;font-size:7px;gap:7px}.trace-status small{font-size:8px}.invitation{flex-direction:column;align-items:flex-start;gap:14px}.scene-caption{display:none}.chapters{top:50%}.intro{max-width:90%}h1{font-size:40px}}

.lane-label{position:absolute;top:0;left:0;font-size:7px;letter-spacing:1.4px;color:#7b9291}.job-label strong{font-size:11px}.job-label small{font-size:6px;margin-bottom:5px}.trace-status{top:13%}.task-label{font-size:5px}.job-label{padding-left:4px}@media(max-width:700px){.lane-label{font-size:4px;letter-spacing:0}.job-label strong{font-size:6px}.job-label small{font-size:4px}.task-label{font-size:3px}}

.data-caption{position:absolute;top:17%;right:7%;z-index:3;color:#8a9daa;font-size:8px;letter-spacing:1.5px;pointer-events:none}.scene-container{position:absolute!important;inset:0}#sculpture canvas{opacity:1}.graph-tooltip{font-family:Manrope,Arial,sans-serif!important;font-size:11px!important;padding:8px 12px!important;background:#111d29ed!important;color:#d9e9ed!important;border:1px solid #34444e!important;border-radius:4px!important}main{padding-bottom:105px}.intro{max-width:610px}.invitation p{max-width:300px}h1{font-size:clamp(44px,5vw,80px)}@media(max-width:700px){h1{font-size:40px}.data-caption{top:15%;left:6%;font-size:6px}}

/* Cinematic vignette reserves the typography while leaving the sculpture open. */
#sculpture:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(28deg,#020509ef 0%,#02050990 19%,transparent 49%),radial-gradient(ellipse at 60% 40%,transparent 30%,#02050988 100%);z-index:1}.data-caption{z-index:2}.chapters{gap:10px;top:36%}body{height:650svh}.intro{max-width:740px}h1{font-size:clamp(44px,4.7vw,76px)}@media(max-width:700px){h1{font-size:36px}.intro{max-width:95%}.data-caption{font-size:6px;max-width:80%}.chapters{right:4%;gap:7px}}
.role-key{position:fixed;right:6%;bottom:80px;z-index:4;display:flex;gap:17px;padding:12px 16px;border:1px solid #c3e9ff14;border-radius:30px;background:#0c182366;backdrop-filter:blur(12px)}.role-key span{display:flex;align-items:center;gap:6px;font-size:10px}.role-key svg{width:17px;height:17px}@media(max-width:700px){.role-key{bottom:auto;top:110px;right:auto;left:6%;gap:12px;padding:8px 12px}.role-key span{font-size:8px}.role-key svg{width:14px;height:14px}}
@media(max-width:700px){.entry{gap:18px}.request{letter-spacing:1px}}