@layer components {
  .ui-sheet{position:relative;border-radius:var(--ui-radius-xl);background:linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));color:var(--ui-text-body);box-shadow:var(--ui-elevation-rise-2)}

  .ui-sheet[data-elevation="1"] {
    box-shadow: var(--ui-elevation-rise-1);
  }

  .ui-sheet[data-elevation="3"] {
    box-shadow: var(--ui-elevation-rise-3);
  }

  .ui-sheet[data-elevation="flat"] {
    background: var(--ui-surface-sheet);
    box-shadow: var(--ui-elevation-flat);
  }

  .ui-well {
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-well);
    box-shadow: var(--ui-elevation-sink);
  }
}
@layer components {
  .ui-tray {
    min-width: 0;
    padding: var(--ui-inset);
    border-radius: var(--ui-radius-2xl);
    background: var(--ui-surface-tray);
    color: var(--ui-text-body);
    box-shadow: inset 0 0 0 1px var(--ui-line-hair), 0 1px 0 var(--ui-lip);
    margin: 0;
    position: relative;
  }

  .ui-tray-head {
    justify-content: space-between;
    align-items: center;
    gap: var(--ui-space-xs) var(--ui-space-md);
    min-height: 2.75rem;
    padding: var(--ui-space-sm) var(--ui-space-md);
    flex-wrap: wrap;
    display: flex;
  }

  .ui-tray-title {
    min-width: 0;
    color: var(--ui-text-strong);
    font-size: .8125rem;
    font-weight: var(--ui-weight-medium);
    letter-spacing: 0;
    margin: 0;
    line-height: 1.4;
  }

  .ui-tray-description {
    color: var(--ui-text-muted);
    margin: 2px 0 0;
    font-size: .75rem;
    line-height: 1.5;
  }

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

  .ui-tray-head > :is(.ui-button, .ui-tray-tools) {
    margin-block: calc(-1 * var(--ui-space-sm));
  }

  .ui-tray-caption {
    padding: var(--ui-space-sm) var(--ui-space-md);
    color: var(--ui-text-muted);
    text-wrap: pretty;
    overflow-wrap: anywhere;
    margin: 0;
    font-size: .78125rem;
    line-height: 1.6;
  }

  .ui-tray-caption code {
    color: var(--ui-text-body);
  }

  .ui-tray > * + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) {
    margin-top: var(--ui-inset);
  }

  .ui-tray > .ui-tray-head + :is(.ui-stage, .ui-code, .ui-browser, .ui-compare) {
    margin-top: 0;
  }

  .ui-tray > .ui-callout {
    margin-top: var(--ui-inset);
    border-radius: var(--ui-radius-xl);
  }

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

  .ui-tray .ui-stage {
    box-shadow: none;
  }

  .ui-tray:has( > .ui-browser:only-child) {
    border-radius: var(--ui-radius-xl);
    box-shadow: none;
    background: none;
    padding: 0;
  }

  .ui-tray .ui-browser[data-variant="plain"]:after {
    content: none;
  }

  .ui-tray > .ui-browser[data-variant="plain"]:only-child:after {
    content: "";
  }

  .ui-tray > :has( > .ui-browser-tools:last-child) + .ui-tray-caption, .ui-tray > .ui-browser-tools + .ui-tray-caption {
    padding-top: 0;
  }
}
@layer components {
  .ui-stage {
    isolation: isolate;
    border-radius: var(--ui-radius-xl);
    background: var(--ui-stage-light), var(--ui-surface-stage);
    min-height: 10rem;
    box-shadow: inset 0 0 0 1px var(--ui-line-contour), inset 0 1px 2px light-dark(oklch(18% 0 none / .04), oklch(0% 0 none / .45)), 0 1px 0 var(--ui-lip);
    place-items: center;
    padding: 3rem 2.5rem;
    display: grid;
    position: relative;
    overflow: hidden;
    container: stage / inline-size;
  }

  .ui-stage[data-padding="none"] {
    place-items: stretch stretch;
    padding: 0;
  }

  .ui-stage[data-padding="sm"] {
    min-height: 0;
    padding: var(--ui-space-md);
  }

  .ui-stage[data-align="start"] {
    place-items: start;
  }

  .ui-stage[data-background="grid"] {
    background: linear-gradient(var(--ui-line-hair) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, var(--ui-line-hair) 1px, transparent 1px) 0 0 / 20px 20px, var(--ui-stage-light), var(--ui-surface-stage);
  }

  .ui-stage[data-background="dots"] {
    background: radial-gradient(var(--ui-line-divider) .8px, transparent 1.1px) 0 0 / 14px 14px, var(--ui-stage-light), var(--ui-surface-stage);
  }

  .ui-stage[data-background="hatch"] {
    background: var(--ui-hatch), var(--ui-surface-stage);
  }

  .ui-stage[data-background="checkerboard"] {
    background: conic-gradient(var(--ui-line-hair) 25%, transparent 0 50%, var(--ui-line-hair) 0 75%, transparent 0) 0 0 / 16px 16px, var(--ui-surface-stage);
  }

  @media (width < 35rem) {
    .ui-stage {
      min-height: 8rem;
      padding: 2.25rem 1.125rem;
    }
  }

  .ui-stage[data-standalone] {
    border-radius: var(--ui-radius-2xl);
  }
}
@layer components {
  .ui-compare {
    gap: var(--ui-inset);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    display: grid;
  }

  .ui-compare > figure {
    grid-template-rows: auto 1fr;
    gap: 0;
    min-width: 0;
    margin: 0;
    display: grid;
  }

  .ui-compare>figure>figcaption{padding:var(--ui-space-xs) var(--ui-space-sm);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-compare .ui-stage {
    min-height: 11rem;
    padding: var(--ui-space-xl) var(--ui-space-lg);
  }
}
@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 components {
  .ui-scroll {
    overscroll-behavior: contain;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-well);
    max-height: 16rem;
    box-shadow: var(--ui-elevation-sink);
    overflow: auto;
  }

  .ui-scroll:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
}
@layer components {
  .ui-expand {
    min-width: 0;
    position: relative;
  }

  .ui-expand[data-expanded="false"] > :first-child {
    max-height: 30rem;
    overflow: hidden;
  }

  .ui-expand-control {
    padding-top: var(--ui-space-sm);
    justify-content: center;
    display: flex;
  }

  .ui-expand[data-expanded="false"] > .ui-expand-control {
    inset-inline: 0;
    background: linear-gradient(to bottom, transparent, var(--ui-surface-canvas) 72%);
    padding-top: 6rem;
    position: absolute;
    bottom: 0;
  }

  .ui-expand[data-expanded="true"] > .ui-expand-control {
    bottom: var(--ui-space-sm);
    pointer-events: none;
    position: sticky;
  }

  .ui-expand-control > .ui-button {
    pointer-events: auto;
  }

  .ui-expand-control > .ui-button > svg {
    transition: rotate var(--ui-duration-quick) var(--ui-ease);
  }

  .ui-expand[data-expanded="true"] > .ui-expand-control > .ui-button > svg {
    rotate: 180deg;
  }
}
@layer components {
  .ui-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-xs);min-height:2.375rem;padding:0 var(--ui-space-md);border:0;border-radius:var(--ui-radius-md);background:linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));color:var(--ui-text-strong);box-shadow:var(--ui-elevation-rise-1);font:var(--ui-weight-medium) .84375rem/1 var(--font-family-sans);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;transition:box-shadow var(--ui-duration-quick) var(--ui-ease), background var(--ui-duration-quick) var(--ui-ease), translate var(--ui-duration-quick) var(--ui-ease), color var(--ui-duration-quick)}

  .ui-button:not([data-shape="icon"]) {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    max-width: 100%;
    line-height: 1.2;
  }

  .ui-button > svg {
    flex: none;
    width: 1rem;
    height: 1rem;
  }

  .ui-button:where(:hover, [data-state="hover"]):not(:disabled) {
    box-shadow: var(--ui-elevation-rise-1h);
    translate: 0 -.5px;
  }

  .ui-button:where(:active, [data-state="pressed"]):not(:disabled) {
    background: var(--ui-surface-well);
    box-shadow: var(--ui-elevation-sink);
    transition-duration: var(--ui-duration-press);
    translate: 0 .5px;
  }

  .ui-button:where(:focus-visible,[data-state=focus]){outline:2px solid var(--ui-focus);outline-offset:2px}

  .ui-button:disabled {
    color: var(--ui-text-disabled);
    background: var(--ui-surface-well);
    box-shadow: var(--ui-elevation-flat);
    cursor: not-allowed;
  }

  .ui-button[data-size="sm"] {
    min-height: 2rem;
    padding-inline: var(--ui-space-sm);
    border-radius: 5px;
    font-size: .78125rem;
  }

  .ui-button[data-size="lg"] {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    font-size: .9375rem;
  }

  .ui-button[data-variant="primary"] {
    color: var(--ui-text-inverse);
    box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .17), oklch(100% 0 none)), inset 0 -1px 0 light-dark(oklch(0% 0 none / .3), oklch(0% 0 none / .13)),
      0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6)), 0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3);
    background: linear-gradient(light-dark(oklch(32% .0026 265), oklch(98.8% 0 none)), light-dark(oklch(19.5% .003 265), oklch(91.6% .0032 265)));
  }

  .ui-button[data-variant="primary"]:where(:hover, [data-state="hover"]):not(:disabled) {
    box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .19), oklch(100% 0 none)), inset 0 -1px 0 light-dark(oklch(0% 0 none / .3), oklch(0% 0 none / .13)),
      0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6)), 0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 6px 6px -3px var(--ui-shade-3), 0 10px 10px -5px var(--ui-shade-4);
    background: linear-gradient(light-dark(oklch(36% .0028 265), oklch(100% 0 none)), light-dark(oklch(22% .0034 265), oklch(94% .003 265)));
  }

  .ui-button[data-variant="primary"]:where(:active, [data-state="pressed"]):not(:disabled) {
    background: light-dark(oklch(18% .003 265), oklch(87.5% .0035 265));
    box-shadow: inset 0 1px 3px light-dark(oklch(0% 0 none / .55), oklch(0% 0 none / .3)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .6));
  }

  .ui-button[data-variant="quiet"] {
    color: var(--ui-text-muted);
    box-shadow: none;
    background: none;
  }

  .ui-button[data-variant=quiet]:where(:hover,[data-state=hover]):not(:disabled){color:var(--ui-text-strong);background:linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));box-shadow:var(--ui-elevation-rise-1);translate:none}

  .ui-button[data-variant="quiet"][aria-pressed="true"] {
    color: var(--ui-text-strong);
    background: var(--ui-surface-well);
    box-shadow: var(--ui-elevation-sink);
  }

  .ui-button[data-variant="gold"] {
    color: var(--ui-gold-ink);
    background: var(--ui-gold-face);
    text-shadow: 0 1px oklch(100% 0 none / .35);
    box-shadow: inset 0 1px 0 oklch(100% 0 none / .65), inset 0 -1px 0 oklch(52% .12 58 / .28), 0 0 0 1px light-dark(oklch(58% .12 66 / .7), oklch(82% .14 82 / .55)),
      0 1px 1px -.5px var(--ui-shade-1), 0 3px 3px -1.5px var(--ui-shade-2), 0 10px 18px -8px light-dark(oklch(72% .16 72 / .42), oklch(82% .16 80 / .3));
  }

  .ui-button[data-shape="icon"] {
    width: 2.375rem;
    padding: 0;
  }

  .ui-button[data-shape="icon"][data-size="sm"] {
    width: 2rem;
  }
}
@layer components {
  .ui-segmented {
    border-radius: calc(var(--ui-radius-md) + 3px);
    background: var(--ui-surface-well);
    max-width: 100%;
    box-shadow: var(--ui-elevation-sink);
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    display: inline-flex;
  }

  .ui-segmented > :is(button, a) {
    appearance: none;
    border-radius: var(--ui-radius-md);
    min-width: 3.5rem;
    min-height: 1.875rem;
    color: var(--ui-text-muted);
    font: var(--ui-weight-medium) .78125rem/1 var(--font-family-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0 .75rem;
    text-decoration: none;
    display: inline-flex;
  }

  .ui-segmented > :is(button, a):hover:not(:disabled) {
    color: var(--ui-text-strong);
  }

  .ui-segmented>:is(button,a):is([aria-pressed=true],[aria-selected=true],[aria-checked=true],[aria-current=page]){color:var(--ui-text-strong);background:linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));box-shadow:var(--ui-elevation-rise-1)}

  .ui-segmented>:is(button,a):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

  .ui-segmented > button:disabled {
    color: var(--ui-text-disabled);
    cursor: not-allowed;
  }

  .ui-segmented[data-variant="underline"] {
    gap: 0 var(--ui-space-lg);
    box-shadow: inset 0 -1px 0 var(--ui-line-divider);
    background: none;
    border-radius: 0;
    padding: 0;
    display: flex;
  }

  .ui-segmented[data-variant="underline"] > :is(button, a) {
    min-width: 0;
    min-height: 2.75rem;
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) var(--ui-text-small)/1.4 var(--font-family-sans);
    border-radius: 0;
    padding: 0;
  }

  .ui-segmented[data-variant="underline"] > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"]) {
    color: var(--ui-text-strong);
    box-shadow: inset 0 -2px 0 var(--ui-text-strong);
    background: none;
  }

  .ui-segmented[data-variant="underline"] > :is(button, a):focus-visible {
    outline-offset: -2px;
    border-radius: var(--ui-radius-xs);
  }

  .ui-segmented[data-size="lg"] {
    border-radius: calc(var(--ui-radius-md) + 4px);
    padding: 4px;
  }

  .ui-segmented[data-size="lg"] > :is(button, a) {
    border-radius: var(--ui-radius-md);
    min-height: 2.25rem;
    font-size: .8125rem;
  }

  @media (pointer: coarse) {
    .ui-segmented > button {
      min-height: 2.5rem;
    }
  }
}
@layer components {
  .ui-field {
    gap: var(--ui-space-xs);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-medium);
    display: grid;
  }

  .ui-field-hint {
    color: var(--ui-text-muted);
    font-size: .75rem;
    font-weight: var(--ui-weight-regular);
  }

  .ui-input, .ui-select {
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-well);
    width: 100%;
    min-height: 2.5rem;
    color: var(--ui-text-strong);
    box-shadow: var(--ui-elevation-sink);
    font: var(--ui-weight-regular) var(--ui-text-small)/1.45 var(--font-family-sans);
    resize: vertical;
    transition: box-shadow var(--ui-duration-quick), background-color var(--ui-duration-quick);
    border: 0;
    padding: .5625rem .75rem;
  }

  .ui-input::placeholder {
    color: var(--ui-text-muted);
  }

  .ui-input:hover:not(:focus, :disabled), .ui-select:hover:not(:focus, :disabled) {
    background: var(--ui-surface-well-hover);
  }

  .ui-input:focus, .ui-select:focus-visible {
    background: var(--ui-surface-sheet);
    box-shadow: inset 0 0 0 1px var(--ui-line-mark), 0 0 0 3px light-dark(oklch(22% .002 265 / .1), oklch(100% 0 none / .12));
    outline: none;
  }

  .ui-input:disabled, .ui-select:disabled {
    color: var(--ui-text-disabled);
    cursor: not-allowed;
  }

  .ui-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-position: right .625rem center;
    background-repeat: no-repeat;
    background-size: 14px;
    padding-right: 2rem;
  }

  .ui-select[data-variant="raised"] {
    background-color: #0000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo));
    box-shadow: var(--ui-elevation-rise-1);
    font-weight: var(--ui-weight-medium);
    background-position: right .625rem center, 0 0;
    background-size: 14px, auto;
  }

  .ui-select[data-variant="overlay"] {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  :has(>.ui-select[data-variant=overlay]:focus-visible){outline:2px solid var(--ui-focus);outline-offset:2px}

  @media (pointer: coarse) {
    .ui-input, .ui-select {
      min-height: 2.75rem;
    }
  }
}
@layer components {
  .ui-range {
    --value: 50%;
    appearance: none;
    cursor: ew-resize;
    background: none;
    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);
  }
}
@layer components {
  .ui-check {
    align-items: center;
    gap: var(--ui-space-xs);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-small);
    cursor: pointer;
    display: inline-flex;
  }

  .ui-check > input:not(.ui-switch) {
    appearance: none;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-well);
    width: 1.125rem;
    height: 1.125rem;
    box-shadow: var(--ui-elevation-sink);
    cursor: pointer;
    transition: background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
    flex: none;
    place-items: center;
    margin: 0;
    display: grid;
  }

  .ui-check > input:not(.ui-switch):not(:checked) {
    box-shadow: var(--ui-elevation-sink), inset 0 0 0 1px var(--ui-line-divider);
  }

  .ui-check > input:not(.ui-switch):after {
    content: "";
    opacity: 0;
    background: var(--ui-text-inverse);
    width: 10px;
    height: 10px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .ui-check > input:not(.ui-switch):checked {
    background: var(--ui-surface-ink);
    box-shadow: inset 0 1px light-dark(oklch(100% 0 none / .16), oklch(100% 0 none)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .5));
  }

  .ui-check > input:not(.ui-switch):checked:after {
    opacity: 1;
  }

  .ui-check > input[type="radio"] {
    border-radius: 50%;
  }

  .ui-check > input[type="radio"]:after {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    mask: none;
  }

  .ui-check>input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

  .ui-switch {
    appearance: none;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-well);
    width: 2.25rem;
    height: 1.375rem;
    box-shadow: var(--ui-elevation-sink);
    cursor: pointer;
    transition: background-color var(--ui-duration-base) var(--ui-ease);
    flex: none;
    margin: 0;
    position: relative;
  }

  .ui-switch:before {
    content: "";
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 0 1px var(--ui-line-contour), 0 1px 1px var(--ui-shade-1), 0 2px 3px -1px var(--ui-shade-2);
    transition: translate var(--ui-duration-base) var(--ui-ease);
    background: linear-gradient(oklch(100% 0 none), oklch(96.5% .0011 265));
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
  }

  .ui-switch:checked {
    background: var(--ui-surface-ink);
    box-shadow: inset 0 1px 2px oklch(0% 0 none / .3);
  }

  .ui-switch:checked:before {
    background: light-dark(linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)), linear-gradient(180deg, oklch(26% .0024 265), oklch(20% .002 265)));
    translate: .875rem;
  }

  .ui-switch:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
}
@layer components {
  .ui-copy {
    align-items: center;
    gap: var(--ui-space-xs);
    display: inline-flex;
  }

  .ui-copy-status {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono);
  }

  .ui-copy-status[data-result="success"] {
    color: var(--ui-status-success);
  }

  .ui-copy-status[data-result="error"] {
    color: var(--ui-status-danger);
  }

  .ui-copy-status:empty {
    display: none;
  }

  .ui-copy > .ui-copy-status {
    text-align: end;
    min-width: 0;
    max-width: 16rem;
    line-height: 1.3;
  }

  @media (scripting: none), print {
    .ui-copy {
      display: none;
    }
  }
}
@layer components {
  .ui-kbd {
    border-radius: var(--ui-radius-xs);
    min-width: 1.375rem;
    height: 1.375rem;
    color: var(--ui-text-muted);
    box-shadow: inset 0 0 0 1px var(--ui-line-contour);
    font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono);
    background: none;
    place-items: center;
    padding: 0 .3125rem;
    display: inline-grid;
  }
}
@layer components {
  @media (pointer: coarse) {
    .ui-button {
      min-height: 2.75rem;
    }
  }

  .ui-button[data-result] > svg:first-of-type, .ui-button:not([data-result]) > .ui-result-icon {
    display: none;
  }

  .ui-button[data-result="success"] {
    color: var(--ui-status-success);
  }

  .ui-button[data-result="error"] {
    color: var(--ui-status-danger);
  }

  .ui-button[data-result="error"] > svg:first-of-type {
    display: block;
  }

  .ui-button[data-result="error"] > .ui-result-icon {
    display: none;
  }
}
@layer components {
  .ui-tooltip {
    z-index: 60;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-ink);
    color: var(--ui-text-inverse);
    box-shadow: 0 1px 2px var(--ui-shade-1), 0 4px 10px -4px var(--ui-shade-2);
    font: var(--ui-weight-regular) .71875rem/1.2 var(--font-family-sans);
    white-space: nowrap;
    pointer-events: none;
    padding: .3125rem .5rem;
    position: absolute;
  }

  .ui-tooltip[data-side="bottom"]:before {
    content: "";
    border: 4px solid #0000;
    border-bottom-color: var(--ui-surface-ink);
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50%;
  }

  .ui-tooltip > .ui-kbd {
    background: color-mix(in oklab, var(--ui-text-inverse) 14%, transparent);
    min-width: 1.125rem;
    height: 1.125rem;
    color: var(--ui-text-inverse);
    box-shadow: none;
    margin-left: 6px;
  }
}
@layer components {
  .ui-menu {
    min-width: 12rem;
    padding: var(--ui-inset);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-float);
    box-shadow: var(--ui-elevation-rise-3);
    gap: 1px;
    margin: 0;
    list-style: none;
    display: grid;
  }

  .ui-menu-label{padding:.375rem .625rem .25rem;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-menu-item {
    appearance: none;
    align-items: center;
    gap: var(--ui-space-xs);
    border-radius: var(--ui-radius-sm);
    width: 100%;
    min-height: 2rem;
    color: var(--ui-text-body);
    font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans);
    text-align: start;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0 .625rem;
    text-decoration: none;
    display: flex;
  }

  .ui-menu-item > svg {
    width: 15px;
    height: 15px;
    color: var(--ui-text-muted);
    flex: none;
  }

  .ui-menu-item > small {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono);
    margin-left: auto;
  }

  .ui-menu-item:is(:hover, [data-highlighted]) {
    color: var(--ui-text-strong);
    background: light-dark(oklch(22% .002 265 / .05), oklch(100% 0 none / .06));
  }

  .ui-menu-item[aria-checked="true"] {
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-medium);
  }

  .ui-menu-item[aria-checked="true"]:after {
    content: "";
    background: currentColor;
    width: 14px;
    height: 14px;
    margin-left: auto;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .ui-menu-item:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}

  .ui-menu-separator {
    height: 1px;
    margin: var(--ui-space-3xs) .375rem;
    background: var(--ui-line-hair);
  }
}

@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"}}