:root {
  --accent: #0077ff;        
  --accent-600: #374151;    
  --bg: #f9fafb;            
  --muted: #374151;         
  --text: #111827;         
  --max-width: 980px;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  --container-padding: 20px;
  --transition: 200ms cubic-bezier(.2,.8,.2,1);
  --focus-outline: 3px solid rgba(0,184,148,0.25);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: white;
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  font-weight:400;
}


header{
  background: white;
  border-bottom: 1px solid rgba(15,23,42,0.04);
  position:sticky;
  top:0;
  z-index:40;
}
header > div{
  max-width: var(--max-width);
  margin:0 auto;
  padding:14px var(--container-padding);
  display:flex;
  align-items:center;
  gap:12px;
  justify-content: center;
}
header img{
  width:44px;
  height:44px;
  object-fit:contain;
  
}
header a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  letter-spacing:0.2px;
  font-size:1.05rem;
}
header a:hover{opacity:.95; transform:translateY(-1px); transition:var(--transition)}


main{
  max-width: var(--max-width);
  margin:28px auto;
  padding: 0 var(--container-padding) 56px;
}


h1{
  font-size:1.9rem;
  margin:0 0 12px;
  line-height:1.12;
  letter-spacing:-0.01em;
}
article > p:first-of-type{
  margin-top:8px;
  color:var(--muted);
}


nav[aria-label="On-page links"]{
  margin:18px 0 22px;
  background: linear-gradient(90deg, rgba(0,184,148,0.06), rgba(0,184,148,0.02));
  border:1px solid rgba(0,184,148,0.06);
  padding:12px;
  border-radius:12px;
}
nav ul{
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  list-style:none;
}
nav a{
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
  background:transparent;
  color:var(--accent-600);
  font-weight:600;
  font-size:0.95rem;
  transition:var(--transition);
}
nav a:hover,
nav a:focus{ background: rgba(0,184,148,0.06); outline: none; transform:translateY(-1px) }
nav a:focus{ box-shadow: var(--focus-outline) }


section{
  background:#ffffff;
  border:1px solid rgba(12,16,22,0.04);
  padding:18px;
  border-radius:12px;
  margin-bottom:18px;
  box-shadow: var(--shadow);
}
h2{
  margin-top:0;
  margin-bottom:8px;
  font-size:1.15rem;
  color:#07203a;
}
h3{
  margin:12px 0 8px;
  font-size:1rem;
  color:#0b2a3a;
}
strong{ color:#06202b }


ol, ul{
  margin:8px 0 12px 1.2rem;
}
li{ margin:6px 0; }


a{
  color:var(--accent);
  text-decoration: none;
}
a:hover, a:focus{ text-decoration:underline; outline:none; }


code, kbd, pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace }


footer{
  max-width:var(--max-width);
  margin:28px auto 48px;
  padding:14px var(--container-padding);
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}
footer div{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
footer a{
  color:var(--accent-600);
  font-weight:600;
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
}
footer a:hover{ background: rgba(0,184,148,0.04) }


:focus{ outline: none; box-shadow: var(--focus-outline) }


@media (max-width:820px){
  :root{ --container-padding:16px }
  header img{ width:40px; height:40px }
  h1{ font-size:1.5rem }
  nav ul{ gap:6px; }
  section{ padding:14px }
  footer{ padding:12px var(--container-padding) }
}


@media (max-width:520px){
  nav ul{ flex-direction:column; align-items:stretch }
  nav a{ display:block }
}

.center{ text-align:center }
.small{ font-size:0.95rem; color:var(--muted) }
.kicker{ text-transform:uppercase; letter-spacing:0.08em; font-size:0.85rem; color:var(--muted) }


@media print{
  header, footer, nav{ display:none }
  body{ background: #fff; color:#000 }
  section{ box-shadow:none; border:none; padding:0 }
  main{ margin:0; padding:0 }
}