*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-deep:#0a1628;
  --bg-card:#0f1f36;
  --bg-card-hover:#142740;
  --border:#1c3454;
  --border-light:#264060;
  --text-primary:#d4dce8;
  --text-secondary:#7a8fa6;
  --text-tertiary:#4a6380;
  --accent:#3a9bdc;
  --accent-glow:rgba(58,155,220,0.15);
  --accent-warm:#e8a44a;
  --accent-green:#3dbb78;
  --mono:'DM Mono',monospace;
  --sans:'Noto Sans SC',-apple-system,'PingFang SC',sans-serif;
}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--sans);
  min-height:100vh;
  overflow-x:hidden;
}

/* grid background texture */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(58,155,220,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(58,155,220,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  z-index:0;
}

/* subtle radial glow */
body::after{
  content:'';
  position:fixed;
  top:-20vh;left:50%;
  transform:translateX(-50%);
  width:120vw;height:60vh;
  background:radial-gradient(ellipse,rgba(58,155,220,0.06) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

.page{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:3rem 1.5rem 4rem}

/* header */
.header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--border);
  margin-bottom:3rem;
  animation:fadeDown .6s ease both;
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

.logo{display:flex;align-items:center;gap:1rem}
.logo-mark{
  width:44px;height:44px;
  border:1.5px solid var(--accent);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:500;font-size:0.75rem;
  color:var(--accent);letter-spacing:0.05em;
  background:var(--accent-glow);
  flex-shrink:0;
}
.logo-text h1{font-size:1.05rem;font-weight:500;letter-spacing:0.02em;line-height:1.3}
.logo-text p{font-size:0.78rem;color:var(--text-secondary);margin-top:2px;font-weight:300}

.status{
  display:flex;align-items:center;gap:0.5rem;
  font-family:var(--mono);font-size:0.75rem;
  color:var(--accent-green);
  padding:0.4rem 0.85rem;
  border:1px solid rgba(61,187,120,0.25);
  border-radius:6px;
  background:rgba(61,187,120,0.06);
  margin-top:4px;
  flex-shrink:0;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent-green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* intro section */
.intro{
  margin-bottom:3rem;
  animation:fadeUp .6s ease .1s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.intro h2{
  font-size:1.6rem;font-weight:700;line-height:1.4;
  margin-bottom:0.8rem;
  letter-spacing:-0.01em;
}
.intro h2 span{color:var(--accent)}
.intro p{
  font-size:0.92rem;line-height:1.8;color:var(--text-secondary);
  max-width:640px;font-weight:300;
}

/* resource grid */
.section-label{
  font-family:var(--mono);font-size:0.7rem;
  color:var(--text-tertiary);text-transform:uppercase;
  letter-spacing:0.15em;
  margin-bottom:1rem;
}

.res-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:3rem;
}
.res-card{
  background:var(--bg-card);
  padding:1.4rem 1.2rem;
  transition:background .2s;
  cursor:default;
  animation:fadeUp .5s ease both;
}
.res-card:nth-child(1){animation-delay:.15s}
.res-card:nth-child(2){animation-delay:.2s}
.res-card:nth-child(3){animation-delay:.25s}
.res-card:nth-child(4){animation-delay:.3s}
.res-card:nth-child(5){animation-delay:.35s}
.res-card:nth-child(6){animation-delay:.4s}
.res-card:nth-child(7){animation-delay:.45s}
.res-card:nth-child(8){animation-delay:.5s}
.res-card:hover{background:var(--bg-card-hover)}

.res-icon{
  font-size:1.5rem;margin-bottom:0.6rem;
  display:block;line-height:1;
}
.res-name{
  font-family:var(--mono);font-size:0.82rem;font-weight:500;
  color:var(--text-primary);margin-bottom:0.3rem;
}
.res-path{
  font-family:var(--mono);font-size:0.68rem;
  color:var(--text-tertiary);margin-bottom:0.5rem;
}
.res-desc{font-size:0.78rem;color:var(--text-secondary);line-height:1.5;font-weight:300}

/* URL pattern section */
.url-box{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.6rem 1.5rem;
  margin-bottom:3rem;
  animation:fadeUp .5s ease .55s both;
}
.url-box h3{
  font-size:0.88rem;font-weight:500;margin-bottom:1rem;
  display:flex;align-items:center;gap:0.5rem;
}
.url-box h3::before{
  content:'';width:3px;height:14px;
  background:var(--accent);border-radius:2px;
  flex-shrink:0;
}
.url-example{
  font-family:var(--mono);font-size:0.78rem;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1rem 1.2rem;
  color:var(--text-secondary);
  line-height:1.9;
  overflow-x:auto;
}
.url-example .hl{color:var(--accent)}
.url-example .hw{color:var(--accent-warm)}

/* info bar */
.info-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:3rem;
  animation:fadeUp .5s ease .6s both;
}
.info-item{
  background:var(--bg-card);
  padding:1.2rem 1.3rem;
}
.info-label{
  font-family:var(--mono);font-size:0.65rem;
  color:var(--text-tertiary);text-transform:uppercase;
  letter-spacing:0.12em;margin-bottom:0.4rem;
}
.info-value{
  font-size:0.88rem;font-weight:500;color:var(--text-primary);
}
.info-value.accent{color:var(--accent)}
.info-value.warm{color:var(--accent-warm)}

/* jump manifest */
.jump-panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.6rem 1.5rem;
  margin-bottom:3rem;
  animation:fadeUp .5s ease .63s both;
}
.jump-panel h3{
  font-size:0.88rem;
  font-weight:500;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.jump-panel h3::before{
  content:'';
  width:3px;
  height:14px;
  background:var(--accent);
  border-radius:2px;
  flex-shrink:0;
}
.jump-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.jump-layer{
  background:rgba(0,0,0,0.18);
  padding:1.15rem 1.2rem;
  min-height:110px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.jump-layer-label{
  font-family:var(--mono);
  font-size:0.66rem;
  color:var(--text-tertiary);
  letter-spacing:0.12em;
  text-transform:uppercase;
  line-height:1.6;
}
.jump-layer-count{
  font-family:var(--mono);
  font-size:1.15rem;
  font-weight:500;
  color:var(--accent);
  line-height:1.3;
}
.jump-layer-note{
  font-size:0.74rem;
  color:var(--text-secondary);
  line-height:1.6;
  margin-top:0.5rem;
}

/* ecosystem */
.eco{
  border-top:1px solid var(--border);
  padding-top:2.5rem;
  animation:fadeUp .5s ease .65s both;
}
.eco h3{font-size:0.92rem;font-weight:500;margin-bottom:1rem}
.eco-links{display:flex;flex-wrap:wrap;gap:0.6rem}
.eco-link{
  font-family:var(--mono);font-size:0.75rem;
  padding:0.45rem 0.9rem;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-secondary);
  text-decoration:none;
  transition:all .2s;
  background:transparent;
}
.eco-link:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-glow);
}
.eco-link.current{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-glow);
}

/* footer */
.footer{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--border);
  text-align:center;
  animation:fadeUp .5s ease .7s both;
}
.footer p{
  font-size:0.75rem;color:var(--text-tertiary);
  line-height:1.7;font-weight:300;
}
.footer .brand-name{color:var(--text-secondary)}

/* responsive */
@media(max-width:640px){
  .page{padding:2rem 1rem 3rem}
  .header{flex-direction:column;gap:1rem}
  .intro h2{font-size:1.3rem}
  .res-grid{grid-template-columns:1fr 1fr}
  .info-bar{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .res-grid{grid-template-columns:1fr}
}