:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-background-color: oklch(0.98 0.005 248);
  --pico-color: oklch(0.33 0.02 248);
  --pico-h1-color: oklch(0.18 0.02 248);
  --pico-h2-color: oklch(0.18 0.02 248);
  --pico-h3-color: oklch(0.18 0.02 248);
  --pico-muted-color: oklch(0.44 0.02 248);
  --pico-muted-border-color: oklch(0.92 0.01 248);

  --pico-primary: oklch(0.56 0.09 248);
  --pico-primary-background: oklch(0.56 0.09 248);
  --pico-primary-border: oklch(0.56 0.09 248);
  --pico-primary-underline: oklch(0.56 0.09 248 / 0.5);
  --pico-primary-hover: oklch(0.42 0.07 248);
  --pico-primary-hover-background: oklch(0.42 0.07 248);
  --pico-primary-hover-border: oklch(0.42 0.07 248);
  --pico-primary-hover-underline: oklch(0.42 0.07 248);
  --pico-primary-focus: oklch(0.56 0.09 248 / 0.20);
  --pico-primary-inverse: oklch(1 0 0);
  --pico-text-selection-color: oklch(0.56 0.09 248 / 0.20);

  --pico-code-background-color: oklch(0.94 0.01 248);
  --pico-code-color: oklch(0.33 0.02 248);
  --pico-form-element-background-color: oklch(1 0 0);
  --pico-form-element-border-color: oklch(0.86 0.02 248);

  --select-highlight: oklch(0.56 0.09 248 / 0.12);
  --logo-filter: none;
  --banner-info-bg: oklch(0.96 0.01 248);
  --banner-info-border: oklch(0.64 0.09 248);
  --banner-info-text: oklch(0.30 0.08 248);
  --banner-warn-bg: oklch(0.97 0.02 70);
  --banner-warn-border: oklch(0.80 0.14 70);
  --banner-warn-text: oklch(0.45 0.14 65);
  --banner-error-bg: oklch(0.97 0.02 20);
  --banner-error-border: oklch(0.70 0.15 20);
  --banner-error-text: oklch(0.40 0.18 20);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
    viewBox='0 0 24 24' fill='none' stroke='%234779a7' stroke-opacity='0.75' \
    stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath \
    d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: oklch(0.20 0.02 260);
    --pico-color: oklch(0.90 0.02 250);
    --pico-h1-color: oklch(0.98 0.01 250);
    --pico-h2-color: oklch(0.98 0.01 250);
    --pico-h3-color: oklch(0.98 0.01 250);
    --pico-muted-color: oklch(0.66 0.04 250);
    --pico-muted-border-color: oklch(0.28 0.02 260);

    --pico-primary: oklch(0.72 0.12 255);
    --pico-primary-background: oklch(0.72 0.12 255);
    --pico-primary-border: oklch(0.72 0.12 255);
    --pico-primary-underline: oklch(0.72 0.12 255 / 0.5);
    --pico-primary-hover: oklch(0.78 0.10 255);
    --pico-primary-hover-background: oklch(0.78 0.10 255);
    --pico-primary-hover-border: oklch(0.78 0.10 255);
    --pico-primary-hover-underline: oklch(0.78 0.10 255);
    --pico-primary-focus: oklch(0.72 0.12 255 / 0.20);
    --pico-primary-inverse: oklch(0.17 0.02 260);
    --pico-text-selection-color: oklch(0.72 0.12 255 / 0.30);

    --pico-code-background-color: oklch(0.17 0.02 260);
    --pico-code-color: oklch(0.90 0.02 250);
    --pico-form-element-background-color: oklch(0.26 0.02 260);
    --pico-form-element-border-color: oklch(0.33 0.02 260);

    --select-highlight: oklch(0.72 0.12 255 / 0.15);
    --logo-filter: invert(1) hue-rotate(180deg);
    --banner-info-bg: oklch(0.25 0.04 255);
    --banner-info-border: oklch(0.72 0.12 255);
    --banner-info-text: oklch(0.90 0.02 250);
    --banner-warn-bg: oklch(0.28 0.05 85);
    --banner-warn-border: oklch(0.91 0.09 85);
    --banner-warn-text: oklch(0.91 0.09 85);
    --banner-error-bg: oklch(0.25 0.06 10);
    --banner-error-border: oklch(0.72 0.13 10);
    --banner-error-text: oklch(0.90 0.02 250);
    --chevron: url("data:image/svg+xml,%3Csvg \
      xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
      stroke='%236fa7ee' stroke-opacity='0.75' stroke-width='3' \
      stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 \
      6-6'/%3E%3C/svg%3E");
  }
}

:root {
  --pico-font-size: 100%;
  --pico-line-height: 1.6;
}

.container {
  max-width: 40rem;
}

body > header {
  padding-top: 2rem;
  padding-bottom: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pico-h1-color);
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 1.75rem;
  filter: var(--logo-filter);
}

main {
  --gap: 1.5rem;
}

h1 {
  margin-top: 0;
  margin-bottom: var(--gap);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.4;
}

h1 .platform {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0 1.1em 0 0.3em;
  font: inherit;
  color: var(--pico-primary);
  background-color: var(--select-highlight);
  background-image: var(--chevron);
  background-position: right 0.3em center;
  background-size: 0.55em;
  background-repeat: no-repeat;
  border: 0;
  border-radius: var(--pico-border-radius);
  box-shadow: none;
  vertical-align: baseline;
  cursor: pointer;
}

h1 select.platform {
  field-sizing: content;
}

h1 select.platform option {
  font-size: 0.875rem;
  font-weight: 400;
}

h1 button.platform {
  display: none;
  anchor-name: --platform;
}

h1 .platform:hover {
  background-color: var(--pico-primary-focus);
}

h1 .platform:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.platforms {
  display: none;
  position-anchor: --platform;
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block;
  inset: auto;
  margin: 0.25rem 0;
  padding: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pico-color);
  background-color: var(--pico-form-element-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.08);
}

.platforms a {
  display: block;
  padding: 0.3rem 0.6rem;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--pico-border-radius) / 2);
}

.platforms a:hover,
.platforms a:focus-visible {
  background-color: var(--select-highlight);
  outline: none;
}

.platforms a[aria-current="page"] {
  color: var(--pico-primary);
  font-weight: 600;
}

@supports selector(:popover-open) and
  (position-area: block-end span-inline-end) {
  h1 select.platform {
    display: none;
  }

  h1 button.platform {
    display: inline-block;
  }

  .platforms:popover-open {
    display: block;
  }
}

.banner {
  margin-bottom: var(--gap);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid;
  border-radius: var(--pico-border-radius);
}

.banner-info {
  color: var(--banner-info-text);
  background-color: var(--banner-info-bg);
  border-color: var(--banner-info-border);
}

.banner-warn {
  color: var(--banner-warn-text);
  background-color: var(--banner-warn-bg);
  border-color: var(--banner-warn-border);
}

.banner-error {
  color: var(--banner-error-text);
  background-color: var(--banner-error-bg);
  border-color: var(--banner-error-border);
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.download svg {
  width: 1rem;
  height: 1rem;
}

.note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--pico-muted-color);
}

.steps {
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--pico-muted-border-color);
}

.steps h2 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
}

.steps h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.steps h2:not(:first-child) {
  margin-top: 2.25rem;
}

.steps li {
  margin-bottom: 0.375rem;
}

.steps li > pre {
  margin: 0.5rem 0 0.75rem;
}

/* consecutive details read as one list, with a rule between each */
.steps details {
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.steps :not(details) + details {
  margin-top: 0.5rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

.steps details + :where(p, ul, ol, pre) {
  margin-top: 1rem;
}

.steps summary {
  font-weight: 600;
  line-height: 1.5;
}

.steps details[open] > summary {
  margin-bottom: 0.75rem;
}

.steps details > :last-child {
  margin-bottom: 0;
}

.steps :not(pre) > code,
.steps kbd {
  font-size: 0.85em;
}

body > footer {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
  font-size: 0.875rem;
  color: var(--pico-muted-color);
}

.note small,
body > footer small {
  font-size: inherit;
}