:root {
  color-scheme: dark;
  font: 16px/1.45 system-ui, sans-serif;
  color: #edf4f3;
  background: #11191d;
  --panel: #1b262b;
  --line: #3d515a;
  --accent: #8ae2d4;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
main { max-width: 56rem; margin: 0 auto; padding: clamp(1rem, 4vw, 3rem); }
.eyebrow { margin: 0; color: var(--accent); font-weight: 700; letter-spacing: .05em; }
h1 { margin: .2rem 0; font-size: clamp(1.65rem, 5vw, 2.75rem); }
h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
p { margin: .6rem 0; color: #c5d5da; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
button, select {
  color: inherit; background: #263940; border: 1px solid var(--line); border-radius: .4rem;
  min-height: 2.75rem; padding: .45rem .6rem; font: inherit;
}
button:not(:disabled), select:not(:disabled) { cursor: pointer; }
:disabled { opacity: .55; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }
.audio-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
#audio { width: 100%; height: 24rem; border: 0; margin-top: .75rem; border-radius: .4rem; }
.guest-receiver { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; }
.stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .4rem; border: 1px solid var(--line);
  background: linear-gradient(165deg, #204752, #33223f);
}
#marker {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%);
  padding: .18rem .42rem; border-radius: .35rem; background: var(--accent); color: #102724; font-weight: 700;
  transition: top .25s ease, left .25s ease;
}
@media (prefers-reduced-motion: reduce) { #marker { transition: none; } }
.arrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .75rem; }
.arrows button { font-size: 1.15rem; }
#wardrobe { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; border: 0; padding: 0; margin: 0; }
#wardrobe label { min-width: 0; display: grid; gap: .25rem; }
#wardrobe label:first-child { grid-column: 1 / -1; }
#wardrobe select { width: 100%; }
#feedback { color: #ffd4aa; }
@media (max-width: 42rem) { .panels { grid-template-columns: 1fr; } }