:root {
  --navy:#102a43;
  --blue:#2563eb;
  --sky:#e8f1ff;
  --mint:#e7fff5;
  --yellow:#fff7d6;
  --pink:#ffeaf4;
  --purple:#f3edff;
  --orange:#fff1e6;
  --green:#eafaf1;
  --red:#fff1f2;
  --text:#1f2937;
  --muted:#64748b;
  --border:#d9e2ec;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#f8fbff;
  line-height:1.65;
}
a{color:var(--blue)}
.site-header{
  background:linear-gradient(135deg,#102a43,#1d4ed8);
  color:white;
  padding:34px 20px;
}
.header-inner{max-width:1160px;margin:0 auto}
.site-header h1{margin:0;font-size:2.35rem;line-height:1.15}
.site-header p{margin:10px 0 0;color:#e0edff;max-width:850px}
.top-nav{background:#0b1f33;padding:10px 20px}
.top-nav-inner{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.top-nav a{
  color:white;
  text-decoration:none;
  font-weight:bold;
  padding:6px 9px;
  border-radius:8px;
  font-size:.9rem;
}
.top-nav a:hover{background:rgba(255,255,255,.13)}
.container{max-width:1160px;margin:0 auto;padding:30px 20px 70px}
.hero,.card,.lesson,.week-card,.project-card{
  background:white;
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  box-shadow:0 5px 18px rgba(15,23,42,.05);
}
.hero{
  background:linear-gradient(135deg,var(--sky),var(--mint));
  margin-bottom:22px;
}
.hero h2,.lesson h2{margin-top:0;font-size:2rem;line-height:1.2}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badge{
  background:white;
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 12px;
  font-size:.92rem;
  font-weight:bold;
}
.button{
  display:inline-block;
  background:var(--blue);
  color:white;
  text-decoration:none;
  padding:11px 15px;
  border-radius:10px;
  font-weight:bold;
  margin-top:8px;
}
.lesson-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.lesson-nav{
  position:sticky;
  top:15px;
  background:white;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
}
.lesson-nav h2{font-size:1.1rem;margin-top:0}
.lesson-nav a{
  display:block;
  padding:7px 0;
  text-decoration:none;
  border-bottom:1px dashed #e2e8f0;
}
.lesson h3{margin-top:30px;color:var(--navy);font-size:1.35rem}
.objective-box{
  background:var(--yellow);
  border:2px solid #f5d76e;
  border-radius:18px;
  padding:18px;
  margin:20px 0;
}
.objective-box h3{margin-top:0}
.objective-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.objective-item{
  background:white;
  border:1px solid #eadb92;
  border-radius:14px;
  padding:14px;
}
.objective-item strong{display:block;color:#7a4f01;margin-bottom:4px}
.info-box,.parent-box,.ai-box,.check-box,.challenge-box,.done-box,.explain-box,.commercial-box,.warning-box,.deliverable-box{
  border-radius:16px;
  padding:16px 18px;
  margin:18px 0;
  border:1px solid var(--border);
}
.info-box{background:var(--sky)}
.parent-box{background:var(--pink)}
.ai-box{background:var(--mint)}
.check-box{background:var(--yellow)}
.challenge-box{background:var(--purple)}
.done-box{background:var(--green)}
.explain-box{background:var(--orange)}
.commercial-box{background:#eef2ff}
.warning-box{background:var(--red)}
.deliverable-box{background:#f8fafc}
pre{
  background:#0b1220;
  color:#eef6ff;
  overflow-x:auto;
  padding:16px;
  border-radius:14px;
  font-size:.92rem;
  line-height:1.55;
}
code{font-family:Consolas,Monaco,monospace}
.steps{counter-reset:step;padding-left:0}
.steps li{
  list-style:none;
  counter-increment:step;
  background:#fbfdff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px 14px 54px;
  margin:12px 0;
  position:relative;
}
.steps li::before{
  content:counter(step);
  position:absolute;
  left:14px;
  top:14px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  font-weight:bold;
  text-align:center;
  line-height:28px;
}
table{width:100%;border-collapse:collapse;margin:16px 0;background:white}
th,td{border:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
th{background:#f1f6ff}
.footer-nav{
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.site-footer{
  background:#0b1f33;
  color:#dce9f9;
  padding:22px 20px;
  text-align:center;
}
.small{font-size:.92rem;color:var(--muted)}
.kpi{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  margin:2px;
  font-size:.88rem;
  font-weight:bold;
}
.phase{
  background:#f8fafc;
  border-left:5px solid var(--blue);
  padding:12px 14px;
  border-radius:10px;
  margin:14px 0;
}
@media(max-width:900px){
  .grid,.three-grid,.objective-grid,.lesson-layout{grid-template-columns:1fr}
  .lesson-nav{position:static}
  .site-header h1{font-size:1.9rem}
}