:root {
  --bg: #071014;
  --bg-deep: #04090c;
  --surface: #0d181d;
  --surface-2: #122128;
  --line: rgba(167, 206, 214, 0.17);
  --line-strong: rgba(167, 206, 214, 0.34);
  --ink: #ecf4f2;
  --ink-soft: #b9c9ca;
  --muted: #7e969a;
  --cyan: #59f1e6;
  --teal: #45b9ad;
  --coral: #ff6b5c;
  --gold: #e3c75f;
  --blue: #5aa7e8;
  --header-height: 74px;
  --max-width: 1480px;
}

* {
  box-sizing: border-box;
}

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

body {
  min-width: 320px;
  margin: 0;
  background:
    linear-gradient(rgba(89, 241, 230, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 241, 230, 0.025) 1px, transparent 1px),
    var(--bg);
  background-size: 48px 48px;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input: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;
}

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

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

.lab-brand img {
  width: 42px;
  height: 42px;
}

.lab-brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.lab-brand strong {
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 1rem;
}

.lab-brand small {
  margin-top: 0.14rem;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
}

.lab-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.lab-nav a,
.home-link {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
}

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

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.language-toggle {
  width: 38px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
}

.language-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

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

.lab-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(470px, 0.9fr);
  gap: 4rem;
  align-items: end;
  min-height: 470px;
  padding: 5rem 0 3.8rem;
  border-bottom: 1px solid var(--line-strong);
}

.eyebrow,
.section-label p,
.rail-heading p,
.cell-inspector > p,
.timeline-head p {
  margin: 0;
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 800;
}

.intro-copy h1 {
  max-width: 900px;
  margin: 0.72rem 0 1.2rem;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: clamp(2.4rem, 4.4vw, 4.7rem);
  font-weight: 600;
  line-height: 1.14;
}

.intro-copy h1 span {
  display: block;
  overflow-wrap: anywhere;
}

.intro-copy h1 span:last-child {
  color: var(--cyan);
}

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

.intro-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}

.intro-facts div {
  min-height: 112px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 1.3rem;
}

.intro-facts dt {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  line-height: 1.25;
}

.intro-facts dd {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.explorer,
.force-path-section,
.response-section,
.matrix-section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--line-strong);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  color: var(--cyan);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
}

.section-label h2 {
  margin: 0.18rem 0 0;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
}

.explorer-heading,
.force-path-heading,
.response-heading,
.matrix-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 3rem;
}

.explorer-heading > p,
.force-path-heading > p,
.response-heading > p,
.matrix-heading > p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

.case-selector {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 2rem;
  border: 1px solid var(--line);
}

.case-selector button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  border: 0;
  border-right: 1px solid var(--line);
  background: rgba(13, 24, 29, 0.72);
  color: var(--muted);
  cursor: pointer;
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
}

.case-selector button:last-child {
  border-right: 0;
}

.case-selector button b {
  color: var(--ink-soft);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
}

.case-selector button span {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
}

.case-selector button:hover,
.case-selector button.active {
  background: var(--surface-2);
  color: var(--ink);
}

.case-selector button.active {
  box-shadow: inset 0 -2px var(--cyan);
}

.case-selector button.active b {
  color: var(--cyan);
}

.explorer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.segmented-control,
.layer-control {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
}

.segmented-control button,
.layer-control button {
  min-height: 34px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0.32rem 0.72rem;
}

.segmented-control button:last-child,
.layer-control button:last-child {
  border-right: 0;
}

.segmented-control button {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.segmented-control b {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.66rem;
}

.segmented-control button:hover,
.layer-control button:hover,
.segmented-control button.active,
.layer-control button.active {
  background: rgba(89, 241, 230, 0.1);
  color: var(--cyan);
}

.workbench {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(290px, 0.78fr);
  border: 1px solid var(--line-strong);
  background: rgba(4, 9, 12, 0.84);
}

.wall-panel {
  min-width: 0;
  border-right: 1px solid var(--line-strong);
  padding: 1.1rem;
}

.panel-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
  margin-bottom: 0.8rem;
}

.panel-topline > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 0.62rem;
}

.panel-topline #viewCode {
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.panel-topline strong {
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 0.95rem;
}

.view-legend {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.67rem;
}

.legend-gradient {
  width: 118px;
  height: 6px;
  background: linear-gradient(90deg, #42678a, #45b9ad 42%, #e3c75f 72%, #ff6b5c);
}

.legend-gradient.mises {
  background: linear-gradient(90deg, #102334, #2c9eaa 38%, #8fc974 56%, #e1be55 74%, #a92f5d);
}

.legend-gradient.uout {
  background: linear-gradient(90deg, #263f78, #2d7f99 30%, #10242a 50%, #a47c42 72%, #a94355);
}

.wall-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(89, 241, 230, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 241, 230, 0.045) 1px, transparent 1px),
    #071115;
  background-size: 5% 10%;
  isolation: isolate;
}

.wall-stage::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  border: 1px solid rgba(89, 241, 230, 0.06);
  box-shadow: inset 0 0 46px rgba(4, 9, 12, 0.7);
  content: "";
  pointer-events: none;
}

.wall-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
}

.wall-layer.reveal {
  z-index: 3;
  clip-path: inset(0 0 0 50%);
}

.wall-layer:empty {
  display: none;
}

.wall-layer svg,
.wall-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wall-layer svg {
  overflow: visible;
}

.wall-layer img {
  filter: saturate(1.04) contrast(1.04);
}

.wall-layer .micro-cell {
  opacity: 0.95;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 170ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 170ms ease, filter 170ms ease;
}

.wall-layer .cell-hit {
  cursor: crosshair;
  fill: transparent;
  pointer-events: all;
}

.wall-layer .micro-cell.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 16px rgba(89, 241, 230, 0.95)) drop-shadow(0 0 5px rgba(255, 107, 92, 0.65));
  transform: translateY(-9px) scale(1.16);
}

.wall-layer[data-mode="geometry"] .micro-cell {
  color: #9cb5b7 !important;
  opacity: 0.7;
}

.wall-layer[data-mode="geometry"] .micro-cell.is-active {
  color: var(--cyan) !important;
  opacity: 1;
}

.reveal-divider {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(89, 241, 230, 0.75);
  cursor: ew-resize;
  touch-action: none;
}

.reveal-divider::before {
  position: absolute;
  inset: 0 -14px;
  content: "";
}

.reveal-divider span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 42px;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  background: var(--bg);
  transform: translate(-50%, -50%);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.reveal-divider:hover span,
.reveal-divider.is-dragging span {
  border-color: #dffdfa;
  box-shadow: 0 0 0 1px rgba(89, 241, 230, 0.35), 0 0 20px rgba(89, 241, 230, 0.78);
  transform: translate(-50%, -50%) scale(1.08);
}

.reveal-divider span::before,
.reveal-divider span::after {
  position: absolute;
  top: 50%;
  color: var(--cyan);
  font-size: 9px;
  line-height: 1;
  transform: translateY(-50%);
}

.reveal-divider span::before {
  left: 3px;
  content: "‹";
}

.reveal-divider span::after {
  right: 3px;
  content: "›";
}

.stage-loading {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  background: rgba(7, 17, 21, 0.82);
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
}

.stage-loading[hidden] {
  display: none;
}

.compare-range {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) 1.2rem;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.67rem;
  text-align: center;
}

.compare-range[hidden],
.field-scale[hidden] {
  display: none;
}

input[type="range"] {
  width: 100%;
  height: 3px;
  appearance: none;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--coral));
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  appearance: none;
  background: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 10px rgba(89, 241, 230, 0.7);
}

.field-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 5px;
  margin-top: 0.8rem;
}

.field-scale span {
  background: linear-gradient(90deg, #102334, #2c9eaa 38%, #8fc974 56%, #e1be55 74%, #a92f5d);
}

.field-scale.u3 span {
  background: linear-gradient(90deg, #263f78, #2d7f99 30%, #10242a 50%, #a47c42 72%, #a94355);
}

.analysis-rail {
  min-width: 0;
  background: rgba(13, 24, 29, 0.66);
  padding: 1.15rem 1.2rem;
}

.rail-heading {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.rail-heading h3 {
  margin: 0.3rem 0 0;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 1.02rem;
}

.metric-list {
  border-bottom: 1px solid var(--line);
}

.metric-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  padding: 0.82rem 0;
  border-bottom: 1px solid var(--line);
}

.metric-item:last-child {
  border-bottom: 0;
}

.metric-item dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.metric-item dd {
  grid-column: 1;
  margin: 0.2rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.metric-item dd small {
  margin-left: 0.25rem;
  color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.62rem;
}

.metric-delta {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-style: normal;
}

.metric-delta.negative {
  color: var(--coral);
}

.cell-inspector {
  min-height: 132px;
  margin-top: 1rem;
  border-left: 2px solid var(--cyan);
  background: rgba(89, 241, 230, 0.055);
  padding: 0.85rem 0.9rem;
}

.cell-inspector strong,
.cell-inspector > span {
  display: block;
}

.cell-inspector strong {
  margin-top: 0.45rem;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 0.88rem;
}

.cell-inspector > span {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.7rem;
}

.cell-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.8rem;
  margin-top: 0.65rem;
}

.cell-readout span {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 0.62rem;
}

.cell-readout b {
  margin-top: 0.08rem;
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
}

.force-model-selector {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 2rem;
  border: 1px solid var(--line);
  background: rgba(4, 9, 12, 0.56);
}

.force-model-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border-right: 1px solid var(--line);
}

.force-model-pair:last-child {
  border-right: 0;
}

.force-model-pair button {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  min-width: 0;
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.5rem 0.3rem;
}

.force-model-pair button:last-child {
  border-right: 0;
}

.force-model-pair button::after {
  position: absolute;
  right: 0.28rem;
  bottom: 0;
  left: 0.28rem;
  height: 2px;
  background: var(--cyan);
  content: "";
  opacity: 0;
  transform: scaleX(0.25);
  transition: opacity 160ms ease, transform 160ms ease;
}

.force-model-pair button b {
  color: var(--ink-soft);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.65rem;
}

.force-model-pair button span {
  overflow: hidden;
  width: 100%;
  font-size: 0.62rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.force-model-pair button:hover,
.force-model-pair button.active {
  background: rgba(89, 241, 230, 0.085);
  color: var(--ink);
}

.force-model-pair button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.force-model-pair button.active b {
  color: var(--cyan);
}

.force-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.force-family-control {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
}

.force-family-control button,
.force-motion-toggle {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0.32rem 0.72rem;
}

.force-family-control button {
  border-right: 1px solid var(--line);
}

.force-family-control button:last-child {
  border-right: 0;
}

.force-family-control button:hover,
.force-family-control button.active {
  background: rgba(89, 241, 230, 0.1);
  color: var(--cyan);
}

.force-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}

.force-motion-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.force-motion-toggle:disabled {
  cursor: default;
  opacity: 0.48;
}

.force-motion-toggle > span:first-child {
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.66rem;
}

.force-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line-strong);
  background: rgba(4, 9, 12, 0.82);
}

.force-model-panel {
  min-width: 0;
  margin: 0;
  border-right: 1px solid var(--line-strong);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.force-model-panel:last-child {
  border-right: 0;
}

.force-model-panel.is-focused {
  background: rgba(89, 241, 230, 0.028);
  box-shadow: inset 0 0 0 1px rgba(89, 241, 230, 0.25), inset 0 0 42px rgba(89, 241, 230, 0.035);
}

.force-model-panel > header,
.force-model-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
  padding: 0.8rem 1rem;
}

.force-model-panel > header {
  border-bottom: 1px solid var(--line);
}

.force-model-panel > header > div {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
}

.force-model-panel > header span {
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.force-model-panel > header strong {
  overflow: hidden;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.force-model-panel > header small {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
  white-space: nowrap;
}

.force-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2 / 1;
  background:
    linear-gradient(rgba(89, 241, 230, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 241, 230, 0.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(16, 39, 46, 0.58), transparent 68%),
    #050b0e;
  background-size: 5% 10%, 5% 10%, auto, auto;
  isolation: isolate;
  contain: paint;
}

.force-stage::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid rgba(167, 206, 214, 0.08);
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.62);
  content: "";
  pointer-events: none;
}

.force-stage img,
.force-stage svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.force-stage .force-geometry {
  z-index: 1;
  object-fit: contain;
  filter: grayscale(0.32) saturate(0.82) contrast(1.2) brightness(0.96);
  opacity: 0.68;
}

.force-stage .force-transfer-field {
  z-index: 2;
  object-fit: contain;
  opacity: 0.76;
  mix-blend-mode: screen;
  filter: saturate(0.96) contrast(1.22) brightness(1.02);
}

.force-stage svg {
  z-index: 3;
  overflow: hidden;
}

.force-stream-halo,
.force-stream,
.force-stream-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.force-stream-halo.tension,
.force-stream.tension,
.force-stream-flow.tension {
  color: var(--blue);
  stroke: var(--blue);
}

.force-stream-halo.compression,
.force-stream.compression,
.force-stream-flow.compression {
  color: var(--coral);
  stroke: var(--coral);
}

.force-stream-halo.is-corridor {
  opacity: 0.16;
}

.force-stream.is-corridor {
  opacity: 0.94;
}

.force-family {
  animation: force-flow var(--flow-speed) linear infinite;
  animation-delay: var(--flow-delay);
}

.force-stream-flow {
  stroke-dasharray: 1 8;
  opacity: 0.78;
}

.force-stream-flow.is-corridor {
  stroke-dasharray: 1 6;
  opacity: 1;
}

.force-particle {
  opacity: 0.94;
  pointer-events: none;
}

.force-particle.tension {
  fill: #d8ffff;
  stroke: var(--blue);
}

.force-particle.compression {
  fill: #fff0e9;
  stroke: var(--coral);
}

.force-particle.tension,
.force-particle.compression {
  stroke-width: 1;
}

.force-particle.is-corridor {
  stroke-width: 1.4;
}

.motion-paused .force-family {
  animation-play-state: paused;
}

@keyframes force-flow {
  to {
    stroke-dashoffset: -44;
  }
}

.force-model-panel > footer {
  justify-content: flex-start;
  min-height: 46px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.force-model-panel > footer span,
.force-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.force-model-panel > footer b,
.force-legend b {
  color: var(--ink-soft);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 500;
}

.force-model-panel > footer .force-mechanism {
  gap: 0.4rem;
  margin-left: auto;
}

.force-mechanism > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7f9298;
  box-shadow: 0 0 6px rgba(127, 146, 152, 0.42);
}

.force-mechanism.hybrid > i {
  background: #58f8bc;
  box-shadow: 0 0 7px rgba(88, 248, 188, 0.82), 0 0 14px rgba(88, 248, 188, 0.32);
}

.force-mechanism.hybrid > b {
  color: #83e9c0;
}

.force-swatch {
  display: inline-block;
  width: 19px;
  height: 2px;
  box-shadow: 0 0 7px currentColor;
}

.force-swatch.tension {
  background: var(--blue);
  color: var(--blue);
}

.force-swatch.compression {
  background: var(--coral);
  color: var(--coral);
}

.force-intensity-ramp {
  display: inline-block;
  width: 38px;
  height: 5px;
  background: linear-gradient(90deg, rgba(13, 67, 68, 0.18), #2f8d78 54%, #58f8bc);
  box-shadow: 0 0 7px rgba(88, 248, 188, 0.36);
}

.force-legend {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-top: 0.95rem;
  color: var(--muted);
}

.force-legend small {
  margin-left: auto;
  font-size: 0.68rem;
}

.response-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.62fr);
  margin-top: 2rem;
  border: 1px solid var(--line-strong);
  background: rgba(4, 9, 12, 0.82);
}

.chart-wrap {
  min-width: 0;
  border-right: 1px solid var(--line-strong);
  padding: 1rem 1rem 0.55rem;
}

#hysteresisChart {
  display: block;
  width: 100%;
  aspect-ratio: 2.05 / 1;
  overflow: visible;
}

.chart-grid {
  stroke: rgba(167, 206, 214, 0.1);
  stroke-width: 1;
}

.chart-axis {
  stroke: rgba(167, 206, 214, 0.45);
  stroke-width: 1;
}

.chart-label,
.chart-tick {
  fill: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
}

.chart-label {
  font-size: 10px;
}

.chart-tick {
  font-size: 9px;
}

.curve-u,
.curve-h {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.curve-u {
  stroke: var(--blue);
  stroke-width: 1.55;
  opacity: 0.82;
}

.curve-h {
  stroke: var(--coral);
  stroke-width: 1.75;
  opacity: 0.92;
}

.marker-u,
.marker-h {
  stroke: var(--bg);
  stroke-width: 2;
}

.marker-u {
  fill: var(--blue);
}

.marker-h {
  fill: var(--coral);
}

.timeline-panel {
  padding: 1.2rem;
}

.timeline-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.timeline-head button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: rgba(89, 241, 230, 0.08);
  color: var(--cyan);
  cursor: pointer;
  padding: 0;
}

.timeline-head button:hover {
  background: rgba(89, 241, 230, 0.16);
}

.timeline-head strong {
  display: block;
  margin-top: 0.15rem;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9rem;
}

#timelineRange {
  margin: 1.5rem 0 1.3rem;
}

.timeline-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.timeline-values div {
  min-height: 78px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.72rem;
}

.timeline-values dt {
  color: var(--muted);
  font-size: 0.65rem;
}

.timeline-values dd {
  margin: 0.28rem 0 0;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.76rem;
}

.curve-key {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.38rem 0.6rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.67rem;
}

.curve-key span {
  display: grid;
  place-items: center;
  height: 1.25rem;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
}

.curve-key em {
  font-style: normal;
}

.key-u {
  border: 1px solid var(--blue);
  color: var(--blue);
}

.key-h {
  border: 1px solid var(--coral);
  color: var(--coral);
}

.matrix-table-wrap {
  overflow-x: auto;
  margin-top: 2rem;
  border-top: 1px solid var(--line-strong);
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.matrix-table th,
.matrix-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 1rem;
  text-align: right;
  white-space: nowrap;
}

.matrix-table th:first-child,
.matrix-table td:first-child {
  text-align: left;
}

.matrix-table th {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.matrix-table tbody tr {
  transition: background 140ms ease;
}

.matrix-table tbody tr:hover,
.matrix-table tbody tr.active {
  background: rgba(89, 241, 230, 0.055);
}

.case-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.case-jump b {
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
}

.delta-value {
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
}

.delta-value.negative {
  color: var(--coral);
}

.method-note {
  max-width: 900px;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 100px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.66rem;
}

footer a:hover {
  color: var(--cyan);
}

noscript {
  display: block;
  background: var(--coral);
  color: var(--bg);
  padding: 0.8rem;
  text-align: center;
}

/* Shared affordance for selectable research states. */
.case-selector button,
.segmented-control button,
.layer-control button,
.force-family-control button,
.force-model-pair button {
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, filter 180ms ease, transform 180ms ease;
}

:is(.case-selector, .segmented-control, .layer-control, .force-family-control) button:nth-child(5n + 1),
.force-model-pair:nth-child(5n + 1) button { --tab-signal-color: #59f1e6; }
:is(.case-selector, .segmented-control, .layer-control, .force-family-control) button:nth-child(5n + 2),
.force-model-pair:nth-child(5n + 2) button { --tab-signal-color: #e3c75f; }
:is(.case-selector, .segmented-control, .layer-control, .force-family-control) button:nth-child(5n + 3),
.force-model-pair:nth-child(5n + 3) button { --tab-signal-color: #ff6b5c; }
:is(.case-selector, .segmented-control, .layer-control, .force-family-control) button:nth-child(5n + 4),
.force-model-pair:nth-child(5n + 4) button { --tab-signal-color: #5aa7e8; }
:is(.case-selector, .segmented-control, .layer-control, .force-family-control) button:nth-child(5n),
.force-model-pair:nth-child(5n) button { --tab-signal-color: #b58cff; }

.case-selector button:not(.active)::before,
.segmented-control button:not(.active)::before,
.layer-control button:not(.active)::before,
.force-family-control button:not(.active)::before,
.force-model-pair button:not(.active)::before {
  position: absolute;
  top: 7px;
  right: 8px;
  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: wall-tab-signal 2.35s ease-in-out infinite;
  will-change: opacity, transform, box-shadow;
}

.case-selector button:nth-child(3n + 2)::before,
.segmented-control button:nth-child(3n + 2)::before,
.layer-control button:nth-child(3n + 2)::before,
.force-family-control button:nth-child(3n + 2)::before,
.force-model-pair:nth-child(3n + 2) button::before { animation-delay: -0.78s; }

.case-selector button:nth-child(3n)::before,
.segmented-control button:nth-child(3n)::before,
.layer-control button:nth-child(3n)::before,
.force-family-control button:nth-child(3n)::before,
.force-model-pair:nth-child(3n) button::before { animation-delay: -1.56s; }

.case-selector button:hover,
.case-selector button:focus-visible,
.segmented-control button:hover,
.segmented-control button:focus-visible,
.layer-control button:hover,
.layer-control button:focus-visible,
.force-family-control button:hover,
.force-family-control button:focus-visible,
.force-model-pair button:hover,
.force-model-pair button:focus-visible {
  z-index: 2;
  filter: brightness(1.18);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(89, 241, 230, 0.32), 0 0 16px rgba(89, 241, 230, 0.14);
}

.case-selector button.active {
  box-shadow: inset 0 -2px var(--cyan), 0 0 18px rgba(89, 241, 230, 0.16);
}

.segmented-control button.active,
.layer-control button.active,
.force-family-control button.active,
.force-model-pair button.active {
  box-shadow: inset 0 0 0 1px rgba(89, 241, 230, 0.34), 0 0 14px rgba(89, 241, 230, 0.15);
}

@keyframes wall-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); }
}

@media (max-width: 1120px) {
  .lab-header {
    grid-template-columns: 1fr auto;
  }

  .lab-nav {
    display: none;
  }

  .lab-intro {
    grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.85fr);
    gap: 2.5rem;
  }

  .workbench {
    grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.72fr);
  }

  .case-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .force-model-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .force-model-pair:nth-child(4) {
    border-right: 0;
  }

  .force-model-pair:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }

  .case-selector button {
    border-bottom: 1px solid var(--line);
  }

  .case-selector button:nth-child(4) {
    border-right: 0;
  }

  .case-selector button:nth-child(n + 5) {
    border-bottom: 0;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 66px;
  }

  .lab-header {
    padding: 0 1rem;
  }

  .home-link,
  .lab-brand small {
    display: none;
  }

  main,
  footer {
    width: min(100% - 2rem, var(--max-width));
  }

  .lab-intro {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: 0;
    padding: 3.6rem 0 3rem;
  }

  .intro-copy h1 {
    font-size: 2.7rem;
  }

  .explorer-heading,
  .force-path-heading,
  .response-heading,
  .matrix-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .explorer-heading > p,
  .force-path-heading > p,
  .response-heading > p,
  .matrix-heading > p {
    text-align: left;
  }

  .explorer-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .workbench,
  .force-comparison,
  .response-layout {
    grid-template-columns: 1fr;
  }

  .force-model-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .force-model-panel:last-child {
    border-bottom: 0;
  }

  .wall-panel,
  .chart-wrap {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .analysis-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
    gap: 0 1.2rem;
  }

  .rail-heading,
  .metric-list {
    grid-column: 1;
  }

  .cell-inspector {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 15px;
  }

  .lab-brand img {
    width: 36px;
    height: 36px;
  }

  .lab-brand strong {
    font-size: 0.9rem;
  }

  .intro-copy h1 {
    font-size: 2.15rem;
  }

  .intro-lead {
    font-size: 0.98rem;
  }

  .intro-facts div {
    min-height: 90px;
    padding: 0.9rem;
  }

  .intro-facts dt {
    font-size: 1.18rem;
  }

  .explorer,
  .force-path-section,
  .response-section,
  .matrix-section {
    padding: 3rem 0;
  }

  .case-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-selector button:nth-child(2n) {
    border-right: 0;
  }

  .case-selector button:nth-child(n + 5) {
    border-bottom: 1px solid var(--line);
  }

  .case-selector button:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  .force-model-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .force-model-pair,
  .force-model-pair:nth-child(4) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .force-model-pair:nth-child(2n) {
    border-right: 0;
  }

  .force-model-pair:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

  .force-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .force-family-control {
    width: 100%;
  }

  .force-family-control button {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

  .force-motion-toggle {
    align-self: flex-end;
  }

  .force-stage {
    aspect-ratio: 1.7 / 1;
  }

  .force-model-panel > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .force-model-panel > header strong {
    white-space: normal;
  }

  .force-legend {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .force-legend small {
    margin-left: 0;
  }

  .segmented-control,
  .layer-control {
    width: 100%;
  }

  .segmented-control button,
  .layer-control button {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 0.28rem;
    padding-left: 0.28rem;
  }

  .segmented-control button span {
    display: none;
  }

  .wall-panel {
    padding: 0.7rem;
  }

  .panel-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  .legend-gradient {
    width: 84px;
  }

  .wall-stage {
    aspect-ratio: 1.7 / 1;
  }

  .analysis-rail {
    display: block;
  }

  .cell-inspector {
    margin-top: 1rem;
  }

  #hysteresisChart {
    aspect-ratio: 1.38 / 1;
  }

  .timeline-values {
    grid-template-columns: 1fr;
  }

  .matrix-table th,
  .matrix-table td {
    padding-right: 0.72rem;
    padding-left: 0.72rem;
  }

  footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
  }
}

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

  .wall-layer .micro-cell,
  .case-selector button::before,
  .segmented-control button::before,
  .layer-control button::before,
  .force-family-control button::before,
  .force-model-pair button::before,
  .force-model-pair button::after,
  .force-model-panel,
  .matrix-table tbody tr {
    transition: none;
  }

  .case-selector button::before,
  .segmented-control button::before,
  .layer-control button::before,
  .force-family-control button::before,
  .force-model-pair button::before {
    animation: none;
    opacity: 0.72;
  }

  .wall-layer .micro-cell.is-active {
    transform: scale(1.08);
  }
}