/* ────────────────────────────────────────────────────────────────
   Light Theme — toggled via html.light-theme
   ──────────────────────────────────────────────────────────────── */

/* ── Theme toggle button ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #d0d0d0;
  transition: all .2s ease;
  flex-shrink: 0;
  user-select: none;
}
.theme-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
}
.theme-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
}
.theme-icon-sun,
.theme-icon-moon { display: none; }
.theme-label-dark,
.theme-label-light { font-size: 11px; letter-spacing: 0.5px; }

/* Dark mode (default): show sun icon and "浅色" label */
html:not(.light-theme) .theme-icon-sun { display: block; }
html:not(.light-theme) .theme-label-dark { display: inline; }
html:not(.light-theme) .theme-label-light { display: none; }

/* Light mode: show moon icon and "深色" label */
html.light-theme .theme-icon-moon { display: block; }
html.light-theme .theme-label-dark { display: none; }
html.light-theme .theme-label-light { display: inline; }

html.light-theme .theme-toggle {
  color: #4a4a4a;
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.04);
}
html.light-theme .theme-toggle:hover {
  color: #000;
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 700px) {
  .theme-toggle {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 11px;
    margin-right: 4px;
  }
}


/* ── Transition on theme change ── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color .35s ease,
              color .35s ease,
              border-color .35s ease,
              box-shadow .35s ease,
              fill .35s ease,
              stroke .35s ease !important;
}


/* ════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ════════════════════════════════════════════════════════════════ */
html.light-theme {
  color-scheme: light;
  --bg: #f8f8f6;
  --surface: #f0efed;
  --raised: #e8e7e4;
  --selected: #dddcda;
  --text: #1a1a1a;
  --secondary: #4a4a4a;
  --muted: #6e6e6e;
  --line: #d4d3d0;
  --ink: #1a1a1a;
  --dim: #9e9e99;
}

html.light-theme {
  background: var(--bg);
}

/* ── Body & base ── */
html.light-theme body {
  background: var(--bg);
  color: var(--text);
}

html.light-theme ::selection {
  background: #1a1a1a;
  color: #fff;
}

html.light-theme .skip-link {
  background: #1a1a1a;
  color: #fff;
}

html.light-theme button:focus-visible,
html.light-theme a:focus-visible,
html.light-theme summary:focus-visible,
html.light-theme input:focus-visible,
html.light-theme [tabindex]:focus-visible {
  outline-color: #1a1a1a;
}


/* ── Site header & nav ── */
html.light-theme .site-header,
html.light-theme .journey-header {
  background: rgba(248, 248, 246, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .brand {
  color: #111111 !important;
}

html.light-theme .brand img {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Desktop nav: strictly transparent, no boxes or borders! */
html.light-theme .site-header nav,
html.light-theme .journey-header nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #555552 !important;
}

html.light-theme .journey-header nav a,
html.light-theme .site-header nav a {
  color: #555552 !important;
  font-weight: 450;
  transition: color 180ms ease !important;
}

html.light-theme .journey-header nav a:hover,
html.light-theme .site-header nav a:hover {
  color: #000000 !important;
}

html.light-theme .journey-header nav a[aria-current],
html.light-theme .site-header nav a[aria-current] {
  color: #000000 !important;
  font-weight: 600 !important;
}

html.light-theme .journey-header nav a:after {
  background: #000000 !important;
  height: 2px !important;
}

/* Theme toggle inside nav spacing */
.site-header nav .theme-toggle,
.journey-header nav .theme-toggle {
  margin-left: 12px;
}

/* Mobile menu: white surface ONLY when dropdown is active on mobile */
@media (max-width: 800px) {
  html.light-theme .site-header nav,
  html.light-theme .journey-header nav {
    background: #ffffff !important;
    border: 1px solid #d4d3d0 !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px;
  }
  html.light-theme .site-header nav a,
  html.light-theme .journey-header nav a {
    color: #333330 !important;
  }
  html.light-theme .site-header nav a[aria-current],
  html.light-theme .journey-header nav a[aria-current] {
    color: #000000 !important;
    font-weight: 600 !important;
  }
  html.light-theme .mobile-menu {
    color: #111111 !important;
  }
  .site-header nav .theme-toggle,
  .journey-header nav .theme-toggle {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
    border-radius: 8px;
  }
}


/* ── Sticky stage / scroll track ── */
html.light-theme .sticky-stage {
  background: var(--bg);
}

html.light-theme .scene-veil {
  background: linear-gradient(transparent 51%, rgba(248,248,246,.7) 70%, var(--bg) 96%);
}

@media (max-width: 700px) {
  html.light-theme .scene-veil {
    background: linear-gradient(transparent 40%, rgba(248,248,246,.85) 72%, var(--bg));
  }
}


/* ── Desktop plane (hero) ── */
html.light-theme .desktop-plane {
  background: linear-gradient(180deg, #e8e7e4, #dddcda 25%, #d0cfcc 69%, var(--bg) 90%);
  border-top-color: rgba(0,0,0,.08);
  box-shadow: 0 -1px 24px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
}

html.light-theme .desktop-plane:after {
  background: radial-gradient(ellipse 650px 180px at 62% 0, rgba(255,255,255,.35), transparent);
}


/* ── Native island ── */
html.light-theme .native-island {
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.15)) drop-shadow(0 2px 8px rgba(0,0,0,.08));
}

html.light-theme .native-island:hover {
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.2)) drop-shadow(0 0 24px rgba(0,0,0,.06));
}

html.light-theme .island-shape path {
  fill: #fff;
  stroke: rgba(0,0,0,.12);
}

html.light-theme .native-island:focus-visible .island-shape path,
html.light-theme .native-island:hover .island-shape path {
  stroke: rgba(0,0,0,.22);
  fill: #fff;
}

html.light-theme .island-content strong {
  color: #1a1a1a;
}

html.light-theme .island-close {
  stroke: #999;
}

html.light-theme .island-hint {
  color: #888;
}

html.light-theme .ecg {
  stroke: #1a1a1a;
}


/* ── Scene copy / headings ── */
html.light-theme .scene-copy h1,
html.light-theme .scene-copy h2 {
  color: var(--text);
}

html.light-theme .scene-copy h2 span {
  color: #7a7a7a;
}

html.light-theme .eyebrow {
  color: #888;
}

html.light-theme .scene-copy > p:not(.eyebrow) {
  color: #6a6a6a;
}

html.light-theme .compat {
  color: #999;
}


/* ── Buttons ── */
html.light-theme .primary {
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

html.light-theme .primary:hover {
  background: #000;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}

html.light-theme .subtle-action {
  color: #6a6a6a;
  border-color: rgba(0,0,0,.1);
  background: rgba(0,0,0,.02);
}

html.light-theme .subtle-action:hover {
  color: #1a1a1a;
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.18);
}


/* ── Software panels (expression, graphic, audio, workflow) ── */
html.light-theme .software-plane {
  background: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 35px 100px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8);
}

html.light-theme .expression-plane:after,
html.light-theme .graphic-plane:after,
html.light-theme .workflow-plane:after {
  background: linear-gradient(130deg, rgba(255,255,255,.3), transparent 35%, rgba(0,0,0,.02));
}

html.light-theme .panel-title {
  color: var(--text);
}

html.light-theme .panel-title small {
  color: #999;
}

html.light-theme .panel-dots {
  color: #bbb;
}

html.light-theme .panel-tabs {
  background: #f5f5f3;
  color: #888;
}

html.light-theme .panel-tabs .selected {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

html.light-theme .panel-modes {
  background: #f0efed;
  color: #888;
}

html.light-theme .panel-modes .selected {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

html.light-theme .panel-search {
  background: #f8f8f6;
  border-color: rgba(0,0,0,.08);
  color: #999;
}

html.light-theme .property-tabs {
  color: #888;
}

html.light-theme .property-tabs .selected {
  background: #f0efed;
  color: var(--text);
}


/* ── Effect cards ── */
html.light-theme .effect-card {
  background: #f8f8f6;
  color: #888;
  border-color: rgba(0,0,0,.06);
}

html.light-theme .effect-card svg {
  stroke: #999;
}

html.light-theme .effect-card.is-selected {
  background: #e8e7e4;
  color: var(--text);
  border-color: rgba(0,0,0,.2);
  box-shadow: 0 0 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
}

html.light-theme .effect-card.is-selected svg {
  stroke: var(--text);
}

html.light-theme .effect-card:hover {
  background: #edeceb;
  color: var(--text);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

html.light-theme .effect-card:hover svg {
  stroke: var(--text);
}

html.light-theme .effect-card:focus-visible {
  outline-color: #1a1a1a;
}

html.light-theme .panel-hint {
  color: #999;
}


/* ── Demo glyph ── */
html.light-theme .motion-result {
  filter: drop-shadow(0 22px 32px rgba(0,0,0,.08));
}

html.light-theme #demo-glyph {
  background: linear-gradient(155deg, #1a1a1a 30%, #6a6a6a);
  background-clip: text;
  color: transparent;
}


/* ── Window heading (graphic, audio, workflow) ── */
html.light-theme .window-heading {
  border-bottom-color: #e0dfdc;
  color: var(--text);
}

html.light-theme .window-heading small {
  color: #999;
}


/* ── Graphic plane (drawing) ── */
html.light-theme .drawing-toolbar {
  background: #f5f5f3;
  color: #666;
}

html.light-theme .drawing-toolbar button {
  border-color: rgba(0,0,0,.1);
  background: rgba(0,0,0,.02);
  color: #555;
}

html.light-theme .drawing-toolbar button:hover {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
  color: var(--text);
}

html.light-theme .drawing-toolbar b {
  color: var(--text);
}

html.light-theme .toolbar-divider {
  background: #d4d3d0;
}

html.light-theme .stroke-swatch {
  border-color: #444;
}

html.light-theme .drawing-canvas {
  background: radial-gradient(#d4d3d0 1px, transparent 1px) 0 0 / 24px 24px, #fafaf8;
}

html.light-theme .path-art {
  color: #444;
}

html.light-theme .array-copy {
  stroke: #999;
}

html.light-theme .path-handles {
  stroke: #666;
  fill: #fff;
}

html.light-theme .path-handles circle {
  fill: #fff;
  stroke: #333;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.12));
}

html.light-theme .canvas-label {
  color: #999;
}

html.light-theme .drawing-bottom {
  color: #999;
}


/* ── Audio plane ── */
html.light-theme .audio-plane {
  background: transparent;
}

html.light-theme .audio-plane .window-heading {
  color: #666;
}

html.light-theme .audio-source {
  color: #666;
}

html.light-theme .audio-dot {
  background: #555;
}

html.light-theme .wave-layer {
  border-color: rgba(0,0,0,.1);
  background: linear-gradient(120deg, #f0efed, #e8e7e4);
  box-shadow: 0 25px 50px rgba(0,0,0,.08);
}

html.light-theme .wave-layer span {
  color: #666;
}

html.light-theme .wave-original {
  background: linear-gradient(120deg, #f5f5f3, #eeedeb);
}

html.light-theme .wave-original svg {
  fill: #333;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.06));
}

html.light-theme .wave-vocal {
  background: linear-gradient(120deg, #eae9e7, #e0dfdc);
  border-color: rgba(0,0,0,.08);
}

html.light-theme .wave-vocal svg {
  fill: #555;
}

html.light-theme .wave-music {
  background: linear-gradient(120deg, #e4e3e0, #d8d7d4);
  border-color: rgba(0,0,0,.06);
}

html.light-theme .wave-music svg {
  fill: #888;
}

html.light-theme .audio-playhead {
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0));
}

html.light-theme .audio-bottom {
  color: #999;
}

html.light-theme .audio-bottom button {
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  color: #444;
}

html.light-theme .audio-bottom button:hover {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.2);
  color: var(--text);
}


/* ── Workflow plane ── */
html.light-theme .rename-control {
  background: #f5f5f3;
  color: #666;
}

html.light-theme .rename-template {
  background: #fff;
  border-color: rgba(0,0,0,.1);
  color: var(--text);
}

html.light-theme .rename-control button {
  background: #1a1a1a;
  color: #fff;
}

html.light-theme .rename-control button:hover {
  background: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

html.light-theme .layer-head {
  background: #f5f5f3;
  color: #aaa;
}

html.light-theme .layer-row {
  border-bottom-color: #e8e7e4;
}

html.light-theme .layer-number {
  color: #bbb;
}

html.light-theme .layer-type {
  color: #888;
}

html.light-theme .layer-name {
  color: #888;
}

html.light-theme .layer-row.renamed .layer-name {
  color: var(--text);
}

html.light-theme .layer-row.renamed {
  background: rgba(0,0,0,.02);
}

html.light-theme .layer-timeline {
  border-left-color: #d4d3d0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 99px, #e8e7e4 100px);
}

html.light-theme .layer-timeline i {
  background: #c0c0c0;
}

html.light-theme .layer-row.renamed .layer-timeline i {
  background: #555;
  box-shadow: 0 0 8px rgba(0,0,0,.08);
}

html.light-theme .workflow-bottom {
  color: #999;
}


/* ── Outro ── */
html.light-theme .final-glyph {
  color: #e0dfdd;
  text-shadow: 0 20px 80px rgba(0,0,0,.03);
}

html.light-theme .outro-copy > img {
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.08);
}


/* ── Stage controls ── */
html.light-theme .chapter-rail a {
  border-top-color: #d4d3d0;
  color: #999;
}

html.light-theme .chapter-rail a:hover {
  color: #555;
}

html.light-theme .chapter-rail a:before {
  background: #333;
  box-shadow: 0 0 8px rgba(0,0,0,.15);
}

html.light-theme .chapter-rail a[aria-current] {
  color: var(--text);
}

html.light-theme .chapter-rail small {
  color: #bbb;
}

html.light-theme .chapter-rail a[aria-current] small {
  color: #888;
}

html.light-theme .stage-tools button {
  color: #888;
}

html.light-theme .stage-tools button:hover {
  color: var(--text);
}

html.light-theme #motion-toggle i {
  background: #d4d3d0;
}

html.light-theme #motion-toggle i:after {
  background: #555;
}

html.light-theme #motion-toggle[aria-pressed=true] i {
  background: #e8e7e4;
}

html.light-theme #motion-toggle[aria-pressed=true] i:after {
  background: #aaa;
}


/* ── Footer ── */
html.light-theme .quiet-footer {
  border-top-color: #e8e7e4;
  color: #aaa;
}

html.light-theme .quiet-footer button {
  color: #888;
}

html.light-theme .journey-footer {
  color: #aaa;
}

html.light-theme .journey-footer button {
  color: #aaa;
}


/* ── Theme toggle styling in dark / light ── */
html:not(.light-theme) .theme-toggle {
  color: #999;
}

html:not(.light-theme) .theme-toggle:hover {
  color: #fff;
}

html.light-theme .theme-toggle {
  color: #888;
}

html.light-theme .theme-toggle:hover {
  color: #1a1a1a;
}


/* ══════════════════════════════════════════════════════════════
   Dialogs (overlay.css overrides)
   ══════════════════════════════════════════════════════════════ */
html.light-theme #site-dialog {
  background: #fff;
  color: var(--text);
  border-color: #d4d3d0;
  box-shadow: 0 25px 100px rgba(0,0,0,.1);
}

html.light-theme #site-dialog::backdrop {
  background: rgba(248,248,246,.7);
}

html.light-theme .dialog-eyebrow {
  color: #888;
}

html.light-theme .dialog-intro {
  color: #666;
}

html.light-theme .dialog-note {
  background: #f5f5f3;
  color: #888;
}

html.light-theme .os-tabs,
html.light-theme .island-tabs {
  border-bottom-color: #d4d3d0;
}

html.light-theme .os-tabs button,
html.light-theme .island-tabs button {
  color: #888;
  border-bottom-color: transparent;
}

html.light-theme .os-tabs button[aria-selected=true],
html.light-theme .island-tabs button[aria-selected=true] {
  color: var(--text);
  border-bottom-color: var(--text);
}

html.light-theme .install-steps {
  color: #666;
}

html.light-theme .install-steps code {
  color: var(--text);
}

html.light-theme .version-meta {
  color: #888;
  border-top-color: #e8e7e4;
}

html.light-theme .version-meta dd {
  color: var(--text);
}

html.light-theme .dialog-search {
  border-bottom-color: #d4d3d0;
  color: #888;
}

html.light-theme .dialog-search input {
  color: var(--text);
}

html.light-theme .dialog-filters button {
  color: #888;
  background: #f5f5f3;
}

html.light-theme .dialog-filters button[aria-pressed=true] {
  background: #e8e7e4;
  color: var(--text);
}

html.light-theme .capability-list details {
  border-top-color: #e8e7e4;
}

html.light-theme .capability-list summary small {
  color: #bbb;
}

html.light-theme .capability-list summary svg {
  color: #bbb;
}

html.light-theme .capability-list details p {
  color: #888;
}

html.light-theme .dialog-footnote {
  border-top-color: #e8e7e4;
}


/* ══════════════════════════════════════════════════════════════
   Content chapters (journey pages)
   ══════════════════════════════════════════════════════════════ */
html.light-theme .content-chapter {
  --ink: #1a1a1a;
  --muted: #6e6e6e;
  --dim: #9e9e99;
  background: var(--bg);
  color: var(--ink);
}

/* Shadow sequence */
html.light-theme .shadow-stage {
  background: var(--bg);
}

html.light-theme .native-fragment {
  background: #fff;
  border-color: #d4d3d0;
  box-shadow: 0 28px 42px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
}

html.light-theme .native-title i {
  color: #bbb;
}

html.light-theme .native-parameters > div {
  color: #888;
}

html.light-theme .native-parameters output {
  background: #f0efed;
  color: #555;
}

html.light-theme .native-parameters .native-slider {
  background: #d4d3d0;
}

html.light-theme .native-slider:before {
  background: #555;
}

html.light-theme .native-slider i {
  background: #444;
}

html.light-theme .native-parameters .native-color {
  background: #f0efed;
}

html.light-theme .native-color i {
  background: #333;
}

html.light-theme .native-parameters small {
  color: #bbb;
}

/* Comparison / wipe */
html.light-theme .wipe-line {
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.2));
  box-shadow: 0 0 10px rgba(255,255,255,.4), 0 0 6px rgba(0,0,0,.15);
}

html.light-theme .wipe-line > span {
  background: rgba(30,30,30,.85);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.15);
}


/* Feature directory & tabs (Image 4 & Image 3 fix) */
html.light-theme .directory-heading h2 {
  color: #111111 !important;
}

html.light-theme .group-heading h3 {
  color: #111111 !important;
}

html.light-theme .group-heading .eyebrow {
  color: #888882 !important;
}

html.light-theme .directory-tools nav a {
  color: #666662 !important;
  transition: color 0.2s ease !important;
}

html.light-theme .directory-tools nav a:hover {
  color: #000000 !important;
}

html.light-theme .directory-tools a[aria-current] {
  color: #000000 !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #000000 !important;
  padding-bottom: 2px !important;
}

html.light-theme #feature-status {
  color: #777772 !important;
}

html.light-theme .search-label {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}

html.light-theme .search-label:focus-within {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.3);
  box-shadow: 0 0 12px rgba(0,0,0,.05);
}

html.light-theme .search-label input {
  color: #111111 !important;
}

html.light-theme .search-label svg {
  stroke: #777772 !important;
}

html.light-theme .search-label:focus-within svg {
  stroke: #111111 !important;
}

/* Feature items / accordion (Image 3 fix) */
html.light-theme .feature-item {
  background: #f0efec !important;
  border: 1px solid #dedcd7 !important;
  border-radius: 6px !important;
  transition: background 200ms ease, border-color 200ms ease !important;
}

html.light-theme .feature-item:hover {
  background: #e6e5e1 !important;
  border-color: #cac8c2 !important;
}

html.light-theme .feature-item[open] {
  background: #e8e7e3 !important;
  border-color: #d0cecb !important;
}

html.light-theme .feature-item summary {
  color: #1a1a1a !important;
  font-weight: 500 !important;
}

html.light-theme .feature-item summary:hover {
  color: #000000 !important;
}

html.light-theme .feature-item summary > span {
  color: #777772 !important;
}

html.light-theme details[open] > summary span {
  color: #111111 !important;
}

html.light-theme .feature-item p {
  color: #4a4a46 !important;
}

html.light-theme .directory-foot {
  color: #888882 !important;
}

html.light-theme .content-chapter button:hover,
html.light-theme .content-chapter a:hover {
  color: #000000 !important;
}


/* Guide */
html.light-theme .os-switch {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}

html.light-theme .os-switch button {
  color: var(--dim);
}

html.light-theme .os-switch button[aria-pressed=true] {
  color: var(--ink);
  background: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

html.light-theme .guide-copy code {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
  color: #333;
}

html.light-theme .guide-copy details {
  border-color: rgba(0,0,0,.06);
  background: rgba(0,0,0,.015);
}

html.light-theme .guide-copy details:hover {
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.08);
}

html.light-theme .guide-copy details[open] {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.06);
}

html.light-theme .guide-steps button {
  color: var(--muted);
}

html.light-theme .guide-steps button:hover {
  color: var(--text);
  background: rgba(0,0,0,.03);
}

html.light-theme .guide-steps [aria-pressed=true] {
  color: var(--ink);
}

html.light-theme .guide-steps [aria-pressed=true]:before {
  background: var(--ink);
}

html.light-theme .guide-steps small {
  color: var(--dim);
}

html.light-theme .guide-steps [aria-pressed=true] small {
  color: var(--ink);
}


/* Updates / versions */
html.light-theme .update-record {
  border-left-color: #d4d3d0;
}

html.light-theme .update-record:before {
  background: #c0c0c0;
}

html.light-theme .update-record.is-active:before {
  background: #333;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 0 12px rgba(0,0,0,.1);
}

html.light-theme .update-copy details {
  background: rgba(0,0,0,.015);
  border-color: rgba(0,0,0,.06);
}

html.light-theme .update-copy details:hover {
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.08);
}

html.light-theme .update-copy details[open] {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.05);
}


/* Acquisition / download */
html.light-theme .acquisition {
  background: radial-gradient(ellipse 45% 16% at 53% 67%, rgba(244,243,240,1) 0%, transparent 100%);
}

html.light-theme .acquisition-action {
  background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
}

html.light-theme .light-button {
  background: #1a1a1a;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

html.light-theme .light-button:hover {
  background: #000;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

html.light-theme .acquisition-perks {
  border-top-color: rgba(0,0,0,.06);
}

html.light-theme .acquisition-perks li:before {
  color: #555;
}

html.light-theme .comparison-options button {
  color: var(--dim);
}

html.light-theme .comparison-options button:hover {
  color: var(--text);
  background: rgba(0,0,0,.04);
}

html.light-theme .comparison-options button[aria-pressed=true] {
  color: var(--ink);
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Page header (content pages) */
html.light-theme .page-header {
  background: linear-gradient(var(--bg) 55%, transparent);
}

html.light-theme #page-nav {
  color: #8a8a85;
}

html.light-theme #page-nav [aria-current] {
  color: var(--ink);
}

html.light-theme .page-footer {
  color: var(--dim);
}

html.light-theme .page-footer button {
  color: var(--dim);
}


/* ══════════════════════════════════════════════════════════════
   Island dialog
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   Island dialog (Image 2 fix)
   ══════════════════════════════════════════════════════════════ */
html.light-theme #site-dialog.island-dialog {
  background: transparent !important;
  color: #111111 !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.08)) !important;
}

html.light-theme .island-dialog .dialog-island-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.light-theme .island-dialog .dialog-island-shape path {
  fill: #ffffff !important;
  stroke: rgba(0, 0, 0, 0.14) !important;
  stroke-width: 1px !important;
}

html.light-theme .island-dialog .dialog-close {
  color: #666662 !important;
  stroke: #666662 !important;
}

html.light-theme .island-dialog .dialog-close:hover {
  color: #000000 !important;
  stroke: #000000 !important;
}

html.light-theme .island-dialog #dialog-title {
  color: #111111 !important;
  font-weight: 600 !important;
}

html.light-theme .island-dialog .island-subtitle {
  color: #777772 !important;
}

html.light-theme .island-dialog .island-tabs {
  border-bottom: 1px solid #deddd9 !important;
}

html.light-theme .island-dialog .island-tabs button {
  color: #777772 !important;
}

html.light-theme .island-dialog .island-tabs button:hover {
  color: #111111 !important;
}

html.light-theme .island-dialog .island-tabs button[aria-selected="true"] {
  color: #111111 !important;
  border-bottom: 2px solid #111111 !important;
  font-weight: 500 !important;
}

html.light-theme .island-dialog .task-heading {
  color: #111111 !important;
}

html.light-theme .island-dialog .task-heading small {
  color: #777772 !important;
}

html.light-theme .island-dialog .task-heading strong {
  color: #111111 !important;
}

html.light-theme .island-dialog .task-state {
  color: #555550 !important;
}

html.light-theme .island-dialog .task-progress-label {
  color: #777772 !important;
}

html.light-theme .island-dialog .task-track {
  background: #e4e3df !important;
}

html.light-theme .island-dialog .task-track i {
  background: #111111 !important;
}

html.light-theme .island-dialog .shelf-heading {
  color: #666662 !important;
}

html.light-theme .island-dialog .shelf-row {
  background: #f4f3f0 !important;
  color: #111111 !important;
  border: 1px solid #deddd9 !important;
  border-radius: 6px !important;
}

html.light-theme .island-dialog .shelf-row small {
  color: #777772 !important;
}

html.light-theme .island-dialog .shelf-row svg {
  color: #333330 !important;
  stroke: #333330 !important;
}

html.light-theme .island-dialog .simulate {
  background: #ffffff !important;
  border: 1px solid #d4d3ce !important;
  color: #222220 !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

html.light-theme .island-dialog .simulate:hover {
  background: #f0efeb !important;
  color: #000000 !important;
  border-color: #999994 !important;
}

html.light-theme .island-dialog .island-online h3 {
  color: #111111 !important;
}

html.light-theme .island-dialog .island-online p {
  color: #666662 !important;
}

html.light-theme .island-dialog .share-demo-preview {
  background: #f4f3f0 !important;
  color: #666662 !important;
  border: 1px solid #deddd9 !important;
  border-radius: 6px !important;
}

html.light-theme .island-dialog .share-demo-preview b {
  color: #111111 !important;
}


/* ── Mobile chapter rail border ── */
@media (max-width: 700px) {
  html.light-theme .chapter-rail {
    border-top-color: #d4d3d0;
  }
}