[data-page=brand]{--brand-dont:light-dark(#c52b20,#f76e64);--brand-do:light-dark(#1d7240,#5ec98b);--brand-light-1:#f3c4a6;--brand-light-2:#c6d2e0;--brand-light-3:#ead7c3;--brand-light-4:#d9e2ea;--brand-light-base:#f7f3ee;--brand-dark-1:#9a3f1e;--brand-dark-2:#334e6e;--brand-dark-3:#5b3a29;--brand-dark-base:#11151a;--brand-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.8 0 0 0 -0.4 1.8 0 0 0 -0.4 1.8 0 0 0 -0.4 0 0 0 0 0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");& [data-slot=hero-actions]{flex-wrap:wrap;gap:.75rem;display:flex}& [data-slot=copy-labels]{display:inline-grid;&>span{visibility:hidden;grid-area:1/1}&>[data-active]{visibility:visible}}& [data-slot=sr-only]{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}& [data-component=brand-tiles]{gap:2rem var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;& li{flex-direction:column;gap:.75rem;min-width:0;display:flex}& [data-slot=preview]{aspect-ratio:2;place-items:center;display:grid;&[data-tone=light]{color-scheme:light only;--logo-code:#1f1f1f;--logo-open:#626262;--logo-inner:#d2d2d2;background:#f5f5f5}&[data-tone=dark]{color-scheme:dark only;box-shadow:inset 0 0 0 1px var(--border);--logo-code:#eee;--logo-open:#aeaeae;--logo-inner:#4b4b4b;background:#0a0a0a}& img{max-width:100%;display:block}&[data-kind=logo] img{width:48px;height:60px}&[data-kind=logo][data-square] img{width:60px}&[data-kind=wordmark] img{width:156px;height:28px}}& [data-slot=meta]{display:contents}& li>[data-slot=meta]>[data-slot=name]{order:-1}& li>[data-slot=meta]>:is([data-slot=actions],[data-slot=badge-actions]){align-self:end;margin-inline-start:0}& [data-slot=name]{font-family:var(--font-sans);font-size:var(--fs-small);color:var(--text-weak)}& [data-slot=actions]{flex-wrap:wrap;gap:.5rem;margin-inline-start:auto;display:flex}& [data-component=site-button]{padding:0 .75rem}& [data-slot=note]{color:var(--text-weak);margin-inline-start:.375rem}& [data-kind=avatar] img{border-radius:50%;width:96px;height:96px}& [data-kind=badge] img{width:200px;height:44px}}& [data-slot=actions]{&>[data-variant]{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;display:none}&[data-style=menu\ copy]>[data-variant=menu\ copy],&[data-style=menu]>[data-variant=menu],&[data-style=split]>[data-variant=split],&[data-style=icons]>[data-variant=icons],&[data-style=text\ links]>[data-variant=text\ links],&[data-style=svg\ copy]>[data-variant=svg\ copy],&[data-style=hover\ reveal]>[data-variant=hover\ reveal]{display:flex}& [data-slot=asset-menu]{position:relative;&>[data-component=site-button]{gap:.375rem}}& [data-slot=menu]{top:calc(100% + .25rem);z-index:20;background:var(--popover-bg);width:max-content;min-width:100%;box-shadow:var(--popover-shadow);font-family:var(--font-mono);font-size:var(--fs-small);color:var(--text-strong);animation:settings-in .14s var(--ease-out);flex-direction:column;display:flex;position:absolute;inset-inline-start:0;&>*{min-width:0;font:inherit;color:inherit;text-align:start;white-space:nowrap;cursor:pointer;background:0 0;justify-content:space-between;align-items:center;gap:.625rem;padding:.5rem .875rem;text-decoration:none;display:flex;position:relative;& svg{flex-shrink:0;width:14px;height:14px}&:before{content:"";top:0;bottom:0;background:var(--menu-hint);opacity:0;width:2px;position:absolute;inset-inline-start:-1px}&:focus-visible{background:var(--menu-hover);outline:none;&:before{opacity:1}}@media (hover:hover) and (pointer:fine){&:hover{background:var(--menu-hover);outline:none;&:before{opacity:1}}}&:active{background:var(--menu-press)}}}& [data-slot=menu]>[data-slot=menu-group]{font-size:var(--fs-meta);color:var(--text-weak);cursor:default;padding:.625rem .875rem .25rem;&:not(:first-child){border-top:1px solid var(--border)}&:empty{padding:0}&:before{display:none}@media (hover:hover) and (pointer:fine){&:hover{background:0 0}}&:active{background:0 0}}&>[data-variant=menu\ copy]{gap:.25rem}[data-slot=meta]>&{margin-inline-start:auto}&>[data-variant=svg\ copy]{gap:.25rem;&>[data-component=site-button]{padding:0 .625rem}}& [data-slot=copy-square]{justify-content:center;width:2.25rem;padding:0}& [data-slot=item-label]{text-overflow:ellipsis;min-width:0;overflow:hidden}&>[data-variant=split]{gap:1px}& [data-slot=chevron-button]{padding:0 .5rem}[data-site]:is([data-button-hover=blue],[data-button-hover=blue-ring]) &>[data-variant=split] [data-slot=chevron-button][aria-expanded=true]{background:var(--link);color:#fff}&>[data-variant=icons] [data-component=site-button]{justify-content:center;width:2.25rem;padding:0}& [data-slot=links]{font-size:var(--fs-small);color:var(--text-weak);& :is(a,button){font:inherit;color:var(--text);text-underline-offset:.2em;cursor:pointer;background:0 0;padding:0;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:color .15s,text-decoration-color .15s;@media (hover:hover) and (pointer:fine){&:hover{color:var(--text-strong);text-decoration-color:currentColor}}&:active{color:var(--text-strong);text-decoration-color:currentColor}&:focus-visible{color:var(--text-strong)}}}&[data-style=hover\ reveal]{opacity:0;transition:opacity .15s;@media (hover:none),(pointer:coarse){opacity:1}}}& li:focus-within [data-slot=actions][data-style=hover\ reveal]{opacity:1}@media (hover:hover) and (pointer:fine){& li:hover [data-slot=actions][data-style=hover\ reveal]{opacity:1}}& [data-slot=download-icon]{flex-shrink:0}& [data-component=palette]{flex-direction:column;gap:1rem;display:flex;container-type:inline-size;& h3{font-size:var(--mono-size);color:var(--text-weak);font-weight:400}& ul{gap:var(--gutter);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}& li{grid-template-columns:minmax(0,1fr);align-content:start;min-width:0;display:grid}& [data-slot=swatch]{color-scheme:light only;height:6rem;margin-bottom:.75rem;display:block}& [data-slot=title-row]{flex-direction:column;gap:.25rem;display:flex}& [data-slot=name]{font-family:var(--font-mono);font-size:var(--mono-size);white-space:nowrap}& [data-slot=use]{min-height:2lh;font-size:var(--fs-small);color:var(--text-weak);line-height:1.4}& [data-slot=formats]{flex-direction:column;margin-top:.75rem;display:flex}& [data-slot=format]{box-shadow:inset 0 1px 0 var(--border);text-align:start;cursor:pointer;background:0 0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 .75rem;padding:.375rem .5rem;transition:background-color .15s;display:flex;@media (hover:hover) and (pointer:fine){&:hover{background-color:var(--bg-weak)}}&:focus-visible{outline:2px solid var(--link);outline-offset:-2px;background-color:var(--bg-weak)}&:active{background-color:var(--bg-weaker)}}& [data-slot=format-name]{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--text-weak)}& [data-slot=value]{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--text);white-space:nowrap;align-items:center;gap:.375rem;margin-inline-start:auto;display:inline-flex;& svg{flex-shrink:0;width:14px;height:14px}}@media (width<=40rem){& [data-slot=format]{min-height:44px}& [data-slot=value] svg{width:18px;height:18px}}@container (width<=46rem){& ul{grid-template-columns:minmax(0,1fr);gap:1.5rem}& li{grid-template-rows:auto auto;grid-template-columns:5.5rem minmax(0,1fr);gap:.5rem 1rem}& [data-slot=title-row]{display:contents}& [data-slot=name]{grid-area:1/1}& [data-slot=use]{grid-area:1/2;min-height:0}& [data-slot=format]{padding-inline-start:0}& [data-slot=swatch]{grid-area:2/1;align-self:stretch;height:auto;margin:0}& [data-slot=formats]{grid-area:2/2;margin:0}}@container (width<=30rem){& li{grid-template-rows:auto auto auto;grid-template-columns:4rem minmax(0,1fr);row-gap:.25rem}& [data-slot=name]{grid-column:1/-1}& [data-slot=use]{grid-area:2/1/auto/-1;margin-bottom:.5rem}& [data-slot=swatch],& [data-slot=formats]{grid-row:3}}}& [data-component=usage]{gap:2rem var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;& li{flex-direction:column;gap:.375rem;min-width:0;display:flex}& :is(strong,h3,h4){font-family:var(--font-mono);font-size:var(--mono-size);color:var(--text-strong);font-weight:400}& span{color:var(--text-weak);line-height:1.4}& [data-slot=figure]{aspect-ratio:16/10;background:var(--bg-weak);place-items:center;margin-bottom:.875rem;display:grid}& li>h3[id]:not(:first-child){margin-top:28px}& [data-slot=group-heading]{grid-column:1/-1;margin-top:16px;margin-bottom:-1rem}& [data-slot=stroke][data-hidden]{display:none}& :is([data-slot=clear-space],[data-slot=stroke]){grid-column:1/-1;& [data-slot=figure]{aspect-ratio:auto;padding:2.5rem 1rem}}& [data-slot=clear-space] [data-slot=figure]{flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;display:flex}& [data-slot=minimum]{grid-template-rows:24px auto auto;justify-items:center;row-gap:.5rem;display:grid;& svg{display:block}&>:first-child{align-self:end}}& [data-slot=value]{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--link)}& [data-slot=dimension]{stroke:var(--link);fill:none}}& [data-component=stroke-diagram]{&>svg{max-width:100%;height:auto;display:none}&[data-style=highlight]>[data-variant=highlight],&[data-style=ruler]>[data-variant=ruler],&[data-style=zoom]>[data-variant=zoom],&[data-style=tiles]>[data-variant=tiles],&[data-style=animated]>[data-variant=animated]{display:block}& [data-slot=unit]{fill:color-mix(in srgb, var(--link) 12%, transparent);stroke:var(--link);&[data-source]{fill:light-dark(color-mix(in srgb, var(--link) 70%, transparent),color-mix(in srgb, var(--link) 45%, transparent))}}& [data-slot=band]{fill:color-mix(in srgb, var(--link) 30%, transparent)}& [data-slot=dimension],& [data-slot=crop]{fill:none;stroke:var(--link)}& [data-slot=extension]{fill:none;stroke:color-mix(in srgb, var(--link) 45%, transparent)}& [data-slot=grid]{fill:none;stroke:var(--border)}& [data-slot=tile]{fill:none;stroke:var(--border-strong)}& [data-slot=space]{fill:none;stroke:var(--border-strong);stroke-dasharray:4 4}& text{font-family:var(--font-mono);font-size:var(--fs-micro);fill:var(--link)}& [data-slot=note]{fill:var(--text-weak)}& [data-variant=animated]{& [data-slot=lift]{transform-box:view-box}& :is([data-slot=space],[data-late]){opacity:0}}&[data-play] [data-variant=animated]{& [data-slot=lift]{animation:1.8s step-end .3s both stroke-step}& :is([data-slot=space],[data-late]){animation:1.8s step-end .3s both stroke-late}}@media (prefers-reduced-motion:reduce){& [data-variant=animated]{& [data-slot=lift]{translate:-24px;animation:none!important}& :is([data-slot=space],[data-late]){opacity:1;animation:none!important}}}}& [data-component=clear-space]{max-width:100%;height:auto;display:block;& [data-slot=hatch]{stroke:color-mix(in srgb, var(--link) 28%, transparent);stroke-width:1px}& [data-slot=outline]{fill:none;stroke:color-mix(in srgb, var(--link) 40%, transparent)}& [data-slot=crop]{fill:none;stroke:color-mix(in srgb, var(--link) 55%, transparent)}& [data-slot=unit]{fill:color-mix(in srgb, var(--link) 22%, transparent);stroke:var(--link);&[data-source]{fill:light-dark(color-mix(in srgb, var(--link) 70%, transparent),color-mix(in srgb, var(--link) 40%, transparent))}}& [data-slot=leader]{fill:none;stroke:var(--link)}& [data-slot=leader-dot]{fill:var(--link)}& text{font-family:var(--font-mono);font-size:var(--fs-micro);fill:var(--link)}}& [data-component=brand-variant]{flex-direction:column;gap:.5rem;display:flex;&+&{margin-top:3rem}& h3{font-family:var(--font-mono);font-size:var(--mono-size);font-weight:400}&>p{color:var(--text-weak);margin-bottom:.75rem;line-height:1.4}& [data-slot=row]{flex-direction:column;gap:.75rem;display:flex;&+&{margin-top:1.5rem}}& h4{font-size:var(--fs-small);color:var(--text-strong);font-weight:400}& [data-slot=preview]{&[data-variant=standard][data-tone=light]{background:#f4f4f4}&[data-variant=transparent][data-tone=light]{background:var(--brand-grain), radial-gradient(67.9% 135.8% at 30% 100%, var(--brand-light-4), transparent), radial-gradient(87.5% 175% at 62% 92%, var(--brand-light-3), transparent), radial-gradient(83% 166% at 82% 18%, var(--brand-light-2), transparent), radial-gradient(78.5% 157% at 18% 28%, var(--brand-light-1), transparent), var(--brand-light-base);background-blend-mode:overlay, normal, normal, normal, normal}&[data-variant=transparent][data-tone=dark]{background:var(--brand-grain), radial-gradient(90.5% 181% at 50% 105%, var(--brand-dark-3), transparent), radial-gradient(83% 166% at 85% 30%, var(--brand-dark-2), transparent), radial-gradient(75.5% 151% at 15% 25%, var(--brand-dark-1), transparent), var(--brand-dark-base);background-blend-mode:overlay, normal, normal, normal}&[data-variant=solid]{box-shadow:none}&[data-variant=solid][data-tone=light][data-stop="0"]{background:var(--brand-light-1)}&[data-variant=solid][data-tone=light][data-stop="1"]{background:var(--brand-light-2)}&[data-variant=solid][data-tone=dark][data-stop="0"]{background:var(--brand-dark-1)}&[data-variant=solid][data-tone=dark][data-stop="1"]{background:var(--brand-dark-2)}}}& :is([data-slot=text],[data-slot=prose],[data-slot=note]) a{color:var(--inline-link-color,var(--text-strong));text-underline-offset:.15em;text-decoration:underline;text-decoration-thickness:1px;transition:color .15s;@media (hover:hover) and (pointer:fine){&:hover{color:var(--link)}}&:focus-visible,&:active{color:var(--link)}}& :is([data-slot=prose],[data-slot=note]){color:var(--text-weak);line-height:1.5}& [data-slot=paragraphs]{flex-direction:column;gap:.75rem;display:flex}& [data-slot=text]{font-size:var(--body-size);color:var(--text);text-wrap:pretty;line-height:1.5}& code{background:var(--bg-weaker);font-family:var(--font-mono);color:var(--text-strong);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.0625rem .3125rem;font-size:calc(.875em + 1px)}& [data-component=brand-sub]{flex-direction:column;gap:.5rem;display:flex;& h3{font-family:var(--font-mono);font-size:var(--mono-size);color:var(--text-strong);font-weight:400}&>p{color:var(--text-weak);margin-bottom:.75rem;line-height:1.4}& [data-slot=figure]{background:var(--bg-weak);place-items:center;padding:2.5rem 1rem;display:grid}}& [data-slot=lockups] [data-slot=preview] svg{max-width:100%;height:auto;display:block}& [data-component=badges]{container-type:inline-size;&>[data-variant]{flex-direction:column;gap:1.5rem;display:none}&[data-style=sans]>[data-variant=sans]{display:flex}& [data-slot=tabs-layout],& [data-slot=rows-layout]{flex-direction:column;gap:1.5rem;display:none}&[data-layout=tabs] [data-slot=tabs-layout]{display:flex}& [data-slot=tabs-layout]{gap:clamp(.75rem,1.5vw,1.25rem)}& [data-slot=style-tabs]{flex-wrap:wrap;gap:0 1.25rem;display:flex;position:relative;& button{font-family:var(--font-mono);font-size:var(--mono-size);color:var(--text-weak);cursor:pointer;background:0 0;align-items:center;padding:.25rem 0;transition:color .15s;display:inline-flex;&[aria-selected=true]{color:var(--text-strong)}@media (hover:hover) and (pointer:fine){&:hover{color:var(--text-strong)}}&:active{color:var(--text-strong)}&:focus-visible{outline:2px solid var(--link);outline-offset:2px}}}& [data-slot=tab-indicator]{display:none}&[data-tab-style=underline] [data-slot=tab-indicator]{top:0;background:var(--text-strong);width:0;height:2px;transition:transform .2s var(--ease-out), width .2s var(--ease-out);display:block;position:absolute;inset-inline-start:0;@media (prefers-reduced-motion:reduce){transition:none}}& [data-slot=row]{flex-direction:column;gap:.75rem;display:flex}& h4{font-size:var(--fs-small);color:var(--text-strong);font-weight:400}& [data-slot=badge-grid]{gap:1.5rem var(--gutter);grid-template-columns:minmax(0,1fr);display:grid;& li{flex-direction:column;gap:.75rem;min-width:0;display:flex}}@container (width>=30rem){& [data-slot=badge-grid]{grid-template-columns:repeat(2,minmax(0,1fr))}}& [data-slot=preview]{aspect-ratio:2;place-items:center;display:grid;position:relative;&[data-tone=light]{color-scheme:light only;--size-muted:#6b6b6b;--size-strong:#1f1f1f;background:#f4f4f4}&[data-tone=dark]{color-scheme:dark only;box-shadow:inset 0 0 0 1px var(--border);--size-muted:#8f8f8f;--size-strong:#eee;background:#0a0a0a}& img{width:auto;max-width:calc(100% - 1rem);display:block}&[data-badge=c][data-tone=light]{background:#fff;box-shadow:inset 0 0 0 1px #0000001a}&[data-badge=c][data-tone=dark]{--size-muted:#d0d0d0;--size-strong:#fff;background:#4f4f4f}}& [data-slot=sizes]{top:.25rem;opacity:0;transition:opacity .15s;display:flex;position:absolute;inset-inline-start:.25rem;& button{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--size-muted);cursor:pointer;background:0 0;padding:.25rem .375rem;line-height:1;&[aria-pressed=true]{color:var(--size-strong)}@media (hover:hover) and (pointer:fine){&:hover{color:var(--size-strong)}}&:active{color:var(--size-strong)}&:focus-visible{outline:1px solid var(--size-strong);outline-offset:-1px}}}& [data-slot=preview]:focus-within [data-slot=sizes]{opacity:1}@media (hover:hover) and (pointer:fine){& [data-slot=preview]:hover [data-slot=sizes]{opacity:1}}& [data-slot=preview]:active [data-slot=sizes]{opacity:1}@media (hover:none),(pointer:coarse){& [data-slot=sizes]{top:0;opacity:1;gap:.5rem;inset-inline-start:.75rem;& button{align-items:center;min-width:44px;min-height:44px;padding:0 .625rem;display:inline-flex}}}& [data-slot=meta]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}& [data-slot=name]{font-family:var(--font-sans);font-size:var(--fs-small);color:var(--text-weak)}& [data-slot=badge-actions]{flex-wrap:wrap;justify-content:flex-end;gap:.25rem;margin-inline-start:auto;display:flex;&>[data-component=site-button]{gap:.375rem}}}& [data-component=partner-lockup]{max-width:100%;height:auto;display:block;& [data-slot=times]{fill:none;stroke:var(--logo-inner);stroke-width:1.5px}}& [data-slot=defs]{position:absolute}& [data-component=brand-dont-grid]{gap:1.5rem var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;& [data-slot=preview]{aspect-ratio:2;background:var(--bg-weak);place-items:center;display:grid;position:relative;&>svg[data-slot=mark]{width:48px;height:60px}&>svg[data-slot=wordmark]{width:156px;height:28px}&[data-example=low-contrast]{background:#b0b0b0}&[data-example=color]{background:var(--brand-dark-2)}&[data-example=stretch] svg{transform:scaleX(1.4)}&[data-example=shadow] svg{filter:drop-shadow(4px 6px 3px light-dark(#00000080,#ffffff59))}&[data-example=glow] svg{filter:drop-shadow(0 0 1px #22d3ee)drop-shadow(0 0 8px #22d3ee)}}& [data-slot=lockup]{align-items:center;gap:.75rem;display:flex;& svg{width:32px;height:40px;display:block}& span{font-family:var(--font-sans);letter-spacing:-.02em;color:var(--logo-code);font-size:1.75rem;font-weight:600}}}& :is([data-component=brand-dont-grid],[data-component=brand-pixels]){& figure{flex-direction:column;gap:.75rem;min-width:0;margin:0;display:flex}& figcaption{color:var(--text-weak);line-height:1.4}& [data-slot=verdict]{font:inherit}& [data-verdict=dont] [data-slot=verdict]{color:var(--brand-dont)}& [data-verdict=do] [data-slot=verdict]{color:var(--brand-do)}}& [data-component=brand-pixels]{gap:1.5rem var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:.875rem;display:grid;& [data-slot=preview]{background:var(--bg-weak);place-items:center;padding:1.5rem 0;display:grid;container-type:inline-size}& :is([data-cell="12"],[data-cell="8"]){display:none}@container (width<=339px){& [data-cell="16"]{display:none}& [data-cell="12"]{display:block}}@container (width<=267px){& [data-cell="12"]{display:none}& [data-cell="8"]{display:block}}}& [data-component=pixel-grid]{display:block;& [data-slot=grid]{fill:none;stroke:var(--border)}& [data-slot=dimension]{fill:none;stroke:var(--link)}& text{font-family:var(--font-mono);font-size:var(--fs-micro);fill:var(--link)}}& [data-component=usage] [data-slot=pixels]{grid-column:1/-1;& [data-slot=sizes]{align-items:start;gap:.75rem var(--gutter,2rem);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.875rem;display:grid}& table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:var(--fs-small);font-variant-numeric:tabular-nums}& th{text-align:start;color:var(--text-strong);font-weight:400}& td{color:var(--text-weak)}& :is(th,td){border-bottom:1px solid var(--border);padding-block:.25rem;padding-inline:0 2rem}}@media (width<=40rem){& [data-component=brand-dont-grid],& [data-component=brand-pixels],& [data-component=brand-tiles],& [data-component=usage]{grid-template-columns:minmax(0,1fr)}}@media (width<=28rem){& [data-component=usage] [data-slot=pixels] [data-slot=sizes]{grid-template-columns:minmax(0,1fr)}}}[data-site][data-page=brand]{--heading-gap:12px;@media (width<=40rem){--heading-gap:14px}}@media (hover:hover) and (pointer:fine){html[data-scrolling] [data-page=brand] [data-component=content]{pointer-events:none}}[data-page=brand] [data-palette=blue]{--brand-light-1:#b9caff;--brand-light-2:#d5e0ff;--brand-light-3:#c7d3f4;--brand-light-4:#e4ebff;--brand-light-base:#f3f6ff;--brand-dark-1:#2c4bd6;--brand-dark-2:#142a6b;--brand-dark-3:#1d3aa6;--brand-dark-base:#070b1a}[data-page=brand] [data-variant-background] [data-slot=preview][data-variant=transparent]{isolation:isolate;position:relative;&>img{position:relative}}[data-page=brand] [data-variant-background=gradient] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:radial-gradient(90% 120% at 15% 10%, var(--brand-light-4), transparent 70%), linear-gradient(150deg, var(--brand-light-2), var(--brand-light-1));background-blend-mode:normal}&[data-tone=dark]{background:radial-gradient(90% 120% at 85% 10%, var(--brand-dark-3), transparent 70%), linear-gradient(150deg, var(--brand-dark-1), var(--brand-dark-2));background-blend-mode:normal}}[data-page=brand] [data-variant-background=grain] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:var(--brand-grain) 0 0 / 120px, var(--brand-light-1);background-blend-mode:overlay, normal}&[data-tone=dark]{background:var(--brand-grain) 0 0 / 120px, var(--brand-dark-1);background-blend-mode:soft-light, normal}}[data-page=brand] [data-variant-background=photo-like] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:var(--brand-grain), radial-gradient(30% 55% at 78% 30%, #ffffffe6, transparent), radial-gradient(45% 80% at 22% 85%, color-mix(in oklab, var(--brand-dark-1) 45%, transparent), transparent), radial-gradient(55% 100% at 18% 15%, var(--brand-light-1), transparent), radial-gradient(60% 110% at 90% 95%, var(--brand-light-3), transparent), var(--brand-light-2);background-blend-mode:overlay, normal, normal, normal, normal, normal}&[data-tone=dark]{background:var(--brand-grain), radial-gradient(28% 50% at 75% 28%, color-mix(in oklab, var(--brand-dark-1), white 35%), transparent), radial-gradient(50% 90% at 20% 20%, var(--brand-dark-1), transparent), radial-gradient(55% 100% at 85% 100%, var(--brand-dark-3), transparent), radial-gradient(40% 70% at 10% 95%, var(--brand-dark-base), transparent), var(--brand-dark-2);background-blend-mode:overlay, normal, normal, normal, normal, normal}}[data-page=brand] [data-variant-background=dither] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background-blend-mode:normal;background:linear-gradient(90deg, var(--brand-light-1), var(--brand-light-4));--dither:color-mix(in oklab, var(--brand-dark-1) 22%, transparent)}&[data-tone=dark]{background-blend-mode:normal;background:linear-gradient(90deg, var(--brand-dark-1), var(--brand-dark-2));--dither:#ffffff1f}&:before{content:"";background:repeating-conic-gradient(var(--dither) 0 25%, transparent 0 50%) 0 0 / 4px 4px;position:absolute;inset:0;mask-image:linear-gradient(90deg,#0000 15%,#000)}}[data-page=brand] [data-variant-background=grid] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h24v1H1v23H0z' fill='%232c4bd6' fill-opacity='.16'/%3E%3C/svg%3E") 0 0 / 24px 24px, var(--brand-light-2);background-blend-mode:normal}&[data-tone=dark]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h24v1H1v23H0z' fill='%23fff' fill-opacity='.1'/%3E%3C/svg%3E") 0 0 / 24px 24px, var(--brand-dark-2);background-blend-mode:normal}}[data-page=brand] [data-variant-background=mesh] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:radial-gradient(60% 90% at 50% 50%, var(--brand-light-base), transparent), radial-gradient(70% 120% at 0% 0%, var(--brand-light-1), transparent), radial-gradient(70% 120% at 100% 0%, var(--brand-light-4), transparent), radial-gradient(70% 120% at 100% 100%, var(--brand-light-3), transparent), radial-gradient(70% 120% at 0% 100%, color-mix(in oklab, var(--brand-light-1), var(--brand-dark-1) 20%), transparent), var(--brand-light-2);background-blend-mode:normal}&[data-tone=dark]{background:radial-gradient(60% 90% at 50% 50%, color-mix(in oklab, var(--brand-dark-1), var(--brand-dark-2)), transparent), radial-gradient(70% 120% at 0% 0%, var(--brand-dark-1), transparent), radial-gradient(70% 120% at 100% 0%, var(--brand-dark-3), transparent), radial-gradient(70% 120% at 100% 100%, var(--brand-dark-base), transparent), radial-gradient(70% 120% at 0% 100%, var(--brand-dark-2), transparent), var(--brand-dark-2);background-blend-mode:normal}}[data-page=brand] [data-variant-background=aurora] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:linear-gradient(115deg, var(--brand-light-2) 0%, var(--brand-light-1) 28%, var(--brand-light-base) 48%, var(--brand-light-3) 68%, var(--brand-light-1) 100%);background-blend-mode:normal}&[data-tone=dark]{background:linear-gradient(115deg, var(--brand-dark-2) 0%, var(--brand-dark-1) 30%, var(--brand-dark-base) 50%, var(--brand-dark-3) 72%, var(--brand-dark-2) 100%);background-blend-mode:normal}}[data-page=brand] [data-variant-background=spotlight] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:radial-gradient(90% 160% at 15% 0%, var(--brand-light-base), var(--brand-light-1) 55%, color-mix(in oklab, var(--brand-light-1), var(--brand-dark-1) 25%) 100%);background-blend-mode:normal}&[data-tone=dark]{background:radial-gradient(90% 160% at 15% 0%, color-mix(in oklab, var(--brand-dark-1), white 15%), var(--brand-dark-1) 40%, var(--brand-dark-base) 100%);background-blend-mode:normal}}[data-page=brand] [data-variant-background=halftone] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:linear-gradient(90deg, var(--brand-light-4), var(--brand-light-1));background-blend-mode:normal;--dot:color-mix(in oklab, var(--brand-dark-1) 45%, transparent)}&[data-tone=dark]{background:linear-gradient(90deg, var(--brand-dark-2), var(--brand-dark-1));background-blend-mode:normal;--dot:color-mix(in oklab, var(--brand-light-1) 35%, transparent)}&:before{content:"";background:radial-gradient(circle, var(--dot) .75px, transparent 1.25px) 0 0 / 6px 6px;position:absolute;inset:0;mask-image:linear-gradient(90deg,#0000 10%,#000 90%)}}[data-page=brand] [data-variant-background=isometric] [data-slot=preview][data-variant=transparent]{&[data-tone=light]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 8L16 0L32 8L16 16Z' fill='none' stroke='%232c4bd6' stroke-opacity='.18'/%3E%3C/svg%3E") 0 0 / 32px 16px, linear-gradient(160deg, var(--brand-light-4), var(--brand-light-2));background-blend-mode:normal}&[data-tone=dark]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 8L16 0L32 8L16 16Z' fill='none' stroke='%23fff' stroke-opacity='.1'/%3E%3C/svg%3E") 0 0 / 32px 16px, linear-gradient(160deg, var(--brand-dark-1), var(--brand-dark-2));background-blend-mode:normal}}@keyframes stroke-step{0%{translate:0}25%{translate:0 -8px}50%{translate:-24px -8px}75%,to{translate:-24px}}@keyframes stroke-late{0%,74%{opacity:0}75%,to{opacity:1}}[data-site][data-page=brand] [data-component=hero] p{max-width:none}