:root {
  --bg: #ecece9;
  --fg: #6b6b65;
  --accent: #f164a8;
  --accent-half: rgba(255, 173, 198, 0.5);
  --emphasis: #191918;
  --unit: 16px;
  --columns: 24;
  --body-scale: 0.875;
  --footer-scale: 0.5;
  --heading-scale: 0.9375;
  --line-scale: 2.25;
  --title-scale: 0.95;
  --nav-scale: 0.75;
  --header-filter: blur(calc(var(--unit) / 16)) hue-rotate(3deg) contrast(50%) saturate(150%) brightness(120%);
  --header-shadow: rgba(6, 0, 87, 0.4);
  --nav-filter: blur(calc(var(--unit) / 1.6)) hue-rotate(9deg) brightness(75%) saturate(200%);
}

details {
  padding: 0;
  margin-block: calc(var(--unit) / 2);
}

details>* {
  margin-inline-start: var(--unit);
}

details[open]> :not(summary) {
  margin-block: calc(var(--unit) / 2);
}

summary {
  position: relative;
  color: var(--accent);
  margin-block: 0;
  padding: 0;
  cursor: pointer;
}

summary::-webkit-details-marker,
summary::marker {
  display: none;
  content: "";
}

summary::before {
  display: inline;
  position: absolute;
  left: calc(var(--unit) * -1);
  content: "Q.";
}

details>summary:first-of-type {
  display: block;
  list-style: none;
}

details> :not(summary):first-of-type::before {
  display: inline;
  position: absolute;
  left: calc(var(--unit) * -1);
  content: "A.";
}

.dark {
  fill: #000;
}

.text-grey-800 {
  color: #6b6b65;
}

.text-pink-500 {
  color: #f164a8;
}

.fill-current {
  fill: currentColor;
}

@media (max-device-width: 959px) and (orientation: landscape) {
  :root {
    --unit: 24px;
  }
}

@media (min-device-width: 960px) {
  :root {
    --unit: 32px;
    --body-scale: 0.6875;
    --footer-scale: 0.35;
    --line-scale: 2;
    --nav-scale: 0.55;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #202023;
    --fg: #bfbfc6;
    --accent: #f164a8;
    --accent-half: rgba(136, 136, 229, 0.5);
    --emphasis: #dfdfe5;
  }

  .dark {
    fill: var(--fg) !important;
  }

  img.mask,
  svg.symbol {
    filter: invert(1);
  }
}

/* Make download button look like a button */
.download {
  display: inline-flex;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1rem;
  align-items: center;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: #D1D5DB;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: #fff;
  background-color: #000;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);


  @media (min-width: 768px) {
    margin-top: 0;
  }

  :hover {
    background-color: #F9FAFB;
  }
}

#showcase video {
  width: 100%;
  height: auto;
  aspect-ratio: 8/5;
  display: flex;
  align-self: center;
}

:root {
  --width: calc(var(--unit) * var(--columns));
  --inset: calc(50vw - (var(--width) / 2));
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
  /* fix for Chrome */
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

body {
  background: var(--bg);
  font-size: calc(var(--unit) * var(--body-scale));
  letter-spacing: calc(var(--unit) * var(--body-scale) / -32);
  text-rendering: optimizeLegibility;
  line-height: calc(var(--unit) * var(--line-scale));
  color: var(--fg);
  margin: 0;
  padding: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: calc(var(--unit) / 16) solid var(--accent-half);
}

header,
footer,
p,
figure {
  position: relative;
  margin: 0;
  margin-block: 0;
  margin-inline: 0;
}

header {
  font-size: calc(var(--unit) * var(--body-scale));
  /* background: #f164a8 url(/images/background.svg); */
  background-color: #f4abce;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%23fd248d' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  /* background-size: cover; */
}

header::before {
  display: block;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  backdrop-filter: var(--header-filter);
  -webkit-backdrop-filter: var(--header-filter);
}

header ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--unit);
}

header li:first-child {
  align-self: stretch;
  flex-grow: 2;
}

header nav {
  position: relative;
  top: 0;
  font-size: calc(var(--unit) * var(--nav-scale));
  color: rgba(255, 255, 255, 0.9);
  width: calc(var(--unit) * var(--columns));
  padding-inline: var(--inset);
  backdrop-filter: var(--nav-filter);
  -webkit-backdrop-filter: var(--nav-filter);
}

header nav a {
  color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

header nav .active {
  font-weight: bold;
  font-size: calc(var(--unit) * var(--title-scale));
  border-bottom: 0 !important;
}

section {
  padding-block: var(--unit);
  padding-inline: var(--inset);
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  color: var(--emphasis);
  font-size: calc(var(--unit) * var(--heading-scale));
  font-weight: 600;
  letter-spacing: calc(var(--unit) * var(--heading-scale) / -32);
}

header h1 {
  color: black;
  font-weight: 900;
}

header :is(h1, h2) {
  margin-inline-end: calc(var(--unit) * -1);
}

header :is(h2, h3) {
  color: black;
}

header p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: var(--header-shadow) 0 calc(var(--unit) / 24) calc(var(--unit) / 2);
}

header .mantra {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: var(--header-shadow) 0 calc(var(--unit) / 24) calc(var(--unit) / 6);
}

header::after {
  display: block;
  position: absolute;
  bottom: 0;
  content: "";
  background: rgba(0, 0, 0, 0) radial-gradient(ellipse 80% 50%, var(--header-shadow) -75%, rgba(0, 0, 0, 0) 50%);
  background-position: 0 calc(var(--unit) * 0.75);
  background-repeat: no-repeat;
  height: calc(var(--unit) * 1.5);
  width: 100%;
  pointer-events: none;
}

#hero {
  position: relative;
  padding-block: calc(var(--unit) * 2);
}

#hero figure {
  height: 100%;
}

#hero figure img {
  border-radius: 2rem;
  filter: drop-shadow(0 calc(var(--unit) / 3) calc(var(--unit) * 0.4) var(--header-shadow));
  display: block;
  margin-inline: auto;
  margin-bottom: 3rem;
}

h1 {
  font-size: calc(var(--unit) * 1.75);
}

h4 {
  font-size: calc(var(--unit) * var(--heading-scale) * 0.9);
  font-weight: 500;
  color: var(--accent);
}

main :is(ol, ul) {
  margin-block: calc(var(--unit) / 2);
  padding-inline-start: calc(var(--unit));
}

p,
main li,
details,
table {
  line-height: var(--unit);
}

footer {
  padding-block: calc(var(--unit) * 3);
  position: relative;
}

footer #logo {
  border-bottom: unset
}


footer p {
  opacity: 0.9;
  text-align: center;
  width: calc(var(--unit) * var(--columns));
  margin-inline: auto;
  font-size: calc(var(--unit) * var(--footer-scale));
  letter-spacing: 0;
  line-height: calc(var(--unit) * var(--line-scale) / 4);
}


main p:not(:last-of-type) {
  margin-block-end: calc(var(--unit) / 2);
}

.hanging {
  position: absolute;
  left: calc(var(--unit) / -2);
}

main figure {
  display: flex;
  justify-content: space-between;
  padding-block-start: calc(var(--unit) / 2);
  margin-block-start: calc(var(--unit) / 4);
  margin-inline: calc(var(--unit) * -2);
}

main figure :is(img, video) {
  will-change: filter;
  filter: drop-shadow(0 calc(var(--unit) / 9) calc(var(--unit) / 6) rgba(0, 0, 0, 0.33));
}

@media (prefers-color-scheme: dark) {
  main figure :is(img, video) {
    filter: drop-shadow(0 calc(var(--unit) / 9) calc(var(--unit) / 6) rgba(0, 0, 0, 0.75));
  }
}

#session img {
  width: calc(var(--unit) * 10.75);
  height: auto;
  aspect-ratio: 2/1;
}

#pulse video {
  width: calc(var(--unit) * 22);
  height: auto;
  aspect-ratio: 8/5;
}

#history {
  float: right;
  padding-block: 0;
  margin-left: var(--unit);
}

#history img {
  width: calc(var(--unit) * 6);
  height: auto;
  aspect-ratio: 400/661;
}

#settings {
  float: left;
  padding-block: 0;
  margin-right: var(--unit);
}

#settings img {
  width: calc(var(--unit) * 6);
  height: auto;
  aspect-ratio: 400/405;
}

#download a {
  display: inline-block;
  margin-top: calc(var(--unit) / 2);
  border-bottom: none;
}

p.note {
  font-size: calc(var(--unit) * var(--body-scale) * 0.75);
  margin-block: calc(var(--unit) / 2);
}