body {
  margin: 0;
  padding: 0 16px 32px;
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  /* Tiled star field, the 1997 way but without a GIF. */
  background-color: #000033;
  background-image:
    radial-gradient(1.5px 1.5px at 10px 15px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45px 70px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 80px 30px, #ffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 25px 95px, #aaf 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 65px 110px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 105px 85px, #fff 50%, transparent 51%);
  background-size: 120px 120px;
}

a { color: #00ffff; }
a:visited { color: #ff00ff; }

marquee.top {
  background: #ff0000;
  color: #ffffff;
  font-weight: bold;
  padding: 4px 0;
  margin: 0 -16px;
  border-bottom: 3px ridge #ffff00;
}

h1 { font-size: clamp(1.6rem, 6vw, 3rem); margin: 0.5em 0 0.2em; }

.rainbow {
  background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow 2s linear infinite;
  text-shadow: none;
}

@keyframes rainbow { to { background-position: 200% 0; } }

.blink { animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.big { font-size: 1.5rem; color: #ff00ff; }
.small { font-size: 0.8rem; color: #ccccff; }
.warn { color: #ff3333; font-weight: bold; }
.new { color: #00ff00; font-weight: bold; }

.rainbow-hr {
  border: 0;
  height: 6px;
  max-width: 760px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
}

/* --- Under construction "GIF" ------------------------------------------- */

.construction {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.sign {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #000;
  font-weight: bold;
  font-family: Impact, "Arial Black", sans-serif;
  border: 4px solid #000;
  background: repeating-linear-gradient(-45deg, #ffcc00 0 14px, #000 14px 28px);
  background-size: 40px 40px;
  animation: stripes 0.6s linear infinite;
}

.sign span { background: #ffcc00; padding: 2px 6px; border: 2px solid #000; }

@keyframes stripes { to { background-position: 40px 0; } }

.worker { position: relative; width: 34px; height: 44px; animation: dig 0.5s ease-in-out infinite alternate; }
.worker .head { position: absolute; left: 10px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #ffcc99; border: 2px solid #000; border-top: 6px solid #ff8800; }
.worker .body { position: absolute; left: 12px; top: 16px; width: 10px; height: 18px; background: #ff8800; border: 2px solid #000; }
.worker .shovel { position: absolute; left: 22px; top: 18px; width: 4px; height: 24px; background: #885500; transform-origin: top; transform: rotate(-30deg); }
@keyframes dig { to { transform: rotate(-12deg) translateY(2px); } }

.lamp {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #000;
  background: #ff6600;
  box-shadow: 0 0 12px #ff6600;
  animation: blink 0.5s steps(1) infinite;
}
.lamp:last-child { animation-delay: 0.25s; }

/* --- Control panel ------------------------------------------------------ */

.panel {
  width: 100%;
  max-width: 760px;
  border-color: #c0c0c0;
  background: #000066;
  margin: 16px 0;
}

.panel-title {
  background: #000080;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 1px;
  border: 3px outset #c0c0c0;
}

button {
  font-family: inherit;
  font-weight: bold;
  color: #000;
  background: #c0c0c0;
  border: 3px outset #ffffff;
  padding: 6px 12px;
  cursor: pointer;
}
button:active { border-style: inset; }
button:disabled { color: #555; cursor: wait; }

.huge { font-size: 1.4rem; padding: 12px 24px; }

#presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.preset { width: 132px; min-height: 84px; font-size: 0.85rem; hyphens: manual; }
.preset .emoji { font-size: 2rem; }
.preset.active { background: #ffff00; border-style: inset; }

.sliders { width: 100%; color: #00ff00; font-family: "Courier New", monospace; }
.sliders td { padding: 4px; }
.sliders input { width: 100%; accent-color: #ff00ff; }
.sliders .value { white-space: nowrap; width: 8em; text-align: right; }

.monitor { display: inline-block; margin-top: 8px; color: #fff; }

#recording audio { margin: 8px 0; max-width: 100%; }
.download { font-weight: bold; }

/* --- Footer --------------------------------------------------------------- */

.footer-table { color: #fff; }

.counter { display: inline-flex; margin-top: 4px; border: 2px inset #888; background: #000; }
.counter span {
  font-family: "Courier New", monospace;
  font-size: 1.4rem;
  color: #ff2222;
  background: linear-gradient(#222, #000 50%, #222);
  padding: 2px 5px;
  border-right: 1px solid #444;
}

@media (max-width: 520px) {
  /* Label and value on one line, slider full width below. */
  .sliders tr { display: grid; grid-template-columns: 1fr auto; margin-bottom: 6px; }
  .sliders td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .sliders .value { width: auto; font-size: 0.8rem; }
  .preset { width: 46%; }
}