.theme-studycodehub {
  --theme-primary: #7c3aed;
  --theme-primary-hover: #6d28d9;
  --theme-secondary: #c4b5fd;
  --theme-bg: #f8f7fc;
  --theme-card-bg: #ffffff;
  --theme-border: #e7e2f2;
  --theme-text: #17131f;
  --theme-text-muted: #6e677b;
  --theme-success: #22c55e;
  --theme-warning: #d97706;
  --theme-error: #e11d48;
  color: var(--theme-text);
  background: var(--theme-bg);
}

.theme-studycodehub.dark {
  --theme-primary: #8b5cf6;
  --theme-primary-hover: #a78bfa;
  --theme-secondary: #c4b5fd;
  --theme-bg: #090712;
  --theme-card-bg: #131020;
  --theme-border: #2b2340;
  --theme-text: #f7f4ff;
  --theme-text-muted: #aaa2b9;
  --theme-success: #4ade80;
  --theme-warning: #fbbf24;
  --theme-error: #fb7185;
}

.theme-studycodehub .studycodehub-weave-canvas {
  --studycodehub-question-editor-height: 18rem;
  background-image:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--theme-primary) 13%, transparent) 0, transparent 28%),
    radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--theme-secondary) 14%, transparent) 0, transparent 32%),
    linear-gradient(color-mix(in srgb, var(--theme-border) 52%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--theme-border) 52%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
}

@media (min-width: 1024px) {
  .theme-studycodehub .studycodehub-weave-canvas {
    --studycodehub-question-editor-height: clamp(8rem, 18vh, 11rem);
  }

  .theme-studycodehub .studycodehub-programming-workspace > :first-child {
    min-height: 14rem;
    height: auto;
    flex: 1 1 auto;
  }

  .theme-studycodehub .studycodehub-programming-workspace > :last-child {
    height: clamp(10rem, 23vh, 13rem);
    flex: 0 0 clamp(10rem, 23vh, 13rem);
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .theme-studycodehub .studycodehub-programming-workspace > :last-child > :first-child {
    padding-bottom: 0.375rem;
  }
}

.theme-studycodehub .studycodehub-weave-node {
  position: relative;
}

.theme-studycodehub .studycodehub-weave-node::before {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 1.25rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--theme-primary));
  opacity: 0.42;
}

.theme-studycodehub .studycodehub-weave-pulse {
  animation: studycodehub-weave-pulse 2.8s ease-in-out infinite;
}

@keyframes studycodehub-weave-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-primary) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme-primary) 9%, transparent);
  }
}

@media (max-width: 40rem) {
  .theme-studycodehub .studycodehub-weave-node::before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 1.5rem;
    width: 1px;
    height: 1rem;
    background: linear-gradient(transparent, var(--theme-primary));
  }
}

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