/*
 * Copyright © 2026 Em Zakharov
 */

/* 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;
  }
  @media (max-height: 430px) {
    #dmt-reset {
      border: 1px solid hsl(33deg, 100%, 86%);
      border-bottom: transparent;
    }
  }

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

  main .cable > img { filter: contrast(0.8) brightness(0.45); }
  main .cable::before {
    background: linear-gradient(90deg,
                                hsl(0deg 0% 13%), /* -11% lightness */
                                hsl(0deg 0% 14%) 15%, /* -14% lightness */
                                hsl(0deg 0% 19%) 28%, /* -21% lightness */
                                hsl(0deg 0% 15%) 40%, /* -13% lightness */
                                hsl(0deg 0% 10%)); /* -6% lightness */
    box-shadow: calc(0.007 * var(--device-width)) 1px 6px hsl(0deg 0% 0% / 30%); /* -30% alpha */
  }

  main .cable-jack > img  { filter: brightness(0.35) contrast(0.8); }

  main #microphone-sticker {
    background-color: hsl(60deg 90% 45%); /* -5% lightness */
    border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 90%); /* -7% lightness */
    box-shadow: calc(0.035 * var(--device-width)) calc(0.035 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%); /* -20% alpha */
    color: rgb(41, 37, 36); /* Override global dark-mode font color */
  }
  main #microphone-sticker::after { background-color: hsl(0deg 0% 90%); /* -7% lightness */ }

  main #device-frame {
    background-color: hsl(187deg 15% 16%); /* -16% lightness */
    box-shadow: calc(0.03707 * var(--device-width)) calc(0.03707 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%); /* -30% alpha */
  }
  main #device-frame::before {
    border-right:  calc(0.06 * var(--device-width)) solid hsl(187deg 15% 16%); /* -16% lightness */
    border-bottom: calc(0.06 * var(--device-width)) solid hsl(187deg 15% 16%); /* -16% lightness */
    box-shadow:
      calc(0.022 * var(--device-width)) calc(0.021 * var(--device-width)) 2px hsl(187deg 15% 16%) inset, /* -16% lightness */
      calc(0.028 * var(--device-width)) calc(0.026 * var(--device-width)) 2px hsl(190deg 17% 28% / 80%) inset; /* -44% lightness */
  }
  main #device-frame::after {
    box-shadow: calc(-0.024 * var(--device-width)) calc(-0.024 * var(--device-width)) 12px hsl(0deg 0% 0% / 30%) inset; /* -10% alpha */
  }

  main #device-frame > .io-label { color: hsl(0deg 0% 55%); /* -35% lightness */ }

  main #screen-border { background-color: hsl(0deg 0% 14%); /* -3% lightness */ }

  main #screen-backlight-glow { opacity: 1; }
  main #screen-backlight-glow.off { opacity: 0; }

  main #screen-backlight { box-shadow: inset 0 0 24px hsl(0deg 0% 0% / 50%); }
  main #screen-backlight.off { background-color: hsl(0deg 0% 14%); /* -4% lightness */ }

  main #controls button[name="playback"] {
    background-color: hsl(56deg 86% 26%); /* -16% lightness */
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset; /* -14% lightness */
  }
  main #controls button[name="playback"]:focus-visible {
  outline: 2px #F9F9F9 solid;
  outline-offset: 4px;
  box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset, /* -14% lightness */
      0 0 0 4px #193146;
  }
  @media (pointer: fine) {
    main #controls button[name="playback"]:hover {
      box-shadow:
        calc(0.0015 * var(--device-width)) calc(0.0015 * var(--device-width)) 6px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
        calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
        calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
        calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset; /* -14% lightness */
    }
  }
  main #controls button[name="playback"]:active,
  main #controls button[name="playback"].active {
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 8px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset; /* -14% lightness */
  }
  main #controls button[name="record"] {
    background-color: hsl(6deg 89% 22%); /* -16% lightness */
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset; /* -14% lightness */
  }
  main #controls button[name="record"]:focus-visible {
  outline: 2px #F9F9F9 solid;
  outline-offset: 4px;
  box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset, /* -14% lightness */
      0 0 0 4px #193146;
  }
  @media (pointer: fine) {
    main #controls button[name="record"]:hover {
      box-shadow:
        calc(0.0015 * var(--device-width)) calc(0.0015 * var(--device-width)) 6px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
        calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
        calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
        calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset; /* -14% lightness */
    }
  }
  main #controls button[name="record"]:active,
  main #controls button[name="record"].active {
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 8px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset; /* -14% lightness */
  }
  main #controls button[name="record"] > .notch {
    box-shadow:
      calc(0.01 * var(--device-width)) calc(0.01 * var(--device-width)) 12px hsl(7deg 71% 21%) inset, /* -16% lightness */
      calc(-0.016 * var(--device-width)) calc(-0.016 * var(--device-width)) 12px hsl(7deg 77% 26%) inset; /* -16% lightness */
  }

  main #controls button > span { color: hsl(0deg 0% 55%); /* -35% lightness */ }
  main #controls button > span:not(.off) {
    color: hsl(0deg 0% 90%);
    filter: drop-shadow(0 0 2px hsl(0deg, 0%, 90%)); /* Add glow */
    transition: color 0.15s linear 0.3s,
               filter 0.15s linear 0.3s;
  }
  main #controls button[name="playback"] > span::before,
  main #controls button[name="record"] > span::before { filter: brightness(0.608); /* Color match label */ }
  main #controls button[name="playback"] > span:not(.off)::before,
  main #controls button[name="record"] > span:not(.off)::before {
    transition: filter 0.15s linear 0.3s; /* Timing is off from the label; not sure why */
    filter: none;
  }

  @media (hover: hover) and (pointer: fine) {
    main #controls .key.r,
    main #controls .key.f {
      background-color: hsl(50deg 60% 42%); /* -16% lightness */
    }
    main #controls .key.r > svg,
    main #controls .key.f > svg {
      filter: brightness(0.905); /* To achieve something similar to -16% lightness */
    }
  }

  main #controls .button-mode-line { border-top: calc(0.005 * var(--device-width)) solid hsl(0deg 0% 55%); /* -35% lightness */ }
  main #controls .button-mode-line .mode-indicator > .triangle { border-right: calc(0.01 * var(--device-width)) solid hsl(0deg 0% 55%); /* -35% lightness */ }
  main #controls .button-mode-line .mode-indicator > .text { color: hsl(0deg 0% 55%); /* -35% lightness */ }
  main #controls .toggle > label { color: hsl(0deg 0% 55%); /* -35% lightness */ }

  /* Darken toggle switches only on the app page, otherwise they are too hard to see on the help page */
  #controls .switch.base { background-color: hsl(0deg 0% 26.3%); /* -31.7% lightness */ }
  #controls .switch.hex {
    background: linear-gradient(-15deg,
                                hsl(0deg 0% 19%), /* -14% lightness */
                                hsl(0deg 0% 23%) 20%, /* -17% lightness */
                                hsl(0deg 0% 30%) 65%, /* -55% lightness */
                                hsl(0deg 0% 30%)); /* -52% lightness */
  }
  #controls .switch.hex.shadow {
    top: 29.5%; /* slight shift down */
    left: 36.6%; /* slight shift left */
    background-color: hsl(0deg 0% 0% / 10%); /* -10% alpha */
  }
  #controls .switch.hextop { background-color: hsl(0deg 0% 26.3%); /* -31.7% lightness */ }
  #controls .switch.sleeve {
    background: linear-gradient(180deg, hsl(0deg 0% 25%), hsl(0deg 0% 24%)); /* +45º, -35% lightness, -21% lightness */
    box-shadow: calc(0.005 * var(--device-width)) calc(0.005 * var(--device-width)) 2px hsl(0deg 0% 0% / 30%); /* -20% alpha */
  }
  #controls .switch.inside { background-color: hsl(0deg 0% 12%); /* -17% lightness */ }
  #controls .switch.shaft-up { filter: brightness(0.37) contrast(0.85); }
  #controls .switch.sleeveshadow-up {
    box-shadow: inset calc(0.005 * var(--device-width)) calc(0.006 * var(--device-width)) 2px hsl(0deg 0% 9% / 95%); /* -9% lightness */
  }
  #controls .switch.shaft-down { filter: brightness(0.37) contrast(0.85); }
  #controls .switch.sleeveshadow-down {
    box-shadow: inset calc(0.009 * var(--device-width)) calc(0.009 * var(--device-width)) 2px hsl(0deg 0% 9%); /* -15% lightness */
  }

  noscript {
    background-color: rgb(200, 0, 0); /* -55 red */
    border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 90%); /* -7% lightness */
  }
}

/* ============================================================================================= */

/* 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;
  }
  @media (max-height: 430px) {
    body[dm="on"] #dmt-reset {
      border: 1px solid hsl(33deg, 100%, 86%);
      border-bottom: transparent;
    }
  }

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

  body[dm="on"] main .cable > img { filter: contrast(0.8) brightness(0.45); }
  body[dm="on"] main .cable::before {
    background: linear-gradient(90deg,
                                hsl(0deg 0% 13%), /* -11% lightness */
                                hsl(0deg 0% 14%) 15%, /* -14% lightness */
                                hsl(0deg 0% 19%) 28%, /* -21% lightness */
                                hsl(0deg 0% 15%) 40%, /* -13% lightness */
                                hsl(0deg 0% 10%)); /* -6% lightness */
    box-shadow: calc(0.007 * var(--device-width)) 1px 6px hsl(0deg 0% 0% / 30%); /* -30% alpha */
  }

  body[dm="on"] main .cable-jack > img  { filter: brightness(0.35) contrast(0.8); }

  body[dm="on"] main #microphone-sticker {
    background-color: hsl(60deg 90% 45%); /* -5% lightness */
    border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 90%); /* -7% lightness */
    box-shadow: calc(0.035 * var(--device-width)) calc(0.035 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%); /* -20% alpha */
    color: rgb(41, 37, 36); /* Override global dark-mode font color */
  }
  body[dm="on"] main #microphone-sticker::after { background-color: hsl(0deg 0% 90%); /* -7% lightness */ }

  body[dm="on"] main #device-frame {
    background-color: hsl(187deg 15% 16%); /* -16% lightness */
    box-shadow: calc(0.03707 * var(--device-width)) calc(0.03707 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%); /* -30% alpha */
  }
  body[dm="on"] main #device-frame::before {
    border-right:  calc(0.06 * var(--device-width)) solid hsl(187deg 15% 16%); /* -16% lightness */
    border-bottom: calc(0.06 * var(--device-width)) solid hsl(187deg 15% 16%); /* -16% lightness */
    box-shadow:
      calc(0.022 * var(--device-width)) calc(0.021 * var(--device-width)) 2px hsl(187deg 15% 16%) inset, /* -16% lightness */
      calc(0.028 * var(--device-width)) calc(0.026 * var(--device-width)) 2px hsl(190deg 17% 28% / 80%) inset; /* -44% lightness */
  }
  body[dm="on"] main #device-frame::after {
    box-shadow: calc(-0.024 * var(--device-width)) calc(-0.024 * var(--device-width)) 12px hsl(0deg 0% 0% / 30%) inset; /* -10% alpha */
  }

  body[dm="on"] main #device-frame > .io-label { color: hsl(0deg 0% 55%); /* -35% lightness */ }

  body[dm="on"] main #screen-border { background-color: hsl(0deg 0% 14%); /* -3% lightness */ }

  body[dm="on"] main #screen-backlight-glow { opacity: 1; }
  body[dm="on"] main #screen-backlight-glow.off { opacity: 0; }

  body[dm="on"] main #screen-backlight { box-shadow: inset 0 0 24px hsl(0deg 0% 0% / 50%); }
  body[dm="on"] main #screen-backlight.off { background-color: hsl(0deg 0% 14%); /* -4% lightness */ }

  body[dm="on"] main #controls button[name="playback"] {
    background-color: hsl(56deg 86% 26%); /* -16% lightness */
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset; /* -14% lightness */
  }
  body[dm="on"] main #controls button[name="playback"]:focus-visible {
    outline: 2px #F9F9F9 solid;
    outline-offset: 4px;
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset, /* -14% lightness */
      0 0 0 4px #193146;
  }
  @media (pointer: fine) {
    body[dm="on"] main #controls button[name="playback"]:hover {
      box-shadow:
        calc(0.0015 * var(--device-width)) calc(0.0015 * var(--device-width)) 6px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
        calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
        calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
        calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset; /* -14% lightness */
    }
  }
  body[dm="on"] main #controls button[name="playback"]:active,
  body[dm="on"] main #controls button[name="playback"].active {
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 8px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 32%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 23%) inset; /* -14% lightness */
  }
  body[dm="on"] main #controls button[name="record"] {
    background-color: hsl(6deg 89% 22%); /* -16% lightness */
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset; /* -14% lightness */
  }
  body[dm="on"] main #controls button[name="record"]:focus-visible {
    outline: 2px #F9F9F9 solid;
    outline-offset: 4px;
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset, /* -14% lightness */
      0 0 0 4px #193146;
  }
  @media (pointer: fine) {
    body[dm="on"] main #controls button[name="record"]:hover {
      box-shadow:
        calc(0.0015 * var(--device-width)) calc(0.0015 * var(--device-width)) 6px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
        calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
        calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
        calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset; /* -14% lightness */
    }
  }
  body[dm="on"] main #controls button[name="record"]:active,
  body[dm="on"] main #controls button[name="record"].active {
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 8px hsl(0deg 0% 0% / 40%) inset, /* -10% alpha */
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 20%), /* -20% alpha */
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 27%) inset, /* -18% lightness */
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 14%) inset; /* -14% lightness */
  }
  body[dm="on"] main #controls button[name="record"] > .notch {
    box-shadow:
      calc(0.01 * var(--device-width)) calc(0.01 * var(--device-width)) 12px hsl(7deg 71% 21%) inset, /* -16% lightness */
      calc(-0.016 * var(--device-width)) calc(-0.016 * var(--device-width)) 12px hsl(7deg 77% 26%) inset; /* -16% lightness */
  }

  body[dm="on"] main #controls button > span { color: hsl(0deg 0% 55%); /* -35% lightness */ }
  body[dm="on"] main #controls button > span:not(.off) {
    color: hsl(0deg 0% 90%);
    filter: drop-shadow(0 0 2px hsl(0deg, 0%, 90%)); /* Add glow */
    transition: color 0.15s linear 0.3s,
               filter 0.15s linear 0.3s;
  }
  body[dm="on"] main #controls button[name="playback"] > span::before,
  body[dm="on"] main #controls button[name="record"] > span::before { filter: brightness(0.608); /* Color match label */ }
  body[dm="on"] main #controls button[name="playback"] > span:not(.off)::before,
  body[dm="on"] main #controls button[name="record"] > span:not(.off)::before {
    transition: filter 0.15s linear 0.3s; /* Timing is off from the label; not sure why */
    filter: none;
  }

  @media (hover: hover) and (pointer: fine) {
    body[dm="on"] main #controls .key.r,
    body[dm="on"] main #controls .key.f {
      background-color: hsl(50deg 60% 42%); /* -16% lightness */
    }
    body[dm="on"] main #controls .key.r > svg,
    body[dm="on"] main #controls .key.f > svg {
      filter: brightness(0.905); /* To achieve something similar to -16% lightness */
    }
  }

  body[dm="on"] main #controls .button-mode-line { border-top: calc(0.005 * var(--device-width)) solid hsl(0deg 0% 55%); /* -35% lightness */ }
  body[dm="on"] main #controls .button-mode-line .mode-indicator > .triangle { border-right: calc(0.01 * var(--device-width)) solid hsl(0deg 0% 55%); /* -35% lightness */ }
  body[dm="on"] main #controls .button-mode-line .mode-indicator > .text { color: hsl(0deg 0% 55%); /* -35% lightness */ }
  body[dm="on"] main #controls .toggle > label { color: hsl(0deg 0% 55%); /* -35% lightness */ }

  /* Darken toggle switches only on the app page, otherwise they are too hard to see on the help page */
  body[dm="on"] main #controls .switch.base { background-color: hsl(0deg 0% 26.3%); /* -31.7% lightness */ }
  body[dm="on"] main #controls .switch.hex {
    background: linear-gradient(-15deg,
                                hsl(0deg 0% 19%), /* -14% lightness */
                                hsl(0deg 0% 23%) 20%, /* -17% lightness */
                                hsl(0deg 0% 30%) 65%, /* -55% lightness */
                                hsl(0deg 0% 30%)); /* -52% lightness */
  }
  body[dm="on"] main #controls .switch.hex.shadow {
    top: 29.5%; /* slight shift down */
    left: 36.6%; /* slight shift left */
    background-color: hsl(0deg 0% 0% / 10%); /* -10% alpha */
  }
  body[dm="on"] main #controls .switch.hextop { background-color: hsl(0deg 0% 26.3%); /* -31.7% lightness */ }
  body[dm="on"] main #controls .switch.sleeve {
    background: linear-gradient(180deg, hsl(0deg 0% 25%), hsl(0deg 0% 24%)); /* +45º, -35% lightness, -21% lightness */
    box-shadow: calc(0.005 * var(--device-width)) calc(0.005 * var(--device-width)) 2px hsl(0deg 0% 0% / 30%); /* -20% alpha */
  }
  body[dm="on"] main #controls .switch.inside { background-color: hsl(0deg 0% 12%); /* -17% lightness */ }
  body[dm="on"] main #controls .switch.shaft-up { filter: brightness(0.37) contrast(0.85); }
  body[dm="on"] main #controls .switch.sleeveshadow-up {
    box-shadow: inset calc(0.005 * var(--device-width)) calc(0.006 * var(--device-width)) 2px hsl(0deg 0% 9% / 95%); /* -9% lightness */
  }
  body[dm="on"] main #controls .switch.shaft-down { filter: brightness(0.37) contrast(0.85); }
  body[dm="on"] main #controls .switch.sleeveshadow-down {
    box-shadow: inset calc(0.009 * var(--device-width)) calc(0.009 * var(--device-width)) 2px hsl(0deg 0% 9%); /* -15% lightness */
  }

  body[dm="on"] noscript {
    background-color: rgb(200, 0, 0); /* -55 red */
    border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 90%); /* -7% lightness */
  }
}

/* ============================================================================================= */

/* 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;
  }
  @media (max-height: 430px) {
    body[dm="off"] #dmt-reset {
      border: 1px solid hsl(215deg, 65%, 9%);
      border-bottom: 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 .cable > img { filter: none; }
  body[dm="off"] main .cable::before {
    background: linear-gradient(90deg,
                                hsl(0deg 0% 24%),
                                hsl(0deg 0% 28%) 15%,
                                hsl(0deg 0% 40%) 28%,
                                hsl(0deg 0% 28%) 40%,
                                hsl(0deg 0% 16%));
    box-shadow: calc(0.007 * var(--device-width)) 1px 6px hsl(0deg 0% 0% / 60%);
  }

  body[dm="off"] main .cable-jack > img  { filter: none; }

  body[dm="off"] main #microphone-sticker {
    background-color: hsl(60deg 90% 50%);
    border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 97%);
    box-shadow: calc(0.035 * var(--device-width)) calc(0.035 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%);
  }
  body[dm="off"] main #microphone-sticker::after { background-color: hsl(0deg 0% 97%); }

  body[dm="off"] main #device-frame {
    background-color: hsl(187deg 15% 32%);
    box-shadow: calc(0.03707 * var(--device-width)) calc(0.03707 * var(--device-width)) 12px hsl(0deg 0% 0% / 50%);
  }
  body[dm="off"] main #device-frame::before {
    border-right:  calc(0.06 * var(--device-width)) solid hsl(187deg 15% 32%);
    border-bottom: calc(0.06 * var(--device-width)) solid hsl(187deg 15% 32%);
    box-shadow:
      calc(0.022 * var(--device-width)) calc(0.021 * var(--device-width)) 2px hsl(187deg 15% 32%) inset,
      calc(0.028 * var(--device-width)) calc(0.026 * var(--device-width)) 2px hsl(190deg 17% 72% / 80%) inset;
  }
  body[dm="off"] main #device-frame::after {
    box-shadow: calc(-0.024 * var(--device-width)) calc(-0.024 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%) inset;
  }

  body[dm="off"] main #device-frame > .io-label { color: hsl(0deg 0% 90%); }

  body[dm="off"] main #screen-border { background-color: hsl(0deg 0% 17%); }

  body[dm="off"] main #screen-backlight-glow { opacity: 0; }

  body[dm="off"] main #screen-backlight { box-shadow: inset 0 0 24px hsl(0deg 0% 0% / 50%); }
  body[dm="off"] main #screen-backlight.off { background-color: hsl(0deg 0% 18%); }

  body[dm="off"] main #controls button[name="playback"] {
    background-color: hsl(56deg 86% 42%);
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%),
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 50%) inset,
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 37%) inset;
  }
  @media (pointer: fine) {
    body[dm="off"] main #controls button[name="playback"]:hover {
      box-shadow:
        calc(0.0015 * var(--device-width)) calc(0.0015 * var(--device-width)) 6px hsl(0deg 0% 0% / 50%) inset,
        calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%),
        calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 50%) inset,
        calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 37%) inset;
    }
  }
  body[dm="off"] main #controls button[name="playback"]:active,
  body[dm="off"] main #controls button[name="playback"].active {
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 8px hsl(0deg 0% 0% / 50%) inset,
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%),
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(57deg 80% 50%) inset,
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(54deg 53% 37%) inset;
  }
  body[dm="off"] main #controls button[name="record"] {
    background-color: hsl(6deg 89% 38%);
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%),
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 45%) inset,
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 28%) inset;
  }
  @media (pointer: fine) {
    body[dm="off"] main #controls button[name="record"]:hover {
      box-shadow:
        calc(0.0015 * var(--device-width)) calc(0.0015 * var(--device-width)) 6px hsl(0deg 0% 0% / 50%) inset,
        calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%),
        calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 45%) inset,
        calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 28%) inset;
    }
  }
  body[dm="off"] main #controls button[name="record"]:active,
  body[dm="off"] main #controls button[name="record"].active {
    box-shadow:
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 8px hsl(0deg 0% 0% / 50%) inset,
      calc(0.006 * var(--device-width)) calc(0.006 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%),
      calc(0.015 * var(--device-width)) calc(0.015 * var(--device-width)) 6px hsl(8deg 70% 45%) inset,
      calc(-0.011 * var(--device-width)) calc(-0.011 * var(--device-width)) 6px hsl(8deg 73% 28%) inset;
  }
  body[dm="off"] main #controls button[name="record"] > .notch {
    box-shadow:
      calc(0.01 * var(--device-width)) calc(0.01 * var(--device-width)) 12px hsl(7deg 71% 37%) inset,
      calc(-0.016 * var(--device-width)) calc(-0.016 * var(--device-width)) 12px hsl(7deg 77% 42%) inset;
  }

  body[dm="off"] main #controls button > span { color: hsl(0deg 0% 90%);}
  body[dm="off"] main #controls button > span:not(.off) {
    filter: none;
    transition: color 0.15s linear 0.3s, filter 0.15s linear 0.3s;
  }
  body[dm="off"] main #controls button[name="playback"] > span::before,
  body[dm="off"] main #controls button[name="record"] > span::before { filter: none; }
  body[dm="off"] main #controls button[name="playback"] > span:not(.off)::before,
  body[dm="off"] main #controls button[name="record"] > span:not(.off)::before {
    transition: filter 0.15s linear 0.3s;
    filter: none;
  }

  @media (hover: hover) and (pointer: fine) {
    body[dm="off"] main #controls .key.r,
    body[dm="off"] main #controls .key.f {
      background-color: hsl(50deg 60% 58%);
    }
    body[dm="off"] main #controls .key.r > svg,
    body[dm="off"] main #controls .key.f > svg {
      filter: none;
    }
  }

  /* Add `main` to allow ~ selector to work */
  body[dm="off"] main #controls .button-mode-line { border-top: calc(0.005 * var(--device-width)) solid hsl(0deg 0% 90%); }
  body[dm="off"] main #controls .button-mode-line .mode-indicator > .triangle { border-right: calc(0.01 * var(--device-width)) solid hsl(0deg 0% 90%); }
  body[dm="off"] main #controls .button-mode-line .mode-indicator > .text { color: hsl(0deg 0% 90%); }
  body[dm="off"] main #controls .toggle > label { color: hsl(0deg 0% 90%); }

  body[dm="off"] main #controls .switch.base { background-color: hsl(0deg 0% 58%); }
  body[dm="off"] main #controls .switch.hex {
    background: linear-gradient(-15deg,
                                hsl(0deg 0% 33%),
                                hsl(0deg 0% 40%) 20%,
                                hsl(0deg 0% 85%) 65%,
                                hsl(0deg 0% 82%));
  }
  body[dm="off"] main #controls .switch.hex.shadow {
    top: 28.967%;
    left: 38.368%;
    background-color: hsl(0deg 0% 0% / 20%);
  }
  body[dm="off"] main #controls .switch.hextop { background-color: hsl(0deg 0% 58%); }
  body[dm="off"] main #controls .switch.sleeve {
    background: linear-gradient(135deg, hsl(0deg 0% 63%), hsl(0deg 0% 45%));
    box-shadow: calc(0.005 * var(--device-width)) calc(0.005 * var(--device-width)) 2px hsl(0deg 0% 0% / 50%);
  }
  body[dm="off"] main #controls .switch.inside { background-color: hsl(0deg 0% 29%); }
  body[dm="off"] main #controls .switch.shaft-up { filter: none; }
  body[dm="off"] main #controls .switch.sleeveshadow-up {
    box-shadow: inset calc(0.005 * var(--device-width)) calc(0.006 * var(--device-width)) 2px hsl(0deg 0% 18% / 95%);
  }
  body[dm="off"] main #controls .switch.shaft-down { filter: none; }
  body[dm="off"] main #controls .switch.sleeveshadow-down {
    box-shadow: inset calc(0.009 * var(--device-width)) calc(0.009 * var(--device-width)) 2px hsl(0deg 0% 24%);
  }

  body[dm="off"] noscript {
    background-color: red;
    border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 97%);
  }
}