babavoss 0.0.1 → 0.12.0

package/gui/theme.css

@@ -0,0 +1,3053 @@
+/* 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;
+}