/* Free formula sheets (24.10.2026): hub, sheet page, cards (hub, home strip, course page), formula typesetting, print. */

/* ---------- formula typesetting ---------- */
body.mx .mx-nf-f, .mx-nf-f, .mx-nf-mi, .mx-nf-card-f bdi, .mx-nf-hero-f bdi { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", Cambria, "Times New Roman", serif; font-variant-numeric: lining-nums; }
.mx-nf-f sub, .mx-nf-f sup, .mx-nf-mi sub, .mx-nf-mi sup, .mx-nf-card-f sub, .mx-nf-card-f sup, .mx-nf-hero-f sub, .mx-nf-hero-f sup { font-size: .68em; line-height: 0; }
.m-fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .9em; margin: 0 .12em; line-height: 1.15; }
.m-fr > .m-nu { border-bottom: 1px solid currentColor; padding: 0 .2em .06em; }
.m-fr > .m-de { padding: .06em .2em 0; }
.m-sq { white-space: nowrap; }
.m-sq > .m-sa { border-top: 1px solid currentColor; padding: .04em .1em 0 .05em; margin-inline-start: -.04em; }
.m-sq > .m-ix { font-size: .6em; vertical-align: .9em; margin-inline-end: -.35em; }
.m-vec { position: relative; display: inline-block; padding-top: .22em; background: linear-gradient(currentColor, currentColor) no-repeat 0 .08em / 100% 1px; }
.m-vec::after { content: ""; position: absolute; right: -.08em; top: -.04em; border-left: .32em solid currentColor; border-top: .14em solid transparent; border-bottom: .14em solid transparent; }
.m-bar { text-decoration: overline; text-decoration-thickness: 1px; }
.m-hat, .m-dot, .m-ddot { position: relative; display: inline-block; }
.m-hat::after, .m-dot::after, .m-ddot::after { position: absolute; left: 50%; transform: translateX(-50%); top: -.62em; font-size: .8em; line-height: 1; }
.m-hat::after { content: "^"; }
.m-dot::after { content: "·"; top: -.55em; font-size: 1.1em; }
.m-ddot::after { content: "··"; top: -.55em; font-size: 1.1em; letter-spacing: -.08em; }
.m-tx { font-family: var(--mx-font); font-size: .82em; }
.m-bi > .m-nu { border-bottom: 0; }
.m-tilde { position: relative; display: inline-block; }
.m-tilde::after { content: "~"; position: absolute; left: 50%; transform: translateX(-50%); top: -.7em; font-size: .8em; line-height: 1; }
.m-qd { display: inline-block; width: 1em; }

/* ---------- hero (sheet + hub) ---------- */
.mx-nf-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--mx-blue); color: var(--mx-blue-ink); padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 72px); }
.mx-nf-hero-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--mx-blue-line) 1px, transparent 1px), linear-gradient(90deg, var(--mx-blue-line) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 95%); mask-image: linear-gradient(to left, #000 30%, transparent 95%); }
.mx-nf-curve { position: absolute; inset-inline-start: 0; bottom: 0; width: min(60%, 760px); height: 70%; opacity: .55; }
.mx-nf-curve .ax { fill: none; stroke: var(--mx-blue-ink-2); stroke-width: 1.2; opacity: .5; }
.mx-nf-curve .cv { fill: none; stroke: var(--mx-brand); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: mx-nf-draw 1.6s var(--mx-ease-out) .2s forwards; }
.mx-nf-curve .pt { fill: var(--mx-brand); opacity: 0; animation: mx-nf-pop .4s var(--mx-ease-out) 1.4s forwards; }
@keyframes mx-nf-draw { to { stroke-dashoffset: 0; } }
@keyframes mx-nf-pop { to { opacity: 1; } }
.mx-nf-glyph { position: absolute; font-family: "Cambria Math", Cambria, serif; color: var(--mx-blue-ink); opacity: .07; font-size: clamp(48px, 7vw, 110px); line-height: 1; animation: mx-nf-float 14s ease-in-out infinite alternate; }
.mx-nf-glyph.g1 { inset-inline-start: 6%; top: 8%; }
.mx-nf-glyph.g2 { inset-inline-start: 22%; top: 46%; animation-duration: 17s; animation-delay: -4s; }
.mx-nf-glyph.g3 { inset-inline-start: 38%; top: 6%; animation-duration: 12s; animation-delay: -7s; }
.mx-nf-glyph.g4 { inset-inline-start: 12%; bottom: 4%; animation-duration: 19s; }
.mx-nf-glyph.g5 { inset-inline-start: 30%; bottom: 10%; animation-duration: 15s; animation-delay: -2s; }
.mx-nf-glyph.g6 { inset-inline-start: 46%; top: 40%; animation-duration: 21s; animation-delay: -9s; }
@keyframes mx-nf-float { from { transform: translate3d(0, 0, 0) rotate(-4deg); } to { transform: translate3d(0, -18px, 0) rotate(5deg); } }
.mx-nf-hero-in { position: relative; }
.mx-nf-hero .mx-crumbs { color: var(--mx-blue-ink-2); margin-bottom: 18px; }
.mx-nf-hero .mx-crumbs a { color: var(--mx-blue-ink); }
.mx-nf-k { color: var(--mx-brand); font-weight: 700; font-size: var(--mx-t-small); margin: 0 0 10px; }
.mx-nf-hero .mx-h1 { color: #fff; max-width: 24ch; margin: 0 0 14px; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.15; text-wrap: balance; }
.mx-nf-lead { font-size: var(--mx-t-lead); line-height: 1.6; color: var(--mx-blue-ink); max-width: 60ch; margin: 0 0 18px; text-wrap: pretty; }
.mx-nf-hero-f { display: inline-block; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); color: var(--mx-brand); padding: 10px 18px; border-radius: var(--mx-radius-lg); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--mx-blue-line); margin: 0 0 18px; }
.mx-nf-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0 0 22px; color: var(--mx-blue-ink-2); }
.mx-nf-stats b { color: #fff; font-size: 1.25rem; margin-inline-end: 4px; }
.mx-nf-stats a { color: #fff; font-weight: 700; text-decoration-color: var(--mx-brand); text-underline-offset: .2em; }
.mx-nf-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-nf-hero .mx-btn-line, .mx-btn-ghost-light { color: #fff; box-shadow: inset 0 0 0 1px rgba(234, 241, 248, .45); background: transparent; }
.mx-nf-hero .mx-btn-line:hover, .mx-btn-ghost-light:hover { background: rgba(255, 255, 255, .08); }

/* ---------- sheet layout ---------- */
.mx-nf-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: clamp(24px, 3vw, 40px); padding-bottom: var(--mx-section); }
.mx-nf-toc, .mx-nf-main { min-width: 0; }
.mx-nf-toc { position: sticky; top: calc(var(--mx-header-h) + 16px); max-height: calc(100vh - var(--mx-header-h) - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mx-nf-toc-k { display: flex; align-items: center; gap: 10px; font-weight: 800; margin: 0 0 10px; }
.mx-nf-ring svg { width: 30px; height: 30px; transform: rotate(-90deg); display: block; }
.mx-nf-ring circle { fill: none; stroke: var(--mx-tone-2); stroke-width: 4; }
.mx-nf-ring circle.on { stroke: var(--mx-brand); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transition: stroke-dashoffset 200ms linear; }
.mx-nf-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mx-nf-toc ol a { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: var(--mx-radius); color: var(--mx-ink-2); text-decoration: none; font-size: .9375rem; line-height: 1.35; position: relative; transition: background var(--mx-t-hover) ease, color var(--mx-t-hover) ease; }
.mx-nf-toc ol a::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--mx-brand); transform: scaleY(0); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-nf-toc ol a .n { color: var(--mx-ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.mx-nf-toc ol a .c { color: var(--mx-ink-3); font-size: .8125rem; }
.mx-nf-toc ol a.is-on { background: var(--mx-brand-soft); color: var(--mx-ink); font-weight: 700; }
.mx-nf-toc ol a.is-on::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .mx-nf-toc ol a:hover { background: var(--mx-tone); color: var(--mx-ink); } }
.mx-nf-toc-cta { display: grid; gap: 2px; margin-top: 16px; padding: 14px 16px; border-radius: var(--mx-radius-lg); background: var(--mx-blue); color: var(--mx-blue-ink); text-decoration: none; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-nf-toc-cta small { color: var(--mx-blue-ink-2); }
.mx-nf-toc-cta b { color: #fff; font-size: 1.05rem; }
.mx-nf-toc-cta span { color: var(--mx-brand); font-weight: 700; font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .mx-nf-toc-cta:hover { transform: translateY(-2px); } }

.mx-nf-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.mx-nf-search { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; max-width: 460px; background: var(--mx-surface); border-radius: 999px; padding: 0 16px; box-shadow: inset 0 0 0 1px var(--mx-line); transition: box-shadow var(--mx-t-hover) ease; }
.mx-nf-search:focus-within { box-shadow: inset 0 0 0 2px var(--mx-focus); }
.mx-nf-search .mx-i { width: 20px; height: 20px; color: var(--mx-ink-3); flex: none; }
.mx-nf-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; padding: 12px 0; color: var(--mx-ink); outline: none; }
.mx-nf-tip { display: flex; align-items: center; gap: 6px; color: var(--mx-ink-3); font-size: .875rem; margin: 0; }
.mx-nf-tip .mx-i { width: 16px; height: 16px; }
.mx-nf-intro { color: var(--mx-ink-2); margin: 0 0 18px; max-width: 70ch; }
.mx-nf-code { display: flex; gap: 8px; align-items: flex-start; background: var(--mx-brand-soft); border-radius: var(--mx-radius-lg); padding: 12px 14px; margin: 0 0 18px; font-size: .9375rem; line-height: 1.6; }
.mx-nf-code .mx-i { width: 18px; height: 18px; flex: none; margin-top: 3px; }

/* sections */
.mx-nf-sec { background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); padding: clamp(16px, 2.4vw, 28px); margin-bottom: 18px; scroll-margin-top: calc(var(--mx-header-h) + 16px); }
.mx-nf-sec-h { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.mx-nf-sec-n { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--mx-blue); color: var(--mx-brand); font-weight: 800; font-variant-numeric: tabular-nums; }
.mx-nf-sec h2 { margin: 0; font-size: var(--mx-t-h3); font-weight: 800; line-height: 1.3; }
.mx-nf-sec-note { color: var(--mx-ink-2); margin: 6px 0 4px; font-size: .9375rem; line-height: 1.65; }
.mx-nf-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.mx-nf-row { position: relative; display: grid; grid-template-columns: minmax(150px, 36%) minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--mx-tone); border-radius: var(--mx-radius); transition: background var(--mx-t-hover) ease; }
.mx-nf-row:first-child { border-top: 0; }
.mx-nf-row::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--mx-brand); transform: scaleY(0); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-nf-row:hover { background: var(--mx-paper); } .mx-nf-row:hover::before { transform: scaleY(1); } }
.mx-nf-row.is-hit { background: var(--mx-brand-soft); }
.mx-nf-l { color: var(--mx-ink-2); font-size: .96875rem; line-height: 1.5; }
.mx-nf-fs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; justify-content: flex-end; }
.mx-nf-f { font-size: 1.125rem; line-height: 1.9; color: var(--mx-ink); background: transparent; border: 0; border-radius: 6px; padding: 2px 8px; cursor: copy; text-align: left; direction: ltr; unicode-bidi: isolate; transition: background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-nf-f:hover { background: var(--mx-tone); } }
.mx-nf-f:active { transform: scale(.97); }
.mx-nf-f.is-copied { background: #E3F4EA; box-shadow: inset 0 0 0 1px #9ED3B3; }
.mx-nf-fc { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.mx-nf-fc > small { color: var(--mx-ink-3); font-size: .8125rem; line-height: 1.3; text-align: center; max-width: 22ch; }
.mx-nf-n { flex-basis: 100%; text-align: right; color: var(--mx-ink-3); font-size: .875rem; line-height: 1.55; }
.mx-nf-mi { font-size: 1.05em; white-space: nowrap; }
.mx-nf-empty { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 18px; text-align: center; color: var(--mx-ink-2); }

/* the course banner in the middle */
.mx-nf-promo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; background: var(--mx-blue); color: var(--mx-blue-ink); border-radius: var(--mx-radius-lg); padding: clamp(18px, 3vw, 28px); margin: 6px 0 24px; position: relative; overflow: hidden; }
.mx-nf-promo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 160px at 12% 0%, rgba(245, 160, 0, .18), transparent 70%); pointer-events: none; }
.mx-nf-promo-art svg { width: 110px; height: 74px; display: block; }
.mx-nf-promo-art rect { fill: var(--mx-blue-2); stroke: var(--mx-blue-line); }
.mx-nf-promo-art .pl { fill: var(--mx-brand); transform-origin: 63px 41px; animation: mx-nf-pulse 2.4s var(--mx-ease-soft) infinite; }
.mx-nf-promo-art .bar { stroke: var(--mx-blue-line); stroke-width: 4; stroke-linecap: round; }
.mx-nf-promo-art .bar.on { stroke: var(--mx-brand); stroke-dasharray: 44; stroke-dashoffset: 44; }
.mx-nf-promo.is-in .bar.on { animation: mx-nf-fill 1.4s var(--mx-ease-out) .3s forwards; }
@keyframes mx-nf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes mx-nf-fill { to { stroke-dashoffset: 0; } }
.mx-nf-promo-k { margin: 0 0 4px; color: var(--mx-brand); font-weight: 800; font-size: .9375rem; }
.mx-nf-promo-h { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.mx-nf-promo-h b { color: #fff; }
.mx-nf-promo-b { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }

/* related tools, meta, more */
.mx-nf-labs { margin: 28px 0; }
.mx-nf-labs ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.mx-nf-labs a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); color: var(--mx-ink); text-decoration: none; transition: transform var(--mx-t-ui) var(--mx-ease-out), box-shadow var(--mx-t-ui) ease; }
.mx-nf-labs a > svg, .mx-nf-labs a > img { width: 44px; height: 44px; flex: none; }
.mx-nf-labs a span { display: grid; }
.mx-nf-labs small { color: var(--mx-ink-3); }
@media (hover: hover) and (pointer: fine) { .mx-nf-labs a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--mx-line), 0 10px 24px -14px rgba(13, 39, 66, .35); } }
.mx-nf-meta { color: var(--mx-ink-3); font-size: .9375rem; line-height: 1.7; border-top: 1px solid var(--mx-tone); padding-top: 16px; margin-top: 24px; }
.mx-nf-meta p { margin: 0 0 6px; }
.mx-nf-meta .mx-i { width: 16px; height: 16px; vertical-align: -3px; }
.mx-nf-meta a { color: var(--mx-ink); font-weight: 700; }
.mx-nf-more { margin-top: 32px; }
.mx-nf-more .mx-h3 { margin-bottom: 14px; }
.mx-nf-all { margin-top: 20px; }
.mx-nf-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 90; background: var(--mx-ink); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; transition: opacity var(--mx-t-ui) ease, transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-nf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.mx-nf-printfoot { display: none; }

/* ---------- cards (hub, more, home strip, course page) ---------- */
.mx-nf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.mx-nf-card a { display: flex; flex-direction: column; gap: 4px; height: 100%; text-decoration: none; color: var(--mx-ink); background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); padding: 0 0 16px; overflow: hidden; -webkit-user-drag: none; transition: transform var(--mx-t-ui) var(--mx-ease-out), box-shadow var(--mx-t-ui) ease; }
.mx-nf-card-f { position: relative; display: grid; place-items: center; min-height: 104px; padding: 14px 12px; margin-bottom: 10px; background-color: var(--mx-blue); background-image: linear-gradient(var(--mx-blue-line) 1px, transparent 1px), linear-gradient(90deg, var(--mx-blue-line) 1px, transparent 1px); background-size: 20px 20px; background-position: -1px -1px; color: var(--mx-brand); font-size: 1.2rem; overflow: hidden; }
.mx-nf-card-f bdi { max-width: 100%; text-align: center; transition: transform 400ms var(--mx-ease-soft); }
.mx-nf-card-f::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--mx-brand); transform: scaleX(0); transform-origin: right; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-nf-card-k { padding: 0 16px; color: var(--mx-brand-strong); font-size: .8125rem; font-weight: 700; }
.mx-nf-card-t { padding: 0 16px; font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.mx-nf-card-m { padding: 0 16px; color: var(--mx-ink-3); font-size: .875rem; }
@media (hover: hover) and (pointer: fine) {
	.mx-nf-card a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--mx-line), 0 16px 32px -18px rgba(13, 39, 66, .45); }
	.mx-nf-card a:hover .mx-nf-card-f bdi { transform: scale(1.06); }
	.mx-nf-card a:hover .mx-nf-card-f::after { transform: scaleX(1); }
}
.js .mx-nf-grid[data-stagger] > li { opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--mx-ease-out), transform 420ms var(--mx-ease-out); transition-delay: calc(min(var(--i, 0), 8) * 40ms); }
.js .mx-nf-grid[data-stagger].is-in > li { opacity: 1; transform: none; }
.mx-nf-rows[data-stagger] > li { transform: none; }
.js .mx-nf-rows[data-stagger] > li { opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--mx-ease-out), transform 340ms var(--mx-ease-out), background var(--mx-t-hover) ease; transition-delay: calc(min(var(--i, 0), 10) * 25ms), calc(min(var(--i, 0), 10) * 25ms), 0s; }
.js .mx-nf-rows[data-stagger].is-in > li { opacity: 1; transform: none; }

/* ---------- hub ---------- */
.mx-nf-hub { padding-bottom: var(--mx-section); }
.mx-nf-hub-search { max-width: 560px; background: #fff; }
.mx-nf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(20px, 3vw, 32px) 0 8px; }
.mx-nf-chips button { font: inherit; font-size: .9375rem; font-weight: 600; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--mx-surface); color: var(--mx-ink-2); box-shadow: inset 0 0 0 1px var(--mx-line); cursor: pointer; transition: background var(--mx-t-hover) ease, color var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-nf-chips button:active { transform: scale(.97); }
.mx-nf-chips button.is-on { background: var(--mx-ink); color: #fff; box-shadow: none; }
.mx-nf-group { margin-top: clamp(24px, 3vw, 40px); }
.mx-nf-group > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.mx-nf-group > h2 span { font-size: .875rem; font-weight: 700; color: var(--mx-ink-3); background: var(--mx-tone); border-radius: 999px; padding: 2px 10px; }
.mx-nf-hub-promo { margin-top: clamp(32px, 4vw, 56px); }
.mx-nf-faq { margin-top: clamp(32px, 4vw, 56px); max-width: 820px; }
.mx-nf-faq details { background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); padding: 14px 18px; margin-top: 10px; }
.mx-nf-faq summary { font-weight: 700; cursor: pointer; }
.mx-nf-faq p { margin: 10px 0 0; color: var(--mx-ink-2); line-height: 1.7; }

/* ---------- home strip + course page ---------- */
.mx-nf-home { background: var(--mx-paper); }
.mx-nf-home .mx-strip-item { flex-basis: clamp(230px, 22vw, 280px); }
.mx-nf-home .mx-nf-card a { box-shadow: 0 0 0 1px var(--mx-tone-2); }
.mx-course-nf ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mx-course-nf .mx-nf-card-f { min-height: 84px; font-size: 1.05rem; }
.mx-course-nf > p { color: var(--mx-ink-2); margin: 6px 0 0; }
.mx-tool-nf { margin: clamp(24px, 3vw, 36px) 0; }
.mx-search-nf { margin-top: clamp(28px, 4vw, 48px); }
.mx-search-nf > p { margin-top: 14px; }

/* ---------- phones ---------- */
@media (max-width: 980px) {
	.mx-nf-layout { grid-template-columns: minmax(0, 1fr); }
	.mx-nf-toc { position: static; max-height: none; overflow: visible; }
	.mx-nf-toc-k, .mx-nf-toc-cta { display: none; }
	.mx-nf-toc ol { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: calc(var(--mx-gutter) * -1); padding-inline: var(--mx-gutter); }
	.mx-nf-toc ol::-webkit-scrollbar { display: none; }
	.mx-nf-toc li { flex: none; }
	.mx-nf-toc ol a { display: flex; gap: 6px; white-space: nowrap; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); border-radius: 999px; padding: 7px 12px; }
	.mx-nf-toc ol a::before, .mx-nf-toc ol a .c { display: none; }
	.mx-nf-promo { grid-template-columns: minmax(0, 1fr); }
	.mx-nf-promo-art { display: none; }
}
@media (max-width: 640px) {
	.mx-nf-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 6px; }
	.mx-nf-fs { justify-content: flex-start; }
	.mx-nf-f { padding-inline: 4px; font-size: 1.0625rem; white-space: normal; overflow-wrap: anywhere; }
	.mx-nf-n { text-align: right; }
	.mx-nf-curve { width: 100%; opacity: .35; }
	.mx-nf-tip { display: none; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.mx-nf-glyph, .mx-nf-promo-art .pl { animation: none; }
	.mx-nf-curve .cv { animation: none; stroke-dashoffset: 0; }
	.mx-nf-curve .pt { animation: none; opacity: 1; }
	.mx-nf-promo .bar.on { animation: none !important; stroke-dashoffset: 0; }
	.js .mx-nf-grid[data-stagger] > li, .js .mx-nf-rows[data-stagger] > li { transform: none; transition: opacity 200ms ease; }
}

/* ---------- print / PDF: only the formulas ---------- */
@media print {
	@page { margin: 12mm; }
	body.mx { background: #fff !important; }
	.mx-header, .mx-footer, .mx-nf-toc, .mx-nf-tools, .mx-nf-promo, .mx-tool-cc, .mx-cf, .mx-nf-labs, .mx-nf-more, .mx-nf-all, .mx-nf-hero-bg, .mx-nf-hero-btns, .mx-nf-hero .mx-crumbs, .mx-nf-hero-f, .mx-nf-toast, .mx-nf-meta, [class*="whatsapp"], .mx-a11y, #pojo-a11y-toolbar { display: none !important; }
	.mx-nf-hero { background: #fff !important; color: #000 !important; padding: 0 0 6mm; }
	.mx-nf-hero .mx-h1 { color: #000 !important; font-size: 18pt; max-width: none; }
	.mx-nf-lead, .mx-nf-stats, .mx-nf-stats b, .mx-nf-stats a { color: #333 !important; font-size: 9.5pt; }
	.mx-nf-k { color: #000 !important; }
	.mx-nf-layout { display: block; padding: 0; }
	.mx-nf-sec { box-shadow: none; border: 1px solid #ccc; padding: 3mm 4mm; margin-bottom: 3mm; break-inside: avoid-page; }
	.mx-nf-sec-n { background: #000; color: #fff; width: 22px; height: 22px; font-size: 9pt; border-radius: 4px; }
	.mx-nf-sec h2 { font-size: 12pt; }
	.mx-nf-row { padding: 1.5mm 2mm; break-inside: avoid; opacity: 1 !important; transform: none !important; }
	.mx-nf-f { font-size: 10.5pt; line-height: 1.6; padding: 0 2px; }
	.mx-nf-l, .mx-nf-n, .mx-nf-sec-note { font-size: 9pt; color: #222; }
	.mx-nf-printfoot { display: block; text-align: center; font-size: 8pt; color: #555; margin-top: 4mm; }
}

/* ---------- practice mode + formulas that write themselves (24.10.2026) ---------- */
.mx-nf-quizbtn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--mx-ink); background: var(--mx-surface); border: 0; border-radius: 999px; padding: 9px 14px; box-shadow: inset 0 0 0 1px var(--mx-line); cursor: pointer; transition: background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-nf-quizbtn:active { transform: scale(.97); }
.mx-nf-sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--mx-tone-2); flex: none; transition: background var(--mx-t-ui) ease; }
.mx-nf-sw i { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-nf-quizbtn[aria-pressed="true"] { background: var(--mx-brand-soft); box-shadow: inset 0 0 0 1px var(--mx-brand); }
.mx-nf-quizbtn[aria-pressed="true"] .mx-nf-sw { background: var(--mx-brand); }
.mx-nf-quizbtn[aria-pressed="true"] .mx-nf-sw i { transform: translateX(-14px); }
.mx-nf-quizbar { position: sticky; top: calc(var(--mx-header-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: var(--mx-blue); color: var(--mx-blue-ink); border-radius: var(--mx-radius-lg); padding: 10px 16px; margin: 0 0 16px; box-shadow: 0 10px 24px -16px rgba(13, 39, 66, .6); }
.mx-nf-quizbar p { margin: 0; font-size: .9375rem; }
.mx-nf-quizbar b { color: var(--mx-brand); font-size: 1.1rem; }
.mx-nf-quizbar .mx-link-btn { color: #fff; }
.mx-nf-quizprog { flex: 1 1 120px; height: 6px; border-radius: 3px; background: var(--mx-blue-line); overflow: hidden; }
.mx-nf-quizprog i { display: block; height: 100%; background: var(--mx-brand); transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--mx-ease-out); }
.mx-nf-quizdone { flex-basis: 100%; font-weight: 700; color: #fff !important; }
.mx-nf-quizdone a { color: var(--mx-brand); }
.mx-nf-page.is-quiz .mx-nf-f { position: relative; }
.mx-nf-page.is-quiz .mx-nf-f:not(.is-shown) { color: transparent; cursor: pointer; min-width: 120px; }
.mx-nf-page.is-quiz .mx-nf-f:not(.is-shown)::after { content: "?  הקישו לגלות"; position: absolute; inset: 2px 0; display: grid; place-items: center; border-radius: 6px; font: 700 .8125rem/1 var(--mx-font); color: var(--mx-ink-3); background: repeating-linear-gradient(135deg, var(--mx-tone) 0 8px, var(--mx-paper) 8px 16px); box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-nf-page.is-quiz .mx-nf-f.is-shown { animation: mx-nf-show 420ms var(--mx-ease-out); }
@keyframes mx-nf-show { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mx-nf-page.is-quiz .mx-nf-fc > small, .mx-nf-page.is-quiz .mx-nf-n { visibility: visible; }
/* a formula writes itself, left to right, when its row comes in */
.js .mx-nf-rows[data-stagger] > li .mx-nf-f { clip-path: inset(0 100% 0 0); transition: clip-path 560ms var(--mx-ease-out), background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); transition-delay: calc(min(var(--i, 0), 10) * 25ms + 120ms), 0s, 0s; }
.js .mx-nf-rows[data-stagger].is-in > li .mx-nf-f { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
	.js .mx-nf-rows[data-stagger] > li .mx-nf-f { clip-path: none; transition: background var(--mx-t-hover) ease; }
	.mx-nf-page.is-quiz .mx-nf-f.is-shown { animation: none; }
}
@media print { .mx-nf-quizbtn, .mx-nf-quizbar { display: none !important; } .mx-nf-page.is-quiz .mx-nf-f { color: inherit !important; } .mx-nf-page.is-quiz .mx-nf-f::after { display: none !important; } .mx-nf-f { clip-path: none !important; } }
/* matrices: \mat{} in brackets, \vmat{} between bars (25.10.2026) */
.m-mat { display: inline-grid; grid-template-columns: repeat(var(--c), auto); column-gap: .7em; row-gap: .1em; vertical-align: middle; padding: .1em .35em; margin: 0 .15em; line-height: 1.25; text-align: center; border-inline: 1.5px solid currentColor; border-radius: 3px; position: relative; }
.m-mat:not(.m-vmat) { border-radius: 0; background: linear-gradient(currentColor, currentColor) left top / .3em 1.5px no-repeat, linear-gradient(currentColor, currentColor) left bottom / .3em 1.5px no-repeat, linear-gradient(currentColor, currentColor) right top / .3em 1.5px no-repeat, linear-gradient(currentColor, currentColor) right bottom / .3em 1.5px no-repeat; }
.m-vmat { border-radius: 0; }
/* formulas written in Hebrew words (\text{...}), e.g. accounting */
.mx-nf-f[dir="rtl"] { direction: rtl; text-align: right; }
.mx-nf-f[dir="rtl"] .m-tx { font-size: .9em; }

/* ---------- compact print (26.10.2026, owner: "נוח להדפסה, לא 200 דפים"): two columns on A4, a one-line head, sections
   may continue in the next column (only a single formula row is kept whole), small but readable type. Measured with
   print-count.cjs: 163 -> see deploy-log for the new total. Last in the file so it wins over the screen rules. ---------- */
@media print {
	@page { size: A4; margin: 9mm 9mm 10mm; }
	body.mx .mx-wrap { max-width: none; padding-inline: 0; }
	.mx-nf-hero { padding: 0 0 1.5mm !important; margin-bottom: 2mm; border-bottom: 1.2pt solid #000; min-height: 0 !important; }
	.mx-nf-hero-in { padding: 0 !important; }
	.mx-nf-hero .mx-h1 { font-size: 12.5pt !important; line-height: 1.25; margin: 0; }
	.mx-nf-k, .mx-nf-lead, .mx-nf-stats { display: none !important; }
	.mx-nf-intro { font-size: 8pt; line-height: 1.4; margin: 0 0 2mm; color: #222; }
	.mx-nf-main { column-count: 2; column-gap: 5mm; column-rule: .5pt solid #bbb; }
	.mx-nf-sec { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 0 0 2.5mm !important; break-inside: auto !important; }
	.mx-nf-sec-h { break-after: avoid; gap: 1.5mm; margin: 0 0 .6mm; padding-bottom: .5mm; border-bottom: .8pt solid #000; }
	.mx-nf-sec-n { width: auto !important; height: auto !important; background: none !important; color: #000 !important; font-size: 8pt !important; padding: 0; }
	.mx-nf-sec h2 { font-size: 9.5pt !important; line-height: 1.2; }
	.mx-nf-sec-note { font-size: 7.5pt !important; line-height: 1.35; margin: .4mm 0; }
	.mx-nf-rows { margin: 0; }
	.mx-nf-row { grid-template-columns: 22mm minmax(0, 1fr) !important; gap: 0 2mm !important; padding: .6mm 0 !important; border-top: .4pt solid #ddd; border-radius: 0; break-inside: avoid; }
	.mx-nf-row:first-child { border-top: 0; }
	.mx-nf-row::before { display: none; }
	.mx-nf-l { font-size: 7.5pt !important; line-height: 1.3; color: #222 !important; }
	.mx-nf-f { font-size: 9pt !important; line-height: 1.35 !important; padding: 0 !important; white-space: normal; overflow-wrap: anywhere; }
	.mx-nf-fc > small, .mx-nf-n { font-size: 6.8pt !important; line-height: 1.25 !important; color: #444 !important; }
	.mx-nf-printfoot { column-span: all; font-size: 7pt; margin-top: 2mm; }
	.mx-nf-code { font-size: 7.5pt !important; line-height: 1.35; padding: 1.2mm 2mm !important; margin: 0 0 2mm !important; background: none !important; border: .5pt solid #888; border-radius: 0; }
	.mx-nf-code .mx-i { width: 9pt; height: 9pt; }
}

/* dark hero: the shared .mx-btn-line rule in mx.css sets the text colour with !important, so the white here needs it too (26.10.2026, owner: 'שיעור לדוגמה' was invisible) */
.mx-nf-hero .mx-btn-line, .mx-btn-ghost-light { color: #fff !important; border-color: transparent; }
.mx-nf-hero .mx-btn-line .mx-i { color: #fff; }