/* formats/shared.css - chrome shared by every format demo page (after tokens.css, before format.css).
   Chrome (.demo-bar) stays Inter 500 on near black; the canvas (.f-nav, main, .f-foot, body>dialog) remaps the
   tokens from the --b-* hooks a page sets once on body.fmt-<slug>. Recipes read tokens, never a literal.
   Never alias --ink to --b-ink on body (a cycle). Hook list and recipe notes: README.md section 6. */
:root{--demo-bar-h:56px;--fnav-h:56px;--sec-sm:clamp(56px,7vw,96px)}
body{--b-ground:var(--bg);--b-ground2:var(--bg-2);--b-ink:var(--ink);--b-line:var(--line);--b-accent:var(--accent);--b-accent-tint:var(--accent-tint);--b-on-accent:#fff;--b-display:var(--font-sans);--b-display-weight:500;--b-surface:var(--b-ground);padding-top:var(--demo-bar-h);background:var(--b-ground);color:var(--b-ink)}
html:has(body[data-format]){background:none}
.f-nav,main,.f-foot,body>dialog{--ink:var(--b-ink);--bg:var(--b-ground);--bg-2:var(--b-ground2);--line:var(--b-line);--accent:var(--b-accent);--accent-tint:var(--b-accent-tint)}
.f-brand,main .h1,main .h2,main .tile-t,main .hcard-t,.figcap b,.fig-cap b{font-family:var(--b-display);font-weight:var(--b-display-weight,500)}
.f-nav :focus-visible,main :focus-visible,.f-foot :focus-visible{outline-color:var(--b-focus,var(--accent))}
[id]{scroll-margin-top:calc(var(--demo-bar-h) + var(--fnav-h) + 16px)}
.demo-bar{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--demo-bar-h);background:rgba(13,13,13,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px -12px rgba(0,0,0,.55)}
.demo-in{display:flex;align-items:center;gap:16px;height:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.demo-id{display:flex;align-items:baseline;gap:10px;min-width:0}
.demo-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.56);white-space:nowrap}
.demo-name{font-weight:500;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.demo-bar .rect-ghost{background:rgba(255,255,255,.14);color:#fff}
.demo-bar .rect-ghost:hover{background:rgba(255,255,255,.22)}
.demo-bar :focus-visible{outline-color:#fff}
@media (max-width:720px){
:root{--demo-bar-h:52px}
.demo-k{display:none}
.demo-in{gap:10px;padding:0 16px}
.demo-bar .rect{height:34px;padding:0 12px;font-size:14px}
}
@media (max-width:560px){
:root{--demo-bar-h:86px}
.demo-in{flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:10px 16px}
.demo-name{font-size:14px;white-space:normal}
.demo-acts{margin-left:0}
.demo-acts .rect{flex:1}
}
.f-nav{position:sticky;top:var(--demo-bar-h);z-index:20;height:var(--fnav-h);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.f-nav-in{display:flex;align-items:center;gap:clamp(16px,3vw,32px);height:100%}
.f-brand{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.f-mark{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.f-mark:empty{border-radius:5px;background:var(--ink)}
.f-mark.lg{width:28px;height:28px}
.f-mark svg,.f-mark img{display:block;width:100%;height:100%}
.f-mark svg{color:inherit}
.f-mark svg:not([fill="none"]) :not([fill]){fill:currentColor}
.f-mark svg[fill="none"]{fill:none;stroke:currentColor}
.f-tabs{display:flex;align-items:center;gap:22px;font-size:15px}
.f-tabs a{position:relative;text-decoration:none;color:var(--ink);opacity:.66;padding:4px 0;transition:opacity .2s var(--ease)}
.f-tabs a:hover,.f-tabs a.is-on,.f-tabs a[aria-current]{opacity:1}
.f-tabs a.is-on::after,.f-tabs a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--b-tab-rule,var(--ink))}
.f-nav-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (max-width:820px){
.f-tabs{gap:18px;font-size:14px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;height:100%;padding-right:32px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
/* The row scrolls sideways on phones with its scrollbar hidden; the fade on the right edge is the only sign that there is more, and the end padding lets the last tab scroll fully clear of it. Links keep a 24 px line so they are a real target (WCAG 2.5.8). */
.f-tabs::-webkit-scrollbar{display:none}
.f-tabs a{flex:none;padding:6px 0;min-height:24px;display:inline-flex;align-items:center}
.f-tabs.hide-sm,.f-nav-acts{display:none}
}
main{display:block}
section{padding:var(--sec) 0}
.sec-sm{padding:var(--sec-sm) 0}
.sec-flush{padding-top:0}
.sec-tint{background:var(--bg-2)}
.sec-line{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-tex{position:relative;isolation:isolate}
.sec-tex::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--tex) center/cover no-repeat;opacity:var(--tex-op,.08)}
.sec-h{display:grid;gap:0;margin-bottom:clamp(28px,3.5vw,48px);max-width:var(--maxw)}
.k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;display:block}
.sub{font-size:clamp(16px,1.25vw,19px);color:var(--text-2);line-height:1.5;max-width:48ch;margin:0 0 clamp(20px,2.4vw,28px)}
.page-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--text-3)}
.tag{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.hero-f{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(32px,4vw,56px)}
.center{text-align:center}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.row.center{justify-content:center}
.stack{display:grid;gap:12px}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:900px){.g-3,.g-4,.two-col{grid-template-columns:1fr}.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-4{grid-template-columns:1fr}}
ul.hgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hgrid li{display:grid;gap:6px;align-content:start;padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
.hgrid li:first-child{border-left:0;padding-left:0}
.hgrid b{font-weight:500;font-size:16px;letter-spacing:-.01em}
.hgrid span{font-size:15px;color:var(--text-2);line-height:1.45}
@media (max-width:900px){ul.hgrid{grid-template-columns:1fr}.hgrid li{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-right:0}.hgrid li:first-child{border-top:0}}
.band{position:relative;margin:0;width:100%;background:var(--bg-2);isolation:isolate}
.band>picture,.band>img{position:relative;display:block;width:100%;aspect-ratio:21/9;max-height:var(--band-max,min(60vh,680px));overflow:hidden}
.band>img,.band>picture>img{object-fit:cover}
.band>picture>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.band[data-parallax]>picture>img{top:-8%;bottom:auto;height:116%;will-change:transform}
.container>.band{width:auto;margin-inline:calc(50% - 50vw)}
.figcap{display:grid;gap:4px;max-width:var(--maxw);margin:12px auto 0;padding:0 var(--gutter);font-size:14px;line-height:1.45;color:var(--text-3)}
.figcap b{font-weight:500;color:var(--ink)}
.figcap .k{margin:0 0 6px}
.figcap span{color:var(--text-2)}
.figcap.plate{max-width:none;margin-top:0;padding:14px var(--gutter);background:var(--accent-tint);color:var(--ink)}
.figcap.plate>span{display:block;max-width:var(--maxw);margin:0 auto}
@media (max-width:620px){.band>picture,.band>img{min-height:220px}}
.tile{position:relative;border-radius:var(--r-tile);overflow:hidden;background:var(--bg-2);isolation:isolate;transform:translateZ(0)}
.tile-16x9{aspect-ratio:16/9}
.tile-16x10{aspect-ratio:16/10}
.tile-4x3{aspect-ratio:4/3}
.tile-4x5{aspect-ratio:4/5}
.tile-1x1{aspect-ratio:1/1}
.tile.lift{box-shadow:0 30px 60px -40px color-mix(in srgb,var(--b-ink) 45%,transparent)}
.shader{position:absolute;inset:0;z-index:0}
.shader canvas{width:100%!important;height:100%!important;display:block}
.shader-still{--st-1:#DCE8FF;--st-2:#7FB0FF;--st-3:#2457FF;--st-4:#F2F6FF;background-image:radial-gradient(120% 80% at 20% 20%,var(--st-1),transparent 60%),radial-gradient(80% 80% at 80% 60%,var(--st-2),transparent 60%),linear-gradient(160deg,var(--st-4),var(--st-3))}
[data-palette="dawn"] .shader-still:not([data-palette-fixed]){--st-1:#FFE9D6;--st-2:#FFB07A;--st-3:#FF7A3D;--st-4:#FFF6EE}
[data-palette="ember"] .shader-still:not([data-palette-fixed]){--st-1:#FF6A2C;--st-2:#FF9A5A;--st-3:#FFD3B0;--st-4:#FFF1E6}
[data-palette="mint"] .shader-still:not([data-palette-fixed]){--st-1:#DFFFEF;--st-2:#5FE3A8;--st-3:#0FA36B;--st-4:#F2FFF8}
[data-palette="lilac"] .shader-still:not([data-palette-fixed]){--st-1:#EEE6FF;--st-2:#B79CFF;--st-3:#6E4BFF;--st-4:#F7F3FF}
[data-palette="dusk"] .shader-still:not([data-palette-fixed]){--st-1:#0B1030;--st-2:#2457FF;--st-3:#7FB0FF;--st-4:#0B1030}
.tile>picture,.tile>img,.tile>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.tile-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--b-scrim-grad,linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55)))}
.tile-scrim.scrim-brand{background:color-mix(in srgb,var(--b-scrim-color,var(--b-accent)) var(--b-scrim-op,72%),transparent)}
.tile-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--b-wash-grad,linear-gradient(100deg,color-mix(in srgb,var(--bg) 97%,transparent) 0 46%,color-mix(in srgb,var(--bg) 72%,transparent) 70%,color-mix(in srgb,var(--bg) 34%,transparent) 100%))}
.tile-inset{position:absolute;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:2;width:clamp(120px,28%,240px);aspect-ratio:4/5;border-radius:calc(var(--r-tile) - 4px);overflow:hidden;box-shadow:0 0 0 4px var(--bg)}
.tile-inset>picture,.tile-inset>img,.tile-inset>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tile-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.4vw,32px);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 90%,transparent) 55%)}
.tile-copy.on-dark{background-color:var(--b-scrim-solid,#0D0D12);background-image:linear-gradient(180deg,var(--b-scrim,rgba(10,10,20,.78)),var(--b-scrim,rgba(10,10,20,.78)));color:var(--b-scrim-ink,#fff)}
.tile-copy.on-dark::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(40px,14%,120px);pointer-events:none;background:linear-gradient(180deg,transparent,var(--b-scrim,rgba(10,10,20,.78))),linear-gradient(180deg,transparent,var(--b-scrim-solid,#0D0D12))}
.tile-t{font-size:clamp(20px,1.9vw,26px);letter-spacing:-.02em;line-height:1.2;max-width:22ch}
.tile-s{font-size:15px;color:var(--text-2);margin-top:6px;max-width:40ch}
.tile-copy.on-dark .tile-s{color:var(--b-scrim-ink-2,rgba(255,255,255,.78))}
.tile-copy.on-dark .tile-k{color:var(--b-scrim-ink-3,rgba(255,255,255,.72))}
.tile-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;display:flex;justify-content:space-between;gap:12px}
.tile.tile-flow{aspect-ratio:auto;min-height:0;display:block;padding:clamp(16px,2.2vw,28px)}
.tile-flow>*:not(.shader):not(picture):not(img):not(.tile-scrim):not(.tile-wash){position:relative;z-index:2}
.tile-flow .chat{position:relative;left:auto;bottom:auto;width:auto;margin:0;box-shadow:none}
.ex{display:inline-block;font-size:11px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--text-3);background:var(--b-surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px;vertical-align:middle}
.on-dark .ex,.ground-dark .ex,.ground-accent .ex{background:transparent;border-color:currentColor;color:inherit;opacity:.8}
.pad{padding:clamp(16px,2vw,24px)}
.hcard{background:var(--b-surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(16px,2vw,24px);display:grid;gap:6px;align-content:start}
a.hcard{text-decoration:none;color:inherit;transition:border-color .2s var(--ease),transform .3s var(--ease)}
a.hcard:hover{border-color:var(--line-control)}
.hcard-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.hcard-t{font-size:17px;letter-spacing:-.01em;line-height:1.25}
.hcard-p{font-size:15px;color:var(--text-2);line-height:1.45}
.hcard-m{font-size:13px;color:var(--text-3)}
.hcard img{border-radius:12px}
.hcard.hcard-fig{--hp:clamp(16px,2vw,24px);padding:0;gap:0;overflow:hidden}
.hcard-fig>picture{display:block;background:var(--bg-3);border-bottom:1px solid var(--line)}
.hcard-fig>picture>img{display:block;width:100%;height:auto;border-radius:0;object-fit:cover}
:where(.hcard-fig>picture>img){aspect-ratio:4/3}
.hcard-fig>.hcard-k{padding:var(--hp) var(--hp) 0}
.hcard-fig>.hcard-t{padding:6px var(--hp) 0}
.hcard-fig>.hcard-p{padding:8px var(--hp) var(--hp)}
.fig{margin:0;display:grid;gap:12px}
.fig picture{display:block}
.fig img,.fig picture>img{display:block;width:100%;height:auto;border-radius:var(--r-tile);object-fit:cover;background:var(--bg-2)}
.fig-4x3{aspect-ratio:4/3}
.fig-16x10{aspect-ratio:16/10}
.fig-1x1{aspect-ratio:1/1}
.fig-cap{padding-top:12px;border-top:1px solid var(--line);display:grid;gap:4px}
.fig-cap b{font-weight:500;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em}
.fig-cap span{font-size:15px;color:var(--text-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rows{list-style:none;margin:0;padding:0;display:grid}
.rows li{display:flex;gap:16px;align-items:baseline;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows li b{font-weight:500}
.rows li>.tag{flex:none;min-width:5ch}
.rows li>.chip-s{margin-left:auto;flex:none}
.rows span{color:var(--text-2)}
.rows.facts li{align-items:start;gap:20px}
.rows.facts b{flex:none}
.rows.facts span{text-align:right;max-width:24ch}
.rows>details{border-top:1px solid var(--line)}
.rows>details:last-child{border-bottom:1px solid var(--line)}
.rows>details>summary{display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-size:15px;cursor:pointer;list-style:none}
.rows>details>summary::-webkit-details-marker{display:none}
.rows>details>summary::after{content:"+";flex:none;color:var(--text-3)}
.rows>details[open]>summary::after{content:"-"}
.rows>details>p{margin:0;padding:0 0 14px;font-size:15px;line-height:1.45;color:var(--text-2);max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;cursor:pointer;margin:0}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span,.chip-s{display:inline-block;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;font-size:15px;line-height:1.4;color:var(--ink);background:var(--bg-2);user-select:none;transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.chip:hover span{border-color:var(--line-control)}
.chip input:checked + span{background:var(--b-chip-on,var(--b-cta,var(--ink)));color:var(--b-on-chip-on,var(--b-on-cta,var(--bg)));border-color:var(--b-chip-on,var(--b-cta,var(--ink)))}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.chip-s{padding:4px 10px;font-size:13px;background:var(--b-surface)}
.chip-s.tint{background:var(--accent-tint);border-color:transparent;color:var(--ink)}
.pill-ink{background:var(--b-cta,var(--ink));color:var(--b-on-cta,var(--bg))}
.pill-ink:hover{background:color-mix(in srgb,var(--b-cta,var(--ink)) 88%,var(--bg))}
main .pill-ghost,.f-nav .pill-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
main .pill-ghost:hover,.f-nav .pill-ghost:hover{background:var(--bg-2);border-color:var(--line-control)}
.field{display:grid;gap:6px;margin:0}
.field label{font-size:14px;color:var(--text-2)}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.field textarea{resize:vertical;min-height:112px}
.field ::placeholder{color:var(--text-3)}
.field input:hover,.field textarea:hover{border-color:var(--line-control)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.form-note{margin:0;font-size:14px;color:var(--text-3)}
.form-note.is-done{color:var(--ink)}
.chat{position:relative;width:min(420px,100%);background:color-mix(in srgb,var(--b-surface) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:16px 16px 14px;box-shadow:0 20px 60px -30px rgba(10,10,20,.35)}
/* Scoped away from .tile-flow, whose relative chat (above) this rule used to defeat at equal specificity, which floated the chat card over the contact facts on the multi-page demo at desktop widths. */
.tile:not(.tile-flow) .chat{position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(16px,4vw,48px);z-index:2;width:min(420px,calc(100% - 32px))}
.chat-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:12px}
.chat-head .dot{width:8px;height:8px;border-radius:50%;background:var(--b-dot,var(--b-ok,#1DBF73));box-shadow:0 0 0 3px var(--b-dot-ring,color-mix(in srgb,var(--b-dot,var(--b-ok,#1DBF73)) 18%,transparent));flex:none}
.chat-time{margin-left:auto;font-size:12px;color:var(--text-3)}
.chat-log{display:flex;flex-direction:column;gap:8px;min-height:132px}
.bub{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bub.is-in{opacity:1;transform:none}
.bub.in{align-self:flex-start;background:var(--b-surface);border:1px solid var(--line);border-bottom-left-radius:6px}
.bub.out{align-self:flex-end;background:var(--ink);color:var(--bg);border-bottom-right-radius:6px}
.chat-foot{height:22px;margin-top:8px;display:flex;align-items:center}
.typing{display:inline-flex;gap:4px;padding:0 6px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:f-tp 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes f-tp{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.booked{font-size:13px;color:var(--b-ok-ink,#0B7A4B);background:var(--b-ok-tint,#E6F7EF);border-radius:var(--r-pill);padding:3px 10px;font-weight:500}
.chat.on-dark{--text-2:rgba(255,255,255,.7);--text-3:rgba(255,255,255,.6);--line:rgba(255,255,255,.14);--b-surface:rgba(255,255,255,.08);--ink:#fff;background:var(--b-glass,var(--glass-ink));border-color:var(--b-glass-line,var(--glass-line-ink));color:var(--ink);box-shadow:none}
.chat.on-dark .bub.in{background:var(--b-surface);border-color:var(--line);color:var(--ink)}
.chat.on-dark .bub.out{background:var(--b-accent);color:var(--b-on-accent)}
/* live chat (data-chat="live", formats/shared.js LiveChat): the disclosure line, an owner reply (tagged and
   timed, same position as .bub.out), the held note and the composer. Additive to the scripted .chat above;
   a card without data-chat="live" never sees these classes. */
.chat-disclosure{margin:0 0 10px;font-size:12px;line-height:1.4;color:var(--text-3)}
.bub.owner{align-self:flex-end;background:var(--b-accent);color:var(--b-on-accent);border-bottom-right-radius:6px}
.bub-tag{display:block;font-size:11px;font-weight:500}
.bub-time{margin-left:6px;font-size:11px}
.chat-held{margin:10px 0 0;padding:8px 10px;border-radius:12px;background:var(--b-surface);border:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--text-2)}
.chat-compose{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.chat-handover{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.chat-handover input{flex:1 1 140px}
.chat-compose input[type="text"]{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-control);background:var(--b-surface);color:var(--ink);font:inherit;font-size:14px}
.chat-compose input[type="text"]::placeholder{color:var(--text-3)}
.chat-compose input[type="text"]:focus-visible{outline:2px solid var(--b-accent,var(--accent));outline-offset:2px}
.chat-compose .pill{height:36px;padding:0 16px;font-size:14px;flex:none}
.chat-compose .chat-skip{flex:none;background:none;border:0;padding:0 2px;font:inherit;font-size:13px;color:var(--text-2);text-decoration:underline;cursor:pointer}
.chat-compose[aria-busy="true"] input,.chat-compose[aria-busy="true"] .pill,.chat-compose[aria-busy="true"] .chat-skip{opacity:.6;pointer-events:none}
@media (max-width:820px){
.tile .chat{position:relative;left:auto;bottom:auto;width:auto;margin:16px}
.tile:has(.chat):not(.tile-flow){aspect-ratio:auto;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end}
}
.ground-dark{--bg:var(--b-dark,#101418);--bg-2:rgba(255,255,255,.06);--bg-3:rgba(255,255,255,.1);--ink:var(--b-dark-ink,#E9ECEF);--text-2:var(--b-dark-text2,#A9B1BA);--text-3:var(--b-dark-text3,#A9B1BA);--line:var(--b-dark-line,rgba(255,255,255,.14));--line-control:rgba(255,255,255,.32);--accent:var(--b-dark-accent,var(--ink));--b-surface:var(--bg-2);background:var(--bg);color:var(--ink)}
.ground-dark .pill-ink{--b-cta:var(--ink);--b-on-cta:var(--bg)}
.ground-dark .pill-ghost,.ground-dark .rect-ghost{color:var(--ink);border-color:var(--line-control)}
.ground-light{--bg:var(--b-light,#fff);--bg-2:var(--b-light2,rgba(0,0,0,.05));--bg-3:rgba(0,0,0,.08);--ink:var(--b-light-ink,#101418);--text-2:var(--b-light-text2,#5A626B);--text-3:var(--b-light-text3,#5A626B);--line:rgba(0,0,0,.12);--line-control:rgba(0,0,0,.36);--accent:var(--b-light-accent,var(--ink));--accent-tint:var(--b-light-accent-tint,var(--bg-2));--b-surface:var(--bg);background:var(--bg);color:var(--ink)}
.ground-light .ex{background:var(--b-surface);border-color:var(--line);color:var(--text-3);opacity:1}
.ground-accent{--bg:var(--b-accent);--bg-2:color-mix(in srgb,var(--b-on-accent) 8%,transparent);--bg-3:color-mix(in srgb,var(--b-on-accent) 14%,transparent);--ink:var(--b-on-accent);--text-2:var(--b-on-accent-dim,color-mix(in srgb,var(--b-on-accent) 80%,var(--b-accent)));--text-3:var(--text-2);--line:color-mix(in srgb,var(--b-on-accent) 22%,transparent);--line-control:color-mix(in srgb,var(--b-on-accent) 40%,transparent);--accent:var(--b-on-accent);--b-surface:var(--bg-2);background:var(--bg);color:var(--ink)}
.f-foot{padding:48px 0 72px;background:var(--bg);border-top:1px solid var(--line)}
.f-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;color:var(--text-3);font-size:14px}
.f-foot-in p{max-width:52ch;margin:0}
.f-foot a{color:var(--text-2)}
.f-foot .f-brand{margin-right:auto}
.f-foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.f-foot-nav a{text-decoration:none;color:var(--text-2)}
.f-foot-nav a:hover{color:var(--ink)}
/* The entrance fade rides on `filter`, not `opacity`, on purpose. A stylesheet `opacity` reads as a
   settled design decision: qa/app/a11y.cjs folds the opacity chain into the painted colour and skips
   any node under alpha .05, so parking every below-the-fold node at opacity 0 took all of that copy
   out of the contrast pass (pass 1 never scrolls). `filter:opacity()` paints the same fade, leaves
   the computed colour and opacity intact, and keeps the copy measurable. Settled state is
   `filter:none` so no containing block or backdrop group survives the tween. */
.fmt-reveal [data-reveal]{filter:opacity(0);transform:translateY(16px);transition:filter .6s var(--ease),transform .6s var(--ease)}
.fmt-reveal [data-reveal].is-in{filter:none;transform:none}
[data-flip] [data-reveal],[data-flip][data-reveal]{transition-property:filter}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.typing i{animation:none}
.bub,a.hcard,.f-tabs a,.tile>picture>img,.fig img{transition:none}
.fmt-reveal [data-reveal]{filter:none;transform:none;transition:none}
.band[data-parallax]>picture>img{top:0;height:100%;will-change:auto}
}