/* Shared appearance tokens and controls for the portal, course pages and HTML seminar work. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070918;
  --panel: rgba(18, 21, 49, .78);
  --panel2: rgba(12, 15, 40, .9);
  --line: rgba(174, 177, 255, .24);
  --text: #f3f2ff;
  --muted: #aaa9d0;
  --cyan: #7ce7ff;
  --purple: #a78bfa;
  --pink: #e879f9;
  --theme-control-bg: #11152d;
  --theme-control-border: rgba(174,177,255,.34);
  --theme-control-text: #f3f2ff;
  --color-bg: #0f1a0f;
  --color-bg-deep: #080f08;
  --color-surface: #162016;
  --color-text: #e8f0e8;
  --color-text-secondary: #b8ccb8;
  --color-text-muted: #7a987a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f1e2;
  --panel: rgba(242, 230, 204, .8);
  --panel2: rgba(237, 220, 184, .95);
  --line: rgba(132, 91, 38, .25);
  --text: #3a2b1d;
  --muted: #6f5c47;
  --cyan: #946018;
  --purple: #875b37;
  --pink: #ad6650;
  --theme-control-bg: #f1e5c9;
  --theme-control-border: rgba(132, 91, 38, .28);
  --theme-control-text: #3a2b1d;
  --color-bg: #faf4e6;
  --color-bg-deep: #efdfbe;
  --color-surface: #f0e3c7;
  --color-text: #382919;
  --color-text-secondary: #70543a;
  --color-text-muted: #8b7354;
}

.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--theme-control-border, rgba(161,151,255,.3));
  border-radius: 11px;
  background: var(--theme-control-bg, #11152d);
  color: var(--theme-control-text, #f3f2ff);
  font: 700 11px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
}
.theme-control select {
  max-width: 142px;
  border: 0;
  outline: 0;
  padding: 6px 22px 6px 7px;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.theme-control select option { background: var(--theme-control-bg, #11152d); color: var(--theme-control-text, #f3f2ff); }
.hero-actions .theme-control { margin: 0 2px; }
.topbar .theme-control { margin-left: auto; }
.topbar #accountActions { margin-left: 0; }

/* Use one shape, height, spacing and interaction style for page-level return controls. */
:where(.back-main, .back-link, .portal-back, .db-back, .menu-toolbar .mini-home) {
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 9px 13px !important;
  background: rgba(124,231,255,.08) !important;
  background: color-mix(in srgb, var(--cyan) 8%, transparent) !important;
  color: var(--text) !important;
  font: 750 12px/1.25 Inter, ui-sans-serif, system-ui, sans-serif !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
:where(.back-link, .portal-back, .db-back, .menu-toolbar .mini-home) { display: inline-flex; }
:where(.back-main, .back-link, .portal-back, .db-back, .menu-toolbar .mini-home):hover {
  border-color: rgba(148,96,24,.65) !important;
  border-color: color-mix(in srgb, var(--cyan) 62%, var(--line)) !important;
  background: rgba(124,231,255,.14) !important;
  background: color-mix(in srgb, var(--cyan) 14%, transparent) !important;
  transform: translateY(-1px);
}

/* Main portal light palette. */
html[data-theme="light"] body.studyguide-portal {
  background: radial-gradient(ellipse at 12% 2%, #f2dfb9 0, transparent 39%), radial-gradient(ellipse at 92% 78%, #e8d9bc 0, transparent 40%), #f8f1e2 !important;
  color: #3a2b1d !important;
}
html[data-theme="light"] body.studyguide-portal:before {
  opacity: .4 !important;
  background-image: url("dog-theme-paws.svg") !important;
  background-size: 205px 205px !important;
  background-repeat: repeat !important;
}
html[data-theme="light"] body.studyguide-portal:after {
  content: "";
  position: fixed;
  z-index: 0;
  right: clamp(-30px, 1vw, 18px);
  bottom: -12vh;
  width: clamp(260px, 29vw, 455px);
  height: clamp(420px, 76vh, 780px);
  pointer-events: none;
  opacity: .13;
  background: url("dog-golden-retriever.png") center bottom / contain no-repeat;
}
html[data-theme="light"] body.studyguide-portal > .wrap { position: relative; z-index: 1; }
/* Keep the large page regions open against the page background. */
html[data-theme="light"] body.studyguide-portal :is(.panel, .home-screen, .semester-hub, .course-hub, .db-portal, .db-library, .menu, .main) {
  border-color: transparent !important;
  background: transparent !important;
  color: #3a2b1d !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Dialogs remain distinct, but use a soft tinted surface instead of stark white. */
html[data-theme="light"] body.studyguide-portal :is(.auth-card, .auth-dialog, .user-menu-panel) {
  border-color: #d5c49e !important;
  background: rgba(244,234,211,.97) !important;
  color: #3a2b1d !important;
  box-shadow: 0 18px 48px rgba(86,60,25,.16) !important;
}
html[data-theme="light"] body.studyguide-portal :is(.sheet, .db-entry-card, .db-summary-stat, .db-detail-panel, .db-doc-panel, .db-handout-card, .db-schema-card, .db-tool-card, .db-practice-card, .guide-card, .tile, .mini-stat, .term-card) {
  border-color: #d8c9a9 !important;
  background: rgba(242,232,210,.88) !important;
  color: #3a2b1d !important;
}
html[data-theme="light"] body.studyguide-portal :is(.option-card, .course-card, .semester-card, .semester-card.current) {
  border-color: #d5c49e !important;
  background: linear-gradient(145deg, #f4ead4, #ebdbb9) !important;
  color: #3a2b1d !important;
  box-shadow: 0 10px 25px rgba(86,60,25,.08) !important;
}
html[data-theme="light"] body.studyguide-portal :is(.section-title, .course-description, .option-card p, .semester-intro, .semester-status, .group-note, .guide-card p, .guide-head p, .section-intro p, .section-intro, .db-note, .db-reading, .db-detail-panel p, .db-handout-card small, .db-schema-card small, .home-hint, .auth-card-intro, .auth-field label, .auth-local-note, .course-card-footer, .tile span, .mini-stat span) {
  color: #6b5945 !important;
}
html[data-theme="light"] body.studyguide-portal :is(.welcome h2, .home-screen h2, .semester-hub h2, .course-hub h2, .db-portal h2, .db-library h2, .db-entry-card strong, .course-card strong, .guide-card h3, .db-detail-panel h3, .db-library-title, .auth-card h2) {
  color: #392a1d !important;
}
html[data-theme="light"] body.studyguide-portal :is(.ex-btn, .db-nav-btn, .db-subtab, .db-relation-btn, .db-practice-actions button, .navrow button, .guide-content-nav button) {
  color: #57452f !important;
  background-color: #eee2c8 !important;
}
html[data-theme="light"] body.studyguide-portal :is(.search, .auth-field input, .auth-password-row input, .db-filter-row input, .db-filter-row select, .db-practice-input, .db-code-output) {
  border-color: #d0bd96 !important;
  background: #fbf5e9 !important;
  color: #392a1d !important;
}
html[data-theme="light"] body.studyguide-portal .grad { background-image: linear-gradient(100deg, #684b2b 5%, #a66b21 48%, #7c623e 95%) !important; }
html[data-theme="light"] body.studyguide-portal :is(.description, .whybox, .quicklinks, .db-callout, .db-note, .tools-note) {
  border-color: #dfc99d !important;
  background: linear-gradient(120deg, #f1e4c8, #f3e8d8) !important;
  color: #59462e !important;
}
html[data-theme="light"] body.studyguide-portal .description .desc-label,
html[data-theme="light"] body.studyguide-portal .answer b,
html[data-theme="light"] body.studyguide-portal .block-title,
html[data-theme="light"] body.studyguide-portal .guide-card h3,
html[data-theme="light"] body.studyguide-portal .db-label { color: #8d5c18 !important; }
html[data-theme="light"] body.studyguide-portal :is(.math, .guide-formula, .db-code-wrap pre, .worked-example pre, .solution pre, .work-item pre) {
  border-color: #d7c69e !important;
  background: #efe5d0 !important;
  color: #493a29 !important;
}
html[data-theme="light"] body.studyguide-portal .semester-card.locked { background: #eee8dc !important; }
html[data-theme="light"] body.studyguide-portal .semester-status { color: #75634d !important; }
html[data-theme="light"] body.studyguide-portal .foot { color: #8a775d !important; }
html[data-theme="light"] body.studyguide-portal .orb { display: none !important; }
html[data-theme="light"] .theme-control::before { content: "🐾"; color: #946018; font-size: 13px; }

/* Replace the login screen's celestial motion with a quiet dog illustration. */
html[data-theme="light"] body.studyguide-portal .auth-screen {
  background: radial-gradient(ellipse at 12% 14%, #f0dfbc 0, transparent 38%), radial-gradient(ellipse at 88% 82%, #ead9b8 0, transparent 36%), #f8f1e2 !important;
  color: #3a2b1d !important;
}
html[data-theme="light"] body.studyguide-portal .auth-screen::before,
html[data-theme="light"] body.studyguide-portal .auth-screen::after {
  border: 0 !important;
  box-shadow: none !important;
  background: radial-gradient(closest-side, rgba(199,150,68,.12), transparent) !important;
  filter: blur(18px) !important;
}
html[data-theme="light"] body.studyguide-portal .auth-celestial {
  opacity: .2;
  background-image: url("dog-golden-retriever.png"), url("dog-samoyed-ink.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left clamp(14px, 4vw, 76px) bottom -5vh, right clamp(0px, 3vw, 54px) bottom -10vh;
  background-size: clamp(250px, 27vw, 420px) auto, clamp(340px, 37vw, 570px) auto;
}
html[data-theme="light"] body.studyguide-portal :is(.auth-planet, .auth-moon, .nebula-planet-art, .auth-comet, .auth-comet-canvas) { display: none !important; }
html[data-theme="light"] body.studyguide-portal .auth-intro h1 { color: #49351f !important; }
html[data-theme="light"] body.studyguide-portal .auth-spark {
  border-color: #dcc695 !important;
  border-left-color: #a26e24 !important;
  background: linear-gradient(110deg, #f1e3c5, #f4ead7) !important;
}
html[data-theme="light"] body.studyguide-portal .auth-spark p { color: #66543d !important; }
html[data-theme="light"] body.studyguide-portal .auth-points span { border-color: #d8c8a8; background: #f2e7d0; color: #65533d; }
html[data-theme="light"] body.studyguide-portal .auth-card {
  border-color: #d4c093 !important;
  background: linear-gradient(145deg, rgba(247,239,222,.98), rgba(239,225,197,.98)) !important;
  box-shadow: 0 24px 70px rgba(87,61,27,.16) !important;
  backdrop-filter: blur(14px);
}
html[data-theme="light"] body.studyguide-portal :is(.auth-field label, .auth-local-note, .auth-local-note b, .auth-show-password) { color: #59462e !important; }
html[data-theme="light"] body.studyguide-portal .auth-local-note { border-top-color: #d9c9a9 !important; }
html[data-theme="light"] body.studyguide-portal .auth-password-row .auth-show-password { border-color: #d3c29d !important; background: #eee2c8 !important; }
html[data-theme="light"] body.studyguide-portal .auth-submit {
  border-color: #8b5b20 !important;
  background: linear-gradient(100deg, #b47a25, #99602b 58%, #79523a) !important;
  color: #fffaf0 !important;
  box-shadow: 0 10px 24px rgba(131,86,30,.2) !important;
}
html[data-theme="light"] body.studyguide-portal .auth-message { color: #8b3540 !important; }
html[data-theme="light"] body.studyguide-portal .user-menu-toggle { border-color: #d0bc91; background: #f0e4ca; color: #45341f; }
html[data-theme="light"] body.studyguide-portal .user-avatar { background: linear-gradient(135deg, #c28a35, #98632a); }
html[data-theme="light"] body.studyguide-portal .auth-modal { background: rgba(67,48,25,.34); }
html[data-theme="light"] body.studyguide-portal .auth-dialog { border-color: #d5c39a; background: #f5ecd8; color: #3a2b1d; box-shadow: 0 24px 70px rgba(74,52,26,.2); }
html[data-theme="light"] body.studyguide-portal .auth-dialog-actions button { border-color: #d4c39e; background: #eee2c8; color: #59462e; }
html[data-theme="light"] body.studyguide-portal .auth-dialog-actions .auth-submit { color: #fffaf0; }
html[data-theme="light"] body.studyguide-portal .account-row { border-color: #d8c8a8; background: #f0e5ce; }
html[data-theme="light"] body.studyguide-portal .account-row button { border-color: #c88d61; background: #f3e2d1; color: #78492d; }
html[data-theme="light"] body.studyguide-portal .course-progress,
html[data-theme="light"] body.studyguide-portal .material-progress {
  border-color: #d7c69f;
  background: rgba(239,226,199,.8);
  box-shadow: 0 9px 24px rgba(86,60,25,.06);
}
html[data-theme="light"] body.studyguide-portal .course-progress-label { color: #59462e; }
html[data-theme="light"] body.studyguide-portal .course-progress-track { background: #d7c8a8; }
html[data-theme="light"] body.studyguide-portal .course-progress-track>span { background: linear-gradient(90deg,#bc8128,#9d6530); }
html[data-theme="light"] body.studyguide-portal .course-progress-row[data-progress-row="exam"] .course-progress-track>span { background: linear-gradient(90deg,#cc9650,#b76b50); }
html[data-theme="light"] body.studyguide-portal .material-progress button { border-color: #cfbc91; background: #f5ead2; color: #59462e; }
html[data-theme="light"] body.studyguide-portal .material-progress button[aria-pressed="true"] { border-color: #a7792d; background: #e7d3a8; color: #513b1d; }
html[data-theme="light"] body.studyguide-portal .progress-storage-note { border-color: #d5bd88; background: #f1e4c7; color: #59462e; box-shadow: 0 12px 30px rgba(74,52,26,.15); }
html[data-theme="light"] body.studyguide-portal .welcome-splash {
  background: radial-gradient(ellipse at center, #f8efd9, #f2e3c5 72%) !important;
  color: #3a2b1d !important;
  overflow: hidden;
}
html[data-theme="light"] body.studyguide-portal .welcome-splash::after {
  content: "";
  position: absolute;
  right: max(2vw, env(safe-area-inset-right));
  bottom: -20vh;
  width: min(44vw, 620px);
  height: 94vh;
  opacity: .13;
  background: url("dog-samoyed-ink.png") center bottom / contain no-repeat;
  pointer-events: none;
}
html[data-theme="light"] body.studyguide-portal .welcome-splash-inner {
  position: relative;
  z-index: 1;
}
html[data-theme="light"] body.studyguide-portal .welcome-splash-orb {
  width: clamp(190px, 24vw, 290px);
  height: clamp(270px, 43vh, 380px);
  border-radius: 0;
  background: url("dog-golden-retriever.png") center / contain no-repeat;
  box-shadow: none;
  animation: dog-greeting-float 1.4s ease-in-out infinite alternate;
}
html[data-theme="light"] body.studyguide-portal .welcome-splash p { color: #6f5c47 !important; }
@keyframes dog-greeting-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@media (max-width: 760px) {
  html[data-theme="light"] body.studyguide-portal .auth-celestial {
    opacity: .13;
    background-position: left -50px bottom -3vh, right -110px bottom -5vh;
    background-size: 230px auto, 290px auto;
  }
  html[data-theme="light"] body.studyguide-portal .auth-screen { padding-top: 96px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-theme="light"] body.studyguide-portal .auth-celestial {
    opacity: .15;
    background-position: left -20px bottom -4vh, right -42px bottom -7vh;
    background-size: 310px auto, 390px auto;
  }
}
@media (max-width: 480px) {
  html[data-theme="light"] body.studyguide-portal .welcome-splash::after { opacity: .08; width: 72vw; }
}

/* Economics and Programming course libraries. */
html[data-theme="light"] body.course-library-page {
  --bg: #f8f1e2;
  --panel: rgba(242,230,204,.8);
  --panel2: rgba(237,220,184,.95);
  --line: rgba(112,82,43,.21);
  --text: #3a2b1d;
  --muted: #6f5c47;
  --cyan: #946018;
  --purple: #875b37;
  --pink: #ad6650;
  background: radial-gradient(ellipse at 12% 2%, #f2dfb9 0, transparent 39%), radial-gradient(ellipse at 92% 78%, #e8d9bc 0, transparent 40%), #f8f1e2 !important;
  color: #3a2b1d;
}
html[data-theme="light"] body.course-library-page:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .4;
  background: url("dog-theme-paws.svg") repeat 0 0 / 205px 205px;
}
html[data-theme="light"] body.course-library-page .course-shell { position: relative; z-index: 1; }
html[data-theme="light"] body.course-library-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  right: clamp(-40px, 1vw, 20px);
  bottom: -14vh;
  width: clamp(320px, 39vw, 610px);
  height: clamp(260px, 48vh, 500px);
  pointer-events: none;
  opacity: .105;
  background: url("dog-samoyed-ink.png") center bottom / contain no-repeat;
}
html[data-theme="light"] body.course-library-page .course-hero::after { display: none !important; }
@media (max-width: 650px) {
  html[data-theme="light"] body.course-library-page::after { opacity: .075; right: -90px; width: 360px; height: 310px; }
}
/* Hero and reading canvas should blend into the page, not form giant white slabs. */
html[data-theme="light"] body.course-library-page :is(.course-hero, .course-panel, .topic-detail) {
  border-color: transparent !important;
  background: transparent !important;
  color: #3a2b1d !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.course-library-page :is(.progress-panel, .stat-panel, .auth-panel) {
  border-color: #d7c69f !important;
  background: rgba(241,230,206,.82) !important;
  color: #3a2b1d !important;
  box-shadow: 0 9px 24px rgba(86,60,25,.07) !important;
}
html[data-theme="light"] body.course-library-page .stat {
  border-color: #d9c9a8 !important;
  background: rgba(235,220,189,.76) !important;
}
html[data-theme="light"] body.course-library-page .progress-track { background: #d7c8a8 !important; }
html[data-theme="light"] body.course-library-page :is(.overview-card, .topic-card, .seminar-card, .practice-card, .material-card, .tool-card, .reference-card, .work-item, .term, .question-list details, .solution) {
  border-color: #d8c8a5 !important;
  background: linear-gradient(145deg, rgba(246,237,216,.98), rgba(239,224,192,.94)) !important;
  color: #3a2b1d !important;
  box-shadow: 0 8px 22px rgba(86,60,25,.065) !important;
}
html[data-theme="light"] body.course-library-page :is(.course-tabs, .topic-nav, .tool-result, .tool-chart, .table-scroll, .tool-field input, .tool-field select, .tool-input-group, .diagram-card) {
  border-color: #d8c8a5 !important;
  background: rgba(241,231,208,.96) !important;
  color: #59462e !important;
}
html[data-theme="light"] body.course-library-page :is(.course-hero p, .panel-heading p, .overview-card p, .topic-card p, .seminar-card p, .practice-card p, .material-card p, .tool-card-head p, .reference-card p, .topic-summary, .topic-section p, .topic-section li, .tool-result p, .tool-hint, .question-list p, .solution p, .work-item p, .auth-panel p, .coverage-note, .progress-caption) {
  color: #6b5945 !important;
}
html[data-theme="light"] body.course-library-page :is(.course-hero h1, .panel-heading h2, .tool-card h3, .reference-card h3, .topic-detail h3, .seminar-card h3, .practice-card h3, .material-card h3, .work-item h4) { color: #392a1d !important; }
html[data-theme="light"] body.course-library-page :is(.term b, .question-list summary, .solution summary) { color: #493821 !important; }
html[data-theme="light"] body.course-library-page .formula {
  border-color: #c6a66b !important;
  background: #efe2c5 !important;
  color: #543d20 !important;
}
html[data-theme="light"] body.course-library-page .worked-example {
  border-color: #d7c193 !important;
  background: #f1e5cd !important;
}
html[data-theme="light"] body.course-library-page .worked-example p { color: #5a4934 !important; }
html[data-theme="light"] body.course-library-page .empty-note {
  border-color: #d9c99e !important;
  background: #eee8d6 !important;
  color: #5d4d2b !important;
}
html[data-theme="light"] body.course-library-page .progress-control {
  border-color: #d8c8a5 !important;
  background: rgba(235,220,189,.76) !important;
}
html[data-theme="light"] body.course-library-page :is(.topic-nav button, .course-tab, .progress-control button, .source-links a, .material-actions a, .tool-action, .account-action, .back-link) {
  border-color: #d2bd91 !important;
  background: #eee1c5 !important;
  color: #59442a !important;
}
html[data-theme="light"] body.course-library-page :is(.topic-nav button.active, .course-tab.active, .progress-control button[aria-pressed="true"]) {
  border-color: #aa782b !important;
  background: #dfc891 !important;
  color: #4d3519 !important;
}
html[data-theme="light"] body.course-library-page :is(.tool-result .result-summary, .result-metrics b, .topic-section h4, .eyebrow, .course-kicker, .progress-control-label) { color: #8d5c18 !important; }
html[data-theme="light"] body.course-library-page .tool-error { color: #a5233d !important; }
html[data-theme="light"] body.course-library-page .tool-table th { color: #8d5c18 !important; }
html[data-theme="light"] body.course-library-page .tool-table th, html[data-theme="light"] body.course-library-page .tool-table td { border-color: #d8c8a5 !important; }
html[data-theme="light"] body.course-library-page :is(.account-badge, .back-link) { background: #eee1c5 !important; color: #3a2b1d !important; }
html[data-theme="light"] body.course-library-page .auth-message { color: #842a3b !important; background: #f1e2e7 !important; }
html[data-theme="light"] body.course-library-page .coverage-note { border-color: #d9c99e !important; background: #eee8d6 !important; color: #5d4d2b !important; }
html[data-theme="light"] body.course-library-page .diagram-card img { background: #eee7d8 !important; }
html[data-theme="light"] body.course-library-page .toast { border-color: #d9c99e; background: #eee8d6; color: #59472a; }
html[data-theme="light"] body.course-library-page .chart-gridline { stroke: #705a3a26 !important; }
html[data-theme="light"] body.course-library-page .chart-axis { stroke: #806a4b !important; }
html[data-theme="light"] body.course-library-page .chart-demand { stroke: #a46a24 !important; }
html[data-theme="light"] body.course-library-page .chart-supply { stroke: #b45b38 !important; }
html[data-theme="light"] body.course-library-page .chart-price { stroke: #79573d !important; }
html[data-theme="light"] body.course-library-page .chart-label { fill: #5f4c35 !important; }
html[data-theme="light"] body.course-library-page .chart-demand-label { fill: #8d5c18 !important; }
html[data-theme="light"] body.course-library-page .chart-supply-label { fill: #994c2e !important; }

/* Matching Economics and Programming navigation in the dog-themed palette. */
html[data-theme="light"] body.course-library-page .course-sidebar {
  border-color: #d8c8a5 !important;
  background: linear-gradient(155deg, rgba(246,237,216,.98), rgba(239,224,192,.96)) !important;
  box-shadow: 0 10px 28px rgba(86,60,25,.075) !important;
}
html[data-theme="light"] body.course-library-page .course-menu-toolbar {
  border-color: #d8c8a5 !important;
  background: rgba(243,232,210,.97) !important;
}
html[data-theme="light"] body.course-library-page .course-tabs {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] body.course-library-page .course-nav-group + .course-nav-group,
html[data-theme="light"] body.course-library-page .course-subnav,
html[data-theme="light"] body.course-library-page .course-menu-foot {
  border-color: #d8c8a5 !important;
}
html[data-theme="light"] body.course-library-page .course-nav-group > summary { color: #705b41 !important; }
html[data-theme="light"] body.course-library-page .course-nav-group > summary::after,
html[data-theme="light"] body.course-library-page .course-nav-group > summary small { color: #846d4d !important; }
html[data-theme="light"] body.course-library-page .course-nav-icon,
html[data-theme="light"] body.course-library-page .course-nav-index,
html[data-theme="light"] body.course-library-page .course-menu-home {
  border-color: #d2bd91 !important;
  background: #f1e5ca !important;
  color: #8d5c18 !important;
}
html[data-theme="light"] body.course-library-page .course-nav-links .course-tab {
  border-color: transparent !important;
  background: transparent !important;
  color: #6f5c47 !important;
}
html[data-theme="light"] body.course-library-page .course-nav-links .course-tab:hover,
html[data-theme="light"] body.course-library-page .course-nav-links .course-tab.active,
html[data-theme="light"] body.course-library-page .course-subnav-item:hover,
html[data-theme="light"] body.course-library-page .course-subnav-item.active {
  border-color: #d2bd91 !important;
  background: #eee1c5 !important;
  color: #493821 !important;
}
html[data-theme="light"] body.course-library-page .course-subnav-item small,
html[data-theme="light"] body.course-library-page .course-subnav-heading b { color: #8d5c18 !important; }
html[data-theme="light"] body.course-library-page .course-subnav-heading b small,
html[data-theme="light"] body.course-library-page .course-subnav-empty,
html[data-theme="light"] body.course-library-page .course-menu-foot { color: #806a4b !important; }
html[data-theme="light"] body.course-library-page .course-material-search input {
  border-color: #d2bd91 !important;
  background: #f6eedc !important;
  color: #493821 !important;
}
html[data-theme="light"] body.course-library-page .portal-wordmark { color: #392a1d !important; }
html[data-theme="light"] body.course-library-page .portal-wordmark-icon {
  border-color: #d2bd91 !important;
  background: linear-gradient(140deg,#e9d5ad,#f1e6d0) !important;
  color: #946018 !important;
}

/* Light theme tokens for the Uber case study, which has its own palette. */
html[data-theme="light"] body.uber-case {
  --bg: #f8f1e2;
  --bg2: #efe0c2;
  --panel: #f3e8d1;
  --panel2: #efe2c8;
  --text: #3a2b1d;
  --muted: #6f5c47;
  --muted2: #8b7354;
  --line: #d8c8a7;
  --line2: #c8b48a;
  --white: #3a2b1d;
  --coral: #a56528;
  --coral2: #bd8748;
  --blue: #92704a;
  --cyan: #a77932;
  --green: #737747;
  --amber: #c28a35;
  --violet: #8c6e54;
  --red: #9f4d3d;
  --shadow: 0 22px 70px rgba(86,60,25,.12);
  background: radial-gradient(1200px 600px at 15% -10%, rgba(194,133,48,.12), transparent 55%), radial-gradient(900px 500px at 90% 0%, rgba(162,103,47,.09), transparent 55%), url("dog-theme-paws.svg") repeat 0 0 / 205px 205px, var(--bg) !important;
}
html[data-theme="light"] body.uber-case .topbar { background: rgba(243,232,209,.92) !important; border-color: #d8c8a7 !important; }
html[data-theme="light"] body.uber-case .hero-grid { opacity: .025 !important; }
html[data-theme="light"] body.uber-case .hero:before {
  background: linear-gradient(180deg,rgba(248,241,226,.02),rgba(248,241,226,.9) 88%),
    radial-gradient(circle at 65% 40%,rgba(194,133,48,.13),transparent 22%),
    radial-gradient(circle at 30% 55%,rgba(162,103,47,.1),transparent 25%) !important;
}
html[data-theme="light"] body.uber-case :is(.hero-copy, .detail p, .comparison ul, .bar-label) { color: #6f5c47 !important; }
html[data-theme="light"] body.uber-case :is(.stat, .model-card, .comparison, .team-card) { background: #f1e5cd !important; }
html[data-theme="light"] body.uber-case :is(.evidence-row, .metric, .team-row, .competitor.active, .competitor:hover) { background: #ebddc0 !important; }
html[data-theme="light"] body.uber-case :is(.chip, .bar-value, .competitor .mini-stat) { color: #59462e !important; }
html[data-theme="light"] body.uber-case .callout { color: #854c2c !important; }
html[data-theme="light"] .theme-control { box-shadow: 0 4px 14px rgba(86,60,25,.1); }
html[data-theme="light"] body.uber-case .hero-actions .theme-control {
  position: fixed;
  z-index: 150;
  top: 12px;
  right: 18px;
  margin: 0;
  box-shadow: 0 6px 22px rgba(86,60,25,.16);
}

/* The standalone Week 4 case presentation follows the same selected theme. */
html[data-theme="dark"] body.starbucks-case {
  --cream: #14221b;
  --green: #43b78c;
  --deep: #e1f1e8;
  --ink: #e0ebe4;
  --muted: #a5b9ad;
  --sage: #21382e;
  --white: #17261f;
  --line: #3a584b;
  --shadow: 0 8px 26px rgba(0,0,0,.28);
}
html[data-theme="dark"] body.starbucks-case .app { background: #0e1712 !important; }
html[data-theme="dark"] body.starbucks-case .stage .slide { border-color: #344c40 !important; }
html[data-theme="dark"] body.starbucks-case .human-card { background: #254b3d !important; }
html[data-theme="light"] body.starbucks-case .theme-control { box-shadow: 0 4px 14px rgba(86,60,25,.1); }

/* CampusFix uses a compact, full-screen slide deck with its own color tokens. */
html[data-theme="light"] body.campusfix-deck {
  --color-bg: #f8f1e2;
  --color-bg-deep: #efdfbe;
  --color-surface: #f0e3c7;
  --color-text: #382919;
  --color-text-secondary: #70543a;
  --color-text-muted: #8b7354;
  --color-glass-bg: rgba(112,82,43,.08);
  --color-glass-border: rgba(112,82,43,.18);
  --color-vignette: rgba(248,241,226,.15);
  --glow-color-rgb: 148,96,24;
}
html[data-theme="light"] body.campusfix-deck .slide { color: #382919; }
html[data-theme="light"] body.campusfix-deck .slide .content :is(p,span,div,h1,h2,h3,li,strong) { color: #382919 !important; }
html[data-theme="light"] body.campusfix-deck .slide .content :is(.stage-chip, .seq-arrow, .click-hint) { color: #8d5c18 !important; }
html[data-theme="light"] body.campusfix-deck .slide .expandable { background: rgba(241,230,206,.82) !important; border-color: rgba(112,82,43,.2) !important; }
html[data-theme="light"] body.campusfix-deck .expand-card { background: linear-gradient(160deg,#f7efde,#efe1c5); color: #382919; }
html[data-theme="light"] body.campusfix-deck .expand-card :is(h2,p,span,div,strong) { color: #382919 !important; }
html[data-theme="light"] body.campusfix-deck .expand-close { color: #382919; background: rgba(112,82,43,.08); border-color: rgba(112,82,43,.2); }
html[data-theme="light"] body.campusfix-deck .expand-overlay { background: rgba(248,241,226,.84); }
html[data-theme="light"] body.campusfix-deck .nav-controls { box-shadow: 0 8px 28px rgba(86,60,25,.14); }
html[data-theme="dark"] .deck > .theme-control,
html[data-theme="light"] .deck > .theme-control {
  position: fixed;
  z-index: 200;
  top: 16px;
  right: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
}
html[data-theme="light"] .deck > .theme-control { box-shadow: 0 8px 28px rgba(86,60,25,.14); }

/* Shared focus and reduced-motion behavior. */
:where(.theme-control select, .back-main, .back-link, .portal-back, .db-back, .mini-home):focus-visible {
  outline: 3px solid var(--cyan, #7ce7ff);
  outline-offset: 3px;
}
@media (max-width: 650px) {
  .theme-control { padding: 4px 6px 4px 8px; font-size: 10px; }
  .theme-control select { max-width: 126px; }
  .hero-actions .theme-control { order: 20; }
  .topbar .theme-control { margin-left: 0; }
  .deck > .theme-control { top: 8px; right: 8px; }
  html[data-theme="light"] body.uber-case .hero-actions .theme-control { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-control *, :where(.back-main, .back-link, .portal-back, .db-back, .mini-home) { transition: none !important; }
}

/* Quiet release marker, shared by the portal and standalone course pages. */
.studyguide-version-counter {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line, rgba(150,160,190,.22));
  border-radius: 999px;
  background: rgba(12,16,34,.72);
  color: rgba(220,226,242,.7);
  font: 700 9px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .07em;
  pointer-events: none;
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="light"] .studyguide-version-counter {
  border-color: rgba(126,91,45,.2);
  background: rgba(244,234,211,.82);
  color: #80613b;
}

/* A deeper, more dimensional nebula treatment for dark mode. */
html[data-theme="dark"] body.studyguide-portal .auth-screen {
  background:
    radial-gradient(ellipse at 18% 78%, rgba(50,28,132,.56), transparent 38%),
    radial-gradient(ellipse at 84% 18%, rgba(13,83,132,.26), transparent 39%),
    radial-gradient(ellipse at 53% 53%, rgba(27,19,72,.38), transparent 53%),
    #050714 !important;
}
html[data-theme="dark"] body.studyguide-portal .auth-celestial {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(240,238,255,.88) 98%, transparent),
    radial-gradient(1px 1px at 73% 12%, rgba(153,222,255,.76) 98%, transparent),
    radial-gradient(2px 2px at 89% 42%, rgba(255,255,255,.72) 98%, transparent),
    radial-gradient(1px 1px at 56% 83%, rgba(188,168,255,.68) 98%, transparent),
    radial-gradient(1px 1px at 31% 55%, rgba(255,255,255,.58) 98%, transparent);
  background-size: 307px 283px, 379px 331px, 457px 397px, 293px 347px, 421px 367px;
  opacity: .9;
}
html[data-theme="dark"] body.studyguide-portal .nebula-planet-art {
  position: absolute;
  z-index: 1;
  left: clamp(-145px, calc(50vw - 1040px), -40px);
  bottom: clamp(-145px, -12vh, -70px);
  width: min(69vw, 850px);
  height: auto;
  opacity: .88;
  filter: saturate(1.08) drop-shadow(0 0 38px rgba(115,81,255,.2));
  transform-origin: 50% 52%;
  animation: nebula-planet-drift 28s ease-in-out infinite alternate;
}
html[data-theme="dark"] body.studyguide-portal .auth-moon {
  position: absolute;
  z-index: 1;
  top: clamp(34px, 8vh, 84px);
  right: clamp(40px, 8vw, 132px);
  width: clamp(42px, 5vw, 70px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 67% 62%, transparent 0 7%, rgba(12,12,38,.42) 7.5% 9%, transparent 10%),
    radial-gradient(circle at 34% 37%, #d8d1ff 0 4%, transparent 5%),
    radial-gradient(circle at 30% 27%, #e9e3ff, #9c8ee5 42%, #38336f 77%, #11142f 100%);
  box-shadow: inset -10px -7px 20px rgba(3,5,20,.55), 0 0 32px rgba(147,130,255,.27);
  opacity: .76;
  animation: auth-planet-float 9s ease-in-out infinite;
}
html[data-theme="dark"] body.studyguide-portal .orb,
html[data-theme="dark"] body.studyguide-portal .welcome-splash-orb {
  border-radius: 0;
  background: url("nebula-planet.svg") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 28px rgba(129,92,255,.36));
}
html[data-theme="dark"] body.studyguide-portal .orb {
  width: 164px;
  height: 138px;
  animation: nebula-planet-drift 10s ease-in-out infinite alternate;
}
html[data-theme="dark"] body.studyguide-portal .orb::after { display: none; }
html[data-theme="dark"] body.studyguide-portal .welcome-splash-orb {
  width: clamp(150px, 21vw, 230px);
  height: clamp(130px, 19vw, 200px);
}
@keyframes nebula-planet-drift {
  from { transform: translate3d(0,0,0) rotate(-1deg); }
  to { transform: translate3d(0,-12px,0) rotate(1.2deg); }
}
@media (max-width: 760px) {
  html[data-theme="dark"] body.studyguide-portal .nebula-planet-art {
    left: -145px;
    bottom: -78px;
    width: min(104vw, 570px);
    opacity: .48;
  }
  html[data-theme="dark"] body.studyguide-portal .auth-moon { top: 18px; right: 20px; width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body.studyguide-portal :is(.nebula-planet-art, .auth-moon, .orb) { animation: none !important; }
}

/* Clear any leftover nebula surfaces inside the study portal in light mode. */
html[data-theme="light"] body.studyguide-portal :is(.section-intro, .tools-hero, .source-pdf-section, .db-nav-group, .db-overview-topic, .be-week-subnav, .be-guide-check) {
  border-color: #d8c8a5 !important;
  background: linear-gradient(135deg, #f5ecd9, #eee0c2) !important;
  color: #59462e !important;
  box-shadow: 0 8px 20px rgba(86,60,25,.055) !important;
}
html[data-theme="light"] body.studyguide-portal :is(.tool-card, .db-learning-card, .be-guide-card, .unit-value, .formula-row, .be-guide-chain span) {
  border-color: #d8c8a5 !important;
  background: linear-gradient(145deg, #f7efdf, #efe2c8) !important;
  color: #59462e !important;
  box-shadow: 0 7px 18px rgba(86,60,25,.05) !important;
}
html[data-theme="light"] body.studyguide-portal .unit-svg-wrap {
  border-color: #d8c8a5 !important;
  background: radial-gradient(circle at 50% 40%, #f8efd9, #eee1c6 72%) !important;
}
html[data-theme="light"] body.studyguide-portal :is(.source-pdf-link, .crosslink) {
  border-color: #d2bd91 !important;
  background: linear-gradient(120deg, #f5ecd8, #eee0c2) !important;
  color: #59442a !important;
}
html[data-theme="light"] body.studyguide-portal :is(.source-pdf-link:hover, .crosslink:hover) {
  border-color: #ad823d !important;
  background: linear-gradient(120deg, #f2e3c4, #ead6aa) !important;
  color: #49351f !important;
}
html[data-theme="light"] body.studyguide-portal :is(.db-doc-actions a, .db-tool-tab, .db-copy-btn, .db-lesson-links button, .db-inline-link, .db-reveal-btn, .unit-angle-chip, .be-download-link) {
  border-color: #d2bd91 !important;
  background: #f1e5cd !important;
  color: #59442a !important;
}
html[data-theme="light"] body.studyguide-portal :is(.db-tool-tab:hover, .db-tool-tab.active, .db-doc-actions a:hover, .db-reveal-btn:hover, .unit-angle-chip:hover, .unit-angle-chip.active, .be-download-link:hover) {
  border-color: #aa782b !important;
  background: #e9d6ad !important;
  color: #49351f !important;
}
html[data-theme="light"] body.studyguide-portal :is(.pill, .section-chip, .option-icon, .sheet-icon, .course-icon) {
  border-color: #d8c8a5 !important;
  background: linear-gradient(135deg, #f1e3c5, #ead8b2) !important;
  color: #80591e !important;
}
html[data-theme="light"] body.studyguide-portal .option-card::before {
  background: radial-gradient(circle, rgba(195,143,55,.18), transparent 70%) !important;
}
html[data-theme="light"] body.studyguide-portal :is(.sheet-head:hover, .ex-btn:hover, .ex-btn.active, .db-doc-btn:hover, .db-doc-btn.active) {
  background: #ead9b8 !important;
  color: #49351f !important;
}
html[data-theme="light"] body.studyguide-portal :is(.steps li, .unit-controls input[type="number"], .uploaded-diagram img) {
  border-color: #d7c69e !important;
  background: #f4ead4 !important;
  color: #59462e !important;
}
html[data-theme="light"] body.studyguide-portal :is(.unit-value b, .formula-row code, .db-schema-keys span, .be-guide-check summary, .be-guide-chain span) { color: #59462e !important; }
html[data-theme="light"] body.studyguide-portal :is(.formula-row b, .formula-row p, .unit-exact, .uploaded-diagram summary, .be-guide-check details p) { color: #80591e !important; }
html[data-theme="light"] body.studyguide-portal :is(.db-warning, .db-hint, .tools-note) {
  border-color: #dec8a0 !important;
  background: #f1e5cd !important;
  color: #654d32 !important;
}
html[data-theme="light"] body.studyguide-portal .db-warning { border-left-color: #b66848 !important; }
html[data-theme="light"] body.studyguide-portal .db-hint { color: #59462e !important; }
html[data-theme="light"] body.studyguide-portal .answer {
  border-color: #d5bd88 !important;
  background: linear-gradient(120deg, #f2e5c9, #ead8b3) !important;
  color: #493a29 !important;
}
html[data-theme="light"] body.studyguide-portal .answer div { color: #493a29 !important; }
html[data-theme="light"] body.studyguide-portal :is(.db-chip, .db-schema-keys span) {
  border-color: #d8c8a5 !important;
  background: #eee2c8 !important;
  color: #59462e !important;
}
html[data-theme="light"] body.studyguide-portal .semester-card.current::after { background: rgba(180,126,39,.12) !important; }

/* Keep long SPM and Database Systems menus usable without scrolling the lesson pane. */
.studyguide-portal .layout > .menu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}
.studyguide-portal .layout > .menu #navTree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,231,255,.42) transparent;
}
.studyguide-portal .layout > .menu #navTree::-webkit-scrollbar,
.studyguide-portal .db-layout > .db-sidebar::-webkit-scrollbar { width: 7px; }
.studyguide-portal .layout > .menu #navTree::-webkit-scrollbar-thumb,
.studyguide-portal .db-layout > .db-sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: rgba(124,231,255,.42);
  background-clip: padding-box;
}
.studyguide-portal .db-layout > .db-sidebar {
  max-height: calc(100vh - 36px);
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,231,255,.42) transparent;
}
#navTree .nav-group .sheet-icon.derivative-icon {
  overflow: hidden;
  padding-inline: 2px;
  font-size: 14px;
  letter-spacing: -.08em;
  line-height: 1;
  white-space: nowrap;
}

/* A small progress marker and quiet background growth make study progress visible. */
.theme-control { flex-wrap: wrap; }
.option-top { min-width: 0; }
.option-label {
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.12;
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
}
body.studyguide-portal::before,
body.course-library-page::before,
html[data-theme="light"] body.studyguide-portal::after,
html[data-theme="light"] body.course-library-page::after { transition: opacity .95s ease, transform 1.4s ease; }
.theme-evolution-badge {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  padding: 5px 8px;
  border-left: 1px solid var(--theme-control-border, rgba(161,151,255,.3));
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  transition: color .35s ease, opacity .35s ease;
}
.theme-evolution-badge[hidden] { display: none; }
html[data-theme="light"] .theme-evolution-badge { color: #8d5c18; }

html[data-theme="dark"] body.studyguide-portal > .wrap,
html[data-theme="dark"] body.course-library-page > .course-shell { position: relative; z-index: 1; }
html[data-theme="dark"] body.studyguide-portal.app-unlocked::after,
html[data-theme="dark"] body.course-library-page.app-unlocked::after {
  content: "";
  position: fixed;
  z-index: 0;
  right: clamp(-80px, 0vw, 24px);
  bottom: -16vh;
  width: clamp(310px, 39vw, 580px);
  height: clamp(300px, 54vh, 590px);
  pointer-events: none;
  opacity: 0;
  background: url("nebula-planet.svg") center / contain no-repeat;
  transform: translate3d(0, 20px, 0) scale(.96);
  transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.2,.7,.25,1);
}
html[data-theme="dark"][data-theme-progress-stage="1"] body.studyguide-portal.app-unlocked::after,
html[data-theme="dark"][data-theme-progress-stage="1"] body.course-library-page.app-unlocked::after { opacity: .075; transform: translate3d(0, 0, 0) scale(1); }
html[data-theme="dark"][data-theme-progress-stage="2"] body.studyguide-portal.app-unlocked::after,
html[data-theme="dark"][data-theme-progress-stage="2"] body.course-library-page.app-unlocked::after { opacity: .12; transform: translate3d(0, -4px, 0) scale(1.015); }
html[data-theme="dark"][data-theme-progress-stage="3"] body.studyguide-portal.app-unlocked::after,
html[data-theme="dark"][data-theme-progress-stage="3"] body.course-library-page.app-unlocked::after { opacity: .17; transform: translate3d(0, -7px, 0) scale(1.025); }
html[data-theme="dark"][data-theme-progress-stage="4"] body.studyguide-portal.app-unlocked::after,
html[data-theme="dark"][data-theme-progress-stage="4"] body.course-library-page.app-unlocked::after { opacity: .22; transform: translate3d(0, -10px, 0) scale(1.04); }
html[data-theme="dark"][data-theme-progress-stage="5"] body.studyguide-portal.app-unlocked::after,
html[data-theme="dark"][data-theme-progress-stage="5"] body.course-library-page.app-unlocked::after { opacity: .28; transform: translate3d(0, -14px, 0) scale(1.055); }
html[data-theme="dark"][data-theme-progress-stage="1"] body.studyguide-portal.app-unlocked::before,
html[data-theme="dark"][data-theme-progress-stage="1"] body.course-library-page.app-unlocked::before { opacity: .46; }
html[data-theme="dark"][data-theme-progress-stage="2"] body.studyguide-portal.app-unlocked::before,
html[data-theme="dark"][data-theme-progress-stage="2"] body.course-library-page.app-unlocked::before { opacity: .51; }
html[data-theme="dark"][data-theme-progress-stage="3"] body.studyguide-portal.app-unlocked::before,
html[data-theme="dark"][data-theme-progress-stage="3"] body.course-library-page.app-unlocked::before { opacity: .56; }
html[data-theme="dark"][data-theme-progress-stage="4"] body.studyguide-portal.app-unlocked::before,
html[data-theme="dark"][data-theme-progress-stage="4"] body.course-library-page.app-unlocked::before { opacity: .62; }
html[data-theme="dark"][data-theme-progress-stage="5"] body.studyguide-portal.app-unlocked::before,
html[data-theme="dark"][data-theme-progress-stage="5"] body.course-library-page.app-unlocked::before { opacity: .7; }

html[data-theme="light"][data-theme-progress-stage="1"] body.studyguide-portal.app-unlocked::before { opacity: .44 !important; }
html[data-theme="light"][data-theme-progress-stage="2"] body.studyguide-portal.app-unlocked::before { opacity: .49 !important; }
html[data-theme="light"][data-theme-progress-stage="3"] body.studyguide-portal.app-unlocked::before { opacity: .54 !important; }
html[data-theme="light"][data-theme-progress-stage="4"] body.studyguide-portal.app-unlocked::before { opacity: .59 !important; }
html[data-theme="light"][data-theme-progress-stage="5"] body.studyguide-portal.app-unlocked::before { opacity: .64 !important; }
html[data-theme="light"][data-theme-progress-stage="1"] body.studyguide-portal.app-unlocked::after { opacity: .15; }
html[data-theme="light"][data-theme-progress-stage="2"] body.studyguide-portal.app-unlocked::after { opacity: .17; }
html[data-theme="light"][data-theme-progress-stage="3"] body.studyguide-portal.app-unlocked::after { opacity: .2; }
html[data-theme="light"][data-theme-progress-stage="4"] body.studyguide-portal.app-unlocked::after { opacity: .23; }
html[data-theme="light"][data-theme-progress-stage="5"] body.studyguide-portal.app-unlocked::after { opacity: .26; }
html[data-theme="light"][data-theme-progress-stage="1"] body.course-library-page.app-unlocked::before { opacity: .43; }
html[data-theme="light"][data-theme-progress-stage="2"] body.course-library-page.app-unlocked::before { opacity: .47; }
html[data-theme="light"][data-theme-progress-stage="3"] body.course-library-page.app-unlocked::before { opacity: .52; }
html[data-theme="light"][data-theme-progress-stage="4"] body.course-library-page.app-unlocked::before { opacity: .57; }
html[data-theme="light"][data-theme-progress-stage="5"] body.course-library-page.app-unlocked::before { opacity: .62; }
html[data-theme="light"][data-theme-progress-stage="1"] body.course-library-page.app-unlocked::after { opacity: .12; }
html[data-theme="light"][data-theme-progress-stage="2"] body.course-library-page.app-unlocked::after { opacity: .14; }
html[data-theme="light"][data-theme-progress-stage="3"] body.course-library-page.app-unlocked::after { opacity: .17; }
html[data-theme="light"][data-theme-progress-stage="4"] body.course-library-page.app-unlocked::after { opacity: .2; }
html[data-theme="light"][data-theme-progress-stage="5"] body.course-library-page.app-unlocked::after { opacity: .23; }
@media (max-width: 620px) {
  .theme-evolution-badge { max-width: 132px; padding-inline: 5px; font-size: 9px; }
  html[data-theme="dark"] body.studyguide-portal.app-unlocked::after,
  html[data-theme="dark"] body.course-library-page.app-unlocked::after { right: -120px; bottom: -80px; width: 360px; height: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body.studyguide-portal.app-unlocked::after,
  html[data-theme="dark"] body.course-library-page.app-unlocked::after,
  body.studyguide-portal::before,
  body.course-library-page::before,
  html[data-theme="light"] body.studyguide-portal::after,
  html[data-theme="light"] body.course-library-page::after,
  .theme-evolution-badge { transition: none !important; }
}
@media (max-width: 850px) {
  .studyguide-portal .layout > .menu { max-height: min(68vh, 620px); }
}
@media (max-width: 700px) {
  .studyguide-portal .db-layout > .db-sidebar { max-height: min(64vh, 560px); }
}

/* Progression scenes: each milestone adds a recognizable layer to the chosen world. */
body.studyguide-portal,
body.course-library-page { isolation: isolate; }
body.studyguide-portal > .wrap,
body.course-library-page > .course-shell { position: relative; z-index: 2; }
.theme-scene {
  --scene-line: rgba(178, 180, 255, .4);
  --scene-accent: #b8b1ff;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  contain: paint;
  transition: opacity 1.2s ease;
}
body.app-unlocked .theme-scene { opacity: 1; }
.theme-scene > * { position: absolute; pointer-events: none; }
.scene-atmosphere {
  inset: -14%;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8) 99%, transparent 100%) 0 0 / 247px 223px,
    radial-gradient(1px 1px at 73% 13%, rgba(177,219,255,.7) 99%, transparent 100%) 0 0 / 319px 291px,
    radial-gradient(2px 2px at 88% 69%, rgba(255,255,255,.68) 99%, transparent 100%) 0 0 / 401px 337px,
    radial-gradient(1px 1px at 42% 83%, rgba(173,239,255,.72) 99%, transparent 100%) 0 0 / 293px 279px,
    radial-gradient(1px 1px at 25% 61%, rgba(255,255,255,.55) 99%, transparent 100%) 0 0 / 367px 319px,
    radial-gradient(ellipse at 11% 17%, rgba(89, 54, 197, .32), transparent 34%),
    radial-gradient(ellipse at 81% 73%, rgba(15, 115, 157, .19), transparent 38%),
    radial-gradient(ellipse at 49% 42%, rgba(49, 38, 117, .13), transparent 48%);
  opacity: .74;
  animation: scene-cloud-drift 58s ease-in-out infinite alternate;
  transition: opacity 1.8s ease, filter 1.8s ease;
}
.scene-nebula {
  inset: -22%;
  opacity: .04;
  filter: none;
  background:
    radial-gradient(ellipse at 28% 58%, rgba(120, 63, 255, .42), transparent 24%),
    radial-gradient(ellipse at 75% 35%, rgba(39, 193, 222, .3), transparent 23%),
    radial-gradient(ellipse at 57% 79%, rgba(225, 76, 191, .24), transparent 22%);
  background-size: 160% 160%;
  transform: rotate(-10deg) scale(.92);
  transition: opacity 2s ease, transform 3s ease;
  animation: scene-nebula-breathe 54s ease-in-out infinite alternate;
}
.scene-aurora {
  inset: -20% -10% auto;
  height: 88vh;
  opacity: .04;
  filter: none;
  background: linear-gradient(118deg, transparent 25%, rgba(90, 94, 255, .12) 38%, rgba(53, 205, 229, .12) 51%, rgba(172, 92, 241, .13) 61%, transparent 73%) 0 50% / 180% 100% no-repeat;
  transform: rotate(-13deg) translateY(-15%);
  transition: opacity 2s ease, transform 3s ease, translate 3s ease;
  animation: scene-aurora-flow 58s ease-in-out infinite alternate;
}
.scene-constellations {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  color: var(--scene-line);
  -webkit-mask-image: radial-gradient(ellipse 80% 74% at 50% 50%, transparent 0 72%, rgba(0,0,0,.12) 84%, #000 100%);
  mask-image: radial-gradient(ellipse 80% 74% at 50% 50%, transparent 0 72%, rgba(0,0,0,.12) 84%, #000 100%);
  transition: opacity 1.5s ease;
}
.scene-constellations path {
  fill: none;
  stroke: currentColor;
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}
.scene-constellations circle { fill: var(--scene-accent); filter: drop-shadow(0 0 2px currentColor); animation: constellation-twinkle 4.6s ease-in-out infinite alternate; }
.scene-constellations circle:nth-of-type(3n) { animation-delay: -2.3s; }
.scene-world {
  right: clamp(-125px, -5vw, -40px);
  bottom: clamp(-200px, -15vh, -95px);
  width: clamp(270px, 29vw, 420px);
  height: auto;
  opacity: 0;
  filter: saturate(1.12) drop-shadow(0 0 36px rgba(121, 93, 255, .25));
  transform: translate3d(22px, 28px, 0) scale(.72) rotate(-8deg);
  transform-origin: 55% 50%;
  transition: opacity 2s ease, transform 2.8s cubic-bezier(.2,.72,.25,1), filter 2.4s ease;
  animation: scene-world-drift 36s ease-in-out infinite alternate;
}
.scene-moon {
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.5s ease, transform 2.4s ease, box-shadow 2s ease;
}
.scene-moon--one {
  top: 38%; right: 1.5%; width: clamp(30px, 4vw, 56px); aspect-ratio: 1;
  background: radial-gradient(circle at 32% 27%, #fff 0 2%, #d8d0ff 5%, #897bd4 45%, #383459 75%, #14172e 100%);
  box-shadow: 0 0 28px rgba(184, 173, 255, .25), inset -9px -7px 12px rgba(5, 7, 20, .5);
  animation: moon-quiet-orbit 19s ease-in-out infinite alternate;
}
.scene-moon--two {
  left: 1.5%; top: 66%; width: clamp(13px, 1.7vw, 24px); aspect-ratio: 1;
  background: radial-gradient(circle at 34% 30%, #fff, #b0e5ff 22%, #566dba 62%, #121a3e 100%);
  box-shadow: 0 0 18px rgba(106, 201, 255, .34);
  animation: moon-quiet-orbit 27s ease-in-out infinite alternate-reverse;
}
.scene-solar-planets { inset: 0; z-index: 2; }
.scene-planet {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(220,236,255,.28);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.62);
  translate: 0 0;
  box-shadow: inset -12px -9px 18px rgba(3,8,24,.62), inset 4px 4px 10px rgba(255,255,255,.18), 0 0 24px rgba(104,155,255,.2);
  transition: opacity 1.8s ease, transform 2s cubic-bezier(.2,.72,.25,1), filter 2s ease;
  animation: none;
}
.scene-planet[data-unlocked="true"] { opacity: .62; transform: scale(1); animation-play-state: running; }
.scene-planet { animation-play-state: paused; }
.scene-planet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.46), transparent 24%);
  mix-blend-mode: screen;
}
.scene-planet--mercury {
  right: 25%; top: 12%; width: clamp(23px, 2.7vw, 39px);
  background: radial-gradient(circle at 28% 25%, #d8d9dc 0 2%, transparent 3%), radial-gradient(circle at 68% 67%, #34394a 0 8%, transparent 9%), radial-gradient(circle at 43% 58%, #565b6a 0 7%, transparent 8%), radial-gradient(circle at 34% 32%, #b8b5b2 0, #777783 48%, #34384d 100%);
  box-shadow: inset -7px -6px 10px rgba(3,8,24,.7), inset 3px 3px 6px rgba(255,255,255,.18), 0 0 18px rgba(192,184,177,.18);
}
.scene-planet--venus {
  right: 6%; top: 52%; width: clamp(33px, 4vw, 60px);
  background: repeating-linear-gradient(158deg, rgba(255,236,178,.2) 0 3px, transparent 4px 10px), radial-gradient(circle at 29% 22%, #fff0c1, #e9b86b 35%, #a95d3b 75%, #542d45);
  box-shadow: inset -12px -9px 18px rgba(46,17,17,.5), inset 3px 3px 10px rgba(255,243,205,.34), 0 0 28px rgba(255,185,102,.22);
}
.scene-planet--earth {
  right: 35%; top: 18%; width: clamp(31px, 4.2vw, 63px);
  background: radial-gradient(ellipse at 32% 39%, #7ecb7d 0 12%, transparent 13%), radial-gradient(ellipse at 63% 61%, #73b96c 0 17%, transparent 18%), radial-gradient(ellipse at 71% 30%, #a0d47b 0 9%, transparent 10%), radial-gradient(circle at 27% 22%, #c7f3ff, #3ba6e9 42%, #124e9a 77%, #0c1e52);
  box-shadow: inset -12px -9px 18px rgba(3,8,24,.62), inset 4px 4px 10px rgba(221,250,255,.38), 0 0 32px rgba(74,173,255,.26);
}
.scene-planet--mars {
  right: 9%; top: 28%; width: clamp(24px, 3vw, 44px);
  background: radial-gradient(circle at 67% 61%, rgba(98,37,33,.48) 0 10%, transparent 11%), radial-gradient(circle at 31% 23%, #ffd29d, #df7548 38%, #9a3e38 76%, #43253c);
  box-shadow: inset -9px -7px 13px rgba(38,9,19,.62), inset 3px 3px 7px rgba(255,220,173,.3), 0 0 22px rgba(235,112,75,.24);
}
.scene-planet--jupiter {
  right: 7%; bottom: 17%; width: clamp(72px, 9vw, 132px);
  overflow: hidden;
  background: radial-gradient(ellipse at 58% 60%, #b95346 0 8%, #e38a62 9% 12%, transparent 13%), repeating-linear-gradient(0deg, #8f5548 0 7%, #dba77b 8% 15%, #f3d0a2 16% 22%, #ad6b57 23% 31%, #ecd0a5 32% 39%, #9f5b49 40% 48%), radial-gradient(circle at 28% 22%, #ffe4bd, #d39a70 60%, #704352);
  box-shadow: inset -17px -12px 24px rgba(27,10,24,.68), inset 4px 4px 12px rgba(255,231,198,.35), 0 0 34px rgba(217,151,115,.2);
}
.scene-planet--saturn {
  right: 27%; top: 44%; width: clamp(62px, 7.6vw, 112px);
  background: repeating-linear-gradient(0deg, rgba(130,79,56,.3) 0 5%, transparent 6% 13%), radial-gradient(circle at 29% 22%, #fff0bd, #ddbd82 44%, #9a795e 78%, #594866);
  box-shadow: inset -14px -10px 20px rgba(24,12,25,.62), inset 4px 4px 10px rgba(255,241,195,.34), 0 0 30px rgba(230,189,119,.22);
}
.scene-planet--saturn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 28% -42%;
  border: 3px solid rgba(236,207,155,.8);
  border-left-color: rgba(183,145,113,.54);
  border-right-color: rgba(255,229,181,.72);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 10px rgba(255,215,147,.2), inset 0 0 8px rgba(202,162,126,.18);
}
.scene-planet--uranus {
  right: 43%; bottom: 18%; width: clamp(39px, 5vw, 72px);
  background: radial-gradient(circle at 29% 22%, #e5ffff, #92e8ea 38%, #49aebd 72%, #284f82);
  box-shadow: inset -11px -8px 16px rgba(6,27,55,.64), inset 4px 4px 9px rgba(241,255,255,.4), 0 0 28px rgba(98,226,236,.22);
}
.scene-planet--uranus::before {
  content: "";
  position: absolute;
  inset: -14% 34%;
  border: 1px solid rgba(164,246,255,.65);
  border-radius: 50%;
  transform: rotate(72deg);
}
.scene-planet--neptune {
  right: 18%; bottom: 36%; width: clamp(40px, 5.1vw, 74px);
  background: radial-gradient(ellipse at 62% 56%, rgba(111,180,255,.58) 0 9%, transparent 10%), radial-gradient(circle at 28% 22%, #b4e7ff, #367ce4 38%, #2446ad 74%, #182258);
  box-shadow: inset -12px -9px 18px rgba(4,9,44,.66), inset 4px 4px 9px rgba(224,247,255,.32), 0 0 32px rgba(64,129,255,.26);
}
.scene-planet--pluto {
  right: 48%; top: 31%; width: clamp(18px, 2.2vw, 32px);
  background: radial-gradient(circle at 31% 24%, #fff1dc, #cbb49d 38%, #786678 76%, #34384d);
  box-shadow: inset -7px -5px 9px rgba(3,8,24,.65), inset 2px 2px 5px rgba(255,255,255,.28), 0 0 18px rgba(206,173,165,.2);
}
.scene-planet--earth,
.scene-planet--saturn,
.scene-planet--neptune { animation: solar-world-drift 31s ease-in-out infinite alternate; animation-play-state: paused; }
.scene-planet[data-unlocked="true"]:is(.scene-planet--earth, .scene-planet--saturn, .scene-planet--neptune) { animation-play-state: running; }
.scene-comet {
  --comet-peak-opacity: .42;
  top: 28%; left: 73%; width: clamp(130px, 16vw, 220px); height: 2px;
  opacity: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(105, 210, 255, .04) 40%, rgba(132, 202, 255, .5) 88%, #fff 100%);
  filter: drop-shadow(0 0 7px rgba(113, 203, 255, .72));
  transform: rotate(12deg);
  transition: opacity 1.8s ease;
  animation: none;
}
.scene-comet::after {
  content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 3px rgba(179, 235, 255, .7), 0 0 25px 6px rgba(98, 151, 255, .35);
}
.scene-comet::before {
  content: ""; position: absolute; right: 2px; top: 50%; width: 100%; height: 9px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 8%, rgba(63,153,255,.025) 48%, rgba(83,198,255,.12) 78%, rgba(205,247,255,.46) 100%);
  filter: blur(2px);
}
.scene-sun {
  top: 42vh; right: 4%; width: clamp(105px, 14vw, 190px); aspect-ratio: 1;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,246,.98) 0 1%, rgba(255,247,216,.74) 8%, rgba(255,197,99,.3) 28%, rgba(255,169,71,.11) 51%, transparent 72%);
  filter: blur(1px);
  transform: scale(.72);
  transition: opacity 1.8s ease, transform 2.6s ease;
  animation: sun-radiance 18s ease-in-out infinite alternate;
}
.scene-horizon {
  right: -10%; bottom: -21%; width: 82vw; height: 35vh; min-height: 170px;
  opacity: 0; border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  background: linear-gradient(180deg, rgba(213,154,67,.08), rgba(196,128,46,.13));
  filter: blur(20px); transform: rotate(-8deg);
  transition: opacity 1.6s ease;
}
.scene-paw-trail {
  left: -1%; bottom: 1%; width: 34vw; height: 56vh; opacity: .06;
  background: url("dog-theme-paws.svg") repeat 0 0 / 155px 155px;
  -webkit-mask-image: linear-gradient(30deg, #000 0 12%, transparent 72%);
  mask-image: linear-gradient(30deg, #000 0 12%, transparent 72%);
  transform: rotate(-13deg);
  transition: opacity 1.4s ease, transform 2s ease;
  animation: none;
}
.scene-companions {
  right: clamp(-88px, -5vw, -30px); bottom: clamp(-86px, -8vh, -38px);
  display: flex; align-items: end; justify-content: end;
  width: clamp(260px, 27vw, 390px); height: clamp(260px, 40vh, 370px);
  opacity: 0; transform: translate3d(24px, 28px, 0) scale(.96);
  transition: opacity 2s ease, transform 2.7s cubic-bezier(.2,.72,.25,1);
  filter: drop-shadow(0 20px 24px rgba(110, 75, 35, .16));
  animation: companion-float 22s ease-in-out infinite alternate;
}
.scene-dog { width: 53%; height: 100%; object-fit: contain; object-position: bottom center; }
.scene-dog { transition: opacity 1.8s ease, transform 2s ease; }
.scene-dog--retriever { transform: translateY(4px); }
.scene-dog--samoyed { width: 62%; height: 81%; margin-left: -14%; transform: translateY(5px); }
.scene-medallion {
  top: 12%; right: 9%; display: grid; place-items: center; width: 52px; aspect-ratio: 1;
  border: 1px solid rgba(166, 108, 37, .5); border-radius: 50%;
  color: #945b19; font-size: 22px; opacity: 0; transform: scale(.7) rotate(-14deg);
  background: radial-gradient(circle at 35% 28%, #fff8e3, #e8bd68 60%, #bf8230);
  box-shadow: 0 0 0 7px rgba(205, 157, 74, .1), 0 0 32px rgba(193, 137, 47, .24);
  transition: opacity 1.3s ease, transform 1.7s cubic-bezier(.2,.8,.2,1);
  animation: medal-sway 8s ease-in-out infinite alternate;
}

/* Dark world: light → orbit → star map → nebula → deep-space bodies → full atlas. */
html[data-theme="dark"] .theme-scene { --scene-line: rgba(180, 180, 255, .52); --scene-accent: #b8efff; }
html[data-theme="dark"] .scene-constellations { opacity: .08; }
html[data-theme="dark"] .scene-nebula { opacity: .04; }
html[data-theme="dark"] .scene-moon--one { opacity: .12; }
html[data-theme="dark"] .scene-world { opacity: .055; }
html[data-theme="dark"][data-theme-progress-stage="1"] .scene-world { opacity: .16; transform: translate3d(7px, 12px, 0) scale(.83) rotate(-4deg); }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-world { opacity: .25; transform: translate3d(2px, 4px, 0) scale(.91) rotate(-2deg); }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-constellations { opacity: .12; }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-world { opacity: .34; transform: translate3d(0,0,0) scale(.98); filter: saturate(1.28) drop-shadow(0 0 52px rgba(121,93,255,.34)); }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-constellations { opacity: .16; }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-nebula { opacity: .7; transform: rotate(-4deg) scale(1.08); }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-aurora { opacity: .38; transform: rotate(-7deg) translateY(0); }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-world,
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-world { opacity: .4; transform: translate3d(-3px,-6px,0) scale(1) rotate(.5deg); filter: saturate(1.28) drop-shadow(0 0 42px rgba(121,93,255,.28)); }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-constellations { opacity: .15; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-constellations { opacity: .18; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-nebula,
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-nebula { opacity: .82; transform: rotate(1deg) scale(1.16); }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-aurora,
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-aurora { opacity: .48; transform: rotate(-4deg) translateY(8%); }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-moon--one,
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-moon--one { opacity: .78; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-moon--two,
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-moon--two { opacity: .78; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-comet,
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-comet { animation: distant-comet 38s cubic-bezier(.37,.02,.7,.99) 1.5s infinite; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-world { opacity: .5; transform: translate3d(-4px,-8px,0) scale(1.04) rotate(1deg); filter: saturate(1.34) drop-shadow(0 0 48px rgba(121,93,255,.3)); }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-nebula { opacity: 1; transform: rotate(4deg) scale(1.25); }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-aurora { opacity: .64; transform: rotate(0) translateY(12%); }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-constellations { opacity: .18; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-comet { --comet-peak-opacity: .58; }

/* Light world: pawprints → first companion → sunny trail → golden hour → the pack → best in show. */
html[data-theme="light"] .theme-scene {
  --scene-line: rgba(156, 112, 49, .46);
  --scene-accent: #b97a26;
}
html[data-theme="light"] .scene-atmosphere {
  background:
    radial-gradient(ellipse at 13% 18%, rgba(255, 216, 143, .48), transparent 36%),
    radial-gradient(ellipse at 86% 75%, rgba(224, 192, 137, .37), transparent 36%),
    radial-gradient(ellipse at 51% 43%, rgba(255, 239, 202, .4), transparent 52%);
  opacity: .7;
}
html[data-theme="light"] .scene-nebula,
html[data-theme="light"] .scene-aurora,
html[data-theme="light"] .scene-world,
html[data-theme="light"] .scene-moon,
html[data-theme="light"] .scene-comet { display: none; }
html[data-theme="light"] .scene-constellations { color: rgba(171, 118, 41, .52); opacity: 0; }
html[data-theme="light"] .scene-constellations path { stroke-width: .7; }
html[data-theme="light"] .scene-sun { opacity: .08; }
html[data-theme="light"] .scene-paw-trail { opacity: .1; }
html[data-theme="light"] .scene-companions { opacity: 0; }
html[data-theme="light"] .scene-dog--samoyed { opacity: 0; }
html[data-theme="light"][data-theme-progress-stage="1"] .scene-paw-trail { opacity: .1; transform: rotate(-18deg) translate(2%, -2%); }
html[data-theme="light"][data-theme-progress-stage="1"] .scene-companions { opacity: .18; transform: translate3d(8px,12px,0) scale(.98); }
html[data-theme="light"][data-theme-progress-stage="2"] .scene-paw-trail { opacity: .14; transform: rotate(-21deg) translate(4%,-3%); }
html[data-theme="light"][data-theme-progress-stage="2"] .scene-companions { opacity: .3; transform: translate3d(3px,5px,0) scale(1); }
html[data-theme="light"][data-theme-progress-stage="2"] .scene-dog--samoyed { opacity: .12; }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-paw-trail { opacity: .18; transform: rotate(-24deg) translate(5%,-3%); }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-companions { opacity: .28; transform: translate3d(0,0,0) scale(1.01); }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-dog--samoyed { opacity: .28; }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-sun { opacity: .26; transform: scale(.96); }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-horizon { opacity: .5; }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-constellations { opacity: .08; }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-paw-trail,
html[data-theme="light"][data-theme-progress-stage="5"] .scene-paw-trail { opacity: .22; transform: rotate(-26deg) translate(3%,-2%); }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-companions,
html[data-theme="light"][data-theme-progress-stage="5"] .scene-companions { opacity: .34; transform: translate3d(-2px,-3px,0) scale(1.01); }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-dog--samoyed,
html[data-theme="light"][data-theme-progress-stage="5"] .scene-dog--samoyed { opacity: .78; }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-sun,
html[data-theme="light"][data-theme-progress-stage="5"] .scene-sun { opacity: .34; transform: scale(1.04); }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-horizon,
html[data-theme="light"][data-theme-progress-stage="5"] .scene-horizon { opacity: .64; }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-constellations,
html[data-theme="light"][data-theme-progress-stage="5"] .scene-constellations { opacity: .07; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-companions { opacity: .42; transform: translate3d(-3px,-4px,0) scale(1.02); }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-dog--samoyed { opacity: 1; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-sun { opacity: .46; transform: scale(1.08); }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-medallion { opacity: .92; transform: scale(1) rotate(0); }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-constellations { opacity: .1; }

/* The scene owns decorative layers now, avoiding doubled dog/planet artwork. */
body.studyguide-portal::before,
body.studyguide-portal::after,
body.course-library-page::before,
body.course-library-page::after { content: none !important; background: none !important; }

/* Keep the progress chip, outlines and shared controls on the same palette tokens. */
.theme-evolution-badge {
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel2) 72%, transparent);
  color: var(--cyan);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
html[data-theme="light"] .theme-evolution-badge {
  border-color: rgba(132, 91, 38, .3);
  background: rgba(255, 248, 231, .82);
  color: #875718;
}
html[data-theme="dark"] .theme-evolution-badge { border-color: rgba(159, 157, 235, .34); color: #a8efff; }
html[data-theme="dark"] body.studyguide-portal :is(.theme-control, .course-progress, .material-progress, .auth-card, .option-card, .course-card, .semester-card, .sheet, .db-entry-card, .db-summary-stat, .db-detail-panel, .db-doc-panel, .db-handout-card, .db-schema-card, .db-tool-card, .db-practice-card, .guide-card, .tile, .mini-stat, .term-card) { border-color: var(--line); }
html[data-theme="light"] body.studyguide-portal :is(.theme-control, .course-progress, .material-progress, .auth-card, .option-card, .course-card, .semester-card, .sheet, .db-entry-card, .db-summary-stat, .db-detail-panel, .db-doc-panel, .db-handout-card, .db-schema-card, .db-tool-card, .db-practice-card, .guide-card, .tile, .mini-stat, .term-card) { border-color: rgba(132, 91, 38, .25); }
html[data-theme] body.studyguide-portal :is(.theme-control, .back-link, .course-progress, .material-progress, .progress-panel, .stat-panel, .auth-panel, .overview-card, .topic-card, .seminar-card, .practice-card, .material-card, .tool-card, .reference-card, .work-item, .term, .question-list details, .solution, .course-sidebar, .course-menu-toolbar, .topic-nav button, .course-tab, .progress-control button, .source-links a, .material-actions a, .tool-action, .account-action, .tool-result, .tool-chart, .table-scroll, .diagram-card, .db-chip, .db-nav-btn, .db-subtab, .db-relation-btn, .be-mock-card, .be-mock-option, .be-mock-answer) { border-color: var(--line) !important; }
html[data-theme] body.course-library-page :is(.theme-control, .back-link, .progress-panel, .stat-panel, .auth-panel, .overview-card, .topic-card, .seminar-card, .practice-card, .material-card, .tool-card, .reference-card, .work-item, .term, .question-list details, .solution, .course-sidebar, .course-menu-toolbar, .topic-nav button, .course-tab, .progress-control button, .source-links a, .material-actions a, .tool-action, .account-action, .tool-result, .tool-chart, .table-scroll, .diagram-card) { border-color: var(--line) !important; }

@keyframes scene-cloud-drift { from { transform: translate3d(-1.2%, -.6%, 0) scale(1); } to { transform: translate3d(1.4%, 1%, 0) scale(1.035); } }
@keyframes scene-nebula-breathe { from { translate: -.7% -.4%; } to { translate: .7% .4%; } }
@keyframes scene-aurora-flow { from { translate: -.8% 0; } to { translate: .8% 1.2%; } }
@keyframes scene-world-drift { from { translate: 0 0; } to { translate: 0 -8px; } }
@keyframes moon-quiet-orbit { from { translate: 0 0; } to { translate: 10px -14px; } }
@keyframes distant-comet { 0%, 7% { translate: 0 0; opacity: 0; } 20% { opacity: var(--comet-peak-opacity); } 76% { translate: 18vw 4vw; opacity: var(--comet-peak-opacity); } 88%, 100% { translate: 18vw 4vw; opacity: 0; } }
@keyframes sun-radiance { from { filter: blur(1px) saturate(.92); } to { filter: blur(3px) saturate(1.08); } }
@keyframes companion-float { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes medal-sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes constellation-twinkle { from { opacity: .5; } to { opacity: 1; } }
@media (max-width: 700px) {
  .scene-world { right: -145px; bottom: -150px; width: 300px; }
  .scene-companions { right: -92px; bottom: -90px; width: 285px; height: 300px; }
  .scene-sun { right: 2%; top: 65vh; width: 130px; }
  .scene-moon--one { top: 53%; right: 1%; width: 36px; }
  .scene-moon--two { top: 74%; left: 1%; width: 16px; }
  .scene-comet { left: 56%; width: clamp(110px, 30vw, 160px); }
  .scene-medallion { top: 18%; right: 10%; width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-scene *, .theme-scene { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* v1.71: performance-tuned black-hole scene with milestone-unlocked solar worlds. */
.scene-black-hole,
.scene-satellite-orbit,
.scene-paw-constellation,
.scene-fetch-ball { display: block; }
.scene-black-hole {
  left: clamp(-280px, -12vw, -55px);
  top: clamp(135px, 18vh, 245px);
  width: clamp(620px, 62vw, 940px);
  height: clamp(390px, 58vh, 620px);
  z-index: 3;
  opacity: .06;
  overflow: visible;
  transform: scale(.4);
  transform-origin: 66% 45%;
  transition: opacity 2.1s ease, transform 3.3s cubic-bezier(.2,.72,.22,1);
  filter: none;
}
.scene-black-hole::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8% -10%;
  border-radius: 50%;
  opacity: .1;
  background: radial-gradient(ellipse at 67% 44%, rgba(100,119,255,.25), transparent 43%), radial-gradient(ellipse at 60% 51%, rgba(75,216,241,.18), transparent 57%), radial-gradient(ellipse at 68% 46%, rgba(245,151,118,.16), transparent 66%);
  transition: opacity 2s ease;
}
.scene-black-hole > * { position: absolute; pointer-events: none; }
.scene-black-hole-art { inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.bh-haze { opacity: .9; }
.bh-disk-far {
  animation: none;
  transition: opacity 2.4s ease;
}
.bh-lensing { transition: opacity 2.4s ease; }
.bh-disk-wide { opacity: .74; }
.bh-disk-broad { opacity: .9; }
.bh-disk-hot { opacity: .85; }
.bh-flow-line {
  fill: none;
  stroke: rgba(255,222,174,.82);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 3 11 28 9;
  opacity: .58;
  animation: none;
}
.bh-flow-line--one { animation: black-hole-stream-flow 112s linear infinite; }
.bh-flow-line--two { stroke: rgba(255,166,132,.84); stroke-width: 1.7; }
.bh-flow-line--three { stroke: rgba(171,229,255,.78); stroke-width: 1.5; }
.bh-flow-line--four { stroke: rgba(203,177,255,.72); stroke-width: 1.2; }
.bh-flow-orbit {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 5 12 38 18;
  opacity: .52;
  animation: none;
}
.bh-flow-orbit--outer { stroke: rgba(113,213,255,.82); stroke-width: 2.4; animation: black-hole-orbit-flow 104s linear infinite; }
.bh-flow-orbit--inner { stroke: rgba(255,197,139,.9); stroke-width: 3.1; stroke-dasharray: 2 8 24 15; }
.bh-bend-glow,
.bh-bend-hot { fill: none; stroke-linecap: round; }
.bh-bend-glow { stroke: url(#bh-ring); stroke-width: 39; opacity: .48; }
.bh-bend-hot { stroke: rgba(255,240,218,.94); stroke-width: 9; opacity: .86; }
.bh-bend-glow--lower { opacity: .6; }
.bh-bend-hot--lower { stroke: rgba(255,226,203,.86); stroke-width: 7; opacity: .76; }
.bh-photon-ring {
  fill: none;
  stroke: url(#bh-ring);
  stroke-width: 15;
  opacity: .78;
}
.bh-shadow { fill: #000; }
.bh-shadow-inner { fill: #010105; }
.bh-disk-near {
  fill: none;
  stroke: url(#bh-disk);
  stroke-width: 28;
  stroke-linecap: round;
  opacity: .91;
  stroke-dasharray: 88 14 36 18;
  animation: black-hole-stream-flow 96s linear infinite reverse;
}
.bh-near-highlight {
  fill: none;
  stroke: url(#bh-hot);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .9;
}
.bh-particles circle {
  fill: #090a11;
  stroke: rgba(255,231,205,.66);
  stroke-width: 1.4;
}
.bh-particles circle:nth-child(2),
.bh-particles circle:nth-child(4) {
  fill: #ffe4c9;
  stroke: none;
  animation: black-hole-spark 6s ease-in-out infinite alternate;
}
.scene-black-hole-sparks { inset: 0; z-index: 2; opacity: 0; transition: opacity 1.8s ease; }
.scene-black-hole-sparks i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #ffe8d1; box-shadow: 0 0 8px 2px rgba(255,205,163,.68);
  animation: none;
}
.scene-black-hole-sparks i:nth-child(1) { left: 16%; top: 43%; }
.scene-black-hole-sparks i:nth-child(2) { left: 26%; top: 34%; }
.scene-black-hole-sparks i:nth-child(3) { left: 78%; top: 44%; animation-delay: -3.4s; }
.scene-black-hole-sparks i:nth-child(4) { left: 68%; top: 56%; animation-delay: -1.1s; }
.scene-black-hole-sparks i:nth-child(5) { left: 43%; top: 23%; animation-delay: -4.1s; }
.scene-black-hole-sparks i:nth-child(6) { left: 56%; top: 75%; animation-delay: -2.7s; }
.scene-black-hole-sparks i:nth-child(1),
.scene-black-hole-sparks i:nth-child(6) { animation: black-hole-spark 8s ease-in-out infinite alternate; }
/* Keep the orbital plane fixed; animate the traveler and the disk's orbiting streaks. */
.scene-satellite-orbit {
  left: 40.8%; top: 4.2%; width: 53%; height: 80%;
  z-index: 2;
  border: 1px solid rgba(129,190,255,.28);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0;
  rotate: -14deg;
  transition: opacity 1.8s ease;
  box-shadow: 0 0 16px rgba(99,156,255,.08), inset 0 0 10px rgba(112,159,255,.05);
}
.scene-satellite-orbit-traveler {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: satellite-orbit-travel 96s linear infinite;
}
.scene-satellite-orbit span {
  position: absolute; top: 0; left: 50%; width: 8px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: #a9eaff;
  box-shadow: 0 0 6px 3px rgba(110,193,255,.5), 0 0 18px 5px rgba(128,105,255,.26), 0 0 30px rgba(255,199,143,.18);
}
.scene-satellite-orbit span::after {
  content: ""; position: absolute; inset: -4px -7px; border: 1px solid rgba(183,222,255,.62); border-radius: 50%; rotate: -22deg;
}
.scene-paw-constellation {
  left: clamp(22px, 7vw, 104px); top: clamp(150px, 25vh, 285px);
  width: 98px; height: 84px; opacity: 0;
  transform: rotate(-14deg) scale(.72);
  transition: opacity 1.6s ease, transform 2s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 0 10px rgba(190,139,52,.16));
}
.scene-paw-constellation i,
.scene-paw-constellation b {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8df, #d89c45 70%, #aa6d28);
  box-shadow: 0 0 7px rgba(196,139,47,.38);
}
.scene-paw-constellation i { width: 13px; height: 15px; }
.scene-paw-constellation i:nth-child(1) { left: 11%; top: 30%; rotate: -28deg; }
.scene-paw-constellation i:nth-child(2) { left: 31%; top: 8%; rotate: -12deg; }
.scene-paw-constellation i:nth-child(3) { left: 55%; top: 7%; rotate: 12deg; }
.scene-paw-constellation i:nth-child(4) { left: 75%; top: 28%; rotate: 27deg; }
.scene-paw-constellation b { left: 29%; top: 39%; width: 44px; height: 34px; border-radius: 46% 46% 54% 54%; }
.scene-fetch-ball {
  left: clamp(42px, 19vw, 258px); bottom: 13vh; width: 34px; aspect-ratio: 1;
  border-radius: 50%; opacity: 0; transform: translateY(8px) scale(.55);
  background: radial-gradient(circle at 33% 28%, #eef0ad 0 6%, #bac84a 23%, #80942d 66%, #536526 100%);
  box-shadow: inset -5px -5px 7px rgba(30,54,19,.35), 0 5px 16px rgba(88,93,39,.18);
  transition: opacity 1.5s ease, transform 1.8s cubic-bezier(.2,.8,.2,1);
}
.scene-fetch-ball::before,
.scene-fetch-ball::after { content: ""; position: absolute; inset: 2px 9px; border: 1px solid rgba(250,249,200,.85); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; rotate: 28deg; }
.scene-fetch-ball::after { rotate: -28deg; }
html[data-theme="light"] .scene-black-hole,
html[data-theme="light"] .scene-satellite-orbit { display: none; }
html[data-theme="dark"] .scene-paw-constellation,
html[data-theme="dark"] .scene-fetch-ball { display: none; }

/* Nebula milestones: field → orbit → constellation → nebula → visitors → atlas. */
html[data-theme="dark"] .scene-world { opacity: .035; }
html[data-theme="dark"] .scene-constellations { opacity: .035; }
html[data-theme="dark"] .scene-nebula { opacity: .018; }
html[data-theme="dark"] .scene-moon--one { opacity: 0; }
html[data-theme="dark"] .scene-moon--two { opacity: 0; }
html[data-theme="dark"] .scene-black-hole { opacity: .07; transform: scale(.42); }
html[data-theme="dark"] .scene-black-hole::before { opacity: .14; }
html[data-theme="dark"] .bh-disk-far { opacity: .34; }
html[data-theme="dark"] .bh-lensing { opacity: .45; }
html[data-theme="dark"][data-theme-progress-stage="1"] .scene-black-hole { opacity: .28; transform: scale(.56); }
html[data-theme="dark"][data-theme-progress-stage="1"] .scene-black-hole::before { opacity: .28; }
html[data-theme="dark"][data-theme-progress-stage="1"] .bh-disk-far { opacity: .58; }
html[data-theme="dark"][data-theme-progress-stage="1"] .bh-lensing { opacity: .64; }
html[data-theme="dark"][data-theme-progress-stage="1"] .scene-satellite-orbit { opacity: .24; }
html[data-theme="dark"][data-theme-progress-stage="1"] .scene-world { opacity: .11; transform: translate3d(9px,12px,0) scale(.82) rotate(-4deg); }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-black-hole { opacity: .45; transform: scale(.72); }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-black-hole::before { opacity: .38; }
html[data-theme="dark"][data-theme-progress-stage="2"] .bh-disk-far { opacity: .72; }
html[data-theme="dark"][data-theme-progress-stage="2"] .bh-lensing { opacity: .78; }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-satellite-orbit { opacity: .42; }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-world { opacity: .22; transform: translate3d(2px,4px,0) scale(.91) rotate(-2deg); }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-constellations { opacity: .16; }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-moon--one { opacity: .3; }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-black-hole { opacity: .62; transform: scale(.87); }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-black-hole::before { opacity: .48; }
html[data-theme="dark"][data-theme-progress-stage="3"] .bh-disk-far { opacity: .86; }
html[data-theme="dark"][data-theme-progress-stage="3"] .bh-lensing { opacity: .9; }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-satellite-orbit { opacity: .52; }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-world { opacity: .32; transform: translate3d(0,0,0) scale(.98); }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-nebula { opacity: .66; transform: rotate(-4deg) scale(1.08); }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-aurora { opacity: .34; transform: rotate(-7deg) translateY(0); }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-constellations { opacity: .18; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-black-hole { opacity: .78; transform: scale(1); }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-black-hole::before { opacity: .56; }
html[data-theme="dark"][data-theme-progress-stage="4"] .bh-disk-far { opacity: .96; }
html[data-theme="dark"][data-theme-progress-stage="4"] .bh-lensing { opacity: 1; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-black-hole-sparks { opacity: .8; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-satellite-orbit { opacity: .68; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-world { opacity: .4; transform: translate3d(-3px,-6px,0) scale(1) rotate(.5deg); }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-moon--one { opacity: .72; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-moon--two { opacity: .54; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-comet { animation: distant-comet 38s cubic-bezier(.37,.02,.7,.99) 1.5s infinite; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-black-hole { opacity: .98; transform: scale(1.1); }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-black-hole::before { opacity: .68; }
html[data-theme="dark"][data-theme-progress-stage="5"] .bh-disk-far { opacity: 1; }
html[data-theme="dark"][data-theme-progress-stage="5"] .bh-lensing { opacity: 1; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-black-hole-sparks { opacity: 1; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-satellite-orbit { opacity: .82; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-world { opacity: .5; transform: translate3d(-4px,-8px,0) scale(1.04) rotate(1deg); }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-nebula { opacity: .92; transform: rotate(4deg) scale(1.25); }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-aurora { opacity: .58; transform: rotate(0) translateY(12%); }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-constellations { opacity: .2; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-moon--one,
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-moon--two { opacity: .86; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-comet { --comet-peak-opacity: .62; }
html[data-theme="dark"][data-theme-progress-stage="2"] .scene-planet[data-unlocked="true"] { opacity: .66; }
html[data-theme="dark"][data-theme-progress-stage="3"] .scene-planet[data-unlocked="true"] { opacity: .7; }
html[data-theme="dark"][data-theme-progress-stage="4"] .scene-planet[data-unlocked="true"] { opacity: .74; }
html[data-theme="dark"][data-theme-progress-stage="5"] .scene-planet[data-unlocked="true"] { opacity: .8; border-color: rgba(208,233,255,.52); }
/* Keep decorative motion idle on the login screen and before the first milestone. */
.scene-black-hole :is(.bh-disk-wide, .bh-flow-line, .bh-flow-orbit, .bh-disk-near, .bh-particles circle, .scene-satellite-orbit-traveler, .scene-black-hole-sparks i) { animation-play-state: paused; }
html[data-theme="dark"][data-theme-progress-stage]:not([data-theme-progress-stage="0"]) body.app-unlocked .scene-black-hole :is(.bh-disk-wide, .bh-flow-line, .bh-flow-orbit, .bh-disk-near, .bh-particles circle, .scene-satellite-orbit-traveler) { animation-play-state: running; }
html[data-theme="dark"][data-theme-progress-stage="4"] body.app-unlocked .scene-black-hole-sparks i,
html[data-theme="dark"][data-theme-progress-stage="5"] body.app-unlocked .scene-black-hole-sparks i { animation-play-state: running; }

/* Dog milestones: first tracks → two companions → sunny trail → play → rosette. */
html[data-theme="light"] .scene-paw-constellation { opacity: 0; }
html[data-theme="light"] .scene-fetch-ball { opacity: 0; }
html[data-theme="light"][data-theme-progress-stage="1"] .scene-paw-trail { opacity: .14; }
html[data-theme="light"][data-theme-progress-stage="1"] .scene-companions { opacity: .24; transform: translate3d(7px,9px,0) scale(.98); }
html[data-theme="light"][data-theme-progress-stage="2"] .scene-paw-trail { opacity: .17; }
html[data-theme="light"][data-theme-progress-stage="2"] .scene-companions { opacity: .31; transform: translate3d(2px,4px,0) scale(1); }
html[data-theme="light"][data-theme-progress-stage="2"] .scene-dog--samoyed { opacity: .24; }
html[data-theme="light"][data-theme-progress-stage="2"] .scene-paw-constellation { opacity: .32; transform: rotate(-14deg) scale(.84); }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-paw-trail { opacity: .2; }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-companions { opacity: .34; transform: translate3d(0,0,0) scale(1.01); }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-dog--samoyed { opacity: .42; }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-paw-constellation { opacity: .58; transform: rotate(-16deg) scale(.95); }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-fetch-ball { opacity: .38; transform: translateY(0) scale(.82); animation: fetch-ball-bounce 5.6s ease-in-out infinite; }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-sun { opacity: .34; transform: scale(1); }
html[data-theme="light"][data-theme-progress-stage="3"] .scene-horizon { opacity: .5; }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-paw-trail { opacity: .24; }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-companions { opacity: .4; transform: translate3d(-2px,-3px,0) scale(1.02); }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-dog--samoyed { opacity: .78; }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-paw-constellation { opacity: .78; transform: rotate(-17deg) scale(1.04); }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-fetch-ball { opacity: .75; transform: translateY(-4px) scale(1); animation: fetch-ball-bounce 4.6s ease-in-out infinite; }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-sun { opacity: .4; transform: scale(1.05); }
html[data-theme="light"][data-theme-progress-stage="4"] .scene-horizon { opacity: .68; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-paw-trail { opacity: .28; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-companions { opacity: .46; transform: translate3d(-4px,-5px,0) scale(1.03); }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-dog--samoyed { opacity: 1; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-paw-constellation { opacity: .92; transform: rotate(-18deg) scale(1.1); }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-fetch-ball { opacity: .9; transform: translateY(-7px) scale(1.08); animation: fetch-ball-bounce 4.2s ease-in-out infinite; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-sun { opacity: .48; transform: scale(1.1); }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-horizon { opacity: .78; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-medallion { opacity: .96; transform: scale(1) rotate(0); }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-medallion { isolation: isolate; }
html[data-theme="light"][data-theme-progress-stage="5"] .scene-medallion::before {
  content: ""; position: absolute; inset: -8px; border: 1px dashed rgba(166,108,37,.52); border-radius: 50%;
  animation: medal-halo-turn 32s linear infinite;
}
html[data-theme="light"][data-theme-progress-stage="5"] .scene-medallion::after {
  content: ""; position: absolute; top: 80%; left: 50%; width: 18px; height: 25px;
  background: linear-gradient(145deg,#d69a45,#a8672f); clip-path: polygon(0 0,100% 0,78% 100%,50% 78%,22% 100%);
  transform: translateX(-50%); z-index: 0;
}

@keyframes black-hole-stream-flow { to { stroke-dashoffset: -560; } }
@keyframes black-hole-orbit-flow { to { stroke-dashoffset: -1320; } }
@keyframes satellite-orbit-travel { to { transform: rotate(360deg); } }
@keyframes black-hole-spark { from { opacity: .34; } to { opacity: 1; } }
@keyframes solar-world-drift { from { translate: 0 -2px; } to { translate: 0 5px; } }
@keyframes fetch-ball-bounce { 0%,100% { translate: 0 0; rotate: -10deg; } 50% { translate: 0 -8px; rotate: 18deg; } }
@keyframes medal-halo-turn { to { rotate: 360deg; } }
@media (max-width: 700px) {
  .scene-black-hole { left: clamp(-450px, -78vw, -250px); top: 34vh; width: 720px; height: 500px; }
  .scene-solar-planets { transform: scale(.82); transform-origin: 100% 50%; }
  .scene-planet[data-unlocked="true"] { opacity: .48; }
  .scene-paw-constellation { left: 12px; top: 31vh; transform-origin: left center; }
  .scene-fetch-ball { left: 25px; bottom: 18vh; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-disk-wide, .bh-flow-line, .bh-flow-orbit, .bh-disk-near, .bh-particles circle,
  .scene-satellite-orbit-traveler, .scene-planet, .scene-black-hole-sparks i, .scene-fetch-ball, .scene-medallion::before { animation: none !important; }
}