.demo {
  border: 1px solid #3a6b64;
  border-radius: 18px;
  padding: 26px;
  background: linear-gradient(135deg, #102932, #091820);
  margin: 32px 0 75px;
}
.demo h2 {
  margin: 8px 0 10px;
  font-size: clamp(27px, 4vw, 42px);
}
.demo .intro {
  color: #bed0d0;
  max-width: 800px;
}
.demo .label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #87ecca;
  font-weight: 800;
}
.choices {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 22px 0;
}
.choices button {
  border: 1px solid #50736a;
  background: #112c30;
  color: #d4eee8;
  font: 600 13px system-ui;
  padding: 11px 14px;
  border-radius: 7px;
  cursor: pointer;
}
.choices button[aria-pressed="true"] {
  background: #7fe6ca;
  color: #09231d;
  border-color: #7fe6ca;
}
.demo-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.demo-panel {
  padding: 21px;
  border-radius: 11px;
  background: #0a1721;
  border: 1px solid #31505a;
  min-height: 170px;
}
.demo-panel p {
  font-size: 17px;
  color: #edf8f1;
}
.demo-panel.out {
  background: #173331;
}
.demo-note {
  font-size: 12px;
  color: #aac2bd;
  margin: 18px 0 0;
}
@media (max-width: 650px) {
  .demo {
    padding: 19px;
  }
  .demo-panels {
    grid-template-columns: 1fr;
  }
  .demo-panel {
    min-height: 120px;
  }
}