:root {
  --bg: #f5f7fb;
  --ink: #172033;
  --muted: #61708a;
  --card: #ffffff;
  --line: #dfe6f3;
  --accent: #2563eb;
  --accent-2: #0f766e;
  --warn: #fff7ed;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: center;
  padding: 48px clamp(20px, 5vw, 72px);
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: white;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  opacity: .85;
}

h1 {
  margin: 8px 0;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: .95;
}

.lede {
  max-width: 760px;
  font-size: 1.2rem;
  opacity: .9;
}

.progress-card, .panel, .week-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

.progress-card {
  padding: 22px;
  color: var(--ink);
}

.bar {
  height: 12px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0;
}

#progressBar {
  height: 100%;
  width: 0%;
  background: var(--accent-2);
  transition: width .25s ease;
}

button {
  font: inherit;
}

.ghost, .primary, .tab {
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.ghost { background: white; }

.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 800;
}

.tabs {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tab {
  background: white;
  color: var(--ink);
  font-weight: 800;
}

.tab.active {
  background: var(--ink);
  color: white;
}

main {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 60px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.panel {
  padding: 24px;
  margin-bottom: 20px;
}

.notice {
  margin-top: 16px;
  background: var(--warn);
  border: 1px solid #fed7aa;
  padding: 14px 16px;
  border-radius: 14px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li,
.lesson {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
}

.benchmarks li {
  margin-bottom: 10px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-2);
  flex: 0 0 auto;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin: 30px 0 14px;
}

.week-card {
  margin-bottom: 14px;
  overflow: hidden;
}

.week-head {
  width: 100%;
  border: 0;
  background: white;
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.week-pill {
  background: #dbeafe;
  color: #1e40af;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  white-space: nowrap;
}

.week-title {
  font-size: 1.1rem;
  font-weight: 800;
  flex: 1;
}

.chev { font-size: 1.5rem; }

.week-body {
  display: none;
  padding: 0 20px 20px;
  border-top: 1px solid var(--line);
}

.week-card.open .week-body { display: block; }

.focus { color: var(--muted); }

.benchmark {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 12px;
  border-radius: 14px;
  font-weight: 700;
}

.tasks {
  font-weight: 700;
  color: var(--accent-2);
}

.lesson strong { display: block; }

.lesson small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.scaffold-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#scaffoldText {
  width: 100%;
  min-height: 70vh;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.45;
  resize: vertical;
  background: #fbfdff;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.prompt-grid div {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fbfdff;
}

@media (max-width: 850px) {
  .hero, .grid, .prompt-grid {
    grid-template-columns: 1fr;
  }
  .section-title, .scaffold-head {
    display: block;
  }
  .primary {
    margin-top: 12px;
  }
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.pin-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0;
}

.pin-row input {
  min-width: 240px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
}

.teacher-week {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  margin: 18px 0;
  background: #fbfdff;
}

.teacher-week h3 {
  margin-top: 0;
  color: #0f172a;
}

.answer-list li {
  margin-bottom: 12px;
}

.teacher-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.teacher-table th,
.teacher-table td {
  border: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.teacher-table th {
  background: #eff6ff;
}

/* Learning Spaces */
.eyebrow.dark{color:var(--accent-2);opacity:1}
.learning-hero,.learning-card-head,.video-box,.save-row{display:flex;justify-content:space-between;gap:18px;align-items:center}
.evidence-actions,.coach-buttons{display:flex;gap:10px;flex-wrap:wrap}
.learning-spaces{width:min(1180px,calc(100% - 32px));margin:22px auto 60px}
.learning-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;margin:22px 0;box-shadow:0 16px 40px rgba(15,23,42,.06)}
.learning-card-head h2{margin:8px 0}
.status-chip{white-space:nowrap;background:#ecfdf5;color:#065f46;padding:8px 12px;border-radius:999px;font-weight:800}
.learning-flow{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.learning-flow span{font-size:.76rem;font-weight:900;letter-spacing:.04em;background:#eff6ff;padding:7px 10px;border-radius:999px}
.video-box,.ai-coach,.evidence-editor{border:1px solid var(--line);border-radius:18px;padding:18px;margin:18px 0;background:#fbfdff}
.link-btn{text-decoration:none;display:inline-block;white-space:nowrap}
.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}
.question-block{display:block;margin:12px 0}
.question-block textarea,.evidence-editor textarea,.coach-output{width:100%;min-height:82px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit;resize:vertical;background:white}
.main-evidence{min-height:180px!important}
.coach-buttons button{border:1px solid var(--line);background:white;padding:10px 13px;border-radius:999px;cursor:pointer;font-weight:700}
.upload-label{display:flex;flex-direction:column;gap:7px;margin:16px 0;padding:14px;border:1px dashed var(--line);border-radius:14px}
.image-preview img{max-width:100%;max-height:380px;border-radius:14px;border:1px solid var(--line);margin:10px 0}
.save-row{margin-top:16px}
@media(max-width:850px){.learning-hero,.learning-card-head,.video-box,.save-row{align-items:stretch;flex-direction:column}.two-col{grid-template-columns:1fr}}


/* Mac Fusion installation tutorial */
.fusion-install{max-width:1050px}
.fusion-install .lead{font-size:1.08rem;line-height:1.7}
.install-step{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.step-number{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#eff6ff;font-weight:900;font-size:1.15rem}
.install-step h3{margin:2px 0 8px}
.install-step p,.install-step li{line-height:1.65}
.install-check{display:block;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfdff;font-weight:700}
.install-check input{margin-right:9px}
.warning-box{margin:12px 0;padding:12px 14px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa}
.fusion-progress-card{margin-top:24px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fbfdff}
.fusion-progress{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:12px 0}
.fusion-progress span{display:block;height:100%;width:0;background:currentColor;border-radius:999px;transition:width .25s ease}
.troubleshooting{margin-top:20px;border:1px solid var(--line);border-radius:14px;padding:14px}
.troubleshooting summary{font-weight:900;cursor:pointer}
@media(max-width:650px){.install-step{grid-template-columns:1fr}.step-number{width:40px;height:40px}}

/* Fusion 360 tutorial video library */
.fusion-tutorial-page{max-width:1150px}.tutorial-toolbar{display:flex;justify-content:flex-end;margin:18px 0}.tutorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.tutorial-card{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fbfdff;display:flex;flex-direction:column;align-items:flex-start;min-height:220px}.tutorial-card h3{margin:8px 0}.tutorial-card p{line-height:1.6;flex-grow:1}.tutorial-number{display:inline-block;padding:7px 10px;border-radius:999px;background:#eff6ff;font-size:.78rem;font-weight:900}.video-note{padding:10px 12px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;font-size:.9rem}.tutorial-workflow{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fbfdff}@media(max-width:760px){.tutorial-grid{grid-template-columns:1fr}}

/* Detailed Arduino and music learning tabs */
.learning-detail-page{max-width:1120px}.learning-detail-page .lead{font-size:1.06rem;line-height:1.7}.lesson-block{margin:18px 0;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fbfdff}.lesson-block h3{margin-top:0}.lesson-block li,.lesson-block p{line-height:1.65}.code-sample{overflow:auto;padding:16px;border-radius:14px;background:#111827;color:#f9fafb;font-size:.9rem;line-height:1.55}.ai-tab-box{background:#f5f3ff;border-color:#ddd6fe}.evidence-box{background:#ecfdf5;border-color:#a7f3d0}.system-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:15px 0}.system-chain span{padding:9px 12px;border-radius:999px;background:#eff6ff;font-weight:800}.student-test-table{width:100%;border-collapse:collapse;margin-top:12px}.student-test-table th,.student-test-table td{border:1px solid var(--line);padding:10px;text-align:left}.student-test-table td{height:44px}

/* EDU Apps Plus */
.eduappsplus-page{max-width:1100px}.eduappsplus-page .lead{font-size:1.08rem;line-height:1.7}
.edu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0}
.edu-card{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fbfdff}.edu-card h3{margin-top:0}.edu-card p,.edu-card li{line-height:1.65}
.edu-contact-card{display:flex;justify-content:space-between;gap:22px;align-items:center;margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:#f8fafc}
.edu-links{display:flex;gap:10px;flex-wrap:wrap}.edu-note{padding:16px 18px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe;line-height:1.6}
.site-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:22px max(24px,calc((100% - 1180px)/2));background:#172033;color:white;margin-top:40px}
.site-footer div:first-child{display:flex;flex-direction:column;gap:4px}.site-footer span{opacity:.75;font-size:.9rem}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{color:white;text-decoration:none}.footer-links a:hover{text-decoration:underline}
@media(max-width:780px){.edu-grid{grid-template-columns:1fr}.edu-contact-card,.site-footer{flex-direction:column;align-items:flex-start}}