@1agh/maude 0.28.1 → 0.29.0

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

@@ -1,2710 +0,0 @@
-@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 {
-    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-clear-sel:hover {
-    color: var(--u-fg-0);
-    background: var(--u-bg-2);
-    border-color: var(--u-border-strong);
-  }
-
-  .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-sync {
-    cursor: help;
-  }
-
-  .sb-sync-dot {
-    background: var(--u-status-warn);
-    border-radius: 50%;
-    flex: none;
-    width: 7px;
-    height: 7px;
-  }
-
-  .sb-sync .sb-key {
-    color: var(--u-fg-2);
-  }
-
-  .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);
-    flex-wrap: wrap;
-    display: flex;
-  }
-
-  .sv-header .sv-title {
-    flex: auto;
-  }
-
-  .sv-ds-picker {
-    align-items: baseline;
-    gap: var(--u-s-2);
-    font-family: var(--u-font-mono);
-    letter-spacing: var(--tracking-sku);
-    text-transform: uppercase;
-    color: var(--u-fg-2);
-    font-size: 10px;
-    display: inline-flex;
-  }
-
-  .sv-ds-picker select {
-    font-family: var(--u-font-mono);
-    color: var(--u-fg-0);
-    background: var(--u-bg-1);
-    border: 1px solid var(--u-border);
-    border-radius: var(--u-r-sm);
-    text-transform: none;
-    letter-spacing: 0;
-    padding: 2px 6px;
-    font-size: 11px;
-  }
-
-  .sv-ds-description {
-    font-family: var(--u-font-body);
-    font-size: var(--type-sm);
-    color: var(--u-fg-1);
-    margin: 0 0 var(--u-s-5);
-    max-width: 72ch;
-    line-height: 1.5;
-  }
-
-  .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;
-  }
-
-  .cb-label {
-    color: var(--u-fg-3);
-    flex: none;
-    align-self: center;
-    font-size: 11px;
-  }
-
-  .cb-row.strip {
-    color: var(--u-fg-3);
-    font-size: 11px;
-  }
-
-  .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;