.art { container-type: size; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--art-bg); color: var(--art-fg); font-family: var(--art-font, inherit); font-variant-numeric: tabular-nums; }
.art-in { position: absolute; inset: 0; display: grid; font-size: clamp(12px, 1.9cqw, 18px); line-height: 1.4; padding: 6cqmin; }
.art :is(h3, p, ul) { margin: 0; padding: 0; list-style: none; }
.art :focus-visible { outline: 2px solid var(--art-fg); outline-offset: 2px; }

.a-note { align-self: center; max-width: 38em; display: grid; gap: 1em; }
.a-note h3 { margin: 0; font-size: 1.9em; line-height: 1.15; font-weight: 400; text-wrap: balance; }
.a-note p { color: var(--art-muted); max-width: 60ch; }
.a-note li { padding: .4em 0; border-top: 1px solid var(--art-line); }

/* Live components and screenshots. */
.frame .art.art-embed { background: #fff; }
.frame .art.art-embed.on-dark, .frame .art.art-shot { background: #111; }
.art-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.art-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frame .art.art-shot:has(img[src*="logos"]) { background: #161c14; }
.art-shot img[src*="logos"] { object-fit: contain; }
@media (max-width: 820px) { .art-shot img { object-fit: contain; } }

@media (prefers-reduced-motion: reduce) {
  [blossom-carousel] { scroll-behavior: auto; }
}