/*
 * product.css: the Platform pages (/catalog, /library, /guidelines, /sites, /insights, /automations, /fixes), on
 * base.css (tokens, type, buttons, hairlines, motion) and app-ui.css (the app's components the demos are made of).
 * Mobile first: 641px, 1000px and 1100px add. Their scripts are js/product.js.
 *
 * Shared
 *   .p-hero (a first screen: eyebrow, two-line headline, lede, .p-ctas)  .p-field (the accent as a whole field, its
 *   text on-accent)  .p-bleed (a full-bleed row)  .p-pair (two columns from 1000px)  .p-feats (a hairline grid of
 *   features, .p-feat cells)  .p-more (the docs links)  .p-cta (the closing call to action, on the accent)
 *   .p-note (a small muted line under a demo)  .p-label (a demo control's label)  .p-code (code on night)
 *   .aw (an app window: .aw-top crumbs, .aw-body with a .ui-sidebar .aw-side and .aw-main)
 * Then each page's own block, prefixed: .cat- .lib- .gl- .st- .in- .au- .fx-
 */

/* Shared */
.p-hero{padding-block:56px 48px}
.p-hero .text-lede{margin-top:24px}
.p-hero h1,.intro h2{text-wrap:balance}
.p-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.p-field{background:var(--accent);color:var(--on-accent)}
.p-field .eb i{background:var(--on-accent)}
.p-field .mut{color:inherit;opacity:.62}
.p-field .text-lede{color:inherit;opacity:.82}
.p-field :focus-visible{outline-color:var(--on-accent)}
.p-label{display:block;margin:0 0 8px;font-size:.8125rem;color:var(--muted)}
.p-note{margin:16px 0 0;font-size:.8125rem;color:var(--muted);overflow-wrap:anywhere}
.night .p-note{color:var(--night-muted)}
.p-pair{display:grid;gap:32px;align-items:center}
.p-pair>*,.gl-tok>*,.au-make>*,.au-sign>*,.lib-ren>*,.gl-edit>*,.st-term>*,.fx-hero>*{min-width:0}
.night .text-lede,.night .p-pair>div>p:not(.eb){color:var(--night-muted)}
.p-pair>div>p:not(.eb){margin:20px 0 0;font-size:1.0625rem;line-height:1.55;color:var(--muted);max-width:520px}
.p-ticks{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none;font-size:.9375rem}
.p-ticks li{position:relative;padding-left:22px}
.p-ticks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:6px;border-radius:2px;background:var(--accent)}
.p-feats{grid-template-columns:minmax(0,1fr)}
.p-feat{display:flex;flex-direction:column;gap:10px;padding:28px}
.p-feat h3{margin:0;font:600 1.125rem/1.3 var(--sans)}
.p-feat p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.p-feat .mono{margin-top:auto;padding-top:8px;font-size:.75rem;color:var(--muted)}
.p-more{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;font-size:.9375rem}
.p-code{margin:0;padding:20px;border-radius:var(--radius-md);background:var(--night-panel);border:1px solid var(--night-line);color:var(--night-ink);font:400 .8125rem/1.7 var(--mono);overflow-x:auto;white-space:pre;font-variant-ligatures:none}
.p-code .c{color:var(--night-muted)}
.p-code .k{color:var(--accent)}
.night .p-code{background:#15142a}
.p-cta{display:flex;flex-direction:column;gap:28px;padding:48px 24px;border-radius:var(--radius-lg);background:var(--accent);color:var(--on-accent)}
.p-cta h2 span{opacity:.6}
.p-cta p{margin:0;max-width:560px;font-size:1.125rem;opacity:.85}
.p-cta .p-ctas{margin-top:0}
.p-cta :focus-visible{outline-color:var(--on-accent)}
.sec-tight{padding-top:24px}
@media (min-width:641px){.p-feats--2{grid-template-columns:repeat(2,minmax(0,1fr))}.p-feats--3{grid-template-columns:repeat(2,minmax(0,1fr))}.p-feat{padding:36px}}
@media (min-width:1000px){
  .p-hero{padding-block:96px 72px}
  .p-pair{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  .p-pair--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .p-pair--flip>:first-child{order:2}
  .p-feats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-cta{padding:88px 64px}
}

/* An app window, from the app's light theme: crumbs on top, the sidebar, the page. No address: the app's stays off
   the site. Below 800px the sidebar folds away. */
.aw{overflow:hidden;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-background);color:var(--ui-foreground);box-shadow:0 16px 48px -24px rgb(22 21 42 / .24);text-align:left}
.aw-top{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-bottom:1px solid var(--ui-border);font-size:.8125rem;color:var(--ui-muted-foreground)}
.aw-top b{font-weight:500;color:var(--ui-foreground)}
.aw-top .sep{opacity:.5}
.aw-body{display:grid;min-height:420px}
.aw-side{display:none}
.aw-side .app-icon{--s:28px;border-radius:7px}
.aw-org{display:flex;align-items:center;gap:8px;padding:6px 8px 12px;font-size:.8125rem;line-height:1.2}
.aw-org b{display:block;font-weight:600}
.aw-org small{color:var(--ui-muted-foreground);font-size:.6875rem}
.aw-side .ui-sidebar-item svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aw-count{margin-left:auto;display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ui-primary);color:var(--ui-primary-foreground);font-size:.6875rem;font-weight:600}
.aw-gap{flex:1;min-height:16px}
.aw-main{min-width:0;padding:20px}
.aw-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:600 1.25rem/1.2 var(--sans)}
.aw-h svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aw-sub{margin:6px 0 18px;font-size:.875rem;color:var(--ui-muted-foreground)}
.aw-list{border:1px solid var(--ui-border);border-radius:var(--ui-radius);overflow:hidden}
.aw-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;font-size:.875rem;line-height:1.35}
.aw-row+.aw-row{border-top:1px solid var(--ui-border)}
.aw-row>svg{flex:none;width:16px;height:16px;color:var(--ui-muted-foreground);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aw-what{flex:1;min-width:200px}
.aw-what small{display:block;margin-top:2px;font-size:.75rem;color:var(--ui-muted-foreground)}
.aw-act{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:.8125rem;color:var(--ui-muted-foreground)}
.aw-ok{display:inline-flex;align-items:center;gap:6px}
.aw-ok::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ui-success);background:radial-gradient(circle,var(--ui-success) 0 2px,transparent 2.5px)}
.aw-h2{margin:22px 0 10px;font-size:.875rem;font-weight:600}
.aw-h2 span{font-weight:400;color:var(--ui-muted-foreground)}
@media (min-width:800px){
  .aw-body{grid-template-columns:200px minmax(0,1fr)}
  .aw-side{display:flex;border-inline-end:1px solid var(--ui-sidebar-border)}
  .aw-main{padding:28px 32px}
}

/* Catalog */
.cat-stage{padding:32px 0 0;overflow:hidden}
.cat-stage .aw{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.cat-tree{display:none;padding:12px 8px;border-inline-end:1px solid var(--ui-border);background:var(--ui-sidebar);font-size:.8125rem}
.cat-tree ul{list-style:none;margin:0;padding:0 0 0 14px}
.cat-tree>ul{padding:0}
.cat-tree li>span{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:6px;white-space:nowrap}
.cat-tree li>span::before{content:"";width:10px;height:10px;flex:none;border-radius:3px;border:1.5px solid var(--ui-muted-foreground);opacity:.6}
.cat-tree li>span[data-kind=brand]::before{border-radius:50%}
.cat-tree li>span[data-kind=file]::before{border-radius:1px;border-width:1px}
.cat-tree li>span[aria-current]{background:var(--ui-sidebar-accent);color:var(--ui-sidebar-accent-foreground);font-weight:500}
.cat-obj{min-width:0;padding:20px}
.cat-objhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.cat-objhead .app-icon{--s:40px;border-radius:10px}
.cat-objhead b{font-size:1.125rem}
.cat-addr{display:block;width:100%;font:400 .75rem var(--mono);color:var(--ui-muted-foreground)}
.cat-tabs{margin:18px 0 20px;max-width:100%;overflow-x:auto;justify-content:flex-start}
.cat-panel{min-height:300px}
.cat-kv{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--ui-border);border-radius:var(--ui-radius);overflow:hidden;font-size:.875rem}
.cat-kv>div{display:flex;justify-content:space-between;gap:12px;padding:12px 14px}
.cat-kv>div+div{border-top:1px solid var(--ui-border)}
.cat-kv dt{color:var(--ui-muted-foreground)}
.cat-kv dd{margin:0;text-align:right}
.cat-graph{display:grid;gap:12px;align-items:center}
.cat-col{display:grid;gap:10px}
.cat-col>p{margin:0;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted-foreground)}
.cat-card{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-background);font-size:.8125rem;line-height:1.35}
.cat-card small{color:var(--ui-muted-foreground);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}
.cat-card b{font-weight:600;display:flex;align-items:center;gap:8px}
.cat-card .app-icon{--s:20px;border-radius:5px}
.cat-card--main{padding:18px;border:1.5px solid var(--ui-foreground)}
.cat-card--main .app-icon{--s:44px;border-radius:11px}
.cat-card--old{opacity:.65}
.cat-wire{display:none;height:2px;background:var(--ui-border);position:relative;overflow:hidden}
.cat-wire i{position:absolute;top:0;left:-30%;width:30%;height:2px;background:var(--accent)}
.cat-impact{margin:16px 0 0;font-size:.8125rem;color:var(--ui-muted-foreground)}
.cat-impact b{color:var(--ui-foreground)}
@media (prefers-reduced-motion:no-preference){.cat-wire i{animation:p-across 1.8s ease-in-out infinite}}
@keyframes p-across{from{left:-30%}to{left:100%}}
.cat-addr-big{display:flex;flex-wrap:wrap;gap:8px 0;font:440 clamp(1.75rem,.6rem + 4.6vw,5rem)/1 var(--display);letter-spacing:-.04em}
.cat-seg{display:flex;flex-direction:column;gap:14px}
.cat-seg span{white-space:nowrap}
.cat-seg small{font:500 .75rem var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-left:4px;border-left:2px solid var(--accent)}
.cat-seg--slash span{color:var(--line);padding-inline:.12em}
.cat-search{display:grid;gap:14px}
.cat-q{font-family:var(--mono)}
.cat-res .ui-badge{font-family:var(--sans)}
.cat-res td:first-child{font-weight:500}
.cat-res td .ui-muted{display:block;font:400 .75rem var(--mono)}
@media (min-width:641px){.cat-kv{grid-template-columns:repeat(2,minmax(0,1fr))}.cat-kv>div:nth-child(2){border-top:0}.cat-kv>div:nth-child(even){border-left:1px solid var(--ui-border)}}
@media (min-width:1000px){
  .cat-stage{padding-top:48px}
  .cat-stage .aw-body{grid-template-columns:220px 240px minmax(0,1fr)}
  .cat-tree{display:block}
  .cat-obj{padding:28px 32px}
  .cat-graph{grid-template-columns:minmax(0,1fr) 40px minmax(0,1.1fr) 40px minmax(0,1fr)}
  .cat-wire{display:block}
}

/* Library */
.lib-find{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.lib-find .ui-input{max-width:360px;background:var(--paper)}
.lib-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:2px;background:var(--paper)}
.lib-tile{position:relative;margin:0;overflow:hidden;background:var(--night);aspect-ratio:4/3;transition:opacity var(--reveal) var(--ease),filter var(--reveal) var(--ease)}
.lib-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.lib-tile:hover img{transform:scale(1.03)}
.lib-tile figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:28px 14px 12px;background:linear-gradient(transparent,rgb(15 14 28 / .78));color:#fff;font-size:.8125rem}
.lib-tile figcaption b{font-weight:600}
.lib-tile figcaption .mono{font-size:.6875rem;opacity:.8}
.lib-tile .ui-badge{margin-left:auto;background:#fff;color:var(--ui-success)}
.lib-tile.is-out{opacity:.18;filter:grayscale(1)}
.lib-tile--wide{grid-column:span 2;aspect-ratio:8/3}
.lib-tile--tall{grid-row:span 2;aspect-ratio:auto}
.lib-tile--field{display:flex;flex-direction:column;justify-content:space-between;padding:18px;background:var(--accent);color:var(--on-accent)}
.lib-tile--field .app-icon{--s:56px;border-radius:14px;background:var(--on-accent);color:var(--accent)}
.lib-tile--field b{font:440 1.5rem/1.05 var(--display);letter-spacing:-.02em}
.lib-tile--field span{font-size:.8125rem;opacity:.75}
.lib-credit{margin:12px 0 0;font-size:.75rem;color:var(--muted)}
.lib-ren{display:grid;gap:20px}
.lib-ctrl{display:grid;gap:18px}
.lib-ctrl p{margin:0}
.lib-view{display:grid;place-items:center;min-height:360px;padding:24px;border-radius:var(--radius-md);background:var(--panel);background-image:linear-gradient(45deg,#eceaf2 25%,transparent 25%,transparent 75%,#eceaf2 75%),linear-gradient(45deg,#eceaf2 25%,transparent 25%,transparent 75%,#eceaf2 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.lib-out{position:relative;margin:0;width:min(100%,var(--w,520px));aspect-ratio:var(--ar,16/9);max-height:420px;overflow:hidden;box-shadow:0 16px 48px -24px rgb(22 21 42 / .4);transition:width var(--reveal) var(--ease),aspect-ratio var(--reveal) var(--ease)}
.lib-out img{width:100%;height:100%;object-fit:cover}
.lib-out figcaption{position:absolute;top:10px;left:10px;padding:4px 8px;border-radius:999px;background:rgb(15 14 28 / .75);color:#fff;font:500 .6875rem var(--mono)}
.lib-url{display:flex;flex-wrap:wrap;gap:0;padding:14px 16px;border-radius:12px;background:var(--night);color:var(--night-muted);font:400 .875rem/1.6 var(--mono);overflow-wrap:anywhere}
.lib-url b{font-weight:400;color:var(--night-ink)}
.lib-url i{font-style:normal;color:var(--accent)}
.lib-vers{display:grid;gap:12px}
.lib-ver{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--night-line);border-radius:14px;background:var(--night-panel)}
.lib-ver .app-icon{--s:44px;border-radius:11px}
.lib-ver div{display:grid;gap:2px;font-size:.875rem}
.lib-ver small{color:var(--night-muted);font:400 .75rem var(--mono)}
.lib-ver .tag{margin-left:auto}
.lib-ver.is-cur{border-color:var(--accent)}
.lib-ver:not(.is-cur){opacity:.6}
.lib-v2{background:var(--night-ink);color:var(--night)}
.lib-v1{background:var(--night-line);color:var(--night-ink)}
.lib-links{display:grid;gap:8px;margin-top:20px}
.lib-links div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:12px 14px;border-radius:10px;border:1px solid var(--night-line);font-size:.8125rem}
.lib-links code{font-family:var(--mono);color:var(--night-ink)}
.lib-links span{color:var(--night-muted)}
.lib-fmts{grid-template-columns:repeat(3,minmax(0,1fr))}
.lib-fmts>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1;font-size:.8125rem;font-weight:500}
.lib-fmts img{width:40px;height:40px}
@media (min-width:641px){.lib-wall{grid-template-columns:repeat(4,minmax(0,1fr))}.lib-fmts{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1000px){.lib-ren{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:center}.lib-fmts{grid-template-columns:repeat(9,minmax(0,1fr))}}

/* Guidelines */
.gl-hero{display:grid;overflow:hidden}
.gl-hero .p-hero{padding-inline:16px;padding-bottom:48px}
@media (min-width:641px){.gl-hero .p-hero{padding-inline:32px}}
.gl-live{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:420px;padding:32px 16px}
.gl-live .app-icon{--s:min(42vw,220px);border-radius:22%;background:var(--on-accent);color:var(--accent)}
.gl-live-top{display:flex;justify-content:space-between;gap:12px;font:500 .8125rem var(--mono)}
.gl-live-name{font:440 clamp(3rem,2rem + 4vw,6rem)/.9 var(--display);letter-spacing:-.045em}
.gl-live-meta{display:grid;gap:4px;font:400 .875rem var(--mono);opacity:.8}
.gl-edit{display:grid;gap:20px}
.gl-rule{padding:20px}
.gl-rule .ui-card-content{display:grid;gap:14px;padding:0}
.gl-rule code{font:400 .8125rem var(--mono)}
.gl-rule p{margin:0}
.gl-rule .p-label{margin-bottom:8px}
.gl-swatches{display:flex;flex-wrap:wrap;gap:8px}
.gl-swatches button{width:36px;height:36px;padding:0;border:2px solid transparent;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08);transition:transform var(--fast) var(--ease)}
.gl-swatches button:hover{transform:translateY(-2px)}
.gl-swatches button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 2px #fff}
.gl-page{--g:var(--accent);--g-on:var(--on-accent);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.gl-page-top{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.gl-page-top .app-icon{--s:20px;border-radius:5px;background:var(--g);color:var(--g-on)}
.gl-page-top span:last-child{margin-left:auto}
.gl-page-body{display:grid;gap:16px;padding:24px}
.gl-page-body h3{margin:0;font:440 2.25rem/1 var(--display);letter-spacing:-.03em}
.gl-page-body h3 small{display:block;margin-bottom:8px;font:500 .75rem var(--mono);letter-spacing:0;color:var(--muted)}
.gl-page-body p{margin:0;font-size:.875rem;color:var(--muted);max-width:420px}
.gl-chips{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2px}
.gl-chips>span{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:120px;padding:10px;font:500 .6875rem var(--mono)}
.gl-chips>span b{font:600 .8125rem var(--sans)}
.gl-chips .is-acc{background:var(--g);color:var(--g-on)}
.gl-page .gl-btn{justify-self:start;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.8125rem;font-weight:600;box-shadow:0 0 0 3px var(--g)}
@media (prefers-reduced-motion:no-preference){.gl-page *{transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}}
.gl-diff{padding:18px 20px;font-size:.875rem}
.gl-diff>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0}
.gl-diff>div+div{border-top:1px solid var(--line)}
.gl-diff code{font:400 .8125rem var(--mono)}
.gl-diff .ab-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:4px;border:1px solid rgb(0 0 0 / .1)}
.gl-reach{display:flex;flex-wrap:wrap;gap:6px}
.gl-kit{display:grid;gap:48px}
.gl-kit ab-palette,.gl-kit ab-type,.gl-kit ab-rules{display:block}
.gl-kit .ab-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.gl-kit .ab-palette>li{gap:4px;padding-bottom:12px}
.gl-kit .ab-chip{height:9rem;border-radius:0;border:0;font:440 1.75rem var(--display)}
.gl-kit .ab-palette b{font-size:.9375rem}
.gl-kit .ab-palette code{font:400 .75rem var(--mono);color:var(--muted)}
.gl-kit .ab-values{display:none}
.gl-kit .ab-usage{font-size:.8125rem;color:var(--muted);opacity:1;max-width:32ch}
.gl-kit .ab-type{grid-template-columns:minmax(0,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.gl-kit .ab-type>li{padding:24px;background:var(--paper)}
.gl-kit .ab-sample{font-size:clamp(4rem,3rem + 4vw,7rem);letter-spacing:-.03em}
.gl-kit .ab-family{font-size:.875rem}
.gl-kit .ab-alphabet{font-size:1.125rem;color:var(--muted)}
.gl-kit .ab-usage{margin-top:4px}
.gl-kit .ab-rules dt{font-size:.8125rem;color:var(--muted);font-weight:500}
.gl-kit .ab-rules dd{font:440 clamp(1.25rem,1rem + 1vw,1.75rem)/1.25 var(--display);letter-spacing:-.015em}
.gl-voice{display:grid;gap:0}
.gl-voice>div{padding:24px 0;border-top:1px solid var(--line)}
.gl-voice small{display:block;margin-bottom:8px;font-size:.8125rem;color:var(--muted)}
.gl-voice q{font:440 clamp(1.5rem,1.1rem + 1.6vw,2.5rem)/1.1 var(--display);letter-spacing:-.025em;quotes:none}
.gl-tok{display:grid;gap:16px}
.gl-tok .choices .choice{background:transparent;color:var(--night-ink);border-color:var(--night-line)}
.gl-tok .choices .choice[aria-selected=true]{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.gl-tok .p-code{min-height:300px}
@media (min-width:641px){.gl-kit .ab-palette{grid-template-columns:repeat(3,minmax(0,1fr))}.gl-kit .ab-type{grid-template-columns:repeat(3,minmax(0,1fr))}.gl-voice{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}}
@media (min-width:1000px){
  .gl-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gl-hero .p-hero{padding-inline:max(32px,calc((100vw - 1240px) / 2 + 32px)) 48px;align-self:center;max-width:none}
  .gl-live{min-height:640px;padding:48px}
  .gl-edit{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px;align-items:start}
}
@media (min-width:1100px){.gl-kit .ab-palette{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Sites */
.st-hero{text-align:center}
.st-hero .eb{justify-content:center}
.st-hero .text-lede{margin-inline:auto}
.st-hero .p-ctas{justify-content:center}
.st-stage{padding:0 0 64px;background:linear-gradient(var(--paper) 0 18%,var(--accent) 18%)}
.st-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:0 0 20px}
.st-controls>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.st-controls .p-label{margin:0}
.st-browser{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 32px 64px -32px rgb(22 21 42 / .45)}
.st-bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.st-dots{display:flex;gap:6px}
.st-dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.st-addr{flex:1;max-width:420px;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--paper);font:400 .75rem var(--mono);color:var(--muted);overflow:hidden;white-space:nowrap}
.st-addr svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.st-page{position:relative}
.st-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:.8125rem}
.st-nav b{display:flex;align-items:center;gap:8px;margin-right:auto;font:500 1rem var(--display)}
.st-nav .app-icon{--s:22px;border-radius:6px}
.st-nav span{color:var(--muted)}
@media (max-width:640px){.st-nav span:not(.st-dl){display:none}}
.st-nav .st-dl{padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600}
.st-cover{display:grid;gap:24px;padding:32px 20px}
.st-cover h2{margin:0;font:440 clamp(2.25rem,1.4rem + 3.4vw,4.5rem)/.95 var(--display);letter-spacing:-.045em}
.st-cover h2 span{color:var(--muted)}
.st-cover p{margin:16px 0 0;max-width:440px;font-size:.9375rem;color:var(--muted)}
.st-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.st-pages>span{display:flex;flex-direction:column;gap:6px;padding:16px 20px 20px;background:var(--paper);font-size:.8125rem}
.st-pages small{font:500 .6875rem var(--mono);color:var(--muted)}
.st-pages b{font:440 1.25rem var(--display);letter-spacing:-.02em}
.st-pages i{display:flex;align-items:center;height:56px;margin-top:6px;font-style:normal}
.st-pg-logo .app-icon{--s:44px;border-radius:11px}
.st-pg-color{gap:2px}
.st-pg-color em{flex:1;height:100%;background:var(--panel)}
.st-pg-color em:first-child{flex:2;background:var(--accent)}
.st-pg-color em:nth-child(2){background:var(--ink)}
.st-pg-color em:nth-child(3){background:var(--muted)}
.st-pg-type{font:440 3rem/1 var(--display);letter-spacing:-.03em}
.st-pg-voice{font:440 1.125rem/1.2 var(--display);color:var(--muted)}
.st-cover-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.st-cover-tiles>span{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1;padding:12px;font:500 .6875rem var(--mono)}
.st-cover-tiles .app-icon{--s:min(14vw,72px);border-radius:22%}
.st-t1{background:var(--accent);color:var(--on-accent)}
.st-t2{background:var(--ink);color:var(--paper)}
.st-t3{background:var(--panel);color:var(--ink)}
.st-t3 .app-icon{background:var(--ink);color:var(--paper)}
.st-gate{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgb(255 255 255 / .72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.st-gate .ui-card{width:min(100%,360px)}
.st-gate .ui-card-content{display:grid;gap:12px}
@media (prefers-reduced-motion:no-preference){.st-gate:not([hidden]){animation:p-fade var(--reveal) var(--ease) both}}
@keyframes p-fade{from{opacity:0}to{opacity:1}}
.st-term{display:grid;gap:28px}
.st-lines{min-height:180px}
@media (min-width:1000px){.st-lines{min-height:280px}}
.st-lines .ok{color:#5fd39b}
.st-lines .no{color:#ff8a80}
.st-lines .k{color:var(--accent)}
.st-term-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.night .p-label{color:var(--night-muted)}
.st-term-act .btn{border-color:var(--night-ink);color:var(--night-ink)}
.st-term-act .btn--primary{background:var(--night-ink);color:var(--night)}
.st-deploys .rows{background:var(--night-line);border-color:var(--night-line)}
.st-deploys .rows>*{background:var(--night);color:var(--night-ink);font-size:.875rem}
.st-deploys .mono{font-size:.75rem;color:var(--night-muted)}
.st-covers{display:grid;gap:2px}
.st-cov{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:360px;padding:28px;text-decoration:none}
.st-cov img{width:56px;height:56px}
.st-cov-k{display:block;margin-bottom:12px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.st-cov-t{display:block;font:440 clamp(1.75rem,1.3rem + 1.6vw,2.75rem)/1 var(--display);letter-spacing:-.035em}
.st-cov-t span{display:block;opacity:.62}
.st-cov-l{font-size:.875rem;font-weight:600}
.st-blender{background:#1a1a1a;color:#f3f3f3}.st-firefox{background:#ff7139;color:#20123a}.st-rust{background:#f6e6d2;color:#1d1611}
@media (min-width:641px){.st-pages{grid-template-columns:repeat(4,minmax(0,1fr))}.st-cover{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;padding:48px 40px}.st-covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.st-stage{padding-bottom:96px}.st-page{min-height:520px}.st-term{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}}

/* Insights */
.in-stats{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:0;border-inline:0}
.in-stat{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:220px;padding:24px 16px}
.in-stat b{font:440 clamp(3rem,1.6rem + 5vw,7rem)/.9 var(--display);letter-spacing:-.05em}
.in-stat span{font-size:.9375rem;color:var(--muted);max-width:22ch}
.in-stat--acc{background:var(--accent)!important;color:var(--on-accent)}
.in-stat--acc span{color:inherit;opacity:.75}
.in-made{margin:12px 0 0;font-size:.75rem;color:var(--muted)}
.in-chart{display:grid;gap:12px;margin-bottom:24px}
.in-chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.in-legend{display:flex;gap:16px;font-size:.75rem;color:var(--ui-muted-foreground)}
.in-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--ui-foreground)}
.in-legend i.a{background:var(--accent)}
.in-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:180px;padding-bottom:4px;border-bottom:1px solid var(--ui-border)}
.in-bar{position:relative;height:100%}
.in-bar i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:4px 4px 0 0;background:var(--ui-foreground)}
.in-bar i.a{z-index:1;height:var(--a);border-radius:0;background:var(--accent)}
.in-bar:last-child i:not(.a){opacity:.4}
.in-axis{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ui-muted-foreground)}
.in-tabs{margin-bottom:14px;max-width:100%;overflow-x:auto;justify-content:flex-start}
.in-tab td:last-child,.in-tab th:last-child{text-align:right}
.in-tab .mono{font-size:.75rem}
.in-act{display:grid;gap:2px}
.in-act a{display:flex;flex-direction:column;gap:12px;padding:32px;background:var(--panel);color:var(--ink);text-decoration:none;transition:background-color var(--fast) var(--ease)}
.in-act a:hover{background:#eeedf3}
.in-act b{font:440 clamp(1.75rem,1.4rem + 1.2vw,2.5rem)/1.05 var(--display);letter-spacing:-.03em}
.in-act span{color:var(--muted);max-width:44ch}
.in-act .text-link{margin-top:auto;padding-top:20px}
@media (min-width:641px){.in-act{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.in-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.in-stat{min-height:300px;padding:32px}}

/* Automations */
.au-hero{position:relative;overflow:hidden}
.au-hero .p-hero{padding-bottom:40px}
.au-flow{display:grid;gap:12px;padding-bottom:64px}
.au-node{display:flex;flex-direction:column;gap:10px;min-height:150px;padding:22px;border-radius:var(--radius-md);background:var(--paper);color:var(--ink);box-shadow:0 24px 48px -32px rgb(22 21 42 / .5)}
.au-node small{font:500 .75rem var(--mono);color:var(--muted)}
.au-node b{font:440 1.625rem/1.1 var(--display);letter-spacing:-.025em}
.au-node .ui-badge{align-self:flex-start;margin-top:auto}
.au-node--night{background:var(--night);color:var(--night-ink)}
.au-node--night small{color:var(--night-muted)}
.au-node--night .ui-badge{background:var(--accent);color:var(--on-accent)}
.au-pipe{position:relative;justify-self:center;width:2px;height:28px;background:color-mix(in srgb,var(--on-accent) 30%,transparent);overflow:hidden}
.au-pipe i{position:absolute;left:-3px;top:-10px;width:8px;height:8px;border-radius:50%;background:var(--on-accent)}
@media (prefers-reduced-motion:no-preference){.au-pipe i{animation:p-down 1.6s linear infinite}.au-pipe+.au-node+.au-pipe i{animation-delay:.8s}}
@keyframes p-down{from{top:-10px}to{top:100%}}
@keyframes p-right{from{left:-10px}to{left:100%}}
.au-make{display:grid;gap:24px}
.au-dialog{max-width:none}
.au-dialog .row{display:grid;gap:12px}
.au-dialog label{display:grid;gap:6px;font-size:.875rem;font-weight:500}
.au-dialog .ui-select,.au-dialog .ui-input{width:100%}
.au-say{padding:16px 18px;border-radius:12px;background:var(--panel);font-size:.9375rem}
.au-say small{display:block;margin-bottom:4px;font-size:.75rem;color:var(--muted)}
.au-json{min-height:240px}
.au-runs{flex-basis:100%;margin:4px 0 0 30px;padding:12px 14px;border-radius:var(--ui-radius);background:color-mix(in srgb,var(--ui-muted) 60%,transparent);font-size:.8125rem}
.au-runs p{margin:0 0 8px;font-weight:500}
.au-runs ol{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.au-runs li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.au-runs li span:last-child{color:var(--ui-muted-foreground)}
.au-runs .mono{font-size:.75rem}
.au-where{grid-template-columns:repeat(2,minmax(0,1fr))}
.au-where>div{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:180px;padding:24px}
@media (min-width:1000px){.au-where>div{min-height:220px;padding:32px}.au-where>div b{font-size:2rem}}
.au-where img{width:32px;height:32px}
.au-where b{display:block;font:440 1.5rem/1.1 var(--display);letter-spacing:-.02em}
.au-where span{font-size:.875rem;color:var(--muted)}
.au-where .is-soon{background:var(--panel)}
.au-where .tag{align-self:flex-start}
.au-where .is-soon b{color:var(--muted)}
.au-glyph{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--ink);color:var(--paper);font:600 .875rem var(--sans)}
.au-glyph svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.au-sign{display:grid;gap:16px}
@media (min-width:641px){.au-where{grid-template-columns:repeat(3,minmax(0,1fr))}.au-dialog .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .au-flow{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr);align-items:center;gap:0;padding-bottom:96px}
  .au-pipe{width:100%;height:2px}
  .au-pipe i{top:-3px;left:-10px}
  @media (prefers-reduced-motion:no-preference){.au-pipe i{animation-name:p-right}}
  .au-node{min-height:200px;padding:28px}
  .au-node b{font-size:2rem}
  .au-make{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start;gap:32px}
  .au-sign{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
}

/* Fixes */
.fx-hero{display:grid;gap:32px;align-items:center}
.fx-count{display:flex;flex-direction:column;justify-content:space-between;min-height:240px;max-width:440px;width:100%;justify-self:end;padding:28px;border-radius:var(--radius-lg)}
.fx-count b{font:440 clamp(7rem,4rem + 12vw,15rem)/.8 var(--display);letter-spacing:-.06em}
.fx-count span{font:440 1.5rem/1.1 var(--display);letter-spacing:-.02em}
.fx-count small{font-size:.875rem;opacity:.75}
.fx-count.is-zero b{opacity:.5}
.fx-app .aw-main{max-width:820px}
.fx-row.is-new{animation:none}
@media (prefers-reduced-motion:no-preference){.fx-row.is-new{animation:arrive var(--reveal) var(--ease) both}}
.fx-soon{display:inline-flex;align-items:center;gap:6px}
.fx-kinds{grid-template-columns:minmax(0,1fr)}
.fx-kind{display:grid;gap:14px;padding:28px;align-content:start}
.fx-kind-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fx-kind-top svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fx-kind h3{margin:0;font:440 1.75rem/1.1 var(--display);letter-spacing:-.025em}
.fx-kind p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.fx-kind .ui-button{align-self:start;justify-self:start;pointer-events:none}
.fx-mail{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 16px 48px -24px rgb(22 21 42 / .24);font-size:.875rem}
.fx-mail-head{display:grid;gap:4px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--panel);font-size:.8125rem}
.fx-mail-head span{color:var(--muted)}
.fx-mail-head b{font-size:.9375rem}
.fx-mail-body{display:grid;gap:14px;padding:20px}
.fx-mail-body p{margin:0;line-height:1.55}
.fx-mail-body .app-icon{--s:28px;border-radius:7px}
.fx-mail-body code{font:400 .8125rem var(--mono);padding:2px 6px;border-radius:6px;background:var(--panel)}
.fx-mail-body .rows{font-size:.8125rem}
.fx-mail-body .rows .mono{font-size:.75rem;color:var(--muted)}
.fx-mail-sec{display:grid;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.fx-mail-sec:first-child{padding-top:0;border-top:0}
.fx-mail-sec b{font-size:.8125rem}
.fx-mail-sec span{color:var(--muted);font-size:.8125rem}
@media (min-width:641px){.fx-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-kind{padding:40px}}
@media (min-width:1000px){.fx-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}.fx-hero.p-hero{padding-bottom:64px}.fx-count{aspect-ratio:1;padding:36px}}
.cat-res td code{display:block;font:400 .75rem var(--mono)}
.cat-prev{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.cat-prev2{background:var(--ink);color:var(--paper)}