.relativity-site {
  --bg: #0d101a;
  --deep: #101520;
  --panel: #151b29;
  --line: #30394a;
  --cyan: #b6b0f4;
  --amber: #efc68e;
  --muted: #acb7c9;
  background: var(--bg);
}
.relativity-site .hero-art {
  background: radial-gradient(ellipse at center, #4e3b672e, transparent 65%);
}
.relativity-site .hero h1 {
  font-size: clamp(48px, 5.4vw, 77px);
}
.relativity-site .hero .hero-intro {
  max-width: 440px;
}
.relativity-site .chapter-nav {
  background: #101521ed;
}
.relativity-site .chapter-nav .wrap {
  gap: 20px;
}
.relativity-site .chapter-nav a {
  gap: 8px;
  font-size: 11px;
}
.relativity-site .lab-card {
  background: #101520;
}
.relativity-site .equation-strip {
  background: #19202e;
}
.relativity-site .button.primary {
  background: var(--cyan);
  color: #19192c;
}
.relativity-site .section-heading h2 {
  font-size: clamp(36px, 4vw, 56px);
}
.relativity-site input:disabled {
  opacity: 0.35;
  cursor: default;
}
.relativity-site [hidden] {
  display: none !important;
}
.motion-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wide-canvas {
  height: 330px;
}
.train-canvas {
  height: 360px;
}
.lab-controls {
  display: grid;
  gap: 35px;
  padding: 26px 30px;
  border-top: 1px solid var(--line);
  align-items: center;
  background: #151d2b;
}
.three-cols {
  grid-template-columns: 1.35fr 1fr 1fr;
}
.lab-controls .metric {
  padding-left: 12px;
}
.accent strong {
  color: var(--amber);
}
.range-ends {
  font-size: 9px;
}
.relativity-site label {
  font-size: 12px;
}
.relativity-site output {
  font-size: 11px;
}
.result-sentence {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.relativity-site .equation-strip .math {
  font-size: 19px;
}
.spacetime-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
}
.spacetime-layout > div:first-child,
.lens-layout > div:first-child {
  min-width: 0;
}
.spacetime-layout canvas {
  height: 450px;
}
.spacetime-controls {
  padding: 33px 30px;
  border-left: 1px solid var(--line);
  background: linear-gradient(135deg, #1f2538, #111927);
}
.spacetime-controls > label {
  margin-top: 22px;
}
.coordinate-controls {
  display: grid;
  gap: 20px;
  margin-top: 25px;
}
.coordinate-card {
  background: #111824;
  border: 1px solid #39465c;
  padding: 18px 17px;
  margin-top: 26px;
  border-radius: 3px;
}
.coordinate-card > span {
  font-size: 9px;
  font-family: var(--mono);
  color: var(--muted);
}
.coordinate-card strong {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--amber);
  line-height: 1.8;
  margin-top: 10px;
}
.coordinate-card small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 5px;
}
.invariant {
  margin-top: 25px;
}
.invariant .pill {
  font-size: 9px;
  color: var(--cyan);
  border-color: #575579;
}
.invariant strong {
  display: block;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.5;
  margin-top: 12px;
}
.invariant p,
.lens-controls-panel > p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 12px;
}
.canvas-foot {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  padding: 8px 20px 20px;
}
.voyage-canvas {
  height: 315px;
}
.trip-totals {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 70px;
  padding: 25px 30px;
  border-top: 1px solid var(--line);
}
.trip-totals > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trip-totals > div > span {
  font: 9px var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.trip-totals strong {
  font: 30px var(--serif);
  font-weight: 400;
  color: var(--cyan);
}
.trip-totals > div:last-child strong {
  color: var(--amber);
}
.trip-versus {
  font: italic 17px var(--serif);
  color: var(--muted);
}
.flight-challenge {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 45px;
  padding: 30px;
  background: linear-gradient(125deg, #352b214d, #202131);
  border-top: 1px solid #5d5046;
}
.flight-challenge .eyebrow {
  color: var(--amber);
}
.flight-challenge h3 {
  font: 30px var(--serif);
  margin-top: 12px;
}
.flight-challenge p:not(.eyebrow) {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 13px;
}
.flight-challenge strong {
  font-weight: 500;
  color: var(--text);
}
.challenge-actions {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 12px;
}
.challenge-actions .button {
  font-size: 11px;
  padding: 11px 15px;
  gap: 18px;
}
.challenge-actions .button.primary {
  margin-top: 0;
  background: var(--amber);
}
.challenge-actions p {
  width: 100%;
  margin-top: 0 !important;
}
.challenge-actions p.success {
  color: #a8e2bb;
}
.gravity-canvas {
  height: 360px;
}
.lens-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
}
.lens-layout canvas {
  height: 370px;
}
.lens-controls-panel {
  padding: 32px 28px;
  background: linear-gradient(135deg, #1d2434, #131b29);
  border-left: 1px solid var(--line);
}
.lens-controls-panel label + label {
  margin-top: 27px;
}
.lens-controls-panel .metric {
  margin-top: 26px;
}
.lens-controls-panel .metric strong {
  color: var(--cyan);
}
.standalone-equations {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 5px 5px;
}
.relativity-site .hero-meta {
  font-size: 9px;
}
.relativity-site .legend {
  font-size: 10px;
}
.relativity-site .equation-strip > div:last-child .result-sentence {
  max-width: 300px;
}
@media (max-width: 1100px) {
  .relativity-site .hero h1 {
    font-size: 61px;
  }
  .relativity-site .hero-meta {
    font-size: 8px;
  }
  .relativity-site .header nav {
    font-size: 11px;
    gap: 18px;
  }
  .spacetime-layout {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .spacetime-controls {
    padding: 25px;
  }
  .coordinate-card strong {
    font-size: 12px;
  }
  .lab-controls {
    gap: 25px;
  }
  .lens-layout {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .lens-controls-panel {
    padding: 26px 23px;
  }
  .trip-totals {
    gap: 45px;
  }
  .relativity-site .chapter-nav a {
    font-size: 10px;
  }
  .flight-challenge {
    gap: 25px;
  }
}
@media (max-width: 850px) {
  .relativity-site .hero h1 {
    font-size: 51px;
  }
  .relativity-site .header nav > a:nth-last-child(2) {
    display: none;
  }
  .three-cols {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .lab-controls {
    padding: 24px 20px;
    gap: 20px;
  }
  .lab-controls .metric {
    padding-left: 0;
  }
  .lab-controls .metric strong {
    font-size: 32px;
  }
  .wide-canvas {
    height: 300px;
  }
  .train-canvas {
    height: 340px;
  }
  .spacetime-layout {
    grid-template-columns: 1fr;
  }
  .spacetime-controls {
    border-left: 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
  }
  .spacetime-controls > .eyebrow {
    grid-column: 1/-1;
  }
  .spacetime-controls > label {
    margin: 0;
    grid-column: 1/-1;
  }
  .coordinate-controls {
    margin: 0;
    grid-column: 1;
  }
  .coordinate-card {
    margin-top: 0;
  }
  .invariant {
    grid-column: 2;
    grid-row: 3/5;
    margin: 0;
  }
  .spacetime-layout canvas {
    height: 400px;
  }
  .lens-layout {
    grid-template-columns: 1fr 1fr;
  }
  .lens-layout .lab-toolbar {
    flex-wrap: wrap;
  }
  .lens-layout canvas {
    height: 400px;
  }
  .trip-totals {
    gap: 30px;
  }
  .trip-totals strong {
    font-size: 27px;
  }
  .flight-challenge h3 {
    font-size: 26px;
  }
  .gravity-canvas {
    height: 330px;
  }
  .relativity-site .legend {
    font-size: 9px;
    gap: 17px;
  }
  .relativity-site .equation-strip {
    grid-template-columns: 1fr 1fr;
  }
  .relativity-site .equation-strip > div:last-child {
    grid-column: 1/-1;
  }
  .relativity-site .hero-meta {
    gap: 9px;
  }
}
@media (max-width: 600px) {
  .relativity-site .hero h1 {
    font-size: 53px;
    line-height: 1.08;
  }
  .relativity-site .hero-art {
    height: 260px;
  }
  .relativity-site .hero-meta {
    font-size: 8px;
    gap: 12px;
  }
  .relativity-site .hero-intro {
    font-size: 14px;
  }
  .relativity-site .header nav a[aria-current] {
    font-size: 11px;
  }
  .relativity-site .section-heading h2 {
    font-size: 41px;
  }
  .relativity-site .lab-toolbar {
    gap: 14px;
  }
  .relativity-site .legend {
    font-size: 8px;
    gap: 10px;
  }
  .motion-controls {
    margin-left: auto;
  }
  .wide-canvas {
    height: 500px;
  }
  .lab-controls {
    padding: 22px 18px;
    gap: 24px;
  }
  .three-cols {
    grid-template-columns: 1fr 1fr;
  }
  .lab-controls > label:first-child {
    grid-column: 1/-1;
  }
  .lab-controls > label:nth-child(2) {
    grid-column: 1/-1;
  }
  .lab-controls .metric strong {
    font-size: 33px;
  }
  .lab-controls .metric > span {
    line-height: 1.8;
  }
  .train-canvas {
    height: 330px;
  }
  .spacetime-layout canvas {
    height: 345px;
  }
  .spacetime-controls {
    display: block;
    padding: 26px 20px;
  }
  .spacetime-controls > label {
    margin-top: 20px;
  }
  .coordinate-controls {
    margin-top: 25px;
  }
  .coordinate-card,
  .invariant {
    margin-top: 25px;
  }
  .coordinate-card strong {
    font-size: 15px;
  }
  .invariant strong {
    font-size: 27px;
  }
  .relativity-site .segmented {
    display: flex;
    flex-wrap: wrap;
  }
  .relativity-site .segmented button {
    flex: 1;
    padding: 9px 12px;
    font-size: 10px;
  }
  .voyage-canvas {
    height: 320px;
  }
  .trip-totals {
    gap: 22px;
    padding: 22px 18px;
    justify-content: space-between;
  }
  .trip-totals > div > span {
    font-size: 7px;
  }
  .trip-totals strong {
    font-size: 23px;
  }
  .trip-versus {
    font-size: 13px;
  }
  .flight-challenge {
    grid-template-columns: 1fr;
    padding: 26px 20px;
    gap: 22px;
  }
  .flight-challenge h3 {
    font-size: 29px;
  }
  .flight-challenge p:not(.eyebrow) {
    font-size: 12px;
  }
  .challenge-actions {
    gap: 12px;
  }
  .gravity-canvas {
    height: 410px;
  }
  .lens-layout {
    grid-template-columns: 1fr;
  }
  .lens-layout canvas {
    height: 325px;
  }
  .lens-controls-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 27px 22px;
  }
  .canvas-foot {
    font-size: 8px;
    line-height: 1.8;
  }
  .relativity-site .equation-strip {
    grid-template-columns: 1fr;
  }
  .relativity-site .equation-strip > div:last-child {
    grid-column: auto;
  }
  .relativity-site .equation-strip .math {
    font-size: 19px;
  }
  .relativity-site .source-links a span {
    max-width: 140px;
  }
  .relativity-site .art-bottom .math {
    font-size: 16px;
  }
  .relativity-site .art-bottom > span:last-child {
    max-width: 120px;
    text-align: right;
    font-size: 8px;
  }
}