:root {
  --bg: #03050a;
  --panel: rgba(10, 16, 27, .88);
  --panel-strong: #0b1220;
  --text: #f5f9ff;
  --muted: #9aa9ba;
  --cyan: #20e7ff;
  --blue: #168cff;
  --magenta: #d83cff;
  --green: #44f2a1;
  --line: rgba(255, 255, 255, .11);
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(32, 231, 255, .12), transparent 28rem),
    radial-gradient(circle at 88% 22%, rgba(216, 60, 255, .10), transparent 30rem),
    linear-gradient(180deg, #020409, #050914 55%, #020409);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: auto; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(2, 4, 9, .86);
  backdrop-filter: blur(18px);
}
.topbar-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { font-size: .8rem; font-weight: 900; letter-spacing: .22em; }
.brand span { color: var(--cyan); }
.global-nav { display: flex; gap: clamp(14px, 2.5vw, 30px); overflow-x: auto; }
.global-nav a {
  flex: 0 0 auto;
  padding: 8px 0;
  color: rgba(255, 255, 255, .72);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.global-nav a:hover, .global-nav a[aria-current="page"] { color: var(--cyan); }

.site-sidebar { display: none; }
@media (min-width: 1180px) {
  body { padding-left: 214px; }
  .site-sidebar {
    position: fixed;
    z-index: 30;
    inset: 18px auto 18px 16px;
    width: 182px;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(5, 9, 16, .94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
    backdrop-filter: blur(18px);
  }
  .sidebar-title { padding: 0 8px 15px; color: var(--cyan); font-size: .68rem; font-weight: 900; letter-spacing: .18em; }
  .sidebar-link, .sidebar-group-label, .sidebar-sub a {
    display: block;
    border-radius: 10px;
    padding: 9px 10px;
    color: #b7c4d2;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .06em;
  }
  .sidebar-link:hover, .sidebar-link.active, .sidebar-sub a:hover { color: #effeff; background: rgba(32, 231, 255, .08); }
  .sidebar-group { margin: 4px 0; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
  .sidebar-group-label { color: #fff; }
  .sidebar-sub { display: grid; gap: 1px; padding-left: 8px; }
  .sidebar-sub a { padding: 7px 10px; color: #8293a7; font-size: .66rem; font-weight: 650; }
  .sidebar-foot { margin-top: auto; padding: 16px 8px 2px; color: #607084; font-size: .61rem; line-height: 1.45; }
}

.hero { padding: 100px 0 62px; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cyan);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
h1 { margin: 17px 0 0; max-width: 900px; font-size: clamp(3.3rem, 8vw, 7rem); line-height: .89; letter-spacing: -.06em; }
h1 span { display: block; color: transparent; background: linear-gradient(95deg, var(--cyan), #fff 48%, var(--magenta)); -webkit-background-clip: text; background-clip: text; }
.lead { max-width: 760px; margin: 27px 0 0; color: #b7c4d3; font-size: clamp(1rem, 1.8vw, 1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.button, .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.button { border: 1px solid rgba(32, 231, 255, .38); background: rgba(32, 231, 255, .09); color: #e8fdff; }
.button-secondary { border: 1px solid var(--line); color: #c7d3df; background: rgba(255, 255, 255, .03); }

.section { padding: 58px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 25px; }
.section-head h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.9rem); line-height: 1; letter-spacing: -.045em; }
.section-head p { max-width: 560px; margin: 0; color: var(--muted); }
.status-card {
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid rgba(32, 231, 255, .25);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15, 25, 42, .95), rgba(7, 12, 21, .88));
  box-shadow: 0 24px 72px rgba(0, 0, 0, .34);
}
.status-line { display: flex; align-items: center; gap: 10px; color: #c8ffe3; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.status-card h2 { margin: 16px 0 0; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.04em; }
.status-card p { max-width: 760px; margin: 18px 0 0; color: #aebccc; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.step { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .025); }
.step b { display: block; color: var(--cyan); font-size: .7rem; letter-spacing: .13em; }
.step h3 { margin: 22px 0 8px; font-size: 1.18rem; }
.step p { margin: 0; color: var(--muted); font-size: .86rem; }

.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.topic { min-height: 112px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.topic b { font-size: .88rem; }
.topic span { display: block; margin-top: 7px; color: var(--muted); font-size: .76rem; }

.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.archive-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.archive-controls .filters { margin: 0; }
.filter {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  color: #bdc9d7;
  background: rgba(255, 255, 255, .025);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}
.filter.active { border-color: rgba(32, 231, 255, .38); color: #effdff; background: rgba(32, 231, 255, .09); }
.archive-select {
  min-height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #c8d4e1;
  background: #0b111d;
  font: inherit;
  font-size: .72rem;
}
.archive-item[hidden] { display: none !important; }
.empty-state { padding: 34px; border: 1px dashed rgba(32, 231, 255, .28); border-radius: 20px; background: rgba(32, 231, 255, .035); }
.empty-state h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.empty-state p { max-width: 700px; margin: 12px 0 0; color: var(--muted); }

footer { margin-top: 54px; padding: 34px 0 48px; border-top: 1px solid var(--line); color: #7f8ea1; font-size: .78rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a:hover { color: var(--cyan); }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head { display: block; }
  .section-head p { margin-top: 12px; }
}
@media (max-width: 640px) {
  .wrap { width: min(var(--max), calc(100% - 24px)); }
  .topbar-inner { min-height: 66px; }
  .brand { display: none; }
  .global-nav { width: 100%; justify-content: space-between; gap: 12px; }
  .global-nav a { font-size: .62rem; letter-spacing: .07em; }
  .hero { padding: 76px 0 48px; }
  .topic-grid { grid-template-columns: 1fr; }
  .archive-controls { align-items: stretch; }
  .archive-select { flex: 1 1 130px; }
  .footer-inner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }