:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif;
  background: #0f1115; color: #e8e8e8;
}
main { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 4rem; }
h1 { font-size: 1.4rem; }
section { margin: 0.75rem 0; }
input[type="url"], input[type="password"] {
  width: 100%; padding: 0.7rem; border-radius: 8px;
  border: 1px solid #333; background: #191c22; color: #fff; font-size: 1rem;
}
#source-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
#source-row input[type="url"] { flex: 1 1 100%; }
button {
  padding: 0.6rem 0.9rem; border-radius: 8px; border: 1px solid #3a3f4b;
  background: #232833; color: #fff; font-size: 1rem; cursor: pointer;
}
button:active { background: #2e3543; }
#player { width: 100%; margin-top: 0.5rem; }
.delay-readout { font-size: 2rem; text-align: center; margin: 0.5rem 0; }
#delay-slider { width: 100%; }
.nudges { display: flex; gap: 0.4rem; justify-content: center; margin: 0.6rem 0; }
.nudges button { flex: 1; }
#presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#presets button { background: #1c2430; border-color: #2b3444; }
.muted { color: #9aa0aa; font-size: 0.85rem; }
.warn { color: #ffb454; }
.hidden { display: none; }
#help { font-size: 0.9rem; color: #c7ccd4; border: 1px solid #232833; border-radius: 8px; padding: 0.4rem 0.75rem; }
#help summary { cursor: pointer; color: #9aa0aa; }
#help p { margin: 0.5rem 0; line-height: 1.4; }
#help ul { margin: 0.4rem 0; padding-left: 1.1rem; }
#help li { margin: 0.35rem 0; line-height: 1.4; }
#help b { color: #e8e8e8; }