@keyframes fr-pulse{0%{box-shadow:0 0 #a6e3a180}70%{box-shadow:0 0 0 7px #a6e3a100}to{box-shadow:0 0 #a6e3a100}}
@keyframes ctp-pulse{0%,to{opacity:.35}50%{opacity:.75}}
@keyframes dev-pulse{0%,to{opacity:1}50%{opacity:.55}}
body:has(.about) .hub{width:100%;max-width:min(94vw,560px)}
.about{z-index:1;background:var(--bg-raised);border:1px solid var(--surface-hi);border-radius:16px;flex-direction:column;align-items:center;gap:1.1rem;padding:1.4rem 1.3rem;display:flex;position:relative;box-shadow:0 18px 50px -22px #0009}
.about-bio{text-align:center;color:var(--text-soft);max-width:42ch;margin:0;line-height:1.6}
.about-source{color:var(--bg-deep);background:var(--teal);border:1px solid var(--teal);border-radius:999px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:filter .15s,transform .15s;display:inline-flex}
.about-source:hover,.about-source:focus-visible{filter:brightness(1.08);transform:translateY(-1px)}
.about-source .bi{font-size:1.05rem}
.fronting-card{z-index:1;background:var(--bg-raised);border:1px solid var(--surface-hi);border-radius:14px;width:100%;margin:.9rem auto 0;padding:.85rem 1rem;position:relative;box-shadow:0 18px 50px -22px #0009}
.fronting-card[hidden]{display:none}
.fr-head{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:.45rem;margin-bottom:.7rem;font-size:.72rem;font-weight:600;display:flex}
.fr-dot{background:var(--success);border-radius:50%;width:8px;height:8px;animation:2.4s ease-out infinite fr-pulse;box-shadow:0 0 #a6e3a18c}
.fr-members{flex-wrap:wrap;gap:.6rem;display:flex}
.fr-member{--fr-accent:var(--accent);background:var(--surface);border:1px solid var(--surface-hi);border-left:3px solid var(--fr-accent);min-width:0;color:var(--text);border-radius:12px;flex:auto;align-items:center;gap:.6rem;padding:.5rem .75rem .5rem .5rem;display:flex}
.fr-av{object-fit:cover;border:2px solid var(--fr-accent);background:var(--bg-deep);border-radius:50%;flex:none;width:38px;height:38px}
.fr-av--empty{display:inline-block}
.fr-meta{flex-direction:column;min-width:0;line-height:1.25;display:flex}
.fr-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}
.fr-pronouns{color:var(--text-muted);font-size:.74rem}
.fr-empty{color:var(--text-muted);font-size:.82rem;font-style:italic}
.fr-members.is-fetching{align-items:center;min-height:56px}
.dev-rows.is-fetching{--dev-rows-reserve:2;min-height:calc(var(--dev-rows-reserve) * 44px + (var(--dev-rows-reserve) - 1) * .55rem)}
.fr-members.is-fetching .fr-empty,.dev-rows.is-fetching .dev-empty{opacity:.65}
.devices-card{z-index:1;background:var(--bg-raised);border:1px solid var(--surface-hi);border-radius:14px;width:100%;margin:.9rem auto 0;padding:.85rem 1rem;position:relative;box-shadow:0 18px 50px -22px #0009}
.devices-card[hidden]{display:none}
.dev-head{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:.45rem;margin-bottom:.7rem;font-size:.72rem;font-weight:600;display:flex}
.dev-icon{border:1.5px solid var(--text-muted);border-radius:2px;width:18px;height:10px;position:relative}
.dev-icon:after{content:"";background:var(--text-muted);border-radius:0 1px 1px 0;width:2px;height:5px;position:absolute;top:50%;right:-3px;transform:translateY(-50%)}
.dev-rows{flex-direction:column;gap:.55rem;display:flex}
.dev-row{--dev-accent:var(--success);background:var(--surface);border:1px solid var(--surface-hi);border-left:3px solid var(--dev-accent);color:var(--text);border-radius:12px;flex-direction:column;gap:.4rem;padding:.45rem .6rem;display:flex}
.dev-row.dev-ok{--dev-accent:var(--success)}
.dev-row.dev-mid{--dev-accent:var(--warning)}
.dev-row.dev-low{--dev-accent:var(--danger)}
.dev-row.dev-unknown{--dev-accent:var(--text-faint)}
.dev-main{grid-template-columns:4.5rem 1fr auto;align-items:center;gap:.6rem;display:grid}
.dev-name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}
.dev-track{background:var(--bg-deep);border:1px solid var(--surface-hi);border-radius:999px;min-width:0;height:10px;position:relative;overflow:hidden}
.dev-fill{background:var(--dev-accent);border-radius:999px;height:100%;transition:width .5s;display:block}
.dev-row.is-charging .dev-fill{animation:1.8s ease-in-out infinite dev-pulse}
.dev-pct{font-variant-numeric:tabular-nums;color:var(--dev-accent);justify-content:flex-end;align-items:center;gap:.15rem;min-width:2.6rem;font-weight:600;display:inline-flex}
.dev-bolt{color:var(--warning)}
.dev-meta{flex-wrap:wrap;align-items:center;gap:.4rem;padding-left:.1rem;display:flex}
.dev-tag{background:var(--surface-hi);border:1px solid var(--surface-higher);color:var(--text-soft);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;align-items:center;gap:.2rem;max-width:12rem;padding:.05rem .4rem;font-size:.68rem;font-weight:600;display:inline-flex;overflow:hidden}
.dev-tag.dev-charging{color:var(--success)}
.dev-tag.dev-lowpower{color:var(--warning)}
.dev-tag.dev-watch{color:var(--sky)}
.dev-tag.dev-airpods{color:var(--lavender)}
.dev-when{color:var(--text-muted);white-space:nowrap;margin-left:auto;font-size:.72rem}
.dev-empty{color:var(--text-muted);font-size:.82rem;font-style:italic}
.location-card{z-index:1;background:var(--bg-raised);border:1px solid var(--surface-hi);border-radius:14px;width:100%;margin:.9rem auto 0;padding:.85rem 1rem;position:relative;box-shadow:0 18px 50px -22px #0009}
.location-card[hidden]{display:none}
.loc-head{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:.45rem;margin-bottom:.55rem;font-size:.72rem;font-weight:600;display:flex}
.loc-head .bi{color:var(--accent);font-size:.85rem}
.loc-body{flex-direction:column;gap:.55rem;display:flex}
.loc-map{background:var(--surface);border:0;border-radius:10px;width:100%;height:200px;display:block}
.loc-cap{flex-wrap:wrap;align-items:baseline;gap:.5rem;display:flex}
.loc-place{color:var(--text);font-weight:600}
.loc-link{color:var(--sky);align-items:baseline;gap:.3rem;text-decoration:none;transition:color .15s;display:inline-flex}
.loc-link:hover,.loc-link:focus-visible{color:var(--accent);text-decoration:underline}
.loc-link .bi{font-size:.75rem}
.loc-when{color:var(--text-muted);margin-left:auto;font-size:.72rem}
@media (prefers-reduced-motion:reduce){.fr-dot{animation:none}}
@media (prefers-reduced-motion:no-preference){.fr-members.is-fetching .fr-empty,.dev-rows.is-fetching .dev-empty{animation:1.6s ease-in-out infinite ctp-pulse}}
@media (max-width:640px){.dev-main{grid-template-columns:3.5rem 1fr auto}}