:root {
  /* Opt out of browser auto-invert (Chrome/Firefox "Force Dark"): this site
     is intentionally light-themed and force-inversion breaks the palette
     swatch guide — reported as "dark mode messes with colour selection". */
  color-scheme: light;
   --bg: #F7FBFF;
   --bg-2: #EFF8F6;
  --ink: #2F415C;
  --ink-soft: #5F7394;
  --ink-muted: #8CA1BE;
  --sun: #FFE799;
  --sun-deep: #FFD66F;
  --coral: #FFB4AE;
  --coral-deep: #F18E96;
  --pink: #FFCFE1;
  --teal: #8DDCC9;
  --sky: #A8DBFF;
  --violet: #C5B9FF;
  --lime: #BFE89A;
  --cream: #FFF3C9;
   --paper: #FFFFFF;
  --outline: #2F415C;
  --pink-soft: #FFE7F0;
  --teal-soft: #E4F9F2;
  --sky-soft:  #E8F5FF;
  --violet-soft: #EEE9FF;
  --sun-soft: #FFF6D6;
   --ring: color-mix(in srgb, var(--sky) 76%, white);
   --brand-grad-warm: linear-gradient(135deg, color-mix(in srgb, var(--sun) 78%, white) 0%, color-mix(in srgb, var(--coral) 55%, var(--sun)) 100%);
   --brand-grad-sky: linear-gradient(135deg, color-mix(in srgb, var(--sky) 72%, white) 0%, color-mix(in srgb, var(--teal) 35%, var(--sky)) 100%);
  --ease-back: cubic-bezier(.28, 1.2, .4, 1);
   --shadow-pop: 0 8px 20px rgba(111, 141, 181, 0.2);
  --shadow-soft: 0 6px 16px rgba(111, 141, 181, 0.14);
  --sidebar-w: 320px;
  --topbar-h: 48px;
  --studio-col-max: 880px;
  --content-w: calc(var(--sidebar-w) + var(--studio-col-max) + 2rem);
}

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