@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/server/index.css

@@ -316,10 +316,57 @@
     pointer-events: none;
   }
 
-  .cinder-area-chart__focus-target:focus-visible {
-    stroke: var(--cinder-accent);
+  .cinder-area-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+    fill: transparent;
+    stroke: var(--cinder-ring-color);
+    stroke-width: var(--cinder-ring-width);
+    vector-effect: non-scaling-stroke;
+    filter: none;
+  }
+
+  .cinder-area-chart__focus-ring-layer {
+    pointer-events: none;
+  }
+
+  .cinder-area-chart__focus-ring, .cinder-area-chart__focus-ring-halo, .cinder-area-chart__focus-ring-connector, .cinder-area-chart__focus-ring-dot {
+    fill: none;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .cinder-area-chart__focus-ring {
+    stroke: var(--cinder-ring-color);
     stroke-width: var(--cinder-ring-width);
-    filter: drop-shadow(0 0 var(--cinder-ring-width) var(--cinder-ring-color));
+    filter: none;
+  }
+
+  .cinder-area-chart__focus-ring-halo {
+    stroke: var(--cinder-ring-offset-color);
+    stroke-width: calc(var(--cinder-ring-width)  + var(--cinder-ring-offset)  + var(--cinder-ring-offset));
+    filter: none;
+  }
+
+  @media (forced-colors: active) {
+    .cinder-area-chart__focus-ring-halo {
+      display: none;
+    }
+
+    .cinder-area-chart__focus-ring, .cinder-area-chart__focus-ring-connector, .cinder-area-chart__focus-ring-dot {
+      fill: none;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      filter: none;
+    }
+
+    .cinder-area-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+      fill: transparent;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      vector-effect: non-scaling-stroke;
+      filter: none;
+    }
   }
 
   .cinder-area-chart__tick-label {
@@ -581,7 +628,7 @@
 
   .cinder-avatar-group__trigger:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 var(--cinder-ring-offset-width) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset-width)  + var(--cinder-ring-width)) var(--cinder-ring-color);
+    box-shadow: 0 0 0 var(--cinder-ring-offset, 1px) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset, 1px)  + var(--cinder-ring-width)) var(--cinder-ring-color);
   }
 
   .cinder-avatar-group__overflow {
@@ -711,6 +758,10 @@
     color: var(--cinder-accent-text);
     border-color: color-mix(in oklch, var(--cinder-accent), transparent 60%);
   }
+
+  .cinder-badge[data-cinder-mono] {
+    font-family: var(--cinder-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
+  }
 }
 
 /* src/components/backdrop/backdrop.css */
@@ -918,10 +969,57 @@
     pointer-events: none;
   }
 
-  .cinder-bar-chart__focus-target:focus-visible {
-    stroke: var(--cinder-accent);
+  .cinder-bar-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+    fill: transparent;
+    stroke: var(--cinder-ring-color);
+    stroke-width: var(--cinder-ring-width);
+    vector-effect: non-scaling-stroke;
+    filter: none;
+  }
+
+  .cinder-bar-chart__focus-ring-layer {
+    pointer-events: none;
+  }
+
+  .cinder-bar-chart__focus-ring, .cinder-bar-chart__focus-ring-halo, .cinder-bar-chart__focus-ring-connector, .cinder-bar-chart__focus-ring-dot {
+    fill: none;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .cinder-bar-chart__focus-ring {
+    stroke: var(--cinder-ring-color);
     stroke-width: var(--cinder-ring-width);
-    filter: drop-shadow(0 0 var(--cinder-ring-width) var(--cinder-ring-color));
+    filter: none;
+  }
+
+  .cinder-bar-chart__focus-ring-halo {
+    stroke: var(--cinder-ring-offset-color);
+    stroke-width: calc(var(--cinder-ring-width)  + var(--cinder-ring-offset)  + var(--cinder-ring-offset));
+    filter: none;
+  }
+
+  @media (forced-colors: active) {
+    .cinder-bar-chart__focus-ring-halo {
+      display: none;
+    }
+
+    .cinder-bar-chart__focus-ring, .cinder-bar-chart__focus-ring-connector, .cinder-bar-chart__focus-ring-dot {
+      fill: none;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      filter: none;
+    }
+
+    .cinder-bar-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+      fill: transparent;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      vector-effect: non-scaling-stroke;
+      filter: none;
+    }
   }
 
   .cinder-bar-chart__tick-label {
@@ -1364,7 +1462,7 @@
   }
 
   .cinder-button[data-cinder-variant="primary"]:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--cinder-accent-active);
+    background: var(--cinder-accent-active-on-fill);
   }
 
   .cinder-button[data-cinder-variant="secondary"]:active:not(:disabled):not([aria-disabled="true"]) {
@@ -1641,7 +1739,15 @@
     padding: var(--cinder-space-4);
   }
 
-  .cinder-card__body[data-cinder-tone="muted"], .cinder-card[data-cinder-variant="well"] .cinder-card__body {
+  .cinder-card__body[data-cinder-tone="muted"] {
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-card__body[data-cinder-padding="none"] {
+    padding: 0;
+  }
+
+  .cinder-card[data-cinder-variant="well"] .cinder-card__body {
     background: var(--cinder-surface-inset);
   }
 
@@ -1709,7 +1815,7 @@
   }
 
   .ProseMirror-selectednode {
-    outline: 2px solid #8cf;
+    outline: 2px solid var(--cinder-accent);
   }
 
   li.ProseMirror-selectednode {
@@ -1719,8 +1825,8 @@
   li.ProseMirror-selectednode:after {
     content: "";
     position: absolute;
+    border: 2px solid var(--cinder-accent);
     pointer-events: none;
-    border: 2px solid #8cf;
     inset: -2px -2px -2px -32px;
   }
 
@@ -1731,6 +1837,110 @@
   }
 }
 
+/* src/components/choice-grid/choice-grid.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-choice-grid {
+    display: grid;
+    grid-template-columns: var(--cinder-choice-grid-columns, repeat(auto-fill, minmax(min(10rem, 100%), 1fr)));
+    gap: var(--cinder-space-3);
+    inline-size: 100%;
+  }
+
+  .cinder-choice-grid[data-cinder-disabled] {
+    opacity: .6;
+    pointer-events: none;
+  }
+}
+
+/* src/components/choice-grid-item/choice-grid-item.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-choice-grid-item {
+    display: flex;
+    text-align: center;
+    padding: var(--cinder-space-4) var(--cinder-space-3);
+    border-radius: var(--cinder-radius-lg);
+    border: 2px solid var(--cinder-border-muted);
+    background: var(--cinder-surface);
+    color: var(--cinder-text);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    touch-action: manipulation;
+    justify-content: center;
+    align-items:  center;
+    min-block-size: 4rem;
+    transition: background .12s, border-color .12s, box-shadow .12s;
+  }
+
+  .cinder-choice-grid-item__content {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    font-size: var(--cinder-text-base);
+    font-weight: var(--cinder-font-medium);
+    line-height: var(--cinder-leading-snug);
+    pointer-events: none;
+    flex-direction: column;
+  }
+
+  @media (hover: hover) {
+    .cinder-choice-grid-item:not([data-cinder-disabled]):not([data-cinder-selected]):not([data-cinder-state]):hover {
+      border-color: var(--cinder-border);
+      background: var(--cinder-surface-raised);
+    }
+  }
+
+  .cinder-choice-grid-item:focus-visible {
+    border-color: var(--cinder-accent);
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-choice-grid-item:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+    }
+  }
+
+  .cinder-choice-grid-item[data-cinder-selected] {
+    border-color: var(--cinder-accent);
+    color: var(--cinder-accent-text);
+  }
+
+  @media (hover: hover) {
+    .cinder-choice-grid-item[data-cinder-selected]:not([data-cinder-disabled]):not([data-cinder-state]):hover {
+      border-color: var(--cinder-accent-hover);
+    }
+  }
+
+  .cinder-choice-grid-item[data-cinder-disabled] {
+    cursor: not-allowed;
+    opacity: .45;
+  }
+
+  .cinder-choice-grid-item[data-cinder-state="correct"] {
+    border-color: var(--cinder-color-success-border);
+    background: var(--cinder-color-success-bg);
+    color: var(--cinder-color-success-fg);
+  }
+
+  .cinder-choice-grid-item[data-cinder-state="incorrect"] {
+    border-color: var(--cinder-color-danger-border);
+    background: var(--cinder-color-danger-bg);
+    color: var(--cinder-color-danger-fg);
+  }
+
+  .cinder-choice-grid-item[data-cinder-state="pending"] {
+    border-color: var(--cinder-color-warning-border);
+    background: var(--cinder-color-warning-bg);
+    color: var(--cinder-color-warning-fg);
+  }
+}
+
 /* src/components/chip/chip.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -2392,10 +2602,8 @@
   }
 
   .cinder-color-field__swatch[data-cinder-alpha]:not([data-cinder-empty]) {
-    --_cinder-color-field-checker-base: #fff;
-    --_cinder-color-field-checker-tile: #ccc;
-    background-color: var(--_cinder-color-field-checker-base);
-    background-image: linear-gradient(var(--cinder-color-field-swatch, transparent), var(--cinder-color-field-swatch, transparent)), linear-gradient(45deg, var(--_cinder-color-field-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--_cinder-color-field-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_cinder-color-field-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--_cinder-color-field-checker-tile) 75%);
+    background-color: var(--cinder-color-checker-base);
+    background-image: linear-gradient(var(--cinder-color-field-swatch, transparent), var(--cinder-color-field-swatch, transparent)), linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-position: 0 0, 0 0, 0 3px, 3px -3px, -3px 0;
     background-size: auto, 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
@@ -2428,8 +2636,12 @@
     container-name: cinder-color-picker;
     display: flex;
     gap: var(--cinder-space-2);
-    --_cinder-color-picker-checker-base: #fff;
-    --_cinder-color-picker-checker-tile: #ccc;
+    --_cinder-color-picker-thumb-border: #fff;
+    --_cinder-color-picker-thumb-shadow-edge: #00000080;
+    --_cinder-color-picker-thumb-shadow-support-light: transparent;
+    --_cinder-color-picker-thumb-shadow-support-dark: #ffffffa6;
+    --_cinder-color-picker-thumb-shadow-support: light-dark(var(--_cinder-color-picker-thumb-shadow-support-light), var(--_cinder-color-picker-thumb-shadow-support-dark));
+    --_cinder-color-picker-thumb-shadow: 0 0 0 1px var(--_cinder-color-picker-thumb-shadow-edge), 0 0 0 2px var(--_cinder-color-picker-thumb-shadow-support);
     flex-direction: column;
     width: 100%;
     max-width: 280px;
@@ -2462,13 +2674,13 @@
 
   .cinder-color-picker__gradient-handle {
     position: absolute;
+    border: 2px solid var(--_cinder-color-picker-thumb-border);
+    box-shadow: var(--_cinder-color-picker-thumb-shadow);
     pointer-events: none;
-    border: 2px solid #fff;
     border-radius: 50%;
     width: 14px;
     height: 14px;
     transform: translate(-50%, -50%);
-    box-shadow: 0 0 0 1px #00000080;
   }
 
   .cinder-color-picker__hue, .cinder-color-picker__alpha {
@@ -2485,8 +2697,8 @@
   }
 
   .cinder-color-picker__alpha {
-    background-color: var(--_cinder-color-picker-checker-base);
-    background-image: linear-gradient(to right, transparent, var(--cinder-color-picker-base, currentColor)), linear-gradient(45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%);
+    background-color: var(--cinder-color-checker-base);
+    background-image: linear-gradient(to right, transparent, var(--cinder-color-picker-base, currentColor)), linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
     background-size: auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
   }
@@ -2498,15 +2710,15 @@
 
   .cinder-color-picker__hue-thumb, .cinder-color-picker__alpha-thumb {
     position: absolute;
+    border: 2px solid var(--_cinder-color-picker-thumb-border);
+    box-shadow: var(--_cinder-color-picker-thumb-shadow);
     pointer-events: none;
     background: none;
-    border: 2px solid #fff;
     border-radius: 50%;
     width: 14px;
     height: 14px;
     top: 50%;
     transform: translate(-50%, -50%);
-    box-shadow: 0 0 0 1px #00000080;
   }
 
   .cinder-color-picker__footer {
@@ -2525,8 +2737,8 @@
   }
 
   .cinder-color-picker__preview[data-cinder-alpha] {
-    background-color: var(--_cinder-color-picker-checker-base);
-    background-image: linear-gradient(var(--cinder-color-picker-preview, transparent), var(--cinder-color-picker-preview, transparent)), linear-gradient(45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--_cinder-color-picker-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--_cinder-color-picker-checker-tile) 75%);
+    background-color: var(--cinder-color-checker-base);
+    background-image: linear-gradient(var(--cinder-color-picker-preview, transparent), var(--cinder-color-picker-preview, transparent)), linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
     background-size: auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
   }
@@ -2611,10 +2823,8 @@
   }
 
   .cinder-color-swatch-picker__swatch[data-cinder-alpha] {
-    --_cinder-color-swatch-picker-checker-base: #fff;
-    --_cinder-color-swatch-picker-checker-tile: #ccc;
-    background-color: var(--_cinder-color-swatch-picker-checker-base);
-    background-image: linear-gradient(var(--swatch-color), var(--swatch-color)), linear-gradient(45deg, var(--_cinder-color-swatch-picker-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--_cinder-color-swatch-picker-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_cinder-color-swatch-picker-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--_cinder-color-swatch-picker-checker-tile) 75%);
+    background-color: var(--cinder-color-checker-base);
+    background-image: linear-gradient(var(--swatch-color), var(--swatch-color)), linear-gradient(45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(-45deg, var(--cinder-color-checker-tile) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cinder-color-checker-tile) 75%), linear-gradient(-45deg, transparent 75%, var(--cinder-color-checker-tile) 75%);
     background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
     background-size: auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
   }
@@ -3333,6 +3543,19 @@
   }
 }
 
+/* src/components/data-table/data-table.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-data-table {
+    display: contents;
+  }
+
+  .cinder-data-table.cinder-table-scroll {
+    display: block;
+  }
+}
+
 /* src/components/description-list/description-list.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -3982,7 +4205,7 @@
   }
 
   .cinder-fab[data-cinder-color="primary"]:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--cinder-accent-active);
+    background: var(--cinder-accent-active-on-fill);
   }
 
   .cinder-fab[data-cinder-color="secondary"]:active:not(:disabled):not([aria-disabled="true"]), .cinder-fab[data-cinder-color="surface"]:active:not(:disabled):not([aria-disabled="true"]) {
@@ -5142,6 +5365,128 @@
   }
 }
 
+/* src/components/capability-gate/capability-gate.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-capability-gate {
+    display: flex;
+    gap: var(--cinder-space-2);
+    padding: var(--cinder-space-3);
+    border-radius: var(--cinder-radius-md);
+    border: 1px solid var(--cinder-border);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    flex-direction: column;
+  }
+
+  .cinder-capability-gate[data-cinder-variant="error"] {
+    border-color: var(--cinder-color-danger-border);
+    background-color: var(--cinder-color-danger-bg);
+  }
+
+  .cinder-capability-gate[data-cinder-variant="warning"] {
+    border-color: var(--cinder-color-warning-border);
+    background-color: var(--cinder-color-warning-bg);
+  }
+
+  .cinder-capability-gate[data-cinder-variant="success"] {
+    border-color: var(--cinder-color-success-border);
+    background-color: var(--cinder-color-success-bg);
+  }
+
+  .cinder-capability-gate[data-cinder-presentation="banner"] {
+    border-radius: var(--cinder-radius-sm);
+    flex-flow: wrap;
+    align-items:  center;
+  }
+
+  .cinder-capability-gate[data-cinder-presentation="callout"] {
+    border-radius: 0 var(--cinder-radius-md) var(--cinder-radius-md) 0;
+    border-inline-start-width: 4px;
+  }
+
+  .cinder-capability-gate__status {
+    display: flex;
+    gap: var(--cinder-space-1);
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .cinder-capability-gate__feature {
+    font-weight: 600;
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-capability-gate__state-text {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-capability-gate__content {
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-capability-gate__actions {
+    display: flex;
+    gap: var(--cinder-space-1);
+    flex-wrap: wrap;
+    align-items:  center;
+  }
+
+  .cinder-capability-gate__primary, .cinder-capability-gate__fallback, .cinder-capability-gate__dismiss {
+    display: inline-flex;
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border-radius: var(--cinder-radius-sm);
+    font-size: var(--cinder-text-sm);
+    cursor: pointer;
+    text-decoration: none;
+    border: 1px solid #0000;
+    align-items:  center;
+    font-weight: 500;
+  }
+
+  .cinder-capability-gate__primary {
+    background-color: var(--cinder-accent);
+    color: var(--cinder-accent-contrast);
+    border-color: var(--cinder-accent);
+  }
+
+  @media (hover: hover) {
+    .cinder-capability-gate__primary:hover {
+      background-color: var(--cinder-accent-hover);
+      border-color: var(--cinder-accent-hover);
+    }
+  }
+
+  .cinder-capability-gate__primary:focus-visible, .cinder-capability-gate__fallback:focus-visible, .cinder-capability-gate__dismiss:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: 0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset)  + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-capability-gate__fallback {
+    color: var(--cinder-text);
+    border-color: var(--cinder-border);
+    background-color: #0000;
+  }
+
+  @media (hover: hover) {
+    .cinder-capability-gate__fallback:hover {
+      background-color: var(--cinder-surface-raised);
+    }
+  }
+
+  .cinder-capability-gate__dismiss {
+    color: var(--cinder-text-muted);
+    background-color: #0000;
+    margin-inline-start: auto;
+  }
+
+  .cinder-capability-gate__dismiss:hover {
+    color: var(--cinder-text);
+  }
+}
+
 /* src/components/kanban-board/kanban-board.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -5382,22 +5727,109 @@
   }
 }
 
-/* src/components/label/label.css */
+/* src/components/keyboard-shortcuts/keyboard-shortcuts.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
 @layer cinder.components {
-  .cinder-label {
-    display: inline-flex;
-    align-items:  center;
-    gap: var(--cinder-space-1);
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-text);
-    line-height: 1;
+  .cinder-keyboard-shortcuts {
+    display: flex;
+    gap: var(--cinder-space-4);
+    flex-direction: column;
   }
 
-  .cinder-label[data-disabled] {
-    color: var(--cinder-text-disabled);
+  .cinder-keyboard-shortcuts__heading {
+    font-size: var(--cinder-text-lg);
+    color: var(--cinder-text);
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .cinder-keyboard-shortcuts__intro {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-keyboard-shortcuts__group {
+    display: flex;
+    gap: var(--cinder-space-2);
+    flex-direction: column;
+  }
+
+  .cinder-keyboard-shortcuts__group-label {
+    font-size: var(--cinder-text-xs);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    color: var(--cinder-text-muted);
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .cinder-keyboard-shortcuts__list {
+    display: flex;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    overflow: hidden;
+    flex-direction: column;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .cinder-keyboard-shortcuts__row {
+    display: flex;
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    justify-content: space-between;
+    align-items:  center;
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-keyboard-shortcuts__row + .cinder-keyboard-shortcuts__row {
+    border-top: 1px solid var(--cinder-border);
+  }
+
+  .cinder-keyboard-shortcuts__action {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    flex: 1;
+  }
+
+  .cinder-keyboard-shortcuts__keys {
+    display: flex;
+    flex-shrink: 0;
+    align-items:  center;
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__keys-visual {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-keyboard-shortcuts__separator {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    user-select: none;
+    line-height: 1;
+  }
+}
+
+/* src/components/label/label.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-label {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+    line-height: 1;
+  }
+
+  .cinder-label[data-disabled] {
+    color: var(--cinder-text-disabled);
     cursor: not-allowed;
   }
 
@@ -5567,10 +5999,57 @@
     pointer-events: none;
   }
 
-  .cinder-line-chart__focus-target:focus-visible {
-    stroke: var(--cinder-accent);
+  .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+    fill: transparent;
+    stroke: var(--cinder-ring-color);
     stroke-width: var(--cinder-ring-width);
-    filter: drop-shadow(0 0 var(--cinder-ring-width) var(--cinder-ring-color));
+    vector-effect: non-scaling-stroke;
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-layer {
+    pointer-events: none;
+  }
+
+  .cinder-line-chart__focus-ring, .cinder-line-chart__focus-ring-halo, .cinder-line-chart__focus-ring-connector, .cinder-line-chart__focus-ring-dot {
+    fill: none;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .cinder-line-chart__focus-ring {
+    stroke: var(--cinder-ring-color);
+    stroke-width: var(--cinder-ring-width);
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-halo {
+    stroke: var(--cinder-ring-offset-color);
+    stroke-width: calc(var(--cinder-ring-width)  + var(--cinder-ring-offset)  + var(--cinder-ring-offset));
+    filter: none;
+  }
+
+  @media (forced-colors: active) {
+    .cinder-line-chart__focus-ring-halo {
+      display: none;
+    }
+
+    .cinder-line-chart__focus-ring, .cinder-line-chart__focus-ring-connector, .cinder-line-chart__focus-ring-dot {
+      fill: none;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      filter: none;
+    }
+
+    .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+      fill: transparent;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      vector-effect: non-scaling-stroke;
+      filter: none;
+    }
   }
 
   .cinder-line-chart__tick-label {
@@ -5680,6 +6159,116 @@
   }
 }
 
+/* src/components/media-controls/media-controls.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-media-controls {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-media-controls__button {
+    display: inline-flex;
+    justify-content: center;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    cursor: pointer;
+    font-size: var(--cinder-text-sm);
+    min-width: 2rem;
+    min-height: 2rem;
+    transition: background-color .15s, border-color .15s;
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  @media (hover: hover) {
+    .cinder-media-controls__button:hover:not(:disabled) {
+      background-color: var(--cinder-surface-raised);
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-media-controls__button:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: 0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset)  + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-media-controls__button:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .cinder-media-controls__button[data-cinder-state="playing"] {
+    background-color: var(--cinder-surface-raised);
+  }
+
+  .cinder-media-controls__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items:  center;
+  }
+
+  .cinder-media-controls__svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .cinder-media-controls__svg--loading {
+    animation: cinder-media-controls-spin 1s linear infinite;
+  }
+
+  @keyframes cinder-media-controls-spin {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-media-controls__svg--loading {
+      animation: none;
+    }
+  }
+
+  .cinder-media-controls__label {
+    white-space: nowrap;
+  }
+
+  .cinder-media-controls[data-cinder-layout="compact"] .cinder-media-controls__button {
+    padding: var(--cinder-space-1);
+  }
+
+  .cinder-media-controls__progress {
+    flex: 1;
+    min-width: 4rem;
+  }
+
+  .cinder-media-controls__progress-track {
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-border);
+    overflow: hidden;
+    height: .25rem;
+  }
+
+  .cinder-media-controls__progress-fill {
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-accent);
+    height: 100%;
+    transition: width .1s;
+  }
+}
+
 /* src/components/dropdown/dropdown.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -6100,6 +6689,59 @@
   }
 }
 
+/* src/components/matrix-chart/matrix-chart.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-matrix-chart {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-matrix-chart__description {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+    margin: 0;
+  }
+
+  .cinder-matrix-chart__viewport {
+    position: relative;
+  }
+
+  .cinder-matrix-chart svg {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .cinder-matrix-chart__cell {
+    rx: 2;
+    stroke: var(--cinder-surface);
+    stroke-width: 1.5;
+  }
+
+  .cinder-matrix-chart__cell-label {
+    font-size: var(--cinder-text-xs);
+    pointer-events: none;
+  }
+
+  .cinder-matrix-chart__tick-label {
+    fill: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-matrix-chart__state {
+    position: absolute;
+    display: grid;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+    place-items:  center;
+    inset: 0;
+  }
+}
+
 /* src/components/modal/modal.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -6878,19 +7520,151 @@
     right: -8px;
   }
 
-  .cinder-popover[data-cinder-placement^="left"] .cinder-popover__arrow:after {
-    content: "";
-    position: absolute;
-    border-top: 7px solid #0000;
-    border-bottom: 7px solid #0000;
-    border-left: 7px solid var(--cinder-surface);
-    top: -7px;
-    right: 2px;
+  .cinder-popover[data-cinder-placement^="left"] .cinder-popover__arrow:after {
+    content: "";
+    position: absolute;
+    border-top: 7px solid #0000;
+    border-bottom: 7px solid #0000;
+    border-left: 7px solid var(--cinder-surface);
+    top: -7px;
+    right: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-popover {
+      transition: none;
+    }
+  }
+}
+
+/* src/components/pricing-card/pricing-card.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-pricing-card {
+    container-type: inline-size;
+    container-name: cinder-pricing-card;
+    display: flex;
+    border-radius: var(--cinder-radius-lg);
+    background: var(--cinder-surface-raised);
+    border: 1px solid var(--cinder-border-muted);
+    color: var(--cinder-text);
+    box-shadow: var(--cinder-shadow-sm);
+    overflow: hidden;
+    transition: border-color var(--cinder-duration-fast) var(--cinder-ease-standard), box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
+    flex-direction: column;
+    inline-size: 100%;
+  }
+
+  .cinder-pricing-card[data-cinder-selected] {
+    border-color: var(--cinder-accent);
+    box-shadow: var(--cinder-shadow-sm), 0 0 0 2px color-mix(in oklch, var(--cinder-accent), transparent 70%);
+  }
+
+  .cinder-pricing-card__header {
+    display: flex;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-4) var(--cinder-space-4) var(--cinder-space-3);
+    border-bottom: 1px solid var(--cinder-border-muted);
+    flex-direction: column;
+  }
+
+  .cinder-pricing-card[data-cinder-selected] .cinder-pricing-card__header {
+    background: color-mix(in oklch, var(--cinder-accent), transparent 92%);
+  }
+
+  .cinder-pricing-card__heading-row {
+    display: flex;
+    justify-content: space-between;
+    align-items:  center;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-pricing-card__selected-flag {
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    letter-spacing: .025em;
+    text-transform: uppercase;
+    color: var(--cinder-accent-text);
+    background: color-mix(in oklch, var(--cinder-accent), transparent 85%);
+    border-radius: var(--cinder-radius-full);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    flex-shrink: 0;
+    line-height: 1;
+  }
+
+  .cinder-pricing-card__name {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+    color: var(--cinder-text);
+    letter-spacing: .025em;
+    text-transform: uppercase;
+    margin: 0;
+  }
+
+  .cinder-pricing-card[data-cinder-selected] .cinder-pricing-card__name {
+    color: var(--cinder-accent-text);
+  }
+
+  .cinder-pricing-card__price {
+    font-size: var(--cinder-text-3xl);
+    font-weight: var(--cinder-font-bold);
+    color: var(--cinder-text);
+    margin: 0;
+    line-height: 1;
+  }
+
+  .cinder-pricing-card__body {
+    display: flex;
+    gap: var(--cinder-space-3);
+    padding: var(--cinder-space-4);
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .cinder-pricing-card__features {
+    list-style: none;
+    display: flex;
+    gap: var(--cinder-space-2);
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+  }
+
+  .cinder-pricing-card__feature {
+    display: flex;
+    align-items: baseline;
+    gap: var(--cinder-space-2);
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+  }
+
+  .cinder-pricing-card__feature:before {
+    content: "";
+    display: inline-block;
+    border-radius: var(--cinder-radius-full);
+    background: var(--cinder-accent);
+    flex-shrink: 0;
+    block-size: .375rem;
+    inline-size: .375rem;
+    translate: 0 .1em;
+  }
+
+  .cinder-pricing-card__caveat {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+    margin: 0;
+    font-style: italic;
+  }
+
+  .cinder-pricing-card__footer {
+    padding: var(--cinder-space-3) var(--cinder-space-4) var(--cinder-space-4);
+    border-top: 1px solid var(--cinder-border-muted);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .cinder-popover {
-      transition: none;
+  @container cinder-pricing-card (width <= 16rem) {
+    .cinder-pricing-card__price {
+      font-size: var(--cinder-text-2xl);
     }
   }
 }
@@ -8376,6 +9150,120 @@
   }
 }
 
+/* src/components/share-card/share-card.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-share-card {
+    display: flex;
+    gap: var(--cinder-space-2);
+    padding: var(--cinder-space-3);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    flex-direction: column;
+  }
+
+  .cinder-share-card__preview {
+    border-radius: var(--cinder-radius-sm);
+    overflow: hidden;
+    border: 1px solid var(--cinder-border);
+  }
+
+  .cinder-share-card__meta {
+    display: flex;
+    gap: var(--cinder-space-1);
+    flex-direction: column;
+  }
+
+  .cinder-share-card__title {
+    font-weight: 600;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    margin: 0;
+  }
+
+  .cinder-share-card__description {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    margin: 0;
+  }
+
+  .cinder-share-card__value {
+    display: flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background-color: var(--cinder-surface-inset);
+    font-size: var(--cinder-text-xs);
+    font-family: var(--cinder-font-mono, monospace);
+    min-width: 0;
+  }
+
+  .cinder-share-card__value-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--cinder-text-muted);
+    user-select: all;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cinder-share-card__actions {
+    display: flex;
+    gap: var(--cinder-space-1);
+    flex-wrap: wrap;
+  }
+
+  .cinder-share-card__action {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    cursor: pointer;
+    font-size: var(--cinder-text-sm);
+    white-space: nowrap;
+    transition: background-color .15s, border-color .15s;
+    font-weight: 500;
+  }
+
+  @media (hover: hover) {
+    .cinder-share-card__action:hover {
+      background-color: var(--cinder-surface-raised);
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-share-card__action:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: 0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset)  + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-share-card__action[data-cinder-copied] {
+    color: var(--cinder-color-success-fg);
+    border-color: var(--cinder-color-success-border);
+  }
+
+  .cinder-share-card__action-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items:  center;
+  }
+
+  .cinder-share-card__icon {
+    width: 1em;
+    height: 1em;
+  }
+}
+
 /* src/components/sheet/sheet.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -8553,6 +9441,35 @@
   }
 }
 
+/* src/components/shortcut-hint/shortcut-hint.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-shortcut-hint {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-shortcut-hint__label {
+    color: var(--cinder-text);
+  }
+
+  .cinder-shortcut-hint__keys {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    flex-shrink: 0;
+  }
+
+  .cinder-shortcut-hint__separator {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    user-select: none;
+    line-height: 1;
+  }
+}
+
 /* src/components/navigation-item/navigation-item.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -9239,6 +10156,104 @@
   }
 }
 
+/* src/components/spectrogram/spectrogram.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-spectrogram {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-spectrogram__description {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+    margin: 0;
+  }
+
+  .cinder-spectrogram__viewport {
+    position: relative;
+  }
+
+  .cinder-spectrogram svg {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .cinder-spectrogram__cell {
+    stroke: none;
+  }
+
+  .cinder-spectrogram__tick-label {
+    fill: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-spectrogram__state {
+    position: absolute;
+    display: grid;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+    place-items:  center;
+    inset: 0;
+  }
+}
+
+/* src/components/spectrum-chart/spectrum-chart.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-spectrum-chart {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-spectrum-chart__description {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+    margin: 0;
+  }
+
+  .cinder-spectrum-chart__viewport {
+    position: relative;
+  }
+
+  .cinder-spectrum-chart svg {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .cinder-spectrum-chart__bar {
+    fill: var(--cinder-chart-series-1);
+    rx: 2;
+  }
+
+  .cinder-spectrum-chart__grid-line {
+    stroke: var(--cinder-border-muted);
+    stroke-dasharray: 3 3;
+  }
+
+  .cinder-spectrum-chart__tick-label {
+    fill: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-spectrum-chart__state {
+    position: absolute;
+    display: grid;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+    place-items:  center;
+    inset: 0;
+  }
+}
+
 /* src/components/spinner/spinner.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -9772,8 +10787,19 @@
   .cinder-status-dot[data-cinder-status="neutral"] {
     --cinder-status-dot-color: var(--cinder-text-muted);
   }
+
+  .cinder-status-dot[data-cinder-status="success"] {
+    --cinder-status-dot-color: var(--cinder-success);
+  }
+
+  .cinder-status-dot[data-cinder-status="accent"] {
+    --cinder-status-dot-color: var(--cinder-accent);
+  }
 }
 
+/* src/components/subscription-badge/subscription-badge.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
 /* src/components/surface/surface.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 
@@ -11199,3 +12225,59 @@
     max-inline-size: 100%;
   }
 }
+
+/* src/components/waveform/waveform.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-waveform {
+    display: grid;
+    gap: var(--cinder-space-2);
+    color: var(--cinder-text);
+  }
+
+  .cinder-waveform__description {
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+    margin: 0;
+  }
+
+  .cinder-waveform__viewport {
+    position: relative;
+  }
+
+  .cinder-waveform svg {
+    display: block;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .cinder-waveform__baseline {
+    stroke: var(--cinder-border-muted);
+    stroke-width: 1;
+  }
+
+  .cinder-waveform__path {
+    fill: none;
+    stroke: var(--cinder-chart-series-1);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .cinder-waveform__bar {
+    fill: var(--cinder-chart-series-1);
+    rx: 1;
+  }
+
+  .cinder-waveform__state {
+    position: absolute;
+    display: grid;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+    place-items:  center;
+    inset: 0;
+  }
+}