babavoss 0.12.6 → 0.13.1

package/gui/theme.css

@@ -17,7 +17,7 @@
     min-height: 320px;
   }
 
-  .desktop button, .desktop input, .desktop select {
+  :where(.desktop) :where(button, input, select) {
     font: inherit;
     color: inherit;
   }
@@ -52,24 +52,13 @@
     padding: 6px 8px;
   }
 
-  .desktop-logo {
-    display: grid;
+  .desktop-pill-mark {
     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-pill-mark:not(:has(.desktop-pill-close)) .desktop-pill-label > .desktop-pill-icon {
+    opacity: 1;
+    transform: none;
   }
 
   .desktop-eyes {
@@ -92,69 +81,6 @@
     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;
@@ -335,6 +261,7 @@
   .desktop-content {
     overflow: hidden;
     display: flex;
+    isolation: isolate;
     flex-direction: column;
     flex: 1;
     min-width: 0;
@@ -353,22 +280,67 @@
     display: none;
   }
 
+  .desktop-app.is-behind {
+    visibility: hidden;
+  }
+
   .desktop-launcher {
     position: absolute;
     z-index: 5;
     display: flex;
+    background: var(--background);
+    border-top: 1px solid var(--border);
+    justify-content: center;
+    align-items:  flex-start;
+    padding: max(16px, 14vh) 16px 16px;
+    inset: 40px 0 0;
+  }
+
+  .desktop-launcher.is-quick {
+    background: color-mix(in oklch, var(--desk) 55%, transparent);
+    border-top-color: #0000;
+  }
+
+  .desktop-launcher.is-quick .desktop-palette {
     background: var(--desk);
+    border-radius: 26px;
+    max-height: min(100%, 520px);
+    padding: 8px;
+  }
+
+  .desktop-palette {
+    display: flex;
     flex-direction: column;
-    inset: 0;
+    gap: 8px;
+    width: min(560px, 100%);
+    max-height: 100%;
+  }
+
+  .desktop-launcher-search {
+    display: flex;
+    background: var(--desktop-ink);
+    color: var(--muted-foreground);
+    border: 1px solid #0000;
+    border-radius: 999px;
+    flex-shrink: 0;
+    align-items:  center;
+    gap: 3px;
+    height: 36px;
+    padding: 0 4px 0 6px;
+  }
+
+  .desktop-launcher-search:focus-within {
+    border-color: var(--border);
   }
 
   .desktop-search {
+    color: var(--foreground);
     background: none;
     border: 0;
     flex: 1;
     min-width: 0;
     height: 100%;
-    padding: 0 10px 0 6px;
+    padding: 0 10px 0 0;
     font-size: 13px;
   }
 
@@ -384,44 +356,24 @@
     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-launcher-body.is-faded-top {
+    mask-image: linear-gradient(#0000, #000 32px);
   }
 
-  .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-launcher-body.is-faded-bottom {
+    mask-image: linear-gradient(#000 calc(100% - 32px), #0000);
+  }
+
+  .desktop-launcher-body.is-faded-top.is-faded-bottom {
+    mask-image: linear-gradient(#0000, #000 32px calc(100% - 32px), #0000);
   }
 
   .desktop-group {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 2px;
     margin: 0 0 8px;
   }
 
@@ -429,7 +381,7 @@
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--muted-foreground);
-    margin: 10px 0 2px 6px;
+    margin: 10px 0 2px 28px;
     font-size: 10px;
     font-weight: 600;
     line-height: 16px;
@@ -443,11 +395,11 @@
     background: none;
     border: 0;
     border-radius: 999px;
+    flex-shrink: 0;
     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 {
@@ -470,7 +422,7 @@
 
   .desktop-row.is-cursor {
     color: var(--foreground);
-    translate: -6px;
+    background: var(--desktop-ink-strong);
   }
 
   .desktop-row-label {
@@ -510,24 +462,8 @@
     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 {
+    .desktop-eye-small, .desktop-pill-icon, .desktop-pill-close {
       transition: none;
     }
   }
@@ -539,7 +475,7 @@
 
   .desktop-muted {
     color: var(--muted-foreground);
-    margin: 8px 0 8px 6px;
+    margin: 8px 0 8px 28px;
     font-size: 11px;
   }
 
@@ -549,7 +485,7 @@
     flex-wrap: wrap;
     flex-shrink: 0;
     gap: 6px 16px;
-    padding: 10px 16px 12px;
+    padding: 4px 3px;
     font-size: 11px;
   }
 
@@ -592,23 +528,23 @@
 
 @layer voss {
   :root, .desktop {
-    --background: oklch(.968 .004 75);
-    --surface: oklch(.992 .003 75);
+    --background: #f3ede4;
+    --surface: #f8f4ee;
     --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);
+    --foreground: #332922;
+    --popover: #faf7f2;
+    --muted: #e6ddd0;
+    --muted-foreground: #6f6356;
+    --accent: #e0d5c5;
+    --primary: #634a38;
+    --primary-foreground: #ece4d8;
+    --destructive: #a4472a;
+    --warning: #a4472a;
+    --success: #4f6b34;
+    --border: #3329221f;
+    --input: #3329222e;
+    --desk: #ece4d8;
+    --chrome: #e6ddd0;
     --radius: 4px;
     --row: 28px;
     --control: 24px;
@@ -622,22 +558,22 @@
 
   @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);
+      --background: #1b1917;
+      --surface: #1f1c1a;
+      --foreground: #e3ddd6;
+      --popover: #262220;
+      --muted: #23201e;
+      --muted-foreground: #9c948c;
+      --accent: #2c2826;
+      --primary: #ae8d74;
+      --primary-foreground: #151312;
+      --destructive: #d9824a;
+      --warning: #d9824a;
+      --success: #a3b67e;
+      --border: #e3ddd61a;
+      --input: #e3ddd626;
+      --desk: #151312;
+      --chrome: #181614;
       --buncss-light: ;
       --buncss-dark: initial;
       color-scheme: dark;
@@ -645,22 +581,22 @@
   }
 
   :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);
+    --background: #1b1917;
+    --surface: #1f1c1a;
+    --foreground: #e3ddd6;
+    --popover: #262220;
+    --muted: #23201e;
+    --muted-foreground: #9c948c;
+    --accent: #2c2826;
+    --primary: #ae8d74;
+    --primary-foreground: #151312;
+    --destructive: #d9824a;
+    --warning: #d9824a;
+    --success: #a3b67e;
+    --border: #e3ddd61a;
+    --input: #e3ddd626;
+    --desk: #151312;
+    --chrome: #181614;
     --buncss-light: ;
     --buncss-dark: initial;
     color-scheme: dark;
@@ -683,6 +619,24 @@
     margin: 0;
   }
 
+  @view-transition {
+    navigation: auto;
+  }
+
+  ::view-transition-old(root) {
+    animation-duration: .16s;
+  }
+
+  ::view-transition-new(root) {
+    animation-duration: .16s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    @view-transition {
+      navigation: none;
+    }
+  }
+
   #root {
     display: flex;
     overflow: hidden;
@@ -1537,55 +1491,6 @@
     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);
@@ -1658,10 +1563,6 @@
       flex-wrap: wrap;
     }
 
-    .pk-field, .pk-field.is-wide {
-      width: 100%;
-    }
-
     .pk-filter, .pk-filter:focus-within {
       width: 120px;
     }
@@ -1786,1268 +1687,2246 @@
   .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 {
+  .gui-settings {
     display: flex;
-    align-items:  center;
-    gap: 8px;
-    margin: 8px 0;
-  }
-
-  .bv-between {
-    justify-content: space-between;
+    height: 100%;
   }
 
-  .bv-object-card {
+  .gui-settings-nav {
     display: flex;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    overflow: hidden;
+    border-right: 1px solid var(--border);
     flex-direction: column;
-    font-size: 12px;
-    line-height: 16px;
+    flex-shrink: 0;
+    gap: 2px;
+    width: 200px;
+    padding: 16px 8px;
   }
 
-  .bv-object-card-head {
+  .gui-settings-link {
     display: flex;
-    background: var(--chrome);
-    border-bottom: 1px solid var(--border);
-    align-items: baseline;
-    gap: 8px;
-    min-width: 0;
+    color: var(--muted-foreground);
+    font: inherit;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: 999px;
+    align-items:  center;
     height: 28px;
-    padding: 4px 10px;
-    font-size: 13px;
-    line-height: 20px;
+    padding: 0 12px;
   }
 
-  .bv-object-key {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--primary);
-    font-variant-numeric: tabular-nums;
-    min-width: 0;
+  .gui-settings-link:hover {
+    color: var(--foreground);
+    background: color-mix(in oklch, var(--foreground) 6%, transparent);
   }
 
-  .bv-object-card-head .bv-muted {
-    margin-left: auto;
-    font-size: 11px;
+  .gui-settings-link.is-active {
+    color: var(--foreground);
+    background: color-mix(in oklch, var(--foreground) 11%, transparent);
   }
 
-  .bv-object-fields {
-    display: grid;
-    grid-template-columns: minmax(72px, auto) 1fr;
-    gap: 2px 10px;
-    margin: 0;
-    padding: 6px 10px;
+  .gui-settings-link:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
   }
 
-  .bv-object-fields > div {
-    display: contents;
-  }
-
-  .bv-object-fields dt {
+  .gui-settings-level {
+    letter-spacing: .1em;
+    text-transform: uppercase;
     color: var(--muted-foreground);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    margin: 12px 12px 4px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
   }
 
-  .bv-object-fields dd {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    margin: 0;
+  .gui-settings-level:first-child {
+    margin-top: 0;
   }
 
-  .bv-object-fields code {
-    font-size: 11px;
+  .gui-name {
+    border: 1px solid var(--border);
+    background: color-mix(in oklch, var(--foreground) 4%, transparent);
+    color: var(--foreground);
+    font: inherit;
+    font-family: var(--font-mono);
+    outline: none;
+    border-radius: 999px;
+    width: 200px;
+    height: 28px;
+    padding: 0 12px;
   }
 
-  .bv-object-num {
-    font-variant-numeric: tabular-nums;
+  .gui-name:focus {
+    border-color: var(--primary);
   }
 
-  .bv-object-tag {
-    background: var(--muted);
-    color: var(--muted-foreground);
-    border-radius: 3px;
-    padding: 0 5px;
-    font-size: 11px;
+  .gui-settings-page {
+    overflow: auto;
+    flex: 1;
+    min-width: 0;
+    padding: 24px 32px 48px;
   }
 
-  .bv-object-ref {
-    color: var(--primary);
-    cursor: pointer;
-    font: inherit;
-    background: none;
-    border: 0;
-    border-radius: 3px;
-    padding: 0 4px;
+  .gui-settings-page > * {
+    max-width: 720px;
   }
 
-  .bv-object-ref:hover {
-    background: color-mix(in oklch, var(--primary) 12%, transparent);
+  .gui-settings-head h1 {
+    margin: 0 0 16px;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
   }
 
-  .bv-object-more {
-    color: var(--muted-foreground);
-    cursor: pointer;
-    font: inherit;
-    text-decoration: underline dotted;
-    background: none;
-    border: 0;
-    padding: 0;
+  .gui-settings-list {
+    display: flex;
+    flex-direction: column;
   }
 
-  .bv-object-rider {
+  .gui-setting {
+    display: flex;
     border-top: 1px solid var(--border);
+    align-items:  center;
+    gap: 24px;
+    padding: 14px 0;
   }
 
-  .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;
+  .gui-setting-text {
+    flex: 1;
+    min-width: 0;
   }
 
-  .bv-object-actions {
-    display: flex;
-    border-top: 1px solid var(--border);
-    background: var(--chrome);
-    flex-wrap: wrap;
-    gap: 4px;
-    padding: 6px 10px;
+  .gui-setting-title {
+    font-weight: 500;
   }
 
-  .bv-object-actions .bv-button {
-    height: 20px;
-    padding: 0 8px;
-    font-size: 11px;
+  .gui-setting-summary {
+    color: var(--muted-foreground);
+    font-size: 12px;
   }
 
-  .bv-object-needs {
-    border: 1px dashed var(--border);
-    border-radius: var(--radius);
+  .gui-setting-note {
+    display: block;
     color: var(--muted-foreground);
-    height: 20px;
-    padding: 0 6px;
-    font-size: 11px;
-    line-height: 20px;
+    margin-top: 2px;
+    font-style: italic;
   }
 
-  .bv-object-actions .is-open {
-    border-color: var(--primary);
+  .gui-setting-note.is-error {
+    color: var(--destructive);
+    font-style: normal;
   }
 
-  .bv-object-form {
+  .gui-setting-control {
     display: flex;
-    border-top: 1px solid var(--border);
-    background: var(--background);
-    flex-direction: column;
+    flex-shrink: 0;
+    align-items:  center;
     gap: 6px;
-    padding: 8px 10px;
   }
 
-  .bv-object-form-head {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    font-size: 12px;
+  .gui-setting-control .is-hidden {
+    visibility: hidden;
   }
 
-  .bv-object-field {
-    display: grid;
-    grid-template-columns: 90px 1fr;
+  .gui-settings-foot {
+    display: flex;
+    border-top: 1px solid var(--border);
+    flex-wrap: wrap;
     align-items:  center;
     gap: 8px;
+    margin: 0;
+    padding-top: 14px;
     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;
+  .gui-facts {
+    margin-bottom: 20px;
   }
 
-  .bv-object-loose h4 {
-    display: flex;
-    gap: 8px;
-    margin: 0 0 6px;
-    font-size: 12px;
+  .gui-facts h2 {
+    letter-spacing: .1em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+    margin: 0 0 4px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
   }
 
-  .bv-proofs {
+  .gui-facts dl {
+    border-top: 1px solid var(--border);
+    margin: 0;
+  }
+
+  .gui-fact {
     display: grid;
-    grid-template-columns: 260px minmax(0, 1fr);
-    height: 100%;
-    min-height: 0;
+    grid-template-columns: 140px minmax(0, 1fr);
+    border-bottom: 1px solid var(--border);
+    align-items:  center;
+    gap: 16px;
+    min-height: 32px;
   }
 
-  .bv-rail {
-    display: flex;
-    overflow: auto;
-    scrollbar-gutter: stable;
-    border-right: 1px solid var(--border);
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
+  .gui-fact dt {
+    color: var(--muted-foreground);
   }
 
-  .bv-rail-strip {
-    position: sticky;
-    z-index: 1;
+  .gui-fact dd {
     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;
+    min-width: 0;
+    margin: 0;
   }
 
-  .bv-rail-count {
+  .gui-fact dd.is-mono .gui-fact-value {
+    font-family: var(--font-mono);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    padding: 6px 0;
+    font-size: 12px;
+  }
+
+  .gui-fact-value {
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--muted-foreground);
-    font-variant-numeric: tabular-nums;
     white-space: nowrap;
+    flex: 1;
     min-width: 0;
-    margin-left: auto;
-    font-size: 11px;
   }
 
-  .bv-rail-strip .bv-button {
-    flex-shrink: 0;
-    height: 20px;
+  .gui-fact-tag {
+    background: color-mix(in oklch, var(--foreground) 6%, transparent);
+    color: var(--muted-foreground);
+    border-radius: 999px;
+    margin-left: 8px;
     padding: 0 6px;
     font-size: 11px;
   }
 
-  .bv-lenses {
-    display: inline-flex;
-    gap: 2px;
+  .gui-fact-tag.is-warn {
+    color: var(--destructive);
   }
 
-  .bv-lens {
-    border-radius: var(--radius);
+  .gui-fact-error {
+    color: var(--destructive);
+    white-space: normal;
+  }
+
+  .gui-fact-copy {
     color: var(--muted-foreground);
     font: inherit;
     cursor: pointer;
+    opacity: 0;
     background: none;
     border: 0;
-    height: 20px;
+    border-radius: 999px;
+    flex-shrink: 0;
+    height: 22px;
     padding: 0 8px;
-    font-size: 12px;
+    font-size: 11px;
   }
 
-  .bv-lens:hover {
-    color: var(--foreground);
+  .gui-fact:hover .gui-fact-copy {
+    opacity: 1;
   }
 
-  .bv-lens.is-open {
-    background: var(--accent);
+  .gui-fact-copy:focus-visible {
+    opacity: 1;
+  }
+
+  .gui-fact-copy:hover {
     color: var(--foreground);
+    background: color-mix(in oklch, var(--foreground) 6%, transparent);
   }
 
-  .bv-stage-card, .bv-object-col {
-    display: flex;
-    border: 0;
-    border-bottom: 1px solid var(--border);
-    color: inherit;
-    cursor: pointer;
+  @media (max-width: 640px) {
+    .gui-fact {
+      grid-template-columns: 1fr;
+      gap: 0;
+      padding: 6px 0;
+    }
+  }
+
+  .gui-key {
+    background: color-mix(in oklch, var(--foreground) 6%, transparent);
+    color: var(--foreground);
     font: inherit;
-    text-align: left;
-    background: none;
-    border-radius: 0;
-    flex-shrink: 0;
-    align-items:  center;
-    gap: 8px;
-    width: 100%;
-    min-width: 0;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    border: 1px solid #0000;
+    border-radius: 999px;
+    min-width: 88px;
     height: 28px;
     padding: 0 12px;
   }
 
-  .bv-stage-card:hover, .bv-object-col:hover {
-    background: var(--accent);
+  .gui-key:hover {
+    background: color-mix(in oklch, var(--foreground) 11%, transparent);
   }
 
-  .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);
+  .gui-key-none {
+    color: var(--muted-foreground);
   }
 
-  .bv-stage-text, .bv-object-head {
-    display: flex;
-    flex: 1;
-    align-items: baseline;
-    gap: 8px;
-    min-width: 0;
+  .gui-key.is-recording {
+    border-color: var(--primary);
+    color: var(--primary);
   }
 
-  .bv-stage-text b, .bv-object-head b {
-    white-space: nowrap;
-    font-weight: 500;
+  .gui-key:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 1px;
   }
 
-  .bv-stage-text .bv-muted, .bv-object-head .bv-muted {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 11px;
-  }
+  @media (max-width: 640px) {
+    .gui-settings {
+      flex-direction: column;
+      height: auto;
+    }
 
-  .bv-object-count {
-    color: var(--muted-foreground);
-    font-variant-numeric: tabular-nums;
-    font-size: 11px;
+    .gui-settings-page {
+      overflow: visible;
+    }
+
+    .gui-settings-nav {
+      border-right: 0;
+      border-bottom: 1px solid var(--border);
+      overflow-x: auto;
+      flex-direction: row;
+      width: auto;
+      padding: 8px;
+    }
+
+    .gui-settings-level {
+      display: none;
+    }
+
+    .gui-settings-page {
+      padding: 16px;
+    }
+
+    .gui-setting {
+      flex-wrap: wrap;
+      gap: 8px;
+    }
   }
 
-  .bv-proof-dot {
-    border-radius: 50%;
-    flex: none;
-    width: 8px;
-    height: 8px;
-    margin: 0;
+  .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-pane {
+  .bv-row {
     display: flex;
-    overflow: auto;
-    scrollbar-gutter: stable;
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
+    align-items:  center;
+    gap: 8px;
+    margin: 8px 0;
   }
 
-  .bv-pane-body {
-    margin: 0;
-    padding: 12px;
+  .bv-between {
+    justify-content: space-between;
   }
 
-  .bv-film-head {
+  .bv-object-card {
     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;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    overflow: hidden;
+    flex-direction: column;
+    font-size: 12px;
+    line-height: 16px;
   }
 
-  .bv-film-head > div {
+  .bv-object-card-head {
+    display: flex;
+    background: var(--chrome);
+    border-bottom: 1px solid var(--border);
+    align-items: baseline;
+    gap: 8px;
     min-width: 0;
-  }
-
-  .bv-film-head h2, .bv-film-head h3 {
-    margin: 0;
+    height: 28px;
+    padding: 4px 10px;
     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);
+  .bv-object-key {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    flex: none;
-    max-width: 40%;
-    height: 20px;
+    color: var(--primary);
+    font-variant-numeric: tabular-nums;
+    min-width: 0;
+  }
+
+  .bv-object-card-head .bv-muted {
     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;
+  .bv-object-fields {
+    display: grid;
+    grid-template-columns: minmax(72px, auto) 1fr;
+    gap: 2px 10px;
     margin: 0;
-    padding: 4px 12px;
+    padding: 6px 10px;
   }
 
-  .bv-proof-chip {
-    display: inline-flex;
-    border-radius: var(--radius);
+  .bv-object-fields > div {
+    display: contents;
+  }
+
+  .bv-object-fields dt {
     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 {
+  .bv-object-fields dd {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
+    margin: 0;
   }
 
-  .bv-proof-chip:hover {
-    background: var(--accent);
-    color: var(--foreground);
+  .bv-object-fields code {
+    font-size: 11px;
   }
 
-  .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-num {
+    font-variant-numeric: tabular-nums;
   }
 
-  .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;
+  .bv-object-tag {
+    background: var(--muted);
+    color: var(--muted-foreground);
+    border-radius: 3px;
+    padding: 0 5px;
     font-size: 11px;
-    line-height: 16px;
   }
 
-  .bv-object-sheet dt {
+  .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);
-    opacity: .8;
+    cursor: pointer;
+    font: inherit;
+    text-decoration: underline dotted;
+    background: none;
+    border: 0;
+    padding: 0;
   }
 
-  .bv-object-sheet dd {
-    color: var(--foreground);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    margin: 0;
+  .bv-object-rider {
+    border-top: 1px solid var(--border);
   }
 
-  .bv-object-sheet code {
+  .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-map {
+  .bv-object-actions {
     display: flex;
-    flex-direction: column;
+    border-top: 1px solid var(--border);
+    background: var(--chrome);
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 6px 10px;
   }
 
-  .bv-object-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 8px;
+  .bv-object-actions .bv-button {
+    height: 20px;
+    padding: 0 8px;
+    font-size: 11px;
   }
 
-  .bv-object-loose {
-    margin-top: 16px;
+  .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-film > .bv-film-head {
-    border-top: 1px solid var(--border);
+  .bv-object-actions .is-open {
+    border-color: var(--primary);
   }
 
-  .bv-film {
-    --detail-row: 21px;
+  .bv-object-form {
     display: flex;
+    border-top: 1px solid var(--border);
+    background: var(--background);
     flex-direction: column;
+    gap: 6px;
+    padding: 8px 10px;
   }
 
-  .bv-film-intent {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    min-height: 16px;
+  .bv-object-form-head {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 12px;
   }
 
-  .bv-verdict {
-    text-align: center;
-    min-width: 56px;
+  .bv-object-field {
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    align-items:  center;
+    gap: 8px;
+    font-size: 12px;
   }
 
-  .bv-film-transport {
-    position: sticky;
-    z-index: 2;
-    background: var(--background);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    top: 0;
+  .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-film-controls {
+  .bv-object-loose h4 {
     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;
+    gap: 8px;
+    margin: 0 0 6px;
+    font-size: 12px;
   }
 
-  .bv-film-controls .bv-film-play {
-    justify-content: center;
-    min-width: 56px;
+  .bv-proofs {
+    display: grid;
+    grid-template-columns: 260px minmax(0, 1fr);
+    height: 100%;
+    min-height: 0;
   }
 
-  .bv-film-controls .is-hidden {
-    visibility: hidden;
+  .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-film-controls input[type="range"] {
-    accent-color: var(--primary);
-    flex: 1;
-    min-width: 80px;
+  .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-film-time {
+  .bv-rail-count {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--muted-foreground);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
-    text-align: right;
+    min-width: 0;
+    margin-left: auto;
+    font-size: 11px;
+  }
+
+  .bv-rail-strip .bv-button {
     flex-shrink: 0;
-    min-width: 116px;
+    height: 20px;
+    padding: 0 6px;
     font-size: 11px;
   }
 
-  .bv-film-strip {
-    display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    flex-wrap: nowrap;
-    align-items:  center;
+  .bv-lenses {
+    display: inline-flex;
     gap: 2px;
-    height: 26px;
-    padding: 0 12px;
   }
 
-  .bv-film-frame {
+  .bv-lens {
+    border-radius: var(--radius);
+    color: var(--muted-foreground);
+    font: inherit;
     cursor: pointer;
-    background: var(--muted);
-    opacity: .7;
+    background: none;
     border: 0;
-    border-radius: 2px;
-    flex: none;
-    width: 10px;
-    height: 16px;
-    padding: 0;
+    height: 20px;
+    padding: 0 8px;
+    font-size: 12px;
   }
 
-  .bv-film-body {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 300px;
-    align-items:  start;
+  .bv-lens:hover {
+    color: var(--foreground);
   }
 
-  .bv-film-stage {
-    position: relative;
-    overflow-x: auto;
-    overflow-y: hidden;
-    min-width: 0;
-    margin: 0;
-    padding: 0;
+  .bv-lens.is-open {
+    background: var(--accent);
+    color: var(--foreground);
   }
 
-  .bv-film-frame-box {
-    padding: 12px;
+  .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-film-probe {
-    position: absolute;
-    visibility: hidden;
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    right: 0;
+  .bv-stage-card:hover, .bv-object-col:hover {
+    background: var(--accent);
   }
 
-  .bv-film-probe > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+  .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-film-detail {
+  .bv-stage-text, .bv-object-head {
     display: flex;
-    border-left: 1px solid var(--border);
-    flex-direction: column;
+    flex: 1;
+    align-items: baseline;
     gap: 8px;
-    min-height: 100%;
-    margin: 0;
-    padding: 8px 12px;
+    min-width: 0;
   }
 
-  .bv-film-steps, .bv-film-checks {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    font-size: 12px;
-    line-height: 16px;
+  .bv-stage-text b, .bv-object-head b {
+    white-space: nowrap;
+    font-weight: 500;
   }
 
-  .bv-film-steps li, .bv-film-checks li {
-    border-top: 1px solid var(--border);
+  .bv-stage-text .bv-muted, .bv-object-head .bv-muted {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: 2px 0;
+    font-size: 11px;
   }
 
-  .bv-film-steps li:first-child, .bv-film-checks li:first-child {
-    border-top: 0;
+  .bv-object-count {
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+    font-size: 11px;
   }
 
-  @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 {
+    border-radius: 50%;
+    flex: none;
+    width: 8px;
+    height: 8px;
+    margin: 0;
   }
 
-  .bv-proof-dot.is-passed {
-    background: var(--success);
+  .bv-pane {
+    display: flex;
+    overflow: auto;
+    scrollbar-gutter: stable;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
   }
 
-  .bv-proof-dot.is-failed {
-    background: var(--destructive);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 25%, transparent);
+  .bv-pane-body {
+    margin: 0;
+    padding: 12px;
   }
 
-  .bv-proof-dot.is-unproven {
-    background: var(--warning);
+  .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-proof-dot.is-undrawn {
-    border: 1.5px dashed var(--muted-foreground);
-    background: none;
+  .bv-film-head > div {
+    min-width: 0;
   }
 
-  .bv-proof-dot.is-sketch {
-    border: 1.5px solid var(--muted-foreground);
-    background: none;
+  .bv-film-head h2, .bv-film-head h3 {
+    margin: 0;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 20px;
   }
 
-  .bv-proofs-output {
-    white-space: pre-wrap;
-    background: var(--muted);
+  .bv-film-intent {
     color: var(--muted-foreground);
-    border-radius: 8px;
-    margin: 8px 0 0;
-    padding: 8px 10px;
+    max-width: 90ch;
+    margin: 0;
     font-size: 11px;
-    line-height: 1.4;
+    line-height: 16px;
   }
 
-  .bv-proofs-output.is-bad {
-    color: var(--destructive);
+  .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-verdict.is-passed {
-    background: color-mix(in oklch, var(--success) 18%, transparent);
-    color: var(--success);
+  .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-verdict.is-failed {
-    background: color-mix(in oklch, var(--destructive) 18%, transparent);
-    color: var(--destructive);
+  .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-verdict.is-sketch {
-    background: var(--muted);
-    color: var(--muted-foreground);
+  .bv-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
   }
 
-  .bv-verdict.is-live {
-    background: color-mix(in oklch, var(--primary) 18%, transparent);
-    color: var(--primary);
+  .bv-proof-chip:hover {
+    background: var(--accent);
+    color: var(--foreground);
   }
 
-  .bv-film-frame.is-ok {
-    background: var(--success);
+  .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-film-frame.is-bad {
-    background: var(--destructive);
+  .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-film-frame:hover {
-    opacity: 1;
+  .bv-object-sheet dt {
+    color: var(--muted-foreground);
+    opacity: .8;
   }
 
-  .bv-film-frame.is-here {
-    opacity: 1;
-    outline: 2px solid var(--foreground);
-    outline-offset: 1px;
+  .bv-object-sheet dd {
+    color: var(--foreground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    margin: 0;
   }
 
-  .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;
+  .bv-object-sheet code {
     font-size: 11px;
-    line-height: 16px;
   }
 
-  .bv-film-mark {
-    display: inline-block;
-    width: 16px;
-    font-weight: 700;
+  .bv-object-map {
+    display: flex;
+    flex-direction: column;
   }
 
-  .bv-film-checks .is-ok .bv-film-mark {
-    color: var(--success);
+  .bv-object-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 8px;
   }
 
-  .bv-film-checks .is-bad, .bv-film-error {
-    color: var(--destructive);
+  .bv-object-loose {
+    margin-top: 16px;
   }
 
-  .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-film > .bv-film-head {
+    border-top: 1px solid var(--border);
   }
 
-  .bv-state-list {
+  .bv-film {
+    --detail-row: 21px;
     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-film-intent {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    min-height: 16px;
   }
 
-  .bv-state-part b {
-    margin-right: 4px;
+  .bv-verdict {
+    text-align: center;
+    min-width: 56px;
   }
 
-  .bv-state-part code {
-    color: var(--muted-foreground);
-    font-size: 12px;
+  .bv-film-transport {
+    position: sticky;
+    z-index: 2;
+    background: var(--background);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    top: 0;
   }
-}
 
-.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-film-controls {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items:  center;
+    gap: 6px;
+    height: 28px;
+    padding: 0 12px;
+  }
 
-.bv-maker-head h2 {
-  margin: 0;
-  font-size: 15px;
-}
+  .bv-film-controls .bv-button {
+    flex-shrink: 0;
+    height: 20px;
+    padding: 0 8px;
+    font-size: 11px;
+  }
 
-.bv-maker-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  .bv-film-controls .bv-film-play {
+    justify-content: center;
+    min-width: 56px;
+  }
 
-.bv-maker-spec {
-  display: flex;
-  border-top: 1px solid var(--border);
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
-  padding: 6px 0;
-}
+  .bv-film-controls .is-hidden {
+    visibility: hidden;
+  }
 
-.bv-maker-open {
-  color: var(--foreground);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  padding: 0;
-}
+  .bv-film-controls input[type="range"] {
+    accent-color: var(--primary);
+    flex: 1;
+    min-width: 80px;
+  }
 
-.bv-maker-open:hover b {
-  text-decoration: underline;
-}
+  .bv-film-time {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    text-align: right;
+    flex-shrink: 0;
+    min-width: 116px;
+    font-size: 11px;
+  }
 
-.bv-maker-facts {
-  display: flex;
-  white-space: nowrap;
-  align-items:  center;
-  gap: 10px;
+  .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-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-story > li.is-here {
+  color: var(--primary);
+  font-weight: 500;
 }
 
-.bv-lab {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  font-size: 13px;
-  line-height: 20px;
+.bv-lab-story > li.is-ok .bv-film-mark {
+  color: var(--success);
 }
 
-.bv-lab-app {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
+.bv-lab-story > li.is-bad {
+  color: var(--destructive);
 }
 
-.bv-lab-frame {
-  overflow: auto;
-  background: var(--background);
-  border: 1px solid #0000;
-  height: 100%;
-  min-height: 0;
-  transition: border-color .15s;
+.bv-lab-story > li.is-warn {
+  color: var(--warning);
 }
 
-.bv-lab-frame.is-playing {
-  border-color: var(--primary);
+.bv-lab-story .bv-lab-changes {
+  grid-column: 2;
+  color: var(--muted-foreground);
+  margin: 2px 0 0;
+  font-size: 11px;
 }
 
-.bv-lab-bare {
-  padding: 12px;
+.bv-lab-story-head {
+  margin: 0 0 2px;
 }
 
-.bv-lab-views {
+.bv-lab-take {
+  margin-top: 4px;
+}
+
+.bv-lab-tree {
   list-style: none;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  margin: 0;
+  margin: 2px 0 0 10px;
   padding: 0;
+  font-size: 11px;
 }
 
-.bv-lab-views .is-open {
-  font-weight: 600;
+.bv-lab-expect {
+  margin: 4px 0;
 }
 
-.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-lab-model .bv-object-map {
+  margin-bottom: 6px;
 }
 
-.bv-bar-head {
-  border-top: 0;
-  border-bottom: 1px solid var(--border);
-}
+@layer voss {
+  .rt {
+    display: flex;
+    background: var(--desk);
+    color: var(--foreground);
+    --rt-ink: color-mix(in oklch, var(--foreground) 6%, transparent);
+    --rt-ink-strong: color-mix(in oklch, var(--foreground) 11%, transparent);
+    justify-content: center;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .rt.rt-center {
+    align-items:  center;
+    padding: 16px;
+  }
+
+  :where(.rt) :where(button, input) {
+    font: inherit;
+    color: inherit;
+  }
+
+  .rt-column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: min(560px, 100%);
+    padding: max(32px, 12vh) 16px 48px;
+  }
+
+  .rt-mark {
+    display: flex;
+    color: var(--primary);
+    justify-content: space-between;
+    align-items:  center;
+    gap: 12px;
+    margin-bottom: 24px;
+    padding: 0 5px;
+  }
+
+  .rt-mark h1 {
+    margin: 0;
+    line-height: 0;
+  }
+
+  .rt-lockup {
+    display: block;
+    width: auto;
+    height: 22px;
+  }
+
+  .rt-version {
+    display: flex;
+    color: var(--muted-foreground);
+    font: 12px / 20px var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    align-items:  center;
+  }
+
+  .rt-version-text {
+    display: block;
+    text-box: trim-both cap alphabetic;
+  }
+
+  .rt-version .rt-tag {
+    display: flex;
+    align-items:  center;
+    height: 18px;
+  }
+
+  .rt-hidden {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    width: 1px;
+    height: 1px;
+  }
+
+  .rt-list {
+    display: flex;
+    list-style: none;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .rt-row {
+    position: relative;
+    display: flex;
+    padding-left: calc(var(--depth, 0) * 20px);
+    flex-wrap: wrap;
+    align-items:  center;
+  }
+
+  .rt-row-main {
+    display: flex;
+    color: var(--muted-foreground);
+    text-align: left;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: 999px;
+    flex: 1;
+    align-items:  center;
+    gap: 3px;
+    min-width: 0;
+    height: 32px;
+    padding: 0 12px 0 5px;
+  }
+
+  .rt-row-main:hover {
+    background: var(--rt-ink-strong);
+    color: var(--foreground);
+    outline: none;
+  }
+
+  .rt-row-main:focus-visible {
+    background: var(--rt-ink-strong);
+    color: var(--foreground);
+    outline: none;
+  }
+
+  .rt-row-icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items:  center;
+    width: 22px;
+    height: 22px;
+  }
+
+  .rt-row-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--foreground);
+    flex-shrink: 0;
+    max-width: 50%;
+  }
+
+  .rt-row-note {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: right;
+    color: var(--muted-foreground);
+    flex: 1;
+    min-width: 0;
+    padding-left: 8px;
+    font-size: 11px;
+  }
+
+  .rt-tag {
+    background: var(--rt-ink-strong);
+    color: var(--muted-foreground);
+    border-radius: 999px;
+    flex-shrink: 0;
+    margin-left: 8px;
+    padding: 0 7px;
+    font-size: 11px;
+    line-height: 18px;
+  }
+
+  .rt-tag.is-failed {
+    color: var(--destructive);
+  }
+
+  .rt-row-forget {
+    position: absolute;
+    left: calc(var(--depth, 0) * 20px + 5px);
+    display: grid;
+    color: var(--foreground);
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    background: none;
+    border: 0;
+    border-radius: 999px;
+    place-items:  center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    top: 5px;
+    transform: scale(.5);
+  }
+
+  .rt-row-icon, .rt-row-forget {
+    transition: transform .26s cubic-bezier(.3,1.6,.4,1), opacity 80ms;
+  }
+
+  .rt-row:hover .rt-row-main .rt-row-icon {
+    opacity: 0;
+    transform: scale(.5);
+  }
+
+  .rt-row:has(:focus-visible) .rt-row-main .rt-row-icon {
+    opacity: 0;
+    transform: scale(.5);
+  }
+
+  .rt-row:hover .rt-row-forget {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+
+  .rt-row:has(:focus-visible) .rt-row-forget {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+
+  .rt-row-forget:hover {
+    background: var(--rt-ink-strong);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rt-row-icon, .rt-row-forget {
+      transition: none;
+    }
+  }
+
+  .rt-row-error {
+    color: var(--destructive);
+    white-space: pre-wrap;
+    flex-basis: 100%;
+    margin: 2px 0 6px 30px;
+    font-size: 12px;
+  }
+
+  .rt-empty {
+    color: var(--muted-foreground);
+    padding: 6px 30px;
+  }
+
+  .rt-add {
+    position: relative;
+    margin-top: 12px;
+  }
 
-.bv-bar-head .bv-popover {
-  top: calc(100% + 4px);
-  bottom: auto;
-}
+  .rt-add-field {
+    display: flex;
+    background: var(--rt-ink);
+    border: 1px solid #0000;
+    border-radius: 999px;
+    align-items:  center;
+    gap: 3px;
+    height: 36px;
+    padding: 0 4px 0 6px;
+  }
 
-.bv-bar-slot {
-  position: relative;
-  display: flex;
-}
+  .rt-add-field:focus-within {
+    border-color: var(--border);
+  }
 
-.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;
-}
+  .rt-add-field input {
+    outline: none;
+    background: none;
+    border: 0;
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 6px 0 0;
+  }
 
-.bv-bar-icon {
-  opacity: .85;
-  flex: none;
-  width: 14px;
-  height: 14px;
-}
+  .rt-add-field input::placeholder {
+    color: var(--muted-foreground);
+  }
 
-.bv-bar-item b {
-  font-weight: 600;
-}
+  .rt-add-go, .rt-add-browse {
+    color: var(--muted-foreground);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: 999px;
+    flex-shrink: 0;
+    height: 26px;
+    padding: 0 12px;
+  }
 
-.bv-bar-time {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  min-width: 44px;
-}
+  .rt-add-go {
+    display: grid;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    place-items:  center;
+    width: 26px;
+    padding: 0;
+  }
 
-.bv-bar-item:hover, .bv-bar-item.is-open {
-  background: var(--accent);
-}
+  .rt-add-go:disabled {
+    background: var(--rt-ink-strong);
+    color: var(--muted-foreground);
+    cursor: default;
+  }
 
-.bv-bar-item.is-ok {
-  color: var(--success);
-}
+  .rt-add-browse:hover {
+    background: var(--rt-ink-strong);
+    color: var(--foreground);
+  }
 
-.bv-bar-item.is-bad {
-  color: var(--destructive);
-}
+  .rt-suggest {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    list-style: none;
+    background: var(--desk);
+    border-radius: 18px;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 4px;
+    top: 40px;
+    left: 0;
+    right: 0;
+    box-shadow: 0 12px 32px -12px #00000073;
+    box-shadow: 0 12px 32px -12px color(display-p3 0 0 0 / .45);
+    box-shadow: 0 12px 32px -12px lab(0% 0 0 / .45);
+  }
 
-.bv-bar-item.is-warn {
-  color: var(--warning);
-}
+  .rt-suggest button {
+    display: flex;
+    color: var(--muted-foreground);
+    text-align: left;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: 999px;
+    align-items:  center;
+    gap: 3px;
+    width: 100%;
+    height: 28px;
+    padding: 0 10px 0 3px;
+  }
 
-.bv-bar-item.is-here {
-  color: var(--primary);
-}
+  .rt-suggest button:hover, .rt-suggest button.is-active {
+    background: var(--rt-ink-strong);
+    color: var(--foreground);
+  }
 
-.bv-bar-item .bv-muted {
-  color: var(--muted-foreground);
-  font-weight: 400;
-}
+  .rt-suggest .rt-tag {
+    margin-left: auto;
+  }
 
-.bv-bar-slot {
-  align-items: stretch;
-}
+  .rt-browse {
+    display: flex;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    background: var(--background);
+    border-radius: 14px;
+    flex-direction: column;
+    height: min(480px, 60vh);
+  }
 
-.bv-lab-answer .bv-button .bv-bar-icon {
-  margin-right: 4px;
-}
+  .rt-error {
+    color: var(--destructive);
+    margin: 8px 0 0;
+    padding: 0 12px;
+    font-size: 12px;
+  }
 
-.bv-bar-back {
-  color: var(--muted-foreground);
-  padding: 0 6px;
-}
+  .rt-toast {
+    position: fixed;
+    display: flex;
+    background: var(--foreground);
+    color: var(--background);
+    border-radius: 999px;
+    align-items:  center;
+    gap: 12px;
+    padding: 6px 6px 6px 16px;
+    font-size: 12px;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 
-.bv-bar-back:hover {
-  color: var(--foreground);
-}
+  .rt-toast button {
+    background: color-mix(in oklch, var(--background) 20%, transparent);
+    color: inherit;
+    cursor: pointer;
+    border: 0;
+    border-radius: 999px;
+    height: 24px;
+    padding: 0 12px;
+    font-weight: 500;
+  }
 
-.bv-bar-play {
-  justify-content: center;
-  width: 30px;
-  padding: 0;
-}
+  .sw-card {
+    display: flex;
+    background: var(--background);
+    border: 1px solid var(--border);
+    overflow: hidden;
+    border-radius: 22px;
+    flex-direction: column;
+    width: min(520px, 100%);
+    height: min(440px, 100dvh - 32px);
+  }
 
-.bv-bar-play.is-on {
-  color: var(--primary);
-}
+  .sw-gone {
+    align-items:  flex-start;
+    gap: 16px;
+    height: auto;
+    padding: 24px;
+  }
 
-.bv-bar-gap {
-  flex: 1;
-}
+  .sw-gone p {
+    margin: 0;
+  }
 
-.bv-bar-summary {
-  margin: 0 0 4px;
-}
+  .sw-head {
+    display: flex;
+    align-items:  center;
+    gap: 12px;
+    padding: 20px 24px 12px;
+  }
 
-.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;
-}
+  .sw-head > svg, .rt-mark > svg {
+    flex-shrink: 0;
+  }
 
-.bv-popover.is-right {
-  left: auto;
-  right: 0;
-}
+  .sw-head-text {
+    min-width: 0;
+  }
 
-.bv-popover.is-wide {
-  width: 460px;
-}
+  .sw-head h1 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+  }
 
-.bv-popover h3 {
-  text-transform: uppercase;
-  letter-spacing: .04em;
-  color: var(--muted-foreground);
-  margin: 8px 0 4px;
-  font-size: 11px;
-  font-weight: 600;
-}
+  .sw-head p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+    font-size: 12px;
+    font-family: var(--font-mono);
+    margin: 0;
+  }
+
+  .sw-steps {
+    display: flex;
+    list-style: none;
+    border-bottom: 1px solid var(--border);
+    gap: 4px;
+    margin: 0;
+    padding: 0 24px 12px;
+  }
+
+  .sw-steps li {
+    display: flex;
+    color: var(--muted-foreground);
+    border-radius: 999px;
+    align-items:  center;
+    gap: 6px;
+    height: 26px;
+    padding: 0 10px 0 3px;
+    font-size: 12px;
+  }
 
-.bv-popover h3:first-child {
-  margin-top: 0;
-}
+  .sw-steps li.is-here {
+    background: color-mix(in oklch, var(--foreground) 8%, transparent);
+    color: var(--foreground);
+  }
 
-.bv-lab-transport {
-  display: flex;
-  align-items:  center;
-  gap: 10px;
-}
+  .sw-step-dot {
+    display: grid;
+    background: color-mix(in oklch, var(--foreground) 8%, transparent);
+    font-variant-numeric: tabular-nums;
+    border-radius: 999px;
+    place-items:  center;
+    width: 20px;
+    height: 20px;
+    font-size: 11px;
+  }
 
-.bv-lab-transport select {
-  font: inherit;
-  background: var(--background);
-  color: var(--foreground);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-}
+  .sw-steps li.is-here .sw-step-dot {
+    background: var(--primary);
+    color: var(--primary-foreground);
+  }
 
-.bv-lab-scenarios, .bv-lab-jobs, .bv-lab-changes, .bv-lab-outside, .bv-lab-log {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  .sw-steps li.is-done .sw-step-dot {
+    background: color-mix(in oklch, var(--primary) 25%, transparent);
+    color: var(--foreground);
+  }
 
-.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;
-}
+  .sw-body {
+    overflow: auto;
+    flex: 1;
+    min-height: 0;
+    padding: 20px 24px;
+  }
 
-.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;
-}
+  .sw-label {
+    display: block;
+    font-weight: 600;
+  }
 
-.bv-lab-scenario-row {
-  display: flex;
-  align-items:  center;
-  gap: 6px;
-}
+  .sw-summary {
+    color: var(--muted-foreground);
+    margin: 2px 0 14px;
+  }
 
-.bv-lab-scenario-row b {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
+  .sw-input {
+    border: 1px solid var(--border);
+    background: color-mix(in oklch, var(--foreground) 4%, transparent);
+    color: var(--foreground);
+    font: inherit;
+    font-family: var(--font-mono);
+    outline: none;
+    border-radius: 999px;
+    width: 100%;
+    height: 36px;
+    padding: 0 14px;
+  }
 
-.bv-lab-answer {
-  display: flex;
-  gap: 4px;
-  margin-top: 4px;
-}
+  .sw-input:focus {
+    border-color: var(--primary);
+  }
 
-.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;
-}
+  .sw-input.is-wrong {
+    border-color: var(--destructive);
+  }
 
-.bv-lab-changes ul {
-  list-style: none;
-  margin: 2px 0 0 8px;
-  padding: 0;
-}
+  .sw-hint {
+    color: var(--muted-foreground);
+    margin: 6px 14px 0;
+    font-size: 12px;
+  }
 
-.bv-film-checks .is-warn, .bv-film-checks .is-warn .bv-film-mark {
-  color: var(--warning);
-}
+  .sw-hint.is-wrong {
+    color: var(--destructive);
+  }
 
-.bv-lab-knobs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: 6px 0;
-}
+  .sw-review {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 6px 16px;
+    margin: 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;
-}
+  .sw-review > div {
+    display: contents;
+  }
 
-.bv-lab-scenarios > li.is-open {
-  background: color-mix(in oklch, var(--primary) 8%, transparent);
-  margin: 0 -12px;
-  padding: 4px 12px;
-}
+  .sw-review dt {
+    color: var(--muted-foreground);
+  }
 
-.bv-lab-story-wrap {
-  border-top: 1px solid var(--border);
-  margin-top: 8px;
-  padding-top: 8px;
-}
+  .sw-review dd {
+    overflow-wrap: anywhere;
+    min-width: 0;
+    margin: 0;
+  }
 
-.bv-lab-story {
-  list-style: none;
-  margin: 4px 0 0;
-  padding: 0;
-}
+  .sw-error {
+    color: var(--destructive);
+    white-space: pre-wrap;
+    margin: 12px 0 0;
+    font-size: 12px;
+  }
 
-.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;
-}
+  .sw-foot {
+    display: flex;
+    border-top: 1px solid var(--border);
+    align-items:  center;
+    gap: 8px;
+    padding: 12px 16px;
+  }
 
-.bv-lab-story > li:first-child {
-  border-top: 0;
-}
+  .sw-gap {
+    flex: 1;
+  }
 
-.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);
-}
+  .sw-busy {
+    display: flex;
+    color: var(--muted-foreground);
+    white-space: nowrap;
+    align-items:  center;
+    gap: 8px;
+    min-width: 0;
+    font-size: 12px;
+  }
 
-.bv-lab-story > li.is-here {
-  color: var(--primary);
-  font-weight: 500;
-}
+  .sw-button {
+    white-space: nowrap;
+    background: color-mix(in oklch, var(--foreground) 8%, transparent);
+    color: var(--foreground);
+    font: inherit;
+    cursor: pointer;
+    border: 0;
+    border-radius: 999px;
+    flex-shrink: 0;
+    height: 30px;
+    padding: 0 14px;
+  }
 
-.bv-lab-story > li.is-ok .bv-film-mark {
-  color: var(--success);
-}
+  .sw-button.is-quiet {
+    color: var(--muted-foreground);
+    background: none;
+  }
 
-.bv-lab-story > li.is-bad {
-  color: var(--destructive);
-}
+  .sw-button.is-quiet:hover {
+    color: var(--foreground);
+    background: color-mix(in oklch, var(--foreground) 6%, transparent);
+  }
 
-.bv-lab-story > li.is-warn {
-  color: var(--warning);
-}
+  .sw-button.is-primary {
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font-weight: 500;
+  }
 
-.bv-lab-story .bv-lab-changes {
-  grid-column: 2;
-  color: var(--muted-foreground);
-  margin: 2px 0 0;
-  font-size: 11px;
-}
+  .sw-button:disabled {
+    opacity: .5;
+    cursor: default;
+  }
 
-.bv-lab-story-head {
-  margin: 0 0 2px;
-}
+  @media (max-width: 560px) {
+    .rt-row-note {
+      display: none;
+    }
+  }
 
-.bv-lab-take {
-  margin-top: 4px;
-}
+  .sw-button:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
 
-.bv-lab-tree {
-  list-style: none;
-  margin: 2px 0 0 10px;
-  padding: 0;
-  font-size: 11px;
-}
+  .rt-add-go:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
 
-.bv-lab-expect {
-  margin: 4px 0;
-}
+  .rt-add-browse:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
 
-.bv-lab-model .bv-object-map {
-  margin-bottom: 6px;
+  .rt-row-forget:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+
+  .rt-toast button:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
 }