.task22-formula {
  display: grid;
  min-height: 112px;
  place-items: center;
  padding: 18px;
  border: 1px solid #ded3ed;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f7f1fc);
  color: #282438;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.65;
  text-align: center;
}

.task22-piecewise {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  vertical-align: middle;
}

.task22-brace {
  align-self: stretch;
  font-family: Georgia, serif;
  font-size: 4.9rem;
  font-weight: 400;
  line-height: .95;
  transform: scaleX(.68);
  transform-origin: right center;
}

.task22-piecewise > span:last-child {
  display: grid;
  gap: 4px;
}

.task22-piecewise > span:last-child > span {
  display: grid;
  grid-template-columns: minmax(120px, auto) auto;
  gap: 14px;
  align-items: baseline;
}

.task22-piecewise b { font-weight: 750; }
.task22-piecewise i { color: #665d72; font-style: normal; white-space: nowrap; }

.task22-solution-steps { margin: 0; padding-left: 24px; }
.task22-solution-steps li { margin: 8px 0; }
.task22-solution-graph { display: grid; gap: 9px; margin-top: 16px; }
.task22-solution-graph > strong { color: #68458f; }
.task22-plot { display: block; width: min(100%, 560px); height: auto; margin-inline: auto; }
.task22-grid { stroke: #e8e0f1; stroke-width: 1; }
.task22-axis { stroke: #62586d; stroke-width: 1.8; }
.task22-asymptote { stroke: #d3994a; stroke-width: 1.7; stroke-dasharray: 7 6; }
.task22-curve { fill: none; stroke: #7654ad; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.task22-hole { fill: #fff; stroke: #a34e7d; stroke-width: 3; }
.task22-point { fill: #7654ad; stroke: #fff; stroke-width: 1.5; }
.task22-axis-label { fill: #40394a; font: 700 16px system-ui, sans-serif; }

@media (max-width: 560px) {
  .task22-formula { min-height: 96px; padding: 13px 10px; font-size: .98rem; overflow-x: auto; }
  .task22-piecewise { gap: 3px; }
  .task22-brace { font-size: 4.2rem; }
  .task22-piecewise > span:last-child > span { grid-template-columns: minmax(95px, auto) auto; gap: 7px; }
}