@ponchia/ui 0.12.0 → 0.14.0

package/dist/css/tool.css

@@ -0,0 +1 @@
+@layer bronto{:root{--radius-xl: 8px;--radius-lg: 6px;--radius-md: 4px;--radius-sm: 2px;--radius-pill: 999px;--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1rem;--space-lg: 1.35rem;--space-xl: 1.75rem;--space-2xl: 2.5rem;--space-0-5: 0.125rem;--space-0-75: 0.1875rem;--space-1-5: 0.375rem;--space-2-5: 0.625rem;--tap-target: max(44px,2.9rem);--tap-target-min: max(24px,1.6rem);--safe-area-top: env(safe-area-inset-top,0px);--safe-area-right: env(safe-area-inset-right,0px);--safe-area-bottom: env(safe-area-inset-bottom,0px);--safe-area-left: env(safe-area-inset-left,0px);--mono: 'JetBrains Mono','Fira Code','Cascadia Code','SF Mono',ui-monospace,monospace;--sans: 'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--dot-font: 'Doto',var(--mono);--display: var(--dot-font);--display-weight: 700;--display-weight-strong: 800;--text-2xs: 0.75rem;--text-xs: 0.8125rem;--text-sm: 0.875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.5rem;--tracking-wide: 0.14em;--tracking-wider: 0.22em;--ease-standard: cubic-bezier(0.2,0.8,0.2,1);--ease-spring: cubic-bezier(0.16,1,0.3,1);--ease-out: cubic-bezier(0.33,1,0.68,1);--duration-fast: 130ms;--duration-base: 200ms;--duration-slow: 360ms;--dot-size: 2px;--dot-gap: 14px;--z-base: 0;--z-raised: 10;--z-sticky: 20;--z-overlay: 30;--z-popover: 50;--z-toast: 60;--z-canvas: var(--z-base);--z-chrome: var(--z-sticky);--z-panel: 25;--z-modal: var(--z-overlay);--z-menu: var(--z-popover);--z-tooltip: 70;--z-navigation: 80;--ui-zoom: 1;--ui-px: 1px;--hairline: 1px;--focus-ring-width: 2px;--focus-ring-offset: 2px;--accent-1: color-mix(in oklch,var(--accent) 8%,var(--accent-ramp-end));--accent-2: color-mix(in oklch,var(--accent) 16%,var(--accent-ramp-end));--accent-3: color-mix(in oklch,var(--accent) 32%,var(--accent-ramp-end));--accent-4: color-mix(in oklch,var(--accent) 60%,var(--accent-ramp-end));--accent-5: var(--accent);--accent-6: var(--accent-strong);--surface-1: var(--bg);--surface-2: var(--bg-elevated);--surface-3: var(--panel);--surface-4: var(--panel-soft);--surface-5: var(--line);--surface-6: var(--line-strong);--bronto-color-bg: var(--bg);--bronto-color-surface: var(--panel);--bronto-color-surface-raised: var(--panel-strong);--bronto-color-border: var(--line);--bronto-color-border-strong: var(--line-strong);--bronto-color-text: var(--text);--bronto-color-text-muted: var(--text-dim);--bronto-color-action: var(--accent);--bronto-color-on-action: var(--button-text);--bronto-color-focus: var(--focus-ring);--bronto-color-success: var(--success);--bronto-color-warning: var(--warning);--bronto-color-danger: var(--danger);--bronto-color-info: var(--info);--surface: var(--panel);--surface-raised: var(--panel-strong);--surface-muted: var(--panel-soft);--border: var(--line);--border-strong: var(--line-strong)}:root,:root[data-theme='light']{color-scheme: light;--bg: #f4f4f2;--bg-elevated: #fbfbfa;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--panel: #ffffff;--panel-strong: #ffffff;--panel-soft: #ececea;--line: #d8d8d4;--line-strong: #a8a8a2;--text: #0a0a0a;--text-soft: #353533;--text-dim: #686863;--accent: #d71921;--accent-ramp-end: #ffffff;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--success: #2f7d4f;--success-soft: rgb(47,125,79,0.12);--warning: #806414;--warning-soft: rgb(128,100,20,0.13);--danger: #c01622;--danger-soft: rgb(192,22,34,0.1);--info: #1f63c4;--info-soft: rgb(31,99,196,0.12);--code-bg: rgb(10,10,10,0.05);--button-text: #ffffff;--field-dot: rgb(10,10,10,0.16);--field-dot-hot: rgb(10,10,10,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}@media (prefers-color-scheme: dark){:root:not([data-theme='light']){color-scheme: dark;--bg: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--accent-strong: color-mix(in srgb,var(--accent) 80%,#fff);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}}:root[data-theme='dark']{color-scheme: dark;--bg: #121212;--bg-elevated: #181818;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #1c1c1c;--panel-strong: #222222;--panel-soft: #242424;--line: #383838;--line-strong: #555555;--text: #e6e6e6;--text-soft: #c8c8c8;--text-dim: #a0a0a0;--accent: #ff3b41;--accent-ramp-end: #000000;--accent-strong: color-mix(in srgb,var(--accent) 80%,#fff);--accent-text: var(--accent-strong);--on-accent: var(--button-text);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--info: #6fb0e6;--info-soft: rgb(111,176,230,0.14);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}[data-density='compact']{--space-0-5: 0.1rem;--space-0-75: 0.15rem;--space-1-5: 0.3rem;--space-2-5: 0.5rem;--space-2xs: 0.2rem;--space-xs: 0.4rem;--space-sm: 0.6rem;--space-md: 0.8rem;--space-lg: 1.05rem;--space-xl: 1.35rem;--space-2xl: 1.9rem}[data-density='comfortable']{--space-0-5: 0.15rem;--space-0-75: 0.225rem;--space-1-5: 0.45rem;--space-2-5: 0.75rem;--space-2xs: 0.3rem;--space-xs: 0.6rem;--space-sm: 0.95rem;--space-md: 1.25rem;--space-lg: 1.7rem;--space-xl: 2.2rem;--space-2xl: 3.1rem}[data-ui-zoom]{--ui-px: calc(1px / max(var(--ui-zoom,1),0.15));--hairline: var(--ui-px);--focus-ring-width: calc(2 * var(--ui-px));--focus-ring-offset: calc(2 * var(--ui-px))}[data-contrast='high'],:root[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}@media (prefers-contrast: more){:root:root{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}}:root[data-theme='dark'][data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}@media (prefers-color-scheme: dark){:root:not([data-theme='light'])[data-surface='oled']{--bg: #000000;--bg-elevated: #0a0a0a;--panel: #101010;--panel-strong: #161616;--panel-soft: #1a1a1a}}@media print{:root:root:root:root{color-scheme: light;--text: #111;--text-soft: #2a2a2a;--text-dim: #555;--bg: #fff;--bg-elevated: #fff;--panel: #fff;--panel-strong: #fff;--panel-soft: #f7f7f7;--line: #d9d9d9;--line-strong: #b3b3b3;--success: #2f7d4f;--success-soft: rgb(47,125,79,0.12);--danger: #c01622;--danger-soft: rgb(192,22,34,0.1);--warning: #806414;--warning-soft: rgb(128,100,20,0.13);--info: #1f63c4;--info-soft: rgb(31,99,196,0.12);--accent: #d71921;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--accent-ramp-end: #ffffff;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--button-text: #ffffff;--on-accent: var(--button-text);--field-dot: rgb(17,17,17,0.16);--field-dot-hot: rgb(17,17,17,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--code-bg: rgb(17,17,17,0.05)}}@font-face{font-family: Doto;font-style: normal;font-weight: 400;font-display: swap;src: url('../../fonts/doto-400.woff2') format('woff2')}@font-face{font-family: Doto;font-style: normal;font-weight: 500;font-display: swap;src: url('../../fonts/doto-500.woff2') format('woff2')}@font-face{font-family: Doto;font-style: normal;font-weight: 600;font-display: swap;src: url('../../fonts/doto-600.woff2') format('woff2')}@font-face{font-family: Doto;font-style: normal;font-weight: 700;font-display: swap;src: url('../../fonts/doto-700.woff2') format('woff2')}@font-face{font-family: Doto;font-style: normal;font-weight: 800;font-display: swap;src: url('../../fonts/doto-800.woff2') format('woff2')}@font-face{font-family: Doto;font-style: normal;font-weight: 900;font-display: swap;src: url('../../fonts/doto-900.woff2') format('woff2')}@media (prefers-reduced-data: reduce){:root{--display: var(--mono);--dot-font: var(--mono)}}*,*::before,*::after{box-sizing: border-box}html{background: var(--bg);color: var(--text);font-family: var(--sans);font-size: 1rem;line-height: 1.55;scroll-behavior: smooth;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased}body{accent-color: var(--accent);background: var(--bg);color: var(--text);margin: 0;min-block-size: 100dvh;position: relative}:root{--scroll-offset: 6rem}main [id]{scroll-margin-block-start: var(--scroll-offset)}::selection{background: var(--accent);color: var(--button-text)}a{color: inherit;text-decoration: none}a,button,summary{-webkit-tap-highlight-color: transparent}button,input,select,textarea{font: inherit}img,svg{display: block;max-inline-size: 100%}p,li{color: var(--text-soft);line-height: 1.65}h1,h2,h3,h4{color: var(--text);font-family: var(--sans);font-weight: 650;letter-spacing: -0.02em;line-height: 1.2;margin: 0}h1{font-size: clamp(2rem,4vw,3rem)}h2{font-size: clamp(1.5rem,3vw,2rem)}h3{font-size: 1.25rem}h4{font-size: 1rem}strong,b{color: var(--text);font-weight: 700}code,kbd,samp{background: var(--code-bg);border: 1px solid var(--line);border-radius: var(--radius-sm);color: var(--text);font-family: var(--mono);font-size: 0.88em;padding: 0.1rem 0.36rem}pre{background: var(--code-bg);border: 1px solid var(--line);border-radius: var(--radius-md);font-family: var(--mono);overflow-x: auto;padding: 1rem 1.1rem}pre code{background: transparent;border: 0;padding: 0}hr{border: 0;border-block-start: 1px solid var(--line);margin: var(--space-lg) 0}::-webkit-scrollbar{block-size: 10px;inline-size: 10px}::-webkit-scrollbar-thumb{background: var(--line-strong);border: 2px solid var(--bg);border-radius: var(--radius-pill)}::-webkit-scrollbar-track{background: transparent}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: var(--focus-ring-offset)}.ui-muted{color: var(--text-dim)}.ui-mono{font-family: var(--mono)}.ui-display{font-family: var(--display);font-weight: var(--display-weight);text-transform: uppercase}.ui-visually-hidden{clip-path: inset(50%);block-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;inline-size: 1px}@media (forced-colors: active){.ui-progress__bar,.ui-dotbar i.is-on,.ui-dotspinner i{background: Highlight}.ui-dot,.ui-dot--accent,.ui-dot--success,.ui-dot--warning,.ui-dot--danger,.ui-switch__thumb{background: CanvasText}.ui-dot--live::after{border-color: CanvasText}.ui-switch input:checked + .ui-switch__track,.ui-segmented__option:has(input:checked){outline: 2px solid Highlight;outline-offset: -2px}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline: 2px solid Highlight}}@media print{html,body{background: #fff;color: #000}.ui-dotfield,.ui-toast-stack,.ui-app-rail,.ui-app-topbar,.ui-sitenav,.ui-themetoggle__button,.ui-sitemenu,.ui-spinner,.ui-dotloader,.ui-dotspinner,dialog.ui-modal::backdrop{display: none !important}*,*::before,*::after{box-shadow: none !important;text-shadow: none !important}.ui-card,.ui-panel,.ui-surface,.ui-alert,.ui-table-wrap{border: 1px solid #999}.ui-table-wrap,.ui-prose table,.ui-tabs__list,pre{overflow: visible !important}.ui-card,.ui-panel,.ui-alert,figure,blockquote,pre,tr{break-inside: avoid}:is(h1,h2,h3,h4,h5,h6){break-after: avoid}.ui-prose a[href^="http"]::after{content: " (" attr(href) ")";font-size: 0.85em;word-break: break-all}@page{margin: 18mm}}@keyframes pulseDot{0%,100%{opacity: 0.35;transform: scale(0.84)}50%{opacity: 1;transform: scale(1)}}@keyframes pulseRing{0%{opacity: 0.7;transform: scale(0.7)}100%{opacity: 0;transform: scale(1.3)}}@keyframes uiFadeIn{from{opacity: 0}to{opacity: 1}}@keyframes uiRise{from{opacity: 0;transform: translateY(10px)}to{opacity: 1;transform: translateY(0)}}@keyframes uiScrollReveal{0%{opacity: 0;transform: translateY(10px)}35%{opacity: 1}100%{opacity: 1;transform: translateY(0)}}@keyframes uiDotIn{0%{opacity: 0;transform: scale(0.2)}60%{opacity: 1;transform: scale(1.15)}100%{opacity: 1;transform: scale(1)}}@keyframes uiSpin{to{transform: rotate(360deg)}}@keyframes uiBlink{0%,45%{opacity: 1}55%,100%{opacity: 0.2}}@keyframes uiShimmer{from{background-position: 200% 0}to{background-position: -200% 0}}@keyframes uiMatrixReveal{from{clip-path: inset(0 100% 0 0)}to{clip-path: inset(0 0 0 0)}}@keyframes uiTrack{0%{inset-inline-start: -45%}100%{inset-inline-start: 100%}}@keyframes uiToastIn{from{opacity: 0;transform: translateY(12px) scale(0.98)}to{opacity: 1;transform: translateY(0) scale(1)}}@keyframes uiScrollGrow{to{transform: scaleX(1)}}.ui-animate-in{animation: uiRise var(--duration-slow) var(--ease-spring) both}.ui-animate-fade{animation: uiFadeIn var(--duration-base) var(--ease-standard) both}.ui-animate-dot{animation: uiDotIn var(--duration-base) var(--ease-spring) both}.ui-animate-matrix{animation: uiMatrixReveal var(--duration-slow) var(--ease-out) both}.ui-stagger > *{animation: uiRise var(--duration-slow) var(--ease-spring) both;animation-delay: calc(min(var(--i,0),6) * 60ms)}.ui-stagger--auto > *:nth-child(1){animation-delay: 0ms}.ui-stagger--auto > *:nth-child(2){animation-delay: 60ms}.ui-stagger--auto > *:nth-child(3){animation-delay: 120ms}.ui-stagger--auto > *:nth-child(4){animation-delay: 180ms}.ui-stagger--auto > *:nth-child(5){animation-delay: 240ms}.ui-stagger--auto > *:nth-child(6){animation-delay: 300ms}.ui-stagger--auto > *:nth-child(n + 7){animation-delay: 360ms}@media (prefers-reduced-motion: no-preference) and (scripting: enabled){.ui-reveal{opacity: 0;transform: translateY(14px);transition: opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.ui-reveal.is-visible{opacity: 1;transform: none}}.ui-skeleton{background: linear-gradient( 90deg,var(--panel-soft) 25%,color-mix(in srgb,var(--panel-soft) 55%,var(--line-strong)) 50%,var(--panel-soft) 75% );background-size: 200% 100%;animation: uiShimmer 1.4s linear infinite;border-radius: var(--radius-sm);color: transparent;min-block-size: 0.8em}.ui-spinner{animation: uiSpin 0.7s linear infinite;border: 2px solid var(--line);border-radius: 50%;border-block-start-color: var(--accent);display: inline-block;block-size: 1.1rem;inline-size: 1.1rem}.ui-caret::after{animation: uiBlink 1.1s steps(1) infinite;content: '▮';margin-inline-start: 0.1em}.ui-scroll-progress{background: var(--accent);block-size: 3px;inset-block-start: 0;inset-inline: 0;position: fixed;transform: scaleX(0);transform-origin: 0 50%;z-index: var(--z-overlay)}[dir='rtl'] .ui-scroll-progress{transform-origin: 100% 50%}@media (forced-colors: active){.ui-spinner{border-color: CanvasText;border-block-start-color: Highlight}.ui-scroll-progress{background: Highlight}.ui-skeleton{border: 1px solid CanvasText}}@supports (animation-timeline: scroll()){@media (prefers-reduced-motion: no-preference){.ui-scroll-progress{animation: uiScrollGrow linear;animation-timeline: scroll(root block)}}}@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){.ui-scroll-reveal{animation: uiScrollReveal linear both;animation-timeline: view();animation-range: entry 0% entry 100%}}}.ui-vt{view-transition-name: var(--ui-vt-name,none)}@media (prefers-reduced-motion: no-preference){::view-transition-old(root),::view-transition-new(root){animation-duration: var(--duration-base);animation-timing-function: var(--ease-standard)}}@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation: none !important}}@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto}*,*::before,*::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;animation-delay: 0s !important;transition-duration: 0.01ms !important}.ui-skeleton{animation: none;background: var(--panel-soft);background-size: auto}.ui-reveal{opacity: 1 !important;transform: none !important}}.ui-dotgrid{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-position: 0 0;background-size: var(--dot-gap) var(--dot-gap)}.ui-dotgrid--accent{--dot-color: var(--field-dot-accent)}.ui-dotgrid--dense{--dot-gap: 8px}.ui-dotfield{--_dot: var(--dot-color,var(--field-dot));background-image: radial-gradient(var(--_dot) var(--dot-size),transparent var(--dot-size));background-size: var(--dot-gap) var(--dot-gap);inset: 0;mask-image: radial-gradient(ellipse at 50% 0%,#000 30%,transparent 78%);pointer-events: none;position: fixed;z-index: var(--z-base)}.ui-dotrule{background-image: radial-gradient(var(--line-strong) 1.4px,transparent 1.4px);background-position: 0 50%;background-size: 9px 9px;border: 0;block-size: 3px;margin: var(--space-md) 0;inline-size: 100%}.ui-dotmatrix{display: grid;gap: var(--dotmatrix-gap,0.5rem);grid-template-columns: repeat(var(--dotmatrix-cols,12),var(--dotmatrix-dot,minmax(0,1fr)))}.ui-dotmatrix__cell{aspect-ratio: 1;background: var(--field-dot);border-radius: var(--dotmatrix-dot-radius,50%)}.ui-dotmatrix__cell--hot{background: var(--field-dot-hot);box-shadow: 0 0 var(--dotmatrix-glow,0) var(--field-dot-hot)}.ui-dotmatrix__cell--accent{background: var(--field-dot-accent);box-shadow: 0 0 var(--dotmatrix-glow,0) var(--field-dot-accent)}.ui-dotmatrix--reveal .ui-dotmatrix__cell{animation: dotmatrixCellOn var(--duration-base) var(--ease-out) both;animation-delay: calc(var(--i,0) * var(--dotmatrix-reveal-step,3ms))}@keyframes dotmatrixCellOn{from{opacity: 0;transform: scale(0.35)}}.ui-dotmatrix--pulse{animation: dotmatrixPulse 1.8s var(--ease-standard) infinite}@keyframes dotmatrixPulse{50%{opacity: var(--dotmatrix-pulse-min,0.55);transform: scale(0.94)}}.ui-icon{display: inline-block;flex: 0 0 auto;inline-size: var(--icon-size,1em);block-size: var(--icon-size,1em);background: currentcolor;vertical-align: -0.125em;-webkit-mask: var(--icon-mask) center / contain no-repeat;mask: var(--icon-mask) center / contain no-repeat}.ui-dot{--ui-dot-color: var(--text-dim);background: var(--ui-dot-color);border-radius: 50%;display: inline-block;flex: 0 0 auto;block-size: 0.55rem;inline-size: 0.55rem}.ui-dot--accent{--ui-dot-color: var(--accent)}.ui-dot--success{--ui-dot-color: var(--success)}.ui-dot--warning{--ui-dot-color: var(--warning)}.ui-dot--danger{--ui-dot-color: var(--danger)}.ui-dot--info{--ui-dot-color: var(--info)}.ui-dot--live{box-shadow: 0 0 0 0 color-mix(in srgb,var(--ui-dot-color) 70%,transparent);position: relative}.ui-dot--live:not( .ui-dot--accent,.ui-dot--success,.ui-dot--warning,.ui-dot--danger,.ui-dot--info ){--ui-dot-color: var(--success)}.ui-dot--live::after{animation: pulseRing 1.8s var(--ease-out) infinite;border: 1px solid var(--ui-dot-color);border-radius: 50%;content: '';inset: -3px;position: absolute}.ui-status{align-items: center;color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-dotloader{align-items: center;display: inline-flex;gap: 0.32rem}.ui-dotloader span{animation: pulseDot 1s var(--ease-standard) infinite;background: var(--accent);border-radius: 50%;block-size: 0.42rem;inline-size: 0.42rem}.ui-dotloader span:nth-child(2){animation-delay: 0.16s}.ui-dotloader span:nth-child(3){animation-delay: 0.32s}.ui-dotspinner{--ds-box: 1.6rem;--ds-dot: 0.26rem;animation: uiSpin 1s steps(8) infinite;display: inline-block;flex: 0 0 auto;block-size: var(--ds-box);position: relative;inline-size: var(--ds-box)}.ui-dotspinner i{background: var(--accent);border-radius: 50%;block-size: var(--ds-dot);inset: 0;margin: auto;position: absolute;inline-size: var(--ds-dot)}.ui-dotspinner i:nth-child(1){opacity: 1;transform: rotate(0deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(2){opacity: 0.85;transform: rotate(45deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(3){opacity: 0.7;transform: rotate(90deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(4){opacity: 0.56;transform: rotate(135deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(5){opacity: 0.44;transform: rotate(180deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(6){opacity: 0.34;transform: rotate(225deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(7){opacity: 0.25;transform: rotate(270deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(8){opacity: 0.16;transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2))}.ui-dotspinner i:nth-child(n + 9){display: none}.ui-dotspinner--sm{--ds-box: 1.05rem;--ds-dot: 0.18rem}.ui-dotspinner--lg{--ds-box: 2.6rem;--ds-dot: 0.42rem}.ui-dotbar{display: flex;gap: 3px}.ui-dotbar i{background: var(--field-dot);border-radius: var(--radius-sm);flex: 1;block-size: 0.5rem}.ui-dotbar i.is-on{background: var(--accent)}.ui-dotbar--indeterminate i{animation: pulseDot 1.1s var(--ease-standard) infinite}.ui-dotbar--indeterminate i:nth-child(2){animation-delay: 0.09s}.ui-dotbar--indeterminate i:nth-child(3){animation-delay: 0.18s}.ui-dotbar--indeterminate i:nth-child(4){animation-delay: 0.27s}.ui-dotbar--indeterminate i:nth-child(5){animation-delay: 0.36s}.ui-dotbar--indeterminate i:nth-child(6){animation-delay: 0.45s}.ui-dotbar--indeterminate i:nth-child(7){animation-delay: 0.54s}.ui-dotbar--indeterminate i:nth-child(n + 8){animation-delay: 0.63s}.ui-waffle{display: grid;gap: var(--waffle-gap,0.18em);grid-template-columns: repeat(var(--waffle-cols,10),1fr);inline-size: var(--waffle-size,7em)}.ui-waffle i{aspect-ratio: 1;background: var(--field-dot);border-radius: var(--dotmatrix-dot-radius,50%)}.ui-waffle i.is-on{background: var(--field-dot-accent);box-shadow: 0 0 var(--dotmatrix-glow,0) var(--field-dot-accent)}.ui-activity{display: grid;gap: var(--activity-gap,0.18em);grid-auto-columns: var(--activity-cell,0.82em);grid-auto-flow: column;grid-template-rows: repeat(var(--activity-rows,7),1fr)}.ui-activity i{aspect-ratio: 1;background: var(--field-dot);border-radius: var(--dotmatrix-dot-radius,2px)}.ui-activity i[data-level='1']{background: color-mix(in oklab,var(--field-dot-accent) 30%,var(--field-dot))}.ui-activity i[data-level='2']{background: color-mix(in oklab,var(--field-dot-accent) 55%,var(--field-dot))}.ui-activity i[data-level='3']{background: color-mix(in oklab,var(--field-dot-accent) 78%,var(--field-dot))}.ui-activity i[data-level='4']{background: var(--field-dot-accent)}.ui-level{block-size: var(--level-height,4em);display: flex;flex-direction: column-reverse;gap: var(--level-gap,2px);inline-size: var(--level-size,0.7em)}.ui-level i{background: var(--field-dot);border-radius: var(--radius-sm);flex: 1}.ui-level i.is-on{background: var(--accent);box-shadow: 0 0 var(--dotmatrix-glow,0) var(--accent)}.ui-level--warn i.is-on{background: var(--warning)}.ui-level--danger i.is-on{background: var(--danger)}.ui-dotgauge{--_v: var(--v,0);--_sweep: var(--gauge-sweep,270deg);aspect-ratio: 1;background: conic-gradient( from var(--gauge-from,135deg),var(--field-dot-accent) calc(var(--_v) * var(--_sweep)),var(--field-dot) calc(var(--_v) * var(--_sweep)) var(--_sweep),transparent var(--_sweep) );border-radius: 50%;inline-size: var(--gauge-size,5em);-webkit-mask: radial-gradient(closest-side,transparent 58%,#000 59%),radial-gradient(circle,#000 34%,transparent 36%) 0 0 / var(--gauge-dot,0.5em) var(--gauge-dot,0.5em);-webkit-mask-composite: source-in;mask: radial-gradient(closest-side,transparent 58%,#000 59%),radial-gradient(circle,#000 34%,transparent 36%) 0 0 / var(--gauge-dot,0.5em) var(--gauge-dot,0.5em);mask-composite: intersect}.ui-readout{align-items: flex-end;display: inline-flex;gap: var(--readout-gap,0.12em)}.ui-readout__spacer{display: inline-block;inline-size: var(--readout-space,0.5em)}.ui-halftone{-webkit-mask: radial-gradient(circle,#000 var(--halftone-dot,38%),transparent calc(var(--halftone-dot,38%) + 1%)) 0 0 / var(--halftone-gap,0.5em) var(--halftone-gap,0.5em);mask: radial-gradient(circle,#000 var(--halftone-dot,38%),transparent calc(var(--halftone-dot,38%) + 1%)) 0 0 / var(--halftone-gap,0.5em) var(--halftone-gap,0.5em)}.ui-dotfit{container: dotfit / inline-size}@container dotfit (inline-size < 18rem){.ui-dotfit .ui-dotgrid{--dot-gap: 8px}.ui-dotfit .ui-activity{--activity-cell: 0.6em}.ui-dotfit .ui-waffle{--waffle-size: 5em}}@media (scripting: enabled){.ui-matrix{clip-path: inset(0 100% 0 0);transition: clip-path var(--duration-slow) var(--ease-out)}.ui-matrix.is-in{clip-path: inset(0 0 0 0)}}@media (prefers-reduced-motion: reduce){.ui-dot--live::after,.ui-dotloader span,.ui-dotspinner,.ui-dotbar--indeterminate i,.ui-dotmatrix--reveal .ui-dotmatrix__cell,.ui-dotmatrix--pulse{animation: none}.ui-dotspinner i{opacity: 0.6}.ui-matrix{clip-path: none}}@media (forced-colors: active){.ui-dot--success{--ui-dot-color: LinkText;forced-color-adjust: none}.ui-dot--warning{--ui-dot-color: Mark;forced-color-adjust: none}.ui-dot--danger{--ui-dot-color: Highlight;forced-color-adjust: none}.ui-dot--info{--ui-dot-color: ButtonText;forced-color-adjust: none}.ui-dot--accent{--ui-dot-color: LinkText;forced-color-adjust: none}.ui-dot--live:not( .ui-dot--accent,.ui-dot--success,.ui-dot--warning,.ui-dot--danger,.ui-dot--info ){--ui-dot-color: LinkText;forced-color-adjust: none}.ui-icon{forced-color-adjust: none;background: CanvasText}.ui-dotmatrix__cell--hot{forced-color-adjust: none;background: Highlight}.ui-dotmatrix__cell--accent{forced-color-adjust: none;background: LinkText}.ui-waffle i.is-on,.ui-level i.is-on{forced-color-adjust: none;background: LinkText}.ui-level--warn i.is-on{background: Mark}.ui-level--danger i.is-on{background: Highlight}.ui-activity i[data-level='1'],.ui-activity i[data-level='2'],.ui-activity i[data-level='3'],.ui-activity i[data-level='4']{forced-color-adjust: none;background: CanvasText}.ui-dotgauge{forced-color-adjust: none}}@media print{.ui-dotmatrix__cell,.ui-dotbar i,.ui-dot,.ui-icon,.ui-waffle i,.ui-activity i,.ui-level i,.ui-dotgauge{-webkit-print-color-adjust: exact;print-color-adjust: exact}}.ui-meta{align-items: center;color: var(--text-dim);display: flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.55rem;letter-spacing: var(--tracking-wide);list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-meta__item{align-items: center;display: inline-flex;gap: 0.55rem}.ui-meta__item:not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}.ui-prose{min-inline-size: 0;color: var(--text-soft);font-size: var(--text-base);line-height: 1.7;overflow-wrap: break-word;--prose-measure: 72ch}.ui-prose > *{margin-block: 0;max-inline-size: var(--prose-measure)}.ui-prose > * + *{margin-block-start: var(--space-md)}.ui-prose > * + :is(h1,h2,h3,h4,h5,h6){margin-block-start: var(--space-2xl)}.ui-prose > :is(figure,pre,table,hr,.ui-dotrule){max-inline-size: none}.ui-prose :is(h1,h2,h3,h4,h5,h6){color: var(--text);font-family: var(--sans);line-height: 1.12;text-wrap: balance}.ui-prose h1{font-size: var(--text-xl);letter-spacing: 0;text-transform: none}.ui-prose h2{font-size: var(--text-lg);letter-spacing: 0;padding-block-end: 0.3rem;border-block-end: 1px solid var(--line);text-transform: none}.ui-prose h3{font-size: var(--text-lg)}.ui-prose :is(h4,h5,h6){font-size: var(--text-base);letter-spacing: 0;text-transform: none}.ui-prose :is(h5,h6){color: var(--text-dim)}.ui-prose :is(h1,h2,h3,h4,h5,h6)[id]{scroll-margin-block-start: var(--scroll-offset)}.ui-prose :is(p,ul,ol,dl,blockquote,figure,pre,table){font-size: inherit}.ui-prose a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 55%,transparent);text-decoration-thickness: 1px;text-underline-offset: 0.22rem;transition: color var(--duration-fast) var(--ease-standard),text-decoration-color var(--duration-fast) var(--ease-standard)}.ui-prose strong{color: var(--text)}.ui-prose mark:not(.ui-mark){background: var(--accent-soft);color: var(--text);padding: 0.02em 0.22em}.ui-prose small{font-size: var(--text-xs)}.ui-prose abbr[title]{text-decoration: underline dotted;text-underline-offset: 0.2rem}.ui-prose :is(sub,sup){font-size: 0.72em}@media (hover: hover){.ui-prose a:hover{color: var(--accent-text);text-decoration-color: var(--accent)}}.ui-prose :is(ul,ol){padding-inline-start: 1.4rem}.ui-prose li + li{margin-block-start: 0.4rem}.ui-prose li::marker{color: var(--accent-text)}.ui-prose ul{list-style: square}.ui-prose :is(ul,ol) :is(ul,ol){margin-block-start: 0.4rem}.ui-prose li:has(> input[type='checkbox']){list-style: none;margin-inline-start: -1.4rem}.ui-prose li > input[type='checkbox']{accent-color: var(--accent);margin-inline-end: 0.4rem}.ui-prose blockquote{border-inline-start: 2px solid var(--accent);color: var(--text-dim);font-style: normal;padding-inline-start: var(--space-md)}.ui-prose blockquote > * + *{margin-block-start: var(--space-xs)}.ui-prose dt{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-2xs);font-weight: 700;letter-spacing: 0;text-transform: none}.ui-prose dd{margin-inline-start: 0;padding-block: 0.16rem 0.6rem}.ui-prose dd + dt{border-block-start: 1px solid var(--line);padding-block-start: 0.6rem}.ui-prose :not(pre) > code{font-size: 0.88em}.ui-prose pre{font-size: var(--text-sm);line-height: 1.6;overflow-x: auto}.ui-prose hr{background-image: radial-gradient(var(--line-strong) 1.4px,transparent 1.4px);background-position: 0 50%;background-size: 9px 9px;block-size: 3px;border: 0;margin-block: var(--space-xl)}.ui-prose :is(img,video,svg){block-size: auto;border-radius: var(--radius-sm);max-inline-size: 100%}.ui-prose figure{display: grid;gap: 0.5rem;justify-items: start}.ui-prose figcaption{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-2xs);letter-spacing: 0;text-transform: none}.ui-prose table{border: 1px solid var(--line);border-collapse: collapse;border-radius: var(--radius-md);display: block;font-family: var(--sans);font-size: var(--text-sm);inline-size: 100%;overflow-x: auto}.ui-prose :is(th,td){border-block-end: 1px solid var(--line);padding: 0.6rem 0.8rem;text-align: start;vertical-align: top}.ui-prose th{background: var(--panel);color: var(--text-dim);font-size: var(--text-2xs);font-weight: 700;letter-spacing: 0;text-transform: none}.ui-prose td{color: var(--text-soft)}.ui-prose tbody tr:last-child :is(th,td){border-block-end: 0}.ui-prose--compact{line-height: 1.55}.ui-prose--compact > * + *{margin-block-start: var(--space-sm)}.ui-prose--compact > * + :is(h1,h2,h3,h4,h5,h6){margin-block-start: var(--space-lg)}.ui-prose--blocks{--prose-measure: none;--prose-block: 3px;--prose-heading-lead: 18px;--prose-list-column: 24px;color: var(--text);line-height: 1.5}.ui-prose--blocks > *,.ui-prose--blocks > * + *,.ui-prose--blocks > * + :is(h1,h2,h3,h4,h5,h6),.ui-prose--blocks li,.ui-prose--blocks li + li,.ui-prose--blocks li > *,.ui-prose--blocks :is(ul,ol) :is(ul,ol),.ui-prose--blocks blockquote > *,.ui-prose--blocks blockquote > * + *{margin-block: 0}.ui-prose--blocks > :not(ul,ol),.ui-prose--blocks li{padding-block: var(--prose-block)}.ui-prose--blocks li:has(> :is(ul,ol)){padding-block-end: 0}.ui-prose--blocks li > :is(ul,ol){padding-block-start: var(--prose-block)}.ui-prose--blocks :is(h1,h2,h3,h4,h5,h6){padding-block: var(--prose-heading-lead) var(--prose-block);border: 0;font-size: 1em;font-weight: 600;line-height: 1.25}.ui-prose--blocks h1{font-size: 1.6em}.ui-prose--blocks h2{font-size: 1.3em}.ui-prose--blocks h3{font-size: 1.15em}.ui-prose--blocks :is(ul,ol){padding-inline-start: var(--prose-list-column)}.ui-prose--blocks ul{list-style: disc}.ui-prose--blocks ul ul{list-style: circle}.ui-prose--blocks ul ul ul{list-style: square}.ui-prose--blocks li::marker{color: inherit}.ui-prose--blocks li:has(> input[type='checkbox'],> p > input[type='checkbox']){margin-inline-start: calc(-1 * var(--prose-list-column));padding-block: 10px;list-style: none}.ui-prose--blocks :is(li,li > p):has(> input[type='checkbox']){display: flex;align-items: flex-start}.ui-prose--blocks :is(li,li > p) > input[type='checkbox']{flex: none;inline-size: 20px;block-size: 20px;margin: 2px 6px 0}@media (pointer: coarse){.ui-prose--blocks li:has(> input[type='checkbox'],> p > input[type='checkbox']){padding-block: 16px}.ui-prose--blocks :is(li,li > p) > input[type='checkbox']{margin-inline: 12px}}.ui-prose--blocks blockquote{margin-inline: 0}.ui-prose--blocks blockquote > *{line-height: inherit}.ui-quote{color: var(--text);display: grid;font-family: var(--sans);font-size: var(--text-xl);font-weight: var(--display-weight);gap: var(--space-sm);line-height: 1.2;margin-block: var(--space-xl);max-inline-size: 40ch;text-wrap: balance}.ui-quote::before{background: var(--accent);block-size: 2px;content: '';inline-size: 2.5rem}.ui-quote__cite{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-2xs);font-style: normal;letter-spacing: 0;text-transform: none}.ui-stack{min-inline-size: 0;grid-template-columns: minmax(0,1fr);display: grid;gap: var(--stack-gap,var(--space-md))}.ui-cluster{align-items: center;display: flex;flex-wrap: wrap;gap: var(--cluster-gap,var(--space-xs))}.ui-cluster--between{justify-content: space-between}.ui-grid{display: grid;gap: var(--grid-gap,var(--space-md));grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--grid-min,16rem)),1fr))}.ui-sidebar{display: flex;flex-wrap: wrap;gap: var(--sidebar-gap,var(--space-md))}.ui-sidebar > :first-child{flex-basis: var(--sidebar-width,16rem);flex-grow: 1}.ui-sidebar > :last-child{flex-basis: 0;flex-grow: 999;min-inline-size: var(--sidebar-min,60%)}.ui-switcher{display: flex;flex-wrap: wrap;gap: var(--switcher-gap,var(--space-md))}.ui-switcher > *{flex-basis: calc((var(--switcher-min,24rem) - 100%) * 999);flex-grow: 1}.ui-center{box-sizing: content-box;margin-inline: auto;max-inline-size: var(--center-max,64rem);padding-inline: var(--center-gutter,var(--space-md))}.ui-ratio{aspect-ratio: var(--ratio,16 / 9)}.ui-ratio > :first-child{block-size: 100%;inline-size: 100%;object-fit: cover}.ui-cq{container: bronto / inline-size}@container bronto (max-inline-size: 34rem){.ui-grid{--grid-min: 100%}}.ui-surface,.ui-card,.ui-panel{background: var(--panel);border: 1px solid var(--line)}.ui-card,.ui-panel{border-radius: var(--radius-lg);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-card{transition: border-color var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}.ui-panel{background: var(--panel-strong)}.ui-card--accent{border-color: var(--accent)}.ui-card--interactive:focus-within{border-color: var(--line-strong)}.ui-card__head,.ui-panel__head{align-items: flex-start;display: flex;gap: var(--space-sm);justify-content: space-between}.ui-divider{border: 0;border-block-start: 1px solid var(--line);margin: 0}.ui-statgrid,.ui-app-metrics{display: grid;gap: var(--space-md);grid-template-columns: repeat(auto-fit,minmax(min(100%,11rem),1fr))}@container bronto (max-inline-size: 30rem){.ui-statgrid,.ui-app-metrics{grid-template-columns: 1fr}}.ui-stat,.ui-app-metric{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: 0.4rem;min-inline-size: 0;padding: var(--space-md)}.ui-stat__label,.ui-app-metric__label{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-2xs);letter-spacing: 0;text-transform: none}.ui-stat__value,.ui-app-metric__value{color: var(--text);font-family: var(--sans);font-size: 1.9rem;font-variant-numeric: tabular-nums;font-weight: var(--display-weight-strong);letter-spacing: 0;line-height: 1.05;overflow-wrap: anywhere}.ui-stat__delta,.ui-app-metric__delta{font-family: var(--sans);font-size: var(--text-xs)}.ui-stat__delta.is-pos,.ui-app-metric__delta.is-pos{color: var(--success)}.ui-stat__delta.is-neg,.ui-app-metric__delta.is-neg{color: var(--danger)}.ui-stat__delta.is-pos::before,.ui-app-metric__delta.is-pos::before{content: '▲ ';font-size: 0.85em}.ui-stat__delta.is-neg::before,.ui-app-metric__delta.is-neg::before{content: '▼ ';font-size: 0.85em}.ui-num{display: inline-block;font-variant-numeric: tabular-nums;text-align: end}.ui-num--pos{color: var(--success)}.ui-num--neg{color: var(--danger)}.ui-num--muted{color: var(--text-dim)}.ui-delta{align-items: baseline;color: var(--text-soft);display: inline-flex;font-variant-numeric: tabular-nums;gap: 0.2em}.ui-delta::before{font-size: 0.85em}.ui-delta--up{color: var(--success)}.ui-delta--up::before{content: '▲'}.ui-delta--down{color: var(--danger)}.ui-delta--down::before{content: '▼'}.ui-delta--flat{color: var(--text-dim)}.ui-delta--flat::before{content: '—'}.ui-delta--invert.ui-delta--up{color: var(--danger)}.ui-delta--invert.ui-delta--down{color: var(--success)}.ui-eyebrow{color: var(--accent-text);font-family: var(--sans);font-size: var(--text-xs);font-weight: 700;letter-spacing: 0;margin: 0;text-transform: none}.ui-eyebrow--muted{color: var(--text-dim)}.ui-eyebrow--sm{font-size: var(--text-2xs)}.ui-button{align-items: center;background: var(--accent);border: 1px solid var(--accent);border-radius: var(--radius-md);color: var(--button-text);cursor: pointer;display: inline-flex;font-family: var(--sans);font-size: var(--text-sm);font-weight: 600;gap: 0.45rem;justify-content: center;letter-spacing: 0;line-height: 1;min-block-size: 2.4rem;min-inline-size: 2.4rem;padding: 0.66rem 1rem;text-transform: none;transition: background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}.ui-button--ghost{background: transparent;border-color: var(--line-strong);color: var(--text)}.ui-button--subtle{background: var(--panel-soft);border-color: var(--line);color: var(--text)}.ui-button--danger{background: var(--danger);border-color: var(--danger);color: var(--button-text)}.ui-button--icon{aspect-ratio: 1;min-inline-size: 2.4rem;padding: 0}.ui-button--sm{font-size: var(--text-xs);gap: 0.3rem;min-block-size: 1.9rem;min-inline-size: 1.9rem;padding: 0.4rem 0.66rem}.ui-button--lg{font-size: var(--text-base);gap: 0.55rem;min-block-size: 2.9rem;min-inline-size: 2.9rem;padding: 0.85rem 1.4rem}.ui-button--dense{gap: 0.25rem;min-block-size: var(--tap-target-min);min-inline-size: var(--tap-target-min);padding: 0.2rem 0.35rem}.ui-button--dense.ui-button--icon{padding: 0}.ui-button__label{min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-button--icon .ui-button__label{clip-path: inset(50%);block-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;inline-size: 1px}.ui-button:disabled,.ui-button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-button[aria-disabled='true'],.ui-link[aria-disabled='true']{pointer-events: none}.ui-link[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-button:active{transform: translateY(1px)}.ui-button[aria-busy='true']{cursor: progress;pointer-events: none}.ui-button[aria-busy='true']::before{animation: uiSpin 0.6s linear infinite;block-size: 0.9em;border: 2px solid currentcolor;border-block-start-color: transparent;border-radius: var(--radius-pill);content: '';flex: none;inline-size: 0.9em}@media (prefers-reduced-motion: reduce){.ui-button[aria-busy='true']::before{border-block-start-color: currentcolor}}.ui-link{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 55%,transparent);text-decoration-thickness: 1px;text-underline-offset: 0.22rem;transition: color var(--duration-fast) var(--ease-standard),text-decoration-color var(--duration-fast) var(--ease-standard)}.ui-link--arrow,.ui-link--cta{align-items: center;display: inline-flex;gap: 0.4rem;text-decoration: none}.ui-link--cta{color: var(--accent-text);font-family: var(--sans);font-weight: 700;letter-spacing: 0;text-transform: none}.ui-link--arrow::after,.ui-link--cta::after{border-inline-end: 1px solid currentcolor;border-block-start: 1px solid currentcolor;content: '';block-size: 0.42rem;transform: rotate(45deg);transition: transform var(--duration-fast) var(--ease-standard);inline-size: 0.42rem}[dir='rtl'] .ui-link--arrow::after,[dir='rtl'] .ui-link--cta::after{transform: rotate(-45deg)}@media (pointer: coarse){.ui-link--arrow,.ui-link--cta{min-block-size: var(--tap-target-min)}}.ui-chip{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--sans);font-size: var(--text-2xs);gap: 0.36rem;letter-spacing: 0;line-height: 1;min-block-size: 1.7rem;padding: 0.32rem 0.55rem;text-transform: none}.ui-chip--accent{color: var(--text-soft);border-color: var(--accent)}.ui-chip--dense{min-block-size: 1.25rem;padding: 0.15rem 0.4rem}.ui-chip--dense:is(button,a,[role='button']){min-block-size: var(--tap-target-min);min-inline-size: var(--tap-target-min)}@media (pointer: coarse){.ui-chip--dense:is(button,a,[role='button']){min-block-size: var(--tap-target);min-inline-size: var(--tap-target)}}.ui-badge{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--sans);font-size: var(--text-2xs);font-weight: 700;gap: 0.34rem;letter-spacing: 0;line-height: 1;padding: 0.28rem 0.5rem;text-transform: none}.ui-badge--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 45%,var(--line))}.ui-badge--success{background: var(--success-soft);border-color: color-mix(in srgb,var(--success) 40%,var(--line))}.ui-badge--warning{background: var(--warning-soft);border-color: color-mix(in srgb,var(--warning) 40%,var(--line))}.ui-badge--danger{background: var(--danger-soft);border-color: color-mix(in srgb,var(--danger) 40%,var(--line))}.ui-badge--info{background: var(--info-soft);border-color: color-mix(in srgb,var(--info) 40%,var(--line))}.ui-badge--muted{background: transparent;border-color: var(--line);color: var(--text-dim)}.ui-badge--dot::before{background: var(--text-soft);border-radius: 50%;content: '';flex: 0 0 auto;block-size: 0.4rem;inline-size: 0.4rem}.ui-badge--accent.ui-badge--dot::before{background: var(--accent)}.ui-badge--success.ui-badge--dot::before{background: var(--success)}.ui-badge--warning.ui-badge--dot::before{background: var(--warning)}.ui-badge--danger.ui-badge--dot::before{background: var(--danger)}.ui-badge--info.ui-badge--dot::before{background: var(--info)}.ui-key-value{display: grid;gap: 0.55rem;margin: 0}.ui-key-value div{border-block-start: 1px solid var(--line);display: grid;gap: 0.16rem;padding-block-start: 0.6rem}.ui-key-value dt{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-2xs);font-weight: 700;letter-spacing: 0;line-height: 1;text-transform: none}.ui-key-value dd{color: var(--text);font-family: var(--sans);margin: 0;min-inline-size: 0;overflow-wrap: anywhere}@media (hover: hover){.ui-card:hover{border-color: var(--line-strong)}.ui-card--interactive:hover{box-shadow: var(--shadow-raised);transform: translateY(-2px)}.ui-button:hover{background: var(--accent-strong);border-color: var(--accent-strong)}.ui-button--ghost:hover,.ui-button--subtle:hover{background: var(--panel-soft);border-color: var(--accent);color: var(--text)}.ui-button--danger:hover{background: color-mix(in srgb,var(--danger) 84%,#000)}.ui-link:hover{color: var(--accent-text);text-decoration-color: var(--accent)}.ui-link--arrow:hover::after,.ui-link--cta:hover::after{transform: translateX(0.14rem) rotate(45deg)}[dir='rtl'] .ui-link--arrow:hover::after,[dir='rtl'] .ui-link--cta:hover::after{transform: translateX(-0.14rem) rotate(-45deg)}.ui-chip--accent:hover{background: var(--accent-soft)}}@media (pointer: coarse){.ui-button{min-block-size: var(--tap-target);min-inline-size: var(--tap-target)}.ui-button--icon{min-inline-size: var(--tap-target)}}.ui-empty-state,.ui-app-empty-state{border: 1px dashed var(--line-strong);border-radius: var(--radius-md);color: var(--text-dim);padding: var(--space-lg);text-align: center}.ui-empty-state p,.ui-app-empty-state p{color: var(--text-dim);margin: 0.3rem 0 0}.ui-empty-state__glyph{display: block;font-size: 1.5rem;line-height: 1;opacity: 0.5}.ui-empty-state__lead{color: var(--text);margin: 0}.ui-empty-state__hint{font-size: var(--text-2xs);margin: 0;opacity: 0.8}.ui-empty-state--invite{align-items: center;border: 0;display: flex;flex-direction: column;gap: var(--space-2xs);justify-content: center;min-block-size: 100%;padding: var(--space-sm)}.ui-kbd{align-items: center;background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-sm);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-2xs);justify-content: center;line-height: 1;min-inline-size: 1.4rem;padding: 0.18rem 0.4rem}.ui-shortcut{align-items: center;display: inline-flex;gap: 0.25rem;vertical-align: middle;white-space: nowrap}.ui-shortcut__sep{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs)}.ui-timeline{display: grid;gap: var(--space-md);list-style: none;margin: 0;padding: 0}.ui-timeline__item{border-inline-start: 1px solid var(--line);display: grid;gap: 0.2rem;padding-inline-start: var(--space-md);position: relative}.ui-timeline__item::before{background: var(--line-strong);border-radius: 50%;block-size: 0.5rem;content: '';inline-size: 0.5rem;inset-block-start: 0.18rem;inset-inline-start: calc(-0.25rem - 0.5px);position: absolute}.ui-timeline__item[aria-current]::before{background: var(--accent)}.ui-timeline__time{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-row{align-items: center;background: transparent;border: 0;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;display: flex;font: inherit;gap: 0.5rem;min-inline-size: 0;padding: 0.4rem 0.5rem;text-align: start;inline-size: 100%}.ui-row:not(button,a,[role='button'],[role='option'],[tabindex]){cursor: default}.ui-row__title{flex: 1 1 auto;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-row__meta{color: var(--text-dim);flex: none;font-family: var(--mono);font-size: var(--text-2xs)}.ui-row__mark{display: inline-flex;flex: none}.ui-row--stacked{align-items: stretch;flex-direction: column;gap: 0.15rem}.ui-row--stacked .ui-row__title{flex: none}.ui-row--ruled{border-block-end: 1px solid var(--line);border-radius: 0}.ui-row[aria-selected='true'],.ui-row[aria-current]:not([aria-current='false']),.ui-row.is-selected{background: var(--panel-soft);color: var(--text)}@media (hover: hover){.ui-row:is(button,a,[role='button'],[role='option'],[tabindex]):hover{background: var(--bg-accent);color: var(--text)}}.ui-row:focus-visible{background: var(--bg-accent);color: var(--text);outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(-1 * var(--focus-ring-offset))}@media (pointer: coarse){.ui-row{min-block-size: var(--tap-target)}}@media (forced-colors: active){.ui-row[aria-selected='true'],.ui-row[aria-current]:not([aria-current='false']),.ui-row.is-selected,.ui-row:hover,.ui-row:focus-visible{forced-color-adjust: none;background: Highlight;color: HighlightText}}.ui-field{display: grid;gap: 0.35rem}.ui-label{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-2xs);font-weight: 700;letter-spacing: 0;text-transform: none}.ui-input,.ui-select,.ui-textarea{background: var(--bg-elevated);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);font-family: var(--sans);font-size: var(--text-sm);padding: 0.6rem 0.7rem;transition: border-color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard);inline-size: 100%}.ui-input::placeholder,.ui-textarea::placeholder{color: var(--text-dim)}.ui-textarea{min-block-size: 6rem;resize: vertical}.ui-select{appearance: none;background-image: radial-gradient(var(--text-dim) 1.5px,transparent 1.5px);background-position: right 0.75rem center;background-repeat: no-repeat;background-size: 5px 5px;padding-inline-end: 1.8rem}[dir='rtl'] .ui-select{background-position: left 0.75rem center}.ui-input:focus,.ui-select:focus,.ui-textarea:focus{border-color: var(--accent);outline: none}.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(var(--focus-ring-offset) / 2)}.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled{cursor: not-allowed;opacity: 0.5}.ui-input:read-only:not(:disabled),.ui-textarea:read-only:not(:disabled){background: var(--panel-soft);cursor: default}.ui-range:disabled,.ui-file:disabled,.ui-switch:has(input:disabled),.ui-check:has(input:disabled),.ui-segmented__option:has(input:disabled){cursor: not-allowed;opacity: 0.5}.ui-input:autofill,.ui-select:autofill,.ui-textarea:autofill,.ui-search input:autofill{-webkit-text-fill-color: var(--text);box-shadow: inset 0 0 0 100rem var(--bg-elevated);caret-color: var(--text)}.ui-input[aria-invalid='true'],.ui-select[aria-invalid='true'],.ui-textarea[aria-invalid='true']{border-color: var(--danger)}.ui-check:has(input[aria-invalid='true']) input{outline: 2px solid var(--danger);outline-offset: 1px}.ui-switch:has(input[aria-invalid='true']) .ui-switch__track{border-color: var(--danger)}.ui-segmented:has(input[aria-invalid='true']){border-color: var(--danger)}@media (forced-colors: active){.ui-input[aria-invalid='true'],.ui-select[aria-invalid='true'],.ui-textarea[aria-invalid='true']{border-style: double;border-width: 3px}.ui-check:has(input[aria-invalid='true']) input{outline-width: 3px;outline-style: double}.ui-switch:has(input[aria-invalid='true']) .ui-switch__track,.ui-segmented:has(input[aria-invalid='true']){border-style: double;border-width: 3px}.ui-hint--error::before,.ui-error-summary__title::before{content: '⚠ '}}.ui-hint{color: var(--text-dim);font-size: var(--text-2xs)}.ui-hint--error{color: var(--danger)}.ui-input-group{display: flex;isolation: isolate}.ui-input-group > .ui-input,.ui-input-group > .ui-select{border-radius: 0;flex: 1;margin-inline-start: -1px}.ui-input-group > :first-child{border-start-start-radius: var(--radius-md);border-end-start-radius: var(--radius-md);margin-inline-start: 0}.ui-input-group > :last-child{border-start-end-radius: var(--radius-md);border-end-end-radius: var(--radius-md)}.ui-input-group > .ui-input:focus-visible,.ui-input-group > .ui-select:focus-visible{z-index: 1}.ui-input-group__addon{align-items: center;background: var(--panel-soft);border: 1px solid var(--line-strong);color: var(--text-dim);display: flex;font-size: var(--text-sm);padding-inline: var(--space-sm);white-space: nowrap}.ui-input-icon{display: block;position: relative}.ui-input-icon > .ui-input{padding-inline-start: 2.2rem}.ui-input-icon--end > .ui-input{padding-inline: 0.7rem 2.2rem}.ui-input-icon__icon{align-items: center;color: var(--text-dim);display: inline-flex;inset-block-start: 50%;inset-inline-start: 0.7rem;justify-content: center;pointer-events: none;position: absolute;transform: translateY(-50%)}.ui-input-icon--end .ui-input-icon__icon{inset-inline: auto 0.7rem}.ui-input-icon__icon svg{block-size: 1rem;inline-size: 1rem}.ui-input-icon:focus-within .ui-input-icon__icon{color: var(--accent)}.ui-file{color: var(--text-soft);font-size: var(--text-sm)}.ui-file::file-selector-button{background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;font: inherit;margin-inline-end: var(--space-sm);padding: 0.5rem 0.85rem}.ui-file::file-selector-button:hover{border-color: var(--accent)}.ui-range{margin-inline: 0;accent-color: var(--accent);inline-size: 100%}.ui-range:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(2 * var(--focus-ring-offset))}.ui-error-summary{border: 1px solid var(--danger);border-radius: var(--radius-md);color: var(--text);padding: var(--space-md)}.ui-error-summary[hidden]{display: none}.ui-error-summary__title{color: var(--danger);font-family: var(--sans);font-size: var(--text-sm);font-weight: 700;letter-spacing: 0;margin: 0 0 var(--space-xs);text-transform: none}.ui-error-summary__list{margin: 0;padding-inline-start: var(--space-md)}.ui-error-summary__list a{color: var(--danger)}.ui-search{align-items: center;background: var(--bg-elevated);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;gap: 0.5rem;padding: 0 0.7rem}.ui-search::before{background: var(--text-dim);border-radius: 50%;content: '';flex: 0 0 auto;block-size: 0.42rem;inline-size: 0.42rem}.ui-search:focus-within{border-color: var(--accent)}.ui-search:has(input:focus-visible){outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(var(--focus-ring-offset) / 2)}.ui-search:focus-within::before{background: var(--accent)}.ui-search input{background: transparent;border: 0;color: var(--text);font-family: var(--sans);font-size: var(--text-sm);outline: none;padding: 0.6rem 0;inline-size: 100%}.ui-switch{align-items: center;cursor: pointer;display: inline-flex;gap: 0.6rem}.ui-switch input{position: absolute;opacity: 0;pointer-events: none}.ui-switch__track{background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-pill);display: inline-flex;block-size: 1.05rem;padding: 2px;transition: background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);inline-size: 1.95rem}.ui-switch__thumb{background: var(--text-dim);border-radius: 50%;block-size: 100%;transition: transform var(--duration-fast) var(--ease-spring),background-color var(--duration-fast) var(--ease-standard);inline-size: 0.78rem}.ui-switch input:checked + .ui-switch__track{background: var(--accent-soft);border-color: var(--accent)}.ui-switch input:checked + .ui-switch__track .ui-switch__thumb{background: var(--accent);transform: translateX(0.9rem)}[dir='rtl'] .ui-switch input:checked + .ui-switch__track .ui-switch__thumb{transform: translateX(-0.9rem)}.ui-switch input:focus-visible + .ui-switch__track{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: var(--focus-ring-offset)}@media (forced-colors: active){.ui-switch__track{border-color: ButtonBorder}.ui-switch__thumb{background: ButtonText}.ui-switch input:checked + .ui-switch__track{border-color: Highlight}.ui-switch input:checked + .ui-switch__track .ui-switch__thumb{background: Highlight}}.ui-check{align-items: center;cursor: pointer;display: inline-flex;gap: 0.5rem;font-size: var(--text-sm)}.ui-check input{accent-color: var(--accent);block-size: 1rem;inline-size: 1rem}@media (pointer: coarse){.ui-input,.ui-select,.ui-textarea{min-block-size: var(--tap-target)}.ui-search{min-block-size: var(--tap-target)}.ui-switch,.ui-check{min-block-size: var(--tap-target)}.ui-check input{block-size: 1.15rem;inline-size: 1.15rem}}@property --value{syntax: '<number>';inherits: true;initial-value: 0}.ui-alert{background: var(--panel-soft);border: 1px solid var(--line);border-inline-start: 2px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text-soft);display: grid;font-size: var(--text-sm);gap: 0.3rem;grid-template-columns: auto 1fr;padding: 0.8rem 0.9rem}.ui-alert::before{background: var(--text-dim);border-radius: 50%;content: '';block-size: 0.5rem;margin-block-start: 0.32rem;inline-size: 0.5rem;print-color-adjust: exact}.ui-alert > *{grid-column: 2}.ui-alert__title{color: var(--text);font-family: var(--sans);font-size: var(--text-2xs);font-weight: 700;letter-spacing: 0;margin: 0;text-transform: none}.ui-alert__body{margin: 0}.ui-alert__close{background: transparent;border: 0;color: var(--text-dim);cursor: pointer;font-family: var(--sans);grid-column: 3;grid-row: 1;line-height: 1;padding: 0.1rem 0.3rem}.ui-alert:has(.ui-alert__close){grid-template-columns: auto 1fr auto}.ui-alert--accent{--alert-tone: var(--accent);border-inline-start-color: var(--accent)}.ui-alert--accent::before{background: var(--accent)}.ui-alert--success{--alert-tone: var(--success);border-inline-start-color: var(--success)}.ui-alert--success::before{background: var(--success)}.ui-alert--warning{--alert-tone: var(--warning);border-inline-start-color: var(--warning)}.ui-alert--warning::before{background: var(--warning)}.ui-alert--danger{--alert-tone: var(--danger);border-inline-start-color: var(--danger)}.ui-alert--danger::before{background: var(--danger)}.ui-alert--info{--alert-tone: var(--info);border-inline-start-color: var(--info)}.ui-alert--info::before{background: var(--info)}.ui-alert--band{background: color-mix(in oklch,var(--alert-tone,var(--text-dim)) 10%,var(--panel));border: 0;border-block-end: 1px solid var(--line);border-radius: 0;font-size: var(--text-2xs);gap: var(--space-1-5);padding: var(--space-1-5) var(--space-sm)}.ui-alert--band::before{block-size: 0.4rem;inline-size: 0.4rem;margin-block-start: 0.3em}.ui-body-state{align-items: center;box-sizing: border-box;color: var(--text-dim);display: flex;flex: 1 1 auto;flex-direction: column;font-size: var(--text-xs);gap: var(--space-2xs);justify-content: center;margin: 0;min-block-size: 100%;padding: var(--space-md);text-align: center;text-wrap: balance}.ui-body-state > *{margin: 0}.ui-body-state--error,.ui-body-state--stale{--body-state-tone: var(--danger);color: var(--text-soft)}.ui-body-state--stale{--body-state-tone: var(--warning)}.ui-body-state--error::before,.ui-body-state--stale::before{background: var(--body-state-tone);border-radius: 50%;block-size: 0.5rem;content: '';inline-size: 0.5rem;print-color-adjust: exact}@container bronto (max-inline-size: 15rem){.ui-body-state{font-size: var(--text-2xs);padding: var(--space-xs)}}@media (hover: hover){.ui-alert__close:hover{color: var(--text)}}.ui-toast-stack{display: grid;gap: 0.5rem;inset-block: auto max(1.25rem,var(--safe-area-bottom));inset-inline: auto max(1.25rem,var(--safe-area-right));justify-items: end;max-inline-size: min(22rem,calc(100vw - 2rem));pointer-events: none;position: fixed;z-index: var(--z-toast)}.ui-toast-stack--assertive{inset-block: max(1.25rem,var(--safe-area-top)) auto}.ui-toast{align-items: flex-start;animation: uiToastIn var(--duration-base) var(--ease-spring) both;transition: opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);color: var(--text-soft);display: grid;font-size: var(--text-sm);gap: 0.2rem 0.55rem;grid-template-columns: auto 1fr;padding: 0.7rem 0.85rem;pointer-events: auto;inline-size: 100%}.ui-toast.is-leaving{animation: none;opacity: 0;transform: translateY(6px) scale(0.98)}.ui-toast::before{background: var(--text-dim);border-radius: 50%;content: '';grid-row: 1 / -1;block-size: 0.5rem;margin-block-start: 0.3rem;inline-size: 0.5rem;print-color-adjust: exact}.ui-toast__title{color: var(--text);font-family: var(--sans);font-size: var(--text-2xs);font-weight: 700;letter-spacing: 0;margin: 0;text-transform: none}.ui-toast__close{align-self: start;background: none;border: 0;block-size: 1.4rem;color: var(--text-dim);cursor: pointer;font: inherit;grid-column: 3;grid-row: 1 / -1;inline-size: 1.4rem;padding: 0}.ui-toast__close::before{content: '\00d7';font-size: 1.1rem;line-height: 1}@media (pointer: coarse){.ui-alert__close,.ui-toast__close{display: inline-grid;place-items: center;min-block-size: var(--tap-target);min-inline-size: var(--tap-target)}.ui-alert__close{padding: 0}}@media (hover: hover){.ui-toast__close:hover{color: var(--text)}}.ui-toast--accent::before{background: var(--accent)}.ui-toast--success::before{background: var(--success)}.ui-toast--warning::before{background: var(--warning)}.ui-toast--danger::before{background: var(--danger)}.ui-toast--info::before{background: var(--info)}@media (forced-colors: active){.ui-alert::before,.ui-toast::before,.ui-body-state--error::before,.ui-body-state--stale::before{background: none;border-radius: 0;content: var(--tone-glyph,'\2022');block-size: auto;inline-size: auto;margin-block-start: 0;font-family: var(--sans);font-weight: 700;line-height: 1.1}.ui-alert--accent,.ui-toast--accent{--tone-glyph: '\25C6'}.ui-alert--success,.ui-toast--success{--tone-glyph: '\2713'}.ui-alert--warning,.ui-toast--warning,.ui-body-state--stale{--tone-glyph: '\0021'}.ui-alert--danger,.ui-toast--danger,.ui-body-state--error{--tone-glyph: '\2715'}.ui-alert--info,.ui-toast--info{--tone-glyph: '\69'}}.ui-tooltip{display: inline-flex;position: relative}.ui-tooltip__bubble{background: var(--text);border-radius: var(--radius-sm);inset-block-end: calc(100% + 0.5rem);color: var(--bg);font-family: var(--sans);font-size: var(--text-2xs);inset-inline-start: 50%;letter-spacing: 0;opacity: 0;padding: 0.34rem 0.5rem;pointer-events: none;position: absolute;text-transform: none;transform: translate(-50%,4px);transition: opacity var(--duration-fast) var(--ease-standard);white-space: nowrap;z-index: var(--z-popover)}.ui-tooltip:hover .ui-tooltip__bubble,.ui-tooltip:focus-within .ui-tooltip__bubble{opacity: 1;transform: translate(-50%,0)}.ui-tooltip:dir(rtl) .ui-tooltip__bubble{transform: translate(50%,4px)}.ui-tooltip:dir(rtl):hover .ui-tooltip__bubble,.ui-tooltip:dir(rtl):focus-within .ui-tooltip__bubble{transform: translate(50%,0)}.ui-popover{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);color: var(--text-soft);font-size: var(--text-sm);inline-size: max-content;margin: 0;max-inline-size: min(22rem,calc(100vw - 2rem));overflow: auto;padding: var(--space-sm) var(--space-md);position: fixed;z-index: var(--z-popover)}.ui-popover:not([popover],.is-open){display: none}.ui-popover[popover]:not(:popover-open){display: none}@media (prefers-reduced-motion: no-preference){.ui-popover{opacity: 0;transform: translateY(-4px) scale(0.98);transition: opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),overlay var(--duration-fast) allow-discrete,display var(--duration-fast) allow-discrete}.ui-popover.is-open,.ui-popover[popover]:popover-open{opacity: 1;transform: none}@starting-style{.ui-popover.is-open,.ui-popover[popover]:popover-open{opacity: 0;transform: translateY(-4px) scale(0.98)}}}.ui-progress{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);block-size: 0.5rem;overflow: hidden;position: relative;inline-size: 100%}.ui-progress__bar{background: var(--accent);block-size: 100%;display: block;transition: inline-size var(--duration-base) var(--ease-out);inline-size: calc(clamp(0,var(--value,0),100) * 1%)}.ui-progress--indeterminate .ui-progress__bar{animation: uiTrack 1.1s var(--ease-standard) infinite;position: absolute;inline-size: 45%}@media (prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation-duration: 0.01ms;background: repeating-linear-gradient( -45deg,var(--accent) 0,var(--accent) 0.3rem,color-mix(in srgb,var(--accent) 35%,transparent) 0.3rem,color-mix(in srgb,var(--accent) 35%,transparent) 0.6rem );inset-inline-start: 0;inline-size: 100%}.ui-toast{animation: none;transition: none}}.ui-meter{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-pill);block-size: 0.5rem;overflow: hidden;inline-size: 100%}.ui-meter__fill{background: var(--text-dim);block-size: 100%;display: block;transition: inline-size var(--duration-base) var(--ease-out);inline-size: calc(clamp(0,var(--value,0),100) * 1%)}.ui-meter--accent .ui-meter__fill{background: var(--accent)}.ui-meter--success .ui-meter__fill{background: var(--success)}.ui-meter--warning .ui-meter__fill{background: var(--warning)}.ui-meter--danger .ui-meter__fill{background: var(--danger)}.ui-meter--info .ui-meter__fill{background: var(--info)}.ui-meter__row{align-items: center;display: grid;gap: var(--space-2xs) var(--space-md);grid-template-columns: minmax(9rem,14rem) 1fr auto;margin-block: var(--space-2xs)}.ui-meter__row .ui-meter{min-inline-size: 8rem}.ui-meter__label{color: var(--text-soft)}.ui-meter__value{color: var(--text);font-family: var(--sans);font-variant-numeric: tabular-nums;text-align: end}@media (max-width: 32rem){.ui-meter__row{grid-template-columns: 1fr}.ui-meter__value{text-align: start}}.ui-steps{counter-reset: ui-step;display: flex;flex-wrap: wrap;gap: var(--space-sm);list-style: none;margin: 0;padding: 0}.ui-steps__item{align-items: center;color: var(--text-dim);counter-increment: ui-step;display: inline-flex;flex: 1 1 auto;font-family: var(--sans);font-size: var(--text-xs);gap: 0.5rem;letter-spacing: 0;min-inline-size: min(100%,max-content);text-transform: none}.ui-steps__item::before{align-items: center;border: 1px solid var(--line-strong);border-radius: 50%;color: var(--text-dim);content: counter(ui-step);display: inline-flex;flex: 0 0 auto;block-size: 1.5rem;inline-size: 1.5rem;justify-content: center}.ui-steps__item:not(:last-child)::after{background: var(--line);block-size: 1px;content: '';flex: 1 1 1.5rem;min-inline-size: 1rem}.ui-steps__item[aria-current='step']{color: var(--text)}.ui-steps__item[aria-current='step']::before{border-color: var(--accent);color: var(--accent-text)}.ui-steps__item--done{color: var(--text-soft)}.ui-steps__item--done::before{background: var(--accent);border-color: var(--accent);color: var(--button-text)}@media print{.ui-progress__bar,.ui-meter__fill{-webkit-print-color-adjust: exact;print-color-adjust: exact}}@media (forced-colors: active){.ui-progress__bar,.ui-meter__fill,.ui-meter--accent .ui-meter__fill,.ui-meter--success .ui-meter__fill,.ui-meter--warning .ui-meter__fill,.ui-meter--danger .ui-meter__fill,.ui-meter--info .ui-meter__fill{background: Highlight;forced-color-adjust: none}}.ui-modal{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-lg);box-shadow: var(--shadow-raised);color: var(--text);margin: auto;max-block-size: min(85vh,44rem);max-inline-size: min(32rem,calc(100vw - 2rem));overflow: hidden;padding: 0;inline-size: 100%}.ui-modal::backdrop{backdrop-filter: blur(2px);background: color-mix(in srgb,var(--bg) 70%,transparent)}.ui-modal[open]{display: grid;grid-template-rows: auto 1fr auto}dialog.ui-modal{opacity: 0;transform: translateY(6px) scale(0.98);transition: opacity var(--duration-base) var(--ease-spring),transform var(--duration-base) var(--ease-spring),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete}dialog.ui-modal[open]{opacity: 1;transform: none}@starting-style{dialog.ui-modal[open]{opacity: 0;transform: translateY(6px) scale(0.98)}}dialog.ui-modal::backdrop{opacity: 0;transition: opacity var(--duration-base) var(--ease-out),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete}dialog.ui-modal[open]::backdrop{opacity: 1}@starting-style{dialog.ui-modal[open]::backdrop{opacity: 0}}html:has(dialog.ui-modal[open]){overflow: hidden}.ui-modal__head{align-items: flex-start;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding: var(--space-md)}.ui-modal__title{color: var(--text);font-family: var(--sans);font-size: var(--text-lg);letter-spacing: 0;margin: 0;text-transform: none}.ui-modal__body{overflow-y: auto;padding: var(--space-md)}.ui-modal__foot{border-block-start: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-xs);justify-content: flex-end;padding: var(--space-md)}.ui-modal__close{background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;flex: 0 0 auto;font-family: var(--sans);line-height: 1;padding: 0.34rem 0.5rem}.ui-modal--drawer{block-size: 100vh;margin: 0;margin-inline-start: auto;max-block-size: 100vh;max-inline-size: min(26rem,100vw);padding-block: var(--safe-area-top) var(--safe-area-bottom);padding-inline-end: var(--safe-area-right);border-radius: 0;border-width: 0;border-inline-start-width: 1px}@media (hover: hover){.ui-modal__close:hover{border-color: var(--accent);color: var(--accent-text)}}@media (pointer: coarse){.ui-modal__close{align-items: center;display: inline-flex;justify-content: center;min-block-size: var(--tap-target);min-inline-size: var(--tap-target)}}.ui-lightbox{background: color-mix(in srgb,var(--bg) 92%,#000);border: 0;block-size: 100vh;color: var(--text);max-block-size: 100vh;max-inline-size: 100vw;padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);inline-size: 100vw}.ui-lightbox::backdrop{background: color-mix(in srgb,#000 80%,transparent)}.ui-lightbox[open]{align-content: center;display: grid}.ui-lightbox .ui-carousel{inline-size: 100%;margin: auto;max-inline-size: min(64rem,100vw)}.ui-lightbox .ui-carousel__slide > img{margin-inline: auto;max-block-size: 80vh;max-inline-size: 100%;inline-size: auto;object-fit: contain}.ui-lightbox__close{inset-block-start: var(--space-sm);inset-inline-end: var(--space-sm);position: fixed;z-index: var(--z-raised)}.ui-menu-host{display: inline-block;position: relative}.ui-menu{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 1px;min-inline-size: 11rem;padding: 0.3rem}.ui-menu--dropdown{position: absolute;inset-inline-end: 0;inset-block-start: calc(100% + 0.4rem);z-index: var(--z-overlay)}.ui-menu--at-pointer{position: fixed;z-index: var(--z-popover)}.ui-menu__label{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-2xs);letter-spacing: 0;padding: 0.45rem 0.55rem 0.2rem;text-transform: none}.ui-menu__item{font-family: var(--sans);font-size: var(--text-sm);padding: 0.5rem 0.55rem}.ui-menu__item::before{background: currentcolor;border-radius: 50%;content: '';block-size: 0.3rem;opacity: 0.4;inline-size: 0.3rem}.ui-menu__sep{background: var(--line);border: 0;block-size: 1px;margin: 0.2rem 0}@media (hover: hover){.ui-menu__item:hover{background: var(--bg-accent);color: var(--text)}.ui-menu__item:hover::before{opacity: 1}}.ui-menu__item:focus-visible{background: var(--bg-accent);color: var(--text)}.ui-menu__item:focus-visible::before{opacity: 1}@media (forced-colors: active){.ui-menu__item:hover,.ui-menu__item:focus-visible{forced-color-adjust: none;background: Highlight;color: HighlightText}.ui-menu__item:hover::before,.ui-menu__item:focus-visible::before{background: HighlightText;opacity: 1}}.ui-combobox{display: inline-block;min-inline-size: 14rem;position: relative}.ui-combobox__input{inline-size: 100%}.ui-combobox__list{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 1px;list-style: none;margin: 0;max-block-size: 16rem;overflow-y: auto;padding: 0.3rem;position: absolute;inset-block-start: calc(100% + 0.4rem);inset-inline: 0;z-index: var(--z-overlay)}.ui-combobox__list[hidden]{display: none}.ui-combobox__option{border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--sans);font-size: var(--text-sm);padding: 0.5rem 0.55rem}.ui-combobox__option[hidden]{display: none}.ui-combobox__option.is-active,.ui-combobox__option[aria-selected='true']{background: var(--bg-accent);color: var(--text)}@media (forced-colors: active){.ui-combobox__option.is-active,.ui-combobox__option[aria-selected='true']{forced-color-adjust: none;background: Highlight;color: HighlightText}}.ui-combobox__empty{color: var(--text-dim);font-size: var(--text-2xs);padding: 0.5rem 0.55rem}.ui-combobox__empty[hidden]{display: none}@media (max-width: 560px){.ui-modal{border-radius: var(--radius-lg) var(--radius-lg) 0 0;margin: auto auto 0;max-block-size: 88vh;max-inline-size: 100vw;inline-size: 100vw}.ui-modal--drawer{border-radius: 0;border-width: 1px 0 0;block-size: 88vh;margin: auto 0 0;max-block-size: 88vh;max-inline-size: 100vw;inline-size: 100vw}.ui-menu{inline-size: max-content;max-inline-size: calc(100vw - (2 * var(--space-sm)));min-inline-size: min(11rem,calc(100vw - (2 * var(--space-sm))))}.ui-combobox{display: block;inline-size: 100%;min-inline-size: 0}}@media (prefers-reduced-motion: reduce){.ui-modal[open]{animation: none}dialog.ui-modal,dialog.ui-modal::backdrop{transition: none}}@media (prefers-reduced-transparency: reduce){.ui-modal::backdrop{backdrop-filter: none;background: var(--surface-1)}.ui-lightbox::backdrop{background: var(--surface-1)}}@media (forced-colors: active){.ui-modal::backdrop,.ui-lightbox::backdrop{background: color-mix(in srgb,#000 50%,transparent);forced-color-adjust: none}}.ui-tabs{display: grid;gap: var(--space-md)}.ui-tabs__list{border-block-end: 1px solid var(--line);display: flex;gap: 0.1rem;overflow-x: auto;scrollbar-width: none}.ui-tabs__list::-webkit-scrollbar{display: none}.ui-tab{background: transparent;border: 0;border-block-end: 2px solid transparent;color: var(--text-dim);cursor: pointer;display: inline-flex;flex: 0 0 auto;font-family: var(--sans);font-size: var(--text-xs);gap: 0.4rem;letter-spacing: 0;margin-block-end: -1px;padding: 0.6rem 0.85rem;text-transform: none;transition: color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}@media (pointer: coarse){.ui-tab{min-block-size: var(--tap-target)}}.ui-tab.is-active{border-block-end-color: var(--accent);color: var(--accent-text)}@media (forced-colors: active){.ui-tab.is-active{border-block-end-color: Highlight;color: Highlight}}.ui-tab:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(-1.5 * var(--focus-ring-offset))}.ui-tabs__panel[hidden]{display: none}@media (hover: hover){.ui-tab:hover:not(.is-active){color: var(--text)}}.ui-accordion{display: grid}.ui-accordion__item{border-block-end: 1px solid var(--line)}.ui-accordion__summary{align-items: center;color: var(--text);cursor: pointer;display: flex;font-family: var(--sans);font-size: var(--text-sm);gap: 0.6rem;letter-spacing: 0;list-style: none;padding: 0.85rem 0.2rem;text-transform: none}.ui-accordion__summary::-webkit-details-marker{display: none}.ui-accordion__summary::before{border-inline-end: 1.5px solid var(--text-dim);border-block-end: 1.5px solid var(--text-dim);content: '';block-size: 0.4rem;transform: rotate(-45deg);transition: transform var(--duration-fast) var(--ease-spring);inline-size: 0.4rem}.ui-accordion__item[open] .ui-accordion__summary{color: var(--accent-text)}.ui-accordion__item[open] .ui-accordion__summary::before{border-color: var(--accent);transform: rotate(45deg)}.ui-accordion__body{color: var(--text-soft);padding: 0 0.2rem 0.95rem}.ui-accordion__body > :first-child{margin-block-start: 0}@supports selector(::details-content){@media (prefers-reduced-motion: no-preference){.ui-accordion{interpolate-size: allow-keywords}.ui-accordion__item::details-content{block-size: 0;overflow: hidden;transition: block-size var(--duration-base) var(--ease-out),content-visibility var(--duration-base) allow-discrete}.ui-accordion__item[open]::details-content{block-size: auto}}}.ui-segmented{background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: inline-flex;gap: 1px;overflow: hidden;padding: 2px}.ui-segmented__option{border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;flex: 1 0 auto;font-family: var(--sans);font-size: var(--text-xs);letter-spacing: 0;padding: 0.42rem 0.8rem;text-align: center;text-transform: none;transition: background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);white-space: nowrap}.ui-segmented__option input{position: absolute;opacity: 0;pointer-events: none}.ui-segmented__option:has(input:checked){background: var(--accent);color: var(--button-text)}.ui-segmented__option:has(input:focus-visible){outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(-1 * var(--focus-ring-offset))}@media (hover: hover){.ui-segmented__option:hover:not(:has(input:checked)){color: var(--text)}}.ui-breadcrumb{align-items: center;color: var(--text-dim);display: flex;flex-wrap: wrap;font-family: var(--sans);font-size: var(--text-2xs);gap: 0.5rem;letter-spacing: 0;list-style: none;margin: 0;padding: 0;text-transform: none}.ui-breadcrumb__item{align-items: center;color: var(--text-dim);display: inline-flex;gap: 0.5rem}.ui-breadcrumb__item:not(:last-child)::after{background: var(--line-strong);border-radius: 50%;content: '';block-size: 0.22rem;inline-size: 0.22rem}.ui-breadcrumb__item[aria-current]:not([aria-current='false']){color: var(--text)}.ui-breadcrumb__item a{color: inherit}@media (hover: hover){.ui-breadcrumb__item a:hover{color: var(--accent-text)}}@media (pointer: coarse){.ui-breadcrumb__item a{align-items: center;display: inline-flex;justify-content: center;min-block-size: var(--tap-target-min);min-inline-size: var(--tap-target-min)}}.ui-pagination{align-items: center;display: flex;flex-wrap: wrap;gap: 0.3rem;list-style: none;margin: 0;padding: 0}.ui-pagination__item{align-items: center;background: transparent;border: 1px solid var(--line);border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;display: inline-flex;font-family: var(--sans);font-size: var(--text-xs);justify-content: center;min-block-size: 2rem;min-inline-size: 2rem;padding: 0 0.5rem;transition: border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.ui-pagination__item.is-active,.ui-pagination__item[aria-current]:not([aria-current='false']){border-color: var(--accent);color: var(--accent-text)}.ui-pagination__item[aria-disabled='true'],.ui-pagination__item:disabled{cursor: not-allowed;opacity: 0.4;pointer-events: none}@media (hover: hover){.ui-pagination__item:not( .is-active,[aria-current]:not([aria-current='false']),[aria-disabled='true'],:disabled ):hover{border-color: var(--line-strong);color: var(--text)}}@media (pointer: coarse){.ui-pagination__item{min-block-size: var(--tap-target);min-inline-size: var(--tap-target)}}.ui-avatar{--av-size: 2.2rem;align-items: center;background: var(--panel-soft);border: 1px solid var(--line-strong);border-radius: var(--radius-sm);color: var(--text);display: inline-flex;flex: 0 0 auto;font-family: var(--sans);font-size: calc(var(--av-size) * 0.38);font-weight: 700;block-size: var(--av-size);justify-content: center;letter-spacing: 0.04em;overflow: hidden;text-transform: none;inline-size: var(--av-size)}.ui-avatar img{block-size: 100%;object-fit: cover;inline-size: 100%}.ui-avatar--sm{--av-size: 1.5rem}.ui-avatar--lg{--av-size: 3.2rem}.ui-avatar-group{display: inline-flex}.ui-avatar-group .ui-avatar{box-shadow: 0 0 0 2px var(--bg)}.ui-avatar-group .ui-avatar:not(:first-child){margin-inline-start: -0.5rem}.ui-carousel{display: grid;gap: var(--space-sm)}.ui-carousel__stage{position: relative}.ui-carousel__viewport{display: flex;overflow-x: auto;scroll-behavior: smooth;scroll-snap-type: x mandatory;scrollbar-width: none}.ui-carousel__viewport::-webkit-scrollbar{display: none}.ui-carousel__viewport:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(-1 * var(--focus-ring-offset))}.ui-carousel__slide{flex: 0 0 100%;scroll-snap-align: center}.ui-carousel__slide > :is(img,picture,.ui-ratio){display: block;inline-size: 100%;object-fit: cover}.ui-carousel__prev,.ui-carousel__next{align-items: center;background: color-mix(in srgb,var(--panel-strong) 80%,transparent);border: 1px solid var(--line-strong);border-radius: var(--radius-pill);color: var(--text);cursor: pointer;display: inline-flex;block-size: 2.2rem;inline-size: 2.2rem;inset-block-start: 50%;justify-content: center;position: absolute;transform: translateY(-50%);z-index: var(--z-raised)}.ui-carousel__prev{inset-inline-start: var(--space-xs)}.ui-carousel__next{inset-inline-end: var(--space-xs)}.ui-carousel__prev::before,.ui-carousel__next::before{block-size: 0.5rem;border-block-start: 1.5px solid currentcolor;border-inline-end: 1.5px solid currentcolor;content: '';inline-size: 0.5rem}.ui-carousel__prev::before{margin-inline-start: 0.2rem;transform: rotate(-135deg)}.ui-carousel__next::before{margin-inline-end: 0.2rem;transform: rotate(45deg)}[dir='rtl'] .ui-carousel__prev::before{transform: rotate(45deg)}[dir='rtl'] .ui-carousel__next::before{transform: rotate(-135deg)}.ui-carousel__prev:disabled,.ui-carousel__next:disabled{cursor: not-allowed;opacity: 0.35}.ui-carousel__prev:focus-visible,.ui-carousel__next:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: var(--focus-ring-offset)}.ui-carousel__status{background: color-mix(in srgb,var(--panel-strong) 75%,transparent);border-radius: var(--radius-pill);color: var(--text);font-family: var(--sans);font-size: var(--text-2xs);inset-block-end: var(--space-xs);inset-inline-start: var(--space-xs);letter-spacing: 0;padding: 0.2rem 0.5rem;position: absolute}@media (prefers-reduced-transparency: reduce){.ui-carousel__prev,.ui-carousel__next,.ui-carousel__status{background: var(--surface-3)}}.ui-carousel__thumbs{display: flex;gap: 0.4rem;list-style: none;margin: 0;overflow-x: auto;padding: 0;scroll-behavior: smooth;scrollbar-width: none}.ui-carousel__thumbs::-webkit-scrollbar{display: none}.ui-carousel__thumb{background: transparent;border: 1px solid var(--line);border-radius: var(--radius-sm);cursor: pointer;flex: 0 0 auto;block-size: 3rem;inline-size: 4rem;overflow: hidden;padding: 0}.ui-carousel__thumb > img{block-size: 100%;inline-size: 100%;object-fit: cover}.ui-carousel__thumb[aria-current='true']{border-color: var(--accent)}.ui-carousel__thumb:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: var(--focus-ring-offset)}@media (prefers-reduced-motion: reduce){.ui-carousel__viewport,.ui-carousel__thumbs{scroll-behavior: auto}}}

package/dist/css/workbench.css

@@ -1 +1 @@
-@layer bronto{.ui-inspector{container: bronto-inspector / inline-size;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-inspector__head{align-items: baseline;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-sm);justify-content: space-between;padding-block-end: var(--space-xs)}.ui-inspector__body{display: grid;gap: var(--space-2xs)}.ui-toolstrip{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;flex-wrap: wrap;gap: var(--space-xs);min-inline-size: 0;padding: 0.35rem}.ui-toolstrip--floating{box-shadow: var(--shadow-raised)}.ui-toolstrip--compact{gap: var(--space-2xs);padding: var(--space-2xs)}.ui-toolstrip--pane{background: none;border: 0;border-block-end: 1px solid var(--line);border-radius: 0;flex-wrap: nowrap;gap: var(--space-2xs);overflow-x: auto;padding: 0.3rem var(--space-xs);scrollbar-width: thin}.ui-toolstrip__fill{flex: 1 1 auto;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__brand{align-items: baseline;display: inline-flex;flex: 0 1 auto;gap: var(--space-xs);min-inline-size: 0;padding-inline: var(--space-xs)}.ui-toolstrip__brand strong{color: var(--text);font-size: var(--text-sm)}.ui-toolstrip__context{color: var(--text-dim);font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__group,.ui-toolstrip__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-2xs)}.ui-toolstrip__group{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);padding: 0.16rem}.ui-toolstrip__search{flex: 1 1 14rem;min-inline-size: min(100%,11rem)}.ui-toolstrip__actions{margin-inline-start: auto}.ui-segmented-buttons{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);display: inline-flex;flex-wrap: wrap;gap: 0.16rem;padding: 0.16rem}.ui-segmented-buttons__button{background: transparent;border: 1px solid transparent;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--sans);font-size: var(--text-xs);font-weight: 700;letter-spacing: 0;line-height: 1;min-block-size: 1.9rem;padding: 0.48rem 0.7rem;text-transform: none}.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: var(--accent);border-color: var(--accent);color: var(--button-text)}.ui-segmented-buttons__button:disabled,.ui-segmented-buttons__button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-property{align-items: baseline;display: grid;gap: var(--space-sm);grid-template-columns: minmax(0,38%) minmax(0,1fr)}.ui-property__label{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-xs);overflow-wrap: anywhere;letter-spacing: 0;text-transform: none}.ui-property__value{color: var(--text);font-size: var(--text-sm);min-inline-size: 0;overflow-wrap: anywhere}@container bronto-inspector (max-inline-size: 20rem){.ui-property{gap: var(--space-2xs);grid-template-columns: minmax(0,1fr);padding-block: var(--space-xs)}}.ui-pane{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: flex;flex-direction: column;min-block-size: 0;min-inline-size: 0;overflow: hidden}.ui-pane__head{align-items: center;background: var(--bg-elevated);border-block-end: 1px solid var(--line);cursor: grab;display: flex;flex: none;gap: var(--space-2xs);min-block-size: var(--pane-head,2.5rem);padding: var(--space-2xs) var(--space-xs)}.ui-pane__head:active{cursor: grabbing}.ui-pane__title{flex: 1 1 auto;font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-pane__title-input{background: var(--bg-elevated);border: 1px solid var(--accent);border-radius: var(--radius-sm);color: inherit;font: inherit;letter-spacing: inherit;margin-block: -1px;max-inline-size: 100%;min-inline-size: 0;padding: 0 0.25rem}.ui-pane__actions{display: flex;flex: 0 1 auto;flex-wrap: nowrap;gap: var(--space-2xs);min-inline-size: 0;overflow-x: auto;scrollbar-width: thin}.ui-pane__actions:empty{display: none}.ui-pane__body{display: flex;flex: 1;flex-direction: column;min-block-size: 0;min-inline-size: 0;overflow: auto}.ui-selectionbar{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding: 0.5rem 0.85rem}.ui-selectionbar__count{color: var(--text);font-family: var(--sans);font-size: var(--text-sm)}.ui-selectionbar__actions{display: flex;flex-wrap: wrap;gap: var(--space-xs)}.ui-selectionbar--anchored,.ui-toolstrip--anchored{--anchor-offset: var(--space-sm);inset-inline-start: 50%;max-inline-size: calc(100% - 2 * var(--space-md));position: absolute;transform: translateX(-50%)}.ui-selectionbar--anchored,.ui-toolstrip--anchored,.ui-selectionbar--anchor-block-end,.ui-toolstrip--anchor-block-end{inset-block: auto max(var(--anchor-offset),var(--safe-area-bottom))}.ui-selectionbar--anchor-block-start,.ui-toolstrip--anchor-block-start{inset-block: max(var(--anchor-offset),var(--safe-area-top)) auto}@media (hover: hover){.ui-segmented-buttons__button:hover:not(:disabled,[aria-disabled='true'],[aria-pressed='true'],.is-active){background: var(--panel);border-color: var(--line-strong);color: var(--text)}}.ui-splitter{--splitter-pos: 50%;--splitter-handle: 0.75rem;--splitter-pane-min: 0px;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr);min-block-size: 18rem;overflow: hidden}.ui-splitter--vertical{grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter--horizontal{grid-template-columns: 1fr;grid-template-rows: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter__pane{min-block-size: 0;min-inline-size: 0;overflow: auto;padding: var(--space-md)}.ui-splitter__handle{align-self: stretch;background: var(--panel-strong);border-block: 0;border-inline: 1px solid var(--line);cursor: col-resize;display: grid;min-inline-size: var(--splitter-handle);place-items: center;touch-action: none}.ui-splitter__handle::before{background: var(--line-strong);border-radius: var(--radius-pill);block-size: 2.5rem;content: "";inline-size: 2px}.ui-splitter__handle:hover::before,.ui-splitter__handle.is-active::before,.ui-splitter__handle[aria-valuenow]:focus-visible::before{background: var(--accent)}.ui-splitter__handle:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: -2px}.ui-splitter--horizontal .ui-splitter__handle{border-block: 1px solid var(--line);border-inline: 0;cursor: row-resize;min-block-size: var(--splitter-handle);min-inline-size: 0}.ui-splitter--horizontal .ui-splitter__handle::before{block-size: 2px;inline-size: 2.5rem}@media (forced-colors: active){.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: Highlight;border-color: Highlight;color: HighlightText}.ui-splitter__handle{border-color: CanvasText}.ui-splitter__handle::before{background: CanvasText}}}
+@layer bronto{.ui-inspector{container: bronto-inspector / inline-size;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-inspector__head{align-items: baseline;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-sm);justify-content: space-between;padding-block-end: var(--space-xs)}.ui-inspector__body{display: grid;gap: var(--space-2xs)}.ui-toolstrip{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;flex-wrap: wrap;gap: var(--space-xs);min-inline-size: 0;padding: 0.35rem}.ui-toolstrip--floating{box-shadow: var(--shadow-raised)}.ui-toolstrip--compact{gap: var(--space-2xs);padding: var(--space-2xs)}.ui-toolstrip--pane{background: none;border: 0;border-block-end: 1px solid var(--line);border-radius: 0;flex-wrap: nowrap;gap: var(--space-2xs);overflow-x: auto;padding: 0.3rem var(--space-xs);scrollbar-width: thin}.ui-toolstrip__fill{flex: 1 1 auto;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__brand{align-items: baseline;display: inline-flex;flex: 0 1 auto;gap: var(--space-xs);min-inline-size: 0;padding-inline: var(--space-xs)}.ui-toolstrip__brand strong{color: var(--text);font-size: var(--text-sm)}.ui-toolstrip__context{color: var(--text-dim);font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__group,.ui-toolstrip__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-2xs)}.ui-toolstrip__group{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);padding: 0.16rem}.ui-toolstrip__search{flex: 1 1 14rem;min-inline-size: min(100%,11rem)}.ui-toolstrip__actions{margin-inline-start: auto}.ui-segmented-buttons{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);display: inline-flex;flex-wrap: wrap;gap: 0.16rem;padding: 0.16rem}.ui-segmented-buttons__button{background: transparent;border: 1px solid transparent;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--sans);font-size: var(--text-xs);font-weight: 700;letter-spacing: 0;line-height: 1;min-block-size: 1.9rem;padding: 0.48rem 0.7rem;text-transform: none}.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: var(--accent);border-color: var(--accent);color: var(--button-text)}.ui-segmented-buttons__button:disabled,.ui-segmented-buttons__button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-property{align-items: baseline;display: grid;gap: var(--space-sm);grid-template-columns: minmax(0,38%) minmax(0,1fr)}.ui-property__label{color: var(--text-dim);font-family: var(--sans);font-size: var(--text-xs);overflow-wrap: anywhere;letter-spacing: 0;text-transform: none}.ui-property__value{color: var(--text);font-size: var(--text-sm);min-inline-size: 0;overflow-wrap: anywhere}@container bronto-inspector (max-inline-size: 20rem){.ui-property{gap: var(--space-2xs);grid-template-columns: minmax(0,1fr);padding-block: var(--space-xs)}}.ui-pane{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: flex;flex-direction: column;min-block-size: 0;min-inline-size: 0;overflow: hidden}.ui-pane__head{align-items: center;background: var(--bg-elevated);border-block-end: 1px solid var(--line);cursor: grab;display: flex;flex: none;gap: var(--space-2xs);min-block-size: var(--pane-head,2.5rem);padding: var(--space-2xs) var(--space-xs)}.ui-pane__head:active{cursor: grabbing}.ui-pane__title{flex: 1 1 auto;font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-pane__title-input{background: var(--bg-elevated);border: 1px solid var(--accent);border-radius: var(--radius-sm);color: inherit;font: inherit;letter-spacing: inherit;margin-block: -1px;max-inline-size: 100%;min-inline-size: 0;padding: 0 0.25rem}.ui-pane__actions{display: flex;flex: 0 1 auto;flex-wrap: nowrap;gap: var(--space-2xs);min-inline-size: 0;overflow-x: auto;scrollbar-width: thin}.ui-pane__actions:empty{display: none}.ui-pane__body{display: flex;flex: 1;flex-direction: column;min-block-size: 0;min-inline-size: 0;overflow: auto}.ui-selectionbar{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding: 0.5rem 0.85rem}.ui-selectionbar__count{color: var(--text);font-family: var(--sans);font-size: var(--text-sm)}.ui-selectionbar__actions{display: flex;flex-wrap: wrap;gap: var(--space-xs)}.ui-selectionbar--anchored,.ui-toolstrip--anchored{--anchor-offset: var(--space-sm);inset-inline-start: 50%;max-inline-size: calc(100% - 2 * var(--space-md));position: absolute;transform: translateX(-50%)}.ui-selectionbar--anchored,.ui-toolstrip--anchored,.ui-selectionbar--anchor-block-end,.ui-toolstrip--anchor-block-end{inset-block: auto max(var(--anchor-offset),var(--safe-area-bottom))}.ui-selectionbar--anchor-block-start,.ui-toolstrip--anchor-block-start{inset-block: max(var(--anchor-offset),var(--safe-area-top)) auto}@media (hover: hover){.ui-segmented-buttons__button:hover:not(:disabled,[aria-disabled='true'],[aria-pressed='true'],.is-active){background: var(--panel);border-color: var(--line-strong);color: var(--text)}}.ui-splitter{--splitter-pos: 50%;--splitter-handle: 0.75rem;--splitter-pane-min: 0px;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr);min-block-size: 18rem;overflow: hidden}.ui-splitter--vertical{grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter--horizontal{grid-template-columns: 1fr;grid-template-rows: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter__pane{min-block-size: 0;min-inline-size: 0;overflow: auto;padding: var(--space-md)}.ui-splitter__handle{align-self: stretch;background: var(--panel-strong);border-block: 0;border-inline: 1px solid var(--line);cursor: col-resize;display: grid;min-inline-size: var(--splitter-handle);place-items: center;touch-action: none}.ui-splitter__handle::before{background: var(--line-strong);border-radius: var(--radius-pill);block-size: 2.5rem;content: "";inline-size: 2px}.ui-splitter__handle:hover::before,.ui-splitter__handle.is-active::before,.ui-splitter__handle[aria-valuenow]:focus-visible::before{background: var(--accent)}.ui-splitter__handle:focus-visible{outline: var(--focus-ring-width) solid var(--focus-ring);outline-offset: calc(-1 * var(--focus-ring-offset))}.ui-splitter--horizontal .ui-splitter__handle{border-block: 1px solid var(--line);border-inline: 0;cursor: row-resize;min-block-size: var(--splitter-handle);min-inline-size: 0}.ui-splitter--horizontal .ui-splitter__handle::before{block-size: 2px;inline-size: 2.5rem}@media (forced-colors: active){.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: Highlight;border-color: Highlight;color: HighlightText}.ui-splitter__handle{border-color: CanvasText}.ui-splitter__handle::before{background: CanvasText}}}

package/docs/command.md

@@ -24,7 +24,52 @@ Cmd/Ctrl+K**; you open the palette yourself (e.g. a `<dialog>` opened by a butto
 or your own shortcut). Pairs with the [`ui-shortcut`](./reference.md) hint. Not in
 the core bundle.
 
-## Controlled host mode
+## Three ways to own a palette
+
+| Mode | Bronto owns | The host owns |
+| --- | --- | --- |
+| `initCommand()` | filtering, ids, roles, active row, keyboard, pointer, empty state | the rows in the DOM, the actions |
+| `initCommand({ headless: true })` | ids, roles, active row, keyboard, pointer, the empty state's live region | which rows exist, rendered per query; the actions |
+| controlled host mode (CSS only) | nothing | the whole combobox/listbox contract |
+
+### Matching
+
+Filtering is a substring match on each row's text. Pass `match` to decide it
+yourself: it receives the row and the query (trimmed, lower-cased in the
+palette's locale) and returns whether the row stays. An empty query always
+shows every row.
+
+```js
+initCommand({
+  match: (row, query) =>
+    row.hasAttribute('data-always') || // e.g. a "Search everything" row
+    `${row.textContent} ${row.dataset.keywords ?? ''}`.toLowerCase().includes(query),
+});
+```
+
+That covers keywords a row should match without showing them, and a row that
+must stay reachable for every query (escalating to a full search, say) inside
+the list, where the keyboard reaches it.
+
+### Headless mode
+
+When the host computes the results itself (search over a corpus, ranked
+matches, results that arrive asynchronously), pass `headless: true` and render
+the rows on every query. Bronto never hides a row or group in this mode. It reads
+the list live, so replacing rows needs no second `initCommand()`. New rows get
+ids and `role="option"`. After the query changes, the first row the host renders
+becomes active, and a row that disappears hands the active state to the first
+row left. Keep `.ui-command__empty` mounted and toggle its `hidden`; Bronto
+announces it when it appears.
+
+```js
+const box = document.querySelector('[data-bronto-command]');
+const input = box.querySelector('.ui-command__input');
+input.addEventListener('input', () => renderRows(search(input.value))); // yours
+initCommand({ root: box.parentElement, headless: true });
+```
+
+### Controlled host mode
 
 When React or another host already owns the query, filtered results, active
 item, and selection, use only the `ui-command*` CSS shell and do not call
@@ -75,7 +120,7 @@ a DOM-authored list, or controlled host mode when the framework owns the widget.
 ## Behavior & events
 
 `initCommand()` owns ids, `role`/`aria-activedescendant`, a roving active item,
-substring filtering, the keyboard (Down/Up to move, Enter to run, Escape to
+filtering (substring, or your `match`; none in headless mode), the keyboard (Down/Up to move, Enter to run, Escape to
 close — Home/End stay with the query input's native text caret), and pointer
 select. It emits:
 
@@ -98,11 +143,6 @@ document.querySelector('[data-bronto-command]').addEventListener('bronto:command
 );
 ```
 
-Deprecated compatibility adapters in 0.7: `useCommand()` in
-`@ponchia/ui/react`, `/solid`, and `/qwik`; the `command` / `useCommand` action
-in `@ponchia/ui/svelte`; and `vCommand` (or `v-bronto-command`) in
-`@ponchia/ui/vue`. Migrate before 0.8.
-
 ## Accessibility
 
 - The input is a `combobox`, the list a `listbox`, items `option`s, with

package/docs/compositions.md

@@ -74,8 +74,8 @@ Use the core stylesheet plus `report-kit.css` for a standalone HTML report.
 Use real asset URLs in HTML; package specifiers resolve only in build tools.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/css/report-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/css/report-kit.css" />
 <article class="ui-report">
   <header class="ui-report__cover ui-report__cover--compact">
     <h1 class="ui-report__title">Keep the current configuration</h1>

package/docs/interop/blocknote.md

@@ -0,0 +1,60 @@
+# BlockNote interop
+
+[BlockNote](https://www.blocknotejs.org) is a block editor. It themes its
+editor, menus, side menu, formatting toolbar and text highlights through
+`--bn-*` custom properties declared on `.bn-root`, with its own light and dark
+values. `css/blocknote.css` points those properties at bronto tokens, so the
+editor follows the theme, skins, contrast and the OLED surface like the rest of
+the page.
+
+## Import
+
+BlockNote's stylesheet is unlayered, and an unlayered rule outranks every
+layered one. Import this leaf's **unlayered** build, after BlockNote's:
+
+```css
+@import '@blocknote/mantine/style.css';
+@import '@ponchia/ui/css/dataviz.css';
+@import '@ponchia/ui/css/unlayered/blocknote.css';
+```
+
+The rule targets `.bn-root` and `.bn-root[data-color-scheme]`, which has the
+same specificity as BlockNote's dark block, so source order is what makes it
+win.
+
+## What maps to what
+
+| BlockNote | bronto |
+| --- | --- |
+| editor text, background | `--text`, `--panel` |
+| menu text, background | `--text`, `--panel-strong` |
+| tooltip, hovered background | `--panel-soft` |
+| selected text, background | `--on-accent`, `--accent` |
+| disabled text | `--text-dim` |
+| border, shadow | `--line` |
+| side menu (drag handle, add) | `--text-dim` |
+| font, radius | `--sans`, `--radius-lg` |
+
+Text and background highlights are categorical identity: a colour someone chose
+for a span. They take `--cat-N-ink` (text, 4.5:1 on its tint and the panel) and
+`--cat-N-tint` (background) from `css/dataviz.css`:
+
+| BlockNote highlight | Categorical hue |
+| --- | --- |
+| blue | 1 · blue |
+| orange, brown (text) | 2 · orange |
+| yellow | 4 · yellow |
+| pink | 5 · magenta |
+| green | 6 · green |
+| purple | 7 · violet |
+| red | 8 · red |
+| gray | `--text-dim` on `--panel-soft` |
+
+Without `css/dataviz.css` the highlights fall back to the status colours.
+
+## A read view that matches the editor
+
+A surface that shows the same text read-only (a preview, a fallback while the
+editor loads) can use `.ui-prose.ui-prose--blocks`. That variant reproduces
+BlockNote's block geometry, so text does not jump when the surface switches
+between reading and editing. See [the prose reference](../reference.md).

package/docs/package-contract.md

@@ -48,6 +48,9 @@ semantic versioning contract for the surfaces listed here.
 | `./css/app.css` | `./dist/css/app.css` | Bundled layered CSS leaf | Stable additive | Generated layered direct-import leaf. Also included in dist/bronto.css. |
 | `./css/skins.css` | `./dist/css/skins.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
 | `./css/dataviz.css` | `./dist/css/dataviz.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
+| `./css/blocknote.css` | `./dist/css/blocknote.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
+| `./css/fonts-inter.css` | `./dist/css/fonts-inter.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
+| `./css/fonts-jetbrains-mono.css` | `./dist/css/fonts-jetbrains-mono.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
 | `./css/report.css` | `./dist/css/report.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
 | `./css/row.css` | `./dist/css/row.css` | Bundled layered CSS leaf | Stable additive | Generated layered direct-import leaf. Also included in dist/bronto.css. |
 | `./css/figure.css` | `./dist/css/figure.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
@@ -77,6 +80,7 @@ semantic versioning contract for the surfaces listed here.
 | `./css/command.css` | `./dist/css/command.css` | Opt-in layered CSS leaf | Stable additive | Generated layered direct-import leaf. Opt-in and not included in dist/bronto.css. |
 | `./css/analytical.css` | `./dist/css/analytical.css` | Opt-in CSS roll-up | Stable additive | Generated layered roll-up of the analytical leaves. Not included in the default bundle. |
 | `./css/report-kit.css` | `./dist/css/report-kit.css` | Opt-in CSS roll-up | Stable additive | Generated layered roll-up for complete static reports. Not included in the default bundle. |
+| `./css/tool.css` | `./dist/css/tool.css` | CSS roll-up | Stable additive | Generated layered roll-up: the default bundle without the navigation, site, table and app leaves. Import it instead of the default bundle. |
 | `./css/unlayered/tokens.css` | `./css/tokens.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
 | `./css/unlayered/fonts.css` | `./css/fonts.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
 | `./css/unlayered/base.css` | `./css/base.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
@@ -94,6 +98,9 @@ semantic versioning contract for the surfaces listed here.
 | `./css/unlayered/app.css` | `./css/app.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
 | `./css/unlayered/skins.css` | `./css/skins.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
 | `./css/unlayered/dataviz.css` | `./css/dataviz.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
+| `./css/unlayered/blocknote.css` | `./css/blocknote.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
+| `./css/unlayered/fonts-inter.css` | `./css/fonts-inter.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
+| `./css/unlayered/fonts-jetbrains-mono.css` | `./css/fonts-jetbrains-mono.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
 | `./css/unlayered/report.css` | `./css/report.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
 | `./css/unlayered/row.css` | `./css/row.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
 | `./css/unlayered/figure.css` | `./css/figure.css` | Unlayered CSS leaf | Stable path | Raw authored CSS leaf for consumers that deliberately opt out of @layer bronto on that leaf. |
@@ -173,6 +180,7 @@ semantic versioning contract for the surfaces listed here.
 | `./docs/command.md` | `./docs/command.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/interop/tailwind.md` | `./docs/interop/tailwind.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/interop/react-flow.md` | `./docs/interop/react-flow.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
+| `./docs/interop/blocknote.md` | `./docs/interop/blocknote.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/migrations/0.2-to-0.3.md` | `./docs/migrations/0.2-to-0.3.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/migrations/0.3-to-0.4.md` | `./docs/migrations/0.3-to-0.4.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/migrations/0.4-to-0.5.md` | `./docs/migrations/0.4-to-0.5.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
@@ -299,6 +307,7 @@ always includes `package.json`, `README.md`, `LICENSE`, and
 | `docs/command.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/interop/tailwind.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/interop/react-flow.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
+| `docs/interop/blocknote.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.2-to-0.3.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.3-to-0.4.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.4-to-0.5.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
@@ -328,8 +337,8 @@ result. The listed gates are part of `npm run check`.
 | Package manifest | `package.json` | docs/package-contract.md | `npm run package-contract:build` | check:fresh; check:exports; check:pack; check:consumer-surface; check:consumer-types; check:publint; check:attw | The complete export/file matrix in this document is generated from the manifest; packed tarball imports, concrete file resolution, and package-level type resolution are smoke-tested in clean consumers. |
 | Token model | `tokens/index.js` | css/tokens.css; tokens/index.json; tokens/tokens.dtcg.json; tokens/resolved.json; tokens/figma.variables.json; tokens/index.d.ts | `npm run tokens:css:build; tokens:build; dtcg:build; resolved:build; figma:variables:build; dts:build` | check:fresh; check:contrast | Token names/roles are public. Resolved and Figma handoff values are visual tuning before 1.0. |
 | Class registry | `classes/index.js plus css/*.css selectors` | classes/classes.json; classes/index.d.ts; classes/vscode.css-custom-data.json; docs/reference.md | `npm run classes:json:build; dts:build; vscode:build; reference:build` | check:fresh; check:classes; check:contract | The typed registry, JSON vocabulary, and generated reference stay aligned with real selectors. |
-| Authored CSS graph | `css/core.css plus css/*.css leaves` | dist/bronto.css; dist/css/*.css (48 layered outputs) | `npm run dist:build` | check:dist; check:exports; check:component-matrix | Default bundle and direct layered leaf imports are generated from authored CSS, size-gated, and coverage-owned as foundation or component leaves. |
-| JSDoc-authored public JS | `behaviors/; annotations/; connectors/; renderer/; react/; solid/; qwik/; svelte/; vue/` | adjacent *.d.ts and *.d.ts.map files | `npm run dts:emit` | check:dts-emit; check:types; check:consumer-surface; check:consumer-types; check:behavior-matrix; check:attw; check:publint | Declarations are emitted from the shipped JS, package subpath imports are compiled from a packed clean consumer, and public behavior exports are docs/unit/browser owned. |
+| Authored CSS graph | `css/core.css plus css/*.css leaves` | dist/bronto.css; dist/css/*.css (52 layered outputs) | `npm run dist:build` | check:dist; check:exports; check:component-matrix | Default bundle and direct layered leaf imports are generated from authored CSS, size-gated, and coverage-owned as foundation or component leaves. |
+| JSDoc-authored public JS | `connectors/; renderer/; annotations/; behaviors/` | adjacent *.d.ts and *.d.ts.map files | `npm run dts:emit` | check:dts-emit; check:types; check:consumer-surface; check:consumer-types; check:behavior-matrix; check:attw; check:publint | Declarations are emitted from the shipped JS, package subpath imports are compiled from a packed clean consumer, and public behavior exports are docs/unit/browser owned. |
 | Glyph registry | `glyphs/glyphs.js` | glyphs/glyphs.d.ts | `npm run glyphs:build` | check:glyphs; check:unit | Glyph names and render options are public. The registry stays sorted and type-covered. |
 | Display colorways | `tokens/skins.js` | css/skins.css; tokens/skins.d.ts | `npm run skins:build` | check:skins; check:contrast | Skins are opt-in root-level choices and never part of dist/bronto.css. |
 | Chart palette | `tokens/charts.js` | css/dataviz.css; tokens/charts.json; tokens/charts.d.ts | `npm run charts:build` | check:charts | Data-viz colors are opt-in, CVD-gated, and never UI chrome. |

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 695 classes across 187 component groups
+- 700 classes across 188 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Validate markup as data (no JS/TS): `@ponchia/ui/classes.json` — the same
   vocabulary as language-neutral JSON (`groups`, `classes`, `states`,
@@ -46,6 +46,7 @@ each one matches a real selector in the stylesheet.
 | `cls.alertClose` | `ui-alert__close` | part |
 | `cls.alertTitle` | `ui-alert__title` | part |
 | `cls.alertAccent` | `ui-alert--accent` | modifier |
+| `cls.alertBand` | `ui-alert--band` | modifier |
 | `cls.alertDanger` | `ui-alert--danger` | modifier |
 | `cls.alertInfo` | `ui-alert--info` | modifier |
 | `cls.alertSuccess` | `ui-alert--success` | modifier |
@@ -220,6 +221,14 @@ each one matches a real selector in the stylesheet.
 | `cls.badgeSuccess` | `ui-badge--success` | modifier |
 | `cls.badgeWarning` | `ui-badge--warning` | modifier |
 
+### `.ui-body-state`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.bodyState` | `ui-body-state` | base |
+| `cls.bodyStateError` | `ui-body-state--error` | modifier |
+| `cls.bodyStateStale` | `ui-body-state--stale` | modifier |
+
 ### `.ui-bracket-note`
 
 | Registry key | Class | Kind |
@@ -1035,6 +1044,7 @@ each one matches a real selector in the stylesheet.
 | Registry key | Class | Kind |
 | --- | --- | --- |
 | `cls.prose` | `ui-prose` | base |
+| `cls.proseBlocks` | `ui-prose--blocks` | modifier |
 | `cls.proseCompact` | `ui-prose--compact` | modifier |
 
 ### `.ui-provenance`
@@ -1759,6 +1769,10 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--space-lg` | `1.35rem` |
 | `--space-xl` | `1.75rem` |
 | `--space-2xl` | `2.5rem` |
+| `--space-0-5` | `0.125rem` |
+| `--space-0-75` | `0.1875rem` |
+| `--space-1-5` | `0.375rem` |
+| `--space-2-5` | `0.625rem` |
 | `--tap-target` | `max(44px, 2.9rem)` |
 | `--tap-target-min` | `max(24px, 1.6rem)` |
 | `--safe-area-top` | `env(safe-area-inset-top, 0px)` |
@@ -1793,6 +1807,18 @@ Exact mirror of the `:root` blocks in `css/tokens.css`
 | `--z-overlay` | `30` |
 | `--z-popover` | `50` |
 | `--z-toast` | `60` |
+| `--z-canvas` | `var(--z-base)` |
+| `--z-chrome` | `var(--z-sticky)` |
+| `--z-panel` | `25` |
+| `--z-modal` | `var(--z-overlay)` |
+| `--z-menu` | `var(--z-popover)` |
+| `--z-tooltip` | `70` |
+| `--z-navigation` | `80` |
+| `--ui-zoom` | `1` |
+| `--ui-px` | `1px` |
+| `--hairline` | `1px` |
+| `--focus-ring-width` | `2px` |
+| `--focus-ring-offset` | `2px` |
 | `--accent-1` | `color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))` |
 | `--accent-2` | `color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))` |
 | `--accent-3` | `color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))` |

package/docs/reporting.md

@@ -60,18 +60,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
 changes ship in the minor (see [stability.md](./stability.md)):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/css/report-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/css/report-kit.css" />
 ```
 
 Leaf-by-leaf CDN imports use the same `dist/css/` paths:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/css/report.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/css/dataviz.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/css/annotations.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/css/legend.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/css/report.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/css/dataviz.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/css/annotations.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/dist/css/legend.css" />
 ```
 
 The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
@@ -885,7 +885,7 @@ or validation runtime.
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/schemas/report-claims.v1.schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.14.0/schemas/report-claims.v1.schema.json",
   "schemaVersion": "bronto-report-claims.v1",
   "report": { "title": "Decision readiness", "type": "decision" },
   "claims": [

package/docs/stability.md

@@ -1,7 +1,7 @@
 # Public API stability
 
 `@ponchia/ui` is pre-1.0. Breaking changes ship in the minor (`0.x.0`), and
-patches are non-breaking. In practical terms: **PATCH releases (`0.12.x`) are
+patches are non-breaking. In practical terms: **PATCH releases (`0.14.x`) are
 non-breaking bug-fixes and additive changes — safe to upgrade without review;
 MINOR releases (`0.x.0`) may include breaking changes and consumers should
 review the CHANGELOG before upgrading.** Pin `~0.x` (tilde) to accept only
@@ -93,12 +93,15 @@ current public-surface matrix and the release policy above still applies.
 | Glyph registry/renderers (`@ponchia/ui/glyphs`) | Stable additive | Existing glyph names stay valid. New glyphs are additive. Renderer option names and accessibility defaults are public. |
 | `.ui-icon` mask renderer | Stable | Class name, `--icon-size`, currentColor inheritance, and `--icon-mask` contract are public. The internal data URL encoding is not. |
 | Skins (`@ponchia/ui/skins`, `css/skins.css`) | Stable additive | Existing skin names stay valid. New skins are additive. Skins are root-level choices. Skin CSS is opt-in, not in the default bundle. |
+| BlockNote interop (`css/blocknote.css`) | Stable additive | The leaf is opt-in and maps BlockNote's `--bn-*` theme variables to bronto tokens. Which bronto token a BlockNote variable points at may tune with the tokens; newly mapped BlockNote variables are additive. Import the unlayered build after BlockNote's own stylesheet. |
 | Charts (`@ponchia/ui/charts`, `charts.json`, `css/dataviz.css`) | Stable additive | Token names (`--chart-*`, `--cat-N`, `--cat-N-tint`, `--cat-N-ink`), `CATEGORICAL_HUES`, the JSON shape, and the 8 categorical slots in fixed hue order are public. `css/dataviz.css` is opt-in, not in the default bundle. Exact palette values may tune if gates and release notes justify it. |
 | Renderer tokens (`@ponchia/ui/renderer`) | Stable additive | Function names, option names and the `RendererTokens` field names are public; new fields are additive. Colours are returned as `#rrggbb` or `rgba()` literals. The exact Vega/xterm mapping may tune with the token model. |
 | External renderer themes (`@ponchia/ui/mermaid`, `@ponchia/ui/mermaid.json`, `@ponchia/ui/d2`, `@ponchia/ui/d2.json`, `@ponchia/ui/vega`, `@ponchia/ui/vega.json`) | Stable additive | Theme helper names, JSON shapes, and supported renderer theme slots are public. Values are resolved colours because Mermaid, D2, and Vega cannot consume Bronto CSS variables directly. Exact colours may tune with token changes, but `check:mermaid`, `check:d2`, and `check:vega` must prove every exported theme resolves with no `var()` leaks. No renderer runtime ships. |
 | Shiki theme data (`@ponchia/ui/shiki/nothing.json`) | Stable additive | The bundled Shiki theme JSON shape and token-derived scope roles are public for syntax-highlighting consumers. Exact colours may tune with the token model and must stay generated from the governed palette. |
 | Reports (`css/report.css`, `.ui-report*`, print utilities) | Stable additive | Report class names, BEM part names, and print utility names are public. Report CSS is opt-in and not imported by the default bundle. The data key now lives in the standalone Legends layer (below), not `css/report.css`; charting is via the Vega theme target (`@ponchia/ui/vega`, see [vega](./vega.md)) or a token-themed inline SVG, not a shipped renderer. |
 | Report kit roll-up (`css/report-kit.css`) | Stable additive | A convenience `@import` of the complete static-report vocabulary. The set of leaves it bundles may grow additively; each leaf also stays individually exported. Opt-in, not in the default bundle. |
+| Tool roll-up (`css/tool.css`) | Stable additive | The default bundle without navigation, site, table and app chrome, for a tool that draws its own shell. It follows the default bundle's leaves, minus those four; each leaf also stays individually exported. Opt-in, not in the default bundle. |
+| Font leaves (`css/fonts-inter.css`, `css/fonts-jetbrains-mono.css`) | Stable additive | Opt-in `@font-face` rules for the families `--sans` and `--mono` already name, from unmodified upstream files under the SIL OFL 1.1. Family names, weight ranges and styles are public; an upstream update of the same family may ship in a minor. Not in the default bundle. |
 | Figure stage (`css/figure.css`, `.ui-figure*`) | Stable additive | Figure class names, overlay/key/fallback-data slots, and report composition hooks are public. Opt-in, not in the default bundle. Bronto owns the figure frame, not chart rendering, scales, or data mapping. |
 | Annotations (`@ponchia/ui/annotations`, `css/annotations.css`, `.ui-annotation*`) | Stable additive | SVG annotation class names, recipe option names, and helper function names are public. Helper internals and exact path-control heuristics may tune before 1.0. Opt-in, not in the default bundle. Rich placement, renderer, editing, and chart/diagram adapter APIs belong to the sibling `@ponchia/annotations` package; `@ponchia/ui` does not depend on it at runtime or through public declarations. |
 | Discussions (`css/discussion.css`, `.ui-discussion*`) | Stable additive | Thread-list, message, quotation and composer class names are public. Opt-in, not in the default bundle. The host owns posting, persistence, identity, resolution, text anchors and focus management. |
@@ -117,7 +120,7 @@ current public-surface matrix and the release policy above still applies.
 | Lifecycle state (`css/state.css`, `.ui-state*`, `.ui-syncbar`) | Stable additive | The `.ui-state`/`__label`/`__detail`/`--busy` classes, the canonical lifecycle state modifiers, `.ui-syncbar`, and the `ui.state` recipe are public. Opt-in, not in the default bundle. |
 | Generated / AI-trust (`css/generated.css`, `.ui-generated*`, `.ui-origin-label*`, `.ui-reasoning*`, `.ui-tool-log`, `.ui-tool-call*`) | Stable additive | The generated-content, origin-label (incl. `--ai`), reasoning-trace and tool-log/tool-call class names and the `ui.originLabel` recipe are public. Opt-in, not in the default bundle. Not a chat kit; no confidence widget. |
 | Workbench (`css/workbench.css`, `.ui-splitter*`, `.ui-inspector*`, `.ui-property*`, `.ui-selectionbar*`, `initSplitter`) | Stable additive | Splitter, inspector, property-row and selection-bar class + BEM part names are public (no recipe). `data-bronto-splitter`, `--splitter-pos`, `bronto:splitter:resize`, and the `initSplitter` cleanup contract are public. Opt-in, not in the default bundle. The host owns pane content, persistence, collapse policy, and selection state. |
-| Command palette (`css/command.css`, `.ui-command*`, `initCommand`) | Stable additive | Command class/part names, the `data-bronto-command` attribute, and the event contract — `bronto:command:select` (`detail: { value, label }`) and `bronto:command:close` — are public. Bronto filters + navigates (APG combobox/listbox); the host owns the action registry/execution. Opt-in, not in the default bundle, no global hotkey. |
+| Command palette (`css/command.css`, `.ui-command*`, `initCommand`) | Stable additive | Command class/part names, the `data-bronto-command` attribute, and the event contract — `bronto:command:select` (`detail: { value, label }`) and `bronto:command:close` — are public. Bronto filters + navigates (APG combobox/listbox); the `match` predicate and `headless` mode (host-rendered rows, read live) are public options; the host owns the action registry/execution. Opt-in, not in the default bundle, no global hotkey. |
 | Spark microcharts (`css/spark.css`, `.ui-spark*`) | Stable additive | Spark class names and inline sizing/label slots are public. Opt-in, not in the default bundle. The host owns data reduction and accessible surrounding text. |
 | Bullet graphs (`css/bullet.css`, `.ui-bullet*`) | Stable additive | Bullet class names and measure/target/range custom-property slots are public. Opt-in, not in the default bundle. The host owns thresholds, units, and data mapping. |
 | Diffs (`css/diff.css`, `.ui-diff*`) | Stable additive | Diff container/line/gutter class names and add/remove/highlight state modifiers are public. Opt-in, not in the default bundle. Bronto styles evidence; it does not compute diffs. |