* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --h: 330;
  --s: 88%;
  --l: 66%;
  --brand-color-bg: hsl(var(--h) var(--s) var(--l));
  --brand-color-fg: hsl(0 0% 99%);
  --border: 1px solid var(--brand-color-bg);
  --shadow-blur: 1.5rem;
  --shadow-color: hsla(var(--h) var(--s) var(--l) / 0.6);
  --shadow-y: 1rem;
  ---shadow-y: calc(var(--shadow-y) * -1);
  --space: clamp(1.125rem, 0.8rem + 1.3cqi, 1.875rem);
  --gradient: linear-gradient(
    165deg,
    transparent 50%,
    hsla(var(--h) var(--s) var(--l) / 0.15) 125%
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --l: 46%;
  }
}

html {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 0.6rem + 1.125cqi, 1.125rem);
  line-height: 1.5;
  padding: 2rem;
  min-height: 100%;
}

h2 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

button {
  font: inherit;
  line-height: normal;
  padding: 0.5rem 1.5rem 0.6rem;
  background: var(--brand-color-bg);
  color: var(--brand-color-fg);
  border: unset;
  border-radius: 0.25rem;
}

button:active {
  translate: 0 1px;
}

.flow > * + * {
  -webkit-margin-before: var(--space);
          margin-block-start: var(--space);
}

.container {
  display: grid;
  grid-auto-rows: 1fr;
  border: var(--border);
  border-radius: 1rem;
  inline-size: min(55rem, 100%);
}

.intro {
  padding: var(--space);
  background-image: var(--gradient);
}

.details {
  display: grid;
  grid-template-rows: auto 1fr auto;
  -webkit-border-before: var(--border);
          border-block-start: var(--border);
}

.details :where(header, footer) {
  padding: calc(var(--space) / 2) var(--space);
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  background-image: var(--gradient);
}

.scroll-container {
  contain: size;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--brand-color-bg) transparent;
  padding: var(--space);
  border-block: var(--border);
  -webkit-animation: scroll-shadow-inset linear;
          animation: scroll-shadow-inset linear;
  animation-timeline: scroll(self);
}

@-webkit-keyframes scroll-shadow-inset {
  from {
    box-shadow: inset 0 var(---shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }

  to {
    box-shadow: inset 0 var(--shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }
}

@keyframes scroll-shadow-inset {
  from {
    box-shadow: inset 0 var(---shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }

  to {
    box-shadow: inset 0 var(--shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-color);
  }
}

@media (min-width: 40rem) {
  .container {
    grid-template-columns: 1fr 1fr;
  }

  .details {
    -webkit-border-before: unset;
            border-block-start: unset;
    -webkit-border-start: var(--border);
            border-inline-start: var(--border);
  }
}