:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; background: #06090a; color: #f4f7f6; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 50% 30%, #123033 0, #080d0f 36%, #050708 70%); }
.shell { width: min(760px, 100%); margin: 0 auto; padding: 24px; }
header { display: flex; align-items: baseline; gap: 14px; padding: 12px 0 28px; letter-spacing: .05em; }
header span { font-size: clamp(24px, 5vw, 38px); font-weight: 800; }
header small { color: #a9b0ae; font-weight: 700; }
.card { min-height: 560px; padding: clamp(30px, 8vw, 72px); border: 1px solid #273336; background: rgba(8,13,15,.88); text-align: center; box-shadow: 0 24px 80px #000a; }
.signal { width: 104px; height: 104px; margin: 0 auto 30px; border: 2px solid #61c7c4; border-radius: 50%; display: grid; place-items: center; color: #61c7c4; font-size: 44px; box-shadow: 0 0 32px #37afab33; }
.eyebrow { margin: 0 0 12px; color: #8fa09e; letter-spacing: .18em; font-size: 12px; }
h1 { margin: 0; color: #73d1ce; font-size: clamp(30px, 8vw, 54px); letter-spacing: .03em; }
#format { min-height: 24px; color: #c2cac8; }
button { width: min(390px, 100%); min-height: 68px; margin: 28px 0 22px; border: 1px solid #84ddda; border-radius: 5px; background: #199e9d; color: white; font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; }
button:hover { background: #22afad; }
button:disabled { opacity: .55; cursor: wait; }
.meter { width: min(390px, 100%); height: 8px; margin: 0 auto 28px; overflow: hidden; background: #172124; }
.meter span { display: block; width: 0; height: 100%; background: #73d1ce; transition: width .12s linear; }
.note { color: #99a4a2; font-size: 14px; line-height: 1.6; }
#error { min-height: 22px; color: #ff988f; }
@media (max-width: 520px) { .shell { padding: 14px; } .card { min-height: calc(100vh - 100px); padding-inline: 24px; } }