:root{
  --bg:#f5f4f1;
  --panel:#fbfaf7;
  --text:#1f1f1e;
  --muted:#65635f;
  --soft:#8b8882;
  --line:#dbd7cf;
  --line2:#e8e4dc;
  --accent:#5f7562;
  --warn:#946b36;
  --bad:#8a4f4f;
  --good:#5d735f;
  --code:#efede8;
  --focus:#2c2c2c;
  --text-title:clamp(20px,2vw,28px);
  --text-body:15px;
  --text-meta:12px;
  --weight-title:520;
  --weight-body:400;
  --line-title:1.2;
  --line-body:1.55;
}
[data-theme="dark"]{
  --bg:#1d1d1c;
  --panel:#242423;
  --text:#ededeb;
  --muted:#b9b6af;
  --soft:#9a978f;
  --line:#3a3936;
  --line2:#2e2d2a;
  --accent:#9bad9d;
  --warn:#c6a16b;
  --bad:#c28c8c;
  --good:#a4b8a6;
  --code:#2c2b28;
  --focus:#f2f2f0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Verdana, Geneva, sans-serif;
  font-size:var(--text-body);
  font-weight:var(--weight-body);
  line-height:var(--line-body);
  overflow-wrap:anywhere;
  word-break:break-word;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{max-width:100%}
strong,b{font-weight:500}
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-size:var(--text-title);
  line-height:var(--line-title);
  font-weight:var(--weight-title);
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
  word-break:break-word;
}
p,li,summary,span,small,div,article,aside,nav,a,button{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(245,244,241,.94);
  backdrop-filter:blur(8px);
}
[data-theme="dark"] .topbar{background:rgba(29,29,28,.94)}
.brand{display:flex;flex-direction:column;min-width:170px;font-weight:560;letter-spacing:.01em}
.brand small{font-weight:400;color:var(--muted);font-size:11px}
.topnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.topnav a,.theme-toggle{
  border:1px solid transparent;
  padding:7px 9px;
  border-radius:8px;
  color:var(--muted);
  font-size:12px;
  background:transparent;
}
.topnav a.active,.topnav a:hover,.theme-toggle:hover{
  border-color:var(--line2);
  background:var(--panel);
  color:var(--text);
  text-decoration:none;
}
.theme-toggle{cursor:pointer;font-family:inherit}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);max-width:1360px;margin:0 auto}
.layout-wide{max-width:1480px}
.sidebar{
  position:sticky;
  top:58px;
  align-self:start;
  height:calc(100vh - 58px);
  overflow:auto;
  border-right:1px solid var(--line);
  padding:20px 16px;
}
.side-title{
  margin:0 0 8px;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.side-title-gap{margin-top:22px}
.sidebar nav{display:flex;flex-direction:column;gap:4px}
.sidebar a{
  padding:7px 9px;
  border-radius:8px;
  color:var(--muted);
  font-size:12px;
}
.sidebar a.active,.sidebar a:hover{
  background:var(--panel);
  color:var(--text);
  text-decoration:none;
}
.mini-nav a{font-size:12px;padding:6px 9px}
.workspace{padding:26px 28px 54px;min-width:0}
.page-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
.eyebrow{
  color:var(--accent);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 8px;
}
.page-head h1{
  font-size:var(--text-title);
  line-height:var(--line-title);
  margin:0 0 10px;
  font-weight:var(--weight-title);
}
.lead{
  font-size:var(--text-body);
  line-height:var(--line-body);
  color:var(--muted);
  max-width:860px;
  margin:0;
}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.hero-card,.content-section,.card,.wide-panel,.quote-panel,.accordion-card,.stat-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.hero-card h2,.content-section h2,.section-title{
  margin:0 0 8px;
  font-size:var(--text-title);
  font-weight:var(--weight-title);
}
.hero-actions,.link-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.primary-link,.secondary-link,.text-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line2);
  padding:8px 10px;
  border-radius:9px;
  background:var(--panel);
  font-size:12px;
  line-height:1.35;
}
.primary-link{border-color:rgba(95,117,98,.28);color:var(--accent)}
.secondary-link,.text-link{color:var(--muted)}
.content-section{margin:14px 0}
.content-section p,.hero-card p,.card p,.accordion-card p,.quote-panel,.note,.mini-copy{
  color:var(--muted);
  font-size:var(--text-body);
  line-height:var(--line-body);
}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.stat-card{padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:100%}
.card h3,.stat-card h3,.icon-copy h3,.icon-copy h4{
  margin:0;
  font-size:17px;
  line-height:1.28;
  font-weight:500;
}
.card p,.stat-card p,.icon-copy p{margin:0}
.card-meta{
  font-size:var(--text-meta);
  color:var(--soft);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.clean-list{padding-left:18px;color:var(--muted);margin:0}
.clean-list li{margin:5px 0}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  border:1px solid var(--line2);
  border-radius:999px;
  padding:5px 8px;
  color:var(--muted);
  font-size:11px;
  background:var(--panel);
}
.status-good{color:var(--good)}
.status-warn{color:var(--warn)}
.status-bad{color:var(--bad)}
.search-box{display:flex;gap:10px;margin:16px 0}
.search-box input{
  width:100%;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
  font-family:inherit;
  font-size:12px;
}
.search-result{border-bottom:1px solid var(--line2);padding:10px 0}
.search-result small{color:var(--muted)}
.note{
  border-left:2px solid var(--accent);
  padding:10px 12px;
  background:var(--panel);
}
.footer{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid var(--line);
  padding:16px 20px;
  color:var(--muted);
  font-size:11px;
}
.quote-panel{font-size:var(--text-body)}
code,pre{
  background:var(--code);
  border:1px solid var(--line);
  border-radius:8px;
  padding:2px 5px;
}
.next-prev{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.next-prev a{
  border:1px solid var(--line2);
  background:var(--panel);
  padding:10px 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:12px;
}
.compact-strip,.flow-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.flow-strip a,.flow-step{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:14px;
  padding:12px;
  min-height:100%;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.flow-strip span,.flow-step .step-number{display:block;color:var(--accent);font-size:11px}
.flow-strip b,.flow-step h3{font-size:16px;line-height:1.28;margin:0;font-weight:500}
.flow-step p{margin:0}
.icon-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  padding:14px;
  min-width:0;
  min-height:100%;
}
.icon-badge{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--line2);
  display:grid;
  place-items:center;
  background:var(--panel);
  color:var(--accent);
  flex:0 0 auto;
}
.icon-badge img{width:18px;height:18px;display:block}
.hero-card .icon-badge img,.page-head .icon-badge img{width:20px;height:20px}
.icon-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.accordion-list{display:grid;gap:10px}
.accordion-card{padding:0;overflow:hidden}
.accordion-card summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  font-weight:500;
  font-size:var(--text-body);
  line-height:var(--line-body);
}
.accordion-card summary::-webkit-details-marker{display:none}
.accordion-card summary::after{content:"+";font-size:16px;color:var(--accent);flex:0 0 auto;line-height:1}
.accordion-card[open] summary::after{content:"-"}
.accordion-body{padding:0 16px 16px}
.accordion-head{display:flex;align-items:flex-start;gap:10px;min-width:0}
.accordion-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.accordion-title small{color:var(--soft);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat-value{font-size:22px;line-height:1;font-weight:520}
.comparison{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:14px;
  overflow:hidden;
}
.comparison th,.comparison td{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}
.comparison th{font-weight:520;color:var(--text);background:var(--code);font-size:12px}
.comparison td{color:var(--muted);font-size:var(--text-body)}
@media (max-width:1050px){
  .layout{display:block}
  .sidebar{position:relative;top:auto;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .workspace{padding:20px 16px 40px}
  .hero,.stats-grid{grid-template-columns:1fr}
  .card-grid,.card-grid.two,.card-grid.four{grid-template-columns:1fr 1fr}
  .topbar{position:relative;flex-wrap:wrap}
  .topnav{order:3;flex-basis:100%}
}
@media (max-width:640px){
  .card-grid,.card-grid.two,.card-grid.four,.compact-strip,.flow-strip,.stats-grid{grid-template-columns:1fr}
  .footer{display:block}
  .workspace{padding:18px 12px 36px}
}