@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
.floating-menu{position:fixed;right:24px;bottom:24px;z-index:20;background:#dcfb48;color:#18191a;border:1px solid #a8c02f;box-shadow:0 5px 25px #0002;transition:transform .2s}.floating-menu:hover{transform:translateY(-3px)}.floating-menu[hidden]{display:none}@media(max-width:760px){.floating-menu{right:16px;bottom:16px}}
:root{font-family:Manrope,Arial,sans-serif;color:#18191a;background:#f4f5f6;font-synthesis:none;--line:#d8dadd;--acid:#dcfb48}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #687b16;outline-offset:5px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid var(--line);gap:20px}header .wordmark{font-weight:800;letter-spacing:-1px;font-size:23px}nav{display:flex;gap:30px;font-size:14px}nav a:hover{text-decoration:underline;text-underline-offset:5px}.label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}.muted{color:#707479}.wrap{max-width:1600px;margin:auto;padding:0 4%}.hero{padding:74px 0 62px}.hero-top{display:flex;justify-content:space-between;gap:20px}.hero h1{font-size:clamp(64px,9.4vw,150px);line-height:.99;letter-spacing:-.075em;font-weight:500;margin:36px 0 35px}.hero h1 span{display:inline-block;background:var(--acid);padding:0 .15em .12em;margin-left:-.15em}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.hero p{max-width:535px;font-size:20px;line-height:1.6;margin:0}.pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid #27292b;border-radius:100px;padding:14px 24px;font-size:14px;background:transparent;color:inherit;gap:8px}.pill:hover{background:#18191a;color:white}.section-head{display:flex;justify-content:space-between;gap:25px;align-items:baseline;padding:36px 0 24px;border-top:1px solid var(--line)}h2{font-size:clamp(30px,4vw,54px);letter-spacing:-.045em;font-weight:500;margin:0}.section-head .label{color:#73777a}.grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 24px;padding-bottom:70px}.card{display:block;min-width:0}.cover{height:clamp(300px,36vw,540px);overflow:hidden;position:relative;background:#dee1e4;border-radius:3px}.cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.card:hover .cover img{transform:scale(1.025)}.duo{display:grid;grid-template-columns:1fr 1fr}.duo img{min-width:0}.cover .badge{position:absolute;top:18px;left:18px;background:#f4f5f6;padding:8px 12px;border-radius:100px;font-size:12px}.type-cover{display:flex;align-items:center;padding:9%;font-size:clamp(40px,6vw,88px);line-height:1.02;letter-spacing:-.06em}.type-cover small{position:absolute;bottom:25px;left:25px;font-size:13px;letter-spacing:0}.cv{background:#292837;color:#e4e2fb}.af{background:#dae2f2;color:#183866}.build{background:#d9fb49;color:#273311}.card-title{display:flex;justify-content:space-between;gap:20px;margin-top:17px}.card h3{font-size:22px;letter-spacing:-.04em;font-weight:600;margin:0}.card p{font-size:14px;color:#686d71;margin:7px 0 0}.index{font-size:14px;color:#686d71}.compact-list{padding-bottom:75px}.compact{border-top:1px solid var(--line);padding:25px 0;display:grid;grid-template-columns:45px 1fr 1fr auto;align-items:center;gap:20px}.compact:hover{background:#e9ecee}.compact h3{font-size:23px;margin:0;font-weight:500;letter-spacing:-.035em}.compact p{font-size:15px;color:#6b7074;margin:0}.text-link{font-size:14px;border-bottom:1px solid currentColor;padding-bottom:3px}.playground{background:#1c1e20;color:white;padding:65px 4%;margin:0 -4.35%}.playground .section-head{padding-top:0;border:0}.playground .label{color:#b3b9bd}.play-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:25px 0 0}.reel,.viewer{height:470px;position:relative;border-radius:3px;overflow:hidden;background:#2a2e30}.reel{background:var(--acid);color:#18191a;display:flex;align-items:center;justify-content:center}.reel-word{font-size:clamp(48px,6vw,90px);font-weight:800;letter-spacing:-.07em;line-height:.95;animation:reel 6s infinite}.reel.paused .reel-word{animation-play-state:paused}@keyframes reel{0%,100%{transform:rotate(-8deg) scale(.8)}45%{transform:rotate(5deg) scale(1.2)}65%{transform:rotate(0) scale(1)}}.overlay-label{position:absolute;top:20px;left:20px;font-size:13px;z-index:1}.reel button{position:absolute;bottom:20px;left:20px}.viewer canvas{width:100%;height:100%;display:block;touch-action:none}.viewer-status{position:absolute;inset:45% 20px auto;text-align:center;font-size:16px}.viewer-tools{position:absolute;bottom:16px;left:16px;right:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.viewer-tools button{font-size:13px;padding:9px 13px;background:#31383c;color:white;border:1px solid #727a80;border-radius:30px}.play-caption{display:flex;justify-content:space-between;gap:15px;font-size:14px;margin-top:18px;color:#c6cccf}.play-note{font-size:14px;color:#abb1b5;line-height:1.7;max-width:650px;margin:26px 0 0}.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:100px 0}.about p{font-size:23px;line-height:1.65;margin:0}.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.tag{border:1px solid var(--line);border-radius:25px;padding:9px 15px;font-size:14px}footer{border-top:1px solid var(--line);padding:28px 0 40px;display:flex;gap:20px;justify-content:space-between;font-size:14px;color:#777d82}.prototype{border-top:1px solid var(--line);padding:18px 0;font-size:13px;color:#73777b;line-height:1.6}.case-hero{padding:50px 0 40px}.back{display:inline-block;font-size:14px;margin-bottom:55px;border-bottom:1px solid}.case-hero h1{font-size:clamp(50px,7vw,110px);font-weight:500;letter-spacing:-.065em;line-height:1.05;max-width:1150px;margin:24px 0 30px}.lead{font-size:23px;line-height:1.6;max-width:850px}.case-meta{display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;border-top:1px solid var(--line);padding:25px 0;margin-top:40px}.case-meta p{font-size:15px;line-height:1.7}.case-image{width:100%;display:block;border-radius:3px}.case-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}.case-duo img{width:100%;height:650px;object-fit:cover}.case-copy{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;margin:80px 0}.case-copy p{font-size:20px;line-height:1.8;margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0 70px}.step{border-top:1px solid var(--line);padding-top:20px}.step h3{font-size:22px;font-weight:500}.step p{font-size:16px;line-height:1.7}.pending{padding:50px;background:#e7eaed;border:1px dashed #a5adb4;margin:25px 0 70px;line-height:1.8}.pending h2{font-size:28px}.pending p{max-width:800px}.credits{font-size:14px;color:#71787c;line-height:1.8;padding:28px 0;border-top:1px solid var(--line)}
@media(max-width:760px){header{height:72px}header .wordmark{font-size:19px}nav{gap:15px;font-size:13px}nav a:last-child{display:none}.hero{padding:48px 0}.hero-top .label{font-size:11px}.hero h1{font-size:clamp(52px,12.5vw,90px)}.hero-bottom{display:block}.hero p{font-size:17px}.hero .pill{margin-top:25px}.grid{grid-template-columns:1fr;gap:32px}.cover{height:420px}.type-cover{font-size:72px}.section-head h2{font-size:33px}.section-head .label{font-size:11px}.compact{grid-template-columns:28px 1fr auto;gap:12px}.compact p{grid-column:2;grid-row:2}.compact h3{font-size:21px}.compact .text-link{grid-column:3;grid-row:1}.play-grid{grid-template-columns:1fr}.playground{padding-top:40px}.reel,.viewer{height:400px}.reel-word{font-size:90px}.about,.case-copy{grid-template-columns:1fr;gap:24px;padding:60px 0}.about p{font-size:20px}.case-meta{grid-template-columns:1fr}.case-duo{gap:12px}.case-duo img{height:390px}.steps{grid-template-columns:1fr}.case-copy{margin:0}.pending{padding:25px}.lead{font-size:19px}footer{flex-direction:column}.hero-top{flex-wrap:wrap}.card h3{font-size:21px}}@media(max-width:400px){.cover{height:340px}.type-cover{font-size:59px}nav{gap:11px}.reel,.viewer{height:340px}.case-duo img{height:290px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}