:root { color-scheme: light dark; font: 16px/1.55 system-ui, sans-serif; }
body { margin: 0; background: light-dark(#f5f7fb, #111827); color: light-dark(#192338, #edf2fa); }
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 5rem; }
header { padding: 1rem 0; } h1 { font-size: 2rem; margin: .2rem 0; } h2 { font-size: 1.2rem; margin-top: 0; }
.eyebrow { font-size: .75rem; letter-spacing: .14em; font-weight: 700; }
section { background: light-dark(#fff, #1d293a); border: 1px solid light-dark(#d9e0ea, #39465a); border-radius: .8rem; padding: 1.25rem; margin: 1rem 0; }
label { display: block; margin: .8rem 0; } input, select { display: block; box-sizing: border-box; width: 100%; margin-top: .3rem; padding: .65rem; font: inherit; }
input[type="checkbox"] { display: inline-block; width: auto; margin: 0 .4rem 0 0; }
button { font: inherit; padding: .55rem .9rem; border-radius: .4rem; border: 1px solid #2856b8; background: #2856b8; color: white; cursor: pointer; }
button.secondary { background: transparent; color: light-dark(#23468f, #b8ccff); } button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #6a95ff; outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; } #status, #device { white-space: pre-wrap; } #status:not(:empty) { padding: .8rem; border-left: 4px solid #2856b8; }
li { margin: .6rem 0; } li button { margin-left: .5rem; }