@ponchia/ui 0.13.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/README.md +4 -4
  3. package/behaviors/command.d.ts +34 -13
  4. package/behaviors/command.d.ts.map +1 -1
  5. package/behaviors/command.js +195 -129
  6. package/classes/classes.json +19 -2
  7. package/classes/index.d.ts +16 -0
  8. package/classes/index.js +21 -2
  9. package/css/blocknote.css +14 -0
  10. package/css/content.css +34 -1
  11. package/css/feedback.css +95 -3
  12. package/css/fonts-inter.css +35 -0
  13. package/css/fonts-jetbrains-mono.css +49 -0
  14. package/css/primitives.css +13 -0
  15. package/css/site.css +0 -31
  16. package/css/tool.css +29 -0
  17. package/dist/bronto.css +1 -1
  18. package/dist/css/blocknote.css +1 -1
  19. package/dist/css/content.css +1 -1
  20. package/dist/css/feedback.css +1 -1
  21. package/dist/css/fonts-inter.css +1 -0
  22. package/dist/css/fonts-jetbrains-mono.css +1 -0
  23. package/dist/css/primitives.css +1 -1
  24. package/dist/css/site.css +1 -1
  25. package/dist/css/tool.css +1 -0
  26. package/docs/command.md +47 -7
  27. package/docs/compositions.md +2 -2
  28. package/docs/interop/blocknote.md +5 -0
  29. package/docs/package-contract.md +6 -1
  30. package/docs/reference.md +12 -1
  31. package/docs/reporting.md +8 -8
  32. package/docs/stability.md +4 -2
  33. package/docs/theming.md +8 -1
  34. package/docs/usage.md +55 -0
  35. package/fonts/OFL-Inter.txt +92 -0
  36. package/fonts/OFL-JetBrainsMono.txt +93 -0
  37. package/fonts/inter-variable-italic.woff2 +0 -0
  38. package/fonts/inter-variable.woff2 +0 -0
  39. package/fonts/jetbrains-mono-400-italic.woff2 +0 -0
  40. package/fonts/jetbrains-mono-400.woff2 +0 -0
  41. package/fonts/jetbrains-mono-700-italic.woff2 +0 -0
  42. package/fonts/jetbrains-mono-700.woff2 +0 -0
  43. package/llms.txt +1 -1
  44. package/package.json +7 -2
package/dist/css/primitives.css CHANGED
@@ -1 +1 @@
1
- @layer bronto{.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}}
1
+ @layer bronto{.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-eyebrow--caps{letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-eyebrow--mono{font-family: var(--mono)}.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}}
package/dist/css/site.css CHANGED
@@ -1 +1 @@
1
- @layer bronto{.ui-container{inline-size: 100%;margin-inline: auto;max-inline-size: var(--container,72rem);padding-inline: var(--space-md)}.ui-container--narrow{max-inline-size: var(--container-narrow,44rem)}.ui-container--wide{max-inline-size: var(--container-wide,82rem)}.ui-skiplink{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);inset-block-start: -4rem;inset-inline-start: var(--space-md);padding: 0.7rem 1rem;position: fixed;z-index: var(--z-toast)}.ui-skiplink:focus{inset-block-start: max(var(--space-md),var(--safe-area-top))}.ui-siteheader{align-items: center;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block: var(--space-sm)}.ui-siteheader--sticky{padding-block-start: max(var(--space-sm),var(--safe-area-top));position: sticky;inset-block-start: 0;z-index: var(--z-sticky)}.ui-siteheader__brand{align-items: center;color: var(--text);display: inline-flex;font-family: var(--display);font-size: var(--text-lg);gap: 0.5rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-siteheader__brand::before{background: var(--accent);border-radius: 50%;block-size: 0.5rem;content: '';flex: 0 0 auto;inline-size: 0.5rem}.ui-siteheader__actions{align-items: center;display: inline-flex;gap: var(--space-xs)}.ui-pagehead{align-items: flex-end;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block-end: var(--space-md)}.ui-pagehead__title{color: var(--text);font-family: var(--display);font-size: var(--text-xl);letter-spacing: var(--tracking-wide);line-height: 1.1;margin: 0;text-transform: uppercase;text-wrap: balance}.ui-pagehead__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-xs)}.ui-sitenav{display: inline-flex;flex-wrap: wrap;gap: 0.15rem}.ui-sitenav a{align-items: center;border: 1px solid transparent;border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);padding: 0.4rem 0.6rem;text-transform: uppercase;transition: border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.ui-sitenav a::before{background: currentColor;border-radius: 50%;block-size: 0.32rem;content: '';inline-size: 0.32rem;opacity: 0;transform: scale(0.5);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}.ui-sitenav a[aria-current]:not([aria-current='false']){color: var(--accent-text)}.ui-sitenav a[aria-current]:not([aria-current='false'])::before{opacity: 1;transform: scale(1)}@media (hover: hover){.ui-sitenav a:hover{color: var(--text)}.ui-sitenav a:hover::before{opacity: 1;transform: scale(1)}}@media (pointer: coarse){.ui-sitenav a{min-block-size: var(--tap-target);padding-inline: 0.9rem}}.ui-sitemenu{display: none;position: relative}.ui-sitemenu > summary{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);font-weight: 600;gap: 0.4rem;letter-spacing: var(--tracking-wide);list-style: none;min-block-size: 2.4rem;padding: 0.42rem 0.7rem;text-transform: uppercase}.ui-sitemenu > summary::-webkit-details-marker{display: none}.ui-sitemenu[open] > summary{border-color: var(--accent);color: var(--accent-text)}.ui-sitemenu__panel{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 0.15rem;inset-block-start: calc(100% + 0.4rem);inset-inline-end: 0;min-inline-size: 12rem;padding: 0.4rem;position: absolute;z-index: var(--z-overlay)}@media (max-width: 720px){.ui-siteheader .ui-sitenav{display: none}.ui-sitemenu{display: block}.ui-sitemenu .ui-sitenav{display: grid}}@media (pointer: coarse){.ui-sitemenu > summary{min-block-size: var(--tap-target);padding-inline: 0.9rem}}.ui-sitefooter{align-items: center;border-block-start: 1px solid var(--line);color: var(--text-dim);display: flex;flex-wrap: wrap;font-size: var(--text-sm);gap: var(--space-sm);justify-content: space-between;margin-block-start: var(--space-2xl);padding-block: var(--space-md)}.ui-sitefooter__links{display: flex;flex-wrap: wrap;gap: var(--space-md)}.ui-sitefooter__links a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem;transition: text-decoration-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-sitefooter__links a:hover{text-decoration-color: var(--accent)}}@media (pointer: coarse){.ui-sitefooter__links 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-tags{display: flex;flex-wrap: wrap;gap: 0.5rem;list-style: none;margin: 0;padding: 0}.ui-tag{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-size: var(--text-xs);padding: 0.28rem 0.6rem}.ui-tag--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 42%,var(--line));color: var(--text-soft)}.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}}
1
+ @layer bronto{.ui-container{inline-size: 100%;margin-inline: auto;max-inline-size: var(--container,72rem);padding-inline: var(--space-md)}.ui-container--narrow{max-inline-size: var(--container-narrow,44rem)}.ui-container--wide{max-inline-size: var(--container-wide,82rem)}.ui-skiplink{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);inset-block-start: -4rem;inset-inline-start: var(--space-md);padding: 0.7rem 1rem;position: fixed;z-index: var(--z-toast)}.ui-skiplink:focus{inset-block-start: max(var(--space-md),var(--safe-area-top))}.ui-siteheader{align-items: center;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block: var(--space-sm)}.ui-siteheader--sticky{padding-block-start: max(var(--space-sm),var(--safe-area-top));position: sticky;inset-block-start: 0;z-index: var(--z-sticky)}.ui-siteheader__brand{align-items: center;color: var(--text);display: inline-flex;font-family: var(--display);font-size: var(--text-lg);gap: 0.5rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-siteheader__brand::before{background: var(--accent);border-radius: 50%;block-size: 0.5rem;content: '';flex: 0 0 auto;inline-size: 0.5rem}.ui-siteheader__actions{align-items: center;display: inline-flex;gap: var(--space-xs)}.ui-pagehead{align-items: flex-end;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block-end: var(--space-md)}.ui-pagehead__title{color: var(--text);font-family: var(--display);font-size: var(--text-xl);letter-spacing: var(--tracking-wide);line-height: 1.1;margin: 0;text-transform: uppercase;text-wrap: balance}.ui-pagehead__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-xs)}.ui-sitenav{display: inline-flex;flex-wrap: wrap;gap: 0.15rem}.ui-sitenav a{align-items: center;border: 1px solid transparent;border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);padding: 0.4rem 0.6rem;text-transform: uppercase;transition: border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.ui-sitenav a::before{background: currentColor;border-radius: 50%;block-size: 0.32rem;content: '';inline-size: 0.32rem;opacity: 0;transform: scale(0.5);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}.ui-sitenav a[aria-current]:not([aria-current='false']){color: var(--accent-text)}.ui-sitenav a[aria-current]:not([aria-current='false'])::before{opacity: 1;transform: scale(1)}@media (hover: hover){.ui-sitenav a:hover{color: var(--text)}.ui-sitenav a:hover::before{opacity: 1;transform: scale(1)}}@media (pointer: coarse){.ui-sitenav a{min-block-size: var(--tap-target);padding-inline: 0.9rem}}.ui-sitemenu{display: none;position: relative}.ui-sitemenu > summary{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);font-weight: 600;gap: 0.4rem;letter-spacing: var(--tracking-wide);list-style: none;min-block-size: 2.4rem;padding: 0.42rem 0.7rem;text-transform: uppercase}.ui-sitemenu > summary::-webkit-details-marker{display: none}.ui-sitemenu[open] > summary{border-color: var(--accent);color: var(--accent-text)}.ui-sitemenu__panel{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 0.15rem;inset-block-start: calc(100% + 0.4rem);inset-inline-end: 0;min-inline-size: 12rem;padding: 0.4rem;position: absolute;z-index: var(--z-overlay)}@media (max-width: 720px){.ui-siteheader .ui-sitenav{display: none}.ui-sitemenu{display: block}.ui-sitemenu .ui-sitenav{display: grid}}@media (pointer: coarse){.ui-sitemenu > summary{min-block-size: var(--tap-target);padding-inline: 0.9rem}}.ui-sitefooter{align-items: center;border-block-start: 1px solid var(--line);color: var(--text-dim);display: flex;flex-wrap: wrap;font-size: var(--text-sm);gap: var(--space-sm);justify-content: space-between;margin-block-start: var(--space-2xl);padding-block: var(--space-md)}.ui-sitefooter__links{display: flex;flex-wrap: wrap;gap: var(--space-md)}.ui-sitefooter__links a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem;transition: text-decoration-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-sitefooter__links a:hover{text-decoration-color: var(--accent)}}@media (pointer: coarse){.ui-sitefooter__links 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-tags{display: flex;flex-wrap: wrap;gap: 0.5rem;list-style: none;margin: 0;padding: 0}.ui-tag{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-size: var(--text-xs);padding: 0.28rem 0.6rem}.ui-tag--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 42%,var(--line));color: var(--text-soft)}}
package/dist/css/tool.css ADDED
@@ -0,0 +1 @@
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-eyebrow--caps{letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-eyebrow--mono{font-family: var(--mono)}.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/docs/command.md CHANGED
@@ -24,7 +24,52 @@ Cmd/Ctrl+K**; you open the palette yourself (e.g. a `<dialog>` opened by a butto
24
24
  or your own shortcut). Pairs with the [`ui-shortcut`](./reference.md) hint. Not in
25
25
  the core bundle.
26
26
 
27
- ## Controlled host mode
27
+ ## Three ways to own a palette
28
+
29
+ | Mode | Bronto owns | The host owns |
30
+ | --- | --- | --- |
31
+ | `initCommand()` | filtering, ids, roles, active row, keyboard, pointer, empty state | the rows in the DOM, the actions |
32
+ | `initCommand({ headless: true })` | ids, roles, active row, keyboard, pointer, the empty state's live region | which rows exist, rendered per query; the actions |
33
+ | controlled host mode (CSS only) | nothing | the whole combobox/listbox contract |
34
+
35
+ ### Matching
36
+
37
+ Filtering is a substring match on each row's text. Pass `match` to decide it
38
+ yourself: it receives the row and the query (trimmed, lower-cased in the
39
+ palette's locale) and returns whether the row stays. An empty query always
40
+ shows every row.
41
+
42
+ ```js
43
+ initCommand({
44
+ match: (row, query) =>
45
+ row.hasAttribute('data-always') || // e.g. a "Search everything" row
46
+ `${row.textContent} ${row.dataset.keywords ?? ''}`.toLowerCase().includes(query),
47
+ });
48
+ ```
49
+
50
+ That covers keywords a row should match without showing them, and a row that
51
+ must stay reachable for every query (escalating to a full search, say) inside
52
+ the list, where the keyboard reaches it.
53
+
54
+ ### Headless mode
55
+
56
+ When the host computes the results itself (search over a corpus, ranked
57
+ matches, results that arrive asynchronously), pass `headless: true` and render
58
+ the rows on every query. Bronto never hides a row or group in this mode. It reads
59
+ the list live, so replacing rows needs no second `initCommand()`. New rows get
60
+ ids and `role="option"`. After the query changes, the first row the host renders
61
+ becomes active, and a row that disappears hands the active state to the first
62
+ row left. Keep `.ui-command__empty` mounted and toggle its `hidden`; Bronto
63
+ announces it when it appears.
64
+
65
+ ```js
66
+ const box = document.querySelector('[data-bronto-command]');
67
+ const input = box.querySelector('.ui-command__input');
68
+ input.addEventListener('input', () => renderRows(search(input.value))); // yours
69
+ initCommand({ root: box.parentElement, headless: true });
70
+ ```
71
+
72
+ ### Controlled host mode
28
73
 
29
74
  When React or another host already owns the query, filtered results, active
30
75
  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.
75
120
  ## Behavior & events
76
121
 
77
122
  `initCommand()` owns ids, `role`/`aria-activedescendant`, a roving active item,
78
- substring filtering, the keyboard (Down/Up to move, Enter to run, Escape to
123
+ filtering (substring, or your `match`; none in headless mode), the keyboard (Down/Up to move, Enter to run, Escape to
79
124
  close — Home/End stay with the query input's native text caret), and pointer
80
125
  select. It emits:
81
126
 
@@ -98,11 +143,6 @@ document.querySelector('[data-bronto-command]').addEventListener('bronto:command
98
143
  );
99
144
  ```
100
145
 
101
- Deprecated compatibility adapters in 0.7: `useCommand()` in
102
- `@ponchia/ui/react`, `/solid`, and `/qwik`; the `command` / `useCommand` action
103
- in `@ponchia/ui/svelte`; and `vCommand` (or `v-bronto-command`) in
104
- `@ponchia/ui/vue`. Migrate before 0.8.
105
-
106
146
  ## Accessibility
107
147
 
108
148
  - The input is a `combobox`, the list a `listbox`, items `option`s, with
package/docs/compositions.md CHANGED
@@ -74,8 +74,8 @@ Use the core stylesheet plus `report-kit.css` for a standalone HTML report.
74
74
  Use real asset URLs in HTML; package specifiers resolve only in build tools.
75
75
 
76
76
  ```html
77
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/bronto.css" />
78
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/css/report-kit.css" />
77
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/bronto.css" />
78
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/report-kit.css" />
79
79
  <article class="ui-report">
80
80
  <header class="ui-report__cover ui-report__cover--compact">
81
81
  <h1 class="ui-report__title">Keep the current configuration</h1>
package/docs/interop/blocknote.md CHANGED
@@ -33,8 +33,13 @@ win.
33
33
  | disabled text | `--text-dim` |
34
34
  | border, shadow | `--line` |
35
35
  | side menu (drag handle, add) | `--text-dim` |
36
+ | nested-block guide | `--line` |
36
37
  | font, radius | `--sans`, `--radius-lg` |
37
38
 
39
+ BlockNote draws the rule beside a nested block in the side-menu colour. The leaf
40
+ gives that rule the border token instead, so the guide stays a hairline while
41
+ the drag handle keeps `--text-dim`.
42
+
38
43
  Text and background highlights are categorical identity: a colour someone chose
39
44
  for a span. They take `--cat-N-ink` (text, 4.5:1 on its tint and the panel) and
40
45
  `--cat-N-tint` (background) from `css/dataviz.css`:
package/docs/package-contract.md CHANGED
@@ -49,6 +49,8 @@ semantic versioning contract for the surfaces listed here.
49
49
  | `./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. |
50
50
  | `./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. |
51
51
  | `./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. |
52
+ | `./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. |
53
+ | `./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. |
52
54
  | `./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. |
53
55
  | `./css/row.css` | `./dist/css/row.css` | Bundled layered CSS leaf | Stable additive | Generated layered direct-import leaf. Also included in dist/bronto.css. |
54
56
  | `./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. |
@@ -78,6 +80,7 @@ semantic versioning contract for the surfaces listed here.
78
80
  | `./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. |
79
81
  | `./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. |
80
82
  | `./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. |
83
+ | `./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. |
81
84
  | `./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. |
82
85
  | `./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. |
83
86
  | `./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. |
@@ -96,6 +99,8 @@ semantic versioning contract for the surfaces listed here.
96
99
  | `./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. |
97
100
  | `./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. |
98
101
  | `./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. |
102
+ | `./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. |
103
+ | `./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. |
99
104
  | `./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. |
100
105
  | `./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. |
101
106
  | `./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. |
@@ -332,7 +337,7 @@ result. The listed gates are part of `npm run check`.
332
337
  | 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. |
333
338
  | 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. |
334
339
  | 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. |
335
- | Authored CSS graph | `css/core.css plus css/*.css leaves` | dist/bronto.css; dist/css/*.css (49 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. |
340
+ | 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. |
336
341
  | 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. |
337
342
  | 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. |
338
343
  | 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. |
package/docs/reference.md CHANGED
@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
9
9
  **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
10
10
  contract: [docs/theming.md](theming.md).
11
11
 
12
- - 696 classes across 187 component groups
12
+ - 702 classes across 188 component groups
13
13
  - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
14
14
  - Validate markup as data (no JS/TS): `@ponchia/ui/classes.json` — the same
15
15
  vocabulary as language-neutral JSON (`groups`, `classes`, `states`,
@@ -46,6 +46,7 @@ each one matches a real selector in the stylesheet.
46
46
  | `cls.alertClose` | `ui-alert__close` | part |
47
47
  | `cls.alertTitle` | `ui-alert__title` | part |
48
48
  | `cls.alertAccent` | `ui-alert--accent` | modifier |
49
+ | `cls.alertBand` | `ui-alert--band` | modifier |
49
50
  | `cls.alertDanger` | `ui-alert--danger` | modifier |
50
51
  | `cls.alertInfo` | `ui-alert--info` | modifier |
51
52
  | `cls.alertSuccess` | `ui-alert--success` | modifier |
@@ -220,6 +221,14 @@ each one matches a real selector in the stylesheet.
220
221
  | `cls.badgeSuccess` | `ui-badge--success` | modifier |
221
222
  | `cls.badgeWarning` | `ui-badge--warning` | modifier |
222
223
 
224
+ ### `.ui-body-state`
225
+
226
+ | Registry key | Class | Kind |
227
+ | --- | --- | --- |
228
+ | `cls.bodyState` | `ui-body-state` | base |
229
+ | `cls.bodyStateError` | `ui-body-state--error` | modifier |
230
+ | `cls.bodyStateStale` | `ui-body-state--stale` | modifier |
231
+
223
232
  ### `.ui-bracket-note`
224
233
 
225
234
  | Registry key | Class | Kind |
@@ -642,6 +651,8 @@ each one matches a real selector in the stylesheet.
642
651
  | Registry key | Class | Kind |
643
652
  | --- | --- | --- |
644
653
  | `cls.eyebrow` | `ui-eyebrow` | base |
654
+ | `cls.eyebrowCaps` | `ui-eyebrow--caps` | modifier |
655
+ | `cls.eyebrowMono` | `ui-eyebrow--mono` | modifier |
645
656
  | `cls.eyebrowMuted` | `ui-eyebrow--muted` | modifier |
646
657
  | `cls.eyebrowSm` | `ui-eyebrow--sm` | modifier |
647
658
 
package/docs/reporting.md CHANGED
@@ -60,18 +60,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
60
60
  changes ship in the minor (see [stability.md](./stability.md)):
61
61
 
62
62
  ```html
63
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/bronto.css" />
64
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/css/report-kit.css" />
63
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/bronto.css" />
64
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/report-kit.css" />
65
65
  ```
66
66
 
67
67
  Leaf-by-leaf CDN imports use the same `dist/css/` paths:
68
68
 
69
69
  ```html
70
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/bronto.css" />
71
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/css/report.css" />
72
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/css/dataviz.css" />
73
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/css/annotations.css" />
74
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/css/legend.css" />
70
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/bronto.css" />
71
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/report.css" />
72
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/dataviz.css" />
73
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/annotations.css" />
74
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/dist/css/legend.css" />
75
75
  ```
76
76
 
77
77
  The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
@@ -885,7 +885,7 @@ or validation runtime.
885
885
 
886
886
  ```json
887
887
  {
888
- "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/schemas/report-claims.v1.schema.json",
888
+ "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.15.0/schemas/report-claims.v1.schema.json",
889
889
  "schemaVersion": "bronto-report-claims.v1",
890
890
  "report": { "title": "Decision readiness", "type": "decision" },
891
891
  "claims": [
package/docs/stability.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Public API stability
2
2
 
3
3
  `@ponchia/ui` is pre-1.0. Breaking changes ship in the minor (`0.x.0`), and
4
- patches are non-breaking. In practical terms: **PATCH releases (`0.13.x`) are
4
+ patches are non-breaking. In practical terms: **PATCH releases (`0.15.x`) are
5
5
  non-breaking bug-fixes and additive changes — safe to upgrade without review;
6
6
  MINOR releases (`0.x.0`) may include breaking changes and consumers should
7
7
  review the CHANGELOG before upgrading.** Pin `~0.x` (tilde) to accept only
@@ -100,6 +100,8 @@ current public-surface matrix and the release policy above still applies.
100
100
  | 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. |
101
101
  | 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. |
102
102
  | 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. |
103
+ | 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. |
104
+ | 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. |
103
105
  | 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. |
104
106
  | 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. |
105
107
  | 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. |
@@ -118,7 +120,7 @@ current public-surface matrix and the release policy above still applies.
118
120
  | 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. |
119
121
  | 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. |
120
122
  | 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. |
121
- | 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. |
123
+ | 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. |
122
124
  | 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. |
123
125
  | 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. |
124
126
  | 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. |
package/docs/theming.md CHANGED
@@ -179,7 +179,14 @@ you change CSS `--accent` later.
179
179
  convention: `inset-block-end: max(<your offset>, var(--safe-area-bottom))`.
180
180
  - **Type** — `--display` (dot-matrix face), `--mono`, `--sans`. Override
181
181
  to drop Doto or swap the body face; the token layer keeps working even
182
- if you self-host fonts (see the `fonts.css` note in the README).
182
+ if you self-host fonts (see the `fonts.css` note in the README). The
183
+ default bundle ships Doto only. `--sans` names Inter first and `--mono`
184
+ JetBrains Mono, so without those faces each OS draws its own fallback.
185
+ Import `@ponchia/ui/css/fonts-inter.css` and
186
+ `@ponchia/ui/css/fonts-jetbrains-mono.css` to ship both (Inter 4.1 as
187
+ one variable face per style; JetBrains Mono 2.304 in regular, bold and
188
+ their italics; SIL OFL 1.1, licenses in `fonts/`). A browser downloads a
189
+ face only when text needs it.
183
190
  - **Surfaces / lines / text** — the `--bg*`, `--panel*`, `--line*`,
184
191
  `--text*` tokens are overridable for a bespoke palette, but you then
185
192
  own their contrast. Prefer just `--accent` unless you need a full