@property --ambient {
  syntax: '<color>';
  initial-value: #050;
  inherits: true;
}

html {
  transition: --ambient ease 2s;
  --foreground: color-mix(in oklab, var(--ambient) 80%, #fff 20%);
  color: #ccc;
  background-color: var(--ambient);
  background-image: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.2) 25%, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) 75%, rgba(0,0,0,.6) 100%), repeating-linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0) 1px, rgba(0,0,0,.5) 2px);
  background-attachment: fixed;
  background-position: top center;
  font-weight: 550;
  font-size: 18px;
  text-align: center;
  overscroll-behavior: none;
}

html, #graffiti, input[type="text"], select, button {
  text-shadow: #000 -0.08em -0.08em, #000 0.08em 0.08em, #000 -0.08em 0.08em, #000 0.08em -0.08em, #000 0.11em 0, #000 -0.11em 0, #000 0 0.11em, #000 0 -0.11em, #000 -0.1em -0.06em, #000 0.1em 0.06em, #000 -0.1em 0.06em, #000 0.1em -0.06em, #000 -0.06em -0.1em, #000 0.06em 0.1em, #000 -0.06em 0.1em, #000 0.06em -0.1em;
  font-family: monospace;
}

body {
  margin: 0;
}

#graffiti {
  font-size: 54px;
  margin-top: 0.5em;
  display: inline-block;
  color: var(--foreground);
  cursor: pointer;
}

/* inputs */

input[type="text"], select, button {
  font-size: inherit;
  border: 0.15em solid #000;
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.2);
  color: #ccc;
  margin: 0.5em;
  cursor: pointer;
  padding: 0.2em 0.3em;
  box-sizing: content-box;
  height: 1.45em;
}
input[type="text"]:hover, select:hover, button:hover, kbd[data]:hover {
  border-color: #050;
  color: #0f0;
}
option {
  background: #333;
  color: #ccc;
}
button:active {
  background: rgba(0, 0, 0, 0.3);
}

/* range inputs */

.range-row {
  width: 25em;
  max-width: 90vw;
  margin: 0.8em auto 0;
  line-height: 1em;
}
#t-now, #t-end {
  font-size: 0.8em;
  opacity: 0.6;
  margin: 0 0.1em;
}
#t-now {
  float: left;
}
#t-end {
  float: right;
}
input[type="range"] {
  background: transparent;
  width: 100%;
  max-width: 18em;
  height: 0.6em;
  box-sizing: border-box;
  border: 0.15em solid #000;
  font-size: 1em;
  cursor: pointer;
  opacity: 0.6;
}
@supports not (selector(::-moz-range-progress)) {
input[type="range"] {
  appearance: none;
  overflow: hidden;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #ccc;
  outline: 0.15em solid #000;
  border-radius: 0;
  cursor: grab;
  width: 0.3em;
  height: 100%;
  box-shadow: -100vw 0 0 100vw var(--foreground, #ccc);
}
input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}
}
input[type="range"]::-moz-range-track {
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
input[type="range"]::-moz-range-progress {
  height: 100%;
  background: #0f0;
  background: var(--foreground, #ccc);
}
input[type="range"]::-moz-range-thumb {
  background: #ccc;
  border: 0.15em solid #000;
  border-radius: 0;
  width: 0.5em;
  height: 1em;
  cursor: grab;
}
#seekbar::-moz-range-thumb {
  opacity: 0;
}
#seekbar::-moz-range-thumb:hover {
  opacity: 1;
}
#seekbar::-moz-range-thumb:active {
  opacity: 1;
  cursor: grabbing;
}

.range-icon {
  padding: 0.2em 0.3em 0.4em;
  display: inline-block;
  cursor: pointer;
}
.range-spacer {
  padding: 0 0.3em;
  display: inline-block;
  visibility: hidden;
  height: 0.1em;
}

/* more options */

#more-options {
  display: inline-block;
  padding: 0 0.5em;
  margin: 0;
}
#oscilloscope {
  max-width: 90vw;
  background: rgba(0,0,0,0.5);
  border-radius: 0.7em;
  min-height: 10em;
}

button.false::before {
  content: '\274e\00a0';
  filter: grayscale(1) brightness(0.7) contrast(2.5) brightness(1.2);
}
button.true::before {
  content: '\2705\00a0';
  filter: brightness(0.7) contrast(2.5) brightness(1.2);
}

button.fav-false::before {
  content: '\2b50';
  filter: grayscale(1) brightness(0.7);
}
button.fav-true::before {
  content: '\1f31f';
}
#metadata-container:not([open]):has(.fav-true) > summary:after {
  content: ' \2b50'
}

/* animations */

@keyframes sqew {
  0% {
    transform: skew(12deg, 8deg);
  }
  50% {
    transform: skew(-12deg, -8deg);
  }
  100% {
    transform: skew(12deg, 8deg);
  }
}
@keyframes sqiz {
  0% {
    transform: scale(0.8, 1.25);
  }
  50% {
    transform: scale(1.25, 0.8);
  }
  100% {
    transform: scale(0.8, 1.25);
  }
}

.leaf {
  display: inline-block;
}
#graffiti.waving > .leaf {
  animation: sqew var(--period) infinite ease-in-out;
  transform-origin: 50% 60%;
}
#graffiti.loading > .leaf {
  animation: sqiz 0.6s infinite ease-in-out;
  transform-origin: 50% 60%;
}

/* overlays */

.overlay {
  padding: 0.25em 0.5em;
  position: absolute;
  box-sizing: border-box;
}
.overlay[open] {
  background-color: rgba(0, 0, 0, 0.65);
  /*backdrop-filter: blur(2em);*/ /* disabled because of performance */
}
summary {
  cursor: pointer;
  opacity: 0.6;
}
summary:hover {
  opacity: 1;
}
#metadata-container {
  z-index: 5;
  border-radius: 0 0 0.5em 0;
}
#metadata-container[open] {
  min-width: 15em;
  max-width: 40em;
}
#about-container {
  right: 0;
}
#about-container[open] {
  width: 100%;
}
.overlay-pad {
  text-align: left;
  font-weight: normal;
  text-shadow: #000 1px 1px 1px, #000 0px 1px 1px;
}
#metadata {
  font-family: monospace;
}
#about-container {
  z-index: 10;
}
#about-container > summary {
  float: right;
}
#about {
  max-width: 50em;
  font-family: sans-serif;
  margin: auto;
}
#metadata-resizer {
  height: 100%;
  width: 0.5em;
  position: absolute;
  right: 0;
  top: 0;
  cursor: ew-resize;
}

/* contents */

#output-id {
  display: block;
  opacity: 0.5;
}
.metadata-button {
  margin: 0.25em;
  height: 1.2em;
  width: 1.2em;
  line-height: 1em;
  font-family: monospace;
  border-color: #555;
  opacity: 0.7;
}
.metadata-button:hover {
  opacity: 1;
}
.metadata-button:active {
  border-color: #0a0;
  opacity: 1;
}
#output-title {
  display: block;
  color: #0f0;
}
#output-lore {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

a {
  color: #5af;
}
a:visited {
  color: #99f;
}
a:hover {
  color: #7cf;
}
a:visited:hover {
  color: #caf;
}
kbd {
  border: 0.1em solid rgba(0, 0, 0, 0.4);
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.2);
  padding: 0 0.1em;
}
kbd[data] {
  cursor: pointer;
}
sub {
  color: #555;
  font-size: 0.8em;
}
#supported-exts {
  font-style: italic;
}
.side-logo {
  float: left;
  max-height: 8em;
  margin: 1em 0 0 0.25em;
  transition: transform 0.5s;
  transform-origin: 60% 25%;
}
.footer {
  font-style: italic;
  color: #aaa;
  font-size: 0.9em;
  margin-top: 3em;
}

/* mobile tweaks */

@media (20rem <= width <= 35rem) {
body {
  font-size: 24px;
}
}
@media (width <= 35rem) {
.controls {
  font-size: 4.1vw;
}
input[type="range"], button, select {
  border-width: 0.2em;
}
.controls > button, .controls > select, #metadata button {
  font-size: 6vw;
  border-width: 0.15em;
}
.controls > button {
  width: 2.55em;
}
.controls > select {
  width: 68vw;
}
#progress-row {
  max-width: 84vw;
}
#more-options, #t-now, #t-end {
  padding: 0.5em 1.2em;
  font-size: 4.1vw;
}
input[type="range"] {
  height: 0.7em;
  border-radius: 0.25em;
}
.range-row {
  max-width: 95vw;
}
#graffiti {
  margin: 0.8em auto 0.4em;
  font-size: 12vw;
}
summary {
  padding-bottom: 0.75em;
}
.overlay[open] {
  background-color: rgba(0, 0, 0, 0.85);
}
#metadata-container summary {
  text-align: left;
}
}