.overlay { margin:0; display:flex; justify-content:center; overflow:hidden; background:transparent }
.island {
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:.45em;
  padding:.48em .8em; border-radius:99px; border:1px solid #8886;
  background:rgb(var(--surface,18 18 18) / var(--alpha,.9)); color:var(--ink,#eee);
  font:500 var(--font,13px)/1.25 "Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.pill-brand { display:flex; align-items:center; gap:.32em; font-size:1.08em; font-weight:650; letter-spacing:-.055em }
.pill-brand i { width:.85em; height:.8em; background:currentColor; clip-path:polygon(0 6%,25% 6%,42% 58%,75% 6%,100% 6%,40% 100%) }
.island b { font-size:.78em; font-weight:500 }
.island .clicks,.island .cpu,.island .ping { font-size:.83em; border-left:1px solid #8886; padding-left:.52em }
.signal { display:flex; align-items:center; gap:2px; height:.85em; margin-left:.15em }
.signal em { width:2px; height:100%; border-radius:3px; background:currentColor; transform:scaleY(.24); opacity:.55 }
.active .signal em { transform:scaleY(.58); opacity:1 }
.active .signal em:nth-child(2) { transform:scaleY(.98) }
.island.active { padding:.68em .95em }
@media(prefers-reduced-motion:no-preference){
  .island.motion { transition:padding .35s cubic-bezier(.2,1.35,.4,1),background .22s; animation:island-arrive .32s ease-out }
  .island.motion.active::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 30%,currentColor 50%,transparent 70%); animation:island-sheen .72s ease-out both }
  .motion.active .signal em { animation:island-meter .84s ease-in-out infinite alternate }
  .motion.active .signal em:nth-child(2) { animation-delay:-.62s }
  .motion.active .signal em:nth-child(3) { animation-delay:-.3s }
  .motion.active .pill-brand i { animation:island-mark .46s cubic-bezier(.2,1.5,.4,1) }
  @keyframes island-arrive { from { opacity:0; transform:translateY(-4px) scale(.95) } }
  @keyframes island-sheen { from { transform:translateX(-100%);opacity:0 } 35% { opacity:.13 } to { transform:translateX(100%);opacity:0 } }
  @keyframes island-meter { from { transform:scaleY(.3) } to { transform:scaleY(1) } }
  @keyframes island-mark { from { transform:translateX(-2px) scale(.82) } }
}
.island.active { border-color:#db82a6 }
.island.active .signal { color:#f18eb7 }
.island.active::before {
  content:"";position:absolute;inset:-80% -15%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 28% 60%,#ed639e26 12%,transparent 31%,#ed639e4a 35%,transparent 41%,transparent 52%,#ed639e30 55%,transparent 61%);
  transform-origin:28% 60%;
}
@media(prefers-reduced-motion:no-preference){
  .island.motion.active::before { animation:pill-ripple 2.8s ease-out infinite }
  .island.motion.active::after { content:none }
  @keyframes pill-ripple { from{opacity:0;transform:scale(.55)} 20%{opacity:1} to{opacity:0;transform:scale(1.45)} }
}