:root {
	--paper: #f8f7f2;
	--ink: #263b3a;
	--muted: #687672;
	--olive: #294d42;
	--line: #dedfd5;
	--accent: #e4ebc8;
	--yellow: #f2cd69;
	--sage: #dce7d7;
	--blue: #dfeaf0;
}
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { background-image: none; }
button:disabled { cursor: default; }
input, select, button { min-height: 40px; }
button, a, summary { touch-action: manipulation; }
summary { cursor: pointer; }
summary:focus-visible { outline: 3px solid #829557; outline-offset: 4px; }
.site-header { min-height: 92px; height: auto; padding: 23px max(24px, calc((100% - 1240px) / 2)); border-bottom: 1px solid var(--line); gap: 24px; }
.brand { font-size: 23px; letter-spacing: -.85px; white-space: nowrap; }
.brand img { margin-right: 10px; width: 36px; height: 36px; }
.brand span { color: #758078; font-size: 21px; }
.site-header nav { gap: 26px; }
.nav-link, .nav-search { font-size: 12px; font-weight: 500; white-space: nowrap; }
.nav-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-search { border: 1px solid #c8cec3; border-radius: 6px; padding: 11px 16px; background: #fdfdf8; }
.nav-search span { margin-left: 10px; }
.nav-search:hover { background: #edf0e5; }
.settings-link { padding: 10px; border: 0; }
.settings-link svg { width: 20px; height: 20px; }
.education-landing { width: min(1184px, calc(100% - 64px)); margin: 0 auto; }
.learning-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 76px; padding: 70px 0 65px; }
.hero-copy .eyebrow { justify-content: flex-start; color: #63745f; font-size: 9px; letter-spacing: 1.5px; }
.hero-copy .little-spark { font-size: 24px; margin-right: 2px; }
.hero-copy h1 { text-align: left; font-size: clamp(60px, 6vw, 82px); line-height: 1.04; letter-spacing: -3.9px; margin: 25px 0 24px; }
.hero-copy h1 em { color: #71805b; }
.hero-copy .hero-description { text-align: left; max-width: 400px; font-size: 14px; line-height: 1.85; margin: 0 0 26px; color: #6a756f; }
.hero-actions { display: flex; gap: 26px; align-items: center; }
.primary-button { padding: 15px 22px; border-radius: 7px; font-size: 12px; min-height: 48px; }
.example-link { font-size: 12px; border-bottom: 1px solid #a3ac99; padding: 6px 0; }
.example-link span { margin-left: 10px; }
.hero-promise { display: flex; gap: 18px; font-size: 10px; color: #74816e; margin-top: 24px; flex-wrap: wrap; }
.hero-promise > span > span { color: #58724d; margin-right: 3px; }
.hero-notebook { position: relative; background: #fffef9; border: 1px solid #d6dbcc; border-radius: 13px; padding: 28px 32px 0; box-shadow: 9px 10px 0 #e7e9db, 0 16px 50px #27362b07; transform: rotate(1.5deg); margin-right: 8px; }
.notebook-tag { position: absolute; right: -23px; top: -17px; padding: 10px 15px; background: var(--yellow); font: bold 9px "Courier New", monospace; letter-spacing: .7px; transform: rotate(7deg); border-radius: 3px; box-shadow: 0 2px 2px #79652b09; }
.notebook-heading { display: flex; justify-content: space-between; align-items: center; }
.lesson-pill { font: 9px "Courier New", monospace; color: #5c7162; letter-spacing: 1.1px; }
.notebook-star { color: #c09e39; font-size: 30px; line-height: 1; }
.hero-notebook h2 { font: 35px/1.13 Georgia, serif; letter-spacing: -1px; margin: 17px 0 10px; }
.hero-notebook > p { color: #7a8378; font-size: 12px; }
.fraction-equation { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 28px 0 25px; font: 35px Georgia, serif; }
.stacked-fraction { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; min-width: 32px; }
.stacked-fraction > span:first-child { border-bottom: 1.5px solid; padding: 0 5px 5px; width: 100%; text-align: center; }
.stacked-fraction > span:last-child { padding-top: 3px; }
.math-sign { font-size: 24px; color: #9b9e8a; }
.result-fraction { color: #637b45; }
.fraction-model { display: grid; grid-template-columns: repeat(6, 1fr); height: 49px; border-radius: 6px; gap: 4px; overflow: hidden; }
.fraction-model > span { background: #b4c794; border: 1px solid #91aa73; border-radius: 3px; }
.fraction-model .added-part { background: #f3cf78; border-color: #d6b15a; }
.fraction-model .empty-part { background: repeating-linear-gradient(135deg, #f5f4ec, #f5f4ec 5px, #e9e9df 5px, #e9e9df 6px); border-color: #d9dccc; }
.model-key { display: flex; justify-content: center; gap: 24px; margin: 13px 0 20px; font-size: 10px; color: #6d7864; }
.model-key i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
.key-green { background: #a8be86; }
.key-yellow { background: #edc766; }
.notebook-tip { background: #f3f3e9; border-radius: 6px; padding: 11px 16px; display: flex; align-items: center; gap: 15px; }
.notebook-tip p { font-size: 11px; line-height: 1.6; margin: 0; color: #78816c; }
.notebook-tip strong { color: #506146; font-weight: 500; }
.tip-spark { color: #6b7a51; font: 33px Georgia, serif; }
.notebook-link { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 11px; color: #52694c; }
.notebook-link:hover { text-decoration: underline; }
.learning-ribbon { display: flex; align-items: center; gap: 42px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 10px; color: #788273; }
.learning-ribbon > span { display: flex; gap: 11px; align-items: center; }
.learning-ribbon strong { font: 24px Georgia, serif; color: #354c3f; }
.learning-ribbon .ribbon-note { margin-left: auto; font: italic 14px Georgia, serif; color: #8a927b; }
.resume-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; margin: 32px 0 0; background: #e9eedc; border: 1px solid #d9e0c8; border-radius: 9px; font-size: 11px; }
.resume-panel > span { font: 9px "Courier New", monospace; letter-spacing: 1px; }
.resume-panel strong { font: 16px Georgia, serif; display: block; margin-top: 7px; letter-spacing: 0; }
.resume-panel a { font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.grade-section { padding-top: 65px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 31px; }
.section-heading .eyebrow, .web-section .eyebrow { justify-content: flex-start; font-size: 9px; letter-spacing: 1.4px; }
.section-heading h2, .web-section h2 { font: 43px/1.12 Georgia, serif; letter-spacing: -1.6px; margin: 14px 0 0; }
.section-heading h2 em, .web-section h2 em { color: #73825b; }
.section-heading > p { font-size: 12px; line-height: 1.85; color: #7d8579; margin: 0 0 3px; }
.catalog-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 0 12px; }
.grade-filters { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #f0f0e7; }
.grade-filters button { background: transparent; padding: 8px 14px; border-radius: 5px; font-size: 11px; color: #6c7665; min-height: 35px; }
.grade-filters button[aria-pressed="true"] { background: #fffef8; color: #324b3b; box-shadow: 0 1px 4px #29322514; }
.grade-filters button:hover { color: #263b3a; }
.grade-filters button > span { color: #87907b; font-size: 9px; margin-left: 4px; }
.lesson-search-wrap { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: #fffef8; padding: 0 13px; border-radius: 7px; width: 270px; }
.lesson-search-wrap svg { width: 16px; height: 16px; flex-shrink: 0; color: #8a9381; }
.lesson-search-wrap input { width: 100%; min-width: 0; border: 0; background: transparent; font-size: 11px; padding: 12px 0; }
.catalog-status { font: 9px "Courier New", monospace; color: #6c7865; margin: 10px 0 17px; line-height: 1.7; }
.grade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grade-card { display: flex; flex-direction: column; padding: 22px; border-radius: 9px; background: #fffef9; border: 1px solid #dce0d3; min-width: 0; transition: box-shadow .2s, transform .2s; }
.grade-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px #263b3a08; }
.grade-card-top { display: flex; justify-content: space-between; align-items: center; }
.grade-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #e7edcf; border-radius: 10px; font: 22px Georgia, serif; color: #617245; }
.middle .grade-badge { background: #e1ebef; color: #597b8a; }
.high .grade-badge { background: #eee4dc; color: #9b7760; }
.grade-meta { font: 9px "Courier New", monospace; color: #7b8572; line-height: 1.5; }
.grade-card h3 { font-size: 17px; font-weight: 500; letter-spacing: -.3px; margin: 18px 0 9px; }
.grade-title:hover { text-decoration: underline; }
.grade-description { font-size: 11px; line-height: 1.8; color: #788171; margin: 0 0 16px; min-height: 58px; }
.grade-topics { list-style: none; padding: 0; margin: 0 0 20px; }
.grade-topics li { padding: 5px 0; font-size: 10px; line-height: 1.5; color: #67735e; }
.grade-topics li::before { content: "+"; color: #99a486; margin-right: 6px; }
.grade-topics a:hover { text-decoration: underline; }
.grade-card-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid #e5e7dc; display: flex; flex-direction: column; gap: 11px; }
.grade-open { font-size: 11px; color: #496344; }
.curriculum-note { font-size: 11px; line-height: 1.8; color: #7b8476; margin-top: 24px; max-width: 850px; }
.catalog-empty { text-align: center; border: 1px dashed #cdd4be; padding: 35px; border-radius: 10px; }
.catalog-empty h3 { font: 26px Georgia, serif; }
.catalog-empty p { font-size: 13px; color: var(--muted); }
.how-section { margin-top: 65px; padding: 45px 40px 38px; background: #edf0e3; border-radius: 12px; border: 1px solid #e0e6d4; }
.how-section .section-heading h2 { font-size: 38px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.how-grid article { border-top: 1px solid #d2dbc2; padding-top: 21px; }
.how-number { font: 10px "Courier New", monospace; color: #81906c; }
.how-grid h3 { font-size: 15px; font-weight: 500; margin: 12px 0 8px; }
.how-grid p { color: #7a856d; font-size: 11px; line-height: 1.9; margin: 0; }
.web-section { margin: 65px 0 70px; padding: 35px 40px; border: 1px solid #d8ddd0; border-radius: 12px; background: #fdfcf6; }
.web-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.web-section h2 { font-size: 34px; }
.web-badge { display: flex; gap: 7px; align-items: center; color: #738468; font: 9px "Courier New", monospace; white-space: nowrap; }
.web-description { font-size: 12px; color: #7d8675; line-height: 1.7; margin: 15px 0 24px; }
.web-section .search-form { max-width: none; border-radius: 8px; box-shadow: 0 3px 0 #eeeee3; }
.web-section .search-underneath, .web-section .status { max-width: none; }
.web-section .search-underneath { color: #73806c; }
.web-section .status { text-align: left; }
.resource-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.resource-links > span { font: 9px "Courier New", monospace; color: #849175; }
.resource-links > button { background: transparent; padding: 4px 0; color: #617752; font-size: 11px; }
.resource-links > button:hover { text-decoration: underline; }
.resource-links #cloak { margin-left: auto; }
.section-label h3 { font: 10px "Courier New", monospace; color: #77836a; letter-spacing: 1px; }
.site-footer { padding: 26px max(24px, calc((100% - 1240px) / 2)); color: #7e8975; font-size: 10px; min-height: 82px; }
.footer-brand { font-size: 14px; font-weight: 600; letter-spacing: -.4px; }
.footer-brand span { font-weight: 400; }
.site-footer > div { display: flex; gap: 24px; }
.learn-shell { width: min(1184px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 246px minmax(0, 1fr); flex: 1; gap: 66px; padding: 38px 0 70px; }
.lesson-sidebar { border-right: 1px solid var(--line); padding: 8px 28px 0 0; }
.lesson-sidebar > .back-link { font-size: 11px; }
.lesson-sidebar .field-label { font: 9px "Courier New", monospace; color: #738264; letter-spacing: 1.3px; margin-top: 32px; }
.lesson-sidebar .field-input { font-size: 13px; background: #fffef8; }
.overview-link { display: block; font-size: 10px; color: #75846b; margin: 13px 0 25px; }
.learning-progress { padding: 16px 0 24px; border-top: 1px solid var(--line); }
.learning-progress > span { font-size: 10px; color: #70815f; }
.learning-progress progress { display: block; width: 100%; height: 5px; margin-top: 11px; accent-color: #849c64; border: 0; background: #e3e7d8; border-radius: 5px; overflow: hidden; }
progress::-webkit-progress-bar { background: #e3e7d8; }
progress::-webkit-progress-value { background: #849c64; }
progress::-moz-progress-bar { background: #849c64; }
.lesson-nav-item { display: flex; align-items: flex-start; gap: 12px; border-radius: 6px; padding: 12px 10px; margin: 4px -10px; font-size: 11px; line-height: 1.6; color: #758069; }
.lesson-nav-number { color: #8f9a80; font: 10px "Courier New", monospace; padding-top: 3px; flex-shrink: 0; }
.lesson-nav-item[aria-current="page"] { background: #e6ebd8; color: #445c39; }
.lesson-nav-item:hover { background: #edf0e4; }
.lesson-nav-item.is-complete .lesson-nav-number { color: #476e45; }
.sidebar-note { display: flex; align-items: center; gap: 13px; color: #7a8968; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 23px; }
.sidebar-note > span { font: 30px Georgia, serif; }
.sidebar-note p { font: italic 15px/1.6 Georgia, serif; margin: 0; }
.storage-note { font-size: 9px; line-height: 1.8; color: #7e8975; margin-top: 22px; }
.lesson-main { min-width: 0; padding-top: 8px; }
.lesson-main:focus { outline: 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 11px; color: #849075; font-size: 10px; margin-bottom: 36px; }
.breadcrumbs a:hover { text-decoration: underline; }
.lesson-main .eyebrow { justify-content: flex-start; font-size: 9px; letter-spacing: 1.5px; }
.lesson-main h1 { font: 48px/1.1 Georgia, serif; letter-spacing: -1.8px; text-align: left; margin: 17px 0 20px; max-width: 700px; }
.overview-description { font-size: 14px; color: #718069; line-height: 1.9; max-width: 650px; }
.grade-ready { padding: 18px 22px; border-left: 3px solid #b5c992; background: #eef1e4; margin: 28px 0 35px; border-radius: 0 7px 7px 0; }
.grade-ready strong { font-size: 11px; font-weight: 600; }
.grade-ready p { font-size: 12px; line-height: 1.8; color: #76836b; margin: 7px 0 0; }
.overview-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.overview-section-heading h2 { font: 25px Georgia, serif; margin: 0; }
.overview-section-heading > span { font: 8px "Courier New", monospace; color: #8c967c; }
.overview-lessons { display: flex; flex-direction: column; gap: 13px; }
.overview-lesson { display: flex; align-items: center; gap: 22px; border: 1px solid #dce1d1; background: #fffef9; padding: 24px; border-radius: 9px; }
.overview-lesson:hover { background: #f1f3e8; }
.overview-number { font: 22px Georgia, serif; color: #879975; }
.overview-lesson-copy { flex: 1; }
.overview-lesson h3 { font-size: 14px; font-weight: 500; margin: 0 0 7px; }
.overview-lesson p { font-size: 11px; color: #7a8570; line-height: 1.8; margin: 0 0 9px; }
.overview-lesson-meta { font: 8px "Courier New", monospace; color: #81906f; }
.overview-action { font-size: 10px; white-space: nowrap; color: #607b4b; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 20px; font: 9px "Courier New", monospace; color: #77896a; margin-bottom: 32px; }
.concept-section h2 { font-size: 15px; font-weight: 500; margin: 0 0 12px; }
.concept-section p { font-size: 15px; line-height: 1.9; color: #52634e; margin: 0; }
.worked-example { margin: 28px 0 23px; border: 1px solid #d6ddc8; background: #fffef7; border-radius: 11px; padding: 26px 28px; }
.example-top { display: flex; align-items: center; justify-content: space-between; }
.example-top > span:last-child { font-size: 24px; color: #b29b51; }
.worked-example h2 { font: 23px/1.4 Georgia, serif; letter-spacing: -.4px; margin: 14px 0 20px; }
.math-expression { font: 22px/1.6 Georgia, serif; color: #4a633f; padding: 20px; border: 1px solid #e1e6d4; background: #f0f3e4; border-radius: 7px; overflow-wrap: anywhere; text-align: center; }
#lesson-model { max-width: 470px; margin: 20px auto; }
.model-caption { font-size: 10px; color: #7f8b72; text-align: center; line-height: 1.8; }
.example-steps { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: steps; }
.example-steps li { display: flex; align-items: flex-start; gap: 15px; padding: 13px 0; border-bottom: 1px solid #eceee2; }
.step-number { background: #e9eddc; border: 1px solid #dfe5ce; font: 11px Georgia, serif; width: 27px; height: 27px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #6b8055; }
.example-steps p { margin: 2px 0; font-size: 13px; line-height: 1.9; color: #52664b; }
.step-actions { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 20px; }
.step-actions > span { font-size: 10px; line-height: 1.7; color: #839174; max-width: 60%; padding-top: 10px; }
.secondary-button { background: #e9eddd; color: #526d40; font-size: 11px; min-height: 40px; border: 1px solid #dbe2ca; }
.remember-note { background: #f5efda; border: 1px solid #e9dfb9; display: flex; gap: 18px; padding: 18px 23px; border-radius: 7px; }
.remember-note > span { font: 26px Georgia, serif; color: #ac964b; }
.remember-note strong { font-size: 11px; font-weight: 500; color: #7d713f; }
.remember-note p { font-size: 12px; line-height: 1.8; margin: 6px 0 0; color: #8a805c; }
.practice-section { margin-top: 37px; }
.practice-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.practice-heading h2 { font: 34px Georgia, serif; letter-spacing: -.8px; margin: 10px 0 0; }
.practice-heading > span { font: 10px "Courier New", monospace; color: #7e8e6a; }
.practice-intro { font-size: 11px; color: #7d8972; line-height: 1.9; margin: 14px 0 23px; }
.practice-card { border: 1px solid #dce1d1; border-radius: 9px; background: #fffef9; padding: 23px 25px 18px; margin-bottom: 15px; }
.question-number { font: 9px "Courier New", monospace; color: #8b987b; letter-spacing: 1px; }
.practice-question { display: block; font-size: 14px; font-weight: 500; line-height: 1.7; margin: 13px 0 18px; }
.answer-row { display: flex; align-items: center; gap: 12px; }
.answer-row input { width: 190px; max-width: 100%; flex: 1; }
.answer-row button { margin-left: auto; }
.answer-unit { font-size: 11px; color: #7c8970; white-space: nowrap; }
.question-hint { font-size: 10px; color: #7a896b; margin-top: 16px; line-height: 1.8; }
.question-hint summary { width: fit-content; padding: 4px 0; }
.question-hint p { background: #f4f5ec; border-radius: 5px; padding: 13px; font-size: 12px; }
.answer-feedback { font-size: 12px; line-height: 1.8; margin: 0; }
.answer-feedback:not(:empty) { margin-top: 13px; padding: 12px 14px; background: #f2f3ea; border-radius: 6px; }
.answer-feedback.is-correct { background: #eaf0dd; color: #4e713e; }
.answer-feedback.try-again { background: #f9eedb; color: #876b36; }
.answer-feedback.solution-feedback { background: #eaf0f1; color: #56787e; }
.solution-button { font-size: 10px; color: #718462; margin-top: 8px; text-decoration: underline; }
.lesson-finish { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; }
.lesson-finish p { max-width: 410px; color: #7b8c69; font-size: 11px; line-height: 1.9; }
.lesson-finish .primary-button:disabled { opacity: .55; }
.lesson-pagination { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 5px; }
.lesson-pagination a { font-size: 11px; line-height: 1.8; }
.next-lesson { color: #54753e; text-align: right; }
.lesson-loading { color: #7d896e; line-height: 1.8; font-size: 14px; }
.settings-layout { margin-top: 45px; }
.settings-intro h1 { color: var(--ink); }
.settings-intro p, .settings-card p { color: #748168; }
.settings-card { background: #fffef9; }
.settings-card .field-hint { color: #64725d; }
.grade-meta, .grade-description, .grade-topics li, .grade-card-bottom .grade-meta,
.overview-description, .overview-lesson p, .overview-lesson-meta, .curriculum-note,
.practice-intro, .question-number, .question-hint, .practice-heading > span,
.breadcrumbs, .lesson-meta, .storage-note, .step-actions > span, .model-caption,
.lesson-finish p, .how-grid p, .section-heading > p { color: #64725d; }
.remember-note p, .remember-note strong { color: #746638; }
@media (max-width: 1100px) {
	.learning-hero { gap: 40px; }
	.hero-copy h1 { font-size: 66px; }
	.hero-notebook { padding: 25px 25px 0; }
	.learning-ribbon { gap: 28px; }
	.learning-ribbon .ribbon-note { display: none; }
	.grade-grid { grid-template-columns: repeat(3, 1fr); }
	.site-header nav { gap: 15px; }
	.how-nav { display: none; }
	.learn-shell { gap: 35px; grid-template-columns: 210px minmax(0, 1fr); }
	.lesson-sidebar { padding-right: 22px; }
	.overview-section-heading > span { display: none; }
}
@media (max-width: 800px) {
	.site-header { padding: 20px 24px; min-height: 82px; }
	.brand { font-size: 21px; }
	.brand span { font-size: 18px; }
	.brand img { width: 31px; height: 31px; }
	.site-header .nav-link { display: none; }
	.education-landing { width: calc(100% - 48px); }
	.learning-hero { grid-template-columns: 1fr; gap: 45px; padding: 48px 0; }
	.hero-copy h1 { font-size: 72px; }
	.hero-copy .hero-description { max-width: 460px; }
	.hero-notebook { width: min(460px, 95%); margin: 5px auto 10px; }
	.learning-ribbon { justify-content: space-between; gap: 16px; }
	.learning-ribbon > span { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 9px; }
	.learning-ribbon strong { font-size: 22px; }
	.section-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
	.section-heading h2 { font-size: 39px; }
	.grade-section { padding-top: 45px; }
	.catalog-controls { flex-direction: column; align-items: stretch; }
	.grade-filters { width: fit-content; }
	.lesson-search-wrap { width: 100%; }
	.grade-grid { grid-template-columns: repeat(2, 1fr); }
	.how-section { padding: 30px; margin-top: 45px; }
	.how-grid { gap: 24px; }
	.web-section { margin: 45px 0; padding: 25px; }
	.web-section-heading { flex-direction: column; align-items: flex-start; }
	.web-badge { font-size: 8px; }
	.resource-links { gap: 13px; }
	.resource-links #cloak { margin-left: 0; }
	.site-footer { padding: 24px; flex-wrap: wrap; gap: 22px; }
	.learn-shell { display: flex; flex-direction: column; gap: 0; width: calc(100% - 48px); padding-top: 20px; }
	.lesson-sidebar { border: 0; padding: 0 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
	.lesson-sidebar > .back-link, .sidebar-note, .storage-note, #lesson-navigation, .overview-link { display: none; }
	.lesson-sidebar .field-label { margin-top: 7px; font-size: 8px; }
	.lesson-sidebar .field-input { width: 100%; }
	.learning-progress { border: 0; padding: 14px 0 0; }
	.breadcrumbs { margin-bottom: 25px; }
	.lesson-main h1 { font-size: 43px; }
	.overview-lesson { padding: 20px; }
}
@media (max-width: 520px) {
	.site-header { padding: 17px 18px; gap: 12px; min-height: 75px; flex-wrap: wrap; }
	.brand { font-size: 19px; letter-spacing: -.7px; }
	.brand span { font-size: 16px; }
	.brand img { width: 28px; height: 28px; margin-right: 7px; }
	.site-header nav { gap: 5px; }
	.site-header .nav-search { display: block; font-size: 0; padding: 8px 10px; min-height: 36px; }
	.site-header .nav-search::before { content: "Web \2192"; font-size: 10px; }
	.site-header .nav-search > span { display: none; }
	.settings-link { min-height: 40px; min-width: 40px; }
	.education-landing { width: calc(100% - 36px); }
	.learning-hero { padding: 36px 2px; gap: 40px; }
	.hero-copy .eyebrow { font-size: 7.5px; letter-spacing: 1px; gap: 7px; }
	.hero-copy h1 { font-size: clamp(50px, 13vw, 65px); line-height: 1.06; letter-spacing: -2.6px; margin-top: 22px; }
	.hero-copy .hero-description { font-size: 13px; max-width: 325px; }
	.hero-actions { gap: 22px; }
	.hero-promise { gap: 11px; font-size: 8px; }
	.hero-notebook { width: calc(100% - 12px); padding: 23px 23px 0; transform: rotate(1deg); margin-right: 10px; }
	.notebook-tag { right: -9px; font-size: 7px; padding: 9px 11px; }
	.hero-notebook h2 { font-size: 31px; }
	.hero-notebook > p { font-size: 11px; }
	.fraction-equation { margin: 24px 0; gap: 22px; font-size: 32px; }
	.fraction-model { height: 42px; }
	.model-key { gap: 18px; font-size: 9px; }
	.learning-ribbon { padding: 21px 0; }
	.learning-ribbon > span { font-size: 8px; }
	.resume-panel { padding: 20px; flex-direction: column; align-items: flex-start; gap: 14px; }
	.section-heading { margin-bottom: 23px; }
	.section-heading h2 { font-size: 36px; }
	.section-heading > p { font-size: 11px; }
	.grade-filters { width: 100%; justify-content: space-between; gap: 1px; padding: 3px; }
	.grade-filters button { padding: 8px 9px; font-size: 10px; }
	.grade-filters button > span { display: none; }
	.grade-grid { gap: 12px; }
	.grade-card { padding: 16px 13px; }
	.grade-badge { width: 33px; height: 33px; font-size: 20px; border-radius: 8px; }
	.grade-meta { font-size: 8px; }
	.grade-card h3 { font-size: 15px; margin-top: 15px; }
	.grade-description { font-size: 10px; line-height: 1.8; min-height: 85px; margin-bottom: 10px; }
	.grade-topics li { font-size: 9px; padding: 5px 0; }
	.grade-topics li::before { margin-right: 3px; }
	.grade-open { font-size: 9px; }
	.curriculum-note { font-size: 10px; }
	.how-section { padding: 26px 24px; }
	.how-section .section-heading h2 { font-size: 32px; }
	.how-grid { grid-template-columns: 1fr; gap: 24px; }
	.how-grid article { padding-top: 18px; }
	.web-section { padding: 25px 18px; }
	.web-section h2 { font-size: 30px; }
	.web-section .eyebrow { font-size: 8px; }
	.web-description { font-size: 11px; }
	.web-section .search-form { gap: 8px; padding-left: 10px; }
	.web-section .search-form input { font-size: 11px; }
	.web-section .search-icon { width: 16px; height: 16px; }
	.web-section .go-button { padding: 12px; }
	.web-section .search-underneath { align-items: flex-start; font-size: 9px; line-height: 1.7; }
	.web-section .search-underneath button { white-space: nowrap; font-size: 9px; }
	.web-section .status { font-size: 10px; }
	.resource-links > span { width: 100%; }
	.resource-links { gap: 8px 16px; }
	.resource-links > button { font-size: 10px; }
	.site-footer { padding: 23px 18px; gap: 18px; }
	.site-footer > span { font-size: 9px; }
	.site-footer > div { width: 100%; justify-content: space-between; }
	.learn-shell { width: calc(100% - 36px); }
	.lesson-main h1 { font-size: 37px; letter-spacing: -1.4px; }
	.overview-description { font-size: 13px; }
	.overview-lesson { gap: 13px; padding: 18px 14px; flex-wrap: wrap; }
	.overview-number { align-self: flex-start; font-size: 20px; padding-top: 2px; }
	.overview-lesson-copy { min-width: 200px; }
	.overview-lesson h3 { font-size: 13px; }
	.overview-action { margin-left: 37px; }
	.concept-section p { font-size: 14px; }
	.worked-example { padding: 20px 18px; }
	.worked-example h2 { font-size: 21px; }
	.math-expression { font-size: 19px; padding: 15px 10px; }
	.example-steps { margin-top: 12px; }
	.example-steps li { gap: 12px; }
	.example-steps p { font-size: 12px; }
	.step-actions { flex-direction: column; gap: 10px; }
	.step-actions > span { max-width: 100%; padding-top: 0; }
	.step-actions button { align-self: flex-end; }
	.remember-note { padding: 17px; gap: 14px; }
	.remember-note p { font-size: 11px; }
	.practice-heading h2 { font-size: 31px; }
	.practice-heading > span { font-size: 9px; }
	.practice-card { padding: 21px 18px; }
	.practice-question { font-size: 13px; }
	.answer-row { flex-wrap: wrap; gap: 10px; }
	.answer-row input { min-width: 150px; }
	.answer-row button { width: 100%; margin: 0; }
	.lesson-finish { flex-direction: column; align-items: stretch; gap: 10px; }
	.lesson-finish p { margin-bottom: 0; }
	.lesson-pagination a { font-size: 10px; }
	.settings-layout { width: calc(100% - 36px); }
	.settings-intro h1 { font-size: 43px; }
	.settings-link + .back-link, .site-header > .back-link { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}