:root {
  color-scheme: dark;
  --bg: #050505;
  --panel: #0a0a0a;
  --panel-hover: #111111;
  --border: #2a2a2a;
  --text: #ffffff;
  --secondary: #f0e8de;
  --accent: #ff5b2e;
  --good: #46b986;
  --warn: #ffd600;
  --bad: #ff3b30;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 27%, rgba(255, 91, 46, .08) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 55%, rgba(255, 91, 46, .08) 0 2px, transparent 3px),
    var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 54px 0 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(255,91,46,.055) 160px, transparent 161px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(255,91,46,.045) 120px, transparent 121px),
    linear-gradient(118deg, transparent 0 31%, rgba(255,91,46,.09) 31.08%, transparent 31.16% 74%, rgba(255,91,46,.06) 74.08%, transparent 74.16%);
}
main { position: relative; z-index: 1; flex: 1; }
button, input { font: inherit; }
button { color: inherit; }
.wrap { width: min(820px, calc(100% - 36px)); margin-inline: auto; }

.site-header {
  position: relative;
  z-index: 2;
  height: 54px;
  padding: 0 34px;
  border-bottom: 1px solid #202020;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(5, 5, 5, .96);
}
.brand { color: var(--text); display: inline-flex; align-items: center; font-size: 22px; font-weight: 900; letter-spacing: -.035em; line-height: 1; user-select: none; }
.brand::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-right: 12px; background: var(--accent); transform: translateY(2px); }
.brand span { color: var(--accent); }
.site-header nav { height: 100%; display: flex; gap: 34px; }
.tab { position: relative; border: 0; background: transparent; color: #fff; padding: 0 2px; display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 900; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); }

.view { display: none; }
.view.is-active { display: block; }
.status-banner { position: relative; min-height: 94px; border-bottom: 1px solid #252525; overflow: hidden; background: #070707; }
.status-banner::before, .status-banner::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 91, 46, .32);
  border-radius: 50%;
  pointer-events: none;
}
.status-banner::before { width: 260px; height: 260px; left: calc(50% - 570px); top: -182px; }
.status-banner::after { width: 190px; height: 190px; right: calc(50% - 510px); bottom: -148px; }
.status-banner-inner { position: relative; z-index: 1; padding: 21px 0 17px; text-align: center; }
.status-banner h1 { max-width: 1100px; margin: 0 auto; font-size: clamp(30px, 5vw, 42px); line-height: 1.03; letter-spacing: -.045em; }
.updated-line { margin: 8px 0 0; color: var(--secondary); font-size: 12px; }
.updated-line strong { color: #fff; font-weight: 800; }

h1, h2, p { margin-top: 0; }
.kicker { margin: 0 0 15px; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--accent); }
.name-intro h1 { margin: 0 0 14px; max-width: 610px; font-size: clamp(36px, 6vw, 50px); line-height: 1.02; letter-spacing: -.055em; }

.groups { width: min(1180px, calc(100% - 44px)); padding-block: 20px 54px; }
.category-grid { display: flex; flex-direction: column; gap: 12px; }
.category-card { border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: var(--panel); color: #fff; }
.category-trigger { position: relative; width: 100%; min-height: 76px; border: 0; background: transparent; color: #fff; padding: 13px 48px 13px 18px; text-align: left; cursor: pointer; }
.category-trigger::after { content: "+"; position: absolute; right: 18px; top: 50%; color: #fff; font-size: 20px; transform: translateY(-50%); }
.category-trigger:hover { background: var(--panel-hover); }
.category-card.is-active { border-color: #5a5a5a; }
.category-card.is-active .category-trigger { border-bottom: 1px solid var(--border); }
.category-card.is-active .category-trigger::after { content: "–"; color: var(--accent); }
.category-trigger strong { display: block; font-size: 22px; font-weight: 850; }
.category-trigger small { display: block; margin-top: 4px; color: var(--secondary); font-size: 13px; line-height: 1.35; }
.inline-category-panel[hidden] { display: none; }
.inline-category-panel .service-item { min-height: 104px; }
.service-subgroups { padding-top: 2px; }
.service-subgroup + .service-subgroup { margin-top: 10px; border-top: 1px solid #383838; }
.service-subgroup h3 { margin: 0; padding: 12px 14px 2px; color: #fff; font-size: 21px; line-height: 1.2; }
.group-card { margin: 0; border: 1px solid var(--border); border-radius: 3px; background: var(--panel); overflow: hidden; }
.worlds-card { margin-top: 16px; }
.group-card > summary { min-height: 92px; padding: 17px 18px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; user-select: none; }
.group-card > summary::-webkit-details-marker { display: none; }
.group-card > summary:hover { background: var(--panel-hover); }
.group-card > summary::after { content: "+"; width: 18px; order: 3; color: #fff; font-size: 20px; text-align: center; }
.group-card[open] > summary::after { content: "–"; color: var(--accent); }
.group-card > summary strong { display: block; font-size: 22px; font-weight: 850; }
.group-card > summary small { display: block; margin-top: 4px; color: var(--secondary); font-size: 13px; }
.group-state { margin-left: auto; color: #fff; font-size: 12px; font-weight: 850; white-space: nowrap; }
.group-card[open] > summary { border-bottom: 1px solid var(--border); }

.service-list:empty::after { content: "Loading checks…"; min-height: 76px; display: grid; place-items: center; color: #fff; font-size: 14px; }
.service-list { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px; background: #070707; }
.service-item { min-width: 0; min-height: 104px; border: 1px solid #343434; border-radius: 2px; overflow: hidden; background: #080808; display: grid; grid-template-columns: minmax(220px, .65fr) minmax(360px, 1.35fr); align-items: stretch; }
.service-heading { min-width: 0; padding: 12px 14px 14px; display: flex; align-items: flex-start; }
.service-name strong { display: block; font-size: 18px; font-weight: 850; }
.service-name small { display: block; margin-top: 3px; color: var(--secondary); font-size: 13px; }
.service-name a { color: var(--text); text-decoration: none; }
.service-name a:hover { color: var(--accent); text-decoration: underline; }
.history-panel { min-width: 0; min-height: 104px; padding: 12px 14px 10px; border-left: 1px solid #282828; background: #050505; color: #fff; font-size: 12px; }
.history-head { margin-bottom: 6px; display: flex; align-items: end; gap: 30px; }
.history-head div span { display: block; margin-bottom: 3px; color: var(--secondary); font-size: 14px; font-weight: 750; }
.history-head strong { display: block; color: #fff; font-size: 19px; }
.history-head .uptime-value.is-good { color: var(--good); }
.history-head .uptime-value.is-warning { color: var(--warn); }
.history-head .uptime-value.is-bad { color: var(--bad); }
.history-bars { height: 32px; padding-top: 3px; display: flex; align-items: flex-end; gap: 1px; overflow: hidden; border-bottom: 1px solid #333; background: repeating-linear-gradient(to top, transparent 0 10px, rgba(255,255,255,.07) 10px 11px); }
.history-bars.is-overfull { gap: 0; }
.history-bars i { flex: 1 1 0; min-width: 0; max-width: none; height: 50%; border-radius: 1px 1px 0 0; background: var(--good); cursor: crosshair; }
.history-bars i.bar-height-1 { height: 10%; }
.history-bars i.bar-height-2 { height: 20%; }
.history-bars i.bar-height-3 { height: 30%; }
.history-bars i.bar-height-4 { height: 40%; }
.history-bars i.bar-height-5 { height: 50%; }
.history-bars i.bar-height-6 { height: 60%; }
.history-bars i.bar-height-7 { height: 70%; }
.history-bars i.bar-height-8 { height: 80%; }
.history-bars i.bar-height-9 { height: 90%; }
.history-bars i.bar-height-10 { height: 100%; }
.history-bars i.degraded, .history-bars i.restricted { background: var(--warn); }
.history-bars i.down { background: var(--bad); }
.history-axis { margin-top: 6px; display: grid; grid-template-columns: repeat(2, 1fr); color: var(--secondary); font-size: 11px; }
.history-axis span:nth-child(2) { display: none; }
.history-axis span:last-child { text-align: right; }
.history-note { display: none; }
.no-history { margin: auto; align-self: center; }

.world-content { background: #080808; }
.world-summary { padding: 18px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 120px 115px 140px 1fr; gap: 12px; align-items: center; }
.world-summary > div strong { display: block; font-size: 20px; }
.world-summary > div span { color: var(--secondary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.world-tools { justify-self: end; display: flex; align-items: center; gap: 10px; }
.world-status-filters { display: flex; }
.world-status-filters button { height: 38px; border: 1px solid #3a3a3a; border-right: 0; background: #080808; color: #fff; padding: 0 12px; cursor: pointer; font-size: 12px; font-weight: 800; }
.world-status-filters button:first-child { border-radius: 3px 0 0 3px; }
.world-status-filters button:last-child { border-right: 1px solid #3a3a3a; border-radius: 0 3px 3px 0; }
.world-status-filters button:hover { background: #151515; }
.world-status-filters button.is-active { border-color: var(--accent); background: var(--accent); color: #050505; }
.world-summary label { color: #fff; font-size: 0; }
.world-summary input { width: min(230px, 25vw); height: 38px; border: 1px solid var(--border); border-radius: 3px; background: #050505; color: var(--text); padding: 0 12px; outline: none; font-size: 14px; }
.world-summary input:focus { border-color: var(--accent); }
.table-wrap { max-height: 440px; overflow: auto; }
table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
th { position: sticky; top: 0; background: #101010; color: #fff; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
th, td { height: 43px; padding: 0 14px; border-bottom: 1px solid #242424; }
tbody tr:hover { background: #111; }
.world-status { display: inline-flex; align-items: center; gap: 6px; }
.world-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.world-status.online::before { background: var(--good); }
.world-status.offline::before { background: var(--bad); }
.empty-cell { height: 90px; color: #fff; text-align: center; }

.name-view { width: min(1180px, calc(100% - 44px)); min-height: calc(100vh - 64px); padding-block: 28px 90px; }
.name-intro { max-width: 730px; }
.name-form { max-width: 1000px; margin-top: 16px; }
.name-form > label { display: block; margin-bottom: 9px; font-size: 18px; font-weight: 850; }
.name-form > div { display: grid; grid-template-columns: 1fr auto; }
.name-form input { min-width: 0; height: 56px; padding: 0 16px; border: 1px solid var(--border); border-radius: 3px 0 0 3px; background: var(--panel); color: var(--text); outline: none; font-size: 18px; }
.name-form input:focus { border-color: var(--accent); }
.name-form button { border: 0; border-radius: 0 3px 3px 0; background: var(--accent); color: #050505; padding: 0 22px; font-weight: 900; cursor: pointer; }
.name-form button:disabled { opacity: .55; cursor: wait; }
.name-form small { display: block; margin-top: 8px; color: var(--secondary); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.name-result { max-width: 1100px; margin-top: 20px; }
.name-result.is-empty { padding: 22px; border: 1px dashed var(--border); border-radius: 3px; color: var(--secondary); }
.name-result.is-empty p { margin: 0; }
.lookup-verdict { padding: 15px 18px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel); }
.lookup-verdict h2 { margin-bottom: 6px; font-size: 26px; }
.lookup-verdict p { margin: 0; color: var(--secondary); font-size: 15px; }
.source-results { margin-top: 10px; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.name-source-group + .name-source-group { border-top: 1px solid #3a3a3a; }
.name-source-group h3 { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); background: #101010; color: #fff; font-size: 17px; line-height: 1.2; }
.source-result { min-height: 56px; padding: 7px 14px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 10px minmax(210px, .65fr) minmax(260px, 1.35fr) auto; gap: 12px; align-items: center; }
.name-source-group .source-result:last-child { border-bottom: 0; }
.source-result i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.source-result i.found, .source-result i.searched { background: var(--good); }
.source-result i.private, .source-result i.unknown, .source-result i.unavailable { background: var(--warn); }
.source-result i.not_found { background: #8b8b8b; }
.source-result i.searching { background: var(--accent); animation: lookupPulse 1s ease-in-out infinite alternate; }
.source-result i.waiting { background: #777; }
.source-result strong { font-size: 16px; }
.source-result span { color: var(--secondary); font-size: 14px; line-height: 1.35; }
.source-result a { border-bottom: 1px solid var(--accent); color: #fff; padding-bottom: 2px; text-decoration: none; font-size: 12px; font-weight: 850; text-transform: uppercase; }
@keyframes lookupPulse { to { opacity: .35; } }
.lookup-links { display: flex; gap: 8px; margin-top: 10px; }
.lookup-links a { border: 1px solid var(--border); border-radius: 3px; color: #fff; padding: 8px 11px; text-decoration: none; font-size: 11px; }

footer { position: relative; z-index: 1; margin-top: auto; border-top: 1px solid var(--border); background: #050505; }
footer .wrap { width: min(1180px, calc(100% - 44px)); min-height: 76px; padding-block: 14px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--secondary); font-size: 11px; }
footer strong { color: #fff; white-space: nowrap; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer span { max-width: 610px; text-align: right; }
.footer-links { display: flex; align-items: center; gap: 16px; }
.footer-links a + a { padding-left: 16px; border-left: 1px solid var(--border); }

.policy-page { width: min(820px, calc(100% - 36px)); padding-block: 22px 72px; }
.policy-page h1 { margin-bottom: 5px; font-size: clamp(36px, 6vw, 50px); letter-spacing: -.05em; }
.policy-updated { margin-bottom: 22px; color: var(--secondary); font-size: 13px; }
.policy-section { padding: 20px 0; border-top: 1px solid var(--border); }
.policy-section h2 { margin-bottom: 10px; font-size: 22px; }
.policy-section p { margin: 0; color: var(--secondary); font-size: 15px; line-height: 1.7; }
.policy-section p + p { margin-top: 10px; }
.policy-section a { color: #fff; text-decoration-color: var(--accent); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .site-header { padding-inline: 18px; }
  .site-header nav { gap: 18px; }
  .tab { font-size: 11px; }
  .status-banner { min-height: 84px; }
  .status-banner-inner { padding-top: 18px; }
  .groups { width: min(100% - 28px, 1180px); }
  .category-grid { grid-template-columns: 1fr; }
  .group-card > summary { min-height: 80px; }
  .service-list { grid-template-columns: 1fr; }
  .service-item { grid-template-columns: 1fr; }
  .history-panel { border-top: 1px solid #282828; border-left: 0; }
  .history-bars { gap: 0; overflow: hidden; }
  .history-bars i { min-width: 0; max-width: none; }
  .source-result { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .source-result i { grid-column: 1; grid-row: 1 / span 2; }
  .source-result strong { grid-column: 2; grid-row: 1; }
  .source-result span { grid-column: 2; grid-row: 2; }
  .source-result a { grid-column: 3; grid-row: 1 / span 2; white-space: nowrap; }
  .history-axis { font-size: 10px; }
  .world-summary { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .world-tools { grid-column: 1 / -1; width: 100%; justify-self: stretch; flex-wrap: wrap; }
  .world-tools label { flex: 1; }
  .world-summary input { width: 100%; }
  footer .wrap { align-items: flex-start; flex-direction: column; gap: 8px; }
  footer span { text-align: left; }
  .footer-links { flex-wrap: wrap; gap: 10px 14px; }
  .footer-links a + a { padding-left: 14px; }
}