/* Source: Style guide sFAaecWKLgjr7GstVqI6qb, inspected 06 Nov 2026.
   Menu 5:72; Hero 297:249; Buttons 5:46; Input 6:367;
   Article 585:3156; Footer 6:496. Overrides requested by the owner:
   fixed header, footer identity, accessible mobile navigation and carousel. */
@font-face{font-family:Fraunces;font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fraunces-italic.ttf') format('truetype')}
:root{--display:Fraunces,Georgia,serif;--radius:8px;--header-offset:104px}
h1,h2{font-family:var(--display);font-style:italic;font-weight:400!important;letter-spacing:0;font-feature-settings:'dlig' 1,'hlig' 1,'frac' 1}
.wrap{width:min(1200px,calc(100% - 32px))}
.header{width:min(1200px,calc(100% - 24px));padding:12px 24px;gap:24px;border-radius:8px;min-height:72px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);box-shadow:none}
.header .logo,.footer-brand img{width:119px;height:48px;flex-shrink:0}
.header nav{gap:32px;font:400 14px/1.5 var(--sans)}
.header nav>a:not(.button){padding:0}
.button{font:500 14px/1.5 var(--sans);padding:11px 19px;gap:6px;border-radius:6px;color:#fafafa;background:linear-gradient(0deg,#fafafa00 50%,#fafafa33 100%),#050505;justify-content:center;min-height:45px}
.button:hover{background:linear-gradient(0deg,#fafafa33,#fafafa33),#050505;transform:scale(.97);border-color:#050505}
.button.secondary{color:#050505;background:#fafafa;border-color:#cdcdcd}
.button.secondary:hover{background:#e2e2e2;border-color:#cdcdcd}
.grid-paper{position:relative;isolation:isolate;background-image:none}
.grid-paper:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.04;background-image:url('/assets/figma-c1850.png'),url('/assets/figma-ce121.png');background-size:40.96px 40.96px}
.reference-hero{border-bottom:0}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:56px;padding-top:128px;padding-bottom:32px;min-height:510px}
.hero-inner>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:32px;position:relative;z-index:2;min-width:0}
.hero-inner h1{font-size:52px;line-height:1.15;max-width:632px;margin:0}
.hero-inner p{font-size:16px;line-height:24px;max-width:632px;margin:0;color:#444}
.hero-tags{gap:8px;margin:0;flex-wrap:wrap}
.hero-tags a{font:600 11px/1.5 'Zilla Slab',Georgia,serif;letter-spacing:1.1px;padding:4px 12px;border-radius:4px;background:#0505051a;backdrop-filter:blur(10px);color:#050505}
.hero-tags a:hover{background:#050505;color:#fafafa}
.hero-inner .actions{gap:16px;margin:0}
.infinity-carousel{--card:350px;--shift:277px;height:350px;padding:0;margin:0;z-index:1}
.carousel-card{border-radius:8px;box-shadow:0 10px 32px -8px #00000040;background:#fafafa}
.carousel-card.prev,.carousel-card.next{opacity:.2}
.carousel-card.prev{transform:translate(calc(-50% - var(--shift)),-50%) scale(.5142857143)}
.carousel-card.next{transform:translate(calc(-50% + var(--shift)),-50%) scale(.5142857143)}
.carousel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


.carousel-label{top:12px;left:12px;padding:4px 12px;border-radius:4px;background:#fafafa;font:600 11px/1.5 'Zilla Slab',Georgia,serif;letter-spacing:1.1px}
.carousel-card>div{left:0;right:0;bottom:0;gap:0;align-items:flex-end}
.carousel-card strong{font:600 12px/1.5 var(--sans);max-width:175px;margin:12px;padding:4px 12px;background:#fafafa;border-radius:4px}
.carousel-card>div>span{font:500 14px/1.5 var(--sans);padding:12px 20px;border-radius:6px 0 0;background:#fafafa;display:flex;align-items:center;gap:6px}
.carousel-card>div>span i{font-size:16px;line-height:1}
.carousel-card.prev>div,.carousel-card.next>div{visibility:hidden}

.carousel-controls{left:-18px;right:-18px}
.eyebrow,.breadcrumb{font:600 11px/1.5 'Zilla Slab',Georgia,serif;letter-spacing:1.1px;text-transform:uppercase}
.breadcrumb{gap:6px}.breadcrumb a{color:#444}.breadcrumb [aria-current=page]{color:#050505}
.contact-form label{font-size:14px;font-weight:500;line-height:1.5}
.contact-form input:not([type=checkbox]),.contact-form textarea,.contact-form select{font:400 14px/1.5 var(--sans);background:#fafafa;border:1px solid #cdcdcd;padding:8px 16px;min-height:42px;border-radius:8px}
.footer{display:block;margin:16px;padding:64px 64px 48px;background:#ffffff80;border-radius:8px}
.footer-brand{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:32px}
.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;padding-bottom:48px;max-width:none}
.footer-grid>div{display:flex;flex-direction:column;gap:12px}
.footer-grid .eyebrow{font:600 11px/1.5 'Zilla Slab',Georgia,serif;letter-spacing:1.1px;margin:0 0 -4px;color:#444}
.footer-grid a{font:400 14px/1.5 var(--sans);margin:0}
.footer-grid a.icon-credit{font-size:10px}
.header+main>section.reference-article-hero:first-child{padding:160px 16px 64px}
.reference-article-hero>div{max-width:750px;display:flex;flex-direction:column;gap:32px}
.reference-article-hero h1{font-size:48px;line-height:1.25;margin:0}
.reference-article-hero p{font-size:16px;line-height:1.5;color:#050505;margin:0}
.reference-article-layout{max-width:1600px;grid-template-columns:248px minmax(0,1fr) 248px;padding:16px 16px 64px;gap:32px}
.reference-article-layout>.article-section{padding-top:16px;width:100%;max-width:750px;margin-inline:auto;min-width:0}
.reference-article-layout .article-toc,.sidebar-block{border-radius:8px;background:#fafafacc;padding:16px 12px 12px 16px}
.reference-article-layout .article-toc a,.related-sidebar a{font-size:12px;line-height:1.5}
.reference-article-layout .article-toc>strong,.related-sidebar h2{font:600 11px/1.5 'Zilla Slab',Georgia,serif!important;letter-spacing:1.1px;text-transform:uppercase;color:#444}
.article-section h2{font-size:40px;line-height:1.15}
.article-section h3{font:italic 400 32px/1.15 var(--display);letter-spacing:0}
.article-section>p,.article-section section>p{font-size:16px;line-height:24px;color:#050505}
.original-article-media img,.original-article-media video{border-radius:8px}
.reference-article-hero .breadcrumb{margin:0}
.footer-grid a:has(img){display:flex;gap:6px;align-items:center}
.footer-grid a img{width:14px;height:14px;flex-shrink:0}
.footer-grid a:not([href^="mailto:"]) img{opacity:.5}
.reference-work{gap:56px;padding-block:32px;border-top:1px solid #0000001a}
.reference-work>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.reference-work h2,.reference-projects h2,.reference-methods h2,.faq h2{font-size:40px;line-height:1.15;margin:0}
.reference-work>div>p{font-size:16px;line-height:24px;margin:0;max-width:none}
.reference-work ul{margin:0}.reference-work li{padding:0 0 10px 22px;margin-bottom:10px}
.reference-work li:last-child{margin-bottom:0;padding-bottom:0}
.reference-work b{font-size:14px;font-weight:400;line-height:14px;margin-bottom:4px}
.reference-work li span{font-size:12px;line-height:1.5;color:#444}
.workflow-demo{min-height:360px;border-radius:8px}
.reference-projects{padding-block:32px}
.reference-projects h2{margin-bottom:32px}
.reference-project-grid{width:min(750px,100%);gap:12px;align-items:start}
.reference-project{border-radius:8px}
.project-cover{display:block;width:100%;aspect-ratio:1;position:relative;overflow:hidden;background:#0003}
.project-cover img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}



.reference-project>div{padding:12px 36px 10px 12px}
.reference-project h3{font:700 12px/1.5 var(--sans);margin:0;letter-spacing:0}
.reference-project p{font:400 11px/1.5 var(--sans);margin:0}
.reference-project>div:after{content:'';position:absolute;top:12px;bottom:10px;right:35px;border-right:1px solid #cdcdcd}
.reference-project>div>span{right:12px;top:50%;transform:translateY(-50%);font-size:16px}
.reference-methods{padding-block:32px}
.reference-methods>p{font-size:16px;line-height:24px;max-width:632px;margin:32px 0}
.method-grid{gap:12px;margin-top:0}
.method-card{padding:16px 16px 24px;border-radius:8px;display:flex;flex-direction:column;min-height:450px}
.method-icon{width:30px;height:30px;border-radius:8px;margin-bottom:24px}
.method-icon img{width:14px;height:14px}
.method-card h3{font:700 14px/1.5 var(--sans);margin:0 0 8px;letter-spacing:0}
.method-card>p{font-size:14px;line-height:1.5;margin:0 0 12px;min-height:0;flex:1}
.method-card .text-link{font-size:14px;line-height:1.5;margin:0 0 24px;align-self:flex-start}
.method-card .demo{height:245px;flex-shrink:0;border-radius:8px}
.faq{max-width:750px;padding-block:32px}
.faq>div:first-child{text-align:left;margin-bottom:32px}
.faq summary{font:500 14px/1.5 var(--sans);padding:16px 0}
.faq details p{font-size:14px;line-height:1.5}
@media(max-width:760px){.reference-work{display:flex;flex-direction:column;align-items:stretch}.reference-work h2,.reference-projects h2,.reference-methods h2,.faq h2{font-size:32px}.method-card{min-height:0}.method-card .demo{margin-top:auto}.reference-project-grid{grid-template-columns:1fr}}
@media(max-width:1100px){.hero-inner{grid-template-columns:minmax(0,1fr) 320px;gap:32px}.hero-inner h1{font-size:44px}.infinity-carousel{--card:320px;--shift:262px;height:350px}.footer{padding:40px 32px}.footer-grid{gap:32px}.reference-article-layout{grid-template-columns:180px minmax(0,1fr);gap:24px}.related-sidebar{grid-column:2}}
@media(max-width:760px){.header{top:12px;border-radius:12px;padding:12px 20px}.header .logo{width:119px;height:48px}.header nav>a:not(.button){padding:12px 0}.header nav{font-size:14px}.hero-inner{display:flex;flex-direction:column;align-items:stretch;padding-top:120px;gap:32px;min-height:0}.hero-inner>div:first-child{gap:24px}.hero-inner h1{font-size:38px;line-height:1.15}.hero-inner p{font-size:16px;line-height:24px}.hero-inner .actions{gap:12px}.hero-inner .actions .button{padding-inline:14px}.infinity-carousel{--card:min(320px,calc(100vw - 64px));--shift:calc(var(--card) * .757142857 + 12px);height:calc(var(--card) + 16px)}.carousel-label{font-size:11px}.carousel-card strong{font-size:12px;max-width:155px;margin:12px;padding:4px 10px}.carousel-card>div>span{font-size:14px;padding:12px}.carousel-controls{left:0;right:0}.footer{padding:32px 20px;margin:12px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px;padding-bottom:0}.footer-grid a{overflow-wrap:anywhere}.reference-article-layout{display:block;padding:16px 16px 40px}.reference-article-layout>.article-section{padding-top:24px}.header+main>section.reference-article-hero:first-child{padding:128px 16px 40px}.reference-article-hero h1{font-size:36px}.article-section h2{font-size:32px}.article-section h3{font-size:26px}.breadcrumb{font-size:11px}.related-sidebar{display:block}.case-hero h1{font-size:64px}}