:root{--green:#2dd48c;--bg:#04140f;--ink:#cfeede;--muted:#3a6b58;
  --none:#7a2a33;--unk:#5a4a2a;}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% 16%,#07291f,#04140f 55%,#020a07);
  color:var(--ink);font-family:ui-monospace,Menlo,monospace;min-height:100vh;
  display:flex;justify-content:center}
.phone{width:100%;max-width:380px}
.hdr{text-align:center;padding:14px;letter-spacing:3px;color:var(--green);
  border-bottom:1px solid rgba(45,212,140,.1)}
.hero{position:relative;height:260px;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(45,212,140,.18)}
.r1{width:220px;height:220px}.r2{width:150px;height:150px}.r3{width:78px;height:78px}
.blip{position:absolute;top:50px;width:12px;height:12px;border-radius:50%;
  background:var(--green);box-shadow:0 0 16px 5px rgba(45,212,140,.7);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.6}}
.online{z-index:2;margin-top:74px;font-size:11px;letter-spacing:3px;color:var(--green)}
.big{z-index:2;margin-top:8px;font-size:26px;font-weight:800;letter-spacing:2px;color:#eafff5}
.sub{z-index:2;margin-top:10px;font-size:10px;letter-spacing:1px;color:var(--muted)}
.what{padding:14px 18px;font-size:11px;line-height:1.6;color:#8fc7ad;
  border-top:1px solid rgba(45,212,140,.1)}
.what .muted{color:var(--muted)}
.cta{padding:4px 18px 16px}
.btn{display:block;text-align:center;background:var(--green);color:#04140f;
  font-weight:800;padding:14px;border-radius:12px;text-decoration:none}
.proof{text-align:center;font-size:10px;color:var(--muted);margin-top:8px}
.history{padding:14px 18px;border-top:1px solid rgba(45,212,140,.1)}
.label{font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:10px}
.bars{display:flex;gap:2px;align-items:flex-end;height:40px}
.bars i{flex:1;border-radius:1px;display:block}
.bars i.AVAILABLE{height:100%;background:var(--green)}
.bars i.NONE{height:60%;background:var(--none)}
.bars i.UNKNOWN{height:35%;background:var(--unk)}
.bars i.EMPTY{height:10%;background:#1a2a22}
.legend{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:6px}
.metrics{display:flex;border-top:1px solid rgba(45,212,140,.1)}
.metrics>div{flex:1;padding:14px;text-align:center;border-right:1px solid rgba(45,212,140,.1)}
.metrics>div:last-child{border-right:0}
.metrics b{display:block;font-size:18px;color:#eafff5}
.metrics span{font-size:9px;letter-spacing:1px;color:var(--muted)}
.foot{padding:18px;border-top:1px solid rgba(45,212,140,.12);background:rgba(0,0,0,.25)}
.foot .disc{font-size:9px;color:#2f4a3e;margin-top:10px;line-height:1.6}
.status-AVAILABLE .big{color:var(--green)}
.status-NONE .big{color:#e0556a}
.status-UNKNOWN .big,.status-STALE .big{color:#ffb01f}