@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');

:root{
  --ink:#000000;
  --panel:#121212;
  --panel-2:#0a0d13;
  --line:#1b222e;
  --text:#e9edf4;
  --dim:#8b95a7;
  --blue:#4a7dff;
  --deep:#0d1a2e;
  --shadow:0 22px 46px -30px #000000;
}

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

html{
  background:#000000;
  color-scheme:dark;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:#000000;
  color:var(--text);
  font-family:'Figtree','Noto Sans',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit;text-decoration:none}
p{margin:0 0 14px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

div[id]{scroll-margin-top:104px}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(4,6,10,.97);
  border-bottom:1px solid var(--line);
}
.menu-switch{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.strip{
  margin:0;
  padding:7px 16px;
  border-bottom:1px solid #0f131b;
  font-size:14px;
  line-height:1.6;
  letter-spacing:.14em;
  color:var(--dim);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mast-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 16px;
  position:relative;
  z-index:70;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  font-size:17px;
  font-weight:600;
  letter-spacing:.01em;
}
.brand-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 12px rgba(74,125,255,.85);
  flex:0 0 auto;
}
.burger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b0f16;
  font-size:14px;
  line-height:1;
  letter-spacing:.18em;
  color:var(--text);
  cursor:pointer;
  user-select:none;
}
.burger-bar{
  width:16px;
  height:1px;
  background:currentColor;
  box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;
  transition:transform .28s ease,box-shadow .28s ease;
}
.menu-switch:checked ~ .mast-row .burger{
  background:#101a2c;
  border-color:#25406e;
}
.menu-switch:checked ~ .mast-row .burger-bar{
  transform:rotate(45deg);
  box-shadow:none;
}
.menu-switch:checked ~ .mast-row .burger-bar::after{
  content:"";
  display:block;
  width:16px;
  height:1px;
  background:currentColor;
  transform:rotate(-90deg);
}
.menu-switch:focus-visible ~ .mast-row .burger{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

/* ---------- overlay nav ---------- */
.sitenav{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:112px 20px 42px;
  background:radial-gradient(110% 80% at 100% 0%,#0b1728 0%,#000000 62%);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.menu-switch:checked ~ .sitenav{
  opacity:1;
  visibility:visible;
}
body:has(.menu-switch:checked){overflow:hidden}
.sitenav ul{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  max-width:520px;
  display:grid;
  gap:2px;
}
.sitenav li{
  opacity:0;
  transform:translateY(14px);
}
.menu-switch:checked ~ .sitenav li{
  animation:rise .45s cubic-bezier(.2,.7,.3,1) forwards;
}
.sitenav li:nth-child(1){animation-delay:.03s}
.sitenav li:nth-child(2){animation-delay:.07s}
.sitenav li:nth-child(3){animation-delay:.11s}
.sitenav li:nth-child(4){animation-delay:.15s}
.sitenav li:nth-child(5){animation-delay:.19s}
.sitenav li:nth-child(6){animation-delay:.23s}
.sitenav li:nth-child(7){animation-delay:.27s}
@keyframes rise{to{opacity:1;transform:none}}
.sitenav a{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:54px;
  padding:8px 10px;
  border-bottom:1px solid #131a25;
  font-size:20px;
  color:#dbe2ee;
  transition:color .2s ease,text-shadow .2s ease;
}
.sitenav a:hover,.sitenav a:focus-visible{
  color:#ffffff;
  text-shadow:0 0 12px rgba(74,125,255,.6);
}
.num{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--blue);
  min-width:26px;
  font-variant-numeric:tabular-nums;
}

/* ---------- shell ---------- */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
}
main{display:block}

/* ---------- hero ---------- */
.hero{
  display:flex;
  align-items:stretch;
  min-height:45vh;
  margin:20px 0 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,#06080d,#000000);
}
.hero-media{
  flex:0 0 46%;
  background:#080d15;
  overflow:hidden;
}
.hero-fig{height:100%}
.hero-img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  opacity:.92;
  filter:brightness(.94);
}
.hero-copy{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  text-align:right;
  padding:28px 30px;
  position:relative;
}
.hero-copy::before{
  content:"";
  position:absolute;
  left:-26px;
  top:-10%;
  bottom:-10%;
  width:52px;
  transform:skewX(-9deg);
  background:linear-gradient(90deg,rgba(74,125,255,0),rgba(74,125,255,.14));
  pointer-events:none;
}
.hero.solo .hero-copy{padding:34px 30px}
.hero h1{
  margin:0;
  max-width:22ch;
  font-size:clamp(26px,4vw,44px);
  line-height:1.24;
  letter-spacing:-.012em;
  font-weight:700;
  color:#ffffff;
  text-shadow:0 0 22px rgba(74,125,255,.22);
}

/* ---------- stage ---------- */
.stage{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:32px;
  margin:32px 0 0;
  align-items:start;
}
.rail{
  position:sticky;
  top:104px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#070a10;
  padding:14px 12px;
}
.rail-cap{
  margin:0 0 10px;
  padding-left:2px;
  font-size:13px;
  letter-spacing:.2em;
  color:var(--dim);
}
.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  counter-reset:r;
}
.rail-list li{counter-increment:r}
.rail-list a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:6px 8px;
  border-radius:8px;
  font-size:15px;
  line-height:1.5;
  color:var(--dim);
  transition:background .2s ease,color .2s ease;
}
.rail-list a::before{
  content:counter(r,decimal-leading-zero);
  font-size:11px;
  letter-spacing:.1em;
  color:#3d4a5e;
  font-variant-numeric:tabular-nums;
}
.rail-list a:hover,.rail-list a:focus-visible{
  background:#101725;
  color:#ffffff;
}

/* ---------- section body ---------- */
.body{
  min-width:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  box-shadow:var(--shadow);
  padding:26px 28px 30px;
  counter-reset:sec;
  overflow-wrap:break-word;
}
.body div{
  padding:26px 0;
  border-bottom:1px solid #1a2130;
  counter-increment:sec;
}
.body div:first-child{padding-top:2px}
.body div:last-child{border-bottom:0;padding-bottom:2px}
.body div::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  margin-bottom:6px;
  font-size:12px;
  letter-spacing:.24em;
  color:var(--blue);
  opacity:.85;
  font-variant-numeric:tabular-nums;
}
.body h2{
  margin:0 0 8px;
  font-size:clamp(20px,2.4vw,26px);
  line-height:1.36;
  letter-spacing:-.01em;
  font-weight:600;
  color:#ffffff;
}
.body h2 + hr{
  margin:0 0 16px;
  border:0;
  height:1px;
  background:linear-gradient(90deg,rgba(74,125,255,.9),rgba(74,125,255,0) 72%);
}
.body h3{
  margin:22px 0 8px;
  font-size:clamp(18px,2vw,21px);
  line-height:1.4;
  font-weight:600;
  color:#f2f5fa;
}
.body h3 + hr{
  margin:0 0 12px;
  border:0;
  height:1px;
  background:#1e2738;
}
.body hr{
  border:0;
  height:1px;
  background:#1a2130;
  margin:18px 0;
}
.body p{color:#ccd4e1}
.body strong{color:#ffffff;font-weight:600}
.body a{
  color:#94b8ff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.body a:hover{color:#c3d6ff}
.body ul,.body ol{
  margin:0 0 16px;
  padding-left:22px;
  color:#ccd4e1;
}
.body li{margin:0 0 8px}
.body li::marker{color:var(--blue)}
.body blockquote{
  margin:18px 0;
  padding:12px 16px;
  border-left:2px solid var(--blue);
  border-radius:0 10px 10px 0;
  background:#0b1017;
  color:#dee5f0;
}
.body blockquote p:last-child{margin-bottom:0}
.body img{
  border-radius:10px;
  margin:16px 0;
  background:#0a0f17;
}
.body table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  font-size:16px;
}
.body th,.body td{
  padding:9px 12px;
  border:1px solid #212a3a;
  text-align:left;
}
.body th{background:#0d131c;color:#e5ebf5}
.body code{
  font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,monospace;
  font-size:15px;
  background:#0c121a;
  border:1px solid #1d2635;
  border-radius:6px;
  padding:1px 5px;
}
.body pre{
  overflow-x:auto;
  padding:14px 16px;
  border-radius:10px;
  background:#0a0f16;
  border:1px solid #1b2331;
}
.body pre code{border:0;background:none;padding:0}
.body :target{}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease;
}
.reveal.in{opacity:1;transform:none}

/* ---------- footer ---------- */
.foot{
  margin-top:66px;
  padding:40px 18px 36px;
  border-top:1px solid var(--line);
  background:#000000;
  text-align:center;
}
.foot p{
  margin:0 0 12px;
  font-size:clamp(28px,7vw,66px);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.02em;
  color:#ffffff;
  text-shadow:0 0 26px rgba(74,125,255,.2);
  overflow-wrap:break-word;
}
.foot small{
  display:block;
  font-size:14px;
  line-height:1.6;
  letter-spacing:.08em;
  color:var(--dim);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .stage{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    margin-top:24px;
  }
  .rail{
    position:static;
    padding:10px 12px;
  }
  .rail-cap{margin-bottom:8px}
  .rail-list{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:thin;
  }
  .rail-list li{flex:0 0 auto}
  .rail-list a{
    min-height:40px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    white-space:nowrap;
  }
}

@media (max-width:760px){
  div[id]{scroll-margin-top:92px}
  .hero{
    flex-direction:column;
    min-height:0;
    margin-top:14px;
  }
  .hero-copy{
    order:-1;
    align-items:stretch;
    text-align:right;
    padding:22px 18px 18px;
  }
  .hero-copy::before{display:none}
  .hero-media{flex:0 0 auto;height:172px}
  .hero h1{max-width:none;font-size:clamp(23px,6.4vw,30px)}
  .body{padding:20px 18px 24px}
  .sitenav{padding:104px 16px 32px}
  .sitenav a{font-size:18px;min-height:52px}
  .foot{margin-top:46px;padding:32px 16px 30px}
}

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

button[aria-expanded]{min-width:44px;min-height:44px}