:root{--bg: #222;--col: #fff;--minus: #f35555;--plus: #55b355;--neutral: #5555f3;--border: #fff2}@media (prefers-color-scheme: light){:root{--bg: #fff;--col: #222;--minus: #ee2222;--plus: #22cc22;--neutral: #4444ff;--border: #2225}}:root{background:var(--bg);color:var(--col);--accent-color: var(--neutral);font-family:Parkinsans;height:100%}#app{display:flex;flex-direction:column;align-items:center;gap:2rem;font-size:1.5rem}h1{margin:0;text-align:center;max-width:85vw}h1 svg{vertical-align:middle;width:1.5em;height:1.5em}.footer{opacity:.9}.accent{color:var(--accent-color)}.nowrap{white-space:nowrap}a{color:var(--accent-color);text-decoration-thickness:2px;border-radius:3px;padding:0 .2em}a:hover{background:var(--accent-color);color:var(--bg)}p{margin:0;text-align:center}body{width:100%;min-height:100%;margin:0;display:flex;justify-content:center;align-items:center}.device-list{display:grid}.header,.contents,.contents .device{display:grid;grid-template-columns:subgrid;grid-column:span 3}.header,.device{justify-items:stretch;align-items:baseline}.header>*,.device>*{padding:.5em .75em;border:2px solid var(--border)}.header>*:not(:first-child),.device>*:not(:first-child){border-left:none}.header span{opacity:.5}.device>*{border-top:none}.device-name{display:flex;justify-content:flex-end;align-items:baseline;gap:.5em}.device-icon{align-self:center}.update-time,.device-name{min-width:8.5em}.update-time{text-align:left}[data-positive=true]{--accent-color: var(--plus)}[data-positive=false]{--accent-color: var(--minus)}.init-diff{font-size:.6em;opacity:.75;color:var(--accent-color)}.counter{font-weight:700;position:relative;min-width:5rem}.counter[data-diff]:after{content:attr(data-diff);position:absolute;font-size:.6em;color:var(--accent-color);margin-left:.5em;animation-name:appear;animation-duration:2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes appear{0%{translate:0 1em;opacity:0}30%{translate:0 0;opacity:1}60%{opacity:1}to{opacity:0}}@media (max-width: 730px){:root{font-size:.75rem}}@media (max-width: 500px){:root{font-size:.5rem}}@media (max-width: 400px){.device-name{min-width:0}}
