.reference-page .ref-wrap{max-width:calc(var(--site-width) + 2 * var(--site-gutter));margin:auto;padding-inline:var(--site-gutter)}
.ref-intro{padding-block:90px 65px}
.ref-intro h1{font-size:var(--site-display);max-width:850px;font-weight:400;line-height:1;letter-spacing:-.04em}
.ref-intro>p{max-width:610px;font-size:17px;color:var(--site-muted);margin:30px 0 0}
.ref-links{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:38px;font-size:13px}
.ref-links a{text-decoration:underline;text-underline-offset:5px}
.ref-section{padding-block:64px 76px;border-top:1px solid var(--site-rule);scroll-margin-top:105px}
.ref-section-header{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;margin-bottom:40px;align-items:start}
.ref-section-header h2{font-size:32px;margin:0;font-weight:400;letter-spacing:-.035em}
.ref-section-header>p{font-size:16px;color:var(--site-muted);max-width:640px}
.ref-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.ref-swatch i{display:block;height:120px;background:var(--swatch)}
.ref-swatch strong{display:block;margin-top:18px;font-size:14px;font-weight:500}
.ref-swatch code{display:block;font:12px/1.7 var(--site-font);color:var(--site-muted);margin-top:5px}
.ref-subline{margin-top:28px;font-size:13px;color:var(--site-muted);max-width:800px}
.ref-specimens{display:grid;grid-template-columns:1fr 1.6fr;gap:60px 45px;align-items:start}
.ref-specimen-meta{font-size:13px;color:var(--site-muted)}
.ref-specimen-meta span{display:block;color:var(--site-paper);font-weight:500;margin-bottom:8px}
.ref-display{font:400 var(--site-display)/1 var(--site-font);letter-spacing:-.04em;max-width:800px}
.ref-heading{font:400 var(--site-heading)/1.1 var(--site-font);letter-spacing:-.04em;max-width:740px}
.ref-body{font:400 17px/1.5 var(--site-font);max-width:470px;color:var(--site-muted)}
.ref-caption{font:400 12px/1.5 var(--site-font);color:var(--site-muted)}
.ref-identity{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:center}
.ref-mark{display:flex;gap:40px;align-items:center}
.ref-mark>img{width:80px;height:80px}
.ref-identity p{color:var(--site-muted);max-width:560px;font-size:15px}
.ref-actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:25px}
.ref-primary,.ref-secondary,.ref-film{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 23px;border-radius:var(--site-button-radius);font:500 13px/1.5 var(--site-font);cursor:pointer}
.ref-primary{background:var(--site-paper);color:var(--site-bg);border:1px solid var(--site-paper)}
.ref-primary:hover{background:#e4e4e2}
.ref-secondary{border:1px solid #f9faf74a;background:transparent;color:var(--site-paper)}
.ref-secondary:hover{background:#ffffff08;border-color:#f9faf780}
.ref-note{font-size:13px;color:var(--site-muted)}
.ref-components{display:grid;grid-template-columns:1fr 1fr;gap:55px 70px}
.ref-components h3{font-size:24px;font-weight:400;margin-bottom:18px}
.ref-components p{color:var(--site-muted);font-size:14px;max-width:490px}
.ref-text-link{font-size:14px;text-decoration:underline;text-underline-offset:5px}
.ref-fields label{display:block;font-size:13px;margin-bottom:8px}
.ref-fields input{width:100%;max-width:390px;background:var(--site-surface);color:var(--site-paper);border:1px solid #ffffff30;border-radius:3px;padding:12px 14px;font:14px var(--site-font)}
.ref-disclosure{margin-top:24px;border-top:1px solid var(--site-rule)}
.ref-disclosure :is(summary,.ui-disclosure-trigger){padding-block:18px;cursor:pointer;font-size:14px}
.ref-disclosure p{padding-bottom:22px}
.ref-product{display:grid;grid-template-columns:200px 1fr;background:var(--site-ui-bg);color:var(--site-ink);margin-top:36px;max-width:1050px}
.ref-rail{padding:28px 24px;background:var(--site-ui-rail);color:var(--site-paper);font-size:13px}
.ref-rail .cal-brand span{font-size:23px}.ref-rail .cal-brand img{width:22px;height:22px}
.ref-rail>span{display:block;padding-block:13px}.ref-rail>span:first-of-type{margin-top:35px}
.ref-rail>strong{display:block;padding:12px 0;font-weight:500}
.ref-product-main{padding:30px 36px}
.ref-product-main>p{font-size:12px;color:var(--site-ink-muted)}
.ref-product-main h3{font-size:30px;margin-top:20px;font-weight:500}
.ref-product-tabs{display:flex;gap:26px;border-bottom:1px solid var(--site-ui-rule);margin-top:25px}
.ref-product-tabs button{font:13px var(--site-font);background:none;color:var(--site-ink-muted);border:0;border-bottom:2px solid transparent;padding:12px 0;cursor:pointer}
.ref-product-tabs button[aria-selected=true]{color:var(--site-ink);border-bottom-color:var(--site-ink)}
.ref-product-panel{padding-block:25px;min-height:140px}
.ref-product-panel h4{font-size:23px;margin:0 0 14px;font-weight:400;letter-spacing:-.025em}
.ref-product-panel p{font-size:14px;max-width:560px;color:var(--site-ink-muted)}
.ref-product-main :focus-visible{outline-color:var(--site-ink-muted)}
.ref-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;height:110px;margin-top:35px}
.ref-grid span{background:var(--site-surface);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--site-muted)}
.ref-images{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ref-images figure{margin:0}.ref-images img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center}
.ref-images figcaption{margin-top:16px;color:var(--site-muted);font-size:13px;max-width:500px}
.ref-motion-demo{position:relative;min-height:320px;padding:35px 0 80px;max-width:1100px}
.ref-motion-title{font-size:clamp(34px,4.5vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1.1;max-width:1050px}
.ref-motion-title span{opacity:var(--word-opacity,1)}
.ref-film{position:absolute;bottom:0;right:0;background:#f4f1eb0d;color:var(--site-paper);border:1px solid #f4f1eb70;opacity:var(--film-opacity,1);overflow:hidden}
.ref-film:after{content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 25%,#fff2 46%,#fff5 50%,#fff2 54%,transparent 75%);transform:translateX(-120%);animation:reference-shimmer 3s linear infinite;animation-delay:600ms}
.ref-motion-controls{margin-top:35px;max-width:650px}.ref-motion-controls label{display:flex;justify-content:space-between;font-size:13px;color:var(--site-muted)}
.ref-motion-controls input{width:100%;accent-color:var(--site-paper);margin-top:18px}
.ref-download{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap;font-size:13px}
@keyframes reference-shimmer{0%{transform:translateX(-120%);opacity:0}5%{opacity:1}30%{transform:translateX(120%);opacity:1}40%,100%{transform:translateX(120%);opacity:0}}
@media(max-width:820px){.ref-intro{padding-block:55px}.ref-section-header,.ref-specimens,.ref-identity{grid-template-columns:1fr;gap:25px}.ref-swatches{grid-template-columns:repeat(3,1fr);gap:28px 16px}.ref-components{gap:40px}.ref-grid{gap:8px}.ref-rail{padding:24px 16px}.ref-product{grid-template-columns:170px 1fr}.ref-product-main{padding:24px}.ref-section{padding-block:48px}.ref-display{font-size:52px}}
@media(max-width:600px){.ref-swatches{grid-template-columns:repeat(2,1fr)}.ref-swatch i{height:90px}.ref-components,.ref-images{grid-template-columns:1fr}.ref-product{grid-template-columns:1fr}.ref-rail{display:none}.ref-product-tabs{gap:20px}.ref-product-main{padding:22px}.ref-display{font-size:43px}.ref-intro h1{font-size:48px}.ref-motion-demo{min-height:350px}.ref-identity .ref-mark{gap:25px}.ref-grid{gap:5px}.ref-grid span{font-size:9px}.ref-specimens{gap:24px}.ref-specimen-meta:not(:first-child){margin-top:25px}}
@media(prefers-reduced-motion:reduce){.ref-film:after{animation:none}}