:root{
  --bg:#5e554d; --bg-2:#4f473f; --bg-3:#6b6158; --line:#7a6e63;
  --text:#f6f5f4; --muted:#d8cfc6; --faint:#b3a89c;
  --accent:#e8792f; --up:#2f6b3a; --up-2:#3f8a4c; --warn:#d9a43a; --down:#b23a2e; --none:#4a423b;
  --font:"Instrument Sans","DM Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace;
  --max:1080px; --ease:cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.top{display:flex;align-items:center;gap:.75rem;max-width:var(--max);margin:0 auto;padding:1.1rem 1.25rem}
.brand{color:var(--text);font-weight:600;font-size:1.15rem} .brand span{color:var(--accent)}
.tag{font-family:var(--mono);font-size:.8rem;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:.05rem .6rem}
main{max-width:var(--max);margin:0 auto;padding:0 1.25rem 2rem}
h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:.5rem 0 .25rem}
.sub{color:var(--muted);margin:0 0 1.5rem;font-family:var(--mono);font-size:.9rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.tile{background:var(--bg-2);border:1px solid var(--line);border-left:6px solid var(--none);border-radius:12px;padding:1rem;transition:transform .2s var(--ease)}
.tile:hover{transform:translateY(-2px)}
.tile.up{border-left-color:var(--up-2)} .tile.degraded{border-left-color:var(--warn)} .tile.down{border-left-color:var(--down)}
.tile h3{margin:0 0 .35rem;font-size:1rem;font-weight:600}
.meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.35rem;background:var(--none)}
.up .dot{background:var(--up-2)} .degraded .dot{background:var(--warn)} .down .dot{background:var(--down)}
.bar{display:flex;gap:2px;margin-top:.7rem;height:22px}
.bar i{flex:1;border-radius:2px;background:var(--none)}
.bar i.g{background:var(--up)} .bar i.a{background:var(--warn)} .bar i.r{background:var(--down)}
.uptime{font-family:var(--mono);font-size:.75rem;color:var(--faint);margin-top:.3rem}
.garden h2{margin:2rem 0 .75rem;font-size:1.2rem}
.strip{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.strip li{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem}
.strip small{display:block;font-family:var(--mono);color:var(--faint);font-size:.72rem}
.strip .season{color:#9fd3a8}
footer{max-width:var(--max);margin:0 auto;padding:1.5rem 1.25rem 2.5rem;color:var(--faint);font-size:.85rem;border-top:1px solid var(--line)}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}