:root{background:#071e2a;color:#f3f8fc;font-size:15px;scroll-behavior:smooth;scroll-padding-top:24px}
main{max-width:500px;padding:calc(18px + env(safe-area-inset-top)) 22px 120px}
header{gap:12px}h1{font-size:23px;letter-spacing:-.8px}h2{font-size:19px;letter-spacing:-.3px}
.muted,small{color:#a8c2d0}section{background:#0d3042;border:0;border-radius:17px;padding:22px;margin:20px 0;box-shadow:0 14px 24px #02121c22}
.status{text-align:left;background:linear-gradient(125deg,#103d61,#0c2d3d);border-top:2px solid #218bff;padding:25px;box-shadow:0 15px 0 -7px #0a2737,0 28px 0 -15px #09222e;margin-bottom:40px}
.symbol{font-size:36px;line-height:1;margin-bottom:20px;color:#66dcbb}.status h2{font-size:24px;max-width:300px}
.status p{color:#bed0df}.status small{display:block;font-size:12px}.badge{background:#12394b;color:#a5d9ed;font-size:11px;border:1px solid #275063}
.primary-link{display:inline-block;margin-top:23px;background:#087cff;color:white;padding:14px 20px;border-radius:28px;font-weight:650;text-decoration:none}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}.feature{display:flex;flex-direction:column;min-height:157px;padding:18px 16px;background:#0d3042;border-radius:15px;text-decoration:none;color:#f3f8fc}
.feature-icon{display:grid;place-items:center;width:38px;height:38px;background:#154d69;border-radius:50%;font-size:24px;margin-bottom:22px;color:#bde7ff}
.feature strong{font-size:14px;margin-bottom:5px}.feature strong span{float:right;font-size:20px;font-weight:400}.feature small{font-size:12px}.feature:hover,.feature:focus-visible{background:#164156}
button{background:#087cff;color:white;border:0;border-radius:26px;min-height:48px}button.secondary{border:1px solid #315264;background:transparent;color:#c8dce7}
input{background:#092330;border:1px solid #315264;border-radius:10px;margin-bottom:15px;font-size:16px}
.row{border-color:#21495a;font-size:14px}.row span:last-child{text-align:right;overflow-wrap:anywhere}
nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,500px);display:flex;justify-content:space-around;background:#0c2b3cee;border-top:1px solid #234455;padding:12px 8px calc(12px + env(safe-area-inset-bottom));backdrop-filter:blur(16px);z-index:10}
nav a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#dcecf5;font-size:24px;min-width:65px}nav small{font-size:11px;color:#dcecf5}
a:focus-visible,button:focus-visible{outline:3px solid #80c5ff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}
@media(max-width:340px){main{padding-left:14px;padding-right:14px}.feature-grid{gap:10px}.feature{padding:14px}}
/* Auth is a separate screen. Visibility is presentation, not authorization. */
body[data-session="signed-out"] main>section:not(#account),
body[data-session="signed-out"] .feature-grid,
body[data-session="signed-out"] nav,
body[data-session="signed-out"] #demo,
body[data-session="signed-out"] #reset,
body[data-session="signed-out"] #demoNotice{display:none!important}
body[data-session="signed-out"] #account{margin-top:35px}
body[data-session="signed-out"] #badge{display:none}
body[data-session="signed-in"] #account label,
body[data-session="signed-in"] #account input,
body[data-session="signed-in"] #signin,
body[data-session="signed-in"] #signup,
body[data-session="signed-in"] #account>.muted{display:none}
body[data-session="signed-in"] main>section,
body[data-session="signed-in"] .feature-grid{display:none}
body[data-session="signed-in"][data-view="home"] #home,
body[data-session="signed-in"][data-view="home"] #device-section,
body[data-session="signed-in"][data-view="home"] .feature-grid,
body[data-session="signed-in"][data-view="pairing"] #pairing,
body[data-session="signed-in"][data-view="events"] #events,
body[data-session="signed-in"][data-view="account"] #account{display:block}
body[data-session="signed-in"][data-view="home"] .feature-grid{display:grid}
nav a[aria-current="page"]{color:#67b9ff;background:#123e58;border-radius:15px}
.eyebrow{display:block;font-size:10px;font-weight:750;letter-spacing:1.6px;color:#8dc9e6;margin-bottom:12px}
.intro{font-size:13px;margin:0 0 28px}.status{position:relative;overflow:hidden;min-height:290px}
.status:after{content:"";position:absolute;width:180px;height:180px;border:1px solid #ffffff0b;border-radius:50%;right:-80px;top:-50px;pointer-events:none}
.status .symbol{display:grid;place-items:center;width:57px;height:57px;background:#124459;border:1px solid #347d91;border-radius:50%;font-size:30px}
.status h2{font-size:28px;line-height:1.18;letter-spacing:-.9px}
.status .primary-link{font-size:13px;padding:12px 18px}
body[data-health="protected"] .status{border-top-color:#48d6aa}
body[data-health="attention"] .status{border-top-color:#ffbe69}
body[data-health="attention"] .status .symbol{color:#ffcb83;border-color:#97723f}
body[data-health="offline"] .status{border-top-color:#7b8da2}
.steps{padding-left:23px;color:#c1d4df;line-height:1.7;font-size:14px}.steps li{padding:5px 0}
.legal{font-size:12px;line-height:1.5;margin-top:28px}
#account{background:linear-gradient(145deg,#103d55,#0c2e40)}
#account h2{font-size:26px;margin-bottom:15px}label{color:#c6dce8;font-size:12px;font-weight:650}
input{min-height:50px}button,a{touch-action:manipulation}button{transition:transform .15s,background .2s}button:active,.feature:active{transform:scale(.98)}
section,.feature{transition:background .2s,border-color .3s}
.view-enter section,.view-enter .feature-grid{animation:arrive .3s ease-out both}
@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}