@layer components {
  .ui-waterfall{display:grid;gap:2px;padding:var(--ui-space-md) var(--ui-space-lg) var(--ui-space-lg);border-radius:var(--ui-radius-xl);background:linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));box-shadow:var(--ui-elevation-rise-1)}

  .ui-waterfall-axis {
    margin-bottom: var(--ui-space-xs);
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .65625rem/1 var(--font-family-mono);
    grid-template-columns: 7.5rem 1fr;
    display: grid;
  }

  .ui-waterfall-axis > div {
    justify-content: space-between;
    display: flex;
  }

  .ui-waterfall-row {
    grid-template-columns: 7.5rem 1fr;
    align-items: center;
    min-height: 1.75rem;
    font-size: .78125rem;
    display: grid;
  }

  .ui-waterfall-row > span {
    color: var(--ui-text-strong);
    font-family: var(--font-family-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .71875rem;
    overflow: hidden;
  }

  .ui-waterfall-track {
    background: repeating-linear-gradient(90deg, var(--ui-line-hair) 0 1px, transparent 1px 25%);
    height: 100%;
    position: relative;
  }

  .ui-waterfall-track > i {
    background: var(--ui-text-strong);
    border-radius: 3px;
    height: 8px;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
  }

  @media (forced-colors: active) {
    .ui-waterfall-track > i {
      box-sizing: border-box;
      border: 1px solid canvastext;
    }
  }

  .ui-waterfall-track > i[data-tone="muted"] {
    background: var(--ui-line-mark);
  }

  .ui-waterfall-track > i[data-tone="blocking"] {
    background: var(--ui-tone-amber);
  }

  .ui-waterfall-mark {
    background: var(--ui-status-danger);
    border-radius: 1px;
    width: 2px;
    margin-left: -1px;
    position: absolute;
    top: 2px;
    bottom: 2px;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}:root,:host{--font-mono:"IBM Plex Mono"}}