/* SigmAgent Engine · 统一设计系统
   所有 32 个 topic 子站必须通过 link 引入本文件
   v1.0 · 2026-06-05 */

:root {
  --c-science:        #6aa6c8;
  --c-nature:         #65a987;
  --c-humanities:     #c49a62;
  --c-life:           #7aae82;
  --c-entertainment:  #b77aa6;
  --c-tools:          #8c7ab8;

  --c-bg:             #0b1020;
  --c-bg-soft:        #111827;
  --c-bg-card:        #172033;
  --c-text:           #eef3f8;
  --c-text-soft:      #b7c2cf;
  --c-text-dim:       #7d8a99;
  --c-border:         #2b3547;
  --c-border-soft:    #20293a;

  --c-accent:         #6aa6c8;
  --c-warning:        #c49a62;
  --c-danger:         #b86b78;
  --c-success:        #65a987;

  --topic-color:      var(--c-accent);

  --fs-hero:    clamp(2rem, 5vw, 3.5rem);
  --fs-h1:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h2:      clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h3:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-8:  3rem;
  --s-10: 4rem;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.25);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.4);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at top left, color-mix(in srgb, var(--topic-color) 5%, transparent), transparent 52%),
    radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--topic-color) 4%, transparent), transparent 54%);
  pointer-events: none;
  z-index: -1;
}

a { color: var(--topic-color); text-decoration: none; transition: opacity var(--dur-fast) var(--ease); }
a:hover { opacity: 0.8; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

[data-theme="light"] {
  --c-bg:        #ffffff;
  --c-bg-soft:   #ffffff;
  --c-bg-card:   #ffffff;
  --c-text:      #1a1a3a;
  --c-text-soft: #4a4a6a;
  --c-text-dim:  #8a8aa8;
  --c-border:    #dadaea;
  --c-border-soft: #eaeaef;
}

/* legacy sunset: mapped to restrained dusk, kept only for old saved preferences */
[data-theme="sunset"] {
  --c-bg:        #111827;
  --c-bg-soft:   #172033;
  --c-bg-card:   #1f2937;
  --c-text:      #eef3f8;
  --c-text-soft: #bcc6d2;
  --c-text-dim:  #8793a2;
  --c-border:    #334155;
  --c-border-soft: #263244;
  --c-accent:    #b58b67;
  --c-success:   #7a9f82;
  --c-warning:   #c49a62;
  --c-danger:    #b86b78;
}

/* forest: 深绿自然调 */
[data-theme="forest"] {
  --c-bg:        #0a1f1a;
  --c-bg-soft:   #112b22;
  --c-bg-card:   #18382d;
  --c-text:      #e8f5e9;
  --c-text-soft: #a5c9b0;
  --c-text-dim:  #6a9a7a;
  --c-border:    #2a4a3a;
  --c-border-soft: #1f3a2a;
  --c-accent:    #66bb6a;
  --c-success:   #81c784;
  --c-warning:   #ffb74d;
  --c-danger:    #e57373;
}

/* legacy cyber: mapped to restrained slate, kept only for old saved preferences */
[data-theme="cyber"] {
  --c-bg:        #0b1020;
  --c-bg-soft:   #111827;
  --c-bg-card:   #172033;
  --c-text:      #eef3f8;
  --c-text-soft: #b7c2cf;
  --c-text-dim:  #7d8a99;
  --c-border:    #2b3547;
  --c-border-soft: #20293a;
  --c-accent:    #8c7ab8;
  --c-success:   #65a987;
  --c-warning:   #c49a62;
  --c-danger:    #b86b78;
}

/* ============== 导航 ============== */
site-nav {
  display: block;
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border-soft);
}
site-nav .nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-3) var(--s-5);
}
site-nav .logo {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--c-text); font-weight: 700;
}
site-nav .logo-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--topic-color);
  color: var(--c-bg);
  border-radius: var(--r-sm);
  font-size: 1.25rem; font-weight: 900;
}
site-nav .logo small { display: block; font-size: var(--fs-tiny); color: var(--c-text-dim); font-weight: 400; }
site-nav .nav-links { display: flex; gap: var(--s-4); flex: 1; margin-left: var(--s-5); flex-wrap: wrap; }
site-nav .nav-link { color: var(--c-text-soft); font-size: var(--fs-small); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
site-nav .nav-link:hover { color: var(--c-text); background: var(--c-bg-soft); opacity: 1; }
site-nav .nav-tools { display: flex; gap: var(--s-2); align-items: center; }

@media (max-width: 768px) {
  site-nav .nav-links { display: none; }
}

/* ============== 主题/语言切换器 ============== */
theme-switcher, locale-switcher {
  display: inline-flex; gap: 2px;
  padding: 2px; border-radius: var(--r-pill);
  background: var(--c-bg-soft); border: 1px solid var(--c-border-soft);
}
theme-switcher button, locale-switcher select {
  background: transparent; border: 0; color: var(--c-text-soft);
  padding: var(--s-1) var(--s-3); font-size: var(--fs-tiny);
  border-radius: var(--r-pill); cursor: pointer;
}
theme-switcher button[aria-pressed="true"], locale-switcher select { background: var(--topic-color); color: var(--c-bg); font-weight: 600; }
theme-switcher button:hover, locale-switcher select:hover { opacity: 1; color: var(--c-text); }
theme-switcher button[aria-pressed="true"]:hover { color: var(--c-bg); }

/* ============== Hero ============== */
.topic-hero {
  max-width: 1200px; margin: 0 auto;
  padding: var(--s-10) var(--s-5) var(--s-8);
  position: relative;
}
.topic-hero .badge {
  display: inline-block; padding: var(--s-1) var(--s-3);
  background: color-mix(in srgb, var(--topic-color) 18%, transparent);
  color: var(--topic-color);
  border-radius: var(--r-pill);
  font-size: var(--fs-tiny); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.topic-hero h1 {
  font-size: var(--fs-hero);
  margin: var(--s-4) 0 var(--s-3);
  font-weight: 900; line-height: 1.1;
  background: linear-gradient(135deg, var(--c-text) 0%, var(--topic-color) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topic-hero .subtitle {
  font-size: var(--fs-h3); color: var(--c-text-soft);
  max-width: 720px; margin: 0 0 var(--s-5);
}
.topic-hero .breadcrumb {
  font-size: var(--fs-small); color: var(--c-text-dim);
  display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.topic-hero .breadcrumb a { color: var(--c-text-soft); }
.topic-hero .breadcrumb span { color: var(--c-text-dim); }

/* ============== Sections ============== */
main { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5) var(--s-10); }
section { margin-bottom: var(--s-8); }
section h2 {
  font-size: var(--fs-h2);
  margin: 0 0 var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
}
section h2::before {
  content: ""; width: 4px; height: 28px;
  background: var(--topic-color); border-radius: 2px;
}
section p { color: var(--c-text-soft); margin: 0 0 var(--s-3); }
section p strong { color: var(--c-text); }

/* ============== Demo 卡片 ============== */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-5);
}
.demo-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.demo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--topic-color) 40%, var(--c-border));
}
.demo-card header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.demo-tag {
  font-size: var(--fs-tiny); padding: 2px var(--s-2);
  background: color-mix(in srgb, var(--topic-color) 18%, transparent);
  color: var(--topic-color); border-radius: var(--r-sm); font-weight: 600;
}
.demo-card h3 { font-size: var(--fs-h3); margin: 0; color: var(--c-text); }
.demo-stage {
  background: var(--c-bg);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  min-height: 220px;
  display: flex; flex-direction: column; gap: var(--s-3);
  border: 1px solid var(--c-border-soft);
}
.demo-stage canvas, .demo-stage svg { width: 100%; flex: 1; min-height: 140px; }
.demo-controls { display: flex; flex-direction: column; gap: var(--s-2); }
.demo-controls label {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-small); color: var(--c-text-soft);
}
.demo-controls input[type=range] {
  flex: 1; accent-color: var(--topic-color);
}
.demo-controls .value {
  min-width: 48px; text-align: right;
  font-family: var(--font-mono); color: var(--c-text); font-weight: 600;
}
.demo-card .demo-desc { font-size: var(--fs-small); color: var(--c-text-dim); margin: var(--s-3) 0; }
.demo-replay {
  background: transparent; color: var(--topic-color);
  border: 1px solid color-mix(in srgb, var(--topic-color) 40%, transparent);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font-size: var(--fs-small); font-weight: 600;
  transition: all var(--dur-fast) var(--ease);
}
.demo-replay:hover { background: var(--topic-color); color: var(--c-bg); opacity: 1; }

/* ============== 知识储备 ============== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}
.info-card {
  background: var(--c-bg-card);
  border-left: 3px solid var(--topic-color);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
}
.info-card b { display: block; color: var(--c-text); margin-bottom: var(--s-1); }
.info-card span { font-size: var(--fs-small); color: var(--c-text-soft); }

/* ============== 同类方向 ============== */
.jump-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.jump-btn {
  display: block; padding: var(--s-4) var(--s-5);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-sm);
  color: var(--c-text);
  transition: all var(--dur-fast) var(--ease);
}
.jump-btn:hover { border-color: var(--topic-color); transform: translateX(4px); opacity: 1; }
.jump-btn b { display: block; margin-bottom: var(--s-1); }
.jump-btn span { font-size: var(--fs-small); color: var(--c-text-soft); }

/* ============== Footer ============== */
site-footer { display: block; border-top: 1px solid var(--c-border-soft); margin-top: var(--s-10); padding: var(--s-6) var(--s-5); }
site-footer .footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-small); color: var(--c-text-dim);
}
site-footer .footer-links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
site-footer .footer-links a, site-footer .footer-links button {
  color: var(--c-text-soft); background: transparent; border: 0;
  font-size: inherit; padding: 0; cursor: pointer;
}
site-footer .footer-links a:hover, site-footer .footer-links button:hover { color: var(--topic-color); opacity: 1; }

/* ============== 返回主仓浮动按钮 ============== */
[data-back-home] {
  position: fixed; left: var(--s-5); bottom: var(--s-5); z-index: 50;
  padding: var(--s-2) var(--s-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  color: var(--c-text-soft); font-size: var(--fs-small);
  box-shadow: var(--shadow-card);
  transition: all var(--dur-fast) var(--ease);
}
[data-back-home]:hover { color: var(--topic-color); border-color: var(--topic-color); opacity: 1; }

/* ============== param-plot 内部 ============== */
param-plot { display: block; }
param-plot canvas {
  width: 100%;
  height: 180px;
  display: block;
  background: var(--c-bg);
  border-radius: var(--r-sm);
}
param-plot .demo-controls {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-3);
}

/* ============== flip-grid 内部 ============== */
flip-grid { display: block; }
flip-grid .flip-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
flip-grid .flip-card {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  aspect-ratio: 5 / 3;
  perspective: 800px;
}
flip-grid .flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.6s var(--ease);
  transform-style: preserve-3d;
}
flip-grid .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
flip-grid .flip-front, flip-grid .flip-back {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: var(--s-3);
  border-radius: var(--r-sm);
  backface-visibility: hidden;
  text-align: center; font-size: var(--fs-small);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
}
flip-grid .flip-front {
  color: var(--c-text); font-weight: 600;
  border-color: var(--topic-color);
}
flip-grid .flip-back {
  background: color-mix(in srgb, var(--topic-color) 15%, var(--c-bg-card));
  color: var(--c-text-soft);
  transform: rotateY(180deg);
  line-height: 1.4;
}

/* ============== quiz-step 内部 ============== */
quiz-step { display: block; }
quiz-step .quiz-progress {
  font-size: var(--fs-tiny); color: var(--c-text-dim);
  margin-bottom: var(--s-2);
}
quiz-step .quiz-q {
  font-size: var(--fs-h3); color: var(--c-text);
  margin-bottom: var(--s-3); font-weight: 600;
}
quiz-step .quiz-opts {
  display: flex; flex-direction: column; gap: var(--s-2);
}
quiz-step .quiz-opts button {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  color: var(--c-text); padding: var(--s-3);
  border-radius: var(--r-sm); text-align: left;
  transition: all var(--dur-fast) var(--ease);
}
quiz-step .quiz-opts button:hover:not(:disabled) {
  border-color: var(--topic-color); opacity: 1;
  background: color-mix(in srgb, var(--topic-color) 10%, var(--c-bg-soft));
}
quiz-step .quiz-explain {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--c-bg-soft);
  border-left: 3px solid var(--topic-color);
  border-radius: var(--r-sm);
  color: var(--c-text-soft);
  font-size: var(--fs-small);
}
quiz-step .quiz-done {
  text-align: center; padding: var(--s-5);
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  color: var(--c-text);
}
quiz-step .quiz-done b {
  font-size: var(--fs-h2); color: var(--topic-color);
  display: block; margin-bottom: var(--s-3);
}

/* ============== 工具类 ============== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============== unit-converter ============== */
unit-converter { display: block; }
unit-converter .uc-tabs {
  display: flex; gap: 4px; margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border-soft);
}
unit-converter .uc-tabs button {
  flex: 1; padding: var(--s-2);
  background: transparent; border: 0;
  color: var(--c-text-soft); font-size: var(--fs-small);
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
unit-converter .uc-tabs button[aria-pressed="true"] {
  color: var(--topic-color); border-bottom-color: var(--topic-color);
}
unit-converter .uc-body { display: flex; flex-direction: column; gap: var(--s-3); }
unit-converter .uc-body label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); color: var(--c-text-soft);
}
unit-converter .uc-body select, unit-converter .uc-body input {
  background: var(--c-bg); border: 1px solid var(--c-border-soft);
  color: var(--c-text); padding: var(--s-2);
  border-radius: var(--r-sm); font-size: var(--fs-small);
  font-family: inherit;
}
unit-converter .uc-body select { flex: 1; }
unit-converter .uc-body input { flex: 1; }
unit-converter .uc-body b { color: var(--topic-color); font-weight: 700; font-size: var(--fs-h3); }

/* ============== bar-chart ============== */
bar-chart { display: block; }
bar-chart canvas { width: 100%; height: 200px; display: block; }

/* ============== formula-calc ============== */
formula-calc { display: block; }
formula-calc .fc-vars { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
formula-calc .fc-vars label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); color: var(--c-text-soft);
}
formula-calc .fc-vars input {
  flex: 1; background: var(--c-bg); border: 1px solid var(--c-border-soft);
  color: var(--c-text); padding: var(--s-2);
  border-radius: var(--r-sm); font-family: var(--font-mono);
  accent-color: var(--topic-color);
}
formula-calc .fc-result {
  padding: var(--s-3);
  background: var(--c-bg); border-radius: var(--r-sm);
  text-align: center; color: var(--c-text-soft); font-size: var(--fs-small);
}
formula-calc .fc-result b {
  color: var(--topic-color); font-size: var(--fs-h2); font-weight: 700;
  font-family: var(--font-mono); margin-left: var(--s-2);
}

/* ============== timeline-cards ============== */
timeline-cards { display: block; }
timeline-cards .tl-track {
  display: flex; gap: var(--s-2); overflow-x: auto;
  padding: var(--s-3) 0; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
timeline-cards .tl-track::-webkit-scrollbar { height: 6px; }
timeline-cards .tl-track::-webkit-scrollbar-thumb { background: var(--topic-color); border-radius: 3px; }
timeline-cards .tl-event {
  flex: 0 0 130px; scroll-snap-align: start;
  background: var(--c-bg-soft); border: 1px solid var(--c-border-soft);
  border-radius: var(--r-sm); padding: var(--s-3);
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
  position: relative;
}
timeline-cards .tl-event.tl-open { flex: 0 0 220px; }
timeline-cards .tl-event:hover { border-color: var(--topic-color); }
timeline-cards .tl-event.tl-open { background: color-mix(in srgb, var(--topic-color) 10%, var(--c-bg-soft)); }
timeline-cards .tl-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--topic-color); margin-bottom: var(--s-2);
}
timeline-cards .tl-time { font-size: var(--fs-tiny); color: var(--c-text-dim); }
timeline-cards .tl-title { font-size: var(--fs-small); color: var(--c-text); font-weight: 600; margin-top: var(--s-1); }
timeline-cards .tl-desc {
  margin-top: var(--s-2); font-size: var(--fs-tiny);
  color: var(--c-text-soft); line-height: 1.5;
}
timeline-cards .tl-event:not(.tl-open) .tl-desc { display: none; }

/* ============== relation-map ============== */
relation-map { display: block; padding: var(--s-2); }
relation-map svg { width: 100%; height: 280px; display: block; }

/* ============== Hero grid + mascot ============== */
/* ===== hero-banner: wide cinematic banner above hero grid ===== */
/* ===== case-feature: hero case image above case cards ===== */
.topic-cases .case-feature {
  display: block;
  width: 100%;
  margin: 0 0 var(--s-5) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
  background: var(--c-bg-card);
}
.topic-cases .case-feature img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
}

/* ===== info-icon-img: SVG icon for knowledge cards ===== */
.info-card .info-icon-img {
  width: 96px; height: 96px;
  object-fit: contain;
  display: block;
  margin: 0 auto var(--s-3);
}
@media (max-width: 720px) {
  .topic-cases .case-feature img { max-height: 200px; }
}

.topic-hero .hero-banner {
  display: block;
  width: 100%;
  margin: 0 0 var(--s-5) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
  background: var(--c-bg-card);
}
.topic-hero .hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 720px) {
  .topic-hero .hero-banner { margin-bottom: var(--s-4); }
  .topic-hero .hero-banner img { max-height: 200px; }
}

.topic-hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--s-6);
  align-items: center;
}
@media (max-width: 768px) {
  .topic-hero .hero-grid { grid-template-columns: 1fr; }
  .topic-hero .hero-mascot { display: none; }
}
.topic-hero .hero-meta {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-5);
  font-size: var(--fs-small); color: var(--c-text-dim);
}
.topic-hero .hero-meta span {
  padding: var(--s-1) var(--s-3);
  background: var(--c-bg-card);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-soft);
}
.topic-hero .hero-mascot {
  display: grid; place-items: center;
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  border: 1px solid var(--c-border-soft);
  min-height: 192px;
  contain: layout paint;
}
.topic-hero .hero-mascot img {
  width: 100%; max-width: 160px;
  aspect-ratio: 1 / 1;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}


/* ===== scene2d (Three.js 固定视角 2D 场景容器) ===== */
.scene2d-wrap {
  position: relative;
  width: 100%;
  height: 360px;
  background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  touch-action: none;
}
.scene2d-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.scene2d-hud {
  position: absolute; top: 12px; left: 12px; right: 12px;
  pointer-events: none;
  z-index: 2;
}
.scene2d-kpi {
  display: inline-flex; gap: 12px; flex-wrap: wrap;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; color: #fff; font-weight: 600;
}
.scene2d-kpi b { color: #ffd700; }
.scene2d-controls {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  z-index: 2;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  padding: 8px 12px; border-radius: var(--r-md);
}
.scene2d-controls label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #fff;
}
.scene2d-controls label input[type=range] {
  width: 100px; accent-color: var(--scene-accent, #06d6f0);
}
.scene2d-controls label .value {
  min-width: 32px; text-align: right; color: var(--scene-accent, #06d6f0); font-weight: 700;
}
.scene2d-btn {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.scene2d-btn:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 720px) {
  .scene2d-wrap { height: 280px; }
  .scene2d-controls { padding: 6px 8px; font-size: 11px; }
  .scene2d-controls label input[type=range] { width: 70px; }
}


/* ============== Section hint ============== */
.section-hint {
  color: var(--c-text-dim);
  font-size: var(--fs-small);
  margin-top: calc(-1 * var(--s-3));
  margin-bottom: var(--s-5);
}

/* ============== Demo meta (难度/时长) ============== */
.demo-card .demo-meta {
  display: flex; gap: var(--s-2);
  margin-left: auto;
  font-size: var(--fs-tiny);
}
.demo-card .difficulty-入门,
.demo-card .difficulty-工具 {
  padding: 2px 8px;
  background: color-mix(in srgb, var(--c-success) 25%, transparent);
  color: var(--c-success);
  border-radius: var(--r-sm); font-weight: 600;
}
.demo-card .difficulty-巩固 {
  padding: 2px 8px;
  background: color-mix(in srgb, var(--c-warning) 25%, transparent);
  color: var(--c-warning);
  border-radius: var(--r-sm); font-weight: 600;
}
.demo-card .difficulty-进阶 {
  padding: 2px 8px;
  background: color-mix(in srgb, var(--c-danger) 25%, transparent);
  color: var(--c-danger);
  border-radius: var(--r-sm); font-weight: 600;
}
.demo-card .time {
  color: var(--c-text-dim);
  padding: 2px 8px;
}
.demo-card header { gap: var(--s-2); }
.demo-card header h3 { flex: 0 0 auto; }

/* ============== info-card icon ============== */
.info-card { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-2); align-items: start; }
.info-card > b,
.info-card > span:not(.info-icon) { grid-column: 2; }
.info-card .info-icon {
  font-size: 1.5rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--topic-color) 15%, transparent);
  border-radius: var(--r-sm);
  width: 32px; height: 32px;
}

/* ============== path-list 学习路径 ============== */
.path-list { display: flex; flex-direction: column; gap: var(--s-2); }
.path-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-sm);
  color: var(--c-text);
  transition: all var(--dur-fast) var(--ease);
}
.path-item:hover { border-color: var(--topic-color); opacity: 1; transform: translateX(4px); }
.path-item .path-why {
  font-size: var(--fs-tiny); color: var(--c-text-dim);
  flex: 0 0 auto; min-width: 180px;
}
.path-item b { flex: 1; }
.path-item .path-arrow { color: var(--topic-color); font-size: 1.25rem; }

/* ============== jump-why 同类方向 ============== */
.jump-btn { position: relative; }
.jump-btn .jump-why {
  display: inline-block;
  font-size: var(--fs-tiny);
  color: var(--topic-color);
  background: color-mix(in srgb, var(--topic-color) 15%, transparent);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  margin-bottom: var(--s-1);
}


/* ============== Share / Backup modal ============== */
.footer-links button,
.sg-actions button {
  border: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  color: var(--c-text-soft);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-3);
  font: inherit;
}
.footer-links button:hover,
.sg-actions button:hover { color: var(--c-text); border-color: var(--topic-color); }
.sg-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(12px);
}
.sg-modal {
  position: relative;
  width: min(420px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--c-border);
  border-radius: 24px;
  background: var(--c-bg-card);
  box-shadow: var(--shadow-hover);
  padding: 22px;
  color: var(--c-text);
}
.sg-modal h2 { margin: 0 0 8px; }
.sg-modal p { color: var(--c-text-soft); margin: 0 0 14px; }
.sg-modal-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-size: 22px;
}
.sg-qr {
  display: grid;
  place-items: center;
  margin: 14px auto;
  width: 248px;
  max-width: 100%;
  padding: 8px;
  border-radius: 22px;
  background: #fff;
}
.sg-url {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font: 12px/1.5 var(--font-mono);
}
.sg-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sg-note { font-size: var(--fs-tiny); color: var(--c-text-dim) !important; margin-top: 12px !important; }
[data-theme="light"] .sg-modal { background: #fff; }
[data-theme="light"] .sg-url,
[data-theme="light"] .footer-links button,
[data-theme="light"] .sg-actions button { background: #fff; }
@media (max-width: 640px) {
  .sg-modal-backdrop { padding: 12px; align-items: end; }
  .sg-modal { border-radius: 22px 22px 0 0; width: 100%; max-height: calc(100vh - 24px); }
  .sg-actions button { flex: 1; min-height: 42px; }
}

/* === 20260606 subsite topbar compact actions fix ===
   Keep subsite navigation stable and make share/backup small actions. */
site-nav .nav-inner {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
}
site-nav .nav-links {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
}
site-nav .nav-link {
  flex: 0 0 auto;
}
site-nav .nav-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--s-2);
  min-width: 0;
}
site-nav .nav-tools > button[data-share-open],
site-nav .nav-tools > button[data-backup-site] {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg-soft);
  color: transparent;
  font-size: 0;
  overflow: hidden;
}
site-nav .nav-tools > button[data-share-open]::before {
  content: "↗";
  color: var(--topic-color);
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}
site-nav .nav-tools > button[data-backup-site]::before {
  content: "⇩";
  color: var(--topic-color);
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
}
@media (max-width: 1120px) {
  site-nav .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  site-nav .nav-links { display: none; }
}
@media (max-width: 720px) {
  site-nav .logo small { display: none; }
  site-nav .nav-inner { padding: var(--s-3) var(--s-3); gap: var(--s-2); }
  site-nav .nav-tools { gap: 4px; }
  theme-switcher button { padding: 2px 7px; }
  locale-switcher select { max-width: 76px; padding: 4px 8px; }
  site-nav .nav-tools > button[data-share-open],
  site-nav .nav-tools > button[data-backup-site] {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

/* === 20260606 subsite learning progress + mobile polish === */
.site-progress-card {
  max-width: 1200px;
  margin: 0 auto var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid color-mix(in srgb, var(--topic-color) 28%, var(--c-border-soft));
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--topic-color) 10%, var(--c-bg-card)), var(--c-bg-card));
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 260px) auto;
  gap: var(--s-4);
  align-items: center;
}
.site-progress-card .progress-label {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--topic-color);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-progress-card b {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-text);
}
.site-progress-card small {
  display: block;
  color: var(--c-text-dim);
  margin-top: 2px;
}
.progress-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  overflow: hidden;
}
.progress-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--topic-color), color-mix(in srgb, var(--topic-color) 55%, #fff));
  transition: width var(--dur-base) var(--ease);
}
.site-progress-card button {
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 16px;
  background: var(--topic-color);
  color: var(--c-bg);
  font-weight: 800;
  white-space: nowrap;
}
.demo-card { position: relative; }
.demo-complete-mark {
  position: absolute;
  right: 14px;
  top: 14px;
  display: none;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-success) 18%, var(--c-bg-card));
  border: 1px solid color-mix(in srgb, var(--c-success) 45%, transparent);
  color: var(--c-success);
  font-size: var(--fs-tiny);
  font-weight: 800;
}
.demo-card.is-completed {
  border-color: color-mix(in srgb, var(--c-success) 42%, var(--c-border));
}
.demo-card.is-completed .demo-complete-mark { display: inline-flex; }
.chart-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.chart-inputs label {
  display: grid;
  gap: 4px;
  color: var(--c-text-dim);
  font-size: var(--fs-tiny);
}
.chart-inputs input {
  width: 100%;
  border: 1px solid var(--c-border-soft);
  border-radius: 10px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  padding: 7px 8px;
}
[data-theme="light"] .site-progress-card,
[data-theme="light"] .chart-inputs input {
  background: #fff;
}
@media (max-width: 720px) {
  .site-progress-card {
    margin: 0 var(--s-3) var(--s-5);
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
  }
  .site-progress-card button { width: 100%; }
  .demo-complete-mark { top: 10px; right: 10px; }
}

/* === 20260606 subsite favorite + lightweight notes === */
.demo-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-border-soft);
}
.demo-tools button {
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg-soft);
  color: var(--c-text-soft);
  padding: 7px 10px;
  font-size: var(--fs-tiny);
  font-weight: 800;
}
.demo-tools button[aria-pressed="true"],
.demo-card.is-favorite .demo-tools [data-demo-fav] {
  border-color: color-mix(in srgb, var(--topic-color) 42%, transparent);
  background: color-mix(in srgb, var(--topic-color) 12%, var(--c-bg-soft));
  color: var(--topic-color);
}
.demo-note-text {
  display: none;
  flex: 1 0 100%;
  width: 100%;
  resize: vertical;
  min-height: 58px;
  border: 1px solid var(--c-border-soft);
  border-radius: 12px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  padding: 9px 10px;
  font: inherit;
  font-size: var(--fs-small);
}
.demo-card.is-note-open .demo-note-text,
.demo-note-text:not(:placeholder-shown) {
  display: block;
}
[data-theme="light"] .demo-tools button,
[data-theme="light"] .demo-note-text { background: #fff; }
@media (max-width: 720px) {
  .demo-tools button { min-height: 36px; flex: 1; }
}

/* === 20260606 representative subsite polish === */
.topic-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: var(--s-5);
  align-items: start;
}
.lesson-steps {
  margin: 0;
  padding: var(--s-4);
  list-style: none;
  display: grid;
  gap: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, var(--c-border-soft));
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--topic-color) 10%, var(--c-bg-card)), var(--c-bg-card));
}
.lesson-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  color: var(--c-text-soft);
}
.lesson-steps li b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--topic-color);
  color: var(--c-bg);
  font-weight: 900;
}
.lesson-steps li span {
  padding-top: 4px;
}
.demo-card header {
  align-items: flex-start;
  flex-wrap: wrap;
}
.demo-card header h3 {
  min-width: 0;
  flex: 1 1 130px;
}
.demo-card .demo-meta {
  margin-left: 0;
  flex: 0 0 auto;
}
.demo-stage {
  min-width: 0;
  overflow: hidden;
}
unit-converter .uc-body label {
  min-width: 0;
  flex-wrap: wrap;
}
unit-converter .uc-body select,
unit-converter .uc-body input {
  min-width: 0;
}
[data-theme="light"] .lesson-steps {
  background: #fff;
}
@media (max-width: 860px) {
  .topic-lesson {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .topic-hero {
    padding-top: var(--s-6);
  }
  .topic-hero h1 {
    font-size: clamp(2rem, 12vw, 3rem);
  }
  .topic-hero .subtitle {
    font-size: 1rem;
  }
  .demo-grid,
  .info-grid,
  .jump-list {
    grid-template-columns: 1fr;
  }
  .demo-card {
    padding: var(--s-4);
  }
  .demo-card header {
    gap: var(--s-2);
  }
  .demo-card .demo-meta {
    width: 100%;
  }
  .path-item {
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .path-item .path-why {
    grid-column: 1 / -1;
    min-width: 0;
  }
  [data-back-home] {
    left: var(--s-3);
    right: var(--s-3);
    bottom: var(--s-3);
    text-align: center;
  }
}


/* === 20260606 subsite share panel + theme consistency === */
.share-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 36%, var(--c-border));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-bg-card) 90%, transparent);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
  font-weight: 800;
}
.share-fab span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--topic-color);
  color: var(--c-bg);
  line-height: 1;
}
.share-fab em { font-style: normal; font-size: var(--fs-small); }
.share-fab:hover { opacity: 1; transform: translateY(-1px); border-color: var(--topic-color); }
.share-panel { position: fixed; inset: 0; z-index: 1100; display: none; }
.share-panel.is-open { display: block; }
.share-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(12px);
}
.share-panel__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 22%, var(--c-border));
  background: var(--c-bg-card);
  box-shadow: var(--shadow-hover);
  color: var(--c-text);
}
.share-panel__close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-border-soft);
  border-radius: 999px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-size: 22px;
  line-height: 1;
}
.share-panel__head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-right: 36px;
}
.share-panel__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--topic-color);
  color: var(--c-bg);
  font-weight: 900;
  font-size: 20px;
}
.share-panel__head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.share-panel__head p { margin: 0; color: var(--c-text-soft); font-size: var(--fs-small); }
.share-qr {
  display: grid;
  place-items: center;
  width: 248px;
  max-width: 100%;
  margin: 18px auto;
  padding: 10px;
  border-radius: 24px;
  background: #fff;
}
.share-qr__svg { display: block; width: 232px; height: 232px; }
.share-url { display: grid; gap: 7px; color: var(--c-text-soft); font-size: var(--fs-tiny); }
.share-url input {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font: 12px/1.5 var(--font-mono);
}
.share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.btn,
.share-actions button {
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 10px 14px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-weight: 800;
}
.btn-primary,
.share-actions [data-share-copy] {
  background: var(--topic-color);
  color: var(--c-bg);
  border-color: var(--topic-color);
}
.btn-ghost,
.share-actions [data-share-native] {
  background: transparent;
  color: var(--c-text-soft);
}
.share-hint { margin: 12px 0 0; color: var(--c-text-dim); font-size: var(--fs-tiny); }
[data-theme="light"] .share-fab,
[data-theme="light"] .share-panel__card,
[data-theme="light"] .share-panel__close,
[data-theme="light"] .share-url input,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .share-actions [data-share-native] {
  background: #fff;
}
@media (max-width: 720px) {
  .share-fab {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
  }
  .share-fab em { display: none; }
  .share-fab span { background: transparent; color: var(--topic-color); width: auto; height: auto; }
  .share-panel__card {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 22px 22px 0 0;
  }
  .share-actions button { flex: 1; min-height: 42px; }
}

/* === 20260606 subsite visual rhythm refinements === */
body { overflow-x: clip; }
main, .topic-hero, .demo-card, .demo-stage { min-width: 0; }
.topic-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-bg-card) 88%, transparent);
}
.lesson-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.lesson-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  border: 1px solid color-mix(in srgb, var(--topic-color) 18%, var(--c-border-soft));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--topic-color) 7%, var(--c-bg-soft));
}
.lesson-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--topic-color);
  color: var(--c-bg);
}
.lesson-steps span { color: var(--c-text-soft); }
[data-theme="light"] .topic-lesson,
[data-theme="light"] .lesson-steps li { background: #fff; }
@media (max-width: 860px) {
  .topic-lesson { grid-template-columns: 1fr; padding: var(--s-4); }
}
@media (max-width: 720px) {
  .topic-hero { padding: var(--s-8) var(--s-4) var(--s-6); }
  main { padding-inline: var(--s-4); }
  .demo-grid,
  .info-grid,
  .jump-list { grid-template-columns: 1fr; }
  .demo-card { padding: var(--s-4); }
  .demo-card header { align-items: flex-start; flex-wrap: wrap; }
  .demo-card header h3 { flex: 1 1 100%; }
  .demo-card .demo-meta { margin-left: 0; }
  [data-back-home] { display: none; }
}

/* === 20260606 subsite learning feedback + return loop === */
.demo-insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  margin-top: var(--s-3);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, var(--c-border-soft));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--topic-color) 8%, var(--c-bg-soft));
  color: var(--c-text-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.demo-insight-title {
  color: var(--topic-color);
  white-space: nowrap;
  font-weight: 900;
}
.demo-insight-text { min-width: 0; }
[data-theme="light"] .demo-insight {
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}
.site-loop-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  margin: var(--s-8) 0 var(--s-6);
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, var(--c-border));
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--topic-color) 14%, transparent), transparent 36%),
    color-mix(in srgb, var(--c-bg-card) 92%, transparent);
  box-shadow: var(--shadow-card);
}
.site-loop-card b {
  display: block;
  color: var(--c-text);
  font-size: var(--fs-h3);
  margin-bottom: 4px;
}
.site-loop-card p {
  margin: 0;
  color: var(--c-text-soft);
  line-height: 1.7;
}
.site-loop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.site-loop-actions a,
.site-loop-actions button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}
.site-loop-actions a:first-child {
  background: var(--topic-color);
  border-color: var(--topic-color);
  color: var(--c-bg);
}
[data-theme="light"] .site-loop-card,
[data-theme="light"] .site-loop-actions a,
[data-theme="light"] .site-loop-actions button {
  background-color: #fff;
}
[data-theme="light"] .site-loop-actions a:first-child {
  background: var(--topic-color);
}
@media (max-width: 760px) {
  .site-loop-card {
    grid-template-columns: 1fr;
    padding: var(--s-4);
  }
  .site-loop-actions {
    justify-content: stretch;
  }
  .site-loop-actions a,
  .site-loop-actions button {
    flex: 1 1 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  .demo-insight {
    grid-template-columns: 1fr;
  }
}

/* === 20260606 subsite backup/restore panel === */
.backup-panel { position: fixed; inset: 0; z-index: 1120; display: none; }
.backup-panel.is-open { display: block; }
.backup-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(12px);
}
.backup-panel__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 22%, var(--c-border));
  background: var(--c-bg-card);
  box-shadow: var(--shadow-hover);
  color: var(--c-text);
}
.backup-panel__close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-border-soft);
  border-radius: 999px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-size: 22px;
  line-height: 1;
}
.backup-panel__head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-right: 36px;
}
.backup-panel__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--topic-color);
  color: var(--c-bg);
  font-weight: 900;
  font-size: 20px;
}
.backup-panel__head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.backup-panel__head p { margin: 0; color: var(--c-text-soft); font-size: var(--fs-small); line-height: 1.65; }
.backup-panel__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 12px; }
.backup-panel__actions button,
.backup-import {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 0 14px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font-weight: 900;
  cursor: pointer;
  text-align: center;
}
.backup-panel__actions [data-backup-export] {
  background: var(--topic-color);
  color: var(--c-bg);
  border-color: var(--topic-color);
}
.backup-import input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.backup-panel__hint { color: var(--c-text-dim); font-size: var(--fs-tiny); line-height: 1.65; margin: 0; }
.backup-panel__status {
  display: block;
  min-height: 1.5em;
  margin-top: 12px;
  color: var(--c-success);
  font-size: var(--fs-small);
  line-height: 1.6;
  white-space: pre-wrap;
}
.backup-panel__status.is-error { color: var(--c-danger); }
[data-theme="light"] .backup-panel__card,
[data-theme="light"] .backup-panel__close,
[data-theme="light"] .backup-import { background: #fff; }
@media (max-width: 720px) {
  .backup-panel__card {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 22px 22px 0 0;
  }
  .backup-panel__actions { grid-template-columns: 1fr; }
}

/* === 20260606 subsite main-site visual parity refinements === */
html, body { overflow-x: clip; }
button, a, select, input, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--topic-color) 58%, transparent);
  outline-offset: 3px;
}
[data-theme="light"] {
  --c-bg: #ffffff;
  --c-bg-soft: #ffffff;
  --c-bg-card: #ffffff;
  --c-text: #111827;
  --c-text-soft: #475569;
  --c-text-dim: #64748b;
  --c-border: #d8e0ea;
  --c-border-soft: #edf2f7;
  --shadow-card: 0 12px 32px rgba(15, 23, 42, .07);
  --shadow-hover: 0 18px 44px rgba(15, 23, 42, .12);
}
[data-theme="light"] body::before { display: none; }
[data-theme="light"] site-nav { background: rgba(255, 255, 255, .92); }
[data-theme="light"] .topic-hero h1 {
  background: linear-gradient(135deg, #111827 0%, var(--topic-color) 100%);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"] .demo-card,
[data-theme="light"] .info-card,
[data-theme="light"] .path-item,
[data-theme="light"] .site-progress-card,
[data-theme="light"] .topic-lesson,
[data-theme="light"] .lesson-steps li,
[data-theme="light"] .share-panel__card,
[data-theme="light"] .backup-panel__card {
  background: #ffffff;
}
site-nav .nav-tools > button[data-share-open],
site-nav .nav-tools > button[data-backup-site],
.footer-links button {
  font-size: 0;
  color: transparent;
}
.footer-links button[data-share-open]::before { content: "↗"; color: var(--topic-color); font-size: 16px; }
.footer-links button[data-backup-site]::before { content: "⇩"; color: var(--topic-color); font-size: 16px; }
@media (max-width: 520px) {
  site-nav .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
  site-nav .logo-mark { width: 32px; height: 32px; }
  site-nav .logo b { font-size: .92rem; }
  theme-switcher { display: none; }
  site-nav .nav-tools > button[data-share-open] { display: none; }
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-mascot { max-width: 188px; margin-inline: auto; }
  .topic-hero { padding-top: var(--s-8); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* === 20260606 case layout balance patch ===
   目标：修复 demo 案例有的密、有的空的问题。
   统一卡片内部节奏：头部 / 演示区 / 说明 / 观察提示 / 操作区。
*/
.topic-demos {
  --demo-stage-h: clamp(238px, 24vw, 286px);
}
.topic-demos > h2 {
  margin-bottom: var(--s-2);
}
.topic-demos .section-hint {
  max-width: 760px;
  margin-bottom: var(--s-5);
}
.demo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2vw, 26px);
}
.demo-card {
  min-width: 0;
  height: 100%;
  min-height: 540px;
  display: grid;
  grid-template-rows: auto minmax(var(--demo-stage-h), auto) auto minmax(92px, auto) auto;
  gap: var(--s-3);
  padding: clamp(18px, 2vw, 24px);
  overflow: hidden;
}
.demo-card header {
  min-height: 76px;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "tag meta"
    "title title";
  align-items: start;
  gap: 8px 10px;
}
.demo-card .demo-tag {
  grid-area: tag;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-card h3 {
  grid-area: title;
  min-width: 0;
  max-width: 100%;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.demo-card .demo-meta {
  grid-area: meta;
  justify-content: flex-end;
  align-items: center;
  min-width: max-content;
  margin-left: 0;
}
.demo-stage {
  min-height: var(--demo-stage-h);
  max-height: 360px;
  overflow: auto;
  scrollbar-width: thin;
  display: grid;
  align-content: stretch;
}
.demo-stage > * {
  min-width: 0;
}
.demo-stage canvas,
.demo-stage svg {
  min-height: 180px;
  max-height: 240px;
}
.demo-card .demo-desc {
  min-height: 44px;
  margin: 0;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.demo-insight {
  min-height: 92px;
  margin: 0;
  align-self: stretch;
}
.demo-tools {
  align-self: end;
  margin-top: 0;
}
.flip-grid {
  align-content: start;
}
.flip-card {
  min-height: 78px;
}
.quiz-options {
  display: grid;
  gap: 8px;
}
.quiz-option,
.quiz-step button {
  min-height: 38px;
}
.param-plot,
.bar-chart,
.relation-map,
.timeline-cards,
.unit-converter,
quiz-step,
flip-grid,
param-plot,
bar-chart,
relation-map,
timeline-cards,
unit-converter {
  min-width: 0;
  width: 100%;
}
.info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.info-card {
  min-height: 112px;
}
.path-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.path-item {
  min-height: 112px;
  align-items: stretch;
}
@media (max-width: 1080px) {
  .demo-grid,
  .info-grid,
  .path-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-card {
    min-height: 520px;
  }
}
@media (max-width: 720px) {
  .topic-demos {
    --demo-stage-h: 220px;
  }
  .demo-grid,
  .info-grid,
  .path-list {
    grid-template-columns: 1fr;
  }
  .demo-card {
    min-height: auto;
    grid-template-rows: auto auto auto auto auto;
  }
  .demo-card header {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "tag"
      "title"
      "meta";
  }
  .demo-card .demo-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }
  .demo-stage {
    max-height: none;
    overflow: visible;
  }
  .demo-card .demo-desc {
    -webkit-line-clamp: 3;
    min-height: 0;
  }
  .demo-insight {
    min-height: 0;
  }
  .path-item,
  .info-card {
    min-height: 0;
  }
}

/* === 20260606 demo feedback richness patch ===
   目标：让案例更饱满，不只是空白画布 + 简短说明。
   给图表、换算、时间线、关系图、翻卡增加可读反馈区。
*/
.demo-kpi,
.chart-summary,
.flip-progress,
.tl-summary,
.uc-formula,
.relation-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--c-text-soft);
  font-size: 12px;
  line-height: 1.5;
}
.demo-kpi,
.chart-summary {
  margin: -2px 0 8px;
}
.demo-kpi span,
.chart-summary span,
.flip-progress,
.tl-summary,
.uc-formula,
.relation-detail {
  border: 1px solid rgba(255,255,255,0.1);
  background: color-mix(in srgb, var(--topic-color) 12%, rgba(255,255,255,0.04));
  border-radius: 999px;
  padding: 5px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.flip-progress,
.tl-summary,
.uc-formula,
.relation-detail {
  border-radius: 14px;
  width: fit-content;
  max-width: 100%;
}
.uc-formula,
.relation-detail {
  margin-top: 8px;
}
.flip-grid-inner {
  margin-top: 8px;
}
.tl-track {
  margin-top: 10px;
}
.demo-stage canvas + .demo-kpi,
.demo-stage .demo-kpi + .demo-controls {
  margin-top: 6px;
}
[data-theme="light"] .demo-kpi span,
[data-theme="light"] .chart-summary span,
[data-theme="light"] .flip-progress,
[data-theme="light"] .tl-summary,
[data-theme="light"] .uc-formula,
[data-theme="light"] .relation-detail {
  color: #475569;
  border-color: rgba(15,23,42,0.1);
  background: color-mix(in srgb, var(--topic-color) 10%, #ffffff);
  box-shadow: 0 8px 20px rgba(15,23,42,0.05);
}
@media (max-width: 720px) {
  .demo-kpi,
  .chart-summary,
  .flip-progress,
  .tl-summary,
  .uc-formula,
  .relation-detail {
    font-size: 12px;
  }
  .demo-kpi span,
  .chart-summary span {
    flex: 1 1 auto;
  }
}

/* === 20260606 representative mini-app depth patch ===
   6 个代表子站的深度 demo：实验装置、月相轨道、诗画分层、餐盘、语境仪表、快捷换算。
*/
chem-electrolysis,
astro-moon-phase,
poetry-layer-view,
calorie-plate,
meme-context-lab,
unit-quick-converter {
  display: block;
  width: 100%;
  min-width: 0;
}
.chem-lab,
.moon-lab,
.poetry-lab,
.calorie-lab,
.meme-lab,
.uqc-lab {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.chem-lab {
  grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
.chem-beaker {
  position: relative;
  min-height: 188px;
  border: 2px solid color-mix(in srgb, var(--topic-color) 45%, rgba(255,255,255,0.32));
  border-top: 0;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.chem-liquid { position:absolute; inset:auto 10px 12px; height:62%; border-radius:0 0 20px 20px; background:color-mix(in srgb, var(--topic-color) 24%, rgba(255,255,255,0.08)); }
.chem-electrode { position:absolute; top:18px; width:8px; height:126px; border-radius:99px; background:rgba(255,255,255,0.52); z-index:2; }
.chem-electrode.left { left:35%; }
.chem-electrode.right { right:35%; }
.chem-bubbles { position:absolute; bottom:22px; width:30%; border-radius:18px 18px 4px 4px; opacity:.9; transition:height .22s ease; z-index:1; }
.chem-bubbles.h2 { left:19%; background:radial-gradient(circle at 35% 18%, #fff 0 3px, transparent 4px), color-mix(in srgb, var(--topic-color) 55%, transparent); }
.chem-bubbles.o2 { right:19%; background:radial-gradient(circle at 60% 22%, #fff 0 3px, transparent 4px), color-mix(in srgb, #fb7185 60%, transparent); }
.chem-label { position:absolute; bottom:8px; z-index:3; font-weight:900; font-size:12px; }
.chem-label.left { left:28%; }
.chem-label.right { right:28%; }
.chem-readout,
.plate-summary {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chem-readout span,
.plate-summary span {
  border:1px solid rgba(255,255,255,.1);
  background:color-mix(in srgb, var(--topic-color) 12%, rgba(255,255,255,.04));
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--c-text-soft);
}
.moon-lab { grid-template-columns: minmax(150px, 1fr) minmax(132px, .72fr); align-items:center; }
.orbit-map { position:relative; min-height:190px; border-radius:24px; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 58%); overflow:hidden; }
.orbit-path { position:absolute; inset:23% 15%; border:1px dashed color-mix(in srgb, var(--topic-color) 40%, rgba(255,255,255,.22)); border-radius:50%; }
.sun,.earth,.moon-dot { position:absolute; display:grid; place-items:center; border-radius:999px; font-weight:900; }
.sun { left:12%; top:42%; width:38px; height:38px; color:#c49a62; background:rgba(245,158,11,.12); }
.earth { left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; background:color-mix(in srgb, var(--topic-color) 38%, #0f172a); color:white; }
.moon-dot { width:34px; height:34px; transform:translate(-50%,-50%); background:#e5e7eb; color:#111827; box-shadow:0 0 24px rgba(255,255,255,.28); }
.moon-face { display:grid; justify-items:center; gap:8px; color:var(--c-text-soft); text-align:center; }
.moon-disc { position:relative; width:92px; height:92px; border-radius:50%; background:#e5e7eb; overflow:hidden; box-shadow:0 0 28px rgba(255,255,255,.22); }
.moon-shadow { position:absolute; inset:0; border-radius:50%; background:#111827; opacity:.86; transform-origin:center; transition:transform .22s ease; }
.poetry-lab { grid-template-columns: minmax(145px, .9fr) minmax(0, 1fr); align-items:stretch; }
.poem-paper { border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:16px; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.poem-lines { display:grid; gap:7px; margin-top:12px; font-size:17px; line-height:1.7; letter-spacing:.12em; }
.poem-lines span { padding:5px 8px; border-radius:12px; background:rgba(255,255,255,.04); }
.poem-layers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.poem-layers button { border:1px solid color-mix(in srgb, var(--layer-color) 45%, transparent); background:color-mix(in srgb, var(--layer-color) 12%, transparent); color:var(--c-text); border-radius:14px; padding:9px; font-weight:800; }
.poem-layers button.is-active { background:color-mix(in srgb, var(--layer-color) 34%, transparent); }
.poem-note { border:1px solid; border-radius:18px; padding:12px; display:grid; gap:6px; color:var(--c-text-soft); }
.calorie-lab { grid-template-columns: minmax(132px,.72fr) minmax(0,1fr); align-items:center; }
.plate-visual { width:min(170px, 100%); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 14px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.18); }
.plate-visual > div { width:54%; aspect-ratio:1; border-radius:50%; background:var(--c-surface); display:grid; place-items:center; line-height:1; }
.plate-visual b { font-size:24px; }
.plate-visual span { font-size:11px; color:var(--c-text-soft); }
.plate-list { display:grid; gap:8px; }
.plate-list label { display:grid; grid-template-columns:46px 1fr 54px; gap:8px; align-items:center; color:var(--c-text-soft); font-size:12px; }
.meme-scenes,.uqc-presets { display:flex; flex-wrap:wrap; gap:8px; }
.meme-scenes button,.uqc-presets button,.uqc-result button { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:var(--c-text); border-radius:999px; padding:7px 10px; font-weight:800; }
.meme-scenes button.is-active { background:color-mix(in srgb, var(--topic-color) 30%, transparent); }
.meme-card { border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:15px; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); display:grid; gap:8px; }
.meme-card span { color:var(--c-text-soft); font-size:12px; }
.meme-meter { height:12px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.meme-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b86b78,#c49a62,#22c55e); }
.uqc-row { display:grid; grid-template-columns:minmax(74px,.7fr) minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; }
.uqc-row input,.uqc-row select { width:100%; min-width:0; }
.uqc-result { border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:color-mix(in srgb, var(--topic-color) 10%, transparent); }
.uqc-result b { font-size:24px; color:var(--topic-color); }
[data-theme="light"] .chem-readout span,
[data-theme="light"] .plate-summary span,
[data-theme="light"] .poem-paper,
[data-theme="light"] .poem-note,
[data-theme="light"] .meme-card,
[data-theme="light"] .uqc-result {
  background:#fff;
  border-color:rgba(15,23,42,.1);
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
[data-theme="light"] .orbit-map { background:#f8fafc; }
[data-theme="light"] .poem-lines span { background:#f8fafc; }
@media (max-width: 720px) {
  .chem-lab,.moon-lab,.poetry-lab,.calorie-lab { grid-template-columns:1fr; }
  .chem-beaker,.orbit-map { min-height:170px; }
  .plate-visual { justify-self:center; max-width:160px; }
  .uqc-row { grid-template-columns:1fr; }
  .uqc-row > span { display:none; }
}

/* === 20260606 final subsite space-utilization guard ===
   目标：防止知识卡/路径卡/演示卡在部分浏览器或缓存组合下被压成窄文本列。
   原则：桌面充分利用横向空间；文字必须横向成段阅读；移动端再自然单列。
*/
.topic-knowledge,
.topic-path,
.topic-demos,
.topic-lesson {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.info-grid,
.path-list,
.demo-grid {
  width: 100%;
  min-width: 0;
}
.info-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.info-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
  min-width: 0;
  min-height: 124px;
  padding: clamp(18px, 1.8vw, 24px) !important;
  overflow: hidden;
}
.info-card .info-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  font-size: 1.45rem;
}
.info-card > b,
.info-card > span:not(.info-icon) {
  grid-column: 2 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-break: auto;
  text-align: left;
}
.info-card > b {
  align-self: end;
  margin: 0 !important;
  line-height: 1.28;
}
.info-card > span:not(.info-icon) {
  display: block;
  align-self: start;
  line-height: 1.7;
  color: var(--c-text-soft);
}
.path-list {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.path-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  min-width: 0;
  min-height: 118px;
  align-content: center;
  align-items: center;
  overflow: hidden;
}
.path-item .path-why,
.path-item b {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.path-item .path-why {
  grid-column: 1 / -1;
  min-width: 0 !important;
  line-height: 1.5;
}
.path-item b {
  grid-column: 1;
  line-height: 1.35;
}
.path-item .path-arrow {
  grid-column: 2;
  grid-row: 2;
}
.demo-card,
.demo-card * {
  box-sizing: border-box;
}
.demo-card p,
.demo-card span,
.demo-card b,
.demo-card h3,
.demo-insight,
.demo-desc {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal;
}
.demo-stage {
  overflow: hidden auto;
}
@media (max-width: 1180px) {
  .info-grid,
  .path-list,
  .demo-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}
@media (max-width: 720px) {
  .info-grid,
  .path-list,
  .demo-grid {
    grid-template-columns: 1fr;
  }
  .info-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: auto;
  }
  .path-item {
    min-height: auto;
  }
}


/* subsite case library + local navigation patch */
.subsite-tabs {
  width: min(1180px, calc(100% - 32px));
  margin: -0.35rem auto 0.65rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  overflow-x: auto;
  padding: 0.35rem 0.15rem 0.45rem;
  scrollbar-width: none;
}
.subsite-tabs::-webkit-scrollbar { display: none; }
.subsite-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.45rem 0.82rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  text-decoration: none;
  font-size: 0.88rem;
  box-shadow: var(--shadow-soft);
}
.subsite-tabs a:hover,
.subsite-tabs a:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--topic-color) 60%, var(--border));
  background: color-mix(in srgb, var(--topic-color) 14%, var(--panel));
}
.topic-cases,
.case-hero,
.case-library,
.case-detail {
  width: min(1180px, calc(100% - 32px));
  margin: 1.4rem auto;
}
.topic-cases {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--topic-color) 10%, var(--panel)), var(--panel));
  box-shadow: var(--shadow-soft);
}
.case-preview-grid,
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.case-preview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-card {
  min-width: 0;
  min-height: 172px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 90%, var(--topic-color) 10%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.case-card:hover,
.case-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--topic-color) 62%, var(--border));
}
.case-index {
  width: fit-content;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  color: var(--topic-color);
  background: color-mix(in srgb, var(--topic-color) 14%, transparent);
  font-weight: 800;
  font-size: 0.78rem;
}
.case-tag { color: var(--muted); font-size: 0.84rem; }
.case-card b { font-size: 1.02rem; line-height: 1.35; writing-mode: horizontal-tb; }
.case-card span:last-child {
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: break-word;
  writing-mode: horizontal-tb;
}
.section-actions { display: flex; justify-content: center; margin-top: 1rem; }
.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 1rem;
  align-items: stretch;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border: 1px solid var(--border);
  border-radius: 30px;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--topic-color) 18%, transparent), transparent 42%), var(--panel);
  box-shadow: var(--shadow-soft);
}
.case-hero h1 { margin: 0.55rem 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.04; }
.case-hero-panel {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 36%, var(--border));
  background: color-mix(in srgb, var(--topic-color) 12%, var(--panel));
}
.case-hero-panel b { font-size: 2rem; }
.case-hero-panel span { color: var(--muted); line-height: 1.7; }
.case-detail {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.case-demo-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 52%, var(--panel));
}
.case-demo-stage > * { width: min(100%, 860px); }
.case-workbook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.case-step,
.case-takeaway {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 88%, var(--topic-color) 12%);
}
.case-step b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07111f;
  background: var(--topic-color);
}
.case-step span,
.case-takeaway span { color: var(--muted); line-height: 1.75; writing-mode: horizontal-tb; }
.case-detail-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.primary-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--border);
}
.primary-btn { color: #07111f; background: var(--topic-color); border-color: transparent; font-weight: 800; }
.ghost-btn { color: var(--text); background: color-mix(in srgb, var(--panel) 88%, transparent); }
html[data-theme="light"] .topic-cases,
html[data-theme="light"] .case-card,
html[data-theme="light"] .case-hero,
html[data-theme="light"] .case-detail,
html[data-theme="light"] .case-step,
html[data-theme="light"] .case-takeaway,
html[data-theme="light"] .subsite-tabs a { background-color: #fff; }
@media (max-width: 980px) {
  .case-preview-grid,
  .case-grid,
  .case-workbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .subsite-tabs { width: min(100% - 20px, 1180px); }
  .topic-cases,
  .case-hero,
  .case-library,
  .case-detail { width: min(100% - 20px, 1180px); }
  .case-preview-grid,
  .case-grid,
  .case-workbook { grid-template-columns: 1fr; }
  .case-card { min-height: auto; }
  .case-demo-stage { min-height: 280px; padding: 0.75rem; }
  .case-detail-actions { flex-direction: column; }
  .case-detail-actions a { width: 100%; }
}

/* case library density + detail richness patch */
.case-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.case-filter-strip span,
.case-group {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, var(--border));
  color: color-mix(in srgb, var(--topic-color) 74%, var(--text));
  background: color-mix(in srgb, var(--topic-color) 10%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}
.case-card {
  grid-template-rows: auto auto auto 1fr auto;
  min-height: 206px;
}
.case-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.case-card span,
.case-card b,
.case-card small {
  min-width: 0;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  word-break: normal;
  overflow-wrap: break-word;
}
.case-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: 1rem;
  align-items: stretch;
}
.case-side-panel {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--topic-color) 26%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--topic-color) 9%, var(--panel));
  box-shadow: var(--shadow-soft);
}
.case-side-panel b { color: var(--text); }
.case-side-panel p,
.case-side-panel li {
  color: var(--muted);
  line-height: 1.75;
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: break-word;
}
.case-side-panel ol { margin: 0; padding-left: 1.25rem; }
.case-detail h2 { margin: 0 0 0.45rem; }
.case-workbook {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.case-step {
  min-height: 146px;
}
html[data-theme="light"] .case-filter-strip span,
html[data-theme="light"] .case-group,
html[data-theme="light"] .case-side-panel {
  background-color: #ffffff;
}
@media (max-width: 1120px) {
  .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .case-detail-grid { grid-template-columns: 1fr; }
  .case-grid,
  .case-preview-grid,
  .case-workbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .case-grid,
  .case-preview-grid,
  .case-workbook { grid-template-columns: 1fr; }
  .case-card { min-height: auto; }
  .case-filter-strip { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; }
  .case-filter-strip span { flex: 0 0 auto; }
}


/* === 20260606 true white light theme guard === */
:root {
  --bg: var(--c-bg);
  --panel: var(--c-bg-card);
  --text: var(--c-text);
  --muted: var(--c-text-soft);
  --border: var(--c-border);
  --shadow-soft: var(--shadow-card);
}
html[data-theme="light"],
[data-theme="light"] {
  color-scheme: light !important;
  --c-bg: #ffffff !important;
  --c-bg-soft: #ffffff !important;
  --c-bg-card: #ffffff !important;
  --c-text: #111827 !important;
  --c-text-soft: #475569 !important;
  --c-text-dim: #64748b !important;
  --c-border: #d8e0ea !important;
  --c-border-soft: #edf2f7 !important;
  --bg: #ffffff !important;
  --panel: #ffffff !important;
  --text: #111827 !important;
  --muted: #475569 !important;
  --border: #d8e0ea !important;
  --shadow-card: 0 12px 32px rgba(15, 23, 42, .07) !important;
  --shadow-hover: 0 18px 44px rgba(15, 23, 42, .12) !important;
  --shadow-soft: 0 10px 26px rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"],
html[data-theme="light"] body,
[data-theme="light"] body,
[data-theme="light"] main {
  background: #ffffff !important;
  color: #111827 !important;
}
[data-theme="light"] body::before,
[data-theme="light"] body::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}
[data-theme="light"] site-nav,
[data-theme="light"] site-footer,
[data-theme="light"] .topic-hero,
[data-theme="light"] .hero-grid,
[data-theme="light"] .topic-lesson,
[data-theme="light"] .lesson-steps,
[data-theme="light"] .lesson-steps li,
[data-theme="light"] .demo-card,
[data-theme="light"] .demo-stage,
[data-theme="light"] .demo-insight,
[data-theme="light"] .demo-tools button,
[data-theme="light"] .demo-note-text,
[data-theme="light"] .site-progress-card,
[data-theme="light"] .info-card,
[data-theme="light"] .path-item,
[data-theme="light"] .site-loop-card,
[data-theme="light"] .site-loop-actions a,
[data-theme="light"] .site-loop-actions button,
[data-theme="light"] .share-fab,
[data-theme="light"] .share-panel__card,
[data-theme="light"] .share-panel__close,
[data-theme="light"] .share-url input,
[data-theme="light"] .backup-panel__card,
[data-theme="light"] .backup-panel__close,
[data-theme="light"] .backup-import,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .topic-cases,
[data-theme="light"] .case-hero,
[data-theme="light"] .case-hero-panel,
[data-theme="light"] .case-library,
[data-theme="light"] .case-card,
[data-theme="light"] .case-detail,
[data-theme="light"] .case-demo-stage,
[data-theme="light"] .case-workbook,
[data-theme="light"] .case-step,
[data-theme="light"] .case-takeaway,
[data-theme="light"] .case-side-panel,
[data-theme="light"] .case-filter-strip span,
[data-theme="light"] .case-group,
[data-theme="light"] .subsite-tabs a,
[data-theme="light"] .chart-inputs input,
[data-theme="light"] .demo-kpi span,
[data-theme="light"] .chart-summary span,
[data-theme="light"] .flip-progress,
[data-theme="light"] .tl-summary,
[data-theme="light"] .uc-formula,
[data-theme="light"] .relation-detail,
[data-theme="light"] .chem-readout span,
[data-theme="light"] .plate-summary span,
[data-theme="light"] .poem-paper,
[data-theme="light"] .poem-note,
[data-theme="light"] .meme-card,
[data-theme="light"] .uqc-result {
  background-color: #ffffff !important;
}
[data-theme="light"] .orbit-map,
[data-theme="light"] .poem-lines span {
  background-color: #ffffff !important;
}


/* Premium case pages · richer interaction and visual rhythm */
.case-detail-premium {
  padding-top: clamp(18px, 4vw, 42px);
}
.premium-case-shell {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}
.premium-case-lead {
  max-width: 920px;
}
.premium-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 42%, transparent);
  border-radius: 999px;
  color: var(--topic-color);
  background: color-mix(in srgb, var(--topic-color) 12%, transparent);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .04em;
}
.premium-case-lead h2 {
  margin: 14px 0 10px;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.04;
}
.premium-case-lead p {
  margin: 0;
  color: var(--c-muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.82;
}
.premium-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
  gap: clamp(18px, 2.6vw, 32px);
  align-items: stretch;
}
.premium-demo-panel,
.premium-side-lab,
.premium-explain-grid article {
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, var(--c-border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--topic-color) 15%, transparent), transparent 34%),
    color-mix(in srgb, var(--c-card) 92%, transparent);
  box-shadow: var(--shadow-card);
}
.premium-demo-panel,
.premium-side-lab {
  padding: clamp(16px, 2vw, 24px);
  min-width: 0;
}
.premium-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.premium-panel-head > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--topic-color);
  color: #06101e;
  font-weight: 950;
}
.premium-panel-head b {
  display: block;
  font-size: 18px;
}
.premium-panel-head small {
  display: block;
  color: var(--c-muted);
  margin-top: 2px;
}
.premium-stage {
  min-height: clamp(300px, 36vw, 460px);
  display: grid;
  align-items: stretch;
  overflow: hidden;
}
.premium-stage > * {
  min-width: 0;
}
.premium-observe {
  margin-top: 16px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--topic-color) 10%, var(--c-bg-soft));
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, transparent);
}
.premium-observe b { color: var(--topic-color); }
.premium-observe span {
  color: var(--c-muted);
  line-height: 1.7;
}
.premium-side-lab {
  display: grid;
  align-content: start;
  gap: 16px;
}
.premium-slider-card,
.premium-choice-card,
.premium-check-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--c-bg-soft) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--topic-color) 18%, var(--c-border));
}
.premium-slider-card label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}
.premium-slider-card input[type="range"] {
  width: 100%;
  accent-color: var(--topic-color);
}
.premium-meter,
.premium-progress {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-border) 55%, transparent);
}
.premium-meter i,
.premium-progress i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--topic-color), color-mix(in srgb, var(--topic-color) 55%, #ffffff));
  transition: width .2s ease;
}
.premium-slider-card p,
.premium-choice-card p {
  margin: 0;
  color: var(--c-muted);
  line-height: 1.65;
}
.premium-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.premium-choice-row button {
  border: 1px solid color-mix(in srgb, var(--topic-color) 26%, var(--c-border));
  background: color-mix(in srgb, var(--topic-color) 8%, transparent);
  color: var(--c-text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}
.premium-choice-row button.is-active,
.premium-choice-row button:hover {
  background: var(--topic-color);
  color: #06101e;
}
.premium-check-card label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--c-text);
  line-height: 1.55;
}
.premium-check-card input {
  margin-top: 4px;
  accent-color: var(--topic-color);
}
.premium-progress {
  height: 26px;
  display: flex;
  align-items: center;
}
.premium-progress span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--c-text);
}
.premium-explain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.premium-explain-grid article {
  padding: 18px;
}
.premium-explain-grid span {
  color: var(--topic-color);
  font-weight: 950;
}
.premium-explain-grid p {
  margin: 8px 0 0;
  color: var(--c-muted);
  line-height: 1.7;
}
[data-theme="light"] .premium-demo-panel,
[data-theme="light"] .premium-side-lab,
[data-theme="light"] .premium-explain-grid article,
[data-theme="light"] .premium-slider-card,
[data-theme="light"] .premium-choice-card,
[data-theme="light"] .premium-check-card,
[data-theme="light"] .premium-observe {
  background-color: #ffffff !important;
}
@media (max-width: 980px) {
  .premium-layout { grid-template-columns: 1fr; }
  .premium-stage { min-height: 300px; }
  .premium-explain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .premium-demo-panel,
  .premium-side-lab { border-radius: 22px; padding: 14px; }
  .premium-stage { min-height: 240px; }
  .premium-choice-row { display: grid; grid-template-columns: 1fr; }
}

/* === P1-1 premium-case 视觉 polish (2026-06-06) === */

/* 容器级别:channel 色顶部描边 + 整体呼吸感 */
.premium-case-shell {
  position: relative;
  padding-top: 6px;
  margin-top: 4px;
}
.premium-case-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--topic-color), color-mix(in srgb, var(--topic-color) 40%, transparent));
  border-radius: 999px;
  opacity: .85;
}

/* 头部"精品案例"徽章:小光晕 */
.premium-eyebrow {
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.premium-eyebrow:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--topic-color) 70%, transparent);
  background: color-mix(in srgb, var(--topic-color) 18%, transparent);
}

/* 面板卡片:hover 微效果 */
.premium-demo-panel,
.premium-side-lab {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.premium-demo-panel:hover,
.premium-side-lab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--topic-color) 16%, transparent);
  border-color: color-mix(in srgb, var(--topic-color) 45%, var(--c-border));
}

/* 观察提示:channel 色左侧条 + 标题字号 */
.premium-observe {
  border-left: 3px solid var(--topic-color);
  padding-left: 18px;
}
.premium-observe b {
  font-size: 1.05em;
  letter-spacing: .01em;
}

/* 滑块:value 显示优化,thumb 着色 */
.premium-slider-card label > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 1.02rem;
}
.premium-slider-card input[type="range"] {
  height: 28px;
  cursor: pointer;
}
.premium-slider-card input[type="range"]::-webkit-slider-thumb {
  background: var(--topic-color);
  border: 2px solid color-mix(in srgb, var(--topic-color) 30%, white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--topic-color) 30%, transparent);
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.premium-slider-card input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--topic-color) 50%, transparent);
}
.premium-slider-card input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}
.premium-slider-card input[type="range"]::-moz-range-thumb {
  background: var(--topic-color);
  border: 2px solid color-mix(in srgb, var(--topic-color) 30%, white);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--topic-color) 30%, transparent);
  cursor: grab;
}
.premium-slider-card input[type="range"]:focus-visible {
  outline: 2px solid var(--topic-color);
  outline-offset: 4px;
  border-radius: 4px;
}

/* 选择按钮:hover/focus/active 全套反馈 */
.premium-choice-row button {
  transition: background .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease, border-color .18s ease;
}
.premium-choice-row button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--topic-color) 24%, transparent);
  border-color: color-mix(in srgb, var(--topic-color) 60%, var(--c-border));
}
.premium-choice-row button:focus-visible {
  outline: 2px solid var(--topic-color);
  outline-offset: 2px;
}
.premium-choice-row button:active {
  transform: translateY(0) scale(.98);
}
.premium-choice-row button.is-active {
  font-weight: 950;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--topic-color) 30%, transparent);
}

/* 复选框:check 动画 + focus ring */
.premium-check-card label {
  padding: 6px 8px;
  border-radius: 12px;
  margin: -6px -8px;
  transition: background .18s ease;
  cursor: pointer;
}
.premium-check-card label:hover {
  background: color-mix(in srgb, var(--topic-color) 8%, transparent);
}
.premium-check-card input[type="checkbox"] {
  transition: transform .15s ease;
  cursor: pointer;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.premium-check-card input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--topic-color);
  outline-offset: 2px;
  border-radius: 3px;
}
.premium-check-card input[type="checkbox"]:checked {
  transform: scale(1.12);
  animation: premium-check-bounce .35s ease;
}
@keyframes premium-check-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1.12); }
}

/* 进度条完成态 + 高亮 */
.premium-progress.is-complete,
.premium-meter.is-complete {
  background: color-mix(in srgb, var(--topic-color) 32%, transparent);
}
.premium-progress.is-complete i,
.premium-meter.is-complete i {
  background: linear-gradient(90deg, var(--topic-color), color-mix(in srgb, var(--topic-color) 70%, white));
  box-shadow: 0 0 14px color-mix(in srgb, var(--topic-color) 45%, transparent);
  animation: premium-progress-glow 1.6s ease-in-out infinite;
}
@keyframes premium-progress-glow {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--topic-color) 45%, transparent); }
  50% { box-shadow: 0 0 22px color-mix(in srgb, var(--topic-color) 65%, transparent); }
}

/* 解释卡:hover 微反馈 */
.premium-explain-grid article {
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  cursor: default;
}
.premium-explain-grid article:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--topic-color) 55%, var(--c-border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--topic-color) 14%, transparent);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--topic-color) 22%, transparent), transparent 42%),
    color-mix(in srgb, var(--c-card) 92%, transparent);
}
.premium-explain-grid article span {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82em;
}

/* 面板数字徽章:hover 反馈 */
.premium-panel-head > span {
  transition: transform .2s ease, box-shadow .2s ease;
}
.premium-panel-head:hover > span {
  transform: rotate(-3deg) scale(1.06);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--topic-color) 35%, transparent);
}

/* 轻主题 polish:border + 渐变修正 */
[data-theme="light"] .premium-case-shell::before {
  opacity: 1;
}
[data-theme="light"] .premium-observe {
  background: color-mix(in srgb, var(--topic-color) 6%, #ffffff);
  border-color: color-mix(in srgb, var(--topic-color) 30%, #d6dee8);
}
[data-theme="light"] .premium-check-card label:hover {
  background: color-mix(in srgb, var(--topic-color) 5%, #ffffff);
}
[data-theme="light"] .premium-explain-grid article:hover {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--topic-color) 16%, transparent), transparent 42%),
    #ffffff;
}

/* 极窄屏(<480px):更紧凑 */
@media (max-width: 480px) {
  .premium-case-lead h2 { font-size: 28px; line-height: 1.1; }
  .premium-panel-head b { font-size: 16px; }
  .premium-panel-head > span { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
  .premium-check-card input[type="checkbox"] { width: 16px; height: 16px; }
  .premium-explain-grid { gap: 10px; }
  .premium-explain-grid article { padding: 14px; }
}

/* prefers-reduced-motion:收敛所有动画/过渡 */
@media (prefers-reduced-motion: reduce) {
  .premium-demo-panel,
  .premium-side-lab,
  .premium-choice-row button,
  .premium-check-card input,
  .premium-check-card label,
  .premium-explain-grid article,
  .premium-meter,
  .premium-meter i,
  .premium-progress,
  .premium-progress i,
  .premium-eyebrow,
  .premium-panel-head > span,
  .premium-slider-card input[type="range"]::-webkit-slider-thumb {
    transition: none !important;
    animation: none !important;
  }
  .premium-choice-row button:hover,
  .premium-explain-grid article:hover,
  .premium-demo-panel:hover,
  .premium-side-lab:hover,
  .premium-eyebrow:hover,
  .premium-panel-head:hover > span {
    transform: none !important;
  }
  .premium-check-card input[type="checkbox"]:checked {
    transform: scale(1.05);
  }
}

/* RTL 镜像:观察提示条换右侧 */
[dir="rtl"] .premium-observe {
  border-left: 0;
  border-right: 3px solid var(--topic-color);
  padding-left: 16px;
  padding-right: 18px;
}
[dir="rtl"] .premium-case-shell::before {
  background: linear-gradient(270deg, var(--topic-color), color-mix(in srgb, var(--topic-color) 40%, transparent));
}

/* 打印:隐藏控件,只保留内容 */
@media print {
  .premium-side-lab,
  .premium-choice-row,
  .premium-slider-card input[type="range"],
  .premium-check-card input[type="checkbox"],
  .floating-tools,
  .premium-meter,
  .premium-progress {
    display: none !important;
  }
  .premium-layout { grid-template-columns: 1fr; }
  .premium-case-shell::before { display: none; }
  .premium-demo-panel,
  .premium-side-lab,
  .premium-explain-grid article {
    box-shadow: none;
    border: 1px solid #ccc;
    background: #fff !important;
    break-inside: avoid;
  }
  .premium-case-shell a { color: #000; text-decoration: underline; }
}

/* === 20260606 unified floating tools: keep support/coffee separate, group other FABs === */
.share-fab,
.backup-fab {
  display: none !important;
}
.floating-tools {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 980;
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}
.floating-tools__toggle,
.floating-tools__menu button {
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--topic-color) 38%, var(--c-border));
  background: color-mix(in srgb, var(--c-bg-card) 94%, transparent);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
}
.floating-tools__toggle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #06101e;
  background: var(--topic-color);
  border-color: var(--topic-color);
  font-weight: 950;
  font-size: 20px;
}
.floating-tools__menu {
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.floating-tools.is-open .floating-tools__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floating-tools__menu button {
  min-width: 128px;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 14px 0 10px;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-weight: 850;
}
.floating-tools__menu span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--topic-color) 18%, transparent);
  color: var(--topic-color);
  font-weight: 950;
}
.floating-tools__menu em {
  font-style: normal;
  white-space: nowrap;
}
.floating-tools__toggle:focus-visible,
.floating-tools__menu button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--topic-color) 50%, transparent);
  outline-offset: 3px;
}
[data-theme="light"] .floating-tools__menu button {
  background: #ffffff !important;
  color: #111827 !important;
}
@media (max-width: 720px) {
  .floating-tools {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .floating-tools__toggle {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .floating-tools__menu button {
    min-width: 116px;
    min-height: 40px;
    font-size: 13px;
  }
}

/* ============== Flip challenge upgrade: guess → reveal → apply ============== */
flip-grid .flip-brief {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--topic-color) 10%, var(--c-bg-card));
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, var(--c-border-soft));
}
flip-grid .flip-brief__badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 32px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  background: linear-gradient(135deg, var(--topic-color), color-mix(in srgb, var(--topic-color) 52%, #ffffff));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--topic-color) 22%, transparent);
}
flip-grid .flip-brief b {
  display: block;
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.35;
}
flip-grid .flip-brief p {
  margin: 3px 0 0;
  color: var(--c-text-soft);
  font-size: 12px;
  line-height: 1.55;
}
flip-grid .flip-progress {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  color: var(--c-text-soft);
  font-size: 12px;
  background: color-mix(in srgb, var(--topic-color) 9%, var(--c-bg-soft));
  border: 1px solid var(--c-border-soft);
}
flip-grid .flip-card {
  aspect-ratio: 1.18 / 1;
  min-height: 150px;
}
flip-grid .flip-front,
flip-grid .flip-back {
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 14px;
}
flip-grid .flip-front small,
flip-grid .flip-back small {
  color: var(--topic-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
flip-grid .flip-front b,
flip-grid .flip-back b {
  color: var(--c-text);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.36;
}
flip-grid .flip-front em,
flip-grid .flip-back em {
  display: block;
  max-width: 96%;
  color: var(--c-text-soft);
  font-style: normal;
  font-size: 12px;
  line-height: 1.55;
}
flip-grid .flip-front {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--topic-color) 20%, transparent), transparent 52%),
    var(--c-bg-card);
}
flip-grid .flip-back {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 18%, var(--c-bg-card)), var(--c-bg-card));
}
flip-grid .flip-coach {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--c-text-soft);
  background: color-mix(in srgb, var(--topic-color) 8%, var(--c-bg-card));
  border: 1px dashed color-mix(in srgb, var(--topic-color) 42%, var(--c-border-soft));
}
flip-grid .flip-coach b {
  display: block;
  color: var(--c-text);
  margin-bottom: 4px;
  font-size: 13px;
}
flip-grid .flip-coach p {
  margin: 0;
  line-height: 1.65;
  font-size: 13px;
}
html[data-theme="light"] flip-grid .flip-brief,
html[data-theme="light"] flip-grid .flip-progress,
html[data-theme="light"] flip-grid .flip-coach,
html[data-theme="light"] flip-grid .flip-front,
html[data-theme="light"] flip-grid .flip-back {
  background-color: #fff !important;
}
@media (max-width: 640px) {
  flip-grid .flip-grid-inner { grid-template-columns: 1fr; }
  flip-grid .flip-card { min-height: 132px; aspect-ratio: auto; }
  flip-grid .flip-brief { grid-template-columns: 1fr; }
}

/* Distinctive case interactions · category-specific, not all cards */
.hotspot-lab,.sorter-lab,.route-lab,.story-lab,.gauge-lab,.recipe-lab{
  min-height:280px;
  border-radius:22px;
  border:1px solid color-mix(in srgb,var(--topic-color) 22%,var(--c-border-soft));
  background:linear-gradient(145deg,color-mix(in srgb,var(--topic-color) 10%,var(--c-bg-card)),var(--c-bg-card));
  padding:16px;
  color:var(--c-text);
  overflow:hidden;
}
.hotspot-lab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(180px,.8fr);gap:14px;align-items:stretch}
.hotspot-canvas{position:relative;min-height:230px;border-radius:20px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--topic-color) 20%,transparent),transparent 58%),color-mix(in srgb,var(--c-bg-soft) 80%,transparent);border:1px solid var(--c-border-soft)}
.hotspot-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:999px;display:grid;place-items:center;text-align:center;font-weight:900;font-size:14px;background:var(--topic-color);color:#06111f;box-shadow:0 18px 42px color-mix(in srgb,var(--topic-color) 32%,transparent)}
.hotspot-dot{position:absolute;transform:translate(-50%,-50%);border:0;border-radius:999px;padding:8px 10px;background:var(--c-bg-card);color:var(--c-text);box-shadow:0 10px 26px rgba(0,0,0,.22);cursor:pointer;border:1px solid color-mix(in srgb,var(--topic-color) 28%,var(--c-border-soft));font-weight:800;font-size:12px}
.hotspot-dot.is-active{background:var(--topic-color);color:#06111f}.hotspot-detail,.route-detail{border-radius:18px;padding:16px;background:color-mix(in srgb,var(--topic-color) 8%,var(--c-bg-card));border:1px solid var(--c-border-soft);display:flex;flex-direction:column;gap:8px;justify-content:center}.hotspot-detail span,.route-detail span,.sorter-question span,.story-stage span{color:var(--topic-color);font-size:12px;font-weight:900;letter-spacing:.08em}.hotspot-detail b,.route-detail b,.sorter-question b,.story-stage b{font-size:18px}.hotspot-detail p,.route-detail p,.story-stage p{margin:0;color:var(--c-text-soft);line-height:1.7}.hotspot-detail small,.route-detail small{color:var(--c-muted);line-height:1.6}
.sorter-lab{display:grid;gap:12px}.sorter-question{border-radius:18px;padding:14px;background:color-mix(in srgb,var(--topic-color) 8%,var(--c-bg-card));border:1px solid var(--c-border-soft)}.sorter-question p{margin:6px 0 0;color:var(--c-text-soft)}.sorter-buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sorter-buckets button,.sorter-strip button{border:1px solid var(--c-border-soft);border-radius:16px;background:var(--c-bg-card);color:var(--c-text);padding:12px;cursor:pointer;text-align:left}.sorter-buckets button:hover,.sorter-strip button.is-active{border-color:var(--topic-color);box-shadow:0 10px 24px color-mix(in srgb,var(--topic-color) 16%,transparent)}.sorter-buckets small{display:block;color:var(--c-muted);margin-top:4px}.sorter-feedback{border-radius:16px;padding:12px;color:var(--c-text-soft);background:var(--c-bg-soft);border:1px dashed var(--c-border-soft)}.sorter-feedback.is-ok{color:var(--c-success);border-color:color-mix(in srgb,var(--c-success) 45%,var(--c-border-soft))}.sorter-feedback.is-warn{color:#c49a62;border-color:color-mix(in srgb,#c49a62 45%,var(--c-border-soft))}.sorter-strip{display:flex;gap:8px;overflow:auto;padding-bottom:2px}.sorter-strip button{white-space:nowrap;text-align:center;padding:8px 11px;border-radius:999px;font-size:12px}
.route-lab{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr);gap:14px}.route-map{position:relative;min-height:240px;border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--topic-color) 9%,transparent),transparent),var(--c-bg-soft);border:1px solid var(--c-border-soft)}.route-map svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}.route-map line{stroke:var(--topic-color);stroke-width:1.8;stroke-dasharray:4 4;opacity:.55}.route-stop{position:absolute;z-index:1;transform:translate(-50%,-50%);border:0;background:var(--c-bg-card);color:var(--c-text);border-radius:16px;padding:8px 10px;box-shadow:0 10px 24px rgba(0,0,0,.2);cursor:pointer;border:1px solid var(--c-border-soft);display:flex;gap:6px;align-items:center}.route-stop i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:color-mix(in srgb,var(--topic-color) 24%,transparent);font-weight:900}.route-stop.is-active{border-color:var(--topic-color);background:color-mix(in srgb,var(--topic-color) 14%,var(--c-bg-card))}
.story-lab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(180px,.9fr);gap:14px}.story-stage{min-height:220px;border-radius:22px;padding:20px;background:radial-gradient(circle at top left,color-mix(in srgb,var(--topic-color) 22%,transparent),transparent 58%),var(--c-bg-soft);border:1px solid var(--c-border-soft);display:flex;flex-direction:column;justify-content:center;gap:10px}.story-stage b{font-size:22px}.story-stage em{font-style:normal;color:var(--topic-color);font-weight:800}.story-strip{display:grid;gap:9px}.story-strip button{border:1px solid var(--c-border-soft);border-radius:16px;background:var(--c-bg-card);color:var(--c-text);padding:11px;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.story-strip span{font-size:11px;color:var(--topic-color);font-weight:900}.story-strip button.is-active{border-color:var(--topic-color);background:color-mix(in srgb,var(--topic-color) 12%,var(--c-bg-card))}
.gauge-lab{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center}.gauge-ring{--score:50;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--topic-color) calc(var(--score)*1%), color-mix(in srgb,var(--c-bg-soft) 80%,transparent) 0);position:relative}.gauge-ring:after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--c-bg-card);box-shadow:inset 0 0 0 1px var(--c-border-soft)}.gauge-ring b,.gauge-ring span{position:relative;z-index:1}.gauge-ring b{font-size:36px}.gauge-ring span{margin-top:46px;color:var(--c-muted);font-size:12px}.gauge-controls{display:grid;gap:10px}.gauge-controls label,.recipe-controls label{display:grid;grid-template-columns:80px 1fr 38px;gap:10px;align-items:center;color:var(--c-text-soft);font-size:13px}.gauge-advice,.recipe-note{grid-column:1/-1;margin:0;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--topic-color) 8%,var(--c-bg-card));border:1px dashed color-mix(in srgb,var(--topic-color) 34%,var(--c-border-soft));color:var(--c-text-soft)}
.recipe-lab{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:center}.recipe-bowl{width:160px;height:160px;border-radius:42% 42% 48% 48%;background:conic-gradient(#60a5fa 0 25%,#7aae82 25% 52%,#c49a62 52% 78%,#fb7185 78% 100%);box-shadow:inset 0 -16px 0 rgba(0,0,0,.12),0 18px 38px rgba(0,0,0,.18);display:grid;place-items:center;position:relative}.recipe-bowl span{position:absolute;font-size:12px;font-weight:900;color:#07111f;background:rgba(255,255,255,.84);border-radius:999px;padding:4px 7px}.recipe-bowl span:nth-child(1){top:22%;left:18%}.recipe-bowl span:nth-child(2){top:28%;right:16%}.recipe-bowl span:nth-child(3){bottom:25%;left:24%}.recipe-bowl span:nth-child(4){bottom:18%;right:20%}.recipe-controls{display:grid;gap:10px}
html[data-theme="light"] .hotspot-lab,html[data-theme="light"] .sorter-lab,html[data-theme="light"] .route-lab,html[data-theme="light"] .story-lab,html[data-theme="light"] .gauge-lab,html[data-theme="light"] .recipe-lab{background:#fff!important}.demo-card:has(lab-hotspots),.demo-card:has(sorter-lab),.demo-card:has(route-planner),.demo-card:has(story-board),.demo-card:has(gauge-lab),.demo-card:has(recipe-mixer){min-height:620px}.demo-card:has(lab-hotspots) .demo-stage,.demo-card:has(sorter-lab) .demo-stage,.demo-card:has(route-planner) .demo-stage,.demo-card:has(story-board) .demo-stage,.demo-card:has(gauge-lab) .demo-stage,.demo-card:has(recipe-mixer) .demo-stage{min-height:310px}
@media (max-width:760px){.hotspot-lab,.route-lab,.story-lab,.gauge-lab,.recipe-lab{grid-template-columns:1fr}.sorter-buckets{grid-template-columns:1fr}.hotspot-canvas,.route-map{min-height:220px}.gauge-ring,.recipe-bowl{margin:auto}.gauge-controls label,.recipe-controls label{grid-template-columns:70px 1fr 34px}.demo-card:has(lab-hotspots),.demo-card:has(sorter-lab),.demo-card:has(route-planner),.demo-card:has(story-board),.demo-card:has(gauge-lab),.demo-card:has(recipe-mixer){min-height:auto}}


/* restrained dark theme patch · avoid neon/cyberpunk visual noise */
:root,
[data-theme="dark"] {
  --c-science:        #6aa6c8;
  --c-nature:         #65a987;
  --c-humanities:     #c49a62;
  --c-life:           #7aae82;
  --c-entertainment:  #b77aa6;
  --c-tools:          #8c7ab8;
  --c-accent:         #6aa6c8;
  --c-success:        #65a987;
  --c-warning:        #c49a62;
  --c-danger:         #b86b78;
  --c-bg:             #0b1020;
  --c-bg-soft:        #111827;
  --c-bg-card:        #172033;
  --c-text:           #eef3f8;
  --c-text-soft:      #b7c2cf;
  --c-text-dim:       #7d8a99;
  --c-border:         #2b3547;
  --c-border-soft:    #20293a;
  --shadow-card:      0 8px 28px rgba(0,0,0,0.22);
  --shadow-hover:     0 14px 36px rgba(0,0,0,0.30);
}
[data-theme="dark"] body::before,
:root:not([data-theme="light"]) body::before {
  opacity: .55;
}
[data-theme="dark"] .logo-mark,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .tool-fab__main,
[data-theme="dark"] .premium-progress i,
[data-theme="dark"] .meme-meter i {
  box-shadow: none !important;
}

/* Per-topic visual identity tokens · 2026-06-06
   32 个栏目不再只按六大频道共用颜色。每个子站通过 body data-topic-visual
   和 --topic-color / --topic-color-2 / --topic-ink 获得自己的视觉性格。
   未来真实元素图/插画资源可以按这些 visual key 逐步替换。 */
:root {
  --topic-color-2: color-mix(in srgb, var(--topic-color) 66%, #ffffff);
  --topic-ink: #07111f;
}
body[data-topic-visual] {
  --topic-soft: color-mix(in srgb, var(--topic-color) 10%, transparent);
  --topic-soft-2: color-mix(in srgb, var(--topic-color-2) 10%, transparent);
}
body[data-topic-visual] .topic-hero,
body[data-topic-visual] .case-hero {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--topic-color) 26%, var(--c-border-soft));
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--topic-color) 13%, transparent), transparent 36%),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--topic-color-2) 10%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 7%, var(--c-bg-card)), var(--c-bg-card));
}
body[data-topic-visual] .topic-hero::after,
body[data-topic-visual] .case-hero::after {
  content: attr(data-topic-symbol);
  position: absolute;
  right: clamp(18px, 5vw, 72px);
  top: clamp(18px, 5vw, 48px);
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 1;
  font-weight: 900;
  color: color-mix(in srgb, var(--topic-color) 14%, transparent);
  pointer-events: none;
  z-index: 0;
}
body[data-topic-visual] .topic-hero > *,
body[data-topic-visual] .case-hero > * { position: relative; z-index: 1; }
body[data-topic-visual] .topic-hero::before,
body[data-topic-visual] .case-hero::before {
  content: "";
  position: absolute;
  inset: auto 22px 18px auto;
  width: min(280px, 36vw);
  height: min(150px, 18vw);
  opacity: .34;
  pointer-events: none;
  background: linear-gradient(135deg, var(--topic-color), var(--topic-color-2));
  mask: var(--topic-mask, radial-gradient(circle at 50% 50%, #000 0 46%, transparent 47%));
  -webkit-mask: var(--topic-mask, radial-gradient(circle at 50% 50%, #000 0 46%, transparent 47%));
}
body[data-topic-visual="botanical"] { --topic-mask: radial-gradient(ellipse at 30% 55%, #000 0 28%, transparent 29%), radial-gradient(ellipse at 64% 38%, #000 0 24%, transparent 25%), linear-gradient(90deg, transparent 45%, #000 46% 52%, transparent 53%); }
body[data-topic-visual="habitat"] { --topic-mask: radial-gradient(circle at 22% 68%, #000 0 10%, transparent 11%), radial-gradient(circle at 40% 48%, #000 0 10%, transparent 11%), radial-gradient(circle at 58% 60%, #000 0 10%, transparent 11%), radial-gradient(ellipse at 74% 42%, #000 0 18%, transparent 19%); }
body[data-topic-visual="orbit"] { --topic-mask: radial-gradient(ellipse at 50% 50%, transparent 0 44%, #000 45% 48%, transparent 49%), radial-gradient(circle at 68% 35%, #000 0 8%, transparent 9%), radial-gradient(circle at 40% 58%, #000 0 5%, transparent 6%); }
body[data-topic-visual="terrain"] { --topic-mask: repeating-linear-gradient(160deg, #000 0 4px, transparent 5px 16px); }
body[data-topic-visual="specimen"] { --topic-mask: linear-gradient(90deg, #000 0 2px, transparent 2px 18px), linear-gradient(#000 0 2px, transparent 2px 18px); }
body[data-topic-visual="spark"] { --topic-mask: radial-gradient(circle at 50% 50%, #000 0 7%, transparent 8%), conic-gradient(from 0deg, #000 0 8deg, transparent 8deg 28deg); }
body[data-topic-visual="coordinate-grid"], body[data-topic-visual="chart-grid"], body[data-topic-visual="city-grid"] { --topic-mask: linear-gradient(90deg, #000 0 2px, transparent 2px 22px), linear-gradient(#000 0 2px, transparent 2px 22px); }
body[data-topic-visual="motion-lines"], body[data-topic-visual="route-map"] { --topic-mask: repeating-linear-gradient(145deg, #000 0 4px, transparent 5px 18px); }
body[data-topic-visual="molecule"] { --topic-mask: radial-gradient(circle at 22% 40%, #000 0 13%, transparent 14%), radial-gradient(circle at 54% 58%, #000 0 16%, transparent 17%), radial-gradient(circle at 78% 32%, #000 0 10%, transparent 11%), linear-gradient(25deg, transparent 0 42%, #000 43% 47%, transparent 48%), linear-gradient(145deg, transparent 0 50%, #000 51% 55%, transparent 56%); }
body[data-topic-visual="cell"] { --topic-mask: radial-gradient(ellipse at 50% 50%, #000 0 42%, transparent 43%), radial-gradient(circle at 54% 47%, transparent 0 13%, #000 14% 16%, transparent 17%); }
body[data-topic-visual="logic-nodes"], body[data-topic-visual="subculture-map"] { --topic-mask: radial-gradient(circle at 18% 32%, #000 0 8%, transparent 9%), radial-gradient(circle at 48% 62%, #000 0 8%, transparent 9%), radial-gradient(circle at 78% 36%, #000 0 8%, transparent 9%), linear-gradient(22deg, transparent 0 45%, #000 46% 49%, transparent 50%); }
body[data-topic-visual="market-curve"] { --topic-mask: radial-gradient(ellipse at 54% 66%, transparent 0 42%, #000 43% 46%, transparent 47%), linear-gradient(90deg, #000 0 2px, transparent 2px 20px); }
body[data-topic-visual="ink-ripple"] { --topic-mask: radial-gradient(ellipse at 42% 54%, transparent 0 28%, #000 29% 32%, transparent 33%), radial-gradient(ellipse at 62% 42%, #000 0 12%, transparent 13%); }
body[data-topic-visual="timeline"] { --topic-mask: linear-gradient(90deg, transparent 0 10%, #000 11% 89%, transparent 90%), radial-gradient(circle at 24% 50%, #000 0 7%, transparent 8%), radial-gradient(circle at 50% 50%, #000 0 7%, transparent 8%), radial-gradient(circle at 76% 50%, #000 0 7%, transparent 8%); }
body[data-topic-visual="bronze-vessel"] { --topic-mask: radial-gradient(ellipse at 50% 70%, #000 0 34%, transparent 35%), linear-gradient(90deg, transparent 0 20%, #000 21% 79%, transparent 80%); }
body[data-topic-visual="seal-script"] { --topic-mask: linear-gradient(#000 0 0), radial-gradient(circle at 50% 50%, transparent 0 42%, #000 43% 47%, transparent 48%); }
body[data-topic-visual="portrait-line"] { --topic-mask: radial-gradient(circle at 50% 30%, #000 0 16%, transparent 17%), radial-gradient(ellipse at 50% 74%, #000 0 30%, transparent 31%); }
body[data-topic-visual="plate"], body[data-topic-visual="flavor-wheel"] { --topic-mask: conic-gradient(#000 0 70deg, transparent 70deg 92deg, #000 92deg 190deg, transparent 190deg 214deg, #000 214deg 360deg); }
body[data-topic-visual="wellness-gauge"], body[data-topic-visual="quiz-steps"], body[data-topic-visual="sim-loop"] { --topic-mask: conic-gradient(#000 0 260deg, transparent 260deg 360deg); }
body[data-topic-visual="game-map"] { --topic-mask: linear-gradient(45deg, transparent 0 40%, #000 41% 45%, transparent 46%), radial-gradient(circle at 22% 72%, #000 0 7%, transparent 8%), radial-gradient(circle at 75% 30%, #000 0 7%, transparent 8%); }
body[data-topic-visual="meme-wave"] { --topic-mask: repeating-radial-gradient(circle at 20% 50%, #000 0 2px, transparent 3px 16px); }
body[data-topic-visual="chat-tags"] { --topic-mask: linear-gradient(90deg, #000 0 42%, transparent 43% 48%, #000 49% 100%); }
body[data-topic-visual="story-world"] { --topic-mask: linear-gradient(90deg, #000 0 28%, transparent 29% 34%, #000 35% 63%, transparent 64% 69%, #000 70% 100%); }
body[data-topic-visual="converter-arrows"] { --topic-mask: linear-gradient(90deg, transparent 0 12%, #000 13% 88%, transparent 89%), conic-gradient(from 45deg at 88% 50%, #000 0 25%, transparent 0), conic-gradient(from 225deg at 12% 50%, #000 0 25%, transparent 0); }
body[data-topic-visual="formula-workbench"] { --topic-mask: linear-gradient(90deg, #000 0 5px, transparent 6px 18px), repeating-linear-gradient(0deg, transparent 0 14px, #000 15px 17px); }
.topic-visual-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .36rem .7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 32%, var(--c-border-soft));
  background: color-mix(in srgb, var(--topic-color) 8%, var(--c-bg-card));
  color: color-mix(in srgb, var(--topic-color) 72%, var(--c-text));
  font-size: .78rem;
  font-weight: 800;
}
@media (max-width: 720px) {
  body[data-topic-visual] .topic-hero::before,
  body[data-topic-visual] .case-hero::before { width: 160px; height: 82px; opacity: .22; }
  body[data-topic-visual] .topic-hero::after,
  body[data-topic-visual] .case-hero::after { font-size: 3rem; opacity: .5; }
}

/* ===== 主站案例库入口(P0-1) ===== */
.portal-cases {
  width: min(1180px, calc(100% - 32px));
  margin: 1.4rem auto;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--topic-color) 10%, var(--panel)), var(--panel));
  box-shadow: var(--shadow-soft);
}
.case-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}
.case-library-card {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.4rem;
  min-height: 112px;
  padding: 0.85rem 0.95rem;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, var(--lib-color, var(--topic-color)) 8%);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.case-library-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -50% auto;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, color-mix(in srgb, var(--lib-color, var(--topic-color)) 22%, transparent), transparent 70%);
  pointer-events: none;
  opacity: .8;
  transition: transform .3s ease;
}
.case-library-card:hover,
.case-library-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--lib-color, var(--topic-color)) 60%, var(--border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--lib-color, var(--topic-color)) 18%, transparent);
  outline: none;
}
.case-library-card:hover::after,
.case-library-card:focus-visible::after {
  transform: translate(-8px, -8px) scale(1.15);
}
.case-library-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lib-color, var(--topic-color)) 70%, white);
  outline-offset: 2px;
}
.case-library-card .lib-emoji {
  font-size: 1.45rem;
  line-height: 1;
}
.case-library-card .lib-emoji + b { display: block; }
.case-library-card b {
  font-size: 0.96rem;
  line-height: 1.3;
  font-weight: 800;
}
.case-library-card .lib-count {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.case-library-card .lib-count b {
  color: var(--lib-color, var(--topic-color));
  font-weight: 900;
  font-size: 0.85rem;
}
.case-library-card .lib-arrow {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  font-size: 0.85rem;
  color: var(--lib-color, var(--topic-color));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.case-library-card:hover .lib-arrow,
.case-library-card:focus-visible .lib-arrow {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 720px) {
  .case-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .case-library-card { min-height: 96px; padding: 0.7rem 0.8rem; }
  .case-library-card b { font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .case-library-card,
  .case-library-card::after,
  .case-library-card .lib-arrow { transition: none; }
}
html[data-theme="light"] .case-library-card {
  background: color-mix(in srgb, var(--panel) 95%, var(--lib-color, var(--topic-color)) 5%);
  border-color: color-mix(in srgb, var(--lib-color, var(--topic-color)) 18%, var(--border));
}

/* Random sibling navigation stability patch: no scale/rotate on nav rows. */
[data-random-sub] {
  transform: none !important;
  flex: 0 0 auto;
  inline-size: 36px;
  block-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  contain: layout paint;
}
[data-random-sub].is-random-pending {
  opacity: .72;
  filter: saturate(.85);
  pointer-events: none;
}

/* Scenario case pages · richer exercises and category workflows */
.scenario-case-detail {
  padding-top: clamp(18px, 4vw, 42px);
}
.scenario-case-shell {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  position: relative;
  padding-top: 6px;
}
.scenario-case-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--topic-color), color-mix(in srgb, var(--topic-color-2, var(--topic-color)) 55%, transparent));
  opacity: .82;
}
.scenario-case-lead { max-width: 940px; }
.scenario-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 36%, transparent);
  background: color-mix(in srgb, var(--topic-color) 10%, transparent);
  color: var(--topic-color);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}
.scenario-case-lead h2 {
  margin: 14px 0 10px;
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.08;
}
.scenario-case-lead p {
  margin: 0;
  color: var(--c-muted);
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.85;
}
.scenario-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  gap: clamp(18px, 2.6vw, 32px);
  align-items: stretch;
}
.scenario-main-panel,
.scenario-side-panel,
.scenario-takeaway-grid article {
  border: 1px solid color-mix(in srgb, var(--topic-color) 22%, var(--c-border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--topic-color) 12%, transparent), transparent 35%),
    color-mix(in srgb, var(--c-card) 94%, transparent);
  box-shadow: var(--shadow-card);
}
.scenario-main-panel,
.scenario-side-panel {
  padding: clamp(16px, 2vw, 24px);
  min-width: 0;
}
.scenario-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.scenario-panel-head > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--topic-color);
  color: #07101c;
  font-weight: 950;
}
.scenario-panel-head b { display: block; font-size: 18px; }
.scenario-panel-head small { display: block; color: var(--c-muted); margin-top: 2px; line-height: 1.45; }
.scenario-lens,
.scenario-route,
.scenario-myths,
.scenario-quiz,
.scenario-compare,
.scenario-project,
.scenario-record,
.scenario-teach,
.scenario-review {
  display: grid;
  gap: 12px;
}
.scenario-lens,
.scenario-route,
.scenario-myths,
.scenario-quiz {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.scenario-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scenario-lens button,
.scenario-route button,
.scenario-myths button,
.scenario-quiz button,
.scenario-compare button,
.scenario-project label,
.scenario-review label,
.scenario-record label,
.scenario-teach label,
.scenario-note {
  border: 1px solid color-mix(in srgb, var(--topic-color) 18%, var(--c-border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--c-bg-soft) 82%, transparent);
  color: var(--c-text);
  padding: 15px;
  min-width: 0;
}
.scenario-lens button,
.scenario-route button,
.scenario-myths button,
.scenario-quiz button,
.scenario-compare button {
  cursor: pointer;
  text-align: left;
  font-weight: 850;
  line-height: 1.5;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.scenario-lens button:hover,
.scenario-route button:hover,
.scenario-myths button:hover,
.scenario-quiz button:hover,
.scenario-compare button:hover,
.scenario-lens button.is-active,
.scenario-route button.is-active,
.scenario-myths button.is-active,
.scenario-quiz button.is-active,
.scenario-compare button.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--topic-color) 56%, var(--c-border));
  background: color-mix(in srgb, var(--topic-color) 13%, var(--c-bg-soft));
}
.scenario-quiz button.is-correct { border-color: #6aa66f; background: color-mix(in srgb, #6aa66f 15%, var(--c-bg-soft)); }
.scenario-quiz button.is-wrong { border-color: #b57a6a; background: color-mix(in srgb, #b57a6a 13%, var(--c-bg-soft)); }
.scenario-lens button span,
.scenario-route button span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--topic-color) 20%, transparent);
  color: var(--topic-color);
  font-size: 12px;
  font-weight: 950;
}
.scenario-compare button b { display: block; font-size: 18px; margin-bottom: 4px; }
.scenario-compare button small { color: var(--c-muted); }
.scenario-feedback {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  color: var(--c-muted);
  line-height: 1.72;
  border: 1px solid color-mix(in srgb, var(--topic-color) 20%, transparent);
  background: color-mix(in srgb, var(--topic-color) 9%, var(--c-bg-soft));
}
.scenario-project label,
.scenario-review label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
  font-weight: 760;
}
.scenario-project input,
.scenario-review input { margin-top: 5px; accent-color: var(--topic-color); }
.scenario-progress {
  position: relative;
  overflow: hidden;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-border) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--topic-color) 14%, transparent);
}
.scenario-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--topic-color), color-mix(in srgb, var(--topic-color-2, var(--topic-color)) 60%, #fff));
  transition: width .2s ease;
}
.scenario-progress span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--c-text);
}
.scenario-record label,
.scenario-teach label {
  display: grid;
  gap: 8px;
}
.scenario-record label span,
.scenario-teach label span { font-weight: 850; color: var(--topic-color); }
.scenario-record textarea,
.scenario-teach textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 18%, var(--c-border));
  background: color-mix(in srgb, var(--c-bg) 78%, transparent);
  color: var(--c-text);
  padding: 11px 12px;
  font: inherit;
  line-height: 1.55;
}
.scenario-record p,
.scenario-teach p { margin: 0; color: var(--c-muted); line-height: 1.65; }
.scenario-side-panel { display: grid; align-content: start; gap: 14px; }
.scenario-note b { color: var(--topic-color); }
.scenario-note p { margin: 7px 0 0; color: var(--c-muted); line-height: 1.7; }
.scenario-takeaway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.scenario-takeaway-grid article { padding: 18px; }
.scenario-takeaway-grid span { color: var(--topic-color); font-weight: 950; }
.scenario-takeaway-grid p { margin: 8px 0 0; color: var(--c-muted); line-height: 1.7; }
html[data-theme="light"] .scenario-main-panel,
html[data-theme="light"] .scenario-side-panel,
html[data-theme="light"] .scenario-takeaway-grid article,
html[data-theme="light"] .scenario-lens button,
html[data-theme="light"] .scenario-route button,
html[data-theme="light"] .scenario-myths button,
html[data-theme="light"] .scenario-quiz button,
html[data-theme="light"] .scenario-compare button,
html[data-theme="light"] .scenario-project label,
html[data-theme="light"] .scenario-review label,
html[data-theme="light"] .scenario-record label,
html[data-theme="light"] .scenario-teach label,
html[data-theme="light"] .scenario-note,
html[data-theme="light"] .scenario-feedback,
html[data-theme="light"] .scenario-record textarea,
html[data-theme="light"] .scenario-teach textarea {
  background-color: #ffffff !important;
}
@media (max-width: 980px) {
  .scenario-layout { grid-template-columns: 1fr; }
  .scenario-takeaway-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .scenario-lens,
  .scenario-route,
  .scenario-myths,
  .scenario-quiz,
  .scenario-compare { grid-template-columns: 1fr; }
  .scenario-main-panel,
  .scenario-side-panel { border-radius: 22px; padding: 14px; }
  .scenario-case-lead h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-lens button,
  .scenario-route button,
  .scenario-myths button,
  .scenario-quiz button,
  .scenario-compare button,
  .scenario-progress i { transition: none; }
}

/* ===== 主站 #all-subsites 32 subsite-card 样式补充(2026-06-06 P2-3 修复)
   此前主站 32 张 <a class="subsite-card"> 没有任何 CSS 规则(主站只加载 engine/style.css)
   导致 a11y target-size 0 分、视觉过窄。这里补上与原 assets/style.css 等价的样式。*/
.subsite-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.subsite-card {
  display: block;
  text-decoration: none;
  color: var(--c-text);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid var(--c-border, var(--border, rgba(148,163,184,.16)));
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  padding: 24px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.subsite-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--topic-color, #06d6f0), transparent);
  opacity: .9;
}
.subsite-card:hover,
.subsite-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--topic-color, #06d6f0) 50%, var(--c-border, rgba(148,163,184,.16)));
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  outline: none;
}
.subsite-card:focus-visible {
  outline: 2px solid var(--topic-color, #06d6f0);
  outline-offset: 2px;
}
.subsite-card b { display: block; font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.4rem; color: var(--c-text); }
.subsite-card span { display: block; color: var(--c-text-soft, #b7c2cf); font-size: 0.92rem; line-height: 1.55; }
.channel-subhead { margin: 1.6rem 0 0.6rem; font-size: 1.1rem; color: var(--c-text-soft, #b7c2cf); }

@media (max-width: 720px) {
  .subsite-grid { grid-template-columns: 1fr; gap: 12px; }
  .subsite-card { min-height: 88px; padding: 18px; border-radius: 20px; }
}
@media (max-width: 480px) {
  .subsite-card { min-height: 72px; padding: 14px; }
  .subsite-card b { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  .subsite-card,
  .subsite-card::before { transition: none; }
  .subsite-card:hover { transform: none; }
}


/* === 20260606 category-playable-microapps patch ===
   按分类定制的“玩中学”微应用：实验台、轨道沙盘、诗画点亮、餐盘任务、语境剧场、单位工作台。
*/
acid-base-play-lab,
solar-orbit-playground,
poetry-scene-play,
meal-tray-play,
meme-theater-play,
unit-workbench-play { display:block; width:100%; min-width:0; }
.play-app { display:grid; grid-template-columns:minmax(260px,1.08fr) minmax(260px,.92fr); gap:clamp(14px,2vw,22px); align-items:stretch; min-width:0; }
.play-stage,.play-panel { position:relative; border:1px solid color-mix(in srgb, var(--topic-color) 24%, rgba(255,255,255,.12)); border-radius:28px; background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.026)); min-width:0; overflow:hidden; }
.play-stage { min-height:260px; display:grid; place-items:center; padding:18px; }
.play-panel { padding:18px; display:grid; align-content:start; gap:12px; }
.play-kicker { width:max-content; max-width:100%; border-radius:999px; padding:5px 10px; color:var(--topic-color); background:color-mix(in srgb, var(--topic-color) 14%, transparent); font-weight:900; font-size:12px; }
.play-panel h3 { margin:0; font-size:clamp(20px,2vw,28px); line-height:1.12; }
.play-panel p { margin:0; color:var(--c-text-soft); line-height:1.7; }
.play-options,.food-shelf { display:flex; flex-wrap:wrap; gap:8px; }
.play-options button,.food-shelf button,.play-pill { border:1px solid color-mix(in srgb, var(--topic-color) 26%, rgba(255,255,255,.12)); background:rgba(255,255,255,.045); color:var(--c-text); border-radius:999px; padding:8px 12px; font-weight:850; cursor:pointer; }
.play-options button.is-active,.food-shelf button.is-active,.play-pill { background:color-mix(in srgb, var(--topic-color) 26%, transparent); color:var(--c-text); }
.play-feedback { border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:12px; color:var(--c-text-soft); background:color-mix(in srgb, var(--topic-color) 10%, transparent); line-height:1.65; }
.play-feedback.is-ok { border-color:rgba(74,155,116,.45); background:rgba(74,155,116,.14); }
.play-feedback.is-warn { border-color:rgba(196,154,98,.5); background:rgba(196,154,98,.14); }
.play-range { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; color:var(--c-text-soft); font-size:13px; }
.play-range input { width:100%; }
.acid-stage { background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--topic-color) 16%, transparent), transparent 55%); }
.beaker-play { position:relative; width:min(210px,86%); height:190px; border:2px solid rgba(255,255,255,.22); border-top:0; border-radius:0 0 34px 34px; display:grid; place-items:end center; padding-bottom:36px; }
.beaker-play::before { content:""; position:absolute; inset:auto 16px 18px; height:60%; border-radius:0 0 24px 24px; background:linear-gradient(180deg, color-mix(in srgb, var(--liquid) 78%, transparent), color-mix(in srgb, var(--liquid) 46%, transparent)); }
.beaker-play span { position:relative; z-index:2; font-weight:900; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.beaker-play i { position:absolute; top:26px; width:12px; height:118px; border-radius:999px; background:rgba(255,255,255,.55); transform:rotate(-8deg); }
.ph-strip { width:min(230px,86%); height:18px; border-radius:999px; background:linear-gradient(90deg,#d86f67,#d0b06e,#6fac86); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.ph-strip b { display:block; width:max-content; transform:translateX(calc(var(--ph) - 50%)); margin-top:24px; font-size:12px; color:var(--c-text); }
.orbit-stage { min-height:300px; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 62%); }
.orbit-rings { position:absolute; inset:12%; border-radius:50%; border:1px dashed rgba(255,255,255,.14); box-shadow:0 0 0 42px rgba(255,255,255,.015),0 0 0 84px rgba(255,255,255,.012); }
.orbit-sun { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:rgba(196,154,98,.18); color:#d8b46e; font-size:34px; }
.orbit-planet { position:absolute; width:38px; height:38px; transform:translate(-50%,-50%); border:2px solid color-mix(in srgb, var(--planet) 76%, #fff); border-radius:50%; background:var(--planet); color:#111827; font-weight:900; cursor:pointer; box-shadow:0 0 0 6px color-mix(in srgb, var(--planet) 16%, transparent); }
.orbit-planet.is-active { outline:3px solid rgba(255,255,255,.58); }
.poem-stage { min-height:300px; background:linear-gradient(180deg,#172033,#0b1020); }
.scene-moon,.scene-window,.scene-person,.scene-frost,.scene-heart { position:absolute; opacity:.18; transition:opacity .25s ease, transform .25s ease; }
.scene-moon { right:18%; top:14%; width:72px; height:72px; border-radius:50%; background:#e5e7eb; box-shadow:0 0 34px rgba(255,255,255,.38); }
.scene-window { left:18%; top:25%; width:132px; height:112px; border:2px solid rgba(255,255,255,.24); border-radius:18px; }
.scene-person { left:38%; bottom:24%; font-weight:900; font-size:42px; color:#d7c7a0; }
.scene-frost { inset:auto 15% 14%; height:36px; border-radius:50%; background:linear-gradient(90deg,transparent,#dbeafe,transparent); }
.scene-heart { right:20%; bottom:22%; font-size:36px; color:#d98aa5; font-weight:900; }
.poem-stage.show-moon .scene-moon,.poem-stage.show-frost .scene-frost,.poem-stage.show-look .scene-person,.poem-stage.show-heart .scene-heart { opacity:1; transform:scale(1.04); }
.meal-stage { background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--topic-color) 12%, transparent), transparent 58%); }
.meal-plate { width:min(250px,88%); aspect-ratio:1; border-radius:50%; border:16px solid rgba(255,255,255,.1); background:#f8fafc; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:8px; padding:24px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.meal-plate span { color:#111827; background:#fff; border-radius:999px; padding:7px 10px; font-weight:850; font-size:12px; box-shadow:0 6px 18px rgba(15,23,42,.12); }
.meal-score { position:absolute; right:18px; bottom:18px; min-width:132px; border-radius:18px; padding:12px; background:rgba(0,0,0,.22); color:#fff; }
.meal-score b { font-size:28px; display:block; }
.meal-score i { display:block; height:8px; margin-top:8px; border-radius:99px; background:var(--topic-color); }
.food-shelf button { display:grid; gap:2px; border-radius:18px; text-align:left; }
.food-shelf small { color:var(--c-text-soft); }
.theater-stage { background:linear-gradient(180deg, color-mix(in srgb, var(--topic-color) 12%, #172033), #0b1020); }
.chat-bubble { border-radius:24px 24px 24px 6px; padding:18px 22px; background:#fff; color:#111827; font-weight:950; box-shadow:0 18px 44px rgba(0,0,0,.24); }
.audience { display:flex; gap:14px; font-size:34px; margin-top:22px; }
.theater-meter { position:absolute; left:24px; right:24px; bottom:24px; height:12px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.theater-meter i { display:block; height:100%; background:linear-gradient(90deg,#b86b78,#c49a62,#65a987); }
.unit-board { align-content:center; gap:14px; }
.ruler-line { width:min(300px,90%); height:30px; border-radius:12px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 24px), rgba(255,255,255,.05); overflow:hidden; }
.ruler-line i { display:block; height:100%; border-radius:inherit; background:color-mix(in srgb, var(--topic-color) 36%, transparent); }
.unit-board b { font-size:clamp(32px,5vw,54px); color:var(--topic-color); }
.unit-board span { color:var(--c-text-soft); text-align:center; max-width:28em; }
[data-theme="light"] .play-stage,[data-theme="light"] .play-panel,[data-theme="light"] .play-feedback { background:#fff; border-color:rgba(15,23,42,.1); box-shadow:0 16px 40px rgba(15,23,42,.06); }
[data-theme="light"] .poem-stage { background:linear-gradient(180deg,#f8fafc,#fff); }
[data-theme="light"] .scene-window { border-color:rgba(15,23,42,.16); }
[data-theme="light"] .meal-score { background:rgba(15,23,42,.78); }
[data-theme="light"] .theater-stage { background:linear-gradient(180deg,#f8fafc,#fff); }
@media (max-width: 840px) { .play-app { grid-template-columns:1fr; } .play-stage { min-height:220px; } .play-range { grid-template-columns:1fr; } }


/* === 20260606 category-playable-microapps-wave2 patch === */
function-slope-play, projectile-launcher-play, habitat-web-play, biography-treasure-play, wellness-day-play, quiz-quest-play { display:block; width:100%; min-width:0; }
.function-stage svg, .projectile-stage svg { width:min(430px,96%); height:auto; overflow:visible; }
.function-stage .grid { stroke:rgba(255,255,255,.22); stroke-width:1.2; }
.function-stage .axis { stroke:rgba(255,255,255,.09); stroke-width:.7; }
.func-line { stroke:var(--topic-color); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 8px 16px color-mix(in srgb, var(--topic-color) 28%, transparent)); }
.function-badge,.projectile-readout { position:absolute; left:18px; bottom:18px; border-radius:18px; padding:10px 12px; background:rgba(0,0,0,.24); color:#fff; font-weight:900; }
.projectile-readout { display:grid; gap:2px; font-size:13px; }
.projectile-stage .ground { stroke:rgba(255,255,255,.25); stroke-width:2; }
.projectile-stage .trajectory { fill:none; stroke:var(--topic-color); stroke-width:3.2; stroke-linecap:round; }
.projectile-stage .ball { fill:var(--topic-color); }
.projectile-stage .target { fill:color-mix(in srgb, var(--topic-color-2, var(--topic-color)) 72%, #fff); }
.habitat-stage { align-content:center; gap:18px; }
.habitat-web { position:relative; width:min(360px,94%); aspect-ratio:1.6; }
.habitat-web .node { position:absolute; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-weight:950; background:color-mix(in srgb, var(--topic-color) 22%, rgba(255,255,255,.08)); border:1px solid color-mix(in srgb, var(--topic-color) 34%, rgba(255,255,255,.12)); }
.habitat-web .grass{left:6%;bottom:8%}.habitat-web .rabbit{left:34%;bottom:35%}.habitat-web .fox{right:22%;top:25%}.habitat-web .eagle{right:4%;top:2%}
.habitat-web i { position:absolute; height:2px; background:color-mix(in srgb, var(--topic-color) 45%, transparent); transform-origin:left center; }
.habitat-web i:nth-of-type(1){left:22%;bottom:34%;width:27%;transform:rotate(-28deg)}.habitat-web i:nth-of-type(2){left:51%;top:45%;width:27%;transform:rotate(-30deg)}.habitat-web i:nth-of-type(3){right:12%;top:24%;width:18%;transform:rotate(-42deg)}
.species-bars { width:min(390px,96%); display:grid; gap:8px; }
.species-bars label { display:grid; grid-template-columns:50px 1fr 34px; align-items:center; gap:8px; color:var(--c-text-soft); font-size:13px; }
.species-bars b { height:10px; border-radius:999px; background:linear-gradient(90deg,var(--topic-color),color-mix(in srgb,var(--topic-color-2,var(--topic-color)) 80%,#fff)); }
.bio-stage { gap:18px; }
.bio-road { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.bio-node { border:1px solid color-mix(in srgb,var(--topic-color) 28%,rgba(255,255,255,.14)); background:rgba(255,255,255,.05); color:var(--c-text); border-radius:18px; padding:12px 14px; display:grid; gap:4px; cursor:pointer; }
.bio-node.is-active { outline:2px solid color-mix(in srgb,var(--topic-color) 55%,transparent); }
.treasure-box { width:min(260px,88%); min-height:132px; border-radius:28px; display:grid; place-items:center; background:linear-gradient(145deg, color-mix(in srgb,var(--topic-color) 18%,transparent), rgba(255,255,255,.04)); border:1px solid color-mix(in srgb,var(--topic-color) 30%,rgba(255,255,255,.12)); }
.treasure-box b { color:var(--topic-color); font-size:24px; }
.wellness-orb { width:190px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--topic-color) calc(var(--score)*1%), rgba(255,255,255,.1) 0); box-shadow:inset 0 0 0 22px rgba(0,0,0,.22); }
.wellness-orb b { font-size:48px; color:#fff; }
.wellness-orb span { margin-top:-42px; color:rgba(255,255,255,.72); }
.wellness-dayline { display:flex; gap:8px; }
.wellness-dayline i { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); color:var(--c-text-soft); font-style:normal; font-weight:900; }
.quest-stage { gap:18px; }
.quest-map { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.quest-map span { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); color:var(--c-text-soft); font-weight:950; }
.quest-map .is-current { background:var(--topic-color); color:#111827; }
.quest-map .is-done { background:color-mix(in srgb,var(--topic-color) 28%,transparent); color:var(--c-text); }
.quest-card { max-width:360px; text-align:center; border-radius:24px; padding:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.quest-card b { color:var(--topic-color); }
.quest-options button.is-good { border-color:rgba(101,169,135,.62); background:rgba(101,169,135,.18); }
.quest-options button.is-bad { border-color:rgba(184,107,120,.62); background:rgba(184,107,120,.18); }
.play-pill:disabled { opacity:.45; cursor:not-allowed; }
[data-theme="light"] .function-stage .grid, [data-theme="light"] .projectile-stage .ground { stroke:rgba(15,23,42,.18); }
[data-theme="light"] .function-stage .axis { stroke:rgba(15,23,42,.08); }
[data-theme="light"] .function-badge, [data-theme="light"] .projectile-readout { background:rgba(15,23,42,.78); }
[data-theme="light"] .wellness-orb { box-shadow:inset 0 0 0 22px rgba(255,255,255,.7); }
[data-theme="light"] .wellness-orb b { color:#0f172a; }
[data-theme="light"] .wellness-orb span { color:#475569; }
[data-theme="light"] .quest-card, [data-theme="light"] .bio-node { background:#fff; border-color:rgba(15,23,42,.1); }
@media (max-width: 640px) { .bio-road { display:grid; grid-template-columns:1fr 1fr; } .habitat-web .node { width:54px; height:54px; font-size:12px; } }

/* === 20260606 three2d mascot scenes patch ===
   Fixed-camera Three.js 2D scenes with proprietary SigmAgent mascots. */
.scene2d-premium-stage {
  min-height: 520px;
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: stretch;
}
.scene2d-case-intro {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 24%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--topic-color) 10%, rgba(255,255,255,.05));
  color: var(--c-text);
}
.scene2d-case-intro span {
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scene2d-case-intro b { font-size: 18px; }
.scene2d-case-intro small { color: var(--c-muted); line-height: 1.65; }
.scene2d-wrap {
  position: relative;
  height: 360px;
  min-height: 320px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--scene-accent, var(--topic-color)) 26%, rgba(255,255,255,.12));
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--scene-accent, var(--topic-color)) 24%, transparent), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.22);
}
.scene2d-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}
.scene2d-hud {
  position: absolute;
  left: 12px;
  top: 12px;
  right: 12px;
  z-index: 2;
  pointer-events: none;
}
.scene2d-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.scene2d-kpi span,
.scene2d-kpi b {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  font-size: 12px;
}
.scene2d-kpi b { color: #f5d782; }
.scene2d-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(7,12,24,.64);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
}
.scene2d-controls label {
  display: inline-grid;
  grid-template-columns: auto minmax(90px, 150px) 38px;
  gap: 8px;
  align-items: center;
  color: rgba(255,255,255,.86);
  font-size: 12px;
}
.scene2d-controls input[type="range"] { accent-color: var(--scene-accent, var(--topic-color)); }
.scene2d-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 8px 12px;
  color: #fff;
  background: rgba(255,255,255,.12);
  cursor: pointer;
  min-height: 34px;
}
.scene2d-btn:hover { background: rgba(255,255,255,.2); }
.scene2d-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--scene-accent, var(--topic-color)) 65%, white); outline-offset: 2px; }
[data-theme="light"] .scene2d-case-intro,
[data-theme="light"] .scene2d-wrap {
  background: #fff;
  border-color: color-mix(in srgb, var(--topic-color) 22%, rgba(15,23,42,.12));
  box-shadow: 0 16px 40px rgba(15,23,42,.07);
}
[data-theme="light"] .scene2d-controls { background: rgba(255,255,255,.82); border-color: rgba(15,23,42,.1); }
[data-theme="light"] .scene2d-controls label { color: #1f2937; }
[data-theme="light"] .scene2d-btn { color: #172033; background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.12); }
@media (max-width: 760px) {
  .scene2d-premium-stage { min-height: auto; }
  .scene2d-wrap { height: 320px; min-height: 300px; }
  .scene2d-controls { position: relative; left: auto; right: auto; bottom: auto; margin: 0 10px 10px; }
  .scene2d-controls label { grid-template-columns: 1fr; width: 100%; }
}


/* Three.js 2D mascot quest · playful task/reward layer */
.scene2d-mission-card {
  position: absolute;
  left: 12px;
  top: 12px;
  width: min(260px, calc(100% - 24px));
  z-index: 4;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--scene-accent, var(--topic-color)) 38%, rgba(255,255,255,.16));
  background: linear-gradient(145deg, rgba(12,18,31,.82), rgba(23,32,51,.7));
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  color: #f8fafc;
  pointer-events: none;
}
.scene2d-mission-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.scene2d-mission-head span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 70%, white); }
.scene2d-mission-head b { font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene2d-mascot-line { margin: 0 0 8px; font-size: 12px; line-height: 1.55; color: rgba(248,250,252,.86); }
.scene2d-stars { display: flex; gap: 4px; margin: 4px 0 8px; }
.scene2d-star { color: rgba(255,255,255,.24); text-shadow: none; transform: scale(.9); transition: color .2s ease, transform .2s ease, text-shadow .2s ease; }
.scene2d-star.is-on { color: #f5d782; transform: scale(1.06); text-shadow: 0 0 14px rgba(245,215,130,.38); }
.scene2d-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0; padding: 0; list-style: none; }
.scene2d-steps li { padding: 5px 6px; border-radius: 999px; text-align: center; font-size: 11px; color: rgba(248,250,252,.58); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.scene2d-steps li.is-on { color: #fff; background: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 34%, rgba(255,255,255,.08)); border-color: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 45%, rgba(255,255,255,.12)); }
.scene2d-success { margin: 8px 0 0; padding: 8px 9px; border-radius: 12px; font-size: 12px; line-height: 1.5; color: #fff; background: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 28%, rgba(255,255,255,.08)); border: 1px solid color-mix(in srgb, var(--scene-accent, var(--topic-color)) 38%, rgba(255,255,255,.12)); }
[data-theme="light"] .scene2d-mission-card {
  background: rgba(255,255,255,.92);
  color: #172033;
  border-color: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 22%, #e5e7eb);
  box-shadow: 0 16px 34px rgba(15,23,42,.12);
}
[data-theme="light"] .scene2d-mission-head span { color: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 72%, #172033); }
[data-theme="light"] .scene2d-mascot-line { color: #334155; }
[data-theme="light"] .scene2d-star { color: #cbd5e1; }
[data-theme="light"] .scene2d-star.is-on { color: #b88728; text-shadow: 0 0 10px rgba(184,135,40,.18); }
[data-theme="light"] .scene2d-steps li { color: #64748b; background: #f8fafc; border-color: #e5e7eb; }
[data-theme="light"] .scene2d-steps li.is-on { color: #172033; background: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 14%, #fff); border-color: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 28%, #e5e7eb); }
[data-theme="light"] .scene2d-success { color: #172033; background: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 12%, #fff); border-color: color-mix(in srgb, var(--scene-accent, var(--topic-color)) 24%, #e5e7eb); }
@media (max-width: 720px) {
  .scene2d-mission-card { position: relative; left: auto; top: auto; width: auto; margin: 10px; order: 3; }
  .scene2d-steps { grid-template-columns: 1fr; }
}