@1agh/maude 0.15.0

package/plugins/design/dev-server/dist/styles.css

@@ -0,0 +1,2875 @@
+@layer reset {
+  * {
+    box-sizing: border-box;
+  }
+
+  html, body {
+    background: var(--u-bg-0);
+    height: 100%;
+    color: var(--u-fg-0);
+    font-family: var(--u-font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    padding: 0;
+    font-size: 13px;
+    line-height: 1.45;
+  }
+
+  button {
+    font: inherit;
+  }
+
+  ::selection {
+    background: var(--u-accent-bg);
+    color: var(--u-fg-0);
+  }
+}
+
+@layer tokens {
+  :root, :root[data-theme="light"] {
+    --bg-0: oklch(97.5% .008 78);
+    --bg-1: oklch(95.5% .01 78);
+    --bg-2: oklch(93% .012 78);
+    --bg-3: oklch(89.5% .014 78);
+    --bg-4: oklch(85% .016 78);
+    --border-subtle: oklch(86% .014 70);
+    --border-default: oklch(74% .016 65);
+    --border-strong: oklch(48% .022 60);
+    --fg-0: oklch(20% .02 50);
+    --fg-1: oklch(38% .018 50);
+    --fg-2: oklch(52% .015 50);
+    --fg-3: oklch(68% .012 50);
+    --accent: oklch(56% .17 50);
+    --accent-hover: oklch(50% .17 50);
+    --accent-active: oklch(44% .17 50);
+    --accent-fg: oklch(98% .008 78);
+    --accent-tint: oklch(92% .04 55);
+    --status-success: oklch(48% .14 145);
+    --status-warn: oklch(64% .16 88);
+    --status-error: oklch(50% .2 25);
+    --status-info: oklch(50% .13 230);
+    --mono-cell-bg: oklch(95% .01 78);
+    --mono-cell-fg: oklch(28% .02 30);
+    --mono-rule: oklch(82% .014 65);
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] {
+    --bg-0: oklch(13% .012 60);
+    --bg-1: oklch(17% .014 60);
+    --bg-2: oklch(20% .016 60);
+    --bg-3: oklch(24% .018 60);
+    --bg-4: oklch(28% .02 60);
+    --border-subtle: oklch(28% .018 60);
+    --border-default: oklch(40% .022 60);
+    --border-strong: oklch(58% .026 60);
+    --fg-0: oklch(94% .014 80);
+    --fg-1: oklch(78% .014 80);
+    --fg-2: oklch(60% .012 80);
+    --fg-3: oklch(44% .01 80);
+    --accent: oklch(72% .16 55);
+    --accent-hover: oklch(78% .16 55);
+    --accent-active: oklch(84% .16 55);
+    --accent-fg: oklch(14% .02 50);
+    --accent-tint: oklch(28% .06 55);
+    --status-success: oklch(72% .16 145);
+    --status-warn: oklch(80% .16 88);
+    --status-error: oklch(68% .2 25);
+    --status-info: oklch(72% .13 230);
+    --mono-cell-bg: oklch(20% .016 60);
+    --mono-cell-fg: oklch(88% .014 60);
+    --mono-rule: oklch(32% .02 60);
+    color-scheme: dark;
+  }
+
+  :root {
+    --radius-xs: 0;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 4px;
+    --radius-xl: 4px;
+    --radius-pill: 0;
+    --space-0: 0;
+    --space-1: 2px;
+    --space-2: 4px;
+    --space-3: 8px;
+    --space-4: 12px;
+    --space-5: 16px;
+    --space-6: 24px;
+    --space-7: 32px;
+    --space-8: 48px;
+    --space-9: 64px;
+    --font-display: "Berkeley Mono", "TX-02", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --font-body: "Berkeley Mono", "TX-02", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --font-mono: "Berkeley Mono", "TX-02", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --type-xs: 11px;
+    --lh-xs: 16px;
+    --type-sm: 12px;
+    --lh-sm: 18px;
+    --type-base: 13px;
+    --lh-base: 20px;
+    --type-md: 15px;
+    --lh-md: 24px;
+    --type-lg: 18px;
+    --lh-lg: 28px;
+    --type-xl: 22px;
+    --lh-xl: 30px;
+    --type-2xl: 28px;
+    --lh-2xl: 36px;
+    --type-3xl: 40px;
+    --lh-3xl: 48px;
+    --tracking-tight: -.01em;
+    --tracking-normal: 0;
+    --tracking-wide: .04em;
+    --tracking-sku: .12em;
+    --tracking-eyebrow: .18em;
+    --dur-flip: 90ms;
+    --dur-panel: .14s;
+    --dur-route: 1ms;
+    --dur-soft: .18s;
+    --ease-out: cubic-bezier(.22, 1, .36, 1);
+    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
+    --rule-thin: 1px solid var(--border-default);
+    --rule-strong: 1px solid var(--border-strong);
+    --rule-accent: 1px solid var(--accent);
+    --shadow-sm: none;
+    --shadow-md: none;
+    --shadow-lg: none;
+    --shadow-focus: 0 0 0 2px var(--accent);
+    --u-bg-0: var(--bg-0);
+    --u-bg-1: var(--bg-1);
+    --u-bg-2: var(--bg-2);
+    --u-bg-3: var(--bg-3);
+    --u-bg-4: var(--bg-4);
+    --u-bg-hover: var(--bg-2);
+    --u-bg-active: var(--bg-3);
+    --u-bg-selected: var(--accent-tint);
+    --u-fg-0: var(--fg-0);
+    --u-fg-1: var(--fg-1);
+    --u-fg-2: var(--fg-2);
+    --u-fg-3: var(--fg-3);
+    --u-border: var(--border-default);
+    --u-border-subtle: var(--border-subtle);
+    --u-border-strong: var(--border-strong);
+    --u-accent: var(--accent);
+    --u-accent-bg: var(--accent-tint);
+    --u-accent-line: var(--accent-hover);
+    --u-accent-strong: var(--accent-active);
+    --u-accent-fg: var(--accent-fg);
+    --u-status-success: var(--status-success);
+    --u-status-warn: var(--status-warn);
+    --u-status-error: var(--status-error);
+    --u-status-info: var(--status-info);
+    --u-status-live: var(--status-error);
+    --u-r-xs: var(--radius-xs);
+    --u-r-sm: var(--radius-sm);
+    --u-r-md: var(--radius-md);
+    --u-r-lg: var(--radius-md);
+    --u-r-pill: var(--radius-md);
+    --u-s-1: var(--space-2);
+    --u-s-2: var(--space-3);
+    --u-s-3: var(--space-4);
+    --u-s-4: var(--space-5);
+    --u-s-5: var(--space-6);
+    --u-font-display: var(--font-display);
+    --u-font-body: var(--font-body);
+    --u-font-sans: var(--font-body);
+    --u-font-mono: var(--font-mono);
+    --u-mono-cell-bg: var(--mono-cell-bg);
+    --u-mono-cell-fg: var(--mono-cell-fg);
+    --u-mono-rule: var(--mono-rule);
+    --u-sidebar-w: 320px;
+    --u-rsidebar-w: 360px;
+    --u-header-h: 44px;
+    --u-status-h: 28px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      --bg-0: oklch(13% .012 60);
+      --bg-1: oklch(17% .014 60);
+      --bg-2: oklch(20% .016 60);
+      --bg-3: oklch(24% .018 60);
+      --bg-4: oklch(28% .02 60);
+      --border-subtle: oklch(28% .018 60);
+      --border-default: oklch(40% .022 60);
+      --border-strong: oklch(58% .026 60);
+      --fg-0: oklch(94% .014 80);
+      --fg-1: oklch(78% .014 80);
+      --fg-2: oklch(60% .012 80);
+      --fg-3: oklch(44% .01 80);
+      --accent: oklch(72% .16 55);
+      --accent-hover: oklch(78% .16 55);
+      --accent-active: oklch(84% .16 55);
+      --accent-fg: oklch(14% .02 50);
+      --accent-tint: oklch(28% .06 55);
+      --status-success: oklch(72% .16 145);
+      --status-warn: oklch(80% .16 88);
+      --status-error: oklch(68% .2 25);
+      --status-info: oklch(72% .13 230);
+      --mono-cell-bg: oklch(20% .016 60);
+      --mono-cell-fg: oklch(88% .014 60);
+      --mono-rule: oklch(32% .02 60);
+      color-scheme: dark;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --dur-flip: 1ms;
+      --dur-panel: 1ms;
+      --dur-route: 1ms;
+      --dur-soft: 1ms;
+    }
+  }
+}
+
+@layer layout {
+  .app {
+    grid-template-columns: var(--u-sidebar-w) minmax(0, 1fr);
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    overflow: hidden;
+  }
+
+  .app.with-rsidebar {
+    grid-template-columns: var(--u-sidebar-w) minmax(0, 1fr) var(--u-rsidebar-w);
+  }
+
+  .app.no-sidebar {
+    grid-template-columns: 0 minmax(0, 1fr);
+  }
+
+  .app.no-sidebar.with-rsidebar {
+    grid-template-columns: 0 minmax(0, 1fr) var(--u-rsidebar-w);
+  }
+
+  .app.no-sidebar > .sidebar {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+@layer shell {
+  .sidebar {
+    background: var(--u-bg-1);
+    border-right: 1px solid var(--u-border);
+    min-height: 0;
+    font-family: var(--u-font-mono);
+    font-size: var(--type-xs);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .tree-panel-hd {
+    padding: 8px var(--u-s-3) 6px;
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    color: var(--u-fg-0);
+    font-size: 10px;
+    font-weight: 700;
+    font-family: var(--u-font-mono);
+    border-bottom: 1px solid var(--u-border);
+    background: var(--u-bg-2);
+    flex: none;
+    justify-content: space-between;
+    align-items: baseline;
+    display: flex;
+  }
+
+  .tree-panel-hd .ct {
+    color: var(--u-fg-2);
+    align-items: center;
+    gap: 6px;
+    font-weight: 500;
+    display: inline-flex;
+  }
+
+  .tree-panel-hd .live-dot {
+    background: var(--u-fg-3);
+    width: 6px;
+    height: 6px;
+    transition: background var(--dur-panel) var(--ease-out);
+    flex: none;
+  }
+
+  .tree-panel-hd .live-dot.connected {
+    background: var(--u-status-success);
+  }
+
+  .tree-panel-search {
+    padding: 5px var(--u-s-3);
+    background: var(--u-bg-1);
+    border-bottom: 1px solid var(--u-border-subtle);
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    display: flex;
+  }
+
+  .tree-panel-search svg {
+    color: var(--u-fg-2);
+    flex: none;
+  }
+
+  .tree-panel-search input {
+    background: var(--u-bg-0);
+    border: 1px solid var(--u-border);
+    color: var(--u-fg-0);
+    font-size: 11px;
+    font-family: var(--u-font-mono);
+    min-width: 0;
+    transition: border-color var(--dur-flip) var(--ease-out);
+    border-radius: 0;
+    outline: none;
+    flex: 1;
+    padding: 3px 8px;
+  }
+
+  .tree-panel-search input::placeholder {
+    color: var(--u-fg-3);
+  }
+
+  .tree-panel-search input:focus-visible {
+    border-color: var(--u-border-strong);
+    box-shadow: var(--shadow-focus);
+  }
+
+  .search-clear {
+    color: var(--u-fg-3);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 0 4px;
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .search-clear:hover {
+    color: var(--u-fg-0);
+  }
+
+  .search-kbd {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    border: 1px solid var(--u-border);
+    background: var(--u-bg-2);
+    flex: none;
+    padding: 1px 5px;
+    font-size: 10px;
+  }
+
+  .tree-panel-body {
+    min-height: 0;
+    padding: 4px 0 var(--u-s-3);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .tree-panel-body::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .tree-panel-body::-webkit-scrollbar-thumb {
+    background: var(--u-border);
+  }
+
+  .tp-section-hd {
+    padding: 6px var(--u-s-3) 2px;
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    color: var(--u-fg-1);
+    font-size: 9px;
+    font-weight: 700;
+    font-family: var(--u-font-mono);
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+    display: flex;
+  }
+
+  .tp-section-hd:not(:first-child) {
+    margin-top: 6px;
+  }
+
+  .tp-section-hd > span:first-child {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .tp-section-hd .pill {
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    letter-spacing: var(--tracking-sku);
+    color: var(--u-fg-2);
+    font-size: 9px;
+    font-family: var(--u-font-mono);
+    flex: none;
+    padding: 0 5px;
+    font-weight: 600;
+  }
+
+  .tp-row {
+    padding: 2px var(--u-s-3);
+    color: var(--u-fg-1);
+    font-family: var(--u-font-mono);
+    cursor: pointer;
+    text-align: left;
+    background: none;
+    border: 0;
+    border-left: 2px solid #0000;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    font-size: 11px;
+    line-height: 1.55;
+    display: flex;
+  }
+
+  .tp-row:hover {
+    background: var(--u-bg-2);
+    color: var(--u-fg-0);
+  }
+
+  .tp-row:focus-visible {
+    box-shadow: var(--shadow-focus);
+    z-index: 1;
+    outline: none;
+    position: relative;
+  }
+
+  .tp-row .glyph {
+    text-align: center;
+    width: 12px;
+    color: var(--u-fg-2);
+    flex: none;
+    font-size: 10px;
+    display: inline-block;
+  }
+
+  .tp-row .name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .tp-row.dir {
+    color: var(--u-fg-0);
+    font-weight: 600;
+  }
+
+  .tp-row.dir .glyph {
+    color: var(--u-fg-1);
+  }
+
+  .tp-row.sel {
+    background: var(--u-accent-bg);
+    color: var(--u-fg-0);
+    border-left-color: var(--u-border-strong);
+    font-weight: 600;
+  }
+
+  .tp-row.sel .glyph {
+    color: var(--u-accent);
+  }
+
+  .tp-row.modified .name:after {
+    content: "●";
+    color: var(--u-status-warn);
+    vertical-align: middle;
+    margin-left: 6px;
+    font-size: 8px;
+  }
+
+  .tp-row.star:before {
+    content: "★";
+    color: var(--u-accent);
+    flex: none;
+    margin-right: 4px;
+    font-size: 9px;
+  }
+
+  .tp-row .badge {
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+    letter-spacing: var(--tracking-sku);
+    font-size: 9px;
+    font-weight: 700;
+    font-family: var(--u-font-mono);
+    flex: none;
+    padding: 0 5px;
+  }
+
+  .tp-row.muted, .tp-row.muted .name, .tp-row.muted .glyph {
+    color: var(--u-fg-3);
+  }
+
+  .tp-row.muted[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  .tp-row.muted[aria-disabled="true"]:hover {
+    color: var(--u-fg-3);
+    background: none;
+  }
+
+  .tp-row[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  .tp-empty {
+    padding: 4px var(--u-s-3);
+    color: var(--u-fg-3);
+    font-size: 11px;
+    font-style: italic;
+  }
+
+  .cheatsheet {
+    padding: var(--u-s-3) var(--u-s-2) var(--u-s-3);
+    border-top: 1px solid var(--u-border);
+    background: var(--u-bg-1);
+    margin-top: auto;
+  }
+
+  .cheatsheet > details {
+    margin-bottom: 4px;
+  }
+
+  .cheatsheet > details > summary {
+    padding: 4px var(--u-s-2);
+    color: var(--u-fg-1);
+    border-radius: var(--u-r-sm);
+    cursor: pointer;
+    align-items: center;
+    gap: var(--u-s-1);
+    font-size: 11px;
+    font-weight: 500;
+    list-style: none;
+    display: flex;
+  }
+
+  .cheatsheet > details > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .cheatsheet > details > summary:before {
+    content: "▸";
+    color: var(--u-fg-3);
+    width: 12px;
+    font-size: 10px;
+    transition: transform .1s;
+    display: inline-block;
+  }
+
+  .cheatsheet > details[open] > summary:before {
+    transform: rotate(90deg);
+  }
+
+  .cheatsheet > details > summary:hover {
+    background: var(--u-bg-hover);
+  }
+
+  .cheatsheet ul, .cheatsheet ol {
+    padding: 4px var(--u-s-2) var(--u-s-2) var(--u-s-4);
+    margin: 0;
+    font-size: 11px;
+    line-height: 1.6;
+  }
+
+  .cheatsheet li {
+    align-items: baseline;
+    gap: var(--u-s-2);
+    padding: 2px 0;
+    display: flex;
+  }
+
+  .cheatsheet li > span {
+    color: var(--u-fg-3);
+    text-align: right;
+    margin-left: auto;
+    font-size: 10px;
+  }
+
+  .cheatsheet kbd {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-xs);
+    color: var(--u-fg-0);
+    padding: 1px 5px;
+    font-size: 10px;
+  }
+
+  .cheatsheet code {
+    font-family: var(--u-font-mono);
+    color: var(--u-accent);
+    background: var(--u-accent-bg);
+    border-radius: var(--u-r-xs);
+    padding: 1px 4px;
+    font-size: 10px;
+  }
+
+  .cheatsheet code i {
+    color: var(--u-fg-2);
+    font-style: normal;
+  }
+
+  .cheatsheet ul.cmds li, .cheatsheet ul.files li {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+
+  .cheatsheet ul.cmds li > span, .cheatsheet ul.files li > span {
+    text-align: left;
+    margin-left: 0;
+  }
+
+  .main {
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+  }
+
+  .mb {
+    background: var(--u-bg-2);
+    border-bottom: 1px solid var(--u-fg-0);
+    height: 30px;
+    font-family: var(--u-font-mono);
+    font-size: var(--type-xs);
+    flex-shrink: 0;
+    align-items: stretch;
+    gap: 0;
+    min-width: 0;
+    padding: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .mb-brand {
+    padding: 0 var(--u-s-3);
+    border-right: 1px solid var(--u-border);
+    color: var(--u-fg-0);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 700;
+    display: flex;
+  }
+
+  .mb-brand .dot {
+    background: var(--u-accent);
+    flex: none;
+    width: 8px;
+    height: 8px;
+  }
+
+  .mb-menus {
+    align-items: stretch;
+    display: flex;
+  }
+
+  .mb-menu {
+    font-family: var(--u-font-mono);
+    font-size: var(--type-xs);
+    color: var(--u-fg-1);
+    cursor: pointer;
+    white-space: nowrap;
+    background: none;
+    border: 0;
+    align-items: center;
+    height: 100%;
+    padding: 0 12px;
+    display: flex;
+  }
+
+  .mb-menu:hover {
+    background: var(--u-bg-3);
+    color: var(--u-fg-0);
+  }
+
+  .mb-menu[aria-expanded="true"] {
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+    font-weight: 600;
+  }
+
+  .mb-menu:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--u-accent);
+    outline: none;
+  }
+
+  .mb-menu:disabled, .mb-menu[aria-disabled="true"] {
+    color: var(--u-fg-3);
+    cursor: not-allowed;
+  }
+
+  .mb-menu:disabled:hover, .mb-menu[aria-disabled="true"]:hover {
+    color: var(--u-fg-3);
+    background: none;
+  }
+
+  .mb-spacer {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .mb-status {
+    padding: 0 var(--u-s-3);
+    align-items: center;
+    gap: var(--u-s-3);
+    color: var(--u-fg-2);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    border-left: 1px solid var(--u-border);
+    white-space: nowrap;
+    flex-shrink: 1;
+    min-width: 0;
+    font-size: 10px;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .mb-status > * {
+    flex: none;
+  }
+
+  .mb-status > .file {
+    flex: 0 auto;
+    min-width: 0;
+  }
+
+  .mb-status .cv-stamp {
+    background: var(--u-fg-0);
+    color: var(--u-bg-0);
+    padding: 2px 6px;
+    font-size: 10px;
+    font-weight: 700;
+  }
+
+  .mb-status .file {
+    color: var(--u-fg-1);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 280px;
+    overflow: hidden;
+  }
+
+  .mb-status .file b {
+    color: var(--u-fg-0);
+    font-weight: 700;
+  }
+
+  .mb-status .sep {
+    background: var(--u-border);
+    flex: none;
+    width: 1px;
+    height: 14px;
+    display: inline-block;
+  }
+
+  .mb-status b {
+    color: var(--u-fg-0);
+    font-weight: 700;
+  }
+
+  .mb-status .ok {
+    color: var(--u-status-success);
+  }
+
+  .mb-status .warn {
+    color: var(--u-accent);
+  }
+
+  .mb-status .accent-dot {
+    color: var(--u-accent);
+    font-size: 8px;
+  }
+
+  .mb-dropdown {
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-fg-0);
+    z-index: 100;
+    min-width: 240px;
+    font-family: var(--u-font-mono);
+    font-size: var(--type-xs);
+    box-shadow: 4px 4px 0 var(--u-fg-0);
+    padding: 4px 0;
+    position: absolute;
+    top: 30px;
+  }
+
+  .mb-dd-hd {
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    color: var(--u-fg-2);
+    padding: 4px 12px 2px;
+    font-size: 9px;
+    font-weight: 600;
+  }
+
+  .mb-dd-item {
+    cursor: pointer;
+    color: var(--u-fg-0);
+    text-align: left;
+    width: 100%;
+    font-family: var(--u-font-mono);
+    font-size: var(--type-xs);
+    background: none;
+    border: 0;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    padding: 5px 12px;
+    display: flex;
+  }
+
+  .mb-dd-item:hover {
+    background: var(--u-bg-3);
+  }
+
+  .mb-dd-item.active {
+    color: var(--u-accent);
+  }
+
+  .mb-dd-item[aria-disabled="true"] {
+    color: var(--u-fg-3);
+    cursor: not-allowed;
+  }
+
+  .mb-dd-item[aria-disabled="true"]:hover {
+    background: none;
+  }
+
+  .mb-dd-item .lbl {
+    align-items: center;
+    gap: 6px;
+    display: inline-flex;
+  }
+
+  .mb-dd-item .check {
+    color: var(--u-accent);
+    text-align: left;
+    width: 12px;
+    display: inline-block;
+  }
+
+  .mb-dd-item .shortcut {
+    color: var(--u-fg-2);
+    font-family: var(--u-font-mono);
+    letter-spacing: var(--tracking-wide);
+    flex: none;
+    font-size: 10px;
+  }
+
+  .mb-dd-item .phase-tag {
+    color: var(--u-fg-3);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    font-size: 9px;
+  }
+
+  .mb-dd-sep {
+    background: var(--u-border);
+    height: 1px;
+    margin: 4px 0;
+  }
+
+  .header {
+    align-items: center;
+    gap: var(--u-s-3);
+    padding: var(--u-s-2) var(--u-s-3);
+    background: var(--u-bg-1);
+    border-bottom: 1px solid var(--u-border);
+    min-height: var(--u-header-h);
+    font-family: var(--u-font-mono);
+    display: flex;
+  }
+
+  .tabs {
+    min-width: 0;
+    margin: calc(var(--u-s-2) * -1) calc(var(--u-s-3) * -1);
+    flex: 1;
+    align-self: stretch;
+    gap: 0;
+    padding: 0;
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .tabs::-webkit-scrollbar {
+    height: 0;
+  }
+
+  .tab {
+    align-items: center;
+    gap: var(--u-s-2);
+    padding: var(--u-s-2) var(--u-s-3);
+    background: var(--u-bg-1);
+    border: 0;
+    border-right: 1px solid var(--u-border-subtle);
+    font-size: var(--type-xs);
+    font-family: var(--u-font-mono);
+    letter-spacing: var(--tracking-wide);
+    cursor: pointer;
+    white-space: nowrap;
+    max-width: 240px;
+    color: var(--u-fg-2);
+    transition: color var(--dur-flip) var(--ease-out),
+              background var(--dur-flip) var(--ease-out);
+    border-radius: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .tab:hover {
+    color: var(--u-fg-0);
+    background: var(--u-bg-2);
+  }
+
+  .tab.active {
+    background: var(--u-bg-0);
+    color: var(--u-fg-0);
+    font-weight: 700;
+  }
+
+  .tab.active:after {
+    content: "";
+    background: var(--u-accent);
+    height: 2px;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+  }
+
+  .tab:focus-visible {
+    box-shadow: var(--shadow-focus);
+    z-index: 2;
+    outline: none;
+  }
+
+  .tab .name {
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .tab .close {
+    color: var(--u-fg-3);
+    cursor: pointer;
+    border-radius: var(--u-r-xs);
+    background: none;
+    border: 0;
+    padding: 0 4px;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .tab .close:hover {
+    background: var(--u-bg-3);
+    color: var(--u-fg-0);
+  }
+
+  .actions {
+    gap: var(--u-s-1);
+    align-items: center;
+    display: flex;
+  }
+
+  .actions button, .actions a {
+    color: var(--u-fg-1);
+    border: 1px solid var(--u-border);
+    padding: 4px var(--u-s-3);
+    font-size: var(--type-xs);
+    border-radius: var(--u-r-sm);
+    cursor: pointer;
+    line-height: 1.2;
+    font-family: var(--u-font-mono);
+    letter-spacing: var(--tracking-wide);
+    transition: color var(--dur-flip) var(--ease-out),
+              background var(--dur-flip) var(--ease-out),
+              border-color var(--dur-flip) var(--ease-out);
+    background: none;
+    align-items: center;
+    gap: 6px;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .actions button:hover, .actions a:hover {
+    background: var(--u-bg-2);
+    color: var(--u-fg-0);
+    border-color: var(--u-border-strong);
+  }
+
+  .actions button:focus-visible, .actions a:focus-visible {
+    box-shadow: var(--shadow-focus);
+    z-index: 1;
+    outline: none;
+  }
+
+  .actions a.icon-only {
+    color: var(--u-fg-2);
+    border-color: #0000;
+  }
+
+  .actions a.icon-only:hover {
+    color: var(--u-fg-0);
+    background: var(--u-bg-2);
+    border-color: var(--u-border);
+  }
+
+  .theme-toggle-label {
+    text-transform: lowercase;
+  }
+
+  .viewport {
+    background-color: var(--u-bg-1);
+    background-image: linear-gradient(var(--u-border-subtle) 1px, transparent 1px),
+    linear-gradient(90deg, var(--u-border-subtle) 1px, transparent 1px);
+    background-size: 24px 24px;
+    flex: 1;
+    position: relative;
+  }
+
+  .viewport > iframe {
+    background: var(--u-bg-0);
+    border: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .viewport > iframe.active {
+    display: block;
+  }
+
+  .empty-state {
+    height: 100%;
+    color: var(--u-fg-3);
+    justify-content: center;
+    align-items: center;
+    gap: var(--u-s-4);
+    text-align: center;
+    flex-direction: column;
+    padding: 48px;
+    display: flex;
+  }
+
+  .empty-state .big {
+    font-family: var(--u-font-display);
+    color: var(--u-fg-1);
+    letter-spacing: -.01em;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .empty-state .small {
+    max-width: 480px;
+    font-size: 12px;
+    line-height: 1.6;
+  }
+
+  .empty-state .small kbd {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-xs);
+    color: var(--u-fg-1);
+    padding: 1px 6px;
+    font-size: 11px;
+  }
+
+  .empty-state .small code {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-2);
+    border-radius: var(--u-r-xs);
+    color: var(--u-accent);
+    padding: 1px 4px;
+    font-size: 11px;
+  }
+
+  .statusbar {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-2);
+    letter-spacing: var(--tracking-wide);
+    background: var(--u-bg-1);
+    border-top: 1px solid var(--u-border);
+    height: var(--u-status-h);
+    align-items: stretch;
+    min-width: 0;
+    padding: 0;
+    font-size: 10px;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sb-slot {
+    align-items: center;
+    gap: var(--u-s-2);
+    padding: 0 var(--u-s-3);
+    border-right: 1px solid var(--u-border-subtle);
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .sb-key {
+    color: var(--u-fg-3);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-sku);
+  }
+
+  .sb-active {
+    flex: 0 auto;
+    min-width: 0;
+  }
+
+  .sb-active .sb-file {
+    color: var(--u-fg-1);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 360px;
+    overflow: hidden;
+  }
+
+  .sb-selected {
+    flex: auto;
+    min-width: 0;
+  }
+
+  .sb-selected .sb-dot {
+    color: var(--u-accent);
+  }
+
+  .sb-selected .sb-sel-text {
+    color: var(--u-fg-1);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .sb-clear-sel, .sb-add-comment {
+    color: var(--u-fg-2);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-xs);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    cursor: pointer;
+    background: none;
+    padding: 1px 6px;
+    font-family: inherit;
+    font-size: 10px;
+    line-height: 1.4;
+  }
+
+  .sb-add-comment {
+    color: var(--u-accent);
+    border-color: var(--u-accent);
+  }
+
+  .sb-clear-sel:hover {
+    color: var(--u-fg-0);
+    background: var(--u-bg-2);
+    border-color: var(--u-border-strong);
+  }
+
+  .sb-add-comment:hover {
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+  }
+
+  .sb-unread .sb-count {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-0);
+    font-variant-numeric: tabular-nums;
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    padding: 0 5px;
+    font-size: 10px;
+    font-weight: 700;
+  }
+
+  .sb-live-dot {
+    background: var(--u-fg-3);
+    border-radius: 50%;
+    flex: none;
+    width: 7px;
+    height: 7px;
+  }
+
+  .sb-live-dot.connected {
+    background: var(--u-status-error);
+  }
+
+  .sb-live .sb-key {
+    color: var(--u-fg-1);
+  }
+
+  .sb-spacer {
+    border-right: 1px solid var(--u-border-subtle);
+    flex: 1 0 auto;
+  }
+
+  .sb-theme {
+    padding: 0 var(--u-s-2);
+    border-right: 0;
+  }
+
+  .sb-theme .theme-toggle {
+    color: var(--u-fg-2);
+    font-family: var(--u-font-mono);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    padding: 2px var(--u-s-2);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    align-items: center;
+    gap: 6px;
+    font-size: 10px;
+    display: inline-flex;
+  }
+
+  .sb-theme .theme-toggle:hover {
+    color: var(--u-fg-0);
+    background: var(--u-bg-2);
+  }
+
+  .sb-theme .theme-toggle:focus-visible {
+    box-shadow: var(--shadow-focus);
+    outline: none;
+  }
+
+  .theme-toggle-label {
+    color: inherit;
+  }
+
+  .filter-no-match {
+    display: none !important;
+  }
+
+  .wm {
+    top: var(--u-s-4);
+    left: var(--u-s-5);
+    font-family: var(--u-font-display);
+    color: var(--u-fg-0);
+    pointer-events: none;
+    z-index: 1;
+    user-select: none;
+    font-weight: 700;
+    line-height: 1;
+    position: absolute;
+  }
+
+  .wm-glyph {
+    letter-spacing: var(--tracking-tight);
+    font-size: 40px;
+    display: block;
+  }
+
+  .wm-sub {
+    font-size: var(--type-xs);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    color: var(--u-fg-2);
+    margin-top: var(--u-s-2);
+    gap: var(--u-s-3);
+    align-items: center;
+    font-weight: 500;
+    display: flex;
+  }
+
+  .wm-sub b {
+    color: var(--u-accent);
+    font-weight: 700;
+  }
+
+  .wm-sep {
+    color: var(--u-fg-3);
+  }
+
+  .sel-halo {
+    border: 2px solid var(--u-accent);
+    pointer-events: none;
+    z-index: 5;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sel-halo:before, .sel-halo:after, .sel-halo > i:before, .sel-halo > i:after {
+    content: "";
+    background: var(--u-accent);
+    width: 8px;
+    height: 8px;
+    position: absolute;
+  }
+
+  .sel-halo:before {
+    top: -3px;
+    left: -3px;
+  }
+
+  .sel-halo:after {
+    top: -3px;
+    right: -3px;
+  }
+
+  .sel-halo > i:before {
+    bottom: -3px;
+    left: -3px;
+  }
+
+  .sel-halo > i:after {
+    bottom: -3px;
+    right: -3px;
+  }
+}
+
+@layer components {
+  .tab-system {
+    background: var(--u-accent-bg);
+    border-color: var(--u-accent-line);
+    color: var(--u-accent);
+  }
+
+  .tab-system:hover {
+    background: var(--u-accent-bg);
+  }
+
+  .tab-system.active {
+    color: var(--u-accent);
+    border-color: var(--u-accent);
+  }
+
+  .system-view {
+    background: var(--u-bg-0);
+    display: none;
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+  }
+
+  .system-view.active {
+    display: block;
+  }
+
+  .system-view::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .system-view::-webkit-scrollbar-thumb {
+    background: var(--u-border);
+    border-radius: var(--u-r-sm);
+  }
+
+  .sv {
+    max-width: 1280px;
+    padding: var(--space-7) var(--space-7) var(--space-9);
+    font-family: var(--u-font-mono);
+    margin: 0 auto;
+  }
+
+  .sv-empty {
+    height: 50vh;
+    color: var(--u-fg-3);
+    place-items: center;
+    display: grid;
+  }
+
+  .sv-header {
+    align-items: baseline;
+    gap: var(--space-5);
+    border-bottom: 2px solid var(--u-fg-0);
+    padding-bottom: var(--u-s-3);
+    margin-bottom: var(--u-s-5);
+    grid-template-columns: auto 1fr auto;
+    display: grid;
+  }
+
+  .sv-sku {
+    font-family: var(--u-font-mono);
+    font-size: var(--type-lg);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    color: var(--u-fg-0);
+    font-weight: 700;
+  }
+
+  .sv-title {
+    font-family: var(--u-font-mono);
+    font-size: var(--type-md);
+    color: var(--u-fg-1);
+  }
+
+  .sv-loc {
+    font-family: var(--u-font-mono);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    color: var(--u-fg-2);
+    font-size: 10px;
+  }
+
+  .sv-loc code {
+    font-family: var(--u-font-mono);
+    color: var(--u-accent);
+    background: none;
+    padding: 0;
+  }
+
+  .sv-section {
+    margin-bottom: var(--u-s-5);
+  }
+
+  .sv-section h2 {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-2);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-sku);
+    margin: 0 0 var(--u-s-3);
+    padding-bottom: var(--u-s-2);
+    border-bottom: 1px solid var(--u-border);
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: 10px;
+    font-weight: 700;
+    display: flex;
+  }
+
+  .sv-section h2 .sv-h-num {
+    color: var(--u-fg-1);
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+  }
+
+  .sv-section h3 {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-2);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-sku);
+    margin: var(--u-s-3) 0 var(--u-s-2);
+    align-items: baseline;
+    gap: var(--u-s-2);
+    font-size: 10px;
+    font-weight: 700;
+    display: flex;
+  }
+
+  .sv-count {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    font-variant-numeric: tabular-nums;
+    font-size: 11px;
+    font-weight: 500;
+  }
+
+  .sv-tokens-ladder {
+    border: 1px solid var(--u-border);
+    grid-template-columns: repeat(6, 1fr);
+    gap: 0;
+    display: grid;
+  }
+
+  .sv-tok-cell {
+    border-right: 1px solid var(--u-border);
+    border-bottom: 1px solid var(--u-border);
+    background: var(--u-bg-1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sv-tok-cell:nth-child(6n) {
+    border-right: 0;
+  }
+
+  .sv-tok-cell .sv-tok-swatch {
+    border-bottom: 1px solid var(--u-border-subtle);
+    height: 56px;
+  }
+
+  .sv-tok-cell .sv-tok-meta {
+    padding: var(--u-s-1) var(--u-s-2);
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--u-s-1);
+    min-width: 0;
+    display: flex;
+  }
+
+  .sv-tok-cell .sv-tok-name {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-0);
+    text-overflow: ellipsis;
+    background: none;
+    padding: 0;
+    font-size: 10px;
+    font-weight: 600;
+    overflow: hidden;
+  }
+
+  .sv-tok-cell .sv-tok-value {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-2);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 9px;
+    overflow: hidden;
+  }
+
+  .sv-type-list {
+    display: block;
+  }
+
+  .sv-type-row {
+    gap: var(--u-s-4);
+    padding: var(--u-s-2) 0;
+    border-bottom: 1px solid var(--u-border-subtle);
+    grid-template-columns: 120px 1fr;
+    align-items: baseline;
+    display: grid;
+  }
+
+  .sv-type-tok {
+    font-family: var(--u-font-mono);
+    color: var(--u-accent);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    background: none;
+    padding: 0;
+    font-size: 10px;
+  }
+
+  .sv-type-sample {
+    color: var(--u-fg-0);
+    font-family: var(--u-font-mono);
+  }
+
+  .sv-readme {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-1);
+    background: var(--u-bg-1);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-md);
+    padding: var(--u-s-4);
+    white-space: pre-wrap;
+    max-height: 480px;
+    font-size: 12px;
+    line-height: 1.6;
+    overflow: auto;
+  }
+
+  .sv-tokens-group {
+    margin-bottom: var(--u-s-3);
+  }
+
+  .sv-tokens {
+    gap: var(--u-s-2);
+    display: grid;
+  }
+
+  .sv-tokens-color {
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  }
+
+  .sv-tokens-font, .sv-tokens-fontsize {
+    grid-template-columns: 1fr;
+  }
+
+  .sv-tokens-radius, .sv-tokens-shadow {
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  }
+
+  .sv-tokens-space, .sv-tokens-other, .sv-tokens-weight, .sv-tokens-leading, .sv-tokens-motion {
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  }
+
+  .tok {
+    background: var(--u-bg-1);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-md);
+    padding: var(--u-s-2);
+    gap: var(--u-s-2);
+    flex-direction: column;
+    min-width: 0;
+    display: flex;
+  }
+
+  .tok-meta {
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    font-size: 11px;
+    display: flex;
+  }
+
+  .tok-meta code {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-0);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+    overflow: hidden;
+  }
+
+  .tok-meta span {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
+    overflow: hidden;
+  }
+
+  .tok-color {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .tok-swatch {
+    border-radius: var(--u-r-sm);
+    border: 1px solid var(--u-border-strong);
+    background-image: linear-gradient(45deg, var(--u-border-subtle) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--u-border-subtle) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--u-border-subtle) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--u-border-subtle) 75%);
+    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+    background-size: 12px 12px;
+    flex: none;
+    width: 48px;
+    height: 48px;
+  }
+
+  .tok-color .tok-swatch {
+    background: inherit;
+  }
+
+  .tok-text .tok-sample {
+    color: var(--u-fg-0);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 18px;
+    line-height: 1.3;
+    overflow: hidden;
+  }
+
+  .tok-radius {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .tok-radius .tok-shape {
+    background: var(--u-bg-3);
+    border: 1px solid var(--u-border-strong);
+    flex: none;
+    width: 48px;
+    height: 48px;
+  }
+
+  .tok-shadow {
+    padding: var(--u-s-3);
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .tok-shadow .tok-shape {
+    background: var(--u-bg-2);
+    border-radius: var(--u-r-md);
+    flex: none;
+    width: 48px;
+    height: 48px;
+  }
+
+  .tok-space {
+    flex-direction: column;
+  }
+
+  .tok-space .tok-bar {
+    background: var(--u-accent);
+    border-radius: var(--u-r-pill);
+    max-width: 100%;
+    height: 8px;
+  }
+
+  .sv-previews {
+    gap: var(--u-s-3);
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    display: grid;
+  }
+
+  .sv-previews-ui_kits {
+    grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
+  }
+
+  .sv-previews-ui_kits .sv-preview-frame {
+    aspect-ratio: 16 / 10;
+  }
+
+  .sv-preview-card {
+    background: var(--u-bg-1);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-md);
+    cursor: pointer;
+    transition: all .12s;
+    overflow: hidden;
+  }
+
+  .sv-preview-card:hover {
+    border-color: var(--u-accent-line);
+    transform: translateY(-1px);
+  }
+
+  .sv-preview-frame {
+    aspect-ratio: 16 / 10;
+    background: var(--u-bg-0);
+    border-bottom: 1px solid var(--u-border);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sv-preview-frame iframe {
+    transform-origin: 0 0;
+    pointer-events: none;
+    background: var(--u-bg-0);
+    border: 0;
+    width: 200%;
+    height: 200%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: scale(.5);
+  }
+
+  .sv-preview-foot {
+    padding: var(--u-s-2) var(--u-s-3);
+    flex-direction: column;
+    gap: 2px;
+    display: flex;
+  }
+
+  .sv-preview-foot strong {
+    color: var(--u-fg-0);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .sv-preview-foot code {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
+    overflow: hidden;
+  }
+
+  .sv-list {
+    gap: var(--u-s-1);
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sv-list li {
+    background: var(--u-bg-1);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-sm);
+    padding: var(--u-s-2) var(--u-s-3);
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    display: flex;
+  }
+
+  .sv-list code {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-0);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .sv-list-path {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
+    overflow: hidden;
+  }
+
+  .sv-assets {
+    gap: var(--u-s-2);
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    display: grid;
+  }
+
+  .sv-asset {
+    background: var(--u-bg-1);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-sm);
+    padding: var(--u-s-3);
+    align-items: center;
+    gap: var(--u-s-2);
+    flex-direction: column;
+    margin: 0;
+    display: flex;
+  }
+
+  .sv-asset img {
+    object-fit: contain;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 80px;
+  }
+
+  .sv-asset figcaption {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    font-size: 10px;
+    overflow: hidden;
+  }
+
+  .comment-bar {
+    background: var(--u-bg-1);
+    border-top: 1px solid var(--u-border);
+    padding: 6px var(--u-s-3);
+    flex-direction: column;
+    gap: 4px;
+    font-size: 12px;
+    display: flex;
+  }
+
+  .cb-row {
+    align-items: center;
+    gap: var(--u-s-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .composer {
+    gap: var(--u-s-2);
+    padding: var(--u-s-3);
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-accent-line);
+    border-radius: var(--u-r-md);
+    flex-direction: column;
+    margin: 4px 0;
+    display: flex;
+  }
+
+  .composer-head {
+    align-items: baseline;
+    gap: var(--u-s-2);
+    color: var(--u-fg-3);
+    font-size: 11px;
+    display: flex;
+  }
+
+  .composer-selector {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-1);
+    background: var(--u-bg-1);
+    border-radius: var(--u-r-sm);
+    border: 1px solid var(--u-border);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    padding: 2px 8px;
+    font-size: 11px;
+    overflow: hidden;
+  }
+
+  .comment-bar textarea.composer-textarea {
+    background: var(--u-bg-1);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-sm);
+    width: 100%;
+    color: var(--u-fg-0);
+    padding: var(--u-s-3);
+    resize: vertical;
+    outline: none;
+    min-height: 100px;
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .comment-bar textarea.composer-textarea:focus {
+    border-color: var(--u-accent-line);
+  }
+
+  .comment-bar textarea.composer-textarea::placeholder {
+    color: var(--u-fg-3);
+  }
+
+  .composer-actions {
+    justify-content: flex-end;
+    gap: 6px;
+    display: flex;
+  }
+
+  .cb-row.composer {
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  .cb-label {
+    color: var(--u-fg-3);
+    flex: none;
+    align-self: center;
+    font-size: 11px;
+  }
+
+  .cb-label code {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-2);
+    border-radius: var(--u-r-xs);
+    color: var(--u-fg-1);
+    padding: 1px 4px;
+    font-size: 10px;
+  }
+
+  .comment-bar textarea {
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-sm);
+    color: var(--u-fg-0);
+    padding: var(--u-s-2);
+    resize: vertical;
+    outline: none;
+    flex: 1;
+    min-height: 40px;
+    font-family: inherit;
+    font-size: 12px;
+  }
+
+  .comment-bar textarea:focus {
+    border-color: var(--u-accent-line);
+  }
+
+  .cb-actions {
+    align-self: flex-end;
+    gap: 4px;
+    display: flex;
+  }
+
+  .cb-primary, .cb-secondary {
+    border: 1px solid var(--u-border);
+    background: var(--u-bg-2);
+    color: var(--u-fg-1);
+    border-radius: var(--u-r-sm);
+    padding: 4px var(--u-s-3);
+    font-family: var(--u-font-mono);
+    cursor: pointer;
+    font-size: 11px;
+  }
+
+  .cb-primary {
+    background: var(--u-accent);
+    color: var(--u-bg-0);
+    border-color: var(--u-accent);
+    font-weight: 600;
+  }
+
+  .cb-primary:hover {
+    background: var(--u-accent-strong);
+    border-color: var(--u-accent-strong);
+  }
+
+  .cb-primary:disabled {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  .cb-secondary:hover {
+    background: var(--u-bg-3);
+    color: var(--u-fg-0);
+  }
+
+  .cb-row.focused {
+    background: var(--u-bg-2);
+    border-radius: var(--u-r-sm);
+    padding: 4px var(--u-s-2);
+  }
+
+  .cb-pinno {
+    font-family: var(--u-font-mono);
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+    border-radius: var(--u-r-sm);
+    letter-spacing: var(--tracking-sku);
+    flex: none;
+    padding: 1px 6px;
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  .cb-text {
+    color: var(--u-fg-0);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    font-size: 12px;
+    overflow: hidden;
+  }
+
+  .cb-target code {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-3);
+    border-radius: var(--u-r-xs);
+    color: var(--u-fg-2);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 240px;
+    padding: 1px 6px;
+    font-size: 10px;
+    display: inline-block;
+    overflow: hidden;
+  }
+
+  .cb-row.strip {
+    color: var(--u-fg-3);
+    font-size: 11px;
+  }
+
+  .cb-pin-strip {
+    flex-wrap: wrap;
+    flex: 1;
+    gap: 4px;
+    display: flex;
+  }
+
+  .cb-pin-chip {
+    font-family: var(--u-font-mono);
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+    border-radius: var(--u-r-sm);
+    cursor: pointer;
+    letter-spacing: var(--tracking-sku);
+    border: 0;
+    padding: 2px 7px;
+    font-size: 10px;
+    font-weight: 600;
+    transition: transform .1s;
+  }
+
+  .cb-pin-chip:hover {
+    transform: scale(1.1);
+  }
+
+  .cb-more {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    align-self: center;
+    font-size: 10px;
+  }
+
+  .rsidebar {
+    background: var(--u-bg-1);
+    border-left: 1px solid var(--u-border);
+    min-width: 0;
+    font-family: var(--u-font-mono);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .rsidebar-header {
+    padding: var(--u-s-2) var(--u-s-3);
+    background: var(--u-bg-2);
+    border-bottom: 1px solid var(--u-border);
+    align-items: baseline;
+    gap: var(--u-s-2);
+    display: flex;
+  }
+
+  .rsidebar-header h2 {
+    font-family: var(--u-font-mono);
+    font-size: var(--type-md);
+    color: var(--u-fg-0);
+    align-items: baseline;
+    gap: var(--u-s-2);
+    letter-spacing: var(--tracking-tight);
+    margin: 0;
+    font-weight: 700;
+    display: flex;
+  }
+
+  .rsidebar-header h2 > span:first-child {
+    text-transform: lowercase;
+  }
+
+  .rsidebar-header h2 .total {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-2);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    margin-left: auto;
+    font-size: 10px;
+    font-weight: 500;
+  }
+
+  .rsidebar-filters {
+    background: var(--u-bg-1);
+    border: 0;
+    border-bottom: 1px solid var(--u-border);
+    border-radius: 0;
+    gap: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  .rsidebar-filter {
+    background: var(--u-bg-1);
+    border: 0;
+    border-right: 1px solid var(--u-border-subtle);
+    color: var(--u-fg-2);
+    cursor: pointer;
+    font-family: var(--u-font-mono);
+    padding: var(--u-s-2) var(--u-s-2);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    transition: color var(--dur-flip) var(--ease-out),
+              background var(--dur-flip) var(--ease-out);
+    border-radius: 0;
+    flex: 1;
+    justify-content: center;
+    align-items: baseline;
+    gap: 6px;
+    font-size: 10px;
+    font-weight: 600;
+    display: flex;
+    position: relative;
+  }
+
+  .rsidebar-filter:last-child {
+    border-right: 0;
+  }
+
+  .rsidebar-filter:hover {
+    color: var(--u-fg-0);
+    background: var(--u-bg-2);
+  }
+
+  .rsidebar-filter:focus-visible {
+    box-shadow: var(--shadow-focus);
+    z-index: 1;
+    outline: none;
+  }
+
+  .rsidebar-filter.active {
+    background: var(--u-bg-0);
+    color: var(--u-fg-0);
+    box-shadow: none;
+    font-weight: 700;
+  }
+
+  .rsidebar-filter.active:after {
+    content: "";
+    background: var(--u-accent);
+    height: 2px;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+  }
+
+  .rsidebar-filter .fc {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-1);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    padding: 0 5px;
+    font-size: 10px;
+  }
+
+  .rsidebar-filter.active .fc {
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+    border-color: var(--u-accent);
+  }
+
+  .rsidebar-body {
+    background: var(--u-bg-0);
+    flex: 1;
+    padding: 0;
+    overflow-y: auto;
+  }
+
+  .rsidebar-body::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .rsidebar-body::-webkit-scrollbar-thumb {
+    background: var(--u-border);
+    border-radius: var(--u-r-sm);
+  }
+
+  .rsidebar-empty {
+    padding: var(--u-s-5) var(--u-s-3);
+    text-align: center;
+    color: var(--u-fg-3);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .rsidebar-empty kbd {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    border-radius: var(--u-r-xs);
+    color: var(--u-fg-1);
+    padding: 1px 5px;
+    font-size: 11px;
+  }
+
+  .rs-group {
+    margin-bottom: 0;
+  }
+
+  .rs-group-h {
+    align-items: baseline;
+    gap: var(--u-s-2);
+    padding: var(--u-s-2) var(--u-s-3);
+    color: var(--u-fg-2);
+    background: var(--u-bg-1);
+    border: 0;
+    border-top: 1px solid var(--u-border-subtle);
+    border-bottom: 1px solid var(--u-border-subtle);
+    text-align: left;
+    cursor: pointer;
+    width: 100%;
+    font-size: 10px;
+    font-weight: 700;
+    font-family: var(--u-font-mono);
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    display: flex;
+  }
+
+  .rs-group-h:hover {
+    color: var(--u-fg-0);
+    background: var(--u-bg-2);
+  }
+
+  .rs-group-h:focus-visible {
+    box-shadow: var(--shadow-focus);
+    outline: none;
+  }
+
+  .rs-group-h .rs-group-name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .rs-group-h .rs-group-count {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    font-size: 10px;
+    font-weight: 500;
+  }
+
+  .rs-comment {
+    background: var(--u-bg-0);
+    border: 0;
+    border-bottom: 1px solid var(--u-border-subtle);
+    padding: var(--u-s-2) var(--u-s-3);
+    cursor: pointer;
+    transition: background var(--dur-flip) var(--ease-out),
+              border-color var(--dur-flip) var(--ease-out);
+    gap: var(--u-s-1);
+    border-left: 2px solid #0000;
+    border-radius: 0;
+    flex-direction: column;
+    margin: 0;
+    display: flex;
+  }
+
+  .rs-comment:hover {
+    background: var(--u-bg-1);
+  }
+
+  .rs-comment:focus-within {
+    outline: none;
+  }
+
+  .rs-comment.active-pin {
+    background: var(--u-accent-bg);
+    border-left-color: var(--u-accent);
+    padding-left: calc(var(--u-s-3) - 2px);
+  }
+
+  .rs-comment.resolved {
+    opacity: 1;
+    color: var(--u-fg-2);
+  }
+
+  .rs-comment-head {
+    align-items: center;
+    gap: var(--u-s-2);
+    display: flex;
+  }
+
+  .rs-num {
+    font-family: var(--u-font-mono);
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+    border-radius: var(--u-r-sm);
+    letter-spacing: var(--tracking-sku);
+    flex: none;
+    padding: 1px 6px;
+    font-size: 10px;
+    font-weight: 700;
+  }
+
+  .rs-comment.resolved .rs-num {
+    background: var(--u-status-success);
+    color: var(--u-bg-0);
+  }
+
+  .rs-time {
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-3);
+    flex: none;
+    margin-left: auto;
+    font-size: 10px;
+  }
+
+  .rs-comment-text {
+    color: var(--u-fg-0);
+    -webkit-line-clamp: 3;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    font-size: 12px;
+    line-height: 1.45;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .rs-comment.resolved .rs-comment-text {
+    color: var(--u-fg-2);
+    text-decoration: line-through;
+    text-decoration-color: var(--u-fg-3);
+  }
+
+  .rs-comment-foot {
+    align-items: center;
+    gap: var(--u-s-1);
+    font-size: 10px;
+    display: flex;
+  }
+
+  .rs-comment-foot code {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-3);
+    color: var(--u-fg-2);
+    border-radius: var(--u-r-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    padding: 1px 5px;
+    font-size: 10px;
+    overflow: hidden;
+  }
+
+  .rs-comment-actions {
+    flex: none;
+    gap: 4px;
+    display: flex;
+  }
+
+  .rs-act {
+    border: 1px solid var(--u-border);
+    color: var(--u-fg-2);
+    border-radius: var(--u-r-xs);
+    font-family: var(--u-font-mono);
+    cursor: pointer;
+    background: none;
+    padding: 1px 6px;
+    font-size: 10px;
+    line-height: 1.4;
+  }
+
+  .rs-act:hover {
+    background: var(--u-bg-3);
+    color: var(--u-fg-0);
+  }
+
+  .rs-act.danger:hover {
+    background: var(--u-status-error);
+    color: var(--u-accent-fg);
+    border-color: var(--u-status-error);
+  }
+
+  .actions .rs-toggle {
+    position: relative;
+  }
+
+  .actions .rs-toggle.active {
+    background: var(--u-accent-bg);
+    color: var(--u-accent);
+    border-color: var(--u-accent-line);
+  }
+
+  .actions .rs-toggle .rs-badge {
+    background: var(--u-accent);
+    color: var(--u-accent-fg);
+    border-radius: var(--u-r-sm);
+    font-family: var(--u-font-mono);
+    letter-spacing: var(--tracking-sku);
+    padding: 0 5px;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 1.4;
+    position: absolute;
+    top: -4px;
+    right: -4px;
+  }
+
+  .add-comment {
+    color: var(--u-accent);
+    border: 1px solid var(--u-accent-line);
+    border-radius: var(--u-r-xs);
+    font-family: var(--u-font-mono);
+    cursor: pointer;
+    background: none;
+    padding: 1px 8px;
+    font-size: 10px;
+    line-height: 1.4;
+  }
+
+  .add-comment:hover {
+    background: var(--u-accent-bg);
+    color: var(--u-accent);
+  }
+
+  .help-modal-backdrop {
+    background: color-mix(in oklch, var(--u-bg-0) 70%, transparent);
+    z-index: 200;
+    padding: var(--u-s-4);
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+  }
+
+  .help-modal {
+    background: var(--u-bg-1);
+    border: 1px solid var(--u-fg-0);
+    box-shadow: 8px 8px 0 var(--u-fg-0);
+    width: min(720px, 100%);
+    max-height: 80vh;
+    font-family: var(--u-font-mono);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .help-modal-hd {
+    padding: var(--u-s-3) var(--u-s-4);
+    border-bottom: 1px solid var(--u-fg-0);
+    background: var(--u-bg-2);
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+
+  .help-modal-hd .title {
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: var(--type-xs);
+    color: var(--u-fg-0);
+  }
+
+  .help-modal-hd .sku {
+    letter-spacing: var(--tracking-sku);
+    color: var(--u-fg-2);
+    text-transform: uppercase;
+    font-size: 10px;
+  }
+
+  .help-modal-close {
+    border: 1px solid var(--u-border);
+    color: var(--u-fg-1);
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+    font-size: 14px;
+    line-height: 1;
+    font-family: var(--u-font-mono);
+    background: none;
+    place-items: center;
+    display: grid;
+  }
+
+  .help-modal-close:hover {
+    background: var(--u-bg-3);
+    color: var(--u-fg-0);
+    border-color: var(--u-border-strong);
+  }
+
+  .help-modal-close:focus-visible {
+    box-shadow: var(--shadow-focus);
+    outline: none;
+  }
+
+  .help-modal-body {
+    padding: var(--u-s-3) var(--u-s-4);
+    font-size: var(--type-xs);
+    color: var(--u-fg-1);
+    overflow-y: auto;
+  }
+
+  .help-modal-body::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .help-modal-body::-webkit-scrollbar-thumb {
+    background: var(--u-border);
+  }
+
+  .help-modal-body details {
+    margin: 0 0 var(--u-s-2);
+    border-bottom: 1px solid var(--u-border-subtle);
+    padding-bottom: var(--u-s-2);
+  }
+
+  .help-modal-body details:last-child {
+    border-bottom: 0;
+  }
+
+  .help-modal-body details > summary {
+    cursor: pointer;
+    padding: var(--u-s-2) 0;
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    color: var(--u-fg-0);
+    align-items: center;
+    gap: var(--u-s-2);
+    font-size: 11px;
+    font-weight: 700;
+    list-style: none;
+    display: flex;
+  }
+
+  .help-modal-body details > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .help-modal-body details > summary:before {
+    content: "▸";
+    color: var(--u-fg-2);
+    width: 12px;
+    font-size: 10px;
+  }
+
+  .help-modal-body details[open] > summary:before {
+    content: "▾";
+  }
+
+  .help-modal-body ul, .help-modal-body ol {
+    padding: 0 0 var(--u-s-2) var(--u-s-4);
+    margin: 0;
+    font-size: 11px;
+    line-height: 1.7;
+    list-style: none;
+  }
+
+  .help-modal-body li {
+    align-items: baseline;
+    gap: var(--u-s-2);
+    padding: 2px 0;
+    display: flex;
+  }
+
+  .help-modal-body li > span {
+    color: var(--u-fg-3);
+    text-align: right;
+    margin-left: auto;
+    font-size: 10px;
+  }
+
+  .help-modal-body kbd {
+    font-family: var(--u-font-mono);
+    background: var(--u-bg-2);
+    border: 1px solid var(--u-border);
+    color: var(--u-fg-0);
+    padding: 1px 5px;
+    font-size: 10px;
+  }
+
+  .help-modal-body code {
+    font-family: var(--u-font-mono);
+    color: var(--u-accent);
+    background: var(--u-accent-bg);
+    padding: 1px 4px;
+    font-size: 10px;
+  }
+
+  .help-modal-body code i {
+    color: var(--u-fg-2);
+    font-style: normal;
+  }
+
+  .help-modal-body ul.cmds li, .help-modal-body ul.files li {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+
+  .help-modal-body ul.cmds li > span, .help-modal-body ul.files li > span {
+    text-align: left;
+    margin-left: 0;
+  }
+
+  .tp-section-hd.clickable {
+    cursor: pointer;
+    user-select: none;
+    text-align: left;
+    width: 100%;
+    font-family: var(--u-font-mono);
+    transition: background var(--dur-flip) var(--ease-out);
+    background: none;
+    border: 0;
+  }
+
+  .tp-section-hd.clickable:hover {
+    background: var(--u-bg-2);
+  }
+
+  .tp-section-hd.clickable:focus-visible {
+    box-shadow: var(--shadow-focus);
+    outline: none;
+  }
+
+  .tp-section-hd.clickable.active {
+    background: var(--u-accent-bg);
+    color: var(--u-fg-0);
+  }
+
+  .tp-section-hd.clickable.active .pill {
+    border-color: var(--u-accent);
+    color: var(--u-accent);
+  }
+
+  .tp-section-hd.ds-split {
+    cursor: default;
+    padding: 0;
+  }
+
+  .tp-section-hd.ds-split > button {
+    padding: 6px var(--u-s-3) 2px;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    align-items: baseline;
+    gap: 8px;
+    display: inline-flex;
+  }
+
+  .tp-section-hd.ds-split > button:focus-visible {
+    box-shadow: var(--shadow-focus);
+    z-index: 1;
+    outline: none;
+    position: relative;
+  }
+
+  .tp-section-hd.ds-split .ds-open {
+    flex: 1;
+    justify-content: flex-start;
+    min-width: 0;
+  }
+
+  .tp-section-hd.ds-split .ds-open:hover {
+    background: var(--u-bg-2);
+  }
+
+  .tp-section-hd.ds-split .chev {
+    color: var(--u-fg-2);
+    opacity: .75;
+    flex: none;
+    padding: 6px 10px 2px;
+  }
+
+  .tp-section-hd.ds-split .chev:hover {
+    opacity: 1;
+    background: var(--u-bg-2);
+  }
+
+  .tp-section-hd.ds-split.active .ds-open {
+    background: var(--u-accent-bg);
+    color: var(--u-fg-0);
+  }
+
+  .tp-section-hd.ds-split.active .pill {
+    border-color: var(--u-accent);
+    color: var(--u-accent);
+  }
+
+  .tp-row.sidecar {
+    opacity: .55;
+  }
+
+  .tp-row.sidecar .glyph {
+    visibility: hidden;
+  }
+
+  .tp-row.sidecar:hover {
+    opacity: .85;
+  }
+
+  .tp-row.canvas-row .canvas-chev {
+    cursor: pointer;
+  }
+
+  .tp-row.canvas-row .canvas-chev:hover {
+    color: var(--u-fg-0);
+  }
+
+  .tp-row.ds-folder {
+    cursor: default;
+    color: var(--u-fg-0);
+    align-items: center;
+    gap: 0;
+    padding: 2px 0;
+    font-weight: 600;
+    display: flex;
+  }
+
+  .tp-row.ds-folder > button {
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .tp-row.ds-folder > button:focus-visible {
+    box-shadow: var(--shadow-focus);
+    z-index: 1;
+    outline: none;
+    position: relative;
+  }
+
+  .tp-row.ds-folder .ds-folder-chev {
+    flex: none;
+    padding: 0 4px;
+  }
+
+  .tp-row.ds-folder .ds-folder-chev .glyph {
+    text-align: center;
+    width: 12px;
+    color: var(--u-fg-1);
+    font-size: 10px;
+    display: inline-block;
+  }
+
+  .tp-row.ds-folder .ds-folder-chev:hover .glyph {
+    color: var(--u-fg-0);
+  }
+
+  .tp-row.ds-folder .ds-folder-open {
+    min-width: 0;
+    padding: 0 var(--u-s-3) 0 0;
+    text-align: left;
+    flex: 1;
+  }
+
+  .tp-row.ds-folder .ds-folder-open .name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .tp-row.ds-folder .ds-folder-open:hover {
+    color: var(--u-accent);
+  }
+
+  .tp-row.ds-folder.sel {
+    background: var(--u-accent-bg);
+  }
+
+  .tp-row.ds-folder.sel .ds-folder-open .name {
+    color: var(--u-fg-0);
+  }
+
+  .tp-section-hd.section-toggle {
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    font: inherit;
+    letter-spacing: var(--tracking-sku);
+    text-transform: uppercase;
+    font-family: var(--u-font-mono);
+    color: var(--u-fg-1);
+    transition: background var(--dur-flip) var(--ease-out);
+    background: none;
+    border: 0;
+    align-items: center;
+    font-size: 9px;
+    font-weight: 700;
+  }
+
+  .tp-section-hd.section-toggle:hover {
+    background: var(--u-bg-2);
+    color: var(--u-fg-0);
+  }
+
+  .tp-section-hd.section-toggle:focus-visible {
+    box-shadow: var(--shadow-focus);
+    outline: none;
+  }
+
+  .tp-section-hd.section-toggle .chev {
+    text-align: center;
+    width: 12px;
+    color: var(--u-fg-2);
+    flex: none;
+    font-size: 10px;
+    display: inline-block;
+  }
+
+  .tp-section-hd.section-toggle .section-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+}
+
+@layer utilities;