:root{
  --nav-bg: #FFFFFF;
  --nav-fg: #000000;
  --nav-w: 220px;
  --accent: #2ec9cd;
  --accent-2: #bacd2e;
  --divider: #CCCCCC;
  --panel-max: 760px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, Helvetica, Arial, sans-serif;
  color: #111;
  background: #fff;
}
.layout{ min-height: 100vh; }
.sidebar{
  position: fixed;
  top: 0; left: 0;
  width: var(--nav-w);
  height: 100vh;
  background: var(--nav-bg);
  color: var(--nav-fg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brand{
  font-weight: 650; font-size: 16px; color:#FFFFFF; text-align:center;
  margin-bottom: 18px; letter-spacing: 0.2px; background-color:var(--accent-2);
  text-transform:uppercase; padding: 8px 6px;
}
.nav{ display: grid; gap: 10px; }
.nav a{
  color: var(--nav-fg);
  text-decoration: none;
  line-height: 1.2;
  padding: 10px 12px;
}
.nav a:hover{ font-weight:bold; background-color:var(--accent); color:#FFFFFF }
.nav a[aria-current="page"]{
  background: var(--accent-2);
  color: #fff;
  font-weight: 700;
}
.nav-bottom{ margin-top: auto; padding-top: 18px; }
.to-top{ display: inline-flex; align-items:center; gap:8px; color:var(--nav-fg); font-size:14px; padding:10px 0; user-select:none; }
.to-top:hover{ text-decoration: underline; text-underline-offset: 3px; }
.content{ margin-left: var(--nav-w); padding: 18px; min-width: 0; }
.page-title{ margin:0 0 10px; font-size:22px; font-weight:650; color:var(--accent); }
.divider{ height:0px; background:var(--divider); margin:10px 0 14px; }
.page-intro{ margin:0 0 30px; max-width:80ch; line-height:1.55; color:#333333; font-size:14.5px; }
@media (max-width: 720px){
  .content{ margin-left: 0 !important; }
  :root{ --panel-max: 100%; }
}