/*
 * Components of the design system (docs/design/components). Prefix mt-.
 * Logical properties only and colors only from tokens (tests/test_css.py checks both).
 * Ported from docs/design/reference/bundle.css; the demo-stage scaffolding is left out.
 */
/*
 * Inside components the design resets headings, paragraphs and links (buttons keep their own colours) (the reference does it on its demo stage).
 * Article text keeps its normal flow: .mt-article and everything inside it is excluded. The selectors are built
 * to tie, not beat, a component's own rule (.mt-footer h4 and so on); this block comes first, so the component wins.
 */
[class*="mt-"] :is(h1, h2, h3, h4, p):where(:not(.mt-article *)) {
	margin: 0;
}
[class*="mt-"] :is(h1, h2, h3, h4):where(:not(.mt-article *)) {
	color: inherit;
}
[class*="mt-"] a:where(:not(.mt-link, .mt-btn, .mt-cover, .mt-chip, .mt-article *)) {
	color: inherit;
	text-decoration: none;
}
:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}
h1,
h2,
h3 {
	text-wrap: balance;
}
.mt-pad {
	padding: var(--space-6);
}
.mt-sec-gap {
	padding-block: var(--space-12);
}
.mt-stack>*+* {
	margin-block-start: var(--space-3);
}
.mt-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.mt-between {
	justify-content: space-between;
}
.mt-grid {
	display: grid;
	gap: var(--space-5);
}
.mt-g2 {
	grid-template-columns: repeat(2,1fr);
}
.mt-g3 {
	grid-template-columns: repeat(3,1fr);
}
.mt-g4 {
	grid-template-columns: repeat(4,1fr);
}
.mt-main-side {
	display: grid;
	grid-template-columns: minmax(0,1fr) 360px;
	gap: var(--space-8);
	align-items: start;
}
.mt-side-main {
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0,1fr);
	gap: var(--space-6);
	align-items: start;
}
.mt-filter-main {
	display: grid;
	grid-template-columns: 260px minmax(0,1fr);
	gap: var(--space-6);
	align-items: start;
}
@media(max-width:900px) {
	.mt-g3,
	.mt-g4 {
		grid-template-columns: repeat(2,1fr);
	}
	.mt-main-side,
	.mt-side-main,
	.mt-filter-main {
		grid-template-columns: 1fr;
	}
}
@media(max-width:560px) {
	.mt-g2,
	.mt-g3,
	.mt-g4 {
		grid-template-columns: 1fr;
	}
	.mt-wrap {
		padding-inline: var(--space-4);
	}
}

/* text */
.t-display {
	font-size: 56px;
	line-height: 72px;
	font-weight: 800;
}
.t-display-lg {
	font-size: 40px;
	line-height: 56px;
	font-weight: 800;
}
.t-h1 {
	font-size: 32px;
	line-height: 48px;
	font-weight: 800;
}
.t-h2 {
	font-size: 26px;
	line-height: 40px;
	font-weight: 700;
}
.t-h3 {
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
}
.t-h4 {
	font-size: 17px;
	line-height: 28px;
	font-weight: 700;
}
.t-lg {
	font-size: 18px;
	line-height: 34px;
}
.t-sm {
	font-size: 14px;
	line-height: 24px;
}
.t-cap {
	font-size: 13px;
	line-height: 22px;
}
.t-label {
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
}
.t-eyebrow {
	font-size: 13px;
	line-height: 20px;
	font-weight: 700;
	color: var(--brand);
}
.t-muted {
	color: var(--ink-muted);
}
.t-brand {
	color: var(--brand);
}
.t-center {
	text-align: center;
}
.ic {
	inline-size: 20px;
	block-size: 20px;
	flex: none;
	vertical-align: middle;
}
.ic-sm {
	inline-size: 16px;
	block-size: 16px;
}
.ic-lg {
	inline-size: 28px;
	block-size: 28px;
}
.mt-flip {
	transform: scaleX(-1);
}

/* buttons */
.mt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: var(--tap-target);
	padding-inline: var(--space-5);
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	background: var(--accent);
	color: var(--on-accent);
	white-space: nowrap;
}
.mt-btn:hover {
	background: var(--accent-hover);
}
.mt-btn--brand {
	background: var(--brand);
	color: var(--on-brand);
}
.mt-btn--brand:hover {
	background: var(--brand-hover);
}
.mt-btn--outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}
.mt-btn--outline:hover {
	background: var(--surface-300);
}
.mt-btn--ghost {
	background: transparent;
	color: var(--brand);
}
.mt-btn--ghost:hover {
	background: var(--brand-tint);
}
.mt-btn--on-deep {
	background: var(--highlight);
	color: var(--on-highlight);
}
.mt-btn--on-deep:hover {
	background: var(--highlight);
}
.mt-btn--sm {
	min-block-size: 36px;
	padding-inline: var(--space-3);
	font-size: 14px;
}
.mt-btn--lg {
	min-block-size: 52px;
	padding-inline: var(--space-8);
	font-size: 17px;
}
.mt-btn--block {
	display: flex;
	inline-size: 100%;
}
.mt-btn--icon {
	padding-inline: 0;
	inline-size: var(--tap-target);
}
.mt-btn[disabled],
.mt-btn--disabled {
	background: var(--surface-300);
	color: var(--ink-muted);
	border-color: var(--line);
	cursor: not-allowed;
}
.mt-btn--loading::before {
	content: "";
	inline-size: 16px;
	block-size: 16px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	animation: mt-spin .8s linear infinite;
}
@keyframes mt-spin {
	to { transform:rotate(360deg) }
}
@media(prefers-reduced-motion:reduce) {
	.mt-btn--loading::before,
	.mt-skel {
		animation: none;
	}
}
.mt-link {
	color: var(--brand);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* fields */
.mt-field {
	display: grid;
	gap: 6px;
}
.mt-field label {
	font-size: 14px;
	font-weight: 600;
}
.mt-input,
.mt-select,
.mt-textarea {
	inline-size: 100%;
	min-block-size: var(--tap-target);
	padding: 8px 14px;
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-md);
	background: var(--surface-200);
	font-size: 16px;
}
.mt-textarea {
	min-block-size: 120px;
	resize: vertical;
}
.mt-input::placeholder {
	color: var(--ink-muted);
}
.mt-hint {
	font-size: 13px;
	line-height: 22px;
	color: var(--ink-muted);
}
.mt-field--error .mt-input {
	border-color: var(--danger);
}
.mt-error {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 13px;
	color: var(--danger);
	font-weight: 600;
}
.mt-field--ok .mt-input {
	border-color: var(--success);
}
.mt-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 15px;
}
.mt-check input {
	inline-size: 22px;
	block-size: 22px;
	accent-color: var(--brand);
	flex: none;
	margin: 2px 0;
}

/* badges */
.mt-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	line-height: 22px;
	font-weight: 700;
	background: var(--surface-300);
	color: var(--ink);
}
.mt-badge--print {
	background: var(--type-print);
	color: var(--on-type);
}
.mt-badge--file {
	background: var(--type-file);
	color: var(--on-type);
}
.mt-badge--video {
	background: var(--type-video);
	color: var(--on-type);
}
.mt-badge--course {
	background: var(--type-course);
	color: var(--on-type);
}
.mt-badge--free {
	background: var(--highlight);
	color: var(--on-highlight);
}
.mt-badge--success {
	background: var(--success-tint);
	color: var(--success);
}
.mt-badge--danger {
	background: var(--danger-tint);
	color: var(--danger);
}
.mt-badge--warning {
	background: var(--warning-tint);
	color: var(--warning);
}
.mt-badge--info {
	background: var(--info-tint);
	color: var(--info);
}
.mt-badge--brand {
	background: var(--brand-tint);
	color: var(--brand);
}
.mt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 40px;
	padding-inline: 14px;
	border-radius: var(--radius-pill);
	border: 2px solid var(--line-strong);
	background: var(--surface-200);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.mt-chip[aria-pressed=true] {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
}

/* cover art (placeholder imagery: graph paper + glyph) */
.mt-cover {
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	background-color: var(--c,var(--brand));
	color: var(--cf, white);
	background-image: linear-gradient(color-mix(in srgb, white 13%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, white 13%, transparent) 1px,transparent 1px);
	background-size: 24px 24px;
	border-radius: var(--radius-md);
}
.mt-cover .g {
	font-family: var(--font-math);
	font-style: italic;
	font-size: 64px;
	line-height: 1;
	direction: ltr;
}
.mt-cover--wide {
	aspect-ratio: 16/9;
}
.mt-cover--book {
	aspect-ratio: 3/4;
	border-radius: 4px var(--radius-md) var(--radius-md) 4px;
	box-shadow: inset 10px 0 0 color-mix(in srgb, black 19%, transparent),var(--shadow-card);
}
.mt-cover--file {
	aspect-ratio: 3/4;
	clip-path: polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);
	border-radius: var(--radius-sm);
}
.mt-cover--layers {
	aspect-ratio: 16/9;
	box-shadow: -8px -8px 0 -2px var(--surface-300),-16px -16px 0 -4px var(--line);
}
.mt-cover .play {
	position: absolute;
	inset: auto;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, white 94%, transparent);
	color: var(--surface-deep);
	display: grid;
	place-items: center;
}
.mt-cover .dur {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-start: 8px;
	background: var(--scrim);
	color: white;
	font-size: 13px;
	padding: 0 8px;
	border-radius: var(--radius-sm);
}
.mt-cover .tl {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
}

/* product card */
.mt-pcard {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.mt-pcard:hover {
	box-shadow: var(--shadow-pop);
}
.mt-pcard .media {
	display: grid;
	place-items: center;
	padding: var(--space-3);
}
.mt-pcard .media .mt-cover--book,
.mt-pcard .media .mt-cover--file {
	inline-size: 62%;
}
.mt-pcard h3,
.mt-pcard h2 {
	font-size: 17px;
	line-height: 28px;
	font-weight: 700;
}
.mt-pcard .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 13px;
	color: var(--ink-muted);
}
.mt-pcard .meta span {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.mt-pcard .foot {
	margin-block-start: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block-start: var(--space-3);
	border-block-start: 1px solid var(--line);
}
.mt-price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 800;
	font-size: 19px;
}
.mt-price small {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-muted);
}
.mt-price--lg {
	font-size: 28px;
}
.mt-price--free {
	color: var(--ink);
}
.mt-was {
	text-decoration: line-through;
	color: var(--ink-muted);
	font-weight: 400;
	font-size: 14px;
}

/* header / nav */
.mt-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-header);
	background: var(--surface-200);
	border-block-end: 1px solid var(--line);
}
.mt-header .bar {
	block-size: var(--header-height);
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.mt-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 19px;
	color: var(--brand);
}
.mt-logo .mark {
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--radius-md);
	background: var(--brand);
	color: var(--on-brand);
	display: grid;
	place-items: center;
	font-family: var(--font-math);
	font-style: italic;
	font-size: 22px;
}
.mt-nav {
	display: flex;
	gap: var(--space-1);
	flex: 1;
}
.mt-nav a {
	padding: 8px 12px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
}
.mt-nav a:hover {
	background: var(--surface-300);
}
.mt-nav a[aria-current=page] {
	background: var(--brand-tint);
	color: var(--brand);
}
.mt-search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: 40px;
	padding-inline: 12px;
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface-100);
	color: var(--ink-muted);
	min-inline-size: 200px;
	font-size: 14px;
}
.mt-cartbtn {
	position: relative;
}
.mt-cartbtn .n {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	min-inline-size: 18px;
	block-size: 18px;
	border-radius: 9px;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	font-weight: 700;
}
.mt-crumbs {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 14px;
	color: var(--ink-muted);
	flex-wrap: wrap;
}
.mt-crumbs a {
	color: var(--brand);
	font-weight: 600;
}
.mt-footer {
	background: var(--surface-deep);
	color: var(--on-deep);
	padding-block: var(--space-12) var(--space-6);
	margin-block-start: var(--space-16);
}
.mt-footer a {
	opacity: .9;
	font-size: 14px;
}
.mt-footer h4 {
	font-size: 15px;
	margin-block-end: var(--space-3);
}
.mt-footer .cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-8);
}
.mt-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.mt-footer .legal {
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-4);
	border-block-start: 1px solid color-mix(in srgb, white 20%, transparent);
	font-size: 13px;
	opacity: .85;
}
.mt-trust {
	display: flex;
	gap: var(--space-6);
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--ink-muted);
}
.mt-tabbar {
	position: sticky;
	inset-block-end: 0;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	background: var(--surface-200);
	border-block-start: 1px solid var(--line);
}
.mt-tabbar a {
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 8px 0;
	font-size: 12px;
	color: var(--ink-muted);
}
.mt-tabbar a[aria-current=page] {
	color: var(--brand);
	font-weight: 700;
}

/* hero */
.mt-hero {
	background: var(--surface-deep);
	color: var(--on-deep);
	border-radius: var(--radius-xl);
	padding: var(--space-12);
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(color-mix(in srgb, white 7%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, white 7%, transparent) 1px,transparent 1px);
	background-size: 32px 32px;
}
.mt-hero .axis {
	position: absolute;
	inset-block: 0;
	inset-inline-end: var(--space-16);
	inline-size: 2px;
	background: color-mix(in srgb, white 25%, transparent);
}
.mt-pathcard {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-4);
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.mt-pathcard .ico {
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	background: var(--brand-tint);
	color: var(--brand);
	flex: none;
}

/* curriculum */
.mt-acc {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface-200);
	overflow: hidden;
}
.mt-acc>.hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--surface-300);
	font-weight: 700;
}
.mt-lesson {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
	border-block-start: 1px solid var(--line);
	font-size: 15px;
}
.mt-lesson .dur {
	margin-inline-start: auto;
	font-size: 13px;
	color: var(--ink-muted);
}
.mt-lesson--current {
	background: var(--brand-tint);
	font-weight: 700;
}
.mt-lesson--done .st {
	color: var(--success);
}
.mt-lesson--locked {
	color: var(--ink-muted);
}
.mt-lesson .st {
	inline-size: 24px;
	display: grid;
	place-items: center;
	flex: none;
}

/* player */
.mt-player {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: color-mix(in srgb, var(--surface-deep) 30%, black);
	color: white;
	display: grid;
	place-items: center;
	background-image: linear-gradient(color-mix(in srgb, white 8%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, white 8%, transparent) 1px,transparent 1px);
	background-size: 32px 32px;
}
.mt-player .big {
	inline-size: 72px;
	block-size: 72px;
	border-radius: 50%;
	background: color-mix(in srgb, white 95%, transparent);
	color: var(--surface-deep);
	display: grid;
	place-items: center;
}
.mt-player .ctl {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: linear-gradient(transparent,color-mix(in srgb, black 69%, transparent));
	font-size: 13px;
}
.mt-player .bar {
	flex: 1;
	block-size: 4px;
	background: color-mix(in srgb, white 33%, transparent);
	border-radius: 2px;
	position: relative;
}
.mt-player .bar i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--p,30%);
	background: white;
	border-radius: 2px;
}
.mt-player .lock {
	position: absolute;
	inset: 0;
	background: var(--scrim);
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	text-align: center;
	padding: var(--space-6);
}
.mt-math-fig {
	font-family: var(--font-math);
	font-style: italic;
	font-size: 30px;
	direction: ltr;
}

/* buy box */
.mt-buybox {
	position: sticky;
	inset-block-start: calc(var(--header-height) + 16px);
	z-index: var(--z-sticky);
	display: grid;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.mt-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 14px;
}
.mt-facts li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.mt-facts .ic {
	color: var(--brand);
	margin-block-start: 2px;
}
.mt-qty {
	display: inline-flex;
	align-items: center;
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.mt-qty button {
	inline-size: 40px;
	block-size: 40px;
	border: 0;
	background: var(--surface-300);
	cursor: pointer;
}
.mt-qty span {
	min-inline-size: 40px;
	text-align: center;
	font-weight: 700;
}
.mt-stock {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
}
.mt-stock--in {
	color: var(--success);
}
.mt-stock--low {
	color: var(--warning);
}
.mt-stock--out {
	color: var(--danger);
}
.mt-mobilebuy {
	position: sticky;
	inset-block-end: 0;
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3) var(--space-4);
	background: var(--surface-200);
	border-block-start: 1px solid var(--line);
	box-shadow: var(--shadow-pop);
}

/* progress */
.mt-progress {
	block-size: 8px;
	border-radius: var(--radius-pill);
	background: var(--surface-300);
	overflow: hidden;
}
.mt-progress i {
	display: block;
	block-size: 100%;
	inline-size: var(--p,0%);
	background: var(--brand);
	border-radius: var(--radius-pill);
}
.mt-progress--done i {
	background: var(--success);
}

/* alerts + empty */
.mt-alert {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4);
	border-radius: var(--radius-md);
	font-size: 15px;
}
.mt-alert--success {
	background: var(--success-tint);
	color: var(--success);
}
.mt-alert--danger {
	background: var(--danger-tint);
	color: var(--danger);
}
.mt-alert--warning {
	background: var(--warning-tint);
	color: var(--warning);
}
.mt-alert--info {
	background: var(--info-tint);
	color: var(--info);
}
.mt-alert strong {
	display: block;
}
.mt-alert p {
	color: var(--ink);
}
.mt-empty {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	text-align: center;
	padding: var(--space-12) var(--space-6);
	border: 2px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	background: var(--surface-200);
}
.mt-empty .fig {
	inline-size: 88px;
	block-size: 88px;
	border-radius: var(--radius-xl);
	background: var(--brand-tint);
	color: var(--brand);
	display: grid;
	place-items: center;
	font-family: var(--font-math);
	font-style: italic;
	font-size: 40px;
}
.mt-state {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	text-align: center;
	padding: var(--space-8) var(--space-6);
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.mt-state .seal {
	inline-size: 72px;
	block-size: 72px;
	border-radius: 50%;
	display: grid;
	place-items: center;
}
.mt-state--ok .seal {
	background: var(--success-tint);
	color: var(--success);
}
.mt-state--bad .seal {
	background: var(--danger-tint);
	color: var(--danger);
}
.mt-state--lock .seal {
	background: var(--warning-tint);
	color: var(--warning);
}
.mt-state--done .seal {
	background: var(--highlight);
	color: var(--on-highlight);
}
.mt-skel {
	border-radius: var(--radius-sm);
	background: linear-gradient(90deg,var(--surface-300),var(--line),var(--surface-300));
	background-size: 200% 100%;
	animation: mt-sh 1.4s linear infinite;
	block-size: 14px;
}
@keyframes mt-sh {
	to { background-position:-200% 0 }
}

/* steps / timeline / tables */
.mt-steps {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}
.mt-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ink-muted);
}
.mt-steps li+li::before {
	content: "";
	inline-size: 28px;
	block-size: 2px;
	background: var(--line-strong);
}
.mt-steps .n {
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 2px solid var(--line-strong);
	font-size: 13px;
}
.mt-steps .is-done {
	color: var(--success);
}
.mt-steps .is-done .n {
	background: var(--success);
	border-color: var(--success);
	color: var(--surface-200);
}
.mt-steps .is-now {
	color: var(--ink);
}
.mt-steps .is-now .n {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
}
.mt-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.mt-timeline li {
	position: relative;
	display: flex;
	gap: var(--space-3);
	padding-block-end: var(--space-5);
	padding-inline-start: 0;
}
.mt-timeline li::before {
	content: "";
	position: absolute;
	inset-block: 28px 0;
	inset-inline-start: 11px;
	inline-size: 2px;
	background: var(--line-strong);
}
.mt-timeline li:last-child::before {
	display: none;
}
.mt-timeline .dot {
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	border: 2px solid var(--line-strong);
	background: var(--surface-200);
	display: grid;
	place-items: center;
	flex: none;
}
.mt-timeline .is-done .dot {
	background: var(--success);
	border-color: var(--success);
	color: var(--surface-200);
}
.mt-timeline .is-now .dot {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand);
}
.mt-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--surface-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
}
.mt-table th {
	background: var(--surface-300);
	text-align: start;
	padding: 12px 16px;
	font-weight: 700;
}
.mt-table td {
	padding: 14px 16px;
	border-block-start: 1px solid var(--line);
}
.mt-card {
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
}
.mt-card--flat {
	box-shadow: none;
}
.mt-dl {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-4);
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}
.mt-dl .ico {
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--radius-md);
	background: var(--type-file);
	color: var(--on-type);
	display: grid;
	place-items: center;
	flex: none;
}
.mt-dl--off .ico {
	background: var(--surface-300);
	color: var(--ink-muted);
}
.mt-side {
	display: grid;
	gap: 4px;
	padding: var(--space-3);
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.mt-side a {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 15px;
}
.mt-side a[aria-current=page] {
	background: var(--brand-tint);
	color: var(--brand);
}
.mt-side--deep {
	background: var(--surface-deep);
	color: var(--on-deep);
	border-color: transparent;
}
.mt-avatar {
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: var(--brand);
	color: var(--on-brand);
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 22px;
	flex: none;
}
.mt-quote {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--surface-200);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.mt-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--warning);
}

/* article */
.mt-article {
	max-inline-size: var(--reading-width);
	font-size: 18px;
	line-height: 34px;
}
.mt-article h2 {
	margin-block: var(--space-8) var(--space-3);
}
.mt-eq {
	margin-block: var(--space-4);
	padding: var(--space-4);
	background: var(--surface-300);
	border-radius: var(--radius-md);
	text-align: center;
	font-family: var(--font-math);
	font-style: italic;
	font-size: 24px;
	direction: ltr;
	overflow-x: auto;
}
.mt-theorem {
	margin-block: var(--space-5);
	padding: var(--space-4) var(--space-5);
	background: var(--brand-tint);
	border-radius: var(--radius-md);
	border: 1px solid var(--brand);
}
.mt-theorem b {
	display: inline-block;
	background: var(--highlight);
	color: var(--on-highlight);
	padding: 0 10px;
	border-radius: var(--radius-sm);
	margin-inline-end: 8px;
}
.mt-toc {
	display: grid;
	gap: 6px;
	font-size: 14px;
}
.mt-toc a {
	color: var(--ink-muted);
	padding-inline-start: 12px;
	border-inline-start: 2px solid var(--line);
}
.mt-toc a[aria-current] {
	color: var(--brand);
	border-color: var(--brand);
	font-weight: 700;
}
.mt-pcard .media .mt-cover--wide,
.mt-pcard .media .mt-cover--layers {
	inline-size: 100%;
}
.mt-pcard .media .mt-cover--layers {
	inline-size: calc(100% - 16px);
	margin-inline-start: 16px;
	margin-block-start: 8px;
}
.mt-hero h1 {
	max-inline-size: 18ch;
}
.mt-facts {
	margin-block-start: var(--space-2);
}
.mt-cover--wide:has(.play) .g {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 14px;
	font-size: 30px;
}

/* The tags row of a product card and the small play button on a video cover (inline styles of the reference). */
.mt-pcard .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.mt-cover .play.play--sm {
	inline-size: 48px;
	block-size: 48px;
}

/* Header, drawer, footer and tab bar as the theme builds them (the reference shows only the desktop header). */
.mt-menubtn {
	display: none;
}
.mt-header .acct {
	display: contents;
}
.mt-header .bar {
	block-size: auto;
	min-block-size: var(--header-height);
}
.mt-search input {
	flex: 1;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	outline: 0;
	text-overflow: ellipsis;
}
.mt-search input::placeholder {
	color: var(--ink-muted);
}
.mt-search:focus-within {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}
.mt-cartcount[hidden],
.mt-error[hidden] {
	display: none;
}
.mt-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	background: var(--scrim);
}
.mt-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: calc(var(--z-drawer) + 1);
	display: grid;
	align-content: start;
	gap: var(--space-4);
	inline-size: min(88vw, 340px);
	padding: var(--space-4);
	overflow-y: auto;
	background: var(--surface-200);
	box-shadow: var(--shadow-pop);
}
.mt-drawer[hidden],
.mt-scrim[hidden] {
	display: none;
}
.mt-noscroll {
	overflow: hidden;
}
.mt-footer .cols {
	grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(9rem, 1fr));
}
.mt-footer .footer-logo {
	color: var(--on-deep);
}
.mt-footer .footer-logo .mark {
	background: var(--highlight);
	color: var(--on-highlight);
}
.mt-footer .foot-title {
	margin-block-end: var(--space-3);
	font-size: 15px;
	line-height: 28px;
	font-weight: 700;
}
.mt-footer .tagline {
	margin-block-start: 12px;
	max-inline-size: 34ch;
	opacity: 0.9;
}
.mt-tabbar {
	display: none;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-template-columns: none;
	z-index: var(--z-sticky);
}
@media (max-width: 900px) {
	.mt-nav,
	.mt-header .acct {
		display: none;
	}
	.mt-menubtn {
		display: inline-flex;
	}
	.mt-header .bar {
		flex-wrap: wrap;
		gap: var(--space-2);
		padding-block: 8px;
	}
	.mt-header .mt-logo {
		flex: 1;
		justify-content: center;
	}
	.mt-header .mt-search {
		order: 5;
		flex-basis: 100%;
		min-inline-size: 0;
		min-block-size: var(--tap-target);
	}
	.mt-search input {
		align-self: stretch;
	}
	.mt-footer ul {
		gap: 0;
	}
	.mt-footer ul a {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--tap-target);
	}
	.mt-tabbar {
		display: grid;
	}
}
@media (max-width: 700px) {
	.mt-footer .cols {
		grid-template-columns: 1fr;
	}
}

/*
 * A button made from a link (<a class="mt-btn">). The base styles underline links and recolour them on hover; a button does
 * neither. The hover rules are one step stronger than a:hover and come in the order generic first, variant last.
 */
a.mt-btn,
a.mt-cover {
	text-decoration: none;
}
a.mt-btn:hover {
	color: var(--on-accent);
}
a.mt-btn--brand:hover {
	color: var(--on-brand);
}
a.mt-btn--outline:hover {
	color: var(--ink);
}
a.mt-btn--ghost:hover {
	color: var(--brand);
}
a.mt-btn--on-deep:hover {
	color: var(--on-highlight);
}

/* Pages: the heading block, the search field that stands alone, the pagination and a cover with a picture. */
.mt-page {
	padding-block: var(--space-8) var(--space-12);
	display: grid;
	gap: var(--space-6);
}
.mt-pagehead {
	display: grid;
	gap: var(--space-3);
}
.mt-search--page {
	max-inline-size: 520px;
	padding-inline-end: 4px;
}
.mt-cover img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--tap-target);
	min-block-size: var(--tap-target);
	padding-inline: var(--space-3);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface-200);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}
.navigation.pagination a.page-numbers:hover {
	background: var(--surface-300);
}
.navigation.pagination .page-numbers.current {
	border-color: var(--brand);
	background: var(--brand);
	color: var(--on-brand);
}
.navigation.pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* A chip made from a link (a filter that is an address; the chosen one has aria-current, since links cannot be pressed). Same rules as a link-button: no underline, no recolour on hover. */
a.mt-chip {
	color: var(--ink);
	text-decoration: none;
}
a.mt-chip:hover {
	color: var(--ink);
	background: var(--surface-300);
}
a.mt-chip[aria-current="true"],
a.mt-chip[aria-current="true"]:hover {
	color: var(--on-brand);
	background: var(--brand);
}

/* The bar fixed to the bottom of a phone on a product page: above the tab bar, hidden on a wide screen. */
.mt-mobilebuy {
	display: none;
}
@media (max-width: 900px) {
	.mt-mobilebuy {
		display: flex;
		bottom: var(--mt-tabbar-height, 66px);
		z-index: var(--z-sticky);
	}
	.mt-buybox {
		position: static;
	}
}

/* The wider buy column of the PDF and printed-book pages; one column again on a small screen. */
.mt-main-side--wide {
	grid-template-columns: minmax(0, 1fr) 380px;
}
@media (max-width: 900px) {
	.mt-main-side--wide {
		grid-template-columns: 1fr;
	}
}

/* Home and teacher pages. */
.mt-home {
	gap: var(--space-12);
}
.mt-hero .mt-btn--outline {
	color: var(--on-deep);
	border-color: var(--on-deep);
}
/* On the dark hero the hover background is light, so the text turns dark with it. */
.mt-hero a.mt-btn--outline:hover {
	color: var(--ink);
}
.mt-main-side--teacher {
	grid-template-columns: minmax(0, 1fr) 340px;
}
@media (max-width: 900px) {
	.mt-main-side--teacher {
		grid-template-columns: 1fr;
	}
}

/* The trap field of the contact form: out of sight for people and for screen readers (it is aria-hidden), in the page for programs. */
.mt-trap {
	position: absolute;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* Formulas drawn by MathJax: always left to right and isolated from the Persian text around them. The page's rule that makes
   pictures fit their box must not squeeze the formula's own size. */
mjx-container {
	direction: ltr;
	unicode-bidi: isolate;
}
mjx-container svg {
	max-inline-size: none;
	block-size: revert;
}
mjx-container[display="true"] {
	margin-block: var(--space-4);
	padding: var(--space-4);
	overflow-x: auto;
	border-radius: var(--radius-md);
	background: var(--surface-300);
	text-align: center;
}

/* The article page: text and a side column with the table of contents and the related course. */
.mt-main-side--article {
	grid-template-columns: minmax(0, 1fr) 300px;
}
.mt-aside-sticky {
	position: sticky;
	inset-block-start: calc(var(--header-height) + var(--space-4));
}
.mt-toc a.mt-toc--sub {
	padding-inline-start: 24px;
}
.mt-toc a:hover {
	color: var(--brand);
}
@media (max-width: 900px) {
	.mt-main-side--article {
		grid-template-columns: 1fr;
	}
	.mt-aside-sticky {
		position: static;
	}
}