.why-toggle {
  background:white;
  border:1px solid #dfdbea;
  border-radius:9px;
  padding:11px 13px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  box-shadow:0 2px 3px #292b4003;
}
.question-icon {
  border:1.5px solid #8a70d9;
  color:#8a70d9;
  width:18px;
  height:18px;
  line-height:16px;
  text-align:center;
  border-radius:50%;
  font-size:12px;
  font-weight:700;
}
.why-toggle>span:last-child {
  background:#f0f0f5;
  color:#74758a;
  font-size:12px;
  border-radius:4px;
  padding:3px 6px;
}
.why-toggle[aria-pressed=true] {
  border-color:#b0a1ec;
  background:#f3f0ff;
}
.section-label {
  font-size:12px;
  letter-spacing:1.2px;
  color:#858496;
  font-weight:650;
}
.control.compact {
  margin-top:15px;
}
#scene {
  width:100%;
  display:block;
  background:radial-gradient(ellipse at 45% 57%,#f8f6ff 0%,#fefeff 70%);
  margin-top:5px;
  min-height:245px;
}
.force-legend {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:8px 10px 16px;
  flex-wrap:wrap;
}
.force-legend button {
  padding:0;
  background:none;
  border:0;
  font-size:12px;
  color:#80788e;
  display:flex;
  align-items:center;
  gap:5px;
}
.force-legend i {
  height:6px;
  width:6px;
  background:var(--vector);
  border-radius:50%;
  display:inline-block;
}
.force-legend button.selected {
  color:#423266;
  font-weight:700;
}
.force-detail {
  margin:0 20px 14px;
  padding:11px;
  border-radius:7px;
  background:#f5f2ff;
  color:#756491;
  font-size:12px;
  line-height:1.6;
}
.metrics i {
  font:italic 13px Georgia,serif;
  color:#afa4c6;
}
.graph-tabs {
  display:flex;
  padding:3px;
  background:#f5f4f9;
  border-radius:6px;
  gap:2px;
}
.graph-tabs button {
  padding:5px 8px;
  font-size:12px;
  border:0;
  border-radius:4px;
  background:none;
  color:#8f889c;
}
.graph-tabs button.active {
  background:#fff;
  color:#7760b4;
  box-shadow:0 1px 4px #34275713;
}
#graph {
  display:block;
  width:100%;
  margin-top:10px;
}
.explanation-card {
  background:#f7f4ff;
  border-color:#e4ddf8;
  padding:19px;
}
.explanation-card h2 {
  color:#66508d;
}
.explanation-card p {
  font-size:14px;
  line-height:1.8;
  color:#817091;
  margin:14px 0 17px;
  min-height:114px;
}
.explanation-foot {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #e7dff5;
  padding-top:12px;
  font-size:12px;
  color:#9781b3;
  gap:6px;
}
.explanation-foot>span:first-child {
  font-weight:650;
  letter-spacing:.5px;
}
.equation {
  padding:11px 0;
  border-top:1px solid #f0edf4;
}
.equation-label {
  color:#777082;
  font-size:12px;
  margin-bottom:7px;
  display:flex;
  gap:6px;
  align-items:center;
}
.equation-label i {
  width:5px;
  height:5px;
  border-radius:50%;
  display:inline-block;
  background:var(--vector);
}
.substitution {
  font:12px ui-monospace,SFMono-Regular,Consolas,monospace;
  line-height:1.8;
  color:#777082;
  margin-top:5px;
  overflow-wrap:anywhere;
}
.substitution b {
  font-weight:550;
  color:#80718f;
}
.equation-why {
  font-size:12px;
  color:#81718f;
  line-height:1.6;
  margin:8px 0 0;
  padding:8px;
  background:#f8f6fc;
  border-radius:5px;
}
.why-hint {
  font-size:12px;
  color:#777082;
  margin:12px 0 0;
  line-height:1.5;
}
.why-hint b {
  font-weight:500;
  color:#9781b2;
}
.challenge-target {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:15px 0 10px;
  padding:11px 15px;
  background:#ffffff80;
  border:1px solid #e9e1fa;
  border-radius:7px;
  font-size:23px;
  letter-spacing:-.6px;
  font-weight:550;
}
.challenge-target small {
  font-size:12px;
  font-weight:450;
}
.target-dashes {
  font-size:17px;
  letter-spacing:1px;
  color:#bfb0d8;
}
.challenge-card .leave-challenge {
  border:0;
  font-size:12px;
  text-align:center;
  background:none;
  margin:6px 0 0;
  padding:4px;
}
@media(min-width:1450px) {
  .explanation-card p {
    font-size:14px;
  }
  .equation {
    padding:13px 0;
  }
}
@media(max-width:1250px) {
  .explanation-card {
    padding:16px;
  }
  .force-legend {
    gap:8px;
  }
  .graph-tabs {
    margin-left:auto;
  }
}
@media(max-width:1050px) {
  .explanation-card p {
    min-height:0;
  }
  .scene-card #scene {
    max-height:380px;
  }
}
@media(max-width:700px) {
  .why-toggle {
    font-size:12px;
    padding:9px;
    gap:6px;
    white-space:nowrap;
  }
  .why-toggle>span:last-child {
    display:none;
  }
  .incline-lab .controls-card>.gravity-section {
    grid-row:3/5;
  }
  .explanation-card p {
    font-size:15px;
    line-height:1.7;
  }
  .equation-label {
    font-size:12px;
  }
  .substitution {
    font-size:12px;
  }
  .formula {
    font-size:18px;
  }
  .equation-why {
    font-size:14px;
  }
  .scene-card #scene {
    min-height:230px;
  }
  .force-legend {
    gap:11px;
    padding:10px 12px 13px;
  }
  .force-legend button {
    font-size:12px;
  }
  .graph-tabs button {
    font-size:12px;
  }
}
@media(max-width:700px) {
  #scene text {
    font-size:18px;
  }
  #scene>text:nth-last-child(-n+2) {
    display:none;
  }
}
@media(max-width:480px) {
  .why-toggle {
    position:absolute;
    top:-3px;
    right:0;
    padding:7px;
  }
  .graph-tabs {
    margin-top:10px;
    width:max-content;
  }
  .metrics i {
    display:none;
  }
  .force-legend button {
    padding:4px;
  }
  .force-legend {
    gap:6px;
  }
}
@media(max-width:700px) {
  #graph text {
    font-size:17px;
  }
}