:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #080a0f;
  color: #f2f5fa;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #172034, #080a0f 55%); }
main { width: min(100% - 2rem, 1280px); margin: 0 auto; padding: 2rem 0; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
h1 { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 4vw, 2.5rem); }
#status, #control-status { color: #aebbd0; }
canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid #2b3852; border-radius: 0.75rem; box-shadow: 0 1.5rem 5rem #0008; }
button, input, a { font: inherit; }
button, nav a { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0.7rem 1rem; border: 1px solid #5873a7; border-radius: 0.55rem; background: #172844; color: #f7f9ff; text-decoration: none; cursor: pointer; }
button:hover, nav a:hover { background: #213a63; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
#start-audio { margin-top: 1rem; }
.hint { color: #aebbd0; line-height: 1.5; }
nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
#controller { max-width: 42rem; }
form { display: grid; gap: 0.8rem; padding: 1.25rem; border: 1px solid #2b3852; border-radius: 0.75rem; background: #101621; }
label { font-weight: 700; }
input { width: 100%; padding: 0.85rem; border: 1px solid #52617b; border-radius: 0.45rem; background: #070a10; color: inherit; }
input:focus { outline: 3px solid #688bd066; border-color: #82a8ee; }
@media (max-width: 640px) { header { display: block; } main { padding-top: 1rem; } }