:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --accent:#2563eb;
  --shadow: 0 12px 28px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
}
a{color: var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width: 980px; margin: 0 auto; padding: 24px 16px 64px;}
.nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: 980px; margin: 0 auto; padding: 12px 16px;
  display:flex; gap: 12px; align-items:center; justify-content:space-between;
}
.brand{display:flex; flex-direction:column; gap:2px;}
.brand .title{font-weight:700; letter-spacing:.2px; font-size:16px; font-weight:800}
.brand .sub{font-size:12px; color: var(--muted)}
.nav-links{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.nav-links a{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.nav-links a[aria-current="page"]{
  border-color: var(--line);
  background: rgba(15,23,42,.03);
}

.card{
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  margin: 14px 0;
}
h1{font-size: 28px; margin: 16px 0 10px}
h2{font-size: 20px; margin: 18px 0 8px}
h3{font-size: 16px; margin: 16px 0 8px}
.muted{color: var(--muted)}
.small{font-size: 12px; color: var(--muted)}
.hr{height:1px;background:var(--line);margin:16px 0}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.02);
  color: var(--muted); font-size: 12px;
}
.btn{
  display:inline-block; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(37,99,235,.10);
  color: var(--text); cursor:pointer;
}
.btn:hover{background: rgba(37,99,235,.14)}
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px;}
.col-12{grid-column: span 12}
@media (min-width: 860px){ .col-7{grid-column: span 7} .col-5{grid-column: span 5} }

details.accordion{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15,23,42,.02);
  padding: 10px 12px;
  margin: 10px 0;
}
details.accordion summary{
  cursor:pointer; font-weight:700; list-style:none;
}
details.accordion summary::-webkit-details-marker{display:none}
details.accordion[open]{background: rgba(255,255,255,.04)}
.formula{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: rgba(15,23,42,.03);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  overflow-x:auto;
}
.footer{
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
}
sup a{color: var(--accent)}

.site-footer{margin-top:24px;padding:14px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted);}
.site-footer .fineprint{opacity:.9;}

.home-title{font-size:32px; font-weight:800; letter-spacing:.2px;}

:focus{outline:2px solid rgba(34,90,160,0.55); outline-offset:2px;}


/* SEO additions */
.home-title{font-size: clamp(2.1rem, 3.2vw, 3rem); font-weight: 900; letter-spacing: .2px;}