@font-face{font-family:Space;src:url('./assets/fonts/space-grotesk-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Space;src:url('./assets/fonts/space-grotesk-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:PT;src:url('./assets/fonts/pt-serif-italic.woff2') format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:Mono;src:url('./assets/fonts/intel-one-mono-regular.woff2') format('woff2');font-display:swap}
:root{--ink:#11171f;--blue:#5865f2;--paper:#edf0f1;--ease:cubic-bezier(.22,.75,.15,1);--duration:900ms}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 Space,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #8e9aff;outline-offset:5px}button:disabled{cursor:default}.design-title,h2,h3,p{margin:0}button{border:0}button,dialog{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-100px;left:24px;padding:12px;background:var(--ink);color:white;z-index:20}.skip:focus{top:15px}
.page-header{height:94px;margin:0 4.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #11171f25;gap:20px}.page-header img{display:block;width:180px;height:auto}.study-label,.header-note,.eyebrow,.demo-label,.state-kicker,.motion-hint,.design-scene-caption,.footer-edition,.app-eyebrow,.dialog-kicker,.dialog-note{font:10px/1.6 Mono,monospace}.study-label{letter-spacing:.025em}.study-label>span{margin:0 10px;color:#7a828c}.header-note{color:#58626c}.intro{padding:60px 6vw 46px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}.intro .eyebrow{margin-bottom:24px;text-transform:uppercase;letter-spacing:.07em;color:#58626c}.design-title{font-size:clamp(36px,4.7vw,70px);font-weight:400;line-height:1.08;letter-spacing:-.055em}.design-title em{font-family:PT,serif;color:#4855d6;font-weight:400}.intro-copy{max-width:280px;font-size:14px;line-height:1.8;color:#56616d;padding-bottom:5px}
.design-module{background:#0c1119;color:#fdfdfd;margin:0 3vw;position:relative;isolation:isolate;overflow:hidden;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}.module-top{padding:26px 3.2vw 0;display:flex;justify-content:space-between;gap:20px;color:#a5b0c2}.module-top .eyebrow{text-transform:uppercase;letter-spacing:.07em}.demo-label{display:flex;align-items:center;gap:8px}.demo-label i{height:4px;width:4px;background:#8491ff}.module-body{display:grid;grid-template-columns:28% 72%;align-items:center;padding:12px 3.2vw 20px;min-height:480px}.motion-copy{padding:20px 0;position:relative;z-index:2}.kinetic-mark{width:53px;height:48px;position:relative;margin-bottom:36px}.kinetic-mark i{position:absolute;width:40px;height:9px;left:0;top:0;background:#95a0ff;clip-path:polygon(0 0,78% 0,100% 100%,22% 100%);transition:transform var(--duration) var(--ease)}.kinetic-mark i:nth-child(2){top:14px;left:6px;background:#6776e1}.kinetic-mark i:nth-child(3){top:28px;left:12px;background:#3b476d}.state-kicker{color:#95a0b7;margin-bottom:12px}.motion-copy h2{font-weight:400;font-size:clamp(23px,2.2vw,34px);letter-spacing:-.04em;line-height:1.18;min-height:2.36em}.motion-copy>p:not(.state-kicker){color:#a6b2c6;font-size:13px;line-height:1.8;max-width:225px;margin-top:17px;min-height:5.4em}.motion-hint{display:block;color:#b6c0ff;margin-top:29px;font-size:9px}
.design-scene{height:435px;position:relative;perspective:1200px}.design-scene-axis{position:absolute;inset:18px 0;color:#394454;pointer-events:none}.design-scene-axis span{position:absolute;font:14px Mono}.design-scene-axis span:nth-child(2){right:0}.design-scene-axis span:nth-child(3){bottom:0}.design-scene-axis span:nth-child(4){bottom:0;right:0}.composition{position:absolute;width:91%;height:330px;left:5%;top:48px;transform-style:preserve-3d;transform:perspective(1200px) rotateX(0) rotateZ(0);transition:transform var(--duration) var(--ease)}.app-frame{position:absolute;inset:0;background:#edf0f5;border:1px solid #c2c8d6;box-shadow:0 24px 70px #0006;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}.slab{position:absolute;overflow:hidden;transition:transform var(--duration) var(--ease),top var(--duration) var(--ease),left var(--duration) var(--ease),width var(--duration) var(--ease),height var(--duration) var(--ease),background var(--duration) var(--ease),box-shadow var(--duration) var(--ease),border-color var(--duration) var(--ease);transform:translateZ(0);border:1px solid transparent}.app-sidebar{left:0;top:0;width:12%;height:100%;background:#192333;color:#c7d0e2;border-right:1px solid #344157}.surface-content{opacity:1;transition:opacity 450ms ease 200ms}.app-sidebar .surface-content{height:100%;display:flex;align-items:center;flex-direction:column;gap:22px;padding-top:25px}.app-sidebar img{width:30px;height:30px;margin-bottom:20px}.nav-square{width:16px;height:14px;border:1px solid #667791}.nav-square.active{background:#7d8afa;border-color:#7d8afa}.nav-bottom{width:19px;height:19px;margin-top:auto;margin-bottom:21px;background:#3e4c61;border-radius:50%}.app-heading{left:17%;top:7%;width:77%;height:18%;background:transparent;color:#182332}.app-eyebrow{font-size:8px;color:#626e80}.app-title{display:flex;align-items:center;justify-content:space-between;font-size:25px;letter-spacing:-.045em}.count{font:10px Mono;color:#6c7688;border:1px solid #bdc5d2;padding:3px 7px}.request{left:17%;width:77%;background:#fdfdff;color:#1d293c;border-color:#d0d7e2}.primary-request{top:29%;height:36%;background:#5865f2;color:#fff;border-color:#6774ff;box-shadow:0 8px 18px #4b58db22}.primary-request .surface-content{padding:13px 17px}.request-meta{display:flex;align-items:center;gap:6px;font-size:9px}.status-dot{height:4px;width:4px;background:#fff}.request-id{margin-left:auto;font:8px Mono;color:#e0e4ff}.primary-request h3{font-size:17px;font-weight:500;letter-spacing:-.025em;margin:10px 0 9px}.request-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px}.request-bottom>span{font-size:9px;color:#e0e4ff}.request-bottom button{min-height:32px;background:#fdfdfd;color:#303cc5;padding:6px 10px;font-size:10px;white-space:nowrap}.request-bottom button>span{margin-left:12px}.request-bottom button:hover{background:#e2e7ff}.secondary-request{top:70%;height:10%}.last-request{top:84%;height:10%}.secondary-request .surface-content,.last-request .surface-content{display:flex;align-items:center;gap:10px;height:100%;padding:0 12px;font-size:10px}.row-icon{font-size:16px;color:#79879c}.row-status{margin-left:auto;font-size:8px;color:#56667d}.wire-lines{opacity:0;position:absolute;inset:20% 6%;transition:opacity 300ms ease;pointer-events:none}.wire-lines i{display:block;background:#8795b54d;width:48%;height:7px;margin-bottom:9px}.wire-lines i:nth-child(2){width:30%;height:4px}.wire-lines b{position:absolute;right:0;bottom:0;width:24%;height:22px;border:1px solid #8295be66}.design-scene-caption{position:absolute;bottom:6px;left:10%;right:0;color:#7f8da4;display:flex;align-items:center;gap:12px;font-size:8px}.design-caption-rule{width:25px;height:1px;background:#536282}
.module-controls{border-top:1px solid #ffffff18;margin:0 3.2vw;min-height:77px;display:flex;justify-content:space-between;gap:20px;align-items:stretch}.state-controls{display:flex;gap:26px}.state-controls button{padding:20px 0;background:transparent;color:#99a7be;border-bottom:2px solid transparent;font-size:11px;min-height:44px}.state-controls button>span{font:9px Mono;margin-right:7px;color:#677994}.state-controls button[aria-pressed=true]{color:#fff;border-bottom-color:#8392ff}.state-controls button[aria-pressed=true]>span{color:#a1adff}.replay{display:flex;align-items:center;gap:9px;background:transparent;color:#c5cde0;font-size:11px;min-height:44px}.replay:hover{color:white}.replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.page-footer{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin:30px 6vw 48px;font-size:11px;color:#52606d}.page-footer>span:first-child{color:#11171f}.page-footer p{line-height:1.7}.footer-edition{font-size:8px}
[data-state=abstract] .composition{transform:perspective(1200px) rotateX(48deg) rotateZ(-28deg) scale(.8)}[data-state=abstract] .app-frame{opacity:0;transform:scale(.6)}[data-state=abstract] .slab{width:67%;height:19%;left:16%;background:linear-gradient(165deg,#556173,#27333f 50%,#17202e);border-color:#65748b;box-shadow:8px 12px 0 #0d1624,8px 14px 0 #45526a;clip-path:polygon(0 0,86% 0,100% 45%,100% 100%,14% 100%,0 55%)}[data-state=abstract] .app-sidebar{top:0%;transform:translate3d(-22%,0,-40px)}[data-state=abstract] .app-heading{top:23%;transform:translate3d(13%,0,-10px)}[data-state=abstract] .primary-request{top:46%;background:linear-gradient(160deg,#91a0ff,#5865f2 45%,#3441ae);border-color:#a2adff;transform:translate3d(-9%,0,22px);box-shadow:8px 12px 0 #2e398c,8px 14px 0 #8793ee}[data-state=abstract] .secondary-request{top:69%;transform:translate3d(20%,0,50px)}[data-state=abstract] .last-request{top:92%;transform:translate3d(-7%,0,85px)}[data-state=abstract] .surface-content,[data-state=structure] .surface-content{opacity:0;transition-delay:0ms;pointer-events:none}[data-state=abstract] .kinetic-mark i:nth-child(1){transform:translateX(12px)}[data-state=abstract] .kinetic-mark i:nth-child(3){transform:translateX(-12px)}
[data-state=structure] .composition{transform:perspective(1200px) rotateX(8deg) rotateZ(-2deg) scale(.97)}[data-state=structure] .app-frame{background:#101a29;border-color:#465779}[data-state=structure] .slab{background:#172335;border-color:#506587;box-shadow:none}[data-state=structure] .primary-request{background:#222f57;border-color:#8194ed}[data-state=structure] .wire-lines{opacity:1}[data-state=structure] .app-sidebar{background:#152032}[data-state=structure] .kinetic-mark i{transform:translateX(0)}
dialog{border:0;padding:32px;background:#edf0f5;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);box-shadow:0 30px 120px #0008}dialog::backdrop{background:#05060cbf;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.dialog-top .eyebrow{color:#63708a}.dialog-top button{width:44px;height:44px;background:#dce1eb;font-size:25px}.dialog-kicker{color:#4a57d1;margin-bottom:12px}dialog h2{font-size:36px;font-weight:400;letter-spacing:-.05em;line-height:1.15;margin-bottom:18px}dialog>p:not(.dialog-kicker):not(.dialog-note){font-size:14px;color:#57647a}dl{margin:25px 0}dl>div{padding:13px 0;border-top:1px solid #11171f22}dt{font:9px Mono;color:#64728a;margin-bottom:5px}dd{margin:0;font-size:13px}.dialog-note{color:#64728a;font-size:9px}.dialog-return{background:#5865f2;color:white;width:100%;margin-top:25px;padding:15px;display:flex;justify-content:space-between;font-size:12px}
@media(min-width:1500px){.design-section{max-width:1550px;margin:auto}.module-body{min-height:570px}.design-scene{height:490px}.composition{height:365px;top:55px}.primary-request .surface-content{padding:18px 22px}.primary-request h3{margin:12px 0}.module-top,.module-body{padding-left:48px;padding-right:48px}.module-controls{margin:0 48px}}
@media(max-width:1000px){.header-note{display:none}.intro{display:block;padding-top:42px}.intro-copy{max-width:480px;margin-top:22px}.module-body{grid-template-columns:27% 73%;padding-left:25px;padding-right:25px}.module-top{padding-left:25px;padding-right:25px}.motion-copy h2{font-size:23px}.motion-copy>p:not(.state-kicker){font-size:12px}.motion-hint{font-size:8px}.primary-request .surface-content{padding:12px}.primary-request h3{font-size:15px}.request-bottom>span{display:none}.request-bottom{justify-content:flex-end}.row-status{display:none}.state-controls{gap:18px}.design-scene-caption{font-size:7px}}
@media(max-width:700px){.page-header{height:76px;margin:0 6vw}.page-header img{width:140px}.study-label{font-size:8px}.study-label>span{margin:0 4px}.intro{padding:36px 6vw 30px}.intro .eyebrow{font-size:8px;margin-bottom:18px}.design-title{font-size:clamp(33px,7.3vw,48px)}.intro-copy{font-size:13px;line-height:1.7;max-width:340px;margin-top:18px}.design-module{margin:0 4vw;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px))}.module-top{padding:22px 20px 0;display:block}.module-top .eyebrow{font-size:8px}.demo-label{font-size:8px;margin-top:8px}.module-body{display:flex;flex-direction:column;padding:0 15px 12px}.motion-copy{width:100%;padding:28px 5px 0;display:grid;grid-template-columns:1fr 45px;column-gap:15px}.kinetic-mark{grid-column:2;grid-row:1/4;transform:scale(.75);transform-origin:top left;margin:5px 0 0}.state-kicker{grid-column:1;font-size:9px;margin-bottom:9px}.motion-copy h2{font-size:25px;min-height:2.36em;grid-column:1}.motion-copy>p:not(.state-kicker){font-size:12px;max-width:270px;min-height:3.6em;grid-column:1/3;margin-top:12px}.motion-hint{font-size:8px;margin-top:14px;grid-column:1/3}.design-scene{width:100%;height:390px;margin-top:8px}.composition{width:94%;left:3%;height:315px;top:37px}.app-sidebar{width:12%}.app-sidebar img{width:24px;height:24px}.app-heading{left:17%;width:77%;top:8%}.app-title{font-size:22px}.app-eyebrow{font-size:7px}.count{font-size:8px;padding:2px 5px}.primary-request{top:29%;height:38%}.primary-request .surface-content{padding:10px}.primary-request h3{font-size:14px;line-height:1.3;margin:9px 0 8px;max-width:160px}.request-meta{font-size:8px;gap:4px}.request-id{display:none}.request-bottom button{min-height:34px;font-size:10px;width:100%;display:flex;justify-content:space-between;align-items:center}.secondary-request{top:71%;height:10%}.last-request{top:85%;height:10%}.secondary-request .surface-content,.last-request .surface-content{padding:0 7px;font-size:9px;gap:5px}.row-icon{font-size:12px}.design-scene-axis{inset:12px 0}.design-scene-caption{left:5%;bottom:0;font-size:7px;gap:8px}.design-caption-rule{width:15px}.module-controls{margin:0 20px;flex-direction:column;gap:0;min-height:0}.state-controls{justify-content:space-between;gap:10px}.state-controls button{padding:17px 0;font-size:10px}.state-controls button>span{font-size:8px;margin-right:3px}.replay{justify-content:center;border-top:1px solid #ffffff10;min-height:59px;font-size:11px}.page-footer{margin:25px 7vw 32px;display:block;font-size:10px}.page-footer p{margin-top:13px}.footer-edition{display:block;margin-top:20px;font-size:8px}[data-state=abstract] .composition{transform:perspective(900px) rotateX(47deg) rotateZ(-27deg) scale(.79)}dialog{padding:24px}dialog h2{font-size:32px}}
@media(max-width:700px){.primary-request{top:27%;height:44%}.request-bottom button{min-height:44px}.secondary-request{top:75%;height:9%}.last-request{top:88%;height:9%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}