/* Tutorials hero aligned with the site's periwinkle tool palette. */
body.tutorials-tool-page.light-theme .tutorial-hero {
  border-color:rgba(82,105,190,.15) !important;
  background:radial-gradient(circle at 8% 8%,#fff,transparent 34%),radial-gradient(circle at 88% 14%,#cbd7ff,transparent 36%),linear-gradient(145deg,#f6f8ff,#dce4ff) !important;
  box-shadow:0 24px 60px rgba(73,84,145,.14),inset 0 1px 0 #fff !important;
}
body.tutorials-tool-page.light-theme .tutorial-eyebrow { color:#6075c7 !important; }
body.tutorials-tool-page.light-theme .tutorial-eyebrow-mark {
  border-color:#cbd5f5 !important;
  color:#6075c7 !important;
  background:#e7edff !important;
  box-shadow:inset 0 1px 0 #fff;
}
body.tutorials-tool-page.light-theme .tutorial-hero h1 strong {
  color:#5368bb !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
}
body.tutorials-tool-page.light-theme .tutorial-primary-btn,
body.tutorials-tool-page.light-theme .tutorial-secondary-btn {
  border:1px solid #cbd5f4 !important;
  color:#27345f !important;
  background:linear-gradient(145deg,#f7f9ff,#dce5ff) !important;
  box-shadow:0 10px 22px rgba(65,79,145,.12),inset 0 1px 0 #fff !important;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
body.tutorials-tool-page.light-theme .tutorial-primary-btn:hover,
body.tutorials-tool-page.light-theme .tutorial-secondary-btn:hover {
  background:linear-gradient(145deg,#edf2ff,#cfdbff) !important;
  box-shadow:0 14px 28px rgba(65,79,145,.17),inset 0 1px 0 #fff !important;
  transform:translateY(-2px);
}
body.tutorials-tool-page.light-theme .tutorial-hero-stats div {
  border-color:#cbd5f2 !important;
  background:#f5f7ff !important;
  box-shadow:inset 0 1px 0 #fff;
}
body.tutorials-tool-page.light-theme .tutorial-hero-stats strong { color:#5368bb !important; }
body.tutorials-tool-page.light-theme .tutorial-hero-stats span { color:#68739b !important; }

body.tutorials-tool-page.light-theme .learning-path-card {
  border-color:#c5d0f1 !important;
  background:#f7f9ff !important;
  box-shadow:0 28px 60px rgba(65,78,144,.18),inset 0 1px 0 #fff !important;
}
body.tutorials-tool-page.light-theme .learning-path-label { color:#6075c7 !important; }
body.tutorials-tool-page.light-theme .learning-path-time {
  border-color:#cbd5f2 !important;
  color:#5368bb !important;
  background:#e7edff !important;
}
body.tutorials-tool-page.light-theme .learning-progress > span b { color:#6075c7 !important; }
body.tutorials-tool-page.light-theme .learning-progress > div { background:#dfe5f5 !important; }
body.tutorials-tool-page.light-theme .learning-progress i { background:linear-gradient(90deg,#91a5eb,#6075c7) !important; }
body.tutorials-tool-page.light-theme .learning-path-step:hover,
body.tutorials-tool-page.light-theme .learning-path-step.active {
  border-color:#c5d0f1 !important;
  background:#e7edff !important;
}
body.tutorials-tool-page.light-theme .learning-step-number {
  border-color:#d2daf1 !important;
  color:#7180b2 !important;
  background:#eef2ff !important;
}
body.tutorials-tool-page.light-theme .learning-path-step.active .learning-step-number {
  border-color:#aebde9 !important;
  color:#fff !important;
  background:linear-gradient(145deg,#91a5eb,#667bd0) !important;
  box-shadow:0 6px 14px rgba(70,88,168,.16),inset 0 1px 0 rgba(255,255,255,.3);
}
body.tutorials-tool-page.light-theme .learning-path-step svg { stroke:#7a89bd !important; }
body.tutorials-tool-page.light-theme .learning-path-continue {
  border-color:#bdc9ee !important;
  color:#fff !important;
  background:linear-gradient(135deg,#91a5eb,#667bd0) !important;
  box-shadow:0 10px 22px rgba(70,88,168,.18),inset 0 1px 0 rgba(255,255,255,.3);
}

/* Guide library cards and filters. */
body.tutorials-tool-page.light-theme .tutorial-shell {
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.tutorials-tool-page.light-theme .tutorial-kicker { color:#6075c7 !important; }
body.tutorials-tool-page.light-theme .tutorial-filter {
  min-height:34px;
  padding:0 12px;
  border:1px solid #ccd6f2 !important;
  border-radius:10px !important;
  color:#5e698f !important;
  background:#fff !important;
  box-shadow:inset 0 1px 0 #fff;
}
body.tutorials-tool-page.light-theme .tutorial-filter:hover,
body.tutorials-tool-page.light-theme .tutorial-filter.active {
  border-color:#aebde9 !important;
  color:#fff !important;
  background:#667bd0 !important;
  box-shadow:0 7px 16px rgba(70,88,168,.16),inset 0 1px 0 rgba(255,255,255,.28);
}
body.tutorials-tool-page.light-theme .tutorial-card,
body.tutorials-tool-page.light-theme .tutorial-card.tutorial-card-featured {
  border-color:#ccd6f2 !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(65,78,144,.07),inset 0 1px 0 #fff !important;
}
body.tutorials-tool-page.light-theme .tutorial-card:hover {
  border-color:#aebde9 !important;
  box-shadow:0 17px 34px rgba(65,78,144,.13),inset 0 1px 0 #fff !important;
}
body.tutorials-tool-page.light-theme .tutorial-card-art,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-purple,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-blue,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-pink,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-orange,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-green,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-cyan {
  border-color:#d4dcf3 !important;
  color:#667bd0 !important;
  background:#edf2ff !important;
}
body.tutorials-tool-page.light-theme .tutorial-card-art::before {
  background:#c9d5fb !important;
  opacity:.45 !important;
}
body.tutorials-tool-page.light-theme .tutorial-card-art svg {
  stroke:#667bd0 !important;
  filter:drop-shadow(0 5px 10px rgba(70,88,168,.15)) !important;
}
body.tutorials-tool-page.light-theme .tutorial-number,
body.tutorials-tool-page.light-theme .tutorial-level {
  border-color:#bdc9ec !important;
  color:#fff !important;
  background:#667bd0 !important;
  box-shadow:0 5px 12px rgba(70,88,168,.14);
}
body.tutorials-tool-page.light-theme .tutorial-card-meta,
body.tutorials-tool-page.light-theme .tutorial-card-meta span:first-child {
  color:#6075c7 !important;
}
body.tutorials-tool-page.light-theme .tutorial-card-body > a {
  width:fit-content;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border:1px solid #bdc9ec !important;
  border-radius:10px !important;
  color:#fff !important;
  background:#667bd0 !important;
  box-shadow:0 7px 16px rgba(70,88,168,.15),inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
body.tutorials-tool-page.light-theme .tutorial-card-body > a span { color:#fff !important; }
body.tutorials-tool-page.light-theme .tutorial-card-body > a:hover {
  background:#5368bb !important;
  box-shadow:0 10px 21px rgba(70,88,168,.2),inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform:translateY(-2px);
}

/* Full process and FAQ. */
body.tutorials-tool-page.light-theme .process-line::before {
  background:linear-gradient(90deg,transparent,#91a5eb 16%,#667bd0 50%,#91a5eb 84%,transparent) !important;
}
body.tutorials-tool-page.light-theme .process-line article {
  border-color:#ccd6f2 !important;
  background:#fff !important;
  box-shadow:0 12px 28px rgba(65,78,144,.08),inset 0 1px 0 #fff !important;
}
body.tutorials-tool-page.light-theme .process-line article > span {
  color:#c1cceb !important;
}
body.tutorials-tool-page.light-theme .process-icon {
  border-color:#bdc9ec !important;
  color:#fff !important;
  background:linear-gradient(145deg,#91a5eb,#667bd0) !important;
  box-shadow:0 9px 20px rgba(70,88,168,.19),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
body.tutorials-tool-page.light-theme .faq-intro > a {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border:1px solid #bdc9ec;
  border-radius:10px;
  color:#fff !important;
  background:#667bd0 !important;
  box-shadow:0 8px 18px rgba(70,88,168,.16),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
body.tutorials-tool-page.light-theme .faq-intro > a:hover {
  background:#5368bb !important;
  box-shadow:0 11px 23px rgba(70,88,168,.21),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-2px);
}
body.tutorials-tool-page.light-theme .faq-list details {
  border-color:#ccd6f2 !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(65,78,144,.07),inset 0 1px 0 #fff !important;
}
body.tutorials-tool-page.light-theme .faq-list details[open] {
  border-color:#aebde9 !important;
  box-shadow:0 14px 30px rgba(65,78,144,.11),inset 0 1px 0 #fff !important;
}
body.tutorials-tool-page.light-theme .faq-list summary span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #c7d1ef;
  border-radius:8px;
  color:#6075c7 !important;
  background:#edf2ff !important;
  transform:none !important;
  transition:color .2s ease,background .2s ease,border-color .2s ease !important;
}
body.tutorials-tool-page.light-theme .faq-list details[open] summary span {
  color:#fff !important;
  background:#667bd0 !important;
  transform:none !important;
  font-size:0;
}
body.tutorials-tool-page.light-theme .faq-list details[open] summary span::before {
  content:"−";
  font-size:1.15rem;
  line-height:1;
}

/* =========================================================
   TUTORIALS — REPDATABASE DREAMY PERIWINKLE THEME
   Final light-theme layer; replaces every legacy blue state.
   ========================================================= */
body.tutorials-tool-page.light-theme {
  --tu-ink:#19182a;
  --tu-copy:#625e74;
  --tu-line:rgba(91,88,128,.17);
  --tu-line-strong:rgba(91,88,128,.28);
  --tu-lilac:#e7d8ff;
  --tu-periwinkle:#b8c0ff;
  --tu-surface:#fbfaff;
  --tu-soft:#f1edff;
  --tu-gradient:linear-gradient(135deg,#e7d8ff 0%,#ddd6ff 45%,#c9c8ff 72%,#b8c0ff 100%);
}
body.tutorials-tool-page.light-theme .tutorial-hero {
  border-color:var(--tu-line)!important;
  color:var(--tu-ink)!important;
  background:radial-gradient(circle at 91% 5%,rgba(255,255,255,.56),transparent 29%),var(--tu-gradient)!important;
  box-shadow:0 24px 58px rgba(80,76,126,.15),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
body.tutorials-tool-page.light-theme :is(.tutorial-hero-glow,.tutorial-hero::before) { display:none!important; }
body.tutorials-tool-page.light-theme .tutorial-hero-glow { background:transparent!important; }
body.tutorials-tool-page.light-theme .tutorial-eyebrow { color:#615c78!important; }
body.tutorials-tool-page.light-theme .tutorial-eyebrow-mark {
  border-color:var(--tu-line)!important;
  color:#514c68!important;
  background:linear-gradient(145deg,#f4eeff,#d9daff)!important;
  box-shadow:inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .tutorial-hero h1,
body.tutorials-tool-page.light-theme .tutorial-hero h1 strong {
  color:var(--tu-ink)!important;
  background:none!important;
  -webkit-text-fill-color:var(--tu-ink)!important;
}
body.tutorials-tool-page.light-theme .tutorial-hero-content>p { color:var(--tu-copy)!important; }
body.tutorials-tool-page.light-theme :is(.tutorial-primary-btn,.tutorial-secondary-btn,.learning-path-continue) {
  border:1px solid rgba(255,255,255,.86)!important;
  color:#29263b!important;
  background:linear-gradient(135deg,#e7d8ff,#b8c0ff)!important;
  box-shadow:0 11px 24px rgba(72,68,112,.16),inset 0 1px 0 rgba(255,255,255,.78)!important;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease!important;
}
body.tutorials-tool-page.light-theme :is(.tutorial-primary-btn,.tutorial-secondary-btn,.learning-path-continue):hover {
  border-color:rgba(255,255,255,.92)!important;
  color:#19182a!important;
  background:linear-gradient(135deg,#efe4ff,#c6ccff)!important;
  box-shadow:0 16px 30px rgba(72,68,112,.2),inset 0 1px 0 #fff!important;
  filter:none!important;
  transform:translateY(-2px)!important;
}
body.tutorials-tool-page.light-theme .tutorial-play { color:#464156!important;background:rgba(255,255,255,.48)!important; }
body.tutorials-tool-page.light-theme .tutorial-hero-stats>div {
  border-color:var(--tu-line)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(231,216,255,.4))!important;
  box-shadow:inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .tutorial-hero-stats strong { color:#403b56!important; }
body.tutorials-tool-page.light-theme .tutorial-hero-stats span { color:#706b80!important; }

body.tutorials-tool-page.light-theme .learning-path-card {
  border-color:var(--tu-line)!important;
  color:var(--tu-ink)!important;
  background:linear-gradient(155deg,#fff,#f0ebff)!important;
  box-shadow:0 28px 60px rgba(72,68,112,.16),inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .learning-path-label { color:#615c78!important; }
body.tutorials-tool-page.light-theme .learning-path-time {
  border-color:var(--tu-line)!important;
  color:#555068!important;
  background:#f1ecff!important;
}
body.tutorials-tool-page.light-theme .learning-progress>span { color:#716c80!important; }
body.tutorials-tool-page.light-theme .learning-progress>span b { color:#555068!important; }
body.tutorials-tool-page.light-theme .learning-progress>div { background:#e3dfea!important; }
body.tutorials-tool-page.light-theme .learning-progress i { background:linear-gradient(90deg,#e7d8ff,#b8c0ff)!important; }
body.tutorials-tool-page.light-theme .learning-path-step {
  border-color:transparent!important;
  color:var(--tu-ink)!important;
  background:transparent!important;
}
body.tutorials-tool-page.light-theme .learning-path-step:hover,
body.tutorials-tool-page.light-theme .learning-path-step.active {
  border-color:var(--tu-line)!important;
  background:linear-gradient(135deg,#f4efff,#dedfff)!important;
}
body.tutorials-tool-page.light-theme .learning-path-step p,
body.tutorials-tool-page.light-theme .learning-path-step small { color:#716c80!important; }
body.tutorials-tool-page.light-theme .learning-step-number {
  border-color:var(--tu-line)!important;
  color:#686277!important;
  background:#f4f0fa!important;
}
body.tutorials-tool-page.light-theme .learning-path-step.active .learning-step-number {
  border-color:rgba(255,255,255,.82)!important;
  color:#403b55!important;
  background:linear-gradient(145deg,#e7d8ff,#b8c0ff)!important;
  box-shadow:0 6px 15px rgba(72,68,112,.14),inset 0 1px 0 rgba(255,255,255,.75)!important;
}
body.tutorials-tool-page.light-theme .learning-path-step svg { color:#6c667c!important;stroke:#6c667c!important; }

body.tutorials-tool-page.light-theme .tutorial-shell { border-color:transparent!important;background:transparent!important;box-shadow:none!important; }
body.tutorials-tool-page.light-theme :is(.tutorial-kicker,.tutorial-card-meta,.tutorial-card-meta span:first-child) { color:#615c78!important; }
body.tutorials-tool-page.light-theme .tutorial-filter {
  border-color:var(--tu-line)!important;
  color:#5d586d!important;
  background:#fff!important;
  box-shadow:inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.tool-periwinkle-page.light-theme .tutorial-filter {
  border-color:var(--tu-line)!important;
  color:#5d586d!important;
  background:#fff!important;
  outline-color:rgba(231,216,255,.8)!important;
}
body.tutorials-tool-page.light-theme .tutorial-filter:hover,
body.tutorials-tool-page.light-theme .tutorial-filter.active,
body.tutorials-tool-page.tool-periwinkle-page.light-theme .tutorial-filter:hover,
body.tutorials-tool-page.tool-periwinkle-page.light-theme .tutorial-filter.active {
  border-color:rgba(255,255,255,.84)!important;
  color:#302c42!important;
  background:linear-gradient(135deg,#e7d8ff,#b8c0ff)!important;
  box-shadow:0 8px 18px rgba(72,68,112,.15),inset 0 1px 0 rgba(255,255,255,.76)!important;
}
body.tutorials-tool-page.light-theme .tutorial-card,
body.tutorials-tool-page.light-theme .tutorial-card.tutorial-card-featured {
  border-color:var(--tu-line)!important;
  color:var(--tu-ink)!important;
  background:linear-gradient(155deg,#fff,#f3efff)!important;
  box-shadow:0 10px 24px rgba(72,68,112,.07),inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .tutorial-card:hover {
  border-color:var(--tu-line-strong)!important;
  box-shadow:0 18px 35px rgba(72,68,112,.13),inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .tutorial-card :is(h2,h3,strong) { color:var(--tu-ink)!important; }
body.tutorials-tool-page.light-theme .tutorial-card p { color:var(--tu-copy)!important; }
body.tutorials-tool-page.light-theme .tutorial-card-art,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-purple,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-blue,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-pink,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-orange,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-green,
body.tutorials-tool-page.light-theme .tutorial-card-art.art-cyan {
  border-color:var(--tu-line)!important;
  color:#514c68!important;
  background:linear-gradient(145deg,#f7f3ff,#dfe0ff)!important;
}
body.tutorials-tool-page.light-theme .tutorial-card-art::before { background:#e7d8ff!important;opacity:.55!important; }
body.tutorials-tool-page.light-theme .tutorial-card-art svg { color:#5b566d!important;stroke:#5b566d!important;filter:drop-shadow(0 5px 10px rgba(72,68,112,.13))!important; }
body.tutorials-tool-page.light-theme :is(.tutorial-number,.tutorial-level) {
  border-color:rgba(255,255,255,.82)!important;
  color:#403b55!important;
  background:linear-gradient(145deg,#e7d8ff,#b8c0ff)!important;
  box-shadow:0 5px 13px rgba(72,68,112,.14)!important;
}
body.tutorials-tool-page.light-theme .tutorial-card-body>a,
body.tutorials-tool-page.light-theme .faq-intro>a {
  border:1px solid rgba(255,255,255,.84)!important;
  color:#302c42!important;
  background:linear-gradient(135deg,#e7d8ff,#b8c0ff)!important;
  box-shadow:0 8px 18px rgba(72,68,112,.15),inset 0 1px 0 rgba(255,255,255,.76)!important;
}
body.tutorials-tool-page.light-theme .tutorial-card-body>a span { color:#302c42!important; }
body.tutorials-tool-page.light-theme .tutorial-card-body>a:hover,
body.tutorials-tool-page.light-theme .faq-intro>a:hover {
  color:#19182a!important;
  background:linear-gradient(135deg,#efe4ff,#c6ccff)!important;
  box-shadow:0 12px 24px rgba(72,68,112,.2),inset 0 1px 0 #fff!important;
}

body.tutorials-tool-page.light-theme .process-line::before { background:linear-gradient(90deg,transparent,#e7d8ff 16%,#b8c0ff 50%,#e7d8ff 84%,transparent)!important; }
body.tutorials-tool-page.light-theme .process-line article {
  border-color:var(--tu-line)!important;
  color:var(--tu-ink)!important;
  background:linear-gradient(155deg,#fff,#f3efff)!important;
  box-shadow:0 12px 28px rgba(72,68,112,.08),inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .process-line article>span { color:#c8c2d5!important; }
body.tutorials-tool-page.light-theme .process-line article p { color:var(--tu-copy)!important; }
body.tutorials-tool-page.light-theme .process-icon {
  border-color:rgba(255,255,255,.84)!important;
  color:#403b55!important;
  background:linear-gradient(145deg,#e7d8ff,#b8c0ff)!important;
  box-shadow:0 9px 20px rgba(72,68,112,.16),inset 0 1px 0 rgba(255,255,255,.76)!important;
}
body.tutorials-tool-page.light-theme .tutorial-faq p { color:var(--tu-copy)!important; }
body.tutorials-tool-page.light-theme .faq-list details {
  border-color:var(--tu-line)!important;
  color:var(--tu-ink)!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(72,68,112,.07),inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .faq-list details:hover,
body.tutorials-tool-page.light-theme .faq-list details[open] {
  border-color:var(--tu-line-strong)!important;
  background:linear-gradient(145deg,#fff,#f1ecff)!important;
  box-shadow:0 15px 31px rgba(72,68,112,.11),inset 0 1px 0 #fff!important;
}
body.tutorials-tool-page.light-theme .faq-list summary { color:var(--tu-ink)!important; }
body.tutorials-tool-page.light-theme .faq-list details p { color:var(--tu-copy)!important; }
body.tutorials-tool-page.light-theme .faq-list summary span {
  border-color:var(--tu-line)!important;
  color:#5e596f!important;
  background:#f2edff!important;
}
body.tutorials-tool-page.light-theme .faq-list details:hover summary span,
body.tutorials-tool-page.light-theme .faq-list details[open] summary span {
  border-color:rgba(255,255,255,.82)!important;
  color:#403b55!important;
  background:linear-gradient(145deg,#e7d8ff,#b8c0ff)!important;
}