* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #0b0c10; color: #fff;
}
header { padding: 1rem; background: #12151a; border-bottom: 1px solid #1f232b; }
h1 { margin: 0 0 .5rem; font-size: 1.4rem; }
p { margin: .5rem 0; }
main { padding: 1rem; }
.video-wrapper {
  position: relative; max-width: 600px; margin: 0 auto;
  border: 1px solid #1f232b; border-radius: 12px; overflow: hidden; background: #0f131a;
}
video { width: 100%; height: auto; display: block; background: #000; }
#overlay 
{ position: absolute; left: 0; top: 0; pointer-events: none; }
.controls { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem auto; max-width: 600px; }
button { padding: .6rem .9rem; border-radius: 8px; border: 1px solid #2a2f38; background: #1a73e8; color: #fff; cursor: pointer; }
button[disabled] { opacity: .5; cursor: not-allowed; }
.hint { max-width: 600px; margin: 0.5rem auto; font-size: .9rem; color: #c7d2fe; }
.hidden { display: none; }
#results-section { margin-top: 1rem; }
.swatch { width: 100%; max-width: 600px; height: 70px; border-radius: 8px; border: 1px solid #2a2f38; margin: .5rem auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
h3 { margin: .5rem 0; font-size: 1rem; }
ul { list-style: none; padding-left: 0; }
li { margin: .2rem 0; }
.actions { display: flex; gap: .5rem; margin-top: .5rem; }
footer { padding: 1rem; text-align: center; color: #9aa0a6; }