@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{--navy:#0b2d49;--ink:#26343d;--muted:#6f7d85;--bg:#eef1f2;--line:#d1dade;--accent:#6d8d8e;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #387b92;outline-offset:5px}button{border:0;background:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.site-header{height:87px;margin:0 4.4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:28px;font-weight:750;letter-spacing:-1.4px;text-decoration:none;color:var(--navy)}.demo-label{font-size:12px;color:#6b7b85}.demo-label span{padding:0 12px;color:#a9b5bc}.preview-label{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.5px;color:#61737c}.preview-label i,.demo-footer i{height:5px;width:5px;border-radius:50%;background:#6c8f81;display:inline-block}main{max-width:1600px;margin:auto;padding:0 4.4%}.intro{text-align:center;padding:43px 0 10px}.eyebrow{font-size:11px;font-weight:550;margin:0 0 13px;color:var(--navy)}h1{font-size:clamp(28px,3vw,46px);line-height:1.15;letter-spacing:-1.8px;font-weight:550;margin:0 0 13px}.intro-copy{font-size:13px;color:#73818a;margin:0}.experience{display:grid;grid-template-columns:minmax(220px, .88fr) minmax(360px,2.35fr) minmax(240px,1fr);align-items:center;gap:25px;min-height:580px}.chapters{padding:30px 0 15px;align-self:center}.nav-heading{color:#87929a;font-size:11px;margin:0 0 16px}.chapter{width:100%;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;text-align:left;padding:22px 0;color:#73818a;position:relative;transition:color .3s}.chapter:after{content:'';height:1px;background:var(--navy);position:absolute;bottom:-1px;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.chapter.active:after{transform:scaleX(1)}.chapter>svg{width:20px;flex-shrink:0}.chapter>span:not(.chapter-arrow){font-size:12px;font-weight:550;white-space:nowrap}.chapter small{font-size:10px;display:block;line-height:1.4;padding-top:5px;color:#8b979f;font-weight:400}.chapter.active,.chapter:hover{color:var(--navy)}.chapter-arrow{margin-left:auto;font-size:17px;opacity:0;transform:translate(-4px,4px);transition:all .4s}.chapter.active .chapter-arrow,.chapter:hover .chapter-arrow{opacity:1;transform:none}.color-selector{margin-top:30px}.color-selector>span{font-size:10px;color:#83909a;display:flex;justify-content:space-between}.color-selector b{font-weight:400;color:#415562}.swatches{display:flex;gap:12px;margin-top:15px}.swatch{height:23px;width:23px;border-radius:50%;background:var(--swatch);position:relative;transition:transform .3s}.swatch:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent;transition:border-color .3s}.swatch.selected:after{border-color:#647987}.swatch:hover{transform:scale(1.1)}.stage{height:580px;position:relative;min-width:0;isolation:isolate}.stage:before{content:'';position:absolute;inset:40px -25px 20px;z-index:-1;background:radial-gradient(ellipse at 50% 43%,#fafbfb 0,rgba(250,251,251,.6) 30%,rgba(238,241,242,0) 68%)}#viewport{height:100%;width:100%;touch-action:pan-y}#viewport canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}#viewport canvas:active{cursor:grabbing}.stage-top,.stage-bottom{position:absolute;left:20px;right:20px;z-index:2;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.stage-top{top:23px;font-size:10px;color:#84929b}.stage-top button{pointer-events:auto;display:grid;place-items:center;width:32px;height:32px;border:1px solid #d6dfe3;border-radius:50%;transition:background .3s}.stage-top button:hover{background:#fff}.stage-top svg{width:14px;height:14px}.stage-bottom{bottom:17px;font-size:10px;color:#81919b}.stage-bottom>span{display:flex;gap:7px;align-items:center}.stage-bottom svg{height:16px;width:16px}.stage-bottom button{pointer-events:auto;font-size:10px;color:#49616e}.stage-bottom button span{font-size:16px;padding-left:8px}.loader{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:10px;font-size:12px;color:#7b8b95;background:var(--bg);z-index:3;transition:opacity .5s}.loader.hidden{opacity:0;pointer-events:none}.loader.has-error{flex-direction:column;gap:16px}.loader>span{width:24px;height:2px;background:var(--navy);animation:loading 1s ease-in-out infinite alternate}@keyframes loading{to{transform:scaleX(.3);opacity:.3}}.hotspot{position:absolute;top:50%;left:50%;z-index:1;padding:8px;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .35s;white-space:nowrap;will-change:transform}.hotspot>span{height:13px;width:13px;border:1px solid #5b778a;border-radius:50%;background:#fff9;box-shadow:0 0 0 5px #ffffff50;position:relative}.hotspot>span:after{content:'';width:3px;height:3px;border-radius:50%;background:var(--navy);position:absolute;top:4px;left:4px}.hotspot b{font-weight:400;font-size:9px;color:#395467;background:#f8fafae8;padding:4px 7px;border-radius:2px;opacity:0;transition:opacity .3s}.hotspot:hover b,.hotspot.active b{opacity:1}.detail{align-self:center;padding:10px 0 10px 8px}.detail-art{height:176px;position:relative;overflow:hidden;background:#e2e7e7}.detail-art canvas{display:block;width:100%;height:100%}.detail-art>span{position:absolute;bottom:11px;left:13px;font-size:9px;color:#fff;text-shadow:0 1px 6px #10203077}.detail-art .art-corner{left:auto;right:13px;font-size:16px;top:8px;bottom:auto}.detail-copy{transition:opacity .22s,transform .35s;min-height:216px}.detail-copy.changing{opacity:0;transform:translateY(7px)}.detail-kicker{font-size:9px;color:#7d8c95;margin:23px 0 11px}h2{font-size:clamp(24px,2.25vw,33px);font-weight:500;line-height:1.13;letter-spacing:-1px;color:var(--navy);margin:0 0 15px}.detail-copy>p:not(.detail-kicker){font-size:11px;line-height:1.8;color:#6d7e88;max-width:30em}.specs{display:flex;flex-wrap:wrap;gap:8px 16px;color:#6b808b;font-size:9px;margin-top:17px}.specs span:before{content:'+';font-size:11px;margin-right:6px;color:#92a1a6}.replay{font-size:11px;color:var(--navy);border-bottom:1px solid #a7b6bf;padding:9px 0;display:flex;align-items:center;gap:28px;margin-top:13px}.replay span{font-size:15px;transition:transform .3s}.replay:hover span{transform:translate(2px,-2px)}.demo-footer{min-height:58px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8b989f;font-size:9px}.demo-footer>span:first-child{display:flex;gap:8px;align-items:center}.demo-footer p{font-size:10px;letter-spacing:.25px}.demo-footer>span:last-child{font-size:9px}.fallback{max-width:280px;text-align:center;margin:0;line-height:1.8;font-size:14px;color:#49616e}.retry{min-height:36px;padding:8px 16px;border:1px solid var(--navy);color:var(--navy);font-size:12px;background:transparent}.retry:hover{background:var(--navy);color:#fff}.retry:disabled{opacity:.55;cursor:wait}
@media(min-width:1550px){.experience{gap:45px;min-height:650px}.stage{height:650px}.detail-art{height:200px}.chapter>span:not(.chapter-arrow){font-size:14px}.detail-copy>p:not(.detail-kicker){font-size:12px}.intro{padding-top:50px}.detail-copy{min-height:240px}}
@media(max-width:1100px){.experience{grid-template-columns:190px minmax(300px,1fr) 220px;gap:12px}main{padding:0 3%}.site-header{margin:0 3%}.stage{height:550px}.detail{padding-left:0}.chapter{gap:8px}.chapter>span:not(.chapter-arrow){font-size:11px}.detail-art{height:150px}.stage-top,.stage-bottom{left:8px;right:8px}h2{font-size:27px}}
@media(max-width:820px){.site-header{height:70px}.demo-label{display:none}.wordmark{font-size:24px}main{padding:0 5%}.intro{padding-top:35px}h1{font-size:31px;letter-spacing:-1.2px}.intro-copy{font-size:11px;line-height:1.6;max-width:280px;margin:auto}.experience{grid-template-columns:minmax(0,1fr);gap:0}.chapters{grid-row:2;padding:10px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.nav-heading{display:none}.chapter{padding:16px 0}.chapter>span:not(.chapter-arrow){font-size:11px}.chapter small{font-size:9px}.chapter-arrow{display:none}.color-selector{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:23px}.color-selector>span{gap:15px}.swatches{margin:0}.stage{height:490px;grid-row:1;margin:0 -3%}.stage-top{top:15px}.stage-bottom{bottom:10px}.detail{grid-row:3;display:grid;grid-template-columns:1fr 1.1fr;gap:0 20px;padding:35px 0}.detail-art{height:190px;grid-row:1/3}.detail-kicker{margin-top:0;font-size:8px}h2{font-size:25px}.detail-copy{min-height:0}.detail-copy>p:not(.detail-kicker){font-size:10px;line-height:1.7}.specs{display:none}.replay{font-size:10px;gap:15px;justify-self:start;margin-top:5px}.demo-footer{flex-wrap:wrap;padding:15px 0;gap:6px}.demo-footer p{order:3;width:100%;margin:5px 0}.demo-footer>span:last-child{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:0s!important}}
.embedded .site-header,.embedded .intro,.embedded .demo-footer{display:none}.embedded main{max-width:none;padding:0}.embedded .experience{min-height:580px;padding:0 2.5%}.embedded .stage{height:580px}