:root {
    --ml-ink: #172033;
    --ml-muted: #596579;
    --ml-paper: #fffef9;
    --ml-blue: #3157d5;
    --ml-purple: #7c3aed;
    --ml-orange: #ed6b2d;
    --ml-green: #118868;
    --ml-yellow: #f5c451;
    --ml-border: rgba(37, 55, 94, 0.13);
}

html { scroll-behavior: smooth; }
body.ml-course-page { overflow-x: hidden; color: var(--ml-ink); background: #f5f2e9; }
.ml-course-page .navbar .container { width: min(1240px, 94vw); }
.ml-course-shell { width: min(1180px, 92vw); margin: 0 auto; }

.ml-breadcrumb { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; color: rgba(255,255,255,.65); font-size: .8rem; }
.ml-breadcrumb a { color: inherit; }
.ml-lesson-hero { padding: 5rem 0 3.3rem; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(245,196,81,.28), transparent 24%), radial-gradient(circle at 10% 75%, rgba(45,212,191,.16), transparent 24%), linear-gradient(145deg,#121b32,#24396c 60%,#493180); }
.ml-category-pill { display: inline-flex; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: #fde68a; background: rgba(255,255,255,.08); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ml-lesson-count { margin: 1.4rem 0 .35rem; color: rgba(255,255,255,.58); font-size: .8rem; }
.ml-lesson-hero h1 { max-width: 900px; margin: 0; font-size: clamp(3rem,8vw,6.2rem); line-height: .98; letter-spacing: -.065em; }
.ml-lesson-idea { max-width: 850px; margin-top: 1.2rem; color: rgba(255,255,255,.8); font-size: clamp(1.05rem,2vw,1.3rem); line-height: 1.65; }
.ml-hero-route { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.ml-hero-route span { padding: .55rem .72rem; border-radius: 8px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.07); font-size: .7rem; font-weight: 650; }
.ml-hero-route .active { color: #253660; background: #fff; }

.ml-lesson-layout { display: grid; grid-template-columns: 225px minmax(0,1fr); gap: 3.5rem; padding: 4rem 0 6rem; }
.ml-lesson-sidebar { position: sticky; top: 105px; align-self: start; display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--ml-border); border-radius: 16px; background: rgba(255,255,255,.78); }
.ml-lesson-sidebar strong { margin: .2rem .45rem .55rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.ml-lesson-sidebar a { padding: .55rem .5rem; border-radius: 8px; color: var(--ml-muted); font-size: .75rem; }
.ml-lesson-sidebar a:hover { color: var(--ml-blue); background: #eef2ff; }
.ml-lesson-content { min-width: 0; }
.ml-lesson-section { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 1.3rem; padding: 1.2rem 0 4.6rem; scroll-margin-top: 110px; }
.ml-lesson-section + .ml-lesson-section { padding-top: 4.2rem; border-top: 1px solid var(--ml-border); }
.ml-step-number { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: #fff; background: var(--ml-blue); font-size: .75rem; font-weight: 750; }
.ml-section-kicker { margin: 0 0 .45rem; color: var(--ml-orange); font-size: .72rem; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.ml-lesson-section h2 { margin: 0 0 1rem; font-size: clamp(1.9rem,4vw,3.1rem); line-height: 1.08; letter-spacing: -.045em; }
.ml-lesson-section p { color: var(--ml-muted); line-height: 1.78; }
.ml-large-copy { max-width: 760px; font-size: clamp(1.15rem,2vw,1.4rem); }
.ml-story-section { padding: 2rem; border: 1px solid rgba(237,107,45,.2); border-radius: 22px; background: #fff7ed; }

.ml-memory-card,.ml-warning-card { display: flex; gap: 1rem; margin-top: 1.3rem; padding: 1.15rem; border-radius: 14px; }
.ml-memory-card { color: #614d09; background: #fff6cf; }
.ml-warning-card { align-items: flex-start; color: #8b2c0e; background: #fff0e8; }
.ml-memory-card i,.ml-warning-card i { margin-top: .15rem; }
.ml-memory-card strong { display: block; }
.ml-memory-card p,.ml-warning-card p { margin: .2rem 0 0; color: inherit; }

.ml-io-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .7rem; align-items: stretch; }
.ml-io-flow > div { min-height: 130px; padding: 1.1rem; border: 1px solid var(--ml-border); border-radius: 15px; background: #fff; }
.ml-io-flow span,.ml-io-flow strong { display: block; }
.ml-io-flow span { margin-bottom: .45rem; color: var(--ml-blue); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ml-io-flow strong { font-size: .9rem; line-height: 1.55; }
.ml-io-flow > i { align-self: center; color: var(--ml-orange); }
.ml-dry-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: dryrun; }
.ml-dry-steps li { position: relative; padding: 2.7rem 1rem 1rem; border-radius: 13px; color: var(--ml-muted); background: #ece9df; font-size: .82rem; counter-increment: dryrun; }
.ml-dry-steps li::before { content: counter(dryrun); position: absolute; top: .75rem; left: 1rem; color: var(--ml-purple); font-size: .7rem; font-weight: 800; }

.ml-paper-example { position: relative; padding: 2rem; border: 1px solid #d8d1be; border-radius: 5px; background: repeating-linear-gradient(#fffef9,#fffef9 31px,#dbe6f5 32px); box-shadow: 0 18px 45px -38px #172033; }
.ml-paper-example::before { content: ''; position: absolute; top: 0; bottom: 0; left: 45px; width: 1px; background: #f4a0a0; }
.ml-paper-example > span,.ml-paper-example > p { position: relative; margin-left: 30px; }
.ml-paper-example > span { color: var(--ml-orange); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.ml-paper-example > p { color: #263449; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; line-height: 2; }

.ml-interactive-demo { min-height: 280px; padding: 1.4rem; border: 1px solid rgba(49,87,213,.16); border-radius: 20px; background: #fff; box-shadow: 0 28px 65px -58px #172033; }
.ml-lab-instruction { max-width: 720px; }
.ml-demo-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.ml-demo-button,.ml-quiz-card button { padding: .62rem .85rem; border: 1px solid rgba(49,87,213,.22); border-radius: 9px; color: var(--ml-blue); background: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ml-demo-button.active,.ml-demo-button:hover,.ml-quiz-card button:hover { color: #fff; background: var(--ml-blue); }
.ml-demo-grid { display: grid; gap: 4px; width: min(100%,360px); margin: 1rem auto; }
.ml-demo-cell { display: grid; aspect-ratio: 1; place-items: center; border-radius: 5px; color: #263449; background: #e6edff; font-size: .75rem; font-weight: 700; }
.ml-demo-cell.active { color: #fff; background: var(--ml-orange); }
.ml-demo-cell.result { color: #fff; background: var(--ml-green); }
.ml-demo-result { margin-top: 1rem; padding: 1rem; border-radius: 12px; color: #24304a; background: #edf1fb; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .8rem; line-height: 1.7; }
.ml-demo-slider { display: grid; grid-template-columns: 130px 1fr 70px; gap: .8rem; align-items: center; margin: 1rem 0; }
.ml-demo-slider label { font-size: .8rem; font-weight: 700; }
.ml-demo-slider input { width: 100%; accent-color: var(--ml-blue); }
.ml-demo-slider output { padding: .4rem; border-radius: 7px; color: var(--ml-blue); background: #edf1ff; text-align: center; font-weight: 700; }
.ml-demo-bars { display: grid; gap: .65rem; margin-top: 1rem; }
.ml-demo-bar { display: grid; grid-template-columns: 120px 1fr 65px; gap: .7rem; align-items: center; font-size: .75rem; }
.ml-demo-bar-track { overflow: hidden; height: 18px; border-radius: 99px; background: #e5e7eb; }
.ml-demo-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--ml-blue),var(--ml-purple)); transition: width .2s ease; }
.ml-wave-canvas { width: 100%; height: 220px; border: 1px solid var(--ml-border); border-radius: 12px; background: #fbfdff; }
.ml-shape-stage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; align-items: center; }
.ml-shape-box { min-height: 130px; display: grid; place-items: center; padding: 1rem; border-radius: 15px; text-align: center; background: #eef2ff; }
.ml-shape-box strong,.ml-shape-box span { display: block; }
.ml-shape-box strong { color: var(--ml-purple); font-size: 1.15rem; }
.ml-shape-box span { margin-top: .3rem; color: var(--ml-muted); font-size: .72rem; }

.ml-quiz-card { padding: 1.5rem; border: 1px solid rgba(17,136,104,.2); border-radius: 16px; background: #ecfdf5; }
.ml-quiz-card strong { display: block; font-size: 1.05rem; line-height: 1.6; }
.ml-quiz-card button { margin-top: 1rem; color: var(--ml-green); border-color: rgba(17,136,104,.3); }
.ml-quiz-card p { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(17,136,104,.18); color: #12634f; font-weight: 650; }
.ml-project-last { margin-top: 1rem; padding: 2rem; border: 1px solid rgba(124,58,237,.18)!important; border-radius: 22px; background: #f3efff; }
.ml-project-button { display: inline-flex; margin-top: .8rem; padding: .75rem 1rem; border-radius: 10px; color: #fff; background: var(--ml-purple); font-size: .8rem; font-weight: 700; }
.ml-next-lesson { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.ml-next-lesson a { padding: 1.2rem; border: 1px solid var(--ml-border); border-radius: 14px; background: #fff; }
.ml-next-lesson a:last-child { text-align: right; }
.ml-next-lesson span,.ml-next-lesson strong { display: block; }
.ml-next-lesson span { color: var(--ml-muted); font-size: .72rem; }
.ml-next-lesson strong { margin-top: .25rem; color: var(--ml-blue); }
.ml-course-footer { padding: 2.5rem; color: rgba(255,255,255,.7); background: #121b32; text-align: center; }

/* Course roadmap */
.ml-roadmap-hero { padding: 5.5rem 0 4rem; color: #fff; background: radial-gradient(circle at 90% 18%,rgba(245,196,81,.3),transparent 23%),linear-gradient(145deg,#111a31,#24386b 62%,#443078); }
.ml-roadmap-hero h1 { max-width: 930px; margin: .8rem 0 1.1rem; font-size: clamp(3rem,7vw,5.8rem); line-height: 1; letter-spacing: -.06em; }
.ml-roadmap-hero p { max-width: 800px; color: rgba(255,255,255,.78); font-size: 1.12rem; }
.ml-roadmap-main { padding: 4rem 0 6rem; }
.ml-roadmap-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.2rem; margin-bottom: 4rem; }
.ml-roadmap-intro > div { padding: 1.5rem; border: 1px solid var(--ml-border); border-radius: 18px; background: #fff; }
.ml-roadmap-intro h2 { font-size: clamp(2rem,4vw,3.2rem); letter-spacing: -.04em; }
.ml-roadmap-rules { display: grid; gap: .7rem; }
.ml-roadmap-rule { display: flex; gap: .75rem; align-items: flex-start; color: var(--ml-muted); font-size: .85rem; }
.ml-roadmap-rule strong { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #fff; background: var(--ml-orange); }
.ml-module { margin-top: 4rem; scroll-margin-top: 110px; }
.ml-module-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.ml-module-number { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: #fff; background: var(--ml-blue); font-weight: 750; }
.ml-module-head h2,.ml-module-head p { margin: 0; }
.ml-module-head p { color: var(--ml-muted); font-size: .82rem; }
.ml-lesson-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.ml-roadmap-card { display: flex; min-height: 210px; flex-direction: column; padding: 1.25rem; border: 1px solid var(--ml-border); border-radius: 17px; background: #fff; box-shadow: 0 24px 55px -52px #172033; }
.ml-roadmap-card:hover { transform: translateY(-3px); border-color: rgba(49,87,213,.35); }
.ml-roadmap-card small { color: var(--ml-orange); font-weight: 700; }
.ml-roadmap-card h3 { margin: .45rem 0; font-size: 1.25rem; }
.ml-roadmap-card p { color: var(--ml-muted); font-size: .82rem; line-height: 1.55; }
.ml-roadmap-card span { margin-top: auto; color: var(--ml-blue); font-size: .78rem; font-weight: 750; }

@media (max-width: 900px) {
    .ml-lesson-layout { grid-template-columns: 1fr; }
    .ml-lesson-sidebar { position: static; grid-template-columns: repeat(4,minmax(0,1fr)); }
    .ml-lesson-sidebar strong { grid-column: 1/-1; }
    .ml-lesson-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .ml-lesson-sidebar { display: none; }
    .ml-lesson-section,.ml-story-section,.ml-project-last { grid-template-columns: 1fr; padding-left: 1rem; padding-right: 1rem; }
    .ml-io-flow { grid-template-columns: 1fr; }
    .ml-io-flow > i { transform: rotate(90deg); justify-self: center; }
    .ml-dry-steps,.ml-shape-stage { grid-template-columns: 1fr; }
    .ml-next-lesson,.ml-roadmap-intro { grid-template-columns: 1fr; }
    .ml-demo-slider { grid-template-columns: 1fr 70px; }
    .ml-demo-slider input { grid-column: 1/-1; }
}

/* Module 01 source-complete editorial edition */
.ml-source-edition {
    --source-navy: #15243a;
    --source-blue: #355e8c;
    --source-cyan: #4b8e99;
    --source-coral: #c86f52;
    --source-cream: #f7f4ed;
    --source-rule: #d7dde4;
    background: #eef1f4;
}

.ml-source-edition .ml-lesson-hero {
    position: relative;
    padding: 3rem 0 2.6rem;
    color: var(--source-navy);
    background: #f8f9fb;
    border-bottom: 1px solid var(--source-rule);
}

.ml-source-edition .ml-lesson-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--source-navy) 0 38%, var(--source-cyan) 38% 68%, var(--source-coral) 68%);
}

.ml-source-edition .ml-breadcrumb,
.ml-source-edition .ml-breadcrumb a,
.ml-source-edition .ml-lesson-count,
.ml-source-edition .ml-lesson-idea { color: #5d6876; }
.ml-source-edition .ml-category-pill { color: var(--source-blue); border-color: #b9c8d7; background: #edf3f8; }
.ml-source-edition .ml-lesson-hero h1 { color: var(--source-navy); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.15rem,4vw,3.15rem); }
.ml-source-edition .ml-lesson-idea { max-width: 720px; font-size: 1.02rem; }
.ml-source-edition .ml-hero-route { display: none; }
.ml-source-edition .ml-lesson-layout { grid-template-columns: 205px minmax(0,900px); gap: 2.7rem; padding-top: 2.6rem; }
.ml-source-edition .ml-lesson-sidebar { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }

.ml-module-sequence {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    margin-bottom: 1rem;
    border: 1px solid var(--source-rule);
    background: #fff;
}
.ml-module-sequence a { display: flex; gap: .55rem; align-items: center; padding: .7rem .65rem; color: #66717e; border-right: 1px solid var(--source-rule); font-size: .68rem; line-height: 1.25; }
.ml-module-sequence a:last-child { border-right: 0; }
.ml-module-sequence a span { color: #98a3ae; font: 600 .6rem ui-monospace,monospace; }
.ml-module-sequence a.active { color: #fff; background: var(--source-navy); }
.ml-module-sequence a.active span { color: #9ecbd0; }

.ml-source-intro { display: grid; grid-template-columns: 90px 1fr; gap: .7rem 1.2rem; margin-bottom: 1.2rem; padding: 1.15rem 1.3rem; border: 1px solid #d8d2c5; background: var(--source-cream); }
.ml-source-intro > span { grid-row: 1 / 3; padding-top: .15rem; color: var(--source-coral); font: 700 .65rem ui-monospace,monospace; letter-spacing: .08em; text-transform: uppercase; }
.ml-source-intro p { margin: 0; color: #4a5360; font-size: .82rem; line-height: 1.6; }
.ml-source-intro strong { color: var(--source-navy); font-size: .75rem; letter-spacing: .025em; }

.ml-source-visual { margin-bottom: 3rem; overflow: hidden; border: 1px solid #cbd3dc; background: #fff; }
.ml-source-visual-head { display: grid; grid-template-columns: 1fr 290px; gap: 2rem; padding: 1.25rem 1.4rem; color: #fff; background: var(--source-navy); }
.ml-source-visual-head span { color: #91c5cb; font: 650 .61rem ui-monospace,monospace; letter-spacing: .08em; text-transform: uppercase; }
.ml-source-visual-head h2 { margin: .25rem 0 0; color: #fff; font-family: Georgia,'Times New Roman',serif; font-size: 1.45rem; font-weight: 500; }
.ml-source-visual-head p { align-self: center; margin: 0; color: #c7d0dc; font-size: .72rem; line-height: 1.55; }
.ml-visual-controls { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem 1.2rem; }
.ml-visual-controls button { padding: .48rem .68rem; border: 1px solid #b9c4d0; color: var(--source-blue); background: #fff; font: 650 .7rem Inter,sans-serif; cursor: pointer; }
.ml-visual-controls button:hover,.ml-visual-controls button.active { color: #fff; border-color: var(--source-blue); background: var(--source-blue); }
.ml-visual-controls button:disabled { opacity: .38; cursor: default; }

.ml-tensor-stage { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 260px; border-top: 1px solid var(--source-rule); }
.ml-tensor-object { display: grid; place-items: center; padding: 2rem; background: linear-gradient(#eef2f6 1px,transparent 1px),linear-gradient(90deg,#eef2f6 1px,transparent 1px),#fbfcfd; background-size: 24px 24px; }
.ml-tensor-stage aside { display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; border-left: 1px solid var(--source-rule); }
.ml-tensor-stage aside span,.ml-channel-lab aside>span { color: #84909d; font: 650 .62rem ui-monospace,monospace; text-transform: uppercase; }
.ml-tensor-stage aside strong { margin: .35rem 0; color: var(--source-navy); font: 600 1.15rem ui-monospace,monospace; }
.ml-tensor-stage aside p,.ml-channel-lab aside p { color: #5a6572; font-size: .75rem; line-height: 1.55; }
.ml-tensor-object .scalar { display: grid; width: 70px; height: 70px; place-items: center; color: #fff; background: var(--source-coral); font: 600 1.3rem ui-monospace,monospace; }
.ml-tensor-object .vector { display: flex; gap: 4px; }
.ml-tensor-object .vector b,.ml-tensor-object .matrix b { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #9fb0c2; color: var(--source-navy); background: #fff; font: 600 .8rem ui-monospace,monospace; }
.ml-tensor-object .matrix { display: grid; grid-template-columns: repeat(4,44px); gap: 4px; }
.tensor-stack { position: relative; width: 170px; height: 130px; }
.tensor-stack i { position: absolute; width: 115px; height: 92px; border: 2px solid var(--source-blue); background: rgba(75,142,153,.13); transform: translate(calc(var(--i,0)*18px),calc(var(--i,0)*-13px)); }
.tensor-stack i:nth-child(1){--i:0}.tensor-stack i:nth-child(2){--i:1}.tensor-stack i:nth-child(3){--i:2}
.batch-stack { display: flex; gap: 2.5rem; }

.ml-channel-lab { display: grid; grid-template-columns: 1fr 260px; border-top: 1px solid var(--source-rule); }
.ml-channel-lab aside { padding: 1.4rem; border-left: 1px solid var(--source-rule); background: #f7f9fb; }
.ml-channel-lab aside strong { display: block; margin: .4rem 0 1rem; color: var(--source-navy); font: 600 1.15rem ui-monospace,monospace; }
.ml-channel-lab aside code { display: block; padding: .8rem; color: #fff; background: var(--source-navy); font-size: .85rem; }
.ml-channel-plane { display: grid; grid-template-columns: repeat(2,105px)!important; gap: 5px; justify-content: center; padding: 1rem 2rem 2rem; }
.ml-channel-plane button { display: grid; width: 105px; aspect-ratio: 1; place-items: center; border: 2px solid transparent; color: #fff; background: color-mix(in srgb,var(--channel-color) var(--cell-strength),#e7ebef); font: 650 .8rem ui-monospace,monospace; cursor: pointer; }
.ml-channel-plane button.selected { border-color: #17243a; box-shadow: inset 0 0 0 3px #fff; }

.ml-conv-lab { display: grid; grid-template-columns: 1fr auto .8fr auto .65fr; gap: .9rem; align-items: center; padding: 1.4rem; border-top: 1px solid var(--source-rule); background: #f8fafc; }
.ml-conv-lab>div>span { display: block; margin-bottom: .5rem; color: #778491; font: 650 .61rem ui-monospace,monospace; text-align: center; text-transform: uppercase; }
.ml-mini-grid { display: grid; gap: 3px; justify-content: center; }
.ml-mini-grid button { width: 38px; height: 38px; border: 1px solid #bbc5cf; color: #334154; background: #fff; font: 600 .72rem ui-monospace,monospace; }
.ml-mini-grid button.selected { color: #fff; border-color: var(--source-coral); background: var(--source-coral); }
.ml-mini-grid.kernel button.negative { color: #fff; background: var(--source-blue); }
.ml-mini-grid.output button.selected { color: #fff; background: var(--source-cyan); }
.ml-conv-symbol { color: #718092; font: 400 1.3rem Georgia,serif; text-align: center; }
.ml-conv-symbol small { display: block; margin-top: .3rem; font: .55rem Inter,sans-serif; }
.ml-visual-calculation { padding: 0 1.2rem 1.2rem; color: #334154; font: .74rem/1.6 ui-monospace,monospace; }

.ml-batch-lab { padding: 1.4rem; border-top: 1px solid var(--source-rule); }
.ml-batch-lab>label { display: grid; grid-template-columns: 120px 1fr 60px; gap: .8rem; align-items: center; margin-bottom: .8rem; color: #445261; font-size: .75rem; }
.ml-batch-lab input { width: 100%; accent-color: var(--source-blue); }
.ml-batch-lab output { font: 650 .75rem ui-monospace,monospace; text-align: right; }
.ml-batch-metrics { display: grid; grid-template-columns: repeat(4,1fr); margin: 1.2rem 0; border: 1px solid var(--source-rule); }
.ml-batch-metrics div { padding: .8rem; border-right: 1px solid var(--source-rule); }
.ml-batch-metrics div:last-child{border-right:0}.ml-batch-metrics span,.ml-batch-metrics strong{display:block}.ml-batch-metrics span{color:#778491;font-size:.61rem;text-transform:uppercase}.ml-batch-metrics strong{margin-top:.2rem;color:var(--source-navy);font:600 1rem ui-monospace,monospace}
.ml-batch-strip { display: flex; gap: 3px; min-height: 38px; align-items: end; }
.ml-batch-strip i { flex: 1; height: 30px; background: var(--source-blue); }.ml-batch-strip i.partial{height:16px;background:var(--source-coral)}
.ml-batch-lab>small { display: block; margin-top: .55rem; color: #7a8692; font-size: .61rem; }

.ml-tomo-lab { display: grid; grid-template-columns: 1fr 290px; gap: 1rem; padding: 1.3rem; border-top: 1px solid var(--source-rule); background: #f8fafc; }
.ml-tomo-stack { position: relative; min-height: 240px; perspective: 800px; }
.ml-tomo-stack>div { position: absolute; left: 50%; width: 210px; height: 130px; padding: .7rem; border: 1px solid var(--source-blue); color: var(--source-blue); background: rgba(255,255,255,.8); transform: translateX(-50%) translateY(calc(var(--layer)*24px)) rotateX(58deg) rotateZ(-7deg); transition: .2s ease; }
.ml-tomo-stack>div:nth-child(1){--layer:0}.ml-tomo-stack>div:nth-child(2){--layer:1}.ml-tomo-stack>div:nth-child(3){--layer:2}.ml-tomo-stack>div:nth-child(4){--layer:3}
.ml-tomo-stack>div.active { z-index: 8; color: #fff; background: rgba(200,111,82,.92); border-color: var(--source-coral); transform: translateX(-50%) translateY(calc(var(--layer)*24px - 12px)) rotateX(58deg) rotateZ(-7deg); }
.ml-tomo-stack strong,.ml-tomo-stack span{display:block}.ml-tomo-stack span{font-size:.6rem}.ml-small-label{display:block;margin:.65rem 0;color:#748190;font:.65rem ui-monospace,monospace;text-transform:uppercase}
.ml-corr-matrix { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
.ml-corr-matrix button { aspect-ratio: 1; border: 1px solid #bbc6d1; color: var(--source-blue); background: #fff; font: 650 .72rem ui-monospace,monospace; cursor: pointer; }.ml-corr-matrix button:disabled{color:#bdc5ce;background:#eef1f4}.ml-corr-matrix button.active{color:#fff;background:var(--source-coral);border-color:var(--source-coral)}
.ml-tomo-lab p { color: #566270; font-size: .72rem; line-height: 1.55; }

.ml-python-lab { margin: 0 0 3rem; scroll-margin-top: 100px; overflow: hidden; border: 1px solid #aeb9c5; background: #111c2a; box-shadow: 0 22px 55px -48px #0b1522; }
.ml-python-head { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1.25rem 1.4rem; border-bottom: 1px solid #344255; color: #fff; background: #172538; }
.ml-python-head>div>span { color: #74c4cb; font: 650 .6rem ui-monospace,monospace; letter-spacing: .09em; }
.ml-python-head h2 { margin: .3rem 0 .25rem; color: #fff; font: 500 1.45rem Georgia,'Times New Roman',serif; }
.ml-python-head p { max-width: 650px; margin: 0; color: #adb9c7; font-size: .7rem; line-height: 1.55; }
.ml-runtime-state { display: flex; gap: .5rem; align-items: center; padding: .5rem .65rem; border: 1px solid #435267; color: #b5c0cc; background: #111d2b; font-size: .63rem; white-space: nowrap; }
.ml-runtime-state i { width: 7px; height: 7px; border-radius: 50%; background: #778596; }
.ml-runtime-state.loading i { background: #e8b95d; animation: ml-runtime-pulse 1s infinite alternate; }
.ml-runtime-state.ready i { background: #50bd91; }
.ml-runtime-state.error i { background: #d86d68; }
@keyframes ml-runtime-pulse { to { opacity:.35; } }
.ml-python-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid #344255; background: #111d2b; }
.ml-python-tabs button { flex: 0 0 auto; padding: .7rem 1rem; border: 0; border-right: 1px solid #344255; color: #98a7b7; background: transparent; font: 650 .68rem Inter,sans-serif; cursor: pointer; }
.ml-python-tabs button:hover { color: #fff; }
.ml-python-tabs button.active { color: #fff; box-shadow: inset 0 -3px #65b9c1; background: #1a2a3d; }
.ml-python-description { min-height: 42px; padding: .7rem 1rem; color: #b4c0cc; background: #19283a; font-size: .69rem; line-height: 1.5; }
.ml-python-workspace { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 350px; }
.ml-editor-pane,.ml-output-pane { min-width: 0; display: flex; flex-direction: column; }
.ml-output-pane { border-left: 1px solid #344255; background: #0c1622; }
.ml-pane-label { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 0 .8rem; border-bottom: 1px solid #344255; color: #8090a2; background: #132033; font: 650 .59rem ui-monospace,monospace; letter-spacing: .08em; text-transform: uppercase; }
.ml-pane-label small { color: #5e7084; font-size: .56rem; }
.ml-pane-label button { padding: .25rem .4rem; border: 1px solid #405169; color: #93a2b2; background: transparent; font: .58rem Inter,sans-serif; cursor: pointer; }
.ml-python-workspace textarea { width: 100%; min-height: 316px; flex: 1; padding: 1rem; resize: vertical; border: 0; outline: 0; color: #dce7f3; background: #111d2b; font: .76rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size: 4; }
.ml-python-workspace textarea:focus { box-shadow: inset 0 0 0 1px #4e7e9b; }
.ml-python-workspace pre { min-height: 316px; flex: 1; margin: 0; padding: 1rem; overflow: auto; white-space: pre-wrap; color: #b9d7c9; background: #0c1622; font: .75rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ml-python-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid #344255; background: #142236; }
.ml-python-actions button { padding: .5rem .7rem; border: 1px solid #4a5b70; color: #bac5d1; background: transparent; font: 650 .66rem Inter,sans-serif; cursor: pointer; }
.ml-python-actions button:hover { color: #fff; border-color: #7790aa; }
.ml-python-actions button.primary { color: #0d2230; border-color: #7bc5cc; background: #7bc5cc; }
.ml-python-actions button:disabled { opacity: .6; cursor: wait; }
.ml-python-actions>span { margin-left: auto; color: #718196; font: .6rem ui-monospace,monospace; }
.ml-python-note { display: grid; grid-template-columns: 190px 1fr; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid #344255; background: #1a2a3d; }
.ml-python-note strong { color: #9bb4c7; font-size: .65rem; }
.ml-python-note p { margin: 0; color: #8191a3; font-size: .63rem; line-height: 1.55; }

.ml-source-sections { background: #fff; border: 1px solid var(--source-rule); }
.ml-source-section { padding: 2.3rem 2.5rem 2.5rem; scroll-margin-top: 100px; }
.ml-source-section + .ml-source-section { border-top: 1px solid var(--source-rule); }
.ml-source-section>header { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.ml-source-section>header>span { padding-top: .4rem; color: var(--source-coral); font: 650 .64rem ui-monospace,monospace; }
.ml-source-section>header small { color: #778391; font: 650 .61rem ui-monospace,monospace; letter-spacing: .06em; text-transform: uppercase; }
.ml-source-section h2 { margin: .2rem 0 0; color: var(--source-navy); font-family: Georgia,'Times New Roman',serif; font-size: 1.65rem; font-weight: 500; letter-spacing: -.02em; }
.ml-source-section-body { padding-left: 58px; }
.ml-source-section-body p,.ml-source-section-body li { color: #3f4b58; font-size: .88rem; line-height: 1.8; }
.ml-source-section-body h3 { margin: 1.8rem 0 .65rem; color: var(--source-navy); font: 600 1.08rem Georgia,serif; }
.ml-source-section-body pre { margin: 1rem 0; padding: 1rem 1.15rem; overflow-x: auto; border-left: 3px solid var(--source-cyan); color: #e7edf4; background: #17253a; font: .76rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ml-source-section-body code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.ml-source-section-body p code,.ml-source-section-body td code { padding: .12rem .25rem; color: #244b73; background: #edf2f6; font-size: .76rem; }
.ml-source-section-body table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: .77rem; }
.ml-source-section-body th,.ml-source-section-body td { padding: .65rem .7rem; border: 1px solid var(--source-rule); text-align: left; vertical-align: top; }
.ml-source-section-body th { color: #fff; background: #314a67; font-weight: 600; }
.ml-source-section-body tr:nth-child(even) td { background: #f7f9fb; }

.ml-equation-card { margin: 1rem 0; padding: 1rem 1.2rem; overflow-x: auto; border: 1px solid #ced7e0; border-left: 4px solid var(--source-blue); color: #17283e; background: #f4f7fa; text-align: center; }
.ml-equation-card.emphasis { color: #fff; border-color: var(--source-navy); background: var(--source-navy); }
.ml-equation-card.compact { padding: .55rem .8rem; }
.ml-equation-card .katex-display { margin: .25rem 0; }
.ml-equation-card .katex { font-size: 1.08em; }
.ml-equation-card.emphasis .katex { color: #fff; }
.ml-note-grid { display: grid; gap: .5rem; margin: 1rem 0; }.ml-note-grid.four{grid-template-columns:repeat(4,1fr)}.ml-note-grid>div{padding:.8rem;border-top:3px solid var(--source-blue);background:#f3f6f9}.ml-note-grid strong,.ml-note-grid span{display:block}.ml-note-grid strong{color:var(--source-navy);font-size:.82rem}.ml-note-grid span{margin-top:.2rem;color:#687482;font-size:.68rem}
.ml-matrix-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin: 1rem 0; }.ml-matrix-row.two{grid-template-columns:repeat(2,1fr)}.ml-matrix-row>div{min-width:0;padding:.7rem;overflow-x:auto;border:1px solid var(--source-rule);background:#f7f9fb;text-align:center}.ml-matrix-row.text strong,.ml-matrix-row.text code,.ml-matrix-row.text p{display:block}.ml-matrix-row.text code{margin:.6rem 0;color:var(--source-blue)}
.ml-shape-derivation { display: flex; flex-wrap:wrap; gap: .6rem; align-items:center;margin:1rem 0;padding:1rem;border:1px solid var(--source-rule);background:#f7f9fb}.ml-shape-derivation span{color:#788493;font-size:.62rem;text-transform:uppercase}.ml-shape-derivation strong{color:var(--source-navy);font:.76rem ui-monospace,monospace}.ml-shape-derivation i{color:var(--source-coral);font-style:normal}
.ml-mistake-list { display: grid; gap: .6rem; margin: 1rem 0; }.ml-mistake-list article{padding:.9rem 1rem;border-left:3px solid #9c6d55;background:#faf7f4}.ml-mistake-list strong{color:#704630;font-size:.78rem}.ml-mistake-list p{margin:.3rem 0 0}
.ml-key-statement { margin: 1rem 0; padding: 1.1rem 1.2rem; color: #fff; background: linear-gradient(110deg,var(--source-navy),#274b68); font-family: Georgia,'Times New Roman',serif; font-size: 1.12rem; line-height: 1.55; }
.ml-editor-note { margin: 1rem 0; padding: .85rem 1rem; border-left: 3px solid var(--source-coral); background: #fbf4f0; }.ml-editor-note strong{color:#784a38;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.ml-editor-note p{margin:.3rem 0 0}
.ml-depth-sequence { display:flex;gap:.55rem;align-items:center;margin:1rem 0}.ml-depth-sequence strong{display:grid;width:58px;height:58px;place-items:center;color:#fff;background:var(--source-blue);font:.8rem ui-monospace,monospace}.ml-depth-sequence i{color:var(--source-coral);font-style:normal}
.ml-compare-flow { display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;margin:1rem 0}.ml-compare-flow div{padding:1rem;border:1px solid var(--source-rule);background:#f7f9fb}.ml-compare-flow strong,.ml-compare-flow span{display:block}.ml-compare-flow strong{color:var(--source-navy);font-size:.82rem}.ml-compare-flow span{margin-top:.3rem;color:#66727f;font-size:.7rem}.ml-compare-flow i{color:var(--source-coral);font-size:.65rem;font-style:normal;text-transform:uppercase}
.ml-review-list { margin: 1rem 0; }.ml-review-list>div{display:grid;grid-template-columns:120px 1fr;padding:.65rem 0;border-bottom:1px solid var(--source-rule)}.ml-review-list dt{color:var(--source-blue);font-weight:700}.ml-review-list dd{margin:0;color:#45515e}
.ml-next-lesson a.disabled { cursor: default; opacity: .6; }

@media (max-width: 850px) {
    .ml-source-edition .ml-lesson-layout { grid-template-columns: 1fr; }
    .ml-source-edition .ml-lesson-sidebar { display: none; }
    .ml-source-visual-head,.ml-tensor-stage,.ml-channel-lab,.ml-tomo-lab { grid-template-columns: 1fr; }
    .ml-source-visual-head { gap: .7rem; }
    .ml-tensor-stage aside,.ml-channel-lab aside { border-left: 0; border-top: 1px solid var(--source-rule); }
    .ml-conv-lab { grid-template-columns: 1fr; }
    .ml-conv-symbol { transform: rotate(90deg); }
    .ml-batch-metrics { grid-template-columns: repeat(2,1fr); }
    .ml-python-head,.ml-python-workspace { grid-template-columns: 1fr; }
    .ml-runtime-state { justify-self: start; }
    .ml-output-pane { border-left: 0; border-top: 1px solid #344255; }
}
@media (max-width: 580px) {
    .ml-module-sequence { grid-template-columns: 1fr; }
    .ml-module-sequence a { border-right:0;border-bottom:1px solid var(--source-rule); }
    .ml-module-sequence a:last-child{border-bottom:0}
    .ml-source-intro { grid-template-columns: 1fr; }.ml-source-intro>span{grid-row:auto}
    .ml-source-section { padding: 1.5rem 1rem; }.ml-source-section>header{grid-template-columns:30px 1fr}.ml-source-section-body{padding-left:0}
    .ml-note-grid.four,.ml-matrix-row,.ml-matrix-row.two{grid-template-columns:1fr}
    .ml-shape-derivation{flex-direction:column;text-align:center}.ml-shape-derivation i{transform:rotate(90deg)}
    .ml-batch-lab>label{grid-template-columns:1fr 55px}.ml-batch-lab input{grid-column:1/-1}
    .ml-batch-metrics{grid-template-columns:1fr 1fr}.ml-review-list>div{grid-template-columns:1fr;gap:.25rem}
    .batch-stack{gap:.3rem;transform:scale(.8)}
    .ml-python-note { grid-template-columns: 1fr; gap: .3rem; }
    .ml-python-actions>span { width: 100%; margin-left: 0; }
}
@media (max-width: 560px) {
    .ml-lesson-grid { grid-template-columns: 1fr; }
    .ml-hero-route { display: none; }
    .ml-lesson-hero,.ml-roadmap-hero { padding-top: 4rem; }
    .ml-paper-example { padding: 1.3rem .8rem; }
    .ml-paper-example > span,.ml-paper-example > p { margin-left: 40px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .ml-roadmap-card { transition:none; } }

/* Academic notes visual system */
:root {
    --ml-ink: #172033;
    --ml-muted: #4d5969;
    --ml-blue: #264d7e;
    --ml-purple: #4c5278;
    --ml-orange: #8d542f;
    --ml-green: #336b58;
    --ml-border: #d9dee5;
}

body.ml-course-page {
    color: var(--ml-ink);
    background: #f7f8fa;
    font-size: 15px;
}

.ml-lesson-hero,
.ml-roadmap-hero {
    padding: 3.6rem 0 2.8rem;
    background: #1a2940;
}

.ml-lesson-hero h1,
.ml-roadmap-hero h1 {
    max-width: 920px;
    margin: .65rem 0 .9rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.035em;
}

.ml-roadmap-hero p,
.ml-lesson-idea {
    max-width: 850px;
    margin-top: .8rem;
    font-size: 1rem;
    line-height: 1.65;
}

.ml-category-pill {
    padding: .3rem .55rem;
    border-color: rgba(255,255,255,.18);
    border-radius: 3px;
    color: #dce5ef;
    background: transparent;
    font-size: .65rem;
}

.ml-hero-route {
    gap: 0;
    margin-top: 1.7rem;
    border-top: 1px solid rgba(255,255,255,.16);
}

.ml-hero-route span,
.ml-hero-route .active {
    padding: .65rem 1.1rem .2rem 0;
    border-radius: 0;
    color: rgba(255,255,255,.58);
    background: transparent;
    font-size: .68rem;
}

.ml-hero-route .active { color: #fff; }
.ml-lesson-layout { grid-template-columns: 205px minmax(0, 820px); gap: 3rem; justify-content: center; padding-top: 3rem; }

.ml-lesson-sidebar {
    top: 95px;
    padding: .8rem 0;
    border: 0;
    border-right: 1px solid var(--ml-border);
    border-radius: 0;
    background: transparent;
}

.ml-lesson-sidebar strong { color: #263a55; }
.ml-lesson-sidebar a { padding: .35rem .65rem; border-radius: 0; font-size: .72rem; }
.ml-lesson-sidebar a:hover { border-left: 2px solid var(--ml-blue); background: transparent; }

.ml-lesson-section,
.ml-story-section,
.ml-project-last {
    grid-template-columns: 36px minmax(0,1fr);
    gap: 1.15rem;
    padding: 1rem 0 3rem;
    border-radius: 0;
    background: transparent;
}

.ml-lesson-section + .ml-lesson-section { padding-top: 3rem; }
.ml-story-section { padding: 0 0 3rem; border: 0; }
.ml-step-number { display: block; width: auto; height: auto; padding-top: .35rem; border-radius: 0; color: #7b8795; background: transparent; font-size: .68rem; }
.ml-section-kicker { color: #6d7885; font-size: .66rem; }

.ml-lesson-section h2,
.ml-roadmap-intro h2 {
    margin-bottom: 1rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.ml-lesson-section h3 {
    margin: 1.8rem 0 .65rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.18rem;
    font-weight: 600;
}

.ml-lesson-section p { color: #3f4b59; font-size: .94rem; line-height: 1.82; }
.ml-large-copy { max-width: 760px; font-size: 1rem; }

.ml-memory-card,
.ml-warning-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--ml-border);
    border-left: 3px solid #7f91a7;
    border-radius: 2px;
    color: #344354;
    background: #f5f7f9;
}

.ml-warning-card { border-left-color: #9b6b4a; background: #faf7f4; }
.ml-notation-box { margin: 1rem 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid #cfd6df; border-radius: 2px; background: #f2f5f8; }
.ml-notation-box span,.ml-notation-box code { display: block; }
.ml-notation-box span { margin-bottom: .55rem; color: #667485; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ml-notation-box code { overflow-wrap: anywhere; color: #182a42; font-family: 'SFMono-Regular', Consolas, monospace; font-size: .86rem; line-height: 1.65; }
.ml-note-subsection { margin-top: 1.6rem; }
.ml-note-prose p { margin: .65rem 0; }
.ml-technical-points { margin: .7rem 0; padding-left: 1.25rem; }
.ml-technical-points li { margin: .6rem 0; color: #3f4b59; font-size: .92rem; line-height: 1.7; }
.ml-pseudocode { margin: .8rem 0 0; padding: 1rem 1.15rem; overflow-x: auto; border: 1px solid #cfd6df; border-radius: 2px; color: #e8edf3; background: #1d2938; font-size: .79rem; line-height: 1.65; }
.ml-related-terms { display: flex; flex-wrap: wrap; gap: .45rem; }
.ml-related-terms a { padding: .35rem .55rem; border: 1px solid #cfd6df; border-radius: 2px; color: var(--ml-blue); background: #fff; font-size: .72rem; }

.ml-io-flow { gap: .45rem; }
.ml-io-flow > div { min-height: 110px; padding: .9rem; border-radius: 2px; box-shadow: none; }
.ml-io-flow span { font-size: .62rem; }
.ml-io-flow strong { font-size: .82rem; font-weight: 600; }
.ml-dry-steps { gap: .45rem; }
.ml-dry-steps li { padding: 2.3rem .85rem .85rem; border: 1px solid var(--ml-border); border-radius: 2px; background: #fff; font-size: .78rem; }

.ml-paper-example {
    padding: 1.3rem 1.5rem;
    border: 1px solid #cfd6df;
    border-radius: 2px;
    background: #fff;
    box-shadow: none;
}
.ml-paper-example::before { display: none; }
.ml-paper-example > span,.ml-paper-example > p { margin-left: 0; }
.ml-paper-example > span { color: #647386; font-size: .64rem; }
.ml-paper-example > p { color: #26364b; font-size: .86rem; line-height: 1.85; }

.ml-interactive-demo { min-height: 230px; padding: 1.15rem; border-radius: 3px; box-shadow: none; }
.ml-demo-button,.ml-quiz-card button,.ml-project-button { border-radius: 2px; }
.ml-demo-cell { border-radius: 1px; font-size: .68rem; }
.ml-demo-result { border-radius: 2px; font-size: .76rem; }
.ml-shape-box { min-height: 105px; border: 1px solid var(--ml-border); border-radius: 2px; background: #f4f6f8; }
.ml-shape-box strong { color: #263f61; font-size: 1rem; }
.ml-wave-canvas { border-radius: 2px; }

.ml-quiz-card { padding: 1.15rem; border-radius: 2px; background: #f3f7f5; }
.ml-project-last { margin-top: 0; padding: 3rem 0; border: 0!important; border-top: 1px solid var(--ml-border)!important; background: transparent; }
.ml-project-button { color: #fff; background: #2d486b; }
.ml-next-lesson a { border-radius: 2px; box-shadow: none; }

.ml-roadmap-main { padding-top: 3rem; }
.ml-roadmap-intro { gap: 1rem; margin-bottom: 3rem; }
.ml-roadmap-intro > div { padding: 1.25rem; border-radius: 2px; box-shadow: none; }
.ml-roadmap-rule strong { width: 25px; height: 25px; border-radius: 2px; background: #52677f; font-size: .7rem; }
.ml-module { margin-top: 3rem; }
.ml-module-number { width: 40px; height: 40px; border-radius: 2px; background: #334f70; font-size: .78rem; }
.ml-module-head h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.65rem; font-weight: 500; }
.ml-lesson-grid { gap: .7rem; }
.ml-roadmap-card { min-height: 175px; padding: 1rem; border-radius: 2px; box-shadow: none; transition: border-color .15s ease; }
.ml-roadmap-card:hover { transform: none; border-color: #71849a; }
.ml-roadmap-card.source-complete { border-top: 3px solid #355e8c; }
.ml-roadmap-card h3 { margin: .35rem 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; }
.ml-roadmap-card p { font-size: .76rem; line-height: 1.55; }
.ml-roadmap-card small,.ml-roadmap-card span { font-size: .68rem; }

@media (max-width: 700px) {
    body.ml-course-page { font-size: 14px; }
    .ml-lesson-section,.ml-story-section,.ml-project-last { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
    .ml-step-number { padding-top: 0; }
}