:root{color-scheme:dark;background:#101820;color:#ecf2f6;font:16px/1.65 Tahoma,Arial,sans-serif;--muted:#aabac7;--line:#334453;--accent:#ffad5e}
*{box-sizing:border-box}
body{margin:0}
main{width:min(920px,calc(100% - 36px));margin:0 auto;padding:30px 0 45px}
.masthead,.hero,footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.masthead{border-bottom:1px solid var(--line);padding-bottom:17px}
.brand,.eyebrow,h1{margin:0}
.brand{font-weight:700;font-size:20px}
.brand span,.eyebrow{color:var(--accent)}
.tag,dt,footer{color:var(--muted)}
.hero{padding:30px 0 20px}
h1{font-size:clamp(26px,5vw,41px);line-height:1.4}
.eyebrow{font-size:13px}
.connection{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px}
.connection::before{content:"";height:8px;width:8px;border-radius:50%;background:#e9ad61}
.connection[data-online=true]::before{background:#78dda9}
.connection[data-online=false]::before{background:#ff958f}
.notice{padding:12px 14px;border:1px solid var(--line);border-radius:10px;color:#ffcbc8}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.card{border:1px solid var(--line);border-radius:14px;padding:15px 17px;min-height:110px;background:#18242f}
.card.primary{border-color:#b37a49;background:#2a221d}
.card dt{font-size:14px}
.card dd{margin:5px 0 0;font-weight:700;font-size:21px;overflow-wrap:anywhere}
.card dd[dir=ltr]{text-align:right}
.card.primary dd{font-size:30px;color:var(--accent)}
footer{margin-top:20px;font-size:13px}
button{font:inherit;border:1px solid #94653e;border-radius:8px;background:#32251e;color:#ffe4ca;min-height:40px;padding:5px 14px;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:580px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:13px}.card dd{font-size:17px}}
[hidden]{display:none!important}
.account{display:flex;align-items:center;gap:12px}
.login{max-width:400px;margin:40px auto 0}
.login form,.device-picker{display:grid;gap:12px;margin:15px 0}
form label{display:grid;gap:4px}
input,select{min-width:0;width:100%;font:inherit;color:inherit;background:#18242f;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.management{border:1px solid var(--line);border-radius:10px;padding:12px 15px;margin:14px 0}
.management summary{cursor:pointer}
.management form{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:12px 0}
.management form label{flex:1 1 175px}
.management li{margin:7px 0}
.management li button{margin-inline-start:10px}
#pair-code{display:block;margin:5px 0;font:15px monospace;overflow-wrap:anywhere}
.danger{background:#321f23;color:#ffd1d3;border-color:#834c51}