.quarter-profit {
  margin: 5px 0 27px;
  padding: 24px 26px;
  border-radius: 18px;
  background: #08283a;
  color: #fff;
  box-shadow: 0 14px 34px rgba(6, 25, 54, .12);
}
.quarter-profit.down { background: #4a2430; }
.quarter-profit.flat { background: #34445d; }
.quarter-profit-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 22px;
}
.quarter-profit-heading > span {
  color: rgba(255,255,255,.68);
  font-size: 15px;
  letter-spacing: .12em;
}
.quarter-profit-heading > strong {
  color: #6ee7d8;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.25;
}
.quarter-profit.down .quarter-profit-heading > strong { color: #ffb3b8; }
.quarter-profit-history {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.quarter-profit-point {
  min-width: 0;
  padding: 14px 15px 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}
.quarter-profit-point.current {
  border-color: rgba(110,231,216,.48);
  background: rgba(110,231,216,.11);
}
.quarter-profit.down .quarter-profit-point.current {
  border-color: rgba(255,179,184,.5);
  background: rgba(255,179,184,.1);
}
.quarter-profit-point span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 13px;
}
.quarter-profit-point strong {
  display: block;
  margin-top: 5px;
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1.2;
  white-space: nowrap;
}
.quarter-profit-point small {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 500;
}
.quarter-profit-point em {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.48);
  font-size: 12px;
  font-style: normal;
}
.quarter-profit-point em.up { color: #6ee7d8; }
.quarter-profit-point em.down { color: #ffb3b8; }
.quarter-profit-point em.flat { color: rgba(255,255,255,.68); }
.quarter-profit-chart {
  position: relative;
  margin-top: 14px;
  overflow-x: auto;
}
.quarter-profit-chart svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  overflow: visible;
}
.chart-grid {
  stroke: rgba(255,255,255,.08);
  stroke-width: 1;
  stroke-dasharray: 4 7;
}
.chart-zero {
  stroke: rgba(255,255,255,.24);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.chart-line {
  fill: none;
  stroke: #6ee7d8;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quarter-profit.down .chart-line { stroke: #ffb3b8; }
.chart-point circle {
  fill: #0b3448;
  stroke: #6ee7d8;
  stroke-width: 3;
}
.quarter-profit.down .chart-point circle {
  fill: #4a2430;
  stroke: #ffb3b8;
}
.chart-point.current circle {
  fill: #6ee7d8;
  stroke: #fff;
}
.quarter-profit.down .chart-point.current circle { fill: #ffb3b8; }
.chart-value {
  fill: rgba(255,255,255,.9);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
}
.chart-point.current .chart-value { fill: #6ee7d8; }
.quarter-profit.down .chart-point.current .chart-value { fill: #ffb3b8; }
.chart-label {
  fill: rgba(255,255,255,.58);
  font-size: 12px;
}
.chart-point.current .chart-label {
  fill: #fff;
  font-weight: 700;
}
.chart-unit {
  position: sticky;
  left: 0;
  display: block;
  margin-top: -4px;
  color: rgba(255,255,255,.46);
  font-size: 11px;
}
.quarter-profit > p {
  margin: 17px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .quarter-profit { margin: 2px 0 23px; padding: 20px 18px; border-radius: 15px; }
  .quarter-profit-heading { display: block; }
  .quarter-profit-heading > strong { display: block; margin-top: 5px; font-size: 27px; }
  .quarter-profit-history {
    display: flex;
    gap: 9px;
    margin: 17px -18px 0;
    padding: 0 18px 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .quarter-profit-point { flex: 0 0 152px; scroll-snap-align: start; }
  .quarter-profit-point strong { font-size: 26px; }
  .quarter-profit-chart { margin-right: -18px; }
  .quarter-profit-chart svg { width: 620px; }
  .quarter-profit > p { font-size: 13px; }
}