.controls {
  --control-dimension: 1.6em;
  display: inline-block;
}

.controls label {
  position: relative;
  display: flex;
  gap: 0.33em;
  align-items: center;
  color: var(--theme-color-foreground);
}

.controls input[type="checkbox"] {
  display: none;
  position: relative;
  background: blue;
  width: var(--control-dimension);
  height: var(--control-dimension);
  border-radius: 100%;
}

.controls input[type="checkbox"] + svg {
  width: var(--control-dimension);
  height: var(--control-dimension);
  fill: var(--theme-color-foreground);
  opacity: 0.4;
}

.controls input[type="checkbox"]:checked + svg {
  opacity: 1.0;
}

theme-hero {
  display: block;
  position: relative;
  width: 100vw;
  min-height: 100vw;
}

theme-hero [slot="carousels"] {
  position: relative;
  background: var(--theme-color-foreground);

  width: 100vw;
  min-height: 100vw;

  display: grid;
  grid-template-columns: repeat(2, 50vw);
  grid-template-rows: repeat(3, 50vw);
}

@media screen and (min-width: 600px) {
  theme-hero [slot="carousels"] {
    grid-template-columns: repeat(3, 33.3vw);
    grid-template-rows: repeat(3, 33.3vw);
  }
}

@media screen and (min-width: 800px) {
  theme-hero [slot="carousels"] {
    grid-template-columns: repeat(4, 25vw);
    grid-template-rows: repeat(4, 25vw);
  }
}

@media screen and (min-width: 1200px) {
  theme-hero [slot="carousels"] {
    grid-template-columns: repeat(5, 20vw);
    grid-template-rows: repeat(5, 20vw);
  }
}

slotted-carousel.decorative {
  position: relative;
  display: block;
  grid-row: var(--grid-row);
  grid-column: var(--grid-column);
}

slotted-carousel.decorative carousel-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

slotted-carousel.decorative carousel-slide {
  --slide-offset: min(var(--previous-active-offset), var(--next-active-offset));
  z-index: calc(var(--slide-count) - var(--slide-offset));

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  opacity: 0;

  transition: transform var(--transition-duration) var(--transition-easing-function);
}

slotted-carousel.decorative :is(carousel-slide[active], carousel-slide[previous-active="1"], carousel-slide[next-active="1"]) {
  opacity: 1;
}

slotted-carousel.decorative carousel-track.transition-horizontal carousel-slide {
  --slide-translate-x: calc(var(--slide-offset) * 100%);
}

slotted-carousel.decorative carousel-track.transition-horizontal.transition-normal-direction carousel-slide[previous-active],
slotted-carousel.decorative carousel-track.transition-horizontal.transition-reverse-direction carousel-slide[next-active] {
  transform: translateX(calc(var(--slide-translate-x) * -1));
}

slotted-carousel.decorative carousel-track.transition-horizontal.transition-normal-direction carousel-slide[next-active],
slotted-carousel.decorative carousel-track.transition-horizontal.transition-reverse-direction carousel-slide[previous-active] {
  transform: translateX(calc(var(--slide-translate-x) * +1));
}

slotted-carousel.decorative carousel-track.transition-vertical carousel-slide {
  --slide-translate-y: calc(var(--slide-offset) * 100%);
}

slotted-carousel.decorative carousel-track.transition-vertical.transition-normal-direction carousel-slide[previous-active],
slotted-carousel.decorative carousel-track.transition-vertical.transition-reverse-direction carousel-slide[next-active] {
  transform: translateY(calc(var(--slide-translate-y) * -1));
}

slotted-carousel.decorative carousel-track.transition-vertical.transition-normal-direction carousel-slide[next-active],
slotted-carousel.decorative carousel-track.transition-vertical.transition-reverse-direction carousel-slide[previous-active] {
  transform: translateY(calc(var(--slide-translate-y) * +1));
}

slotted-carousel.decorative .tile {
  width: 100%;
  height: 100%;
}

.sparse-tile-grid-parent {
  --min-height: 100%;
  min-height: var(--min-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

sparse-tile-grid,
sparse-tile-grid [slot="carousels"] {
  position: relative;
  width: 100%;
  height: 100%;
}

sparse-tile-grid [slot="carousels"] {
  --rows-repeat-count: 2;
  --columns-repeat-count: 2;
  --rows-repeat-track-size: calc(100vw / var(--columns-repeat-count));
  --columns-repeat-track-size: calc(100vw / var(--columns-repeat-count));

  display: grid;
  grid-template-rows: repeat(var(--rows-repeat-count), var(--rows-repeat-track-size));
  grid-template-columns: repeat(var(--columns-repeat-count), var(--columns-repeat-track-size));
}

@media screen and (min-width: 600px) {
  sparse-tile-grid [slot="carousels"] {
    --rows-repeat-count: 3;
    --columns-repeat-count: 3;
  }
}

@media screen and (min-width: 800px) {
  sparse-tile-grid [slot="carousels"] {
    --rows-repeat-count: 4;
    --columns-repeat-count: 4;
  }
}

@media screen and (min-width: 1200px) {
  sparse-tile-grid [slot="carousels"] {
    --rows-repeat-count: 5;
    --columns-repeat-count: 5;
  }
}

.bg-blank {
  background: var(--theme-color-background);
}

.bg-dot {
  --background-size-dim: 4%;
  background: radial-gradient(circle at center, var(--circle-color) 30%, transparent 31%),
    var(--background-color);
  background-size: var(--background-size-dim) var(--background-size-dim);
}

.bg-text {
  color: var(--theme-color-background);
  display: grid;
  justify-content: start;
  align-items: start;
  container-type: size;
  container-name: tile-bg-text;
}

.bg-text h1 {
  font-size: 1.0em;
  line-height: 1.2;
  padding: 1em;
  margin: 0;
}

@container tile-bg-text (min-width: 0px) {
  .bg-text h1 {
    /*  theme-hero textOption max length === 10
         but it looks like dividing the container by 8
         gives us the best space filling  */
    font-size: calc(100cqw/8.0);
  }
}

.bg-dot-white-on-black {
  --circle-color: var(--theme-color-background);
  --background-color: var(--theme-color-foreground);
}

.bg-dot-black-on-white {
  --circle-color: var(--theme-color-foreground);
  --background-color: var(--theme-color-background);
}

.background-size--xs {
  --background-size-dim: 10%;
}

.background-size--sm {
  --background-size-dim: 20%;
}

.background-size--md {
  --background-size-dim: 33.33%;
}

.background-size--lg {
  --background-size-dim: 50%;
}

.background-size--xl {
  --background-size-dim: 100%;
}

.bg-back-slash {
  --bg-slash-line-gap: 5vw;
  --bg-slash-line-width: 2vw;
  background: repeating-linear-gradient(
    45deg,
    var(--theme-color-foreground),
    var(--theme-color-foreground) var(--bg-slash-line-gap),
    var(--theme-color-background) var(--bg-slash-line-width),
    var(--theme-color-background) calc(var(--bg-slash-line-gap) + var(--bg-slash-line-width))
  );
}

.bg-forward-slash {
  --bg-slash-line-gap: 5vw;
  --bg-slash-line-width: 2vw;
  background: repeating-linear-gradient(
    -45deg,
    var(--theme-color-foreground),
    var(--theme-color-foreground) var(--bg-slash-line-gap),
    var(--theme-color-background) var(--bg-slash-line-width),
    var(--theme-color-background) calc(var(--bg-slash-line-gap) + var(--bg-slash-line-width))
  );
}

:root {
  --theme-font-family: Helvetica, sans-serif;
  --theme-monospace-font-family: Monaco, monospace;
  --theme-color-background: rgb(240, 237, 237);
  --theme-color-foreground: rgb(65, 64, 97);

  --transition-duration: 0.28s;
  --transition-easing-function: cubic-bezier(0.1, 0.6, 0.9, 0.4);

  --border-bottom-width: 2px;
}

@media screen and (min-width: 800px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 800px) and (min-resolution: 2x) {
  :root {
    --border-bottom-width: 4px;
  }
}

@media screen and (min-width: 800px) and (-webkit-min-device-pixel-ratio: 3), screen and (min-width: 800px) and (min-resolution: 3x) {
  :root {
    --border-bottom-width: 6px;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--theme-font-family);
  font-size: 20px;
  line-height: 1.4em;
  background: var(--theme-color-background);
}

@media screen and (min-width: 600px) {
  body {
    font-size: 24px;
  }
}

@media screen and (min-width: 800px) {
  body {
    font-size: 28px;
  }
}

@media screen and (min-width: 1200px) {
  body {
    font-size: 32px;
  }
}

::-moz-selection {
  background: var(--theme-color-foreground);
  color: var(--theme-color-background);
}

::selection {
  background: var(--theme-color-foreground);
  color: var(--theme-color-background);
}

/* util */

.relative {
  position: relative;
}

.inline-block {
  display: inline-block;
}

.sticky {
  position: sticky;
  /* 0.5 em padding top + bottom */
  /* 1.6em control height */
  top: calc(100vh - 0.5em - 0.5em - 1.6em);
  z-index: 100;
}

.right-aligned {
  display: flex;
  justify-content: flex-end;
}

.full-width {
  width: 100%;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.padded {
  padding: 0.5em;
}

.theme-background {
  background: var(--theme-color-background);
}

.align-items-end {
  align-items: flex-end;
}

.align-items-start {
  align-items: flex-start;
}

/* theme */

.theme-content-rail {
  --padding: 1em;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--padding);
  width: 100%;
  z-index: 1;
}

.align-items-center {
  align-items: center;
}

.min-height-100-width {
  min-height: 100vw;
  justify-content: center;
}

@media screen and (orientation: portrait) {
  .min-height-100-width {
    min-height: 100vh;
  }
}

@media screen and (orientation: landscape) {
  .min-height-100-width {
    min-height: 100vw;
  }
}

.theme-one-up {
  max-width: 32em;
  width: 100%;
}

.theme-two-up {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
}

.theme-two-up > * {
  width: 100%;
  max-width: 32em;
}

@media screen and (min-width: 800px) {
  .theme-two-up {
    flex-direction: row;
  }
  .theme-two-up > * {
    width: 50%;
  }
}

.theme-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.theme-card.align-items-center {
  align-items: center;
}

.theme-two-up .theme-card:has(code) {
  overflow-x: scroll;
}

.theme-card :is(h1, p, code) {
  color: var(--theme-color-foreground);
}

.theme-card h1 {
  display: inline;
  padding: 1em;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  background: var(--theme-color-background);
}

:is(.theme-card, .examples) p,
.theme-card code {
  padding: 1em;
  font-size: 1em;
  background: var(--theme-color-background);
}

.theme-card code {
  display: block;
  font-family: var(--theme-monospace-font-family);
  font-size: calc(1em * 0.8);
  white-space: nowrap;
}

.theme-card p code {
  display: inline-block;
  padding: 0;
}

.theme-card p code strong {
  font-weight: bold;
}

.theme-card h1 + p {
  margin-top: 0;
}

.theme-card p:first-child {
  margin-top: 0;
}

.theme-card p:last-child {
  margin-bottom: 0;
}

.theme-card p:has(+ p) {
  margin-bottom: 0;
}

.theme-card p + p {
  padding-top: 0;
  margin-top: 0;
}

.theme-card.api-reference :is(h1, p) {
  padding-left: 0;
  padding-right: 0;
}

.theme-card.api-reference code {
  white-space: pre-line;
}

.theme-card ul {
  list-style: none;
  background: var(--theme-color-background);
  margin: 0;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.theme-card details,
.theme-card details summary {
  width: 100%;
}

.theme-card details summary span.is-closed,
.theme-card details[open] summary span.is-open {
  display: inline-block;
}

.theme-card details summary span.is-open,
.theme-card details[open] summary span.is-closed {
  display: none;
}

.theme-card summary {
  list-style: none;
  cursor: pointer;
}

.theme-card summary::-webkit-details-marker {
  display: none;
}

.theme-card details p code {
  display: inline; 
}

.theme-card summary code {
  padding: 0;
}

.theme-card p:has(+ details) {
  margin-bottom: 0;
}

.theme-card details + p {
  margin-top: 0;
}

:is(.theme-card, .examples) :is(a, a:visited) {
  color: var(--theme-color-foreground);
  text-decoration: none;
  border-bottom: var(--border-bottom-width) solid var(--theme-color-foreground);

  display: inline-block;
}