:root {
  color-scheme: dark;
  --bg: #061013;
  --bg-deep: #03090b;
  --panel: #0a171b;
  --panel-strong: #102429;
  --ink: #f0f5f2;
  --ink-soft: #bdcbc8;
  --muted: #789091;
  --line: rgba(176, 211, 207, 0.16);
  --line-strong: rgba(176, 211, 207, 0.34);
  --cyan: #55f3e5;
  --teal: #28afa8;
  --coral: #ff705d;
  --gold: #e9c46a;
  --blue: #65a9d7;
  --header-height: 70px;
  --max-width: 1500px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 22px);
}

body {
  min-width: 320px;
  margin: 0;
  background:
    linear-gradient(rgba(85, 243, 229, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 243, 229, 0.022) 1px, transparent 1px),
    var(--bg);
  background-size: 42px 42px;
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -5rem;
  background: var(--cyan);
  color: var(--bg);
  padding: 0.55rem 0.85rem;
}

.skip-link:focus { top: 0.75rem; }

.database-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: minmax(215px, 1fr) auto minmax(340px, 1fr);
  align-items: center;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 16, 19, 0.95);
  padding: 0 2rem;
  backdrop-filter: blur(18px);
}

.database-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  width: fit-content;
}

.database-brand img { width: 42px; height: 42px; }
.database-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.database-brand strong { font-family: "Songti SC", STSong, Georgia, serif; font-size: 1rem; }
.database-brand small { margin-top: 0.12rem; color: var(--muted); font: 0.68rem Georgia, "Times New Roman", serif; }

.database-nav,
.header-actions {
  display: flex;
  align-items: center;
}

.database-nav { gap: 2rem; }
.header-actions { justify-content: flex-end; gap: 0.9rem; }

.database-nav a,
.home-link,
.sibling-link {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.database-nav a:hover,
.home-link:hover,
.sibling-link:hover { color: var(--cyan); }

.sibling-link { border-right: 1px solid var(--line-strong); padding-right: 0.9rem; }

.language-toggle,
.icon-button {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
}

.language-toggle { width: 36px; height: 34px; font-size: 0.7rem; font-weight: 800; }
.icon-button { width: 40px; height: 38px; font-weight: 800; }
.language-toggle:hover, .icon-button:hover { border-color: var(--cyan); background: rgba(85, 243, 229, 0.07); }

main,
.database-footer {
  width: min(var(--max-width), calc(100% - 4rem));
  margin: 0 auto;
}

.database-intro {
  min-height: 565px;
  border-bottom: 1px solid var(--line-strong);
  padding: 4rem 0 2.8rem;
}

.intro-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 2.6rem;
}

.intro-copy .eyebrow { grid-column: 1; grid-row: 1; }
.intro-copy h1 { grid-column: 1; grid-row: 2; }
.intro-copy .intro-lead { grid-column: 2; grid-row: 2; }

.eyebrow,
.section-label p,
.figure-topline,
.cloud-heading p {
  margin: 0;
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 800;
}

.intro-copy h1 {
  margin: 0.75rem 0 0;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.04;
}

.intro-copy h1 span { display: block; overflow-wrap: anywhere; }
.intro-copy h1 span:last-child { color: var(--cyan); }
html[lang="en"] .intro-copy h1 { font-size: 3.1rem; }

.intro-lead {
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.9;
}

.database-table-wrap {
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(3, 11, 13, 0.68);
}

.database-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.database-table th,
.database-table td {
  padding: 0.82rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.database-table tr:last-child th,
.database-table tr:last-child td { border-bottom: 0; }
.database-table thead th { color: var(--muted); font: 700 0.66rem "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.database-table tbody th { width: 18%; color: var(--ink); font-size: 0.8rem; }
.database-table td { color: var(--ink-soft); font-size: 0.78rem; }
.database-table td strong { color: var(--cyan); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.9rem; }

.research-section {
  border-bottom: 1px solid var(--line-strong);
  padding: 4.5rem 0 5rem;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.7fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2rem;
}

.section-label { display: flex; align-items: flex-start; gap: 1.25rem; }
.section-label > span { color: var(--coral); font: 500 2.65rem Georgia, serif; line-height: 1; }
.section-label h2 { margin: 0.35rem 0 0; font-family: "Songti SC", STSong, Georgia, serif; font-size: 2.1rem; font-weight: 500; line-height: 1.25; }
.section-heading > p { margin: 0 0 0.15rem; color: var(--ink-soft); font-family: "Songti SC", STSong, Georgia, serif; font-size: 0.94rem; line-height: 1.8; }

.integrated-figure,
.pareto-panel,
.fit-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(3, 11, 13, 0.76);
}

.integrated-figure::before,
.pareto-panel::before,
.fit-panel::before {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 13px;
  width: 34px;
  height: 34px;
  border-top: 1px solid var(--coral);
  border-left: 1px solid var(--coral);
  content: "";
  pointer-events: none;
}

canvas { display: block; max-width: 100%; }
.scale-figure canvas { width: 100%; height: 720px; cursor: grab; touch-action: none; }
.scale-figure canvas.is-dragging,
.parameter-cloud-figure canvas.is-dragging { cursor: grabbing; }

.canvas-tooltip {
  position: absolute;
  z-index: 8;
  min-width: 120px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(3, 9, 11, 0.96);
  color: var(--ink);
  padding: 0.45rem 0.6rem;
  pointer-events: none;
  font: 0.68rem/1.55 "SFMono-Regular", Consolas, monospace;
}

.case-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.case-switcher button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  padding: 0.7rem 1rem;
  cursor: pointer;
  text-align: left;
}

.case-switcher button:last-child { border-right: 0; }
.case-switcher button b { color: var(--coral); font: 1rem Georgia, serif; }
.case-switcher button span { font-family: "Songti SC", STSong, Georgia, serif; font-weight: 700; }
.case-switcher button em { color: var(--muted); font: normal 0.7rem "SFMono-Regular", Consolas, monospace; }
.case-switcher button {
  position: relative;
  transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.case-switcher button:nth-child(1) { --tab-signal-color: #55f3e5; }
.case-switcher button:nth-child(2) { --tab-signal-color: #e9c46a; }
.case-switcher button:nth-child(3) { --tab-signal-color: #ff705d; }

.case-switcher button:not(.active)::after {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  color: var(--tab-signal-color, var(--cyan));
  border: 1px solid rgba(224, 255, 252, 0.72);
  box-shadow: 0 0 0 0 currentColor;
  content: "";
  pointer-events: none;
  animation: database-tab-signal 2.35s ease-in-out infinite;
  will-change: opacity, transform, box-shadow;
}

.case-switcher button:nth-child(2)::after { animation-delay: -0.78s; }
.case-switcher button:nth-child(3)::after { animation-delay: -1.56s; }

.case-switcher button:hover,
.case-switcher button:focus-visible {
  z-index: 2;
  filter: brightness(1.18);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(85, 243, 229, 0.3), 0 0 16px rgba(85, 243, 229, 0.13);
}

.case-switcher button.active {
  background: rgba(85, 243, 229, 0.08);
  color: var(--ink);
  box-shadow: inset 0 -2px var(--cyan), 0 0 18px rgba(85, 243, 229, 0.15);
}

@keyframes database-tab-signal {
  0%, 100% { opacity: 0.34; box-shadow: 0 0 0 0 currentColor; transform: scale(0.72); }
  50% { opacity: 1; box-shadow: 0 0 14px 5px currentColor; transform: scale(1.18); }
}

.pareto-action {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 38px;
  margin: -0.15rem 0 0.8rem;
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(233, 196, 106, 0.1), transparent 72%);
  color: var(--ink-soft);
  padding: 0.45rem 0.8rem;
  font-size: 0.74rem;
}

.pareto-action strong { color: var(--ink); font-weight: 600; }
.pareto-action > span:last-child { color: var(--gold); font-size: 1rem; }

.pareto-action-marks { display: inline-flex; align-items: center; gap: 0.3rem; }
.pareto-action-marks i {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(240, 245, 242, 0.75);
  background: var(--blue);
  box-shadow: 0 0 8px rgba(101, 169, 215, 0.55);
}
.pareto-action-marks i:first-child { border-radius: 50%; }
.pareto-action-marks i:nth-child(2) { background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 8px rgba(233, 196, 106, 0.55); }
.pareto-action-marks i:nth-child(3) { background: var(--coral); box-shadow: 0 0 8px rgba(255, 112, 93, 0.55); }

.pareto-workbench {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
}

.figure-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid var(--line);
  padding: 0 1rem;
}

.figure-topline strong { color: var(--ink); font-size: 0.7rem; }
.pareto-panel canvas,
.fit-panel canvas { width: 100%; height: 525px; }

.pareto-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0;
}

.solution-switcher { display: flex; align-items: center; gap: 0.5rem; }
.solution-switcher button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-soft);
  padding: 0 0.7rem;
  cursor: pointer;
  font-size: 0.72rem;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.solution-switcher button:hover,
.solution-switcher button:focus-visible {
  filter: brightness(1.18);
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(85, 243, 229, 0.14);
}

.solution-switcher button i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  color: var(--blue);
  animation: solution-signal 1.8s ease-in-out infinite;
}
.solution-switcher button:nth-child(2) i { border-radius: 0; color: var(--gold); transform: rotate(45deg); animation-delay: -0.6s; }
.solution-switcher button:nth-child(3) i { border-radius: 0; color: var(--coral); animation-delay: -1.2s; }
.solution-switcher button.active { border-color: var(--cyan); background: rgba(85, 243, 229, 0.08); color: var(--ink); box-shadow: 0 0 16px rgba(85, 243, 229, 0.16); }
.solution-switcher sub { font-size: 0.65rem; }

@keyframes solution-signal {
  0%, 100% { opacity: 0.58; box-shadow: 0 0 0 0 currentColor; filter: brightness(0.9); }
  50% { opacity: 1; box-shadow: 0 0 11px 2px currentColor; filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .solution-switcher button i,
  .case-switcher button::after { animation: none; }
  .case-switcher button::after { opacity: 0.72; }
}

.fit-errors { display: flex; gap: 1.2rem; color: var(--muted); font: 0.72rem "SFMono-Regular", Consolas, monospace; }
.fit-errors b { color: var(--ink); }

.taxonomy-figure canvas { width: 100%; height: 860px; cursor: pointer; }

.cloud-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 2.7rem 0 0.85rem;
}

.cloud-heading h3 { margin: 0.3rem 0 0; font-family: "Songti SC", STSong, Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.cloud-heading > span { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink-soft); font-size: 0.75rem; }
.cloud-heading > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

.parameter-cloud-figure canvas { width: 100%; height: 700px; cursor: grab; touch-action: none; }

.database-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100px;
  color: var(--muted);
  font-size: 0.72rem;
}

.database-footer a { color: var(--ink-soft); }
.database-footer a:hover { color: var(--cyan); }

@media (max-width: 1120px) {
  .database-header { grid-template-columns: 1fr auto; padding: 0 1.2rem; }
  .database-nav { display: none; }
  .intro-copy { display: block; }
  .intro-copy h1 { margin-bottom: 1.2rem; }
  .intro-lead { max-width: 760px; }
  .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .pareto-workbench { grid-template-columns: 1fr; }
  .pareto-panel canvas, .fit-panel canvas { height: 500px; }
}

@media (max-width: 760px) {
  :root { --header-height: 62px; }
  .database-header { min-height: var(--header-height); }
  .database-brand img { width: 36px; height: 36px; }
  .database-brand small, .sibling-link, .home-link { display: none; }
  .header-actions { gap: 0.45rem; }
  main, .database-footer { width: min(100% - 1.5rem, var(--max-width)); }
  .database-intro { min-height: 0; padding: 2.5rem 0 2rem; }
  .intro-copy { margin-bottom: 1.7rem; }
  .intro-copy h1, html[lang="en"] .intro-copy h1 { font-size: 2.55rem; }
  .intro-lead { font-size: 0.94rem; }
  .database-table-wrap { overflow-x: auto; }
  .database-table { min-width: 680px; }
  .research-section { padding: 3.3rem 0 3.7rem; }
  .section-label { gap: 0.8rem; }
  .section-label > span { font-size: 2rem; }
  .section-label h2 { font-size: 1.55rem; }
  .scale-figure canvas { height: 880px; }
  .scale-figure canvas,
  .parameter-cloud-figure canvas { touch-action: pan-y; }
  .case-switcher { grid-template-columns: 1fr; }
  .case-switcher button { border-right: 0; border-bottom: 1px solid var(--line); }
  .case-switcher button:last-child { border-bottom: 0; }
  .pareto-action { align-items: flex-start; }
  .pareto-panel canvas, .fit-panel canvas { height: 430px; }
  .pareto-controls { grid-template-columns: 1fr auto; }
  .solution-switcher { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }
  .solution-switcher button { justify-content: center; min-width: 0; padding: 0 0.35rem; }
  .solution-switcher button span { display: none; }
  .taxonomy-figure canvas { height: 1680px; }
  .cloud-heading { align-items: flex-start; gap: 1rem; }
  .cloud-heading > span { margin-top: 0.2rem; text-align: right; }
  .parameter-cloud-figure canvas { height: 880px; }
  .database-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.35rem; }
}

@media (max-width: 430px) {
  .database-brand strong { font-size: 0.9rem; }
  .intro-copy h1, html[lang="en"] .intro-copy h1 { font-size: 2.15rem; }
  .section-label h2 { font-size: 1.35rem; }
  .scale-figure canvas { height: 920px; }
  .pareto-panel canvas, .fit-panel canvas { height: 390px; }
  .taxonomy-figure canvas { height: 1820px; }
  .parameter-cloud-figure canvas { height: 940px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}