/*! Runway UI | MIT License | https://github.com/kahwee/runway-ui */
/* Import all modules, or select individual styles. No global reset. */
@layer runway-ui.tokens,
  runway-ui.primitives,
  runway-ui.icons,
  runway-ui.meters,
  runway-ui.patterns,
  runway-ui.simulation,
  runway-ui.layout,
  runway-ui.charts,
  runway-ui.observatory,
  runway-ui.dialog,
  runway-ui.themes;
@layer runway-ui.tokens {
  :where(.rw-ui) {
    --rw-bg: #e9eadc;
    --rw-surface: #fffbee;
    --rw-raised: #f5f0df;
    --rw-ink: #2d4640;
    --rw-muted: #5d6e5c;
    --rw-line: #cdd2b9;
    --rw-accent: #355c4b;
    --rw-on-accent: #fffdf6;
    --rw-soft: #edf0e4;
    --rw-gold: #8a6326;
    --rw-danger: #a34f3f;
    --rw-focus: #bb662e;
    --rw-radius: 16px;
    --rw-pill: 999px;
    --rw-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --rw-highlight: color-mix(in oklch, var(--rw-surface) 65%, white);
    --rw-control-edge: color-mix(in oklch, var(--rw-line) 82%, var(--rw-ink));
    --rw-control-depth: 3px;
    --rw-select-inset: 16px;
    --rw-shadow:
      inset 0 1px var(--rw-highlight), 0 3px 0 color-mix(in oklch, var(--rw-line) 80%, transparent),
      0 12px 28px color-mix(in oklch, var(--rw-ink) 8%, transparent);
    --rw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rw-display-font: ui-rounded, "Avenir Next", var(--rw-font);
    --rw-control-font: 13px;
    --rw-control-block: 11px;
    --rw-control-inline: 15px;
    --rw-control-gap: 15px;
    --rw-panel-padding: 22px;
    --rw-field-padding: 10px;
    --rw-content-gap: 10px;
    --rw-space: 14px;
    --rw-choice-padding: 15px;
    color: var(--rw-ink);
    font-family: var(--rw-font);
    color-scheme: light;
  }
  :where(.rw-ui)[data-density="compact"] {
    --rw-control-block: 8px;
    --rw-control-inline: 12px;
    --rw-control-gap: 10px;
    --rw-panel-padding: 16px;
    --rw-field-padding: 8px;
    --rw-content-gap: 8px;
    --rw-space: 10px;
    --rw-choice-padding: 11px;
  }
}

/* Shared raised-control recipe. Native skin uses the same selectors and tokens. */
@layer runway-ui.primitives {
  :where(
    .rw-button,
    .rw-native button,
    .rw-native input[type="submit"],
    .rw-native input[type="button"]
  ) {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rw-control-gap);
    padding: var(--rw-control-block) var(--rw-control-inline);
    border: 1px solid var(--rw-button-border, var(--rw-line));
    border-radius: var(--rw-radius);
    color: var(--rw-button-ink, var(--rw-ink));
    background-color: var(--rw-button-bg, var(--rw-soft));
    background-image: linear-gradient(
      to bottom,
      color-mix(in oklch, var(--rw-button-bg, var(--rw-soft)) 94%, white),
      var(--rw-button-bg, var(--rw-soft))
    );
    box-shadow:
      inset 0 1px var(--rw-highlight),
      0 var(--rw-control-depth) 0 var(--rw-control-edge),
      0 calc(var(--rw-control-depth) + 3px) 8px color-mix(in oklch, var(--rw-ink) 7%, transparent);
    font: 600 var(--rw-control-font) / 1.3 var(--rw-font);
    cursor: pointer;
    transition:
      translate 0.22s var(--rw-spring, ease),
      box-shadow 0.14s,
      background-color 0.14s;
  }
  .rw-button[data-variant="primary"],
  :where(.rw-native) :where(button[type="submit"], input[type="submit"]) {
    --rw-button-bg: var(--rw-accent);
    --rw-button-ink: var(--rw-on-accent);
    --rw-button-border: var(--rw-accent);
  }
  .rw-button[data-variant="secondary"] {
    --rw-button-bg: var(--rw-surface);
    --rw-button-border: var(--rw-line);
  }
  .rw-button[data-variant="danger"] {
    --rw-button-bg: color-mix(in oklch, var(--rw-danger) 12%, var(--rw-surface));
    --rw-button-ink: var(--rw-danger);
    --rw-button-border: color-mix(in oklch, var(--rw-danger) 30%, var(--rw-line));
  }
  :where(
    .rw-button,
    .rw-native button,
    .rw-native input[type="submit"],
    .rw-native input[type="button"]
  ):hover:not(:disabled) {
    translate: 0 -2px;
  }
  :where(
    .rw-button,
    .rw-native button,
    .rw-native input[type="submit"],
    .rw-native input[type="button"]
  ):active:not(:disabled) {
    translate: 0 var(--rw-control-depth);
    box-shadow: inset 0 1px 3px color-mix(in oklch, var(--rw-ink) 15%, transparent);
  }
  :where(
    .rw-button,
    .rw-slot,
    .rw-choice,
    .rw-disclosure > summary,
    .rw-native button,
    .rw-native input
  ):focus-visible {
    outline: 3px solid var(--rw-focus);
    outline-offset: 3px;
  }
  :where(
    .rw-button,
    .rw-slot,
    .rw-choice,
    .rw-native button,
    .rw-native input[type="submit"],
    .rw-native input[type="button"]
  ):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
  }
  :where(.rw-slot, .rw-choice):hover:not(:disabled) {
    filter: brightness(0.97);
  }
  .rw-button[data-size="sm"] {
    padding: 7px 10px;
    font-size: 11px;
    gap: 8px;
  }
  .rw-button[data-size="lg"] {
    padding: 14px 20px;
    font-size: 14px;
    gap: 16px;
  }
  .rw-button[data-block] {
    inline-size: 100%;
  }
  .rw-button[aria-busy="true"] {
    cursor: progress;
  }
  :where(.rw-ui)[data-depth="flat"] :where(.rw-button, .rw-native button) {
    box-shadow: none;
    background-image: none;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.rw-button, .rw-native button, .rw-native input) {
      transition: none;
      translate: none !important;
    }
  }
  @media (forced-colors: active) {
    :where(.rw-button, .rw-native button, .rw-native input) {
      background-image: none;
      box-shadow: none;
      border-color: ButtonText;
    }
  }
}

/* Fields composition. Keep component order stable. */
@layer runway-ui.primitives {
  :where(
    .rw-input,
    .rw-native
      input:not(
        [type="button"],
        [type="submit"],
        [type="checkbox"],
        [type="radio"],
        [type="range"]
      ),
    .rw-native select,
    .rw-native textarea
  ) {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--rw-ink);
    background-color: var(--rw-raised);
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    padding: var(--rw-field-padding);
    font: inherit;
    line-height: 1.4;
    box-shadow:
      inset 0 2px 3px color-mix(in oklch, var(--rw-ink) 5%, transparent),
      0 1px var(--rw-highlight);
  }
  :where(.rw-input, .rw-native input, .rw-native select, .rw-native textarea):focus-visible {
    outline: 3px solid var(--rw-focus);
    outline-offset: 3px;
  }
  :where(.rw-input, .rw-native input, .rw-native select, .rw-native textarea):disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  :where(.rw-input, .rw-native input, .rw-native textarea)[readonly] {
    background-color: var(--rw-soft);
  }
  :where(.rw-input, .rw-native input, .rw-native select, .rw-native textarea):is(
    [aria-invalid="true"],
    :user-invalid
  ) {
    border-color: var(--rw-danger);
  }
  :where(select.rw-input, .rw-native select):not([multiple]):is(:not([size]), [size="1"]) {
    appearance: none;
    padding-inline-end: calc(var(--rw-select-inset) + 24px);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--rw-muted) 50%),
      linear-gradient(135deg, var(--rw-muted) 50%, transparent 50%);
    background-position:
      right calc(var(--rw-select-inset) + 5px) center,
      right var(--rw-select-inset) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  :where(select.rw-input, .rw-native select):not([multiple]):is(:not([size]), [size="1"]):dir(rtl) {
    background-position:
      left var(--rw-select-inset) center,
      left calc(var(--rw-select-inset) + 5px) center;
  }
  :where(select.rw-input, .rw-native select):disabled {
    cursor: not-allowed;
  }
}

@layer runway-ui.primitives {
  /* Native customizable single-select. Lists and multiple selects retain OS behavior. */
  @supports (appearance: base-select) {
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      ),
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )::picker(select) {
      appearance: base-select;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      ) {
      background-image: none;
      padding-inline-end: var(--rw-select-inset);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-block-size: 38px;
      white-space: normal;
      text-align: start;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )::picker-icon {
      content: "";
      flex: 0 0 7px;
      inline-size: 7px;
      block-size: 7px;
      border-inline-end: 1.5px solid currentColor;
      border-block-end: 1.5px solid currentColor;
      rotate: 45deg;
      margin: -4px 3px 0 8px;
      color: var(--rw-muted);
      transition: rotate 120ms;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      ):open::picker-icon {
      rotate: 225deg;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )::picker(select) {
      color: var(--rw-ink);
      background: var(--rw-surface);
      border: 1px solid var(--rw-line);
      border-radius: var(--rw-radius);
      padding: 5px;
      margin-block: 5px;
      min-inline-size: anchor-size(inline);
      max-inline-size: min(40rem, calc(100dvi - 24px));
      max-block-size: min(24rem, 60dvb);
      overflow: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--rw-line) transparent;
      box-shadow: 0 8px 24px color-mix(in oklch, var(--rw-ink) 18%, transparent);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option {
      display: flex;
      align-items: center;
      gap: 10px;
      min-block-size: 38px;
      box-sizing: border-box;
      padding: 9px 12px;
      border-radius: max(3px, calc(var(--rw-radius) - 3px));
      white-space: normal;
      overflow-wrap: anywhere;
      text-align: start;
      cursor: pointer;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option:hover:not(:disabled),
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option:focus-visible {
      background: var(--rw-soft);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option:checked {
      background: color-mix(in oklch, var(--rw-accent) 12%, var(--rw-surface));
      color: var(--rw-ink);
      font-weight: 650;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option:focus-visible {
      outline: 2px solid var(--rw-focus);
      outline-offset: -2px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option::checkmark {
      content: "✓";
      order: 2;
      margin-inline-start: auto;
      padding-inline-start: 12px;
      color: var(--rw-accent);
      font-weight: 800;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      optgroup
      > legend {
      padding: 10px 12px 6px;
      color: var(--rw-muted);
      font-size: 0.85em;
      font-weight: 700;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      selectedcontent {
      display: flex;
      align-items: center;
      gap: 8px;
      min-inline-size: 0;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      selectedcontent
      small {
      display: none;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      > button {
      all: unset;
      display: flex;
      align-items: center;
      inline-size: 100%;
      cursor: inherit;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option
      > span:not(.rw-option__icon) {
      display: grid;
      min-inline-size: 0;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option
      small {
      color: var(--rw-muted);
      font-size: 0.82em;
      font-weight: 400;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      .rw-option__icon {
      display: grid;
      place-items: center;
      flex: 0 0 2em;
      inline-size: 2em;
      block-size: 2em;
      border-radius: 5px;
      background: var(--rw-soft);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      selectedcontent
      .rw-option__icon {
      inline-size: 1.4em;
      block-size: 1.4em;
      flex-basis: 1.4em;
    }
    @supports (color: attr(data-color type(<color>), red)) {
      :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
          :not([size]),
          [size="1"]
        )
        option[data-color]::before {
        content: "";
        flex: 0 0 0.7em;
        inline-size: 0.7em;
        block-size: 0.7em;
        border-radius: 50%;
        background: attr(data-color type(<color>), var(--rw-accent));
      }
    }
  }
}

@layer runway-ui.primitives {
  /* Select variants: set data-* on the select. Sizes, shapes, looks and tones only change tokens and radii, so every variant keeps the same markup. */
  @supports (appearance: base-select) {
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-size="sm"] {
      --rw-field-padding: 6px;
      font-size: 12px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-size="lg"] {
      --rw-field-padding: 15px;
      font-size: 16px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-shape="pill"] {
      border-radius: 999px;
      padding-inline: 1.3em;
    }
    :where(select.rw-input, .rw-native select):not(
        [data-picker="native"]
      )[data-shape="pill"]::picker(select) {
      border-radius: 28px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-shape="pill"]
      option {
      border-radius: 999px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-shape="square"] {
      border-radius: 4px;
    }
    :where(select.rw-input, .rw-native select):not(
        [data-picker="native"]
      )[data-shape="square"]::picker(select) {
      border-radius: 4px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-shape="square"]
      option {
      border-radius: 3px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-variant="filled"] {
      background: var(--rw-accent);
      color: var(--rw-on-accent);
      border-color: var(--rw-accent);
      box-shadow: 0 3px 0 color-mix(in oklch, var(--rw-accent) 60%, black);
    }
    :where(select.rw-input, .rw-native select):not(
        [data-picker="native"]
      )[data-variant="filled"]::picker-icon {
      color: inherit;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-variant="filled"]
      .rw-option__icon {
      background: color-mix(in oklch, var(--rw-on-accent) 22%, transparent);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-variant="outline"] {
      background: transparent;
      border: 2px solid var(--rw-accent);
      box-shadow: none;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-variant="ghost"] {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    :where(select.rw-input, .rw-native select):not(
        [data-picker="native"]
      )[data-variant="ghost"]:hover:not(:disabled) {
      background: var(--rw-soft);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-tone="coral"] {
      --rw-accent: #e5533a;
      --rw-soft: #ffe6df;
      --rw-on-accent: #fff;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-tone="mint"] {
      --rw-accent: #139878;
      --rw-soft: #dcf6ee;
      --rw-on-accent: #fff;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-tone="sky"] {
      --rw-accent: #2f6fe0;
      --rw-soft: #e0ecff;
      --rw-on-accent: #fff;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-tone="sun"] {
      --rw-accent: #b86e00;
      --rw-soft: #fff0cc;
      --rw-on-accent: #fff;
    }
    :where(select.rw-input, .rw-native select):not(
        [data-picker="native"]
      )[data-density="compact"]::picker(select) {
      padding: 4px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-density="compact"]
      option {
      padding: 6px 10px;
      column-gap: 9px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-density="roomy"]
      option {
      padding: 14px 14px;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-checkmark="off"]
      option::checkmark {
      display: none;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-stagger="off"]
      option {
      transition: background-color 0.12s;
    }
    @starting-style {
      :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
          :not([size]),
          [size="1"]
        )[data-stagger="off"]
        option {
        opacity: 1;
        translate: none;
      }
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-columns="2"] {
      --rw-picker-columns: 2;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )[data-columns="3"] {
      --rw-picker-columns: 3;
    }
    :where(select.rw-input, .rw-native select):not(
        [data-picker="native"]
      )[data-columns]:open::picker(select) {
      display: grid;
      grid-template-columns: repeat(var(--rw-picker-columns, 1), minmax(0, 1fr));
      gap: 4px;
      min-inline-size: max(anchor-size(inline), calc(var(--rw-picker-columns, 1) * 14rem));
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      optgroup {
      display: contents;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      optgroup
      > legend {
      grid-column: 1 / -1;
      padding: 12px 12px 4px;
      font: 700 0.68em / 1.2 var(--rw-font);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--rw-muted);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      hr {
      grid-column: 1 / -1;
      inline-size: 100%;
      margin: 6px 8px;
      border: 0;
      border-block-start: 1px solid var(--rw-line);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      .rw-option__avatar {
      display: grid;
      place-items: center;
      inline-size: 2.1em;
      block-size: 2.1em;
      border-radius: 50%;
      font: 700 0.75em / 1 var(--rw-font);
      color: #fff;
      background: var(--rw-accent);
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      selectedcontent
      .rw-option__avatar {
      inline-size: 1.6em;
      block-size: 1.6em;
      font-size: 0.7em;
    }
  }
}

@layer runway-ui.primitives {
  @media (prefers-reduced-motion: reduce) {
    :where(select.rw-input, .rw-native select)::picker-icon,
    :where(select.rw-input, .rw-native select)::picker(select),
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option {
      transition: none !important;
    }
    :where(select.rw-input, .rw-native select):not([data-picker="native"]):not([multiple]):is(
        :not([size]),
        [size="1"]
      )
      option:hover
      .rw-option__icon {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    :where(.rw-input, .rw-native input, .rw-native select, .rw-native textarea) {
      box-shadow: none;
    }
    :where(select.rw-input, .rw-native select):not([multiple]):is(:not([size]), [size="1"]) {
      appearance: auto;
      background-image: none;
      padding-inline-end: var(--rw-field-padding);
    }
    :where(select.rw-input, .rw-native select)::picker(select) {
      appearance: auto;
      background: Canvas;
      color: CanvasText;
      border-color: CanvasText;
    }
    :where(select.rw-input, .rw-native select) option:checked {
      background: Highlight;
      color: HighlightText;
    }
  }
}


/* Forms composition. Keep component order stable. */
@layer runway-ui.primitives {
  /* Switch: <input type="checkbox" role="switch" class="rw-switch"> inside a .rw-toggle label. */
  .rw-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    cursor: pointer;
    font: 600 var(--rw-control-font, 13px) / 1.35 var(--rw-font);
  }
  .rw-toggle small {
    display: block;
    color: var(--rw-muted);
    font-weight: 400;
    font-size: 0.85em;
  }
  .rw-toggle[data-layout="row"] {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    inline-size: 100%;
    padding: var(--rw-choice-padding, 14px);
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
  }
  .rw-toggle:has(:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
  }
  .rw-switch {
    --_thumb: 1.15em;
    --_pad: 0.22em;
    appearance: none;
    flex: none;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    inline-size: 2.9em;
    block-size: 1.65em;
    font-size: var(--rw-control-font, 13px);
    border: 1px solid var(--rw-control-edge);
    border-radius: 999px;
    background: var(--rw-soft);
    cursor: pointer;
    box-shadow: inset 0 2px 3px color-mix(in oklch, var(--rw-ink) 10%, transparent);
    transition:
      background-color 0.2s,
      border-color 0.2s,
      box-shadow 0.2s;
    &::before {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: var(--_pad);
      translate: 0 -50%;
      inline-size: var(--_thumb);
      block-size: var(--_thumb);
      border-radius: 50%;
      background: var(--rw-surface);
      box-shadow:
        0 2px 0 color-mix(in oklch, var(--rw-ink) 18%, transparent),
        0 3px 6px color-mix(in oklch, var(--rw-ink) 14%, transparent);
      transition:
        inset-inline-start 0.32s var(--rw-spring, ease),
        inline-size 0.18s var(--rw-spring, ease);
    }
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: calc(var(--_pad) + (var(--_thumb) - 0.75em) / 2);
      translate: 0 -50%;
      inline-size: 0.75em;
      block-size: 0.75em;
      background: var(--rw-accent);
      mask: var(--rw-icon-check) center / contain no-repeat;
      opacity: 0;
      scale: 0.4;
      transition:
        inset-inline-start 0.32s var(--rw-spring, ease),
        opacity 0.2s,
        scale 0.32s var(--rw-spring, ease);
    }
    &:checked::after {
      inset-inline-start: calc(100% - var(--_thumb) - var(--_pad) + (var(--_thumb) - 0.75em) / 2);
      opacity: 1;
      scale: 1;
    }
    &:hover:not(:disabled)::before {
      scale: 1.06;
    }
    &:active:not(:disabled)::before {
      inline-size: calc(var(--_thumb) * 1.3);
    }
    &:checked {
      background: var(--rw-accent);
      border-color: var(--rw-accent);
      box-shadow: inset 0 2px 3px color-mix(in oklch, black 22%, transparent);
    }
    &:checked::before {
      inset-inline-start: calc(100% - var(--_thumb) - var(--_pad));
    }
    &:checked:active:not(:disabled)::before {
      inset-inline-start: calc(100% - var(--_thumb) * 1.3 - var(--_pad));
    }
    &:focus-visible {
      outline: 3px solid var(--rw-focus);
      outline-offset: 3px;
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
}

@layer runway-ui.primitives {
  :where(.rw-ui[data-appearance="quiet"]) .rw-switch {
    box-shadow: none;
    &::before {
      box-shadow: 0 1px 2px color-mix(in oklch, var(--rw-ink) 16%, transparent);
      transition: inset-inline-start 0.15s ease;
    }
    &::after {
      transition:
        inset-inline-start 0.15s ease,
        opacity 0.15s ease;
    }
    &:checked {
      box-shadow: none;
    }
    &:hover:not(:disabled)::before {
      scale: 1;
    }
    &:active:not(:disabled)::before {
      inline-size: var(--_thumb);
    }
    &:checked:active:not(:disabled)::before {
      inset-inline-start: calc(100% - var(--_thumb) - var(--_pad));
    }
  }
}

@layer runway-ui.primitives {
  /* Checkbox and radio: native inputs with a drawn box. A checkmark reuses the generated Phosphor icon token. */
  .rw-check {
    appearance: none;
    flex: none;
    box-sizing: border-box;
    margin: 0;
    inline-size: 1.35em;
    block-size: 1.35em;
    font-size: var(--rw-control-font, 13px);
    display: inline-grid;
    place-content: center;
    border: 2px solid var(--rw-control-edge);
    border-radius: 0.42em;
    background: var(--rw-raised);
    cursor: pointer;
    transition:
      background-color 0.15s,
      border-color 0.15s,
      scale 0.2s var(--rw-spring, ease);
    &::before {
      content: "";
      inline-size: 0.95em;
      block-size: 0.95em;
      background: var(--rw-on-accent);
      mask: var(--rw-icon-check) center / contain no-repeat;
      scale: 0;
      transition: scale 0.22s var(--rw-spring, ease);
    }
    &:checked {
      background: var(--rw-accent);
      border-color: var(--rw-accent);
    }
    &:checked::before {
      scale: 1;
    }
    &:indeterminate {
      background: var(--rw-accent);
      border-color: var(--rw-accent);
    }
    &:indeterminate::before {
      mask-image: var(--rw-icon-minus);
      scale: 1;
    }
    &[type="radio"] {
      border-radius: 50%;
    }
    &[type="radio"]::before {
      inline-size: 0.55em;
      block-size: 0.55em;
      border-radius: 50%;
      mask: none;
    }
    &:active:not(:disabled) {
      scale: 0.9;
    }
    &:focus-visible {
      outline: 3px solid var(--rw-focus);
      outline-offset: 3px;
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

@layer runway-ui.primitives {
  /* Slider: native range. Optional behaviors/forms.js sets --rw-fill and the <output>. */
  .rw-range {
    --_track: 10px;
    --_thumb: 26px;
    appearance: none;
    inline-size: 100%;
    block-size: calc(var(--_thumb) + 6px);
    margin: 0;
    background: transparent;
    cursor: pointer;
    accent-color: var(--rw-accent);
    &::-webkit-slider-runnable-track {
      block-size: var(--_track);
      border-radius: 999px;
      background: linear-gradient(
        to right,
        var(--rw-accent) var(--rw-fill, 0%),
        var(--rw-soft) var(--rw-fill, 0%)
      );
      box-shadow:
        inset 0 0 0 1px var(--rw-line),
        inset 0 2px 3px color-mix(in oklch, var(--rw-ink) 8%, transparent);
    }
    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: var(--_thumb);
      block-size: var(--_thumb);
      margin-block-start: calc((var(--_track) - var(--_thumb)) / 2);
      box-sizing: border-box;
      border: 4px solid var(--rw-accent);
      border-radius: 50%;
      background: var(--rw-surface);
      box-shadow:
        0 3px 0 color-mix(in oklch, var(--rw-accent) 40%, var(--rw-line)),
        0 6px 10px color-mix(in oklch, var(--rw-ink) 14%, transparent);
      transition: scale 0.2s var(--rw-spring, ease);
    }
    &:dir(rtl)::-webkit-slider-runnable-track {
      background: linear-gradient(
        to left,
        var(--rw-accent) var(--rw-fill, 0%),
        var(--rw-soft) var(--rw-fill, 0%)
      );
    }
    &::-moz-range-track {
      block-size: var(--_track);
      border-radius: 999px;
      background: var(--rw-soft);
      box-shadow: inset 0 0 0 1px var(--rw-line);
    }
    &::-moz-range-progress {
      block-size: var(--_track);
      border-radius: 999px;
      background: var(--rw-accent);
    }
    &::-moz-range-thumb {
      inline-size: calc(var(--_thumb) - 8px);
      block-size: calc(var(--_thumb) - 8px);
      border: 4px solid var(--rw-accent);
      border-radius: 50%;
      background: var(--rw-surface);
      box-shadow: 0 3px 0 color-mix(in oklch, var(--rw-accent) 40%, var(--rw-line));
    }
    &:hover:not(:disabled)::-webkit-slider-thumb {
      scale: 1.08;
    }
    &:active:not(:disabled)::-webkit-slider-thumb {
      scale: 1.22;
    }
    &:focus-visible {
      outline: 3px solid var(--rw-focus);
      outline-offset: 4px;
      border-radius: 999px;
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  .rw-range-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    font: 600 var(--rw-control-font, 13px) / 1.35 var(--rw-font);
    & > .rw-range {
      grid-column: 1 / -1;
    }
    & > output,
    & .rw-range__value {
      font-variant-numeric: tabular-nums;
      min-inline-size: 3.2ch;
      text-align: center;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--rw-soft);
      color: var(--rw-accent);
    }
  }
}

@layer runway-ui.primitives {
  /* Quiet appearance keeps native hit targets while reducing decorative weight. */
  :where(.rw-ui[data-appearance="quiet"]) .rw-range {
    --_track: 6px;
    --_thumb: 20px;
    block-size: 32px;
    &::-webkit-slider-runnable-track {
      box-shadow: inset 0 0 0 1px var(--rw-line);
    }
    &::-webkit-slider-thumb {
      border-width: 2px;
      box-shadow: 0 1px 3px color-mix(in oklch, var(--rw-ink) 16%, transparent);
      transition: none;
    }
    &::-moz-range-thumb {
      inline-size: calc(var(--_thumb) - 4px);
      block-size: calc(var(--_thumb) - 4px);
      border-width: 2px;
      box-shadow: 0 1px 3px color-mix(in oklch, var(--rw-ink) 16%, transparent);
    }
    &:is(:hover, :active):not(:disabled)::-webkit-slider-thumb {
      scale: 1;
    }
  }
  :where(.rw-ui[data-appearance="quiet"]) .rw-range-field > output {
    padding: 2px 6px;
    background: transparent;
    color: var(--rw-muted);
    font-weight: 500;
  }
}

@layer runway-ui.primitives {
  /* Field patterns */
  .rw-fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: var(--rw-panel-padding);
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
    display: grid;
    gap: var(--rw-space);
    & > legend {
      padding-inline: 8px;
      font: 650 12px / 1.2 var(--rw-font);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--rw-muted);
    }
  }
  .rw-field {
    display: grid;
    gap: var(--rw-content-gap, 10px);
    min-inline-size: 0;
  }
  .rw-options > legend {
    padding: 0;
    margin-block-end: 10px;
  }
  .rw-field > label:has(+ :required)::after {
    content: " *";
    color: var(--rw-danger);
  }
  .rw-field:has(:user-invalid) > :nth-child(3) {
    color: var(--rw-danger);
  }
  .rw-input::placeholder {
    color: var(--rw-muted);
    opacity: 0.7;
  }
  .rw-input::file-selector-button {
    margin-inline-end: 12px;
    padding: 6px 12px;
    border: 1px solid var(--rw-line);
    border-radius: calc(var(--rw-radius) * 0.6);
    background: var(--rw-soft);
    color: var(--rw-ink);
    font: 600 12px var(--rw-font);
    cursor: pointer;
  }
  .rw-input:autofill {
    box-shadow: inset 0 0 0 100px color-mix(in oklch, var(--rw-gold) 14%, var(--rw-raised));
  }
  @supports (field-sizing: content) {
    textarea.rw-input {
      field-sizing: content;
      min-block-size: 4lh;
      max-block-size: 14lh;
      resize: vertical;
    }
    .rw-input[data-autosize] {
      field-sizing: content;
      min-inline-size: 8ch;
    }
  }
  .rw-input-group {
    min-inline-size: 0;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
    overflow: hidden;
    box-shadow: inset 0 2px 3px color-mix(in oklch, var(--rw-ink) 5%, transparent);
    & > .rw-input {
      flex: 1;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      outline: 0;
    }
    & > :is(span, button:not(.rw-button)) {
      display: grid;
      place-items: center;
      padding-inline: 14px;
      background: var(--rw-soft);
      color: var(--rw-muted);
      font: 600 12px var(--rw-font);
      border: 0;
    }
    &:focus-within {
      outline: 3px solid var(--rw-focus);
      outline-offset: 3px;
    }
    & > .rw-button {
      flex: 0 1 auto;
      max-inline-size: 50%;
      border: 0;
      border-inline-start: 1px solid var(--rw-line);
      border-radius: 0;
      box-shadow: none;
      translate: none;
      &:focus-visible {
        outline: 3px solid var(--rw-focus);
        outline-offset: -4px;
      }
    }
    &:has(:user-invalid, [aria-invalid="true"]) {
      border-color: var(--rw-danger);
    }
  }
}

@layer runway-ui.primitives {
  .rw-options {
    display: grid;
    grid-template-columns: repeat(var(--rw-columns, 2), minmax(0, 1fr));
    gap: var(--rw-space);
    border: 0;
    margin: 0;
    padding: 0;
  }
  .rw-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--rw-choice-padding, 14px);
    border: 2px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
    cursor: pointer;
    transition:
      border-color 0.15s,
      background-color 0.15s,
      translate 0.22s var(--rw-spring, ease);
    & strong,
    & small {
      display: block;
    }
    & small {
      color: var(--rw-muted);
      margin-block-start: 3px;
      font-size: 0.85em;
    }
    line-height: 1.6;
    & > .rw-check {
      align-self: flex-start;
      font-size: inherit;
      line-height: inherit;
      margin-block-start: calc((1lh - 1.35em) / 2);
    }
    &:hover:not(:has(:disabled)) {
      translate: 0 -2px;
    }
    &:has(:checked) {
      border-color: var(--rw-accent);
      background: var(--rw-soft);
    }
    &:has(:focus-visible) {
      outline: 3px solid var(--rw-focus);
      outline-offset: 3px;
    }
    &:has(:disabled) {
      opacity: 0.55;
      cursor: not-allowed;
    }
  }
  .rw-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-block-start: var(--rw-space);
    border-block-start: 1px solid var(--rw-line);
  }
}

@layer runway-ui.primitives {
  @media (prefers-reduced-motion: reduce) {
    .rw-switch,
    .rw-switch::before,
    .rw-switch::after,
    .rw-check,
    .rw-check::before,
    .rw-range::-webkit-slider-thumb,
    .rw-option {
      transition: none;
    }
    .rw-option:hover {
      translate: none;
    }
  }
  @media (forced-colors: active) {
    .rw-switch {
      border-color: ButtonText;
      background: Canvas;
      box-shadow: none;
    }
    .rw-switch:checked {
      background: Highlight;
    }
    .rw-switch::before {
      background: ButtonText;
      box-shadow: none;
    }
    .rw-check {
      border-color: ButtonText;
    }
    .rw-check:checked,
    .rw-check:indeterminate {
      background: Highlight;
    }
    .rw-check::before {
      background: HighlightText;
    }
    .rw-range::-moz-range-track {
      background: ButtonText;
    }
    .rw-range::-moz-range-progress {
      background: Highlight;
    }
    .rw-range::-moz-range-thumb {
      background: Canvas;
      border-color: Highlight;
      box-shadow: none;
    }
    .rw-range::-webkit-slider-runnable-track {
      background: ButtonText;
    }
    .rw-range::-webkit-slider-thumb {
      background: Canvas;
      border-color: Highlight;
      box-shadow: none;
    }
  }
}



@layer runway-ui.primitives {
  :where(.rw-ui)
    :where(
      .rw-button,
      .rw-slot,
      .rw-choice,
      .rw-input,
      .rw-panel,
      .rw-badge,
      .rw-resource,
      .rw-dock
    ) {
    box-sizing: border-box;
  }
  .rw-panel {
    background: linear-gradient(
      155deg,
      var(--rw-surface),
      color-mix(in oklch, var(--rw-surface) 94%, var(--rw-soft))
    );
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    box-shadow: var(--rw-shadow);
    padding: var(--rw-panel-padding);
  }
  .rw-panel__header,
  .rw-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rw-space);
  }
  .rw-stack {
    display: grid;
    gap: var(--rw-space);
  }
  .rw-grid {
    display: grid;
    grid-template-columns: repeat(var(--rw-columns, 3), minmax(0, 1fr));
    gap: var(--rw-space);
  }
  .rw-panel__title {
    margin: 0;
    font: 650 22px / 1.25 var(--rw-display-font, var(--rw-font));
    letter-spacing: -0.03em;
  }
  .rw-muted {
    color: var(--rw-muted);
  }
  .rw-kicker {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--rw-muted);
  }
  .rw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 650;
    padding: 5px 11px;
    border: 1px solid color-mix(in oklch, var(--rw-accent) 15%, var(--rw-soft));
    border-radius: 999px;
    background: var(--rw-soft);
    color: var(--rw-accent);
  }
  .rw-panel[data-elevation="flat"] {
    box-shadow: none;
  }
  .rw-badge::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
  }
  .rw-badge[data-tone="warning"] {
    background: color-mix(in oklch, var(--rw-gold) 12%, var(--rw-surface));
    color: var(--rw-gold);
  }
  .rw-badge[data-tone="danger"] {
    background: color-mix(in oklch, var(--rw-danger) 12%, var(--rw-surface));
    color: var(--rw-danger);
  }
}

/* Generated by scripts/icons.mjs from Phosphor Icons. Do not edit.
   Phosphor Icons — MIT License — Copyright (c) 2020 Phosphor Icons — https://github.com/phosphor-icons/core */
@layer runway-ui.icons {
  :where(.rw-ui) {
    --rw-icon-arrows-clockwise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,48V96a12,12,0,0,1-12,12H168a12,12,0,0,1,0-24h19l-7.8-7.8a75.55,75.55,0,0,0-53.32-22.26h-.43A75.49,75.49,0,0,0,72.39,75.57,12,12,0,1,1,55.61,58.41a99.38,99.38,0,0,1,69.87-28.47H126A99.42,99.42,0,0,1,196.2,59.23L204,67V48a12,12,0,0,1,24,0ZM183.61,180.43a75.49,75.49,0,0,1-53.09,21.63h-.43A75.55,75.55,0,0,1,76.77,179.8L69,172H88a12,12,0,0,0,0-24H40a12,12,0,0,0-12,12v48a12,12,0,0,0,24,0V189l7.8,7.8A99.42,99.42,0,0,0,130,226.06h.56a99.38,99.38,0,0,0,69.87-28.47,12,12,0,0,0-16.78-17.16Z'/%3E%3C/svg%3E");
    --rw-icon-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z'/%3E%3C/svg%3E");
    --rw-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
    --rw-icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E");
    --rw-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E");
    --rw-icon-caret-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
    --rw-icon-caret-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z'/%3E%3C/svg%3E");
    --rw-icon-caret-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z'/%3E%3C/svg%3E");
    --rw-icon-caret-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z'/%3E%3C/svg%3E");
    --rw-icon-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E");
    --rw-icon-arrow-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H69l51.52,51.51a12,12,0,0,1-17,17l-72-72a12,12,0,0,1,0-17l72-72a12,12,0,0,1,17,17L69,116H216A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E");
    --rw-icon-arrow-up-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M204,64V168a12,12,0,0,1-24,0V93L72.49,200.49a12,12,0,0,1-17-17L163,76H88a12,12,0,0,1,0-24H192A12,12,0,0,1,204,64Z'/%3E%3C/svg%3E");
    --rw-icon-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208.49,120.49a12,12,0,0,1-17,0L140,69V216a12,12,0,0,1-24,0V69L64.49,120.49a12,12,0,0,1-17-17l72-72a12,12,0,0,1,17,0l72,72A12,12,0,0,1,208.49,120.49Z'/%3E%3C/svg%3E");
    --rw-icon-arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208.49,152.49l-72,72a12,12,0,0,1-17,0l-72-72a12,12,0,0,1,17-17L116,187V40a12,12,0,0,1,24,0V187l51.51-51.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
    --rw-icon-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M199,125.31l-49.88-18.39L130.69,57a19.92,19.92,0,0,0-37.38,0L74.92,106.92,25,125.31a19.92,19.92,0,0,0,0,37.38l49.88,18.39L93.31,231a19.92,19.92,0,0,0,37.38,0l18.39-49.88L199,162.69a19.92,19.92,0,0,0,0-37.38Zm-63.38,35.16a12,12,0,0,0-7.11,7.11L112,212.28l-16.47-44.7a12,12,0,0,0-7.11-7.11L43.72,144l44.7-16.47a12,12,0,0,0,7.11-7.11L112,75.72l16.47,44.7a12,12,0,0,0,7.11,7.11L180.28,144ZM140,40a12,12,0,0,1,12-12h12V16a12,12,0,0,1,24,0V28h12a12,12,0,0,1,0,24H188V64a12,12,0,0,1-24,0V52H152A12,12,0,0,1,140,40ZM252,88a12,12,0,0,1-12,12h-4v4a12,12,0,0,1-24,0v-4h-4a12,12,0,0,1,0-24h4V72a12,12,0,0,1,24,0v4h4A12,12,0,0,1,252,88Z'/%3E%3C/svg%3E");
    --rw-icon-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M178,36c-20.09,0-37.92,7.93-50,21.56C115.92,43.93,98.09,36,78,36a66.08,66.08,0,0,0-66,66c0,72.34,105.81,130.14,110.31,132.57a12,12,0,0,0,11.38,0C138.19,232.14,244,174.34,244,102A66.08,66.08,0,0,0,178,36Zm-5.49,142.36A328.69,328.69,0,0,1,128,210.16a328.69,328.69,0,0,1-44.51-31.8C61.82,159.77,36,131.42,36,102A42,42,0,0,1,78,60c17.8,0,32.7,9.4,38.89,24.54a12,12,0,0,0,22.22,0C145.3,69.4,160.2,60,178,60a42,42,0,0,1,42,42C220,131.42,194.18,159.77,172.51,178.36Z'/%3E%3C/svg%3E");
    --rw-icon-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M243,96a20.33,20.33,0,0,0-17.74-14l-56.59-4.57L146.83,24.62a20.36,20.36,0,0,0-37.66,0L87.35,77.44,30.76,82A20.45,20.45,0,0,0,19.1,117.88l43.18,37.24-13.2,55.7A20.37,20.37,0,0,0,79.57,233L128,203.19,176.43,233a20.39,20.39,0,0,0,30.49-22.15l-13.2-55.7,43.18-37.24A20.43,20.43,0,0,0,243,96ZM172.53,141.7a12,12,0,0,0-3.84,11.86L181.58,208l-47.29-29.08a12,12,0,0,0-12.58,0L74.42,208l12.89-54.4a12,12,0,0,0-3.84-11.86L41.2,105.24l55.4-4.47a12,12,0,0,0,10.13-7.38L128,41.89l21.27,51.5a12,12,0,0,0,10.13,7.38l55.4,4.47Z'/%3E%3C/svg%3E");
    --rw-icon-warning:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240.26,186.1,152.81,34.23h0a28.74,28.74,0,0,0-49.62,0L15.74,186.1a27.45,27.45,0,0,0,0,27.71A28.31,28.31,0,0,0,40.55,228h174.9a28.31,28.31,0,0,0,24.79-14.19A27.45,27.45,0,0,0,240.26,186.1Zm-20.8,15.7a4.46,4.46,0,0,1-4,2.2H40.55a4.46,4.46,0,0,1-4-2.2,3.56,3.56,0,0,1,0-3.73L124,46.2a4.77,4.77,0,0,1,8,0l87.44,151.87A3.56,3.56,0,0,1,219.46,201.8ZM116,136V104a12,12,0,0,1,24,0v32a12,12,0,0,1-24,0Zm28,40a16,16,0,1,1-16-16A16,16,0,0,1,144,176Z'/%3E%3C/svg%3E");
    --rw-icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z'/%3E%3C/svg%3E");
    --rw-icon-check-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'/%3E%3C/svg%3E");
    --rw-icon-x-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M168.49,104.49,145,128l23.52,23.51a12,12,0,0,1-17,17L128,145l-23.51,23.52a12,12,0,0,1-17-17L111,128,87.51,104.49a12,12,0,0,1,17-17L128,111l23.51-23.52a12,12,0,0,1,17,17ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'/%3E%3C/svg%3E");
    --rw-icon-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Z'/%3E%3C/svg%3E");
    --rw-icon-smiley:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M178.39,158c-11,19.06-29.39,30-50.39,30s-39.36-10.93-50.39-30a12,12,0,0,1,20.78-12c3.89,6.73,12.91,18,29.61,18s25.72-11.28,29.61-18a12,12,0,1,1,20.78,12ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128ZM92,124a16,16,0,1,0-16-16A16,16,0,0,0,92,124Zm72-32a16,16,0,1,0,16,16A16,16,0,0,0,164,92Z'/%3E%3C/svg%3E");
    --rw-icon-coins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M188,86.11V84c0-14.62-10.83-27.55-30.51-36.4C140.87,40.12,119,36,96,36S51.13,40.12,34.51,47.6C14.83,56.45,4,69.38,4,84v40c0,14.62,10.83,27.55,30.51,36.4A131.67,131.67,0,0,0,68,169.88V172c0,14.62,10.83,27.55,30.51,36.4C115.13,215.88,137,220,160,220s44.87-4.12,61.49-11.6C241.17,199.55,252,186.62,252,172V132C252,109.86,226.71,92.08,188,86.11ZM228,132c0,7.75-21.77,22.48-61.81,23.88C180.33,147.4,188,136.3,188,124V110.44C213.88,115.15,228,125.48,228,132ZM107.37,147.63c-3.63.24-7.42.37-11.37.37-5.08,0-9.89-.22-14.43-.61a10.94,10.94,0,0,0-1.14-.09c-1.51-.14-3-.3-4.43-.48V130.93A187,187,0,0,0,96,132a187,187,0,0,0,20-1.07v15.89c-2.49.3-5.07.56-7.75.75C108,147.58,107.66,147.6,107.37,147.63ZM164,117.14V124c0,4.78-8.28,12.21-24,17.54v-15a115.32,115.32,0,0,0,17.49-6.13Q160.93,118.86,164,117.14ZM96,60c44,0,68,15.85,68,24s-24,24-68,24S28,92.15,28,84,52,60,96,60ZM28,124v-6.86q3.08,1.71,6.51,3.26A115.32,115.32,0,0,0,52,126.53v15C36.28,136.21,28,128.78,28,124Zm64,48v0c1.33,0,2.66,0,4,0q5.44,0,10.77-.32,4.45,1.57,9.23,2.86v15C100.28,184.21,92,176.78,92,172Zm48,22.82V178.94A186.45,186.45,0,0,0,160,180a187,187,0,0,0,20-1.07v15.89a170.08,170.08,0,0,1-40,0Zm64-5.28v-15a115.32,115.32,0,0,0,17.49-6.13q3.44-1.54,6.51-3.26V172C228,176.78,219.72,184.21,204,189.54Z'/%3E%3C/svg%3E");
    --rw-icon-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M125.18,156.94a64,64,0,1,0-82.36,0,100.23,100.23,0,0,0-39.49,32,12,12,0,0,0,19.35,14.2,76,76,0,0,1,122.64,0,12,12,0,0,0,19.36-14.2A100.33,100.33,0,0,0,125.18,156.94ZM44,108a40,40,0,1,1,40,40A40,40,0,0,1,44,108Zm206.1,97.67a12,12,0,0,1-16.78-2.57A76.31,76.31,0,0,0,172,172a12,12,0,0,1,0-24,40,40,0,1,0-10.3-78.67,12,12,0,1,1-6.16-23.19,64,64,0,0,1,57.64,110.8,100.23,100.23,0,0,1,39.49,32A12,12,0,0,1,250.1,205.67Z'/%3E%3C/svg%3E");
    --rw-icon-flask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M225.15,197.71,164,95.81V44h4a12,12,0,0,0,0-24H88a12,12,0,0,0,0,24h4V95.81L30.85,197.71A20,20,0,0,0,48,228H208a20,20,0,0,0,17.15-30.29ZM140,44V99.14a12,12,0,0,0,1.71,6.17l35.13,58.54c-10.79.86-25.15-1.31-43.42-10.56-14-7.08-27.46-11.33-40.27-12.76l21.14-35.22A12,12,0,0,0,116,99.14V44ZM55.06,204,79,164.19c13-1.11,27.62,2.42,43.62,10.52,19.61,9.92,36.25,13.31,49.85,13.31A75.44,75.44,0,0,0,190.11,186l10.83,18Z'/%3E%3C/svg%3E");
    --rw-icon-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M116,36V20a12,12,0,0,1,24,0V36a12,12,0,0,1-24,0Zm80,92a68,68,0,1,1-68-68A68.07,68.07,0,0,1,196,128Zm-24,0a44,44,0,1,0-44,44A44.05,44.05,0,0,0,172,128ZM51.51,68.49a12,12,0,1,0,17-17l-12-12a12,12,0,0,0-17,17Zm0,119-12,12a12,12,0,0,0,17,17l12-12a12,12,0,1,0-17-17ZM196,72a12,12,0,0,0,8.49-3.51l12-12a12,12,0,0,0-17-17l-12,12A12,12,0,0,0,196,72Zm8.49,115.51a12,12,0,0,0-17,17l12,12a12,12,0,0,0,17-17ZM48,128a12,12,0,0,0-12-12H20a12,12,0,0,0,0,24H36A12,12,0,0,0,48,128Zm80,80a12,12,0,0,0-12,12v16a12,12,0,0,0,24,0V220A12,12,0,0,0,128,208Zm108-92H220a12,12,0,0,0,0,24h16a12,12,0,0,0,0-24Z'/%3E%3C/svg%3E");
    --rw-icon-rocket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M156,228a12,12,0,0,1-12,12H112a12,12,0,0,1,0-24h32A12,12,0,0,1,156,228ZM128,116a16,16,0,1,0-16-16A16,16,0,0,0,128,116Zm99.53,40.7-12.36,55.63a19.9,19.9,0,0,1-12.88,14.53A20.16,20.16,0,0,1,195.6,228a19.87,19.87,0,0,1-12.29-4.27L157.17,204H98.83L72.69,223.74A19.87,19.87,0,0,1,60.4,228a20.16,20.16,0,0,1-6.69-1.15,19.9,19.9,0,0,1-12.88-14.53L28.47,156.7a20.1,20.1,0,0,1,4.16-17.14l27.83-33.4A127,127,0,0,1,69.11,69.7c13.27-33.25,37-54.1,46.64-61.52a20,20,0,0,1,24.5,0c9.6,7.42,33.37,28.27,46.64,61.52a127,127,0,0,1,8.65,36.46l27.83,33.4A20.1,20.1,0,0,1,227.53,156.7ZM101.79,180h52.42c19.51-35.7,23-69.78,10.39-101.4C154.4,53,136.2,35.9,128,29.12,119.8,35.9,101.6,53,91.4,78.6,78.78,110.22,82.28,144.3,101.79,180Zm-22.55,8.72a168,168,0,0,1-16.92-47.3l-10,12,10.58,47.64Zm124.43-35.31-10-12a168,168,0,0,1-16.92,47.3l16.33,12.33Z'/%3E%3C/svg%3E");
    --rw-icon-package:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M225.6,62.64l-88-48.17a19.91,19.91,0,0,0-19.2,0l-88,48.17A20,20,0,0,0,20,80.19v95.62a20,20,0,0,0,10.4,17.55l88,48.17a19.89,19.89,0,0,0,19.2,0l88-48.17A20,20,0,0,0,236,175.81V80.19A20,20,0,0,0,225.6,62.64ZM128,36.57,200,76,178.57,87.73l-72-39.42Zm0,78.83L56,76,81.56,62l72,39.41ZM44,96.79l72,39.4v76.67L44,173.44Zm96,116.07V136.19l24-13.13V152a12,12,0,0,0,24,0V109.92l24-13.13v76.65Z'/%3E%3C/svg%3E");
    --rw-icon-lightning:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M219.71,117.38a12,12,0,0,0-7.25-8.52L161.28,88.39l10.59-70.61a12,12,0,0,0-20.64-10l-112,120a12,12,0,0,0,4.31,19.33l51.18,20.47L84.13,238.22a12,12,0,0,0,20.64,10l112-120A12,12,0,0,0,219.71,117.38ZM113.6,203.55l6.27-41.77a12,12,0,0,0-7.41-12.92L68.74,131.37,142.4,52.45l-6.27,41.77a12,12,0,0,0,7.41,12.92l43.72,17.49Z'/%3E%3C/svg%3E");
    --rw-icon-drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M134.88,6.17a12,12,0,0,0-13.76,0,259,259,0,0,0-42.18,39C50.85,77.43,36,111.62,36,144a92,92,0,0,0,184,0C220,66.64,138.36,8.6,134.88,6.17ZM128,212a68.07,68.07,0,0,1-68-68c0-33.31,20-63.37,36.7-82.71A249.35,249.35,0,0,1,128,31.11a249.35,249.35,0,0,1,31.3,30.18C176,80.63,196,110.69,196,144A68.07,68.07,0,0,1,128,212Zm49.62-52.4a52,52,0,0,1-34,34,12.2,12.2,0,0,1-3.6.55,12,12,0,0,1-3.6-23.45,28,28,0,0,0,18.32-18.32,12,12,0,0,1,22.9,7.2Z'/%3E%3C/svg%3E");
    --rw-icon-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M227.42,39.86a12,12,0,0,0-11.28-11.28c-39.6-2.33-74.59,2.34-104,13.87C84,53.48,62.31,70.58,49.39,91.9c-17.62,29.11-17.66,64.45-.45,98.19L31.51,207.52a12,12,0,0,0,17,17l17.43-17.43c16.74,8.54,33.88,12.85,50.45,12.85a91.31,91.31,0,0,0,47.74-13.3c21.32-12.92,38.42-34.62,49.45-62.75C225.08,114.46,229.75,79.46,227.42,39.86ZM151.66,186.08C131.57,198.25,108,199.17,83.94,189l84.54-84.54a12,12,0,1,0-17-17L67,172.06c-10.14-24-9.22-47.63,3-67.72,20.91-34.53,70.54-53.72,134-52.25C205.38,115.53,186.19,165.17,151.66,186.08Z'/%3E%3C/svg%3E");
    --rw-icon-trophy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232,60H212V48a12,12,0,0,0-12-12H56A12,12,0,0,0,44,48V60H24A20,20,0,0,0,4,80V96a44.05,44.05,0,0,0,44,44h.77A84.18,84.18,0,0,0,116,195.15V212H96a12,12,0,0,0,0,24h64a12,12,0,0,0,0-24H140V195.11c30.94-4.51,56.53-26.2,67-55.11h1a44.05,44.05,0,0,0,44-44V80A20,20,0,0,0,232,60ZM28,96V84H44v28c0,1.21,0,2.41.09,3.61A20,20,0,0,1,28,96Zm160,15.1c0,33.33-26.71,60.65-59.54,60.9A60,60,0,0,1,68,112V60H188ZM228,96a20,20,0,0,1-16.12,19.62c.08-1.5.12-3,.12-4.52V84h16Z'/%3E%3C/svg%3E");
    --rw-icon-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M40.14,46.88A12,12,0,0,0,36,56V224a12,12,0,0,0,24,0V181.72c22.84-17.12,42.1-9.12,70.68,5,16.23,8,34.74,17.2,54.8,17.2,14.72,0,30.28-4.94,46.38-18.88A12,12,0,0,0,236,176V56a12,12,0,0,0-19.86-9.07c-24.71,21.41-44.53,13.31-74.82-1.68C113.19,31.27,78.17,13.94,40.14,46.88ZM212,170.26c-22.84,17.13-42.1,9.11-70.68-5C118.16,153.76,90.33,140,60,153.87V61.69c22.84-17.12,42.1-9.12,70.68,5,16.23,8,34.74,17.2,54.8,17.2A63,63,0,0,0,212,78.08Z'/%3E%3C/svg%3E");
    --rw-icon-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.26,90.4a108,108,0,0,1-177.63,114A108,108,0,0,1,195.41,43.63l20.1-20.11a12,12,0,0,1,17,17l-96,96a12,12,0,1,1-17-17l24-24a36,36,0,1,0,19.76,39.65,12,12,0,0,1,23.53,4.74,60,60,0,1,1-25.73-62L178.3,60.74a84,84,0,1,0,28.46,38,12,12,0,1,1,22.5-8.35Z'/%3E%3C/svg%3E");
    --rw-icon-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm68-84a12,12,0,0,1-12,12H128a12,12,0,0,1-12-12V72a12,12,0,0,1,24,0v44h44A12,12,0,0,1,196,128Z'/%3E%3C/svg%3E");
    --rw-icon-magnifying-glass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z'/%3E%3C/svg%3E");
    --rw-icon-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,76a52,52,0,1,0,52,52A52.06,52.06,0,0,0,128,76Zm0,80a28,28,0,1,1,28-28A28,28,0,0,1,128,156Zm92-27.21v-1.58l14-17.51a12,12,0,0,0,2.23-10.59A111.75,111.75,0,0,0,225,71.89,12,12,0,0,0,215.89,66L193.61,63.5l-1.11-1.11L190,40.1A12,12,0,0,0,184.11,31a111.67,111.67,0,0,0-27.23-11.27A12,12,0,0,0,146.3,22L128.79,36h-1.58L109.7,22a12,12,0,0,0-10.59-2.23A111.75,111.75,0,0,0,71.89,31.05,12,12,0,0,0,66,40.11L63.5,62.39,62.39,63.5,40.1,66A12,12,0,0,0,31,71.89,111.67,111.67,0,0,0,19.77,99.12,12,12,0,0,0,22,109.7l14,17.51v1.58L22,146.3a12,12,0,0,0-2.23,10.59,111.75,111.75,0,0,0,11.29,27.22A12,12,0,0,0,40.11,190l22.28,2.48,1.11,1.11L66,215.9A12,12,0,0,0,71.89,225a111.67,111.67,0,0,0,27.23,11.27A12,12,0,0,0,109.7,234l17.51-14h1.58l17.51,14a12,12,0,0,0,10.59,2.23A111.75,111.75,0,0,0,184.11,225a12,12,0,0,0,5.91-9.06l2.48-22.28,1.11-1.11L215.9,190a12,12,0,0,0,9.06-5.91,111.67,111.67,0,0,0,11.27-27.23A12,12,0,0,0,234,146.3Zm-24.12-4.89a70.1,70.1,0,0,1,0,8.2,12,12,0,0,0,2.61,8.22l12.84,16.05A86.47,86.47,0,0,1,207,166.86l-20.43,2.27a12,12,0,0,0-7.65,4,69,69,0,0,1-5.8,5.8,12,12,0,0,0-4,7.65L166.86,207a86.47,86.47,0,0,1-10.49,4.35l-16.05-12.85a12,12,0,0,0-7.5-2.62c-.24,0-.48,0-.72,0a70.1,70.1,0,0,1-8.2,0,12.06,12.06,0,0,0-8.22,2.6L99.63,211.33A86.47,86.47,0,0,1,89.14,207l-2.27-20.43a12,12,0,0,0-4-7.65,69,69,0,0,1-5.8-5.8,12,12,0,0,0-7.65-4L49,166.86a86.47,86.47,0,0,1-4.35-10.49l12.84-16.05a12,12,0,0,0,2.61-8.22,70.1,70.1,0,0,1,0-8.2,12,12,0,0,0-2.61-8.22L44.67,99.63A86.47,86.47,0,0,1,49,89.14l20.43-2.27a12,12,0,0,0,7.65-4,69,69,0,0,1,5.8-5.8,12,12,0,0,0,4-7.65L89.14,49a86.47,86.47,0,0,1,10.49-4.35l16.05,12.85a12.06,12.06,0,0,0,8.22,2.6,70.1,70.1,0,0,1,8.2,0,12,12,0,0,0,8.22-2.6l16.05-12.85A86.47,86.47,0,0,1,166.86,49l2.27,20.43a12,12,0,0,0,4,7.65,69,69,0,0,1,5.8,5.8,12,12,0,0,0,7.65,4L207,89.14a86.47,86.47,0,0,1,4.35,10.49l-12.84,16.05A12,12,0,0,0,195.88,123.9Z'/%3E%3C/svg%3E");
    --rw-icon-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M225.29,165.93C216.61,151,212,129.57,212,104a84,84,0,0,0-168,0c0,25.58-4.59,47-13.27,61.93A20.08,20.08,0,0,0,30.66,186,19.77,19.77,0,0,0,48,196H84.18a44,44,0,0,0,87.64,0H208a19.77,19.77,0,0,0,17.31-10A20.08,20.08,0,0,0,225.29,165.93ZM128,212a20,20,0,0,1-19.6-16h39.2A20,20,0,0,1,128,212ZM54.66,172C63.51,154,68,131.14,68,104a60,60,0,0,1,120,0c0,27.13,4.48,50,13.33,68Z'/%3E%3C/svg%3E");
    --rw-icon-terminal-window:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M72.5,150.63,100.79,128,72.5,105.37a12,12,0,1,1,15-18.74l40,32a12,12,0,0,1,0,18.74l-40,32a12,12,0,0,1-15-18.74ZM144,172h32a12,12,0,0,0,0-24H144a12,12,0,0,0,0,24ZM236,56V200a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V56A20,20,0,0,1,40,36H216A20,20,0,0,1,236,56Zm-24,4H44V196H212Z'/%3E%3C/svg%3E");
    --rw-icon-keyboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,44H32A20,20,0,0,0,12,64V192a20,20,0,0,0,20,20H224a20,20,0,0,0,20-20V64A20,20,0,0,0,224,44Zm-4,144H36V68H220ZM52,128a12,12,0,0,1,12-12H192a12,12,0,0,1,0,24H64A12,12,0,0,1,52,128Zm0-36A12,12,0,0,1,64,80H192a12,12,0,0,1,0,24H64A12,12,0,0,1,52,92Zm0,72a12,12,0,0,1,12-12h8a12,12,0,0,1,0,24H64A12,12,0,0,1,52,164Zm108,0a12,12,0,0,1-12,12H108a12,12,0,0,1,0-24h40A12,12,0,0,1,160,164Zm44,0a12,12,0,0,1-12,12h-8a12,12,0,0,1,0-24h8A12,12,0,0,1,204,164Z'/%3E%3C/svg%3E");
    --rw-icon-coffee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212,76H32A12,12,0,0,0,20,88v48a100.24,100.24,0,0,0,26.73,68H32a12,12,0,0,0,0,24H208a12,12,0,0,0,0-24H193.27a100.75,100.75,0,0,0,20-32A44,44,0,0,0,256,128v-8A44.05,44.05,0,0,0,212,76Zm-16,60a76.27,76.27,0,0,1-42,68H86a76.27,76.27,0,0,1-42-68V100H196Zm36-8a20,20,0,0,1-12.57,18.55A97.17,97.17,0,0,0,220,136V101.68A20,20,0,0,1,232,120ZM68,48V24a12,12,0,0,1,24,0V48a12,12,0,0,1-24,0Zm40,0V24a12,12,0,0,1,24,0V48a12,12,0,0,1-24,0Zm40,0V24a12,12,0,0,1,24,0V48a12,12,0,0,1-24,0Z'/%3E%3C/svg%3E");
    --rw-icon-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,76H180V56A52,52,0,0,0,76,56V76H48A20,20,0,0,0,28,96V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V96A20,20,0,0,0,208,76ZM100,56a28,28,0,0,1,56,0V76H100ZM204,204H52V100H204Zm-60-52a16,16,0,1,1-16-16A16,16,0,0,1,144,152Z'/%3E%3C/svg%3E");
    --rw-icon-chart-line-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M236,208a12,12,0,0,1-12,12H32a12,12,0,0,1-12-12V48a12,12,0,0,1,24,0v99l43.51-43.52a12,12,0,0,1,17,0L128,127l43-43H160a12,12,0,0,1,0-24h40a12,12,0,0,1,12,12v40a12,12,0,0,1-24,0V101l-51.51,51.52a12,12,0,0,1-17,0L96,129,44,181v15H224A12,12,0,0,1,236,208Z'/%3E%3C/svg%3E");
    --rw-icon-cube:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M225.6,62.64l-88-48.17a19.91,19.91,0,0,0-19.2,0l-88,48.17A20,20,0,0,0,20,80.19v95.62a20,20,0,0,0,10.4,17.55l88,48.17a19.89,19.89,0,0,0,19.2,0l88-48.17A20,20,0,0,0,236,175.81V80.19A20,20,0,0,0,225.6,62.64ZM128,36.57,200,76,128,115.4,56,76ZM44,96.79l72,39.4v76.67L44,173.44Zm96,116.07V136.19l72-39.4v76.65Z'/%3E%3C/svg%3E");
    --rw-icon-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212ZM163.27,77l-56,24a12,12,0,0,0-6.3,6.3l-24,56A12,12,0,0,0,92.73,179l56-24a12,12,0,0,0,6.3-6.3l24-56A12,12,0,0,0,163.27,77Zm-28.41,57.89-24,10.29,10.29-24,24-10.29Z'/%3E%3C/svg%3E");
    --rw-icon-planet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M248.59,58.67c-6.31-10.87-23-21.06-66.16-9.71A95.94,95.94,0,0,0,32,128q0,3.6.26,7.14C.56,166.86,1.1,186.4,7.44,197.33,13.4,207.61,25.3,212,40.68,212c9.79,0,21-1.78,32.95-4.91A95.94,95.94,0,0,0,224,128c0-2.41-.09-4.79-.27-7.16,14.31-14.38,23.86-28.21,27-40C253.55,70.42,251.12,63,248.59,58.67ZM128,56a72.11,72.11,0,0,1,70.19,56C184,124.73,165,138.59,141.92,151.86c-21.74,12.49-43.55,22.36-63.09,28.65A72,72,0,0,1,128,56ZM28.19,185.29c-.61-1.07-.17-8.22,10.67-21.71A95.77,95.77,0,0,0,52.35,187C35.12,189.61,28.85,186.41,28.19,185.29ZM128,200a71.66,71.66,0,0,1-22.56-3.64,394.1,394.1,0,0,0,48.42-23.69A388.11,388.11,0,0,0,198.43,143,72.12,72.12,0,0,1,128,200ZM227.57,74.65c-1.28,4.78-4.81,10.87-10.39,17.8A95.74,95.74,0,0,0,203.68,69c15.83-2.37,23.17,0,24.15,1.71C228,71,228.21,72.28,227.57,74.65Z'/%3E%3C/svg%3E");
    --rw-icon-lightbulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M180,232a12,12,0,0,1-12,12H88a12,12,0,0,1,0-24h80A12,12,0,0,1,180,232Zm40-128a91.51,91.51,0,0,1-35.17,72.35A12.26,12.26,0,0,0,180,186v2a20,20,0,0,1-20,20H96a20,20,0,0,1-20-20v-2a12,12,0,0,0-4.7-9.51A91.57,91.57,0,0,1,36,104.52C35.73,54.69,76,13.2,125.79,12A92,92,0,0,1,220,104Zm-24,0a68,68,0,0,0-69.65-68C89.56,36.88,59.8,67.55,60,104.38a67.71,67.71,0,0,0,26.1,53.19A35.87,35.87,0,0,1,100,184h56.1A36.13,36.13,0,0,1,170,157.49,67.68,67.68,0,0,0,196,104Zm-20.07-5.32a48.5,48.5,0,0,0-31.91-40,12,12,0,0,0-8,22.62,24.31,24.31,0,0,1,16.09,20,12,12,0,0,0,23.86-2.64Z'/%3E%3C/svg%3E");
    --rw-icon-confetti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M114.32,49.8A19.79,19.79,0,0,0,81.72,57L29.22,201.41A19.82,19.82,0,0,0,47.75,228a20,20,0,0,0,6.84-1.22L199,174.28a19.79,19.79,0,0,0,7.24-32.6ZM104.19,183.21l-31.4-31.4L82.94,123.9l49.16,49.16Zm-52.42,26.4Zm12-32.91L79.3,192.26l-24.45,8.89ZM157,164,92,99l10-27.58L184.57,154ZM128,40V16a12,12,0,0,1,24,0V40a12,12,0,0,1-24,0Zm116.48,83.51a12,12,0,0,1-17,17l-16-16a12,12,0,0,1,17-17Zm-.69-40.13-24,8a12,12,0,0,1-7.59-22.77l24-8a12,12,0,1,1,7.59,22.77ZM156.6,65.93C159.83,47.47,173.39,36,192,36c6.45,0,8.69-2.49,10-4.92a18,18,0,0,0,2-7.22V24a12,12,0,0,1,24,0c0,14.47-9.59,36-36,36-4.94,0-10.21,1.19-11.76,10.06A12,12,0,0,1,168.43,80a12.35,12.35,0,0,1-2.08-.18A12,12,0,0,1,156.6,65.93Z'/%3E%3C/svg%3E");
    --rw-icon-coins-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,132c0,19.88-35.82,36-80,36-19.6,0-37.56-3.17-51.47-8.44h0C146.76,156.85,176,142,176,124V96.72h0C212.52,100.06,240,114.58,240,132ZM176,84c0-19.88-35.82-36-80-36S16,64.12,16,84s35.82,36,80,36S176,103.88,176,84Z' opacity='0.2'/%3E%3Cpath d='M184,89.57V84c0-25.08-37.83-44-88-44S8,58.92,8,84v40c0,20.89,26.25,37.49,64,42.46V172c0,25.08,37.83,44,88,44s88-18.92,88-44V132C248,111.3,222.58,94.68,184,89.57ZM232,132c0,13.22-30.79,28-72,28-3.73,0-7.43-.13-11.08-.37C170.49,151.77,184,139,184,124V105.74C213.87,110.19,232,122.27,232,132ZM72,150.25V126.46A183.74,183.74,0,0,0,96,128a183.74,183.74,0,0,0,24-1.54v23.79A163,163,0,0,1,96,152,163,163,0,0,1,72,150.25Zm96-40.32V124c0,8.39-12.41,17.4-32,22.87V123.5C148.91,120.37,159.84,115.71,168,109.93ZM96,56c41.21,0,72,14.78,72,28s-30.79,28-72,28S24,97.22,24,84,54.79,56,96,56ZM24,124V109.93c8.16,5.78,19.09,10.44,32,13.57v23.37C36.41,141.4,24,132.39,24,124Zm64,48v-4.17c2.63.1,5.29.17,8,.17,3.88,0,7.67-.13,11.39-.35A121.92,121.92,0,0,0,120,171.41v23.46C100.41,189.4,88,180.39,88,172Zm48,26.25V174.4a179.48,179.48,0,0,0,24,1.6,183.74,183.74,0,0,0,24-1.54v23.79a165.45,165.45,0,0,1-48,0Zm64-3.38V171.5c12.91-3.13,23.84-7.79,32-13.57V172C232,180.39,219.59,189.4,200,194.87Z'/%3E%3C/svg%3E");
    --rw-icon-users-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M136,108A52,52,0,1,1,84,56,52,52,0,0,1,136,108Z' opacity='0.2'/%3E%3Cpath d='M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z'/%3E%3C/svg%3E");
    --rw-icon-flask-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,216H48a8,8,0,0,1-6.86-12.12l30.48-50.8h0c13.23-2.48,32-1.41,56.37,10.92,32.25,16.33,54.75,12.91,67.5,7.65h0l19.34,32.23A8,8,0,0,1,208,216Z' opacity='0.2'/%3E%3Cpath d='M221.69,199.77,160,96.92V40h8a8,8,0,0,0,0-16H88a8,8,0,0,0,0,16h8V96.92L34.31,199.77A16,16,0,0,0,48,224H208a16,16,0,0,0,13.72-24.23ZM110.86,103.25A7.93,7.93,0,0,0,112,99.14V40h32V99.14a7.93,7.93,0,0,0,1.14,4.11L183.36,167c-12,2.37-29.07,1.37-51.75-10.11-15.91-8.05-31.05-12.32-45.22-12.81ZM48,208l28.54-47.58c14.25-1.73,30.31,1.85,47.82,10.72,19,9.61,35,12.88,48,12.88a69.89,69.89,0,0,0,19.55-2.7L208,208Z'/%3E%3C/svg%3E");
    --rw-icon-sun-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M184,128a56,56,0,1,1-56-56A56,56,0,0,1,184,128Z' opacity='0.2'/%3E%3Cpath d='M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
    --rw-icon-rocket-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M94.81,192,65.36,214.24a8,8,0,0,1-12.81-4.51L40.19,154.1a8,8,0,0,1,1.66-6.86l30.31-36.33C71,134.25,76.7,161.43,94.81,192Zm119.34-44.76-30.31-36.33c1.21,23.34-4.54,50.52-22.65,81.09l29.45,22.24a8,8,0,0,0,12.81-4.51l12.36-55.63A8,8,0,0,0,214.15,147.24Z' opacity='0.2'/%3E%3Cpath d='M152,224a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,224ZM128,112a12,12,0,1,0-12-12A12,12,0,0,0,128,112Zm95.62,43.83-12.36,55.63a16,16,0,0,1-25.51,9.11L158.51,200h-61L70.25,220.57a16,16,0,0,1-25.51-9.11L32.38,155.83a16.09,16.09,0,0,1,3.32-13.71l28.56-34.26a123.07,123.07,0,0,1,8.57-36.67c12.9-32.34,36-52.63,45.37-59.85a16,16,0,0,1,19.6,0c9.34,7.22,32.47,27.51,45.37,59.85a123.07,123.07,0,0,1,8.57,36.67l28.56,34.26A16.09,16.09,0,0,1,223.62,155.83ZM99.43,184h57.14c21.12-37.54,25.07-73.48,11.74-106.88C156.55,47.64,134.49,29,128,24c-6.51,5-28.57,23.64-40.33,53.12C74.36,110.52,78.31,146.46,99.43,184Zm-15,5.85Q68.28,160.5,64.83,132.16L48,152.36,60.36,208l.18-.13ZM208,152.36l-16.83-20.2q-3.42,28.28-19.56,57.69l23.85,18,.18.13Z'/%3E%3C/svg%3E");
    --rw-icon-package-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,129.09V232a8,8,0,0,1-3.84-1l-88-48.18a8,8,0,0,1-4.16-7V80.18a8,8,0,0,1,.7-3.25Z' opacity='0.2'/%3E%3Cpath d='M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z'/%3E%3C/svg%3E");
    --rw-icon-lightning-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M96,240l16-80L48,136,160,16,144,96l64,24Z' opacity='0.2'/%3E%3Cpath d='M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z'/%3E%3C/svg%3E");
    --rw-icon-leaf-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M63.81,192.19c-47.89-79.81,16-159.62,151.64-151.64C223.43,176.23,143.62,240.08,63.81,192.19Z' opacity='0.2'/%3E%3Cpath d='M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z'/%3E%3C/svg%3E");
    --rw-icon-trophy-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,48v63.1c0,39.7-31.75,72.6-71.45,72.9A72,72,0,0,1,56,112V48Z' opacity='0.2'/%3E%3Cpath d='M232,64H208V48a8,8,0,0,0-8-8H56a8,8,0,0,0-8,8V64H24A16,16,0,0,0,8,80V96a40,40,0,0,0,40,40h3.65A80.13,80.13,0,0,0,120,191.61V216H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V191.58c31.94-3.23,58.44-25.64,68.08-55.58H208a40,40,0,0,0,40-40V80A16,16,0,0,0,232,64ZM48,120A24,24,0,0,1,24,96V80H48v32q0,4,.39,8Zm144-8.9c0,35.52-29,64.64-64,64.9a64,64,0,0,1-64-64V56H192ZM232,96a24,24,0,0,1-24,24h-.5a81.81,81.81,0,0,0,.5-8.9V80h24Z'/%3E%3C/svg%3E");
    --rw-icon-planet-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z' opacity='0.2'/%3E%3Cpath d='M245.11,60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93,95.93,0,0,0,32,128a98,98,0,0,0,.78,12.31C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4A95.93,95.93,0,0,0,224,128a97.08,97.08,0,0,0-.77-12.25c12.5-13,20.82-25.35,23.65-35.92C248.83,72.51,248.24,66.07,245.11,60.68ZM128,48a80.11,80.11,0,0,1,78,62.2c-17.06,16.06-40.15,32.53-62.07,45.13C116.38,171.14,92.48,181,73.42,186.4A79.94,79.94,0,0,1,128,48ZM24.74,187.29c-1.46-2.51-.65-7.24,2.22-13a79.05,79.05,0,0,1,10.29-15.05,96,96,0,0,0,18,31.32C38,193.46,27.24,191.61,24.74,187.29ZM128,208a79.45,79.45,0,0,1-38.56-9.94,370,370,0,0,0,62.43-28.86c21.58-12.39,40.68-25.82,56.07-39.08A80.07,80.07,0,0,1,128,208ZM231.42,75.69c-1.7,6.31-6.19,13.53-12.63,21.13a95.69,95.69,0,0,0-18-31.35c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z'/%3E%3C/svg%3E");
    --rw-icon-cube-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,129.09V232a8,8,0,0,1-3.84-1l-88-48.16a8,8,0,0,1-4.16-7V80.2a8,8,0,0,1,.7-3.27Z' opacity='0.2'/%3E%3Cpath d='M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z'/%3E%3C/svg%3E");
    --rw-icon-compass-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,32a96,96,0,1,0,96,96A96,96,0,0,0,128,32Zm16,112L80,176l32-64,64-32Z' opacity='0.2'/%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM172.42,72.84l-64,32a8.05,8.05,0,0,0-3.58,3.58l-32,64A8,8,0,0,0,80,184a8.1,8.1,0,0,0,3.58-.84l64-32a8.05,8.05,0,0,0,3.58-3.58l32-64a8,8,0,0,0-10.74-10.74ZM138,138,97.89,158.11,118,118l40.15-20.07Z'/%3E%3C/svg%3E");
    --rw-icon-smiley-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'/%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,48c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8Z'/%3E%3C/svg%3E");
    --rw-icon-heart-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232,102c0,66-104,122-104,122S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32A54,54,0,0,1,232,102Z' opacity='0.2'/%3E%3Cpath d='M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z'/%3E%3C/svg%3E");
    --rw-icon-star-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'/%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'/%3E%3C/svg%3E");
    --rw-icon-sparkle-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z' opacity='0.2'/%3E%3Cpath d='M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z'/%3E%3C/svg%3E");
    --rw-icon-lightbulb-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,104a79.86,79.86,0,0,1-30.59,62.92A24.29,24.29,0,0,0,168,186v6a8,8,0,0,1-8,8H96a8,8,0,0,1-8-8v-6a24.11,24.11,0,0,0-9.3-19A79.87,79.87,0,0,1,48,104.45C47.76,61.09,82.72,25,126.07,24A80,80,0,0,1,208,104Z' opacity='0.2'/%3E%3Cpath d='M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z'/%3E%3C/svg%3E");
    --rw-icon-confetti-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M58.89,154.89l42.22,42.22-50.63,18.4a7.79,7.79,0,0,1-10-10Zm138.82-4.72L105.83,58.29A7.79,7.79,0,0,0,93,61.14l-14.9,41,75.82,75.82,41-14.9A7.79,7.79,0,0,0,197.71,150.17Z' opacity='0.2'/%3E%3Cpath d='M111.49,52.63a15.8,15.8,0,0,0-26,5.77L33,202.78A15.83,15.83,0,0,0,47.76,224a16,16,0,0,0,5.46-1l144.37-52.5a15.8,15.8,0,0,0,5.78-26Zm-8.33,135.21-35-35,13.16-36.21,58.05,58.05Zm-55,20,14-38.41,24.45,24.45ZM156,168.64,87.36,100l13-35.87,91.43,91.43ZM160,72a37.8,37.8,0,0,1,3.84-15.58C169.14,45.83,179.14,40,192,40c6.7,0,11-2.29,13.65-7.21A22,22,0,0,0,208,23.94,8,8,0,0,1,224,24c0,12.86-8.52,32-32,32-6.7,0-11,2.29-13.65,7.21A22,22,0,0,0,176,72.06,8,8,0,0,1,160,72ZM136,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm101.66,82.34a8,8,0,1,1-11.32,11.31l-16-16a8,8,0,0,1,11.32-11.32Zm4.87-42.75-24,8a8,8,0,0,1-5.06-15.18l24-8a8,8,0,0,1,5.06,15.18Z'/%3E%3C/svg%3E");
    --rw-icon-terminal-window-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,56V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z' opacity='0.2'/%3E%3Cpath d='M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z'/%3E%3C/svg%3E");
    --rw-icon-keyboard-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232,64V192a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H224A8,8,0,0,1,232,64Z' opacity='0.2'/%3E%3Cpath d='M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z'/%3E%3C/svg%3E");
    --rw-icon-coffee-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,88v48a88,88,0,0,1-51.3,80H83.3A88,88,0,0,1,32,136V88Z' opacity='0.2'/%3E%3Cpath d='M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z'/%3E%3C/svg%3E");
    --rw-icon-lock-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,96V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H208A8,8,0,0,1,216,96Z' opacity='0.2'/%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z'/%3E%3C/svg%3E");
    --rw-icon-gear-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M207.86,123.18l16.78-21a99.14,99.14,0,0,0-10.07-24.29l-26.7-3a81,81,0,0,0-6.81-6.81l-3-26.71a99.43,99.43,0,0,0-24.3-10l-21,16.77a81.59,81.59,0,0,0-9.64,0l-21-16.78A99.14,99.14,0,0,0,77.91,41.43l-3,26.7a81,81,0,0,0-6.81,6.81l-26.71,3a99.43,99.43,0,0,0-10,24.3l16.77,21a81.59,81.59,0,0,0,0,9.64l-16.78,21a99.14,99.14,0,0,0,10.07,24.29l26.7,3a81,81,0,0,0,6.81,6.81l3,26.71a99.43,99.43,0,0,0,24.3,10l21-16.77a81.59,81.59,0,0,0,9.64,0l21,16.78a99.14,99.14,0,0,0,24.29-10.07l3-26.7a81,81,0,0,0,6.81-6.81l26.71-3a99.43,99.43,0,0,0,10-24.3l-16.77-21A81.59,81.59,0,0,0,207.86,123.18ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z' opacity='0.2'/%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8.06,8.06,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8.06,8.06,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z'/%3E%3C/svg%3E");
    --rw-icon-bell-duotone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,192H48a8,8,0,0,1-6.88-12C47.71,168.6,56,139.81,56,104a72,72,0,0,1,144,0c0,35.82,8.3,64.6,14.9,76A8,8,0,0,1,208,192Z' opacity='0.2'/%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'/%3E%3C/svg%3E");
    --rw-icon-check-circle-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    --rw-icon-x-circle-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
    --rw-icon-heart-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z'/%3E%3C/svg%3E");
    --rw-icon-star-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E");
    --rw-icon-warning-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z'/%3E%3C/svg%3E");
    --rw-icon-info-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z'/%3E%3C/svg%3E");
    --rw-icon-smiley-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM92,96a12,12,0,1,1-12,12A12,12,0,0,1,92,96Zm82.92,60c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8ZM164,120a12,12,0,1,1,12-12A12,12,0,0,1,164,120Z'/%3E%3C/svg%3E");
    --rw-icon-sparkle-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
    --rw-icon-bell-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z'/%3E%3C/svg%3E");
    --rw-icon-lightning-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.85,125.46l-112,120a8,8,0,0,1-13.69-7l14.66-73.33L45.19,143.49a8,8,0,0,1-3-13l112-120a8,8,0,0,1,13.69,7L153.18,90.9l57.63,21.61a8,8,0,0,1,3,12.95Z'/%3E%3C/svg%3E");
  }
  /* Phosphor bold strokes are 24/256 of the icon box, so --rw-icon-stroke sets the drawn stroke width of a standalone icon.
     Icons inside text, buttons and badges scale with the surrounding font instead (--rw-icon-size). */
  .rw-icon { --rw-icon-stroke:2px; --_size:var(--rw-icon-size,calc(var(--rw-icon-stroke) * 256 / 24)); display:inline-block; flex:none; inline-size:var(--_size); block-size:var(--_size); background:currentColor; mask:var(--rw-icon-mask) center / contain no-repeat; vertical-align:-.2em; }
  :where(a,button,summary,label,li,p,small,strong,span,.rw-button,.rw-badge,.rw-kicker) > .rw-icon { --rw-icon-size:1.2em; }
  .rw-icon[data-size=sm] { --rw-icon-size:1em; } .rw-icon[data-size=md] { --rw-icon-size:1.5em; } .rw-icon[data-size=lg] { --rw-icon-size:2em; } .rw-icon[data-size=xl] { --rw-icon-size:2.75em; }
  .rw-icon[data-icon=arrows-clockwise] { --rw-icon-mask:var(--rw-icon-arrows-clockwise); }
  .rw-icon[data-icon=x] { --rw-icon-mask:var(--rw-icon-x); }
  .rw-icon[data-icon=check] { --rw-icon-mask:var(--rw-icon-check); }
  .rw-icon[data-icon=plus] { --rw-icon-mask:var(--rw-icon-plus); }
  .rw-icon[data-icon=minus] { --rw-icon-mask:var(--rw-icon-minus); }
  .rw-icon[data-icon=caret-down] { --rw-icon-mask:var(--rw-icon-caret-down); }
  .rw-icon[data-icon=caret-up] { --rw-icon-mask:var(--rw-icon-caret-up); }
  .rw-icon[data-icon=caret-right] { --rw-icon-mask:var(--rw-icon-caret-right); }
  .rw-icon[data-icon=caret-left] { --rw-icon-mask:var(--rw-icon-caret-left); }
  .rw-icon[data-icon=arrow-right] { --rw-icon-mask:var(--rw-icon-arrow-right); }
  .rw-icon[data-icon=arrow-left] { --rw-icon-mask:var(--rw-icon-arrow-left); }
  .rw-icon[data-icon=arrow-up-right] { --rw-icon-mask:var(--rw-icon-arrow-up-right); }
  .rw-icon[data-icon=arrow-up] { --rw-icon-mask:var(--rw-icon-arrow-up); }
  .rw-icon[data-icon=arrow-down] { --rw-icon-mask:var(--rw-icon-arrow-down); }
  .rw-icon[data-icon=sparkle] { --rw-icon-mask:var(--rw-icon-sparkle); }
  .rw-icon[data-icon=heart] { --rw-icon-mask:var(--rw-icon-heart); }
  .rw-icon[data-icon=star] { --rw-icon-mask:var(--rw-icon-star); }
  .rw-icon[data-icon=warning] { --rw-icon-mask:var(--rw-icon-warning); }
  .rw-icon[data-icon=info] { --rw-icon-mask:var(--rw-icon-info); }
  .rw-icon[data-icon=check-circle] { --rw-icon-mask:var(--rw-icon-check-circle); }
  .rw-icon[data-icon=x-circle] { --rw-icon-mask:var(--rw-icon-x-circle); }
  .rw-icon[data-icon=circle] { --rw-icon-mask:var(--rw-icon-circle); }
  .rw-icon[data-icon=smiley] { --rw-icon-mask:var(--rw-icon-smiley); }
  .rw-icon[data-icon=coins] { --rw-icon-mask:var(--rw-icon-coins); }
  .rw-icon[data-icon=users] { --rw-icon-mask:var(--rw-icon-users); }
  .rw-icon[data-icon=flask] { --rw-icon-mask:var(--rw-icon-flask); }
  .rw-icon[data-icon=sun] { --rw-icon-mask:var(--rw-icon-sun); }
  .rw-icon[data-icon=rocket] { --rw-icon-mask:var(--rw-icon-rocket); }
  .rw-icon[data-icon=package] { --rw-icon-mask:var(--rw-icon-package); }
  .rw-icon[data-icon=lightning] { --rw-icon-mask:var(--rw-icon-lightning); }
  .rw-icon[data-icon=drop] { --rw-icon-mask:var(--rw-icon-drop); }
  .rw-icon[data-icon=leaf] { --rw-icon-mask:var(--rw-icon-leaf); }
  .rw-icon[data-icon=trophy] { --rw-icon-mask:var(--rw-icon-trophy); }
  .rw-icon[data-icon=flag] { --rw-icon-mask:var(--rw-icon-flag); }
  .rw-icon[data-icon=target] { --rw-icon-mask:var(--rw-icon-target); }
  .rw-icon[data-icon=clock] { --rw-icon-mask:var(--rw-icon-clock); }
  .rw-icon[data-icon=magnifying-glass] { --rw-icon-mask:var(--rw-icon-magnifying-glass); }
  .rw-icon[data-icon=gear] { --rw-icon-mask:var(--rw-icon-gear); }
  .rw-icon[data-icon=bell] { --rw-icon-mask:var(--rw-icon-bell); }
  .rw-icon[data-icon=terminal-window] { --rw-icon-mask:var(--rw-icon-terminal-window); }
  .rw-icon[data-icon=keyboard] { --rw-icon-mask:var(--rw-icon-keyboard); }
  .rw-icon[data-icon=coffee] { --rw-icon-mask:var(--rw-icon-coffee); }
  .rw-icon[data-icon=lock] { --rw-icon-mask:var(--rw-icon-lock); }
  .rw-icon[data-icon=chart-line-up] { --rw-icon-mask:var(--rw-icon-chart-line-up); }
  .rw-icon[data-icon=cube] { --rw-icon-mask:var(--rw-icon-cube); }
  .rw-icon[data-icon=compass] { --rw-icon-mask:var(--rw-icon-compass); }
  .rw-icon[data-icon=planet] { --rw-icon-mask:var(--rw-icon-planet); }
  .rw-icon[data-icon=lightbulb] { --rw-icon-mask:var(--rw-icon-lightbulb); }
  .rw-icon[data-icon=confetti] { --rw-icon-mask:var(--rw-icon-confetti); }
  .rw-icon[data-icon=coins][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-coins-duotone); }
  .rw-icon[data-icon=users][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-users-duotone); }
  .rw-icon[data-icon=flask][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-flask-duotone); }
  .rw-icon[data-icon=sun][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-sun-duotone); }
  .rw-icon[data-icon=rocket][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-rocket-duotone); }
  .rw-icon[data-icon=package][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-package-duotone); }
  .rw-icon[data-icon=lightning][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-lightning-duotone); }
  .rw-icon[data-icon=leaf][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-leaf-duotone); }
  .rw-icon[data-icon=trophy][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-trophy-duotone); }
  .rw-icon[data-icon=planet][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-planet-duotone); }
  .rw-icon[data-icon=cube][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-cube-duotone); }
  .rw-icon[data-icon=compass][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-compass-duotone); }
  .rw-icon[data-icon=smiley][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-smiley-duotone); }
  .rw-icon[data-icon=heart][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-heart-duotone); }
  .rw-icon[data-icon=star][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-star-duotone); }
  .rw-icon[data-icon=sparkle][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-sparkle-duotone); }
  .rw-icon[data-icon=lightbulb][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-lightbulb-duotone); }
  .rw-icon[data-icon=confetti][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-confetti-duotone); }
  .rw-icon[data-icon=terminal-window][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-terminal-window-duotone); }
  .rw-icon[data-icon=keyboard][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-keyboard-duotone); }
  .rw-icon[data-icon=coffee][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-coffee-duotone); }
  .rw-icon[data-icon=lock][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-lock-duotone); }
  .rw-icon[data-icon=gear][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-gear-duotone); }
  .rw-icon[data-icon=bell][data-weight=duotone] { --rw-icon-mask:var(--rw-icon-bell-duotone); }
  .rw-icon[data-icon=check-circle][data-weight=fill] { --rw-icon-mask:var(--rw-icon-check-circle-fill); }
  .rw-icon[data-icon=x-circle][data-weight=fill] { --rw-icon-mask:var(--rw-icon-x-circle-fill); }
  .rw-icon[data-icon=heart][data-weight=fill] { --rw-icon-mask:var(--rw-icon-heart-fill); }
  .rw-icon[data-icon=star][data-weight=fill] { --rw-icon-mask:var(--rw-icon-star-fill); }
  .rw-icon[data-icon=warning][data-weight=fill] { --rw-icon-mask:var(--rw-icon-warning-fill); }
  .rw-icon[data-icon=info][data-weight=fill] { --rw-icon-mask:var(--rw-icon-info-fill); }
  .rw-icon[data-icon=smiley][data-weight=fill] { --rw-icon-mask:var(--rw-icon-smiley-fill); }
  .rw-icon[data-icon=sparkle][data-weight=fill] { --rw-icon-mask:var(--rw-icon-sparkle-fill); }
  .rw-icon[data-icon=bell][data-weight=fill] { --rw-icon-mask:var(--rw-icon-bell-fill); }
  .rw-icon[data-icon=lightning][data-weight=fill] { --rw-icon-mask:var(--rw-icon-lightning-fill); }
  @media (forced-colors:active) { .rw-icon { background:CanvasText; } }
}

@property --rw-value {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@layer runway-ui.meters {
  .rw-meter {
    margin-block-start: 9px;
  }
  .rw-meter__label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 10px;
    color: var(--rw-muted);
    margin-block-end: 5px;
  }
  .rw-meter__track {
    block-size: var(--rw-meter-height, 8px);
    border-radius: var(--rw-pill);
    background: var(--rw-soft);
    box-shadow: inset 0 1px 2px color-mix(in oklch, var(--rw-ink) 10%, transparent);
    overflow: hidden;
  }
  .rw-meter__fill {
    block-size: 100%;
    inline-size: clamp(0%, var(--rw-value, 0%), 100%);
    border-radius: inherit;
    background: var(--rw-meter-color, var(--rw-accent));
    box-shadow: inset 0 2px 0 color-mix(in oklch, white 35%, transparent);
    transition: --rw-value 0.6s var(--rw-spring, ease);
  }
  .rw-meter[data-tone="warning"] {
    --rw-meter-color: var(--rw-gold);
  }
  .rw-meter[data-tone="danger"] {
    --rw-meter-color: var(--rw-danger);
  }
  .rw-meter[data-tone="design"] {
    --rw-meter-color: #9577af;
  }
  .rw-meter[data-tone="pm"] {
    --rw-meter-color: #a58748;
  }
  .rw-meter[data-tone="energy"] {
    --rw-meter-color: var(--rw-gold);
  }
  .rw-meter[data-tone="morale"] {
    --rw-meter-color: #638c74;
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-meter__fill {
      transition: none;
    }
  }
}

@layer runway-ui.patterns {
  .rw-resource {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-inline-end: 1px solid var(--rw-line);
    font-variant-numeric: tabular-nums;
  }
  .rw-resource strong {
    display: block;
    font-size: 22px;
    letter-spacing: -0.04em;
  }
  .rw-resource small {
    display: block;
    margin-block-start: 4px;
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-resource__icon {
    font-size: 25px;
    color: var(--rw-accent);
  }
  .rw-slots {
    display: grid;
    grid-template-columns: repeat(var(--rw-columns, 4), minmax(0, 1fr));
    gap: 9px;
  }
  .rw-slot {
    position: relative;
    transition:
      translate 0.22s var(--rw-spring, ease),
      box-shadow 0.14s;
    min-block-size: 83px;
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
    color: var(--rw-ink);
    padding: 12px 6px;
    cursor: pointer;
    font: inherit;
  }
  .rw-slot__icon {
    display: block;
    font-size: 25px;
    margin-block-end: 7px;
  }
  .rw-slot small {
    display: block;
    font-size: 10px;
  }
  .rw-slot:hover:not(:disabled) {
    translate: 0 -3px;
    box-shadow: 0 4px 0 var(--rw-line);
  }
  .rw-slot[aria-pressed="true"] {
    border-color: var(--rw-accent);
    box-shadow: inset 0 0 0 1px var(--rw-accent);
    background: var(--rw-soft);
  }
  .rw-slot[data-rarity="rare"]::after {
    content: "Rare";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 5px;
    font-size: 8px;
    color: var(--rw-gold);
  }
  .rw-choice {
    text-align: start;
    inline-size: 100%;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    padding: var(--rw-choice-padding);
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
    color: var(--rw-ink);
    font: inherit;
    cursor: pointer;
  }
  .rw-choice > :first-child {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .rw-choice > :last-child {
    min-inline-size: 0;
    text-align: end;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }
  .rw-choice strong,
  .rw-choice small {
    display: block;
  }
  .rw-choice small {
    color: var(--rw-muted);
    margin-block-start: 5px;
    font-size: 11px;
  }
  .rw-objectives {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 14px 12px;
  }
  .rw-objectives li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
    font-size: 12px;
  }
  .rw-objectives li[data-complete="true"] {
    color: var(--rw-muted);
  }
  .rw-objectives li[data-complete="true"] span:last-child {
    text-decoration: line-through;
  }
  .rw-dock {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    inline-size: fit-content;
    max-inline-size: 100%;
    background: linear-gradient(
      to bottom,
      var(--rw-surface),
      color-mix(in oklch, var(--rw-surface) 90%, var(--rw-soft))
    );
    border: 1px solid var(--rw-line);
    padding: 8px;
    border-radius: calc(var(--rw-radius) + 14px);
    box-shadow: var(--rw-shadow);
  }
  .rw-dock .rw-button {
    min-inline-size: 85px;
    border-radius: var(--rw-pill);
    padding-inline: calc(var(--rw-control-inline) + 4px);
    transition:
      translate 0.35s var(--rw-spring),
      scale 0.35s var(--rw-spring),
      background-color 0.2s,
      box-shadow 0.14s;
    &:hover:not(:disabled, [aria-pressed="true"]) {
      translate: 0 -3px;
      scale: 1.04;
    }
    &:active:not(:disabled) {
      scale: 1.06 0.9;
    }
    &[aria-pressed="true"] {
      animation: rw-dock-pop 0.6s var(--rw-spring);
    }
    &[aria-pressed="true"] .rw-shortcut {
      animation: rw-dock-key 0.6s var(--rw-spring) 0.05s backwards;
    }
  }
  /* Squash, stretch and land when an action becomes the selected one. */
  @keyframes rw-dock-pop {
    0% {
      scale: 0.9 1.08;
      translate: 0 4px;
    }
    35% {
      scale: 1.1 0.9;
      translate: 0 -8px;
    }
    65% {
      scale: 0.97 1.04;
      translate: 0 1px;
    }
    100% {
      scale: 1;
      translate: 0 0;
    }
  }
  @keyframes rw-dock-key {
    0% {
      rotate: -18deg;
      scale: 0.6;
    }
    100% {
      rotate: 0deg;
      scale: 1;
    }
  }
  .rw-button[aria-pressed="true"] {
    --rw-button-bg: var(--rw-accent);
    --rw-button-ink: var(--rw-on-accent);
    --rw-button-border: var(--rw-accent);
  }
  .rw-shortcut {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.7em;
    padding: 1px 5px 2px;
    border: 1px solid color-mix(in oklch, currentColor 45%, transparent);
    border-radius: 7px;
    background: color-mix(in oklch, currentColor 12%, transparent);
    box-shadow: 0 2px 0 color-mix(in oklch, currentColor 30%, transparent);
    font: 700 10px / 1.4 var(--rw-font);
    opacity: 0.85;
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-dock .rw-button,
    .rw-dock .rw-shortcut {
      transition: none;
      animation: none !important;
    }
    .rw-dock .rw-button:is(:hover, :active):not(:disabled) {
      scale: none;
    }
    .rw-slot {
      transition: none;
    }
    .rw-slot:hover:not(:disabled) {
      translate: none;
    }
  }
}

/* Illustrated workspace navigation. Native links/buttons, application-owned routing. */
@layer runway-ui.patterns {
  .rw-view-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--rw-view-gap, 6px);
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding: 6px;
    border-radius: calc(var(--rw-radius) + 8px);
    background: color-mix(in oklch, var(--rw-raised) 70%, transparent);
    box-shadow: inset 0 2px 5px color-mix(in oklch, var(--rw-ink) 7%, transparent);
  }
  .rw-view-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-inline-size: var(--rw-view-min, 72px);
    max-inline-size: 140px;
    padding: 8px 12px 16px;
    border: 1px solid transparent;
    border-radius: calc(var(--rw-radius) + 4px);
    background: transparent;
    color: var(--rw-muted);
    font: 700 12px / 1.3 var(--rw-display-font);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      translate 0.3s var(--rw-spring),
      scale 0.2s var(--rw-spring),
      background-color 0.2s,
      box-shadow 0.2s,
      color 0.2s;
    & > :last-child {
      overflow-wrap: anywhere;
    }
    &:hover:not(:disabled) {
      translate: 0 -3px;
      background: color-mix(in oklch, var(--rw-surface) 75%, transparent);
      color: var(--rw-ink);
    }
    &:active:not(:disabled) {
      translate: 0 2px;
      scale: 1.06 0.9;
    }
    &:is([aria-current="page"], [aria-pressed="true"]) {
      animation: rw-view-tab-pop 0.55s var(--rw-spring);
      background: var(--rw-surface);
      color: var(--rw-accent);
      border-color: var(--rw-line);
      box-shadow:
        inset 0 1px var(--rw-highlight),
        0 3px 0 var(--rw-line),
        0 10px 18px color-mix(in oklch, var(--rw-ink) 9%, transparent);
    }
    /* A little pill that pops in under the current place. */
    &::after {
      content: "";
      position: absolute;
      inset-block-end: 5px;
      inline-size: 6px;
      block-size: 6px;
      border-radius: var(--rw-pill);
      background: currentColor;
      opacity: 0;
      scale: 0.3;
      transition:
        scale 0.35s var(--rw-spring),
        inline-size 0.35s var(--rw-spring),
        opacity 0.2s;
    }
    &:is([aria-current="page"], [aria-pressed="true"])::after {
      opacity: 1;
      scale: 1;
      inline-size: 20px;
    }
    &:focus-visible {
      outline: 3px solid var(--rw-focus);
      outline-offset: 3px;
    }
    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  .rw-view-tab__art {
    display: block;
    flex: none;
    inline-size: var(--rw-view-art, 48px);
    block-size: var(--rw-view-art, 48px);
    object-fit: contain;
    transition:
      rotate 0.35s var(--rw-spring),
      scale 0.35s var(--rw-spring);
  }
  .rw-view-tab:hover:not(:disabled) .rw-view-tab__art {
    rotate: -6deg;
    scale: 1.1;
  }
  .rw-view-tab:is([aria-current="page"], [aria-pressed="true"]) .rw-view-tab__art {
    animation:
      rw-view-tab-hop 0.6s var(--rw-spring) 0.08s backwards,
      rw-view-tab-bob 3.2s ease-in-out 0.7s infinite;
  }
  .rw-view-tabs[data-layout="inline"] .rw-view-tab {
    flex-direction: row;
    gap: 10px;
    max-inline-size: none;
    padding-block: 8px 14px;
  }
  /* Squash, stretch, land: plays when a tab becomes the current one. */
  @keyframes rw-view-tab-pop {
    0% {
      scale: 0.88 1.1;
      translate: 0 6px;
    }
    35% {
      scale: 1.1 0.9;
      translate: 0 -10px;
    }
    60% {
      scale: 0.96 1.05;
      translate: 0 2px;
    }
    100% {
      scale: 1;
      translate: 0 0;
    }
  }
  @keyframes rw-view-tab-hop {
    0% {
      translate: 0 0;
      rotate: -12deg;
    }
    40% {
      translate: 0 -8px;
      rotate: 8deg;
    }
    100% {
      translate: 0 0;
      rotate: 0deg;
    }
  }
  @keyframes rw-view-tab-bob {
    50% {
      translate: 0 -3px;
      rotate: 2deg;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-view-tab,
    .rw-view-tab::after,
    .rw-view-tab__art {
      transition: none;
    }
    .rw-view-tab,
    .rw-view-tab__art {
      animation: none !important;
    }
    .rw-view-tab:hover:not(:disabled),
    .rw-view-tab:active:not(:disabled) {
      translate: none;
      scale: none;
    }
    .rw-view-tab:hover:not(:disabled) .rw-view-tab__art {
      rotate: none;
      scale: none;
    }
  }
  @media (forced-colors: active) {
    .rw-view-tab:is([aria-current="page"], [aria-pressed="true"]) {
      border-color: Highlight;
      color: Highlight;
      box-shadow: none;
    }
  }
}

/* Section switcher. A sticky row of toggle buttons for sibling views in one workspace. */
@layer runway-ui.patterns {
  .rw-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 4px 12px;
    margin-block-end: 20px;
    border-block-end: 1px solid var(--rw-line);
    background: var(--rw-bg, var(--rw-surface));
    min-inline-size: 0;
    &[data-sticky] {
      position: sticky;
      inset-block-start: 0;
      z-index: 2;
    }
    & > .rw-button {
      font-size: 12px;
    }
  }
}

/* Social composition. Keep component order stable. */
@layer runway-ui.patterns {
  /* Segmented control: a sunken track of mutually exclusive buttons. */
  .rw-segmented {
    --rw-segment-tone: var(--rw-accent);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    max-inline-size: 100%;
    padding: 4px;
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-pill);
    background: color-mix(in oklch, var(--rw-raised) 80%, var(--rw-line));
    box-shadow: inset 0 2px 4px color-mix(in oklch, var(--rw-ink) 10%, transparent);
  }
  .rw-segmented__label {
    padding-inline: 10px 6px;
    color: var(--rw-muted);
    font: 700 10px / 1 var(--rw-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .rw-segment {
    --rw-segment-tone: var(--rw-accent);
    position: relative;
    min-inline-size: 0;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: var(--rw-pill);
    background: transparent;
    color: var(--rw-muted);
    font: 700 12px / 1.2 var(--rw-display-font);
    overflow-wrap: anywhere;
    cursor: pointer;
    transition:
      translate 0.3s var(--rw-spring),
      scale 0.3s var(--rw-spring),
      background-color 0.2s,
      color 0.2s,
      box-shadow 0.2s;
    &[data-tone="warm"] {
      --rw-segment-tone: var(--rw-gold);
    }
    &[data-tone="danger"] {
      --rw-segment-tone: var(--rw-danger);
    }
    &:hover:not(:disabled, [aria-pressed="true"]) {
      translate: 0 -2px;
      color: var(--rw-ink);
      background: color-mix(in oklch, var(--rw-surface) 60%, transparent);
    }
    &:active:not(:disabled) {
      scale: 1.05 0.88;
    }
    &[aria-pressed="true"] {
      animation: rw-segment-pop 0.55s var(--rw-spring);
      border-color: color-mix(in oklch, var(--rw-segment-tone) 35%, var(--rw-line));
      background: linear-gradient(
        to bottom,
        var(--rw-surface),
        color-mix(in oklch, var(--rw-segment-tone) 14%, var(--rw-surface))
      );
      color: var(--rw-segment-tone);
      box-shadow:
        inset 0 1px var(--rw-highlight),
        0 2px 0 color-mix(in oklch, var(--rw-segment-tone) 35%, var(--rw-line)),
        0 6px 12px color-mix(in oklch, var(--rw-segment-tone) 16%, transparent);
    }
    &:focus-visible {
      outline: 3px solid var(--rw-focus);
      outline-offset: 2px;
    }
    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  @keyframes rw-segment-pop {
    0% {
      scale: 0.86 1.1;
    }
    40% {
      scale: 1.12 0.9;
      translate: 0 -5px;
    }
    70% {
      scale: 0.97 1.03;
      translate: 0 1px;
    }
    100% {
      scale: 1;
      translate: 0 0;
    }
  }
}

@layer runway-ui.patterns {
  /* Avatar: initials, an image or an icon on a tinted tile. Set --rw-avatar-hue to any colour. */
  .rw-avatar {
    --rw-avatar-hue: var(--rw-accent);
    --rw-avatar-size: 36px;
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--rw-avatar-size);
    block-size: var(--rw-avatar-size);
    border-radius: 32%;
    background: color-mix(in oklch, var(--rw-avatar-hue) 18%, var(--rw-surface));
    color: var(--rw-avatar-hue);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--rw-avatar-hue) 25%, transparent),
      inset 0 -3px 0 color-mix(in oklch, var(--rw-avatar-hue) 14%, transparent);
    font: 700 calc(var(--rw-avatar-size) * 0.36) / 1 var(--rw-display-font);
    overflow: hidden;
    user-select: none;
    &[data-shape="round"] {
      border-radius: 50%;
    }
    &[data-size="sm"] {
      --rw-avatar-size: 28px;
    }
    &[data-size="lg"] {
      --rw-avatar-size: 48px;
    }
    & > img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }
}

@layer runway-ui.patterns {
  /* Person chip: a native button holding an avatar, an optional name and a status dot. */
  .rw-person-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-inline-size: 0;
  }
  .rw-person-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: 5px;
    border: 1px solid var(--rw-line);
    border-radius: calc(var(--rw-radius) - 2px);
    background: var(--rw-surface);
    color: var(--rw-ink);
    font: 650 12px / 1.2 var(--rw-display-font);
    text-align: start;
    cursor: pointer;
    box-shadow:
      inset 0 1px var(--rw-highlight),
      0 2px 0 color-mix(in oklch, var(--rw-line) 80%, transparent);
    transition:
      translate 0.3s var(--rw-spring),
      scale 0.3s var(--rw-spring),
      background-color 0.2s,
      border-color 0.2s,
      box-shadow 0.2s;
    &[data-layout="inline"] {
      padding-inline-end: 12px;
    }
    &:hover:not(:disabled) {
      translate: 0 -3px;
      & .rw-avatar {
        rotate: -6deg;
        scale: 1.08;
      }
    }
    &:active:not(:disabled) {
      translate: 0 0;
      scale: 0.94;
    }
    &[aria-pressed="true"] {
      animation: rw-chip-pop 0.55s var(--rw-spring);
      border-color: var(--rw-accent);
      background: var(--rw-soft);
      box-shadow:
        inset 0 1px var(--rw-highlight),
        0 0 0 3px color-mix(in oklch, var(--rw-accent) 22%, transparent),
        0 3px 0 color-mix(in oklch, var(--rw-accent) 35%, var(--rw-line));
    }
    &:focus-visible {
      outline: 3px solid var(--rw-focus);
      outline-offset: 3px;
    }
    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    & .rw-avatar {
      transition:
        rotate 0.3s var(--rw-spring),
        scale 0.3s var(--rw-spring);
    }
    & > span:not(.rw-avatar, .rw-person-chip__status) {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }
    & small {
      display: block;
      margin-block-start: 2px;
      color: var(--rw-muted);
      font: 500 10px / 1.2 var(--rw-font);
    }
  }
  .rw-person-chip__status {
    --rw-status: var(--rw-accent);
    position: absolute;
    inset-block-end: 2px;
    inset-inline-start: 31px;
    inline-size: 10px;
    block-size: 10px;
    border: 2px solid var(--rw-surface);
    border-radius: 50%;
    background: var(--rw-status);
    &[data-status="busy"] {
      --rw-status: var(--rw-gold);
    }
    &[data-status="away"] {
      --rw-status: var(--rw-muted);
    }
    &[data-status="alert"] {
      --rw-status: var(--rw-danger);
    }
  }
  @keyframes rw-chip-pop {
    0% {
      scale: 0.9 1.08;
    }
    40% {
      scale: 1.1 0.92;
      translate: 0 -7px;
    }
    70% {
      scale: 0.98 1.03;
      translate: 0 1px;
    }
    100% {
      scale: 1;
      translate: 0 0;
    }
  }
}

@layer runway-ui.patterns {
  /* Leaderboard: a native table with medal ranks, who-cells, trends and a highlighted "you" row. */
  .rw-leaderboard {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-size: 12px;
    & caption {
      padding-block-end: 8px;
      color: var(--rw-muted);
      font-size: 11px;
      text-align: start;
    }
    & th {
      padding: 6px 14px;
      color: var(--rw-muted);
      font: 700 10px / 1.2 var(--rw-font);
      letter-spacing: 0.08em;
      text-align: start;
      text-transform: uppercase;
    }
    & td,
    & tbody th {
      padding: 12px 14px;
      background: color-mix(in oklch, var(--rw-surface) 70%, transparent);
      border-block: 1px solid transparent;
      text-transform: none;
      letter-spacing: normal;
      font-size: 12px;
      color: var(--rw-ink);
      transition:
        background-color 0.2s,
        border-color 0.2s;
    }
    & tbody th {
      inline-size: 1%;
      font-weight: inherit;
    }
    & tbody tr > :first-child {
      border-start-start-radius: var(--rw-radius);
      border-end-start-radius: var(--rw-radius);
      border-inline-start: 1px solid transparent;
    }
    & tbody tr > :last-child {
      border-start-end-radius: var(--rw-radius);
      border-end-end-radius: var(--rw-radius);
      border-inline-end: 1px solid transparent;
    }
    & :is(th, td)[data-numeric] {
      text-align: end;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    & tbody tr {
      animation: rw-leaderboard-in 0.5s var(--rw-spring) backwards;
      animation-delay: calc(var(--rw-row, 0) * 45ms);
      &:hover > * {
        background: var(--rw-surface);
        border-color: var(--rw-line);
      }
      &[data-you] > * {
        background: var(--rw-soft);
        border-color: color-mix(in oklch, var(--rw-accent) 35%, var(--rw-line));
        box-shadow: 0 3px 0 color-mix(in oklch, var(--rw-accent) 15%, transparent);
      }
    }
  }
  .rw-leaderboard__who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-inline-size: 0;
    & strong {
      display: block;
      font-weight: 700;
    }
    & small {
      display: block;
      margin-block-start: 2px;
      color: var(--rw-muted);
      font-size: 10px;
    }
  }
  .rw-rank {
    --rw-medal: var(--rw-muted);
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--rw-medal) 14%, var(--rw-surface));
    color: var(--rw-medal);
    box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--rw-medal) 35%, transparent);
    font: 700 14px / 1 var(--rw-display-font);
    font-variant-numeric: tabular-nums;
    &[data-place="1"] {
      --rw-medal: #c4901f;
    }
    &[data-place="2"] {
      --rw-medal: #7d8794;
    }
    &[data-place="3"] {
      --rw-medal: #b0693a;
    }
    &:is([data-place="1"], [data-place="2"], [data-place="3"]) {
      box-shadow:
        inset 0 0 0 2px color-mix(in oklch, var(--rw-medal) 55%, transparent),
        0 2px 0 color-mix(in oklch, var(--rw-medal) 40%, transparent);
    }
  }
  tr:hover .rw-rank {
    animation: rw-rank-wiggle 0.5s var(--rw-spring);
  }
  .rw-outlook {
    --rw-outlook-tone: var(--rw-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--rw-pill);
    background: color-mix(in oklch, var(--rw-outlook-tone) 12%, transparent);
    color: var(--rw-outlook-tone);
    font: 700 11px / 1.2 var(--rw-font);
    &[data-direction="up"] {
      --rw-outlook-tone: var(--rw-accent);
    }
    &[data-direction="down"] {
      --rw-outlook-tone: var(--rw-danger);
    }
    &::before {
      content: "→";
    }
    &[data-direction="up"]::before {
      content: "↗";
    }
    &[data-direction="down"]::before {
      content: "↘";
    }
  }
  @keyframes rw-leaderboard-in {
    from {
      opacity: 0;
      translate: 0 12px;
      scale: 0.98;
    }
  }
  @keyframes rw-rank-wiggle {
    30% {
      rotate: -12deg;
      scale: 1.15;
    }
    60% {
      rotate: 8deg;
    }
  }
}

@layer runway-ui.patterns {
  @media (prefers-reduced-motion: reduce) {
    .rw-segment,
    .rw-person-chip,
    .rw-person-chip .rw-avatar,
    .rw-leaderboard :is(td, th) {
      transition: none;
    }
    .rw-segment,
    .rw-person-chip,
    .rw-leaderboard tbody tr,
    tr:hover .rw-rank {
      animation: none !important;
    }
    .rw-segment:is(:hover, :active):not(:disabled),
    .rw-person-chip:is(:hover, :active):not(:disabled),
    .rw-person-chip:hover:not(:disabled) .rw-avatar {
      translate: none;
      scale: none;
      rotate: none;
    }
  }
  @media (forced-colors: active) {
    .rw-segment[aria-pressed="true"],
    .rw-person-chip[aria-pressed="true"] {
      border-color: Highlight;
      color: Highlight;
    }
    .rw-leaderboard tbody tr[data-you] > * {
      border-color: Highlight;
    }
  }
}

/* Calm, legible pacing variant: persistent selection, equal targets, no layout motion. */
@layer runway-ui.patterns {
  .rw-segmented[data-variant="pace"] {
    margin: 0;
    min-inline-size: 0;
    gap: 4px;
    padding: 4px;
    border-radius: 7px;
    background: var(--rw-soft);
    box-shadow: none;
    & .rw-segment {
      display: grid;
      align-content: center;
      gap: 3px;
      background: transparent;
      box-shadow: none;
      min-inline-size: 72px;
      min-block-size: 42px;
      padding: 6px 12px;
      border-radius: 4px;
      color: var(--rw-ink);
      font: 650 12px / 1.2 var(--rw-font);
      translate: none;
      scale: none;
      animation: none;
      transition:
        background-color 120ms,
        color 120ms,
        border-color 120ms;
      & small {
        font: 400 10px / 1.2 var(--rw-font);
        color: inherit;
      }
      &:hover:not(:disabled, [aria-pressed="true"]) {
        background: var(--rw-surface);
        border-color: var(--rw-line);
      }
      &[aria-pressed="true"] {
        background: var(--rw-accent);
        color: var(--rw-on-accent);
        border-color: var(--rw-accent);
        box-shadow: inset 0 -3px color-mix(in oklch, var(--rw-on-accent) 35%, transparent);
      }
      &[data-tone="warm"][aria-pressed="true"] {
        background: color-mix(in oklch, var(--rw-gold) 35%, var(--rw-surface));
        color: var(--rw-ink);
        border-color: var(--rw-gold);
        box-shadow: inset 0 -3px var(--rw-gold);
      }
      &:disabled {
        opacity: 0.5;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-segmented[data-variant="pace"] .rw-segment {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .rw-segmented[data-variant="pace"] .rw-segment[aria-pressed="true"] {
      background: Highlight;
      color: HighlightText;
      border-color: Highlight;
      outline: 2px solid Highlight;
      outline-offset: -3px;
    }
  }
}


/* Composable desktop workspaces. The host owns viewport placement and imagery. */
@layer runway-ui.patterns {
  .rw-command-bar {
    --rw-command-bg: #183b34;
    --rw-command-ink: #fff8df;
    --rw-command-muted: #d6ceb0;
    display: flex;
    align-items: center;
    gap: var(--rw-space);
    min-inline-size: 0;
    padding: 16px 22px;
    color: var(--rw-command-ink);
    background: var(--rw-command-bg);
    border: 1px solid var(--rw-gold);
    border-radius: var(--rw-radius);
    box-shadow:
      inset 0 0 0 3px var(--rw-command-bg),
      inset 0 0 0 4px #ffffff14;
    & .rw-command-bar__identity {
      min-inline-size: 0;
      margin-inline-end: auto;
    }
    & .rw-command-bar__metrics {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    & .rw-command-stat {
      display: grid;
      gap: 5px;
      padding-inline-start: 20px;
      border-inline-start: 1px solid #ffffff30;
      font-variant-numeric: tabular-nums;
      & > span {
        color: var(--rw-command-muted);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      & > strong {
        font-size: 22px;
        line-height: 1.1;
      }
      & > small {
        color: var(--rw-command-muted);
      }
    }
  }
  .rw-folio-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-inline-size: 0;
    padding: 0;
    & > .rw-folio-tab {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-block-size: 80px;
      padding: 10px 14px;
      border: 1px solid var(--rw-line);
      border-radius: 5px 12px 12px 5px;
      background: var(--rw-raised);
      color: var(--rw-ink);
      box-shadow: 0 3px 0 color-mix(in oklch, var(--rw-ink) 20%, transparent);
      font: 600 14px / 1.2 var(--rw-font);
      text-decoration: none;
      cursor: pointer;
      & > img {
        inline-size: 36px;
        block-size: 36px;
        object-fit: contain;
      }
      &:is([aria-current="page"], [aria-selected="true"]) {
        border-inline-start: 5px solid var(--rw-tab-accent, var(--rw-accent));
        background: var(--rw-surface);
        color: var(--rw-accent);
        font-weight: 750;
      }
      &:hover {
        background: var(--rw-surface);
      }
      &:focus-visible {
        outline: 3px solid var(--rw-focus);
        outline-offset: 3px;
      }
    }
  }
  .rw-sheet {
    min-inline-size: 0;
    padding: var(--rw-panel-padding);
    border: 1px solid var(--rw-line);
    border-radius: 8px;
    background: var(--rw-surface);
    color: var(--rw-ink);
    box-shadow: 0 5px 16px color-mix(in oklch, var(--rw-ink) 10%, transparent);
  }
  .rw-dossier-list {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
    gap: 14px 20px;
  }
  .rw-dossier {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 16px 20px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--rw-line);
    border-radius: 8px;
    background: var(--rw-raised);
    & .rw-dossier__body,
    & .rw-dossier__actions {
      min-inline-size: 0;
      display: grid;
      gap: 12px;
    }
    & .rw-dossier__heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    & h3,
    & p {
      margin: 0;
    }
  }
  @container (inline-size < 540px) {
    .rw-dossier > .rw-dossier__body,
    .rw-dossier > .rw-dossier__actions {
      grid-column: 1 / -1;
    }
  }
  .rw-control-console {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--rw-line);
    border-radius: 12px;
    background: var(--rw-surface);
    color: var(--rw-ink);
    box-shadow: 0 3px 0 color-mix(in oklch, var(--rw-ink) 25%, transparent);
  }
  @media (forced-colors: active) {
    .rw-command-bar,
    .rw-sheet,
    .rw-dossier,
    .rw-control-console,
    .rw-folio-tabs > .rw-folio-tab {
      color: CanvasText;
      background: Canvas;
      border-color: CanvasText;
      box-shadow: none;
    }
    .rw-command-bar .rw-command-stat > :is(span, small) {
      color: CanvasText;
    }
    .rw-folio-tabs > .rw-folio-tab[aria-current="page"] {
      border-inline-start-color: Highlight;
    }
  }
}

/* Opt-in paper workspace components. Host owns placement, content and imagery. */
@layer runway-ui.patterns {
  /* Warm paper, walnut edges and forest ink echo the illustrated office. */
  .rw-paper-command {
    background: #fcf7e9;
    color: #243f35;
    border: 1px solid #b9ad8f;
    border-block-end: 3px solid #8b7050;
    border-radius: 7px;
    box-shadow: 0 4px 14px #40372320;
    backdrop-filter: none;
  }
  .rw-paper-command .rw-command-bar__identity {
    max-width: 330px;
  }
  .rw-paper-command .rw-command-bar__identity > small {
    color: #706344;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .rw-paper-command .rw-command-bar__identity > button {
    color: #243f35;
    font-size: 25px;
  }
  .rw-paper-command .rw-command-stat {
    border-inline-start: 1px solid #d9cfb8;
    gap: 2px;
    padding-inline-start: 22px;
  }
  .rw-paper-command .rw-command-stat > span,
  .rw-paper-command .rw-command-stat > small {
    color: #655f4d;
  }
  .rw-paper-command .rw-command-stat > span {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .rw-paper-command .rw-command-stat > strong {
    color: #243f35;
    font-size: 23px;
    font-variant-numeric: tabular-nums;
  }
  .rw-paper-command .rw-command-action {
    background: #f1ead8;
    border-color: #c7b999;
    color: #304b3e;
    border-radius: 5px;
  }
  .rw-paper-command .rw-command-action:hover {
    background: #e4dbc4;
  }
  .rw-paper-command .rw-command-action img {
    filter: none;
  }
  .rw-paper-nav {
    padding: 4px;
    gap: 2px;
    background: #fcf7e9;
    border: 1px solid #b9ad8f;
    border-radius: 7px;
    box-shadow:
      0 3px 0 #8b7050,
      0 6px 14px #40372318;
  }
  .rw-paper-nav .rw-folio-tab {
    border-radius: 4px;
    min-inline-size: 100px;
    color: #405044;
  }
  .rw-paper-nav .rw-folio-tab[aria-current="page"] {
    background: #2d4d3e;
    color: #fff7df;
    box-shadow: inset 0 -2px #bd995b;
  }
  .rw-paper-nav .rw-folio-tab:hover:not([aria-current="page"]) {
    background: #ede4cf;
  }
  .rw-paper-panel {
    background: #fcf7e9;
    border: 1px solid #c6b99a;
    border-radius: 6px;
    box-shadow: 0 4px 16px #40372318;
    backdrop-filter: none;
  }
  .rw-paper-panel[data-accent] {
    border-block-start: 3px solid #a88449;
  }
  .rw-paper-panel .rw-kicker {
    color: #76613d;
    font-size: 9px;
  }
  .rw-paper-panel p,
  .rw-paper-panel .rw-paper-panel__meta,
  .rw-paper-panel > small {
    color: #5e6554;
    font-size: 11px;
    line-height: 1.5;
  }
  .rw-paper-panel > strong {
    color: #294536;
  }
  .rw-paper-console {
    background: #fcf7e9;
    border: 1px solid #b9ad8f;
    border-radius: 7px;
    box-shadow:
      0 3px 0 #8b7050,
      0 6px 16px #40372318;
  }
  .rw-paper-sheet {
    background: #faf5e7;
    --rw-sheet-accent: #8a7040;
  }
  .rw-paper-sheet .rw-paper-sheet__header {
    padding-block: 14px;
    border-block-end: 1px solid #c8b999;
    background: #faf5e7;
  }
  .rw-paper-sheet .rw-paper-sheet__header h1 {
    font-size: 27px;
  }
  .rw-season-cover {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-block-size: 220px;
    overflow: hidden;
    border: 1px solid #d4c5a6;
    border-radius: 6px;
    background: #f2e7d1;
    margin-block-end: 24px;
  }
  .rw-season-cover__copy {
    padding: 16px 28px;
    align-self: center;
  }
  .rw-season-cover .rw-kicker {
    color: #75603b;
    font-size: 10px;
  }
  .rw-season-cover h2 {
    font:
      500 28px / 1.08 Georgia,
      serif;
    letter-spacing: -0.035em;
    color: #294536;
    margin: 8px 0;
  }
  .rw-season-cover p {
    color: #655e4d;
    font-size: 13px;
    line-height: 1.6;
    max-width: 48ch;
    margin: 8px 0;
  }
  .rw-season-cover__art {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    max-block-size: 260px;
    object-fit: cover;
    object-position: center 20%;
  }
  .rw-season-facts {
    display: flex;
    gap: 28px;
    padding-block-start: 8px;
    margin: 8px 0 0;
    border-block-start: 1px solid #cdbd9b;
  }
  .rw-season-facts dt {
    color: #655e4d;
    font-size: 11px;
  }
  .rw-season-facts dd {
    margin: 5px 0 0;
    color: #294536;
    font:
      500 24px Georgia,
      serif;
  }
  .rw-season-facts dd span {
    font-size: 14px;
    color: #655e4d;
  }
  .rw-paper-sheet .rw-leaderboard caption {
    text-align: left;
    font-size: 24px;
    color: #294536;
  }
  .rw-paper-sheet .rw-leaderboard caption span {
    display: block;
    font: 10px / 2 var(--rw-font);
    letter-spacing: 0.1em;
    color: #76613d;
  }
  .rw-paper-sheet .rw-leaderboard tbody tr[data-you] {
    background: #e5ecdd;
    box-shadow: inset 3px 0 #3c634b;
  }
  .rw-paper-sheet .rw-leaderboard td,
  .rw-paper-sheet .rw-leaderboard tbody th {
    padding-block: 15px;
  }
  .rw-paper-sheet .rw-paper-sheet__note {
    color: #655e4d;
    line-height: 1.7;
    margin-block: 18px 28px;
  }
  @media (width < 1280px) {
    .rw-paper-command .rw-command-bar__identity {
      max-width: 240px;
    }
    .rw-paper-command .rw-command-stat {
      padding-inline-start: 14px;
    }
    .rw-paper-command .rw-command-stat > strong {
      font-size: 20px;
    }
    .rw-season-cover__copy {
      padding: 16px 22px;
    }
    .rw-season-facts {
      gap: 18px;
    }
  }
  @media (forced-colors: active) {
    .rw-paper-command,
    .rw-paper-nav,
    .rw-paper-panel[data-accent],
    .rw-paper-panel,
    .rw-paper-console,
    .rw-season-cover {
      background: Canvas;
      color: CanvasText;
      border-color: CanvasText;
    }
    .rw-paper-command .rw-command-bar__identity > button,
    .rw-paper-command .rw-command-bar__identity > small,
    .rw-paper-command .rw-command-stat > strong,
    .rw-paper-command .rw-command-stat > span,
    .rw-paper-command .rw-command-stat > small {
      color: CanvasText;
    }
  }
}
@layer runway-ui.patterns {
  .rw-season-cover {
    container-type: inline-size;
  }
  .rw-season-cover:not(:has(.rw-season-cover__art)) {
    grid-template-columns: 1fr;
  }
  .rw-season-cover__copy {
    min-inline-size: 0;
  }
  .rw-season-facts {
    flex-wrap: wrap;
  }
  .rw-season-facts dd {
    overflow-wrap: anywhere;
  }
  .rw-paper-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rw-paper-nav .rw-folio-tab {
    flex-direction: row;
    min-block-size: 44px;
  }
  @container (width < 480px) {
    .rw-season-cover__copy {
      grid-column: 1 / -1;
    }
    .rw-season-cover__art {
      grid-column: 1 / -1;
      max-block-size: 200px;
    }
  }
}

@layer runway-ui.simulation {
  /* Shared columns align every production row without duplicated track sizes. */
  .rw-ledger {
    display: grid;
    grid-template-columns: minmax(140px, 1.5fr) repeat(3, minmax(80px, 1fr));
    gap: 0 16px;
    font-variant-numeric: tabular-nums;
  }
  .rw-ledger__row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    padding-block: 12px;
    border-block-end: 1px solid var(--rw-line);
    font-size: 12px;
  }
  .rw-ledger__row > *:not(:first-child) {
    text-align: end;
  }
  .rw-ledger__row[data-heading] {
    color: var(--rw-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .rw-viewport {
    container: rw-panel / inline-size;
  }
  .rw-sim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  @container rw-panel (inline-size < 980px) {
    .rw-sim-grid {
      grid-template-columns: 1fr;
    }
  }
  .rw-virtual {
    block-size: 284px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
  }
  .rw-virtual__row {
    display: grid;
    grid-template-columns: repeat(var(--rw-columns, 6), minmax(0, 1fr));
    gap: 8px;
    block-size: var(--rw-row-height, 92px);
    padding: 4px 8px;
    box-sizing: border-box;
  }
  .rw-virtual__cell {
    min-inline-size: 0;
  }
  .rw-virtual .rw-slot {
    inline-size: 100%;
    block-size: calc(var(--rw-row-height, 92px) - 8px);
    min-block-size: 0;
    overflow: hidden;
  }
  .rw-virtual .rw-slot small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rw-panel:has(.rw-choice[aria-pressed="true"]) {
    border-color: var(--rw-accent);
  }
  @media (forced-colors: active) {
    .rw-chart__plot,
    .rw-meter__fill {
      background: Highlight;
    }
    .rw-slot[aria-pressed="true"] {
      outline: 2px solid Highlight;
    }
  }
}

/* Modern layout baseline: nested semantic elements share parent tracks. */
@layer runway-ui.layout {
  .rw-layout {
    container: rw-layout / inline-size;
    min-inline-size: 0;
  }
  .rw-form-grid {
    display: grid;
    grid-template-columns: repeat(
        min(var(--rw-form-columns, 2), var(--rw-layout-column-limit, var(--rw-form-columns, 2))),
        minmax(0, 1fr)
      );
    gap: var(--rw-space);
    & > .rw-field {
      display: grid;
      grid-template-rows: subgrid;
      row-gap: var(--rw-content-gap);
      grid-row: span 3;
      min-inline-size: 0;
      & > :first-child {
        grid-row: 1;
        align-self: end;
        font-weight: 600;
      }
      & > :nth-child(2) {
        grid-row: 2;
        inline-size: 100%;
        align-self: start;
      }
      & > :nth-child(3) {
        grid-row: 3;
        margin: 0;
        color: var(--rw-muted);
        font-size: 0.8em;
      }
      &:has(:focus-visible) > :first-child {
        color: var(--rw-accent);
      }
      &:has([aria-invalid="true"], :user-invalid) > :first-child {
        color: var(--rw-danger);
      }
    }
  }
  .rw-card-grid {
    display: grid;
    grid-template-columns: repeat(
        min(var(--rw-card-columns, 3), var(--rw-layout-column-limit, var(--rw-card-columns, 3))),
        minmax(0, 1fr)
      );
    gap: var(--rw-space);
    & > .rw-card {
      display: grid;
      grid-template-rows: subgrid;
      row-gap: var(--rw-content-gap);
      grid-row: span 4;
      min-inline-size: 0;
      & > .rw-card__title {
        grid-row: 1;
        margin: 0;
        font:
          650 clamp(1.05rem, 0.95rem + 0.45cqi, 1.35rem) / 1.3
          var(--rw-display-font, var(--rw-font));
        text-wrap: balance;
      }
      & > .rw-card__description {
        grid-row: 2;
        margin: 0;
        color: var(--rw-muted);
        text-wrap: pretty;
      }
      & > .rw-card__body {
        grid-row: 3;
        min-inline-size: 0;
        align-self: start;
      }
      & > .rw-card__footer {
        grid-row: 4;
        align-self: end;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
    }
  }
  .rw-stat-grid {
    display: grid;
    grid-template-columns: repeat(
        min(var(--rw-stat-columns, 4), var(--rw-layout-column-limit, var(--rw-stat-columns, 4))),
        minmax(0, 1fr)
      );
    gap: var(--rw-space);
    & > .rw-stat {
      display: grid;
      grid-template-rows: subgrid;
      row-gap: var(--rw-content-gap);
      grid-row: span 3;
      min-inline-size: 0;
      font-variant-numeric: tabular-nums;
      & > .rw-stat__label {
        grid-row: 1;
        color: var(--rw-muted);
        font-size: 0.8em;
        text-wrap: balance;
      }
      & > .rw-stat__value {
        grid-row: 2;
        font:
          700 clamp(1.5rem, 1.2rem + 1cqi, 2.25rem) / 1.1 var(--rw-display-font, var(--rw-font));
        overflow-wrap: anywhere;
      }
      & > .rw-stat__detail {
        grid-row: 3;
        color: var(--rw-muted);
        font-size: 0.8em;
      }
    }
  }
  .rw-choice-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(32%);
    gap: var(--rw-space);
    & > .rw-choice {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-items: center;
    }
  }
  @container rw-layout (inline-size < 720px) {
    .rw-card-grid,
    .rw-stat-grid {
      --rw-layout-column-limit: 2;
    }
  }
  @container rw-layout (inline-size < 460px) {
    .rw-card-grid,
    .rw-form-grid,
    .rw-stat-grid {
      --rw-layout-column-limit: 1;
    }
  }
}

/* Native details: a rounded card with an icon badge that springs open. Supported engines also animate its intrinsic size. */
@layer runway-ui.primitives {
  @keyframes rw-disclosure-boop {
    40% {
      scale: 1.22;
      rotate: -8deg;
    }
    to {
      scale: 1;
      rotate: 0deg;
    }
  }
  .rw-disclosure {
    --_icon: var(--rw-disclosure-icon, var(--rw-icon-caret-right));
    interpolate-size: allow-keywords;
    padding: 0;
    border: 2px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
    transition:
      background-color 0.2s,
      border-color 0.2s;
    & > summary {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-radius: calc(var(--rw-radius) - 2px);
      font-weight: 650;
      list-style: none;
      cursor: pointer;
      transition: background-color 0.15s;
      &::-webkit-details-marker {
        display: none;
      }
      /* Badge circle (::before) with the icon drawn over it (::after) so each can use its own colour. */
      &::before {
        content: "";
        flex: none;
        inline-size: 1.7em;
        block-size: 1.7em;
        border-radius: 50%;
        background: var(--rw-soft);
        box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--rw-accent) 18%, transparent);
        transition:
          background-color 0.2s,
          scale 0.3s var(--rw-spring, ease);
      }
      &::after {
        content: "";
        position: absolute;
        inset-inline-start: calc(16px + 0.3em);
        inset-block-start: 50%;
        translate: 0 -50%;
        inline-size: 1.1em;
        block-size: 1.1em;
        background: var(--rw-accent);
        mask: var(--_icon) center / contain no-repeat;
        transition:
          rotate 0.4s var(--rw-spring, ease),
          background-color 0.2s;
      }
      &:dir(rtl)::after {
        scale: -1 1;
      }
      &:hover {
        background: color-mix(in oklch, var(--rw-soft) 60%, transparent);
      }
      &:hover::before {
        animation: rw-disclosure-boop 0.45s var(--rw-spring, ease);
      }
      &:active::before {
        scale: 0.88;
      }
      &:focus-visible {
        outline: 3px solid var(--rw-focus);
        outline-offset: 2px;
      }
    }
    &[open] {
      border-color: color-mix(in oklch, var(--rw-accent) 40%, var(--rw-line));
      background: var(--rw-surface);
    }
    &[open] > summary::before {
      background: var(--rw-accent);
    }
    &[open] > summary::after {
      background: var(--rw-on-accent);
      rotate: 90deg;
    }
    & > :not(summary) {
      margin: 0;
      padding: 0 16px 16px;
    }
  }
  @supports selector(::details-content) {
    .rw-disclosure::details-content {
      block-size: 0;
      opacity: 0;
      overflow: clip;
      overflow-clip-margin: 8px;
      transition:
        block-size 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
        opacity 0.25s,
        content-visibility 0.35s allow-discrete;
    }
    .rw-disclosure[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-disclosure,
    .rw-disclosure > summary,
    .rw-disclosure > summary::before,
    .rw-disclosure > summary::after,
    .rw-disclosure::details-content {
      transition: none;
    }
    .rw-disclosure > summary:hover::before {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .rw-disclosure {
      border-color: CanvasText;
    }
    .rw-disclosure > summary::before {
      border: 1px solid CanvasText;
      background: Canvas;
    }
    .rw-disclosure > summary::after {
      background: CanvasText;
    }
    .rw-disclosure[open] > summary::after {
      background: CanvasText;
    }
  }
}

/* Original CSS plots. Numeric values and labels remain application-owned HTML. */
@layer runway-ui.charts {
  .rw-chart {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .rw-chart caption {
    text-align: start;
    font-weight: 600;
    padding-block-end: 14px;
  }
  .rw-chart th,
  .rw-chart td {
    text-align: start;
    padding: 9px 8px;
    border-block-end: 1px solid var(--rw-line);
  }
  .rw-chart td:last-child {
    text-align: end;
  }
  .rw-chart__plot {
    display: block;
    block-size: 12px;
    inline-size: clamp(0%, var(--rw-value, 0%), 100%);
    background: var(--rw-chart-color, var(--rw-accent));
    border-radius: 2px;
  }
  .rw-chart [data-series="expense"] {
    --rw-chart-color: var(--rw-gold);
  }
  .rw-chart__axis {
    inline-size: 60%;
  }
  .rw-figure {
    --rw-chart-height: 180px;
    --rw-chart-max: 100;
    --rw-chart-color: var(--rw-accent);
    container: rw-chart / inline-size;
    margin: 0;
    min-inline-size: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .rw-figure figcaption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    margin-block-end: 20px;
    font-weight: 600;
  }
  .rw-figure figcaption small {
    color: var(--rw-muted);
    font-weight: 400;
  }
  .rw-chart-scale {
    display: flex;
    justify-content: space-between;
    color: var(--rw-muted);
    font-size: 10px;
    margin-block: 8px;
  }
  .rw-columns {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-rows: var(--rw-chart-height) auto auto;
    column-gap: var(--rw-columns-gap, clamp(2px, 1.2cqi, 16px));
    row-gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    background:
      repeating-linear-gradient(to top, var(--rw-line) 0 1px, transparent 1px 25%) top / 100%
      var(--rw-chart-height) no-repeat;
  }
  .rw-columns > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: 1 / 4;
    min-inline-size: 0;
    text-align: center;
  }
  .rw-column-track {
    display: flex;
    align-items: end;
    justify-content: center;
    border-block-end: 1px solid var(--rw-line);
  }
  .rw-column-mark {
    display: block;
    inline-size: min(100%, 48px);
    block-size: clamp(0%, calc(var(--rw-amount, 0) / var(--rw-chart-max) * 100%), 100%);
    background: var(--rw-chart-color);
    border-radius: 3px 3px 0 0;
  }
  .rw-columns strong {
    font-size: 12px;
  }
  .rw-columns .rw-category {
    font-size: 10px;
    color: var(--rw-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rw-series-list {
    display: grid;
    grid-template-columns: fit-content(26%) minmax(0, 1fr) fit-content(20%);
    gap: 16px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rw-series-list > li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
  }
  .rw-series-list > li > :is(:first-child, :last-child) {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .rw-series-list strong {
    text-align: end;
    font-size: 11px;
  }
  .rw-stack-track {
    display: flex;
    block-size: 24px;
    background: var(--rw-soft);
    overflow: hidden;
    border-radius: 2px;
  }
  .rw-stack-mark {
    display: block;
    flex: none;
    inline-size: clamp(0%, calc(var(--rw-amount, 0) / var(--rw-chart-max) * 100%), 100%);
    background: var(--rw-chart-color);
  }
  [data-series="secondary"] {
    --rw-chart-color: var(--rw-gold);
  }
  [data-series="tertiary"] {
    --rw-chart-color: var(--rw-muted);
  }
  .rw-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-block: 18px 0;
    font-size: 10px;
  }
  .rw-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .rw-legend i {
    inline-size: 9px;
    block-size: 9px;
    background: var(--rw-chart-color);
    border-radius: 2px;
  }
  .rw-diverging-track {
    position: relative;
    block-size: 24px;
    background:
      linear-gradient(
        to right,
        transparent calc(50% - 0.5px),
        var(--rw-muted) 0 calc(50% + 0.5px),
        transparent 0
      ),
      var(--rw-soft);
  }
  /* The axis inherits the actual plot track, including translated labels and large values. */
  .rw-figure:has(> .rw-series-list) {
    display: grid;
    grid-template-columns: fit-content(26%) minmax(0, 1fr) fit-content(20%);
    column-gap: 12px;
    & > * {
      grid-column: 1 / -1;
      min-inline-size: 0;
    }
    & > .rw-series-list {
      grid-template-columns: subgrid;
    }
    & > .rw-series-list + .rw-chart-scale {
      grid-column: 2;
    }
  }
  .rw-diverging-mark {
    display: block;
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 50%;
    inline-size: clamp(0%, calc(var(--rw-amount, 0) / var(--rw-chart-max) * 50%), 50%);
    background: var(--rw-chart-color);
  }
  .rw-diverging-mark[data-negative] {
    inset-inline-start: auto;
    inset-inline-end: 50%;
    inline-size: clamp(0%, calc(var(--rw-amount, 0) / var(--rw-chart-max) * -50%), 50%);
    background: var(--rw-gold);
  }
  .rw-area {
    --rw-y0: 100%;
    --rw-y1: 100%;
    --rw-y2: 100%;
    --rw-y3: 100%;
    --rw-y4: 100%;
    --rw-y5: 100%;
    block-size: var(--rw-chart-height);
    position: relative;
    background: repeating-linear-gradient(to top, var(--rw-line) 0 1px, transparent 1px 25%);
    border-block-end: 1px solid var(--rw-line);
  }
  .rw-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      color-mix(in oklch, var(--rw-chart-color) 12%, transparent),
      color-mix(in oklch, var(--rw-chart-color) 70%, transparent)
    );
    clip-path: polygon(
      0% 100%,
      0% var(--rw-y0),
      20% var(--rw-y1),
      40% var(--rw-y2),
      60% var(--rw-y3),
      80% var(--rw-y4),
      100% var(--rw-y5),
      100% 100%
    );
  }
  @supports (clip-path: shape(from 0% 100%, line to 100% 0%, close)) {
    .rw-area::before {
      clip-path: shape(
        from 0% 100%,
        line to 0% var(--rw-y0),
        line to 20% var(--rw-y1),
        line to 40% var(--rw-y2),
        line to 60% var(--rw-y3),
        line to 80% var(--rw-y4),
        line to 100% var(--rw-y5),
        line to 100% 100%,
        close
      );
    }
  }
  /* attr() resolves on the mark itself, never on its parent. Inline numeric
     custom properties remain the fallback for engines without typed attr(). */
  @supports (inline-size: calc(attr(data-value type(<number>), 0) * 1px)) {
    .rw-column-mark[data-value],
    .rw-stack-mark[data-value],
    .rw-diverging-mark[data-value] {
      --rw-amount: attr(data-value type(<number>), 0);
    }
  }
  .rw-chart-data {
    margin-block-start: 20px;
    font-size: 11px;
  }
  .rw-chart-data summary {
    cursor: pointer;
    color: var(--rw-accent);
  }
  .rw-chart-data table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-start: 10px;
  }
  .rw-chart-data th,
  .rw-chart-data td {
    text-align: start;
    padding: 7px;
    border-block-end: 1px solid var(--rw-line);
  }
  /* Dense columns: tiers keyed to item count, no JavaScript and no per-label container units (those force a full restyle on resize). Hidden values and labels stay in the accessibility tree; exact values live in the data table. */
  .rw-columns:has(> li:nth-child(25)):not(:has(> li:nth-child(41))) {
    column-gap: var(--rw-columns-gap, 2px);
  }
  .rw-columns:has(> li:nth-child(25)):not(:has(> li:nth-child(41))) :is(strong, .rw-category) {
    font-size: 9px;
  }
  .rw-columns:has(> li:nth-child(41)):not(:has(> li:nth-child(81))) {
    column-gap: var(--rw-columns-gap, 1px);
    padding-inline: 24px;
  }
  .rw-columns:has(> li:nth-child(41)):not(:has(> li:nth-child(81))) > li > strong {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(41)):not(:has(> li:nth-child(81)))
    > li:not(:nth-child(4n + 1))
    > .rw-category {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(41)):not(:has(> li:nth-child(81))) > li > .rw-category {
    justify-self: center;
    max-inline-size: 48px;
  }
  .rw-columns:has(> li:nth-child(81)):not(:has(> li:nth-child(201))) {
    column-gap: var(--rw-columns-gap, 1px);
    padding-inline: 24px;
  }
  .rw-columns:has(> li:nth-child(81)):not(:has(> li:nth-child(201))) > li > strong {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(81)):not(:has(> li:nth-child(201)))
    > li:not(:nth-child(10n + 1))
    > .rw-category {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(81)):not(:has(> li:nth-child(201))) > li > .rw-category {
    justify-self: center;
    max-inline-size: 48px;
  }
  .rw-columns:has(> li:nth-child(201)):not(:has(> li:nth-child(601))) {
    column-gap: var(--rw-columns-gap, 1px);
    padding-inline: 24px;
  }
  .rw-columns:has(> li:nth-child(201)):not(:has(> li:nth-child(601))) > li > strong {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(201)):not(:has(> li:nth-child(601)))
    > li:not(:nth-child(30n + 1))
    > .rw-category {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(201)):not(:has(> li:nth-child(601))) > li > .rw-category {
    justify-self: center;
    max-inline-size: 48px;
  }
  .rw-columns:has(> li:nth-child(601)):not(:has(> li:nth-child(2001))) {
    column-gap: var(--rw-columns-gap, 0px);
    padding-inline: 24px;
  }
  .rw-columns:has(> li:nth-child(601)):not(:has(> li:nth-child(2001))) > li > strong {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(601)):not(:has(> li:nth-child(2001)))
    > li:not(:nth-child(100n + 1))
    > .rw-category {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(601)):not(:has(> li:nth-child(2001))) > li > .rw-category {
    justify-self: center;
    max-inline-size: 48px;
  }
  .rw-columns:has(> li:nth-child(2001)) {
    column-gap: var(--rw-columns-gap, 0px);
    padding-inline: 24px;
  }
  .rw-columns:has(> li:nth-child(2001)) > li > strong {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(2001)) > li:not(:nth-child(500n + 1)) > .rw-category {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rw-columns:has(> li:nth-child(2001)) > li > .rw-category {
    justify-self: center;
    max-inline-size: 48px;
  }
  .rw-spark:has(> li:nth-child(41)) {
    gap: 1px;
  }
  .rw-spark:has(> li:nth-child(201)) {
    gap: 0;
  }
  .rw-figure[data-grid="off"] .rw-columns,
  .rw-figure[data-grid="off"] .rw-area {
    background: none;
  }
  @container rw-chart (inline-size < 380px) {
    .rw-figure figcaption {
      flex-wrap: wrap;
    }
  }
  @media (forced-colors: active) {
    .rw-column-mark,
    .rw-stack-mark,
    .rw-diverging-mark,
    .rw-area::before,
    .rw-chart__plot {
      background: Highlight;
      forced-color-adjust: none;
    }
    .rw-stack-mark {
      border: 1px solid Canvas;
    }
    .rw-diverging-track {
      border-inline: 1px solid CanvasText;
    }
    .rw-diverging-track::after {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 50%;
      border-inline-start: 1px solid CanvasText;
    }
  }
}

/* CSS-only small multiples and annotated history. The host owns the data. */
@layer runway-ui.charts {
  .rw-spark {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 3px;
    block-size: 32px;
    min-inline-size: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    & > li {
      block-size: clamp(0%, calc(var(--rw-amount, 0) / var(--rw-chart-max, 100) * 100%), 100%);
      background: color-mix(in oklch, var(--rw-accent) 38%, var(--rw-soft));
      border-radius: 2px 2px 0 0;
    }
    & > li:last-child {
      background: var(--rw-accent);
    }
    & > li[data-missing] {
      block-size: 100%;
      background: repeating-linear-gradient(135deg, transparent 0 4px, var(--rw-line) 4px 5px);
      opacity: 0.6;
    }
  }
  .rw-history {
    container: rw-history / inline-size;
    min-inline-size: 0;
    margin: 0;
    font-variant-numeric: tabular-nums;
  }
  .rw-history__frame {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    margin-block: 20px 12px;
  }
  .rw-history__axis {
    position: relative;
    block-size: var(--rw-chart-height, 180px);
    color: var(--rw-muted);
    font-size: 10px;
    text-align: end;
    & > span {
      position: absolute;
      inset-inline-end: 0;
      translate: 0 -50%;
    }
    & > span:first-child {
      inset-block-start: 0;
    }
    & > span:nth-child(2) {
      inset-block-start: 50%;
    }
    & > span:last-child {
      inset-block-start: 100%;
    }
  }
  .rw-history__plot {
    position: relative;
    min-inline-size: 0;
  }
  .rw-history .rw-columns {
    column-gap: var(--rw-columns-gap, clamp(2px, 1.4cqi, 16px));
    row-gap: 7px;
  }
  .rw-history .rw-column-track {
    position: relative;
  }
  .rw-history .rw-column-mark {
    inline-size: min(100%, 38px);
    background: linear-gradient(
      to right,
      color-mix(in oklch, var(--rw-accent) 84%, white),
      var(--rw-accent)
    );
    box-shadow: inset 0 1px color-mix(in oklch, var(--rw-accent) 55%, white);
  }
  .rw-history [data-projected] .rw-column-mark {
    background:
      repeating-linear-gradient(
        135deg,
        transparent 0 4px,
        color-mix(in oklch, var(--rw-accent) 42%, transparent) 4px 7px
      ),
      var(--rw-soft);
    border-inline: 1px dashed var(--rw-accent);
    box-sizing: border-box;
    box-shadow: none;
  }
  .rw-history [data-missing] .rw-column-track {
    background: repeating-linear-gradient(
      135deg,
      transparent 0 7px,
      color-mix(in oklch, var(--rw-line) 55%, transparent) 7px 8px
    );
  }
  .rw-history [data-missing] strong {
    color: var(--rw-muted);
  }
  .rw-history__target {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    inset-inline: 0;
    inset-block-start: calc(
      var(--rw-chart-height, 180px) *
      (1 - var(--rw-target, 0) / var(--rw-chart-max, 100))
    );
    border-block-start: 1px dashed var(--rw-gold);
    & > span {
      position: absolute;
      inset-inline-end: 0;
      inset-block-end: 3px;
      padding-inline: 4px;
      background: var(--rw-surface);
      color: var(--rw-gold);
      font-size: 10px;
    }
  }
  .rw-history__event {
    position: absolute;
    inset-block-start: 8px;
    inset-inline: 0;
    margin-inline: auto;
    z-index: 2;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--rw-gold);
    background: var(--rw-surface);
    color: var(--rw-gold);
    font: 700 11px var(--rw-font);
    cursor: pointer;
    box-shadow: 0 2px 0 var(--rw-line);
  }
  .rw-history__event:focus-visible {
    outline: 3px solid var(--rw-focus);
    outline-offset: 3px;
  }
  .rw-history__key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-history__key span {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .rw-history__swatch {
    inline-size: 10px;
    block-size: 10px;
    background: var(--rw-accent);
    border-radius: 2px;
  }
  .rw-history__swatch[data-projected] {
    background: repeating-linear-gradient(135deg, transparent 0 2px, var(--rw-accent) 2px 3px);
    border: 1px solid var(--rw-accent);
  }
  .rw-history__swatch[data-target] {
    block-size: 0;
    background: none;
    border-block-start: 1px dashed var(--rw-gold);
  }
  @supports (block-size: calc(attr(data-value type(<number>), 0) * 1px)) {
    .rw-spark > li[data-value] {
      --rw-amount: attr(data-value type(<number>), 0);
    }
  }
  @container rw-history (inline-size < 520px) {
    .rw-history .rw-columns strong {
      font-size: 10px;
    }
    .rw-history .rw-category {
      font-size: 9px;
    }
  }
  @media (forced-colors: active) {
    .rw-spark > li,
    .rw-history .rw-column-mark {
      background: Highlight;
      forced-color-adjust: none;
      box-shadow: none;
    }
    .rw-history [data-projected] .rw-column-mark {
      background: Canvas;
      border: 0;
      border-inline: 2px dashed Highlight;
    }
    .rw-history__target {
      border-color: CanvasText;
    }
    .rw-history [data-missing] .rw-column-track {
      background: none;
      border-inline: 1px dotted CanvasText;
    }
  }
}
@layer runway-ui.primitives {
  .rw-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Observatory composition. Keep component order stable. */
@layer runway-ui.observatory {
  .rw-observatory {
    --rw-observatory-gap: 18px;
    display: block;
    max-inline-size: 1520px;
    margin-inline: auto;
    color: var(--rw-ink);
    font: 13px / 1.55 var(--rw-font);
    container: rw-observatory / inline-size;
    & :where(h1, h2, h3, p, figure, dl, dd) {
      margin: 0;
    }
    & :where(button, input, select) {
      font-family: inherit;
    }
    & :where(h1, h2, h3) {
      text-wrap: balance;
    }
    & :where(p) {
      text-wrap: pretty;
    }
    & :where(a) {
      color: var(--rw-accent);
      text-underline-offset: 3px;
    }
  }
  .rw-observatory__unsupported {
    display: none;
    padding: 40px;
  }
  .rw-observatory__workspace {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--rw-observatory-gap);
  }
  .rw-observatory__header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 4px 8px;
  }
  .rw-observatory__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-inline-size: 0;
  }
  .rw-observatory__header h1 {
    font: 750 clamp(25px, 2.5cqi, 38px) / 1.12 var(--rw-display-font);
    letter-spacing: -0.045em;
    margin-block: 4px 8px;
  }
  .rw-observatory__header p {
    color: var(--rw-muted);
    max-inline-size: 62ch;
  }
  .rw-observatory__seal {
    flex: none;
    display: grid;
    place-items: center;
    position: relative;
    inline-size: 66px;
    block-size: 66px;
    border: 1px solid var(--rw-line);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      var(--rw-surface) 40%,
      var(--rw-soft) 41% 57%,
      var(--rw-surface) 58%
    );
    box-shadow:
      inset 0 2px var(--rw-highlight),
      0 3px 0 var(--rw-line);
    rotate: -8deg;
  }
  .rw-observatory__seal::before {
    content: "";
    inline-size: 10px;
    block-size: 40px;
    background: linear-gradient(var(--rw-accent) 50%, var(--rw-gold) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    rotate: 35deg;
  }
  .rw-observatory__seal::after {
    content: "N";
    position: absolute;
    inset-block-start: 3px;
    font: 700 8px var(--rw-font);
    color: var(--rw-muted);
  }
  .rw-observatory__stamp {
    flex: none;
    padding: 10px 14px;
    border: 1px dashed var(--rw-line);
    border-radius: 8px;
    color: var(--rw-muted);
    font-size: 10px;
    text-align: end;
  }
  .rw-observatory__stamp strong {
    display: block;
    color: var(--rw-accent);
    font-size: 12px;
  }
  .rw-observatory__metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }
  .rw-trend {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 6px;
    min-inline-size: 0;
    padding: 16px;
  }
  .rw-trend__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-trend__index {
    font-size: 9px;
    opacity: 0.7;
  }
  .rw-trend__value {
    font: 750 clamp(23px, 2.2cqi, 32px) / 1.2 var(--rw-display-font);
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
  }
  .rw-trend__unit {
    display: inline-block;
    margin-inline-start: 5px;
    color: var(--rw-muted);
    font: 400 10px / 1.3 var(--rw-font);
    letter-spacing: normal;
  }
  .rw-trend__change {
    color: var(--rw-accent);
    font-size: 10px;
  }
  .rw-trend[data-direction="down"] .rw-trend__change {
    color: var(--rw-gold);
  }
  .rw-trend .rw-spark {
    margin-block-start: 4px;
  }
  .rw-observatory__history,
  .rw-observatory__resources {
    grid-column: span 8;
    min-inline-size: 0;
  }
  .rw-observatory__briefing,
  .rw-observatory__inspector {
    grid-column: span 4;
    min-inline-size: 0;
  }
  .rw-observatory__panel-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    margin-block-end: 14px;
  }
  .rw-observatory__panel-heading h2 {
    font: 700 20px / 1.25 var(--rw-display-font);
    letter-spacing: -0.03em;
    margin-block: 4px;
  }
  .rw-observatory__panel-heading p {
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-observatory__note {
    margin-block-start: 14px !important;
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-observatory__briefing {
    background: linear-gradient(
      145deg,
      var(--rw-surface),
      color-mix(in oklch, var(--rw-gold) 8%, var(--rw-surface))
    );
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .rw-observatory__briefing h2 {
    font: 700 23px / 1.2 var(--rw-display-font);
    letter-spacing: -0.03em;
  }
  .rw-observatory__briefing p {
    color: var(--rw-muted);
  }
  .rw-observatory__briefing > .rw-observatory__note {
    margin-block-start: auto !important;
    border-block-start: 1px solid var(--rw-line);
    padding-block-start: 14px;
  }
  .rw-observatory__fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 10px;
    border-block-end: 1px solid var(--rw-line);
    font-variant-numeric: tabular-nums;
  }
  .rw-observatory__fact dt {
    color: var(--rw-muted);
  }
  .rw-observatory__fact dd {
    text-align: end;
    font-weight: 650;
  }
  .rw-observatory__inspector h3 {
    font: 700 22px / 1.2 var(--rw-display-font);
    margin-block: 6px 12px;
  }
  .rw-observatory__inspector .rw-button {
    margin-block-start: 18px;
    inline-size: 100%;
  }
  .rw-observatory__status {
    min-block-size: 2.8em;
    margin-block-start: 12px !important;
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-observatory__footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    color: var(--rw-muted);
    font-size: 10px;
    border-block-start: 1px solid var(--rw-line);
    padding-block: 14px;
  }
  .rw-observatory__footer p {
    max-inline-size: 78ch;
  }
}

@layer runway-ui.observatory {
  /* Four columns shared by header, rows and their nested content. */
  .rw-resource-ledger {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) minmax(110px, 1fr) repeat(2, minmax(65px, 0.6fr));
    column-gap: 14px;
    font-variant-numeric: tabular-nums;
  }
  .rw-resource-ledger__row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    gap: 14px;
    padding: 11px 8px;
    border-block-end: 1px solid var(--rw-line);
    min-inline-size: 0;
  }
  .rw-resource-ledger__row > :not(:first-child) {
    text-align: end;
  }
  .rw-resource-ledger__row[data-heading] {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--rw-surface);
    color: var(--rw-muted);
    font-size: 10px;
  }
  .rw-resource-ledger__row:has([aria-pressed="true"]) {
    background: var(--rw-soft);
    box-shadow: inset 3px 0 var(--rw-accent);
  }
  .rw-resource-ledger__row button {
    display: block;
    inline-size: 100%;
    padding: 2px;
    border: 0;
    color: var(--rw-accent);
    background: none;
    text-align: start;
    font: 650 12px / 1.4 var(--rw-font);
    cursor: pointer;
    overflow-wrap: anywhere;
  }
  .rw-resource-ledger__row button:focus-visible {
    outline: 3px solid var(--rw-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .rw-resource-ledger__reserve {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    font-size: 11px;
  }
  .rw-resource-ledger__track {
    block-size: 5px;
    border-radius: 3px;
    background: var(--rw-line);
    overflow: hidden;
  }
  .rw-resource-ledger__track i {
    display: block;
    block-size: 100%;
    inline-size: clamp(0%, var(--rw-value, 0%), 100%);
    background: var(--rw-accent);
  }
  .rw-resource-ledger__net {
    color: var(--rw-accent);
  }
  .rw-resource-ledger__net[data-negative] {
    color: var(--rw-gold);
  }
  .rw-ledger-frame {
    min-inline-size: 0;
  }
  .rw-scrollbox {
    max-block-size: 268px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: var(--rw-line) transparent;
  }
  .rw-scroll-progress {
    display: none;
    block-size: 3px;
    margin-block-start: 8px;
    border-radius: 3px;
    background: var(--rw-accent);
    transform-origin: left;
  }
  @supports (animation-timeline: scroll()) and (timeline-scope: --rw-ledger-scroll) {
    .rw-ledger-frame[data-scroll-cue="true"] {
      timeline-scope: --rw-ledger-scroll;
    }
    .rw-ledger-frame[data-scroll-cue="true"] .rw-scrollbox {
      scroll-timeline: --rw-ledger-scroll block;
    }
    .rw-ledger-frame[data-scroll-cue="true"] .rw-scroll-progress {
      display: block;
      animation: rw-scroll-progress 1s linear both;
      animation-timeline: --rw-ledger-scroll;
    }
    @keyframes rw-scroll-progress {
      from {
        scale: 0 1;
      }
      to {
        scale: 1 1;
      }
    }
  }
}

@layer runway-ui.observatory {
  /* Native top-layer popovers use their implicit invoker anchor when supported. */
  .rw-context {
    box-sizing: border-box;
    inline-size: 280px;
    max-inline-size: calc(100vi - 32px);
    max-block-size: min(320px, calc(100dvb - 32px));
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-surface);
    color: var(--rw-ink);
    box-shadow: var(--rw-shadow);
    font: 12px / 1.6 var(--rw-font);
    position: fixed;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    opacity: 0;
    transition:
      opacity 0.15s,
      display 0.15s allow-discrete,
      overlay 0.15s allow-discrete;
  }
  .rw-context:popover-open {
    opacity: 1;
  }
  .rw-context strong {
    display: block;
    margin-block-end: 6px;
    font-size: 14px;
  }
  .rw-context p {
    margin: 0;
  }
  @starting-style {
    .rw-context:popover-open {
      opacity: 0;
    }
  }
  @supports (position-area: block-start) {
    .rw-context {
      inset: auto;
      translate: none;
      position-area: block-start;
      position-try-fallbacks:
        flip-block,
        --rw-context-before,
        --rw-context-after,
        --rw-context-before flip-block,
        --rw-context-after flip-block;
      margin: 12px;
    }
  }
  @position-try --rw-context-before {
    position-area: block-start inline-start;
  }
  @position-try --rw-context-after {
    position-area: block-start inline-end;
  }
  .rw-context:focus-visible {
    outline: 3px solid var(--rw-focus);
    outline-offset: 3px;
  }
}

@layer runway-ui.observatory {
  .rw-observatory__decision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-block: 20px;
  }
  .rw-observatory__decision-grid > div {
    padding: 14px;
    border: 1px solid var(--rw-line);
    border-radius: 8px;
    background: var(--rw-soft);
  }
  .rw-observatory__decision-grid dt {
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-observatory__decision-grid dd {
    margin: 5px 0 0;
    font-weight: 700;
    font-size: 17px;
  }
  .rw-observatory__decision-copy {
    line-height: 1.65;
    color: var(--rw-muted);
  }
  .rw-observatory__error {
    padding: 24px;
    border: 1px solid var(--rw-danger);
    border-radius: var(--rw-radius);
  }
}

@layer runway-ui.observatory {
  @container rw-observatory (inline-size < 1050px) {
    .rw-trend {
      padding: 12px;
    }
    .rw-observatory__metrics {
      gap: 10px;
    }
    .rw-observatory__history,
    .rw-observatory__resources {
      grid-column: span 7;
    }
    .rw-observatory__briefing,
    .rw-observatory__inspector {
      grid-column: span 5;
    }
  }
  :where(.rw-ui)[data-density="compact"] .rw-observatory {
    --rw-observatory-gap: 12px;
  }
  :where(.rw-ui)[data-density="compact"] .rw-resource-ledger__row {
    padding-block: 8px;
  }
  .rw-observatory[data-whimsy="false"] .rw-observatory__seal {
    display: none;
  }
  @container rw-observatory (inline-size < 960px) {
    .rw-observatory__workspace {
      display: none;
    }
    .rw-observatory__unsupported {
      display: block;
    }
  }
  @media (width < 1100px), (height < 640px) {
    .rw-observatory__workspace {
      display: none;
    }
    .rw-observatory__unsupported {
      display: block;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-context {
      transition: none;
    }
    .rw-scroll-progress {
      animation: none !important;
      scale: none;
      opacity: 0.35;
    }
  }
  @media (forced-colors: active) {
    .rw-observatory__seal {
      display: none;
    }
    .rw-resource-ledger__row:has([aria-pressed="true"]) {
      outline: 2px solid Highlight;
      box-shadow: none;
    }
    .rw-resource-ledger__track i,
    .rw-scroll-progress {
      background: Highlight;
      forced-color-adjust: none;
    }
  }
}


/* Tactile instruments for management games. Generic signals, no domain rules. */
@layer runway-ui.observatory {
  .rw-console {
    container: rw-console / inline-size;
    display: grid;
    gap: 18px;
  }
  .rw-console__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .rw-instrument {
    position: relative;
    min-inline-size: 0;
    padding: 24px;
    border: 1px solid color-mix(in oklch, var(--rw-accent) 30%, var(--rw-line));
    border-radius: calc(var(--rw-radius) + 5px);
    background: linear-gradient(
      145deg,
      var(--rw-surface),
      color-mix(in oklch, var(--rw-soft) 65%, var(--rw-surface))
    );
    box-shadow:
      inset 0 2px var(--rw-highlight),
      inset 0 -3px color-mix(in oklch, var(--rw-line) 30%, transparent),
      0 5px 0 color-mix(in oklch, var(--rw-line) 85%, var(--rw-ink)),
      0 12px 24px color-mix(in oklch, var(--rw-ink) 10%, transparent);
    &::after {
      content: "";
      position: absolute;
      pointer-events: none;
      inset: 8px;
      background:
        radial-gradient(
          circle at 3px 3px,
          var(--rw-muted) 0 1px,
          var(--rw-line) 1px 3px,
          transparent 3px
        ),
        radial-gradient(
          circle at calc(100% - 3px) 3px,
          var(--rw-muted) 0 1px,
          var(--rw-line) 1px 3px,
          transparent 3px
        );
      opacity: 0.6;
    }
  }
  .rw-instrument__heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 22px;
  }
  .rw-instrument__heading h3 {
    margin: 0 0 5px;
    font: 750 19px / 1.2 var(--rw-display-font);
    letter-spacing: -0.02em;
  }
  .rw-instrument__heading span {
    color: var(--rw-muted);
    font-size: 10px;
  }
  .rw-instrument__readout {
    flex: none;
    max-inline-size: 55%;
    padding: 9px 12px;
    border: 1px solid color-mix(in oklch, var(--rw-accent) 30%, var(--rw-line));
    border-radius: 7px;
    background: var(--rw-accent);
    color: var(--rw-on-accent);
    box-shadow: inset 0 2px 4px #0002;
    font: 700 clamp(17px, 2.4cqi, 26px) / 1.2 var(--rw-display-font);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .rw-instrument__empty {
    padding: 30px 10px;
    text-align: center;
    color: var(--rw-muted);
  }
  .rw-instrument__note {
    margin: 12px 0 0;
    color: var(--rw-muted);
    font-size: 11px;
  }
  .rw-history--range {
    .rw-history__frame {
      grid-template-columns: minmax(42px, max-content) minmax(0, 1fr);
    }
    .rw-history__axis {
      min-inline-size: 54px;
    }
    .rw-column-track {
      display: block;
      border: 0;
    }
    .rw-column-mark {
      background: linear-gradient(
        to right,
        color-mix(in oklch, var(--rw-chart-color, var(--rw-accent)) 80%, white),
        var(--rw-chart-color, var(--rw-accent))
      );
      position: absolute;
      inset-inline: 0;
      margin-inline: auto;
      inset-block-end: calc((0 - var(--rw-chart-min)) / var(--rw-chart-range) * 100%);
      block-size: calc(var(--rw-amount) / var(--rw-chart-range) * 100%);
    }
    .rw-column-mark[data-negative] {
      inset-block-end: auto;
      inset-block-start: calc(var(--rw-chart-max) / var(--rw-chart-range) * 100%);
      background: var(--rw-negative-color, var(--rw-muted));
    }
    .rw-history__zero {
      position: absolute;
      pointer-events: none;
      inset-inline: 0;
      inset-block-start: calc(var(--rw-chart-height) * var(--rw-chart-max) / var(--rw-chart-range));
      border-block-start: 1px solid var(--rw-muted);
      opacity: 0.6;
    }
    .rw-columns strong {
      grid-row: 2;
      font-size: 10px;
    }
    .rw-columns .rw-category {
      grid-row: 3;
    }
    &[data-detail="compact"] .rw-columns {
      grid-template-rows: var(--rw-chart-height) 0 auto;
      column-gap: 2px;
    }
    &[data-detail="compact"] .rw-category {
      font-size: 9px;
      white-space: nowrap;
      overflow: visible;
    }
    &[data-detail="compact"] .rw-category:last-child {
      text-align: center;
    }
    .rw-history__event {
      inline-size: 20px;
      block-size: 20px;
      font-size: 9px;
      inset-block-start: 4px;
    }
    .rw-context p {
      margin-block: 12px 0;
      white-space: pre-line;
    }
    @supports (block-size: calc(attr(data-value type(<number>), 0) * 1px)) {
      .rw-column-mark[data-value] {
        --rw-amount: abs(attr(data-value type(<number>), 0));
      }
    }
  }
  .rw-impact {
    display: grid;
    grid-template-columns: minmax(100px, 1.4fr) repeat(3, minmax(60px, 1fr));
    gap: 0 12px;
    margin: 12px 0;
    font-variant-numeric: tabular-nums;
  }
  table.rw-impact {
    inline-size: 100%;
    border-collapse: collapse;
  }
  table.rw-impact :is(thead, tbody) {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
  table.rw-impact caption {
    grid-column: 1 / -1;
    text-align: start;
    font-size: 11px;
    font-weight: 650;
  }
  table.rw-impact :is(th, td) {
    padding: 0;
    border: 0;
  }
  table.rw-impact th {
    text-align: start;
  }
  .rw-impact__row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
    padding-block: 9px;
    border-block-end: 1px solid var(--rw-line);
    font-size: 12px;
  }
  .rw-impact__row > :not(:first-child) {
    text-align: end;
    margin: 0;
  }
  .rw-impact__row[data-heading] {
    color: var(--rw-muted);
    font-size: 10px;
  }
  .rw-impact__row dt {
    font-weight: 600;
  }
  .rw-impact__row dd:last-child {
    color: var(--rw-accent);
  }
  :where(.rw-ui)[data-skin="play"] {
    --rw-control-depth: 4px;
    .rw-panel {
      border-radius: calc(var(--rw-radius) + 3px);
      border-color: color-mix(in oklch, var(--rw-accent) 22%, var(--rw-line));
      box-shadow:
        inset 0 2px var(--rw-highlight),
        0 4px 0 var(--rw-line),
        0 12px 24px color-mix(in oklch, var(--rw-ink) 9%, transparent);
    }
    .rw-trend {
      border-block-start: 4px solid var(--rw-accent);
    }
    .rw-badge {
      font-weight: 650;
      box-shadow: inset 0 1px var(--rw-highlight);
    }
    .rw-button[data-variant="primary"] {
      border-block-end-color: color-mix(in oklch, var(--rw-accent) 70%, black);
    }
  }
  :where(.rw-ui)[data-depth="flat"] :is(.rw-instrument, .rw-panel) {
    box-shadow: none;
  }
  /* Windowed time series: one drawn window plus a whole-series overview. */
  .rw-timeline {
    display: grid;
    gap: 14px;
    min-inline-size: 0;
  }
  .rw-timeline__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
  }
  .rw-timeline__size {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    font-size: 11px;
    color: var(--rw-muted);
  }
  .rw-timeline__status {
    font-size: 11px;
    color: var(--rw-muted);
    font-variant-numeric: tabular-nums;
  }
  .rw-timeline__overview {
    position: relative;
    padding-block: 4px;
    border-radius: var(--rw-radius);
    background: var(--rw-soft);
    isolation: isolate;
  }
  .rw-timeline__overview .rw-spark {
    block-size: 56px;
    padding-inline: 6px;
    gap: 1px;
    position: relative;
    z-index: 0;
  }
  .rw-timeline__window {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(6px + (100% - 12px) * var(--rw-start, 0) / 100%);
    inline-size: calc((100% - 12px) * var(--rw-size, 10) / 100%);
    min-inline-size: 8px;
    border: 2px solid var(--rw-accent);
    border-radius: calc(var(--rw-radius) * 0.6);
    background: color-mix(in oklch, var(--rw-accent) 14%, transparent);
    pointer-events: none;
    z-index: 1;
  }
  .rw-timeline__overview input[type="range"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 2;
  }
  .rw-timeline__overview:has(input:focus-visible) {
    outline: 3px solid var(--rw-focus);
    outline-offset: 3px;
  }
  .rw-timeline__note {
    margin: 0;
    font-size: 11px;
    color: var(--rw-muted);
  }
  @container rw-console (inline-size < 820px) {
    .rw-console__grid {
      grid-template-columns: 1fr;
    }
  }
  @media (forced-colors: active) {
    .rw-instrument {
      box-shadow: none;
      border-color: CanvasText;
      background: Canvas;
    }
    .rw-instrument::after {
      display: none;
    }
    .rw-instrument__readout {
      background: Canvas;
      color: CanvasText;
    }
    .rw-history--range .rw-column-mark[data-negative] {
      background: Highlight;
      forced-color-adjust: none;
    }
  }
}

@layer runway-ui.observatory {
  .rw-history__line {
    position: absolute;
    inset: 0 0 auto;
    inline-size: 100%;
    block-size: var(--rw-chart-height);
    overflow: visible;
    pointer-events: none;
  }
  .rw-history__area {
    fill: var(--rw-chart-color, var(--rw-accent));
    opacity: 0.08;
  }
  .rw-history__stroke {
    fill: none;
    stroke: var(--rw-chart-color, var(--rw-accent));
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .rw-history[data-plot="line"] .rw-column-mark {
    inset-block: var(--rw-point-y) auto;
    inline-size: 7px;
    block-size: 7px;
    border: 2px solid var(--rw-surface);
    border-radius: 50%;
    background: var(--rw-chart-color, var(--rw-accent));
    box-shadow: 0 0 0 1px var(--rw-chart-color, var(--rw-accent));
    translate: 0 -50%;
    box-sizing: border-box;
  }
  @media (forced-colors: active) {
    .rw-history__stroke {
      stroke: CanvasText;
    }
    .rw-history__area {
      fill: none;
    }
    .rw-history[data-plot="line"] .rw-column-mark {
      background: CanvasText;
      border-color: CanvasText;
    }
  }
}

/* Native dialog surface, structure and modifiers. */
@layer runway-ui.dialog {
  .rw-dialog {
    container: rw-dialog / inline-size;
    box-sizing: border-box;
    color: var(--rw-ink);
    background: var(--rw-surface);
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    padding: calc(var(--rw-panel-padding) + 10px);
    inline-size: var(--rw-dialog-width, 520px);
    max-inline-size: calc(100vi - 64px);
    max-block-size: calc(100dvb - 64px);
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: var(--rw-shadow);
  }
  .rw-dialog::backdrop {
    background: color-mix(in oklch, var(--rw-ink, #14251e) 78%, transparent);
    backdrop-filter: blur(5px);
    transition:
      opacity 0.2s,
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }
  .rw-dialog {
    opacity: 0;
    translate: 0 8px;
    scale: 0.97;
    transition:
      opacity 140ms,
      translate 240ms var(--rw-spring, ease),
      scale 240ms var(--rw-spring, ease),
      display 140ms allow-discrete,
      overlay 140ms allow-discrete;
  }
  .rw-dialog:open {
    opacity: 1;
    translate: 0;
    scale: 1;
  }
  .rw-dialog:not(:open)::backdrop {
    opacity: 0;
  }
  @starting-style {
    .rw-dialog:open {
      opacity: 0;
      translate: 0 8px;
      scale: 0.97;
    }
    .rw-dialog:open::backdrop {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-dialog,
    .rw-dialog::backdrop {
      transition: none;
      translate: none;
      scale: none;
    }
  }
  .rw-dialog--compact {
    --rw-dialog-width: 380px;
  }
  .rw-dialog--wide {
    --rw-dialog-width: 760px;
  }
  .rw-dialog--danger {
    border-color: color-mix(in oklch, var(--rw-danger) 50%, var(--rw-line));
  }
  .rw-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 24px;
    margin-block-end: 20px;
  }
  .rw-dialog__header > :first-child {
    min-inline-size: 0;
  }
  .rw-dialog__eyebrow {
    margin: 0 0 8px;
    color: var(--rw-muted);
    font: 700 10px / 1.5 var(--rw-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .rw-dialog--danger .rw-dialog__eyebrow {
    color: var(--rw-danger);
  }
  .rw-dialog__title {
    margin: 0;
    color: var(--rw-ink);
    font: 550 24px / 1.25 var(--rw-font);
    text-wrap: balance;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
  }
  .rw-dialog__body {
    max-block-size: 50dvb;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
    text-wrap: pretty;
  }
  .rw-dialog__body p {
    margin: 0;
  }
  .rw-dialog__body p + p {
    margin-block-start: 1em;
  }
  .rw-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 10px;
    margin: 24px 0 0;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--rw-line);
  }
  .rw-dialog__footer--split {
    justify-content: space-between;
  }
  .rw-dialog__footer--stacked {
    flex-direction: column;
    align-items: stretch;
  }
  @container rw-dialog (inline-size < 400px) {
    .rw-dialog__header {
      gap: 12px;
    }
    .rw-dialog__footer {
      flex-direction: column;
      align-items: stretch;
    }
  }
  .rw-dialog__close {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius);
    background: var(--rw-raised);
    color: var(--rw-ink);
    font: 20px / 1 var(--rw-font);
    cursor: pointer;
    transition:
      rotate 0.3s var(--rw-spring, ease),
      background-color 0.14s;
  }
  .rw-dialog__close:hover {
    rotate: 90deg;
    background: var(--rw-soft);
  }
  .rw-dialog__close:active {
    scale: 0.92;
  }
  @media (prefers-reduced-motion: reduce) {
    .rw-dialog__close {
      transition: none;
    }
    .rw-dialog__close:hover {
      rotate: none;
    }
    .rw-dialog__close:active {
      scale: none;
    }
  }
  .rw-dialog__close > .rw-icon {
    --rw-icon-size: calc(var(--rw-icon-stroke) * 256 / 24);
  }
  .rw-dialog__close:focus-visible {
    outline: 3px solid var(--rw-focus);
    outline-offset: 3px;
  }
}

@layer runway-ui.themes {
  .rw-ui[data-theme="orbital"] {
    --rw-bg: #0d1722;
    --rw-surface: #142331;
    --rw-raised: #1b2d3c;
    --rw-ink: #e4f1f3;
    --rw-muted: #a1b9c5;
    --rw-line: #345064;
    --rw-accent: #76d5cc;
    --rw-on-accent: #102b2d;
    --rw-soft: #243e4e;
    --rw-gold: #e9bc76;
    --rw-danger: #ff9c8d;
    --rw-focus: #e9bc76;
    --rw-radius: 3px;
    --rw-shadow: 0 10px 35px #0003;
    color-scheme: dark;
  }
  .rw-ui[data-theme="parchment"] {
    --rw-bg: #ded1b4;
    --rw-surface: #f7edd4;
    --rw-raised: #eee0bd;
    --rw-ink: #44341e;
    --rw-muted: #77613f;
    --rw-line: #c9ad79;
    --rw-accent: #715430;
    --rw-on-accent: #fff3d7;
    --rw-soft: #e7d5ab;
    --rw-gold: #896010;
    --rw-danger: #a0412e;
    --rw-focus: #a0412e;
    --rw-radius: 2px;
    --rw-shadow: 3px 3px 0 #72573524;
    --rw-font: Georgia, serif;
  }
  /* Whimsy: playful product-studio look. Violet lead with coral, mint and sun companions. */
  .rw-ui[data-theme="whimsy"] {
    --rw-bg: #f1edff;
    --rw-surface: #fffdf8;
    --rw-raised: #f7f3ff;
    --rw-ink: #2b2250;
    --rw-muted: #6f648f;
    --rw-line: #d9d0f5;
    --rw-accent: #6a4cff;
    --rw-on-accent: #fffdf8;
    --rw-soft: #e8e1ff;
    --rw-gold: #c77700;
    --rw-danger: #e2475d;
    --rw-focus: #ff6b4a;
    --rw-radius: 20px;
    --rw-control-depth: 4px;
    --rw-control-edge: color-mix(in oklch, var(--rw-accent) 35%, var(--rw-line));
    --rw-font:
      "Nunito Variable", Nunito, ui-rounded, "SF Pro Rounded", "Varela Round",
      "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", system-ui, sans-serif;
    --rw-display-font:
      "Fredoka Variable", Fredoka, ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold",
      var(--rw-font);
    --rw-shadow:
      inset 0 2px white, 0 4px 0 color-mix(in oklch, var(--rw-accent) 14%, var(--rw-line)),
      0 18px 32px color-mix(in oklch, var(--rw-accent) 14%, transparent);
  }
  .rw-ui[data-theme="whimsy"] .rw-dialog,
  .rw-dialog[data-theme="whimsy"] {
    border-width: 2px;
    border-color: var(--rw-line);
  }
  .rw-ui[data-theme="whimsy"] .rw-dialog::backdrop,
  .rw-dialog[data-theme="whimsy"]::backdrop {
    background: color-mix(in oklch, var(--rw-accent) 32%, transparent);
    backdrop-filter: blur(8px) saturate(1.2);
  }
  .rw-ui[data-theme="whimsy"] .rw-dialog__close,
  .rw-dialog[data-theme="whimsy"] .rw-dialog__close {
    border-radius: 50%;
    border-width: 2px;
    border-color: color-mix(in oklch, var(--rw-accent) 35%, var(--rw-line));
    box-shadow: 0 2px 0 color-mix(in oklch, var(--rw-accent) 25%, var(--rw-line));
    color: var(--rw-accent);
  }
  .rw-ui[data-theme="whimsy"] .rw-badge {
    rotate: -2deg;
    border-width: 1.5px;
    background: color-mix(in oklch, #ffd23f 45%, var(--rw-surface));
    color: var(--rw-ink);
    border-color: color-mix(in oklch, #ffd23f 70%, var(--rw-ink));
  }
  .rw-ui[data-theme="whimsy"] .rw-badge[data-tone="warning"] {
    background: color-mix(in oklch, #ff6b4a 22%, var(--rw-surface));
    border-color: #ff6b4a;
  }
  .rw-ui[data-theme="whimsy"] .rw-badge[data-tone="danger"] {
    background: color-mix(in oklch, var(--rw-danger) 18%, var(--rw-surface));
    border-color: var(--rw-danger);
  }
  .rw-ui[data-theme="whimsy"] .rw-meter__fill {
    background: linear-gradient(
      90deg,
      var(--rw-meter-color, var(--rw-accent)),
      color-mix(in oklch, var(--rw-meter-color, var(--rw-accent)) 65%, #ff6b4a)
    );
  }
  .rw-ui[data-theme="whimsy"] .rw-meter[data-tone="morale"] {
    --rw-meter-color: #1fb58f;
  }
  @media (prefers-reduced-motion: no-preference) {
    .rw-ui[data-theme="whimsy"] .rw-button:hover:not(:disabled) {
      animation: rw-wiggle 0.45s var(--rw-spring);
    }
    @keyframes rw-wiggle {
      25% {
        rotate: -1.5deg;
      }
      60% {
        rotate: 1.2deg;
      }
      to {
        rotate: 0deg;
      }
    }
  }
  .rw-ui[data-depth="flat"] {
    --rw-control-depth: 0px;
    --rw-shadow: none;
  }
}

@layer runway-ui.themes {
  .rw-ui[data-theme="ledger"] {
    --rw-bg: #e6dcc4;
    --rw-surface: #fff9e9;
    --rw-raised: #f5edd9;
    --rw-ink: #203f37;
    --rw-muted: #66705d;
    --rw-line: #d4c8a9;
    --rw-accent: #275547;
    --rw-on-accent: #fff8e2;
    --rw-soft: #eae5d2;
    --rw-gold: #a78345;
    --rw-focus: #af592c;
    --rw-radius: 8px;
    --rw-display-font: Georgia, "Times New Roman", serif;
    --rw-control-depth: 2px;
  }
}

/* Explicit opt-in presentation overrides. Unlayered so this can follow host skins. */
.rw-ui[data-appearance="quiet"] {
  --rw-surface: #fff;
  --rw-panel-bg: #fafbf8;
  --rw-ink: #263d35;
  --rw-muted: #58685e;
  --rw-line: #cbd4c9;
  --rw-accent: #315e4e;
  --rw-on-accent: #fff;
  --rw-focus: #267e69;
  --rw-display-font: var(--rw-font);
  --rw-shadow: none;
  --rw-type-caption: 11px;
  --rw-type-body: 13px;
  --rw-type-heading: 20px;
  --rw-type-value: 30px;
  font-size: var(--rw-type-body);
  line-height: 1.5;

  & .rw-command-bar {
    line-height: 1.2;
  }

  & :is(.rw-stat__value, .rw-command-stat strong, .rw-instrument__readout) {
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.035em;
  }
  & :is(.rw-stat__label, .rw-command-stat small) {
    font-size: var(--rw-type-caption);
  }
  & .rw-instrument {
    padding: 24px;
    border: 1px solid var(--rw-line);
    border-radius: 10px;
    background: var(--rw-surface);
    box-shadow: none;
    &::after {
      content: none;
    }
  }
  & .rw-instrument__heading {
    align-items: center;
    margin-block-end: 26px;
  }
  & .rw-instrument__heading h3 {
    font: 600 var(--rw-type-heading) / 1.3 var(--rw-font);
    letter-spacing: -0.025em;
  }
  & .rw-instrument__heading span {
    font-size: var(--rw-type-caption);
  }
  & .rw-instrument__readout {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rw-ink);
    box-shadow: none;
    font: 600 var(--rw-type-value) / 1.15 var(--rw-font);
  }
  & .rw-instrument__note {
    font-size: 12px;
    line-height: 1.6;
  }
  & .rw-history__axis {
    font-size: var(--rw-type-caption);
  }
  & .rw-history .rw-columns {
    background:
      repeating-linear-gradient(
        to top,
        color-mix(in oklch, var(--rw-line) 55%, transparent) 0 1px,
        transparent 1px 50%
      )
      top / 100% var(--rw-chart-height) no-repeat;
  }
  & .rw-history .rw-category {
    font-size: var(--rw-type-caption);
  }
  & .rw-chart-data {
    margin-block-start: 20px;
    border: 0;
    border-block-start: 1px solid var(--rw-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  & .rw-chart-data > summary {
    padding: 12px 0 0;
    background: none;
    font-size: var(--rw-type-caption);
    font-weight: 500;
  }

  & :is(.rw-panel, .rw-card, .rw-sheet, .rw-dossier) {
    background: var(--rw-panel-bg);
    background-image: none;
    box-shadow: none;
    border: 1px solid var(--rw-line);
    border-radius: 8px;
  }
  & :is(.rw-button, .rw-segment) {
    background-image: none;
    box-shadow: none;
    transform: none;
    transition:
      background-color 100ms,
      color 100ms;
  }
  & .rw-button {
    border-radius: 6px;
    min-block-size: 36px;
    &[data-variant="primary"] {
      background: var(--rw-accent);
      color: var(--rw-on-accent);
      border-color: var(--rw-accent);
    }
  }
  & .rw-input {
    background: var(--rw-surface);
    box-shadow: none;
    border-color: var(--rw-line);
    border-radius: 5px;
  }
  & :is(button, a, input, select, summary):focus-visible {
    outline: 3px solid var(--rw-focus);
    outline-offset: 3px;
  }
  & :is(button, a)[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  & .rw-folio-tab {
    box-shadow: none;
    transition: none;
    transform: none;
    &[aria-current="page"] {
      transform: none;
    }
  }
  & .rw-leaderboard caption {
    font:
      650 19px var(--rw-font),
      system-ui,
      sans-serif;
  }
  & .rw-leaderboard tbody tr {
    animation: none;
    opacity: 1;
  }
  & .rw-chart-data > summary::before {
    background: none;
    box-shadow: none;
    animation: none;
  }
  & .rw-chart-data > summary::after {
    inset-inline-start: 0.3em;
    inset-block-start: calc(50% + 6px);
    background: var(--rw-accent);
  }
  @media (prefers-reduced-motion: reduce) {
    & * {
      scroll-behavior: auto;
      transition: none;
    }
  }
  @media (forced-colors: active) {
    & :is(.rw-panel, .rw-card, .rw-sheet, .rw-dossier, .rw-button) {
      border: 1px solid CanvasText;
    }
  }
}

/* Native pace buttons share their selected and warm states across hosts. */
.rw-ui[data-appearance="quiet"] .rw-segmented[data-variant="pace"] {
  background: var(--rw-soft);
  border-color: var(--rw-line);
  padding: 4px;
  gap: 3px;
}
.rw-ui[data-appearance="quiet"] .rw-segmented[data-variant="pace"] .rw-segment {
  min-block-size: 44px;
  padding-inline: 14px;
  border-radius: 4px;
}
.rw-ui[data-appearance="quiet"] .rw-segmented[data-variant="pace"] .rw-segment small {
  margin-block-start: 4px;
  font-size: 10px;
}
.rw-ui[data-appearance="quiet"]
  .rw-segmented[data-variant="pace"]
  .rw-segment[aria-pressed="true"] {
  background: var(--rw-accent);
  color: var(--rw-on-accent);
  box-shadow: 0 1px 3px #17392d26;
}
.rw-ui[data-appearance="quiet"]
  .rw-segmented[data-variant="pace"]
  .rw-segment[data-tone="warm"][aria-pressed="true"] {
  background: var(--rw-gold);
}