@layer reset, base, tokens, recipes, utilities;

@layer reset{
  html,:host {
    --font-fallback: 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';
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: var(--global-font-body, var(--font-fallback));
    -webkit-tap-highlight-color: transparent;
}

  *,::before,::after,::backdrop,::file-selector-button {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    border-style: solid;
    border-color: var(--global-color-border, currentcolor);
    box-sizing: border-box;
}

  hr {
    color: inherit;
    height: 0px;
    border-top-width: 1px;
}

  body {
    line-height: inherit;
    height: 100%;
}

  img {
    border-style: none;
}

  img,svg,video,canvas,audio,iframe,embed,object {
    display: block;
    vertical-align: middle;
}

  img,video {
    max-width: 100%;
    height: auto;
}

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

  p,h1,h2,h3,h4,h5,h6 {
    overflow-wrap: break-word;
}

  ol,ul,menu {
    list-style: none;
}

  button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {
    appearance: button;
    -webkit-appearance: button;
}

  button,input,optgroup,select,textarea,::file-selector-button {
    font: inherit;
    background: var(--colors-transparent);
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
}

  ::placeholder {
    --placeholder-fallback: rgba(0, 0, 0, 0.5);
    opacity: 1;
    color: var(--global-color-placeholder, var(--placeholder-fallback));
}

  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      --placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent);
}
}

  ::selection {
    background-color: var(--global-color-selection, rgba(0, 115, 255, 0.3));
}

  textarea {
    resize: vertical;
}

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

  summary {
    display: list-item;
}

  small {
    font-size: 80%;
}

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

  sub {
    bottom: -0.25em;
}

  sup {
    top: -0.5em;
}

  dialog {
    padding: 0px;
}

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

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

  b,strong {
    font-weight: bolder;
}

  code,kbd,samp,pre {
    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
    font-family: var(--global-font-mono, var(--font-mono-fallback));
    font-size: 1em;
    font-feature-settings: normal;
    font-variation-settings: normal;
}

  progress {
    vertical-align: baseline;
}

  ::-webkit-search-decoration,::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

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

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

  :-moz-focusring {
    outline: auto;
}

  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
}
}

@layer base{
  :root {
    --made-with-panda: '🐼';
}

  html,body {
    background: var(--colors-bg-canvas);
    margin: var(--spacing-0);
    padding: var(--spacing-0);
    color: var(--colors-fg-default);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
    min-height: 100vh;
}

  :root {
    --sidebar-bg: #f0f0ee;
    --sidebar-hover: #e8e8e6;
    --chat-bg: #ffffff;
    --user-msg-bg: var(--colors-jade-9);
    --user-msg-color: white;
    --user-msg-edit-bg: rgba(0,0,0,0.06);
    --user-msg-btn-bg: rgba(0,0,0,0.08);
    --user-msg-btn-bg-hover: rgba(0,0,0,0.12);
}

  .dark {
    --sidebar-bg: #171918;
    --sidebar-hover: #1f2120;
    --chat-bg: #1c1d1c;
    --user-msg-bg: var(--colors-jade-a4);
    --user-msg-color: var(--colors-fg-default);
    --user-msg-edit-bg: rgba(255,255,255,0.06);
    --user-msg-btn-bg: rgba(255,255,255,0.08);
    --user-msg-btn-bg-hover: rgba(255,255,255,0.12);
}

  #root {
    min-height: 100vh;
}

  input,textarea,select,button {
    font-family: inherit;
}

  *::-webkit-scrollbar {
    width: 6px;
}

  *::-webkit-scrollbar-track {
    background: var(--colors-transparent);
}

  *::-webkit-scrollbar-thumb {
    background: var(--colors-gray-a5);
    border-radius: 9999px;
}

  *::-webkit-scrollbar-thumb:hover {
    background: var(--colors-gray-a7);
}

  body {
    background: var(--colors-bg-canvas);
    color: var(--colors-fg-default);
}

  .dark body {
    color-scheme: dark;
}

  *,*::before,*::after {
    border-color: var(--colors-border-subtle);
    border-style: solid;
    box-sizing: border-box;
}

  *::placeholder {
    opacity: 1;
    color: var(--colors-fg-subtle);
}

  *::selection {
    background: accent.a4;
}

  html {
    --colors-color-palette-light-1: var(--colors-jade-light-1);
    --colors-color-palette-light-2: var(--colors-jade-light-2);
    --colors-color-palette-light-3: var(--colors-jade-light-3);
    --colors-color-palette-light-4: var(--colors-jade-light-4);
    --colors-color-palette-light-5: var(--colors-jade-light-5);
    --colors-color-palette-light-6: var(--colors-jade-light-6);
    --colors-color-palette-light-7: var(--colors-jade-light-7);
    --colors-color-palette-light-8: var(--colors-jade-light-8);
    --colors-color-palette-light-9: var(--colors-jade-light-9);
    --colors-color-palette-light-10: var(--colors-jade-light-10);
    --colors-color-palette-light-11: var(--colors-jade-light-11);
    --colors-color-palette-light-12: var(--colors-jade-light-12);
    --colors-color-palette-light-a1: var(--colors-jade-light-a1);
    --colors-color-palette-light-a2: var(--colors-jade-light-a2);
    --colors-color-palette-light-a3: var(--colors-jade-light-a3);
    --colors-color-palette-light-a4: var(--colors-jade-light-a4);
    --colors-color-palette-light-a5: var(--colors-jade-light-a5);
    --colors-color-palette-light-a6: var(--colors-jade-light-a6);
    --colors-color-palette-light-a7: var(--colors-jade-light-a7);
    --colors-color-palette-light-a8: var(--colors-jade-light-a8);
    --colors-color-palette-light-a9: var(--colors-jade-light-a9);
    --colors-color-palette-light-a10: var(--colors-jade-light-a10);
    --colors-color-palette-light-a11: var(--colors-jade-light-a11);
    --colors-color-palette-light-a12: var(--colors-jade-light-a12);
    --colors-color-palette-dark-1: var(--colors-jade-dark-1);
    --colors-color-palette-dark-2: var(--colors-jade-dark-2);
    --colors-color-palette-dark-3: var(--colors-jade-dark-3);
    --colors-color-palette-dark-4: var(--colors-jade-dark-4);
    --colors-color-palette-dark-5: var(--colors-jade-dark-5);
    --colors-color-palette-dark-6: var(--colors-jade-dark-6);
    --colors-color-palette-dark-7: var(--colors-jade-dark-7);
    --colors-color-palette-dark-8: var(--colors-jade-dark-8);
    --colors-color-palette-dark-9: var(--colors-jade-dark-9);
    --colors-color-palette-dark-10: var(--colors-jade-dark-10);
    --colors-color-palette-dark-11: var(--colors-jade-dark-11);
    --colors-color-palette-dark-12: var(--colors-jade-dark-12);
    --colors-color-palette-dark-a1: var(--colors-jade-dark-a1);
    --colors-color-palette-dark-a2: var(--colors-jade-dark-a2);
    --colors-color-palette-dark-a3: var(--colors-jade-dark-a3);
    --colors-color-palette-dark-a4: var(--colors-jade-dark-a4);
    --colors-color-palette-dark-a5: var(--colors-jade-dark-a5);
    --colors-color-palette-dark-a6: var(--colors-jade-dark-a6);
    --colors-color-palette-dark-a7: var(--colors-jade-dark-a7);
    --colors-color-palette-dark-a8: var(--colors-jade-dark-a8);
    --colors-color-palette-dark-a9: var(--colors-jade-dark-a9);
    --colors-color-palette-dark-a10: var(--colors-jade-dark-a10);
    --colors-color-palette-dark-a11: var(--colors-jade-dark-a11);
    --colors-color-palette-dark-a12: var(--colors-jade-dark-a12);
    --colors-color-palette-1: var(--colors-jade-1);
    --colors-color-palette-2: var(--colors-jade-2);
    --colors-color-palette-3: var(--colors-jade-3);
    --colors-color-palette-4: var(--colors-jade-4);
    --colors-color-palette-5: var(--colors-jade-5);
    --colors-color-palette-6: var(--colors-jade-6);
    --colors-color-palette-7: var(--colors-jade-7);
    --colors-color-palette-8: var(--colors-jade-8);
    --colors-color-palette-9: var(--colors-jade-9);
    --colors-color-palette-10: var(--colors-jade-10);
    --colors-color-palette-11: var(--colors-jade-11);
    --colors-color-palette-12: var(--colors-jade-12);
    --colors-color-palette-a1: var(--colors-jade-a1);
    --colors-color-palette-a2: var(--colors-jade-a2);
    --colors-color-palette-a3: var(--colors-jade-a3);
    --colors-color-palette-a4: var(--colors-jade-a4);
    --colors-color-palette-a5: var(--colors-jade-a5);
    --colors-color-palette-a6: var(--colors-jade-a6);
    --colors-color-palette-a7: var(--colors-jade-a7);
    --colors-color-palette-a8: var(--colors-jade-a8);
    --colors-color-palette-a9: var(--colors-jade-a9);
    --colors-color-palette-a10: var(--colors-jade-a10);
    --colors-color-palette-a11: var(--colors-jade-a11);
    --colors-color-palette-a12: var(--colors-jade-a12);
    --colors-color-palette-default: var(--colors-jade-default);
    --colors-color-palette-emphasized: var(--colors-jade-emphasized);
    --colors-color-palette-fg: var(--colors-jade-fg);
    --colors-color-palette-text: var(--colors-jade-text);
}

  *,::before,::after,::backdrop {
    --blur: /*-*/ /*-*/;
    --brightness: /*-*/ /*-*/;
    --contrast: /*-*/ /*-*/;
    --grayscale: /*-*/ /*-*/;
    --hue-rotate: /*-*/ /*-*/;
    --invert: /*-*/ /*-*/;
    --saturate: /*-*/ /*-*/;
    --sepia: /*-*/ /*-*/;
    --drop-shadow: /*-*/ /*-*/;
    --backdrop-blur: /*-*/ /*-*/;
    --backdrop-brightness: /*-*/ /*-*/;
    --backdrop-contrast: /*-*/ /*-*/;
    --backdrop-grayscale: /*-*/ /*-*/;
    --backdrop-hue-rotate: /*-*/ /*-*/;
    --backdrop-invert: /*-*/ /*-*/;
    --backdrop-opacity: /*-*/ /*-*/;
    --backdrop-saturate: /*-*/ /*-*/;
    --backdrop-sepia: /*-*/ /*-*/;
    --gradient-from-position: /*-*/ /*-*/;
    --gradient-to-position: /*-*/ /*-*/;
    --gradient-via-position: /*-*/ /*-*/;
    --scroll-snap-strictness: proximity;
    --border-spacing-x: 0;
    --border-spacing-y: 0;
    --translate-x: 0;
    --translate-y: 0;
    --rotate: 0;
    --rotate-x: 0;
    --rotate-y: 0;
    --skew-x: 0;
    --skew-y: 0;
    --scale-x: 1;
    --scale-y: 1;
}
}

@layer tokens{
  :where(:root, :host) {
    --animations-backdrop-in: fade-in 250ms var(--easings-emphasized-in);
    --animations-backdrop-out: fade-out 200ms var(--easings-emphasized-out);
    --animations-dialog-in: slide-in 400ms var(--easings-emphasized-in);
    --animations-dialog-out: slide-out 200ms var(--easings-emphasized-out);
    --animations-drawer-in-left: slide-in-left 400ms var(--easings-emphasized-in);
    --animations-drawer-out-left: slide-out-left 200ms var(--easings-emphasized-out);
    --animations-drawer-in-right: slide-in-right 400ms var(--easings-emphasized-in);
    --animations-drawer-out-right: slide-out-right 200ms var(--easings-emphasized-out);
    --animations-skeleton-pulse: skeleton-pulse 2s var(--easings-pulse) infinite;
    --animations-fade-in: fade-in 400ms var(--easings-emphasized-in);
    --animations-collapse-in: collapse-in 250ms var(--easings-emphasized-in);
    --animations-collapse-out: collapse-out 200ms var(--easings-emphasized-out);
    --animations-spin: spin 1s linear infinite;
    --blurs-sm: 4px;
    --blurs-base: 8px;
    --blurs-md: 12px;
    --blurs-lg: 16px;
    --blurs-xl: 24px;
    --blurs-2xl: 40px;
    --blurs-3xl: 64px;
    --borders-none: none;
    --colors-current: currentColor;
    --colors-black: #000000;
    --colors-black-a1: rgba(0, 0, 0, 0.05);
    --colors-black-a2: rgba(0, 0, 0, 0.1);
    --colors-black-a3: rgba(0, 0, 0, 0.15);
    --colors-black-a4: rgba(0, 0, 0, 0.2);
    --colors-black-a5: rgba(0, 0, 0, 0.3);
    --colors-black-a6: rgba(0, 0, 0, 0.4);
    --colors-black-a7: rgba(0, 0, 0, 0.5);
    --colors-black-a8: rgba(0, 0, 0, 0.6);
    --colors-black-a9: rgba(0, 0, 0, 0.7);
    --colors-black-a10: rgba(0, 0, 0, 0.8);
    --colors-black-a11: rgba(0, 0, 0, 0.9);
    --colors-black-a12: rgba(0, 0, 0, 0.95);
    --colors-white: #ffffff;
    --colors-white-a1: rgba(255, 255, 255, 0.05);
    --colors-white-a2: rgba(255, 255, 255, 0.1);
    --colors-white-a3: rgba(255, 255, 255, 0.15);
    --colors-white-a4: rgba(255, 255, 255, 0.2);
    --colors-white-a5: rgba(255, 255, 255, 0.3);
    --colors-white-a6: rgba(255, 255, 255, 0.4);
    --colors-white-a7: rgba(255, 255, 255, 0.5);
    --colors-white-a8: rgba(255, 255, 255, 0.6);
    --colors-white-a9: rgba(255, 255, 255, 0.7);
    --colors-white-a10: rgba(255, 255, 255, 0.8);
    --colors-white-a11: rgba(255, 255, 255, 0.9);
    --colors-white-a12: rgba(255, 255, 255, 0.95);
    --colors-transparent: rgb(0 0 0 / 0);
    --colors-red-light-1: #fffcfc;
    --colors-red-light-2: #fff7f7;
    --colors-red-light-3: #feebec;
    --colors-red-light-4: #ffdbdc;
    --colors-red-light-5: #ffcdce;
    --colors-red-light-6: #fdbdbe;
    --colors-red-light-7: #f4a9aa;
    --colors-red-light-8: #eb8e90;
    --colors-red-light-9: #e5484d;
    --colors-red-light-10: #dc3e42;
    --colors-red-light-11: #ce2c31;
    --colors-red-light-12: #641723;
    --colors-red-light-a1: #ff000003;
    --colors-red-light-a2: #ff000008;
    --colors-red-light-a3: #f3000d14;
    --colors-red-light-a4: #ff000824;
    --colors-red-light-a5: #ff000632;
    --colors-red-light-a6: #f8000442;
    --colors-red-light-a7: #df000356;
    --colors-red-light-a8: #d2000571;
    --colors-red-light-a9: #db0007b7;
    --colors-red-light-a10: #d10005c1;
    --colors-red-light-a11: #c40006d3;
    --colors-red-light-a12: #55000de8;
    --colors-red-dark-1: #191111;
    --colors-red-dark-2: #201314;
    --colors-red-dark-3: #3b1219;
    --colors-red-dark-4: #500f1c;
    --colors-red-dark-5: #611623;
    --colors-red-dark-6: #72232d;
    --colors-red-dark-7: #8c333a;
    --colors-red-dark-8: #b54548;
    --colors-red-dark-9: #e5484d;
    --colors-red-dark-10: #ec5d5e;
    --colors-red-dark-11: #ff9592;
    --colors-red-dark-12: #ffd1d9;
    --colors-red-dark-a1: #f4121209;
    --colors-red-dark-a2: #f22f3e11;
    --colors-red-dark-a3: #ff173f2d;
    --colors-red-dark-a4: #fe0a3b44;
    --colors-red-dark-a5: #ff204756;
    --colors-red-dark-a6: #ff3e5668;
    --colors-red-dark-a7: #ff536184;
    --colors-red-dark-a8: #ff5d61b0;
    --colors-red-dark-a9: #fe4e54e4;
    --colors-red-dark-a10: #ff6465eb;
    --colors-red-dark-a11: #ff9592;
    --colors-red-dark-a12: #ffd1d9;
    --colors-gray-light-1: #fbfdfc;
    --colors-gray-light-2: #f7f9f8;
    --colors-gray-light-3: #eef1f0;
    --colors-gray-light-4: #e6e9e8;
    --colors-gray-light-5: #dfe2e0;
    --colors-gray-light-6: #d7dad9;
    --colors-gray-light-7: #cbcfcd;
    --colors-gray-light-8: #b8bcba;
    --colors-gray-light-9: #868e8b;
    --colors-gray-light-10: #7c8481;
    --colors-gray-light-11: #5f6563;
    --colors-gray-light-12: #1a211e;
    --colors-gray-light-a1: #00804004;
    --colors-gray-light-a2: #00402008;
    --colors-gray-light-a3: #002d1e11;
    --colors-gray-light-a4: #001f1519;
    --colors-gray-light-a5: #00180820;
    --colors-gray-light-a6: #00140d28;
    --colors-gray-light-a7: #00140a34;
    --colors-gray-light-a8: #000f0847;
    --colors-gray-light-a9: #00110b79;
    --colors-gray-light-a10: #00100a83;
    --colors-gray-light-a11: #000a07a0;
    --colors-gray-light-a12: #000805e5;
    --colors-gray-dark-1: #101211;
    --colors-gray-dark-2: #171918;
    --colors-gray-dark-3: #202221;
    --colors-gray-dark-4: #272a29;
    --colors-gray-dark-5: #2e3130;
    --colors-gray-dark-6: #373b39;
    --colors-gray-dark-7: #444947;
    --colors-gray-dark-8: #5b625f;
    --colors-gray-dark-9: #63706b;
    --colors-gray-dark-10: #717d79;
    --colors-gray-dark-11: #adb5b2;
    --colors-gray-dark-12: #eceeed;
    --colors-gray-dark-a1: #00000000;
    --colors-gray-dark-a2: #f0f2f108;
    --colors-gray-dark-a3: #f3f5f412;
    --colors-gray-dark-a4: #f2fefd1a;
    --colors-gray-dark-a5: #f1fbfa22;
    --colors-gray-dark-a6: #edfbf42d;
    --colors-gray-dark-a7: #edfcf73c;
    --colors-gray-dark-a8: #ebfdf657;
    --colors-gray-dark-a9: #dffdf266;
    --colors-gray-dark-a10: #e5fdf674;
    --colors-gray-dark-a11: #f4fefbb0;
    --colors-gray-dark-a12: #fdfffeed;
    --colors-jade-light-1: #fbfefd;
    --colors-jade-light-2: #f4fbf7;
    --colors-jade-light-3: #e6f7ed;
    --colors-jade-light-4: #d6f1e3;
    --colors-jade-light-5: #c3e9d7;
    --colors-jade-light-6: #acdec8;
    --colors-jade-light-7: #8bceb6;
    --colors-jade-light-8: #56ba9f;
    --colors-jade-light-9: #29a383;
    --colors-jade-light-10: #26997b;
    --colors-jade-light-11: #208368;
    --colors-jade-light-12: #1d3b31;
    --colors-jade-light-a1: #00c08004;
    --colors-jade-light-a2: #00a3460b;
    --colors-jade-light-a3: #00ae4819;
    --colors-jade-light-a4: #00a85129;
    --colors-jade-light-a5: #00a2553c;
    --colors-jade-light-a6: #009a5753;
    --colors-jade-light-a7: #00945f74;
    --colors-jade-light-a8: #00976ea9;
    --colors-jade-light-a9: #00916bd6;
    --colors-jade-light-a10: #008764d9;
    --colors-jade-light-a11: #007152df;
    --colors-jade-light-a12: #002217e2;
    --colors-jade-dark-1: #0d1512;
    --colors-jade-dark-2: #121c18;
    --colors-jade-dark-3: #0f2e22;
    --colors-jade-dark-4: #0b3b2c;
    --colors-jade-dark-5: #114837;
    --colors-jade-dark-6: #1b5745;
    --colors-jade-dark-7: #246854;
    --colors-jade-dark-8: #2a7e68;
    --colors-jade-dark-9: #29a383;
    --colors-jade-dark-10: #27b08b;
    --colors-jade-dark-11: #1fd8a4;
    --colors-jade-dark-12: #adf0d4;
    --colors-jade-dark-a1: #00de4505;
    --colors-jade-dark-a2: #27fba60c;
    --colors-jade-dark-a3: #02f99920;
    --colors-jade-dark-a4: #00ffaa2d;
    --colors-jade-dark-a5: #11ffb63b;
    --colors-jade-dark-a6: #34ffc24b;
    --colors-jade-dark-a7: #45fdc75e;
    --colors-jade-dark-a8: #48ffcf75;
    --colors-jade-dark-a9: #38feca9d;
    --colors-jade-dark-a10: #31fec7ab;
    --colors-jade-dark-a11: #21fec0d6;
    --colors-jade-dark-a12: #b8ffe1ef;
    --durations-fastest: 50ms;
    --durations-faster: 100ms;
    --durations-fast: 150ms;
    --durations-normal: 200ms;
    --durations-slow: 300ms;
    --durations-slower: 400ms;
    --durations-slowest: 500ms;
    --easings-pulse: cubic-bezier(0.4, 0.0, 0.6, 1.0);
    --easings-default: cubic-bezier(0.2, 0.0, 0, 1.0);
    --easings-emphasized-in: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --easings-emphasized-out: cubic-bezier(0.3, 0.0, 0.8, 0.15);
    --fonts-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";
    --fonts-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-sizes-2xs: 0.5rem;
    --font-sizes-xs: 0.75rem;
    --font-sizes-sm: 0.875rem;
    --font-sizes-md: 1rem;
    --font-sizes-lg: 1.125rem;
    --font-sizes-xl: 1.25rem;
    --font-sizes-2xl: 1.5rem;
    --font-sizes-3xl: 1.875rem;
    --font-sizes-4xl: 2.25rem;
    --font-sizes-5xl: 3rem;
    --font-sizes-6xl: 3.75rem;
    --font-sizes-7xl: 4.5rem;
    --font-sizes-8xl: 6rem;
    --font-sizes-9xl: 8rem;
    --font-weights-thin: 100;
    --font-weights-extralight: 200;
    --font-weights-light: 300;
    --font-weights-normal: 400;
    --font-weights-medium: 500;
    --font-weights-semibold: 600;
    --font-weights-bold: 700;
    --font-weights-extrabold: 800;
    --font-weights-black: 900;
    --letter-spacings-tighter: -0.05em;
    --letter-spacings-tight: -0.025em;
    --letter-spacings-normal: 0em;
    --letter-spacings-wide: 0.025em;
    --letter-spacings-wider: 0.05em;
    --letter-spacings-widest: 0.1em;
    --line-heights-none: 1;
    --line-heights-tight: 1.25;
    --line-heights-normal: 1.5;
    --line-heights-relaxed: 1.75;
    --line-heights-loose: 2;
    --radii-none: 0;
    --radii-2xs: 0.0625rem;
    --radii-xs: 0.125rem;
    --radii-sm: 0.25rem;
    --radii-md: 0.375rem;
    --radii-lg: 0.5rem;
    --radii-xl: 0.75rem;
    --radii-2xl: 1rem;
    --radii-3xl: 1.5rem;
    --radii-full: 9999px;
    --sizes-0: 0rem;
    --sizes-1: 0.25rem;
    --sizes-2: 0.5rem;
    --sizes-3: 0.75rem;
    --sizes-4: 1rem;
    --sizes-5: 1.25rem;
    --sizes-6: 1.5rem;
    --sizes-7: 1.75rem;
    --sizes-8: 2rem;
    --sizes-9: 2.25rem;
    --sizes-10: 2.5rem;
    --sizes-11: 2.75rem;
    --sizes-12: 3rem;
    --sizes-14: 3.5rem;
    --sizes-16: 4rem;
    --sizes-20: 5rem;
    --sizes-24: 6rem;
    --sizes-28: 7rem;
    --sizes-32: 8rem;
    --sizes-36: 9rem;
    --sizes-40: 10rem;
    --sizes-44: 11rem;
    --sizes-48: 12rem;
    --sizes-52: 13rem;
    --sizes-56: 14rem;
    --sizes-60: 15rem;
    --sizes-64: 16rem;
    --sizes-72: 18rem;
    --sizes-80: 20rem;
    --sizes-96: 24rem;
    --sizes-0\.5: 0.125rem;
    --sizes-1\.5: 0.375rem;
    --sizes-2\.5: 0.625rem;
    --sizes-3\.5: 0.875rem;
    --sizes-4\.5: 1.125rem;
    --sizes-2xs: 16rem;
    --sizes-xs: 20rem;
    --sizes-sm: 24rem;
    --sizes-md: 28rem;
    --sizes-lg: 32rem;
    --sizes-xl: 36rem;
    --sizes-2xl: 42rem;
    --sizes-3xl: 48rem;
    --sizes-4xl: 56rem;
    --sizes-5xl: 64rem;
    --sizes-6xl: 72rem;
    --sizes-7xl: 80rem;
    --sizes-8xl: 90rem;
    --sizes-full: 100%;
    --sizes-min: min-content;
    --sizes-max: max-content;
    --sizes-fit: fit-content;
    --sizes-breakpoint-sm: 640px;
    --sizes-breakpoint-md: 768px;
    --sizes-breakpoint-lg: 1024px;
    --sizes-breakpoint-xl: 1280px;
    --sizes-breakpoint-2xl: 1536px;
    --spacing-0: 0rem;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
    --spacing-14: 3.5rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-28: 7rem;
    --spacing-32: 8rem;
    --spacing-36: 9rem;
    --spacing-40: 10rem;
    --spacing-44: 11rem;
    --spacing-48: 12rem;
    --spacing-52: 13rem;
    --spacing-56: 14rem;
    --spacing-60: 15rem;
    --spacing-64: 16rem;
    --spacing-72: 18rem;
    --spacing-80: 20rem;
    --spacing-96: 24rem;
    --spacing-0\.5: 0.125rem;
    --spacing-1\.5: 0.375rem;
    --spacing-2\.5: 0.625rem;
    --spacing-3\.5: 0.875rem;
    --spacing-4\.5: 1.125rem;
    --z-index-hide: -1;
    --z-index-base: 0;
    --z-index-docked: 10;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1100;
    --z-index-banner: 1200;
    --z-index-overlay: 1300;
    --z-index-modal: 1400;
    --z-index-popover: 1500;
    --z-index-skip-link: 1600;
    --z-index-toast: 1700;
    --z-index-tooltip: 1800;
    --breakpoints-sm: 640px;
    --breakpoints-md: 768px;
    --breakpoints-lg: 1024px;
    --breakpoints-xl: 1280px;
    --breakpoints-2xl: 1536px;
    --radii-l1: var(--radii-sm);
    --radii-l2: var(--radii-md);
    --radii-l3: var(--radii-lg);
}

  :where(:root, .light) {
    --colors-bg-canvas: var(--colors-gray-1);
    --colors-bg-default: white;
    --colors-bg-subtle: var(--colors-gray-2);
    --colors-bg-muted: var(--colors-gray-3);
    --colors-bg-emphasized: var(--colors-gray-4);
    --colors-bg-disabled: var(--colors-gray-5);
    --colors-fg-default: var(--colors-gray-12);
    --colors-fg-muted: var(--colors-gray-11);
    --colors-fg-subtle: var(--colors-gray-10);
    --colors-fg-disabled: var(--colors-gray-9);
    --colors-fg-error: var(--colors-red-9);
    --colors-border-default: var(--colors-gray-7);
    --colors-border-muted: var(--colors-gray-6);
    --colors-border-subtle: var(--colors-gray-4);
    --colors-border-disabled: var(--colors-gray-5);
    --colors-border-outline: var(--colors-gray-a9);
    --colors-border-error: var(--colors-red-9);
    --colors-red-1: var(--colors-red-light-1);
    --colors-red-2: var(--colors-red-light-2);
    --colors-red-3: var(--colors-red-light-3);
    --colors-red-4: var(--colors-red-light-4);
    --colors-red-5: var(--colors-red-light-5);
    --colors-red-6: var(--colors-red-light-6);
    --colors-red-7: var(--colors-red-light-7);
    --colors-red-8: var(--colors-red-light-8);
    --colors-red-9: var(--colors-red-light-9);
    --colors-red-10: var(--colors-red-light-10);
    --colors-red-11: var(--colors-red-light-11);
    --colors-red-12: var(--colors-red-light-12);
    --colors-red-a1: var(--colors-red-light-a1);
    --colors-red-a2: var(--colors-red-light-a2);
    --colors-red-a3: var(--colors-red-light-a3);
    --colors-red-a4: var(--colors-red-light-a4);
    --colors-red-a5: var(--colors-red-light-a5);
    --colors-red-a6: var(--colors-red-light-a6);
    --colors-red-a7: var(--colors-red-light-a7);
    --colors-red-a8: var(--colors-red-light-a8);
    --colors-red-a9: var(--colors-red-light-a9);
    --colors-red-a10: var(--colors-red-light-a10);
    --colors-red-a11: var(--colors-red-light-a11);
    --colors-red-a12: var(--colors-red-light-a12);
    --colors-red-default: var(--colors-red-light-9);
    --colors-red-emphasized: var(--colors-red-light-10);
    --colors-red-fg: white;
    --colors-red-text: var(--colors-red-light-a11);
    --colors-gray-1: var(--colors-gray-light-1);
    --colors-gray-2: var(--colors-gray-light-2);
    --colors-gray-3: var(--colors-gray-light-3);
    --colors-gray-4: var(--colors-gray-light-4);
    --colors-gray-5: var(--colors-gray-light-5);
    --colors-gray-6: var(--colors-gray-light-6);
    --colors-gray-7: var(--colors-gray-light-7);
    --colors-gray-8: var(--colors-gray-light-8);
    --colors-gray-9: var(--colors-gray-light-9);
    --colors-gray-10: var(--colors-gray-light-10);
    --colors-gray-11: var(--colors-gray-light-11);
    --colors-gray-12: var(--colors-gray-light-12);
    --colors-gray-a1: var(--colors-gray-light-a1);
    --colors-gray-a2: var(--colors-gray-light-a2);
    --colors-gray-a3: var(--colors-gray-light-a3);
    --colors-gray-a4: var(--colors-gray-light-a4);
    --colors-gray-a5: var(--colors-gray-light-a5);
    --colors-gray-a6: var(--colors-gray-light-a6);
    --colors-gray-a7: var(--colors-gray-light-a7);
    --colors-gray-a8: var(--colors-gray-light-a8);
    --colors-gray-a9: var(--colors-gray-light-a9);
    --colors-gray-a10: var(--colors-gray-light-a10);
    --colors-gray-a11: var(--colors-gray-light-a11);
    --colors-gray-a12: var(--colors-gray-light-a12);
    --colors-gray-default: var(--colors-gray-light-9);
    --colors-gray-emphasized: var(--colors-gray-light-10);
    --colors-gray-fg: white;
    --colors-gray-text: var(--colors-gray-light-12);
    --colors-jade-1: var(--colors-jade-light-1);
    --colors-jade-2: var(--colors-jade-light-2);
    --colors-jade-3: var(--colors-jade-light-3);
    --colors-jade-4: var(--colors-jade-light-4);
    --colors-jade-5: var(--colors-jade-light-5);
    --colors-jade-6: var(--colors-jade-light-6);
    --colors-jade-7: var(--colors-jade-light-7);
    --colors-jade-8: var(--colors-jade-light-8);
    --colors-jade-9: var(--colors-jade-light-9);
    --colors-jade-10: var(--colors-jade-light-10);
    --colors-jade-11: var(--colors-jade-light-11);
    --colors-jade-12: var(--colors-jade-light-12);
    --colors-jade-a1: var(--colors-jade-light-a1);
    --colors-jade-a2: var(--colors-jade-light-a2);
    --colors-jade-a3: var(--colors-jade-light-a3);
    --colors-jade-a4: var(--colors-jade-light-a4);
    --colors-jade-a5: var(--colors-jade-light-a5);
    --colors-jade-a6: var(--colors-jade-light-a6);
    --colors-jade-a7: var(--colors-jade-light-a7);
    --colors-jade-a8: var(--colors-jade-light-a8);
    --colors-jade-a9: var(--colors-jade-light-a9);
    --colors-jade-a10: var(--colors-jade-light-a10);
    --colors-jade-a11: var(--colors-jade-light-a11);
    --colors-jade-a12: var(--colors-jade-light-a12);
    --colors-jade-default: var(--colors-jade-light-9);
    --colors-jade-emphasized: var(--colors-jade-light-10);
    --colors-jade-fg: white;
    --colors-jade-text: var(--colors-jade-light-a11);
    --shadows-xs: 0px 1px 2px var(--colors-gray-a5), 0px 0px 1px var(--colors-gray-a7);
    --shadows-sm: 0px 2px 4px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
    --shadows-md: 0px 4px 8px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
    --shadows-lg: 0px 8px 16px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
    --shadows-xl: 0px 16px 24px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7);
    --shadows-2xl: 0px 24px 40px var(--colors-gray-a3), 0px 0px 1px var(--colors-gray-a7)
}

  .dark {
    --colors-bg-canvas: var(--colors-gray-1);
    --colors-bg-default: var(--colors-gray-2);
    --colors-bg-subtle: var(--colors-gray-3);
    --colors-bg-muted: var(--colors-gray-4);
    --colors-bg-emphasized: var(--colors-gray-5);
    --colors-bg-disabled: var(--colors-gray-6);
    --colors-fg-default: var(--colors-gray-12);
    --colors-fg-muted: var(--colors-gray-11);
    --colors-fg-subtle: var(--colors-gray-10);
    --colors-fg-disabled: var(--colors-gray-9);
    --colors-fg-error: var(--colors-red-9);
    --colors-border-default: var(--colors-gray-7);
    --colors-border-muted: var(--colors-gray-6);
    --colors-border-subtle: var(--colors-gray-4);
    --colors-border-disabled: var(--colors-gray-5);
    --colors-border-outline: var(--colors-gray-a9);
    --colors-border-error: var(--colors-red-9);
    --colors-red-1: var(--colors-red-dark-1);
    --colors-red-2: var(--colors-red-dark-2);
    --colors-red-3: var(--colors-red-dark-3);
    --colors-red-4: var(--colors-red-dark-4);
    --colors-red-5: var(--colors-red-dark-5);
    --colors-red-6: var(--colors-red-dark-6);
    --colors-red-7: var(--colors-red-dark-7);
    --colors-red-8: var(--colors-red-dark-8);
    --colors-red-9: var(--colors-red-dark-9);
    --colors-red-10: var(--colors-red-dark-10);
    --colors-red-11: var(--colors-red-dark-11);
    --colors-red-12: var(--colors-red-dark-12);
    --colors-red-a1: var(--colors-red-dark-a1);
    --colors-red-a2: var(--colors-red-dark-a2);
    --colors-red-a3: var(--colors-red-dark-a3);
    --colors-red-a4: var(--colors-red-dark-a4);
    --colors-red-a5: var(--colors-red-dark-a5);
    --colors-red-a6: var(--colors-red-dark-a6);
    --colors-red-a7: var(--colors-red-dark-a7);
    --colors-red-a8: var(--colors-red-dark-a8);
    --colors-red-a9: var(--colors-red-dark-a9);
    --colors-red-a10: var(--colors-red-dark-a10);
    --colors-red-a11: var(--colors-red-dark-a11);
    --colors-red-a12: var(--colors-red-dark-a12);
    --colors-red-default: var(--colors-red-dark-9);
    --colors-red-emphasized: var(--colors-red-dark-10);
    --colors-red-fg: white;
    --colors-red-text: var(--colors-red-dark-a11);
    --colors-gray-1: var(--colors-gray-dark-1);
    --colors-gray-2: var(--colors-gray-dark-2);
    --colors-gray-3: var(--colors-gray-dark-3);
    --colors-gray-4: var(--colors-gray-dark-4);
    --colors-gray-5: var(--colors-gray-dark-5);
    --colors-gray-6: var(--colors-gray-dark-6);
    --colors-gray-7: var(--colors-gray-dark-7);
    --colors-gray-8: var(--colors-gray-dark-8);
    --colors-gray-9: var(--colors-gray-dark-9);
    --colors-gray-10: var(--colors-gray-dark-10);
    --colors-gray-11: var(--colors-gray-dark-11);
    --colors-gray-12: var(--colors-gray-dark-12);
    --colors-gray-a1: var(--colors-gray-dark-a1);
    --colors-gray-a2: var(--colors-gray-dark-a2);
    --colors-gray-a3: var(--colors-gray-dark-a3);
    --colors-gray-a4: var(--colors-gray-dark-a4);
    --colors-gray-a5: var(--colors-gray-dark-a5);
    --colors-gray-a6: var(--colors-gray-dark-a6);
    --colors-gray-a7: var(--colors-gray-dark-a7);
    --colors-gray-a8: var(--colors-gray-dark-a8);
    --colors-gray-a9: var(--colors-gray-dark-a9);
    --colors-gray-a10: var(--colors-gray-dark-a10);
    --colors-gray-a11: var(--colors-gray-dark-a11);
    --colors-gray-a12: var(--colors-gray-dark-a12);
    --colors-gray-default: var(--colors-gray-dark-9);
    --colors-gray-emphasized: var(--colors-gray-dark-10);
    --colors-gray-fg: white;
    --colors-gray-text: var(--colors-gray-dark-12);
    --colors-jade-1: var(--colors-jade-dark-1);
    --colors-jade-2: var(--colors-jade-dark-2);
    --colors-jade-3: var(--colors-jade-dark-3);
    --colors-jade-4: var(--colors-jade-dark-4);
    --colors-jade-5: var(--colors-jade-dark-5);
    --colors-jade-6: var(--colors-jade-dark-6);
    --colors-jade-7: var(--colors-jade-dark-7);
    --colors-jade-8: var(--colors-jade-dark-8);
    --colors-jade-9: var(--colors-jade-dark-9);
    --colors-jade-10: var(--colors-jade-dark-10);
    --colors-jade-11: var(--colors-jade-dark-11);
    --colors-jade-12: var(--colors-jade-dark-12);
    --colors-jade-a1: var(--colors-jade-dark-a1);
    --colors-jade-a2: var(--colors-jade-dark-a2);
    --colors-jade-a3: var(--colors-jade-dark-a3);
    --colors-jade-a4: var(--colors-jade-dark-a4);
    --colors-jade-a5: var(--colors-jade-dark-a5);
    --colors-jade-a6: var(--colors-jade-dark-a6);
    --colors-jade-a7: var(--colors-jade-dark-a7);
    --colors-jade-a8: var(--colors-jade-dark-a8);
    --colors-jade-a9: var(--colors-jade-dark-a9);
    --colors-jade-a10: var(--colors-jade-dark-a10);
    --colors-jade-a11: var(--colors-jade-dark-a11);
    --colors-jade-a12: var(--colors-jade-dark-a12);
    --colors-jade-default: var(--colors-jade-dark-9);
    --colors-jade-emphasized: var(--colors-jade-dark-10);
    --colors-jade-fg: white;
    --colors-jade-text: var(--colors-jade-dark-a11);
    --shadows-xs: 0px 1px 1px var(--colors-black-a12), 0px 0px 1px inset var(--colors-gray-a7);
    --shadows-sm: 0px 2px 4px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
    --shadows-md: 0px 4px 8px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
    --shadows-lg: 0px 8px 16px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
    --shadows-xl: 0px 16px 24px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7);
    --shadows-2xl: 0px 24px 40px var(--colors-black-a10), 0px 0px 1px inset var(--colors-gray-a7)
}

  @keyframes fade-in {
    from {
      opacity: 0;
}

    to {
      opacity: 1;
}
}

  @keyframes fade-out {
    from {
      opacity: 1;
}

    to {
      opacity: 0;
}
}

  @keyframes slide-in {
    0% {
      opacity: 0;
      transform: translateY(64px);
}

    100% {
      opacity: 1;
      transform: translateY(0);
}
}

  @keyframes slide-out {
    0% {
      opacity: 1;
      transform: translateY(0);
}

    100% {
      opacity: 0;
      transform: translateY(64px);
}
}

  @keyframes slide-in-left {
    0% {
      transform: translateX(-100%);
}

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

  @keyframes slide-out-left {
    0% {
      transform: translateX(0%);
}

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

  @keyframes slide-in-right {
    0% {
      transform: translateX(100%);
}

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

  @keyframes slide-out-right {
    0% {
      transform: translateX(0%);
}

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

  @keyframes collapse-in {
    0% {
      height: var(--sizes-0);
}

    100% {
      height: var(--height);
}
}

  @keyframes collapse-out {
    0% {
      height: var(--height);
}

    100% {
      height: var(--sizes-0);
}
}

  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-4px);
}

    100% {
      opacity: 1;
      transform: translateY(0);
}
}

  @keyframes fadeOut {
    0% {
      opacity: 1;
      transform: translateY(0);
}

    100% {
      opacity: 0;
      transform: translateY(-4px);
}
}

  @keyframes skeleton-pulse {
    50% {
      opacity: 0.5;
}
}

  @keyframes spin {
    0% {
      transform: rotate(0deg);
}

    100% {
      transform: rotate(360deg);
}
}
}

@layer recipes.slots{
  @layer _base{

    .menu__content {
      background: var(--colors-bg-default);
      border-radius: var(--radii-l2);
      outline: var(--borders-none);
      box-shadow: var(--shadows-lg);
      display: flex;
      flex-direction: column;
      z-index: var(--z-index-dropdown);
      width: calc(100% + 2rem);
}

    .menu__content:is([open], [data-open], [data-state="open"], :popover-open) {
      animation: fadeIn 0.25s ease-out;
}

    .menu__content:is([closed], [data-closed], [data-state="closed"]) {
      animation: fadeOut 0.2s ease-out;
}

    .menu__content:is([hidden]) {
      display: none;
}

    .menu__item {
      border-radius: var(--radii-l1);
      align-items: center;
      cursor: pointer;
      display: flex;
      font-weight: var(--font-weights-medium);
      font-size: var(--font-sizes-sm);
      line-height: 1.25rem;
      --transition-duration: var(--durations-fast);
      transition-duration: var(--durations-fast);
      --transition-prop: background, color;
      transition-property: background, color;
      --transition-easing: var(--easings-default);
      transition-timing-function: var(--easings-default);
}

    .menu__item[data-highlighted] {
      background: var(--colors-bg-muted);
}

    .menu__item :where(svg) {
      color: var(--colors-fg-muted);
}

    .menu__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      color: var(--colors-fg-disabled);
      cursor: not-allowed;
}

    .menu__itemGroup {
      display: flex;
      flex-direction: column;
}

    .menu__itemGroupLabel {
      font-weight: var(--font-weights-semibold);
      font-size: var(--font-sizes-sm);
      line-height: 1.25rem;
}

    .menu__positioner {
      z-index: var(--z-index-dropdown);
}

    .menu__triggerItem {
      border-radius: var(--radii-l1);
      align-items: center;
      cursor: pointer;
      display: flex;
      font-weight: var(--font-weights-medium);
      font-size: var(--font-sizes-sm);
      line-height: 1.25rem;
      --transition-duration: var(--durations-fast);
      transition-duration: var(--durations-fast);
      --transition-prop: background, color;
      transition-property: background, color;
      --transition-easing: var(--easings-default);
      transition-timing-function: var(--easings-default);
}

    .menu__triggerItem[data-highlighted] {
      background: var(--colors-bg-muted);
}

    .menu__triggerItem :where(svg) {
      color: var(--colors-fg-muted);
}

    .menu__triggerItem:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      color: var(--colors-fg-disabled);
      cursor: not-allowed;
}

    @media (hover: hover) and (pointer: fine) {
      .menu__item:is(:hover, [data-hover]) {
        background: var(--colors-bg-muted);
}

      .menu__item:is(:hover, [data-hover]) :where(svg) {
        color: var(--colors-fg-default);
}

      .menu__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
        background: none;
        color: var(--colors-fg-disabled);
}
      .menu__triggerItem:is(:hover, [data-hover]) {
        background: var(--colors-bg-muted);
}

      .menu__triggerItem:is(:hover, [data-hover]) :where(svg) {
        color: var(--colors-fg-default);
}

      .menu__triggerItem:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
        background: none;
        color: var(--colors-fg-disabled);
}
}
}
}

@layer utilities{

  .bg_bg\.canvas {
    background: var(--colors-bg-canvas);
}

  .bg_bg\.subtle {
    background: var(--colors-bg-subtle);
}

  .bd_1px_solid {
    border: 1px solid;
}

  .bg_transparent {
    background: var(--colors-transparent);
}

  .bd_none {
    border: var(--borders-none);
}

  .bg_red\.9 {
    background: var(--colors-red-9);
}

  .bg_colorPalette\.9 {
    background: var(--colors-color-palette-9);
}

  .bg_white\/10 {
    --mix-background: color-mix(in srgb, var(--colors-white) 10%, transparent);
    background: var(--mix-background, var(--colors-white));
}

  .p_3 {
    padding: var(--spacing-3);
}

  .bg_bg\.muted {
    background: var(--colors-bg-muted);
}

  .anim_pulse_1\.5s_infinite {
    animation: pulse 1.5s infinite;
}

  .anim_pulse_1s_infinite {
    animation: pulse 1s infinite;
}

  .p_0 {
    padding: var(--spacing-0);
}

  .bg_red\.a3 {
    background: var(--colors-red-a3);
}

  .p_1 {
    padding: var(--spacing-1);
}

  .inset_0 {
    inset: var(--spacing-0);
}

  .bg_black\/50 {
    --mix-background: color-mix(in srgb, var(--colors-black) 50%, transparent);
    background: var(--mix-background, var(--colors-black));
}

  .bg_gray\.a3 {
    background: var(--colors-gray-a3);
}

  .p_4 {
    padding: var(--spacing-4);
}

  .bg_black\/40 {
    --mix-background: color-mix(in srgb, var(--colors-black) 40%, transparent);
    background: var(--mix-background, var(--colors-black));
}

  .bg_bg\.default {
    background: var(--colors-bg-default);
}

  .p_5 {
    padding: var(--spacing-5);
}

  .bg_colorPalette\.a3 {
    background: var(--colors-color-palette-a3);
}

  .py_3 {
    padding-block: var(--spacing-3);
}

  .px_4 {
    padding-inline: var(--spacing-4);
}

  .mx_auto {
    margin-inline: auto;
}

  .gap_2 {
    gap: var(--spacing-2);
}

  .bd-c_border\.subtle {
    border-color: var(--colors-border-subtle);
}

  .bdr_2xl {
    border-radius: var(--radii-2xl);
}

  .trs_border-color_0\.15s\,_box-shadow_0\.15s {
    transition: border-color 0.15s, box-shadow 0.15s;
}

  .flex_1 {
    flex: 1 1 0%;
}

  .ring_none {
    outline: var(--borders-none);
}

  .py_0\.5 {
    padding-block: var(--spacing-0\.5);
}

  .bdr_full {
    border-radius: var(--radii-full);
}

  .trs_opacity_0\.15s {
    transition: opacity 0.15s;
}

  .flex_0_0_auto {
    flex: 0 0 auto;
}

  .py_1 {
    padding-block: var(--spacing-1);
}

  .px_2 {
    padding-inline: var(--spacing-2);
}

  .bdr_lg {
    border-radius: var(--radii-lg);
}

  .gap_1 {
    gap: var(--spacing-1);
}

  .px_1\.5 {
    padding-inline: var(--spacing-1\.5);
}

  .trs_all_0\.15s {
    transition: all 0.15s;
}

  .py_2\.5 {
    padding-block: var(--spacing-2\.5);
}

  .px_0 {
    padding-inline: var(--spacing-0);
}

  .bdr_none {
    border-radius: var(--radii-none);
}

  .gap_1\.5 {
    gap: var(--spacing-1\.5);
}

  .bdr_xl {
    border-radius: var(--radii-xl);
}

  .py_2 {
    padding-block: var(--spacing-2);
}

  .px_3 {
    padding-inline: var(--spacing-3);
}

  .bdr_0 {
    border-radius: 0;
}

  .bd-c_border\.default {
    border-color: var(--colors-border-default);
}

  .gap_0\.5 {
    gap: var(--spacing-0\.5);
}

  .gap_3 {
    gap: var(--spacing-3);
}

  .py_6 {
    padding-block: var(--spacing-6);
}

  .gap_5 {
    gap: var(--spacing-5);
}

  .py_1\.5 {
    padding-block: var(--spacing-1\.5);
}

  .ov_hidden {
    overflow: hidden;
}

  .mx_3 {
    margin-inline: var(--spacing-3);
}

  .my_2 {
    margin-block: var(--spacing-2);
}

  .bdr_md {
    border-radius: var(--radii-md);
}

  .trs_transform_0\.2s_ease {
    transition: transform 0.2s ease;
}

  .trs_color_0\.15s {
    transition: color 0.15s;
}

  .py_12 {
    padding-block: var(--spacing-12);
}

  .trs_background_0\.15s {
    transition: background 0.15s;
}

  .gap_4 {
    gap: var(--spacing-4);
}

  .trs_background_0\.1s {
    transition: background 0.1s;
}

  .trs_transform_0\.15s {
    transition: transform 0.15s;
}

  .my_1 {
    margin-block: var(--spacing-1);
}

  .bd-t_1px_solid {
    border-top: 1px solid;
}

  .px_2\.5 {
    padding-inline: var(--spacing-2\.5);
}

  .trs_all_0\.15s_ease {
    transition: all 0.15s ease;
}

  .d_flex {
    display: flex;
}

  .c_fg\.default {
    color: var(--colors-fg-default);
}

  .flex-sh_0 {
    flex-shrink: 0;
}

  .ai_flex-end {
    align-items: flex-end;
}

  .bx-sh_0_2px_8px_0_rgba\(0\,0\,0\,0\.06\) {
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
}

  .resize_none {
    resize: none;
}

  .fs_sm {
    font-size: var(--font-sizes-sm);
}

  .lh_1\.5 {
    line-height: 1.5;
}

  .ff_inherit {
    font-family: inherit;
}

  .as_center {
    align-self: center;
}

  .ai_center {
    align-items: center;
}

  .jc_center {
    justify-content: center;
}

  .c_white {
    color: var(--colors-white);
}

  .cursor_pointer {
    cursor: pointer;
}

  .fill_currentColor {
    fill: currentColor;
}

  .lh_1\.75 {
    line-height: 1.75;
}

  .wb_break-word {
    word-break: break-word;
}

  .pos_absolute {
    position: absolute;
}

  .c_fg\.subtle {
    color: var(--colors-fg-subtle);
}

  .fs_xs {
    font-size: var(--font-sizes-xs);
}

  .op_0 {
    opacity: 0;
}

  .jc_flex-end {
    justify-content: flex-end;
}

  .jc_flex-start {
    justify-content: flex-start;
}

  .c_inherit {
    color: inherit;
}

  .lh_1\.6 {
    line-height: 1.6;
}

  .white-space_pre-wrap {
    white-space: pre-wrap;
}

  .c_fg\.muted {
    color: var(--colors-fg-muted);
}

  .cursor_default {
    cursor: default;
}

  .fw_medium {
    font-weight: var(--font-weights-medium);
}

  .fs_2xs {
    font-size: var(--font-sizes-2xs);
}

  .c_colorPalette\.11 {
    color: var(--colors-color-palette-11);
}

  .lh_1\.4 {
    line-height: 1.4;
}

  .flex-d_column {
    flex-direction: column;
}

  .d_inline-block {
    display: inline-block;
}

  .vis_hidden {
    visibility: hidden;
}

  .vis_visible {
    visibility: visible;
}

  .c_colorPalette\.9 {
    color: var(--colors-color-palette-9);
}

  .fs_xl {
    font-size: var(--font-sizes-xl);
}

  .fw_bold {
    font-weight: var(--font-weights-bold);
}

  .c_red\.11 {
    color: var(--colors-red-11);
}

  .jc_space-between {
    justify-content: space-between;
}

  .pos_fixed {
    position: fixed;
}

  .z_40 {
    z-index: 40;
}

  .d_block {
    display: block;
}

  .bkdp_blur\(4px\) {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

  .trf_translateX\(0\) {
    transform: translateX(0);
}

  .trf_translateX\(-100\%\) {
    transform: translateX(-100%);
}

  .z_50 {
    z-index: 50;
}

  .fs_md {
    font-size: var(--font-sizes-md);
}

  .ls_-0\.02em {
    letter-spacing: -0.02em;
}

  .ta_center {
    text-align: center;
}

  .fw_semibold {
    font-weight: var(--font-weights-semibold);
}

  .us_none {
    -webkit-user-select: none;
    user-select: none;
}

  .ls_0\.02em {
    letter-spacing: 0.02em;
}

  .fw_normal {
    font-weight: var(--font-weights-normal);
}

  .tov_ellipsis {
    text-overflow: ellipsis;
}

  .white-space_nowrap {
    white-space: nowrap;
}

  .z_1000 {
    z-index: 1000;
}

  .bkdp_blur\(2px\) {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

  .pos_relative {
    position: relative;
}

  .bx-sh_0_8px_32px_rgba\(0\,0\,0\,0\.2\) {
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

  .ai_flex-start {
    align-items: flex-start;
}

  .ta_left {
    text-align: left;
}

  .trf_rotate\(180deg\) {
    transform: rotate(180deg);
}

  .trf_none {
    transform: none;
}

  .bx-sh_0_4px_24px_rgba\(0\,0\,0\,0\.15\)\,_0_1px_4px_rgba\(0\,0\,0\,0\.1\) {
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.1);
}

  .z_100 {
    z-index: 100;
}

  .h_100\% {
    height: 100%;
}

  .max-w_860px {
    max-width: 860px;
}

  .pt_2 {
    padding-top: var(--spacing-2);
}

  .pr_2 {
    padding-right: var(--spacing-2);
}

  .pb_2 {
    padding-bottom: var(--spacing-2);
}

  .pl_4 {
    padding-left: var(--spacing-4);
}

  .w_8 {
    width: var(--sizes-8);
}

  .h_8 {
    height: var(--sizes-8);
}

  .w_14 {
    width: var(--sizes-14);
}

  .h_14 {
    height: var(--sizes-14);
}

  .top_2 {
    top: var(--spacing-2);
}

  .right_2 {
    right: var(--spacing-2);
}

  .w_100\% {
    width: 100%;
}

  .mb_2 {
    margin-bottom: var(--spacing-2);
}

  .mt_1 {
    margin-top: var(--spacing-1);
}

  .ml_auto {
    margin-left: auto;
}

  .max-h_200px {
    max-height: 200px;
}

  .ov-y_auto {
    overflow-y: auto;
}

  .mb_1 {
    margin-bottom: var(--spacing-1);
}

  .w_6px {
    width: 6px;
}

  .h_6px {
    height: 6px;
}

  .mt_2 {
    margin-top: var(--spacing-2);
}

  .w_16 {
    width: var(--sizes-16);
}

  .h_16 {
    height: var(--sizes-16);
}

  .min-w_0 {
    min-width: var(--sizes-0);
}

  .w_260px {
    width: 260px;
}

  .left_0 {
    left: var(--spacing-0);
}

  .top_0 {
    top: var(--spacing-0);
}

  .h_100vh {
    height: 100vh;
}

  .w_12 {
    width: var(--sizes-12);
}

  .h_12 {
    height: var(--sizes-12);
}

  .mb_0\.5 {
    margin-bottom: var(--spacing-0\.5);
}

  .max-w_sm {
    max-width: var(--sizes-sm);
}

  .mt_0\.5 {
    margin-top: var(--spacing-0\.5);
}

  .top_100\% {
    top: 100%;
}

  .w_300px {
    width: 300px;
}

  .max-h_420px {
    max-height: 420px;
}

  .\[\&_code\]\:bg_bg\.emphasized code {
    background: var(--colors-bg-emphasized);
}

  .\[\&_pre\]\:p_4 pre {
    padding: var(--spacing-4);
}

  .\[\&_pre\]\:bg_gray\.dark\.1 pre {
    background: var(--colors-gray-dark-1);
}

  .\[\&_pre\]\:bd_1px_solid pre,.\[\&_th\,_\&_td\]\:bd_1px_solid th,.\[\&_th\,_\&_td\]\:bd_1px_solid td {
    border: 1px solid;
}

  .\[\&_th\]\:bg_bg\.muted th {
    background: var(--colors-bg-muted);
}

  .\[\&_hr\]\:bd_none hr {
    border: var(--borders-none);
}

  .dark .dark\:bg_colorPalette\.a8 {
    background: var(--colors-color-palette-a8);
}

  .\[\&_code\]\:py_0\.5 code {
    padding-block: var(--spacing-0\.5);
}

  .\[\&_code\]\:px_1\.5 code {
    padding-inline: var(--spacing-1\.5);
}

  .\[\&_code\]\:bdr_md code {
    border-radius: var(--radii-md);
}

  .\[\&_pre\]\:bdr_xl pre {
    border-radius: var(--radii-xl);
}

  .\[\&_pre\]\:bd-c_border\.subtle pre {
    border-color: var(--colors-border-subtle);
}

  .\[\&_blockquote\]\:bd-l_3px_solid blockquote {
    border-left: 3px solid;
}

  .\[\&_blockquote\]\:bd-c_colorPalette\.7 blockquote {
    border-color: var(--colors-color-palette-7);
}

  .\[\&_a\]\:td_underline a {
    text-decoration: underline;
}

  .\[\&_th\,_\&_td\]\:bd-c_border\.subtle th,.\[\&_th\,_\&_td\]\:bd-c_border\.subtle td {
    border-color: var(--colors-border-subtle);
}

  .\[\&_th\,_\&_td\]\:py_2 th,.\[\&_th\,_\&_td\]\:py_2 td {
    padding-block: var(--spacing-2);
}

  .\[\&_th\,_\&_td\]\:px_3 th,.\[\&_th\,_\&_td\]\:px_3 td {
    padding-inline: var(--spacing-3);
}

  .\[\&_hr\]\:bd-t_1px_solid hr {
    border-top: 1px solid;
}

  .\[\&_hr\]\:bd-c_border\.subtle hr {
    border-color: var(--colors-border-subtle);
}

  .\[\&_hr\]\:my_4 hr {
    margin-block: var(--spacing-4);
}

  .placeholder\:c_fg\.subtle::placeholder,.placeholder\:c_fg\.subtle[data-placeholder] {
    color: var(--colors-fg-subtle);
}

  .disabled\:op_0\.3:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
    opacity: 0.3;
}

  .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
    cursor: not-allowed;
}

  .\[\&_h1\]\:fs_xl h1 {
    font-size: var(--font-sizes-xl);
}

  .\[\&_h1\]\:fw_bold h1 {
    font-weight: var(--font-weights-bold);
}

  .\[\&_h2\]\:fs_lg h2 {
    font-size: var(--font-sizes-lg);
}

  .\[\&_h2\]\:fw_bold h2 {
    font-weight: var(--font-weights-bold);
}

  .\[\&_h3\]\:fs_md h3 {
    font-size: var(--font-sizes-md);
}

  .\[\&_h3\]\:fw_semibold h3 {
    font-weight: var(--font-weights-semibold);
}

  .\[\&_ul\]\:li-t_disc ul {
    list-style-type: disc;
}

  .\[\&_ol\]\:li-t_decimal ol {
    list-style-type: decimal;
}

  .\[\&_code\]\:ff_\'SF_Mono\'\,_Menlo\,_Consolas\,_\'Courier_New\'\,_monospace code {
    font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}

  .\[\&_code\]\:fs_0\.85em code {
    font-size: 0.85em;
}

  .\[\&_blockquote\]\:c_fg\.muted blockquote {
    color: var(--colors-fg-muted);
}

  .\[\&_blockquote\]\:font-style_italic blockquote {
    font-style: italic;
}

  .\[\&_a\]\:c_colorPalette\.11 a {
    color: var(--colors-color-palette-11);
}

  .\[\&_a\]\:tu-o_2px a {
    text-underline-offset: 2px;
}

  .\[\&_table\]\:bd-cl_collapse table {
    border-collapse: collapse;
}

  .\[\&_table\]\:fs_xs table {
    font-size: var(--font-sizes-xs);
}

  .\[\&_th\,_\&_td\]\:ta_left th,.\[\&_th\,_\&_td\]\:ta_left td {
    text-align: left;
}

  .\[\&_th\]\:fw_semibold th {
    font-weight: var(--font-weights-semibold);
}

  .\[\&_strong\]\:fw_bold strong {
    font-weight: var(--font-weights-bold);
}

  .\[\&_em\]\:font-style_italic em {
    font-style: italic;
}

  .\[\&_pre\]\:pos_relative pre {
    position: relative;
}

  .\[\&_\.delete-btn\]\:op_0 .delete-btn {
    opacity: 0;
}

  .\[\&_p\]\:mb_3 p {
    margin-bottom: var(--spacing-3);
}

  .\[\&_h1\]\:mt_5 h1 {
    margin-top: var(--spacing-5);
}

  .\[\&_h1\]\:mb_2 h1 {
    margin-bottom: var(--spacing-2);
}

  .\[\&_h2\]\:mt_4 h2 {
    margin-top: var(--spacing-4);
}

  .\[\&_h2\]\:mb_2 h2 {
    margin-bottom: var(--spacing-2);
}

  .\[\&_h3\]\:mt_3 h3 {
    margin-top: var(--spacing-3);
}

  .\[\&_h3\]\:mb_1\.5 h3 {
    margin-bottom: var(--spacing-1\.5);
}

  .\[\&_ul\,_\&_ol\]\:pl_6 ul,.\[\&_ul\,_\&_ol\]\:pl_6 ol {
    padding-left: var(--spacing-6);
}

  .\[\&_ul\,_\&_ol\]\:mb_3 ul,.\[\&_ul\,_\&_ol\]\:mb_3 ol {
    margin-bottom: var(--spacing-3);
}

  .\[\&_li\]\:mb_1 li {
    margin-bottom: var(--spacing-1);
}

  .\[\&_pre\]\:mb_3 pre {
    margin-bottom: var(--spacing-3);
}

  .\[\&_pre\]\:ov-x_auto pre {
    overflow-x: auto;
}

  .\[\&_blockquote\]\:pl_4 blockquote {
    padding-left: var(--spacing-4);
}

  .\[\&_blockquote\]\:ml_0 blockquote {
    margin-left: var(--spacing-0);
}

  .\[\&_blockquote\]\:mb_3 blockquote {
    margin-bottom: var(--spacing-3);
}

  .\[\&_table\]\:w_100\% table {
    width: 100%;
}

  .\[\&_table\]\:mb_3 table {
    margin-bottom: var(--spacing-3);
}

  .focusWithin\:bd-c_colorPalette\.8:focus-within {
    border-color: var(--colors-color-palette-8);
}

  .focusWithin\:bx-sh_0_0_0_1px_var\(--colors-color-palette-a4\):focus-within {
    box-shadow: 0 0 0 1px var(--colors-color-palette-a4);
}

  .\[\&\:hover\]\:bg_var\(--sidebar-hover\):hover {
    background: var(--sidebar-hover);
}

  .\[\&\:hover_\>_div_\>_\.msg-actions\]\:op_1:hover > div > .msg-actions,.\[\&\:hover_\.delete-btn\]\:op_1:hover .delete-btn {
    opacity: 1;
}

  .\[\&_pre\]\:\[\&_code\]\:p_0 pre code {
    padding: var(--spacing-0);
}

  .\[\&_pre\]\:\[\&_code\]\:bg_transparent pre code {
    background: var(--colors-transparent);
}

  .\[\&_pre\]\:\[\&_code\]\:bdr_0 pre code {
    border-radius: 0;
}

  .\[\&_pre\]\:\[\&_code\]\:fs_xs pre code {
    font-size: var(--font-sizes-xs);
}

  .\[\&_pre\]\:\[\&_code\]\:lh_1\.7 pre code {
    line-height: 1.7;
}

  .\[\&_pre\]\:\[\&\:hover_button\]\:op_1 pre:hover button {
    opacity: 1;
}

  .\[\&_p\]\:\[\&\:last-child\]\:mb_0 p:last-child {
    margin-bottom: var(--spacing-0);
}

  .\[\&_li\]\:\[\&_\>_p\]\:mb_1 li > p {
    margin-bottom: var(--spacing-1);
}

  @media screen and (min-width: 48rem) {
    .md\:p_2 {
      padding: var(--spacing-2);
}
    .md\:gap_2 {
      gap: var(--spacing-2);
}
    .md\:bdr_2xl {
      border-radius: var(--radii-2xl);
}
    .md\:d_none {
      display: none;
}
    .md\:d_flex {
      display: flex;
}
    .md\:pos_relative {
      position: relative;
}
    .md\:trf_none {
      transform: none;
}
    .md\:h_auto {
      height: auto;
}
}

  @media (hover: hover) and (pointer: fine) {
    .hover\:bg_white\/15:is(:hover, [data-hover]) {
      --mix-background: color-mix(in srgb, var(--colors-white) 15%, transparent);
      background: var(--mix-background, var(--colors-white));
}
    .hover\:bg_bg\.subtle:is(:hover, [data-hover]) {
      background: var(--colors-bg-subtle);
}
    .hover\:bg_bg\.muted:is(:hover, [data-hover]) {
      background: var(--colors-bg-muted);
}
    .hover\:bg_red\.a4:is(:hover, [data-hover]) {
      background: var(--colors-red-a4);
}
    .hover\:bg_red\.a3:is(:hover, [data-hover]) {
      background: var(--colors-red-a3);
}
    .hover\:bg_colorPalette\.a4:is(:hover, [data-hover]) {
      background: var(--colors-color-palette-a4);
}
    .hover\:op_0\.85:is(:hover, [data-hover]) {
      opacity: 0.85;
}
    .hover\:c_fg\.muted:is(:hover, [data-hover]) {
      color: var(--colors-fg-muted);
}
    .hover\:c_fg\.default:is(:hover, [data-hover]) {
      color: var(--colors-fg-default);
}
    .hover\:op_0\.9:is(:hover, [data-hover]) {
      opacity: 0.9;
}
    .hover\:c_red\.11:is(:hover, [data-hover]) {
      color: var(--colors-red-11);
}
    .hover\:c_colorPalette\.11:is(:hover, [data-hover]) {
      color: var(--colors-color-palette-11);
}
    .\[\&_a\]\:hover\:c_colorPalette\.12 a:is(:hover, [data-hover]) {
      color: var(--colors-color-palette-12);
}
}
}