*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:150px}body{margin:0;background:var(--surface);color:var(--text);font-family:var(--shape-font);font-size:16px;font-weight:500;letter-spacing:var(--shape-track);font-optical-sizing:auto;line-height:1.5;transition:background-color .3s,color .3s}body:has(dialog[open]){overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{border:0}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--text);outline-offset:6px}::selection{background:var(--shape-lime);color:var(--shape-on-accent)}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.03;letter-spacing:var(--shape-track)}h2{font-size:var(--shape-heading)}h3{font-size:24px;letter-spacing:-.035em}p{line-height:1.5}small,code{font-size:11px}img{max-width:100%;display:block}sup{font-size:10px;vertical-align:super;background:var(--shape-lime);color:var(--shape-on-accent);padding:1px 4px;border-radius:20px;letter-spacing:0}i{font-style:normal}[hidden]{display:none!important}.skip-link{position:fixed;top:10px;left:10px;z-index:100;background:var(--shape-lime);color:var(--shape-on-accent);padding:16px;transform:translateY(-150%)}.skip-link:focus{transform:none}.header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px var(--shape-gutter);background:var(--surface);position:relative;z-index:30}.wordmark{font-size:32px;font-weight:700;letter-spacing:-1.8px;display:flex;align-items:center}.wordmark-dot{color:var(--text)}.wordmark small{font-family:monospace;font-size:9px;line-height:1.2;letter-spacing:.06em;font-weight:500;border-left:1px solid var(--line);margin-left:16px;padding-left:16px;max-width:60px}.desktop-nav{display:flex;gap:30px;font-size:13px}.header-actions{display:flex;gap:24px;align-items:center}.theme-toggle{background:transparent;font-size:24px;width:32px;height:40px;padding:0}.menu-toggle{display:none;background:transparent}.mobile-menu{padding:24px var(--shape-gutter);background:var(--shape-lime);color:var(--shape-on-accent);position:absolute;left:0;right:0;z-index:40}.mobile-menu a{display:block;font-size:32px;line-height:1.5;letter-spacing:-1px}/* The SVG alpha filter forms a neck only while the two surfaces are close. */
.shape-button{--button-bg:var(--text);--button-text:var(--surface);display:inline-flex;align-items:center;background:transparent;color:var(--button-text);padding:0;white-space:nowrap;flex-shrink:0;max-width:100%;font-size:16px;font-weight:500;letter-spacing:-.025em;filter:url(#shape-button-goo);position:relative;overflow:visible}
.shape-button>span{border-radius:var(--shape-pill);background:var(--button-bg);padding:8px 20px;position:relative;line-height:20px}
.shape-button>i{display:grid;place-items:center;background:var(--button-bg);border-radius:50%;width:36px;height:36px;margin-left:-4px;position:relative;flex-shrink:0;transition:transform var(--shape-motion) var(--shape-ease);font-size:15px;line-height:1;transform:translateX(0) rotate(0)}
.shape-button:is(:hover,:focus-visible,.is-hovered)>i{transform:translateX(12px) rotate(45deg)}
.shape-button.lime{--button-bg:var(--shape-lime);--button-text:var(--shape-on-accent)}
.shape-button.small{font-size:14px}.shape-button.small>span{padding:8px 18px}.shape-button.small>i{width:36px;height:36px;font-size:14px}
.shape-button>i,.shape-button.small>i{font-size:0}
.shape-button>i:after{content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;background:currentColor;mask:url('assets/arrow-action.svg') center/contain no-repeat}
.shape-button>i[data-symbol]{font-size:15px}.shape-button>i[data-symbol]:after{display:none}
.shape-button:is(:hover,:focus-visible,.is-hovered)>i[data-symbol]{transform:translateX(12px)}
.button-state-study{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.button-state-study p{font-size:12px;color:var(--muted);max-width:330px}.button-state-study>div{display:flex;align-items:center;gap:32px}.button-state-study .text-link{font-size:12px}.button-state-study small{display:block;margin-bottom:14px;color:var(--muted);font:9px monospace}.effect-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.text-link{background:none;border:0;padding:0;position:relative;display:inline-block;font-size:inherit;text-align:left}.text-link:after{content:'';position:absolute;bottom:-4px;right:0;width:0;height:1px;background:currentColor;transition:width var(--shape-motion) var(--shape-ease)}.text-link:is(:hover,:focus-visible):after{width:100%;left:0;right:auto}.arrow-link{display:inline-flex;gap:14px;align-items:center}.arrow-link>span{display:inline-block;transition:transform var(--shape-motion) var(--shape-ease)}.arrow-link:hover>span{transform:translate(4px,-4px)}.circle-button{width:52px;height:52px;background:var(--text);color:var(--surface);border-radius:50%;font-size:24px;display:grid;place-items:center;transition:transform var(--shape-motion) var(--shape-ease),background .3s}.circle-button:is(:hover,:focus-visible){transform:rotate(45deg);background:var(--shape-lime);color:var(--shape-on-accent)}.hero{padding:56px var(--shape-gutter) 0}.hero-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:26px}.eyebrow{font-size:12px;letter-spacing:-.02em;line-height:1.4}.eyebrow:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:8px}.edition{font:9px/1.6 monospace;letter-spacing:.04em;color:var(--muted)}h1{font-size:var(--shape-display);line-height:.99;max-width:1100px;position:relative;z-index:2}.serif{font-family:var(--shape-font);font-style:normal;letter-spacing:var(--shape-track)}.lime-dot{color:var(--shape-lime)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;padding:32px 0 40px}.hero-bottom p{font-size:15px;letter-spacing:-.02em}.folder{position:relative;overflow:hidden;border-radius:var(--shape-radius);background:var(--panel);isolation:isolate}.media-fill{width:100%;height:100%;object-fit:cover;display:block}.hero-media{height:clamp(380px,48vw,720px);margin-top:12px}.hero-media .media-fill{position:absolute;inset:0}.folder-step{--cut-x:35%;--cut-y:60px;--cut-r:18px;mask:radial-gradient(var(--cut-r) at var(--cut-r) var(--cut-r),#0000 98%,#000) calc(var(--cut-x) - var(--cut-r)) calc(var(--cut-y) - var(--cut-r))/calc(var(--cut-r)*2) calc(var(--cut-r)*2),linear-gradient(#000 0 0) 0 var(--cut-y)/var(--cut-x) 100%,linear-gradient(#000 0 0) var(--cut-x) 0/100% 100%;mask-repeat:no-repeat}.folder-cut{position:absolute;top:18px;left:calc(var(--cut-x) + 24px);font:9px monospace;letter-spacing:.08em;background:var(--shape-lime);color:var(--shape-on-accent);padding:8px 12px;border-radius:20px}.hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#0006);pointer-events:none}.media-play{position:absolute;bottom:28px;right:28px;background:var(--surface);color:var(--text);padding:8px 23px 8px 8px;border-radius:80px;display:flex;align-items:center;gap:12px;z-index:2;text-align:left;font-size:13px}.media-play small{display:block;color:var(--muted);margin-top:1px}.play-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--text);color:var(--surface);font-size:13px;transition:transform .5s var(--shape-ease)}.media-play:hover .play-symbol{transform:scale(.87)}.media-caption{position:absolute;bottom:40px;left:32px;font:10px monospace;letter-spacing:.05em;color:white;z-index:2}.hero-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:18px 0 54px}.hero-foot span:last-child{font:9px monospace;letter-spacing:.08em}.section-nav{position:sticky;top:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:32px;padding:22px var(--shape-gutter);font-size:11px}.section-nav a{color:var(--muted);white-space:nowrap;transition:color .2s}.section-nav a:is(:hover,[aria-current]){color:var(--text)}.section-nav a[aria-current]:before{content:'';display:inline-block;width:5px;height:5px;background:var(--text);border-radius:50%;margin-right:7px}.status-dot{margin-left:auto;font:8px monospace;white-space:nowrap}.status-dot:before{content:'';display:inline-block;width:6px;height:6px;background:var(--shape-lime);border-radius:50%;margin-right:8px;box-shadow:0 0 0 3px var(--panel)}.section{padding:110px var(--shape-gutter);border-bottom:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:70px}.section-heading>.eyebrow{padding-top:10px}.intro{font-size:15px;color:var(--muted);margin-top:28px;letter-spacing:-.015em}.subheading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:48px 0 24px}.subheading h3{font-size:18px;letter-spacing:-.03em}.subheading>span{font:8px monospace;letter-spacing:.05em;color:var(--muted)}.swatches{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:10px}.swatch{display:flex;flex-direction:column;align-items:start;justify-content:space-between;gap:30px;min-height:235px;text-align:left;border-radius:14px;padding:22px 18px;transition:transform .6s var(--shape-ease);border:1px solid transparent}.swatch:is(:hover,:focus-visible){transform:translateY(-8px)}.swatch strong{font-size:28px;font-weight:500;letter-spacing:-1px;align-self:start}.swatch span{font-size:10px}.swatch-lime{background:var(--shape-lime);color:var(--shape-on-accent)}.swatch-ink{background:var(--shape-ink);color:white}.swatch-paper{background:white;color:var(--shape-ink);border-color:#e2e2e2}.swatch-gray{background:#f5f5f5;color:var(--shape-ink)}.swatch-night{background:var(--shape-night);color:white}.type-specimen{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin:80px 0 50px;padding-top:36px;border-top:1px solid var(--line)}.specimen-label p:nth-child(2){font-size:13px;margin-top:25px}.specimen-label small{display:block;font:8px/1.7 monospace;color:var(--muted);margin-top:40px}.type-display{font-size:clamp(40px,6.5vw,100px);letter-spacing:-.065em;line-height:1.1}.type-heading{font-size:clamp(25px,3vw,48px);letter-spacing:-.05em;line-height:1.2;margin-top:26px}.type-body{font-size:18px;max-width:520px;margin-top:26px}.type-meta{font:8px monospace;color:var(--muted);margin-top:34px}.foundation-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.token-card{min-width:0;background:var(--panel);border-radius:18px;padding:30px}.token-card h3{font-size:24px}.token-card p{font-size:12px;color:var(--muted);margin-top:10px}.spacing-bars{height:100px;display:flex;gap:12px;align-items:end;margin-top:28px}.spacing-bars i{height:var(--size);width:var(--size);background:var(--text);border-radius:2px}.radius-samples{display:flex;gap:20px;margin-top:28px;align-items:center;height:100px}.radius-samples span{display:grid;place-items:center;border:1px solid var(--text);height:85px;width:85px;border-radius:24px;font-size:20px}.radius-samples span:nth-child(2){width:155px;border-radius:999px}.radius-samples span:last-child{border-radius:50%;background:var(--shape-lime);color:var(--shape-on-accent);border:0}.button-playground{display:grid;grid-template-columns:1.5fr 1.4fr 1fr .7fr;gap:20px;background:var(--panel);border-radius:18px;padding:50px 32px}.button-example{display:flex;flex-direction:column;align-items:start;justify-content:center;gap:38px;min-width:0}.button-example code{color:var(--muted);font-size:9px}.frame-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.frame-demo{height:clamp(230px,30vw,430px)}.frame-demo .media-fill{transition:transform 1.1s var(--shape-ease)}.frame-demo:hover .media-fill{transform:scale(1.05)}.folder-tab{--notch-w:140px;--notch-h:44px;--r:18px;mask:radial-gradient(var(--r) at var(--r) calc(100% - var(--r)),#0000 98%,#000) calc(100% - var(--notch-w) - var(--r)) calc(var(--notch-h) - var(--r))/calc(var(--r)*2) calc(var(--r)*2),linear-gradient(#000 0 0) 0 0/calc(100% - var(--notch-w)) 100%,linear-gradient(#000 0 0) 0 var(--notch-h)/100% 100%;mask-repeat:no-repeat}.folder-corner{--notch-w:90px;--notch-h:62px;--r:18px;mask:radial-gradient(var(--r) at var(--r) var(--r),#0000 98%,#000) calc(100% - var(--notch-w) - var(--r)) calc(100% - var(--notch-h) - var(--r))/calc(var(--r)*2) calc(var(--r)*2),linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--notch-h)),linear-gradient(#000 0 0) 0 0/calc(100% - var(--notch-w)) 100%;mask-repeat:no-repeat}.folder-label{position:absolute;bottom:22px;left:22px;font:9px monospace;padding:8px 12px;border-radius:20px;background:var(--shape-paper);color:var(--shape-ink)}.frame-hover{position:absolute;right:24px;top:66px;font-size:32px;color:white;opacity:0;transform:translate(-10px,10px);transition:all var(--shape-motion) var(--shape-ease)}.frame-demo:hover .frame-hover{opacity:1;transform:none}.caption{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-top:18px}.caption strong{font-weight:500;font-size:15px;letter-spacing:-.025em}.caption>span{font-size:10px;color:var(--muted)}.frame-note{display:flex;align-items:center;gap:24px;margin:30px 0 70px}.frame-note p{font-size:12px;color:var(--muted);max-width:460px}.frame-note button{margin-left:auto;font-size:11px;white-space:nowrap}.pill{border-radius:999px;display:inline-block;border:1px solid var(--line);background:var(--surface);padding:8px 14px;font-size:11px;white-space:nowrap;transition:background .3s,color .3s,transform .5s var(--shape-ease)}button.pill:is(:hover,:focus-visible){background:var(--shape-lime);color:var(--shape-on-accent);border-color:var(--shape-lime)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:80px}.project-card{display:block;min-width:0}.project-card.offset{padding-top:110px}.project-image{position:relative;height:auto;aspect-ratio:4/3;border-radius:var(--shape-radius);overflow:hidden;background:var(--panel)}.project-image img{position:absolute;inset:0;transform:scale(1.1);transition:transform 1.2s var(--shape-ease)}.project-card:is(:hover,:focus-visible,.is-hovered) .project-image img{transform:scale(1.1) translateY(-10px)}/* Sliding the shaped surface into the frame reveals the folder silhouette. */
.card-tags{display:flex;gap:12px;position:absolute;top:0;right:0;left:auto;z-index:2;padding:0 0 12px 12px;background:var(--surface);border-radius:0 0 0 24px;opacity:1;transform:translateY(calc(-100% - 25px));transition:transform 300ms var(--shape-ease)}
.card-tags:before,.card-tags:after{content:'';position:absolute;width:24px;height:24px;background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--surface) 24px);pointer-events:none}
.card-tags:before{top:0;left:-24px}.card-tags:after{right:0;bottom:-24px}
.card-tags .pill{background:var(--panel);color:var(--text);border:0;font-size:12px;padding:7px 16px;line-height:18px}
.project-card:is(:hover,:focus-visible,.is-hovered) .card-tags{transform:translateY(0)}
.project-arrow{position:absolute;bottom:22px;right:22px;display:grid;place-items:center;width:48px;height:48px;background:var(--shape-lime);color:var(--shape-on-accent);border-radius:50%;opacity:0;transform:scale(.6);transition:opacity 300ms,transform 600ms var(--shape-ease)}
.project-card:focus-visible .project-arrow,.project-card.is-hovered .project-arrow{opacity:1;transform:scale(1)}
.project-cursor{position:fixed;top:0;left:0;z-index:80;pointer-events:none;transition:transform 300ms var(--shape-ease)}
.cursor-disc{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--shape-lime);color:var(--shape-on-accent);font-size:42px;font-weight:400;line-height:1;opacity:0;transform:translate(-50%,-50%) scale(.25);transition:opacity 200ms,transform 600ms var(--shape-ease)}
.has-project-cursor .cursor-disc{opacity:1;transform:translate(-50%,-50%) scale(1)}
.has-project-cursor .project-card,.has-project-cursor .project-card *{cursor:none}
.has-project-cursor .project-card .project-arrow{opacity:0}
.cursor-disc{font-size:0}.cursor-disc:after{content:'';position:absolute;inset:0;margin:auto;width:40px;height:52px;background:currentColor;mask:url('assets/arrow-up-right.svg') center/contain no-repeat}
.project-hover-note{font-size:12px;color:var(--muted);margin:-10px 0 26px}
@media(hover:none),(pointer:coarse){.card-tags{transform:none;gap:6px;padding:0 0 10px 10px}.card-tags .pill{font-size:10px;padding:6px 10px}.project-arrow{opacity:1;transform:none}.project-cursor{display:none}}
@media(max-width:760px){.button-state-study>div{flex-wrap:wrap;gap:24px}.card-tags{left:auto!important;right:0!important;top:0!important;transform:none;gap:6px;padding:0 0 10px 10px}.card-tags .pill{font-size:10px;padding:6px 10px}}
@media(prefers-reduced-motion:reduce){.project-cursor{display:none}.has-project-cursor .project-card,.has-project-cursor .project-card *{cursor:pointer}}
.project-meta{font-size:12px;margin-top:20px}.project-meta span{margin:0 8px}.project-card h3{font-size:clamp(24px,2.3vw,34px);margin-top:9px;max-width:450px;line-height:1.15}.project-hint{font-size:10px;color:var(--muted);margin-top:12px}.component-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin:20px 0 50px}.component-split .subheading{margin-top:24px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.pill.selected{background:var(--text);color:var(--surface);border-color:var(--text)}.filters sup{background:transparent;color:inherit;margin-left:4px}.filter-results>div{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:17px}.filter-results span{font:10px monospace;color:var(--muted)}.filter-results i{margin-left:auto}.accordion details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:23px 0;font-size:17px;display:flex;justify-content:space-between;align-items:center}summary::-webkit-details-marker{display:none}summary>span{font-size:24px;transition:transform .4s var(--shape-ease)}details[open] summary>span{transform:rotate(45deg)}details>p{font-size:13px;color:var(--muted);max-width:420px;padding-bottom:25px;animation:rise .5s var(--shape-ease) both}.nav-demo{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:14px;padding:25px 20px;font-size:12px}.mini-wordmark{font-size:24px;font-weight:bold;letter-spacing:-1px}.services-panel{padding:20px;border-radius:0 0 16px 16px;background:var(--shape-lime);color:var(--shape-on-accent);animation:rise .5s var(--shape-ease)}.services-panel a{display:flex;justify-content:space-between;padding:9px 0;font-size:18px}.services-panel a:hover{text-decoration:underline}form label{display:block;font-size:22px;letter-spacing:-.7px;margin-bottom:20px}.input-row{display:flex;align-items:center;border-bottom:1px solid var(--text);gap:15px;padding-bottom:14px}.input-row input{background:transparent;color:var(--text);min-width:0;flex:1;width:100%;padding:10px 0;border:0;font-size:17px}.input-row input::placeholder{color:var(--muted)}.input-row .circle-button{width:42px;height:42px;flex-shrink:0}.form-message{font-size:11px;color:var(--muted);margin-top:16px}.video-cta{background:var(--text);color:var(--surface);border-radius:var(--shape-radius);padding:40px;display:flex;justify-content:space-between;align-items:center;gap:30px}.video-cta h3{font-size:35px}.video-cta p{margin-top:12px;font-size:13px;opacity:.7}.motion-section{background:var(--panel)}.motion-toolbar{display:flex;gap:22px;align-items:center;justify-content:space-between;margin-bottom:24px}.motion-toolbar .pill{font-family:monospace;font-size:10px}.motion-toolbar>.text-link{font-size:12px;margin-left:auto}.motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}.motion-card{min-width:0}.motion-stage{display:flex;align-items:center;justify-content:center;height:245px;background:var(--surface);border-radius:18px;overflow:hidden}.motion-orb{width:95px;height:95px;display:grid;place-items:center;background:var(--shape-lime);color:var(--shape-on-accent);border-radius:50%;font-size:45px}.rise-demo{animation:rise-loop 4s var(--shape-ease) infinite}.stagger-demo{gap:10px}.stagger-demo>span{display:grid;place-items:center;background:var(--panel);border-radius:12px;width:70px;height:90px;font-size:50px;animation:rise-loop 4s var(--shape-ease) infinite}.stagger-demo>span:nth-child(2){animation-delay:100ms}.stagger-demo>span:nth-child(3){animation-delay:200ms;background:var(--shape-lime);color:var(--shape-on-accent)}.rolling-link{display:flex;align-items:center;font-size:clamp(20px,2.5vw,38px);letter-spacing:-1px;gap:10px}.rolling-link>span{height:1.3em;overflow:hidden}.rolling-link b{display:block;font-weight:500;line-height:1.3;transition:transform .6s var(--shape-ease)}.rolling-link:is(:hover,:focus-visible) b{transform:translateY(-100%)}.scroll-demo{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;align-items:center;margin-top:90px}.scroll-demo h3{font-size:40px;margin:22px 0}.scroll-demo p:not(.eyebrow){font-size:14px;max-width:310px;color:var(--muted)}.parallax-window{height:380px;border-radius:24px;overflow:hidden;position:relative}.parallax-window img{height:120%;position:absolute;top:-10%;left:0}.reveal-demo{border-top:1px solid var(--line);margin-top:70px;padding-top:12px}.reveal-demo .text-link{font-size:12px}.word-reveal{font-size:clamp(40px,5.9vw,88px);line-height:1.08;letter-spacing:-.06em;max-width:1080px;margin-top:40px}.word-reveal>span{display:inline-block;margin-right:.18em;overflow:hidden;vertical-align:bottom}.word-reveal>span>span{display:inline-block}.js-motion [data-reveal]{transition:opacity var(--shape-motion) var(--shape-ease),transform var(--shape-motion) var(--shape-ease)}.js-motion [data-reveal]:not(.is-visible){opacity:0;transform:translateY(36px)}.js-motion [data-reveal-words]:not(.is-visible)>span>span{transform:translateY(110%)}.js-motion [data-reveal-words].is-visible>span>span{animation:word-rise var(--shape-motion) var(--shape-ease) both;animation-delay:var(--delay)}.motion-note{font-size:11px;color:var(--muted);margin-top:35px}.editorial{height:650px;--cut-x:60%;--cut-y:50px}.editorial>.media-fill{position:absolute;inset:0;filter:brightness(.62)}.editorial-copy{position:absolute;top:120px;left:55px;color:white;z-index:2}.editorial h3{font-size:clamp(50px,6vw,96px);margin:30px 0 36px;line-height:1}.editorial-badge{position:absolute;bottom:35px;right:35px;display:grid;place-items:center;width:120px;height:120px;text-align:center;font-size:14px;letter-spacing:-.03em;border-radius:50%;background:var(--shape-lime);color:var(--shape-on-accent);transform:rotate(14deg)}.marquee{overflow:hidden;background:var(--shape-lime);color:var(--shape-on-accent);padding:35px 0}.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}.marquee-track span{font-size:clamp(45px,7.5vw,120px);letter-spacing:-.06em;line-height:1.2;white-space:nowrap}.marquee:hover .marquee-track{animation-play-state:paused}.usage-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:90px}.usage-grid>div>h3{font-size:28px;max-width:300px;line-height:1.12}.usage-grid>div>p{font-size:14px;color:var(--muted);margin:22px 0}.usage-grid .arrow-link{font-size:13px}.source-note{margin-top:65px;border-top:1px solid var(--line);padding-top:25px}.source-note p:not(.eyebrow){font-size:11px;color:var(--muted);margin-top:16px}.source-note a{text-decoration:underline}.code-panel{background:var(--panel);border-radius:18px;padding:25px;min-width:0}.code-panel>div{display:flex;align-items:center;justify-content:space-between;gap:15px;font:9px monospace}.code-panel button{font:10px var(--shape-font)}pre{margin:30px 0 0;overflow:auto;padding-bottom:8px;max-width:100%}pre code{font:11px/1.8 monospace;color:var(--text)}footer{padding:45px var(--shape-gutter) 25px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-top>.text-link{font-size:13px}.footer-bottom{border-top:1px solid var(--line);margin-top:45px;padding-top:22px;font-size:10px;color:var(--muted)}.reading-progress{position:fixed;z-index:60;top:0;left:0;height:3px;width:100%;background:var(--shape-lime);transform:scaleX(0);transform-origin:left;pointer-events:none}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--text);color:var(--surface);border:1px solid var(--line);padding:14px 24px;border-radius:50px;font-size:12px;z-index:70;pointer-events:none;transition:opacity .2s,transform .4s var(--shape-ease);max-width:calc(100% - 30px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{background:var(--surface);color:var(--text);border:0;border-radius:24px;padding:0;width:min(1040px,92vw);max-height:90dvh;box-shadow:0 30px 100px #0004}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:50%;background:var(--shape-paper);color:var(--shape-ink);font-size:28px;z-index:3}.project-dialog>img{width:100%;max-height:46vh;object-fit:cover}.project-dialog>div{padding:32px}.project-dialog h2{font-size:40px;margin:14px 0}.project-dialog p:not(.eyebrow){font-size:13px;color:var(--muted);margin-bottom:25px}.reel-dialog{background:#0e0f11;color:white}.reel-dialog video{display:block;width:100%;max-height:75dvh;background:black}.reel-dialog>p{font-size:12px;padding:20px}.replaying{animation:none!important}.paused-motion *{animation-play-state:paused!important}.paused-motion [data-parallax]>.media-fill{transform:none!important}.paused-motion [data-reveal]{opacity:1!important;transform:none!important}.paused-motion [data-reveal-words]>span>span{animation:none!important;transform:none!important}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes rise-loop{0%,8%{opacity:0;transform:translateY(36px)}35%,80%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(-12px)}}@keyframes word-rise{from{transform:translateY(110%)}to{transform:none}}@keyframes marquee{to{transform:translateX(-50%)}}
@supports (clip-path:shape(from 0 0,line to 100% 0,line to 100% 100%,close)){
  .folder-tab,.folder-corner,.folder-step{mask:none}
  .folder-tab{clip-path:shape(from 24px 0,line to calc(100% - 164px) 0,arc to calc(100% - 140px) 24px of 24px cw,line to calc(100% - 140px) 28px,arc to calc(100% - 124px) 44px of 16px ccw,line to calc(100% - 24px) 44px,arc to 100% 68px of 24px cw,line to 100% calc(100% - 24px),arc to calc(100% - 24px) 100% of 24px cw,line to 24px 100%,arc to 0 calc(100% - 24px) of 24px cw,line to 0 24px,arc to 24px 0 of 24px cw,close)}
  .folder-corner{clip-path:shape(from 24px 0,line to calc(100% - 24px) 0,arc to 100% 24px of 24px cw,line to 100% calc(100% - 86px),arc to calc(100% - 24px) calc(100% - 62px) of 24px cw,line to calc(100% - 74px) calc(100% - 62px),arc to calc(100% - 90px) calc(100% - 46px) of 16px ccw,line to calc(100% - 90px) calc(100% - 24px),arc to calc(100% - 114px) 100% of 24px cw,line to 24px 100%,arc to 0 calc(100% - 24px) of 24px cw,line to 0 24px,arc to 24px 0 of 24px cw,close)}
  .folder-step{clip-path:shape(from 24px var(--cut-y),line to calc(var(--cut-x) - 18px) var(--cut-y),arc to var(--cut-x) calc(var(--cut-y) - 18px) of 18px ccw,line to var(--cut-x) 24px,arc to calc(var(--cut-x) + 24px) 0 of 24px cw,line to calc(100% - 24px) 0,arc to 100% 24px of 24px cw,line to 100% calc(100% - 24px),arc to calc(100% - 24px) 100% of 24px cw,line to 24px 100%,arc to 0 calc(100% - 24px) of 24px cw,line to 0 calc(var(--cut-y) + 24px),arc to 24px var(--cut-y) of 24px cw,close)}
}
@media(min-width:1500px){.header{max-width:1800px;margin-left:auto;margin-right:auto}.hero{padding-top:75px}.hero-media{margin-top:-35px}.section-nav{justify-content:center}.status-dot{margin-left:80px}}
@media(max-width:1100px){.desktop-nav{gap:18px}.header-actions{gap:14px}.wordmark small{display:none}.button-playground{grid-template-columns:1fr 1fr;gap:50px;padding:35px}.section-nav{gap:22px}.status-dot{display:none}.component-split{gap:35px}.swatch{padding:18px 12px;min-height:200px}.swatch strong{font-size:23px}.frame-note{flex-wrap:wrap}.frame-note button{margin-left:0}.usage-grid{gap:40px}.caption{flex-direction:column;gap:5px}.section-heading{grid-template-columns:1fr 2.4fr}.scroll-demo{gap:35px}}
@media(max-width:760px){html{scroll-padding-top:100px}.header{padding-top:20px;padding-bottom:20px}.wordmark{font-size:28px}.desktop-nav,.header-actions>.shape-button{display:none}.menu-toggle{display:flex;gap:12px;align-items:center;font-size:12px}.menu-toggle>span{font-size:22px}.header-actions{gap:18px}.hero{padding-top:35px}.hero-top{margin-bottom:26px}.eyebrow{font-size:11px}.edition{display:none}h1{font-size:clamp(54px,10.7vw,80px)}.hero-bottom{gap:24px;padding:25px 0 22px;align-items:start;flex-direction:column}.hero-bottom p{font-size:14px}.hero-media{height:400px;margin-top:10px;--cut-x:42%;--cut-y:44px;--cut-r:14px}.folder-cut{font-size:7px;top:12px;left:calc(var(--cut-x) + 10px);padding:5px 8px}.media-play{bottom:20px;right:16px;font-size:11px;padding-right:15px;gap:8px}.play-symbol{width:34px;height:34px}.media-play small{font-size:9px}.media-caption{font-size:7px;bottom:95px;left:20px;max-width:200px}.hero-foot{font-size:9px;padding-bottom:30px}.hero-foot span:first-child{max-width:180px}.hero-foot span:last-child{font-size:7px;align-self:center}.section-nav{padding:17px var(--shape-gutter);gap:24px;overflow:auto;scrollbar-width:none;font-size:10px}.section{padding-top:65px;padding-bottom:65px}.section-heading{grid-template-columns:1fr;gap:25px;margin-bottom:38px}.section-heading>.eyebrow{padding-top:0}h2{font-size:clamp(36px,7.8vw,54px)}.intro{font-size:13px;margin-top:20px}.subheading{align-items:start;margin-top:32px}.subheading h3{font-size:16px}.subheading>span{font-size:7px;max-width:145px;text-align:right}.swatches{grid-template-columns:1fr 1fr;gap:10px}.swatch{min-height:170px;padding:17px;gap:20px}.swatch:first-child{grid-column:span 2;min-height:190px}.swatch strong{font-size:27px}.swatch span{font-size:10px}.type-specimen{grid-template-columns:1fr;gap:30px;margin:45px 0 30px}.specimen-label p:nth-child(2){margin-top:12px}.specimen-label small{margin-top:15px}.type-display{font-size:clamp(38px,9vw,64px)}.type-heading{font-size:26px}.type-body{font-size:16px}.type-meta{font-size:7px;line-height:1.7}.foundation-grid{grid-template-columns:1fr}.token-card{padding:24px}.token-card h3{font-size:23px}.spacing-bars{gap:7px;overflow:hidden}.spacing-bars i{flex-shrink:0}.button-playground{grid-template-columns:1fr;padding:28px;gap:35px}.button-example{gap:16px}.button-example code{font-size:10px}.shape-button{font-size:15px}.frame-grid{grid-template-columns:1fr;gap:30px}.frame-demo{height:300px}.caption{gap:5px}.frame-note{gap:15px;margin-bottom:40px}.frame-note p{font-size:11px}.project-grid{grid-template-columns:1fr;gap:35px;margin-bottom:35px}.project-card.offset{padding-top:0}.project-image{height:auto;aspect-ratio:4/3}.project-card h3{font-size:26px}.project-arrow{opacity:1;transform:none;width:38px;height:38px}.component-split{grid-template-columns:1fr;gap:25px;margin-bottom:35px}.component-split .subheading{margin-top:20px}.video-cta{padding:28px;align-items:start;flex-direction:column}.video-cta h3{font-size:30px}.motion-toolbar{flex-wrap:wrap;gap:20px;margin:30px 0}.motion-toolbar>.text-link{margin-left:0;font-size:11px}.motion-toolbar .pill{font-size:9px}.motion-grid{grid-template-columns:1fr;gap:30px}.motion-stage{height:220px}.motion-grid .caption{flex-direction:row;gap:12px}.motion-grid .caption strong{font-size:13px}.motion-grid .caption span{font-size:9px;max-width:150px;text-align:right}.rolling-link{font-size:29px}.scroll-demo{grid-template-columns:1fr;gap:28px;margin-top:55px}.scroll-demo h3{font-size:34px}.parallax-window{height:320px}.reveal-demo{margin-top:40px}.word-reveal{font-size:44px}.reveal-demo .text-link{font-size:10px;white-space:nowrap}.editorial{height:540px;--cut-x:45%;--cut-y:35px}.editorial-copy{left:26px;top:85px;right:20px}.editorial h3{font-size:58px}.editorial-badge{width:90px;height:90px;font-size:11px;right:20px;bottom:24px}.marquee{padding:24px 0}.marquee-track span{font-size:56px}.usage-grid{grid-template-columns:1fr;gap:35px}.source-note{margin-top:35px}.code-panel{padding:22px 16px}.code-panel code{font-size:9px}.footer-top{gap:25px}.footer-top>.text-link{font-size:10px}.footer-bottom{flex-direction:column;align-items:start;gap:12px;margin-top:30px}.project-dialog>div{padding:24px}.project-dialog h2{font-size:32px}.project-dialog>img{height:260px}.dialog-close{right:12px;top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion [data-reveal]{opacity:1!important;transform:none!important}.js-motion [data-reveal-words]>span>span{transform:none!important}.who-statement>span{color:var(--text)!important}[data-parallax]>.media-fill{transform:none!important}.marquee-track{transform:none!important}}