babavoss 0.12.4 → 0.12.5

package/gui/theme.css

@@ -1,3053 +0,0 @@
-/* src/desktop/desktop.css */
-@layer theme, base, voss, components, utilities;
-
-@layer voss {
-  .desktop {
-    position: relative;
-    display: flex;
-    overflow: hidden;
-    color: var(--foreground);
-    background: var(--desk);
-    font: 13px / 20px var(--font-sans, system-ui);
-    --desktop-ink: color-mix(in oklch, var(--foreground) 6%, transparent);
-    --desktop-ink-strong: color-mix(in oklch, var(--foreground) 11%, transparent);
-    --desktop-ink-top: color-mix(in oklch, var(--foreground) 20%, transparent);
-    flex-direction: column;
-    height: 100dvh;
-    min-height: 320px;
-  }
-
-  .desktop button, .desktop input, .desktop select {
-    font: inherit;
-    color: inherit;
-  }
-
-  .desktop button {
-    cursor: pointer;
-  }
-
-  .desktop button:disabled {
-    cursor: default;
-  }
-
-  .desktop button:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: -2px;
-  }
-
-  .desktop select:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: -2px;
-  }
-
-  .desktop-bar {
-    position: relative;
-    z-index: 3;
-    display: flex;
-    user-select: none;
-    flex-shrink: 0;
-    align-items: stretch;
-    gap: 4px;
-    height: 40px;
-    padding: 6px 8px;
-  }
-
-  .desktop-logo {
-    display: grid;
-    color: var(--foreground);
-    background: none;
-    border: 0;
-    border-radius: 999px;
-    place-items:  center;
-    width: 28px;
-    padding: 0;
-  }
-
-  .desktop-logo:hover {
-    background: var(--desktop-ink);
-  }
-
-  .desktop-logo.is-selected {
-    background: var(--desktop-ink-top);
-    color: var(--primary);
-  }
-
-  .desktop-eyes {
-    display: block;
-  }
-
-  .desktop-eye-large {
-    transition: opacity .12s;
-  }
-
-  .desktop-eye-small {
-    transition: transform .22s cubic-bezier(.3,1.2,.3,1);
-  }
-
-  .desktop-eyes.is-alone .desktop-eye-large {
-    opacity: 0;
-  }
-
-  .desktop-eyes.is-alone .desktop-eye-small {
-    transform: translateX(-21.5px);
-  }
-
-  .desktop-eyes circle {
-    transform-box: fill-box;
-    transform-origin: center;
-  }
-
-  .desktop-eyes.is-settling .desktop-eye-small {
-    animation: .34s cubic-bezier(.3,1.6,.4,1) desktop-eye-home;
-  }
-
-  .desktop-eyes.is-settling .desktop-eye-large {
-    animation: .34s cubic-bezier(.3,1.6,.4,1) desktop-eye-back;
-  }
-
-  @keyframes desktop-eye-home {
-    from {
-      transform: translateX(-21.5px);
-    }
-  }
-
-  @keyframes desktop-eye-back {
-    from {
-      transform: scale(0);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .desktop-eyes.is-settling circle {
-      animation: none;
-    }
-  }
-
-  .desktop-bar-title {
-    display: flex;
-    color: var(--muted-foreground);
-    white-space: pre;
-    align-items:  center;
-    padding: 0 8px;
-  }
-
-  .desktop-bar-root {
-    color: var(--muted-foreground);
-    text-decoration: none;
-    border-radius: 4px;
-    margin: 0 -2px;
-    padding: 0 2px;
-  }
-
-  .desktop-bar-root:hover {
-    color: var(--foreground);
-    background: var(--muted);
-    outline: none;
-  }
-
-  .desktop-bar-root:focus-visible {
-    color: var(--foreground);
-    background: var(--muted);
-    outline: none;
-  }
-
-  .desktop-bar-gap {
-    flex: 1;
-  }
-
-  .desktop-pills {
-    display: flex;
-    overflow-x: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    align-items: stretch;
-    gap: 4px;
-    min-width: 0;
-  }
-
-  .desktop-pills::-webkit-scrollbar {
-    display: none;
-  }
-
-  .desktop-pills.is-faded-left {
-    mask-image: linear-gradient(to right, #0000, #000 32px);
-  }
-
-  .desktop-pills.is-faded-right {
-    mask-image: linear-gradient(to right, #000 calc(100% - 32px), #0000);
-  }
-
-  .desktop-pills.is-faded-left.is-faded-right {
-    mask-image: linear-gradient(to right, #0000, #000 32px calc(100% - 32px), #0000);
-  }
-
-  .desktop-pill {
-    position: relative;
-    display: flex;
-    color: var(--muted-foreground);
-    border-radius: 999px;
-    flex-shrink: 0;
-    align-items:  center;
-    max-width: 180px;
-  }
-
-  .desktop-pill:hover, .desktop-pill.is-cursor {
-    background: var(--desktop-ink);
-    color: var(--foreground);
-  }
-
-  .desktop-pill.is-active {
-    background: var(--desktop-ink-strong);
-    color: var(--foreground);
-  }
-
-  .desktop-pill-label {
-    display: flex;
-    white-space: nowrap;
-    background: none;
-    border: 0;
-    border-radius: 999px;
-    align-items:  center;
-    gap: 3px;
-    min-width: 0;
-    height: 100%;
-    padding: 0 10px 0 3px;
-  }
-
-  .desktop-pill-icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items:  center;
-    width: 22px;
-    height: 22px;
-  }
-
-  .desktop-pill-icon, .desktop-pill-close {
-    transition: transform .26s cubic-bezier(.3,1.6,.4,1), opacity 80ms;
-  }
-
-  .desktop-pill:hover .desktop-pill-label > .desktop-pill-icon {
-    opacity: 0;
-    transform: scale(.5);
-  }
-
-  .desktop-pill:has(:focus-visible) .desktop-pill-label > .desktop-pill-icon {
-    opacity: 0;
-    transform: scale(.5);
-  }
-
-  .desktop-pill-close {
-    position: absolute;
-    display: grid;
-    color: var(--foreground);
-    opacity: 0;
-    pointer-events: none;
-    background: none;
-    border: 0;
-    border-radius: 999px;
-    place-items:  center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    top: 3px;
-    left: 3px;
-    transform: scale(.5);
-  }
-
-  .desktop-pill-close svg {
-    display: block;
-  }
-
-  .desktop-pill:hover .desktop-pill-close {
-    opacity: 1;
-    pointer-events: auto;
-    transform: none;
-  }
-
-  .desktop-pill:has(:focus-visible) .desktop-pill-close {
-    opacity: 1;
-    pointer-events: auto;
-    transform: none;
-  }
-
-  .desktop-pill-close:hover {
-    background: var(--desktop-ink-strong);
-  }
-
-  .desktop-pill-text {
-    display: block;
-    overflow: hidden;
-  }
-
-  .desktop-pill-track {
-    display: flex;
-    gap: 24px;
-  }
-
-  .desktop-pill-track > span {
-    flex-shrink: 0;
-  }
-
-  @property --desktop-fade-left {
-    syntax: "<length>"; inherits: false; initial-value: 0px;
-  }
-
-  .desktop-pill-text.is-overflowing {
-    mask-image: linear-gradient(to right, transparent, #000 var(--desktop-fade-left), #000 calc(100% - 20px), transparent);
-  }
-
-  .desktop-pill:hover .desktop-pill-text.is-overflowing {
-    animation: .5s ease-out 1s forwards desktop-marquee-fade;
-  }
-
-  .desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track {
-    animation: .6s cubic-bezier(.33,.66,.66,1) 1s forwards desktop-marquee-start;
-  }
-
-  .desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track > span {
-    animation: desktop-marquee var(--scroll) linear 1s infinite;
-  }
-
-  @keyframes desktop-marquee {
-    to {
-      transform: translateX(var(--shift));
-    }
-  }
-
-  @keyframes desktop-marquee-start {
-    to {
-      transform: translateX(var(--ease));
-    }
-  }
-
-  @keyframes desktop-marquee-fade {
-    to {
-      --desktop-fade-left: 12px;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .desktop-pill:hover .desktop-pill-text.is-overflowing, .desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track, .desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track > span {
-      animation: none;
-    }
-  }
-
-  .desktop-content {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .desktop-app {
-    overflow: auto;
-    background: var(--background);
-    border-top: 1px solid var(--border);
-    flex: 1;
-    min-height: 0;
-  }
-
-  .desktop-app[hidden] {
-    display: none;
-  }
-
-  .desktop-launcher {
-    position: absolute;
-    z-index: 5;
-    display: flex;
-    background: var(--desk);
-    flex-direction: column;
-    inset: 0;
-  }
-
-  .desktop-search {
-    background: none;
-    border: 0;
-    flex: 1;
-    min-width: 0;
-    height: 100%;
-    padding: 0 10px 0 6px;
-    font-size: 13px;
-  }
-
-  .desktop-search::placeholder {
-    color: var(--muted-foreground);
-  }
-
-  .desktop .desktop-search:focus {
-    outline: none;
-  }
-
-  .desktop-launcher-body {
-    overflow: auto;
-    flex: 1;
-    min-height: 0;
-    padding: 4px 8px 24px 40px;
-  }
-
-  .desktop-dot {
-    position: absolute;
-    background: var(--primary);
-    opacity: 0;
-    pointer-events: none;
-    will-change: transform;
-    z-index: 1;
-    border-radius: 50%;
-    width: 6.5px;
-    height: 6.5px;
-    margin: -3.25px 0 0 -3.25px;
-    transition: opacity .12s;
-    top: 0;
-    left: 0;
-  }
-
-  .desktop-string {
-    position: absolute;
-    transform-origin: 0 0;
-    background: color-mix(in oklch, var(--foreground) 35%, transparent);
-    opacity: 0;
-    pointer-events: none;
-    will-change: transform;
-    width: 1px;
-    height: 1px;
-    margin-left: -.5px;
-    transition: opacity .12s;
-    top: 0;
-    left: 0;
-  }
-
-  .desktop-group {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    margin: 0 0 8px;
-  }
-
-  .desktop-group-title {
-    letter-spacing: .1em;
-    text-transform: uppercase;
-    color: var(--muted-foreground);
-    margin: 10px 0 2px 6px;
-    font-size: 10px;
-    font-weight: 600;
-    line-height: 16px;
-  }
-
-  .desktop-row {
-    position: relative;
-    display: flex;
-    color: var(--muted-foreground);
-    text-align: left;
-    background: none;
-    border: 0;
-    border-radius: 999px;
-    align-items:  center;
-    width: 100%;
-    height: 28px;
-    padding: 0;
-    transition: translate .18s cubic-bezier(.3,1.2,.3,1);
-  }
-
-  .desktop-row-app, .desktop-row-main {
-    display: flex;
-    color: inherit;
-    text-align: left;
-    background: none;
-    border: 0;
-    border-radius: 999px;
-    align-items:  center;
-    gap: 3px;
-    min-width: 0;
-    padding: 0 10px 0 3px;
-  }
-
-  .desktop-row-main {
-    flex: 1;
-    align-self: stretch;
-  }
-
-  .desktop-row.is-cursor {
-    color: var(--foreground);
-    translate: -6px;
-  }
-
-  .desktop-row-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .desktop-row-note {
-    color: var(--muted-foreground);
-    white-space: nowrap;
-    padding-left: 8px;
-    font-size: 11px;
-  }
-
-  .desktop-row-window:hover .desktop-pill-icon {
-    opacity: 0;
-    transform: scale(.5);
-  }
-
-  .desktop-row-window:has(:focus-visible) .desktop-pill-icon {
-    opacity: 0;
-    transform: scale(.5);
-  }
-
-  .desktop-row-window:hover .desktop-pill-close {
-    opacity: 1;
-    pointer-events: auto;
-    transform: none;
-  }
-
-  .desktop-row-window:has(:focus-visible) .desktop-pill-close {
-    opacity: 1;
-    pointer-events: auto;
-    transform: none;
-  }
-
-  .desktop-row, .desktop-group-title {
-    animation: .16s cubic-bezier(.2,.7,.2,1) both desktop-arrive;
-    animation-delay: calc(min(var(--i, 0), 14) * 14ms);
-  }
-
-  @keyframes desktop-arrive {
-    from {
-      opacity: 0;
-      transform: translateY(-6px);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .desktop-row, .desktop-group-title {
-      animation: none;
-    }
-
-    .desktop-eye-small, .desktop-row, .desktop-pill-icon, .desktop-pill-close {
-      transition: none;
-    }
-  }
-
-  .desktop-icon {
-    display: block;
-    flex-shrink: 0;
-  }
-
-  .desktop-muted {
-    color: var(--muted-foreground);
-    margin: 8px 0 8px 6px;
-    font-size: 11px;
-  }
-
-  .desktop-launcher-legend {
-    display: flex;
-    color: var(--muted-foreground);
-    flex-wrap: wrap;
-    flex-shrink: 0;
-    gap: 6px 16px;
-    padding: 10px 16px 12px;
-    font-size: 11px;
-  }
-
-  .desktop-launcher-legend span {
-    display: inline-flex;
-    align-items:  center;
-    gap: 4px;
-  }
-
-  .desktop-launcher-legend kbd {
-    display: inline-grid;
-    background: var(--desktop-ink);
-    color: var(--foreground);
-    font: inherit;
-    border-radius: 999px;
-    place-items:  center;
-    min-width: 18px;
-    height: 18px;
-    padding: 0 5px;
-    font-size: 10px;
-  }
-
-  .desktop-empty {
-    padding: 24px;
-  }
-
-  .desktop-error {
-    background: var(--muted);
-    color: var(--destructive);
-    padding: 8px 12px;
-  }
-
-  .desktop-error button {
-    margin-left: 12px;
-  }
-}
-
-/* src/gui/theme.css */
-@layer theme, base, voss, components, utilities;
-
-@layer voss {
-  :root, .desktop {
-    --background: oklch(.968 .004 75);
-    --surface: oklch(.992 .003 75);
-    --card: var(--surface);
-    --foreground: oklch(.29 .008 70);
-    --popover: oklch(.995 .003 75);
-    --muted: oklch(.945 .005 75);
-    --muted-foreground: oklch(.53 .01 70);
-    --accent: oklch(.935 .006 75);
-    --primary: oklch(.52 .11 250);
-    --primary-foreground: oklch(.985 .004 250);
-    --destructive: oklch(.56 .14 28);
-    --warning: oklch(.68 .11 75);
-    --success: oklch(.58 .1 155);
-    --border: oklch(.29 .008 70 / 11%);
-    --input: oklch(.29 .008 70 / 16%);
-    --desk: oklch(.925 .006 75);
-    --chrome: oklch(.952 .005 75);
-    --radius: 4px;
-    --row: 28px;
-    --control: 24px;
-    --gutter: 12px;
-    --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
-    --font-mono: ui-monospace, Menlo, Consolas, monospace;
-    --buncss-light: initial;
-    --buncss-dark: ;
-    color-scheme: light;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]), .desktop[data-theme="system"] {
-      --background: oklch(.2 .005 75);
-      --surface: oklch(.228 .006 75);
-      --foreground: oklch(.87 .012 80);
-      --popover: oklch(.25 .006 75);
-      --muted: oklch(.245 .006 75);
-      --muted-foreground: oklch(.66 .012 78);
-      --accent: oklch(.275 .007 75);
-      --primary: oklch(.74 .075 245);
-      --primary-foreground: oklch(.2 .01 245);
-      --destructive: oklch(.71 .1 30);
-      --warning: oklch(.79 .09 80);
-      --success: oklch(.75 .085 155);
-      --border: oklch(.87 .012 80 / 10%);
-      --input: oklch(.87 .012 80 / 15%);
-      --desk: oklch(.165 .005 75);
-      --chrome: oklch(.185 .005 75);
-      --buncss-light: ;
-      --buncss-dark: initial;
-      color-scheme: dark;
-    }
-  }
-
-  :root[data-theme="dark"], .desktop[data-theme="dark"] {
-    --background: oklch(.2 .005 75);
-    --surface: oklch(.228 .006 75);
-    --foreground: oklch(.87 .012 80);
-    --popover: oklch(.25 .006 75);
-    --muted: oklch(.245 .006 75);
-    --muted-foreground: oklch(.66 .012 78);
-    --accent: oklch(.275 .007 75);
-    --primary: oklch(.74 .075 245);
-    --primary-foreground: oklch(.2 .01 245);
-    --destructive: oklch(.71 .1 30);
-    --warning: oklch(.79 .09 80);
-    --success: oklch(.75 .085 155);
-    --border: oklch(.87 .012 80 / 10%);
-    --input: oklch(.87 .012 80 / 15%);
-    --desk: oklch(.165 .005 75);
-    --chrome: oklch(.185 .005 75);
-    --buncss-light: ;
-    --buncss-dark: initial;
-    color-scheme: dark;
-  }
-
-  *, *:before, *:after {
-    box-sizing: border-box;
-  }
-
-  html {
-    font: 13px / 20px var(--font-sans);
-    -webkit-font-smoothing: antialiased;
-    height: 100%;
-  }
-
-  body {
-    background: var(--desk);
-    color: var(--foreground);
-    height: 100%;
-    margin: 0;
-  }
-
-  #root {
-    display: flex;
-    overflow: hidden;
-    height: 100%;
-  }
-
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in oklch, var(--foreground) 25%, transparent) transparent;
-  }
-
-  code, kbd, pre, samp {
-    font-family: var(--font-mono);
-    font-size: 12px;
-    line-height: 20px;
-  }
-
-  a {
-    color: var(--primary);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  :focus-visible {
-    outline: 2px solid color-mix(in oklch, var(--primary) 60%, transparent);
-    outline-offset: 1px;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  h1, h2, h3 {
-    margin: 0;
-    font-weight: 600;
-  }
-
-  button, input, select, textarea {
-    font: inherit;
-    color: inherit;
-  }
-
-  .bv-muted {
-    color: var(--muted-foreground);
-  }
-
-  .bv-error {
-    color: var(--destructive);
-  }
-
-  .bv-button {
-    display: inline-flex;
-    height: var(--control);
-    border: 1px solid var(--input);
-    border-radius: var(--radius);
-    background: var(--muted);
-    cursor: pointer;
-    white-space: nowrap;
-    align-items:  center;
-    gap: 6px;
-    padding: 0 10px;
-  }
-
-  .bv-button:hover {
-    background: var(--accent);
-  }
-
-  .bv-button:disabled {
-    opacity: .55;
-    cursor: default;
-  }
-
-  .bv-primary {
-    background: var(--primary);
-    color: var(--primary-foreground);
-    border-color: #0000;
-  }
-
-  .bv-primary:hover {
-    background: color-mix(in oklch, var(--primary) 88%, black);
-  }
-
-  .bv-quiet {
-    background: none;
-    border-color: #0000;
-  }
-
-  .bv-quiet:hover {
-    background: var(--accent);
-  }
-
-  .bv-danger {
-    background: var(--destructive);
-    color: #fff;
-    border-color: #0000;
-  }
-
-  .bv-input {
-    height: var(--control);
-    border: 1px solid var(--input);
-    border-radius: var(--radius);
-    background: var(--surface);
-    min-width: 0;
-    padding: 1px 8px;
-  }
-
-  .bv-input[aria-invalid="true"] {
-    border-color: var(--destructive);
-  }
-
-  .bv-textarea {
-    resize: vertical;
-    height: auto;
-    padding: 4px 8px;
-  }
-
-  .bv-select {
-    padding-right: 4px;
-  }
-
-  .bv-mono {
-    font-family: var(--font-mono);
-    font-size: 12px;
-  }
-
-  .bv-check {
-    accent-color: var(--primary);
-    width: 14px;
-    height: 14px;
-    margin: 0;
-  }
-
-  .bv-kbd {
-    display: inline-block;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    text-align: center;
-    border-bottom-width: 2px;
-    min-width: 18px;
-    padding: 0 4px;
-    font-size: 11px;
-    line-height: 16px;
-  }
-
-  .bv-code {
-    border-radius: var(--radius);
-    background: color-mix(in oklch, var(--destructive) 12%, transparent);
-    padding: 0 4px;
-  }
-
-  .bv-panel {
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-  }
-
-  .bv-panel-head {
-    display: flex;
-    height: var(--row);
-    padding: 0 var(--gutter);
-    border-bottom: 1px solid var(--border);
-    background: var(--chrome);
-    align-items:  center;
-    gap: 8px;
-  }
-
-  .bv-panel-title {
-    flex: 1;
-    font-weight: 600;
-  }
-
-  .bv-panel-body {
-    padding: var(--gutter);
-  }
-
-  .bv-rows {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .bv-row {
-    display: flex;
-    min-height: var(--row);
-    padding: 0 var(--gutter);
-    text-align: left;
-    background: none;
-    border: 0;
-    align-items:  center;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .bv-row-button {
-    cursor: pointer;
-    border-radius: var(--radius);
-  }
-
-  .bv-row-button:hover, .bv-row.bv-active {
-    background: var(--accent);
-  }
-
-  .bv-row-label {
-    flex: none;
-  }
-
-  .bv-row-hint {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--muted-foreground);
-    flex: 1;
-    min-width: 0;
-  }
-
-  .bv-table-wrap {
-    overflow: auto;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-  }
-
-  .bv-table {
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  .bv-table th, .bv-table td {
-    height: var(--row);
-    padding: 0 var(--gutter);
-    text-align: left;
-    white-space: nowrap;
-  }
-
-  .bv-table th {
-    position: sticky;
-    background: var(--chrome);
-    border-bottom: 1px solid var(--border);
-    font-weight: 600;
-    top: 0;
-  }
-
-  .bv-table tbody tr:hover {
-    background: var(--muted);
-  }
-
-  .bv-overlay {
-    position: fixed;
-    z-index: 1000;
-    display: grid;
-    background: oklch(.2 .005 75 / 35%);
-    place-items:  center;
-    inset: 0;
-  }
-
-  .bv-dialog {
-    display: flex;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--popover);
-    outline: none;
-    flex-direction: column;
-    width: min(440px, 100vw - 32px);
-    max-height: calc(100vh - 64px);
-  }
-
-  .bv-dialog-head {
-    padding: var(--gutter);
-    border-bottom: 1px solid var(--border);
-    font-weight: 600;
-  }
-
-  .bv-dialog-body {
-    padding: var(--gutter);
-    overflow: auto;
-  }
-
-  .bv-dialog-body p {
-    margin: var(--gutter) 0 0;
-  }
-
-  .bv-dialog-foot {
-    display: flex;
-    padding: 8px var(--gutter);
-    border-top: 1px solid var(--border);
-    justify-content: flex-end;
-    gap: 8px;
-  }
-
-  .bv-cmd {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .bv-cmd-input {
-    padding: 0 var(--gutter);
-    border: 0;
-    border-bottom: 1px solid var(--border);
-    outline: none;
-    background: none;
-    height: 36px;
-  }
-
-  .bv-cmd-list {
-    overflow: auto;
-    max-height: 60vh;
-    padding: 4px;
-  }
-
-  .bv-cmd-group {
-    color: var(--muted-foreground);
-    padding: 8px 8px 2px;
-    font-size: 11px;
-    line-height: 16px;
-  }
-
-  .bv-cmd-item {
-    display: flex;
-    height: var(--row);
-    border-radius: var(--radius);
-    cursor: pointer;
-    align-items:  center;
-    gap: 8px;
-    padding: 0 8px;
-  }
-
-  .bv-cmd-item.bv-active {
-    background: color-mix(in oklch, var(--primary) 15%, transparent);
-  }
-
-  .bv-cmd-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .bv-cmd-hint {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--muted-foreground);
-    flex: none;
-    max-width: 45%;
-    font-size: 11px;
-  }
-
-  .bv-cmd-empty {
-    color: var(--muted-foreground);
-    padding: 8px;
-  }
-
-  .bv-runner {
-    padding: 8px;
-  }
-
-  .bv-runner > p {
-    margin: 4px var(--gutter);
-  }
-
-  .bv-runner-nav {
-    margin: 0 0 4px;
-  }
-
-  .bv-form {
-    display: flex;
-    gap: var(--gutter);
-    flex-direction: column;
-    padding: 4px;
-  }
-
-  .bv-form-head {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 8px;
-  }
-
-  .bv-form-name {
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  .bv-field {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .bv-field label {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    font-weight: 500;
-  }
-
-  .bv-field-inline {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items:  center;
-    gap: 8px;
-  }
-
-  .bv-required {
-    color: var(--destructive);
-    margin-left: 1px;
-  }
-
-  .bv-type {
-    color: var(--muted-foreground);
-    font-size: 11px;
-    font-weight: 400;
-    font-family: var(--font-mono);
-  }
-
-  .bv-form-actions {
-    display: flex;
-    align-items:  center;
-    gap: 8px;
-  }
-
-  .bv-output {
-    margin: 0;
-  }
-
-  .bv-json {
-    padding: 8px var(--gutter);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--muted);
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-
-  .bv-error {
-    margin: 0;
-  }
-
-  .gui-page {
-    max-width: 960px;
-    margin: 0 auto;
-    padding: 24px 16px;
-  }
-
-  .gui-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .gui-card {
-    display: flex;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--card);
-    align-items:  center;
-    gap: 12px;
-    padding: 10px 12px;
-  }
-
-  .gui-card h2 {
-    flex: 1;
-    font-size: 14px;
-  }
-
-  .gui-card .gui-links {
-    display: flex;
-    gap: 10px;
-  }
-
-  .pk-gap {
-    flex: 1;
-  }
-
-  .pk-pane {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-  }
-
-  .pk-fade {
-    animation: .14s ease-out pk-in;
-  }
-
-  @keyframes pk-in {
-    from {
-      opacity: 0;
-      transform: translateY(2px);
-    }
-
-    to {
-      opacity: 1;
-      transform: none;
-    }
-  }
-
-  .pk-strip {
-    display: flex;
-    padding: 0 6px 0 var(--gutter);
-    border-bottom: 1px solid var(--border);
-    background: var(--chrome);
-    flex: none;
-    align-items:  center;
-    gap: 6px;
-    height: 36px;
-  }
-
-  .pk-strip-title {
-    font-weight: 600;
-  }
-
-  .pk-list {
-    list-style: none;
-    overflow: auto;
-    flex: 1;
-    min-height: 0;
-    margin: 0;
-    padding: 4px 0;
-  }
-
-  .pk-list > li {
-    margin: 0;
-  }
-
-  .pk-tile {
-    display: grid;
-    background: color-mix(in oklch, oklch(.68 .14 var(--h, 250)) 20%, var(--surface));
-    color: color-mix(in oklch, oklch(.62 .15 var(--h, 250)) 85%, var(--foreground));
-    box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(.65 .14 var(--h, 250)) 28%, transparent);
-    border-radius: 7px;
-    flex: none;
-    place-items:  center;
-    width: 30px;
-    height: 30px;
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  .pk-go {
-    display: grid;
-    color: var(--muted-foreground);
-    opacity: 0;
-    flex: none;
-    place-items:  center;
-    transition: opacity .1s, transform .1s;
-    transform: translateX(-3px);
-  }
-
-  .is-active > .pk-go, .pk-baba.is-active .pk-go, .pk-folder.is-active .pk-go {
-    opacity: 1;
-    transform: none;
-  }
-
-  .is-ghost {
-    pointer-events: none;
-  }
-
-  .pk-ghost-line {
-    display: block;
-    background: var(--muted);
-    animation: 1.2s ease-in-out infinite alternate pk-breathe;
-    border-radius: 4px;
-    height: 8px;
-    margin: 4px 0;
-  }
-
-  .pk-ghost-line.is-sub {
-    opacity: .7;
-    height: 6px;
-  }
-
-  @keyframes pk-breathe {
-    from {
-      opacity: .55;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  .pk-empty .pk-primary {
-    margin-top: 12px;
-  }
-
-  .pk-alert {
-    padding: 6px var(--gutter);
-    border-top: 1px solid color-mix(in oklch, var(--destructive) 30%, transparent);
-    background: color-mix(in oklch, var(--destructive) 8%, var(--surface));
-    color: var(--destructive);
-    overflow-wrap: anywhere;
-    margin: 0;
-    font-size: 12px;
-  }
-
-  .pk-list + .pk-alert, .pk-strip + .pk-alert {
-    border-top: 0;
-    border-bottom: 1px solid color-mix(in oklch, var(--destructive) 30%, transparent);
-  }
-
-  .pk-path {
-    display: flex;
-    border-bottom: 1px solid var(--border);
-    flex: none;
-    align-items:  center;
-    gap: 8px;
-    min-height: 36px;
-    padding: 0 6px 0 8px;
-  }
-
-  .pk-crumbs {
-    display: flex;
-    overflow: hidden;
-    white-space: nowrap;
-    flex: 1;
-    align-items:  center;
-    min-width: 0;
-  }
-
-  .pk-crumb-wrap:last-child {
-    min-width: 0;
-  }
-
-  .pk-crumb-wrap:last-child .pk-crumb {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 22px;
-  }
-
-  .pk-crumb-wrap {
-    display: inline-flex;
-    align-items:  center;
-  }
-
-  .pk-crumb {
-    display: inline-flex;
-    border-radius: var(--radius);
-    color: var(--muted-foreground);
-    font: inherit;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    align-items:  center;
-    height: 22px;
-    padding: 0 4px;
-  }
-
-  button.pk-crumb:hover {
-    background: var(--accent);
-    color: var(--foreground);
-  }
-
-  .pk-crumb.is-here {
-    color: var(--foreground);
-    cursor: default;
-    font-weight: 600;
-  }
-
-  .pk-crumb-sep {
-    color: var(--muted-foreground);
-    opacity: .5;
-    padding: 0 1px;
-  }
-
-  .pk-filter {
-    display: flex;
-    height: var(--control);
-    border: 1px solid var(--input);
-    border-radius: var(--radius);
-    background: var(--background);
-    color: var(--muted-foreground);
-    flex: none;
-    align-items:  center;
-    gap: 6px;
-    width: 150px;
-    padding: 0 8px;
-    transition: width .14s, border-color .1s;
-  }
-
-  .pk-filter:focus-within {
-    border-color: color-mix(in oklch, var(--primary) 55%, transparent);
-    color: var(--foreground);
-    width: 190px;
-  }
-
-  .pk-filter input {
-    outline: 0;
-    background: none;
-    border: 0;
-    flex: 1;
-    min-width: 0;
-    height: 100%;
-    padding: 0;
-  }
-
-  .pk-folders {
-    transition: opacity .12s;
-  }
-
-  .pk-folders.is-loading {
-    opacity: .5;
-  }
-
-  .pk-folder {
-    position: relative;
-    display: flex;
-    height: var(--row);
-    border-radius: var(--radius);
-    color: inherit;
-    text-align: left;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    align-items:  center;
-    gap: 8px;
-    width: calc(100% - 8px);
-    margin: 0 4px;
-    padding: 0 8px;
-  }
-
-  .pk-folder.is-active {
-    background: var(--accent);
-  }
-
-  .pk-folder.is-active:before {
-    content: "";
-    position: absolute;
-    background: var(--primary);
-    border-radius: 1px;
-    width: 2px;
-    top: 6px;
-    bottom: 6px;
-    left: -4px;
-  }
-
-  .pk-folder-icon {
-    display: grid;
-    color: var(--muted-foreground);
-    flex: none;
-    place-items:  center;
-  }
-
-  .pk-folder.is-baba .pk-folder-icon {
-    color: var(--primary);
-  }
-
-  .pk-folder.is-baba .pk-folder-name {
-    font-weight: 600;
-  }
-
-  .pk-folder.is-up .pk-folder-name {
-    color: var(--muted-foreground);
-  }
-
-  .pk-folder-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .pk-folder-name mark {
-    background: color-mix(in oklch, var(--primary) 22%, transparent);
-    color: inherit;
-    border-radius: 2px;
-  }
-
-  .pk-folder-note {
-    color: var(--muted-foreground);
-    font-size: 11px;
-  }
-
-  .pk-pill {
-    color: var(--primary);
-    background: color-mix(in oklch, var(--primary) 12%, transparent);
-    border-radius: 8px;
-    flex: none;
-    padding: 0 6px;
-    font-size: 11px;
-    line-height: 16px;
-  }
-
-  .pk-pill.is-known {
-    color: var(--success);
-    background: color-mix(in oklch, var(--success) 13%, transparent);
-  }
-
-  .pk-none {
-    padding: 12px var(--gutter);
-    color: var(--muted-foreground);
-  }
-
-  .pk-dock {
-    display: flex;
-    padding: 10px var(--gutter);
-    border-top: 1px solid var(--border);
-    background: var(--chrome);
-    flex-direction: column;
-    flex: none;
-    gap: 8px;
-  }
-
-  .pk-dock-line {
-    display: flex;
-    align-items:  center;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  .pk-dock-line:empty {
-    display: none;
-  }
-
-  .pk-dock-icon {
-    display: grid;
-    color: var(--muted-foreground);
-    flex: none;
-    place-items:  center;
-  }
-
-  .pk-dock.is-baba .pk-dock-icon {
-    color: var(--primary);
-  }
-
-  .pk-dock.is-known .pk-dock-icon {
-    color: var(--success);
-  }
-
-  .pk-dock-text {
-    color: var(--muted-foreground);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-  }
-
-  .pk-here {
-    color: var(--foreground);
-    font-family: var(--font-mono);
-    font-size: 12px;
-  }
-
-  .pk-dock-text code {
-    color: var(--foreground);
-    font-size: 12px;
-  }
-
-  .pk-field {
-    display: flex;
-    height: var(--control);
-    border: 1px solid var(--input);
-    border-radius: var(--radius);
-    background: var(--surface);
-    overflow: hidden;
-    align-items:  center;
-    width: 150px;
-    min-width: 0;
-  }
-
-  .pk-field.is-wide {
-    width: 190px;
-  }
-
-  .pk-field:focus-within {
-    border-color: color-mix(in oklch, var(--primary) 55%, transparent);
-  }
-
-  .pk-field span {
-    display: grid;
-    border-right: 1px solid var(--border);
-    background: var(--muted);
-    color: var(--muted-foreground);
-    flex: none;
-    align-self: stretch;
-    place-items:  center;
-    padding: 0 7px;
-    font-size: 11px;
-  }
-
-  .pk-field input {
-    outline: 0;
-    background: none;
-    border: 0;
-    flex: 1;
-    min-width: 0;
-    height: 100%;
-    padding: 0 7px;
-  }
-
-  .pk-busy {
-    display: inline-flex;
-    color: var(--muted-foreground);
-    align-items:  center;
-    gap: 8px;
-  }
-
-  .pk-primary {
-    display: inline-flex;
-    border-radius: var(--radius);
-    background: var(--primary);
-    color: var(--primary-foreground);
-    cursor: pointer;
-    white-space: nowrap;
-    border: 0;
-    align-items:  center;
-    gap: 6px;
-    height: 26px;
-    padding: 0 6px 0 10px;
-    transition: background .1s;
-    font-weight: 500;
-  }
-
-  .pk-empty .pk-primary {
-    padding-right: 10px;
-  }
-
-  .pk-primary:hover {
-    background: color-mix(in oklch, var(--primary) 88%, var(--foreground));
-  }
-
-  .pk-primary:disabled {
-    opacity: .5;
-    cursor: default;
-  }
-
-  .pk-kbd {
-    display: inline-grid;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    color: var(--foreground);
-    font-family: var(--font-sans);
-    border-bottom-width: 2px;
-    place-items:  center;
-    min-width: 18px;
-    height: 18px;
-    padding: 0 4px;
-    font-size: 10px;
-    line-height: 1;
-  }
-
-  .pk-kbd.is-on-primary {
-    background: color-mix(in oklch, var(--primary-foreground) 18%, transparent);
-    color: var(--primary-foreground);
-    border: 0;
-  }
-
-  .pk-spin {
-    display: inline-block;
-    border: 1.5px solid color-mix(in oklch, var(--muted-foreground) 35%, transparent);
-    border-top-color: var(--muted-foreground);
-    animation: .7s linear infinite pk-turn;
-    border-radius: 50%;
-    width: 12px;
-    height: 12px;
-  }
-
-  @keyframes pk-turn {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @media (max-width: 560px) {
-    .pk-dock-line:not(.is-say) {
-      flex-wrap: wrap;
-    }
-
-    .pk-field, .pk-field.is-wide {
-      width: 100%;
-    }
-
-    .pk-filter, .pk-filter:focus-within {
-      width: 120px;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .pk-fade, .pk-ghost-line, .pk-spin {
-      animation: none;
-    }
-
-    .pk-go, .pk-filter, .pk-folders {
-      transition: none;
-    }
-  }
-
-  .gui-view {
-    position: fixed;
-    overflow: auto;
-    background: var(--background);
-    inset: 0;
-  }
-
-  .gui-notice {
-    border-bottom: 1px solid var(--destructive);
-    background: color-mix(in oklch, var(--destructive) 10%, var(--background));
-    margin: 0;
-    padding: 12px 16px;
-  }
-
-  .gui-failure {
-    white-space: pre-wrap;
-    font-family: var(--font-mono);
-    margin: 8px 0 0;
-    font-size: 12px;
-  }
-
-  .gui-section {
-    margin: 16px 0;
-  }
-
-  .gui-section h2 {
-    color: var(--muted-foreground);
-    text-transform: uppercase;
-    letter-spacing: .04em;
-    margin-bottom: 8px;
-    font-size: 13px;
-  }
-
-  .gui-entity {
-    display: grid;
-    grid-template-columns: 56px 1fr auto;
-    border-bottom: 1px solid var(--border);
-    align-items:  start;
-    gap: 8px;
-    padding: 6px 0;
-  }
-
-  .gui-entity code {
-    color: var(--muted-foreground);
-  }
-
-  .gui-parts {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px 12px;
-  }
-
-  .gui-part {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 6px;
-  }
-
-  .gui-part b {
-    font-weight: 600;
-  }
-
-  .gui-part pre {
-    display: inline;
-    white-space: pre-wrap;
-    margin: 0;
-    font-size: 12px;
-  }
-
-  .gui-filter {
-    display: flex;
-    align-items:  center;
-    gap: 8px;
-    margin-bottom: 8px;
-  }
-
-  .gui-fade {
-    animation: .1s ease-out gui-appear;
-  }
-
-  @keyframes gui-appear {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .gui-fade {
-      animation: none;
-    }
-  }
-
-  .gui-app {
-    max-width: 1100px;
-    padding: 16px 20px 32px;
-  }
-
-  .gui-app > h2 {
-    margin: 16px 0 4px;
-    font-size: 13px;
-  }
-
-  .gui-choices {
-    display: flex;
-    gap: 6px;
-    margin-top: 8px;
-  }
-
-  .gui-stale {
-    position: fixed;
-    z-index: 900;
-    display: flex;
-    border: 1px solid var(--border);
-    background: var(--card);
-    color: var(--foreground);
-    border-radius: 8px;
-    align-items:  center;
-    gap: 12px;
-    max-width: min(640px, 100vw - 60px);
-    padding: 8px 12px;
-    font-size: 13px;
-    bottom: 10px;
-    left: 10px;
-    box-shadow: 0 8px 24px #00000040;
-    box-shadow: 0 8px 24px color(display-p3 0 0 0 / .25);
-    box-shadow: 0 8px 24px lab(0% 0 0 / .25);
-  }
-
-  .bv-row {
-    display: flex;
-    align-items:  center;
-    gap: 8px;
-    margin: 8px 0;
-  }
-
-  .bv-between {
-    justify-content: space-between;
-  }
-
-  .bv-object-card {
-    display: flex;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    overflow: hidden;
-    flex-direction: column;
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  .bv-object-card-head {
-    display: flex;
-    background: var(--chrome);
-    border-bottom: 1px solid var(--border);
-    align-items: baseline;
-    gap: 8px;
-    min-width: 0;
-    height: 28px;
-    padding: 4px 10px;
-    font-size: 13px;
-    line-height: 20px;
-  }
-
-  .bv-object-key {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--primary);
-    font-variant-numeric: tabular-nums;
-    min-width: 0;
-  }
-
-  .bv-object-card-head .bv-muted {
-    margin-left: auto;
-    font-size: 11px;
-  }
-
-  .bv-object-fields {
-    display: grid;
-    grid-template-columns: minmax(72px, auto) 1fr;
-    gap: 2px 10px;
-    margin: 0;
-    padding: 6px 10px;
-  }
-
-  .bv-object-fields > div {
-    display: contents;
-  }
-
-  .bv-object-fields dt {
-    color: var(--muted-foreground);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .bv-object-fields dd {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    margin: 0;
-  }
-
-  .bv-object-fields code {
-    font-size: 11px;
-  }
-
-  .bv-object-num {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .bv-object-tag {
-    background: var(--muted);
-    color: var(--muted-foreground);
-    border-radius: 3px;
-    padding: 0 5px;
-    font-size: 11px;
-  }
-
-  .bv-object-ref {
-    color: var(--primary);
-    cursor: pointer;
-    font: inherit;
-    background: none;
-    border: 0;
-    border-radius: 3px;
-    padding: 0 4px;
-  }
-
-  .bv-object-ref:hover {
-    background: color-mix(in oklch, var(--primary) 12%, transparent);
-  }
-
-  .bv-object-more {
-    color: var(--muted-foreground);
-    cursor: pointer;
-    font: inherit;
-    text-decoration: underline dotted;
-    background: none;
-    border: 0;
-    padding: 0;
-  }
-
-  .bv-object-rider {
-    border-top: 1px solid var(--border);
-  }
-
-  .bv-object-rider h4 {
-    display: flex;
-    color: var(--muted-foreground);
-    gap: 8px;
-    margin: 0;
-    padding: 4px 10px 0;
-    font-size: 11px;
-    font-weight: 600;
-    line-height: 16px;
-  }
-
-  .bv-object-actions {
-    display: flex;
-    border-top: 1px solid var(--border);
-    background: var(--chrome);
-    flex-wrap: wrap;
-    gap: 4px;
-    padding: 6px 10px;
-  }
-
-  .bv-object-actions .bv-button {
-    height: 20px;
-    padding: 0 8px;
-    font-size: 11px;
-  }
-
-  .bv-object-needs {
-    border: 1px dashed var(--border);
-    border-radius: var(--radius);
-    color: var(--muted-foreground);
-    height: 20px;
-    padding: 0 6px;
-    font-size: 11px;
-    line-height: 20px;
-  }
-
-  .bv-object-actions .is-open {
-    border-color: var(--primary);
-  }
-
-  .bv-object-form {
-    display: flex;
-    border-top: 1px solid var(--border);
-    background: var(--background);
-    flex-direction: column;
-    gap: 6px;
-    padding: 8px 10px;
-  }
-
-  .bv-object-form-head {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    font-size: 12px;
-  }
-
-  .bv-object-field {
-    display: grid;
-    grid-template-columns: 90px 1fr;
-    align-items:  center;
-    gap: 8px;
-    font-size: 12px;
-  }
-
-  .bv-object-field .bv-input, .bv-object-field select, .bv-object-field textarea {
-    font: inherit;
-    color: inherit;
-    background: var(--surface);
-    border: 1px solid var(--input);
-    border-radius: var(--radius);
-    width: 100%;
-    min-width: 0;
-    padding: 2px 6px;
-  }
-
-  .bv-object-loose h4 {
-    display: flex;
-    gap: 8px;
-    margin: 0 0 6px;
-    font-size: 12px;
-  }
-
-  .bv-proofs {
-    display: grid;
-    grid-template-columns: 260px minmax(0, 1fr);
-    height: 100%;
-    min-height: 0;
-  }
-
-  .bv-rail {
-    display: flex;
-    overflow: auto;
-    scrollbar-gutter: stable;
-    border-right: 1px solid var(--border);
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .bv-rail-strip {
-    position: sticky;
-    z-index: 1;
-    display: flex;
-    background: var(--chrome);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    align-items:  center;
-    gap: 8px;
-    height: 28px;
-    padding: 0 8px;
-    top: 0;
-  }
-
-  .bv-rail-count {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--muted-foreground);
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-    min-width: 0;
-    margin-left: auto;
-    font-size: 11px;
-  }
-
-  .bv-rail-strip .bv-button {
-    flex-shrink: 0;
-    height: 20px;
-    padding: 0 6px;
-    font-size: 11px;
-  }
-
-  .bv-lenses {
-    display: inline-flex;
-    gap: 2px;
-  }
-
-  .bv-lens {
-    border-radius: var(--radius);
-    color: var(--muted-foreground);
-    font: inherit;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    height: 20px;
-    padding: 0 8px;
-    font-size: 12px;
-  }
-
-  .bv-lens:hover {
-    color: var(--foreground);
-  }
-
-  .bv-lens.is-open {
-    background: var(--accent);
-    color: var(--foreground);
-  }
-
-  .bv-stage-card, .bv-object-col {
-    display: flex;
-    border: 0;
-    border-bottom: 1px solid var(--border);
-    color: inherit;
-    cursor: pointer;
-    font: inherit;
-    text-align: left;
-    background: none;
-    border-radius: 0;
-    flex-shrink: 0;
-    align-items:  center;
-    gap: 8px;
-    width: 100%;
-    min-width: 0;
-    height: 28px;
-    padding: 0 12px;
-  }
-
-  .bv-stage-card:hover, .bv-object-col:hover {
-    background: var(--accent);
-  }
-
-  .bv-stage-card.is-open, .bv-object-col.is-open {
-    background: color-mix(in oklch, var(--primary) 8%, transparent);
-    box-shadow: inset 2px 0 0 var(--primary);
-  }
-
-  .bv-stage-text, .bv-object-head {
-    display: flex;
-    flex: 1;
-    align-items: baseline;
-    gap: 8px;
-    min-width: 0;
-  }
-
-  .bv-stage-text b, .bv-object-head b {
-    white-space: nowrap;
-    font-weight: 500;
-  }
-
-  .bv-stage-text .bv-muted, .bv-object-head .bv-muted {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 11px;
-  }
-
-  .bv-object-count {
-    color: var(--muted-foreground);
-    font-variant-numeric: tabular-nums;
-    font-size: 11px;
-  }
-
-  .bv-proof-dot {
-    border-radius: 50%;
-    flex: none;
-    width: 8px;
-    height: 8px;
-    margin: 0;
-  }
-
-  .bv-pane {
-    display: flex;
-    overflow: auto;
-    scrollbar-gutter: stable;
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .bv-pane-body {
-    margin: 0;
-    padding: 12px;
-  }
-
-  .bv-film-head {
-    display: flex;
-    background: var(--chrome);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    align-items:  flex-start;
-    gap: 12px;
-    margin: 0;
-    padding: 4px 12px;
-  }
-
-  .bv-film-head > div {
-    min-width: 0;
-  }
-
-  .bv-film-head h2, .bv-film-head h3 {
-    margin: 0;
-    font-size: 13px;
-    font-weight: 600;
-    line-height: 20px;
-  }
-
-  .bv-film-intent {
-    color: var(--muted-foreground);
-    max-width: 90ch;
-    margin: 0;
-    font-size: 11px;
-    line-height: 16px;
-  }
-
-  .bv-verdict {
-    border-radius: var(--radius);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: none;
-    max-width: 40%;
-    height: 20px;
-    margin-left: auto;
-    padding: 0 6px;
-    font-size: 11px;
-    font-weight: 500;
-    line-height: 20px;
-  }
-
-  .bv-proof-chips {
-    display: flex;
-    border-bottom: 1px solid var(--border);
-    flex-wrap: wrap;
-    flex-shrink: 0;
-    gap: 4px;
-    margin: 0;
-    padding: 4px 12px;
-  }
-
-  .bv-proof-chip {
-    display: inline-flex;
-    border-radius: var(--radius);
-    color: var(--muted-foreground);
-    font: inherit;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background: none;
-    border: 1px solid #0000;
-    align-items:  center;
-    gap: 6px;
-    max-width: 360px;
-    height: 22px;
-    padding: 0 8px;
-    font-size: 12px;
-  }
-
-  .bv-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-  }
-
-  .bv-proof-chip:hover {
-    background: var(--accent);
-    color: var(--foreground);
-  }
-
-  .bv-proof-chip.is-open {
-    background: color-mix(in oklch, var(--primary) 10%, transparent);
-    border-color: color-mix(in oklch, var(--primary) 40%, transparent);
-    color: var(--foreground);
-  }
-
-  .bv-object-sheet {
-    display: grid;
-    grid-template-columns: 72px minmax(0, 1fr);
-    border-bottom: 1px solid var(--border);
-    gap: 0 12px;
-    margin: 0;
-    padding: 4px 12px;
-    font-size: 11px;
-    line-height: 16px;
-  }
-
-  .bv-object-sheet dt {
-    color: var(--muted-foreground);
-    opacity: .8;
-  }
-
-  .bv-object-sheet dd {
-    color: var(--foreground);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    margin: 0;
-  }
-
-  .bv-object-sheet code {
-    font-size: 11px;
-  }
-
-  .bv-object-map {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .bv-object-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 8px;
-  }
-
-  .bv-object-loose {
-    margin-top: 16px;
-  }
-
-  .bv-film > .bv-film-head {
-    border-top: 1px solid var(--border);
-  }
-
-  .bv-film {
-    --detail-row: 21px;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .bv-film-intent {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    min-height: 16px;
-  }
-
-  .bv-verdict {
-    text-align: center;
-    min-width: 56px;
-  }
-
-  .bv-film-transport {
-    position: sticky;
-    z-index: 2;
-    background: var(--background);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    top: 0;
-  }
-
-  .bv-film-controls {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items:  center;
-    gap: 6px;
-    height: 28px;
-    padding: 0 12px;
-  }
-
-  .bv-film-controls .bv-button {
-    flex-shrink: 0;
-    height: 20px;
-    padding: 0 8px;
-    font-size: 11px;
-  }
-
-  .bv-film-controls .bv-film-play {
-    justify-content: center;
-    min-width: 56px;
-  }
-
-  .bv-film-controls .is-hidden {
-    visibility: hidden;
-  }
-
-  .bv-film-controls input[type="range"] {
-    accent-color: var(--primary);
-    flex: 1;
-    min-width: 80px;
-  }
-
-  .bv-film-time {
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-    text-align: right;
-    flex-shrink: 0;
-    min-width: 116px;
-    font-size: 11px;
-  }
-
-  .bv-film-strip {
-    display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    flex-wrap: nowrap;
-    align-items:  center;
-    gap: 2px;
-    height: 26px;
-    padding: 0 12px;
-  }
-
-  .bv-film-frame {
-    cursor: pointer;
-    background: var(--muted);
-    opacity: .7;
-    border: 0;
-    border-radius: 2px;
-    flex: none;
-    width: 10px;
-    height: 16px;
-    padding: 0;
-  }
-
-  .bv-film-body {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 300px;
-    align-items:  start;
-  }
-
-  .bv-film-stage {
-    position: relative;
-    overflow-x: auto;
-    overflow-y: hidden;
-    min-width: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  .bv-film-frame-box {
-    padding: 12px;
-  }
-
-  .bv-film-probe {
-    position: absolute;
-    visibility: hidden;
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .bv-film-probe > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .bv-film-detail {
-    display: flex;
-    border-left: 1px solid var(--border);
-    flex-direction: column;
-    gap: 8px;
-    min-height: 100%;
-    margin: 0;
-    padding: 8px 12px;
-  }
-
-  .bv-film-steps, .bv-film-checks {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  .bv-film-steps li, .bv-film-checks li {
-    border-top: 1px solid var(--border);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 2px 0;
-  }
-
-  .bv-film-steps li:first-child, .bv-film-checks li:first-child {
-    border-top: 0;
-  }
-
-  @media (max-width: 900px) {
-    .bv-film-body {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .bv-film-detail {
-      border-left: 0;
-      border-top: 1px solid var(--border);
-    }
-  }
-
-  .bv-proof-dot.is-passed {
-    background: var(--success);
-  }
-
-  .bv-proof-dot.is-failed {
-    background: var(--destructive);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 25%, transparent);
-  }
-
-  .bv-proof-dot.is-unproven {
-    background: var(--warning);
-  }
-
-  .bv-proof-dot.is-undrawn {
-    border: 1.5px dashed var(--muted-foreground);
-    background: none;
-  }
-
-  .bv-proof-dot.is-sketch {
-    border: 1.5px solid var(--muted-foreground);
-    background: none;
-  }
-
-  .bv-proofs-output {
-    white-space: pre-wrap;
-    background: var(--muted);
-    color: var(--muted-foreground);
-    border-radius: 8px;
-    margin: 8px 0 0;
-    padding: 8px 10px;
-    font-size: 11px;
-    line-height: 1.4;
-  }
-
-  .bv-proofs-output.is-bad {
-    color: var(--destructive);
-  }
-
-  .bv-verdict.is-passed {
-    background: color-mix(in oklch, var(--success) 18%, transparent);
-    color: var(--success);
-  }
-
-  .bv-verdict.is-failed {
-    background: color-mix(in oklch, var(--destructive) 18%, transparent);
-    color: var(--destructive);
-  }
-
-  .bv-verdict.is-sketch {
-    background: var(--muted);
-    color: var(--muted-foreground);
-  }
-
-  .bv-verdict.is-live {
-    background: color-mix(in oklch, var(--primary) 18%, transparent);
-    color: var(--primary);
-  }
-
-  .bv-film-frame.is-ok {
-    background: var(--success);
-  }
-
-  .bv-film-frame.is-bad {
-    background: var(--destructive);
-  }
-
-  .bv-film-frame:hover {
-    opacity: 1;
-  }
-
-  .bv-film-frame.is-here {
-    opacity: 1;
-    outline: 2px solid var(--foreground);
-    outline-offset: 1px;
-  }
-
-  .bv-film-kind {
-    display: inline-block;
-    background: var(--muted);
-    color: var(--muted-foreground);
-    border-radius: 3px;
-    min-width: 40px;
-    margin-right: 4px;
-    padding: 0 5px;
-    font-size: 11px;
-    line-height: 16px;
-  }
-
-  .bv-film-mark {
-    display: inline-block;
-    width: 16px;
-    font-weight: 700;
-  }
-
-  .bv-film-checks .is-ok .bv-film-mark {
-    color: var(--success);
-  }
-
-  .bv-film-checks .is-bad, .bv-film-error {
-    color: var(--destructive);
-  }
-
-  .bv-sandbox-code {
-    white-space: pre;
-    overflow: auto;
-    background: var(--muted);
-    color: var(--foreground);
-    border-radius: 8px;
-    margin: 12px 0 0;
-    padding: 10px 12px;
-    font-size: 12px;
-    line-height: 1.45;
-  }
-
-  .bv-state-list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .bv-state-entity {
-    display: flex;
-    border: 1px solid var(--border);
-    background: var(--card);
-    border-radius: 8px;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 10px;
-    padding: 6px 10px;
-    font-size: 13px;
-  }
-
-  .bv-state-part b {
-    margin-right: 4px;
-  }
-
-  .bv-state-part code {
-    color: var(--muted-foreground);
-    font-size: 12px;
-  }
-}
-
-.bv-maker {
-  padding: 12px 16px;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.bv-maker-head {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 8px;
-}
-
-.bv-maker-head h2 {
-  margin: 0;
-  font-size: 15px;
-}
-
-.bv-maker-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.bv-maker-spec {
-  display: flex;
-  border-top: 1px solid var(--border);
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
-  padding: 6px 0;
-}
-
-.bv-maker-open {
-  color: var(--foreground);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  padding: 0;
-}
-
-.bv-maker-open:hover b {
-  text-decoration: underline;
-}
-
-.bv-maker-facts {
-  display: flex;
-  white-space: nowrap;
-  align-items:  center;
-  gap: 10px;
-}
-
-.bv-maker-output {
-  white-space: pre-wrap;
-  background: var(--muted);
-  color: var(--destructive);
-  border-radius: 8px;
-  margin: 8px 0;
-  padding: 8px 10px;
-  font-size: 12px;
-}
-
-.bv-lab {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.bv-lab-app {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
-.bv-lab-frame {
-  overflow: auto;
-  background: var(--background);
-  border: 1px solid #0000;
-  height: 100%;
-  min-height: 0;
-  transition: border-color .15s;
-}
-
-.bv-lab-frame.is-playing {
-  border-color: var(--primary);
-}
-
-.bv-lab-bare {
-  padding: 12px;
-}
-
-.bv-lab-views {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  margin: 0;
-  padding: 0;
-}
-
-.bv-lab-views .is-open {
-  font-weight: 600;
-}
-
-.bv-bar {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  border-top: 1px solid var(--border);
-  background: var(--card);
-  white-space: nowrap;
-  align-items: stretch;
-  gap: 2px;
-  height: 30px;
-  padding: 0 6px;
-  font-size: 12px;
-  line-height: 30px;
-}
-
-.bv-bar-head {
-  border-top: 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.bv-bar-head .bv-popover {
-  top: calc(100% + 4px);
-  bottom: auto;
-}
-
-.bv-bar-slot {
-  position: relative;
-  display: flex;
-}
-
-.bv-bar-item {
-  display: inline-flex;
-  border-radius: var(--radius);
-  color: var(--foreground);
-  font: inherit;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  align-items:  center;
-  gap: 6px;
-  height: 30px;
-  padding: 0 8px;
-  line-height: 1;
-}
-
-.bv-bar-icon {
-  opacity: .85;
-  flex: none;
-  width: 14px;
-  height: 14px;
-}
-
-.bv-bar-item b {
-  font-weight: 600;
-}
-
-.bv-bar-time {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  min-width: 44px;
-}
-
-.bv-bar-item:hover, .bv-bar-item.is-open {
-  background: var(--accent);
-}
-
-.bv-bar-item.is-ok {
-  color: var(--success);
-}
-
-.bv-bar-item.is-bad {
-  color: var(--destructive);
-}
-
-.bv-bar-item.is-warn {
-  color: var(--warning);
-}
-
-.bv-bar-item.is-here {
-  color: var(--primary);
-}
-
-.bv-bar-item .bv-muted {
-  color: var(--muted-foreground);
-  font-weight: 400;
-}
-
-.bv-bar-slot {
-  align-items: stretch;
-}
-
-.bv-lab-answer .bv-button .bv-bar-icon {
-  margin-right: 4px;
-}
-
-.bv-bar-back {
-  color: var(--muted-foreground);
-  padding: 0 6px;
-}
-
-.bv-bar-back:hover {
-  color: var(--foreground);
-}
-
-.bv-bar-play {
-  justify-content: center;
-  width: 30px;
-  padding: 0;
-}
-
-.bv-bar-play.is-on {
-  color: var(--primary);
-}
-
-.bv-bar-gap {
-  flex: 1;
-}
-
-.bv-bar-summary {
-  margin: 0 0 4px;
-}
-
-.bv-popover {
-  position: absolute;
-  overflow: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--popover);
-  box-shadow: 0 8px 24px color-mix(in oklch, var(--foreground) 14%, transparent);
-  white-space: normal;
-  width: 360px;
-  max-width: calc(100vw - 24px);
-  max-height: min(70vh, 640px);
-  padding: 8px 12px;
-  font-size: 12px;
-  line-height: 16px;
-  bottom: calc(100% + 4px);
-  left: 0;
-}
-
-.bv-popover.is-right {
-  left: auto;
-  right: 0;
-}
-
-.bv-popover.is-wide {
-  width: 460px;
-}
-
-.bv-popover h3 {
-  text-transform: uppercase;
-  letter-spacing: .04em;
-  color: var(--muted-foreground);
-  margin: 8px 0 4px;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.bv-popover h3:first-child {
-  margin-top: 0;
-}
-
-.bv-lab-transport {
-  display: flex;
-  align-items:  center;
-  gap: 10px;
-}
-
-.bv-lab-transport select {
-  font: inherit;
-  background: var(--background);
-  color: var(--foreground);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-}
-
-.bv-lab-scenarios, .bv-lab-jobs, .bv-lab-changes, .bv-lab-outside, .bv-lab-log {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.bv-lab-scenarios > li, .bv-lab-jobs > li, .bv-lab-changes > li, .bv-lab-log > li {
-  border-top: 1px solid var(--border);
-  padding: 4px 0;
-}
-
-.bv-lab-scenarios > li:first-child, .bv-lab-jobs > li:first-child, .bv-lab-changes > li:first-child, .bv-lab-log > li:first-child {
-  border-top: 0;
-}
-
-.bv-lab-scenario-row {
-  display: flex;
-  align-items:  center;
-  gap: 6px;
-}
-
-.bv-lab-scenario-row b {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.bv-lab-answer {
-  display: flex;
-  gap: 4px;
-  margin-top: 4px;
-}
-
-.bv-lab-answer input {
-  font: inherit;
-  border: 1px solid var(--border);
-  background: var(--background);
-  color: var(--foreground);
-  border-radius: 4px;
-  flex: 1;
-  min-width: 0;
-  padding: 2px 6px;
-}
-
-.bv-lab-changes ul {
-  list-style: none;
-  margin: 2px 0 0 8px;
-  padding: 0;
-}
-
-.bv-film-checks .is-warn, .bv-film-checks .is-warn .bv-film-mark {
-  color: var(--warning);
-}
-
-.bv-lab-knobs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: 6px 0;
-}
-
-.bv-lab-knob {
-  font: inherit;
-  border: 1px solid var(--border);
-  background: var(--background);
-  color: var(--foreground);
-  border-radius: 4px;
-  width: 64px;
-  padding: 1px 4px;
-}
-
-.bv-lab-scenarios > li.is-open {
-  background: color-mix(in oklch, var(--primary) 8%, transparent);
-  margin: 0 -12px;
-  padding: 4px 12px;
-}
-
-.bv-lab-story-wrap {
-  border-top: 1px solid var(--border);
-  margin-top: 8px;
-  padding-top: 8px;
-}
-
-.bv-lab-story {
-  list-style: none;
-  margin: 4px 0 0;
-  padding: 0;
-}
-
-.bv-lab-story > li {
-  display: grid;
-  grid-template-columns: 14px 1fr;
-  border-top: 1px solid var(--border);
-  color: var(--muted-foreground);
-  column-gap: 4px;
-  padding: 3px 0;
-}
-
-.bv-lab-story > li:first-child {
-  border-top: 0;
-}
-
-.bv-lab-story > li.is-done, .bv-lab-story > li.is-ok, .bv-lab-story > li.is-bad, .bv-lab-story > li.is-warn {
-  color: var(--foreground);
-}
-
-.bv-lab-story > li.is-here {
-  color: var(--primary);
-  font-weight: 500;
-}
-
-.bv-lab-story > li.is-ok .bv-film-mark {
-  color: var(--success);
-}
-
-.bv-lab-story > li.is-bad {
-  color: var(--destructive);
-}
-
-.bv-lab-story > li.is-warn {
-  color: var(--warning);
-}
-
-.bv-lab-story .bv-lab-changes {
-  grid-column: 2;
-  color: var(--muted-foreground);
-  margin: 2px 0 0;
-  font-size: 11px;
-}
-
-.bv-lab-story-head {
-  margin: 0 0 2px;
-}
-
-.bv-lab-take {
-  margin-top: 4px;
-}
-
-.bv-lab-tree {
-  list-style: none;
-  margin: 2px 0 0 10px;
-  padding: 0;
-  font-size: 11px;
-}
-
-.bv-lab-expect {
-  margin: 4px 0;
-}
-
-.bv-lab-model .bv-object-map {
-  margin-bottom: 6px;
-}