.axisLinesArticle .axisVisual {
  max-width: 780px;
  margin: 32px auto 44px;
}

.axisVisual [data-lightbox] {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
}

.axisVisual img {
  display: block;
  width: 100%;
  height: auto;
}

.axisVisual figcaption {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: #476066;
}

.axisVisual a:focus-visible {
  outline: 3px solid #087b82;
  outline-offset: 4px;
}

.axisLinesArticle .axisInteractive {
  margin: 32px 0 44px;
  border: 1px solid #d0dfd9;
  border-radius: 18px;
  overflow: hidden;
  background: #f5f7f3;
}

.axisDemoHeader {
  padding: 26px 28px;
  background: #16363b;
  color: #fff;
}

.axisLinesArticle .axisDemoHeader h2 {
  margin: 8px 0 12px;
  padding: 0;
  border: 0;
  font-size: clamp(23px, 3vw, 32px);
  color: #ffb29b;
}

.axisLinesArticle .axisDemoHeader p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
}

.axisLinesArticle .axisDemoHeader p:first-child {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.axisDemoStage {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px;
}

.axisDemoStage.resourceImageShareWrap {
  display: grid;
}

.axisDemoStage svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.axisDemoStage .resourcePinIcon {
  width: 14px;
  height: 14px;
  border-radius: 0;
}

.axisDemoControls {
  margin: 0 20px;
  padding: 24px;
  border: 1px solid #d0dfd9;
  border-radius: 12px;
  background: #fff;
}

.axisDemoModes,
.axisDemoActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.axisDemoControls button {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #b1c8c4;
  border-radius: 999px;
  color: #16363b;
  background: #fff;
  font: 700 15px "Source Sans 3", "Segoe UI", sans-serif;
  cursor: pointer;
}

.axisDemoModes button[aria-pressed="true"],
.axisDemoActions button:first-child {
  color: #fff;
  background: #087b82;
  border-color: #087b82;
}

.axisDemoControls button:hover {
  filter: brightness(.93);
}

.axisDemoActions [data-axis-play],
.axisDemoActions [data-sequence-play] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 104px;
}

[data-axis-play] svg,
[data-sequence-play] svg {
  width: 16px;
  height: 16px;
}

[data-axis-play] .axisPauseIcon,
[data-axis-play][aria-pressed="true"] .axisPlayIcon,
[data-sequence-play] .axisPauseIcon,
[data-sequence-play][aria-pressed="true"] .axisPlayIcon {
  display: none;
}

[data-axis-play][aria-pressed="true"] .axisPauseIcon,
[data-sequence-play][aria-pressed="true"] .axisPauseIcon {
  display: block;
}

.axisDemoControls :is(button, input):focus-visible {
  outline: 3px solid #087b82;
  outline-offset: 4px;
}

.axisLinesArticle .axisDemoControls p {
  margin: 18px 0;
  font-size: 17px;
  line-height: 1.6;
  color: #38545a;
  min-height: 3.2em;
}

.axisDemoScrubber {
  display: grid;
  grid-template-columns: auto 1fr 3.5em;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: #16363b;
  font-size: 16px;
}

.axisDemoScrubber input {
  min-width: 0;
  width: 100%;
  min-height: 32px;
  accent-color: #087b82;
  cursor: ew-resize;
}

.axisDemoScrubber output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.axisDemoActions label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  cursor: pointer;
}

.axisDemoActions input {
  width: 18px;
  height: 18px;
  accent-color: #087b82;
}

.axisLinesArticle p.axisDemoNote {
  margin: 20px 28px 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #476066;
}

.axisSequence > .resourceImageShareWrap > svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.axisLinesArticle .axisSequenceControls {
  margin: 18px 0 0;
  padding: 20px;
}

.axisTiltReplay {
  position: absolute;
  top: calc(11.6923% + 12px);
  left: calc(4.4% + 12px);
  z-index: 2;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #c9d7d5;
  border-radius: 999px;
  background: #fff;
  color: #17393e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 2px 8px #17393e14;
}

.axisTiltReplay:hover {
  background: #edf5f3;
}

.axisTiltReplay:focus-visible {
  outline: 3px solid #087b82;
  outline-offset: 3px;
}

.axisLinesArticle .axisSequenceControls p {
  margin: 0;
  min-height: 1.6em;
}

.axisSequenceControls .axisDemoActions a {
  color: #087b82;
  font-size: 15px;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .axisDemoStage {
    gap: 8px;
    padding: 10px;
  }

  .axisDemoHeader {
    padding: 22px 18px;
  }

  .axisDemoControls {
    margin: 0 10px;
    padding: 16px;
  }

  .axisDemoModes {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .axisDemoScrubber {
    gap: 8px;
  }
}