:root {
  --ark-material-canvas-base: #e8f0ff;
  --ark-material-canvas-blue: #bed2ff;
  --ark-material-canvas-lilac: #d2ccff;
  --ark-material-canvas-cyan: #d8f3ff;
  --ark-material-canvas-glow: #f3edff;
  --ark-material-canvas-bottom: #edf4ff;
  --ark-material-color-surface: #ffffff;
  --ark-material-color-ink: #202747;
  --ark-material-color-text: #24283d;
  --ark-material-color-muted: #61677b;
  --ark-material-color-brand: #5746b4;
  --ark-material-color-brand-soft: #edebf7;
  --ark-material-color-brand-line: #dad6ef;
  --accent-soft: #edebf7;
  --accent-line: #dad6ef;
  --ark-material-color-action: #405fa6;
  --ark-material-color-line: #dfe4ef;
  --ark-material-action-fill: #5746b4;
  --ark-material-action-ink: #ffffff;
  --ark-material-action-border: #5746b4;
  --ark-material-background: #ffffff;
  --ark-material-highlight: none;
  --ark-material-border: rgba(32, 39, 71, 0.13);
  --ark-material-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --ark-material-shadow: 0 6px 20px rgba(32, 39, 71, 0.055);
  --ark-material-backdrop: none;
  --ark-material-content-background: #ffffff;
  --ark-material-content-border: rgba(32, 39, 71, 0.12);
  --ark-material-control-radius: 14px;
  --ark-material-content-radius: 20px;
  --ark-material-overlay-radius: 24px;
  --ark-material-duration: 180ms;
  --ark-material-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ark-material-canvas {
  background-color: #e8f0ff;
  background-image: radial-gradient(ellipse 70% 30% at 0% 5%, rgba(216, 243, 255, 0.9), transparent 100%), radial-gradient(ellipse 70% 35% at 95% 0%, rgba(210, 204, 255, 0.18), transparent 100%), radial-gradient(ellipse 72% 38% at 50% 0%, rgba(190, 210, 255, 0.22), transparent 100%), radial-gradient(ellipse 32% 14% at 70% 100%, rgba(243, 237, 255, 0.8), transparent 100%), linear-gradient(180deg, #e8f0ff 0%, #e8f0ff 78%, #edf4ff 100%);
  background-repeat: no-repeat;
}

.ark-material-chrome, .ark-material-menu, .ark-material-dock, .ark-material-panel,
.ark-material-component.ark-material-dock, .ark-material-component.ark-material-panel {
  box-sizing: border-box;
  background-color: var(--ark-material-background);
  background-image: var(--ark-material-highlight);
  border-color: var(--ark-material-border);
  box-shadow: var(--ark-material-shadow);
  -webkit-backdrop-filter: var(--ark-material-backdrop);
  backdrop-filter: var(--ark-material-backdrop);
}

.ark-material-menu, .ark-material-panel {
  border-radius: var(--ark-material-overlay-radius);
}

.ark-material-control {
  border-radius: var(--ark-material-control-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(32, 39, 71, 0.045);
  transition: transform var(--ark-material-duration) var(--ark-material-easing), border-color var(--ark-material-duration) var(--ark-material-easing), background-color var(--ark-material-duration) var(--ark-material-easing);
}

.ark-material-control:active:not([disabled]):not([aria-disabled=true]) {
  transform: translateY(1px);
}

.ark-material-control[disabled], .ark-material-control[aria-disabled=true] {
  box-shadow: none;
}

.ark-material-content:not(.ark-material-component) {
  background-color: var(--ark-material-content-background);
  border-color: var(--ark-material-content-border);
  border-radius: var(--ark-material-content-radius);
}

.ark-material-pill {
  border-radius: 999px;
}

:root[data-ark-material=glass], :root[data-ark-material=translucent] {
  --ark-material-background: rgba(255, 255, 255, 0.96);
  --ark-material-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.18) 100%);
  --ark-material-border: rgba(32, 39, 71, 0.11);
  --ark-material-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(32, 39, 71, 0.035);
  --ark-material-shadow: var(--ark-material-inset-shadow), 0 8px 24px rgba(32, 39, 71, 0.065), 0 1px 4px rgba(32, 39, 71, 0.025);
  --ark-material-backdrop: none;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root[data-ark-material=glass] {
    --ark-material-background: rgba(255, 255, 255, 0.94);
    --ark-material-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.22) 100%);
    --ark-material-border: rgba(255, 255, 255, 0.72);
    --ark-material-shadow: var(--ark-material-inset-shadow), 0 12px 30px rgba(32, 39, 71, 0.08), 0 2px 8px rgba(32, 39, 71, 0.025);
    --ark-material-backdrop: blur(18px) saturate(1.08);
  }
}
:root[data-ark-material=opaque] {
  --ark-material-background: #ffffff;
  --ark-material-highlight: none;
  --ark-material-backdrop: none;
  --ark-material-border: rgba(32, 39, 71, 0.16);
  --ark-material-content-background: #ffffff;
  --ark-material-shadow: 0 3px 12px rgba(32, 39, 71, 0.05);
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root[data-ark-material] {
    --ark-material-background: #ffffff;
    --ark-material-highlight: none;
    --ark-material-content-background: #ffffff;
    --ark-material-backdrop: none;
    --ark-material-border: #61677b;
    --ark-material-shadow: none;
  }

  .ark-material-canvas {
    background-image: none;
  }

  .ark-material-control {
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ark-material-duration: 0ms;
  }

  .ark-material-component, .ark-material-component *, .ark-material-component *::before, .ark-material-component *::after, .ark-material-chrome, .ark-material-menu, .ark-material-control {
    transition-duration: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .ark-material-control:active:not([disabled]):not([aria-disabled=true]) {
    transform: none;
  }
}
@media (forced-colors: active) {
  :root[data-ark-material] {
    --ark-material-background: Canvas;
    --ark-material-highlight: none;
    --ark-material-content-background: Canvas;
    --ark-material-backdrop: none;
    --ark-material-border: CanvasText;
    --ark-material-content-border: CanvasText;
    --ark-material-shadow: none;
  }

  .ark-material-chrome, .ark-material-menu, .ark-material-dock, .ark-material-panel, .ark-material-content {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ark-material-control {
    box-shadow: none;
  }

  .ark-material-canvas {
    background: Canvas;
  }
}
@media print {
  :root[data-ark-material] {
    --ark-material-background: #ffffff;
    --ark-material-highlight: none;
    --ark-material-backdrop: none;
    --ark-material-shadow: none;
  }

  .ark-material-canvas {
    background-image: none;
  }
}