:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background: #11151d; color: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 82% 0%, #222c3e 0, #11151d 48%); min-height: 100vh; }
.page { max-width: 1100px; margin: auto; padding: clamp(20px, 4vw, 48px); }
.eyebrow { color: #9aa9c2; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 14px 0 8px; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; }
.intro, .note { color: #aab6c8; line-height: 1.5; }
.intro { font-size: 18px; max-width: 700px; }
.search-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 10px; }
.search-row label { color: #c6d0df; font-size: 15px; font-weight: 600; }
.search-row input { flex: 1; min-width: min(100%, 260px); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0 20px; }
.controls label { color: #c6d0df; font-size: 15px; font-weight: 600; }
select, input, button { min-height: 46px; border-radius: 10px; font: inherit; }
select, input { border: 1px solid #45536a; background: #1e2836; color: #fff; padding: 8px 12px; }
select { min-width: min(100%, 300px); max-width: 100%; flex: 1; }
input { width: 90px; }
button { border: 0; background: #85adf0; color: #101826; padding: 10px 20px; font-weight: 700; cursor: pointer; }
button.secondary { background: #344154; color: #f5f7fb; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #bfd4fa; outline-offset: 2px; }
.screen { overflow: hidden; border-radius: 18px; background: #020304; border: 1px solid #344154; aspect-ratio: 16 / 9; }
canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
#status { color: #b9d2fa; min-height: 24px; }
.note { font-size: 14px; max-width: 800px; }
@media (max-width: 650px) { .controls { align-items: stretch; } .controls label, .search-row label { width: 100%; } select { min-width: 100%; } }