:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #071521; color: #f5f8fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
main { width: min(100%, 34rem); min-height: 100svh; padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; text-align: center; }
.eyebrow { color: #85a7be; font-size: .72rem; font-weight: 700; letter-spacing: .12em; margin: 1rem 0; }
h1 { font-size: clamp(2.2rem, 11vw, 3.6rem); margin: .25rem 0; }
.flight, .hint, .detail { color: #b9cad5; }
.status { color: #071521; background: #9ce1bb; border-radius: 999px; font-weight: 800; letter-spacing: .08em; margin: 2.5rem auto .75rem; padding: .55rem 1rem; }
.detail { min-height: 3rem; margin: 0; }
#ptt { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; margin: auto 0 1rem; min-height: 13rem; border: 0; border-radius: 50%; background: #e2554f; box-shadow: 0 .8rem 0 #9c332f, 0 1.5rem 2.5rem #0008; cursor: pointer; }
#ptt:disabled { background: #476070; box-shadow: 0 .8rem 0 #30434e; cursor: not-allowed; }
#ptt.transmitting { background: #f69743; box-shadow: 0 .8rem 0 #b95d19; transform: translateY(.4rem); }
.hint { font-size: .9rem; margin: 1.25rem 0 0; }