/* Generated from design/tokens.json. Run npm run tokens after editing the source. */
:root {
  color-scheme: light;
  --color-gray-1: #fefdfc;
  --color-gray-2: #f4f1ec;
  --color-gray-3: #c9c2b8;
  --color-gray-4: #8e877f;
  --color-gray-5: #625c54;
  --color-gray-6: #292622;
  --color-gray-7: #15130f;
  --color-canvas: #f8f6f2;
  --color-app-surround: #000;
  --color-surface: var(--color-gray-1);
  --color-text: var(--color-gray-6);
  --color-muted: var(--color-gray-5);
  --color-accent: #b6442b;
  --color-primary: #f45a34;
  --color-primary-light: color-mix(in srgb, var(--color-primary) 80%, var(--color-gray-1));
  --color-secondary: #afd374;
  --color-secondary-light: color-mix(in srgb, var(--color-secondary) 80%, var(--color-gray-1));
  --gradient-primary: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary));
  --color-on-accent: var(--color-gray-1);
  --color-outline: #81796f;
  --color-divider: #dbd5cc;
  --color-overlay: rgb(0 0 0 / .6);
  --color-overlay-strong: color-mix(in srgb, var(--color-gray-7) 90%, transparent);
  --color-kakao: #fee500;
  --color-on-kakao: rgb(0 0 0 / .85);
  --font-size-2xs: .625rem;
  --font-size-xs: .75rem;
  --font-size-13: .8125rem;
  --font-size-sm: .875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.75rem;
  --text-title-size: var(--font-size-2xl);
  --text-title-line-height: calc(var(--text-title-size) * var(--line-height-sm));
  --text-heading-size: var(--font-size-lg);
  --text-heading-line-height: calc(var(--text-heading-size) * var(--line-height-sm));
  --text-body-size: var(--font-size-md);
  --text-body-line-height: calc(var(--text-body-size) * var(--line-height-md));
  --line-height-2xs: 1;
  --line-height-sm: 1.25;
  --line-height-md: 1.5;
  --line-height-lg: 1.75;
  --font-weight-sm: 400;
  --font-weight-md: 500;
  --font-weight-lg: 600;
  --font-weight-xl: 700;
  --font-weight-2xl: 800;
  --space-2xs: .125rem;
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: .75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --gutter-sm: 1rem;
  --gutter-md: 1.25rem;
  --gutter-lg: 1.5rem;
  --radius-xs: .25rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --squircle-curve: .8;
  --conversation-loading-curve: .65;
  --squircle-xs: .5rem;
  --squircle-sm: 1rem;
  --squircle-md: 1.5rem;
  --squircle-lg: 2rem;
  --border-silver-image: url('/assets/borders/silver.svg');
  --border-silver-slice: 16;
  --border-silver-width: 16px;
  --border-silver-clip-inner: polygon(13px 2px, calc(100% - 13px) 2px, calc(100% - 2px) 13px, calc(100% - 2px) calc(100% - 13px), calc(100% - 13px) calc(100% - 2px), 13px calc(100% - 2px), 2px calc(100% - 13px), 2px 13px);
  --icon-size-xs: 0.75rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --badge-min-size: 1.25rem;
  --badge-padding: .1875rem;
  --notification-dot-size: calc(var(--space-xs) * 1.5);
  --notification-dot-inline-offset: calc(var(--space-2xs) + var(--notification-dot-size) / 2);
  --notification-dot-block-offset: calc(50% - .55em + var(--notification-dot-size) / 2);
  --control-size-xs: 2.25rem;
  --control-size-sm: 3rem;
  --control-size-md: 3.25rem;
  --control-size-lg: 3.5rem;
  --loading-character-size: 3rem;
  --avatar-size-xs: 1.5rem;
  --avatar-size-sm: 2rem;
  --avatar-size-md: 2.75rem;
  --avatar-size-lg: 3rem;
  --avatar-size-xl: 5rem;
  --avatar-fallback-icon-size: 1.625rem;
  --image-gallery-cover-width: 72%;
  --avatar-squircle-radius-ratio: .4;
  --opacity-text: .9;
  --duration-sm: 120ms;
  --duration-md: 200ms;
  --duration-lg: 320ms;
  --motion-spring-stiffness: 420;
  --motion-spring-damping: 28;
  --motion-spring-mass: .8;
  --motion-easing: cubic-bezier(.2, 0, 0, 1);
  --image-gallery-duration: 400ms;
  --image-gallery-easing: cubic-bezier(.2, 0, .38, .9);
  --motion-ease-out: cubic-bezier(.33, 1, .68, 1);
  --motion-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --press-scale: .96;
  --image-text-shadow: 0 0 var(--space-xs) var(--color-image-shadow);
  --image-meta-color: color-mix(in srgb, var(--color-gray-1) 70%, transparent);
  --image-meta-separator-color: color-mix(in srgb, var(--color-gray-1) 50%, transparent);
  --chat-gutter: max(var(--space-sm), env(safe-area-inset-left), env(safe-area-inset-right));
  --line-width: 1px;
  --scrollbar-size: 8px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --app-max-width: 480px;
  --chat-max-width: 100%;
  --panel-max-width: 28rem;
  --bottom-nav-min-height: calc(var(--control-size-lg) + var(--space-sm));
  --bottom-nav-icon-size: 2rem;
  --bottom-nav-mask-size: 1.625rem;
  --bottom-nav-pillot-scale: 107.5%;
  --bottom-nav-character-duration: 460ms;
  --list-avatar-size: min(3.5rem, 56px);
  --list-row-height: 80px;
  --list-column-gap: min(var(--space-md), 12px);
  --list-action-width: min(calc(var(--control-size-sm) + var(--space-lg)), 40%);
  --story-logo-width: 8rem;
  --character-card-aspect-ratio: 9 / 16;
  --character-card-name-font-size: 1.0625rem;
  --character-card-image-aspect-ratio: 3 / 4;
  --character-card-min-width: calc(var(--font-size-md) * 3 + var(--space-lg) * 2 + var(--space-sm));
  --character-card-shade-start: 0.525;
  --character-card-shade-middle: 0.675;
  --character-card-shade-end: 0.75;
  --image-color-strength: 68%;
  --image-shade-lightness: .46;
  --image-border-lightness: 0.65;
  --image-border-opacity: 0.65;
  --banner-carousel-width: calc(100cqi - min(var(--gutter-sm), 16px) * 2);
  --gift-banner-aspect-ratio: 13 / 4;
  --banner-carousel-min-height: calc(var(--banner-carousel-width) * 3 / 4);
  --banner-carousel-preview-scale: .84;
  --banner-carousel-shade-start: 0.525;
  --banner-carousel-shade-middle: 0.675;
  --banner-carousel-shade-end: 0.75;
  --banner-carousel-shade-opacity: .85;
  --banner-carousel-side-hit-ratio: .15;
  --banner-carousel-gap: min(var(--space-sm), 2cqi);
  --banner-carousel-step: calc(var(--banner-carousel-width) * (1 + var(--banner-carousel-preview-scale)) / 2 + var(--banner-carousel-gap));
  --banner-carousel-interval: 3500ms;
  --banner-carousel-duration: 250ms;
  --banner-carousel-auto-duration: 650ms;
  --banner-carousel-exit-duration: 150ms;
  --banner-carousel-easing: cubic-bezier(.1, .9, .2, 1);
  --banner-carousel-indicator-height: 1.25rem;
  --composer-min-height: max(var(--control-size-sm), calc(var(--font-size-md) * var(--line-height-md) + var(--gutter-sm) * 2));
  --composer-max-height: 8rem;
  --chat-font-family: Pretendard, sans-serif;
  --chat-reply-font-size: var(--font-size-md);
  --message-avatar-size: min(calc(var(--avatar-size-sm) + var(--space-xs)), 36px);
  --message-text-color: var(--color-gray-6);
  --message-padding-inline: var(--space-md);
  --message-max-width: min(100%, max(16rem, calc(100% - var(--space-xl) * 2)));
  --color-silver-canvas: #15191f;
  --color-silver-surface: #1c222b;
  --color-silver-text: #e4eaf3;
  --color-silver-muted: #a4afbf;
  --color-silver-primary: #c5d6ee;
  --color-silver-divider: #354151;
  --color-silver-outline: #687a93;
  --color-silver-glow: #253141;
  --color-silver-header-start: #222b37;
  --color-silver-header-end: #181e27;
  --color-silver-panel-start: #252f3e;
  --color-silver-panel-end: #171d27;
  --color-silver-title: #d7e2f2;
  --color-silver-speaker: #c4d5ec;
  --color-silver-bubble-start: #252e3b;
  --color-silver-bubble-end: #1c232d;
  --color-silver-user-start: #283b51;
  --color-silver-user-end: #213145;
  --color-silver-metal-shadow: #101822;
  --color-silver-metal-light: #eff4ff;
  --color-silver-metal-mid: #788ba5;
  --color-silver-metal-dark: #617089;
  --color-silver-metal-end: #cbd9ed;
  --color-silver-metal-inner: #afc0d8;
  --color-image-shadow: rgb(0 0 0 / .55);
  --color-silver-surround: #090c11;
  --color-silver-accent: #bdcee7;
  --color-silver-secondary: #283547;
  --color-silver-on-accent: #17202c;
  --color-silver-subtle: #8d9bb0;
  --color-silver-composer: #181f29;
  --color-silver-header-highlight: #536179;
  --color-silver-header-shadow: #1a2029;
  --color-silver-ornament-edge: #93a8c7;
  --color-silver-ornament-line: #c9d8ee;
  --color-silver-ornament-light: #dae7fb;
  --color-silver-ornament-dot: #97acc9;
  --color-deep-navy: #162b4d;
  --color-deep-green: #17493d;
  --color-new: #3972da;
  --color-new-light: color-mix(in srgb, var(--color-new) 80%, var(--color-gray-1));
  --color-memory-archive-background: #17130f;
  --color-memory-archive-gold: #f7d797;
  --color-memory-archive-text: #f6eedc;
  --color-memory-archive-muted: #c6bca5;
  --duration-memory-archive-reveal: 2200ms;
  --color-forte: #ff2d8d;
}
.app--home {
  --color-canvas: var(--color-gray-1);
  --color-surface: var(--color-canvas);
}
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="light"]) {
  color-scheme: dark;
  --color-canvas: #181713;
  --color-surface: #25231f;
  --color-text: #f2eee8;
  --color-muted: #bdb5aa;
  --color-accent: #f3b19a;
  --color-on-accent: #292622;
  --color-outline: #91887c;
  --color-divider: #3f3b35;
}
}
html[data-chat-font="ridiBatang"] {
  --chat-font-family: RIDIBatang, serif;
}
html[data-text-size="large"] {
  --chat-reply-font-size: var(--font-size-lg);
}
.character-card, .character-profile__gallery, .image-gallery, .avatar-frame {
  --image-shade-color: oklch(from var(--runtime-image-color, var(--color-gray-6)) min(l, var(--image-shade-lightness)) c h);
}
.character-card, .character-profile__gallery, .image-gallery {
  --character-card-shade: linear-gradient(
    transparent calc(var(--character-card-shade-start) * 100%),
    color-mix(in srgb, var(--image-shade-color) 85%, transparent) calc(var(--character-card-shade-middle) * 100%),
    var(--image-shade-color) calc(var(--character-card-shade-end) * 100%)
  );
}
.app--login {
  --login-background-overlay: radial-gradient(ellipse 50% 50% at 100% 0, rgb(0 0 0 / .12), rgb(0 0 0 / .52));
  --login-scene-interval: 5000ms;
  --login-background-duration: 500ms;
  --login-exit-duration: 100ms;
  --login-enter-stagger: 100ms;
}