:root{
  --bg:#f3f6fb;
  --panel:#101827;
  --panel2:#172033;
  --card:#ffffff;
  --muted:#475569;
  --text:#0f172a;
  --line:#cbd5e1;
  --soft:#e2e8f0;
  --accent:#1d4ed8;
  --accent2:#15803d;
  --warn:#b45309;
  --danger:#b91c1c;
  --code:#080f1f;
  --codeText:#f8fafc;
  --link:#1d4ed8;
  --inlineCodeBg:#eef2ff;
  --inlineCodeText:#172554;
  --tableStripe:#f8fafc;
  --noteBg:#fffbeb;
  --successBg:#ecfdf5;
  --shadow:0 1px 3px rgba(15,23,42,.08);
}

:root[data-theme="dark"]{
  --bg:#0b1120;
  --panel:#020617;
  --panel2:#0f172a;
  --card:#111827;
  --muted:#cbd5e1;
  --text:#e5e7eb;
  --line:#334155;
  --soft:#334155;
  --accent:#60a5fa;
  --accent2:#4ade80;
  --warn:#fbbf24;
  --danger:#f87171;
  --code:#020617;
  --codeText:#e5e7eb;
  --link:#93c5fd;
  --inlineCodeBg:#1e293b;
  --inlineCodeText:#bfdbfe;
  --tableStripe:#0f172a;
  --noteBg:#2a2111;
  --successBg:#10251c;
  --shadow:0 1px 4px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:132px}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
}

.top{
  background:linear-gradient(135deg,#0f172a,#1e3a8a);
  color:#fff;
  padding:18px clamp(14px,3vw,28px);
}
:root[data-theme="dark"] .top{
  background:linear-gradient(135deg,#020617,#172554);
}
.top h1{
  margin:0;
  font-size:clamp(22px,3vw,30px);
  line-height:1.2;
  letter-spacing:0;
}
.top p{
  margin:.35rem 0 0;
  color:#dbeafe;
  max-width:78ch;
}

.toolbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  padding:8px clamp(10px,2vw,20px);
  background:var(--panel);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 10px rgba(15,23,42,.18);
}
.toolbar-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.menu-toggle,
.theme-toggle{
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:var(--panel2);
  color:#e5e7eb;
  padding:8px 11px;
  font:inherit;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
}
.menu-toggle:hover,
.theme-toggle:hover{
  background:#1d4ed8;
}
.menu-toggle{
  display:none;
}

.layout{
  display:block;
}

.nav{
  position:sticky;
  top:49px;
  z-index:25;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  background:var(--panel);
  color:#e5e7eb;
  padding:9px clamp(10px,2vw,20px);
  border-bottom:1px solid rgba(255,255,255,.12);
  -webkit-overflow-scrolling:touch;
}
.nav a{
  flex:0 0 auto;
  display:block;
  color:#e5e7eb;
  text-decoration:none;
  padding:8px 11px;
  border-radius:8px;
  line-height:1.2;
  white-space:nowrap;
}
.nav a:hover,
.nav a.active{
  background:#1d4ed8;
  color:#fff;
}
.nav .small,
.nav p{
  flex:0 0 auto;
  margin:0;
}
.nav .small{
  color:#bfdbfe;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  padding:0 4px;
}
.nav p{
  display:none;
}

.main{
  width:min(100%,1320px);
  margin:0 auto;
  padding:clamp(14px,2.5vw,28px);
}

.search{
  position:sticky;
  top:101px;
  z-index:10;
  width:100%;
  padding:13px 14px;
  border-radius:10px;
  border:1px solid #94a3b8;
  font-size:16px;
  margin:0 0 18px;
  background:var(--card);
  color:var(--text);
  box-shadow:var(--shadow);
}
.search:focus{
  outline:3px solid #bfdbfe;
  border-color:var(--accent);
}

.card{
  background:var(--card);
  border:1px solid var(--soft);
  border-radius:10px;
  padding:clamp(14px,2vw,22px);
  margin:0 0 22px;
  box-shadow:var(--shadow);
  overflow-x:auto;
}

h2{
  margin:0 0 14px;
  border-bottom:2px solid var(--soft);
  padding-bottom:9px;
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.25;
}
h3{
  margin:20px 0 8px;
  font-size:clamp(18px,1.6vw,21px);
  line-height:1.3;
}
p,ul,ol{max-width:90ch}
li{margin:.25rem 0}
a{color:var(--link)}
a:hover{text-decoration-thickness:2px}

.grid,
.two{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:16px;
  align-items:start;
}
.grid:has(pre),
.two:has(pre){
  grid-template-columns:1fr;
}

.tag{
  display:inline-block;
  background:#dbeafe;
  color:#1e40af;
  border-radius:999px;
  padding:2px 9px;
  font-size:12px;
  margin:2px;
}
.ok{color:var(--accent2);font-weight:700}
.warn{color:var(--warn);font-weight:700}
.danger{color:var(--danger);font-weight:700}

pre{
  width:100%;
  max-width:100%;
  background:var(--code);
  color:var(--codeText);
  padding:15px;
  border-radius:9px;
  overflow-x:auto;
  white-space:pre;
  line-height:1.5;
  font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  -webkit-overflow-scrolling:touch;
}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95em;
}
p code,li code,td code{
  background:var(--inlineCodeBg);
  color:var(--inlineCodeText);
  padding:1px 5px;
  border-radius:5px;
}
pre code{
  background:transparent;
  color:inherit;
  padding:0;
  border-radius:0;
}

table{
  display:block;
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  margin:10px 0 16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
tbody{
  display:table;
  width:100%;
  min-width:min(720px,100%);
}
th,td{
  border:1px solid var(--line);
  padding:9px 10px;
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere;
}
th{
  background:var(--soft);
  color:var(--text);
}
tr:nth-child(even) td{
  background:var(--tableStripe);
}

.kbd{
  background:#e5e7eb;
  border:1px solid #cbd5e1;
  color:#111827;
  border-radius:5px;
  padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
}
.toc{
  columns:2;
  column-gap:34px;
}
.toc ul{
  margin-top:8px;
}
.toc li{
  break-inside:avoid;
  margin:.2rem 0;
}
.note,
.success{
  padding:11px 13px;
  border-radius:8px;
  max-width:100%;
}
.note{
  background:var(--noteBg);
  border-left:5px solid #f59e0b;
}
.success{
  background:var(--successBg);
  border-left:5px solid #10b981;
}

.portal-footer{
  margin:8px auto 0;
  padding:18px clamp(14px,2.5vw,28px) 28px;
  width:min(100%,1320px);
  color:var(--muted);
  border-top:1px solid var(--soft);
}
.portal-footer a{
  margin-right:12px;
}

.keyword-list a{
  display:block;
  padding:10px 12px;
  border:1px solid var(--soft);
  border-radius:8px;
  text-decoration:none;
  background:var(--card);
}
.keyword-list a:hover{
  border-color:var(--accent);
}
.hidden{
  display:none!important;
}

@media(min-width:761px){
  .nav{
    justify-content:flex-start;
  }
}

@media(max-width:760px){
  body{
    font-size:16px;
  }
  [id]{
    scroll-margin-top:94px;
  }
  .top{
    padding:14px;
  }
  .menu-toggle{
    display:inline-block;
  }
  .toolbar{
    top:0;
  }
  .nav{
    position:sticky;
    top:49px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    padding:8px 10px 10px;
    overflow-x:visible;
  }
  body.nav-open .nav{
    display:flex;
  }
  .nav .small{
    display:none;
  }
  .nav a{
    width:100%;
    padding:10px 11px;
    font-size:15px;
  }
  .main{
    padding:12px;
  }
  .search{
    top:49px;
    margin-bottom:14px;
  }
  body.nav-open .search{
    position:static;
  }
  .card{
    border-radius:8px;
    margin-bottom:16px;
  }
  .toc{
    columns:1;
  }
  pre{
    font-size:14px;
    padding:12px;
  }
  tbody{
    min-width:640px;
  }
}

@media(max-width:420px){
  .top p{
    display:none;
  }
  .theme-toggle,
  .menu-toggle{
    font-size:14px;
    padding:8px 9px;
  }
  tbody{
    min-width:560px;
  }
}