:root {
  color-scheme: dark light;
  --bg: #08111f;
  --bg-2: #0d1a2e;
  --panel: color-mix(in srgb, #102033 88%, white 12%);
  --panel-2: #122743;
  --text: #eef6ff;
  --muted: #b8c8da;
  --line: rgba(180, 210, 255, 0.2);
  --accent: #77f0ff;
  --accent-2: #b693ff;
  --good: #8df7b5;
  --warn: #ffd27d;
  --danger: #ff9aa5;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --radius: 22px;
  --measure: 82rem;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 8%, rgba(119,240,255,.18), transparent 28rem),
    radial-gradient(circle at 90% 20%, rgba(182,147,255,.16), transparent 24rem),
    linear-gradient(160deg, var(--bg), #060a12 76%);
  color: var(--text);
  line-height: 1.65;
  min-block-size: 100dvh;
}
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: #fff; }
code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
code { color: #d2fbff; background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: .45rem; padding: .06rem .32rem; }
pre { overflow: auto; background: #07111f; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }
.skip-link { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; transform: translateY(-150%); background: #fff; color: #000; padding: .6rem 1rem; border-radius: .6rem; z-index: 1000; }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 17, 31, .86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.site-header__inner {
  max-inline-size: min(96vw, 118rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem clamp(1rem, 2vw, 2rem);
}
.brand { display: inline-flex; gap: .75rem; align-items: center; text-decoration: none; color: var(--text); min-inline-size: max-content; }
.brand__mark { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: .9rem; background: linear-gradient(135deg, rgba(119,240,255,.22), rgba(182,147,255,.18)); box-shadow: inset 0 0 24px rgba(119,240,255,.16); font-weight: 800; letter-spacing: -.06em; }
.brand small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.2; }
.primary-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .35rem; }
.menu-group { position: relative; }
.menu-group > summary, .nav-direct { list-style: none; cursor: pointer; border: 1px solid transparent; border-radius: 999px; color: var(--muted); text-decoration: none; padding: .55rem .82rem; min-block-size: 2.4rem; display: inline-flex; align-items: center; gap: .35rem; }
.menu-group > summary::-webkit-details-marker { display: none; }
.menu-group > summary::after { content: "⌄"; font-size: .8em; opacity: .75; }
.menu-group[open] > summary, .menu-group.is-active > summary, .nav-direct.is-active, .nav-direct:hover, .menu-group > summary:hover { color: var(--text); background: rgba(255,255,255,.07); border-color: var(--line); }
.menu-panel { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); min-inline-size: 16rem; background: rgba(11, 25, 44, .98); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 1rem; padding: .45rem; z-index: 100; }
.menu-panel a { display: block; color: var(--muted); text-decoration: none; padding: .65rem .75rem; border-radius: .7rem; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { color: var(--text); background: rgba(119,240,255,.10); }
.site-search { display: flex; gap: .35rem; align-items: center; justify-content: end; }
.site-search input, .search-main input { inline-size: min(14rem, 32vw); color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 999px; padding: .55rem .8rem; }
.site-search button, .search-main button { color: #001018; background: var(--accent); border: 0; border-radius: 999px; padding: .6rem .85rem; font-weight: 700; cursor: pointer; }
.content-shell { max-inline-size: min(94vw, var(--measure)); margin-inline: auto; padding: clamp(2rem, 4vw, 4.5rem) clamp(.5rem, 1vw, 1rem); }
.page-card { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 3rem); container-type: inline-size; }
.page-card h1 { font-size: clamp(2.2rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.07em; margin: 0 0 1.2rem; max-inline-size: 12ch; }
.page-card h2 { font-size: clamp(1.35rem, 3vw, 2.25rem); line-height: 1.08; letter-spacing: -.035em; margin-block-start: 2.4rem; }
.page-card h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); margin-block-start: 1.8rem; }
.page-card p, .page-card li { color: var(--muted); }
.page-card strong { color: var(--text); }
blockquote { margin: 0 0 1.5rem; border-inline-start: .3rem solid var(--accent); padding: .8rem 1rem; background: rgba(119,240,255,.08); border-radius: .8rem; }
blockquote p { margin: 0; color: var(--text); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 1rem; margin-block: 1.4rem; }
table { inline-size: 100%; border-collapse: collapse; min-inline-size: 48rem; }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--text); background: rgba(255,255,255,.06); }
td { color: var(--muted); }
.route-cluster, .result-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .8rem; margin-block: 1rem 1.5rem; }
.route-tile, .result-card { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.055); text-decoration: none; }
.route-tile span, .result-card span { color: var(--muted); }
.search-main { display: grid; gap: .6rem; margin-block: 1rem 1.4rem; }
.search-main div { display: flex; gap: .5rem; flex-wrap: wrap; }
.site-footer { border-top: 1px solid var(--line); background: #050b14; }
.site-footer__grid { max-inline-size: min(94vw, 118rem); margin-inline: auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 1rem; padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem); }
.site-footer h2 { font-size: 1rem; margin: 0 0 .7rem; color: var(--text); }
.site-footer p, .site-footer a { color: var(--muted); }
.site-footer nav a { display: block; margin-block: .35rem; }
.footer-contact { color: var(--accent) !important; font-weight: 800; }
.site-footer__meta { font-size: .88rem; }
@container (min-width: 56rem) {
  .page-card ul, .page-card ol { columns: 2; column-gap: 2rem; }
  .page-card li { break-inside: avoid; margin-block-end: .3rem; }
}
@media (max-width: 980px) {
  .site-header__inner { grid-template-columns: 1fr; align-items: stretch; }
  .primary-nav { justify-content: flex-start; overflow-x: auto; padding-block: .25rem; }
  .menu-panel { position: fixed; inset-inline: 1rem; inset-block-start: auto; transform: none; margin-block-start: .35rem; }
  .site-search { justify-content: start; }
  .site-search input { inline-size: min(100%, 22rem); }
  .site-footer__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f4f7fb; --bg-2: #eaf1fb; --panel: #ffffff; --panel-2: #eef5ff; --text: #091423; --muted: #34465a; --line: rgba(10, 30, 55, .17); --shadow: 0 18px 50px rgba(30, 55, 90, .12); }
  body { background: radial-gradient(circle at 20% 8%, rgba(0, 190, 220, .14), transparent 28rem), linear-gradient(160deg, var(--bg), #fff 76%); }
  .site-header { background: rgba(244,247,251,.86); }
  .menu-panel { background: rgba(255,255,255,.98); }
  code, pre { background: #edf5ff; color: #0d3b54; }
  .site-footer { background: #ecf2fa; }
}