:root{
  --ink-900:#0B1B2E;
  --ink-800:#10263C;
  --ink-700:#1A3A56;
  --glacier-500:#4FD1D9;
  --glacier-300:#9BE7EC;
  --prayer-red:#D2453B;
  --gold-orange:#F2A03D;
  --turquoise-green:#2FB08A;
  --text-primary:#EAF2F7;
  --text-muted:#93A8B8;
  --paper-100:#F4F7F9;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --wrap:1120px;
  --notch:16px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink-900)}

body{
  margin:0;
  min-height:100vh;
  background:transparent;
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(147,168,184,.05) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(0deg,rgba(147,168,184,.035) 0 1px,transparent 1px 96px);
}

h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
address{font-style:normal}

:focus-visible{outline:2px solid var(--glacier-500);outline-offset:3px}

.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}

.prose{max-width:38em}
.prose p{max-width:36em}
.prose h2{margin:1.6em 0 .6em;font-size:26px}
.prose h3{margin:1.4em 0 .5em;font-size:19px}
.prose ul{margin:0 0 1em;padding-left:1.1em}
.prose li{margin-bottom:.4em}

.mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;color:var(--text-muted)}
.mono-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
  border:1px solid var(--ink-700);
  padding:3px 8px;
  white-space:nowrap;
}

/* ===== buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  padding:9px 16px;
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--ink-700);
  text-decoration:none;
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:color .16s var(--ease),border-color .16s var(--ease),background-color .16s var(--ease);
}
.btn:hover{border-color:var(--glacier-500);color:var(--glacier-300)}
.btn--ghost{border-color:var(--glacier-500);color:var(--glacier-500)}
.btn--ghost:hover{background:rgba(79,209,217,.10);color:var(--glacier-300)}
.btn--primary{background:var(--glacier-500);border-color:var(--glacier-500);color:var(--ink-900);font-weight:700}
.btn--primary:hover{background:var(--glacier-300);border-color:var(--glacier-300);color:var(--ink-900)}
.btn--sm{padding:7px 12px;font-size:12px}

/* ===== skip link ===== */
.skip-link{
  position:absolute;
  left:12px;
  top:-120px;
  z-index:120;
  padding:10px 18px;
  background:var(--glacier-500);
  color:var(--ink-900);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

/* ===== header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(11,27,46,.94);
  border-bottom:1px solid var(--ink-700);
  backdrop-filter:blur(10px);
}

.scroll-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
}
.scroll-progress__bar{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--glacier-500),var(--gold-orange));
}

.masthead{padding:16px 0 0}

.masthead__grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.masthead__aside{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.masthead__aside--right{
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:var(--text-primary);
}
.brand__name{
  font-size:clamp(20px,2.6vw,28px);
  font-weight:900;
  letter-spacing:.1em;
  line-height:1.15;
}
.brand__sub{
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--text-muted);
}
.brand--footer{align-items:flex-start;text-align:left}
.brand--footer .brand__name{font-size:20px}
.brand--footer .brand__sub{font-size:11px;letter-spacing:.16em}

.site-nav{margin-top:14px;border-top:1px solid var(--ink-700)}
.site-nav__list{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:2px;
  list-style:none;
  padding:0;
}
.site-nav__link{
  position:relative;
  display:block;
  padding:13px 18px;
  font-size:14px;
  color:var(--text-muted);
  text-decoration:none;
  transition:color .16s var(--ease);
}
.site-nav__link:hover{color:var(--glacier-300)}
.site-nav__link[aria-current="page"]{color:var(--glacier-500)}
.site-nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:6px;
  height:2px;
  background:var(--glacier-500);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--ink-700);
  color:var(--glacier-500);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
}
.nav-toggle__label{white-space:nowrap}
.nav-toggle__bars{display:flex;flex-direction:column;gap:3px}
.nav-toggle__bar{display:block;width:16px;height:1.5px;background:currentColor;transition:opacity .16s var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:.25}

/* ===== footer ===== */
.site-footer{
  margin-top:80px;
  background:var(--ink-800);
  border-top:1px solid var(--ink-700);
}

.site-footer__top{
  display:grid;
  grid-template-columns:minmax(240px,360px) 1fr;
  gap:48px;
  padding:56px 0 40px;
}

.site-footer__tagline{margin:14px 0 18px;font-size:14px;color:var(--text-muted);max-width:30em}

.site-footer__contact{display:grid;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.site-footer__contact p{margin:0;word-break:break-word}
.site-footer__contact .mono-tag{margin-right:6px}

.site-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.site-footer__col-title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--glacier-500);
}
.site-footer__list{list-style:none;padding:0;display:grid;gap:10px}
.site-footer__link{font-size:14.5px;color:var(--text-muted);text-decoration:none;transition:color .16s var(--ease)}
.site-footer__link:hover{color:var(--glacier-300)}

.site-footer__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:10px 28px;
  padding:22px 0;
  border-top:1px solid var(--ink-700);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
}
.site-footer__meta-line{margin:0;color:var(--text-muted)}
.site-footer__legal{margin:0;color:var(--glacier-300)}

.site-footer__disclaimer{
  margin:0;
  padding:18px 0 28px;
  border-top:1px solid var(--ink-700);
  font-size:12.5px;
  line-height:1.8;
  color:var(--text-muted);
  max-width:78em;
}

.site-footer__ridge{
  height:44px;
  background:linear-gradient(180deg,rgba(79,209,217,.22),rgba(79,209,217,0));
  clip-path:polygon(0 100%,0 68%,7% 40%,14% 62%,22% 22%,31% 55%,40% 12%,50% 48%,59% 26%,68% 58%,77% 30%,85% 60%,93% 38%,100% 62%,100% 100%);
}

/* ===== layout helpers ===== */
.section{padding:56px 0}
.section__head{margin-bottom:28px}
.eyebrow{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--glacier-500);
}
.lede{font-size:17px;color:var(--text-muted);max-width:36em}

.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-12{grid-column:span 12}

/* ===== panel ===== */
.panel{
  position:relative;
  background:var(--ink-800);
  border:1px solid var(--ink-700);
  padding:24px;
}
.panel--notch{
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)));
}
.panel--notch::after{
  content:"";
  position:absolute;
  left:24px;
  bottom:0;
  width:40px;
  height:2px;
  background:var(--glacier-500);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s var(--ease);
}
.panel--notch:hover::after{transform:scaleX(1)}
.panel__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--ink-700);
}
.panel__title{font-size:19px;font-weight:700})

/* ===== metric ===== */
.metric{display:flex;flex-direction:column;gap:6px}
.metric__value{
  font-family:var(--font-mono);
  font-size:clamp(48px,9vw,120px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.03em;
  color:var(--glacier-500);
  font-variant-numeric:tabular-nums;
}
.metric__unit{margin-left:.2em;font-size:.28em;letter-spacing:.04em;color:var(--text-muted)}
.metric__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--text-muted)}

/* ===== status & legend ===== */
.status-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  border:1px solid currentColor;
  white-space:nowrap;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.status-tag::before{content:"";width:6px;height:6px;background:currentColor;display:block}
.status-tag--ok{color:var(--turquoise-green)}
.status-tag--warn{color:var(--gold-orange)}
.status-tag--alert{color:var(--prayer-red)}
.status-tag--hold{color:var(--text-muted)}
.status-tag--active{color:var(--glacier-500)}

.legend{display:flex;flex-wrap:wrap;gap:14px}
.legend__item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
}
.legend__swatch{display:block;width:10px;height:10px;background:var(--text-muted)}
.legend__swatch--glacier{background:var(--glacier-500)}
.legend__swatch--ok{background:var(--turquoise-green)}
.legend__swatch--warn{background:var(--gold-orange)}
.legend__swatch--alert{background:var(--prayer-red)}
.legend__swatch--paper{background:var(--paper-100)}

/* ===== horizontal band ===== */
.band{
  border-top:1px solid var(--ink-700);
  border-bottom:1px solid var(--ink-700);
  background:linear-gradient(90deg,rgba(79,209,217,.12),transparent 62%);
  padding:14px 0;
}
.band__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--text-muted);
}

/* ===== table ===== */
.data-table{width:100%;border-collapse:collapse;font-size:15px}
.data-table th,.data-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--ink-700)}
.data-table thead th{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.data-table tbody tr{transition:background-color .16s var(--ease)}
.data-table tbody tr:hover{background:rgba(79,209,217,.06)}
.data-table tr[data-highlight="true"]{background:rgba(79,209,217,.10)}
.data-table .num{font-family:var(--font-mono);color:var(--glacier-300);font-variant-numeric:tabular-nums}

/* ===== breadcrumb ===== */
.breadcrumb{padding:20px 0}
.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
}
.breadcrumb__item{display:flex;align-items:center;gap:8px}
.breadcrumb__item::after{content:"/";color:var(--ink-700)}
.breadcrumb__item:last-child::after{content:""}
.breadcrumb__item--current{color:var(--glacier-300)}
.breadcrumb__link{color:var(--text-muted);text-decoration:none;transition:color .16s var(--ease)}
.breadcrumb__link:hover{color:var(--glacier-500)}

/* ===== disclosure ===== */
.disclosure{border:1px solid var(--ink-700);background:var(--ink-800);margin-bottom:-1px}
.disclosure__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:18px 20px;
  background:none;
  border:0;
  text-align:left;
  font-size:16px;
  cursor:pointer;
  transition:background-color .16s var(--ease);
}
.disclosure__toggle:hover{background:rgba(79,209,217,.06)}
.disclosure__index{font-family:var(--font-mono);font-size:13px;color:var(--glacier-500);margin-right:12px}
.disclosure__icon{color:var(--glacier-500);transition:transform .2s var(--ease);flex:none}
.disclosure__toggle[aria-expanded="true"] .disclosure__icon{transform:rotate(180deg)}
.disclosure__panel{padding:0 20px 20px;color:var(--text-muted);font-size:15px}
.disclosure__panel[hidden]{display:none}

/* ===== filter ===== */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px}
.filter-chip{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  padding:7px 14px;
  background:var(--ink-800);
  border:1px solid var(--ink-700);
  color:var(--text-muted);
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:color .16s var(--ease),border-color .16s var(--ease),background-color .16s var(--ease);
}
.filter-chip:hover{color:var(--glacier-300)}
.filter-chip[aria-pressed="true"]{
  border-color:var(--glacier-500);
  color:var(--glacier-500);
  background:rgba(79,209,217,.08);
}
[data-filter-item][hidden]{display:none}

/* ===== index rail ===== */
.index-rail{position:sticky;top:132px;border-left:1px solid var(--ink-700)}
.index-rail__link{
  position:relative;
  display:block;
  padding:10px 0 10px 16px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted);
  text-decoration:none;
  transition:color .16s var(--ease);
}
.index-rail__link::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  width:2px;
  background:transparent;
}
.index-rail__link:hover{color:var(--glacier-300)}
.index-rail__link[aria-current="true"]{color:var(--glacier-500)}
.index-rail__link[aria-current="true"]::before{background:var(--glacier-500)}

/* ===== media frame ===== */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--ink-800);
  border:1px solid var(--ink-700);
}
.media-frame img{width:100%;height:100%;object-fit:cover;opacity:.86}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:4/5}
.media-frame--ridge{
  aspect-ratio:21/9;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 78%,8% 52%,17% 74%,26% 40%,36% 66%,45% 30%,56% 60%,66% 38%,76% 66%,86% 44%,94% 70%,100% 56%,100% 100%,0 100%);
}
.media-frame__caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--text-muted);
}

/* ===== reveal ===== */
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}

/* ===== responsive ===== */
@media (max-width:960px){
  .grid-12{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  .col-3,.col-4{grid-column:span 3}
  .col-6,.col-8,.col-9,.col-12{grid-column:1 / -1}
  .site-footer__top{grid-template-columns:1fr;gap:36px;padding:44px 0 32px}
}

@media (max-width:860px){
  .masthead{padding:12px 0 0}
  .masthead__grid{grid-template-columns:1fr auto;gap:12px;align-items:center}
  .masthead__aside--left{display:none}
  .brand{align-items:flex-start;text-align:left}
  .brand__name{font-size:20px}
  .brand__sub{letter-spacing:.14em}
  .mono-tag--desk{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;margin-top:12px;border-top:1px solid var(--ink-700)}
  .site-nav[data-open]{display:block}
  .site-nav__list{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0 0 8px}
  .site-nav__item{width:100%}
  .site-nav__link{padding:14px 4px;border-bottom:1px solid var(--ink-700);font-size:15px}
  .site-nav__link[aria-current="page"]::after{display:none}
  .index-rail{
    position:static;
    display:flex;
    gap:8px;
    overflow-x:auto;
    border-left:0;
    border-bottom:1px solid var(--ink-700);
    padding-bottom:10px;
    margin-bottom:24px;
  }
  .index-rail__link{padding:6px 12px;border:1px solid var(--ink-700);white-space:nowrap}
  .index-rail__link::before{display:none}
  .site-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}

@media (max-width:640px){
  body{font-size:15.5px}
  .wrap{width:calc(100% - 32px)}
  .grid-12{grid-template-columns:1fr;gap:16px}
  .col-3,.col-4,.col-6,.col-8,.col-9,.col-12{grid-column:1 / -1}
  .section{padding:40px 0}
  .panel{padding:18px}
  .site-footer__cols{grid-template-columns:1fr}
  .site-footer__meta{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .panel--notch::after{transform:scaleX(1)}
}
