:root {
  --line: rgba(255, 255, 255, 0.09);
  --text: #f1f6ff;
  --muted: #aab8cf;
  --accent: #8fd8ff;
  --accent-2: #94f0c1;
  --accent-3: #ffb07a;
  --accent-4: #ffe48d;
  --shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
  --radius: 24px;
  --max: 1480px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  background: radial-gradient(circle at top, rgba(34,87,173,0.22), transparent 38%), linear-gradient(180deg, #05101d 0%, #081322 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { padding: 8px 10px 10px; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
.page-shell { max-width: var(--max); margin: 0 auto; }
.page-shell::-webkit-scrollbar { width: 10px; }
.hero, .figure-card, .eq-card {
  background: linear-gradient(180deg, rgba(12,24,41,0.92), rgba(9,18,31,0.92));
  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
}
.hero { border-radius: 18px; padding: 6px 10px; }
.eyebrow { margin: 0 0 6px; color: #a8c7ff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
h1,h2,h3 { margin: 0; line-height: 1.08; }
h1 { font-size: clamp(2rem, 4vw, 3.35rem); }
h2 { font-size: clamp(0.95rem, 1.1vw, 1.14rem); }
h3 { font-size: 0.84rem; }
.hero-copy { margin: 14px 0 0; max-width: 800px; color: var(--muted); line-height: 1.55; }
.top-row { margin-top: 18px; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.compact-top-row { margin-top: 8px; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; }
.button { appearance: none; border: none; border-radius: 999px; padding: 11px 17px; color: var(--text); cursor: pointer; transition: transform 0.18s ease, background 0.18s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: linear-gradient(90deg, #7bd5ff, #5fb6ff); color: #072037; font-weight: 700; }
.button.secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.stage-strip { margin-top: 6px; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; align-items: stretch; }
.stage-panel { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; border: 1px dashed rgba(255,255,255,0.20); background: rgba(255,255,255,0.02); min-height: 40px; }
.stage-panel-1 { border-color: rgba(143,216,255,0.28); }
.stage-panel-2 { border-color: rgba(255,176,122,0.28); }
.stage-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(143,216,255,0.22); background: rgba(143,216,255,0.08); color: #d7ebff; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.stage-badge-2 { border-color: rgba(255,176,122,0.24); background: rgba(255,176,122,0.08); }
.stage-text { color: #dbe8fb; font-weight: 600; letter-spacing: 0.01em; font-size: 0.86rem; }
.workflow-row { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: stretch; }
.figure-card { padding: 9px 9px 8px; min-width: 0; display: flex; flex-direction: column; }
.figure-head { display: flex; gap: 6px; justify-content: space-between; align-items: start; margin-bottom: 6px; }
.figure2-stack { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: stretch; flex: 1 1 auto; }
.caption { margin: auto 2px 0; padding-top: 5px; color: var(--muted); line-height: 1.22; font-size: 0.74rem; }
canvas { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(8,15,27,0.7), rgba(10,18,30,0.88)); }
#lambdaConvCanvas, #piConvCanvas, #trainCanvas { margin-top: 6px; }
.track-wrap.compact.single { margin-top: 6px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.track-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 8px 8px 7px; }
.track-label-row, .track-foot { display: flex; justify-content: space-between; gap: 10px; }
.track-label-row { font-weight: 600; color: #edf6ff; margin-bottom: 6px; font-size: 0.82rem; }
.track-label-row span:last-child, .track-foot { color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.track { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(143,216,255,0.10), rgba(255,176,122,0.12)); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.track-target, .track-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.track-target { width: 4px; height: 100%; background: rgba(255,255,255,0.35); }
.track-dot { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(180deg, #8fd8ff, #58b8ff); border: 2px solid rgba(7,18,33,0.95); box-shadow: 0 0 0 3px rgba(143,216,255,0.16); }
.track-foot { margin-top: 6px; }
.equation-row { margin-top: 6px; display: grid; grid-template-columns: 1.35fr 1fr 0.95fr; gap: 8px; }
.eq-card { padding: 8px 9px 7px; }
.eq-body { margin-top: 5px; color: var(--muted); min-height: 54px; display:flex; align-items:center; justify-content:center; text-align:center; overflow-x:auto; }
.eq-body-block { flex-direction: column; gap: 4px; justify-content: center; }
.eq-body-block > div { width: 100%; }
.mjx-container { font-size: 76% !important; }
@media (max-width: 1180px) {
  .workflow-row, .equation-row, .stage-strip { grid-template-columns: 1fr; }
  .figure2-stack { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body { padding: 14px 10px 30px; }
  .hero { padding: 18px 16px 16px; }
  .figure-card, .eq-card { padding: 14px 12px 12px; }
  .stage-panel { flex-wrap: wrap; }
}

.hero-compact-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-mark { margin:0; }

@media (max-height: 900px) {
  .hero { padding: 5px 9px; }
  .stage-strip { margin-top: 5px; gap: 6px; }
  .stage-panel { padding: 5px 8px; min-height: 36px; }
  .workflow-row { margin-top: 5px; gap: 6px; }
  .figure-card { padding: 8px 8px 7px; }
  .figure-head { margin-bottom: 5px; }
  .figure2-stack { gap: 5px; }
  #lambdaConvCanvas, #piConvCanvas, #trainCanvas { margin-top: 5px; }
  .caption { font-size: 0.70rem; margin: auto 2px 0; padding-top: 4px; }
  .track-wrap.compact.single { margin-top: 5px; }
  .track-card { padding: 7px 7px 6px; }
  .equation-row { margin-top: 5px; gap: 6px; }
  .eq-card { padding: 7px 8px 6px; }
  .eq-body { min-height: 48px; margin-top: 4px; }
  .mjx-container { font-size: 70% !important; }
  #fsdeCanvas { max-height: 150px; }
  #trainCanvas { max-height: 118px; }
  #hamiltonianCanvas { max-height: 150px; }
  #costateCanvas { max-height: 118px; }
  #bpttCanvas { max-height: 92px; }
  #lambdaConvCanvas { max-height: 84px; }
  #piConvCanvas { max-height: 82px; }
}

.note-card { margin-top: 6px; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: linear-gradient(180deg, rgba(12,24,41,0.84), rgba(9,18,31,0.84)); color: var(--muted); font-size: 0.72rem; line-height: 1.25; }
.note-card p { margin: 0; }
.note-card p + p { margin-top: 4px; }
.note-card strong { color: var(--text); }
@media (max-height: 900px) { .note-card { margin-top: 5px; padding: 6px 8px; font-size: 0.68rem; line-height: 1.2; } }