@font-face{font-family:Albert;src:url('./assets/albert-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Albert;src:url('./assets/albert-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--ink:#183041;--accent:#225f83;--paper:#f2f5fa;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:#8093a8 var(--paper)}body{margin:0;background:var(--paper);font-family:Albert,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}::selection{background:#ccd4ed}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:8px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}.symbols{position:absolute;width:0;height:0;overflow:hidden}header{height:110px;padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;gap:25px;position:relative;z-index:3}.identity{display:flex;align-items:center;gap:16px;text-decoration:none}.identity b{font-size:43px;font-weight:600;letter-spacing:-.04em}.identity span{font-size:13px;line-height:1.25}.demo-label{font-size:12px;color:#536574}.back{font-size:13px;display:flex;gap:20px;align-items:center;text-decoration:none}.back svg{width:19px}.scene{position:relative;min-height:720px;height:calc(100svh - 110px);max-height:1080px;overflow:hidden;background:radial-gradient(ellipse at 69% 44%,#fff 0,transparent 58%)}.art{position:absolute;inset:0;pointer-events:none}canvas{display:block;width:100%;height:100%}.scene-copy{position:relative;margin-left:8%;padding-top:clamp(35px,7vh,95px);width:34%;pointer-events:none}.scene-copy h1{font-weight:400;font-size:clamp(66px,7.3vw,104px);line-height:.99;letter-spacing:-.04em;margin:0 0 36px}.scene-copy p{font-size:16px;line-height:1.7;max-width:310px;margin:0}.experience-link{display:inline-flex;align-items:center;gap:32px;font-size:14px;text-decoration:none;pointer-events:auto;min-height:48px;margin-top:23px;border-bottom:1px solid #758697}.experience-link svg{transition:transform .4s var(--ease)}.experience-link:hover svg{transform:translateX(7px)}.art-caption{position:absolute;right:7%;top:69%;font-size:13px;line-height:1.65;color:#526371}.motion{position:absolute;right:7%;top:78%;background:none;border:0;padding:12px 0;display:flex;align-items:center;gap:9px;font-size:11px;color:#465c6a}.pause-mark{display:block;width:8px;height:9px;border-inline:2px solid}.motion[aria-pressed=true] .pause-mark{border:0;border-left:7px solid;border-top:4px solid transparent;border-bottom:4px solid transparent;height:0}.selection{position:absolute;left:8%;right:7%;bottom:42px;display:grid;grid-template-columns:26% 1fr;gap:45px;align-items:center}.selection-hint{font-size:13px;line-height:1.6;color:#536574;margin:0}.paths{display:flex;justify-content:space-between;gap:30px}.paths button{background:none;border:0;border-bottom:1px solid #c1cbd5;text-align:left;padding:20px 0;display:flex;gap:18px;align-items:center;justify-content:space-between;font-size:clamp(17px,1.7vw,24px);font-weight:400;position:relative;flex:1}.paths button svg{width:19px;opacity:0;transform:translateX(-8px);transition:.4s var(--ease)}.paths button:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}.paths button[aria-pressed=true]:after,.paths button:hover:after{transform:scaleX(1)}.paths button[aria-pressed=true] svg{opacity:1;transform:none}.paths button[aria-pressed=true]{color:var(--accent)}.experience{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:12%;padding:110px 8% 70px;background:#e4edf3;transition:background .7s}.experience h2{font-size:clamp(38px,4.6vw,64px);font-weight:400;line-height:1.03;letter-spacing:-.035em;margin:0 0 30px}.experience-main>p{font-size:20px;line-height:1.55;max-width:36ch;margin:0}.experience-content{align-self:center}.experience-content>p:first-child{font-size:16px;line-height:1.75;margin:0 0 35px;max-width:38ch}.byline{font-size:15px;line-height:1.6}.byline span{font-size:13px;color:#526371}.experience-content>a{display:inline-flex;gap:22px;align-items:center;font-size:14px;text-decoration:none;border-bottom:1px solid #71889c;padding-block:20px 12px}.end-note{grid-column:1/-1;font-size:11px;color:#536574;margin-top:45px;max-width:65ch;line-height:1.6}.experience-main.changed{animation:change .6s var(--ease)}@keyframes change{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.scene-copy{margin-left:12%}.selection{left:12%;right:10%}.scene-copy h1{font-size:110px}.scene-copy p{font-size:18px;max-width:340px}}
@media(max-width:900px){header{padding-inline:6%;height:88px}.demo-label{display:none}.scene{height:900px;min-height:900px}.scene-copy{margin-left:7%;width:75%;padding-top:26px}.scene-copy h1{font-size:68px;margin-bottom:20px}.scene-copy p{font-size:14px;max-width:310px}.experience-link{margin-top:12px;font-size:13px}.art-caption{top:auto;bottom:196px;font-size:11px;right:7%}.motion{top:auto;bottom:150px}.selection{left:7%;right:7%;bottom:27px;display:block}.selection-hint{font-size:11px;margin-bottom:8px}.selection-hint br{display:none}.paths{gap:23px}.paths button{font-size:16px;gap:6px;padding-block:17px}.paths button svg{display:none}.experience{grid-template-columns:1fr;padding:65px 7%;gap:35px}.experience-content>p:first-child{max-width:50ch}.end-note{margin-top:8px}.experience h2{font-size:43px}.experience-main>p{font-size:18px}}
@media(max-width:440px){.identity b{font-size:35px}.identity span{font-size:11px}.back{font-size:11px;gap:8px}.scene-copy h1{font-size:61px}.scene{height:880px;min-height:880px}.paths{gap:15px}.paths button{font-size:14px}.scene-copy{width:85%}.scene-copy p{max-width:290px}.experience-content>a{font-size:12px;gap:10px}}
.art-caption{max-width:230px}.art-caption span{display:block}
@media(min-width:901px){.art-caption{top:73%}.motion{top:82%}}
@media(max-width:900px){.art-caption{max-width:215px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}