/* DYNGLE Design tokens v0.3.0, generated by scripts/build-tokens.mjs. Do not edit by hand. */
:root {
  /* Brand */
  --dy-black: #101114;
  --dy-white: #F7F7F4;
  --dy-lime: #C8FF4D;
  --dy-violet: #6657FF;
  /* gray scale */
  --dy-gray-0: #FFFFFF;
  --dy-gray-50: #F7F7F4;
  --dy-gray-100: #EFEFEB;
  --dy-gray-200: #E4E4DF;
  --dy-gray-300: #D2D2CC;
  --dy-gray-400: #AEAEA8;
  --dy-gray-500: #7F8085;
  --dy-gray-600: #62646B;
  --dy-gray-700: #45474D;
  --dy-gray-800: #2B2D32;
  --dy-gray-850: #202125;
  --dy-gray-900: #17181B;
  --dy-gray-950: #101114;
  --dy-gray-1000: #0A0A0C;
  /* violet scale */
  --dy-violet-50: #F5F6FF;
  --dy-violet-100: #E9EBFF;
  --dy-violet-200: #D3D8FF;
  --dy-violet-300: #B4BAFF;
  --dy-violet-400: #9094FF;
  --dy-violet-500: #6657FF;
  --dy-violet-600: #5443E8;
  --dy-violet-700: #4833C7;
  --dy-violet-800: #35249A;
  --dy-violet-900: #24166F;
  --dy-violet-950: #16074F;
  /* lime scale */
  --dy-lime-50: #F4FFE5;
  --dy-lime-100: #E9FFC7;
  --dy-lime-200: #D9FF97;
  --dy-lime-300: #C8FF4D;
  --dy-lime-400: #ABE42A;
  --dy-lime-500: #8EC600;
  --dy-lime-600: #6EA200;
  --dy-lime-700: #547A12;
  --dy-lime-800: #395F00;
  --dy-lime-900: #264400;
  --dy-lime-950: #142B00;
  /* red scale */
  --dy-red-50: #FFF4F3;
  --dy-red-100: #FFE6E5;
  --dy-red-200: #FFCDCA;
  --dy-red-300: #FFA5A1;
  --dy-red-400: #F87071;
  --dy-red-500: #E04A51;
  --dy-red-600: #C52F3B;
  --dy-red-700: #9D1627;
  --dy-red-800: #790D1B;
  --dy-red-900: #56040F;
  --dy-red-950: #3A0006;
  /* green scale */
  --dy-green-50: #F0FAF3;
  --dy-green-100: #DFF3E5;
  --dy-green-200: #C1E5CE;
  --dy-green-300: #98D0AD;
  --dy-green-400: #6AB488;
  --dy-green-500: #459A6A;
  --dy-green-600: #167447;
  --dy-green-700: #14653E;
  --dy-green-800: #0A4C2D;
  --dy-green-900: #04351D;
  --dy-green-950: #002210;
  /* amber scale */
  --dy-amber-50: #FEF6E9;
  --dy-amber-100: #FCEAD1;
  --dy-amber-200: #F5D6A7;
  --dy-amber-300: #E8B86D;
  --dy-amber-400: #F5AF2D;
  --dy-amber-500: #D89600;
  --dy-amber-600: #AD7700;
  --dy-amber-700: #885D00;
  --dy-amber-800: #563900;
  --dy-amber-900: #3C2700;
  --dy-amber-950: #261700;
  /* Semantic / light */
  --dy-color-bg: var(--dy-gray-0);
  --dy-color-bg-subtle: var(--dy-gray-50);
  --dy-color-bg-muted: var(--dy-gray-100);
  --dy-color-bg-elevated: var(--dy-gray-0);
  --dy-color-bg-inverse: var(--dy-gray-950);
  --dy-color-fg: var(--dy-gray-950);
  --dy-color-fg-muted: var(--dy-gray-600);
  --dy-color-fg-subtle: var(--dy-gray-500);
  --dy-color-fg-inverse: var(--dy-gray-50);
  --dy-color-border: var(--dy-gray-200);
  --dy-color-border-strong: var(--dy-gray-300);
  --dy-color-border-control: var(--dy-gray-500);
  --dy-color-action: var(--dy-violet-600);
  --dy-color-action-hover: var(--dy-violet-700);
  --dy-color-action-subtle: var(--dy-violet-50);
  --dy-color-action-fg: var(--dy-violet-600);
  --dy-color-on-action: var(--dy-gray-0);
  --dy-color-accent: var(--dy-lime-300);
  --dy-color-accent-hover: var(--dy-lime-400);
  --dy-color-on-accent: var(--dy-gray-950);
  --dy-color-brand: var(--dy-violet-500);
  --dy-color-focus: var(--dy-violet-600);
  --dy-color-positive: var(--dy-green-600);
  --dy-color-positive-subtle: var(--dy-green-50);
  --dy-color-critical: var(--dy-red-600);
  --dy-color-critical-subtle: var(--dy-red-50);
  --dy-color-warning: var(--dy-amber-700);
  --dy-color-warning-subtle: var(--dy-amber-50);
  --dy-color-chart-1: var(--dy-violet-500);
  --dy-color-chart-2: var(--dy-lime-700);
  --dy-color-chart-3: var(--dy-red-500);
  /* Space */
  --dy-space-0: 0px;
  --dy-space-1: 4px;
  --dy-space-2: 8px;
  --dy-space-3: 12px;
  --dy-space-4: 16px;
  --dy-space-5: 20px;
  --dy-space-6: 24px;
  --dy-space-8: 32px;
  --dy-space-10: 40px;
  --dy-space-12: 48px;
  --dy-space-16: 64px;
  --dy-space-20: 80px;
  --dy-space-24: 96px;
  /* Radius */
  --dy-radius-xs: 4px;
  --dy-radius-sm: 8px;
  --dy-radius-md: 12px;
  --dy-radius-lg: 20px;
  --dy-radius-xl: 28px;
  --dy-radius-full: 9999px;
  /* Typography */
  --dy-font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --dy-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --dy-text-display-1: 700 72px/1 var(--dy-font-sans);
  --dy-text-display-1-tracking: -0.05em;
  --dy-text-display-2: 700 56px/1.05 var(--dy-font-sans);
  --dy-text-display-2-tracking: -0.045em;
  --dy-text-heading-1: 700 40px/1.2 var(--dy-font-sans);
  --dy-text-heading-1-tracking: -0.035em;
  --dy-text-heading-2: 650 30px/1.3 var(--dy-font-sans);
  --dy-text-heading-2-tracking: -0.03em;
  --dy-text-heading-3: 650 22px/1.4 var(--dy-font-sans);
  --dy-text-heading-3-tracking: -0.02em;
  --dy-text-body-lg: 400 18px/1.7 var(--dy-font-sans);
  --dy-text-body-lg-tracking: -0.01em;
  --dy-text-body: 400 16px/1.7 var(--dy-font-sans);
  --dy-text-body-tracking: -0.005em;
  --dy-text-label: 600 14px/1.5 var(--dy-font-sans);
  --dy-text-label-tracking: 0em;
  --dy-text-caption: 500 12px/1.5 var(--dy-font-sans);
  --dy-text-caption-tracking: 0.01em;
  /* Motion */
  --dy-duration-instant: 100ms;
  --dy-duration-fast: 160ms;
  --dy-duration-base: 240ms;
  --dy-duration-slow: 400ms;
  --dy-duration-expressive: 700ms;
  --dy-duration-brand: 1200ms;
  --dy-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dy-ease-enter: cubic-bezier(0, 0, 0, 1);
  --dy-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --dy-ease-expressive: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dy-ease-mingle: cubic-bezier(0.65, 0, 0.35, 1);
  /* Elevation */
  --dy-shadow-sm: 0 1px 2px rgba(16,17,20,.06), 0 1px 1px rgba(16,17,20,.04);
  --dy-shadow-md: 0 4px 12px -2px rgba(16,17,20,.08), 0 2px 4px rgba(16,17,20,.04);
  --dy-shadow-lg: 0 16px 40px -12px rgba(16,17,20,.18), 0 4px 10px rgba(16,17,20,.05);
  --dy-shadow-xl: 0 32px 80px -24px rgba(16,17,20,.28), 0 8px 20px rgba(16,17,20,.06);
  /* v0.2 compatibility aliases */
  --dy-bg: var(--dy-color-bg);
  --dy-surface: var(--dy-color-bg-subtle);
  --dy-text: var(--dy-color-fg);
  --dy-muted: var(--dy-color-fg-muted);
  --dy-border: var(--dy-color-border);
  --dy-action: var(--dy-color-action);
  --dy-positive: var(--dy-color-positive);
  --dy-critical: var(--dy-color-critical);
  --dy-font: var(--dy-font-sans);
  --dy-duration: var(--dy-duration-fast);
  --dy-ease: var(--dy-ease-expressive);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --dy-color-bg: var(--dy-gray-1000);
  --dy-color-bg-subtle: var(--dy-gray-950);
  --dy-color-bg-muted: var(--dy-gray-900);
  --dy-color-bg-elevated: var(--dy-gray-900);
  --dy-color-bg-inverse: var(--dy-gray-50);
  --dy-color-fg: var(--dy-gray-50);
  --dy-color-fg-muted: var(--dy-gray-400);
  --dy-color-fg-subtle: var(--dy-gray-500);
  --dy-color-fg-inverse: var(--dy-gray-950);
  --dy-color-border: var(--dy-gray-800);
  --dy-color-border-strong: var(--dy-gray-700);
  --dy-color-border-control: var(--dy-gray-500);
  --dy-color-action: var(--dy-violet-500);
  --dy-color-action-hover: var(--dy-violet-600);
  --dy-color-action-subtle: var(--dy-violet-950);
  --dy-color-action-fg: var(--dy-violet-300);
  --dy-color-on-action: var(--dy-gray-0);
  --dy-color-accent: var(--dy-lime-300);
  --dy-color-accent-hover: var(--dy-lime-200);
  --dy-color-on-accent: var(--dy-gray-950);
  --dy-color-brand: var(--dy-violet-500);
  --dy-color-focus: var(--dy-lime-300);
  --dy-color-positive: var(--dy-green-400);
  --dy-color-positive-subtle: var(--dy-green-950);
  --dy-color-critical: var(--dy-red-400);
  --dy-color-critical-subtle: var(--dy-red-950);
  --dy-color-warning: var(--dy-amber-300);
  --dy-color-warning-subtle: var(--dy-amber-950);
  --dy-color-chart-1: var(--dy-violet-400);
  --dy-color-chart-2: var(--dy-lime-300);
  --dy-color-chart-3: var(--dy-red-400);
  --dy-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --dy-shadow-md: 0 4px 12px -2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  --dy-shadow-lg: 0 16px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  --dy-shadow-xl: 0 32px 80px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --dy-color-bg: var(--dy-gray-1000);
    --dy-color-bg-subtle: var(--dy-gray-950);
    --dy-color-bg-muted: var(--dy-gray-900);
    --dy-color-bg-elevated: var(--dy-gray-900);
    --dy-color-bg-inverse: var(--dy-gray-50);
    --dy-color-fg: var(--dy-gray-50);
    --dy-color-fg-muted: var(--dy-gray-400);
    --dy-color-fg-subtle: var(--dy-gray-500);
    --dy-color-fg-inverse: var(--dy-gray-950);
    --dy-color-border: var(--dy-gray-800);
    --dy-color-border-strong: var(--dy-gray-700);
    --dy-color-border-control: var(--dy-gray-500);
    --dy-color-action: var(--dy-violet-500);
    --dy-color-action-hover: var(--dy-violet-600);
    --dy-color-action-subtle: var(--dy-violet-950);
    --dy-color-action-fg: var(--dy-violet-300);
    --dy-color-on-action: var(--dy-gray-0);
    --dy-color-accent: var(--dy-lime-300);
    --dy-color-accent-hover: var(--dy-lime-200);
    --dy-color-on-accent: var(--dy-gray-950);
    --dy-color-brand: var(--dy-violet-500);
    --dy-color-focus: var(--dy-lime-300);
    --dy-color-positive: var(--dy-green-400);
    --dy-color-positive-subtle: var(--dy-green-950);
    --dy-color-critical: var(--dy-red-400);
    --dy-color-critical-subtle: var(--dy-red-950);
    --dy-color-warning: var(--dy-amber-300);
    --dy-color-warning-subtle: var(--dy-amber-950);
    --dy-color-chart-1: var(--dy-violet-400);
    --dy-color-chart-2: var(--dy-lime-300);
    --dy-color-chart-3: var(--dy-red-400);
    --dy-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --dy-shadow-md: 0 4px 12px -2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    --dy-shadow-lg: 0 16px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
    --dy-shadow-xl: 0 32px 80px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
    color-scheme: dark;
  }
}

/* DYNGLE base components: depends on tokens.css variables. */

.dy-button {
  --_bg: var(--dy-color-action);
  --_bg-hover: var(--dy-color-action-hover);
  --_fg: var(--dy-color-on-action);
  --_border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dy-space-2);
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--_border);
  border-radius: var(--dy-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  font: 600 14px/1.5 var(--dy-font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dy-duration-fast) var(--dy-ease-standard),
    border-color var(--dy-duration-fast) var(--dy-ease-standard),
    color var(--dy-duration-fast) var(--dy-ease-standard),
    box-shadow var(--dy-duration-fast) var(--dy-ease-standard),
    transform var(--dy-duration-instant) var(--dy-ease-standard);
}
.dy-button:hover:not(:disabled) { background: var(--_bg-hover); }
.dy-button:active:not(:disabled) { transform: scale(0.97); }
.dy-button:disabled,
.dy-button[aria-disabled="true"] {
  --_bg: var(--dy-color-bg-muted);
  --_fg: var(--dy-color-fg-subtle);
  --_border: transparent;
  cursor: not-allowed;
}
.dy-button.secondary {
  --_bg: var(--dy-color-bg-elevated);
  --_bg-hover: var(--dy-color-bg-subtle);
  --_fg: var(--dy-color-fg);
  --_border: var(--dy-color-border-control);
}
.dy-button.ghost {
  --_bg: transparent;
  --_bg-hover: var(--dy-color-bg-muted);
  --_fg: var(--dy-color-fg);
}
.dy-button.lime,
.dy-button.brand {
  --_bg: var(--dy-color-accent);
  --_bg-hover: var(--dy-color-accent-hover);
  --_fg: var(--dy-color-on-accent);
}
.dy-button.critical {
  --_bg: var(--dy-color-critical);
  --_bg-hover: var(--dy-red-700);
  --_fg: #fff;
}
.dy-button.small { min-height: 36px; padding: 6px 13px; font-size: 13px; }
.dy-button.icon-only { width: 44px; min-height: 44px; padding: 0; }
.dy-button.large { min-height: 52px; padding: 14px 24px; font-size: 16px; border-radius: var(--dy-radius-md); }
.dy-button.pill { border-radius: var(--dy-radius-full); }
.dy-button.block { width: 100%; }
.dy-button[aria-busy="true"] { color: transparent; pointer-events: none; }
.dy-button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--_fg);
  border-right-color: transparent;
  animation: dy-spin 700ms linear infinite;
}
@keyframes dy-spin { to { transform: rotate(360deg); } }

:where(.dy-button, .dy-input, .dy-switch, .dy-check, .dy-radio, a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dy-color-focus);
  outline-offset: 3px;
}

.dy-label {
  display: block;
  margin-bottom: var(--dy-space-2);
  color: var(--dy-color-fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.dy-label .optional { color: var(--dy-color-fg-muted); font-weight: 400; }

.dy-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--dy-color-border-control);
  border-radius: var(--dy-radius-sm);
  background: var(--dy-color-bg-elevated);
  color: var(--dy-color-fg);
  font: 16px/1.5 var(--dy-font-sans);
  transition:
    border-color var(--dy-duration-fast) var(--dy-ease-standard),
    box-shadow var(--dy-duration-fast) var(--dy-ease-standard);
}
.dy-input::placeholder { color: var(--dy-color-fg-subtle); }
.dy-input:hover:not(:disabled) { border-color: var(--dy-color-fg-muted); }
.dy-input:focus-visible {
  outline: none;
  border-color: var(--dy-color-action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dy-color-action) 28%, transparent);
}
.dy-input[aria-invalid="true"] {
  border-color: var(--dy-color-critical);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dy-color-critical) 18%, transparent);
}

.dy-hint { margin: var(--dy-space-2) 0 0; color: var(--dy-color-fg-muted); font-size: 14px; line-height: 1.55; }
.dy-field-error { margin: var(--dy-space-2) 0 0; color: var(--dy-color-critical); font-size: 14px; font-weight: 500; line-height: 1.55; }
.dy-field-success { margin: var(--dy-space-2) 0 0; color: var(--dy-color-positive); font-size: 14px; font-weight: 500; line-height: 1.55; }

.dy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--dy-radius-full);
  background: var(--dy-color-action-subtle);
  color: var(--dy-color-action-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.dy-badge.positive { background: var(--dy-color-positive-subtle); color: var(--dy-color-positive); }
.dy-badge.critical { background: var(--dy-color-critical-subtle); color: var(--dy-color-critical); }
.dy-badge.warning { background: var(--dy-color-warning-subtle); color: var(--dy-color-warning); }
.dy-badge.neutral { background: var(--dy-color-bg-muted); color: var(--dy-color-fg-muted); }
.dy-badge.lime { background: var(--dy-color-accent); color: var(--dy-color-on-accent); }
.dy-badge.solid { background: var(--dy-color-bg-inverse); color: var(--dy-color-fg-inverse); }
.dy-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.dy-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: var(--dy-radius-full);
  background: var(--dy-color-border-control);
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--dy-duration-fast) var(--dy-ease-standard);
}
.dy-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 17, 20, 0.25);
  transition: transform var(--dy-duration-base) var(--dy-ease-expressive), width var(--dy-duration-fast) var(--dy-ease-standard);
}
.dy-switch:active::before { width: 27px; }
.dy-switch:checked { background: var(--dy-color-action); }
.dy-switch:checked::before { transform: translateX(18px); }
.dy-switch:checked:active::before { transform: translateX(13px); }
.dy-switch:disabled { opacity: 0.45; cursor: not-allowed; }

.dy-check,
.dy-radio {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--dy-color-border-control);
  border-radius: 6px;
  background: var(--dy-color-bg-elevated);
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color var(--dy-duration-fast) var(--dy-ease-standard),
    border-color var(--dy-duration-fast) var(--dy-ease-standard);
}
.dy-radio { border-radius: 50%; }
.dy-check::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--dy-color-on-action);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
  transform: scale(0);
  transition: transform var(--dy-duration-fast) var(--dy-ease-expressive);
}
.dy-radio::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dy-color-on-action);
  transform: scale(0);
  transition: transform var(--dy-duration-fast) var(--dy-ease-expressive);
}
.dy-check:checked,
.dy-radio:checked { border-color: var(--dy-color-action); background: var(--dy-color-action); }
.dy-check:checked::before,
.dy-radio:checked::before { transform: scale(1); }
.dy-check:hover:not(:checked),
.dy-radio:hover:not(:checked) { border-color: var(--dy-color-fg-muted); }

.dy-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 15px;
  cursor: pointer;
}

.dy-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 28px;
  border: 0;
  border-radius: var(--dy-radius-lg);
  background: var(--dy-color-bg-elevated);
  color: var(--dy-color-fg);
  box-shadow: var(--dy-shadow-xl);
}
.dy-dialog::backdrop { background: rgba(10, 10, 12, 0.48); backdrop-filter: blur(4px); }
.dy-dialog[open] { animation: dy-dialog-in var(--dy-duration-slow) var(--dy-ease-expressive); }
.dy-dialog[open]::backdrop { animation: dy-fade-in var(--dy-duration-base) var(--dy-ease-standard); }
@keyframes dy-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes dy-fade-in { from { opacity: 0; } }

.dy-card {
  overflow: hidden;
  border: 1px solid var(--dy-color-border);
  border-radius: var(--dy-radius-md);
  background: var(--dy-color-bg-elevated);
  transition:
    transform var(--dy-duration-base) var(--dy-ease-expressive),
    box-shadow var(--dy-duration-base) var(--dy-ease-standard),
    border-color var(--dy-duration-fast) var(--dy-ease-standard);
}
.dy-card.interactive:hover { transform: translateY(-3px); border-color: var(--dy-color-border-strong); box-shadow: var(--dy-shadow-lg); }

.dy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--dy-color-border-control);
  border-radius: var(--dy-radius-full);
  background: var(--dy-color-bg-elevated);
  color: var(--dy-color-fg);
  font: 600 14px/1.4 var(--dy-font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dy-duration-fast) var(--dy-ease-standard),
    border-color var(--dy-duration-fast) var(--dy-ease-standard),
    color var(--dy-duration-fast) var(--dy-ease-standard),
    transform var(--dy-duration-instant) var(--dy-ease-standard);
}
.dy-chip:hover { border-color: var(--dy-color-fg-muted); }
.dy-chip:active { transform: scale(0.96); }
.dy-chip[aria-pressed="true"],
.dy-chip.selected { border-color: transparent; background: var(--dy-color-bg-inverse); color: var(--dy-color-fg-inverse); }
.dy-chip[aria-pressed="true"]::before,
.dy-chip.selected::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: -2px;
  background: var(--dy-lime);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
}
.dy-chip.small { min-height: 30px; padding: 0 11px; font-size: 13px; }
.dy-chip:disabled { opacity: 0.45; cursor: not-allowed; }

.dy-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 10px 18px 10px 14px;
  border-radius: var(--dy-radius-full);
  background: var(--dy-color-bg-inverse);
  color: var(--dy-color-fg-inverse);
  font: 500 14px/1.45 var(--dy-font-sans);
  box-shadow: var(--dy-shadow-lg);
}
.dy-toast::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dy-lime); }
.dy-toast.critical::before { background: var(--dy-red-400); }
.dy-toast-action {
  margin-left: 6px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--dy-lime);
  font: 700 14px/1 var(--dy-font-sans);
  white-space: nowrap;
  cursor: pointer;
}
[data-theme="dark"] .dy-toast-action { color: var(--dy-violet); }

.dy-avatar {
  --_size: 40px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--_size);
  height: var(--_size);
  border-radius: 50%;
  background: var(--dy-violet);
  color: #fff;
  font: 700 calc(var(--_size) * 0.38) / 1 var(--dy-font-sans);
  letter-spacing: -0.02em;
  user-select: none;
}
.dy-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.dy-avatar.lime { background: var(--dy-lime); color: var(--dy-black); }
.dy-avatar.neutral { background: var(--dy-color-bg-muted); color: var(--dy-color-fg-muted); }
.dy-avatar.small { --_size: 32px; }
.dy-avatar.large { --_size: 56px; }
.dy-avatar[data-status="online"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--dy-color-positive);
  box-shadow: 0 0 0 2px var(--dy-color-bg);
}
.dy-avatar-group { display: inline-flex; }
.dy-avatar-group > .dy-avatar { box-shadow: 0 0 0 2px var(--dy-color-bg); }
.dy-avatar-group > .dy-avatar + .dy-avatar { margin-left: calc(var(--_size) * -0.18); }

.dy-progress {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--dy-radius-full);
  background: var(--dy-color-bg-muted);
}
.dy-progress > span {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dy-violet), var(--dy-color-action));
  transition: width var(--dy-duration-slow) var(--dy-ease-standard);
}
.dy-progress.lime > span { background: var(--dy-lime-500); }
.dy-progress.indeterminate > span { width: 36%; animation: dy-progress-slide 1.3s var(--dy-ease-standard) infinite; }
@keyframes dy-progress-slide { from { transform: translateX(-110%); } to { transform: translateX(290%); } }

.dy-spinner {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--dy-color-border);
  border-top-color: var(--dy-color-action);
  border-radius: 50%;
  animation: dy-spin 700ms linear infinite;
}

.dy-skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--dy-color-bg-muted) 0 40%, var(--dy-color-bg-subtle) 50%, var(--dy-color-bg-muted) 60% 100%) 0 0 / 300% 100%;
  animation: dy-shimmer 1.4s linear infinite;
}
.dy-skeleton.circle { border-radius: 50%; }
.dy-skeleton.block { height: auto; border-radius: var(--dy-radius-md); }
@keyframes dy-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.dy-tooltip-wrap { position: relative; display: inline-flex; }
.dy-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 240px;
  padding: 7px 11px;
  border-radius: var(--dy-radius-sm);
  background: var(--dy-color-bg-inverse);
  color: var(--dy-color-fg-inverse);
  font: 500 12.5px/1.45 var(--dy-font-sans);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--dy-duration-fast) var(--dy-ease-standard),
    transform var(--dy-duration-fast) var(--dy-ease-standard);
}
.dy-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: var(--dy-color-bg-inverse);
  transform: translateX(-50%);
}
.dy-tooltip-wrap:hover .dy-tooltip,
.dy-tooltip-wrap:focus-within .dy-tooltip,
.dy-tooltip.show { opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; }
.dy-tooltip-wrap:focus-within .dy-tooltip { transition-delay: 0ms; }
.dy-tooltip-wrap[data-dismissed] .dy-tooltip { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}