:root{--z1: #5b7c99;--z2: #2ea043;--z3: #d4a017;--z4: #e8711a;--z5: #d1242f}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:#0b0f14;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-variant-numeric:tabular-nums;overflow:hidden}.screen{height:100vh;width:100vw;padding:12px;position:relative}.grid{display:grid;gap:12px;height:100%}.tile{border-radius:16px;padding:1.2vmin 1.6vmin;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:0;min-width:0;overflow:hidden;transition:background-color .6s ease,opacity .6s ease}.z1{background-color:var(--z1)}.z2{background-color:var(--z2)}.z3{background-color:var(--z3)}.z4{background-color:var(--z4)}.z5{background-color:var(--z5)}.tile.fresh{opacity:1}.tile.stale{opacity:.45}.tile.gone{opacity:.15}.name{font-size:calc(var(--bpm) * .28);font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm{font-size:var(--bpm);font-weight:800;line-height:1}.meta{font-size:calc(var(--bpm) * .2);opacity:.9;white-space:nowrap}.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:.8}.empty h1{font-size:6vw;margin:0 0 1vw}.empty p{font-size:2.6vw;margin:0;opacity:.7}.conn{position:fixed;right:10px;bottom:10px;width:10px;height:10px;border-radius:50%;z-index:5}.conn.on{background:#2ea043}.conn.off{background:#d4a017}
