:root { color-scheme: dark; font-family: system-ui, sans-serif; }
html { background: #131417; color: #f4f4f5; }
body { max-width: 28rem; margin: 0 auto; padding: 2rem 1rem; }
h1 { margin: 0 0 .75rem; }
.logo { display: block; width: 100%; height: auto; }
.tag { display: table; margin: 0 auto 1.5rem; padding: .3rem .9rem; border: 1px solid #3a3d44; border-radius: 999px;
  background: #27292e; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.estado { font-size: 1.25rem; font-weight: 600; }
.on { color: #22c55e; }
.parado { color: #f59e0b; }
.off { color: #ef4444; }
li { padding: .25rem 0; }
small { color: #a1a1aa; }
.app { margin-top: 2rem; display: grid; gap: .4rem; justify-items: center; text-align: center; }
.app[hidden] { display: none; }
.baixar { padding: .8rem 1.4rem; border-radius: .75rem; background: #22c55e; color: #052e16; font-weight: 700;
  text-decoration: none; }
.baixar:hover { background: #16a34a; }