:root{
  --page-bg:#f6f8fb;
  --card:#ffffff;
  --muted:#54616a;
  --accent:#0ea5ff;
  --accent-2:#7c3aed;
  --text:#0b1220;
  --glass:rgba(11,18,32,0.04);
  --radius:12px;
  --gap:24px;
  --nav-width:280px;
  --base-font-size:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:var(--text);background:var(--page-bg);font-size:var(--base-font-size);line-height:1.65}
.site{max-width:1100px;margin:36px auto;padding:20px}
.header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
.title{font-size:20px;font-weight:700}
.layout{display:grid;grid-template-columns:var(--nav-width) 1fr;gap:var(--gap)}
@media(max-width:900px){.layout{grid-template-columns:1fr;padding:12px}}
.nav{position:sticky;top:28px;background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 8px 24px var(--glass)}
.nav{transition:width 0.25s ease, padding 0.2s ease, box-shadow 0.2s ease}
.nav-toggle{
  width:100%;
  border:1px solid rgba(11,18,32,0.08);
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  color:var(--text);
  font-weight:700;
  border-radius:10px;
  padding:12px 14px 12px 40px;
  height:48px;
  box-sizing:border-box;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 6px 14px rgba(11,18,32,0.08);
  margin-bottom:12px;
  position:relative;
}
.nav-toggle:hover{box-shadow:0 10px 24px rgba(11,18,32,0.12)}
.nav-toggle-icon{
  font-size:22px;
  position:absolute;
  left:14px;
}
.nav-toggle-text{
  font-size:15px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.nav h3{margin:0 0 10px 0;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:0.6px}
.nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.nav a{color:var(--text);text-decoration:none;padding:8px;border-radius:8px;display:flex;align-items:center;gap:10px;font-size:15px;min-width:0}
.nav-icon{font-size:18px}
.nav-label{flex:1;min-width:0;white-space:normal;overflow-wrap:break-word;word-break:break-word}
.nav a.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;font-weight:600;box-shadow:0 6px 18px rgba(14,165,255,0.12)}
.nav-collapsed .layout{grid-template-columns:90px 1fr}
.nav-collapsed .nav{width:90px;min-width:90px;padding:12px;box-shadow:0 6px 20px rgba(11,18,32,0.08)}
.nav-collapsed .nav h3,.nav-collapsed .nav .nav-label,.nav-collapsed .nav-toggle-text{display:none}
.nav-collapsed .nav-toggle{justify-content:center;padding:12px 12px;height:48px}
.nav-collapsed .nav a{justify-content:center;padding:10px}
.nav-collapsed .nav-icon{font-size:20px}
.nav-collapsed .nav-toggle-icon{
  position:static;
  font-size:22px;
  margin:0;
}
.content{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:0 12px 36px var(--glass)}
.content h1{margin-top:0;font-size:34px;letter-spacing:-0.01em}
.content h2{font-size:20px;margin-top:22px;padding-bottom:8px;border-bottom:1px solid #eef2f7;color:var(--text)}
.content h3{font-size:15px;color:var(--muted);margin-top:18px}

/* Block section containers — distinct professional cards */
.block-section{
  --block-accent:#0ea5ff;
  --block-accent-2:#7c3aed;
  position:relative;
  margin:26px 0;
  padding:20px 22px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,#ffffff,#f7faff);
  border:1px solid rgba(11,18,32,0.06);
  box-shadow:0 12px 30px rgba(11,18,32,0.06);
  overflow:hidden;
}
.block-section::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,var(--block-accent),var(--block-accent-2));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  pointer-events:none;
}
.block-section::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:100%;
  background:linear-gradient(180deg,var(--block-accent),var(--block-accent-2));
  opacity:0.9;
}
.block-section:nth-of-type(3n+1){--block-accent:#0ea5ff;--block-accent-2:#06b6d4;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);}
.block-section:nth-of-type(3n+2){--block-accent:#7c3aed;--block-accent-2:#a855f7;background:linear-gradient(135deg,#faf5ff,#f3e8ff);}
.block-section:nth-of-type(3n+0){--block-accent:#06b6d4;--block-accent-2:#0ea5ff;background:linear-gradient(135deg,#f0fdfa,#ecfeff);}

.block-section p:first-child{margin-top:0;}
.block-section p{margin:10px 0;}

.exercise-list{
  padding-left:0;
  margin-left:0;
  list-style:none;
  counter-reset: exercise calc(var(--list-start, 1) - 1);
}
.exercise-list li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-weight:700;
  font-size:17px;
  margin:10px 0 6px;
  color:var(--text);
  padding:0 0 6px 0;
  border-bottom:1px dashed rgba(11,18,32,0.08);
}
.exercise-list li::before{
  counter-increment: exercise;
  content: counter(exercise) ".";
  flex:0 0 3ch;
  text-align:left;
  color:var(--text);
}
.exercise-break-start{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(11,18,32,0.16);
  box-shadow:0 -10px 22px -18px rgba(11,18,32,0.28);
  border-radius:2px;
}
.exercise-detail{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin-left:calc(3ch + 8px);
}

.alternating-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  margin:6px 0 4px;
  border-radius:999px;
  background:linear-gradient(120deg,rgba(14,165,255,0.15),rgba(124,58,237,0.18));
  color:var(--text);
  font-weight:700;
  letter-spacing:0.01em;
  border:1px solid rgba(14,165,255,0.18);
  box-shadow:0 6px 16px rgba(11,18,32,0.08);
}
.alternating-note::before{
  content:"↔";
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:800;
  font-size:14px;
  box-shadow:0 6px 12px rgba(14,165,255,0.28);
}

/* Stronger divider between exercises */
.exercise-list li + li{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(11,18,32,0.14);
  box-shadow:0 -10px 20px -18px rgba(11,18,32,0.25);
}

.block-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px 0;
  padding:14px 16px 18px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.75));
  border:1px solid rgba(11,18,32,0.06);
  box-shadow:0 10px 24px rgba(11,18,32,0.08);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.01em;
  color:var(--text);
  position:relative;
}
.block-title::before{
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff 0 45%,var(--block-accent) 46% 100%);
  box-shadow:0 0 0 6px rgba(14,165,255,0.12);
  flex-shrink:0;
}
.block-title::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:10px;
  height:6px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,var(--block-accent) 0 22px, var(--block-accent-2) 22px 44px, transparent 44px 58px);
  opacity:0.7;
}

/* Block header separators — colored and prominent */
.block-header, .content h2.block, .content h3.block {
  display:flex;
  align-items:center;
  gap:12px;
  margin:28px 0 18px 0;
  padding:0;
}
.block-header::before, .block-header::after,
.content h2.block::before, .content h2.block::after,
.content h3.block::before, .content h3.block::after {
  content: "";
  flex:1;
  height:4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:2px;
}

.content h2.block {
  padding:14px 16px;
  border-left:8px solid var(--accent);
  font-weight:700;
  font-size:18px;
  white-space:normal;
  border-radius:4px;
}

/* Alternate colors for each h2.block */
.content h2.block:nth-of-type(3n+1) {
  border-left-color: #0ea5ff;
  background: #e0f2fe;
}
.content h2.block:nth-of-type(3n+2) {
  border-left-color: #7c3aed;
  background: #f3e8ff;
}
.content h2.block:nth-of-type(3n+0) {
  border-left-color: #06b6d4;
  background: #cffafe;
}

.content h3.block {
  padding:10px 12px;
  background:rgba(124,58,237,0.08);
  border-left:5px solid #a78bfa;
  font-weight:600;
  font-size:15px;
  white-space:nowrap;
  border-radius:3px;
}

/* Decorative subtle dividers useful for separating blocks */
hr, hr.block-divider {
  border:0;
  height:6px;
  background: linear-gradient(90deg, rgba(11,18,32,0.02), rgba(11,18,32,0.00));
  border-radius:4px;
  margin:18px 0;
}

.meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.toc{margin:12px 0;padding:12px;background:#fbfdff;border-radius:8px;border:1px solid rgba(14,165,255,0.06)}
.card-table{width:100%;border-collapse:collapse}
.card-table td,.card-table th{padding:10px;border-bottom:1px solid #eef2f7}
.footer{margin-top:28px;color:var(--muted);font-size:13px;text-align:center}

/* Normalize exercise illustrations */
.content img{
  display:block;
  width:min(520px,100%);
  max-width:100%;
  height:auto;
  margin:14px auto 10px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 28px rgba(11,18,32,0.08);
}

/* Print-friendly adjustments */
@media print{
  body{background:white;color:#000}
  .nav{display:none}
  .content{box-shadow:none;border-radius:0;padding:0}
  .site{max-width:100%;margin:0;padding:0}
  a:after{content:" (" attr(href) ")"}
}