:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: dark; color: #f5f2e8; background: #0d1915; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at top, #234536 0%, #0d1915 70%); }
main { width: min(100%, 420px); }
.brand { height: 68px; width: 68px; display: grid; place-items: center; border: 1px solid #496b53; background: #2b503b; border-radius: 22px; font-size: 39px; color: #c6dba5; margin-bottom: 28px; box-shadow: 0 12px 40px #0003; }
.eyebrow { color: #adc19a; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 700; }
h1 { font-size: clamp(30px, 8vw, 39px); line-height: 1.12; letter-spacing: -.035em; margin: 12px 0 16px; }
p { color: #bbcabf; line-height: 1.55; font-size: 15px; }
#status { min-height: 24px; font-size: 14px; color: #c6dba5; overflow-wrap: anywhere; }
#status.error { color: #ffb6a6; }
button, input { font: inherit; font-size: 16px; width: 100%; min-height: 52px; border-radius: 14px; }
button { background: #263d30; color: #f5f2e8; font-weight: 650; border: 1px solid #45604d; padding: 13px 16px; margin-top: 12px; cursor: pointer; touch-action: manipulation; }
button.primary { background: #c6dba5; border-color: #c6dba5; color: #17251c; }
button.quiet { border: 0; background: transparent; color: #aebdb1; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible { outline: 3px solid #e5d9a9; outline-offset: 3px; }
label { display: block; margin-bottom: 8px; font-size: 13px; color: #c9d3c9; }
input { border: 1px solid #45604d; background: #10251b; padding: 13px 16px; color: #f5f2e8; }
.separator { display: flex; align-items: center; gap: 12px; margin: 25px 0; color: #93a798; font-size: 12px; }
.separator::before, .separator::after { content: ""; height: 1px; background: #38503f; flex: 1; }
.player { display: flex; gap: 14px; align-items: center; padding: 18px; background: #1c3326; border: 1px solid #3d5945; border-radius: 18px; margin: 8px 0 16px; }
.player strong { display: block; margin-top: 5px; font-size: 22px; overflow-wrap: anywhere; }
.avatar { background: #344f36; color: #c6dba5; border-radius: 12px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; flex-shrink: 0; }
.footnote { margin-top: 30px; font-size: 12px; color: #849a89; }