/* Shared presentation only; computation and diagrams stay in each demonstration. */
html {
  scroll-padding-top: 100px;
}
body {
  background: #f8f7f1;
  color: #243c32;
  padding: 0 28px 28px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.course-return {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto 28px;
  padding: 17px 0;
  border-bottom: 1px solid #cfd9c6;
  background: transparent;
  color: #244b3a;
  font:
    12px/1.6 "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}
.course-return a {
  color: #244b3a;
  text-decoration: none;
  font-weight: 500;
}
.course-return a:hover {
  color: #94733d;
}
.course-return .lab-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
}
.lab-brand svg {
  width: 30px;
}
.lab-directory {
  color: #657c62 !important;
  font-size: 11px;
}
.lab-pagination {
  display: flex;
  gap: 18px;
  font-size: 11px;
}
.course-return a:focus-visible {
  outline: 2px solid #957744;
  outline-offset: 4px;
}
.container > header {
  background: #173e34;
  background-image: linear-gradient(110deg, #173e34, #285942);
  color: #fbf9eb;
  border-radius: 5px;
  padding: 30px 25px;
  box-shadow: none;
  border-bottom: 3px solid #bca06d;
}
.container > header h1 {
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-weight: 600;
  line-height: 1.5;
  font-size: 28px;
  letter-spacing: 0.02em;
}
.container > header p {
  font-size: 13px;
  color: #c4d2b8;
  opacity: 1;
  margin-top: 7px;
}
.card {
  border: 1px solid #dbe2d3;
  border-radius: 5px;
  box-shadow: 0 3px 13px #233e2a06;
}
.card-title {
  color: #2c6145;
  border-left-color: #869b66;
  font-size: 16px;
}
.bg-desc {
  background: #f1efe1;
  border-color: #ded8bc;
  color: #5a573c;
  border-radius: 5px;
  font-size: 15px;
  line-height: 1.9;
}
.bg-desc strong {
  color: #7b643c;
}
.bg-desc .show-btn,
.show-btn {
  background: #2a5b43;
  box-shadow: none;
  border-radius: 3px;
}
.bg-desc .show-btn:hover,
.show-btn:hover {
  background: #1c4833;
  box-shadow: none;
}
.footer {
  color: #738064;
  font-size: 11px;
}
.solution-section.show {
  max-height: none;
}
input[type="range"] {
  accent-color: #3e7151;
}
.main-grid > * {
  min-width: 0;
}
.card:has(> svg),
.card:has(> canvas) {
  overflow-x: auto;
}
.card > svg {
  max-width: 100%;
  height: auto;
}
.diagram-wrap,
.svg-wrap,
.diagram-container {
  max-width: 100%;
  overflow-x: auto;
}
.course-return a {
  white-space: nowrap;
}
@media (max-width: 700px) {
  body {
    padding: 0 14px 20px;
  }
  .course-return {
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 18px;
    padding: 13px 0;
  }
  .course-return .lab-brand {
    font-size: 12px;
    margin-right: auto;
  }
  .lab-brand svg {
    width: 26px;
  }
  .lab-directory {
    font-size: 10px;
  }
  .lab-pagination {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid #e0e5d6;
    padding-top: 8px;
    margin-top: 3px;
  }
  .container > header {
    padding: 24px 18px;
    margin-bottom: 20px;
  }
  .container > header h1 {
    font-size: 22px;
  }
  .container > header p {
    font-size: 11px;
  }
  .bg-desc {
    font-size: 13px;
    padding: 18px 18px 56px;
  }
  .card {
    padding: 18px;
  }
  .card-title {
    font-size: 15px;
  }
  .main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .course-return a {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}
.result-card,
.rc,
.result-big {
  background: #2b5945;
  border-radius: 5px;
  box-shadow: none;
}
.rc-phi,
.rc-total,
.rc-q {
  background: #80683f;
}
.rc-hr,
.rc-engine {
  background: #85583f;
}
.rc-motor,
.rc-h,
.rc-time {
  background: #3f675d;
}
.result-card.bad {
  background: #993e36;
}
.rc-check.bad {
  background: #993e36;
}
.rc.a12-one {
  background: #2b5945;
}
.rc.a11-zero {
  background: #66735e;
}
.mid-item {
  background: #f0f3e8;
  border-color: #d9e2cc;
  border-radius: 5px;
}
.mid-item .m-label {
  color: #5e7855;
}
.mid-item .m-val {
  color: #325637;
}
.material-info,
.mat-info {
  background: #edf3e5;
  color: #476243;
  border-radius: 5px;
}
.mat-info .v,
.material-info .lambda-val {
  color: #325637;
}
.result-display {
  background: #edf1e4;
  border-radius: 5px;
}
.result-card .value,
.rc .value {
  font-weight: 600;
}
.case-tab.active {
  background: #2a5b43;
  border-color: #2a5b43;
}
.case-tab:hover {
  background: #edf1e4;
  border-color: #8a9b6c;
}
.case-tab.active:hover {
  background: #2a5b43;
}
.img-box {
  min-width: 0;
  background: #f0f1e7;
  border-color: #dbe2d0;
  border-radius: 5px;
}
.img-box img {
  width: 100%;
  height: auto;
}
.img-box .d-title {
  color: #5d704a;
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.layer-table th {
  background: #3c6149;
}
.layer-table tr:nth-child(even) {
  background: #f0f3e8;
}
input[type="range"] {
  background: #80956c;
}
input[type="range"]::-webkit-slider-thumb {
  border-color: #547544;
}
input[type="range"]::-moz-range-thumb {
  border-color: #547544;
}
@media (max-width: 400px) {
  .result-cards,
  .result-grid {
    gap: 9px;
  }
  .rc .value,
  .result-card .value {
    font-size: 20px;
  }
  .rc .label,
  .result-card .label {
    font-size: 11px;
  }
  .mid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}