.theme-algomentorhub {
  --theme-primary: #08b8d3;
  --theme-primary-hover: #049aaf;
  --theme-bg: #f2fafc;
  --theme-card-bg: #ffffff;
  --theme-border: #c7e8ed;
  --theme-text: #07143b;
  --theme-text-muted: #52677c;
  --theme-success: #18a979;
  --theme-warning: #d99a24;
  --theme-error: #da5265;
  color: var(--theme-text);
  background: var(--theme-bg);
}

.dark.theme-algomentorhub {
  --theme-primary: #22c7de;
  --theme-primary-hover: #5ad8e8;
  --theme-bg: #050b1f;
  --theme-card-bg: #0b1630;
  --theme-border: #183256;
  --theme-text: #f5faff;
  --theme-text-muted: #9cb2c8;
  --theme-success: #34d399;
  --theme-warning: #fbbf24;
  --theme-error: #fb7185;
}

.theme-algomentorhub body {
  color: var(--theme-text);
  background: var(--theme-bg);
}

.theme-algomentorhub .algomentorhub-canvas {
  background-image:
    radial-gradient(
      circle at 8% 6%,
      color-mix(in srgb, var(--theme-primary) 10%, transparent),
      transparent 30rem
    ),
    radial-gradient(
      circle at 92% 18%,
      color-mix(in srgb, var(--theme-primary) 7%, transparent),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--theme-card-bg) 48%, transparent),
      transparent 32rem
    );
}

.theme-algomentorhub .algomentorhub-route-mark {
  position: absolute;
  right: -5rem;
  bottom: -8rem;
  width: 20rem;
  height: 20rem;
  border: 3rem solid color-mix(in srgb, var(--theme-primary) 7%, transparent);
  border-radius: 45% 55% 52% 48%;
  transform: rotate(-28deg);
  pointer-events: none;
}

.theme-algomentorhub .tutorial-container {
  color: var(--theme-text);
  background: transparent;
  box-shadow: none;
}

.theme-algomentorhub .tutorial-title {
  color: var(--theme-text);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: -0.035em;
}

.theme-algomentorhub .tutorial-summary,
.theme-algomentorhub .section-text,
.theme-algomentorhub .section-list {
  color: var(--theme-text-muted);
}

.theme-algomentorhub .section-heading-2,
.theme-algomentorhub .section-heading-3,
.theme-algomentorhub .section-heading-4,
.theme-algomentorhub .section-heading-5,
.theme-algomentorhub .section-heading-6 {
  color: var(--theme-text);
  border-color: var(--theme-primary);
}

.theme-algomentorhub .section-example,
.theme-algomentorhub .section-note,
.theme-algomentorhub .section-table-wrapper {
  border-color: var(--theme-border);
  background: var(--theme-bg);
}

.theme-algomentorhub .example-header {
  border-color: var(--theme-border);
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-bg));
}

.theme-algomentorhub .example-code {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-text) 5%, var(--theme-card-bg));
}

.theme-algomentorhub .copy-btn {
  color: var(--theme-primary);
}

@media (max-width: 40rem) {
  .theme-algomentorhub .tutorial-title {
    font-size: 1.75rem;
  }

  .theme-algomentorhub .algomentorhub-route-mark {
    right: -10rem;
    opacity: 0.7;
  }
}

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