@layer components {
  .ui-tray > .ui-disclosure {
    margin-top: var(--ui-inset);
    padding-inline: var(--ui-space-sm);
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-code);
  }

  .ui-tray > .ui-code:has( + .ui-disclosure) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }

  .ui-tray > .ui-code + .ui-disclosure {
    box-shadow: inset 0 1px 0 var(--ui-line-hair);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    margin-top: 0;
  }

  .ui-tray > .ui-disclosure > :not(summary) {
    margin-inline: calc(var(--ui-space-sm) * -1);
  }

  .ui-tray > details.ui-disclosure > summary {
    padding-inline: calc(var(--ui-space-md) - var(--ui-space-sm));
  }

  p.ui-copy > .ui-copy-status {
    max-width: none;
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) var(--ui-text-caption)/1.5 var(--font-family-sans);
    text-align: start;
  }

  [data-playback="paused"] * {
    animation-play-state: paused !important;
  }

  .ui-catalog > section {
    min-width: 0;
    margin-block: var(--ui-space-xl);
  }

  .ui-catalog h3 {
    align-items: baseline;
    gap: var(--ui-space-sm);
    margin: 0 0 var(--ui-space-sm);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-h3);
    font-weight: var(--ui-weight-heading);
    line-height: var(--ui-leading-h3);
    letter-spacing: var(--ui-tracking-h3);
    overflow-wrap: anywhere;
    flex-wrap: wrap;
    scroll-margin-top: 6rem;
    display: flex;
  }

  .ui-catalog h3 > small {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .6875rem/1.5 var(--font-family-mono);
    letter-spacing: 0;
    margin-left: auto;
  }

  .ui-catalog-entry {
    gap: var(--ui-space-sm);
    min-width: 0;
    padding-bottom: var(--ui-space-md);
    display: grid;
  }

  .ui-catalog-entry > a {
    width: fit-content;
    color: var(--ui-text-body);
    text-decoration: underline;
    text-decoration-color: var(--ui-line-mark);
    text-underline-offset: .2em;
    font-size: .78125rem;
  }

  .ui-catalog-entry > a:hover {
    color: var(--ui-text-strong);
    text-decoration-color: currentColor;
  }

  .ui-catalog-entry>a:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:3px}

  .ui-skip:not(:focus) {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .ui-skip:focus{display:inline-flex;align-items:center;min-height:2rem;margin-bottom:var(--ui-space-sm);padding:0 var(--ui-space-sm);border-radius:8px;background:var(--ui-surface-sheet);color:var(--ui-text-strong);box-shadow:var(--ui-elevation-rise-1);font-size:.78125rem;outline:2px solid var(--ui-focus);outline-offset:2px}
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-sans:var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}:root,:host{--font-sans:"Geist", "Noto Sans TC";--font-mono:"IBM Plex Mono"}}@layer components {
  .ui-browser {
    border-radius: var(--ui-radius-xl);
    background: var(--ui-surface-stage);
    box-shadow: 0 1px 0 var(--ui-lip);
    position: relative;
    overflow: hidden;
  }

  .ui-browser:after {
    content: "";
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--ui-line-contour);
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .ui-browser-bar {
    align-items: center;
    gap: var(--ui-space-sm);
    height: 2rem;
    padding: 0 var(--ui-space-sm);
    background: var(--ui-surface-tray);
    display: flex;
  }

  .ui-browser-dots {
    gap: 6px;
    display: flex;
  }

  .ui-browser-dots > i {
    background: var(--ui-line-divider);
    border-radius: 50%;
    width: 9px;
    height: 9px;
  }

  .ui-browser-body {
    min-height: 12rem;
    position: relative;
  }

  .ui-browser-body:has( > .ui-browser-viewport) {
    scrollbar-width: thin;
    min-height: 0;
    overflow-x: auto;
  }

  .ui-browser-viewport {
    max-width: none;
    margin-inline: auto;
    position: relative;
  }

  .ui-browser-viewport > iframe {
    background: none;
    border: 0;
    width: 100%;
    display: block;
  }

  .ui-browser-tools {
    align-items: center;
    gap: var(--ui-space-xs) var(--ui-space-sm);
    padding: var(--ui-space-sm) var(--ui-space-sm) var(--ui-space-xs);
    flex-wrap: wrap;
    display: flex;
  }

  .ui-browser-tools > .ui-segmented > :is(button, a) {
    min-height: 1.625rem;
  }

  .ui-browser-range {
    align-items: center;
    gap: var(--ui-space-sm);
    flex: 14rem;
    min-width: 0;
    display: flex;
  }

  .ui-browser-range > .ui-range {
    flex: 6rem;
    min-width: 0;
    max-width: 12rem;
  }

  .ui-browser-range>label{color:var(--ui-text-muted);font:var(--ui-weight-regular) var(--ui-text-label)/1.5 var(--font-family-sans);letter-spacing:var(--ui-tracking-label);text-transform:none}

  .ui-browser-tools > output, .ui-browser-range > output {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .6875rem/1.5 var(--font-family-mono);
    overflow-wrap: anywhere;
    flex: 100%;
  }

  .ui-browser-range > .ui-browser-size {
    font: var(--ui-weight-regular) .75rem/1.5 var(--font-family-sans);
    font-variant-numeric: tabular-nums;
    flex: none;
  }

  .ui-resize {
    cursor: ew-resize;
    touch-action: none;
    place-items: center;
    width: 1rem;
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }

  .ui-resize:before {
    content: "";
    border-radius: var(--ui-radius-pill);
    background: var(--ui-line-strong);
    width: 4px;
    height: 2.5rem;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-sans:var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}:root,:host{--font-sans:"Geist", "Noto Sans TC";--font-mono:"IBM Plex Mono"}}@layer components{.ui-range{--value:50%;appearance:none;cursor:ew-resize;background:0 0;width:100%;min-width:6rem;height:1.75rem;margin:0}.ui-range::-webkit-slider-runnable-track{border-radius:var(--ui-radius-pill);background:linear-gradient(90deg, var(--ui-text-strong) var(--value), var(--ui-line-divider) var(--value));height:4px}.ui-range::-moz-range-track{border-radius:var(--ui-radius-pill);background:var(--ui-line-divider);height:4px}.ui-range::-moz-range-progress{border-radius:var(--ui-radius-pill);background:var(--ui-text-strong);height:4px}.ui-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;box-shadow:0 0 0 1px var(--ui-line-strong), 0 1px 1px var(--ui-shade-1), 0 2px 4px -1px var(--ui-shade-2);background:linear-gradient(oklch(100% 0 none),oklch(96.5% .0011 265));border:0;border-radius:50%;margin-top:-6px}.ui-range::-moz-range-thumb{width:16px;height:16px;box-shadow:0 0 0 1px var(--ui-line-strong), 0 1px 1px var(--ui-shade-1), 0 2px 4px -1px var(--ui-shade-2);background:linear-gradient(oklch(100% 0 none),oklch(96.5% .0011 265));border:0;border-radius:50%}.ui-range:focus-visible{outline:none}.ui-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--ui-line-strong), 0 0 0 2px var(--ui-surface-stage), 0 0 0 4px var(--ui-focus)}.ui-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1px var(--ui-line-strong), 0 0 0 2px var(--ui-surface-stage), 0 0 0 4px var(--ui-focus)}}