:root{--bg: #0b0e14;--surface: #11151d;--border: #1f2531;--text: #e6e9ef;--muted: #7d8696;--up: #34c38f;--down: #f06a6a;--pending: #d4a64a;--accent: #7c8cf8;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:grid;grid-template-columns:1fr 320px;height:100%}.pond-wrap{position:relative;display:flex;flex-direction:column;overflow:hidden;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:24px 24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-bottom:1px solid var(--border);background:#0b0e14d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2}.brand{display:flex;align-items:baseline;gap:10px}.brand-name{font-size:16px;font-weight:600;letter-spacing:-.01em}.brand-sub{color:var(--muted)}.stats{display:flex;gap:24px;margin:0}.stats div{display:flex;align-items:baseline;gap:6px}.stats dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.stats dd{margin:0;font-family:var(--mono);font-size:15px}.stats .ok{color:var(--up)}.stats .bad{color:var(--down)}.pond{position:relative;flex:1}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted);padding:16px;text-align:center;pointer-events:none}.bubble{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;will-change:transform;text-align:center}.bubble-img{position:relative;border-radius:50%;padding:3px;border:2px solid var(--pending);background:var(--surface)}.bubble-img img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.bubble.up .bubble-img{border-color:var(--up)}.bubble.down .bubble-img{border-color:var(--down)}.bubble.down{opacity:.6}.bubble.down img{filter:grayscale(1)}.rank-tag{position:absolute;top:2px;right:2px;padding:1px 6px;border-radius:4px;background:var(--surface);border:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--muted)}.bubble-name{margin-top:6px;font-weight:600;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bubble-owner{font-size:12px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bubble-uptime{font-family:var(--mono);font-size:12px;color:var(--muted)}.bubble.up .bubble-uptime{color:var(--up)}.bubble.down .bubble-uptime{color:var(--down)}.bubble.landlord{z-index:1}.bubble.landlord .bubble-img{border-radius:18px;border-color:var(--accent);background:var(--surface)}.bubble.landlord .bubble-img img{border-radius:14px}.bubble.landlord .bubble-name,.bubble.landlord .bubble-uptime{color:var(--accent)}.sidebar{background:var(--surface);border-left:1px solid var(--border);padding:18px 20px;overflow-y:auto}.sidebar h2{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.ranking{list-style:none;margin:0;padding:0}.rank-row{display:grid;grid-template-columns:22px 32px 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.rank-num{grid-row:span 2;font-family:var(--mono);color:var(--muted);text-align:right}.rank-img{grid-row:span 2;width:32px;height:32px;border-radius:50%;object-fit:cover}.rank-row.down .rank-img{filter:grayscale(1);opacity:.6}.rank-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-owner{font-weight:400;color:var(--muted)}.rank-uptime{font-family:var(--mono);text-align:right}.rank-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.rank-best{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}.dot{width:7px;height:7px;border-radius:50%;background:var(--pending)}.rank-row.up .dot{background:var(--up)}.rank-row.down .dot{background:var(--down)}.howto{margin-top:24px;color:var(--muted);font-size:13px}.howto summary{cursor:pointer;color:var(--text)}.howto pre{background:var(--bg);border:1px solid var(--border);padding:10px;border-radius:6px;overflow-x:auto;font-family:var(--mono);font-size:12px}.pond.compact .bubble-name{margin-top:3px;font-size:11px}.pond.compact .bubble-owner{display:none}.pond.compact .bubble-uptime{font-size:10px}.pond.compact .rank-tag{font-size:9px;padding:0 4px}.pond.compact .bubble-img{padding:2px}.pond.compact .bubble.landlord .bubble-img{border-radius:12px}.pond.compact .bubble.landlord .bubble-img img{border-radius:9px}@media (max-width: 800px){.app{grid-template-columns:1fr;grid-template-rows:65vh auto}.sidebar{border-left:none;border-top:1px solid var(--border)}.stats{gap:14px}.brand-sub{display:none}}.bubble[role=button],.rank-row[role=button]{cursor:pointer}.bubble[role=button]:hover .bubble-img{box-shadow:0 0 0 3px #7c8cf859}.rank-row[role=button]:hover{background:#ffffff08}.bubble[role=button]:focus-visible,.rank-row[role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.site-dialog{width:min(1100px,calc(100vw - 32px));height:min(800px,calc(100vh - 32px));max-width:none;max-height:none;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}.site-dialog::backdrop{background:#05070bb3}.site-dialog-inner{display:flex;flex-direction:column;height:100%}.site-dialog-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}.site-dialog-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-dialog-url{font-family:var(--mono);font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.site-dialog-btn{flex:none;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:13px;text-decoration:none;cursor:pointer}.site-dialog-btn:hover{border-color:var(--accent);color:var(--accent)}.site-dialog-frame{flex:1;width:100%;border:0;background:#fff}.site-dialog-empty{flex:1;display:grid;place-items:center;color:var(--muted)}.site-dialog-hint{margin:0;padding:6px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--border)}@media (max-width: 600px){.site-dialog{width:100vw;height:100dvh;border-radius:0;border:0}.site-dialog-url{display:none}}