:root {
  --ink: #14243c;
  --muted: #52657d;
  --navy: #172f50;
  --blue: #2166d1;
  --teal: #087f83;
  --bg: #f7f9fc;
  --paper: #ffffff;
  --line: #dde6ef;
  --soft: #edf3fc;
  --shadow: 0 18px 55px rgba(20, 44, 80, .07);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; }
a { color: var(--blue); }
a:hover { color: #164a9c; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid #67c9ea; outline-offset: 3px; }
.skip-link { position: absolute; z-index: 200; left: 14px; top: -100px; padding: 10px; background: #fff; }
.skip-link:focus { top: 8px; }
.container { width: min(1140px, calc(100% - 44px)); margin-inline: auto; }
.site-header { background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); }
.nav { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { color: var(--navy); font-weight: 800; letter-spacing: -.7px; font-size: 1.35rem; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; color: white; background: linear-gradient(145deg, #2360cf, #20a7a3); display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; }
.nav-links { display: flex; gap: 7px; align-items: center; }
.nav-links a { display: inline-flex; padding: 9px 12px; border-radius: 9px; text-decoration: none; font-weight: 650; color: #46617e; font-size: .93rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue); background: #ecf3ff; }
.nav-toggle { display: none; background: white; border: 1px solid var(--line); padding: 9px 12px; border-radius: 9px; color: var(--navy); }
.eyebrow { color: var(--teal); font-size: .79rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1,h2,h3,h4 { line-height: 1.15; letter-spacing: -.028em; color: var(--navy); }
h1 { font-size: clamp(2.35rem, 5vw, 4.15rem); margin: 14px 0 20px; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 8px 0 15px; }
h3 { font-size: 1.22rem; margin: 0 0 10px; }
p { margin: 0 0 14px; }
.lead { color: var(--muted); font-size: 1.11rem; line-height: 1.85; max-width: 670px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; background: var(--blue); color: #fff; border-radius: 11px; padding: 12px 20px; font-weight: 750; text-decoration: none; line-height: 1.4; transition: transform .15s, background .15s; }
.button:hover { color: #fff; background: #1751aa; transform: translateY(-1px); }
.button-secondary { background: white; border-color: #bfcee0; color: var(--navy); }
.button-secondary:hover { background: #edf3fa; color: var(--navy); }
.button-quiet { background: #e9f3ff; color: var(--blue); }
.button-quiet:hover { background: #d8eaff; color: #15479f; }
.hero { background: radial-gradient(circle at 80% 25%, #dbeaff 0, transparent 37%), linear-gradient(160deg, #f4f8ff, #f8fbff 65%, #eef9f7); padding: 105px 0 100px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 60px; }
.hero .lead { max-width: 540px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-stats { display: flex; gap: 26px; margin-top: 48px; flex-wrap: wrap; }
.stat strong { display: block; color: var(--navy); font-size: 1.5rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .8rem; }
.math-scene { position: relative; min-height: 380px; }
.math-scene::before { content: ''; width: 280px; height: 280px; border-radius: 50%; background: #b5daff; opacity: .45; position: absolute; top: 44px; left: 34px; filter: blur(35px); }
.scene-panel { position: absolute; inset: 35px 6px 30px 18px; background: rgba(255,255,255,.95); border: 1px solid #dce7f6; border-radius: 22px; box-shadow: 0 30px 75px rgba(29,70,134,.16); transform: rotate(-3deg); overflow: hidden; }
.scene-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #e8eef7; font-weight: 700; font-size: .84rem; }
.scene-dots { display: flex; gap: 6px; }
.scene-dots i { display: block; width: 8px; height: 8px; background: #b6c7db; border-radius: 50%; }
.scene-content { padding: 24px; }
.formula-line { color: var(--navy); background: #f0f6ff; padding: 11px 14px; border-radius: 10px; font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(.88rem, 2vw, 1.08rem); }
.formula-line + .formula-line { margin-top: 10px; }
.formula-highlight { color: #087f83; font-weight: 800; background: #ecf9f5; }
.scene-label { color: var(--muted); font-size: .75rem; margin: 20px 0 8px; letter-spacing: .07em; font-weight: 700; text-transform: uppercase; }
.dots-grid { display: flex; align-items: end; height: 67px; gap: 7px; }
.dots-grid span { display: block; width: 8%; border-radius: 5px 5px 0 0; background: linear-gradient(#28b0ae, #2377d2); }
.section { padding: 83px 0; }
.section-tight { padding: 55px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 32px; }
.section-heading p { color: var(--muted); max-width: 640px; }
.section-heading h2 { margin-bottom: 10px; }
.text-link { text-decoration: none; font-weight: 700; white-space: nowrap; }
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); padding: 28px; box-shadow: var(--shadow); }
.card p { color: var(--muted); }
.card .text-link { display: inline-block; margin-top: 11px; }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #e7f1ff; color: #2061c3; font-weight: 900; font-size: 1.2rem; margin-bottom: 22px; }
.feature-icon.teal { background: #ddf6f0; color: #087f83; }
.feature-icon.gold { background: #fff2d6; color: #9a640f; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.tag { color: #386286; background: #f0f5fc; padding: 4px 9px; border-radius: 6px; font-size: .76rem; font-weight: 750; }
.cta-panel { background: linear-gradient(120deg,#152e53,#164783 70%,#0c777f); border-radius: 24px; padding: 46px 52px; display: flex; gap: 35px; align-items: center; justify-content: space-between; }
.cta-panel h2, .cta-panel p { color: white; }
.cta-panel p { opacity: .84; max-width: 700px; }
.cta-panel .button { background: white; color: #164783; flex-shrink: 0; }
.cta-panel .button:hover { background: #e7f6ff; }
.page-hero { padding: 72px 0 54px; background: linear-gradient(160deg,#f1f7ff,#f6fafc); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.2rem,4.5vw,3.6rem); max-width: 850px; }
.breadcrumb { color: #72849c; font-size: .84rem; margin-bottom: 15px; }
.breadcrumb a { color: #526e92; text-decoration: none; }
.content-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 35px; padding: 58px 0 90px; align-items: start; }
.sidebar { position: sticky; top: 96px; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.sidebar strong { display: block; font-size: .82rem; color: #8090a6; letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; }
.sidebar a { display: block; text-decoration: none; padding: 9px 12px; border-radius: 8px; color: var(--muted); font-weight: 650; font-size: .9rem; }
.sidebar a:hover, .sidebar a[aria-current="location"] { color: var(--blue); background: #edf4ff; }
.article-card { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 37px; margin-bottom: 26px; box-shadow: var(--shadow); scroll-margin-top: 95px; }
.article-card h2 { font-size: 1.75rem; margin-top: 0; }
.article-card h3 { margin-top: 25px; }
.article-card p,.article-card li { color: #41556d; }
.article-card ul,.article-card ol { padding-left: 24px; }
.math-block { background: #f1f6fe; border: 1px solid #deebfb; border-radius: 12px; padding: 17px 19px; font-family: "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: #18355e; font-size: .92rem; margin: 18px 0; }
.note { background: #e9f9f4; color: #19574f; padding: 16px 18px; border-left: 4px solid #15a18d; border-radius: 8px; margin: 18px 0; }
.note strong { color: #0e6255; }
.lab-stack { display: grid; gap: 30px; padding: 60px 0 85px; }
.lab-card { border: 1px solid var(--line); border-radius: 20px; background: white; padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); scroll-margin-top: 96px; }
.lab-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.lab-heading h2 { margin-top: 0; font-size: 1.75rem; }
.lab-card > p, .lab-heading p { color: var(--muted); }
.field-row { display: flex; flex-wrap: wrap; align-items: end; gap: 15px; margin: 24px 0; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 140px; max-width: 260px; }
.field label { font-size: .87rem; font-weight: 700; color: var(--navy); }
.field input, .field select { border: 1px solid #c5d3e4; border-radius: 9px; background: white; padding: 11px 12px; width: 100%; min-width: 0; color: var(--ink); }
.field input[type="range"] { padding: 0; accent-color: var(--blue); }
.result { background: #f1f6fe; border: 1px solid #dfebfb; border-radius: 13px; padding: 19px 22px; min-height: 70px; overflow-wrap: anywhere; }
.result pre { font: .94rem/1.9 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; margin: 0; color: #1b3761; }
.result strong { color: #174f98; }
.result.error { color: #a52234; background: #fff3f4; border-color: #f6d3da; }
.result.error pre { color: #9d2132; }
.result.success { background: #ecfaf5; border-color: #bee8d6; }
.field-hint { color: var(--muted); font-size: .8rem; margin-top: 10px; }
.plot-wrap { border: 1px solid #dce7f5; border-radius: 12px; padding: 10px; margin: 24px 0 15px; background: #fff; overflow-x: auto; }
.plot-wrap svg { display: block; width: 100%; height: auto; min-width: 380px; }
.plot-wrap svg text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mini-stat { padding: 14px 18px; background: #f1f7ff; border-radius: 10px; flex: 1 1 150px; }
.mini-stat span { display: block; color: var(--muted); font-size: .82rem; }
.mini-stat strong { font-size: 1.15rem; color: var(--navy); }
.practice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin: 32px 0 23px; }
.practice-controls .field { max-width: 240px; }
.practice-list { display: grid; gap: 22px; padding-bottom: 80px; }
.question-card { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: var(--shadow); }
.question-top { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 10px; }
.question-top .tag { font-size: .73rem; }
.question-card h2 { font-size: 1.25rem; margin: 12px 0 20px; }
.answers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.answer-option { cursor: pointer; display: flex; align-items: center; gap: 9px; border: 1px solid #d5e0ef; border-radius: 11px; padding: 12px 14px; font-size: .92rem; }
.answer-option:has(input:checked) { border-color: #2364c1; background: #f0f6ff; }
.answer-option input { accent-color: #2364c1; flex-shrink: 0; }
.question-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.feedback { margin-top: 16px; background: #f0f6ff; border-radius: 10px; padding: 15px 18px; color: var(--navy); }
.feedback.correct { background: #eaf8f0; color: #165e43; }
.feedback.incorrect { background: #fff4e8; color: #824d0f; }
.empty-state { text-align: center; padding: 45px 20px; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: 12px; }
.score-pill { color: #1b5799; border: 1px solid #cfe1f6; background: #ecf5ff; border-radius: 100px; padding: 8px 14px; font-weight: 750; }
.about-lead { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; padding: 65px 0; }
.about-box { padding: 28px; background: #e9f4ff; border-radius: 18px; }
.about-box h3 { font-size: 1.3rem; }
.about-box li { margin-bottom: 9px; }
.steps { counter-reset: step; display: grid; gap: 18px; }
.step { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; display: flex; gap: 18px; }
.step-number { flex: 0 0 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #e7f2ff; color: var(--blue); font-weight: 800; }
.step h3 { margin-bottom: 5px; }
.site-footer { border-top: 1px solid var(--line); background: white; padding: 35px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer-inner p { color: var(--muted); font-size: .84rem; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: #4a6481; font-size: .86rem; text-decoration: none; }
.footer-links a:hover { color: var(--blue); }
@media(max-width: 800px) {
  .hero { padding: 65px 0; }
  .hero-grid,.about-lead { grid-template-columns: 1fr; }
  .math-scene { min-height: 300px; max-width: 490px; width: 100%; }
  .scene-panel { top: 5px; bottom: 5px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .content-layout { grid-template-columns: 1fr; gap: 22px; }
  .sidebar { position: static; }
  .sidebar a { display: inline-block; }
  .cta-panel { flex-direction: column; align-items: flex-start; }
}
@media(max-width: 600px) {
  .container { width: min(100% - 32px, 1140px); }
  .nav { height: 67px; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 67px; left: 0; width: 100%; padding: 15px 18px 20px; background: white; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 13px; }
  .hero-grid { gap: 30px; }
  .hero-stats { gap: 20px; margin-top: 35px; }
  .math-scene { min-height: 305px; }
  .grid-2,.grid-3 { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .section-heading { display: block; }
  .section-heading .text-link { display: inline-block; margin-top: 13px; }
  .cta-panel { padding: 30px; }
  .page-hero { padding: 48px 0 37px; }
  .content-layout { padding: 30px 0 60px; }
  .article-card,.question-card { padding: 22px; }
  .answers { grid-template-columns: 1fr; }
  .lab-stack { padding: 30px 0 55px; }
  .field { max-width: none; }
  .field-row .button { width: 100%; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; animation: none !important; } }

/* =====================================================
   MathBridge 2.0 — guided curriculum and lesson reader
   ===================================================== */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.course-hero { padding: 72px 0 76px; background: radial-gradient(circle at 78% 18%,#e5efff 0,transparent 34%),linear-gradient(145deg,#f1f7ff,#fbfdfd); border-bottom: 1px solid var(--line); }
.course-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px,.88fr); align-items: center; gap: 74px; }
.course-hero h1 { margin: 16px 0 17px; font-size: clamp(2.7rem,5vw,4.3rem); }
.course-hero h1 em { font-style: normal; color: var(--teal); }
.course-hero .lead { max-width: 620px; }
.course-hero-actions { display: flex; gap: 12px; align-items: center; margin: 29px 0 35px; flex-wrap: wrap; }
.curriculum-meta { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 15px; border-top: 1px solid #d7e3f0; }
.curriculum-meta span { padding-right: 18px; border-right: 1px solid #d1dfed; font-size: .81rem; color: #657891; white-space: nowrap; }
.curriculum-meta span:last-child { border-right: 0; }
.curriculum-meta strong { color: var(--navy); font-size: 1.23rem; padding-right: 5px; }
.course-illustration { background: #fff; border: 1px solid #dbe5f3; border-radius: 22px; box-shadow: 0 28px 60px rgba(23,57,110,.12); padding: 23px 26px; transform: rotate(1.5deg); }
.diagram-head { border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 22px; display:flex; gap:10px; align-items:center; font-size:.68rem; letter-spacing:.13em; font-weight:800; color:#7288a0; }
.diagram-dot { display:inline-block; height:10px; width:10px; background:#4ab9ad; border-radius:50%; }
.diagram-label { color:#25847c; font-size:.68rem; letter-spacing:.12em; font-weight:800; margin:20px 0 8px; }
.diagram-equation { font-family:"SFMono-Regular",Consolas,monospace; background:#f5f8fd; padding:12px 15px; margin-bottom:8px; border-radius:8px; font-size:clamp(.78rem,1.2vw,.93rem); overflow-wrap:anywhere; }
.diagram-equation mark { background:#d4f6eb; color:#075c59; padding:3px 5px; border-radius:4px; }
.diagram-line { height:1px; background:var(--line); margin-top:20px; }
.fraction { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; line-height:1.5; }
.fraction span:first-child { border-bottom:1px solid #344d6c; }
.diagram-footer { display:flex; align-items:center; gap:15px; color:#74899f; font-size:.74rem; justify-content:center; margin-top:28px; }
.catalog-section { padding:75px 0 96px; }
.catalog-topline { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:end; gap:24px; }
.catalog-topline h2 { margin:7px 0 10px; }
.catalog-subtitle { color:var(--muted); }
.learning-progress { padding:19px 21px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.learning-progress-top { display:flex; gap:10px; align-items:center; justify-content:space-between; color:#67809a; font-size:.67rem; font-weight:800; letter-spacing:.07em; }
.learning-progress-top strong { font-size:.85rem; letter-spacing:0; color:var(--navy); }
.learning-progress-track { height:7px; margin:13px 0 6px; background:#e7edf5; border-radius:20px; overflow:hidden; }
.learning-progress-fill { height:100%; background:linear-gradient(90deg,#2b6ecf,#13a391); border-radius:20px; transition:width .2s ease; }
.learning-progress small { font-size:.72rem; color:#8b99a9; }
.catalog-toolbar { display:flex; gap:14px; align-items:center; justify-content:space-between; margin:35px 0 31px; flex-wrap:wrap; }
.catalog-search { background:#fff; border:1px solid #cddbe8; border-radius:11px; display:flex; align-items:center; gap:10px; padding:0 14px; flex:1 1 330px; min-width:0; max-width:505px; color:#7b8ba0; }
.catalog-search input { padding:12px 0; width:100%; border:0; outline:0; color:var(--ink); background:transparent; min-width:0; }
.catalog-search:focus-within { border-color:#3082cf; box-shadow:0 0 0 3px #6abff833; }
.catalog-filters { display:flex; gap:7px; flex-wrap:wrap; }
.filter-chip { padding:9px 13px; border-radius:9px; color:#506c88; background:#fff; border:1px solid #d6e1eb; font-size:.81rem; font-weight:700; }
.filter-chip.active { background:#1b528e; color:#fff; border-color:#1b528e; }
.course-section { margin-bottom:53px; scroll-margin-top:100px; }
.course-section-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:21px; }
.course-section-header h3 { font-size:1.75rem; margin:4px 0 8px; }
.course-section-header p { color:var(--muted); margin:0; }
.course-done { flex-shrink:0; background:#eaf3fd; border-radius:100px; padding:6px 13px; color:#21538b; font-size:.78rem; font-weight:750; }
.lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lesson-card { display:flex; flex-direction:column; background:#fff; border:1px solid #dde7f1; padding:22px; border-radius:15px; text-decoration:none; box-shadow:0 8px 25px rgba(23,54,87,.04); min-height:228px; transition:transform .16s,border-color .16s,box-shadow .16s; }
.lesson-card:hover { border-color:#81afd8; box-shadow:0 14px 32px rgba(23,54,87,.1); transform:translateY(-3px); }
.lesson-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lesson-subject-label { color:#1e827d; background:#e9f8f4; font-size:.66rem; padding:4px 9px; border-radius:6px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.lesson-status { font-size:.73rem; color:#8493a3; white-space:nowrap; }
.lesson-status.completed { color:#087d68; font-weight:800; }
.lesson-card h4 { font-size:1.07rem; margin:23px 0 10px; line-height:1.36; }
.lesson-card p { font-size:.82rem; color:#5d7188; margin:0 0 20px; }
.lesson-card-footer { margin-top:auto; border-top:1px solid #eff2f8; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.69rem; color:#778aa0; }
.lesson-card-footer span:last-child { color:#245fa9; font-weight:800; white-space:nowrap; }
.catalog-bottom-note { display:flex; justify-content:space-between; gap:18px; align-items:center; background:#eaf4f8; padding:24px 27px; border-radius:15px; border:1px solid #d7e8ed; }
.catalog-bottom-note strong { color:var(--navy); }
.catalog-bottom-note p { color:var(--muted); font-size:.87rem; margin:4px 0 0; max-width:720px; }
.empty-state { margin:20px 0; }
/* Lesson reader */
.lesson-banner { padding:45px 0 49px; background:linear-gradient(125deg,#edf5ff,#f6fafc); border-bottom:1px solid var(--line); }
.lesson-banner-row { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.lesson-banner h1 { max-width:790px; font-size:clamp(2rem,4vw,3.4rem); margin:9px 0 13px; }
.lesson-banner .lead { margin:0; }
.lesson-banner-symbol { display:grid; place-items:center; height:110px; width:110px; flex:0 0 110px; border-radius:25px; transform:rotate(7deg); color:#286fb1; background:#dceeff; font-weight:900; font-size:4.6rem; }
.lesson-meta { color:#708199; font-size:.8rem; font-weight:700; margin-top:15px; }
.lesson-layout { display:grid; grid-template-columns:265px minmax(0,1fr); gap:36px; padding-top:45px; padding-bottom:100px; align-items:start; }
.lesson-sidebar { position:sticky; top:98px; border:1px solid var(--line); background:#fff; border-radius:15px; padding:19px 11px 15px; max-height:calc(100vh - 112px); overflow:auto; }
.back-courses { display:block; font-size:.78rem; text-decoration:none; font-weight:700; color:#2d6daf; margin:3px 12px 19px; }
.lesson-sidebar h2 { font-size:1.04rem; margin:0 12px 13px; }
.lesson-sidebar-list { display:grid; gap:4px; }
.lesson-sidebar-list a { display:grid; grid-template-columns:25px 1fr 14px; gap:9px; color:#587087; text-decoration:none; border-radius:9px; padding:10px 11px; font-size:.79rem; font-weight:650; align-items:start; }
.lesson-sidebar-list a:hover,.lesson-sidebar-list a[aria-current="page"] { color:#1c5b9e; background:#eef5fd; }
.sidebar-lesson-number { font-size:.69rem; color:#9aabc0; }
.sidebar-check { color:#078976; font-weight:900; }
.sidebar-progress { border-top:1px solid var(--line); margin:16px 11px 0; padding:13px 0 0; font-size:.72rem; font-weight:700; color:#667d92; }
.lesson-article { min-width:0; }
.lesson-section { background:#fff; padding:34px clamp(23px,4vw,43px); border:1px solid var(--line); border-radius:16px; margin-bottom:22px; box-shadow:0 12px 36px rgba(26,57,102,.035); scroll-margin-top:100px; }
.lesson-section-heading { margin-bottom:20px; }
.lesson-label { display:block; font-size:.67rem; letter-spacing:.14em; color:#148a87; font-weight:900; margin-bottom:11px; }
.lesson-section h2 { font-size:1.47rem; margin:0 0 12px; }
.lesson-objectives ul,.lesson-content ul { padding-left:23px; }
.lesson-objectives li,.lesson-content li { color:#445c73; margin:7px 0; }
.lesson-content p { color:#3f546e; line-height:1.85; }
.lesson-content h3 { color:#1b426d; margin:24px 0 10px; font-size:1.17rem; }
.lesson-content h2 { margin:4px 0 17px; }
.lesson-content .note { font-size:.9rem; line-height:1.75; }
.lesson-callout { border-left:5px solid #e9b35e; background:#fffbf3; }
.lesson-callout p,.lesson-section > p { color:#506680; }
.checkpoint-section { border:1px solid #bad1e9; }
.checkpoint-section .lesson-section-heading > p { color:#607791; margin:0; }
.checkpoint-question { border:0; border-top:1px solid var(--line); margin:0; padding:24px 0; min-width:0; }
.checkpoint-question legend { font-weight:800; color:var(--navy); padding-top:20px; margin-bottom:10px; float:none; width:100%; }
.checkpoint-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkpoint-option { display:flex; align-items:center; gap:9px; padding:12px 13px; border-radius:9px; border:1px solid #d5e2ed; cursor:pointer; background:#fff; font-size:.84rem; line-height:1.45; }
.checkpoint-option:hover,.checkpoint-option:has(input:checked) { border-color:#5796d5; background:#f1f7ff; }
.checkpoint-option input { flex-shrink:0; accent-color:#1f6db9; }
.checkpoint-hint { margin-top:13px; font-size:.82rem; color:#6d7d92; }
.checkpoint-hint summary { cursor:pointer; color:#2672a4; font-weight:750; }
.checkpoint-hint p { margin:6px 0 0; }
.checkpoint-feedback { margin-top:13px; border-radius:8px; font-size:.82rem; padding:12px 14px; }
.checkpoint-feedback.correct { color:#075b4e; background:#e6f6ef; }
.checkpoint-feedback.incorrect { color:#7b4b1b; background:#fff2e5; }
.quiz-summary { margin-top:18px; border-radius:10px; padding:17px 20px; font-size:.91rem; font-weight:750; }
.quiz-summary.success { background:#e2f7ed; color:#0b5b46; }
.quiz-summary.review { background:#fff3e2; color:#765019; }
#quiz-retry { margin-left:10px; }
.lesson-pager { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.lesson-pager-link { padding:18px; border-radius:13px; border:1px solid #cfdfee; background:#fff; text-decoration:none; font-size:.82rem; font-weight:700; line-height:1.55; }
.lesson-pager-link.next { text-align:right; }
.not-found-lesson { padding:100px 0; }
@media (max-width:1000px) {
  .lesson-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-hero-grid { gap:28px; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); }
  .lesson-layout { grid-template-columns:230px minmax(0,1fr); gap:24px; }
}
@media (max-width:800px) {
  .course-hero-grid,.catalog-topline,.lesson-layout { grid-template-columns:1fr; }
  .course-illustration { transform:none; max-width:540px; }
  .lesson-sidebar { position:static; max-height:none; }
  .lesson-sidebar-list { display:grid; grid-template-columns:1fr 1fr; }
  .lesson-banner-symbol { display:none; }
  .catalog-toolbar { align-items:stretch; }
  .catalog-search { max-width:none; }
}
@media (max-width:600px) {
  .course-hero { padding:46px 0 53px; }
  .course-hero h1 { font-size:clamp(2.4rem,9vw,3.25rem); }
  .course-illustration { padding:17px; }
  .curriculum-meta { gap:10px; }
  .curriculum-meta span { font-size:.72rem; }
  .catalog-section { padding:46px 0 56px; }
  .catalog-filters { width:100%; }
  .filter-chip { flex:1 0 auto; }
  .lesson-grid,.checkpoint-options,.lesson-sidebar-list { grid-template-columns:1fr; }
  .course-section-header { align-items:start; }
  .course-done { margin-top:6px; }
  .catalog-bottom-note { display:block; }
  .catalog-bottom-note .text-link { display:inline-block; margin-top:14px; }
  .lesson-banner { padding:34px 0; }
  .lesson-layout { padding-top:25px; padding-bottom:50px; }
  .lesson-section { padding:24px 20px; }
  .lesson-pager { grid-template-columns:1fr; }
  .lesson-pager-link.next { text-align:left; }
  #quiz-retry { display:block; margin:12px 0 0; }
  #quiz-retry[hidden] { display:none; }
}


/* MathBridge 2.1: Math Lab + Practice */
.lab-menu { padding-top:26px; display:flex; flex-wrap:wrap; gap:9px; }
.lab-menu a { display:inline-block; border:1px solid #d6e4f3; background:#fff; border-radius:100px; color:#295b8a; text-decoration:none; font-size:.84rem; font-weight:700; padding:8px 13px; }
.lab-menu a:hover { background:#eaf3ff; }
.lab-menu + .lab-stack { padding-top:28px; }
.coefficient-table-wrap { max-width:100%; overflow-x:auto; margin-top:18px; }
.coefficient-table { width:100%; min-width:490px; text-align:right; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.87rem; }
.coefficient-table caption { text-align:left; color:#516981; font-size:.83rem; padding:0 0 10px; }
.coefficient-table td,.coefficient-table th { border-bottom:1px solid #e1eaf3; padding:10px 12px; }
.coefficient-table th { background:#eef5fc; color:#24476f; }
.coefficient-table td:first-child,.coefficient-table th:first-child { text-align:left; }
.coefficient-table tbody tr:nth-child(even) { background:#f8fbff; }
.lab-card .note { margin-top:20px; }
.practice-workspace { padding-top:35px; }
.practice-panel { border:1px solid var(--line); border-radius:18px; padding:clamp(20px,3vw,34px); background:#fff; box-shadow:var(--shadow); }
.practice-panel-heading,.practice-section-title { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; }
.practice-panel-heading h2 { font-size:1.7rem; }
.practice-controls { margin:22px 0 10px; align-items:end; }
.practice-controls .field { flex:1 1 170px; max-width:none; }
.practice-controls .button { margin-bottom:0; flex-shrink:0; }
.practice-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:26px 0 15px; }
.practice-metric { background:#f2f7fd; border:1px solid #e0eaf5; border-radius:12px; padding:15px 17px; }
.practice-metric span { display:block; color:#5e7085; font-size:.76rem; line-height:1.4; min-height:2.2em; }
.practice-metric strong { display:block; color:#18355c; font-size:1.42rem; margin-top:4px; }
.practice-progress-track { background:#e4eefa; height:10px; border-radius:100px; overflow:hidden; }
.practice-progress-track > div { height:100%; width:0; background:linear-gradient(90deg,#2678d3,#1ba69a); border-radius:100px; transition:width .25s; }
.practice-privacy { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; color:#627992; font-size:.8rem; }
.button-link { border:0; padding:2px 0; background:none; color:#2463aa; text-decoration:underline; font-size:.82rem; font-weight:650; }
.practice-section-title { margin:40px 0 22px; }
.practice-section-title h2 { margin:5px 0 0; font-size:1.65rem; }
.question-title { font-size:1.17rem; margin:12px 0 16px; }
.question-top { justify-content:flex-start; gap:8px; flex-wrap:wrap; }
.question-card { scroll-margin-top:90px; }
.question-number { color:#647993; font-weight:750; font-size:.8rem; margin-left:auto; }
.question-card .answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.question-card .answer-option { border:1px solid #dce5ef; border-radius:11px; padding:13px; background:#fff; display:flex; gap:10px; align-items:center; cursor:pointer; }
.question-card .answer-option:hover,.question-card .answer-option:has(input:checked) { background:#eef5ff; border-color:#92b7ed; }
.question-card .answer-option input { flex-shrink:0; accent-color:var(--blue); }
.question-card .answer-option.is-correct { border-color:#74c6a8; background:#e9f7f1; }
.question-card .answer-option.is-incorrect { border-color:#eab183; background:#fff3e9; }
.session-finish { margin:-40px 0 80px; padding:28px; background:linear-gradient(110deg,#e9f7f3,#ebf3ff); border-radius:16px; border:1px solid #cfe7ec; }
.session-finish strong { color:#154f65; }
.session-finish p { margin:7px 0; color:#37566d; }
@media(max-width:900px) { .practice-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 .lab-heading { display:block; }
 .lab-heading .tag { display:inline-block; margin-bottom:10px; }
 .practice-controls .field { flex-basis:100%; }
 .practice-controls .button { width:100%; }
 .practice-metrics { gap:8px; }
 .practice-metric { padding:12px; }
 .practice-metric strong { font-size:1.2rem; }
 .question-card .answers { grid-template-columns:1fr; }
 .question-card { padding:21px; }
 .practice-workspace { padding-top:20px; }
}
/* Keep wide coefficient tables and charts inside their own horizontal scrollers on phones. */
.lab-stack { grid-template-columns:minmax(0,1fr); }
.lab-card { min-width:0; }

/* MathBridge 2.2: foundation/advanced curriculum filters */
.level-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 24px;color:#4f6785;font-weight:600;font-size:.9rem}
.level-toolbar span{margin-right:5px}
.level-chip{border:1px solid #cddced;border-radius:30px;padding:9px 16px;cursor:pointer;background:white;color:#25466e;font:inherit;font-weight:700}
.level-chip.active,.level-chip:hover{background:#dceafd;border-color:#91baf1;color:#1554a4}
.level-chip:focus-visible{outline:3px solid #2678d6;outline-offset:2px}

.curriculum-disclaimer{border-left:3px solid #73acdc;padding:10px 16px;margin:10px 0 26px;background:#f5f9fe;color:#55718d;font-size:.86rem;line-height:1.6}
/* Keep long advanced lesson sidebars usable on tablets and phones. */
@media (max-width: 850px) {
  .lesson-sidebar { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
}
/* MathBridge Notebook Edition — visual only; all existing algorithms and storage retained. */
:root {--ink:#152849;--navy:#152849;--blue:#135edb;--teal:#0c8988;--bg:#f8f8f5;--paper:#fffefa;--muted:#5f6d83;--line:#e6e5e0;--soft:#edf4ff;--shadow:0 12px 40px rgba(27,43,67,.052);--radius:18px;}
html {scroll-padding-top:95px}
body {background:#f9f9f6; color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:-.01em}
.container {width:min(1250px,calc(100% - 72px))}
.site-header{background:rgba(255,255,253,.96);border-bottom:1px solid #efede9;backdrop-filter:blur(20px)}
.nav{height:72px;gap:26px}.brand{font-size:1.35rem;letter-spacing:-.055em;color:#11284b;white-space:nowrap}
.brand-mark{background:linear-gradient(145deg,#1370eb 0%,#1b66dc 43%,#10baa9 100%);border-radius:9px;width:37px;height:37px;font-family:Georgia,serif;font-size:1.55rem;box-shadow:0 4px 13px #1870ca22;letter-spacing:0}
.nav-links{gap:4px; margin-left:auto}.nav-links a{color:#1b345b;font-size:.84rem;padding:10px 13px;border-radius:8px;font-weight:650}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:#eaf3ff;color:#0759bf}
.nav-start{background:#1768e9;color:white;text-decoration:none;padding:10px 17px;border-radius:9px;font-size:.81rem;font-weight:750;white-space:nowrap}
.nav-start:hover{background:#0b4fb8;color:#fff}
.eyebrow{color:#008588;letter-spacing:.19em;font-size:.69rem;font-weight:850}
h1,h2,h3,h4 {color:#172a49;letter-spacing:-.044em;line-height:1.16}
h1{font-size:clamp(2.9rem,5vw,4.6rem)} h2{font-size:clamp(1.7rem,2.6vw,2.6rem)}
p,.lead{color:#596980}.lead{font-size:1.07rem;line-height:1.75}
.button{background:#1264df;border:1px solid #1264df;border-radius:10px;font-size:.91rem;font-weight:750;box-shadow:none;padding:13px 21px;min-height:47px}
.button:hover{background:#0f4eb6;border-color:#0f4eb6}
.button-secondary{color:#213759;background:#fff;border-color:#c9d6e9}
.button-secondary:hover{color:#123b81;background:#edf4ff;border-color:#b6cde9}
.underline-accent{position:relative;display:inline;white-space:normal}
.underline-accent:after{content:"";position:absolute;left:36%;bottom:-9px;width:60%;height:6px;background:#35d7a1;transform:rotate(-2deg);border-radius:80% 6px 80% 6px}
/* The note collage is real HTML+SVG; all math elements remain sharp at any size. */
.editorial-hero{padding:43px 0 33px;background:#faf9f6;overflow:hidden}
.editorial-hero-grid{border:1px solid #ecebe8;box-shadow:0 18px 57px rgba(35,39,41,.055);background:#fffefa;border-radius:24px;padding:64px clamp(30px,5vw,70px);min-height:490px;display:grid;grid-template-columns:minmax(0,1fr) minmax(410px,1fr);gap:20px;align-items:center;position:relative}
.editorial-hero-grid:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:24px;opacity:.28;background-image:radial-gradient(#c8c2b3 .48px,transparent .48px);background-size:7px 7px;mask-image:linear-gradient(90deg,transparent 43%,#000)}
.hero-copy{position:relative;z-index:2;min-width:0}.hero-copy h1{margin:15px 0 25px;font-size:clamp(2.8rem,4.45vw,4.35rem);line-height:1.1;letter-spacing:-.062em}
.hero-copy .lead{max-width:485px;font-size:1.035rem;margin:0}
.hero-copy .hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.note-collage{height:330px;position:relative;isolation:isolate;margin:0 5px 0 12px}
.paper-note{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 11px 20px #152a4821;color:#173351;text-align:center;border-radius:2px;padding:14px;transition:transform .25s ease}
.note-collage .paper-note:hover{transform:translateY(-4px) rotate(0deg)}
.paper-note>span:not(.tape):not(.stroke){font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:18px;line-height:1.23;font-weight:600}
.note-grid{inset:29px 114px 1px 134px;z-index:2;transform:rotate(-1.5deg);background:#fbfaf3;background-image:linear-gradient(#d9e4e3 1px,transparent 1px),linear-gradient(90deg,#d9e4e3 1px,transparent 1px);background-size:23px 23px}
.note-grid .note-center{font-family:"Comic Sans MS","Bradley Hand",cursive!important;font-size:29px!important;line-height:1.35!important;transform:rotate(-3deg)}
.note-grid .note-center strong{font-weight:850}.note-grid .stroke{width:65%;height:5px;background:#137aec;border-radius:100%;transform:rotate(-3deg);margin-top:5px}
.note-grid .tape{position:absolute;top:-15px;width:70px;height:28px;background:#54b8e8;opacity:.95;transform:rotate(-10deg)}
.note-mint{background:#a6e9cc;width:180px;height:191px;left:7%;top:0;transform:rotate(-9deg);z-index:3}
.note-yellow{background:#ffe47a;width:180px;height:175px;top:3px;right:0;transform:rotate(8deg);z-index:3}
.note-pink{background:#fac1d3;width:168px;height:172px;bottom:0;left:0;transform:rotate(7deg);z-index:4}
.note-purple{background:#d5cdfa;width:180px;height:178px;bottom:-4px;right:0;transform:rotate(-7deg);z-index:4}
.paper-note svg{width:90%;height:90px;overflow:visible;flex:0 0 auto}.paper-note svg text{fill:#152b45;font-size:18px;font-weight:600;font-family:Georgia,serif}
.paper-note.note-mint span,.paper-note.note-yellow span,.paper-note.note-pink span,.paper-note.note-purple span{font-size:15px}
.collage-scribble{position:absolute;right:-5px;bottom:-37px;color:#1c5489;font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:14px;transform:rotate(-7deg)}.collage-scribble span{color:#14a58c;font-size:24px}
.home-stats{padding:0 0 36px}.stats-inline{display:flex;flex-wrap:wrap;justify-content:space-between;background:#eff4fc;border:1px solid #e8edf6;border-radius:17px;padding:17px 29px;gap:15px}
.stats-inline>div{flex:1 1 145px;border-right:1px solid #d2dfef}.stats-inline>div:last-child{border:0}.stats-inline strong{display:block;font-size:1.35rem;letter-spacing:-.05em;line-height:1.3}.stats-inline span{display:block;font-size:.82rem;color:#556c87}
.section{padding:58px 0}.section-tight{padding:40px 0}.section-heading{margin-bottom:24px;align-items:end}.section-heading h2{margin:7px 0}.section-heading p{max-width:650px}
.home-features{padding-top:22px}.values-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.value-tile{padding:25px 23px;border-radius:17px;border:1px solid #eae8e2;background:#fffefa;min-width:0;box-shadow:0 6px 24px #25345106}
.value-icon{display:grid;place-items:center;width:56px;height:56px;font-weight:900;font-size:1.4rem;border-radius:12px;margin-bottom:19px;color:#17375c}.value-icon.purple{background:#ded8fe}.value-icon.mint{background:#bbf1df}.value-icon.yellow{background:#fff0a1}.value-icon.pink{background:#facfe1}
.value-tile strong{font-size:.99rem}.value-tile p{font-size:.86rem;line-height:1.7;margin-bottom:0}
.home-explore{padding-top:36px}
.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.preview-card{background:#fffefa;border:1px solid #e4e6e5;border-radius:13px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);padding:17px;min-height:233px;box-shadow:0 9px 23px #28364908;transition:transform .2s,border-color .2s}
.preview-card:hover{transform:translateY(-4px);border-color:#85b2e9;color:var(--ink)}
.preview-card>img{width:100%;height:118px;object-fit:cover;display:block;border-radius:7px;margin-bottom:13px}
.micro-label{display:inline-flex;align-self:flex-start;color:#166c71;background:#dff8f1;font-size:.64rem;font-weight:850;border-radius:6px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;margin-bottom:10px}
.preview-card strong{font-size:1rem;line-height:1.28}.preview-extra{font-size:.8rem;color:#60758e;display:flex;justify-content:space-between;margin-top:auto;padding-top:11px}
.pen-star{color:#1885b5;font-size:.83em}.new-cta{border-radius:17px;background:linear-gradient(120deg,#e8f7f6,#e6f4fc);border:1px solid #d5eeec;padding:30px 37px}.new-cta h2,.new-cta p{color:#173554}.new-cta h2{margin-top:8px}.new-cta .button{background:#1763d6;color:#fff}
/* Catalog and all 55 lesson illustrations */
.catalog-section{padding-top:35px}.catalog-topline{align-items:center}.catalog-topline h2{font-size:1.85rem}.learning-progress{border-radius:14px}
.catalog-toolbar{flex-direction:row-reverse;flex-wrap:wrap-reverse;margin:25px 0 12px}.catalog-filters{gap:9px}.catalog-search{max-width:410px}
.level-toolbar{margin-bottom:30px}.level-chip,.filter-chip{background:#fffefa;border-radius:25px;padding:10px 16px;border:1px solid #e0e4e8}.level-chip.active,.filter-chip.active{background:#1b60cd;color:white;border-color:#1b60cd}.level-toolbar span{font-size:.83rem}
.course-section-header{margin-bottom:15px}.course-section-header h3{font-size:1.6rem}
.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.lesson-card{padding:17px;border-color:#e4e7e6;border-radius:13px;min-height:335px;box-shadow:0 10px 22px #28364908;background:#fffefa}
.lesson-card-top{order:0}.lesson-illustration{order:1;margin:14px 0 2px;padding:0;width:100%;height:145px;overflow:hidden;border-radius:7px;background:#edf5fa}
.lesson-illustration img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}.lesson-card:hover .lesson-illustration img{transform:scale(1.045)}
.lesson-card h4{order:2;font-size:1.04rem;letter-spacing:-.025em;margin:15px 0 7px}.lesson-card p{order:3;font-size:.82rem;line-height:1.55;margin-bottom:14px}
.lesson-card-footer{order:4;border-color:#eeeef0;padding-top:11px;font-size:.7rem}.lesson-subject-label{background:#e3f7ed;color:#176e65}.lesson-status.completed{color:#168767}
.lesson-card .lesson-card-footer span:last-child{color:#1061cb}
/* Make actual lesson reader feel like the same notebook edition. */
.lesson-banner,.page-hero{background:#faf9f6;border-bottom:0}.lesson-banner{padding:33px 0 15px}.lesson-banner>.container{border-radius:17px;background:#fffefa;border:1px solid #eee8e0;padding:35px 42px}
.lesson-banner-symbol{width:180px;height:125px;flex:0 0 180px;transform:rotate(4deg);background:transparent;border:0;overflow:hidden;border-radius:8px;padding:0;box-shadow:0 9px 24px #1e41621e}
.lesson-banner-symbol img{width:100%;height:100%;object-fit:cover;display:block}
.lesson-banner-row h1{font-size:clamp(2rem,3.4vw,3.4rem)}
.lesson-section,.lesson-sidebar{background:#fffefa;border-color:#ece8e2;box-shadow:0 8px 24px #23324108}
.lesson-section{border-radius:15px}.lesson-label{color:#008f89}.math-block{background:#f5f8ff}
/* Math Lab: functional jump gallery before the 12 existing tools */
.lab-explore-heading{margin-top:38px;margin-bottom:15px}.lab-explore-heading h2{font-size:2rem}.lab-explore-heading p{margin:0}
.tool-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.tool-gallery-card{min-width:0;display:flex;flex-direction:column;text-decoration:none;color:#152849;border-radius:13px;border:1px solid #e4e6e4;background:#fffefa;padding:15px 15px 16px;transition:transform .18s,border-color .18s}
.tool-gallery-card:hover{border-color:#78afea;transform:translateY(-3px);color:#142e4e}.tool-gallery-card img{width:100%;height:100px;object-fit:cover;border-radius:7px;display:block;margin-bottom:13px}
.tool-gallery-card strong{font-size:.98rem;line-height:1.25}.tool-gallery-card p{font-size:.78rem;line-height:1.5;margin:9px 0 16px;min-height:48px;color:#5f7087}
.tool-gallery-link{font-size:.82rem;color:#0b62ca;font-weight:750;margin-top:auto}
.lab-menu{padding-top:28px;scroll-margin-top:100px}.lab-menu a{font-size:.8rem;border-radius:24px;background:#fffefa;border:1px solid #e0e5e9}
.lab-menu + .lab-stack {padding-top:23px}.lab-card{border-color:#e7e6e1;border-radius:17px;background:#fffefa;box-shadow:0 6px 26px #202b3808}
.lab-card .tag{background:#e8f5ef;color:#127e71}.result{background:#f1f7ff}
/* Practice keeps existing controls and localStorage; visual restyle only */
.practice-workspace{padding-top:15px}.practice-panel,.question-card{background:#fffefa;border-color:#ebe9e4;border-radius:17px;box-shadow:0 8px 25px #202d3c09}
.practice-panel-heading h2{margin:4px 0}.practice-controls{padding:19px;border:1px solid #dfeaf8;background:#f0f6ff;border-radius:14px}
.practice-metric{background:#f7f9ff;border-color:#e4e8ee}.practice-progress-track{height:9px;background:#e6e8eb}
.question-card{border-radius:15px}.question-card .answers{gap:10px}.answer-option{background:#fff!important}.question-card .answer-option:has(input:checked){background:#edf5ff!important}
.question-card .answer-option.is-correct{background:#e3f8ea!important}.question-card .answer-option.is-incorrect{background:#fff2e8!important}
/* About / story / values */
.story-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}.story-grid p{max-width:700px;line-height:1.9}
.story-note{padding:25px 32px;background:#e7f4ef;border:1px solid #cfe8df;transform:rotate(2deg);box-shadow:0 16px 30px #213b3910;border-radius:6px}
.story-note>span{font-size:.7rem;letter-spacing:.18em;font-weight:900;color:#0e796e}.story-note p{font-size:1.85rem;color:#183456;font-family:"Comic Sans MS","Bradley Hand",cursive;line-height:1.55;margin:18px 0}
.story-note svg{width:100%;height:auto}.three-values{grid-template-columns:repeat(3,1fr)}.our-values{background:#f3f6f6}
.about-preview .preview-card{min-height:230px}
/* Footer */
.site-footer{background:#fffefa;border-top:1px solid #ece7dd}.footer-inner{gap:20px}
/* No account system exists, so do not show mockup-only sign-in controls. */
@media(max-width:1100px){
 .editorial-hero-grid{grid-template-columns:1fr minmax(350px,.9fr);padding:43px 35px}.note-collage{transform:scale(.86);transform-origin:center}.tool-gallery{grid-template-columns:repeat(3,1fr)}.nav-start{display:none}
}
@media(max-width:820px){
 .container{width:min(100% - 36px,680px)}.editorial-hero{padding-top:18px}.editorial-hero-grid{display:block;padding:42px 27px 32px}.hero-copy h1{font-size:clamp(2.8rem,7vw,4.2rem)}.note-collage{max-width:580px;margin:40px auto 0;transform:none}
 .values-row{grid-template-columns:repeat(2,1fr)}.preview-grid{grid-template-columns:repeat(2,1fr)}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .story-grid{grid-template-columns:1fr}.catalog-toolbar{flex-direction:column;align-items:stretch}.catalog-search{max-width:none}.catalog-filters{width:100%}.lesson-banner-symbol{display:none}.new-cta{display:block}.new-cta .button{margin-top:15px;display:inline-block}
}
@media(max-width:600px){
 .container{width:calc(100% - 28px)}.nav{height:65px;gap:8px}.brand{font-size:1.17rem}.brand-mark{width:32px;height:32px;font-size:1.3rem}
 .editorial-hero-grid{padding:28px 20px 15px;border-radius:14px}.hero-copy h1{font-size:clamp(2.48rem,10vw,3.5rem)}.hero-copy .lead{font-size:.93rem}.note-collage{height:252px;margin:20px auto 0;transform:scale(.76);transform-origin:top center;margin-bottom:-60px;width:500px;left:50%;translate:-50% 0}.collage-scribble{display:none}
 .values-row,.preview-grid,.lesson-grid,.tool-gallery,.three-values{grid-template-columns:1fr}.stats-inline{gap:9px;padding:13px 17px}.stats-inline>div{flex:1 1 38%;padding:8px 4px}.stats-inline>div:nth-child(2){border:0}.home-stats{padding-bottom:14px}.section{padding:42px 0}
 .lesson-illustration{height:170px}.lesson-card{min-height:310px}.section-heading{align-items:start;flex-direction:column}.section-heading .button{width:auto}.catalog-topline{display:block}.catalog-topline .learning-progress{margin-top:22px}
 .practice-controls{padding:12px}.practice-panel{padding:19px}.course-section-header{display:block}.story-note{max-width:400px}
 .lab-explore-heading{margin-top:12px}.lab-card{padding:21px}.value-tile{padding:20px}
}
@media(prefers-reduced-motion:reduce){.paper-note,.preview-card,.lesson-illustration img,.tool-gallery-card{transition:none}}
/* Notebook edition finishing refinements */
.hero-copy h1{font-size:clamp(2.75rem,3.9vw,3.7rem)}
.home-hero .hero-copy h1{font-size:clamp(2.72rem,3.6vw,3.45rem)}
.note-grid{z-index:6}
.paper-note>span:not(.tape):not(.stroke),.note-grid .note-center,.collage-scribble,.story-note p{font-family:"Comic Neue","Comic Sans MS",cursive!important}
@media(max-width:600px){
 .home-hero .hero-copy h1,.hero-copy h1{font-size:clamp(2.4rem,9vw,3.1rem)}
 .note-collage{width:min(100%,335px);height:255px;max-width:335px;left:auto;translate:none;transform:none;overflow:visible;margin:29px auto 4px}
 .note-grid{inset:19px 73px 17px 70px;z-index:6;transform:rotate(-2deg)}
 .note-grid .note-center{font-size:20px!important;line-height:1.23!important}
 .note-mint{width:112px;height:126px;left:3%;top:0;transform:rotate(-7deg)}
 .note-yellow{width:119px;height:113px;right:0;top:0;transform:rotate(7deg)}
 .note-pink{width:118px;height:116px;left:0;bottom:7px;transform:rotate(5deg)}
 .note-purple{width:122px;height:116px;right:0;bottom:5px;transform:rotate(-6deg)}
 .paper-note{padding:7px}
 .paper-note svg{height:57px;width:90%;flex-basis:57px}
 .paper-note.note-mint span,.paper-note.note-yellow span,.paper-note.note-pink span,.paper-note.note-purple span{font-size:10px!important;line-height:1.15}
 .collage-scribble{display:none}
}
@media(min-width:601px){.note-grid{inset:34px 137px 8px 145px}}

/* MathBridge 2.4.1 — full, uncropped topic artwork on each lesson detail page.
   Source graphics use a 600:260 aspect ratio; old 180x125 cover cropped content. */
.lesson-banner-row { min-width: 0; }
.lesson-banner-row > div:first-child { min-width: 0; flex: 1 1 auto; }
.lesson-banner-symbol {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: min(100%, 320px);
  max-width: 320px;
  height: auto;
  aspect-ratio: 600 / 260;
  flex: 0 0 320px;
  overflow: visible;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  transform: none;
  box-shadow: 0 9px 24px rgba(30, 65, 98, 0.10);
}
.lesson-banner-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: inherit;
}
@media (max-width: 820px) {
  .lesson-banner-row { flex-direction: column; align-items: stretch; gap: 18px; }
  .lesson-banner-symbol {
    display: grid;
    align-self: flex-start;
    flex: none;
    width: min(100%, 440px);
    max-width: 440px;
    height: auto;
  }
}
@media (max-width: 600px) {
  .lesson-banner > .container { padding: 24px 19px; }
  .lesson-banner-symbol { width: 100%; max-width: 420px; }
}

/* 2.4.2: balanced, accessible notes. All mathematical artwork is on 600×260 canvases. */
.note-pink { padding: 9px 11px; }
.note-pink > span:not(.tape):not(.stroke) { max-width: 100%; text-wrap: balance; overflow-wrap: normal; line-height:1.12; }
.paper-note.note-pink svg { height: 76px; flex-basis:76px; }
.lesson-illustration img { object-fit:contain; }
.lesson-banner-symbol img { object-fit:contain; }
.preview-card > img { object-fit:contain; }
.tool-gallery-card img { object-fit:contain; }
@media(max-width:600px) {
 .paper-note.note-pink svg { height: 49px; flex-basis:49px; }
 .note-pink > span:not(.tape):not(.stroke) { font-size: 9.5px!important; line-height:1.14!important; }
}
/* Let the pink note sit above the central sheet so its wording is legible at narrow widths. */
@media(max-width:600px) { .note-pink { z-index:7; } }
@media(max-width:600px) {
 .note-grid { inset: 19px 65px 17px 98px; }
 .note-grid .note-center { font-size: 18px!important; }
}