@visuno/angular 0.0.0-stage → 0.1.0

package/tokens.css

@@ -0,0 +1,424 @@
+/* @visuno/angular design tokens — self-contained.
+ * Dark mode:  <html data-theme="dark">   Soft style: <html data-style="soft">
+ * Import once globally: @import '@visuno/angular/styles.css';
+ */
+/* Visuno 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(--vo-gy,0px));transition:transform var(--vo-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"]{
+  --vo-motion:soft;
+  --vo-page:#f7f7f7; --vo-stage:#fafafa; --vo-surface:#ffffff; --vo-raised:#ffffff;
+  --vo-fg:#171717; --vo-fg2:#525252; --vo-muted:#6a6a6a; --vo-faint:#c4c4c4; --vo-rail:#d4d4d4; --vo-line:#e8e8e8; --vo-field-line:#d4d4d4; --vo-line-strong:#858585; --vo-field-line-strong:#b3b3b3;
+  --vo-chip:#f3f3f3; --vo-hover:#ebebeb; --vo-press:#e3e3e3; --vo-wash:#f9f9f9; --vo-row:#fafafa;
+  --vo-soft:#ececec; --vo-soft-h:#e3e3e3; --vo-soft-ring:inset 0 0 0 1px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.7); --vo-dis:#a6a6a6;
+  /* disabled: text and icons take --vo-dis; a control with a fill swaps it for --vo-dis-fill (Blueprint hatches it) */
+  --vo-dis-fill:var(--vo-soft); --vo-dis-hatch:none;
+  --vo-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: --vo-accent fills (with --vo-on-accent on top, 4.5:1), --vo-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 --vo-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 */
+  --vo-accent:#116ff8; --vo-on-accent:#ffffff; --vo-accent-fg:#0f5fd5; --vo-accent-mark:#116ff8; --vo-sel:color-mix(in srgb,var(--vo-accent) 6%,transparent);
+  /* fields (text fields, textareas, search fields, dropdown triggers) have a dimmed grey edge, --vo-field-line, that steps up
+     a little, to --vo-field-line-strong, while they have the focus. The keyboard's focus ring on every other control is 2px of
+     a stronger grey (--vo-line-strong, as --vo-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 */
+  --vo-focus:var(--vo-line-strong);
+  --vo-ink:#1b1b1b; --vo-on-ink:#ffffff;
+  --vo-ok:#0a7034; --vo-ok-bg:#cff5db; --vo-ok-mark:#4cbb17; --vo-warn:#9a4704; --vo-warn-bg:#ffe5b8; --vo-warn-mark:#f76700; --vo-bad:#b81d23; --vo-bad-bg:#ffe8e8;
+  --vo-merge:#7c4cd4; --vo-merge-bg:#f2ecfd; --vo-add:#187633; --vo-del:#c7212c;
+  --vo-pb:#1460d0; --vo-pb-bg:#eaf2ff; --vo-pl:#6b47d6; --vo-pl-bg:#f2edff; --vo-pm:#10754a; --vo-pm-bg:#e7f8f0; --vo-pp:#994c0b; --vo-pp-bg:#fff2e6;
+  --vo-pr:#bf314d; --vo-pr-bg:#ffeef1; --vo-py:#856404; --vo-py-bg:#fffae3; --vo-pk:#b92e75; --vo-pk-bg:#fff0f7; --vo-pt:#0e747d; --vo-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(--vo-av-l), takes its ink, var(--vo-av-l-ink), on its own */
+  --vo-av-b:#126fe6; --vo-av-b-ink:#ffffff; --vo-av-l:#834ff5; --vo-av-l-ink:#ffffff; --vo-av-r:#d73341; --vo-av-r-ink:#ffffff; --vo-av-k:#cf3288; --vo-av-k-ink:#ffffff;
+  --vo-av-m:#27cf86; --vo-av-m-ink:#052616; --vo-av-t:#28c9d8; --vo-av-t-ink:#042428; --vo-av-y:#e9ac1a; --vo-av-y-ink:#2a1d03; --vo-av-p:#fda154; --vo-av-p-ink:#301804;
+  --vo-ts:#2c6cb2; --vo-react:#0a738b;
+  /* every raised surface carries its own hairline edge, so nothing needs a separate ring */
+  /* soft, layered shadows: a hairline, a contact shadow and two wide, faint ones, with a faint highlight on the top edge */
+  --vo-shadow:0 0 0 1px rgba(0,0,0,.03),0 1px 1px rgba(0,0,0,.025),0 2px 4px -1px rgba(0,0,0,.03),0 8px 16px -6px rgba(0,0,0,.05),0 20px 36px -14px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.75);
+  --vo-shadow-pop:0 0 0 1px rgba(0,0,0,.035),0 1px 2px rgba(0,0,0,.03),0 4px 10px -4px rgba(0,0,0,.05),0 14px 28px -10px rgba(0,0,0,.08),0 32px 56px -24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.75);
+  --vo-shadow-toast:0 0 0 1px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.08);
+  --vo-hl:#fdeb9a; --vo-hl-ok:#d3f1df;
+  /* Soft is plush: every corner is scaled by --vo-rk, and larger still where the browser draws true squircles (below) */
+  --vo-rk:1.25;
+  --vo-r-card:calc(16px * var(--vo-rk));
+  /* spacing runs on a 4px scale, and corners on a small set of radii; values off the scale are still written out */
+  --vo-s-1:4px; --vo-s-2:8px; --vo-s-3:12px; --vo-s-4:16px; --vo-s-5:20px; --vo-s-6:24px; --vo-s-8:32px; --vo-r-xs:calc(4px * var(--vo-rk)); --vo-r-lg:calc(20px * var(--vo-rk)); --vo-r-in:calc(12px * var(--vo-rk)); --vo-r-sm:calc(8px * var(--vo-rk)); --vo-r-pill:999px;
+  /* fields and tags have slightly rounded corners, never pills: --vo-r-field for one-line fields and dropdown triggers, --vo-r-box
+     for boxes you write several lines in, --vo-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 */
+  --vo-r-field:10px; --vo-r-field-sq:16px; --vo-r-box:14px; --vo-r-box-sq:22px; --vo-r-tag:7px; --vo-r-tag-sq:12px;
+  --vo-field-h:40px; --vo-field-w:320px;
+  --vo-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
+  --vo-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+  --vo-ease:cubic-bezier(.22,1,.36,1); --vo-ease-io:cubic-bezier(.65,0,.35,1);
+  --vo-t-fast:.22s; --vo-t:.45s; --vo-t-slow:.7s;
+}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"]{
+  --vo-page:#111111; --vo-stage:#1c1c1c; --vo-surface:#262626; --vo-raised:#2c2c2c;
+  --vo-fg:#f2f2f2; --vo-fg2:#c9c9c9; --vo-muted:#c0c0c0; --vo-faint:#555555; --vo-rail:#414141; --vo-line:#333333; --vo-field-line:#424242; --vo-line-strong:#808080; --vo-field-line-strong:#808080;
+  --vo-chip:#303030; --vo-hover:#373737; --vo-press:#3f3f3f; --vo-wash:#2c2c2c; --vo-row:color-mix(in srgb,var(--vo-fg) 5.5%,transparent);
+  --vo-soft:#323232; --vo-soft-h:#3a3a3a; --vo-soft-ring:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 1px 0 rgba(255,255,255,.05); --vo-dis:#737373;
+  --vo-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);
+  --vo-accent:#116ff8; --vo-on-accent:#ffffff; --vo-accent-fg:#9dc4ff; --vo-accent-mark:#3d8bff; --vo-sel:color-mix(in srgb,var(--vo-accent) 9%,transparent);
+  --vo-ink:#f2f2f2; --vo-on-ink:#161616;
+  --vo-ok:#4ee28a; --vo-ok-bg:rgba(34,214,110,.2); --vo-ok-mark:#4cbb17; --vo-warn:#ffc247; --vo-warn-bg:rgba(255,184,40,.2); --vo-warn-mark:#ffa940; --vo-bad:#ff8a8a; --vo-bad-bg:rgba(255,90,90,.14);
+  --vo-merge:#cbb8ff; --vo-merge-bg:rgba(169,139,255,.15); --vo-add:#63d998; --vo-del:#ffa9ae;
+  --vo-pb:#a0c5ff; --vo-pb-bg:rgba(90,150,255,.18); --vo-pl:#cbb9ff; --vo-pl-bg:rgba(155,125,255,.18); --vo-pm:#6ad9a7; --vo-pm-bg:rgba(70,205,150,.16); --vo-pp:#ffb57a; --vo-pp-bg:rgba(255,155,80,.17);
+  --vo-pr:#ffadbb; --vo-pr-bg:rgba(255,105,130,.17); --vo-py:#f0cd5a; --vo-py-bg:rgba(240,200,60,.15); --vo-pk:#ffa8d4; --vo-pk-bg:rgba(255,100,175,.16); --vo-pt:#5fd8df; --vo-pt-bg:rgba(60,200,210,.16);
+  --vo-ts:#8fbcff; --vo-react:#3dd0ee;
+  --vo-shadow:0 0 0 1px rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.28),0 6px 14px -6px rgba(0,0,0,.36),0 20px 36px -14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06); --vo-shadow-pop:0 0 0 1px rgba(255,255,255,.055),0 2px 4px rgba(0,0,0,.3),0 12px 24px -8px rgba(0,0,0,.45),0 32px 56px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07); --vo-shadow-toast:0 0 0 1px rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.4); --vo-hl:rgba(240,200,60,.3); --vo-hl-ok:rgba(60,207,126,.24); color-scheme:dark}}
+:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{
+  --vo-page:#111111; --vo-stage:#1c1c1c; --vo-surface:#262626; --vo-raised:#2c2c2c;
+  --vo-fg:#f2f2f2; --vo-fg2:#c9c9c9; --vo-muted:#c0c0c0; --vo-faint:#555555; --vo-rail:#414141; --vo-line:#333333; --vo-field-line:#424242; --vo-line-strong:#808080; --vo-field-line-strong:#808080;
+  --vo-chip:#303030; --vo-hover:#373737; --vo-press:#3f3f3f; --vo-wash:#2c2c2c; --vo-row:color-mix(in srgb,var(--vo-fg) 5.5%,transparent);
+  --vo-soft:#323232; --vo-soft-h:#3a3a3a; --vo-soft-ring:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 1px 0 rgba(255,255,255,.05); --vo-dis:#737373;
+  --vo-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);
+  --vo-accent:#116ff8; --vo-on-accent:#ffffff; --vo-accent-fg:#9dc4ff; --vo-accent-mark:#3d8bff; --vo-sel:color-mix(in srgb,var(--vo-accent) 9%,transparent);
+  --vo-ink:#f2f2f2; --vo-on-ink:#161616;
+  --vo-ok:#4ee28a; --vo-ok-bg:rgba(34,214,110,.2); --vo-ok-mark:#4cbb17; --vo-warn:#ffc247; --vo-warn-bg:rgba(255,184,40,.2); --vo-warn-mark:#ffa940; --vo-bad:#ff8a8a; --vo-bad-bg:rgba(255,90,90,.14);
+  --vo-merge:#cbb8ff; --vo-merge-bg:rgba(169,139,255,.15); --vo-add:#63d998; --vo-del:#ffa9ae;
+  --vo-pb:#a0c5ff; --vo-pb-bg:rgba(90,150,255,.18); --vo-pl:#cbb9ff; --vo-pl-bg:rgba(155,125,255,.18); --vo-pm:#6ad9a7; --vo-pm-bg:rgba(70,205,150,.16); --vo-pp:#ffb57a; --vo-pp-bg:rgba(255,155,80,.17);
+  --vo-pr:#ffadbb; --vo-pr-bg:rgba(255,105,130,.17); --vo-py:#f0cd5a; --vo-py-bg:rgba(240,200,60,.15); --vo-pk:#ffa8d4; --vo-pk-bg:rgba(255,100,175,.16); --vo-pt:#5fd8df; --vo-pt-bg:rgba(60,200,210,.16);
+  --vo-ts:#8fbcff; --vo-react:#3dd0ee;
+  --vo-shadow:0 0 0 1px rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.28),0 6px 14px -6px rgba(0,0,0,.36),0 20px 36px -14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06); --vo-shadow-pop:0 0 0 1px rgba(255,255,255,.055),0 2px 4px rgba(0,0,0,.3),0 12px 24px -8px rgba(0,0,0,.45),0 32px 56px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07); --vo-shadow-toast:0 0 0 1px rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.4); --vo-hl:rgba(240,200,60,.3); --vo-hl-ok:rgba(60,207,126,.24); color-scheme:dark}
+
+/* the accent's hover fill (--vo-accent-2) and tint (--vo-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"]{--vo-accent-2:color-mix(in srgb,var(--vo-accent) 86%,#000);--vo-accent-bg:color-mix(in srgb,var(--vo-accent) 9%,transparent)}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"]{--vo-accent-2:color-mix(in srgb,var(--vo-accent) 84%,#fff);--vo-accent-bg:color-mix(in srgb,var(--vo-accent) 13%,transparent)}}
+:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{--vo-accent-2:color-mix(in srgb,var(--vo-accent) 84%,#fff);--vo-accent-bg:color-mix(in srgb,var(--vo-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"]{--vo-accent-2:color-mix(in srgb,var(--vo-accent) 86%,rgb(from var(--vo-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"]{--vo-accent-2:color-mix(in srgb,var(--vo-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"]{--vo-accent-2:color-mix(in srgb,var(--vo-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"]{--vo-pick-line:var(--vo-rail);--vo-pick-on:var(--vo-faint)}
+
+/* Soft is plush: corners are drawn as squircles where the browser can (corner-shape), and since a squircle's corner
+   reads smaller than a round one of the same radius, the radii grow with it. Circles (spinners, loader rings, avatars,
+   dots) stay round; pills, chips, buttons and switchers are squircles too. Blueprint stays square (its corners are 0) */
+@supports (corner-shape:squircle){
+:root,[data-style="soft"]{--vo-rk:1.7}
+:root:not([data-style="soft"]){--vo-rk:1}
+:where([data-c]) *,:where([data-c]) *::before,:where([data-c]) *::after{corner-shape:squircle}
+.acx-n .s,.afx-pen,.afx-r b,.agx-now i,.alg-ph-pg,.alg-sc-knob,.alg-sc-ld,.alg-sc-n,.aln-cw-tr b,.aln-pk,.asx-lp-stop,.asx-lp-th,.asx-lp-th i,.asx-tb-dot,.atx-cmp-ok,.atx-cmp-send,.atx-cmp-x,.av,.bdg-dot,.bdg-x,.bdg-x:focus-visible,.btx-live,.bws-dots i,.ccx-fl .flag,.ccx-sw,.cmx-go,.cmx-pin,.cpx-att .fchip .rt,.cpx-att .fchip .x,.cpx-dot,.cpx-send,.ctb-n .s,.dot,.drv-ag,.drv-ring,.dtx-sl .k,.ecx-days b,.ecx-dh.t b,.erx-o i,.evr-dot,.evr-jg-arc .tr,.evr-jg-arc i,.fxp-n .ag,.hox-av,.ib,.lcx-ring,.lnx-k i,.lnx-pt,.mix-dot,.msc-c button,.ntx-n .u,.obx .obx-rw .obx-rk,.obx-ck,.obx-rk,.plx-s .n,.psx-go,.pulse,.rq-wk-c .rq-ic,.rq-wk-ring .h i,.rq-wk-ring .tr,.rq-wk-stack i,.rsu-g,.rsu-rc-nd,.rsu-rc-ok,.rsu-rc-ok i,.rsu-rp-ok,.rxx-add,.sgc-wr .e i,.spin,.ssx-ics span,.ste-go,.stx-conf i.d,.stx-st .n,.tcx[data-d="inline"] .tcb-wire i,.think i,.thp-send,.thp[data-d] .tpx-dots i,.thp[data-d] .tpx-send,.thp[data-d] .tpx-st,.tk-st .mk,.tsk-c .g,.tst-t .g,.ttp-av,.vcx-dot,.vor .vor-orb i,.vor-dot,.vor-gl,.vor-orb i,.cxm-av,.crs-dots button,.rdx-lg i,.scx-lg i.c,.cvq-lg i.c,.rgx-r i,.cpk-k,.wsx-marks span,.igx-steps i,.ths-dg i,.ths-mtx i{corner-shape:round}
+.aln-det div::before{corner-shape:round}
+.asx-lp-rg::-moz-range-thumb{corner-shape:round}
+.asx-lp-rg::-webkit-slider-thumb{corner-shape:round}
+.btx-live::after{corner-shape:round}
+.dpk-d.t::after{corner-shape:round}
+.ecx-now::before{corner-shape:round}
+.fxp-tree::-webkit-scrollbar-thumb{corner-shape:round}
+.hand::before{corner-shape:round}
+.hnx-t .ic::after{corner-shape:round}
+.ksx-s .ic::after{corner-shape:round}
+.pulse::after{corner-shape:round}
+.radar::after{corner-shape:round}
+.radar::before{corner-shape:round}
+.sgc-mo .d.e::after{corner-shape:round}
+.shx-r .ic::after{corner-shape:round}
+.stx-ok::after{corner-shape:round}
+.tmx-body::-webkit-scrollbar-thumb{corner-shape:round}
+.toggle::after{corner-shape:round}
+.afx-desk::before{corner-shape:round}
+}
+/* ---------- 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(--vo-focus);outline-offset:2px;border-radius:calc(6px * var(--vo-rk))}
+/* a field shows the focus with its own edge, which steps up to --vo-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(--vo-mono)}
+.sp{flex:1}
+.num{font-variant-numeric:tabular-nums}
+.muted{color:var(--vo-muted)}.fg2{color:var(--vo-fg2)}
+.panel{background:var(--vo-surface);border-radius:var(--vo-r-card);box-shadow:var(--vo-shadow);position:relative}
+.ib{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;color:var(--vo-fg2);transition:background var(--vo-t-fast),color var(--vo-t-fast),transform .15s}
+@media (hover:hover) and (pointer:fine){.ib:hover{background:var(--vo-row);color:var(--vo-fg)}}
+.ib:active{transform:scale(.94)}
+.ib.fill{background:var(--vo-soft);box-shadow:var(--vo-soft-ring)}
+@media (hover:hover) and (pointer:fine){.ib.fill:hover{background:var(--vo-soft-h)}}
+.ib.on{background:var(--vo-accent-bg);color:var(--vo-accent-fg,var(--vo-accent))}
+.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--vo-s-3);border-radius:var(--vo-r-pill);font-size:13px;color:var(--vo-fg2);background:var(--vo-chip);white-space:nowrap;transition:background var(--vo-t-fast),color var(--vo-t-fast),box-shadow var(--vo-t-fast)}
+@media (hover:hover) and (pointer:fine){.chip:hover{background:var(--vo-hover);color:var(--vo-fg)}}
+.chip.on{background:var(--vo-surface);color:var(--vo-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vo-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(--vo-r-pill);font-size:13px;font-weight:500;white-space:nowrap;transition:background var(--vo-t-fast),color var(--vo-t-fast),opacity var(--vo-t-fast),transform .15s}
+.pill:active{transform:scale(.97)}
+/* the primary action is the accent, with --vo-on-accent on it, so it follows the accent and stays readable in any colour */
+.pill.primary{background:var(--vo-accent);color:var(--vo-on-accent)}
+@media (hover:hover) and (pointer:fine){.pill.primary:hover{background:var(--vo-accent-2)}}
+.pill.accent{background:var(--vo-accent);color:var(--vo-on-accent)}
+.pill.accent.hl{background:var(--vo-accent-2)}
+@media (hover:hover) and (pointer:fine){.pill.accent:hover{background:var(--vo-accent-2)}}
+.pill.soft{background:var(--vo-soft);color:var(--vo-fg);box-shadow:var(--vo-soft-ring)}
+@media (hover:hover) and (pointer:fine){.pill.soft:hover{background:var(--vo-soft-h)}}
+.pill.line{background:var(--vo-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vo-line) 50%,transparent);color:var(--vo-fg)}
+.pill.ghost{color:var(--vo-fg2)}@media (hover:hover) and (pointer:fine){.pill.ghost:hover{background:var(--vo-row);color:var(--vo-fg)}}
+/* one disabled look for every control: nothing fades; its text and icons take --vo-dis, a control with a fill swaps the fill
+   for --vo-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(--vo-dis);background:none;cursor:not-allowed;transform:none}
+@media (hover:hover) and (pointer:fine){.pill[disabled]:hover{opacity:1;color:var(--vo-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(--vo-dis-hatch),var(--vo-dis-fill);color:var(--vo-dis);box-shadow:var(--vo-soft-ring)}
+@media (hover:hover) and (pointer:fine){.pill:is(.accent,.primary,.soft,.line)[disabled]:hover{background:var(--vo-dis-hatch),var(--vo-dis-fill);color:var(--vo-dis);box-shadow:var(--vo-soft-ring)}}
+.pill[disabled] .kbd{background:var(--vo-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(--vo-r-tag);font-size:11.5px;font-weight:500;white-space:nowrap;background:var(--vo-chip);color:var(--vo-fg2)}
+.tag.b{background:var(--vo-pb-bg);color:var(--vo-pb)}.tag.l{background:var(--vo-pl-bg);color:var(--vo-pl)}.tag.m{background:var(--vo-pm-bg);color:var(--vo-pm)}.tag.p{background:var(--vo-pp-bg);color:var(--vo-pp)}
+.tag.r{background:var(--vo-pr-bg);color:var(--vo-pr)}.tag.y{background:var(--vo-py-bg);color:var(--vo-py)}.tag.k{background:var(--vo-pk-bg);color:var(--vo-pk)}.tag.t{background:var(--vo-pt-bg);color:var(--vo-pt)}
+.tag.ok{background:var(--vo-ok-bg);color:var(--vo-ok)}.tag.warn{background:var(--vo-warn-bg);color:var(--vo-warn)}.tag.bad{background:var(--vo-bad-bg);color:var(--vo-bad)}
+@supports (corner-shape:squircle){.tag{corner-shape:squircle;border-radius:var(--vo-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(--vo-s-2);border-radius:var(--vo-r-pill);background:var(--vo-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vo-line) 50%,transparent);font-size:12.5px;color:var(--vo-fg);white-space:nowrap}
+.fchip.lnk{cursor:pointer;transition:background var(--vo-t-fast),box-shadow var(--vo-t-fast)}
+@media (hover:hover) and (pointer:fine){.fchip.lnk:hover{background:var(--vo-row);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vo-rail) 50%,transparent)}}
+.ft{font-family:var(--vo-sans);font-size:9.5px;font-weight:500;color:var(--vo-ts);letter-spacing:.02em}
+.ft.re{color:var(--vo-react)}.ft.fg{color:var(--vo-pl)}.ft.pdf{color:var(--vo-pr)}.ft.csv{color:var(--vo-pm)}
+.kbd{font-family:inherit;font-size:11px;padding:1px 5px;border-radius:5px;background:var(--vo-chip);color:var(--vo-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(--vo-surface)}}
+@media (hover:hover) and (pointer:fine){.pill.ghost:hover .kbd{background:var(--vo-surface)}}
+.pill .kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 var(--vo-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(--vo-accent) 80%,#000);color:inherit}
+code.c{font-family:var(--vo-mono);font-size:12.5px;background:var(--vo-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(--vo-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:calc(9px * var(--vo-rk));background:color-mix(in srgb,var(--vo-muted) 80%,var(--vo-surface));position:relative;flex:none;transition:background var(--vo-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(--vo-t) var(--vo-ease)}
+.toggle[aria-checked="true"]{background:var(--vo-accent);box-shadow:inset 0 0 0 1px var(--vo-accent-mark,var(--vo-accent))}
+.toggle[aria-checked="true"]::after{transform:translateX(12px);background:var(--vo-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;--vo-hit-w:40px;--vo-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,.thp[data-d="deck"] .tpb-card,.crs-pv,.crs-pic,.hmx-sc))::after{content:"";position:absolute;inset:min(0px,(100% - var(--vo-hit-h)) / 2) min(0px,(100% - var(--vo-hit-w)) / 2);--vo-hit:1}
+}
+.seg2{display:inline-flex;padding:2px;background:var(--vo-chip);border-radius:var(--vo-r-pill);position:relative}
+.seg2 button{position:relative;z-index:1;height:26px;padding:0 11px;border-radius:var(--vo-r-pill);font-size:12.5px;color:var(--vo-fg2);transition:color var(--vo-t-fast)}
+.seg2 button[aria-pressed="true"]{color:var(--vo-fg)}
+.seg2 .knob{position:absolute;top:2px;bottom:2px;border-radius:var(--vo-r-pill);background:var(--vo-surface);box-shadow:0 1px 2px rgba(0,0,0,.08);transition:left var(--vo-t) var(--vo-ease),width var(--vo-t) var(--vo-ease)}
+.seg2 button:focus-visible{outline-offset:-2px;border-radius:var(--vo-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(--vo-s-8)}
+.dm>.vo-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(--vo-hover);border-radius:var(--vo-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(--vo-ease-io) infinite}
+.think.on i{animation:thinkpulse 1.6s var(--vo-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(--vo-muted);flex:none;display:inline-block}
+.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s var(--vo-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(--vo-fg) 0%,var(--vo-fg) 38%,var(--vo-faint) 50%,var(--vo-fg) 62%,var(--vo-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(--vo-t-slow) var(--vo-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(--vo-fg);transition:transform .42s var(--vo-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(--vo-ease)}
+.hand svg path{fill:currentColor;stroke:var(--vo-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(--vo-accent);opacity:0;pointer-events:none}
+.hand.down::before{animation:handtap .5s var(--vo-ease)}
+@keyframes handtap{from{opacity:.3;transform:scale(.3)}to{opacity:0;transform:scale(1.3)}}
+.pop-in{animation:popin .5s var(--vo-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(--vo-ease) both}
+@keyframes leave{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
+.sw{display:inline-block;transition:opacity .2s var(--vo-ease),filter .2s var(--vo-ease),transform .25s var(--vo-ease)}
+.sw.out{opacity:0;filter:blur(3px);transform:translateY(3px)}
+.fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--vo-t) var(--vo-ease),opacity var(--vo-t) var(--vo-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(--vo-t) var(--vo-ease),opacity var(--vo-t) var(--vo-ease),visibility 0s var(--vo-t)}
+
+/* ---------- tooltip and popover ---------- */
+.tip{position:fixed;z-index:1000;pointer-events:none;background:var(--vo-ink);color:var(--vo-on-ink);font-size:12px;line-height:1.35;padding:6px 9px;border-radius:var(--vo-r-sm);max-width:240px;opacity:0;transform:translateY(4px);filter:blur(2px);transition:opacity .18s var(--vo-ease),transform .25s var(--vo-ease),filter .18s}
+.tip.show{opacity:1;transform:none;filter:none}
+.copied{color:var(--vo-ok)!important}
+@media (hover:hover) and (pointer:fine){.copied:hover{color:var(--vo-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(--vo-raised);border-radius:calc(14px * var(--vo-rk));box-shadow:var(--vo-shadow-pop);padding:6px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px) scale(.98);transform-origin:var(--vo-origin,top left);filter:blur(3px);transition:opacity .2s var(--vo-ease),transform .35s var(--vo-ease),filter .2s var(--vo-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(--vo-s-2) var(--vo-s-1);font-size:11.5px;color:var(--vo-muted)}
+.mi{display:flex;align-items:center;gap:10px;width:100%;padding:7px var(--vo-s-2);border-radius:calc(9px * var(--vo-rk));font-size:13px;text-align:left;color:var(--vo-fg);transition:background var(--vo-t-fast)}
+.mi.hl{background:var(--vo-row)}
+@media (hover:hover) and (pointer:fine){.mi:hover{background:var(--vo-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(--vo-fg2)}
+.mi .d{display:block;font-size:12px;color:var(--vo-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(--vo-fg2)}}
+.mi .r{margin-left:auto;color:var(--vo-muted);font-size:12px}
+.mi .ck{margin-left:auto;color:var(--vo-accent-fg,var(--vo-accent));opacity:0;transition:opacity var(--vo-t-fast)}
+.mi[aria-checked="true"] .ck{opacity:1}
+.mi[aria-checked="true"]{background:var(--vo-row);font-weight:500}
+.pop .sep{height:1px;background:var(--vo-line);margin:var(--vo-s-1) 2px}
+/* every list row hovers with --vo-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(--vo-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(--vo-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(--vo-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"]{--vo-c1:var(--vo-accent-mark,var(--vo-accent));--vo-c2:#7c4dff;--vo-c3:#4cbb17;--vo-c4:#f76700;--vo-c5:#ff4d6d;--vo-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"]{--vo-a1:var(--vo-c1);--vo-a2:color-mix(in oklab,var(--vo-c1) 72%,var(--vo-surface));--vo-a3:color-mix(in oklab,var(--vo-c1) 50%,var(--vo-surface));--vo-a4:color-mix(in oklab,var(--vo-c1) 32%,var(--vo-surface))}
+:root[data-theme="dark"],:root[data-theme="dark"] [data-style="soft"]{--vo-c1:var(--vo-accent-mark,var(--vo-accent));--vo-c2:#9b7bff;--vo-c3:#5fcb2a;--vo-c4:#ffa033;--vo-c5:#ff6b85;--vo-c6:#22cce8}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]),:root:not([data-theme="light"]) [data-style="soft"]{--vo-c1:var(--vo-accent-mark,var(--vo-accent));--vo-c2:#9b7bff;--vo-c3:#5fcb2a;--vo-c4:#ffa033;--vo-c5:#ff6b85;--vo-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"]){
+  --vo-motion:bp;
+  --vo-page:#f3f3f0; --vo-stage:#fafaf8; --vo-surface:#ffffff; --vo-raised:#ffffff;
+  --vo-fg:#121212; --vo-fg2:#4a4a46; --vo-muted:#666660; --vo-faint:#bdbdb6; --vo-rail:#d2d2cb; --vo-line:#e3e3dd; --vo-field-line:#d2d2cb; --vo-line-strong:#858580; --vo-field-line-strong:#b0b0a9;
+  --vo-chip:#f1f1ed; --vo-hover:#e8e8e3; --vo-press:#dededa; --vo-wash:#f6f6f3; --vo-row:#fafaf8;
+  --vo-soft:#ebebe6; --vo-soft-h:#e1e1db; --vo-soft-ring:inset 0 0 0 1px rgba(20,20,12,.045); --vo-dis:#a3a39c;
+  --vo-accent:#d4f84a; --vo-on-accent:#121212; --vo-accent-fg:var(--vo-fg); --vo-accent-mark:#4cbb17; --vo-sel:color-mix(in srgb,var(--vo-accent) 7%,transparent);
+  --vo-ink:#121212; --vo-on-ink:#ffffff;
+  --vo-shadow:0 0 0 1px color-mix(in srgb,var(--vo-line) 50%,transparent);
+  --vo-shadow-pop:0 0 0 1px color-mix(in srgb,var(--vo-rail) 50%,transparent),0 12px 28px -14px rgba(20,20,12,.22);
+  --vo-shadow-toast:0 0 0 1px color-mix(in srgb,var(--vo-rail) 50%,transparent),0 10px 24px -14px rgba(20,20,12,.24);
+  --vo-shadow-lift:0 0 0 1px color-mix(in srgb,var(--vo-fg) 50%,transparent);
+  --vo-grid:rgba(20,20,12,.09); --vo-tick:#b5b5ad;
+  --vo-dis-hatch:repeating-linear-gradient(135deg,transparent 0 4px,var(--vo-grid) 4px 5px);
+  --vo-ease:cubic-bezier(.65,0,.25,1); --vo-ease-io:cubic-bezier(.65,0,.25,1);
+  --vo-t-fast:.14s; --vo-t:.3s; --vo-t-slow:.44s;
+}
+@media (prefers-color-scheme:dark){:root:not([data-style="soft"]):not([data-theme="light"]){
+  --vo-page:#111111; --vo-stage:#1c1c1c; --vo-surface:#262626; --vo-raised:#2c2c2c;
+  --vo-fg:#f2f2f2; --vo-fg2:#c9c9c9; --vo-muted:#c0c0c0; --vo-faint:#555555; --vo-rail:#414141; --vo-line:#333333; --vo-field-line:#424242; --vo-line-strong:#80807a; --vo-field-line-strong:#808080;
+  --vo-chip:#303030; --vo-hover:#373737; --vo-press:#3f3f3f; --vo-wash:#2c2c2c; --vo-row:color-mix(in srgb,var(--vo-fg) 5.5%,transparent);
+  --vo-soft:#323232; --vo-soft-h:#3a3a3a; --vo-soft-ring:inset 0 0 0 1px rgba(255,255,255,.04); --vo-dis:#737373;
+  --vo-accent:#d4f84a; --vo-on-accent:#121212; --vo-accent-fg:#d4f84a; --vo-accent-mark:#d4f84a; --vo-sel:color-mix(in srgb,var(--vo-accent) 10%,transparent);
+  --vo-ink:#f2f2f2; --vo-on-ink:#161616;
+  --vo-shadow:0 0 0 1px color-mix(in srgb,var(--vo-line) 50%,transparent);
+  --vo-shadow-pop:0 0 0 1px color-mix(in srgb,var(--vo-rail) 50%,transparent),0 16px 32px -14px rgba(0,0,0,.7);
+  --vo-shadow-toast:0 0 0 1px color-mix(in srgb,var(--vo-rail) 50%,transparent),0 12px 28px -14px rgba(0,0,0,.7);
+  --vo-shadow-lift:0 0 0 1px color-mix(in srgb,var(--vo-fg2) 50%,transparent);
+  --vo-grid:rgba(255,255,255,.07); --vo-tick:#55554f;
+  --vo-dis-hatch:repeating-linear-gradient(135deg,transparent 0 4px,var(--vo-grid) 4px 5px);
+  --vo-ease:cubic-bezier(.65,0,.25,1); --vo-ease-io:cubic-bezier(.65,0,.25,1);
+  --vo-t-fast:.14s; --vo-t:.3s; --vo-t-slow:.44s}}
+:root:not([data-style="soft"])[data-theme="dark"]{
+  --vo-page:#111111; --vo-stage:#1c1c1c; --vo-surface:#262626; --vo-raised:#2c2c2c;
+  --vo-fg:#f2f2f2; --vo-fg2:#c9c9c9; --vo-muted:#c0c0c0; --vo-faint:#555555; --vo-rail:#414141; --vo-line:#333333; --vo-field-line:#424242; --vo-line-strong:#80807a; --vo-field-line-strong:#808080;
+  --vo-chip:#303030; --vo-hover:#373737; --vo-press:#3f3f3f; --vo-wash:#2c2c2c; --vo-row:color-mix(in srgb,var(--vo-fg) 5.5%,transparent);
+  --vo-soft:#323232; --vo-soft-h:#3a3a3a; --vo-soft-ring:inset 0 0 0 1px rgba(255,255,255,.04); --vo-dis:#737373;
+  --vo-accent:#d4f84a; --vo-on-accent:#121212; --vo-accent-fg:#d4f84a; --vo-accent-mark:#d4f84a; --vo-sel:color-mix(in srgb,var(--vo-accent) 10%,transparent);
+  --vo-ink:#f2f2f2; --vo-on-ink:#161616;
+  --vo-shadow:0 0 0 1px color-mix(in srgb,var(--vo-line) 50%,transparent);
+  --vo-shadow-pop:0 0 0 1px color-mix(in srgb,var(--vo-rail) 50%,transparent),0 16px 32px -14px rgba(0,0,0,.7);
+  --vo-shadow-toast:0 0 0 1px color-mix(in srgb,var(--vo-rail) 50%,transparent),0 12px 28px -14px rgba(0,0,0,.7);
+  --vo-shadow-lift:0 0 0 1px color-mix(in srgb,var(--vo-fg2) 50%,transparent);
+  --vo-grid:rgba(255,255,255,.07); --vo-tick:#55554f;
+  --vo-dis-hatch:repeating-linear-gradient(135deg,transparent 0 4px,var(--vo-grid) 4px 5px);
+  --vo-ease:cubic-bezier(.65,0,.25,1); --vo-ease-io:cubic-bezier(.65,0,.25,1);
+  --vo-t-fast:.14s; --vo-t:.3s; --vo-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(--vo-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(--vo-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(--vo-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(--vo-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vo-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(--vo-pick-on) 50%,transparent)}
+:root:not([data-style="soft"]) .bub:not(:where([data-style="soft"],[data-style="soft"] *)){background:var(--vo-chip);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vo-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(--vo-t-slow);animation-timing-function:var(--vo-ease);animation-fill-mode:backwards}
+:root:not([data-style="soft"]) .leave:not(:where([data-style="soft"],[data-style="soft"] *)){animation:bpout .26s var(--vo-ease) both}
+:root:not([data-style="soft"]) .chx-card.show:not(:where([data-style="soft"],[data-style="soft"] *)){animation:bpin .34s var(--vo-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(--vo-sans);font-size:14px;line-height:1.5;color:var(--vo-fg);-webkit-font-smoothing:antialiased}
+[data-c].wide{width:720px}

package/tool-call/tool-call.component.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** Any value a tool takes or returns. */
+export type Json = string | number | boolean | null | Json[] | {
+    [key: string]: Json;
+};
+/** The lifecycle of one call: queued waits, running spins, done shows its result. */
+export type ToolCallState = 'queued' | 'running' | 'done';
+/** One tool the agent called. */
+export interface ToolCallItem {
+    key: string;
+    /** The tool's server or namespace, like "billing". */
+    server?: string;
+    /** The tool's name, like "list_plan_changes". */
+    name: string;
+    /** The icon in front of the call. */
+    icon?: VoIconName;
+    /** queued waits, running spins, done shows the time it took and the output. */
+    state: ToolCallState;
+    /** How long it took, like "412 ms". Shown once it is done. */
+    duration?: string;
+    /** What the agent sent, shown as highlighted JSON. */
+    input?: Json;
+    /** What came back, shown once it is done. */
+    output?: Json;
+}
+export declare class ToolCallComponent implements OnChanges, OnDestroy {
+    /** The agent's message before the calls. */
+    message?: string | null;
+    /** The tools the agent called. */
+    calls: ToolCallItem[];
+    /** The agent's answer after the calls. It fades in once every call is done. */
+    reply?: string | null;
+    /** Keys of the calls that are open. Leave it out to let each call toggle itself. */
+    open?: string[];
+    /** The calls open at first when `open` is not controlled. */
+    defaultOpen: string[];
+    /** Emitted with the new set of open keys whenever a call is toggled. */
+    openChange: EventEmitter<string[]>;
+    readonly motion: ReducedMotionService;
+    /** The reply is laid out from the start and fades in a frame after the last call finishes. */
+    shown: boolean;
+    private openKeys;
+    private raf?;
+    ngOnChanges(changes: SimpleChanges): void;
+    private get done();
+    private updateShown;
+    isOpen(key: string): boolean;
+    toggle(key: string): void;
+    /** The status text swapped in the row: the duration once done, else the state. */
+    label(call: ToolCallItem): string;
+    /** Renders a JSON value as the same coloured HTML the Vanilla/React port shows. */
+    jsonHtml(value: Json): string;
+    private parts;
+    private esc;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolCallComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolCallComponent, "vo-tool-call", never, { "message": { "alias": "message"; "required": false; }; "calls": { "alias": "calls"; "required": false; }; "reply": { "alias": "reply"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; }, { "openChange": "openChange"; }, never, never, true, never>;
+}

package/tooltip/tooltip.component.d.ts

@@ -0,0 +1,89 @@
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import * as i0 from "@angular/core";
+export interface TooltipTool {
+    key: string;
+    icon: VoIconName;
+    /** The button's name, read out by screen readers. */
+    label: string;
+    /** The tooltip, when it should say more than the name. Defaults to the label. */
+    tip?: string;
+    /** A shortcut shown after the tip, like "⌘Z". */
+    kbd?: string;
+    onClick?: () => void;
+}
+export interface TooltipPerson {
+    key: string;
+    initials: string;
+    /** The avatar's colour, like 'var(--vo-av-l)'. */
+    color: string;
+    name: string;
+    /** The quiet line under the name, like "Design lead". */
+    role: string;
+    /** What they are doing now, like "Editing Pricing, frame 2". */
+    status: string;
+    /** Shows the agent's thinking dots instead of the green dot. */
+    working?: boolean;
+}
+interface TipAt {
+    x: number;
+    y: number;
+    label: string;
+    kbd?: string;
+}
+interface CardAt {
+    person: TooltipPerson;
+    left: number;
+    top: number;
+}
+/** A toolbar whose labels follow the pointer between buttons, with a richer card for people. */
+export declare class TooltipComponent implements AfterViewInit, OnDestroy {
+    /** The toolbar's buttons, in groups with a line between them. */
+    groups: TooltipTool[][];
+    /** Avatars at the end of the toolbar; hovering one shows a card. */
+    people: TooltipPerson[];
+    /** A quiet line under the toolbar. */
+    note?: string;
+    /** How long the person card waits before it shows. */
+    cardDelay: number;
+    private _openTip;
+    private _openCard;
+    /** Shows this tool's tip, by key, as if it were hovered. */
+    set openTip(key: string | null | undefined);
+    get openTip(): string | null | undefined;
+    /** Shows this person's card, by key, as if they were hovered. */
+    set openCard(key: string | null | undefined);
+    get openCard(): string | null | undefined;
+    root: ElementRef<HTMLDivElement>;
+    tipEl: ElementRef<HTMLDivElement>;
+    tipAt: TipAt | null;
+    tipShow: boolean;
+    card: CardAt | null;
+    cardShow: boolean;
+    private tipTimer?;
+    private cardTimer?;
+    private tipOverKey;
+    private cardOverKey;
+    private ready;
+    ink(color: string): string | undefined;
+    ngAfterViewInit(): void;
+    openTipFor(t: TooltipTool, e: Event): void;
+    focusTip(t: TooltipTool, e: FocusEvent): void;
+    leaveTip(): void;
+    private showTip;
+    private placeTip;
+    private hideTip;
+    private applyOpenTip;
+    private buttonFor;
+    openCardFor(person: TooltipPerson, e: Event): void;
+    focusCard(person: TooltipPerson, e: FocusEvent): void;
+    leaveCard(): void;
+    private openCardAt;
+    closeCard(): void;
+    private applyOpenCard;
+    private avatarFor;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "vo-tooltip", never, { "groups": { "alias": "groups"; "required": false; }; "people": { "alias": "people"; "required": false; }; "note": { "alias": "note"; "required": false; }; "cardDelay": { "alias": "cardDelay"; "required": false; }; "openTip": { "alias": "openTip"; "required": false; }; "openCard": { "alias": "openCard"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};