@layer theme;

@layer base {
  body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    line-height: 1.2;
  }

  a, button {
    touch-action: manipulation;
  }

  *, :before, :after {
    box-sizing: border-box;
  }

  body {
    -moz-tab-size: 2;
    tab-size: 2;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100%;
    display: block;
  }

  abbr[title] {
    text-decoration: underline dotted;
  }

  b, strong {
    font-weight: bolder;
  }

  pre, code, kbd, samp {
    font-size: 1em;
  }

  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  progress {
    vertical-align: baseline;
  }

  [type="search"] {
    appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  hr {
    height: 0;
    color: inherit;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
  }

  body, :host {
    font-family: var(--font-family-sans);
    font-feature-settings: var(--font-feature-sans, normal);
  }

  code, kbd, samp, pre {
    font-family: var(--font-family-mono);
    font-feature-settings: var(--font-feature-mono, normal);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button, input, optgroup, select, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    color: inherit;
    background-color: #0000;
    margin: 0;
    padding: 0;
    font-size: 100%;
  }

  *, :before, :after {
    border-style: solid;
    border-width: 0;
  }

  body, blockquote, dl, dd, hr, figure, p, pre, h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }

  td, legend, fieldset {
    padding: 0;
  }

  ul, ol {
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  ul {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  [hidden] {
    display: none;
  }
}

@layer defaults, components, utilities;




@layer base {
  :root {
    color-scheme: light dark;
  }

  [data-theme="light"], :host([data-theme="light"]) {
    color-scheme: light;
  }

  [data-theme="dark"], :host([data-theme="dark"]) {
    color-scheme: dark;
  }
}











@layer components {
  .shiki {
    color: var(--ui-code-text);
  }
}


.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

@keyframes slide-to-right {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(100%);
    }
  }

@layer defaults {
  .light {
    --stripe-image: linear-gradient(135deg, var(--color-line-subtle) 4.5%, transparent 0, transparent 50%, var(--color-line-subtle) 0, var(--color-line-subtle) 54.5%, transparent 0);
    --tiny-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='black' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
    --color-primary: var(--color-yellow-40);
    --color-accent: var(--color-zinc-90);
    --color-focus: var(--color-zinc-90);
    --color-text-success: var(--color-green-70);
    --color-text-danger: var(--color-red-60);
    --color-info: var(--color-cyan-40);
    --color-text-info: var(--color-cyan-70);
  }

  .dark {
    --stripe-image: linear-gradient(135deg, var(--color-line-subtle) 4.5%, transparent 0, transparent 50%, var(--color-line-subtle) 0, var(--color-line-subtle) 54.5%, transparent 0);
    --tiny-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='white' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
    --color-primary: var(--color-yellow-50);
    --color-accent: var(--color-zinc-5);
    --color-focus: var(--color-zinc-5);
    --color-text-success: var(--color-green-40);
    --color-text-danger: var(--color-red-30);
    --color-info: var(--color-cyan-50);
    --color-text-info: var(--color-cyan-40);
  }
}



@layer theme {
  :root, :host {
    --ui-font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";
    --ui-text-display: 2.5rem;
    --ui-leading-display: 1.1;
    --ui-tracking-display: -.03em;
    --ui-text-title: clamp(1.875rem, 1.4rem + 2vw, 2.375rem);
    --ui-leading-title: 1.16;
    --ui-tracking-title: -.028em;
    --ui-text-h2: 1.625rem;
    --ui-leading-h2: 2.1875rem;
    --ui-tracking-h2: -.022em;
    --ui-text-h3: 1.25rem;
    --ui-leading-h3: 1.75rem;
    --ui-tracking-h3: -.014em;
    --ui-text-base: 1rem;
    --ui-leading-body: 2;
    --ui-text-lead: 1.125rem;
    --ui-leading-lead: 1.75;
    --ui-text-small: .875rem;
    --ui-leading-small: 1.8;
    --ui-text-caption: .8125rem;
    --ui-leading-caption: 1.65;
    --ui-text-label: .75rem;
    --ui-tracking-label: 0;
    --ui-text-eyebrow: .6875rem;
    --ui-tracking-eyebrow: .14em;
    --ui-text-code: .8125rem;
    --ui-leading-code: 1.7;
    --ui-weight-regular: 400;
    --ui-weight-medium: 460;
    --ui-weight-strong: 500;
    --ui-weight-heading: 400;
    --ui-inset: 4px;
    --ui-radius-xs: 3px;
    --ui-radius-sm: 4px;
    --ui-radius-md: 6px;
    --ui-radius-lg: 8px;
    --ui-radius-xl: 10px;
    --ui-radius-2xl: 14px;
    --ui-radius-pill: 999px;
    --ui-space-3xs: .25rem;
    --ui-space-2xs: .375rem;
    --ui-space-xs: .5rem;
    --ui-space-sm: .75rem;
    --ui-space-md: 1rem;
    --ui-space-lg: 1.5rem;
    --ui-space-xl: 2rem;
    --ui-space-2xl: 3rem;
    --ui-space-3xl: 4rem;
    --ui-ease: cubic-bezier(.22, 1, .36, 1);
    --ui-ease-inout: cubic-bezier(.65, 0, .35, 1);
    --ui-duration-press: 60ms;
    --ui-duration-quick: .16s;
    --ui-duration-base: .28s;
    --ui-duration-slow: .64s;
  }

  :root:lang(en) {
    --ui-weight-regular: 350;
  }

  :lang(zh) {
    --ui-text-eyebrow: .75rem;
    --ui-tracking-eyebrow: .1em;
  }

  :root, :host, .light, .dark {
    --ui-surface-canvas: light-dark(oklch(98.6% .0008 265), oklch(19.4% .0019 265));
    --ui-surface-tray: light-dark(oklch(96% .0012 265), oklch(17.4% .0018 265));
    --ui-surface-stage: light-dark(oklch(98.9% .0006 265), oklch(20.4% .002 265));
    --ui-surface-sheet: light-dark(oklch(100% 0 none), oklch(24.2% .0022 265));
    --ui-surface-sheet-lo: light-dark(oklch(99.3% .0005 265), oklch(22.8% .0021 265));
    --ui-surface-well: light-dark(oklch(96.6% .0011 265), oklch(16.4% .0017 265));
    --ui-surface-well-hover: light-dark(oklch(95.8% .0012 265), oklch(15.4% .0016 265));
    --ui-surface-float: light-dark(oklch(100% 0 none), oklch(26.4% .0024 265));
    --ui-surface-chip: light-dark(oklch(96.5% .0011 265), oklch(100% 0 none / .07));
    --ui-surface-code: light-dark(oklch(99.6% .0004 265), oklch(21.2% .002 265));
    --ui-surface-ink: light-dark(oklch(22% .0022 265), oklch(95% .0012 265));
    --ui-surface-scrim: light-dark(oklch(18% 0 none / .16), oklch(0% 0 none / .55));
    --ui-line-hair: light-dark(oklch(22% .002 265 / .065), oklch(100% 0 none / .075));
    --ui-line-contour: light-dark(oklch(22% .002 265 / .095), oklch(100% 0 none / .11));
    --ui-line-divider: light-dark(oklch(22% .002 265 / .12), oklch(100% 0 none / .13));
    --ui-line-strong: light-dark(oklch(22% .002 265 / .2), oklch(100% 0 none / .22));
    --ui-line-mark: light-dark(oklch(22% .002 265 / .3), oklch(100% 0 none / .32));
    --ui-text-strong: light-dark(oklch(21% .0022 265), oklch(95% .0012 265));
    --ui-text-body: light-dark(oklch(39.8% .0028 265), oklch(80% .0025 265));
    --ui-text-muted: light-dark(oklch(48.6% .003 265), oklch(68.6% .0028 265));
    --ui-text-disabled: light-dark(oklch(68.6% .0028 265), oklch(48.6% .003 265));
    --ui-text-inverse: light-dark(oklch(98.6% .0008 265), oklch(19.4% .0019 265));
    --ui-focus: light-dark(oklch(24.6% .0022 265), oklch(93.2% .0015 265));
    --ui-highlight: light-dark(oklch(100% 0 none / .95), oklch(100% 0 none / .07));
    --ui-lip: light-dark(oklch(100% 0 none / .9), oklch(100% 0 none / .04));
    --ui-shade-1: light-dark(oklch(18% 0 none / .07), oklch(0% 0 none / .55));
    --ui-shade-2: light-dark(oklch(18% 0 none / .05), oklch(0% 0 none / .4));
    --ui-shade-3: light-dark(oklch(18% 0 none / .04), oklch(0% 0 none / .34));
    --ui-shade-4: light-dark(oklch(18% 0 none / .035), oklch(0% 0 none / .3));
    --ui-shade-5: light-dark(oklch(18% 0 none / .03), oklch(0% 0 none / .28));
    --ui-elevation-sink: inset 0 1px 2px light-dark(oklch(18% 0 none / .05), oklch(0% 0 none / .45)), inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip);
    --ui-elevation-flat: 0 0 0 1px var(--ui-line-contour);
    --ui-elevation-rise-1: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
    0 1px 1px -.5px var(--ui-shade-1), 0 2px 2px -1px var(--ui-shade-2), 0 4px 4px -2px var(--ui-shade-3);
    --ui-elevation-rise-1h: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-strong),
    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);
    --ui-elevation-rise-2: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
    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 12px 12px -6px var(--ui-shade-4), 0 24px 24px -12px var(--ui-shade-5);
    --ui-elevation-rise-3: inset 0 1px 0 var(--ui-highlight), 0 0 0 1px var(--ui-line-contour),
    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 12px 12px -6px var(--ui-shade-4), 0 24px 24px -12px var(--ui-shade-4), 0 48px 48px -24px var(--ui-shade-5);
    --ui-elevation-overlay: var(--ui-elevation-rise-3), 0 64px 96px -32px light-dark(oklch(18% 0 none / .08), oklch(0% 0 none / .5));
    --ui-stage-light: radial-gradient(110% 80% at 18% -14%, light-dark(oklch(100% 0 none / .9), oklch(100% 0 none / .04)), transparent 60%),
                 linear-gradient(180deg, transparent 55%, light-dark(oklch(18% 0 none / .02), oklch(0% 0 none / .08)));
    --ui-hatch: repeating-linear-gradient(135deg, light-dark(oklch(22% .002 265 / .13), oklch(100% 0 none / .1)) 0 1px, transparent 1px 7px);
    --ui-tone-neutral: light-dark(var(--color-zinc-50), var(--color-zinc-40));
    --ui-tone-blue: light-dark(oklch(53% .2 262), oklch(76% .12 258));
    --ui-tone-violet: light-dark(oklch(53% .2 295), oklch(76% .12 295));
    --ui-tone-amber: light-dark(oklch(62% .15 62), oklch(82% .13 80));
    --ui-tone-green: light-dark(oklch(52% .12 150), oklch(78% .12 150));
    --ui-tone-red: light-dark(oklch(54% .17 25), oklch(74% .14 22));
    --ui-status-info: var(--ui-tone-blue);
    --ui-status-success: var(--ui-tone-green);
    --ui-status-warning: var(--ui-tone-amber);
    --ui-status-danger: var(--ui-tone-red);
    --ui-gold-face: linear-gradient(180deg, oklch(92.4% .085 88) 0%, oklch(86.5% .128 82) 46%, oklch(79% .142 75) 100%);
    --ui-gold-ink: oklch(29.27% .0971 37.4);
    --ui-gold-text: light-dark(oklch(52.17% .1199 62.2), oklch(86% .13 86));
    --ui-code-text: light-dark(#344054, #dedbd7);
    --ui-code-comment: light-dark(#636779, #9b9cad);
    --ui-code-punctuation: light-dark(#626675, #b6b3bd);
    --ui-code-keyword: light-dark(#91466f, #e6a0c4);
    --ui-code-function: light-dark(#3764a5, #9dbce6);
    --ui-code-property: light-dark(#256a78, #9acbd4);
    --ui-code-string: light-dark(#71622f, #d9ce96);
    --ui-code-number: light-dark(#71549e, #c5b0e6);
    --ui-code-added: light-dark(oklch(52% .12 150 / .1), oklch(78% .12 150 / .1));
    --ui-code-removed: light-dark(oklch(54% .17 25 / .08), oklch(74% .14 22 / .1));
    --ui-code-active: light-dark(oklch(22% .002 265 / .045), oklch(100% 0 none / .05));
  }
}

@layer base {
  html {
    background: var(--ui-surface-canvas);
  }

  html[lang="en"] {
    & body {
      font-weight: 350;
    }
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  @media (prefers-color-scheme: light) {
    :root:not(.light, .dark) [class~="hidden@apply(--site-light)"] {
      display: none !important;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.light, .dark) [class~="hidden@apply(--site-dark)"] {
      display: none !important;
    }
  }
}

@layer defaults {
  .light {
    --color-yellow: var(--color-yellow-40);
    --color-yellow-hover: var(--color-yellow-50);
    --color-on-yellow: var(--color-yellow-95);
    --color-yellow-line: color-mix(in oklab, var(--color-black) 10%, transparent);
  }

  .dark {
    --color-yellow: var(--color-yellow-50);
    --color-yellow-hover: var(--color-yellow-40);
    --color-on-yellow: var(--color-yellow-95);
    --color-yellow-line: color-mix(in oklab, var(--color-white) 30%, transparent);
  }
}



@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-5:oklch(96.5% .0011 265);--color-zinc-40:oklch(68.6% .0028 265);--color-zinc-50:oklch(58% .003 265);--color-zinc-90:oklch(24.6% .0022 265);--color-zinc-95:oklch(19.4% .0019 265);--color-yellow-40:oklch(91.5% .1909 101.1);--color-yellow-50:oklch(87.52% .1796 94.6);--color-yellow-95:oklch(33.35% .083 54.6);--color-green-40:oklch(77.68% .25 144.1);--color-green-70:oklch(58.66% .1996 142.5);--color-cyan-40:oklch(84.82% .1408 209.5);--color-cyan-50:oklch(81.54% .1453 216.7);--color-cyan-70:oklch(70.27% .1509 235.9);--color-red-30:oklch(72.94% .1679 17.5);--color-red-60:oklch(60.94% .2501 29.2)}:root,:host{--color-line-subtle:light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .06))}:root,:host{--color-white:oklch(100% 0 none);--color-black:oklch(0% 0 none)}: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";--font-feature-sans:"ss02", "ss03", "ss04", "ss06", "ss07", "ss08";--font-feature-mono:"cv01", "cv02", "cv29"}:root,:host{--color-focus:light-dark(var(--color-zinc-90), var(--color-zinc-5))}}