/* Designme shared core: tokens for Blueprint (default) and Soft (data-style="soft" on <html> or on any element around the components), light and dark (<html data-theme="dark">) */
:where([data-c]) [hidden]{display:none!important}
/* hold(): an end state centred in the height its component had */
.held{display:flex;flex-direction:column;justify-content:center}
/* the glide starts fast in both styles, so the field is on its way up before an opening list reaches the stage's edge */
.glide{transform:translateY(var(--gy,0px));transition:transform var(--t) cubic-bezier(.22,1,.36,1)}
/* and a list that opens under a gliding field fades in a beat after it starts to move */
.glide>.csx-pop.open{transition-delay:.08s}
.glide>.msc-pop.open{transition-delay:.08s,.08s,.08s,0s}
/* Soft 2: one quiet surface per object, grey type for finished work, motion only on what is happening now */
:root,[data-style="soft"]{
  --motion:soft;
  --page:#f7f7f7; --stage:#fafafa; --surface:#ffffff; --raised:#ffffff;
  --fg:#171717; --fg2:#525252; --muted:#6a6a6a; --faint:#c4c4c4; --rail:#d4d4d4; --line:#e8e8e8; --field-line:#d4d4d4; --line-strong:#858585; --field-line-strong:#b3b3b3;
  --chip:#f3f3f3; --hover:#ebebeb; --press:#e3e3e3; --wash:#f9f9f9; --row:#fafafa;
  --soft:#ececec; --soft-h:#e3e3e3; --soft-ring:inset 0 0 0 1px rgba(0,0,0,.03); --dis:#a6a6a6;
  /* disabled: text and icons take --dis; a control with a fill swaps it for --dis-fill (Blueprint hatches it) */
  --dis-fill:var(--soft); --dis-hatch:none;
  --shadow-lift:0 0 0 1px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.04),0 16px 32px -10px rgba(0,0,0,.16);
  /* the accent has three roles: --accent fills (with --on-accent on top, 4.5:1), --accent-fg is text and icons in the accent
     (4.5:1 on the surface, and on the chips and tints it sits on) and --accent-mark is lines, rings and chart marks (3:1). A
     light accent like lime keeps its fills and gets a darker mark and ink-coloured text on a light page */
  --accent:#116ff8; --on-accent:#ffffff; --accent-fg:#0f5fd5; --accent-mark:#116ff8; --sel:color-mix(in srgb,var(--accent) 6%,transparent);
  /* fields (text fields, textareas, search fields, dropdown triggers) have a dimmed grey edge, --field-line, that steps up
     a little, to --field-line-strong, while they have the focus. The keyboard's focus ring on every other control is 2px of
     a stronger grey (--line-strong, as --focus), as an outline offset 2px, or as a 2px box-shadow ring where an outline would be clipped. Never
     the accent and never black, and only from the keyboard (:focus-visible), so a click or a tap never shows one */
  --focus:var(--line-strong);
  --ink:#1b1b1b; --on-ink:#ffffff;
  --ok:#137739; --ok-bg:#e8f6ee; --warn:#a94e09; --warn-bg:#fdf3df; --bad:#bf3434; --bad-bg:#fdecec;
  --merge:#7c4cd4; --merge-bg:#f2ecfd; --add:#187633; --del:#c7212c;
  --pb:#1460d0; --pb-bg:#eaf2ff; --pl:#6b47d6; --pl-bg:#f2edff; --pm:#10754a; --pm-bg:#e7f8f0; --pp:#994c0b; --pp-bg:#fff2e6;
  --pr:#bf314d; --pr-bg:#ffeef1; --py:#856404; --py-bg:#fffae3; --pk:#b92e75; --pk-bg:#fff0f7; --pt:#0e747d; --pt-bg:#e6f9fa;
  /* avatars have colours of their own, the same in every style and theme: a bright fill and the initials' ink on it (4.5:1,
     APCA Lc 60). Blue, violet, red and pink are deep enough for white; green, teal, yellow and orange are too light for white
     and take a dark ink of their own hue. An avatar given one of these, var(--av-l), takes its ink, var(--av-l-ink), on its own */
  --av-b:#126fe6; --av-b-ink:#ffffff; --av-l:#834ff5; --av-l-ink:#ffffff; --av-r:#d73341; --av-r-ink:#ffffff; --av-k:#cf3288; --av-k-ink:#ffffff;
  --av-m:#27cf86; --av-m-ink:#052616; --av-t:#28c9d8; --av-t-ink:#042428; --av-y:#e9ac1a; --av-y-ink:#2a1d03; --av-p:#fda154; --av-p-ink:#301804;
  --ts:#2c6cb2; --react:#0a738b;
  /* every raised surface carries its own hairline edge, so nothing needs a separate ring */
  --shadow:0 0 0 1px rgba(0,0,0,.035),0 1px 2px rgba(0,0,0,.04),0 8px 16px -8px rgba(0,0,0,.08);
  --shadow-pop:0 0 0 1px rgba(0,0,0,.04),0 1px 1px rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.04),0 16px 24px -8px rgba(0,0,0,.06);
  --shadow-toast:0 0 0 1px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.08);
  --hl:#fdeb9a; --hl-ok:#d3f1df;
  --r-card:16px;
  /* spacing runs on a 4px scale, and corners on a small set of radii; values off the scale are still written out */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --r-xs:4px; --r-lg:20px; --r-in:12px; --r-sm:8px; --r-pill:999px;
  /* fields and tags have slightly rounded corners, never pills: --r-field for one-line fields and dropdown triggers, --r-box
     for boxes you write several lines in, --r-tag for tags. Where the browser smooths corners (corner-shape: squircle) a
     corner looks smaller, so each takes the larger -sq radius there to look the same size. Fields share one height and,
     where a component is a single field, one width */
  --r-field:var(--r-sm); --r-field-sq:14px; --r-box:var(--r-in); --r-box-sq:20px; --r-tag:6px; --r-tag-sq:10px;
  --field-h:40px; --field-w:320px;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.22s; --t:.45s; --t-slow:.7s;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"]{
  --page:#111111; --stage:#1c1c1c; --surface:#262626; --raised:#2c2c2c;
  --fg:#f2f2f2; --fg2:#c9c9c9; --muted:#c0c0c0; --faint:#555555; --rail:#414141; --line:#333333; --field-line:#424242; --line-strong:#808080; --field-line-strong:#808080;
  --chip:#303030; --hover:#373737; --press:#3f3f3f; --wash:#2c2c2c; --row:color-mix(in srgb,var(--fg) 5.5%,transparent);
  --soft:#323232; --soft-h:#3a3a3a; --soft-ring:inset 0 0 0 1px rgba(255,255,255,.035); --dis:#737373;
  --shadow-lift:0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.3),0 16px 32px -10px rgba(0,0,0,.6);
  --accent:#116ff8; --on-accent:#ffffff; --accent-fg:#9dc4ff; --accent-mark:#3d8bff; --sel:color-mix(in srgb,var(--accent) 9%,transparent);
  --ink:#f2f2f2; --on-ink:#161616;
  --ok:#63d998; --ok-bg:rgba(60,207,126,.13); --warn:#f1bb4e; --warn-bg:rgba(240,180,60,.13); --bad:#ffabab; --bad-bg:rgba(255,107,107,.13);
  --merge:#cbb8ff; --merge-bg:rgba(169,139,255,.15); --add:#63d998; --del:#ffa9ae;
  --pb:#a0c5ff; --pb-bg:rgba(90,150,255,.18); --pl:#cbb9ff; --pl-bg:rgba(155,125,255,.18); --pm:#6ad9a7; --pm-bg:rgba(70,205,150,.16); --pp:#ffb57a; --pp-bg:rgba(255,155,80,.17);
  --pr:#ffadbb; --pr-bg:rgba(255,105,130,.17); --py:#f0cd5a; --py-bg:rgba(240,200,60,.15); --pk:#ffa8d4; --pk-bg:rgba(255,100,175,.16); --pt:#5fd8df; --pt-bg:rgba(60,200,210,.16);
  --ts:#8fbcff; --react:#3dd0ee;
  --shadow:0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.3),0 8px 16px -8px rgba(0,0,0,.4); --shadow-pop:0 0 0 1px rgba(255,255,255,.05),0 4px 8px -4px rgba(0,0,0,.4),0 16px 32px -8px rgba(0,0,0,.5); --shadow-toast:0 0 0 1px rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.4); --hl:rgba(240,200,60,.3); --hl-ok:rgba(60,207,126,.24); color-scheme:dark}}
:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{
  --page:#111111; --stage:#1c1c1c; --surface:#262626; --raised:#2c2c2c;
  --fg:#f2f2f2; --fg2:#c9c9c9; --muted:#c0c0c0; --faint:#555555; --rail:#414141; --line:#333333; --field-line:#424242; --line-strong:#808080; --field-line-strong:#808080;
  --chip:#303030; --hover:#373737; --press:#3f3f3f; --wash:#2c2c2c; --row:color-mix(in srgb,var(--fg) 5.5%,transparent);
  --soft:#323232; --soft-h:#3a3a3a; --soft-ring:inset 0 0 0 1px rgba(255,255,255,.035); --dis:#737373;
  --shadow-lift:0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.3),0 16px 32px -10px rgba(0,0,0,.6);
  --accent:#116ff8; --on-accent:#ffffff; --accent-fg:#9dc4ff; --accent-mark:#3d8bff; --sel:color-mix(in srgb,var(--accent) 9%,transparent);
  --ink:#f2f2f2; --on-ink:#161616;
  --ok:#63d998; --ok-bg:rgba(60,207,126,.13); --warn:#f1bb4e; --warn-bg:rgba(240,180,60,.13); --bad:#ffabab; --bad-bg:rgba(255,107,107,.13);
  --merge:#cbb8ff; --merge-bg:rgba(169,139,255,.15); --add:#63d998; --del:#ffa9ae;
  --pb:#a0c5ff; --pb-bg:rgba(90,150,255,.18); --pl:#cbb9ff; --pl-bg:rgba(155,125,255,.18); --pm:#6ad9a7; --pm-bg:rgba(70,205,150,.16); --pp:#ffb57a; --pp-bg:rgba(255,155,80,.17);
  --pr:#ffadbb; --pr-bg:rgba(255,105,130,.17); --py:#f0cd5a; --py-bg:rgba(240,200,60,.15); --pk:#ffa8d4; --pk-bg:rgba(255,100,175,.16); --pt:#5fd8df; --pt-bg:rgba(60,200,210,.16);
  --ts:#8fbcff; --react:#3dd0ee;
  --shadow:0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.3),0 8px 16px -8px rgba(0,0,0,.4); --shadow-pop:0 0 0 1px rgba(255,255,255,.05),0 4px 8px -4px rgba(0,0,0,.4),0 16px 32px -8px rgba(0,0,0,.5); --shadow-toast:0 0 0 1px rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.4); --hl:rgba(240,200,60,.3); --hl-ok:rgba(60,207,126,.24); color-scheme:dark}

/* the accent's hover fill (--accent-2) and tint (--accent-bg) are worked out from the accent, in every style and theme, so a
   picked accent brings its own. Hovering a filled button moves its fill away from its text colour: darker under white text,
   lighter under dark text, so the label keeps its contrast in every style, theme and accent */
:root,[data-style="soft"]{--accent-2:color-mix(in srgb,var(--accent) 86%,#000);--accent-bg:color-mix(in srgb,var(--accent) 9%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"]{--accent-2:color-mix(in srgb,var(--accent) 84%,#fff);--accent-bg:color-mix(in srgb,var(--accent) 13%,transparent)}}
:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{--accent-2:color-mix(in srgb,var(--accent) 84%,#fff);--accent-bg:color-mix(in srgb,var(--accent) 13%,transparent)}
@supports (color:rgb(from red r g b)){:root,[data-style="soft"],:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"],:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{--accent-2:color-mix(in srgb,var(--accent) 86%,rgb(from var(--on-accent) calc(255 - r) calc(255 - g) calc(255 - b)))}}
@supports not (color:rgb(from red r g b)){:root,[data-style="soft"],:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"],:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{--accent-2:color-mix(in srgb,var(--accent) 86%,#000)}:root:not([data-style="soft"]),:root:not([data-style="soft"]):not([data-theme="light"]),:root:not([data-style="soft"])[data-theme="dark"]{--accent-2:color-mix(in srgb,var(--accent) 86%,#fff)}}
/* picked things (chips, options, cards in a picker) are white tiles with a dimmed grey edge, and the picked one's edge
   is a light step stronger, never a dark or black outline */
:root,[data-style="soft"]{--pick-line:var(--rail);--pick-on:var(--faint)}

/* ---------- page shell ---------- */
:where([data-c]) *{box-sizing:border-box}
:where([data-c]) button,:where([data-c]) input,:where([data-c]) textarea,:where([data-c]) select{font:inherit;color:inherit}
:where([data-c]) button{background:none;border:0;padding:0;cursor:pointer}
/* one weight for emphasis: medium, never bold */
:where([data-c]) b,:where([data-c]) strong{font-weight:500}
:where([data-c]) :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
/* a field shows the focus with its own edge, which steps up to --field-line-strong, so it never takes the ring as well */
:where([data-c]) :focus-visible:is(input:not([type="checkbox"],[type="radio"],[type="range"],[type="file"],[type="button"],[type="submit"],[type="reset"]),textarea,select,[contenteditable]:not([contenteditable="false"])){outline:0}
.stage-in{width:100%;max-width:440px;min-width:0;position:relative;container-type:inline-size}
.card.wide .stage-in{max-width:720px}

/* ---------- icons ---------- */
.i{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i.s{width:14px;height:14px}.i.xs{width:12px;height:12px}.i.l{width:18px;height:18px}
.brand{width:16px;height:16px;display:block;flex:none}
.flag{width:20px;height:15px;border-radius:3px;object-fit:cover;display:block;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* ---------- primitives ---------- */
.mono{font-family:var(--mono)}
.sp{flex:1}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.fg2{color:var(--fg2)}
.panel{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);position:relative}
.ib{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;color:var(--fg2);transition:background var(--t-fast),color var(--t-fast),transform .15s}
@media (hover:hover) and (pointer:fine){.ib:hover{background:var(--row);color:var(--fg)}}
.ib:active{transform:scale(.94)}
.ib.fill{background:var(--soft);box-shadow:var(--soft-ring)}
@media (hover:hover) and (pointer:fine){.ib.fill:hover{background:var(--soft-h)}}
.ib.on{background:var(--accent-bg);color:var(--accent-fg,var(--accent))}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--s-3);border-radius:var(--r-pill);font-size:13px;color:var(--fg2);background:var(--chip);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
@media (hover:hover) and (pointer:fine){.chip:hover{background:var(--hover);color:var(--fg)}}
.chip.on{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pick-on) 50%,transparent)}
.chip.sm{height:24px;padding:0 9px;font-size:12px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:500;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast),opacity var(--t-fast),transform .15s}
.pill:active{transform:scale(.97)}
/* the primary action is the accent, with --on-accent on it, so it follows the accent and stays readable in any colour */
.pill.primary{background:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){.pill.primary:hover{background:var(--accent-2)}}
.pill.accent{background:var(--accent);color:var(--on-accent)}
.pill.accent.hl{background:var(--accent-2)}
@media (hover:hover) and (pointer:fine){.pill.accent:hover{background:var(--accent-2)}}
.pill.soft{background:var(--soft);color:var(--fg);box-shadow:var(--soft-ring)}
@media (hover:hover) and (pointer:fine){.pill.soft:hover{background:var(--soft-h)}}
.pill.line{background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent);color:var(--fg)}
.pill.ghost{color:var(--fg2)}@media (hover:hover) and (pointer:fine){.pill.ghost:hover{background:var(--row);color:var(--fg)}}
/* one disabled look for every control: nothing fades; its text and icons take --dis, a control with a fill swaps the fill
   for --dis-fill with its quiet edge (hatched in Blueprint), one without keeps no fill, and the pointer says not-allowed */
.pill[disabled]{opacity:1;color:var(--dis);background:none;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){.pill[disabled]:hover{opacity:1;color:var(--dis);background:none;cursor:not-allowed;transform:none}}
:where([data-c]) button:disabled{cursor:not-allowed}
.pill:is(.accent,.primary,.soft,.line)[disabled]{background:var(--dis-hatch),var(--dis-fill);color:var(--dis);box-shadow:var(--soft-ring)}
@media (hover:hover) and (pointer:fine){.pill:is(.accent,.primary,.soft,.line)[disabled]:hover{background:var(--dis-hatch),var(--dis-fill);color:var(--dis);box-shadow:var(--soft-ring)}}
.pill[disabled] .kbd{background:var(--chip);color:inherit}
.pill.sm{height:28px;padding:0 11px;font-size:12.5px}
.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:var(--r-tag);font-size:11.5px;font-weight:500;white-space:nowrap;background:var(--chip);color:var(--fg2)}
.tag.b{background:var(--pb-bg);color:var(--pb)}.tag.l{background:var(--pl-bg);color:var(--pl)}.tag.m{background:var(--pm-bg);color:var(--pm)}.tag.p{background:var(--pp-bg);color:var(--pp)}
.tag.r{background:var(--pr-bg);color:var(--pr)}.tag.y{background:var(--py-bg);color:var(--py)}.tag.k{background:var(--pk-bg);color:var(--pk)}.tag.t{background:var(--pt-bg);color:var(--pt)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.warn{background:var(--warn-bg);color:var(--warn)}.tag.bad{background:var(--bad-bg);color:var(--bad)}
@supports (corner-shape:squircle){.tag{corner-shape:squircle;border-radius:var(--r-tag-sq)}}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;display:inline-block}
.fchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 var(--s-2);border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent);font-size:12.5px;color:var(--fg);white-space:nowrap}
.fchip.lnk{cursor:pointer;transition:background var(--t-fast),box-shadow var(--t-fast)}
@media (hover:hover) and (pointer:fine){.fchip.lnk:hover{background:var(--row);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent)}}
.ft{font-family:var(--sans);font-size:9.5px;font-weight:500;color:var(--ts);letter-spacing:.02em}
.ft.re{color:var(--react)}.ft.fg{color:var(--pl)}.ft.pdf{color:var(--pr)}.ft.csv{color:var(--pm)}
.kbd{font-family:inherit;font-size:11px;padding:1px 5px;border-radius:5px;background:var(--chip);color:var(--fg2)}
/* on a row that is hovered, highlighted or picked, the row turns grey, so its shortcut chips turn white to stay visible */
@media (hover:hover) and (pointer:fine){:is(.mi,.cpl-i,[role="option"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"]):is(:hover,.hl,.on,[aria-selected="true"]) .kbd{background:var(--surface)}}
@media (hover:hover) and (pointer:fine){.pill.ghost:hover .kbd{background:var(--surface)}}
.pill .kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 var(--s-1);margin-right:-6px}
/* a key hint on a filled button sits on a slightly darker well of the fill, so white text keeps its contrast */
.pill.primary .kbd,.pill.accent .kbd{background:color-mix(in srgb,var(--accent) 80%,#000);color:inherit}
code.c{font-family:var(--mono);font-size:12.5px;background:var(--chip);padding:1px 5px;border-radius:5px}
.av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:500;color:#fff;flex:none}
.hr{height:1px;background:var(--line);border:0;margin:0}
/* an off switch and an empty box are drawn in a grey that holds 3:1 against the surface; an accent fill keeps a hairline of the
   accent's mark, so a light accent like lime still has an edge */
.toggle{width:30px;height:18px;border-radius:9px;background:color-mix(in srgb,var(--muted) 80%,var(--surface));position:relative;flex:none;transition:background var(--t-fast)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform var(--t) var(--ease)}
.toggle[aria-checked="true"]{background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-mark,var(--accent))}
.toggle[aria-checked="true"]::after{transform:translateX(12px);background:var(--on-accent)}
/* on a touch screen every control gets a tap area of at least 40px square, centred on it, without changing how it looks or
   where anything sits: a clear ::before (or ::after, where a component draws with its ::before) over and around it. Where
   two controls sit closer than that, the core script (fitHits) shrinks both areas evenly, so each tap still lands on the
   control nearest to it. Everything here weighs nothing (:where), so a component's own position or pseudo-element wins.
   The build checks that every selector drawing with a ::before or ::after is in the lists below */
@media (pointer:coarse){
  :where([data-c]) :where(button,a[href],summary,[role="button"],[role="switch"],[role="checkbox"],[role="radio"],[role="tab"],[role="option"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],[role="slider"],label:has(input[type="checkbox"],input[type="radio"])){position:relative;--hit-w:40px;--hit-h:40px}
  :where([data-c]) :where(button,a[href],summary,[role="button"],[role="switch"],[role="checkbox"],[role="radio"],[role="tab"],[role="option"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],[role="slider"],label:has(input[type="checkbox"],input[type="radio"])):not(:where(.radar,.hand,.rtr-li:not(:last-child),.atr-kids,.bws-nav b,.rc-cap,.erx-row:not(:last-child),.rte-body.empty,.rte-hint,.afx-desk,.dtx-sl,.crx-l.add .c,.crx-l.del .c,.crx-l.ctx .c,.crx-hk.kept .crx-l.add .c,.crx-hk.undone .crx-l.del .c,.ahx-bot,.ecx-now,.ssi-or,.cmx-th>.cmx-c:first-child:has(+ .cmx-rp),.cmx-rp,.aln-ct,.aln-rows>*,.aln-av,.aln-det div,.aln-pk,.trv-r[data-k="agent"] .trv-b i,.tk-st:not(:last-child),.tmx-blk,.atx-ic))::before,:where([data-c]) :where(button,a[href],summary,[role="button"],[role="switch"],[role="checkbox"],[role="radio"],[role="tab"],[role="option"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],[role="slider"],label:has(input[type="checkbox"],input[type="radio"])):where(.radar,.hand,.rtr-li:not(:last-child),.atr-kids,.bws-nav b,.rc-cap,.erx-row:not(:last-child),.rte-body.empty,.rte-hint,.afx-desk,.dtx-sl,.crx-l.add .c,.crx-l.del .c,.crx-l.ctx .c,.crx-hk.kept .crx-l.add .c,.crx-hk.undone .crx-l.del .c,.ahx-bot,.ecx-now,.ssi-or,.cmx-th>.cmx-c:first-child:has(+ .cmx-rp),.cmx-rp):not(:where(.aln-lane,.trv-g i.el,.trv-r.run:not([data-k="agent"]) .trv-b i,.trv-r[data-k="agent"] .trv-b i,.trv-b,.trv-sc,.tk-st.done:not(:last-child),.tmx-h,.tmx.live .tmx-body,.atx-ic,.toggle,.radar,.pulse,.stl-track i,.stx-ok,.aln-tr i,.afx-card .afx-open,.plx-s.edited .t,.vor-mute,.mix-mk,.hnx-t .ic,.ksx-s .ic,.shx-r .ic,.dpk-d.t,.sgc-mo .d.e,.agx-now,.btx-ask,.btx-live,.ssi-or,.rxx-r,.bdg.live .bdg-dot))::after{content:"";position:absolute;inset:min(0px,(100% - var(--hit-h)) / 2) min(0px,(100% - var(--hit-w)) / 2);--dm-hit:1}
}
.seg2{display:inline-flex;padding:2px;background:var(--chip);border-radius:var(--r-pill);position:relative}
.seg2 button{position:relative;z-index:1;height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:12.5px;color:var(--fg2);transition:color var(--t-fast)}
.seg2 button[aria-pressed="true"]{color:var(--fg)}
.seg2 .knob{position:absolute;top:2px;bottom:2px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08);transition:left var(--t) var(--ease),width var(--t) var(--ease)}
.seg2 button:focus-visible{outline-offset:-2px;border-radius:var(--r-pill)}
/* demo stages: the component sits centred, the variant switcher sits at the foot of the stage under it */
.stage-in:has(>.dm){align-self:stretch;display:flex}
.dm{width:100%;min-height:328px;display:flex;flex-direction:column;align-items:center;gap:var(--s-8)}
.dm>.dm-main{margin-block:auto;width:100%;display:flex;flex-direction:column;align-items:center}
.dm>.demo{flex:none;display:flex;justify-content:center}

.bub{align-self:flex-end;max-width:85%;background:var(--hover);border-radius:var(--r-card);padding:9px 13px;font-size:14px;line-height:1.45}
.msg{margin:0;font-size:14px;line-height:1.65}

/* ---------- status glyphs ---------- */
.spin{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:rot .8s linear infinite;flex:none;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.radar{position:relative;width:13px;height:13px;flex:none;display:inline-block}
.radar::before{content:"";position:absolute;inset:3.5px;border-radius:50%;background:currentColor}
.radar::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.3px solid currentColor;border-right-color:transparent;animation:rot .9s linear infinite}
/* the rotating thinking mark from Soft 1, four dots turning */
.think{width:14px;height:14px;position:relative;flex:none;display:inline-block}
.think i{position:absolute;width:3.4px;height:3.4px;border-radius:50%;background:currentColor;left:50%;top:50%;margin:-1.7px}
.think i:nth-child(1){transform:translate(-3.6px,-3.6px)}.think i:nth-child(2){transform:translate(3.6px,-3.6px)}.think i:nth-child(3){transform:translate(3.6px,3.6px)}.think i:nth-child(4){transform:translate(-3.6px,3.6px)}
.think.on{animation:thinkrot 1.6s var(--ease-io) infinite}
.think.on i{animation:thinkpulse 1.6s var(--ease-io) infinite}
.think.on i:nth-child(2){animation-delay:.2s}.think.on i:nth-child(3){animation-delay:.4s}.think.on i:nth-child(4){animation-delay:.6s}
@keyframes thinkrot{0%{transform:rotate(0)}50%{transform:rotate(90deg)}100%{transform:rotate(180deg)}}
@keyframes thinkpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* the step that is happening now in a trace: a quiet grey dot with a soft ping */
.pulse{position:relative;width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none;display:inline-block}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.45}80%,100%{transform:scale(2.8);opacity:0}}

/* ---------- motion ---------- */
.shim{background:linear-gradient(90deg,var(--fg) 0%,var(--fg) 38%,var(--faint) 50%,var(--fg) 62%,var(--fg) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 2.2s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:-160% 0}}
.enter{animation:enter var(--t-slow) var(--ease) backwards}
@keyframes enter{from{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
/* the person in a preview's story: a pointer that glides to what it uses and presses it */
.hand{position:absolute;left:0;top:0;width:18px;height:18px;z-index:30;pointer-events:none;opacity:0;color:var(--fg);transition:transform .42s var(--ease),opacity .16s;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.22))}
.hand.on{opacity:1}
.hand svg{display:block;width:18px;height:18px;transform-origin:3px 2px;transition:transform .16s var(--ease)}
.hand svg path{fill:currentColor;stroke:var(--surface);stroke-width:1.4;stroke-linejoin:round}
.hand.down svg{transform:scale(.82)}
.hand::before{content:"";position:absolute;left:-8px;top:-9px;width:22px;height:22px;border-radius:50%;background:var(--accent);opacity:0;pointer-events:none}
.hand.down::before{animation:handtap .5s var(--ease)}
@keyframes handtap{from{opacity:.3;transform:scale(.3)}to{opacity:0;transform:scale(1.3)}}
.pop-in{animation:popin .5s var(--ease) backwards}
@keyframes popin{from{opacity:0;transform:scale(.96);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.leave{animation:leave .35s var(--ease) both}
@keyframes leave{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
.sw{display:inline-block;transition:opacity .2s var(--ease),filter .2s var(--ease),transform .25s var(--ease)}
.sw.out{opacity:0;filter:blur(3px);transform:translateY(3px)}
.fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--t) var(--ease),opacity var(--t) var(--ease)}
.fold>*{overflow:hidden;min-height:0}
/* shadows inside an open fold aren't cut off: the clip leaves room round its edge (a shut fold is invisible anyway) */
.fold{grid-template-columns:minmax(0,1fr)}
.fold>*{overflow:clip;overflow-clip-margin:12px;min-width:0}
/* a shut fold is hidden as well as clear once it has folded, so Tab passes over what is inside it */
.fold.shut{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--t) var(--ease),opacity var(--t) var(--ease),visibility 0s var(--t)}

/* ---------- tooltip and popover ---------- */
.tip{position:fixed;z-index:1000;pointer-events:none;background:var(--ink);color:var(--on-ink);font-size:12px;line-height:1.35;padding:6px 9px;border-radius:var(--r-sm);max-width:240px;opacity:0;transform:translateY(4px);filter:blur(2px);transition:opacity .18s var(--ease),transform .25s var(--ease),filter .18s}
.tip.show{opacity:1;transform:none;filter:none}
.copied{color:var(--ok)!important}
@media (hover:hover) and (pointer:fine){.copied:hover{color:var(--ok)!important}}
.tip .kbd{background:rgba(255,255,255,.14);color:inherit;margin-left:6px}
:root[data-theme="dark"] .tip .kbd{background:rgba(0,0,0,.1)}
:root[data-theme="dark"] .ssx-ics span{color:#0d0d0d!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ssx-ics span{color:#0d0d0d!important}}
/* a closed popover is hidden as well as clear, so Tab and screen readers pass over it: it shows at once as it opens, so the
   focus can go into it, and hides once it has faded out */
.pop{position:absolute;z-index:50;min-width:200px;background:var(--raised);border-radius:14px;box-shadow:var(--shadow-pop);padding:6px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px) scale(.98);transform-origin:var(--origin,top left);filter:blur(3px);transition:opacity .2s var(--ease),transform .35s var(--ease),filter .2s var(--ease),visibility 0s .2s}
.pop.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;transition-property:opacity,transform,filter}
.pop .ph{padding:6px var(--s-2) var(--s-1);font-size:11.5px;color:var(--muted)}
.mi{display:flex;align-items:center;gap:10px;width:100%;padding:7px var(--s-2);border-radius:9px;font-size:13px;text-align:left;color:var(--fg);transition:background var(--t-fast)}
.mi.hl{background:var(--row)}
@media (hover:hover) and (pointer:fine){.mi:hover{background:var(--row)}}
/* the rows of a menu or list stand 2px apart, so two highlighted rows never touch */
.mi+.mi,.cpl-i+.cpl-i,.six-it+.six-it{margin-top:2px}
.mi .i{color:var(--fg2)}
.mi .d{display:block;font-size:12px;color:var(--muted)}
/* on a hovered or picked row's tint the line under an item steps up, so it keeps 4.5:1 in dark mode */
@media (hover:hover) and (pointer:fine){.mi:is(:hover,.hl,[aria-checked="true"]) .d{color:var(--fg2)}}
.mi .r{margin-left:auto;color:var(--muted);font-size:12px}
.mi .ck{margin-left:auto;color:var(--accent-fg,var(--accent));opacity:0;transition:opacity var(--t-fast)}
.mi[aria-checked="true"] .ck{opacity:1}
.mi[aria-checked="true"]{background:var(--row);font-weight:500}
.pop .sep{height:1px;background:var(--line);margin:var(--s-1) 2px}
/* every list row hovers with --row; an icon chip or track inside a hovered row lifts above it (white in light mode, one step lighter in dark) */
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] :is(.alg-it:hover .alg-ic,.plx-s:hover .n,.tpx-r:hover .tr){background:var(--hover)}}
@media (prefers-color-scheme:dark){@media (hover:hover) and (pointer:fine){:root:not([data-theme="light"]) :is(.alg-it:hover .alg-ic,.plx-s:hover .n,.tpx-r:hover .tr){background:var(--hover)}}}

@media (prefers-reduced-motion:reduce){:where([data-c]) *,:where([data-c]) *::before,:where([data-c]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.shim{color:var(--fg);background:none}}

/* bare: components that live in the chat stream sit on the chat surface, no card */
.card.bare .stage-in .panel:not(.keep){background:none;box-shadow:none;padding-left:0;padding-right:0;border-radius:0}
/* chart palette, saturated */
:root,[data-style="soft"]{--c1:var(--accent-mark,var(--accent));--c2:#7c4dff;--c3:#00a876;--c4:#e07900;--c5:#ff4d6d;--c6:#00a2bf}
/* the accent as a ramp, for charts whose parts are shares of one thing: full strength, then lighter steps toward the surface */
:root,[data-style="soft"]{--a1:var(--c1);--a2:color-mix(in oklab,var(--c1) 72%,var(--surface));--a3:color-mix(in oklab,var(--c1) 50%,var(--surface));--a4:color-mix(in oklab,var(--c1) 32%,var(--surface))}
:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{--c1:var(--accent-mark,var(--accent));--c2:#9b7bff;--c3:#22c993;--c4:#ffa033;--c5:#ff6b85;--c6:#22cce8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"]{--c1:var(--accent-mark,var(--accent));--c2:#9b7bff;--c3:#22c993;--c4:#ffa033;--c5:#ff6b85;--c6:#22cce8}}

/* ---------- Blueprint 2 ---------- */
/* Blueprint 2: the same components drawn as a technical sheet. Square corners, hairline edges instead of shadows,
   a lime accent, and motion that wipes and ticks into place in short, hard beats instead of blurring in */
:root:not([data-style="soft"]){
  --motion:bp;
  --page:#f3f3f0; --stage:#fafaf8; --surface:#ffffff; --raised:#ffffff;
  --fg:#121212; --fg2:#4a4a46; --muted:#666660; --faint:#bdbdb6; --rail:#d2d2cb; --line:#e3e3dd; --field-line:#d2d2cb; --line-strong:#858580; --field-line-strong:#b0b0a9;
  --chip:#f1f1ed; --hover:#e8e8e3; --press:#dededa; --wash:#f6f6f3; --row:#fafaf8;
  --soft:#ebebe6; --soft-h:#e1e1db; --soft-ring:inset 0 0 0 1px rgba(20,20,12,.045); --dis:#a3a39c;
  --accent:#d4f84a; --on-accent:#121212; --accent-fg:var(--fg); --accent-mark:#7a8e2b; --sel:color-mix(in srgb,var(--accent) 7%,transparent);
  --ink:#121212; --on-ink:#ffffff;
  --shadow:0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent);
  --shadow-pop:0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 12px 28px -14px rgba(20,20,12,.22);
  --shadow-toast:0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 10px 24px -14px rgba(20,20,12,.24);
  --shadow-lift:0 0 0 1px color-mix(in srgb,var(--fg) 50%,transparent);
  --grid:rgba(20,20,12,.09); --tick:#b5b5ad;
  --dis-hatch:repeating-linear-gradient(135deg,transparent 0 4px,var(--grid) 4px 5px);
  --ease:cubic-bezier(.65,0,.25,1); --ease-io:cubic-bezier(.65,0,.25,1);
  --t-fast:.14s; --t:.3s; --t-slow:.44s;
}
@media (prefers-color-scheme:dark){:root:not([data-style="soft"]):not([data-theme="light"]){
  --page:#111111; --stage:#1c1c1c; --surface:#262626; --raised:#2c2c2c;
  --fg:#f2f2f2; --fg2:#c9c9c9; --muted:#c0c0c0; --faint:#555555; --rail:#414141; --line:#333333; --field-line:#424242; --line-strong:#80807a; --field-line-strong:#808080;
  --chip:#303030; --hover:#373737; --press:#3f3f3f; --wash:#2c2c2c; --row:color-mix(in srgb,var(--fg) 5.5%,transparent);
  --soft:#323232; --soft-h:#3a3a3a; --soft-ring:inset 0 0 0 1px rgba(255,255,255,.04); --dis:#737373;
  --accent:#d4f84a; --on-accent:#121212; --accent-fg:#d4f84a; --accent-mark:#d4f84a; --sel:color-mix(in srgb,var(--accent) 10%,transparent);
  --ink:#f2f2f2; --on-ink:#161616;
  --shadow:0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent);
  --shadow-pop:0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 16px 32px -14px rgba(0,0,0,.7);
  --shadow-toast:0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 12px 28px -14px rgba(0,0,0,.7);
  --shadow-lift:0 0 0 1px color-mix(in srgb,var(--fg2) 50%,transparent);
  --grid:rgba(255,255,255,.07); --tick:#55554f;
  --dis-hatch:repeating-linear-gradient(135deg,transparent 0 4px,var(--grid) 4px 5px);
  --ease:cubic-bezier(.65,0,.25,1); --ease-io:cubic-bezier(.65,0,.25,1);
  --t-fast:.14s; --t:.3s; --t-slow:.44s}}
:root:not([data-style="soft"])[data-theme="dark"]{
  --page:#111111; --stage:#1c1c1c; --surface:#262626; --raised:#2c2c2c;
  --fg:#f2f2f2; --fg2:#c9c9c9; --muted:#c0c0c0; --faint:#555555; --rail:#414141; --line:#333333; --field-line:#424242; --line-strong:#80807a; --field-line-strong:#808080;
  --chip:#303030; --hover:#373737; --press:#3f3f3f; --wash:#2c2c2c; --row:color-mix(in srgb,var(--fg) 5.5%,transparent);
  --soft:#323232; --soft-h:#3a3a3a; --soft-ring:inset 0 0 0 1px rgba(255,255,255,.04); --dis:#737373;
  --accent:#d4f84a; --on-accent:#121212; --accent-fg:#d4f84a; --accent-mark:#d4f84a; --sel:color-mix(in srgb,var(--accent) 10%,transparent);
  --ink:#f2f2f2; --on-ink:#161616;
  --shadow:0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent);
  --shadow-pop:0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 16px 32px -14px rgba(0,0,0,.7);
  --shadow-toast:0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 12px 28px -14px rgba(0,0,0,.7);
  --shadow-lift:0 0 0 1px color-mix(in srgb,var(--fg2) 50%,transparent);
  --grid:rgba(255,255,255,.07); --tick:#55554f;
  --dis-hatch:repeating-linear-gradient(135deg,transparent 0 4px,var(--grid) 4px 5px);
  --ease:cubic-bezier(.65,0,.25,1); --ease-io:cubic-bezier(.65,0,.25,1);
  --t-fast:.14s; --t:.3s; --t-slow:.44s}

/* every corner is square, only the turning loaders stay round */
:root:not([data-style="soft"]) :where([data-c],[data-c] *,.tip,.tip *,.kbx-k.ghost,.kbx-k.ghost *):not(:where([data-style="soft"],[data-style="soft"] *)),:root:not([data-style="soft"]) :where([data-c],[data-c] *,.tip,.tip *,.kbx-k.ghost,.kbx-k.ghost *):not(:where([data-style="soft"],[data-style="soft"] *))::before,:root:not([data-style="soft"]) :where([data-c],[data-c] *,.tip,.tip *,.kbx-k.ghost,.kbx-k.ghost *):not(:where([data-style="soft"],[data-style="soft"] *))::after{border-radius:0!important}
:root:not([data-style="soft"]) .spin:not(:where([data-style="soft"],[data-style="soft"] *)),:root:not([data-style="soft"]) .radar:not(:where([data-style="soft"],[data-style="soft"] *))::before,:root:not([data-style="soft"]) .radar:not(:where([data-style="soft"],[data-style="soft"] *))::after{border-radius:50%!important}
:root:not([data-style="soft"]) :where([data-c],.tip,.kbx-k.ghost) svg:not(.i):not(.brand) rect:not(:where([data-style="soft"],[data-style="soft"] *)){rx:0;ry:0}
:root:not([data-style="soft"]) :where([data-c],.tip,.kbx-k.ghost) svg:not(.i):not(.brand) :is(path,line,polyline,circle):not(:where([data-style="soft"],[data-style="soft"] *)){stroke-linecap:butt}
/* no blur anywhere: things wipe in or cut, they never soften */
:root:not([data-style="soft"]) :where([data-c],[data-c] *,.tip,.tip *,.kbx-k.ghost,.kbx-k.ghost *):not(:where([data-style="soft"],[data-style="soft"] *)),:root:not([data-style="soft"]) :where([data-c],[data-c] *,.tip,.tip *,.kbx-k.ghost,.kbx-k.ghost *):not(:where([data-style="soft"],[data-style="soft"] *))::before,:root:not([data-style="soft"]) :where([data-c],[data-c] *,.tip,.tip *,.kbx-k.ghost,.kbx-k.ghost *):not(:where([data-style="soft"],[data-style="soft"] *))::after{filter:none!important}

/* the sheet: cards share their hairlines, every stage is drafting paper with crop marks in the corners */
:root:not([data-style="soft"]) .seg2 .knob:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent)}

/* parts: mono labels, hairline controls, hatched when disabled */
:root:not([data-style="soft"]) .tag:not(:where([data-style="soft"],[data-style="soft"] *)){font-size:10.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;height:19px;padding:0 6px}
:root:not([data-style="soft"]) .kbd:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent)}
:root:not([data-style="soft"]) .pill.line:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent)}
@media (hover:hover) and (pointer:fine){:root:not([data-style="soft"]) .pill.line:hover:not(:where([data-style="soft"],[data-style="soft"] *)){background:var(--wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--faint) 50%,transparent)}}
:root:not([data-style="soft"]) .pill:active:not(:where([data-style="soft"],[data-style="soft"] *)),:root:not([data-style="soft"]) .ib:active:not(:where([data-style="soft"],[data-style="soft"] *)){transform:translateY(1px)}
:root:not([data-style="soft"]) .chip.on:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pick-on) 50%,transparent)}
:root:not([data-style="soft"]) .bub:not(:where([data-style="soft"],[data-style="soft"] *)){background:var(--chip);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent)}
:root:not([data-style="soft"]) .tip:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:none}

/* motion: a top-down wipe that settles on a hard ease, stepped loaders, a blinking cursor instead of a soft ping */
@keyframes bpin{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(4px)}30%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes bpout{to{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes bpblink{0%,55%{opacity:1}56%,100%{opacity:.2}}
:root:not([data-style="soft"]) .enter:not(:where([data-style="soft"],[data-style="soft"] *)),:root:not([data-style="soft"]) .pop-in:not(:where([data-style="soft"],[data-style="soft"] *)){animation-name:bpin;animation-duration:var(--t-slow);animation-timing-function:var(--ease);animation-fill-mode:backwards}
:root:not([data-style="soft"]) .leave:not(:where([data-style="soft"],[data-style="soft"] *)){animation:bpout .26s var(--ease) both}
:root:not([data-style="soft"]) .chx-card.show:not(:where([data-style="soft"],[data-style="soft"] *)){animation:bpin .34s var(--ease) backwards}
:root:not([data-style="soft"]) .sw.out:not(:where([data-style="soft"],[data-style="soft"] *)){transform:translateY(-3px)}
:root:not([data-style="soft"]) .pop:not(:where([data-style="soft"],[data-style="soft"] *)){transform:translateY(4px);transition-duration:.16s}
:root:not([data-style="soft"]) .pop.open:not(:where([data-style="soft"],[data-style="soft"] *)){transform:none}
:root:not([data-style="soft"]) .spin:not(:where([data-style="soft"],[data-style="soft"] *)){animation:rot .9s steps(8) infinite}
:root:not([data-style="soft"]) .radar:not(:where([data-style="soft"],[data-style="soft"] *))::after{animation:rot 1s steps(8) infinite}
:root:not([data-style="soft"]) .pulse:not(:where([data-style="soft"],[data-style="soft"] *)){animation:bpblink 1.1s steps(1,end) infinite}
:root:not([data-style="soft"]) .pulse:not(:where([data-style="soft"],[data-style="soft"] *))::after{display:none}
:root:not([data-style="soft"]) .btx-ask:not(:where([data-style="soft"],[data-style="soft"] *))::after{background:linear-gradient(90deg,transparent 0 40%,rgba(255,255,255,.38) 40% 46%,transparent 46%)}
@media (hover:hover) and (pointer:fine){:root:not([data-style="soft"]) .btx-ask:hover:not(:where([data-style="soft"],[data-style="soft"] *))::after{transition:transform .5s steps(10)}}
:root:not([data-style="soft"]) .btx-live:not(:where([data-style="soft"],[data-style="soft"] *))::after{display:none}
:root:not([data-style="soft"]) .btx-live:not(:where([data-style="soft"],[data-style="soft"] *)){animation:bpblink 1.1s steps(1,end) infinite}

/* a component card: the template renders into .stage-in */
[data-c]{width:440px;max-width:100%;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--fg);-webkit-font-smoothing:antialiased}
[data-c].wide{width:720px}