/* System-aware theme, plus a compact manual override in the site header. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.brand-logo-crop {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 851 / 511;
  border-radius: 7px;
  background: transparent;
}

.brand-logo-crop img {
  position: absolute;
  left: -19.4%;
  top: -65.7%;
  display: block;
  width: 139%;
  max-width: none;
  height: auto;
}

.brand-logo-header { width: clamp(100px, 7vw, 116px); }
.footer-logo-crop { width: clamp(225px, 34vw, 360px); }

/* Frosted light surfaces use the same depth and blur as the dark theme. */
html:not(.theme-dark) {
  --light-glass-border: rgb(149 74 111 / 20%);
  --light-glass-surface: linear-gradient(140deg, rgb(255 255 255 / 76%), rgb(255 247 251 / 58%));
  --light-glass-shadow: inset 0 1px rgb(255 255 255 / 94%), 0 14px 34px rgb(93 48 75 / 8%);
}
html:not(.theme-dark) body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 8% 7%, rgb(149 204 161 / 18%), transparent 30%),
    radial-gradient(ellipse at 88% 16%, rgb(237 153 194 / 16%), transparent 34%),
    radial-gradient(ellipse at 18% 76%, rgb(218 171 211 / 15%), transparent 32%),
    radial-gradient(ellipse at 91% 88%, rgb(149 204 179 / 14%), transparent 29%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
html:not(.theme-dark) .site-header {
  background: rgb(255 253 250 / 76%);
  border-bottom: 1px solid rgb(149 74 111 / 14%);
  box-shadow: 0 8px 28px rgb(93 48 75 / 8%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
html:not(.theme-dark) .theme-toggle,
html:not(.theme-dark) .menu-toggle,
html:not(.theme-dark) .hero-actions > .button-outline,
html:not(.theme-dark) .community-heading > .button {
  border-color: rgb(116 8 63 / 29%);
  background: rgb(255 255 255 / 55%);
  box-shadow: inset 0 1px rgb(255 255 255 / 90%), 0 6px 18px rgb(93 48 75 / 6%);
  -webkit-backdrop-filter: blur(13px) saturate(125%);
  backdrop-filter: blur(13px) saturate(125%);
}
html:not(.theme-dark) .theme-toggle,
html:not(.theme-dark) .menu-toggle { border-radius: 14px; }
html:not(.theme-dark) .hero { background: transparent; }
html:not(.theme-dark) .catalog-mockups .camp-card {
  border-color: var(--light-glass-border);
  box-shadow: var(--light-glass-shadow);
}
html:not(.theme-dark) .catalog-mockups .camp-green { --light-glass-border: rgb(62 124 65 / 26%); }
html:not(.theme-dark) .catalog-mockups .camp-rose { --light-glass-border: rgb(144 6 77 / 23%); }
html:not(.theme-dark) .catalog-mockups .camp-pink { --light-glass-border: rgb(219 0 110 / 24%); }
html:not(.theme-dark) .catalog-mockups .camp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgb(255 255 255 / 72%), rgb(255 255 255 / 40%) 44%, rgb(255 255 255 / 4%) 80%);
}
html:not(.theme-dark) .catalog-mockups .course-body { z-index: 1; }
html:not(.theme-dark) .catalog-mockups .camp-corner-icon {
  z-index: 2;
  border: 1px solid rgb(255 255 255 / 78%);
  background: rgb(255 255 255 / 56%);
  box-shadow: inset 0 1px rgb(255 255 255 / 90%), 0 8px 24px rgb(93 48 75 / 9%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
}
html:not(.theme-dark) .product-card,
html:not(.theme-dark) .about-card,
html:not(.theme-dark) .faq-list details,
html:not(.theme-dark) .footer-shortcut,
html:not(.theme-dark) .footer-column {
  border: 1px solid var(--light-glass-border);
  border-radius: 18px;
  background: var(--light-glass-surface);
  box-shadow: var(--light-glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
html:not(.theme-dark) .product-card { padding: 12px; }
html:not(.theme-dark) .product-card + .product-card { border-top: 1px solid var(--light-glass-border); }
html:not(.theme-dark) .about-card { border-color: rgb(62 124 65 / 23%); }
html:not(.theme-dark) .faq-list details[open] {
  border-color: rgb(144 6 77 / 30%);
  background: linear-gradient(140deg, rgb(255 255 255 / 88%), rgb(255 240 248 / 76%));
}
html:not(.theme-dark) .note-open-hint,
html:not(.theme-dark) .community-label {
  border-color: rgb(255 255 255 / 86%);
  color: #263329;
  background: rgb(255 253 250 / 82%);
  box-shadow: inset 0 1px rgb(255 255 255 / 92%), 0 8px 24px rgb(68 42 58 / 12%);
  -webkit-backdrop-filter: blur(13px) saturate(135%);
  backdrop-filter: blur(13px) saturate(135%);
}
html:not(.theme-dark) .community-label .label-icon { color: #8e0751; background: rgb(242 202 223 / 64%); }
html:not(.theme-dark) .learning-steps li > span,
html:not(.theme-dark) .footer-shortcut-icon {
  border: 1px solid rgb(169 74 125 / 22%);
  color: #8e0751;
  background: linear-gradient(145deg, rgb(255 242 250 / 83%), rgb(244 214 233 / 62%));
  box-shadow: inset 0 1px rgb(255 255 255 / 95%), 0 6px 18px rgb(144 6 77 / 7%);
}
html:not(.theme-dark) .site-footer { background: transparent; }
html:not(.theme-dark) .footer-wave path { stroke: #ca6a9b; filter: drop-shadow(0 0 7px rgb(218 102 162 / 26%)); }
html:not(.theme-dark) .footer-shortcuts { gap: 10px; }
html:not(.theme-dark) .footer-shortcut { justify-content: center; }
html:not(.theme-dark) .footer-shortcut + .footer-shortcut::before { display: none; }
html:not(.theme-dark) .footer-promo {
  border: 1px solid rgb(169 74 125 / 24%);
  background: linear-gradient(120deg, rgb(255 234 246 / 78%), rgb(255 255 255 / 62%) 66%, rgb(244 229 241 / 65%));
  box-shadow: var(--light-glass-shadow), 0 0 35px rgb(222 23 127 / 5%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
html:not(.theme-dark) .footer-columns { gap: 12px; border-top: 0; border-bottom: 0; }
html:not(.theme-dark) .footer-column,
html:not(.theme-dark) .footer-column:first-child,
html:not(.theme-dark) .footer-column:last-child { padding: 22px clamp(16px, 2vw, 28px); }
html:not(.theme-dark) .footer-column h2::after {
  background: linear-gradient(90deg, #a71565, #df8bb6);
  box-shadow: 0 0 10px rgb(201 72 139 / 18%);
}
html:not(.theme-dark) .footer-contact-link {
  border-color: rgb(55 122 87 / 42%);
  background: linear-gradient(120deg, rgb(227 247 233 / 80%), rgb(255 255 255 / 58%));
  box-shadow: inset 0 1px rgb(255 255 255 / 90%), 0 6px 20px rgb(55 122 87 / 7%);
}
html:not(.theme-dark) .footer-contact-link:hover { color: #fff; background: #287653; }
html:not(.theme-dark) .course-dialog,
html:not(.theme-dark) .legal-dialog,
html:not(.theme-dark) .note-dialog-toolbar,
html:not(.theme-dark) .analytics-consent {
  border: 1px solid rgb(169 74 125 / 24%);
  background: linear-gradient(140deg, rgb(255 253 250 / 96%), rgb(255 244 250 / 93%));
  box-shadow: var(--light-glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
@media (max-width: 900px) {
  html:not(.theme-dark) .main-nav {
    border-color: var(--light-glass-border);
    background: rgb(255 253 250 / 94%);
    box-shadow: var(--light-glass-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
}
@media (max-width: 700px) {
  html:not(.theme-dark) .footer-shortcuts { gap: 8px; }
  html:not(.theme-dark) .footer-column,
  html:not(.theme-dark) .footer-column:first-child,
  html:not(.theme-dark) .footer-column:last-child { padding: 20px 17px; }
  html:not(.theme-dark) .footer-legal { margin-top: 8px; padding-top: 0; }
  html:not(.theme-dark) .site-footer { padding-bottom: 24px; }
  html:not(.theme-dark) .footer-molecule { bottom: 4px; }
  html:not(.theme-dark) .footer-flask { bottom: 0; }
}

.theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dbe0d4;
  border-radius: 11px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.theme-toggle:hover { background: #f1f4ed; }
.theme-toggle:focus-visible { outline: 3px solid #a0397c; outline-offset: 3px; }
.theme-toggle-icon { width: 19px; height: 19px; color: var(--green); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.community-label {
  border: 1px solid #ffffff38;
  color: #fff;
  background: #111613c9;
  box-shadow: 0 8px 24px #0004;
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}
.community-label .label-icon,
.community-question .label-icon { color: #fff; background: #ffffff24; }

/* Keep the footer on the same page canvas; its former tinted wash made it
   look like a separate panel in light mode too. The wave and corner art remain. */
.site-footer { background: var(--paper); }
.site-footer::after { background: transparent; opacity: 0; }

@media (min-width: 701px) {
  .site-header { height: clamp(78px, 5.3vw, 90px); min-height: 0; max-height: none; }
}

@media (max-width: 700px) {
  .site-header { height: 68px; }
  .header-inner { gap: 8px; }
  .brand-logo-header { width: clamp(82px, 23vw, 90px); }
  .header-actions { gap: 7px; }
  .theme-toggle { flex-basis: 42px; width: 42px; height: 42px; }
  .theme-toggle-icon { width: 18px; height: 18px; }
  .menu-toggle { flex: 0 0 42px; width: 42px; height: 42px; }
  .footer-logo-crop { width: min(70vw, 280px); }
}

html.theme-dark {
  color-scheme: dark;
  --paper: #101314;
  --ink: #f5f2f5;
  --muted: #c1c0c5;
  --wine: #ff63b3;
  --green: #b7ef70;
  --pink: #ff42a5;
  --line: #44313e;
  --glass: rgb(20 20 24 / 78%);
  --glass-border: rgb(255 92 175 / 24%);
}

html.theme-dark body { color: var(--ink); background: var(--paper); }
html.theme-dark .site-header { background: #252e26f2; box-shadow: 0 2px 18px #0004; border-bottom: 1px solid #ffffff0b; }
html.theme-dark .main-nav { color: var(--ink); }
html.theme-dark .main-nav > a:not(.button):hover { color: #ff9bc6; }
html.theme-dark .menu-toggle { border-color: #586557; background: #2a342b; }
html.theme-dark .menu-toggle > span { background: #e6efe3; }
html.theme-dark .theme-toggle { border-color: #586557; background: #2a342b; color: #f0f2eb; }
html.theme-dark .theme-toggle:hover { background: #354235; }
html.theme-dark .theme-toggle-icon { color: #aad889; }
html.theme-dark .brand-logo-crop { background: transparent; box-shadow: none; }
html.theme-dark .hero .eyebrow,
html.theme-dark .hero-description,
html.theme-dark .hero-teacher,
html.theme-dark .notes-intro > p,
html.theme-dark .section-description,
html.theme-dark .learning-steps p,
html.theme-dark .about-role,
html.theme-dark .about-experience,
html.theme-dark .video-channel,
html.theme-dark .closing-actions p,
html.theme-dark .community-intro { color: var(--muted); }
html.theme-dark .hero h1 span { background: linear-gradient(125deg, #f2a0c0 2%, #ff8dc0 65%); background-clip: text; -webkit-text-fill-color: transparent; }
html.theme-dark .hero-teacher svg { stroke: var(--paper); }
html.theme-dark .button { background: linear-gradient(110deg, #28652f, #347d3c); color: #fff; }
html.theme-dark .button-outline { color: var(--ink); border-color: #9ca89e; background: #20282080; }
html.theme-dark .text-link,
html.theme-dark .product-format,
html.theme-dark .product-action { color: #9cdb84; }

html.theme-dark .camp-card { border-color: #4b624c; background: #2b382c; }
html.theme-dark .camp-rose { border-color: #69465d; background: #382a36; }
html.theme-dark .camp-pink { border-color: #74475f; background: #3d2a37; }
/* Camp mockups keep their light photographic surfaces in dark mode, so their
   copy and links must stay dark enough to contrast with those images. */
html.theme-dark .catalog-mockups .camp-card h3 { color: #111a17; }
html.theme-dark .catalog-mockups .camp-card p { color: #3e4b43; }
html.theme-dark .catalog-mockups .course-detail { color: #23682d; }
html.theme-dark .catalog-mockups .camp-rose .course-detail { color: #830849; }
html.theme-dark .catalog-mockups .camp-pink .course-detail { color: #b40863; }
html.theme-dark .molecule-blob { background: #364838; }
html.theme-dark .camp-rose .molecule-blob { background: #503b4c; }
html.theme-dark .camp-pink .molecule-blob { background: #574051; }
html.theme-dark .catalog-mockups .camp-card::after { background: linear-gradient(90deg, #f4f8ef 32%, #f4f8ef00 70%); }
html.theme-dark .catalog-mockups .camp-rose::after { background: linear-gradient(90deg, #fcf1f5 32%, #fcf1f500 70%); }
html.theme-dark .catalog-mockups .camp-pink::after { background: linear-gradient(90deg, #fff0f6 32%, #fff0f600 70%); }
html.theme-dark .learning-steps li > span { background: #1c3020; color: #a8e18e; border-color: #446348; }
html.theme-dark .learning-steps li:nth-child(2) > span { background: #392436; color: #f2a1c5; border-color: #69415a; }
html.theme-dark .learning-steps li:nth-child(3) > span { background: #3d2033; color: #ff91c5; border-color: #70405f; }
html.theme-dark .about-card { border-color: #4c5b49; background: linear-gradient(110deg, #2b352c, #303a2e); }
html.theme-dark .about-notebook::before { background: #3c4b37; }

html.theme-dark .faq-list details,
html.theme-dark .faq-list details[open] { border-color: #536156; background: #2a342c; }
html.theme-dark .faq-list summary > span { color: #a8d889; }
html.theme-dark .faq-list details[open] summary { color: #d5edc8; }
html.theme-dark .closing-inner { background: #2b362c; }
html.theme-dark .closing-inner::after { background: linear-gradient(90deg, #2b362c 0%, #2b362cf2 42%, #2b362cd9 57%, #2b362c00 83%); }
html.theme-dark .community-heading .eyebrow { color: #a4d881; }
html.theme-dark .community-heading > .button { border-color: #77b773; color: #b6e49f; background: #172118; }

html.theme-dark .site-footer { color: var(--ink); background: var(--paper); }
html.theme-dark .footer-wave path { stroke: #704357; }
html.theme-dark .footer-brand-center > p,
html.theme-dark .footer-shortcut small,
html.theme-dark .footer-link-list a,
html.theme-dark .footer-social-list small,
html.theme-dark .footer-contact-column > p,
html.theme-dark .footer-legal { color: #b4beb6; }
html.theme-dark .footer-shortcut + .footer-shortcut::before { background: #424a44; }
html.theme-dark .footer-shortcut-icon { color: #f18eb8; background: #332432; }
html.theme-dark .footer-promo { background: linear-gradient(110deg, #2b1d27, #30212b); }
html.theme-dark .footer-promo-copy p { color: #c2c9c1; }
html.theme-dark .footer-promo-socials a + a::before { background: #584550; }
html.theme-dark .footer-column + .footer-column { border-color: #343e37; }
html.theme-dark .footer-column h2::after { background: #e47ba9; }
html.theme-dark .footer-link-list a:hover,
html.theme-dark .footer-social-list a:hover,
html.theme-dark .footer-legal button:hover { color: #ff9bc6; }
html.theme-dark .footer-contact-link { border-color: #72bb94; color: #a9e0c1; }
html.theme-dark .footer-contact-link:hover { color: #102017; background: #8ed1aa; }
html.theme-dark .site-footer a:focus-visible,
html.theme-dark .site-footer button:focus-visible { outline-color: #ff8dc0; }

html.theme-dark .skip-link { color: #101711; background: #fffdf9; }
html.theme-dark .product-cover { box-shadow: 0 8px 22px #0007; }
html.theme-dark .note-open-hint { color: #e5f2dc; border-color: #425242; background: #202b21f5; }
html.theme-dark .faq-list details p { color: var(--muted); }
html.theme-dark .dialog-close:hover,
html.theme-dark .legal-close:hover,
html.theme-dark .note-dialog-close:hover { background: #2b382d; }
html.theme-dark dialog { color: var(--ink); border-color: #414e43; background: #171e18; box-shadow: 0 30px 120px #0009; }
html.theme-dark dialog::backdrop { background: #020703b8; }
html.theme-dark .course-facts > div { border-color: #39443b; }
html.theme-dark .zoom-note { border-color: #526154; color: var(--ink); background: #202a21; }
html.theme-dark .note-dialog-toolbar { border-color: #374139; }
html.theme-dark .legal-section + .legal-section { border-color: #374139; }

html.theme-dark .analytics-consent {
  border-color: #59664f;
  color: #f2f1eb;
  background: #1d251f;
  box-shadow: 0 8px 32px #0009;
}
html.theme-dark .analytics-consent h2 { color: #ff9ac5; }
html.theme-dark .analytics-consent a { color: #ffc0dc; }
html.theme-dark .analytics-actions button { border-color: #e785ad; color: #ffd2e3; background: #242d26; }
html.theme-dark .analytics-actions button:hover { background: #3a2c35; }
html.theme-dark .analytics-settings { border-color: #78816f; color: #f2e7ed; background: #202720ed; }
html.theme-dark .analytics-consent :focus-visible,
html.theme-dark .analytics-settings:focus-visible { outline-color: #b4df79; }

html.theme-dark :focus-visible { outline-color: #f39bc0; }

@media (max-width: 700px) {
  html.theme-dark .main-nav { color: var(--ink); border-color: #536153; background: #2a342c; box-shadow: 0 16px 30px #0006; }
  html.theme-dark .main-nav > a { border-color: #303a32; }
  html.theme-dark .main-nav .button { border: 0; background: linear-gradient(110deg, #28652f, #347d3c); }
  html.theme-dark .brand-logo-header { width: clamp(82px, 23vw, 90px); }
}

/* Dark mode: chemistry-lab color, neon accents and restrained glass panels. */
html.theme-dark body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 8% 7%, rgb(24 95 66 / 17%), transparent 30%),
    radial-gradient(ellipse at 88% 16%, rgb(154 20 86 / 18%), transparent 34%),
    radial-gradient(ellipse at 18% 76%, rgb(74 25 70 / 16%), transparent 32%),
    radial-gradient(ellipse at 91% 88%, rgb(26 85 69 / 12%), transparent 29%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

html.theme-dark .site-header {
  background: rgb(11 13 15 / 78%);
  border-bottom: 1px solid rgb(255 255 255 / 13%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 28%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
html.theme-dark .theme-toggle,
html.theme-dark .menu-toggle {
  border-color: rgb(239 236 243 / 43%);
  border-radius: 14px;
  background: rgb(13 15 17 / 70%);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}
html.theme-dark .theme-toggle-icon { color: #d9f479; }
html.theme-dark .menu-toggle > span { background: #f5f2f5; }
html.theme-dark .main-nav { color: var(--ink); }
html.theme-dark .main-nav > a:not(.button):hover { color: #ff82c1; }
html.theme-dark .main-nav .button { color: #11170d; background: linear-gradient(115deg, #b7ef70, #79ca75); }

html.theme-dark .hero { background: transparent; }
html.theme-dark .hero .eyebrow { color: #d0d0cf; }
html.theme-dark .hero h1 { color: #f8f5f7; }
html.theme-dark .hero h1 span {
  background: linear-gradient(110deg, #ff9ccc, #ff43a5 75%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.theme-dark .hero-description,
html.theme-dark .hero-teacher { color: #d0cbd1; }
html.theme-dark .hero-actions > .button {
  color: #101711;
  background: linear-gradient(115deg, #a7e86f, #6dcf84);
  box-shadow: 0 0 24px rgb(108 207 132 / 19%);
}
html.theme-dark .hero-actions > .button-outline {
  color: #f6f1f5;
  border-color: rgb(246 241 245 / 58%);
  background: rgb(13 15 17 / 54%);
}
html.theme-dark .hero-scene { box-shadow: 0 18px 48px rgb(0 0 0 / 32%); }

/* The camp art is intentionally dimmed in dark mode so its foreground text
   remains bright and readable on both mobile and desktop. */
html.theme-dark .catalog-mockups .camp-card {
  --camp-edge: rgb(255 92 175 / 30%);
  border-color: var(--camp-edge);
  background: #171719;
  box-shadow: 0 16px 38px rgb(0 0 0 / 32%), inset 0 1px rgb(255 255 255 / 7%);
}
html.theme-dark .catalog-mockups .camp-green { --camp-edge: rgb(166 229 119 / 33%); }
html.theme-dark .catalog-mockups .camp-rose { --camp-edge: rgb(255 92 175 / 35%); }
html.theme-dark .catalog-mockups .camp-pink { --camp-edge: rgb(255 66 165 / 38%); }
html.theme-dark .catalog-mockups .camp-background {
  z-index: 0;
  filter: brightness(.78) saturate(.98);
}
html.theme-dark .catalog-mockups .camp-card::after,
html.theme-dark .catalog-mockups .camp-rose::after,
html.theme-dark .catalog-mockups .camp-pink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgb(12 14 16 / 94%) 0%, rgb(15 14 18 / 86%) 32%, rgb(14 13 17 / 68%) 51%, rgb(14 13 17 / 24%) 73%, transparent 100%);
}
html.theme-dark .catalog-mockups .course-body { z-index: 2; }
html.theme-dark .catalog-mockups .camp-corner-icon {
  z-index: 3;
  color: var(--camp-tone);
  border: 1px solid rgb(255 255 255 / 21%);
  background: rgb(20 20 24 / 78%);
  box-shadow: 0 0 22px rgb(255 70 164 / 12%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.theme-dark .catalog-mockups .camp-card h3 { color: #faf7fa; }
html.theme-dark .catalog-mockups .camp-card p { color: #d0cdd2; }
html.theme-dark .catalog-mockups .course-detail { color: #c5f28c; }
html.theme-dark .catalog-mockups .camp-rose .course-detail { color: #ff9acb; }
html.theme-dark .catalog-mockups .camp-pink .course-detail { color: #ff82bf; }
html.theme-dark .catalog-mockups .camp-arrow {
  color: #fff;
  background: linear-gradient(135deg, #a31568, #e82e91);
  box-shadow: 0 0 22px rgb(255 50 151 / 28%);
}

html.theme-dark .product-card,
html.theme-dark .about-card,
html.theme-dark .faq-list details,
html.theme-dark .footer-shortcut,
html.theme-dark .footer-column {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: linear-gradient(140deg, rgb(28 25 31 / 84%), rgb(13 16 17 / 78%));
  box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 14px 34px rgb(0 0 0 / 19%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
html.theme-dark .product-card { padding: 12px; }
html.theme-dark .product-card + .product-card { border-top: 1px solid var(--glass-border); }
html.theme-dark .product-title { color: #f8f4f7; }
html.theme-dark .product-format,
html.theme-dark .product-action,
html.theme-dark .text-link { color: #bced82; }
html.theme-dark .product-cover { border: 1px solid rgb(255 255 255 / 14%); }
html.theme-dark .product-cover img { border-radius: inherit; }

html.theme-dark .lesson-copy h2,
html.theme-dark .discover-section h2,
html.theme-dark .faq-section h2,
html.theme-dark .community-heading h2 { color: var(--ink); }
html.theme-dark .lesson-copy h2 span,
html.theme-dark .discover-section h2 span,
html.theme-dark .faq-section h2 span,
html.theme-dark .community-heading h2 span { color: #ff75ba; }
html.theme-dark .section-description,
html.theme-dark .learning-steps p,
html.theme-dark .about-role,
html.theme-dark .about-experience,
html.theme-dark .community-intro { color: #c3c1c7; }
html.theme-dark .note-open-hint,
html.theme-dark .community-label {
  border-color: rgb(255 255 255 / 20%);
  color: #fff;
  background: rgb(15 16 19 / 84%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 32%);
  -webkit-backdrop-filter: blur(13px) saturate(135%);
  backdrop-filter: blur(13px) saturate(135%);
}
html.theme-dark .note-open-hint svg { color: #ff79bd; }
html.theme-dark .learning-steps li > span,
html.theme-dark .learning-steps li:nth-child(2) > span,
html.theme-dark .learning-steps li:nth-child(3) > span {
  border-color: rgb(255 91 171 / 35%);
  color: #ff8ac4;
  background: linear-gradient(145deg, rgb(114 32 81 / 62%), rgb(36 22 33 / 80%));
  box-shadow: inset 0 1px rgb(255 255 255 / 11%);
}
html.theme-dark .about-card { border-color: rgb(159 224 125 / 28%); }
html.theme-dark .faq-list details,
html.theme-dark .faq-list details[open] { border-color: rgb(255 92 175 / 27%); }
html.theme-dark .faq-list summary { color: #f5f1f4; }
html.theme-dark .faq-list summary > span { color: #c2f188; }
html.theme-dark .faq-list details[open] summary { color: #ffc4df; }
html.theme-dark .faq-list details p { color: #c5c1c8; }
html.theme-dark .content-card h3 { color: #f2eef3; }
html.theme-dark .video-channel { color: #c3ed89; }
html.theme-dark .closing-inner { border: 1px solid rgb(255 92 175 / 28%); background: rgb(19 19 23 / 87%); }
html.theme-dark .closing-inner::after { background: linear-gradient(90deg, #121416 0%, rgb(18 20 22 / 94%) 42%, rgb(18 20 22 / 68%) 66%, transparent 100%); }
html.theme-dark .community-heading .eyebrow { color: #b6ee72; }
html.theme-dark .community-heading > .button { color: #ff9aca; border-color: rgb(255 132 192 / 60%); background: rgb(20 18 23 / 78%); }
html.theme-dark .community-question .label-icon,
html.theme-dark .community-label .label-icon { color: #ff89c5; background: rgb(154 35 102 / 44%); }
html.theme-dark .community-section::after { opacity: .28; filter: blur(9px); }

/* The footer stays transparent over the same page canvas, with glass sections
   and the pink chemistry wave from the approved dark mockup. */
html.theme-dark .site-footer { color: var(--ink); background: transparent; }
html.theme-dark .site-footer::after { background: transparent; opacity: 0; }
html.theme-dark .footer-wave path { stroke: #ff4aa9; filter: drop-shadow(0 0 7px rgb(255 52 161 / 75%)); }
html.theme-dark .footer-art { opacity: .52; filter: drop-shadow(0 0 12px rgb(255 47 155 / 35%)); }
html.theme-dark .footer-brand-center > p,
html.theme-dark .footer-shortcut small,
html.theme-dark .footer-link-list a,
html.theme-dark .footer-social-list small,
html.theme-dark .footer-contact-column > p,
html.theme-dark .footer-legal { color: #c4c1c8; }
html.theme-dark .footer-shortcuts { gap: 10px; }
html.theme-dark .footer-shortcut {
  min-height: 128px;
  justify-content: center;
  border-color: rgb(255 92 175 / 20%);
  color: #f6f2f6;
  text-decoration: none;
}
html.theme-dark .footer-shortcut + .footer-shortcut::before { display: none; }
html.theme-dark .footer-shortcut:nth-child(odd),
html.theme-dark .footer-shortcut:nth-child(-n + 2) { border-color: rgb(255 92 175 / 20%); }
html.theme-dark .footer-shortcut-icon {
  color: #ff83c1;
  border: 1px solid rgb(255 91 175 / 28%);
  background: linear-gradient(145deg, rgb(115 38 82 / 58%), rgb(35 22 32 / 86%));
  box-shadow: 0 0 20px rgb(255 47 155 / 10%);
}
html.theme-dark .footer-shortcut:hover .footer-shortcut-icon { color: #fff; background: #a41062; }
html.theme-dark .footer-promo {
  border: 1px solid rgb(255 63 163 / 38%);
  background: linear-gradient(120deg, rgb(66 19 48 / 82%), rgb(22 17 24 / 88%) 66%, rgb(29 19 27 / 85%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 18px 42px rgb(0 0 0 / 28%), 0 0 35px rgb(222 23 127 / 9%);
}
html.theme-dark .footer-promo-copy h2 { color: #faf6fa; }
html.theme-dark .footer-promo-copy h2 br { color: #ff80bf; }
html.theme-dark .footer-promo-copy p { color: #cfccd2; }
html.theme-dark .footer-promo-socials a + a::before { background: rgb(255 255 255 / 28%); }
html.theme-dark .footer-promo-contact {
  color: #fff;
  background: linear-gradient(110deg, #b20a68, #ec1686);
  box-shadow: 0 0 24px rgb(235 24 139 / 28%);
}
html.theme-dark .footer-columns {
  gap: 12px;
  border-top: 1px solid rgb(255 102 181 / 37%);
  border-bottom: 1px solid rgb(255 255 255 / 18%);
}
html.theme-dark .footer-column,
html.theme-dark .footer-column:first-child,
html.theme-dark .footer-column:last-child {
  padding: 22px clamp(16px, 2vw, 28px);
  border: 1px solid rgb(255 92 175 / 23%);
}
html.theme-dark .footer-column h2 { color: #f7f2f6; }
html.theme-dark .footer-column h2::after { background: linear-gradient(90deg, #ff4aa9, #ff9ace); box-shadow: 0 0 10px rgb(255 63 163 / 60%); }
html.theme-dark .footer-column + .footer-column { border-left: 1px solid rgb(255 92 175 / 23%); }
html.theme-dark .footer-link-list a,
html.theme-dark .footer-social-list a { color: #e6e2e8; }
html.theme-dark .footer-link-list a:hover,
html.theme-dark .footer-social-list a:hover,
html.theme-dark .footer-legal button:hover { color: #ff8bc5; }
html.theme-dark .footer-social-list small { color: #b9b4bd; }
html.theme-dark .footer-social-list .footer-row-arrow { color: #f48abd; }
html.theme-dark .footer-contact-link {
  border-color: #73efbd;
  color: #a6ffd9;
  background: linear-gradient(120deg, rgb(14 61 48 / 68%), rgb(18 34 30 / 82%));
  box-shadow: inset 0 1px rgb(255 255 255 / 10%), 0 0 23px rgb(83 235 177 / 12%);
}
html.theme-dark .footer-contact-link:hover { color: #071710; background: #7df2bd; }
html.theme-dark .footer-legal { border-top: 1px solid rgb(255 255 255 / 17%); }
html.theme-dark .footer-legal button { color: #c4c1c8; }
html.theme-dark .footer-column + .footer-column { border-color: rgb(255 92 175 / 23%); }
html.theme-dark .site-footer a:focus-visible,
html.theme-dark .site-footer button:focus-visible { outline-color: #9affce; }
html.theme-dark .analytics-consent { border-color: rgb(255 92 175 / 40%); background: rgb(18 18 22 / 92%); }

@media (max-width: 900px) {
  html.theme-dark .main-nav { background: rgb(14 15 18 / 92%); }
}

@media (max-width: 700px) {
  .footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    white-space: nowrap;
    font-size: clamp(8px, 2.5vw, 10px);
  }
  .footer-legal > span { flex: 0 0 auto; }
  .footer-legal nav {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: clamp(2px, .7vw, 4px);
    white-space: nowrap;
  }
  .footer-legal button {
    min-height: 40px;
    font-size: inherit;
  }

  html.theme-dark .footer-shortcuts { gap: 8px; }
  html.theme-dark .footer-shortcut,
  html.theme-dark .footer-shortcut:nth-child(odd),
  html.theme-dark .footer-shortcut:nth-child(-n + 2) { border: 1px solid rgb(255 92 175 / 20%); }
  html.theme-dark .footer-column,
  html.theme-dark .footer-column:first-child,
  html.theme-dark .footer-column:last-child { padding: 20px 17px; }
  html.theme-dark .footer-column + .footer-column { border-top: 1px solid rgb(255 92 175 / 23%); border-left: 1px solid rgb(255 92 175 / 23%); }
}

/* On small screens the closing image sits fully inside its card; its lower
   edge fades into the dark surface while the copy remains on the solid upper area. */
@media (max-width: 700px) {
  html.theme-dark .closing-inner {
    min-height: 390px;
    display: block;
  }
  html.theme-dark .closing-copy { padding: 25px 22px 168px; }
  html.theme-dark .closing-inner > img {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 46%;
    object-fit: contain;
    object-position: center bottom;
  }
  html.theme-dark .closing-inner::after {
    background: linear-gradient(to top, rgb(16 19 20 / 92%) 0%, rgb(16 19 20 / 62%) 19%, rgb(16 19 20 / 24%) 35%, transparent 51%);
  }

  html.theme-dark .footer-columns {
    border-top: 0;
    border-bottom: 0;
    gap: 12px;
  }
  html.theme-dark .footer-column + .footer-column {
    border-left: 1px solid rgb(255 92 175 / 23%);
  }
  html.theme-dark .footer-legal {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }
  html.theme-dark .site-footer {
    padding-bottom: 24px;
  }
  html.theme-dark .footer-molecule { bottom: 4px; }
  html.theme-dark .footer-flask { bottom: 0; }
}