@1agh/maude 0.29.0 → 0.30.0

package/apps/studio/dist/styles.css

@@ -1817,11 +1817,6 @@
     cursor: default;
   }
 
-  .st-menu:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .st-mb-right {
     align-items: center;
     gap: var(--space-3);
@@ -1919,7 +1914,7 @@
     min-width: 230px;
     box-shadow: var(--shadow-lg);
     padding: var(--space-2);
-    z-index: 60;
+    z-index: 9150;
     animation: st-pop var(--dur-panel) var(--ease-out);
     transform-origin: 0 0;
     position: absolute;
@@ -2025,24 +2020,22 @@
     color: var(--fg-0);
   }
 
-  .st-iconbtn:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .st-presence {
     align-items: center;
     display: flex;
   }
 
   .st-avatar {
+    --av-hue: var(--accent);
     border-radius: var(--radius-pill);
     width: 22px;
     height: 22px;
     font-family: var(--font-mono);
     letter-spacing: .02em;
     text-transform: uppercase;
-    color: #fff;
+    background: color-mix(in oklab, var(--av-hue) 22%, var(--bg-3));
+    border: 1px solid var(--av-hue);
+    color: var(--fg-0);
     place-items: center;
     font-size: 10px;
     font-weight: 600;
@@ -2051,7 +2044,7 @@
   }
 
   .st-presence .st-avatar {
-    border: 1.5px solid var(--bg-1);
+    box-shadow: 0 0 0 1.5px var(--bg-1);
     margin-left: -6px;
   }
 
@@ -2158,11 +2151,6 @@
     border-color: var(--border-strong);
   }
 
-  .st-sb-theme:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .st-dot {
     border-radius: var(--radius-pill);
     flex: none;
@@ -2335,11 +2323,6 @@
     flex: 1;
   }
 
-  .st-newboard input:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 1px;
-  }
-
   .st-newboard-go {
     appearance: none;
     border: 1px solid var(--accent);
@@ -2944,7 +2927,7 @@
     line-height: 1.3;
     display: flex;
     position: fixed;
-    top: 12px;
+    top: 48px;
     left: 50%;
     transform: translateX(-50%);
   }
@@ -3039,7 +3022,7 @@
 
   .st-palette {
     background: var(--bg-2);
-    border: 1px solid var(--border-strong);
+    border: 1px solid var(--border-default);
     border-radius: var(--radius-lg);
     width: 560px;
     max-width: 92vw;
@@ -3225,219 +3208,2504 @@
     position: absolute;
   }
 
-  .st-toast-close:hover {
-    background: var(--bg-3);
-    color: var(--fg-0);
+  .st-toast-close:hover {
+    background: var(--bg-3);
+    color: var(--fg-0);
+  }
+
+  .st-dialog {
+    background: var(--bg-1);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+    width: 540px;
+    max-width: 92vw;
+    box-shadow: var(--shadow-lg);
+    animation: st-pop var(--dur-route) var(--ease-out);
+    overflow: hidden;
+  }
+
+  .st-dialog-hd {
+    padding: var(--space-4) var(--space-5);
+    border-bottom: 1px solid var(--border-subtle);
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+
+  .st-dialog-title {
+    font-family: var(--font-display);
+    font-size: var(--type-lg);
+    color: var(--fg-0);
+    font-weight: 600;
+  }
+
+  .st-dialog-bd {
+    padding: var(--space-5);
+    gap: var(--space-4);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .st-fmt-grid {
+    gap: var(--space-3);
+    grid-template-columns: repeat(4, 1fr);
+    display: grid;
+  }
+
+  .st-fmt {
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    background: var(--bg-2);
+    cursor: pointer;
+    color: var(--fg-1);
+    appearance: none;
+    text-align: left;
+    flex-direction: column;
+    align-items: flex-start;
+    display: flex;
+  }
+
+  .st-fmt:hover {
+    border-color: var(--border-strong);
+  }
+
+  .st-fmt.is-on {
+    border-color: var(--accent);
+    background: var(--accent-tint);
+    color: var(--fg-0);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+  }
+
+  .st-fmt-name {
+    font-family: var(--font-mono);
+    font-size: var(--type-sm);
+    font-weight: 600;
+  }
+
+  .st-fmt-sub {
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+  }
+
+  .st-dialog-row {
+    align-items: center;
+    gap: var(--space-3);
+    display: flex;
+  }
+
+  .st-dialog-lbl {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+  }
+
+  .st-select {
+    appearance: none;
+    background: var(--bg-2);
+    color: var(--fg-0);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+    font-family: var(--font-body);
+    font-size: var(--type-sm);
+    cursor: pointer;
+    flex: 1;
+  }
+
+  .st-dialog-ft {
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    border-top: 1px solid var(--border-subtle);
+    justify-content: flex-end;
+    display: flex;
+  }
+
+  .st-export-recent {
+    flex-direction: column;
+    gap: 2px;
+    max-height: 132px;
+    display: flex;
+    overflow-y: auto;
+  }
+
+  .st-export-recent-row {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+    display: flex;
+  }
+
+  .st-export-recent-row:hover {
+    background: var(--bg-2);
+  }
+
+  .st-export-recent-row .st-mono {
+    color: var(--fg-1);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 50%;
+    overflow: hidden;
+  }
+
+  .st-insp-fields {
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    align-items: center;
+    display: flex;
+  }
+
+  .st-field {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--type-xs);
+    color: var(--fg-0);
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    padding: var(--space-1) var(--space-2);
+    text-align: right;
+    width: 58px;
+  }
+
+  .st-field-lead {
+    align-items: center;
+    gap: var(--space-1);
+    display: inline-flex;
+  }
+
+  .st-field-lead .k {
+    font-family: var(--font-mono);
+    color: var(--fg-3);
+    font-size: 9px;
+  }
+
+  .st-fmini {
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    background: var(--bg-3);
+    min-width: 0;
+    transition: border-color var(--dur-soft) var(--ease-out), box-shadow var(--dur-soft) var(--ease-out);
+    flex: 1 1 0;
+    align-items: stretch;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .st-fmini .st-mtag {
+    width: 20px;
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+    background: var(--bg-2);
+    border-right: 1px solid var(--border-default);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .st-fmini input, .st-fmini .st-fminival {
+    box-sizing: border-box;
+    appearance: none;
+    width: 100%;
+    min-width: 0;
+    color: var(--fg-0);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--type-xs);
+    text-align: right;
+    padding: 3px var(--space-2);
+    background: none;
+    border: 0;
+    border-radius: 0;
+    flex: auto;
+  }
+
+  .st-fmini input:focus {
+    outline: none;
+  }
+
+  .st-fmini:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+  }
+
+  .st-insp-unit {
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    letter-spacing: var(--tracking-wide);
+    align-self: center;
+    font-size: 10px;
+  }
+
+  .st-swatch-row {
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    display: flex;
+  }
+
+  .st-insp-swatch {
+    border-radius: var(--radius-xs);
+    border: 1px solid var(--border-default);
+    flex: none;
+    width: 18px;
+    height: 18px;
+    display: block;
+  }
+
+  .st-layer {
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    border-radius: var(--radius-xs);
+    font-size: var(--type-sm);
+    color: var(--fg-1);
+    font-family: var(--font-mono);
+    display: flex;
+  }
+
+  .st-layer:hover {
+    background: var(--bg-2);
+  }
+
+  .st-layer.is-sel {
+    background: var(--accent-tint);
+    color: var(--fg-0);
+    box-shadow: inset 2px 0 0 var(--accent);
+  }
+
+  .st-layer--row {
+    cursor: pointer;
+    padding: 3px var(--space-2);
+    white-space: nowrap;
+    gap: 4px;
+  }
+
+  .st-layer--row:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+
+  .st-layer-caret {
+    width: 14px;
+    height: 14px;
+    color: var(--fg-3);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    font-size: 9px;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .st-layer-label {
+    text-overflow: ellipsis;
+    flex: auto;
+    overflow: hidden;
+  }
+
+  .st-layer-type {
+    color: var(--fg-3);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+    flex: none;
+    font-size: 9px;
+  }
+
+  .st-layer-ticon {
+    color: var(--fg-3);
+    flex: none;
+  }
+
+  .st-layer.is-sel .st-layer-ticon {
+    color: var(--accent);
+  }
+
+  .st-layer-eye {
+    width: 18px;
+    height: 18px;
+    color: var(--fg-3);
+    cursor: pointer;
+    border-radius: var(--radius-xs);
+    opacity: 0;
+    background: none;
+    border: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .st-layer--row:hover .st-layer-eye, .st-layer--row:focus-within .st-layer-eye {
+    opacity: 1;
+  }
+
+  .st-layer-eye:hover {
+    color: var(--fg-0);
+    background: var(--bg-3);
+  }
+
+  .st-layer-eye:focus-visible {
+    color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-layer.is-hidden {
+    opacity: .45;
+  }
+
+  .st-layer.is-hidden .st-layer-eye {
+    opacity: 1;
+    color: var(--fg-2);
+  }
+
+  .st-css {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    background: var(--bg-0);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    padding: var(--space-3);
+    color: var(--fg-1);
+    line-height: 1.7;
+  }
+
+  .st-css .comment {
+    color: var(--fg-3);
+  }
+
+  .st-css-panel {
+    gap: var(--space-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .st-css-title {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-1);
+    word-break: break-word;
+  }
+
+  .st-css-group {
+    font-family: var(--font-mono);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--fg-3);
+    margin-top: var(--space-3);
+    font-size: 10px;
+  }
+
+  .st-css-row {
+    align-items: center;
+    gap: var(--space-2);
+    grid-template-columns: 72px 1fr;
+    display: grid;
+  }
+
+  .st-css-label {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+  }
+
+  .st-css-control {
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    display: flex;
+  }
+
+  .st-css-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--type-xs);
+    color: var(--fg-0);
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    padding: var(--space-1) var(--space-2);
+    text-align: left;
+    flex: auto;
+  }
+
+  .st-css-input::placeholder {
+    color: var(--fg-3);
+  }
+
+  .st-css-input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-css-swatch {
+    border-radius: var(--radius-xs);
+    border: 1px solid var(--border-default);
+    cursor: pointer;
+    background-image: linear-gradient(45deg, var(--bg-2) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-2) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-2) 75%);
+    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+    background-size: 8px 8px;
+    flex: none;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .st-css-swatch > span {
+    position: absolute;
+    inset: 0;
+  }
+
+  .st-css-swatch input[type="color"] {
+    opacity: 0;
+    cursor: pointer;
+    border: 0;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    padding: 0;
+    position: absolute;
+    inset: -4px;
+  }
+
+  .st-css-status {
+    font-family: var(--font-mono);
+    min-height: 12px;
+    font-size: 10px;
+  }
+
+  .st-css-status.is-error {
+    color: oklch(62% .2 25);
+  }
+
+  .st-css-status.is-saved {
+    color: var(--fg-3);
+  }
+
+  .st-css-help {
+    font-size: var(--type-xs);
+    color: var(--fg-3);
+    margin-top: var(--space-2);
+    line-height: 1.5;
+  }
+
+  .st-css-help code {
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    background: var(--bg-3);
+    border-radius: 3px;
+    padding: 0 3px;
+  }
+
+  .st-css-disabled {
+    color: var(--fg-2);
+    font-size: var(--type-sm);
+    line-height: 1.6;
+  }
+
+  .st-css-disabled code {
+    font-family: var(--font-mono);
+    color: var(--accent);
+    background: var(--bg-2);
+    border-radius: var(--radius-xs);
+    padding: 1px 5px;
+  }
+
+  .st-cp {
+    gap: var(--space-4);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .st-cp-id {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--space-2);
+    padding-bottom: var(--space-3);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+  }
+
+  .st-cp-idtag {
+    font-family: var(--font-mono);
+    font-size: var(--type-sm);
+    color: var(--fg-0);
+  }
+
+  .st-cp-idcls {
+    color: var(--accent);
+  }
+
+  .st-cp-idmeta {
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+    font-size: 10px;
+  }
+
+  .st-cp-sec {
+    gap: var(--space-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .st-cp-sechd {
+    appearance: none;
+    cursor: pointer;
+    align-items: center;
+    gap: var(--space-2);
+    border: 0;
+    border-bottom: 1px solid var(--border-subtle);
+    text-align: left;
+    width: 100%;
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+    color: var(--fg-2);
+    padding: 0 0 var(--space-1);
+    background: none;
+    display: flex;
+  }
+
+  .st-cp-sechd svg {
+    color: var(--fg-2);
+  }
+
+  .st-cp-sechd:hover, .st-cp-sechd:hover svg {
+    color: var(--fg-0);
+  }
+
+  .st-cp-sechd-row {
+    align-items: stretch;
+    gap: var(--space-1);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+  }
+
+  .st-cp-sechd-row .st-cp-sechd {
+    border-bottom: 0;
+    flex: auto;
+  }
+
+  .st-cp-reset, .st-cp-secreset {
+    appearance: none;
+    cursor: pointer;
+    color: var(--fg-3);
+    border-radius: var(--radius-xs);
+    background: none;
+    border: 0;
+    flex: none;
+    padding: 2px;
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .st-cp-reset {
+    width: 16px;
+    height: 16px;
+  }
+
+  .st-cp-reset:hover, .st-cp-secreset:hover {
+    color: var(--accent);
+    background: var(--accent-tint);
+  }
+
+  .st-cp-reset:focus-visible, .st-cp-secreset:focus-visible {
+    color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-secreset {
+    align-self: center;
+  }
+
+  .st-cp-fin--ro {
+    background: var(--bg-2);
+    color: var(--fg-2);
+    cursor: default;
+    flex: 0 0 38%;
+  }
+
+  .st-cp-fin--ro:focus {
+    border-color: var(--border-strong);
+    box-shadow: none;
+    outline: none;
+  }
+
+  .st-cp-row {
+    align-items: center;
+    gap: var(--space-2);
+    grid-template-columns: 10px 92px 1fr;
+    min-height: 28px;
+    display: grid;
+  }
+
+  .st-cp-row.is-unset {
+    opacity: .5;
+    transition: opacity var(--dur-soft) var(--ease-out);
+  }
+
+  .st-cp-row.is-unset:hover, .st-cp-row.is-unset:focus-within {
+    opacity: 1;
+  }
+
+  .st-cp-label {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-1);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    line-height: 1.15;
+    overflow: hidden;
+  }
+
+  .st-cp-ctl {
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    display: flex;
+  }
+
+  .st-cp-prov {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    display: inline-block;
+  }
+
+  button.st-cp-prov {
+    appearance: none;
+    cursor: default;
+    border: 0;
+  }
+
+  .st-cp-prov.is-resettable {
+    cursor: pointer;
+  }
+
+  .st-cp-prov.is-resettable:hover {
+    box-shadow: 0 0 0 3px var(--bg-4);
+  }
+
+  .st-cp-prov:focus-visible {
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-prov.is-saved {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-success) 45%, transparent);
+  }
+
+  .st-cp-prov.is-saving {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--fg-2) 35%, transparent);
+  }
+
+  .st-cp-prov.is-err {
+    background: var(--status-error);
+    border-color: var(--status-error);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-error) 40%, transparent);
+  }
+
+  .st-cp-prov--bound {
+    background: var(--fg-0);
+    border-radius: 50%;
+  }
+
+  .st-cp-prov--raw {
+    background: var(--fg-2);
+    border-radius: 1px;
+  }
+
+  .st-cp-prov--inherit {
+    box-shadow: inset 0 0 0 1.5px var(--fg-3);
+    background: none;
+    border-radius: 50%;
+  }
+
+  .st-cp-swatch {
+    border-radius: var(--radius-xs);
+    border: 1px solid var(--border-default);
+    flex: none;
+    width: 22px;
+    height: 22px;
+  }
+
+  .st-cp-swatch--mini {
+    width: 18px;
+    height: 18px;
+  }
+
+  .st-cp-tokswatch {
+    border: 1px solid var(--border-default);
+    border-radius: 3px;
+    flex: none;
+    width: 14px;
+    height: 14px;
+  }
+
+  .st-cp-token {
+    align-items: center;
+    gap: var(--space-2);
+    appearance: none;
+    cursor: pointer;
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-0);
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    padding: 4px var(--space-2);
+    flex: auto;
+    display: inline-flex;
+  }
+
+  .st-cp-token:hover {
+    border-color: var(--accent);
+  }
+
+  .st-cp-tokdot {
+    background: var(--accent);
+    border-radius: 50%;
+    flex: none;
+    width: 8px;
+    height: 8px;
+  }
+
+  .st-cp-tokname {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .st-cp-token svg {
+    color: var(--fg-2);
+    flex: none;
+  }
+
+  .st-cp-num {
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    flex: auto;
+    align-items: stretch;
+    min-width: 0;
+    min-height: 26px;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .st-cp-numlead {
+    width: 20px;
+    color: var(--fg-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    border-right: 1px solid var(--border-subtle);
+    background: var(--bg-2);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .st-cp-num:focus-within .st-cp-numlead {
+    color: var(--fg-1);
+  }
+
+  .st-cp-num:hover {
+    border-color: var(--border-strong);
+  }
+
+  .st-cp-num:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+  }
+
+  .st-cp-numin {
+    appearance: none;
+    width: 100%;
+    min-width: 0;
+    color: var(--fg-0);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--type-xs);
+    padding: 3px var(--space-2);
+    background: none;
+    border: 0;
+    flex: auto;
+  }
+
+  .st-cp-numin::placeholder {
+    color: var(--fg-2);
+  }
+
+  .st-cp-numin:focus {
+    outline: none;
+  }
+
+  .st-cp-scrub {
+    cursor: ew-resize;
+  }
+
+  .st-cp-scrub:focus {
+    cursor: text;
+  }
+
+  body.st-scrubbing, body.st-scrubbing * {
+    cursor: ew-resize !important;
+    user-select: none !important;
+  }
+
+  .st-cp-step {
+    border-left: 1px solid var(--border-subtle);
+    flex-direction: column;
+    flex: none;
+    display: flex;
+  }
+
+  .st-cp-stepb {
+    appearance: none;
+    cursor: pointer;
+    background: var(--bg-2);
+    color: var(--fg-2);
+    border: 0;
+    flex: 1;
+    padding: 0 5px;
+    font-size: 7px;
+    line-height: 1;
+  }
+
+  .st-cp-stepb:first-child {
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .st-cp-stepb:hover {
+    color: var(--accent);
+  }
+
+  .st-cp-unit {
+    appearance: none;
+    cursor: pointer;
+    border: 0;
+    border-left: 1px solid var(--border-subtle);
+    background: var(--bg-2);
+    color: var(--fg-2);
+    font-family: var(--font-mono);
+    padding: 0 var(--space-2);
+    flex: none;
+    align-items: center;
+    gap: 2px;
+    font-size: 10px;
+    display: inline-flex;
+  }
+
+  .st-cp-unit svg {
+    color: var(--fg-2);
+  }
+
+  .st-cp-bind {
+    appearance: none;
+    cursor: pointer;
+    border: 0;
+    border-left: 1px solid var(--border-subtle);
+    background: var(--bg-2);
+    flex: none;
+    width: 24px;
+    position: relative;
+  }
+
+  .st-cp-bind:before {
+    content: "";
+    border: 1.5px solid var(--fg-2);
+    border-radius: 50%;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .st-cp-bind:hover:before {
+    border-color: var(--accent);
+  }
+
+  .st-cp-numin--mini {
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    flex: none;
+    width: 38px;
+  }
+
+  .st-cp-select {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-2);
+    appearance: none;
+    cursor: pointer;
+    min-width: 0;
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    color: var(--fg-0);
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    padding: 4px var(--space-2);
+    flex: auto;
+    min-height: 26px;
+    display: inline-flex;
+  }
+
+  .st-cp-select span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .st-cp-select svg {
+    color: var(--fg-2);
+    flex: none;
+  }
+
+  .st-cp-select--mini {
+    flex: 0 auto;
+  }
+
+  .st-cp-seg {
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .st-cp-segbtn {
+    appearance: none;
+    cursor: pointer;
+    border: 0;
+    border-right: 1px solid var(--border-subtle);
+    background: none;
+    justify-content: center;
+    align-items: center;
+    min-width: 26px;
+    min-height: 26px;
+    padding: 0 7px;
+    display: inline-flex;
+  }
+
+  .st-cp-segbtn:last-child {
+    border-right: 0;
+  }
+
+  .st-cp-segbtn.is-active {
+    background: var(--accent-tint);
+  }
+
+  .st-cp-segbtn:hover:not(.is-active) {
+    background: var(--bg-4);
+  }
+
+  .st-cp-bars {
+    width: 13px;
+    color: var(--fg-1);
+    flex-direction: column;
+    gap: 2px;
+    display: flex;
+  }
+
+  .st-cp-segbtn.is-active .st-cp-bars {
+    color: var(--accent);
+  }
+
+  .st-cp-bars i {
+    background: currentColor;
+    border-radius: 1px;
+    height: 2px;
+  }
+
+  .st-cp-bars--left i:first-child {
+    width: 100%;
+  }
+
+  .st-cp-bars--left i:nth-child(2) {
+    width: 60%;
+  }
+
+  .st-cp-bars--left i:nth-child(3) {
+    width: 80%;
+  }
+
+  .st-cp-bars--center i {
+    margin: 0 auto;
+  }
+
+  .st-cp-bars--center i:first-child {
+    width: 100%;
+  }
+
+  .st-cp-bars--center i:nth-child(2) {
+    width: 55%;
+  }
+
+  .st-cp-bars--center i:nth-child(3) {
+    width: 75%;
+  }
+
+  .st-cp-bars--right i {
+    margin-left: auto;
+  }
+
+  .st-cp-bars--right i:first-child {
+    width: 100%;
+  }
+
+  .st-cp-bars--right i:nth-child(2) {
+    width: 60%;
+  }
+
+  .st-cp-bars--right i:nth-child(3) {
+    width: 80%;
+  }
+
+  .st-cp-bars--just i {
+    width: 100%;
+  }
+
+  .st-cp-box {
+    margin-top: var(--space-1);
+    border: 1px dashed var(--border-default);
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+    place-items: center;
+    padding: 26px;
+    display: grid;
+    position: relative;
+  }
+
+  .st-cp-boxpad {
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    background: var(--bg-3);
+    place-items: center;
+    width: 100%;
+    padding: 26px;
+    display: grid;
+    position: relative;
+  }
+
+  .st-cp-boxcore {
+    border-radius: var(--radius-xs);
+    background: var(--bg-4);
+    border: 1px solid var(--accent);
+    min-width: 72px;
+    color: var(--fg-0);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    padding: 7px 12px;
+    font-size: 11px;
+  }
+
+  .st-cp-boxtag {
+    font-family: var(--font-mono);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--fg-2);
+    pointer-events: none;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    display: inline-flex;
+    position: absolute;
+    top: 4px;
+    left: 6px;
+  }
+
+  .st-cp-boxtag .st-cp-prov {
+    width: 6px;
+    height: 6px;
+  }
+
+  .st-cp-boxv {
+    border-radius: var(--radius-xs);
+    width: 36px;
+    height: 24px;
+    color: var(--fg-0);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    background: none;
+    border: 1px solid #0000;
+    padding: 0;
+    font-size: 11px;
+    position: absolute;
+  }
+
+  .st-cp-boxv.is-zero {
+    color: var(--fg-2);
+  }
+
+  .st-cp-boxv:hover, .st-cp-boxv:focus {
+    border-color: var(--border-strong);
+    background: var(--bg-1);
+    color: var(--fg-0);
+    outline: none;
+  }
+
+  .st-cp-boxv--mt, .st-cp-boxv--pt {
+    top: 1px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .st-cp-boxv--mb, .st-cp-boxv--pb {
+    bottom: 1px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .st-cp-boxv--ml, .st-cp-boxv--pl {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+  }
+
+  .st-cp-boxv--mr, .st-cp-boxv--pr {
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
+  .st-cp-boxhint {
+    gap: var(--space-1);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .st-cp-boxhint + .st-cp-row {
+    margin-top: var(--space-1);
+  }
+
+  .st-cp-chip {
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    background: var(--bg-2);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    padding: 1px 6px;
+    font-size: 10px;
+  }
+
+  .st-cp-slider {
+    align-items: center;
+    gap: var(--space-2);
+    flex: auto;
+    min-width: 0;
+    display: flex;
+  }
+
+  .st-cp-track {
+    background: var(--bg-4);
+    border: 1px solid var(--border-default);
+    cursor: pointer;
+    border-radius: 3px;
+    flex: auto;
+    height: 6px;
+    position: relative;
+  }
+
+  .st-cp-track:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+
+  .st-cp-fill {
+    background: var(--accent);
+    border-radius: 3px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .st-cp-thumb {
+    background: var(--fg-0);
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .st-cp-slval {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--type-xs);
+    color: var(--fg-1);
+    text-align: right;
+    flex: none;
+    width: 34px;
+  }
+
+  .st-cp-border {
+    align-items: center;
+    gap: var(--space-2);
+    flex: auto;
+    min-width: 0;
+    display: flex;
+  }
+
+  .st-cp-border .st-cp-swatch--mini {
+    margin-left: 0;
+  }
+
+  .st-cp-border .st-cp-num {
+    flex: 0 0 58px;
+  }
+
+  .st-cp-border .st-cp-nsel {
+    flex: auto;
+    max-width: none;
+  }
+
+  .st-cp-save {
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--type-xs);
+    font-family: var(--font-mono);
+    padding: 4px var(--space-2);
+    border-radius: var(--radius-xs);
+    background: color-mix(in oklab, var(--status-error) 14%, var(--bg-2));
+    border: 1px solid var(--status-error);
+    color: var(--status-error);
+    align-self: flex-start;
+    display: inline-flex;
+  }
+
+  .st-cp-save.is-saved, .st-cp-save.is-saved svg {
+    color: var(--status-success);
+  }
+
+  .st-cp-adv {
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    background: var(--bg-0);
+    overflow: hidden;
+  }
+
+  .st-cp-advhd {
+    appearance: none;
+    cursor: pointer;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    color: var(--fg-2);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+    padding: var(--space-2) var(--space-3);
+    background: none;
+    border: 0;
+    display: flex;
+  }
+
+  .st-cp-advhd svg {
+    color: var(--fg-2);
+  }
+
+  .st-cp-advbody {
+    gap: var(--space-2);
+    padding: 0 var(--space-3) var(--space-3);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .st-cp-advgrp {
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+    color: var(--fg-2);
+    margin-top: var(--space-1);
+    font-size: 10px;
+  }
+
+  .st-cp-kv {
+    gap: var(--space-2);
+    grid-template-columns: 1fr 1fr auto;
+    align-items: center;
+    display: grid;
+  }
+
+  .st-cp-kvx {
+    appearance: none;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    color: var(--fg-3);
+    border-radius: var(--radius-xs);
+    background: none;
+    border: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .st-cp-kvx:hover {
+    color: var(--status-error);
+    background: var(--bg-3);
+  }
+
+  .st-cp-kvx:focus-visible {
+    color: var(--status-error);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-kv .st-cp-numin {
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+  }
+
+  .st-cp-kv.has-warn .st-cp-numin {
+    border-color: var(--status-warn);
+  }
+
+  .st-cp-warn {
+    color: var(--status-warn);
+    font-size: 10px;
+    font-family: var(--font-mono);
+  }
+
+  .st-cp-add {
+    appearance: none;
+    cursor: pointer;
+    border: 1px dashed var(--border-default);
+    color: var(--fg-1);
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    border-radius: var(--radius-xs);
+    padding: 4px var(--space-2);
+    background: none;
+    align-self: flex-start;
+  }
+
+  .st-cp-add:hover {
+    border-color: var(--accent);
+    color: var(--fg-0);
+  }
+
+  .st-cp-note {
+    color: var(--fg-2);
+    font-size: 10px;
+    font-style: italic;
+  }
+
+  .st-cp-legend {
+    gap: var(--space-3);
+    padding-top: var(--space-1);
+    border-top: 1px solid var(--border-subtle);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .st-cp-legend span {
+    align-items: center;
+    gap: var(--space-1);
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    font-size: 10px;
+    display: inline-flex;
+  }
+
+  .st-cp-boxlink {
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .st-cp-linkbtn {
+    appearance: none;
+    cursor: pointer;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    background: var(--bg-3);
+    min-height: 24px;
+    color: var(--fg-1);
+    font-family: var(--font-mono);
+    align-items: center;
+    gap: 5px;
+    padding: 0 8px;
+    font-size: 10px;
+    display: inline-flex;
+  }
+
+  .st-cp-linkbtn.is-on {
+    border-color: var(--accent);
+    color: var(--fg-0);
+    background: var(--accent-tint);
+  }
+
+  .st-cp-linkglyph {
+    border: 1.5px solid;
+    border-radius: 4px;
+    width: 13px;
+    height: 9px;
+  }
+
+  .st-cp-linkhint {
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    font-size: 10px;
+  }
+
+  .st-cp-split {
+    appearance: none;
+    cursor: pointer;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    background: var(--bg-3);
+    flex: none;
+    width: 24px;
+    height: 24px;
+    position: relative;
+  }
+
+  .st-cp-split.is-on {
+    border-color: var(--accent);
+    background: var(--accent-tint);
+  }
+
+  .st-cp-split:before {
+    content: "";
+    border: 1.5px solid var(--fg-1);
+    border-radius: 3px;
+    position: absolute;
+    inset: 6px;
+  }
+
+  .st-cp-split.is-on:before {
+    border-color: var(--accent);
+    border-style: dashed;
+  }
+
+  .st-cp-corners {
+    gap: var(--space-1);
+    margin: 0 0 var(--space-1) 18px;
+    grid-template-columns: 1fr 1fr;
+    display: grid;
+  }
+
+  .st-cp-cornerf {
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    align-items: center;
+    gap: 6px;
+    min-height: 24px;
+    padding: 0 8px;
+    display: flex;
+  }
+
+  .st-cp-cornerf span {
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    font-size: 10px;
+  }
+
+  .st-cp-cornerf input {
+    appearance: none;
+    width: 100%;
+    min-width: 0;
+    color: var(--fg-0);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    background: none;
+    border: 0;
+    flex: 1;
+    padding: 0;
+    font-size: 11px;
+  }
+
+  .st-cp-cornerf input:focus {
+    outline: none;
+  }
+
+  .st-cp-swatch {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .st-cp-caret {
+    color: var(--fg-2);
+    text-align: center;
+    flex: none;
+    width: 9px;
+    font-size: 9px;
+  }
+
+  .st-cp-fin {
+    box-sizing: border-box;
+    appearance: none;
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    width: 100%;
+    min-width: 0;
+    color: var(--fg-0);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--type-xs);
+    padding: 4px var(--space-2);
+    min-height: 26px;
+    transition: border-color var(--dur-soft) var(--ease-out), box-shadow var(--dur-soft) var(--ease-out);
+    flex: auto;
+  }
+
+  .st-cp-fin::placeholder {
+    color: var(--fg-2);
+  }
+
+  .st-cp-fin:hover {
+    border-color: var(--border-strong);
+  }
+
+  .st-cp-fin:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-nsel {
+    box-sizing: border-box;
+    cursor: pointer;
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    min-width: 0;
+    color: var(--fg-0);
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    padding: 3px var(--space-2);
+    min-height: 26px;
+    transition: border-color var(--dur-soft) var(--ease-out), box-shadow var(--dur-soft) var(--ease-out);
+    flex: auto;
+  }
+
+  .st-cp-nsel:hover {
+    border-color: var(--border-strong);
+  }
+
+  .st-cp-nsel:focus, .st-cp-nsel:focus-visible {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-nsel--tok {
+    max-width: 108px;
+    font-family: var(--font-mono);
+    color: var(--fg-2);
+    background: var(--bg-2);
+    flex: 0 auto;
+  }
+
+  .st-cp-nsel--mini {
+    flex: 0 auto;
+    max-width: 92px;
+  }
+
+  .st-cp-unitsel {
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    border-left: 1px solid var(--border-subtle);
+    background: var(--bg-2);
+    color: var(--fg-2);
+    font-family: var(--font-mono);
+    flex: none;
+    padding: 0 4px;
+    font-size: 10px;
+  }
+
+  .st-cp-tokbtn {
+    cursor: pointer;
+    appearance: none;
+    background: var(--bg-2);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    width: 24px;
+    height: 26px;
+    color: var(--fg-2);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .st-cp-tokbtn:hover {
+    color: var(--fg-0);
+    border-color: var(--border-strong);
+  }
+
+  .st-cp-tokbtn:focus-visible {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-tokbtn.is-bound {
+    color: var(--accent);
+    border-color: var(--accent-muted);
+    background: var(--accent-tint);
+  }
+
+  .st-cp-tokbtn-glyph {
+    border: 1.5px solid;
+    border-radius: 1px;
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+  }
+
+  .st-cp-tokbtn.is-bound .st-cp-tokbtn-glyph {
+    background: currentColor;
+  }
+
+  .st-cp-pop {
+    z-index: 1000;
+    background: var(--bg-2);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-2);
+    position: fixed;
+    overflow-y: auto;
+  }
+
+  .st-cp-pop-empty {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+    padding: var(--space-2);
+  }
+
+  .st-cp-pop-search {
+    z-index: 2;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 0 0 var(--space-2);
+    margin: calc(-1 * var(--space-2)) 0 0;
+    background: var(--bg-2);
+    color: var(--fg-2);
+    display: flex;
+    position: sticky;
+    top: 0;
+  }
+
+  .st-cp-pop-search svg {
+    margin-left: var(--space-1);
+    flex: none;
+  }
+
+  .st-cp-pop-search input {
+    appearance: none;
+    background: var(--bg-3);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    min-width: 0;
+    color: var(--fg-0);
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    padding: 4px var(--space-2);
+    flex: auto;
+  }
+
+  .st-cp-pop-search input::placeholder {
+    color: var(--fg-3);
+  }
+
+  .st-cp-pop-search input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-poptabs {
+    border-bottom: 1px solid var(--border-subtle);
+    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-2);
+    display: flex;
+  }
+
+  .st-cp-poptab {
+    appearance: none;
+    cursor: pointer;
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    color: var(--fg-2);
+    padding: var(--space-3);
+    background: none;
+    border: 0;
+    border-bottom: 2px solid #0000;
+    flex: 1;
+  }
+
+  .st-cp-poptab.is-active {
+    color: var(--fg-0);
+    border-bottom-color: var(--accent);
+  }
+
+  .st-cp-poptab:hover:not(.is-active) {
+    color: var(--fg-1);
+  }
+
+  .st-cp-cpick {
+    gap: var(--space-2);
+    padding: var(--space-1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .st-cp-swatch--trigger {
+    cursor: pointer;
+    appearance: none;
+    padding: 0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .st-cp-swatch--trigger.is-bound {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+  }
+
+  .st-cp-cpick-sv {
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-default);
+    cursor: crosshair;
+    touch-action: none;
+    width: 100%;
+    height: 120px;
+    padding: 0;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .st-cp-cpick-svwhite {
+    background: linear-gradient(to right, #fff, #0000);
+    position: absolute;
+    inset: 0;
+  }
+
+  .st-cp-cpick-svblack {
+    background: linear-gradient(to top, #000, #0000);
+    position: absolute;
+    inset: 0;
+  }
+
+  .st-cp-cpick-knob {
+    pointer-events: none;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 0 1px #00000080;
+  }
+
+  .st-cp-cpick-controls {
+    align-items: center;
+    gap: var(--space-2);
+    display: flex;
+  }
+
+  .st-cp-cpick-eye {
+    appearance: none;
+    cursor: pointer;
+    width: 26px;
+    height: 16px;
+    color: var(--fg-2);
+    border-radius: var(--radius-xs);
+    background: none;
+    border: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .st-cp-cpick-eye:hover {
+    color: var(--fg-0);
+  }
+
+  .st-cp-cpick-hue {
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--border-default);
+    cursor: pointer;
+    touch-action: none;
+    background: linear-gradient(to right, red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
+    flex: auto;
+    height: 12px;
+    padding: 0;
+    position: relative;
+  }
+
+  .st-cp-cpick-huethumb {
+    pointer-events: none;
+    background: #fff;
+    border: 1px solid #0006;
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 1px 3px #0006;
+  }
+
+  .st-cp-pop-group + .st-cp-pop-group {
+    margin-top: var(--space-2);
+  }
+
+  .st-cp-pop-ds {
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+    color: var(--fg-2);
+    padding: 2px var(--space-1) 4px;
+    background: var(--bg-2);
+    z-index: 1;
+    font-size: 10px;
+    position: sticky;
+    top: 30px;
+  }
+
+  .st-cp-pop-grid {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 6px;
+    display: grid;
+  }
+
+  .st-cp-pop-sw {
+    aspect-ratio: 1;
+    cursor: pointer;
+    appearance: none;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xs);
+    min-height: 26px;
+    padding: 0;
+  }
+
+  .st-cp-pop-sw:hover {
+    border-color: var(--fg-2);
+    transform: scale(1.06);
+  }
+
+  .st-cp-pop-sw.is-on {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+  }
+
+  .st-cp-pop-sw:focus-visible {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-pop-list {
+    flex-direction: column;
+    gap: 1px;
+    display: flex;
+  }
+
+  .st-cp-pop-row {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    appearance: none;
+    border-radius: var(--radius-xs);
+    padding: 5px var(--space-2);
+    text-align: left;
+    background: none;
+    border: 0;
+    display: flex;
+  }
+
+  .st-cp-pop-row:hover {
+    background: var(--bg-3);
+  }
+
+  .st-cp-pop-row.is-on {
+    background: var(--accent-tint);
+  }
+
+  .st-cp-pop-row:focus-visible {
+    box-shadow: 0 0 0 2px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-cp-pop-name {
+    font-family: var(--font-mono);
+    font-size: var(--type-xs);
+    color: var(--fg-0);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .st-cp-pop-crow {
+    justify-content: flex-start;
+  }
+
+  .st-cp-pop-crow .st-cp-pop-name {
+    flex: auto;
+    min-width: 0;
+  }
+
+  .st-cp-pop-cswatch {
+    border-radius: var(--radius-xs);
+    border: 1px solid var(--border-default);
+    flex: none;
+    width: 16px;
+    height: 16px;
+  }
+
+  .st-cp-pop-val {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--fg-2);
+    flex: none;
+    font-size: 10px;
+  }
+
+  .st-cp-pop-row.is-on .st-cp-pop-name {
+    color: var(--accent);
+  }
+
+  .st-cp-fs {
+    text-align: center;
+    width: 14px;
+    font-family: var(--font-mono);
+    flex: none;
+    font-size: 11px;
+  }
+
+  .st-cp-fs.is-saving {
+    color: var(--fg-3);
+  }
+
+  .st-cp-fs.is-saved {
+    color: var(--status-success);
+  }
+
+  .st-cp-fs.is-err {
+    color: var(--status-warn);
+    cursor: help;
+  }
+
+  .st-cp button:focus-visible, .st-cp input:focus-visible, .st-cp select:focus-visible, .st-cp-token:focus-visible, .st-cp-track:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+  }
+
+  .maude :is(button, [role="tab"], select, summary, a):focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 5px var(--accent-tint);
+  }
+
+  .maude :is(.st-row, .st-dd-item, .st-pal-item, .st-layer, .st-tree-sec-hd, .st-cm-group-hd):focus-visible {
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 5px var(--accent-tint);
+  }
+
+  .st-search-box:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+    color: var(--fg-2);
+  }
+
+  .st-search-box input:focus {
+    outline: none;
+  }
+
+  .st-newboard input:focus, .st-newboard input:focus-visible, .st-field:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-select:hover {
+    border-color: var(--border-strong);
+    background-color: var(--bg-3);
+  }
+
+  .st-select:focus-visible {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-tint);
+    outline: none;
+  }
+
+  .st-pal-search input:focus {
+    outline: none;
+  }
+
+  .st-pal-search:focus-within {
+    border-bottom-color: var(--accent-muted);
+  }
+
+  .st-select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c0c4cf' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
+    background-position: right 10px center;
+    background-repeat: no-repeat;
+    background-size: 12px;
+    padding-right: 30px;
+  }
+
+  .maude[data-theme="light"] .st-select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234f5563' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
+  }
+
+  .maude * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-default) transparent;
+  }
+
+  .maude ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .maude ::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  .maude ::-webkit-scrollbar-thumb {
+    background: var(--border-default);
+    border-radius: var(--radius-pill);
+    background-clip: padding-box;
+    border: 2px solid #0000;
+  }
+
+  .maude ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--border-strong);
+  }
+
+  .maude [data-tip] {
+    position: relative;
+  }
+
+  .maude [data-tip]:after {
+    content: attr(data-tip);
+    z-index: 9200;
+    white-space: nowrap;
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-2);
+    color: var(--fg-0);
+    font-family: var(--font-body);
+    font-size: var(--type-xs);
+    letter-spacing: normal;
+    text-transform: none;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-md);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--dur-soft) var(--ease-out);
+    font-weight: 400;
+    line-height: 1;
+    position: absolute;
+    top: calc(100% + 7px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .maude [data-tip]:hover:after, .maude [data-tip]:focus-visible:after {
+    opacity: 1;
+    transition-delay: .5s;
+  }
+
+  .maude [data-tip][data-tip-pos="top"]:after {
+    top: auto;
+    bottom: calc(100% + 7px);
+  }
+
+  .maude [data-tip][data-tip-pos="left"]:after {
+    top: 50%;
+    left: auto;
+    right: calc(100% + 7px);
+    transform: translateY(-50%);
+  }
+
+  .st-grip {
+    cursor: col-resize;
+    z-index: 25;
+    background: none;
+    flex: 0 0 8px;
+    place-items: center;
+    width: 8px;
+    margin: 0 -4px;
+    display: grid;
+    position: relative;
+  }
+
+  .st-grip:before {
+    content: "";
+    width: 1px;
+    transition: background var(--dur-flip) var(--ease-out), width var(--dur-flip) var(--ease-out);
+    background: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .st-grip:hover:before, .st-grip:focus-visible:before, .st-grip.is-active:before {
+    background: var(--accent);
+    width: 2px;
+  }
+
+  .st-grip-dots {
+    width: 6px;
+    height: 18px;
+    color: var(--accent);
+    opacity: 0;
+    transition: opacity var(--dur-flip) var(--ease-out);
+    position: relative;
+  }
+
+  .st-grip:hover .st-grip-dots, .st-grip:focus-visible .st-grip-dots, .st-grip.is-active .st-grip-dots {
+    opacity: 1;
+  }
+
+  .st-grip:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -3px;
+  }
+
+  .st-body.is-resizing {
+    cursor: col-resize;
+    user-select: none;
+  }
+
+  .st-body.is-resizing iframe {
+    pointer-events: none;
+  }
+
+  .st-sidebar.is-resizing, .st-rpanel.is-resizing {
+    transition: none;
+  }
+
+  .st-canvas-loading {
+    pointer-events: none;
+    z-index: 5;
+    opacity: 0;
+    animation: st-loading-in var(--dur-soft) var(--ease-out) .18s forwards;
+    place-items: center;
+    display: grid;
+    position: absolute;
+    inset: 0;
+  }
+
+  @keyframes st-loading-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  .st-skel-card {
+    gap: var(--space-3);
+    width: 300px;
+    padding: var(--space-5);
+    background: var(--bg-1);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    animation: st-pop var(--dur-panel) var(--ease-out);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .st-skel-cap {
+    font-size: var(--type-xs);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--fg-3);
+  }
+
+  .skel {
+    background: var(--bg-3);
+    border-radius: var(--radius-xs);
+    animation: sk-pulse calc(var(--dur-route) * 3) var(--ease-in-out) infinite alternate;
+    display: block;
+  }
+
+  @keyframes sk-pulse {
+    from {
+      opacity: .45;
+    }
+
+    to {
+      opacity: .95;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skel {
+      opacity: .7;
+      animation: none;
+    }
+  }
+
+  .st-skel-thumb {
+    border-radius: var(--radius-sm);
+    height: 96px;
   }
 
-  .st-dialog {
-    background: var(--bg-1);
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-lg);
-    width: 540px;
-    max-width: 92vw;
-    box-shadow: var(--shadow-lg);
-    animation: st-pop var(--dur-route) var(--ease-out);
-    overflow: hidden;
+  .st-skel-line {
+    height: 10px;
   }
 
-  .st-dialog-hd {
-    padding: var(--space-4) var(--space-5);
-    border-bottom: 1px solid var(--border-subtle);
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
+  .st-row, .st-comment, .st-fmt, .st-cm-filter, .st-rp-tab, .st-dd-item, .st-pal-item, .st-layer, .st-export-recent-row {
+    transition: background var(--dur-soft) var(--ease-out),
+              border-color var(--dur-soft) var(--ease-out),
+              color var(--dur-soft) var(--ease-out);
   }
 
-  .st-dialog-title {
-    font-family: var(--font-display);
-    font-size: var(--type-lg);
-    color: var(--fg-0);
-    font-weight: 600;
+  .st-chev {
+    transition: transform var(--dur-flip) var(--ease-out);
   }
 
-  .st-dialog-bd {
-    padding: var(--space-5);
-    gap: var(--space-4);
-    flex-direction: column;
-    display: flex;
+  .st-chev.is-open {
+    transform: rotate(90deg);
   }
 
-  .st-fmt-grid {
-    gap: var(--space-3);
-    grid-template-columns: repeat(4, 1fr);
-    display: grid;
+  .st-rpanel {
+    animation: st-panel-in var(--dur-panel) var(--ease-out);
   }
 
-  .st-fmt {
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
+  @keyframes st-panel-in {
+    from {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  .so-overlay {
+    background: var(--bg-1);
     border: 1px solid var(--border-default);
-    border-radius: var(--radius-md);
-    background: var(--bg-2);
-    cursor: pointer;
-    color: var(--fg-1);
-    appearance: none;
-    text-align: left;
-    flex-direction: column;
-    align-items: flex-start;
-    display: flex;
+    border-radius: var(--radius-lg);
+    width: 100%;
+    max-width: 720px;
+    box-shadow: var(--shadow-lg);
+    padding: var(--space-6);
+    animation: so-enter var(--dur-panel) var(--ease-out) both;
+    margin-top: -4vh;
+    position: relative;
   }
 
-  .st-fmt:hover {
-    border-color: var(--border-strong);
+  @keyframes so-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-6px) scale(.99);
+    }
+
+    100% {
+      opacity: 1;
+      transform: none;
+    }
   }
 
-  .st-fmt.is-on {
-    border-color: var(--accent);
-    background: var(--accent-tint);
-    color: var(--fg-0);
-    box-shadow: 0 0 0 2px var(--accent-tint);
+  .so-overlay-hd {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--space-4);
+    margin: 0 0 var(--space-5);
+    padding-bottom: var(--space-4);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
   }
 
-  .st-fmt-name {
-    font-family: var(--font-mono);
-    font-size: var(--type-sm);
+  .so-title {
+    font-family: var(--font-display);
+    font-size: var(--type-lg);
+    line-height: var(--lh-lg);
+    letter-spacing: var(--tracking-tight);
+    color: var(--fg-0);
     font-weight: 600;
   }
 
-  .st-fmt-sub {
+  .so-trigger {
     font-size: var(--type-xs);
     color: var(--fg-2);
   }
 
-  .st-dialog-row {
-    align-items: center;
-    gap: var(--space-3);
-    display: flex;
+  .so-columns {
+    gap: var(--space-6) var(--space-7);
+    grid-template-columns: repeat(2, 1fr);
+    display: grid;
   }
 
-  .st-dialog-lbl {
+  .so-section-hd {
+    margin: 0 0 var(--space-3);
     font-family: var(--font-mono);
     font-size: var(--type-xs);
-    color: var(--fg-2);
-    text-transform: uppercase;
     letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--fg-2);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--border-subtle);
+    font-weight: 500;
   }
 
-  .st-select {
-    appearance: none;
-    background: var(--bg-2);
-    color: var(--fg-0);
-    border: 1px solid var(--border-default);
-    border-radius: var(--radius-sm);
-    padding: var(--space-2) var(--space-3);
-    font-family: var(--font-body);
-    font-size: var(--type-sm);
-    cursor: pointer;
-    flex: 1;
-  }
-
-  .st-dialog-ft {
-    align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-4) var(--space-5);
-    border-top: 1px solid var(--border-subtle);
-    justify-content: flex-end;
-    display: flex;
+  .so-section--tools .so-section-hd {
+    color: var(--accent);
+    border-bottom-color: color-mix(in oklab, var(--accent) 40%, var(--border-subtle));
   }
 
-  .st-export-recent {
+  .so-list {
+    gap: var(--space-1);
     flex-direction: column;
-    gap: 2px;
-    max-height: 132px;
+    margin: 0;
     display: flex;
-    overflow-y: auto;
   }
 
-  .st-export-recent-row {
-    justify-content: space-between;
+  .so-pair {
     align-items: center;
-    gap: var(--space-3);
-    padding: var(--space-2) var(--space-3);
-    border-radius: var(--radius-sm);
-    font-size: var(--type-xs);
-    color: var(--fg-2);
-    display: flex;
+    gap: var(--space-4);
+    padding: var(--space-1) var(--space-1);
+    border-radius: var(--radius-xs);
+    grid-template-columns: 1fr auto;
+    display: grid;
   }
 
-  .st-export-recent-row:hover {
+  .so-pair:hover {
     background: var(--bg-2);
   }
 
-  .st-export-recent-row .st-mono {
+  .so-pair dt {
+    font-size: var(--type-sm);
     color: var(--fg-1);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 50%;
-    overflow: hidden;
   }
 
-  .st-insp-fields {
-    gap: var(--space-2);
-    flex-wrap: wrap;
-    align-items: center;
-    display: flex;
+  .so-pair dd {
+    justify-self: end;
+    margin: 0;
   }
 
-  .st-field {
-    font-family: var(--font-mono);
-    font-variant-numeric: tabular-nums;
-    font-size: var(--type-xs);
-    color: var(--fg-0);
-    background: var(--bg-3);
-    border: 1px solid var(--border-default);
-    border-radius: var(--radius-xs);
-    padding: var(--space-1) var(--space-2);
-    text-align: right;
-    width: 58px;
+  .so-combos {
+    align-items: center;
+    gap: var(--space-2);
+    display: inline-flex;
   }
 
-  .st-field-lead {
+  .so-combo {
     align-items: center;
     gap: var(--space-1);
     display: inline-flex;
   }
 
-  .st-field-lead .k {
+  .so-or {
     font-family: var(--font-mono);
+    font-size: var(--type-xs);
     color: var(--fg-3);
-    font-size: 9px;
+    padding: 0 1px;
   }
 
-  .st-layer {
+  .so-overlay-ft {
+    justify-content: space-between;
     align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-2);
-    border-radius: var(--radius-xs);
-    font-size: var(--type-sm);
-    color: var(--fg-1);
-    font-family: var(--font-mono);
+    gap: var(--space-4);
+    margin-top: var(--space-5);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--border-subtle);
+    font-size: var(--type-xs);
+    color: var(--fg-2);
     display: flex;
   }
 
-  .st-layer:hover {
-    background: var(--bg-2);
+  @media (width <= 640px) {
+    .so-columns {
+      grid-template-columns: 1fr;
+    }
   }
 
-  .st-layer.is-sel {
-    background: var(--accent-tint);
-    color: var(--fg-0);
+  .st-avatar.is-pulsing:after {
+    content: "";
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--av-hue);
+    animation: st-presence-ring 1.6s var(--ease-out) infinite;
+    pointer-events: none;
+    position: absolute;
+    inset: -1px;
   }
 
-  .st-css {
-    font-family: var(--font-mono);
-    font-size: var(--type-xs);
-    background: var(--bg-0);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-sm);
-    padding: var(--space-3);
-    color: var(--fg-1);
-    line-height: 1.7;
+  .st-avatar {
+    position: relative;
   }
 
-  .st-css .comment {
-    color: var(--fg-3);
+  @keyframes st-presence-ring {
+    0% {
+      opacity: .9;
+      transform: scale(1);
+    }
+
+    70%, 100% {
+      opacity: 0;
+      transform: scale(1.45);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-avatar.is-pulsing:after {
+      opacity: 0;
+      animation: none;
+    }
   }
 }
 
@@ -5041,6 +7309,47 @@
     margin-bottom: 14px;
   }
 
+  .mdcc-tour__hint {
+    border-radius: var(--radius-md);
+    background: color-mix(in oklab, var(--u-accent) 12%, transparent);
+    border: 1px solid color-mix(in oklab, var(--u-accent) 35%, transparent);
+    color: var(--u-fg-1);
+    align-items: center;
+    gap: 8px;
+    margin: -4px 0 14px;
+    padding: 8px 10px;
+    font-size: 12px;
+    line-height: 1.4;
+    display: flex;
+  }
+
+  .mdcc-tour__hint-dot {
+    background: var(--u-accent);
+    border-radius: 50%;
+    flex: none;
+    width: 8px;
+    height: 8px;
+    animation: 1.4s ease-in-out infinite mdcc-tour-pulse;
+  }
+
+  @keyframes mdcc-tour-pulse {
+    0%, 100% {
+      opacity: .4;
+      transform: scale(.85);
+    }
+
+    50% {
+      opacity: 1;
+      transform: scale(1.15);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mdcc-tour__hint-dot {
+      animation: none;
+    }
+  }
+
   .mdcc-tour__actions {
     justify-content: space-between;
     align-items: center;
@@ -5299,6 +7608,8 @@
   .maude .help-modal-hd {
     border-bottom: 1px solid var(--border-subtle);
     background: var(--bg-1);
+    justify-content: flex-start;
+    gap: var(--space-4);
   }
 
   .maude .help-modal-hd .title {
@@ -5446,6 +7757,7 @@
     box-shadow: var(--shadow-lg);
     font-family: var(--font-body);
     color: var(--fg-1);
+    bottom: 84px;
   }
 
   .maude .mdcc-tour-nudge__cta {
@@ -5638,14 +7950,25 @@
     border-radius: 0;
   }
 
+  .maude .sv-tok-meta {
+    padding: var(--space-2) var(--space-3);
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 1px;
+  }
+
   .maude .sv-tok-name {
     font-family: var(--font-mono);
     color: var(--fg-0);
+    white-space: nowrap;
+    max-width: 100%;
   }
 
   .maude .sv-tok-value {
     font-family: var(--font-mono);
     color: var(--fg-2);
+    max-width: 100%;
   }
 
   .maude .sv-type-row {