@font-face { font-family:'Onest Variable'; src:url('fonts/onest-latin-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Onest Variable'; src:url('fonts/onest-cyrillic-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; unicode-range:U+0400-04FF,U+0500-052F; }
@font-face { font-family:'Unbounded Variable'; src:url('fonts/unbounded-latin-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Unbounded Variable'; src:url('fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; unicode-range:U+0400-04FF,U+0500-052F; }
:root {
  --color-paper: oklch(13% 0.035 292); --color-paper-2: oklch(18% 0.045 292); --color-paper-3: oklch(23% 0.055 292);
  --color-ink: oklch(96% 0.01 292); --color-ink-muted: oklch(75% 0.03 292); --color-rule: oklch(31% 0.045 292);
  --color-accent: oklch(54% 0.25 293); --color-accent-ink: oklch(79% 0.13 295);
  --up: oklch(72% 0.18 155); --degraded: oklch(80% 0.15 90); --down: oklch(62% 0.22 20);
}
:root[data-theme="light"] {
  --color-paper: oklch(96.5% 0.012 292); --color-paper-2: oklch(93% 0.02 292); --color-paper-3: oklch(88% 0.03 292);
  --color-ink: oklch(22% 0.045 292); --color-ink-muted: oklch(47% 0.05 292); --color-rule: oklch(86% 0.028 292);
  --color-accent: oklch(48% 0.24 293); --color-accent-ink: oklch(46% 0.22 293);
  --up: oklch(58% 0.17 155); --degraded: oklch(72% 0.14 90); --down: oklch(55% 0.21 20);
}
:root {
  --font-display:"Unbounded Variable","Onest Variable",system-ui,sans-serif;
  --font-body:"Onest Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}
html { overflow-x:clip; background:var(--color-paper); color:var(--color-ink); font-family:var(--font-body); line-height:1.55; transition:background .25s ease, color .25s ease; }
body { margin:0; min-width:320px; background:transparent; }
::selection { background:var(--color-accent); color:var(--color-paper); }
.fluid-bg { position:fixed; inset:0; z-index:-1; width:100vw; height:100vh; pointer-events:none; filter:blur(clamp(44px,7vw,84px)) saturate(1.15); }
a { color:inherit; }

.edge-nav { display:flex; align-items:center; padding:1.5rem var(--gutter) 0; }
.brand { font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-decoration:none; }
.brand-dot { color:var(--color-accent); }
.nav-side { margin-left:auto; display:flex; align-items:center; gap:1.25rem; }
.nav-link { font-size:.9rem; color:var(--color-ink-muted); text-decoration:none; }
.nav-link:hover { color:var(--color-ink); }
.tgl { font:600 .78rem var(--font-body); letter-spacing:.06em; color:var(--color-ink-muted); background:none; border:1px solid var(--color-rule); border-radius:999px; padding:.32rem .75rem; cursor:pointer; transition:color .15s, border-color .15s; }
.tgl:hover { color:var(--color-ink); border-color:var(--color-ink-muted); }
.tgl.icon { display:grid; place-items:center; width:1.95rem; height:1.95rem; padding:0; }
.tgl.icon svg { width:.95rem; height:.95rem; display:block; }

.hero { padding:clamp(5rem,11vw,9rem) var(--gutter) 0; max-width:72rem; margin:0 auto; text-align:center; }
.wordmark { font-family:var(--font-display); font-weight:700; font-size:clamp(3rem,8vw,7.5rem); letter-spacing:.025em; line-height:.95; margin:0; white-space:nowrap; }
.wm-sub { font-weight:300; font-size:.48em; letter-spacing:.12em; color:var(--color-accent-ink); }
.banner { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:clamp(2.5rem,5vw,4rem); font-family:var(--font-display); font-size:clamp(1rem,3.8vw,3.5rem); font-weight:500; line-height:1.15; white-space:nowrap; }
.pulse { flex:none; width:.8em; height:.8em; border-radius:50%; background:var(--color-ink-muted); }
.banner.ok { color:var(--up); } .banner.down { color:var(--down); } .banner.partial { color:var(--degraded); }
.banner.ok .pulse { background:var(--up); box-shadow:0 0 1.2rem var(--up); }
.banner.down .pulse { background:var(--down); box-shadow:0 0 1.2rem var(--down); }
.banner.partial .pulse { background:var(--degraded); box-shadow:0 0 1.2rem var(--degraded); }
.updated { font-size:.82rem; color:var(--color-ink-muted); margin:.8rem 0 0; }

.page { padding:2.5rem var(--gutter) 4rem; max-width:52rem; margin:0 auto; }
.components { border-top:1px solid var(--color-rule); }
.component { border-bottom:1px solid var(--color-rule); padding:1.1rem 0 1.2rem; }
.head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.name { font-weight:600; font-size:1.02rem; }
.state { font-size:.85rem; color:var(--color-ink-muted); white-space:nowrap; }
.state.ok { color:var(--up); } .state.degraded { color:var(--degraded); } .state.down { color:var(--down); }
.days { display:flex; gap:2px; height:2rem; margin-top:.8rem; }
.days .d { flex:1; border-radius:3px; transition:transform .12s ease; }
.days .d:hover { transform:scaleY(1.15); }
.days .up { background:var(--up); } .days .degraded { background:var(--degraded); } .days .down { background:var(--down); } .days .nodata { background:var(--color-paper-3); }
.ends { display:flex; justify-content:space-between; font-size:.78rem; color:var(--color-ink-muted); margin-top:.5rem; }

.legend { display:flex; justify-content:space-between; width:100%; max-width:20rem; font-size:.8rem; color:var(--color-ink-muted); margin:1.5rem auto 0; }
.sw { display:inline-block; width:.7rem; height:.7rem; border-radius:2px; margin-right:.4rem; vertical-align:-.05em; }
.sw.up { background:var(--up); } .sw.down { background:var(--down); } .sw.nodata { background:var(--color-paper-3); }



@media (max-width:600px) {
  .edge-nav { padding-top:1.1rem; }
  .hero { padding-top:5.5rem; }
  .wordmark { font-size:clamp(1.7rem,9.5vw,3rem); }
  .nav-link { display:none; }
  .nav-side { gap:.65rem; }
  .banner { gap:.6rem; margin-top:2.6rem; font-size:clamp(.85rem,4.6vw,1.3rem); }
  .pulse { width:.75em; height:.75em; }
  .updated { font-size:.75rem; }
  .page { padding-top:3.2rem; }
  .days { height:1.5rem; }
  .ends { font-size:.72rem; }
}