:root{
  --ground:#0E1513; --surface:#151E1C; --surface-2:#1B2523; --surface-3:#222E2B;
  --ink:#DEE6E3; --ink-2:#9DABA6; --ink-3:#6D7B76; --rule:#25322E; --rule-2:#324039;
  --accent:#7FB3CA; --accent-ink:#A6CBDC; --accent-soft:#152730;
  --moss:#6FB587; --amber:#D2A455; --rust:#DA7F65; --rust-soft:#261813;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0; background:var(--ground); color:var(--ink); font-family:"Familjen Grotesk",system-ui,sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:var(--accent-ink); text-decoration:none} a:hover{text-decoration:underline; text-underline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.serif{font-family:"Newsreader",Georgia,serif; font-size:17.5px; line-height:1.6}

header.top{display:flex; align-items:center; gap:28px; padding:16px 28px; border-bottom:1px solid var(--rule); background:rgba(14,21,19,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:5}
.brand{font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:10px}
/* same meaning as the overlay's title dot: green = server up, red = down */
.live-dot{width:10px; height:10px; border-radius:50%; background:var(--ink-3)} .live-dot.up{background:var(--moss); box-shadow:0 0 0 4px rgba(111,181,135,.22)} .live-dot.down{background:var(--rust); box-shadow:0 0 0 4px rgba(218,127,101,.22)}
nav{display:flex; gap:4px}
nav a{padding:6px 12px; border-radius:4px; color:var(--ink-2); font-weight:500} nav a.active{background:var(--surface-2); color:var(--ink)} nav a:hover{text-decoration:none; color:var(--ink)}
.clockchip{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--rule); padding:5px 10px; border-radius:4px; white-space:nowrap}
.clockchip b{color:var(--ink); font-weight:600}
main{max-width:1180px; margin:0 auto; padding:26px 28px 80px}
footer.foot{max-width:1180px; margin:0 auto; padding:20px 28px 40px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:13px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}

h1{font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px}
h2{font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0 0 12px}
.sub{color:var(--ink-2); margin:0 0 22px}
.lab{font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px}

.bug{display:flex; flex-wrap:wrap; gap:0; background:var(--surface); border:1px solid var(--rule); border-radius:6px; box-shadow:var(--shadow); margin-bottom:22px; overflow:hidden}
.bug > div{padding:16px 22px; border-right:1px solid var(--rule); min-width:150px; flex:1 1 auto}
.bug > div:last-child{border-right:none}
.bug .v{font-family:"IBM Plex Mono",monospace; font-size:28px; font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums}
.bug .v small{font-size:15px; color:var(--ink-3); font-weight:500}
.bug .s{font-size:13px; color:var(--ink-3); margin-top:5px} .bug .s.stack{display:flex; flex-direction:column; gap:1px; line-height:1.25}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:100px; border:1px solid var(--rule-2); color:var(--ink-2)}
.pill.up{color:var(--moss); border-color:var(--moss)} .pill.down{color:var(--rust); border-color:var(--rust)}

.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:6px; box-shadow:var(--shadow); padding:18px 20px; min-width:0}
.span6{grid-column:span 6} .span4{grid-column:span 4} .span8{grid-column:span 8} .span12{grid-column:span 12}
@media (max-width:900px){ .span6,.span4,.span8{grid-column:span 12} main{padding:20px 16px 60px} header.top{padding:12px 16px; gap:14px; flex-wrap:wrap} .clockchip{margin-left:0} }

.radar{position:relative; aspect-ratio:1; background:#0b1210; border-radius:6px; overflow:hidden; border:1px solid var(--rule)}
.radar img{position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:auto; opacity:.95}
.radar canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.radar .empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-3); text-align:center; padding:30px; font-size:14px}
.radar .dot{position:absolute; width:0; height:0; transition:left .8s linear, top .8s linear}
.radar .dot::before{content:""; position:absolute; left:-4.5px; top:-4.5px; width:9px; height:9px; transform:rotate(45deg); background:var(--accent); border:1.5px solid #0b1210; box-shadow:0 0 0 1px rgba(127,179,202,.45), 0 0 9px rgba(127,179,202,.6)}
.radar .dot::after{content:attr(data-n); position:absolute; left:10px; top:50%; transform:translateY(-50%); font-family:"Familjen Grotesk",system-ui,sans-serif; font-size:11px; line-height:1; font-weight:600; letter-spacing:.02em; color:#C9DEE8; background:rgba(11,18,16,.74); border:1px solid rgba(127,179,202,.22); border-radius:3px; padding:3px 5px 3px 4px; white-space:nowrap}
.radar .dot.dead::before{background:var(--rust); box-shadow:0 0 0 1px rgba(218,127,101,.45), 0 0 9px rgba(218,127,101,.6)} .radar .dot.dead::after{color:var(--rust)}
.radar .loc{position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; transform:rotate(45deg); background:var(--amber); border:1px solid #000}
.radar .raid{position:absolute; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:2px solid var(--rust); animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(218,127,101,.45)}100%{box-shadow:0 0 0 16px rgba(218,127,101,0)}}
@media (prefers-reduced-motion:reduce){.radar .raid{animation:none} .radar .dot{transition:none}}

.plist{display:flex; flex-direction:column; gap:10px}
.pcard{display:grid; grid-template-columns:1fr auto; gap:2px 14px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--rule); border-radius:5px}
.pcard .nm{font-size:18px; font-weight:600} .pcard .nm a{color:var(--ink)}
.pcard .where{font-size:12.5px; color:var(--ink-2); letter-spacing:.05em; text-transform:uppercase} .pcard .where b{color:var(--rust); font-weight:600}
.pcard .mo{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums}
.pcard.offline{opacity:.55} .pcard.offline .where{text-transform:none; letter-spacing:0}
.hp{grid-column:1/-1; height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:6px} .hp i{display:block; height:100%; background:var(--moss)} .hp i.low{background:var(--rust)}

.stories{list-style:none; margin:0; padding:0}
.stories li{display:grid; grid-template-columns:64px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--rule); align-items:baseline}
.stories li:first-child{border-top:none}
.stories .when{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}
.stories .h{font-size:16px} .stories .h.p5,.stories .h.p4{color:#F2F6F4; font-weight:600} .stories .s{font-size:13px; color:var(--ink-3)}
.kind{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; border-radius:3px; margin-right:8px; background:var(--surface-3); color:var(--ink-2); vertical-align:1px}
.kind.death,.kind.serverDown,.kind.raid{background:var(--rust-soft); color:var(--rust)} .kind.boss{background:#2a2510; color:var(--amber)} .kind.join,.kind.firstVisit{background:var(--accent-soft); color:var(--accent)}

table{border-collapse:collapse; width:100%} th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); font-size:15px}
th{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)} td.n,th.n{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
tr.me td{background:var(--surface-2)} .rank{color:var(--ink-3); font-family:"IBM Plex Mono",monospace; width:36px}
.tabs{display:flex; gap:4px; margin-bottom:14px} .tabs button{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--rule); border-radius:4px; padding:6px 12px; font:inherit; font-weight:500; cursor:pointer} .tabs button.active{color:var(--ink); border-color:var(--accent); background:var(--accent-soft)}
.tabs button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.bars{display:grid; gap:8px} .bar{display:grid; grid-template-columns:140px 1fr 48px; align-items:center; gap:10px; font-size:14.5px}
.bar i{display:block; height:10px; border-radius:0 4px 4px 0; background:var(--accent); min-width:2px} .bar .n{text-align:right; font-family:"IBM Plex Mono",monospace; color:var(--ink-2)}

.chart{position:relative} .chart svg{display:block; width:100%; height:220px; overflow:visible}
.chart .grid line{stroke:var(--rule); stroke-width:1} .chart .axis text{fill:var(--ink-3); font-size:11px; font-family:"IBM Plex Mono",monospace}
.chart .area{fill:var(--accent); opacity:.14} .chart .line{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round}
.chart .end{fill:var(--accent); stroke:var(--ground); stroke-width:2}
.chart .xh{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3} .chart .hov{fill:var(--accent); stroke:var(--ground); stroke-width:2}
.tip{position:absolute; pointer-events:none; background:var(--surface-3); border:1px solid var(--rule-2); border-radius:4px; padding:6px 9px; font-size:12.5px; white-space:nowrap; transform:translate(-50%,-110%); box-shadow:var(--shadow)}
.tip b{font-family:"IBM Plex Mono",monospace}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:15px} .kv dt{color:var(--ink-3)} .kv dd{margin:0; font-family:"IBM Plex Mono",monospace}
.prog{display:grid; gap:8px} .prog div{display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--rule); border-radius:5px}
.prog .st{width:10px; height:10px; border-radius:50%; background:var(--rule-2)} .prog .st.done{background:var(--amber)} .prog .b{font-weight:600; flex:1} .prog .bi{color:var(--ink-3); font-size:13px}
.filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
.filters label{font-size:13px; padding:5px 10px; border:1px solid var(--rule); border-radius:100px; color:var(--ink-2); cursor:pointer; user-select:none} .filters input{display:none} .filters input:checked + span{color:var(--ink)} .filters label:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.empty{color:var(--ink-3); padding:20px 0; text-align:center; font-size:14px}

/* the World page's server-health card: six small charts */
.hgrid{display:grid; gap:18px 24px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); margin-top:12px}
.hgrid h3{font-size:12.5px; font-weight:600; letter-spacing:.04em; margin:0 0 4px; opacity:.75}