/* 首页浅色主题：只替换材质和颜色，不改变布局或媒体本身。 */
html[data-mi-theme="light"] {
  color-scheme: light;
  --page: #fafafa;
  --ink: #202020;
  --muted: #626262;
  --line: #00000024;
}

html[data-mi-theme="light"] .story-home {
  color: var(--ink);
  background-color: var(--page);
  background-image:
    var(--canvas-grain),
    radial-gradient(circle, rgb(0 0 0 / 5%) .7px, transparent .9px);
}

html[data-mi-theme="light"] .story-home ::selection {
  background: #292929;
  color: #fff;
}

html[data-mi-theme="light"] .story-home :is(button, a, video):focus-visible {
  outline-color: #333;
}

html[data-mi-theme="light"] .story-home .skip-link {
  background: #222;
  color: #fff;
}

/* 导航始终使用实色底，保证滚动中的卡片不能透出。 */
html[data-mi-theme="light"] .story-home .site-header {
  background: #fafafa;
  border-bottom-color: #0000000d;
  color: #202020;
}

html[data-mi-theme="light"] .story-home .loomeld-mark {
  filter: brightness(0);
}

html[data-mi-theme="light"] .story-home :is(.site-nav, .header-billing, #language-toggle) {
  color: #585858;
}

html[data-mi-theme="light"] .story-home :is(.site-nav a:hover, .pc-entry:hover) {
  color: #111;
}

html[data-mi-theme="light"] .story-home :is(.header-projects, .button) {
  color: #333;
  background: #fff;
  border-color: #00000024;
  box-shadow: inset 0 1px #fff;
}

html[data-mi-theme="light"] .story-home :is(.header-projects:hover, .button:hover) {
  background: #ededed;
  border-color: #00000050;
}

html[data-mi-theme="light"] .story-home .button-primary {
  background: #252525;
  border-color: #252525;
  color: #fff;
}

html[data-mi-theme="light"] .story-home .button-primary:hover {
  background: #080808;
  border-color: #080808;
  color: #fff;
}

html[data-mi-theme="light"] .story-home .profile-entry {
  color: #575757 !important;
}

html[data-mi-theme="light"] .story-home .profile-entry-avatar {
  background: #eee !important;
  border-color: #0000001c !important;
  color: #444 !important;
}

html[data-mi-theme="light"] .story-home #language-menu {
  background: #fff;
  border-color: #d4d4d4;
  box-shadow: 0 14px 42px #00000018;
}

html[data-mi-theme="light"] .story-home #language-menu button {
  color: #555;
}

html[data-mi-theme="light"] .story-home #language-menu button:is(:hover, [aria-checked="true"]) {
  background: #eee;
  color: #111;
}

html[data-mi-theme="light"] .story-home .mobile-menu span {
  background: #444;
}

/* 文本保持实色，浅灰仅用于图形和分隔线。 */
html[data-mi-theme="light"] .story-home :is(
  .eyebrow, .hero-description, .overview-foot, .chapter-number,
  .chapter-copy > p:not(.eyebrow), .feature-notes,
  .mini-top > span:first-child, .mini-bottom, .card-bar b,
  .quiet-pill, .card-caption, .card-caption > span:last-child[aria-hidden],
  .collaboration .eyebrow, .collaboration > p:not(.eyebrow),
  .back-top, .site-footer, .film-card #film-message
) {
  color: #626262;
}

html[data-mi-theme="light"] .story-home .hero-copy h1 > span:last-child {
  color: #6a6a6a;
}

html[data-mi-theme="light"] .story-home .chapter-copy > .tool-note {
  color: #626262 !important;
}

html[data-mi-theme="light"] .story-home :is(.scroll-cue, .next-link, .text-button) {
  color: #404040;
}

html[data-mi-theme="light"] .story-home :is(.scroll-cue:hover, .next-link:hover, .back-top:hover) {
  color: #111;
}

html[data-mi-theme="light"] .story-home .feature-notes > span::before {
  background: #777;
}

/* 画布与卡片仍为独立表面；照片、视频和图纸不做反色处理。 */
html[data-mi-theme="light"] .story-home .overview-board::before {
  background-color: #f1f1f1;
  background-image:
    radial-gradient(circle, rgb(0 0 0 / 19%) var(--board-dot), transparent calc(var(--board-dot) + .45px)),
    linear-gradient(135deg, #f5f5f5, #eeeeee 70%);
  border-color: #00000017;
  box-shadow: inset 0 1px #fff, 0 18px 60px #00000009;
}

html[data-mi-theme="light"] .story-home :is(.mini-card, .glass-card) {
  color: #252525;
  background: linear-gradient(132deg, #fffffff5, #fafafaf5 74%, #f0f0f0f5);
  border-color: #00000026;
  box-shadow: inset 0 1px #fff, 0 10px 28px #0000000f;
}

html[data-mi-theme="light"] .story-home :is(.mini-card, .glass-card)::before {
  opacity: .15;
}

html[data-mi-theme="light"] .story-home .mini-card:hover {
  border-color: #00000057;
  box-shadow: inset 0 1px #fff, 0 12px 30px #00000019;
}

html[data-mi-theme="light"] .story-home .quiet-pill {
  background: #00000004;
  border-color: #0000001b;
}

html[data-mi-theme="light"] .story-home .overview-wires > path {
  stroke: #6f6f6f;
}

html[data-mi-theme="light"] .story-home .overview-wires > path.is-active {
  stroke: #222;
}

html[data-mi-theme="light"] .story-home .connector-terminal {
  fill: #f2f2f2;
  stroke: #777;
}

html[data-mi-theme="light"] .story-home .connector-terminal.is-active {
  stroke: #222;
}

html[data-mi-theme="light"] .story-home :is(.port, .chapter-port),
html[data-mi-theme="light"] .story-home.connectors-ready .travelling-reference .chapter-port.bottom {
  background: #f2f2f2;
  border-color: #777;
}

html[data-mi-theme="light"] .story-home .wire-base path { stroke: #00000026; }
html[data-mi-theme="light"] .story-home .wire-progress path { stroke: #686868; }

html[data-mi-theme="light"] .story-home :is(.reference-overlay span, .drawing-tools) {
  color: #393939;
  background: #fffffff0;
  border-color: #00000026;
}

html[data-mi-theme="light"] .story-home .drawing-tools i { background: #999; }
html[data-mi-theme="light"] .story-home .film-timeline { border-color: #00000024; }
html[data-mi-theme="light"] .story-home .film-timeline span {
  background: linear-gradient(95deg, #00000019, #00000008);
  border-color: #00000013;
}
html[data-mi-theme="light"] .story-home .film-timeline i { background: #444; }

html[data-mi-theme="light"] .story-home .collab-orbit span {
  background: #fff;
  color: #555;
  border-color: #999;
}
html[data-mi-theme="light"] .story-home .collab-orbit span:last-child {
  background: #555;
  color: #fff;
  border-color: #555;
}
html[data-mi-theme="light"] .story-home .collab-orbit i {
  background: linear-gradient(90deg, #bbb, #666);
}
html[data-mi-theme="light"] .story-home .site-footer { border-top-color: #00000017; }
html[data-mi-theme="light"] .story-home .site-footer .wordmark strong { color: #444; }

html[data-mi-theme="light"] .story-home .brand-intro {
  background: #fafafa;
  color: #202020;
}

@media (max-width: 760px) {
  html[data-mi-theme="light"] .story-home .site-nav {
    background: #fff;
    border-color: #d4d4d4;
    box-shadow: 0 16px 40px #00000018;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-mi-theme="light"] .story-home :is(.mini-card, .glass-card) {
    background: linear-gradient(132deg, #fff, #fafafa 74%, #f0f0f0);
  }
}