@layer pages {
  .fluid {
    & .example {
      padding-block: var(--space-20);
    }

    & .params fieldset {
      margin-block-start: var(--space-24);
    }

    & .chart {
      margin: var(--space-24) 0 0;

      & svg {
        display: block;
        inline-size: 100%;
        block-size: auto;
        overflow: visible;
      }

      & .axis {
        stroke: var(--color-line);
      }

      & .guide {
        stroke: var(--color-line-soft);
        stroke-dasharray: 3 3;
      }

      & .tick {
        fill: var(--color-muted);
        font: 17px var(--font-text);
      }

      & .curve {
        fill: none;
        stroke: var(--color-cyan);
        stroke-width: 3;
        stroke-linejoin: round;
      }

      & .point {
        fill: var(--color-paper);
        stroke: var(--color-charcoal);
        stroke-width: 2;
      }

      & .now {
        stroke: var(--color-charcoal);
        stroke-dasharray: 2 4;
      }

      & .current {
        fill: var(--color-charcoal);
      }

      @media (forced-colors: active) {
        & :is(.curve, .axis, .point, .now) {
          stroke: CanvasText;
        }
      }
    }

    & .viewport {
      max-block-size: 240px;
      overflow: auto;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-control);
      background: var(--color-paper);
      contain: layout paint;
    }

    & [data-property] {
      margin: 0;
      padding: var(--space-16);
      color: var(--color-charcoal);
      font: 16px/1.5 var(--font-text);
    }

    & [data-property='gap'] {
      display: flex;

      & span {
        flex: none;
        padding: var(--space-12) var(--space-24);
        border: 1px solid var(--color-line);
        background: var(--color-cyan-soft);
      }
    }
  }
}