/*
 * Copyright © 2026 Em Zakharov
 */

html { height: 100%; }

@supports (overscroll-behavior: none) { /* 2023+ */
  html { overscroll-behavior: none; } /* Prevent overscroll, especially on hidden-toolbar Safari on iOS */
} /* For unsupported devices, see the "touchmove" event handler in the "Responsive" section in `main.js` */

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: peachpuff;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /* To prevent double-tap to zoom (useful for rapid clicking) */
  font-size: 0.9375rem;
}

#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;

  position: absolute;
  top: 24px;
  left: 24px;

  font-weight: bold;
  font-size: 1rem;
}

header #parrot {
  width: 86px;
  margin-right: -1.2em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

@media (max-width: 420px) {
  header {
    top: 5.714vw;
    left: 5.714vw;
  }

  header #parrot {
    width: 20.477vw;
    margin-right: -1.2em;
  }

  header #logo {
    width: 13.334vw;
    margin-left: 0.6em;
  }
}

/* Mac, Windows, iOS, Android have Arial. Linux should have the metrically compatible Liberation Sans.
   Everything that is dimensionally sensitive to the device design should be metrically identical
   across all systems. Everything else can use the newer, advanced system font stack. */
main, noscript { font-family: Arial, "Liberation Sans", sans-serif; }

main {
  height: 100dvh;
  display: flex;
  justify-content: center;
}

main > div {
  position: absolute;
  bottom: 4em; /* Base case: at least 1em above a ~3em <footer> */
}

/*                            w / h */
@media (max-aspect-ratio: 0.578 / 1) and (min-aspect-ratio: 0.531 / 1) {
  main > div { /* (see the "Responsive" section in `main.js`) */ }
}
@media (max-aspect-ratio: 0.531 / 1) { main > div { bottom: 9.1em; } }

:root {
  --device-width: 558px; /* Life-size on a (1920x1200) 15" MacBook Pro */
}

/* Special case for stubborn iPhone 7 (Plus) (with toolbar) */
@media (width: 375px) and (height: 548px) { :root { --device-width: 56vh; } }
@media (width: 414px) and (height: 617px) { :root { --device-width: 56vh; } } /* Correct height? */
/* Special case for stubborn iPhone 7 (Plus) (without toolbar) */
@media (width: 375px) and (height: 625px) { :root { --device-width: 56vh; } main > div { bottom: 8.8125em; } }
@media (width: 414px) and (height: 694px) { :root { --device-width: 56vh; } main > div { bottom: 8.8125em; } } /* Correct height? */
/* iPhone 7 doesn't support `@media (aspect-ratio)` for some reason (even though it should) */
@supports not (aspect-ratio) {
  @media (max-height: 430px) {
    :root { --device-width: 76vh; }
    main > div { bottom: 3.5em; }
  }
}

@media (max-width: 581px) { /* floor(558/0.96) */
  :root { --device-width: 96vw; }
}

@media (min-aspect-ratio: 0.65 / 1) {
  :root { --device-width: clamp(1px, 62.364vh, 558px); } /* +0.364 for a smooth transition */

  @media (max-height: 730px) {
    :root { --device-width: 59vh; } /* To avoid clipping at the top on landscape iPads with multiple tabs open */
  }
  @media (max-height: 430px) { /* 430px to have horizontal cables on the largest landscape viewport (iPhone 16 Pro Max w/o toolbar) without switching to vertical cables (from w/ toolbar to w/o toolbar; look bad) */
    :root { --device-width: 67.5vh; } /* To avoid clipping at the top on landscape iPhones with multiple tabs open */
    main > div { bottom: 3.75em; }
  }

  @media (min-height: 1023px) { main > div { bottom: 12em; } }
}


main .cable {
  position: absolute;
  top: -123.3%;
  z-index: 0;

  transition: transform 0.3s ease-in-out;
}
main .cable > img {
  width: calc(0.1751 * var(--device-width));
}
main .output.cable { right: 14.85%; }
main .input.cable  {
  all: unset; /* Unset button styles */
  /* Reapply .cable styles */
  position: absolute;
  top: -123.3%;
  z-index: 0;

  transition: transform 0.3s ease-in-out;

  right: 38.60%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
main .input.cable:focus-visible {
  outline: 2px #F9F9F9 solid;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #193146;
  border-radius: 4px;
}
main .input.cable.unplugged {
  transform: translateY(-23%);
  transition: transform 0.25s ease-in-out;
}
main .cable::before { /* Cable extensions :))) */
  content: "";
  position: absolute;
  top: -999%;
  left: 23%;
  width: 46%;
  height: 1000%;
  z-index: -1;
  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%);
}

main .cable-jack {
  position: absolute;
  width: 11.98%;
  height: 2.95%;
  top: -2.9%; /* Smaller than `height` so that it definitely touches the frame */
  z-index: 1;
}
main .cable-jack.input  { right: 42%; }
main .cable-jack.output { right: 18.38%; }
main .cable-jack > img  { position: absolute; }

main #microphone-sticker {
  position: absolute;
  top: calc(-0.466 * var(--device-width));
  left: calc(0.018 * var(--device-width));
  width: calc(0.34 * var(--device-width));
  padding: 1em 0.5em;
  z-index: 2;

  background-color: hsl(60deg 90% 50%);
  border-radius: 4% / 10%;
  border-top-right-radius: 0;
  border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 97%);
  text-align: center;
  font-weight: bold;
  font-size: calc(0.025 * var(--device-width));
  box-shadow: calc(0.035 * var(--device-width)) calc(0.035 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%);
}
main #microphone-sticker::after {
  content: "";
  position: absolute;
  top: calc(-0.0248 * var(--device-width));
  right: calc(-0.06 * var(--device-width) - (0.024 * var(--device-width)));
  width: calc(0.061 * var(--device-width));
  height: calc(0.08 * var(--device-width));
  border-radius: 0 calc(0.01076 * var(--device-width)) calc(0.01076 * var(--device-width)) 0;
  background-color: hsl(0deg 0% 97%);
}

main #device-frame {
  width: var(--device-width);
  height: calc(0.9 * var(--device-width));
  z-index: 1;

  border-radius: 6.3% / 7%;

  background-color: hsl(187deg 15% 32%);

  /* To clip `#device-frame::before/after` overflow */
  position: relative;
  overflow: hidden;

  box-shadow: calc(0.03707 * var(--device-width)) calc(0.03707 * var(--device-width)) 12px hsl(0deg 0% 0% / 50%);
}
main #device-frame::before {
  /* 3D highlight */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 94%;  /* -6% to compensate for the right border */
  height: 94%; /* -6% to compensate for the bottom border */
  border-radius: 4.4% / 5.6%;

  /* To clip the highlight at the right and bottom edges */
  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%);

  filter: blur(3.5px);

  /* To fix a visual glitch in Mac Safari. Thanks to Gabriele Petrioli <3 https://stackoverflow.com/a/44949525 */
  /* Also https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
  -webkit-transform: translateZ(0);

  box-shadow:
    calc(0.022 * var(--device-width)) calc(0.021 * var(--device-width)) 2px hsl(187deg 15% 32%) inset, /* Frame color to narrow the highlight */
    calc(0.028 * var(--device-width)) calc(0.026 * var(--device-width)) 2px hsl(190deg 17% 72% / 80%) inset; /* Highlight */
}
main #device-frame::after {
  /* 3D shadow */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4.4% / 5.6%;

  box-shadow: calc(-0.024 * var(--device-width)) calc(-0.024 * var(--device-width)) 12px hsl(0deg 0% 0% / 40%) inset;
}

main #device-frame > .io-label {
  position: absolute;
  top: 4.45%;

  color: hsl(0deg 0% 90%);
  font-weight: bold;
  font-size: calc(0.0235 * var(--device-width));
}
main #device-frame > .io-label.input  { right: 44.36%; }
main #device-frame > .io-label.output { right: 19.43%; }

main #input-select {
  position: absolute;
  top: 2.5%;
  right: 54%;
  height: 1.5rem;
  width: 36%;
  z-index: 1;
  border-radius: 4px;
}

main #screen-recess {
  position: absolute;
  top: 10.189%;
  left: 7.7%;
  width: 84.6%;
  height: 40.767%;

  border-radius: 2.6% / 6%;

  box-shadow: inset calc(0.0016 * var(--device-width)) calc(0.0016 * var(--device-width)) 5px 1px hsl(0deg 0% 0% / 50%);
}

main #screen-border {
  position: absolute;
  top: 0.954%;
  left: 0.39%;
  width: 99.29%;
  height: 98.12%;

  border-radius: 2% / 5%;

  background-color: hsl(0deg 0% 17%);
}

/* Workaround for iOS Safari refusing to animate #screen-backlight's box-shadow for screen glow */
/* Idea from https://tobiasahlin.com/blog/how-to-animate-box-shadow/ */
main #screen-backlight-glow {
  position: absolute;
  top: 6.187%;
  left: 2.624%;
  width: 94.562%;
  height: 87.217%;

  border-radius: 0.8% / 2%;

  opacity: 0;
  transition: opacity 0.15s linear 0.3s; /* Screen glow should appear together with the screen backlight */

  box-shadow: 0 0 calc(0.078 * var(--device-width)) calc(0.043 * var(--device-width)) hsl(30deg 78% 65% / 25%);
}
main #screen-backlight-glow.off { opacity: 0; }

main #screen-backlight {
  position: absolute;
  top: 6.187%;
  left: 2.624%;
  width: 94.562%;
  height: 87.217%;
  overflow: hidden;

  border-radius: 0.8% / 2%;

  background-color: hsl(30deg 78% 65%);
  transition: background-color 0.15s linear 0.3s;

  box-shadow: inset 0 0 24px hsl(0deg 0% 0% / 50%);
}
main #screen-backlight.off { background-color: hsl(0deg 0% 18%); }
main #screen-backlight > * { transition: opacity 0.2s linear 0.45s; }
main #screen-backlight.off > * { opacity: 0; }

main #screen-backlight .screen-screw { position: absolute; width: 2.1%; height: 5.25%; }
main #screen-backlight .screen-screw.hori-only,
main #screen-backlight .screen-roller-mid.hori-only { display: none; }
main #screen-backlight .screen-roller-mid { position: absolute; width: 4.74%; height: 11.85%; }
main #screen-backlight .screen-roller-small { position: absolute; width: 3.65%; height: 9.1%; }
main #screen-backlight .screen-roller-big { position: absolute; width: 6.24%; height: 15.6%; }
main #screen-backlight .screen-twisted-vert { position: absolute; width: 1.8%; height: 20%; }
main #screen-backlight .screen-twisted-hori { position: absolute; width: 16.5%; height: 4.5%; display: none; }
main #screen-backlight .screen-needle {
  position: absolute;
  top: 7.3%;
  left: 66.6%;
  width: 1.5%;
  height: 39%;
  transform-origin: 50% 113.5%;
  transition: transform 0.2s ease-in-out, opacity 0.2s linear 0.45s;
}
main #screen-backlight .screen-needle.recording { transform: rotate(-45.7deg); }
main #screen-backlight .screen-needle.playback { transform: rotate(45.2deg); }
main #screen-backlight .screen-playhead {
  position: absolute;
  top: 56.1%;
  left: 62.07%;
  width: 10.56%;
  height: 24.68%;
}
main #screen-backlight .screen-tape-run {
  position: absolute;
  top: 46.06%;
  left: 26.21%;
  width: 56.32%;
  height: 56.9%;
}
main #screen-backlight .screen-tape-reel {
  position: absolute;
  top: 1.2%;
  left: 22.29%;
  width: 20.4%;
  height: 51%;
}
main #screen-backlight .screen-reel-cover {
  position: absolute;
  top: -10.31%;
  left: 17.69%;
  width: 29.61%;
  height: 74.03%;
}
main #screen-backlight .screen-reel-cover.spinning {
  animation: spin-counter-clockwise 2s linear infinite 0.1s;
}
main #screen-backlight .screen-reel-screw {
  position: absolute;
  top: 20.4%;
  left: 29.76%;
  width: 5.48%;
  height: 13.91%;
}
main #screen-backlight .screen-bottom-reel {
  position: absolute;
  top: 88.8%;
  left: 61.08%;
  width: 29.61%;
  height: 74.03%;
}
main #screen-backlight .screen-bottom-reel.spinning {
  animation: spin-clockwise 2s linear infinite 0.1s;
}
/* Variables in keyframes idea from https://stackoverflow.com/a/65489019 */
@keyframes partial-spin-clockwise { from { transform: rotate(var(--from-deg-cw)); } to { transform: rotate(360deg); } }
@keyframes spin-clockwise { to { transform: rotate(360deg); } }
@keyframes partial-spin-counter-clockwise { from { transform: rotate(var(--from-deg-ccw)); } to { transform: rotate(-360deg); } }
@keyframes spin-counter-clockwise { to { transform: rotate(-360deg); } }
main #screen-backlight #screen-timer {
  display: flex;
  align-items: center;
  position: absolute;
  top: 72%;
  left: 8%;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", "Noto Sans Mono", Menlo, monospace;
  font-weight: 700;
  font-size: calc(0.04 * var(--device-width));
  color: hsl(0deg, 0%, 24%);
}
main #screen-backlight #screen-timer-deci {
  position: relative;
  left: 2%;
  font-size: calc(0.025 * var(--device-width));
  color: hsl(0deg, 0%, 35%);
}
main #screen-backlight .screen-filler-left {
  position: absolute;
  top: 6.23%;
  left: -0.2%;
  width: 19.56%;
  height: 50.4%;
}
main #screen-backlight .screen-filler-right {
  position: absolute;
  top: 22.46%;
  right: -0.2%;
  width: 21%;
  height: 66.9%;
}

main #controls .button-recess {
  position: absolute;
  right: 7.97%;
  width: 47.59%;
  height: 18.32%;

  border-radius: 5.5% / 16%;

  box-shadow: inset calc(0.0008 * var(--device-width)) calc(0.0008 * var(--device-width)) 4px hsl(0deg 0% 0% / 50%);
}
main #controls .playback > .button-recess { bottom: 28.0%; }
main #controls .record   > .button-recess { bottom: 7.01%; }

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

  position: absolute;
  top: 2.123%;
  left: 0.862%;
  width: 98.298%;
  height: 95.822%;
  z-index: 1;

  border-radius: 4.8% / 14%;
}
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;
}
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% / 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,
    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% / 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;
  }
}
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% / 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;
}
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;
}
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% / 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,
    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% / 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;
  }
}
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% / 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;
}
main #controls 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.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;
}

main #controls button > span {
  display: flex;
  justify-content: center;
  align-items: center;

  color: hsl(0deg 0% 90%);
  font-weight: bold;
  font-size: calc(0.034 * var(--device-width));

  cursor: pointer;
}
main #controls button[name="playback"] > span::before {
  content: url("play.svg");
  width: 5.5555%;
  padding-top: 0.2em; /* Ugly hack, but nothing else works :/ */
  margin-right: 6px;
}
main #controls button[name="record"] > span::before {
  content: url("record.svg");
  width: 7.118%;
  padding-top: 0.2em; /* Ugly hack, but nothing else works :/ */
  margin-right: 6px;
}
@media (prefers-contrast: more) {
  main #controls button > span { color: hsl(0deg 0% 10%); }
  main #controls button > span::before { filter: invert(1); }
}

/* To prevent the SVG from showing up unstyled for non-keyboard users (see below) */
main #controls .key.r > svg { display: none; }
main #controls .key.f > svg { display: none; }

/* Detect mouse users, so likely also keyboard users; to show keyboard shortcuts */
@media (hover: hover) and (pointer: fine) {
  main #controls .key.r,
  main #controls .key.f {
    position: absolute;
    top: 9.496%;
    right: 4.276%;
    width: 5.985%;
    height: 17.714%;

    border-radius: 10% / 10%;

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

main #controls .button-mode-line {
  position: absolute;
  right: 55.6%;
  width: 15.5%;
  border-top: calc(0.005 * var(--device-width)) solid hsl(0deg 0% 90%);
}
main #controls .button-mode-line.playback {
  bottom: 36.85%;
}
main #controls .button-mode-line.record {
  bottom: 16.1%;
}

main #controls .button-mode-line .mode-indicator {
  display: flex;
  flex-direction: row;
  align-items: center;

  position: absolute;
  top: calc(-0.027 * var(--device-width));
  left: 52%;
}
main #controls .button-mode-line .mode-indicator > .triangle {
  width: 0;
  height: 0;
  border-top: calc(0.0055 * var(--device-width)) solid transparent;
  border-bottom: calc(0.0055 * var(--device-width)) solid transparent;
  border-right: calc(0.01 * var(--device-width)) solid hsl(0deg 0% 90%);
  margin-right: 0.15em;
}
main #controls .button-mode-line .mode-indicator > .text {
  color: hsl(0deg 0% 90%);
  font-weight: bold;
  font-size: calc(0.018 * var(--device-width));
  line-height: 0.99em; /* Hack to ~align the `.triangle` with the `.text`; `align-items: center` doesn't do it. */
                       /* Adding a `margin-top: 4%` to `.triangle` is another option; not tested across browsers/devices. */
}

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

  position: absolute;
  left: 11.17%;
  width: 28.8%;
  height: 16.111%;

  text-wrap: nowrap;
}
main #controls .toggle.playback { bottom: 28.890%; }
main #controls .toggle.record   { bottom:  8.089%; }

main #controls .toggle > label {
  position: absolute;

  color: hsl(0deg 0% 90%);
  font-weight: bold;
  font-size: calc(0.0215 * var(--device-width));
}
main #controls .toggle > label.press {    top: 0; }
main #controls .toggle > label.hold  { bottom: 0; }

main #controls .switch {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: -1;
}
main #controls 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;
}


noscript {
  display: flex;
  align-items: center;
  position: absolute;
  top: 54vh;
  left: calc(50% - 0.5*(var(--device-width) + (0.1075 * var(--device-width))) - (0.0251 * var(--device-width)));
  width: calc(var(--device-width) + (0.1075 * var(--device-width)));
  padding: 1em 0;
  z-index: 2;
  transform: rotate(-2deg);

  background-color: red;
  border: calc(0.0251 * var(--device-width)) solid hsl(0deg 0% 97%);
  border-radius: 10px;

  text-align: center;
  color: hsl(0deg 0% 90%);
}
/* Based on `--device-width` and `bottom` breakpoints above */
@media (max-width: 581px) {
  noscript {
    top: 47vh;
    left: calc(50% - 0.5*(var(--device-width)));
    width: calc(0.96 * var(--device-width));
  }
}
@media (max-height: 430px) {
  noscript {
    top: 20vh;
    left: calc(50% - 0.8*(var(--device-width)) - (0.0251 * var(--device-width)));
    width: calc(1.6 * var(--device-width));
  }
}

footer {
/* https://stackoverflow.com/questions/1776915/how-can-i-center-an-absolutely-positioned-element-in-a-div */
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;

  display: flex;
  flex-direction: column;
  align-items: center;
}

footer p {
  margin: 0;
  margin-top: 0.25em;
}


/* Rotate cables and related items 90º to look better in short, landscape viewports */
@media (max-height: 430px) {
  main .cable-jack { transform: rotate(90deg); }
  main .cable-jack.input  { top: 20% ;right: -7.35%; }
  main .cable-jack.output { top: 40% ;right: -7.35%; }

  main .cable { transform: rotate(90deg); }
  main .output.cable { top: -36.1% ;right: -49.1%; }
  main .input.cable  { top: -56.2% ;right: -49.1%; transform: rotate(90deg); }
  main .input.cable.unplugged { transform: translateX(180%) rotate(90deg); }

  main #microphone-sticker {
    top: calc(0.15 * var(--device-width));
    left: calc(0.47 * var(--device-width));
  }
  main #microphone-sticker::after {
    top: calc(-0.024 * var(--device-width));
    right: calc(-0.06 * var(--device-width) - (0.023 * var(--device-width)));
  }

  main #device-frame > .io-label { transform: rotate(90deg); }
  main #device-frame > .io-label.input  { top: 19.7%; right: 0%; }
  main #device-frame > .io-label.output { top: 39.5%; right: -1.2%; /* right: WTF? */ }

  main #input-select { top: 2.2%; right: 3%; }

  main #screen-backlight .screen-screw.vert-only,
  main #screen-backlight .screen-roller-mid.vert-only { display: none; }
  main #screen-backlight .screen-screw.hori-only,
  main #screen-backlight .screen-roller-mid.hori-only { display: block; }
  main #screen-backlight .screen-twisted-vert { display: none; }
  main #screen-backlight .screen-twisted-hori { display: block; }
  main #screen-backlight .screen-needle { transform: rotate(90deg); }
  main #screen-backlight .screen-needle.recording { transform: rotate(61deg); }
  main #screen-backlight .screen-needle.playback { transform: rotate(121deg); }
  main #screen-backlight .screen-filler-right {
    transform: rotate(-90deg) scaleX(0.7);
    top: -15.5%;
    right: 26%;
  }

  #dmt-label {
    top: unset;
    bottom: 0.75rem;
  }

  #dmt-reset {
    top: unset;
    bottom: calc(0.75rem + 20px + 6px + 2px + 4px);
    padding: 1px 4px 2px 4px;

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

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
  }

  footer { bottom: calc(8px + 0.25em); /* + 0.25em to clear iPhone's home bar in landscape */ }

  footer p { margin-top: 0; }
}

.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;
}

/* From https://css-tricks.com/revisiting-prefers-reduced-motion/ */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}