/*
 * Copyright © 2026 Em Zakharov
 */

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  background-color: peachpuff;
}

#dmt-label {
  /* For the <input>:focus-visible to position correctly */
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 18.25px;
  height: 18.25px;
  border: 1.75px solid hsl(215deg, 65%, 9%);
  border-radius: 4px;
  padding: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#dmt-label > img { max-width: 20px; max-height: 20px; }
input[id="dmt"] { all: unset; }
input[id="dmt"]:focus-visible {
  width: 32px;
  height: 32px;
  display: flex;
  position: absolute;

  outline: 2px #F9F9F9 solid;
  outline-offset: 0px;
  box-shadow: 0 0 0 4px #193146;
  border-radius: 4px;
}

#dmt-reset {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: calc(0.75rem + 20px + 6px + 2px + 4px);
  right: calc(0.75rem + 3.5px);
  height: 14px;
  padding: 0 4px 4px 4px;

  font-size: 1.125rem;

  border: 1px solid hsl(215deg, 65%, 9%);
  border-top: transparent;

  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
#dmt-reset:focus-visible {
  outline: 2px #F9F9F9 solid;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #193146;
  border-radius: 4px;
}

header {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  font-weight: bold;
}

header #parrot {
  width: 180px;
  margin-right: -0.6rem;
}

header #logo {
  width: 56px;
  margin-left: 0.6rem;
}

main {
  display: flex;
  flex-direction: column;
  max-width: 46.125rem;
  padding: 0 1rem;
}

section #how,
section #why,
section #credits {
  display: inherit;
  flex-direction: inherit;
}

h1, h2 { text-align: center; }

h1 {
  margin-block-start: 0.33rem;
  margin-block-end: -0.25rem;
}

h2 { margin-block-end: 0; }

ul { padding-inline-start: 1.25rem; }

#how > ul > li > ul > li { cursor: pointer; }

#how input[type="text"] { padding-left: 0.25rem; }

ul li p,
.shortcut-mapping {
  margin-block-start: 0.5rem;
  margin-left: 1rem;
}

@media (max-width: 620px) { ul li p { margin-left: 0; } }

.faded { opacity: 40%; }

.warn { filter: drop-shadow(0.5px 0.5px 1px hsl(0deg 0% 0% / 50%)); }

hr {
  all: unset;

  display: block;
  border-top: 3px double;
  text-align: center;
  height: 3px;
}
hr::after {
  background: peachpuff;
  content: "✶";
  padding: 0 4px;
  position: relative;
  top: -13px;
}
#why hr::after { content: "❦"; }

#why p,
#why li {
  font-family: ui-serif, "Sitka Text", "Roboto Serif", "Noto Serif", Georgia, serif;
  font-weight: 400;
}

#credits ul li:nth-of-type(n + 2) p {
  margin-block-start: initial;
  margin-left: initial;
}

code {
  font-size: 0.875rem;
  background-color: hsl(30deg 100% 80%);
  padding: 1px 3px;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: min(calc(100vw - 2rem - 2rem), 46.125rem);
  padding: 1rem;
  border-top: 3px double rgb(41, 37, 36);
}
footer small { color: hsl(12 6% 45%); }
footer small + img { width: 1.5rem; height: 0.985rem; }
footer a > img { height: 3rem; width: 3rem; }


:root {
  --button-width: 72px;
}

main button:not(.switch),
main #controls label { font-family: Arial, "Liberation Sans", sans-serif; }

main button:not(.switch) {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  position: relative;
  top: -0.2rem;
  width: 72px;
  height: 24px;
  z-index: 1;

  border-radius: 4.8% / 14%;
}
main button[name="playback"] {
  background-color: hsl(56deg 86% 42%);
  box-shadow:
    calc(0.012 * var(--button-width)) calc(0.012 * var(--button-width)) 4px hsl(0deg 0% 0% / 40%),
    calc(0.03 * var(--button-width)) calc(0.03 * var(--button-width)) 2px hsl(57deg 80% 50%) inset,
    calc(-0.022 * var(--button-width)) calc(-0.022 * var(--button-width)) 2px hsl(54deg 53% 37%) inset;
}
main button[name="record"] {
  background-color: hsl(6deg 89% 38%);
  box-shadow:
    calc(0.012 * var(--button-width)) calc(0.012 * var(--button-width)) 4px hsl(0deg 0% 0% / 40%),
    calc(0.03 * var(--button-width)) calc(0.03 * var(--button-width)) 2px hsl(8deg 70% 45%) inset,
    calc(-0.022 * var(--button-width)) calc(-0.022 * var(--button-width)) 2px hsl(8deg 73% 28%) inset;
}
main button[name="record"] > .notch {
  position: absolute;
  top: 18.359%;
  left: 7.247%;
  width: 85.507%;
  height: 63.305%;

  border-radius: 2% / 8%;

  filter: blur(2px);
  overflow: hidden;
  background-color: transparent;
  box-shadow:
    calc(0.02 * var(--button-width)) calc(0.02 * var(--button-width)) 4px hsl(7deg 71% 37%) inset,
    calc(-0.032 * var(--button-width)) calc(-0.032 * var(--button-width)) 4px hsl(7deg 77% 42%) inset;
}

main button > label {
  display: flex;
  justify-content: center;
  align-items: center;

  color: hsl(0deg 0% 90%);
  font-weight: bold;
  font-size: 0.45rem;

  cursor: pointer;
}
main button[name="playback"] > label::before {
  content: url("play.svg");
  width: 6%;
  padding-top: 0.15rem; /* Ugly hack, but nothing else works :/ */
  margin-right: 2px;
}
main button[name="record"] > label::before {
  content: url("record.svg");
  width: 9%;
  padding-top: 0.035rem; /* Ugly hack, but nothing else works :/ */
  margin-right: 2px;
}


main .key.r,
main .key.f {
  display: inline-block;
  position: relative;
  top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;

  border-radius: 10% / 10%;

  background-color: hsl(50deg 60% 58%);
  box-shadow: inset 0 0 2px hsl(0deg 0% 0% / 50%);
}
main .key.r > img,
main .key.f > img {
  display: block;
  position: absolute;
  top: 8.5%;
  left: 12%;
  width: 77.85%;
}


:root {
  --device-width: 558px;
}

main .toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;
  left: calc(45% - 0.144 * var(--device-width));
  width: calc(0.288 * var(--device-width));
  height: calc(0.145 * var(--device-width));
  margin-top: -0.5rem;
  margin-bottom: 0.25rem;

  text-wrap: nowrap;
}
@media (max-width: 420px) { main .toggle { left: calc(33% - 0.144 * var(--device-width)); } }
@media (max-width: 360px) { main .toggle { left: calc(30% - 0.144 * var(--device-width)); } }
@media (max-width: 350px) { main .toggle { left: calc(24% - 0.144 * var(--device-width)); } }
main .toggle::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 160px;
  background-image: url("interactive-arrow.webp");
  background-size: 160px 80px;
  width: 160px;
  height: 80px;
}
@media (max-width: 499px) { main .toggle::after { left: 120px; } }

main .toggle > label {
  position: absolute;

  font-weight: bold;
  font-size: calc(0.0215 * var(--device-width));
}
main .toggle > label.press {    top: 0; }
main .toggle > label.hold  { bottom: 0; }

main .switch {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: -1;
}
main button.switch {
  width: 8%; /* Why is this not wider? */
  height: 55.157%;
  z-index: 1; /* For the cursor target to appear correctly */
}
main #controls button.switch:focus-visible {
  padding: 4px;
  outline: 2px #F9F9F9 solid;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #193146;
  border-radius: 4px;
  z-index: 1;
}


/* System set to DARK mode; user HAS NOT expressed preference to override it */
@media (prefers-color-scheme: dark) {
  body {
    background-color: hsl(215deg, 65%, 9%);
    color: hsl(33deg, 100%, 86%); /* = rgb(255, 247, 237) - 10% lightness */
  }

  #dmt-label {
    width: 20px;
    height: 20px;
    border: 1px solid hsl(33deg, 100%, 86%);
  }

  #dmt-reset {
    border: 1px solid hsl(33deg, 100%, 86%);
    border-top: transparent;
  }

  header { color: rgb(255, 247, 237); /* To color match logo letters */ }
  header #parrot { filter: brightness(0.9); }
  header #logo { box-shadow: 0 0 2px 1px rgb(255, 247, 237); }

  main .toggle::after { filter: invert(1); }

  hr::after { background-color: hsl(215deg, 65%, 9%); }

  code { background-color: hsl(215deg, 65%, 25%); }

  footer { border-top: 3px double hsl(33deg, 100%, 86%); }
  footer small { color: hsl(12 6% 64%); }
  footer small + img { filter: contrast(0.5) brightness(2.5); }
  footer a > img { box-shadow: 0 0 2px 1px rgb(255, 247, 237); }
}

/* System set to LIGHT mode; user HAS expressed preference to override it */
@media (prefers-color-scheme: light) {
  body[dm="on"] {
    background-color: hsl(215deg, 65%, 9%);
    color: hsl(33deg, 100%, 86%); /* = rgb(255, 247, 237) - 10% lightness */
  }

  body[dm="on"] #dmt-label {
    width: 20px;
    height: 20px;
    border: 1px solid hsl(33deg, 100%, 86%);
  }

  body[dm="on"] #dmt-reset {
    border: 1px solid hsl(33deg, 100%, 86%);
    border-top: transparent;
  }

  body[dm="on"] header { color: rgb(255, 247, 237); /* To color match logo letters */ }
  body[dm="on"] header #parrot { filter: brightness(0.9); }
  body[dm="on"] header #logo { box-shadow: 0 0 2px 1px rgb(255, 247, 237); }

  body[dm="on"] main .toggle::after { filter: invert(1); }

  body[dm="on"] hr::after { background-color: hsl(215deg, 65%, 9%); }

  body[dm="on"] code { background-color: hsl(215deg, 65%, 25%); }

  body[dm="on"] footer { border-top: 3px double hsl(33deg, 100%, 86%); }
  body[dm="on"] footer small { color: hsl(12 6% 64%); }
  body[dm="on"] footer small + img { filter: contrast(0.5) brightness(2.5); }
  body[dm="on"] footer a > img { box-shadow: 0 0 2px 1px rgb(255, 247, 237); }
}

/* System set to DARK mode; user HAS expressed preference to override it */
/* Revert dark mode styles */
@media (prefers-color-scheme: dark) {
  body[dm="off"] {
    background-color: peachpuff;
    color: rgb(41, 37, 36);
  }

  body[dm="off"] #dmt-label {
    width: 18.25px;
    height: 18.25px;
    border: 1.75px solid hsl(215deg, 65%, 9%);
  }

  body[dm="off"] #dmt-reset {
    border: 1px solid hsl(215deg, 65%, 9%);
    border-top: transparent;
  }

  body[dm="off"] header { color: rgb(41, 37, 36); }
  body[dm="off"] header #parrot { filter: none; }
  body[dm="off"] header #logo { box-shadow: none; }

  body[dm="off"] main .toggle::after { filter: none; }

  body[dm="off"] hr::after { background-color: peachpuff; }

  body[dm="off"] code { background-color: hsl(30deg 100% 80%); }

  body[dm="off"] footer { border-top: 3px double rgb(41, 37, 36); }
  body[dm="off"] footer small { color: hsl(12 6% 45%); }
  body[dm="off"] footer small + img { filter: none; }
  body[dm="off"] footer a > img { box-shadow: none; }
}


.hidden {
/* Hidden accessibly based on https://webaim.org/techniques/css/invisiblecontent/#:~:text=CSS%20clip,-{clip:%20rect(1px */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.fvis:focus-visible {
  outline: 2px #F9F9F9 solid;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #193146;
  border-radius: 4px;
}