/* Flinter · the scenes (src/components/scene/): real-looking windows of Flinter at work, after LanderLab's feature
   pages, on every inner page. One page's scene is its editor (the chat with the page's sentence, the preview with what
   it built) on the page's live gradient, cut by the plate's lower edge or its right edge and fading out there (Endi,
   2026-11-06: "make it fade in the bottom end or in the right side"). The same sites and screens appear smaller in the
   use cases and in the bento's cells, which fade the same way.

   Everything is drawn at a fixed size and scaled to its box by scene.js ([data-fit]: the width it was drawn at; the
   box's first child gets zoom). Classes: sn- the plate and the editor, cs- a site, ap- an app, pn- a part of
   Flinter, uc- the use cases. */

.sn-i { display: inline-block; flex: none; width: var(--s, 15px); height: var(--s, 15px); fill: none; stroke: currentColor; stroke-width: var(--sw, 1.5); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sn-xs { --s: 12px; }
[data-fit] { position: relative; overflow: hidden; }
[data-fit] > * { width: calc(var(--w) * 1px); zoom: var(--k, 1); }

/* ───────── The plate ───────── */
/* The window stands on the plate's lower edge, cut by it, and its last part fades into the gradient; .sn-is-right
   lets it run out of the plate's right edge instead, fading to the right. */
.sn-plate { position: relative; padding: 64px 64px 0; border-radius: var(--f-r-plate); overflow: hidden; }
.sn-view { --vis: 520; height: calc(var(--vis) * var(--k, 1) * 1px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 66%, rgb(0 0 0 / .1) 100%); mask-image: linear-gradient(180deg, #000 66%, rgb(0 0 0 / .1) 100%); }
.sn-view > .st { zoom: var(--k, 1); }
.sn-is-right { padding: 56px 0 56px 64px; }
.sn-is-right .sn-view { --vis: 676; margin-right: -18%;
  -webkit-mask-image: linear-gradient(90deg, #000 64%, rgb(0 0 0 / .1) 100%); mask-image: linear-gradient(90deg, #000 64%, rgb(0 0 0 / .1) 100%); }
/* The glass rim, as the home's app sits in (front.css .f-glass), not positioned. */
.sn-glass { padding: 8px; border-radius: 22px; background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .42), 0 40px 80px -30px rgb(30 6 40 / .45); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.sn-note { margin-top: 16px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--f-mute); text-wrap: balance; }

/* ───────── The editor ───────── */
.sn-ed { display: grid; grid-template-columns: 52px 300px minmax(0, 1fr); width: 1064px; height: 660px; overflow: hidden; border-radius: 14px; background: #F7F7F8; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 2px 6px rgba(0, 0, 0, .05); font: 400 13px/1.45 var(--sans); color: var(--f-ink); text-align: left; -webkit-font-smoothing: antialiased; }
.sn-ed .sn-i { color: #6B6B73; }

/* The rail */
.sn-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 12px; }
.sn-mk { width: 22px; height: 22px; margin-bottom: 10px; }
.sn-ws, .sn-me { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 600 11px/1 var(--sans); font-style: normal; color: #fff; background: var(--c, #0E8F80); }
.sn-ws { margin-bottom: 8px; }
.sn-me { margin-top: 6px; border-radius: 50%; background: #6E4FD8; font-size: 10px; }
.sn-rl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.sn-rl.sn-on { background: #EBEBED; }
.sn-rl.sn-on .sn-i { color: var(--f-ink); }
.sn-rl .sn-i { --s: 17px; }
.sn-low { margin-top: auto; }

/* The chat */
.sn-chat { display: flex; flex-direction: column; min-height: 0; padding: 0 0 12px; }
.sn-ch-top { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 12px 0 6px; }
.sn-pj { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font: 600 10px/1 var(--sans); font-style: normal; color: #fff; background: var(--c, #0E8F80); }
.sn-ch-top b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sn-ch-ic { display: flex; gap: 12px; margin-left: auto; }
.sn-log { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding: 4px 14px 14px 6px; overflow: hidden; }
.sn-you { align-self: flex-end; max-width: 92%; padding: 10px 13px; border-radius: 14px 14px 4px 14px; font-style: italic; color: var(--f-ink-2); background: #EBEBED; text-wrap: pretty; }
.sn-th { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--f-mute); }
.sn-th .sn-i { color: var(--f-mute); }
.sn-say { color: var(--f-ink-2); text-wrap: pretty; }
.sn-plan { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07), 0 4px 14px -8px rgba(0, 0, 0, .12); }
.sn-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 8px; border-bottom: 1px solid rgba(17, 17, 19, .06); }
.sn-plan-h b { font-weight: 600; font-size: 12.5px; }
.sn-plan-h small { font-size: 11px; color: var(--f-mute); white-space: nowrap; }
.sn-plan ol { margin: 0; padding: 3px 0; list-style: none; }
.sn-plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; padding: 7px 12px; }
.sn-plan b { display: block; overflow: hidden; font-weight: 500; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.sn-plan li small { display: block; overflow: hidden; font-size: 11.5px; line-height: 1.35; color: var(--f-mute); white-space: nowrap; text-overflow: ellipsis; }
.sn-tick { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--f-ok); }
.sn-ed .sn-tick .sn-i { --s: 11px; --sw: 2.4; color: #fff; }
.sn-acts { display: flex; gap: 12px; }
.sn-acts { align-items: center; }
.sn-acts .sn-i { --s: 14px; color: #A0A0A8; }
.sn-acts small { margin-left: auto; font-size: 11px; color: var(--f-mute); }
.sn-cmp { display: grid; gap: 10px; margin: 0 12px 0 6px; padding: 12px 10px 10px 13px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .09), 0 6px 18px -10px rgba(0, 0, 0, .18); }
.sn-cmp p { color: var(--f-mute); }
.sn-cmp-row { display: flex; align-items: center; gap: 8px; }
.sn-cmp-plus { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--f-line-2); }
.sn-cmp-mode { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px var(--f-line-2); }
.sn-cmp-send { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; background: var(--f-ink); }
.sn-ed .sn-cmp-send .sn-i { --sw: 2; color: #fff; }

/* The preview */
.sn-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 8px 8px 8px 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.sn-bar { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border-bottom: 1px solid var(--f-line); }
.sn-tabs { display: flex; gap: 2px; }
.sn-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 8px; font-weight: 500; font-size: 12.5px; }
.sn-tab.sn-on { background: #F0F0F2; }
.sn-tab.sn-on .sn-i { color: var(--f-ink); }
.sn-addr { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; min-width: 0; }
.sn-dev { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: #F4F4F5; }
.sn-dev .sn-i { box-sizing: content-box; padding: 4px 6px; border-radius: 6px; --s: 14px; }
.sn-dev .sn-i.sn-on { background: #fff; color: var(--f-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sn-path { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; min-width: 150px; padding: 0 12px; border-radius: 8px; font-size: 12px; color: var(--f-soft); background: #F4F4F5; }
.sn-pub { display: flex; align-items: center; gap: 10px; }
.sn-share { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--f-line-2); }
.sn-publish { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 500; color: #fff; background: #2F6BF5; }
.sn-pv { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sn-pill { position: absolute; left: 50%; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 6px 14px 6px 6px; translate: -50% 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .08), 0 10px 24px -10px rgba(0, 0, 0, .3); }
.sn-pill > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--f-ink); }
.sn-ed .sn-pill > span .sn-i { color: #fff; }
.sn-pill .sn-i { --s: 15px; }

/* What's been built comes in as the window comes into view: the plan's lines tick one by one (scene.js). */
.f-js .sn-plan li { transition: opacity .5s var(--f-ease), translate .5s var(--f-ease); transition-delay: calc(var(--i, 0) * 140ms + 300ms); }
.f-js [data-sn]:not(.sn-in) .sn-plan li { opacity: 0; translate: 0 6px; }
@media (prefers-reduced-motion: reduce) { .f-js .sn-plan li { transition: none; } }

/* The six example sites (src/components/examples/) fill the preview, without their own address bar. */
.sn-pv > .ex-frame, .uc-ex > .ex-frame { height: 100%; border-radius: 0; box-shadow: none; }
.sn-pv .ex-bar, .uc-ex .ex-bar { display: none; }
.sn-pv .ex-fit, .uc-ex .ex-fit { aspect-ratio: auto; height: 100%; }
.sn-pv > .cs, .sn-pv > .ap, .sn-pv > .pn { height: 100%; }
.sn-is-phone { display: grid; justify-items: center; align-content: start; background: #F2F2F4; }

/* ═════════════ A drawn website (WebSite.astro), 704 wide ═════════════ */
.cs { --pad: 34px; min-height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 400 12.5px/1.5 var(--sans); text-align: left; }
.cs p { margin: 0; }
.cs img { display: block; object-fit: cover; }
.cs-nav { display: flex; align-items: center; gap: 20px; height: 58px; padding: 0 var(--pad); }
.cs-brand { margin-right: auto; font: 600 16px/1 var(--sans); letter-spacing: -.03em; white-space: nowrap; }
.cs-serif .cs-brand { font: 400 21px/1 var(--serif); letter-spacing: -.01em; }
.cs-links { display: flex; gap: 18px; font-size: 12px; color: var(--soft); white-space: nowrap; }
.cs-lang { display: inline-flex; padding: 2px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--soft); background: var(--card); }
.cs-lang span { padding: 3px 7px; border-radius: 999px; }
.cs-lang .cs-on { color: var(--ink); background: var(--bg); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.cs-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 999px; font-style: normal; font-weight: 500; font-size: 12px; color: var(--on); background: var(--ac); white-space: nowrap; }
.cs-ghost { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 999px; font-weight: 500; font-size: 12px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); white-space: nowrap; }
.cs-kick { display: block; margin-bottom: 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.cs-h { font: 600 38px/1.02 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.cs-h i { font: italic 400 1.08em/1 var(--serif); letter-spacing: -.01em; }
.cs-serif .cs-h { font: 400 47px/.98 var(--serif); letter-spacing: -.015em; }
.cs-serif .cs-h i { font-size: 1em; }
.cs-sub { max-width: 300px; margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.cs-acts { display: flex; gap: 8px; margin-top: 20px; }
.cs-split .cs-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 26px; align-items: center; padding: 16px var(--pad) 30px; }
.cs-split .cs-photo { width: 100%; height: 312px; border-radius: 18px; }
.cs-cover .cs-hero { position: relative; display: flex; align-items: flex-end; height: 372px; margin: 0 14px; padding: 30px; overflow: hidden; border-radius: 20px; color: #fff; }
.cs-cover .cs-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 25%, rgb(0 0 0 / .58)); }
.cs-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-cover .cs-words { position: relative; z-index: 1; }
.cs-cover .cs-sub, .cs-cover .cs-kick { color: rgb(255 255 255 / .84); }
.cs-cover .cs-sub { max-width: 360px; }
.cs-cover .cs-ghost { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
.cs-center .cs-hero { display: grid; justify-items: center; padding: 26px var(--pad) 0; text-align: center; }
.cs-center .cs-h { max-width: 540px; }
.cs-center .cs-sub { max-width: 430px; margin-inline: auto; }
.cs-center .cs-acts { justify-content: center; }
.cs-center .cs-photo { width: 100%; height: 236px; margin-top: 26px; border-radius: 18px; }
.cs-b { padding: 26px var(--pad) 0; }
.cs > :last-child { padding-bottom: 40px; }
.cs-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; font: 600 17px/1.2 var(--sans); letter-spacing: -.025em; }
.cs-serif .cs-bh { font: 400 24px/1.1 var(--serif); letter-spacing: -.01em; }
.cs-bh small { font: 400 11.5px/1.3 var(--sans); letter-spacing: 0; color: var(--soft); }
.cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cs-card { display: grid; align-content: start; gap: 3px; padding: 10px 10px 13px; border-radius: 14px; background: var(--card); }
.cs-card img { width: 100%; height: 108px; margin-bottom: 7px; border-radius: 9px; }
.cs-card b { font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.cs-card span { font-size: 11.5px; line-height: 1.45; color: var(--soft); }
.cs-card small { margin-top: 5px; font-weight: 600; font-size: 12px; }
.cs-rows p { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.cs-rows span { font-weight: 500; font-size: 13px; }
.cs-rows span small { display: block; font-weight: 400; font-size: 11px; color: var(--soft); }
.cs-rows i { flex: 1; }
.cs-rows b { font-weight: 600; font-size: 13px; white-space: nowrap; }
.cs-book { display: flex; align-items: center; gap: 4px; padding: 7px; border-radius: 999px; background: var(--card); box-shadow: 0 10px 30px -18px rgb(0 0 0 / .35); }
.cs-book span { display: grid; flex: 1; gap: 1px; padding: 2px 16px; font-weight: 500; font-size: 12.5px; border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); white-space: nowrap; }
.cs-book span:nth-last-child(2) { border-right: 0; }
.cs-book small { font-weight: 400; font-size: 10px; color: var(--soft); }
.cs-book .cs-btn { height: 38px; padding: 0 18px; }
.cs-form, .cs-give { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: center; padding: 22px; border-radius: 18px; background: var(--card); }
.cs-form .cs-sub, .cs-give .cs-sub { margin-top: 0; }
.cs-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-fields span { display: grid; align-content: start; gap: 2px; min-height: 42px; padding: 7px 11px; border-radius: 10px; font-size: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.cs-fields small { font-size: 10px; color: var(--soft); }
.cs-wide { grid-column: 1 / -1; }
.cs-fields .cs-btn, .cs-give .cs-btn { justify-content: center; height: 38px; border-radius: 10px; }
.cs-give-box { display: grid; gap: 10px; }
.cs-amts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.cs-amts span { display: grid; place-items: center; height: 40px; border-radius: 10px; font-weight: 600; font-size: 13px; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.cs-amts .cs-on { box-shadow: inset 0 0 0 2px var(--ac); }
.cs-month { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cs-month i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--ac); }
.cs-month i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.cs-photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.cs-photos img { width: 100%; height: 160px; border-radius: 12px; }
.cs-photos img:first-child { grid-row: span 2; height: 328px; }
.cs-posts p { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.cs-posts img { width: 66px; height: 46px; border-radius: 8px; flex: none; }
.cs-posts b { display: block; font-weight: 600; font-size: 13px; }
.cs-posts small { font-size: 11px; color: var(--soft); }
.cs-quote { padding: 22px; border-radius: 18px; background: var(--card); }
.cs-quote blockquote { margin: 0; font: 500 16px/1.4 var(--sans); letter-spacing: -.015em; }
.cs-serif .cs-quote blockquote { font: 400 22px/1.25 var(--serif); }
.cs-quote figcaption { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--soft); }
.cs-quote img { width: 26px; height: 26px; border-radius: 50%; }

/* ═════════════ A drawn web app (WebApp.astro), 704 wide ═════════════ */
.ap { display: grid; grid-template-columns: 170px minmax(0, 1fr); height: 100%; min-height: 560px; overflow: hidden; font: 400 12px/1.45 var(--sans); color: var(--f-ink); background: #FBFBFC; text-align: left; }
.ap p { margin: 0; }
.ap img { display: block; object-fit: cover; }
.ap-sb { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px 12px; background: #F5F5F7; border-right: 1px solid var(--f-line); }
.ap-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 14px; font-weight: 600; font-size: 13.5px; letter-spacing: -.015em; white-space: nowrap; }
.ap-brand i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font: 600 11px/1 var(--sans); font-style: normal; color: #fff; background: var(--ac); }
.ap-nav { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 8px; color: var(--f-ink-2); white-space: nowrap; }
.ap .sn-i { --s: 15px; color: #7A7A82; }
.ap-nav small { margin-left: auto; font-size: 10.5px; color: var(--f-mute); }
.ap-nav.ap-on { font-weight: 500; color: var(--f-ink); background: #fff; box-shadow: 0 0 0 1px var(--f-line), 0 1px 2px rgb(0 0 0 / .04); }
.ap-nav.ap-on .sn-i { color: var(--ac); }
.ap-me { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 4px 0; border-top: 1px solid var(--f-line); }
.ap-me img, .ap-me > i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 600 10px/1 var(--sans); font-style: normal; color: var(--f-ink-2); background: #DEDEE3; }
.ap-me b { display: block; font-weight: 500; font-size: 11.5px; white-space: nowrap; }
.ap-me small { display: block; font-size: 10.5px; color: var(--f-mute); white-space: nowrap; }
.ap-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 22px; overflow: hidden; }
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ap-title { display: block; font: 600 19px/1.2 var(--sans); letter-spacing: -.03em; }
.ap-head small { display: block; margin-top: 3px; color: var(--f-mute); }
.ap-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 8px; font-style: normal; font-weight: 500; color: #fff; background: var(--ac); white-space: nowrap; }
.ap-sm { height: 26px; padding: 0 10px; font-size: 11px; }
.ap-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.ap-stat { display: grid; gap: 2px; padding: 11px 13px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.ap-stat small { font-size: 11px; color: var(--f-mute); }
.ap-stat b { font: 600 18px/1.2 var(--sans); letter-spacing: -.025em; }
.ap-stat em { font-style: normal; font-size: 10.5px; color: var(--f-ok); }
.ap-stat.ap-warn em { color: #A86500; }
.ap-stat.ap-bad em { color: #C83030; }
.ap-stat.ap-mute em { color: var(--f-mute); }
.ap-tabs { display: flex; align-items: center; gap: 4px; }
.ap-tabs span { padding: 5px 10px; border-radius: 7px; font-weight: 500; color: var(--f-soft); }
.ap-tabs .ap-on { color: var(--f-ink); background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.ap-tabs .sn-i { margin-left: auto; }
.ap-table { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.ap-tr { display: grid; grid-template-columns: 1.7fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 10px; min-height: 42px; padding: 6px 14px; border-top: 1px solid rgba(17, 17, 19, .05); }
.ap-th { min-height: 32px; font-size: 11px; font-weight: 500; color: var(--f-mute); background: #FAFAFB; border-top: 0; }
.ap-tr > span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ap-t { overflow: hidden; text-overflow: ellipsis; }
.ap-t small { display: block; overflow: hidden; font-size: 10.5px; color: var(--f-mute); text-overflow: ellipsis; }
.ap-tr img { flex: none; width: 24px; height: 24px; border-radius: 50%; }
.ap-mono { font-family: var(--mono); font-size: 11px; }
.ap-strong { font-weight: 600; }
.ap-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--f-soft); background: #F0F0F2; white-space: nowrap; }
.ap-chip.ap-ok { color: #0E7A3E; background: #E3F5EA; }
.ap-chip.ap-warn { color: #9A5B00; background: #FDF1DC; }
.ap-chip.ap-bad { color: #C23030; background: #FCE6E6; }
.ap-chip.ap-info { color: #2457D6; background: #E5EDFE; }
.ap-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; align-items: start; }
.ap-col { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: #F2F2F4; }
.ap-col-h { display: flex; justify-content: space-between; padding: 0 2px; font-weight: 600; font-size: 11.5px; }
.ap-col-h small { font-weight: 400; color: var(--f-mute); }
.ap-kard { position: relative; display: grid; gap: 4px; padding: 10px 11px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--f-line), 0 1px 2px rgb(0 0 0 / .03); }
.ap-kard b { padding-right: 24px; font-weight: 500; font-size: 12px; line-height: 1.35; }
.ap-kard small { padding-right: 24px; font-size: 10.5px; color: var(--f-mute); }
.ap-kard img { position: absolute; right: 9px; bottom: 9px; width: 20px; height: 20px; border-radius: 50%; }
.ap-kard .ap-chip { justify-self: start; height: 18px; font-size: 10px; }
.ap-chat { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.ap-msg { max-width: 80%; padding: 10px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; }
.ap-you { align-self: flex-end; color: #fff; background: var(--ac); border-bottom-right-radius: 4px; }
.ap-bot { align-self: flex-start; background: #F2F2F4; border-bottom-left-radius: 4px; }
.ap-msg small { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 10.5px; color: var(--f-mute); }
.ap-input { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: auto; padding: 0 5px 0 14px; border-radius: 999px; color: var(--f-mute); box-shadow: inset 0 0 0 1px var(--f-line-2); }
.ap-input i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ac); }
.ap .ap-input .sn-i { color: #fff; }
.ap-choose { display: grid; gap: 10px; width: min(440px, 100%); margin: 4px auto 0; padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--f-line), 0 14px 30px -20px rgb(0 0 0 / .25); }
.ap-step { font-weight: 600; font-size: 11px; color: var(--ac); }
.ap-q { font: 600 17px/1.3 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.ap-qt { color: var(--f-soft); }
.ap-opts { display: grid; gap: 7px; margin-top: 2px; }
.ap-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px 6px 7px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--f-line-2); }
.ap-opt > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; font: 600 11px/1 var(--sans); font-style: normal; background: #F2F2F4; }
.ap-opt > span { flex: 1; }
.ap-opt small { display: block; font-size: 10.5px; color: var(--f-mute); }
.ap-opt.ap-on { box-shadow: inset 0 0 0 2px var(--ac); }
.ap-opt.ap-on > i { color: #fff; background: var(--ac); }
.ap-opt.ap-right { background: #F1FAF4; box-shadow: inset 0 0 0 2px #12A150; }
.ap-opt.ap-right > i { color: #fff; background: #12A150; }
.ap .ap-right .sn-i { --sw: 2.2; color: #12A150; }
.ap-choose .ap-btn { justify-self: end; margin-top: 4px; }
.ap-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-cardx { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.ap-cardx img { flex: none; width: 64px; height: 64px; border-radius: 9px; }
.ap-cardx > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.ap-cardx b { font-weight: 600; font-size: 12.5px; }
.ap-cardx small { font-size: 11px; color: var(--f-mute); }
.ap-cardx .ap-chip { justify-self: start; }
/* On a phone, in the editor's phone view */
.ap-phone { display: block; width: 300px; height: 620px; min-height: 0; margin-top: 22px; border-radius: 42px; background: #fff; box-shadow: 0 0 0 9px #141416, 0 0 0 10px #3A3A40, 0 30px 60px -20px rgb(0 0 0 / .45); }
.ap-phone .ap-main { position: relative; height: 100%; gap: 12px; padding: 12px 16px 0; }
.ap-status { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 4px; font-size: 11.5px; }
.ap-status i { width: 76px; height: 22px; margin-right: 76px; border-radius: 999px; background: #141416; }
.ap-phone .ap-title { font-size: 21px; }
.ap-phone .ap-stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.ap-phone .ap-cards { grid-template-columns: 1fr; }
.ap-phone .ap-choose { padding: 2px 0; box-shadow: none; }
.ap-tabbar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; padding: 9px 6px 24px; background: rgb(255 255 255 / .94); border-top: 1px solid var(--f-line); }
.ap-tabbar span { display: grid; justify-items: center; gap: 3px; font-size: 9.5px; color: var(--f-mute); }
.ap-tabbar .ap-on, .ap .ap-tabbar .ap-on .sn-i { color: var(--ac); }

/* ═════════════ A part of Flinter (Panel.astro), 704 wide ═════════════ */
.pn { display: flex; height: 100%; font: 400 12px/1.45 var(--sans); color: var(--f-ink); text-align: left; }
.pn p { margin: 0; }
.pn img { display: block; object-fit: cover; }
.pn .sn-i { --s: 15px; color: #7A7A82; }
.pn-nav { display: flex; flex-direction: column; gap: 1px; flex: none; width: 150px; padding: 12px 8px; background: #FBFBFC; border-right: 1px solid var(--f-line); }
.pn-nav small { padding: 12px 8px 4px; font-size: 10.5px; color: var(--f-mute); }
.pn-nav small:first-child { padding-top: 2px; }
.pn-nav span { display: flex; align-items: center; justify-content: space-between; height: 27px; padding: 0 8px; border-radius: 7px; color: var(--f-ink-2); white-space: nowrap; }
.pn-nav .pn-on { font-weight: 500; color: var(--f-ink); background: #EDEDEF; }
.pn-nav .pn-soon { color: var(--f-mute); }
.pn-nav .pn-soon.pn-on { color: var(--f-ink); }
.pn-soon::after { content: "Soon"; padding: 1px 5px; border-radius: 999px; font-size: 9px; font-weight: 500; color: var(--f-mute); background: #EFEFF1; }
.pn-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 18px 20px; overflow: hidden; }
.pn-head { display: flex; align-items: flex-start; gap: 8px; }
.pn-head > span { flex: 1; min-width: 0; }
.pn-head b { display: block; font: 600 17px/1.2 var(--sans); letter-spacing: -.025em; }
.pn-head small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--f-mute); }
.pn-btn, .pn-sel { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 8px; font-style: normal; font-weight: 500; white-space: nowrap; }
.pn-btn { color: #fff; background: var(--f-ink); }
.pn-sel { box-shadow: inset 0 0 0 1px var(--f-line-2); }
.pn-metrics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--f-line); }
.pn-metrics span { display: grid; gap: 2px; padding: 10px 12px; border-left: 1px solid var(--f-line); }
.pn-metrics span:first-child { border-left: 0; }
.pn-metrics .pn-on { box-shadow: inset 0 -2px 0 #2F6BF5; }
.pn-metrics small { font-size: 10.5px; color: var(--f-mute); }
.pn-metrics b { font: 600 17px/1.2 var(--sans); letter-spacing: -.025em; }
.pn-metrics em { font-style: normal; font-size: 10.5px; color: var(--f-ok); }
.pn-chart { display: block; width: 100%; height: 118px; flex: none; }
.pn-chans { display: flex; gap: 5px; }
.pn-chans span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-weight: 500; color: var(--f-soft); box-shadow: inset 0 0 0 1px var(--f-line); white-space: nowrap; }
.pn-chans .pn-on { color: #fff; background: var(--f-ink); box-shadow: none; }
.pn-chans small { margin-left: 6px; opacity: .7; }
.pn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pn-card { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.pn-card-h { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
.pn-card-h small { font-weight: 400; color: var(--f-mute); }
.pn-bar { position: relative; isolation: isolate; display: flex; justify-content: space-between; margin: 0 -6px 3px; padding: 5px 8px; border-radius: 6px; }
.pn-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: var(--w); border-radius: 6px; background: #EAF0FE; }
.pn-bar b, .pn-row b { font-weight: 500; }
.pn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(17, 17, 19, .05); }
.pn-row > span { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.pn-row small { color: var(--f-mute); white-space: nowrap; }
.pn-mono { font-family: var(--mono); font-size: 11px; }
.pn-strong { font-weight: 600; }
.pn-line { display: flex; align-items: center; gap: 11px; }
.pn-line > span:not(.pn-logo):not(.pn-dot) { flex: 1; min-width: 0; }
.pn-line b { display: block; font-weight: 500; }
.pn-line small { display: block; font-size: 11px; color: var(--f-mute); }
.pn-chip { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 999px; font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--f-soft); background: #F0F0F2; white-space: nowrap; }
.pn-chip.pn-ok { color: #0E7A3E; background: #E3F5EA; }
.pn-chip.pn-warn { color: #9A5B00; background: #FDF1DC; }
.pn-chip.pn-bad { color: #C23030; background: #FCE6E6; }
.pn-chip.pn-info { color: #2457D6; background: #E5EDFE; }
.pn-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #C8C8CE; }
.pn-dot.pn-ok { background: var(--f-ok); }
.pn-dot.pn-warn { background: #E8A33A; }
.pn-dot.pn-bad { background: #E04848; }
.pn-dot.pn-info { background: #2F6BF5; }
.pn-sec { margin-top: 4px; font-weight: 600; }
.pn-dns, .pn-grid { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.pn-tr { display: grid; grid-template-columns: 1.4fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 10px; min-height: 36px; padding: 5px 12px; border-top: 1px solid rgba(17, 17, 19, .05); }
.pn-dns .pn-tr { grid-template-columns: 54px 80px; }
.pn-posts .pn-tr { grid-template-columns: 2.4fr; }
.pn-th { min-height: 30px; font-size: 10.5px; font-weight: 500; color: var(--f-mute); background: #FAFAFB; border-top: 0; }
.pn-tr > span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.pn-t { overflow: hidden; text-overflow: ellipsis; }
.pn-t small { display: block; font-size: 10.5px; color: var(--f-mute); }
.pn-tr img { flex: none; width: 22px; height: 22px; border-radius: 50%; }
.pn-tr img.pn-thumb { width: 36px; height: 26px; border-radius: 6px; }
.pn-db { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
.pn-tables { display: flex; flex-direction: column; gap: 1px; }
.pn-tables > small { padding: 6px 7px 3px; font-size: 10.5px; color: var(--f-mute); }
.pn-tables span { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 7px; border-radius: 7px; font: 400 11px/1 var(--mono); white-space: nowrap; }
.pn-tables span small { margin-left: auto; font: 400 10.5px/1 var(--sans); color: var(--f-mute); }
.pn-tables .pn-on { background: #EDEDEF; }
.pn-env { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--f-line); }
.pn-env small { width: 100%; font-size: 10.5px; color: var(--f-mute); }
.pn-env span { padding: 3px 8px; border-radius: 6px; background: #F4F4F5; }
.pn-sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: #D9D9DE; }
.pn-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.pn-sw.pn-on { background: var(--f-ok); }
.pn-sw.pn-on::after { left: 14px; }
.pn-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pn-tool { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.pn-tool > span:not(.pn-logo) { flex: 1; min-width: 0; }
.pn-tool b { display: block; font-weight: 500; }
.pn-tool small { display: block; overflow: hidden; font-size: 10.5px; color: var(--f-mute); white-space: nowrap; text-overflow: ellipsis; }
.pn-logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.pn-logo img { width: 18px; height: 18px; object-fit: contain; }
.pn-logo b { font-weight: 600; color: var(--f-soft); }
.pn-lc { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; font: 600 11px/1 var(--mono); background: #F2F2F4; }
.pn-agent { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; align-items: start; }
.pn-job-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--f-line); }
.pn-job-h > span { flex: 1; }
.pn-job-h b { display: block; font-weight: 600; }
.pn-job-h small { font-size: 11px; color: var(--f-mute); }
.pn-job ol { display: grid; gap: 2px; margin: 0; padding: 6px 0 0; list-style: none; }
.pn-job li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pn-job li > i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font: 600 10.5px/1 var(--sans); font-style: normal; background: #F0F0F2; }
.pn-job li > span { flex: 1; min-width: 0; }
.pn-job li b { display: block; font-weight: 500; }
.pn-job li small { display: block; font-size: 10.5px; color: var(--f-mute); }
.pn-job li img { width: 16px; height: 16px; object-fit: contain; }
.pn-side { display: grid; gap: 4px; align-content: start; }
.pn-out { margin-top: 8px; }
.pn-out-h { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.pn-out-h img { width: 15px; height: 15px; object-fit: contain; }
.pn-out p:not(.pn-out-h) { color: var(--f-ink-2); }
.pn-out ul { margin: 6px 0 0; padding-left: 16px; color: var(--f-ink-2); }
.pn-out li { margin: 2px 0; }
.pn-is-code .pn-body { padding: 0; }
.pn-ide { display: grid; grid-template-columns: 172px minmax(0, 1fr); flex: 1; min-height: 0; }
.pn-files { display: flex; flex-direction: column; gap: 1px; padding: 12px 8px; background: #FBFBFC; border-right: 1px solid var(--f-line); }
.pn-files small { padding: 0 8px 6px; font-size: 10.5px; color: var(--f-mute); }
.pn-files span { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px 0 calc(8px + var(--d) * 12px); border-radius: 6px; font: 400 11px/1 var(--mono); white-space: nowrap; }
.pn-files .sn-i { --s: 13px; }
.pn-files .pn-on { background: #EDEDEF; }
.pn-files .pn-changed::after { content: "M"; margin-left: auto; font-size: 10px; color: #A86500; }
.pn-code-pane { display: flex; flex-direction: column; min-width: 0; }
.pn-code-h { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--f-line); }
.pn-pre { padding: 10px 0; overflow: hidden; font: 400 11.5px/1.8 var(--mono); color: #2C2C31; }
.pn-ln { display: flex; white-space: pre; }
.pn-ln > i { flex: none; width: 40px; padding-right: 14px; font-style: normal; text-align: right; color: #B5B5BC; }
.pn-k { color: #8A3FD1; }
.pn-s { color: #1E8A4C; }
.pn-tg { color: #2457D6; }
.pn-c { color: #9A9AA2; }

/* ═════════════ Use cases (Cases.astro) ═════════════ */
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.uc { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--f-r-cell); background: var(--f-grey); }
/* The site runs out of the card's right edge and its lower one, fading out at both. */
.uc-shot { height: 290px; padding: 26px 0 0 26px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 99%), linear-gradient(180deg, #000 58%, transparent 98%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 66%, transparent 99%), linear-gradient(180deg, #000 58%, transparent 98%); mask-composite: intersect; }
.uc-win { display: block; width: 132%; overflow: hidden; border-radius: 12px 0 0 0; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 19, .07), 0 20px 40px -24px rgb(0 0 0 / .3); transition: translate .6s var(--f-ease); }
.uc:hover .uc-win { translate: -6px -6px; }
.uc-bar { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; background: #FAFAFA; border-bottom: 1px solid var(--f-line); }
.uc-bar small { font-size: 10.5px; color: var(--f-mute); }
.uc-fit, .uc-ex { display: block; height: 380px; }
.uc-ex .ex-frame { display: flex; height: 100%; }
.uc-tx { display: grid; align-content: start; gap: 6px; padding: 18px 24px 24px; }
.uc-tag { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--f-mute); }
.uc-tag i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.uc-tx > b { font: 500 18px/1.3 var(--sans); letter-spacing: -.015em; color: var(--f-ink); }
.uc-tx p { font-size: 14.5px; line-height: 1.5; color: var(--f-soft); text-wrap: pretty; }
.uc-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.uc-parts span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; color: var(--f-ink-2); background: #fff; box-shadow: 0 0 0 1px var(--f-line); }
.uc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--f-ink); }
.uc-link::after { content: ""; position: absolute; inset: 0; }
.uc-link .sn-i { transition: translate .3s var(--f-ease); }
.uc:hover .uc-link .sn-i { translate: 3px 0; }
.uc-grid + .sn-note { margin-top: 18px; }
/* Drawn small, a cover photo is shorter and holds its words in the middle, clear of the card's fade. */
.uc-fit .cs-cover .cs-hero, .sn-wall .cs-cover .cs-hero { height: 270px; align-items: center; }

.uc[hidden] { display: none; }
html:not(.f-js) .uc-filter { display: none; }
.uc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.uc-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--f-ink-2); background: var(--f-plate); cursor: pointer; transition: background-color .2s, color .2s; }
.uc-chip small { font-size: 12.5px; color: var(--f-mute); }
.uc-chip:hover { background: #ECECEE; }
.uc-chip.uc-on { color: #fff; background: var(--f-ink); }
.uc-chip.uc-on small { color: rgb(255 255 255 / .6); }

/* ═════════════ A row of sites on a plate (Wall.astro) ═════════════ */
/* The windows stand in a row from the plate's left, run out of its right edge and fade out there. */
.sn-wall { position: relative; overflow: hidden; padding: 56px 0 56px 56px; border-radius: var(--f-r-plate); }
.sn-wall-row { display: flex; align-items: flex-start; gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 99%); mask-image: linear-gradient(90deg, #000 58%, transparent 99%); }
.sn-wall-win { display: block; flex: none; width: 430px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 30px 60px -28px rgb(30 6 40 / .5); }
.sn-wall-win:nth-child(even) { margin-top: 36px; }
.sn-wall-win .uc-fit, .sn-wall-win .uc-ex { height: 470px; }
@media (max-width: 860px) {
  .sn-wall { padding: 32px 0 32px 20px; }
  .sn-wall-win { width: 260px; }
  .sn-wall-win .uc-fit, .sn-wall-win .uc-ex { height: 320px; }
}

/* ═════════════ The bento's drawings, whole ═════════════ */
/* Each drawing sits whole in the middle of its cell, nothing cut or faded: cut from the lower or right edge, they lost
   their buttons and last rows and left empty grey over them (2026-11-06). The row is as tall as its tallest drawing
   (pages.css), and site.js holds each box at its drawing's played height so the row doesn't grow as it plays. The
   padding is the drawing's margin, with the bento's 12px gap under it before the words. Every drawing is 300 wide;
   the container queries go by the box inside the padding and take the biggest zoom that still fits it whole (they
   outrank art.css's own, made for boxes with no padding). */
.f-cell.lp-cell .lp-cell-art { place-items: center; padding: 40px 22px 16px; }
.f-cell.lp-cell .lp-cell-art > .a { zoom: 1.12; }
.f-cell.lp-cell.lp-is-half .lp-cell-art > .a { zoom: 1.2; }
.f-cell.lp-cell.f-is-xl .lp-cell-art > .a { zoom: 1.3; }
@container (max-width: 389px) { .f-cell.lp-cell.f-is-xl .lp-cell-art > .a { zoom: 1.12 !important; } }
@container (max-width: 370px) { .lp-bento .f-cell.lp-cell .lp-cell-art > .a { zoom: 1.12 !important; } }
@container (max-width: 335px) { .lp-bento .f-cell.lp-cell .lp-cell-art > .a { zoom: .96 !important; } }
@container (max-width: 287px) { .lp-bento .f-cell.lp-cell .lp-cell-art > .a { zoom: .86 !important; } }
.lp-is-measuring *, .lp-is-measuring *::before, .lp-is-measuring *::after { transition: none !important; animation: none !important; }

/* ═════════════ The stages (Stage.astro): one focused thing and its floating cards ═════════════ */
/* A canvas 1080 wide; each kind places its parts on it. How much of its height shows (--vis) goes by kind. */
.st { position: relative; width: 1080px; height: 680px; font: 400 13px/1.45 var(--sans); color: var(--f-ink); text-align: left; -webkit-font-smoothing: antialiased; }
.st p { margin: 0; }
.st img { display: block; }
.sn-view[data-kind="duo"] { --vis: 600; }
.sn-view[data-kind="board"], .sn-view[data-kind="checkout"] { --vis: 580; }
.sn-view[data-kind="site"], .sn-view[data-kind="chat"] { --vis: 560; }
.sn-view[data-kind="flow"] { --vis: 440; -webkit-mask-image: none; mask-image: none; }
/* A flow cuts nothing: it sits in the middle of its plate. */
.sn-plate:has(> [data-kind="flow"]) { padding-bottom: 44px; }
.sn-view[data-kind="phones"] { --vis: 600; }
.sn-view[data-kind="search"], .sn-view[data-kind="terminal"] { --vis: 540; }
.sn-view[data-kind="design"] { --vis: 580; }
.sn-view[data-kind="gallery"] { --vis: 600; }
.sn-view[data-kind="domain"] { --vis: 520; }
.st-ed { position: absolute; top: 0; left: 0; }
/* Each layout keeps its parts in the canvas's first 900 (the split head cuts the rest); centred, it moves to the middle. */
.sn-plate:not(.sn-is-split) .st:not(.st-editor):not(.st-gallery) { margin-left: 90px; }

/* The pieces: a window (the glass rim drawn as a ring), a phone, a card, a floating card, a chip */
.st-win { position: absolute; display: block; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgb(17 17 19 / .06), 0 0 0 8px rgb(255 255 255 / .28), 0 40px 80px -30px rgb(30 6 40 / .55); }
.st-win .uc-bar { height: 30px; }
.st .st-body { display: block; height: 640px; }
.st-phone { position: absolute; display: block; width: 300px; height: 620px; overflow: hidden; border-radius: 44px; background: #fff; box-shadow: 0 0 0 10px #141416, 0 0 0 11px #3A3A40, 0 40px 70px -24px rgb(20 6 30 / .6); }
.st-island { position: absolute; top: 10px; left: 50%; z-index: 2; width: 92px; height: 26px; translate: -50% 0; border-radius: 999px; background: #141416; }
.st-phone-in { display: block; height: 100%; padding-top: 44px; }
.st-phone-in .ap-phone { width: 300px; height: 620px; margin: -44px 0 0; border-radius: 0; box-shadow: none; }
.st-card { position: absolute; display: grid; align-content: start; gap: 8px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(17 17 19 / .06), 0 30px 60px -28px rgb(30 6 40 / .5); }
.st-card-h { display: flex; align-items: center; gap: 10px; }
.st-card-h img { width: 22px; height: 22px; object-fit: contain; }
.st-card-h .sn-i { --s: 20px; color: var(--f-ink); }
.st-card-h b { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.st-card-s { font-size: 12.5px; color: var(--f-mute); }
.st-card-t { font-size: 14px; line-height: 1.5; color: var(--f-ink-2); text-wrap: pretty; }
.st-card-l { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--f-ink-2); }
.st-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgb(17 17 19 / .06); font-size: 13.5px; }
.st-kv small { color: var(--f-mute); font-size: 13px; }
.st-kv b { font-weight: 500; }
.st-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-style: normal; font-weight: 500; font-size: 12px; white-space: nowrap; color: var(--f-soft); background: #F0F0F2; }
.st-chip.st-ok { color: #0E7A3E; background: #E3F5EA; }
.st-chip.st-warn { color: #9A5B00; background: #FDF1DC; }
.st-chip.st-bad { color: #C23030; background: #FCE6E6; }
.st-chip.st-info { color: #2457D6; background: #E5EDFE; }
.st-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; width: 310px; padding: 13px 15px; border-radius: 18px; background: rgb(255 255 255 / .97); box-shadow: 0 0 0 1px rgb(17 17 19 / .06), 0 28px 56px -22px rgb(30 6 40 / .55); }
.st-float-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #F4F4F5; }
.st-float-ic img { width: 20px; height: 20px; object-fit: contain; }
.st-float-ic .st-face { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; }
.st-float-ic .sn-i { --s: 19px; color: var(--f-ink); }
.st-float-tx { display: grid; gap: 1px; flex: 1; min-width: 0; }
.st-float-tx b { overflow: hidden; font-weight: 600; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.st-float-tx small { overflow: hidden; font-size: 12.5px; color: var(--f-mute); white-space: nowrap; text-overflow: ellipsis; }
/* The floating cards rise in after the stage, one after another. */
.f-js .st-float { transition: opacity .7s var(--f-ease), translate .7s var(--f-ease); transition-delay: calc(500ms + var(--d, 0ms)); }
.f-js .st-f2 { --d: 220ms; }
.f-js [data-sn]:not(.sn-in) .st-float { opacity: 0; translate: 0 14px; }

/* duo: the site in its browser, its phone version over the right edge */
.st-duo .st-main { top: 36px; left: 20px; width: 690px; }
.st-duo .st-phone { top: 100px; left: 600px; }
.st-duo .st-f1 { top: 420px; left: -10px; }
/* site, chat: one big browser */
.st-site .st-main, .st-chat .st-main { top: 36px; left: 30px; width: 820px; }
.st-site .st-f1 { top: 330px; left: 580px; }
.st-site .st-f2 { top: 130px; left: 580px; }
.st-chat .st-f1 { top: 320px; left: 580px; }
/* board: an app or a part of Flinter in its window */
.st-board .st-main { top: 36px; left: 20px; width: 820px; }
.st-board .st-f1 { top: 300px; left: 610px; }
.st-board .st-f2 { top: 370px; left: -10px; }
/* checkout: the site, and its payment sheet over its right edge */
.st-checkout .st-main { top: 36px; left: 20px; width: 600px; }
.st-sheet { position: absolute; top: 80px; left: 500px; z-index: 3; display: grid; gap: 10px; width: 340px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgb(17 17 19 / .06), 0 40px 80px -28px rgb(20 6 30 / .6); }
.st-sheet-h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 6px; }
.st-sheet-h b { font: 600 17px/1.2 var(--sans); letter-spacing: -.02em; }
.st-sheet-h small { font-size: 12px; color: var(--f-mute); }
.st-sheet-item { padding: 12px 14px; border-radius: 12px; font-weight: 500; font-size: 14px; background: #F6F6F7; }
.st-sheet-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--f-soft); }
.st-sheet-row b { font-weight: 500; color: var(--f-ink); }
.st-sheet-total { padding-top: 10px; border-top: 1px solid var(--f-line); font-size: 15px; color: var(--f-ink); }
.st-sheet-total b { font-weight: 600; }
.st-pay { display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; border-radius: 12px; font-weight: 600; font-size: 16px; color: #fff; background: #000; }
.st-apple { width: 18px; height: 18px; fill: currentColor; }
.st-pay-alt { font-weight: 500; font-size: 14px; color: var(--f-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--f-line-2); }
.st-sheet-f { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--f-mute); }
.st-checkout .st-f1 { top: 380px; left: -10px; }
/* flow: what happens, the steps, where it goes */
.st-flow::before { content: ""; position: absolute; top: 150px; left: 300px; width: 320px; border-top: 2px dashed rgb(255 255 255 / .7); }
.st-from { top: 50px; left: 10px; width: 310px; }
.st-via { position: absolute; top: 60px; left: 352px; display: grid; gap: 14px; width: 210px; }
.st-via-step { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 6px; border-radius: 999px; font-weight: 500; font-size: 13.5px; background: rgb(255 255 255 / .94); box-shadow: 0 18px 36px -20px rgb(30 6 40 / .5); }
.st-via-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #F4F4F5; }
.st-via-ic img { width: 18px; height: 18px; object-fit: contain; }
.st-via-ic .sn-i { --s: 17px; color: var(--f-ink); }
.st-to { position: absolute; top: 30px; left: 600px; display: grid; gap: 16px; width: 310px; }
.st-to .st-card { position: relative; }
/* phones: three screens side by side, the middle one raised */
.st-phones .st-phone { top: calc(80px - var(--up, 0px)); left: calc(30px + var(--i) * 285px); }
.st-phones .st-island { display: none; }
.st-phones .st-phone-in { padding-top: 0; }
.st-phones .st-phone-in .ap-phone { margin: 0; }
.st-phones .st-phone:nth-child(2) { --up: 56px; z-index: 2; }
.st-phones ~ .st-float { top: 380px; left: 640px; }
/* search: a Google result and an AI answer over the site they lead to */
.st-back { top: 30px; left: 420px; width: 480px; }
.st-google { top: 70px; left: 10px; width: 560px; z-index: 2; }
.st-q { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 6px; padding: 0 16px; border-radius: 999px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--f-line-2); }
.st-q .sn-i { --s: 17px; color: #4285F4; }
.st-url { font-size: 12.5px; color: #1F6B2E; }
.st-title { font: 500 20px/1.25 var(--sans); letter-spacing: -.01em; color: #1A0DAB; }
.st-links { display: flex; flex-wrap: wrap; gap: 6px; }
.st-links span { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; color: #1A0DAB; background: #F1F4FB; }
.st-answer { top: 340px; left: 120px; width: 520px; z-index: 3; }
.st-answer .sn-i { color: #7C3AED; }
.st-cite { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border-radius: 999px; font-size: 12px; color: var(--f-soft); background: #F4F4F5; }
/* terminal: the coding agent, and the change it made */
.st-term { position: absolute; top: 40px; left: 10px; display: block; width: 560px; height: 480px; overflow: hidden; border-radius: 16px; background: #0F0F12; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 0 0 8px rgb(255 255 255 / .16), 0 40px 80px -30px rgb(10 4 20 / .7); }
.st-term-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #17171B; border-bottom: 1px solid rgb(255 255 255 / .06); }
.st-term-bar small { font-size: 11.5px; color: #8C8C96; }
.st-term .sc-dots i { background: #3A3A42; }
.st-term-body { display: grid; gap: 6px; padding: 18px 20px; font: 400 13px/1.55 var(--mono); }
.st-tl { white-space: pre-wrap; color: #C9C9D1; }
.st-tl-you { color: #fff; }
.st-tl-you::before { content: "> "; color: #FE8A4C; }
.st-tl-ok { color: #4ADE80; }
.st-tl-dim { color: #6E6E78; }
.st-caret::after { content: ""; display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px; background: #fff; animation: f-hw-blink 1s steps(1) infinite; }
.st-caret::before { content: "> "; color: #FE8A4C; }
.st-pr { top: 170px; left: 480px; width: 410px; z-index: 2; }
.st-file { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgb(17 17 19 / .06); font: 400 12.5px/1 var(--mono); }
.st-file span { flex: 1; }
.st-add { font-style: normal; color: #12A150; }
.st-del { font-style: normal; color: #D23C3C; }
.st-code { top: 120px; left: 470px; width: 430px; z-index: 2; gap: 0; padding: 0 0 14px; overflow: hidden; }
.st-code-h { padding: 12px 18px; margin-bottom: 8px; font: 500 12px/1 var(--mono); color: var(--f-soft); background: #FAFAFB; border-bottom: 1px solid var(--f-line); }
.st-cl { display: flex; padding: 0 18px; font: 400 12px/1.85 var(--mono); white-space: pre; color: #2C2C31; }
.st-cl i { width: 26px; flex: none; font-style: normal; color: #B5B5BC; }
/* gallery: a tilted wall of sites to start from. The wall fills its plate edge to edge (no padding), so the only cut
   is the plate's own rounded edge, on the right and at the fading foot; inside the padding the window's box cut the
   top row and the last column in straight lines across the gradient. */
.sn-plate:has(> [data-kind="gallery"]) { padding: 0; }
.st-wall { position: absolute; top: 70px; left: 40px; display: grid; grid-template-columns: repeat(4, 290px); gap: 24px; transform: perspective(2200px) rotateX(20deg) rotateZ(-7deg); transform-origin: 30% 20%; }
.st-tile { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 30px 50px -26px rgb(30 6 40 / .55); }
.st-tile .st-body { height: 230px; }
.st-pick { box-shadow: 0 0 0 3px #2F6BF5, 0 0 0 9px rgb(47 107 245 / .25), 0 30px 50px -26px rgb(30 6 40 / .55); }
.st-use { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; padding: 9px 16px; border-radius: 999px; font-style: normal; font-weight: 600; font-size: 13px; white-space: nowrap; color: #fff; background: #2F6BF5; }
.st-gallery .st-f1 { top: 420px; left: 600px; }
/* domain: the address, the steps, the site */
.st-addr { top: 50px; left: 20px; grid-auto-flow: column; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; width: 860px; padding: 18px 22px; border-radius: 22px; }
.st-lock { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #E3F5EA; }
.st-lock .sn-i { --s: 22px; color: #0E7A3E; }
.st-addr b { font: 500 34px/1 var(--sans); letter-spacing: -.035em; }
.st-addr b span { color: var(--f-mute); }
.st-addr .st-chip { height: 30px; padding: 0 14px; font-size: 13.5px; }
.st-steps { top: 176px; left: 20px; width: 380px; gap: 0; padding: 8px 20px; }
.st-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid rgb(17 17 19 / .06); }
.st-step:first-child { border-top: 0; }
.st-step .sn-tick { width: 22px; height: 22px; }
.st .st-step .sn-tick .sn-i { --s: 12px; --sw: 2.4; color: #fff; }
.st-step b { display: block; font-weight: 500; font-size: 14.5px; }
.st-step small { font-size: 12.5px; color: var(--f-mute); }
.st-side { top: 176px; left: 430px; width: 450px; }
/* design: the frame on a canvas, and the live site */
.st-canvas { position: absolute; top: 40px; left: 10px; display: block; width: 470px; height: 560px; overflow: hidden; border-radius: 18px; background: #EDEDF0 radial-gradient(rgb(17 17 19 / .12) 1px, transparent 1.4px) 0 0 / 18px 18px; box-shadow: 0 0 0 8px rgb(255 255 255 / .28), 0 40px 80px -30px rgb(30 6 40 / .5); }
.st-canvas-bar { display: flex; align-items: baseline; gap: 10px; padding: 18px 26px 10px; }
.st-canvas-bar b { font-weight: 500; font-size: 13px; color: #2F6BF5; }
.st-canvas-bar small { font-size: 12px; color: var(--f-mute); }
.st-frame { position: absolute; top: 48px; left: 26px; right: 26px; height: 500px; box-shadow: 0 0 0 2px #2F6BF5; }
.st-frame-in { display: block; height: 100%; overflow: hidden; background: #fff; }
.st-h { position: absolute; width: 10px; height: 10px; background: #fff; box-shadow: 0 0 0 2px #2F6BF5; }
.st-h1 { top: -5px; left: -5px; }
.st-h2 { top: -5px; right: -5px; }
.st-h3 { bottom: -5px; left: -5px; }
.st-h4 { bottom: -5px; right: -5px; }
.st-arrow { position: absolute; top: 290px; left: 498px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .4); }
.st-arrow .sn-i { --s: 20px; color: var(--f-ink); }
.st-live { top: 90px; left: 560px; width: 360px; }
.st-live .st-body { height: 540px; }
.st-design .st-f1 { top: 420px; left: 400px; }

/* ───────── The head beside its picture (SplitHead.astro) ───────── */
/* The words in the column's left part, on white; the plate from beside them to the page's right edge. */
.sp-head { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); align-items: center; gap: 56px; padding: 56px 0 0 calc((100% - var(--f-col)) / 2); }
.sp-text.f-head { justify-items: start; gap: 18px; padding: 0; text-align: left; }
.sp-text.f-head h1 { font-size: clamp(38px, 4.2vw, 58px); }
.sp-text .f-sub { max-width: 440px; }
.sp-text .f-ask { width: 100%; margin-top: 8px; }
.sp-text .f-ask-msg { text-align: left; }
.sp-head > .sn-plate { min-height: 600px; padding: 48px 0 0 48px; border-radius: var(--f-r-plate) 0 0 var(--f-r-plate); }
.sp-head > .sn-plate { display: flex; flex-direction: column; justify-content: flex-end; }
/* The cards that hang over a window's left edge (left: -10px) keep their edge and shadow: the canvas starts in. */
.sp-head .sn-view > .st { margin-left: 34px; }
.sp-head > .sn-plate:has(> [data-kind="flow"]), .sp-head > .sn-plate:has(> [data-kind="phones"]) { justify-content: center; padding-bottom: 48px; }
.sp-head .sn-view { -webkit-mask-image: linear-gradient(180deg, #000 70%, rgb(0 0 0 / .1) 100%), linear-gradient(90deg, #000 91%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 70%, rgb(0 0 0 / .1) 100%), linear-gradient(90deg, #000 91%, transparent 100%); mask-composite: intersect; }
.sp-head .sn-view[data-kind="flow"] { -webkit-mask-image: linear-gradient(90deg, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, #000 91%, transparent 100%); }
.sp-head .sn-view[data-kind] { --vis: 600; }
.sp-head .sn-view[data-kind="flow"] { --vis: 440; }
.sp-note { text-align: right; }
@media (max-width: 960px) {
  .sp-head { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px var(--f-gut) 0; }
  .sp-text.f-head { justify-items: center; text-align: center; }
  .sp-text .f-ask-msg { text-align: center; }
  .sp-head > .sn-plate { min-height: 0; padding: 32px 0 0 24px; border-radius: var(--f-r-plate); }
  .sp-note { text-align: center; }
}

/* ───────── Small screens ───────── */
@media (max-width: 700px) {
  /* The window from its preview on, cut on the right and at the foot (scene.js draws it at 600 wide). */
  .sn-view, .sn-is-right .sn-view { --vis: 600; margin-right: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%), linear-gradient(90deg, #000 72%, transparent 99%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 60%, transparent 98%), linear-gradient(90deg, #000 72%, transparent 99%); mask-composite: intersect; }
  .sn-view[data-kind="editor"] { --vis: 600; }
  /* Each layout slides so its key part is in the 640 that shows: the preview, the phone, the sheet, the result. */
  .sn-view > .st { margin-left: var(--ph, 0px) !important; }
  .sn-view[data-kind="editor"] { --ph: -350px; }
  .sn-view[data-kind="duo"] { --ph: -280px; }
  .sn-view[data-kind="site"], .sn-view[data-kind="chat"] { --ph: -120px; }
  .sn-view[data-kind="board"] { --ph: -250px; }
  .sn-view[data-kind="checkout"] { --ph: -230px; }
  .sn-view[data-kind="flow"] { --ph: -300px; --vis: 380;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent); }
  .sn-view[data-kind="phones"] { --ph: -150px; }
  .sn-view[data-kind="terminal"] { --ph: -200px; }
  .sn-view[data-kind="design"] { --ph: -140px; }
  .sn-plate:has(> [data-kind="flow"]) { padding-bottom: 28px; }
}
@media (max-width: 860px) {
  .uc-grid { grid-template-columns: minmax(0, 1fr); }
  .sn-plate { padding: 36px 20px 0; }
  .sn-is-right { padding: 32px 0 32px 20px; }
  .sn-is-right .sn-view { margin-right: -40%; }
}