/*
 * product2.css: /brandhub, /brand-as-code, /ai, /components and /templates, on base.css (tokens, type, buttons,
 * hairlines, motion) and app-ui.css (the app's components the demos are made of). Their demos are product2.js.
 * Mobile first: 641px, 1000px and 1100px add columns.
 *
 * Shared here (any page may use them)
 *   .p2-hero (a first screen: eyebrow, two-line headline, lede, .p2-ctas)  .p2-split (copy beside a demo, 2 columns wide)
 *   .p2-field (a whole field of the week's accent, the page's signature)  .p2-bleed (full width, no gutter)
 *   .p2-wall (a gapless grid of pictures, square corners: --cols sets the wide count)
 *   .p2-code (a code pane on panel; on .night, on night-panel)  .p2-dev (the "For developers" divider)
 *   .p2-steps / .p2-seg (a stepper whose bar fills, product2.js stepper(): [data-at] parts light up to the step)
 *   .p2-cta (the closing call to action, on the accent)  .p2-label (a small label above a control)
 *   .p2-note (an illustration's caption)  .p2-acc-0 to .p2-acc-5 (the six weekly accents, each with its text color)
 */
:root{
  --p2-a0:#c6f432;--p2-oa0:#16152a;--p2-a1:#6b4dff;--p2-oa1:#ffffff;--p2-a2:#ff5b1f;--p2-oa2:#16152a;
  --p2-a3:#2f62ff;--p2-oa3:#ffffff;--p2-a4:#14a874;--p2-oa4:#16152a;--p2-a5:#c92a72;--p2-oa5:#ffffff;
}
.p2-acc-0{background:var(--p2-a0);color:var(--p2-oa0)}.p2-acc-1{background:var(--p2-a1);color:var(--p2-oa1)}.p2-acc-2{background:var(--p2-a2);color:var(--p2-oa2)}
.p2-acc-3{background:var(--p2-a3);color:var(--p2-oa3)}.p2-acc-4{background:var(--p2-a4);color:var(--p2-oa4)}.p2-acc-5{background:var(--p2-a5);color:var(--p2-oa5)}
@media (prefers-reduced-motion:no-preference){
  .app-icon,.eb i,.p2-field,.p2-cta,.tag--accent,.ui-badge,.ui-button{transition:background-color .6s ease,color .6s ease}
}

/* First screen */
.p2-hero{padding-block:56px 48px}
.p2-hero .text-lede{margin-top:24px}
.p2-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px}
.p2-hero--split{display:grid;gap:40px;align-items:center}
@media (min-width:1000px){.p2-hero{padding-block:88px 64px}.p2-hero--split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px}}

/* Layout and surfaces */
.p2-split{display:grid;gap:32px;align-items:center}
.p2-split>*{min-width:0}
@media (min-width:1000px){.p2-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}.p2-split--even{grid-template-columns:repeat(2,minmax(0,1fr))}.p2-split--flip>:first-child{order:2}}
.p2-copy{display:grid;gap:20px;align-content:start}
.p2-copy>*{margin:0}
.p2-copy .eb{margin:0}
.p2-field{background:var(--accent);color:var(--on-accent)}
.p2-field .mut{color:inherit;opacity:.62}
.p2-bleed{width:100%}
.p2-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:var(--panel)}
.p2-wall img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:0;background:var(--panel)}
.p2-wall a{display:block;position:relative;color:inherit;text-decoration:none;overflow:hidden}
@media (min-width:1000px){.p2-wall{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.p2-label{display:block;margin:0 0 8px;font-size:.8125rem;color:var(--muted)}
.p2-note{margin:12px 0 0;font-size:.8125rem;color:var(--muted)}
.night .p2-note{color:var(--night-muted)}
.p2-code{margin:0;padding:18px 20px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--line);color:var(--ink);font:400 .8125rem/1.7 var(--mono);overflow:auto;white-space:pre;tab-size:2}
.p2-code .c{color:var(--muted)}
.p2-code .add{display:block;margin:0 -20px;padding:0 20px;background:color-mix(in srgb,#14a874 14%,transparent)}
.p2-code .del{display:block;margin:0 -20px;padding:0 20px;background:color-mix(in srgb,#c92a72 12%,transparent);text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.p2-code .p{color:var(--muted);user-select:none}
.night .p2-code{background:var(--night-panel);border-color:var(--night-line);color:var(--night-ink)}
.night .p2-code .c,.night .p2-code .p{color:var(--night-muted)}
.p2-dev{display:flex;align-items:center;gap:14px;margin:0 0 40px;font:500 .8125rem var(--mono);color:var(--muted)}
.p2-dev::after{content:"";flex:1;height:1px;background:var(--line)}
.p2-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin:24px 0 0;padding:0;list-style:none;font-size:.9375rem}
.p2-cells>*{display:flex;flex-direction:column;gap:10px;padding:28px}
.p2-cells h3{margin:0;font-size:1.0625rem;font-weight:600}
.p2-cells p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.5}
.p2-cells{grid-template-columns:minmax(0,1fr)}
@media (min-width:641px){.p2-cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.p2-cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}.p2-cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Stepper: a bar per step fills over --dur; held on hover and off screen */
.p2-steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px}
.p2-seg{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:transparent;color:var(--muted);text-align:left;font:500 .75rem/1.3 var(--sans)}
.p2-seg[aria-pressed=true]{color:var(--ink)}
.p2-seg .bar{display:block;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.p2-seg .bar i{display:block;width:0;height:100%;background:var(--ink)}
.p2-seg.is-done .bar i,html:not(.motion) .p2-seg[aria-pressed=true] .bar i{width:100%}
.p2-seg.is-run .bar i{animation:p2fill var(--dur,3.6s) linear forwards}
.is-paused .p2-seg.is-run .bar i{animation-play-state:paused}
.night .p2-seg{color:var(--night-muted)}.night .p2-seg[aria-pressed=true]{color:var(--night-ink)}.night .p2-seg .bar{background:var(--night-line)}.night .p2-seg .bar i{background:var(--accent)}
.is-armed [data-at]{transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease)}
.is-armed [data-at]:not(.is-on){opacity:.16}
@keyframes p2fill{from{width:0}to{width:100%}}
@media (min-width:641px){.p2-seg{font-size:.8125rem}}

/* Closing call to action, on the accent */
.p2-cta{display:flex;flex-direction:column;gap:28px;padding:48px 24px;border-radius:var(--radius-lg);background:var(--accent);color:var(--on-accent)}
.p2-cta h2 .mut{color:inherit;opacity:.6}
.p2-cta p{margin:0;max-width:560px;font-size:1.125rem;opacity:.85}
.p2-cta .p2-ctas{margin-top:0}
.p2-cta :focus-visible{outline-color:var(--on-accent)}
@media (min-width:1000px){.p2-cta{padding:88px 64px}}
.sec-tight{padding-top:24px}

/* ---------- BrandHub ---------- */
.hub-wall a::after{content:attr(data-name);position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--paper);color:var(--ink);font:600 .75rem var(--sans);opacity:0;transform:translateY(4px);transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
.hub-wall a:hover::after,.hub-wall a:focus-visible::after{opacity:1;transform:none}
.hub-wall a:focus-visible{outline-offset:-3px}
.hub-search{display:grid;gap:14px}
.hub-search .ui-input{height:48px;font-size:1rem;padding-inline:16px}
.hub-results{min-height:420px}
.hub-results>a{color:inherit;text-decoration:none;transition:background-color var(--fast) var(--ease)}
.hub-results>a:hover{background:var(--panel)}
.hub-row{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;gap:14px!important}
.hub-tint{width:40px;height:40px;border-radius:10px;border:1px solid rgb(0 0 0 / .08)}
.hub-name{display:grid;gap:2px;min-width:0}
.hub-name b{font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-name span{font:400 .75rem var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.75rem;color:var(--muted);white-space:nowrap}
.hub-empty{justify-content:flex-start!important;color:var(--muted);font-size:.9375rem}
.hub-files{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hub-files .choices{margin:0}
.hub-file-url{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font:400 .8125rem var(--mono);color:var(--night-muted)}
.hub-file-url a{color:var(--night-ink);overflow-wrap:anywhere}
.hub-files .p2-code{height:360px;white-space:pre-wrap;overflow-wrap:anywhere}
.night .choice{background:transparent;border-color:var(--night-line);color:var(--night-ink)}
.night .choice:hover{background:var(--night-panel)}
.night .choice[aria-pressed=true],.night .choice[aria-selected=true]{background:var(--night-ink);border-color:var(--night-ink);color:var(--night)}
.hub-listing{display:grid;gap:0;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--line)}
.hub-listing-top{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:300px;padding:28px}
.hub-listing-top .app-icon{--s:72px;border-radius:18px;background:var(--on-accent);color:var(--accent)}
.hub-listing-name{font:440 clamp(2.5rem,2rem + 2vw,3.75rem)/1 var(--display);letter-spacing:-.04em;margin:0}
.hub-listing-sub{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;font:500 .875rem var(--sans)}
.hub-listing-sub .mono{opacity:.7}
.hub-listing .rows{border:0;border-radius:0}
.hub-listing .rows>*{font-size:.875rem}
.hub-listing .rows .mono{font-size:.75rem;color:var(--muted)}
.hub-badge{height:20px;width:auto}
.hub-claim{display:grid;gap:12px;padding:24px;border:1px dashed var(--muted);border-radius:var(--radius-md);background:var(--paper)}
.hub-claim p{margin:0}
@media (min-width:1000px){.hub-listing-top{padding:40px}}

/* ---------- Brand as code ---------- */
.bac-stage{display:grid;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper)}
.bac-files{display:grid;grid-template-columns:minmax(0,1fr)}
.bac-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font:500 .8125rem var(--mono);color:var(--muted)}
.bac-bar img{width:16px;height:16px}
.bac-bar .bac-branch{padding:2px 8px;border-radius:var(--radius-pill);background:var(--panel);color:var(--ink)}
.bac-tree{display:none;margin:0;padding:14px 0;list-style:none;border-inline-end:1px solid var(--line);font:400 .8125rem/1.9 var(--mono);color:var(--muted)}
.bac-tree li{padding:0 16px}
.bac-tree .d{color:var(--ink)}
.bac-tree .in{padding-inline-start:30px}
.bac-tree .on{background:var(--panel);color:var(--ink);font-weight:600}
.bac-stage .p2-code{border:0;border-radius:0;background:var(--paper);min-height:100%}
.bac-preview{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:340px;padding:28px}
.bac-preview .app-icon{--s:88px;border-radius:22px;background:var(--on-accent);color:var(--accent)}
.bac-swatch-name{font:440 clamp(3rem,2.2rem + 3vw,5.5rem)/.9 var(--display);letter-spacing:-.045em}
.bac-preview .mono{font-size:.8125rem;opacity:.75}
.bac-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.bac-picker button{width:36px;height:36px;padding:0;border:2px solid transparent;border-radius:var(--radius-pill);transition:transform var(--fast) var(--ease)}
.bac-picker button:hover{transform:scale(1.08)}
.bac-picker button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
@media (min-width:641px){.bac-files{grid-template-columns:200px minmax(0,1fr)}.bac-tree{display:block}}
@media (min-width:1000px){.bac-stage{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.bac-preview{padding:40px}}
.pr{display:grid;gap:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper)}
.pr-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.pr-head b{font-size:1.125rem}
.pr-head .mono{font-size:.8125rem;color:var(--muted)}
.pr-state{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--radius-pill);background:#1f883d;color:#fff;font-size:.8125rem;font-weight:600}
.pr-body{display:grid;gap:14px;padding:20px 24px 24px}
.pr-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:.9375rem;line-height:1.45}
.pr-item .mono{font-size:.75rem}
.pr-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel);font-size:.8125rem;font-weight:700}
.pr-dot.is-no{background:#ffebe9;color:#cf222e}
.pr-dot.is-ok{background:#dafbe1;color:#1a7f37}
.pr-dot .app-icon{--s:28px;border-radius:50%}
.pr-comment{padding:14px 16px;border:1px solid var(--line);border-radius:10px}
.pr-comment p{margin:6px 0 0;color:var(--muted)}
.pr-merged{background:#8250df}
.bac-ways .choices{margin-bottom:24px}
.bac-way{display:grid;gap:16px}
.bac-way p{margin:0}
.bac-merge{display:grid;gap:12px}
.bac-merge .ui-card{gap:12px;padding:20px 0}
.bac-merge .ui-card-content{display:grid;gap:8px;font-size:.875rem}
.bac-merge .mono{font-size:.75rem}
.bac-merge-mid{display:grid;place-items:center;font:440 1.5rem var(--display);letter-spacing:-.02em;padding:12px}
@media (min-width:1000px){.bac-merge{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);align-items:center}}

/* ---------- AI ---------- */

.ai-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px}
.ai-logos>div{display:flex;align-items:center;justify-content:center;gap:10px;height:72px;font-size:.875rem;font-weight:600}
.ai-logos img{width:22px;height:22px}
@media (min-width:641px){.ai-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.ai-logos{grid-template-columns:repeat(6,minmax(0,1fr))}.ai-logos>div{height:88px}}
.ai-run{display:grid;gap:28px}
.ai-asks{display:grid;gap:8px}
.ai-asks button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:16px 18px;border:1px solid var(--night-line);border-radius:14px;background:transparent;color:var(--night-ink);font:500 .9375rem/1.4 var(--sans);text-align:left;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.ai-asks button:hover{background:var(--night-panel)}
.ai-asks button[aria-pressed=true]{background:var(--night-panel);border-color:var(--night-muted)}
.ai-asks button .mono{font-size:.75rem;color:var(--night-muted);white-space:nowrap}
.ai-chat{display:flex;flex-direction:column;gap:12px;min-height:440px;padding:20px;border:1px solid var(--night-line);border-radius:var(--radius-md);background:#151427}
.ai-chat-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--night-line);font-size:.8125rem;color:var(--night-muted)}
.ai-chat-top img{width:20px;height:20px}
.ai-chat .bub{max-width:88%;padding:12px 14px;border-radius:14px;font-size:.9375rem;line-height:1.45}
.ai-chat .bub--ask{align-self:flex-end;background:var(--night-line)}
.ai-chat .bub--answer{background:var(--paper);color:var(--ink)}
.ai-call{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--night-line);border-radius:10px;font:400 .75rem/1.5 var(--mono);color:var(--night-muted);overflow-wrap:anywhere}
.ai-call b{font-weight:500;color:var(--night-ink)}
.ai-call .ok{color:#5fd39b}.ai-call .no{color:#ff8a80}
.ai-call .sw{display:inline-block;width:10px;height:10px;margin-inline-end:4px;border-radius:3px;background:var(--accent);vertical-align:-1px}
@media (min-width:1000px){.ai-run{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}}
.ai-consent{display:grid;gap:16px;justify-items:center;text-align:center}
.ai-consent .ui-dialog{text-align:left}
.ai-pair{display:flex;align-items:center;gap:14px}
.ai-pair img{width:36px;height:36px}
.ai-pair .app-icon{--s:36px;border-radius:9px}
.ai-pair i{display:flex;gap:4px}
.ai-pair i::before,.ai-pair i::after,.ai-pair i span{content:"";width:5px;height:5px;border-radius:50%;background:var(--line)}
.ai-scopes{display:grid;gap:8px}
.ai-scopes button{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px 12px;padding:12px 14px;border:1px solid var(--ui-border);border-radius:calc(var(--ui-radius) - 2px);background:var(--ui-background);text-align:left;font-size:.875rem;transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.ai-scopes button::before{content:"";grid-row:span 2;width:16px;height:16px;margin-top:2px;border:1px solid var(--ui-input);border-radius:50%}
.ai-scopes button[aria-pressed=true]{border-color:var(--ink);background:var(--panel)}
.ai-scopes button[aria-pressed=true]::before{border:5px solid var(--ink)}
.ai-scopes small{color:var(--ui-muted-foreground);font-size:.8125rem}
.ai-tools{display:flex;flex-wrap:wrap;gap:6px}
.ai-tools .ui-badge{font-family:var(--mono);font-weight:400}
.ai-review .ui-table td:last-child{text-align:right;white-space:nowrap}
.ai-review .ui-table b{font-weight:600}
.ai-review .ui-table .mono{font-size:.75rem}
.ai-review .acts{display:inline-flex;gap:6px}
.ai-thumb{display:block;width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--panel)}
.ai-thumb.app-icon{--s:44px;border-radius:6px}
.ai-prov{display:grid;gap:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper)}
.ai-prov-pic{position:relative;aspect-ratio:16/9;background:var(--panel)}
.ai-prov-pic img{width:100%;height:100%;object-fit:cover}
.ai-prov-pic .ui-badge{position:absolute;left:12px;top:12px}
.ai-prov dl{display:grid;gap:0;margin:0}
.ai-prov dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-top:1px solid var(--line);font-size:.875rem}
.ai-prov dt{color:var(--muted)}
.ai-prov dd{margin:0;text-align:right}
.ai-std>div{display:flex;flex-direction:column;gap:4px;padding:22px}
.ai-std b{font:440 1.5rem var(--display);letter-spacing:-.02em}
.ai-std span{font-size:.8125rem;color:var(--muted)}
.ai-std{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.ai-std{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ai-toolrows>div{flex-wrap:wrap}
.ai-toolrows .mono{font-size:.8125rem}
.ai-toolrows small{color:var(--muted);font-size:.8125rem}

/* ---------- Components ---------- */
.cmp-sb{display:grid;overflow:hidden;min-height:520px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper)}
.cmp-sb .ui-sidebar{flex-direction:row;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--ui-sidebar-border)}
.cmp-sb .ui-sidebar-label{display:none}
.cmp-sb .ui-sidebar-item{width:auto;flex:none}
.cmp-canvas{display:flex;flex-direction:column;gap:16px;padding:20px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:16px 16px}
.cmp-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.75rem;color:var(--muted)}
.cmp-top a{color:var(--muted);text-decoration:none}
.cmp-top a:hover{color:var(--ink)}
.cmp-stage{position:relative;flex:1;display:grid;min-height:420px}
.cmp-frame{position:absolute;inset:0;width:100%;height:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);opacity:0;pointer-events:none;transition:opacity var(--reveal) var(--ease)}
.cmp-stage.is-live .cmp-frame{opacity:1;pointer-events:auto}
.cmp-stage.is-live .cmp-fallback{visibility:hidden}
.cmp-fallback{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:14px;padding:16px}
.cmp-fallback .app-icon{--s:56px;border-radius:14px}
.cmp-fallback .ui-card{width:300px;text-align:left}
.cmp-fallback .ui-card .app-icon{--s:40px;border-radius:10px}
.cmp-kitbox{width:100%;align-self:stretch}
.cmp-kitbox .ab-palette{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.cmp-kitbox .ab-chip{height:6rem}
.cmp-kitbox .ab-values{display:none}
.cmp-kitbox .ab-usage{display:none}
@media (min-width:1000px){
  .cmp-sb{grid-template-columns:220px minmax(0,1fr)}
  .cmp-sb .ui-sidebar{flex-direction:column;overflow:visible;border-bottom:0;border-inline-end:1px solid var(--ui-sidebar-border);padding:14px}
  .cmp-sb .ui-sidebar-label{display:flex}
  .cmp-sb .ui-sidebar-item{width:100%}
  .cmp-canvas{padding:28px}
}
.cmp-flow{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.cmp-flow>div{display:flex;flex-direction:column;gap:14px;padding:24px;min-height:220px}
.cmp-flow .mono{font-size:.75rem;color:var(--muted)}
.cmp-flow b{font:440 1.75rem/1.05 var(--display);letter-spacing:-.03em}
.cmp-flow .p2-field .mono{color:inherit;opacity:.7}
.cmp-chip{display:flex;align-items:center;gap:10px;margin-top:auto;font:400 .8125rem var(--mono)}
.cmp-chip i{width:28px;height:28px;border-radius:8px;background:var(--accent);border:1px solid rgb(0 0 0 / .08)}
.cmp-flow .ui-button{align-self:flex-start;margin-top:auto}
@media (min-width:641px){.cmp-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cmp-flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cmp-tokens{display:grid;gap:14px}
.cmp-tokens .p2-code{height:420px}
.cmp-tokens-url{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font:400 .8125rem var(--mono);color:var(--muted)}
.cmp-tokens-url a{color:var(--ink);overflow-wrap:anywhere}
.cmp-kit{display:grid;gap:24px}
.cmp-kit ab-palette,.cmp-kit ab-type{display:block}
.cmp-kit .ab-palette{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:0;border:1px solid var(--line)}
.cmp-kit .ab-palette>li{padding:0 0 14px;gap:4px;background:var(--paper)}
.cmp-kit .ab-palette>li>*:not(.ab-chip){padding-inline:14px}
.cmp-kit .ab-chip{height:8rem;border-radius:0;border:0;padding:14px}
.cmp-kit .ab-usage{display:none}
.cmp-kit .ab-values{font-size:.75rem}
.cmp-kit .ab-type>li{padding:20px;border:1px solid var(--line)}
.cmp-kit .ab-type{gap:0;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.cmp-kit .ab-sample{font-size:4rem}
.cmp-rebuild .rows>div{font-size:.875rem}
.cmp-rebuild .rows .mono{font-size:.75rem;color:var(--night-muted)}
.night .rows{background:var(--night-line);border-color:var(--night-line)}
.night .rows>*{background:var(--night)}
.cmp-rebuild .is-ok{color:#5fd39b}
.cmp-rebuild .is-skip{color:var(--night-muted)}

/* ---------- Templates ---------- */
.tpl-hero-card{display:grid;gap:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md)}
.tpl-hero-card img{width:100%;height:auto;aspect-ratio:1200/630;background:var(--panel);transition:opacity var(--fast) var(--ease)}
.tpl-hero-card img.is-loading{opacity:.55}
.tpl-form{display:grid;gap:16px;padding:20px;border-top:1px solid var(--line);background:var(--paper)}
.tpl-form-row{display:grid;gap:16px}
@media (min-width:641px){.tpl-form-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}}
.tpl-meta{white-space:pre-wrap;overflow-wrap:anywhere}
.tpl-wall figure{margin:0;position:relative}
.tpl-wall figcaption{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:var(--radius-pill);background:rgb(255 255 255 / .92);color:var(--ink);font:500 .6875rem var(--mono)}
.tpl-office{display:grid;gap:24px}
.tpl-slides{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.tpl-slide{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:16/9;padding:7%;overflow:hidden;border:1px solid var(--line);background:var(--paper);container-type:inline-size}
.tpl-slide .app-icon{position:absolute;top:8%;left:7%;--s:9cqi;border-radius:22%}
.tpl-slide h4{margin:0;font:440 7.5cqi/1 var(--display);letter-spacing:-.035em}
.tpl-slide p{margin:0;font-size:3cqi;color:var(--muted)}
.tpl-slide ul{margin:0;padding-left:1.1em;font-size:3.2cqi;line-height:1.5}
.tpl-slide--content{justify-content:flex-start;padding-top:22%}
.tpl-slide--content h4{font-size:5.6cqi;margin-bottom:3%}
.tpl-slide--content .app-icon{--s:6cqi}
.tpl-slide--section{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tpl-slide--section p{color:inherit;opacity:.7}
.tpl-slide--section .app-icon{background:var(--on-accent);color:var(--accent)}
.tpl-slide .tpl-layout{position:absolute;right:6%;top:8%;font:500 2.2cqi var(--mono);opacity:.6}
@media (min-width:641px){.tpl-slides{grid-template-columns:repeat(2,minmax(0,1fr))}.tpl-slide--title{grid-column:1/-1}}
@media (min-width:1000px){.tpl-slides{grid-template-columns:1.6fr 1fr;grid-template-rows:repeat(2,auto)}.tpl-slide--title{grid-column:1;grid-row:span 2;aspect-ratio:auto}}
.tpl-doc{position:relative;display:grid;gap:10px;align-content:start;max-width:560px;margin-inline:auto;aspect-ratio:210/297;padding:9% 10%;border:1px solid var(--line);background:var(--paper);box-shadow:0 24px 48px -32px rgb(22 21 42 / .3);container-type:inline-size}
.tpl-doc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8%;padding-bottom:3%;border-bottom:1px solid var(--line);font-size:2.4cqi;color:var(--muted)}
.tpl-doc-head .app-icon{--s:6cqi;border-radius:22%}
.tpl-doc .t{font:440 7cqi/1 var(--display);letter-spacing:-.03em}
.tpl-doc .h1{font:440 4.6cqi/1.1 var(--display);margin-top:3%}
.tpl-doc .h2{font:600 3.4cqi/1.2 var(--display)}
.tpl-doc .h3{font:600 2.8cqi/1.2 var(--display);color:var(--muted)}
.tpl-doc p{margin:0;font-size:2.6cqi;line-height:1.55;color:var(--muted)}
.tpl-doc a{color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:2px}
.tpl-theme .rows>div{font-size:.875rem}
.tpl-theme .sw{display:inline-block;width:14px;height:14px;margin-inline-end:8px;border-radius:4px;border:1px solid rgb(0 0 0 / .1);vertical-align:-2px}
.tpl-kit{display:grid;gap:28px}
.tpl-kit .rows>div{font-size:.875rem}
.tpl-kit .rows .mono{font-size:.75rem;color:var(--night-muted)}
.tpl-kit-tile{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:320px;padding:28px;border-radius:var(--radius-md)}
.tpl-kit-tile .app-icon{--s:64px;border-radius:16px;background:var(--on-accent);color:var(--accent)}
.tpl-kit-tile b{font:440 clamp(2rem,1.6rem + 1.6vw,3rem)/1 var(--display);letter-spacing:-.035em}
@media (min-width:1000px){.tpl-kit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.tpl-own{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.tpl-own>div{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:4/5;padding:18px;border:1px dashed var(--muted);background:var(--paper);font-size:.875rem}
.tpl-own .mono{font-size:.75rem;color:var(--muted)}
@media (min-width:1000px){.tpl-own{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hub-more{margin-top:24px}
.night .text-link{color:var(--night-ink)}
.p2-code .blk{display:block}
.hub-more a{white-space:nowrap}
.p2-field .text-lede{color:inherit;opacity:.8}
.p2-field .eb i{background:var(--on-accent)}
.hide-sm{display:none}
@media (min-width:641px){.hide-sm{display:table-cell}}
@media (min-width:1000px){.intro{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.night .text-lede{color:var(--night-muted)}
.cmp-kit{margin-top:40px}
.cmp-fallback .cmp-kitbox .ab-palette{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
.cmp-fallback .cmp-kitbox .ab-chip{height:12rem}
@media (min-width:1000px){.tpl-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.tpl-kit-tile{background:var(--night-panel);border:1px solid var(--night-line);color:var(--night-ink);text-decoration:none;transition:border-color var(--fast) var(--ease)}
.tpl-kit-tile:hover{border-color:var(--night-muted)}
.tpl-kit-tile .app-icon{background:var(--accent);color:var(--on-accent)}
.tpl-kit-tile .mono{font-size:.875rem;color:var(--night-muted)}
.tpl-hero-card{border-radius:var(--radius-sm)}
.tpl-wall{grid-template-columns:minmax(0,1fr)}
@media (min-width:641px){.tpl-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tpl-theme .rows .mono{font-size:.8125rem;text-align:right}
code{font-family:var(--mono);font-size:inherit}
.hub-name code{font:400 .75rem var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-results{align-content:start;background:var(--paper)}
.tpl-doc{max-width:460px}