:root{
  --bg:#0b1020;
  --card:#111a33;
  --text:#e8ecff;
  --muted:#b7c0ff;
  --line:rgba(232,236,255,.12);
  --accent:#7aa2ff;
  --accent2:#57e6c3;
}
*{box-sizing:border-box}
body{margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans CJK TC","Noto Sans",sans-serif; background:var(--bg); color:var(--text)}
a{color:inherit}
.top{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(11,16,32,.92); backdrop-filter:blur(10px); z-index:10}
.topLeft{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none}
.logo{width:34px;height:34px;border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#061022; font-weight:900}
.brandName{font-weight:900}
.nav{display:flex; gap:10px; flex-wrap:wrap}
.navLink{font-size:12px; color:rgba(232,236,255,.8); text-decoration:none; padding:6px 8px; border-radius:10px; border:1px solid rgba(232,236,255,.10)}
.navLink:hover{border-color: rgba(87,230,195,.45); color: rgba(232,236,255,.95)}
.lang{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.lang a{font-size:12px; color:rgba(232,236,255,.72); text-decoration:none; padding:6px 8px; border-radius:10px; border:1px solid rgba(232,236,255,.12)}
.lang a:hover{border-color: rgba(122,162,255,.5); color: rgba(232,236,255,.95)}
.wrap{max-width:1100px; margin:0 auto; padding:18px}
.hero{padding:10px 0 6px}
.hero h1{margin:8px 0 8px; font-size:34px; letter-spacing:-.02em}
.sub{margin:0; color:rgba(232,236,255,.75); line-height:1.6}
.cta{margin-top:14px}
.btn{display:inline-block; padding:10px 14px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#061022; text-decoration:none; font-weight:900}
.btn.ghost{background:transparent; color:rgba(232,236,255,.92); border:1px solid rgba(232,236,255,.18)}
.btn.ghost:hover{border-color: rgba(122,162,255,.55)}
.quick{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.chip{font-size:12px; color:rgba(232,236,255,.72); border:1px solid rgba(232,236,255,.14); padding:4px 8px; border-radius:999px}
.searchRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.searchInput{flex:1; min-width:240px; padding:10px 12px; border-radius:12px; border:1px solid rgba(232,236,255,.18); background:rgba(11,16,32,.6); color:var(--text)}
.searchSelect{padding:10px 12px; border-radius:12px; border:1px solid rgba(232,236,255,.18); background:rgba(11,16,32,.6); color:var(--text)}
.hits{display:grid; gap:10px; margin-top:12px}
.hit{display:block; text-decoration:none; padding:12px; border:1px solid rgba(232,236,255,.12); border-radius:16px; background:rgba(11,16,32,.35)}
.hit:hover{border-color: rgba(87,230,195,.35)}
.hitTitle{font-weight:900; margin-bottom:4px}
.hitDesc{color:rgba(232,236,255,.72); line-height:1.5}
.grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:14px}
.card{display:block; text-decoration:none; background:rgba(17,26,51,.86); border:1px solid var(--line); border-radius:16px; padding:14px}
.card h2{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:rgba(232,236,255,.75); line-height:1.5}
.card .go{display:inline-block; margin-top:10px; color:var(--accent2); font-weight:900}
.note{margin-top:14px; padding:12px 14px; border:1px dashed rgba(232,236,255,.16); border-radius:16px; color:rgba(232,236,255,.78)}
.note h3{margin:0 0 8px; font-size:14px}
.note a{color:var(--accent2)}
.muted{color:rgba(232,236,255,.65)}
.section{margin-top:18px}
.sectionHead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.sectionHead h2{margin:0; font-size:16px}
.link{font-size:12px; color:rgba(232,236,255,.78); text-decoration:none; padding:6px 10px; border-radius:999px; border:1px solid rgba(232,236,255,.12)}
.link:hover{border-color: rgba(87,230,195,.35); color: rgba(232,236,255,.95)}

.steps{margin:0; padding-left:18px; color:rgba(232,236,255,.78); line-height:1.6}
.steps li{margin:6px 0}
.related{margin:0; padding-left:18px; color:rgba(232,236,255,.78)}
.related li{margin:6px 0}
.landingScenarios{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.scenarioCard{
  border:1px solid rgba(232,236,255,.12);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(11,16,32,.34);
}
.scenarioCard h4{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.01em;
}
.scenarioCard p{
  margin:6px 0;
  color:rgba(232,236,255,.78);
  line-height:1.55;
}
.exampleGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.exampleBox{
  border:1px solid rgba(232,236,255,.12);
  border-radius:12px;
  background:rgba(11,16,32,.34);
  overflow:hidden;
}
.exampleLabel{
  font-size:12px;
  font-weight:700;
  color:rgba(232,236,255,.82);
  padding:8px 10px;
  border-bottom:1px solid rgba(232,236,255,.1);
  background:rgba(122,162,255,.1);
}
.exampleBox pre{
  margin:0;
  padding:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  line-height:1.45;
  color:rgba(232,236,255,.92);
  white-space:pre-wrap;
}

details{margin-top:10px; border:1px solid rgba(232,236,255,.10); border-radius:14px; padding:10px 12px; background:rgba(11,16,32,.28)}
summary{cursor:pointer; font-weight:900; color:rgba(232,236,255,.92)}
details p{margin:8px 0 0; color:rgba(232,236,255,.72); line-height:1.6}

.footer{max-width:1100px; margin:0 auto; padding:24px 18px; color:rgba(232,236,255,.55); font-size:12px; border-top:1px solid rgba(232,236,255,.08)}
.footerTop{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.footer .meta{margin-top:6px}
.footerLinks{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.footerLinks a{color:rgba(232,236,255,.68); text-decoration:none; padding:6px 10px; border-radius:999px; border:1px solid rgba(232,236,255,.10)}
.footerLinks a:hover{border-color: rgba(122,162,255,.45); color: rgba(232,236,255,.95)}

@media (max-width: 900px){.grid{grid-template-columns:1fr}}
@media (max-width: 900px){
  .landingScenarios,
  .exampleGrid{
    grid-template-columns:1fr;
  }
}

/* Language dropdown (replaces long pill list) */
.lang{position:relative}
.langDD{position:relative}
.langDD summary{list-style:none}
.langDD summary::-webkit-details-marker{display:none}
.langBtn{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:rgba(232,236,255,.85);
  padding:6px 10px; border-radius:10px;
  border:1px solid rgba(232,236,255,.12);
  cursor:pointer; user-select:none;
  background: rgba(11,16,32,.35);
}
.langBtn:hover{border-color: rgba(122,162,255,.55); color: rgba(232,236,255,.98)}
.langIcon{opacity:.9}
.langMenu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width: 180px;
  max-height: 60vh;
  overflow:auto;
  background: rgba(11,16,32,.95);
  border:1px solid rgba(232,236,255,.14);
  border-radius:14px;
  padding:8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.langDD:not([open]) .langMenu{display:none}
.langItem{
  display:block;
  font-size:12px;
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  color: rgba(232,236,255,.78);
  border: 1px solid transparent;
}
.langItem:hover{border-color: rgba(87,230,195,.35); color: rgba(232,236,255,.98)}
.langItem.active{background: rgba(122,162,255,.18); color: rgba(232,236,255,.98)}

/* On small screens keep header tidy */
@media (max-width: 720px){
  .top{gap:10px}
  .topLeft{gap:10px}
  .nav{display:none}
}

.topRight{display:flex; gap:10px; align-items:center}
.miniBtn{
  font-size:12px;
  color:rgba(232,236,255,.85);
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(232,236,255,.12);
  background: rgba(11,16,32,.35);
  cursor:pointer;
}
.miniBtn:hover{border-color: rgba(87,230,195,.45); color: rgba(232,236,255,.98)}

/* Focus-visible accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Toast notification */
.toast{
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:9999;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(17,26,51,.92);
  border:1px solid rgba(232,236,255,.14);
  color:rgba(232,236,255,.92);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}