:root {
  --as-ink: #05070a;
  --as-panel: #11141a;
  --as-panel-soft: #181c23;
  --as-paper: #f7f9fc;
  --as-blue-paper: #e6eef7;
  --as-blue: #aac4f7;
  --as-blue-soft: #edf3f9;
  --as-lime: #c4f69a;
  --as-lime-soft: #f0fde5;
  --as-lavender: #c9c6ff;
  --as-lavender-soft: #efeeff;
  --as-purple: #4139c3;
  --as-coral: #d66859;
  --as-coral-soft: #fff2f0;
  --as-muted: #737b88;
  --as-line: #d7dde6;
  --as-dark-line: #2a2f38;
  --as-radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--as-paper); color: var(--as-ink); font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; line-height: 1.55; }
a { color: inherit; }
button, input, select { font: inherit; }
:where(a, button, input, select):focus-visible { outline: 3px solid var(--as-lavender); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; left: 12px; top: -80px; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px; font-weight: 800; }
.skip-link:focus { top: 12px; }

.draft-banner { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 34px; padding: 7px 18px; background: var(--as-lime); color: #18200f; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-align: center; }
.draft-banner span { background: #10140d; color: var(--as-lime); border-radius: 999px; padding: 3px 8px; text-transform: uppercase; font-size: 9px; letter-spacing: .08em; }

.as-header { min-height: 70px; padding: 0 clamp(18px, 4vw, 58px); display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr); align-items: center; background: var(--as-ink); color: #fff; position: sticky; top: 0; z-index: 50; }
.as-wordmark { font-weight: 900; letter-spacing: -.045em; text-decoration: none; }
.as-header nav { display: flex; gap: 4px; }
.as-header nav a { color: #a2a8b2; text-decoration: none; font-size: 11px; font-weight: 750; border-radius: 999px; padding: 9px 10px; white-space: nowrap; }
.as-header nav a:hover, .as-header nav a[aria-current="page"] { color: var(--as-ink); background: #fff; }
.as-course-chip { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--as-lime); border: 1px solid #343943; border-radius: 999px; padding: 8px 11px; font-size: 10px; font-weight: 850; }
.as-nav-toggle { display: none; justify-self: end; border: 1px solid #3a3f48; background: transparent; color: #fff; border-radius: 9px; padding: 8px 11px; }
.as-context-nav { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 18px; border-bottom: 1px solid var(--as-line); background: #fff; }
.as-context-nav::before { content: "Courses"; margin-right: 8px; color: var(--as-purple); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.as-context-nav a { min-height: 30px; display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; color: #5e6672; text-decoration: none; font-size: 10px; font-weight: 800; }
.as-context-nav a:hover, .as-context-nav a[aria-current="page"] { background: var(--as-lavender-soft); color: var(--as-purple); }
.as-context-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: linear-gradient(90deg, var(--as-blue) 0 25%, var(--as-lime) 25% 50%, var(--as-lavender) 50% 75%, var(--as-coral) 75%); }

.as-shell { width: min(1240px, calc(100% - 36px)); margin: 0 auto; }
.as-hero { overflow: hidden; position: relative; margin: 28px auto 0; min-height: 500px; padding: clamp(48px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .65fr); gap: clamp(35px, 7vw, 95px); align-items: center; border: 1px solid #cbd6e4; border-radius: 24px; background-color: var(--as-blue-paper); background-image: linear-gradient(rgba(83, 110, 143, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 110, 143, .12) 1px, transparent 1px); background-size: 23px 23px; }
.as-hero::after { content: "9618"; position: absolute; right: -25px; bottom: -64px; color: rgba(65, 57, 195, .09); font-size: clamp(130px, 22vw, 280px); line-height: 1; font-weight: 950; letter-spacing: -.09em; }
.as-eyebrow { position: relative; z-index: 1; margin: 0 0 16px; color: #576170; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.as-eyebrow::before { content: ""; display: inline-block; width: 20px; height: 6px; margin-right: 8px; border-radius: 4px; background: var(--as-purple); vertical-align: 1px; }
h1, h2, h3 { font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif; }
.as-hero h1, .lesson-hero h1 { position: relative; z-index: 1; max-width: 780px; margin: 0; font-size: clamp(44px, 6.4vw, 82px); line-height: .98; letter-spacing: -.065em; }
.as-highlight { position: relative; z-index: 0; display: inline-block; color: var(--as-ink); padding: 0 .1em .05em; white-space: nowrap; }
.as-highlight::before { content: ""; position: absolute; z-index: -1; inset: 13% -.03em 3%; background: var(--as-lime); border-radius: 5px 10px 6px 8px; transform: rotate(-1deg) skewX(-4deg); }
.as-lead { position: relative; z-index: 1; max-width: 650px; margin: 25px 0 0; color: #505a67; font-size: clamp(14px, 1.5vw, 18px); }
.as-hero-panel { position: relative; z-index: 2; padding: 22px; background: rgba(255, 255, 255, .92); border: 1px solid #ccd6e2; border-radius: 16px; box-shadow: 0 22px 50px rgba(43, 62, 86, .15); }
.as-hero-panel h2 { margin: 0 0 16px; font-size: 18px; letter-spacing: -.035em; }
.as-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.as-stat { min-height: 92px; padding: 13px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 11px; background: #f1f4f8; }
.as-stat strong { font-size: 25px; letter-spacing: -.05em; }
.as-stat span { color: #6f7784; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.as-lock-note { margin: 12px 0 0; padding: 11px; border-radius: 9px; background: #eceaff; color: #4c459f; font-size: 10px; font-weight: 750; }

.as-catalog-section { margin-top: 90px; padding-bottom: 100px; }
.as-section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 460px); gap: 40px; align-items: end; margin-bottom: 28px; }
.as-section-heading h2 { margin: 0; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.058em; }
.as-section-heading p { margin: 0; color: var(--as-muted); font-size: 13px; }
.as-tools { display: grid; grid-template-columns: minmax(220px, 1fr) 180px; gap: 10px; margin-bottom: 13px; }
.as-tools label { display: grid; gap: 6px; color: #69717d; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.as-tools input, .as-tools select { min-height: 46px; width: 100%; border: 1px solid var(--as-line); border-radius: 10px; background: #fff; color: var(--as-ink); padding: 0 13px; font-size: 13px; }
.as-result-count { margin: 0 0 19px; color: #78808b; font-size: 11px; font-weight: 700; }
.as-unit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.as-chapter-list { display: grid; gap: 13px; }
.as-chapter-group { overflow: hidden; border: 1px solid var(--as-dark-line); border-radius: 17px; background: #0f1217; color: #fff; }
.as-chapter-group[open] { border-color: #4b515b; }
.as-chapter-group > summary { min-height: 105px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 17px; align-items: center; padding: 19px 21px; cursor: pointer; list-style: none; }
.as-chapter-group > summary::-webkit-details-marker { display: none; }
.as-chapter-group > summary:hover { background: #161a20; }
.as-chapter-group > summary:focus-visible { outline: 3px solid var(--as-lavender); outline-offset: -3px; }
.as-chapter-group > summary mark { padding: 7px 10px; border-radius: 8px; background: var(--as-lime); color: var(--as-ink); font-size: 12px; font-weight: 900; }
.as-chapter-heading { display: grid; }
.as-chapter-heading strong { font: 850 21px Manrope, Inter, sans-serif; letter-spacing: -.04em; }
.as-chapter-heading small { margin-top: 3px; color: #858d98; font-size: 9px; }
.as-chapter-ready { padding: 6px 9px; border-radius: 999px; background: #262b32; color: #b7bec7; font-size: 9px; font-weight: 800; }
.as-chapter-chevron { color: #8d949e; font-size: 23px; transition: transform .18s; }
.as-chapter-group[open] .as-chapter-chevron { transform: rotate(180deg); }
.as-chapter-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 14px; border-top: 1px solid #282d34; }
.as-unit-card { min-height: 245px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--as-dark-line); border-radius: 16px; background: var(--as-panel); color: #fff; text-decoration: none; }
.as-unit-card.available { border-color: rgba(196, 246, 154, .58); background: linear-gradient(145deg, rgba(196, 246, 154, .1), var(--as-panel) 56%); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.as-unit-card.available:hover { transform: translateY(-3px); border-color: var(--as-lime); box-shadow: 0 18px 35px rgba(0, 0, 0, .14); }
.as-card-top, .as-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.as-card-top mark { position: relative; isolation: isolate; display: inline-grid; place-items: center; padding: 4px 8px; color: var(--as-ink); background: transparent; font-size: 17px; line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.as-card-top mark::before { content: ""; position: absolute; z-index: -1; inset: 1px -3px; background: var(--as-lime); border-radius: 4px 8px 4px 7px; transform: rotate(-1.5deg) skewX(-4deg); }
.as-card-status { color: #989faa; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.as-unit-card h3 { margin: 30px 0 7px; font-size: 19px; line-height: 1.15; letter-spacing: -.035em; }
.as-unit-card > p { margin: 0; color: #9aa1ad; font-size: 11px; }
.as-card-meta { margin-top: auto; padding-top: 24px; color: #7f8793; font-size: 9px; }
.as-progress-off { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #292e36; color: transparent; font-size: 0; }
.as-card-action { margin-top: 13px; color: var(--as-lime); font-size: 10px; font-weight: 850; }
.as-card-action.muted { color: #777f8a; }
.as-empty, .as-error { grid-column: 1 / -1; min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 26px; text-align: center; border: 1px dashed #b9c1cc; border-radius: 14px; color: #68717d; }
.as-error { border-color: #d99a90; background: #fff4f2; color: #7e3025; }
.as-error button { margin-top: 7px; border: 0; border-radius: 8px; background: var(--as-ink); color: #fff; padding: 9px 14px; cursor: pointer; font-weight: 800; }

.lesson-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.lesson-toc { position: sticky; top: 70px; height: calc(100vh - 70px); overflow: auto; padding: 18px 14px 28px; background: var(--as-blue-paper); border-right: 1px solid #cad5e1; }
.lesson-toc > p { margin: 0 0 12px; color: #5e6875; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.lesson-toc a { color: #606a77; text-decoration: none; }
.lesson-toc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: #5e6875; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.lesson-toc [data-page-nav] { display: grid; gap: 4px; }
.lesson-toc [data-page-nav] a { display: block; padding: 11px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; }
.lesson-toc [data-page-nav] a:hover, .lesson-toc [data-page-nav] a[aria-current="location"] { background: var(--as-lavender); color: var(--as-purple); }
.lesson-toc a:focus-visible, .lesson-contents-toggle:focus-visible, [data-topic-close]:focus-visible { outline: 3px solid var(--as-purple); outline-offset: 2px; }
.lesson-toc-back { display: block; margin-top: 20px; padding: 16px 12px 0; border-top: 1px solid #cad5e1; font-size: 13px; font-weight: 800; }
.lesson-contents-toggle, .lesson-contents-backdrop, [data-topic-close] { display: none; }
.course-nav-drawer > summary { display: none; }
.course-nav-body { display: grid; gap: 7px; }
.course-overview-link { display: flex; min-height: 42px; align-items: center; margin-bottom: 4px; padding: 9px 11px; border: 1px solid #bdcad9; border-radius: 10px; background: #fff; color: var(--as-ink) !important; font-size: 11px; font-weight: 900; }
.course-overview-link:hover { border-color: var(--as-purple); }
.course-nav-chapter { overflow: clip; border: 1px solid #ccd6e2; border-radius: 11px; background: rgba(255, 255, 255, .64); }
.course-nav-chapter > summary { min-height: 52px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; cursor: pointer; list-style: none; }
.course-nav-chapter > summary::-webkit-details-marker { display: none; }
.course-nav-chapter > summary:hover { background: rgba(255, 255, 255, .85); }
.course-nav-chapter > summary:focus-visible, .course-nav-drawer > summary:focus-visible { outline: 3px solid var(--as-purple); outline-offset: -3px; }
.course-nav-chapter > summary span { min-width: 67px; padding: 4px 6px; border-radius: 7px; background: var(--chapter-tone, var(--as-blue)); color: var(--as-ink); font-size: 9px; font-weight: 950; text-align: center; }
.course-nav-chapter > summary small { color: #505a67; font-size: 9px; font-weight: 800; line-height: 1.25; }
.course-nav-chapter > summary i { color: #68717d; font-style: normal; transition: transform .18s ease; }
.course-nav-chapter[open] > summary i { transform: rotate(180deg); }
.course-nav-chapter > div { display: grid; gap: 3px; padding: 4px 7px 8px; border-top: 1px solid #d6dee8; }
.course-nav-chapter a { min-height: 38px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 7px; align-items: center; padding: 6px 7px; border-radius: 8px; font-size: 9px; font-weight: 750; line-height: 1.25; }
.course-nav-chapter a mark { padding: 3px 4px; border-radius: 6px; background: color-mix(in srgb, var(--chapter-tone, var(--as-blue)) 58%, white); color: var(--as-ink); font-size: 9px; font-weight: 950; text-align: center; }
.course-nav-chapter a:hover { background: #fff; color: var(--as-ink); }
.course-nav-chapter a[aria-current="page"] { background: var(--as-ink); color: #fff; }
.course-nav-chapter a[aria-current="page"] mark { background: var(--chapter-tone, var(--as-lime)); }
.course-nav-chapter:nth-of-type(4n + 1) { --chapter-tone: var(--as-blue); }
.course-nav-chapter:nth-of-type(4n + 2) { --chapter-tone: var(--as-lime); }
.course-nav-chapter:nth-of-type(4n + 3) { --chapter-tone: var(--as-lavender); }
.course-nav-chapter:nth-of-type(4n) { --chapter-tone: var(--as-coral); }
.lesson-main { min-width: 0; }
.lesson-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 350px; padding: clamp(45px, 7vw, 82px); border-bottom: 1px solid #cad5e1; background-color: var(--as-blue-paper); background-image: linear-gradient(rgba(83, 110, 143, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 110, 143, .11) 1px, transparent 1px); background-size: 23px 23px; }
.lesson-hero::before { content: ""; position: absolute; z-index: -1; width: clamp(150px, 21vw, 300px); aspect-ratio: 1; right: clamp(14px, 6vw, 90px); top: -42px; border-radius: 43% 57% 48% 52%; background: var(--as-coral); opacity: .92; transform: rotate(14deg); }
.lesson-hero::after { content: ""; position: absolute; z-index: -1; width: clamp(180px, 28vw, 390px); height: clamp(80px, 12vw, 160px); right: -70px; bottom: -35px; border-radius: 50%; background: var(--as-lavender); transform: rotate(-8deg); box-shadow: -165px -8px 0 -46px var(--as-lime), -260px 36px 0 -66px var(--as-blue); }
.lesson-hero h1 { max-width: 900px; font-size: clamp(42px, 6vw, 70px); }
.lesson-hero .as-lead { max-width: 760px; }
.lesson-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 0; }
.lesson-meta span { padding: 6px 9px; border-radius: 7px; background: rgba(255, 255, 255, .88); border: 1px solid #cad5e1; color: #454d58; font-size: 9px; font-weight: 850; }
.lesson-meta span:nth-child(4n + 1) { background: var(--as-lime-soft); border-color: #a9cf86; }
.lesson-meta span:nth-child(4n + 2) { background: var(--as-lavender-soft); border-color: #c9c5f4; }
.lesson-meta span:nth-child(4n + 3) { background: var(--as-blue-soft); border-color: #b7cae0; }
.lesson-meta span:nth-child(4n) { background: var(--as-coral-soft); border-color: #e4b5ae; }
.hero-topic-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.hero-topic-list li { padding: 7px 11px; border: 1px solid #c3cfdd; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #303741; font-size: 10px; font-weight: 800; }
.hero-topic-list li:nth-child(4n + 1) { background: var(--as-lime); border-color: #9fc57c; }
.hero-topic-list li:nth-child(4n + 2) { background: var(--as-lavender); border-color: #aaa5e4; }
.hero-topic-list li:nth-child(4n + 3) { background: var(--as-blue); border-color: #8eafe8; }
.hero-topic-list li:nth-child(4n) { background: var(--as-coral); border-color: #bd5548; color: #2d1714; }
.lesson-page-nav { margin: 24px clamp(22px, 6vw, 76px) 0; border: 1px solid #cdc9f3; border-radius: 14px; background: linear-gradient(115deg, var(--as-lavender-soft), #fff 45%, var(--as-blue-soft)); }
.lesson-page-nav > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.lesson-page-nav > summary::-webkit-details-marker { display: none; }
.lesson-page-nav > summary span { font-size: 11px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.lesson-page-nav > summary small { color: var(--as-purple); font-size: 9px; font-weight: 850; }
.lesson-page-nav > div { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 14px; }
.lesson-page-nav a { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid #d7d4f0; border-radius: 999px; background: #fff; color: #5b6370; text-decoration: none; font-size: 9px; font-weight: 800; }
.lesson-page-nav a:hover, .lesson-page-nav a[aria-current="location"] { border-color: var(--as-purple); background: var(--as-purple); color: #fff; }
.lesson-content { max-width: 1030px; padding: 48px clamp(22px, 6vw, 76px) 90px; }
.lesson-section { scroll-margin-top: 92px; margin-bottom: 64px; }
.lesson-section > h2 { position: relative; isolation: isolate; margin: 0 0 21px; padding: 0 0 12px 13px; border-bottom: 1px solid var(--as-line); font-size: clamp(25px, 3.2vw, 35px); letter-spacing: -.045em; }
.lesson-section > h2::before { content: ""; position: absolute; z-index: -1; left: 0; top: .12em; width: 7px; height: .9em; border-radius: 999px; background: var(--section-tone, var(--as-blue)); transform: rotate(3deg); }
.lesson-section:nth-child(4n + 1) { --section-tone: var(--as-blue); }
.lesson-section:nth-child(4n + 2) { --section-tone: var(--as-lime); }
.lesson-section:nth-child(4n + 3) { --section-tone: var(--as-lavender); }
.lesson-section:nth-child(4n) { --section-tone: var(--as-coral); }
.lesson-section > p { max-width: 780px; color: #4e5661; }
.objective-list, .summary-list { display: grid; gap: 8px; padding: 0; list-style: none; }
.objective-list li, .summary-list li { position: relative; padding: 13px 14px 13px 43px; border: 1px solid var(--item-line, var(--as-line)); border-radius: 10px; background: var(--item-bg, #fff); color: #3f4752; }
.objective-list li::before, .summary-list li::before { content: "✓"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #e9fbd9; color: #4f8a2c; font-size: 10px; font-weight: 900; }
.objective-list li:nth-child(4n + 1), .summary-list li:nth-child(4n + 1) { --item-bg: var(--as-blue-soft); --item-line: #bfd0e3; }
.objective-list li:nth-child(4n + 2), .summary-list li:nth-child(4n + 2) { --item-bg: var(--as-lime-soft); --item-line: #b7d99a; }
.objective-list li:nth-child(4n + 3), .summary-list li:nth-child(4n + 3) { --item-bg: var(--as-lavender-soft); --item-line: #cbc7ef; }
.objective-list li:nth-child(4n), .summary-list li:nth-child(4n) { --item-bg: var(--as-coral-soft); --item-line: #e8c1bb; }
.concept-grid, .misconception-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.concept-card, .misconception-card, .worked-card, .editorial-placeholder { padding: 19px; border: 1px solid var(--as-line); border-radius: 13px; background: #fff; }
.concept-card h3, .misconception-card h3, .worked-card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.03em; }
.concept-card p, .misconception-card p, .worked-card p { margin: 0; color: #59616c; font-size: 13px; }
.misconception-card { background: #fff4f2; border-color: #efd1cc; }
.misconception-card h3 { color: #923d31; }
.worked-card { background: #ecebff; border-color: #d5d1ff; }
.worked-table { width: 100%; margin-top: 17px; border-collapse: collapse; background: #fff; font-size: 12px; }
.worked-table th, .worked-table td { padding: 11px; border: 1px solid #d4d7e8; text-align: left; vertical-align: top; }
.worked-table th { background: #f2f1ff; }
.diagram-card { margin: 22px 0; padding: 20px; border: 1px solid #c9c5f4; border-radius: 14px; background: linear-gradient(145deg, #fff, var(--as-blue-soft)); box-shadow: 0 14px 30px rgba(49, 57, 70, .06); }
.diagram-card svg { display: block; width: 100%; height: auto; max-height: 420px; }
.diagram-card figcaption { margin-top: 12px; color: #636c78; font-size: 11px; }
.diagram-transcript { margin-top: 14px; padding: 14px; border-left: 4px solid var(--as-coral); background: var(--as-coral-soft); border-radius: 0 9px 9px 0; color: #75382f; font-size: 12px; }
.source-card-grid { display: grid; gap: 12px; margin: 12px 0; }
.source-card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.source-card { margin: 12px 0; padding: 20px; border: 1px solid var(--as-line); border-radius: 14px; background: #fff; }
.source-card-grid .source-card { margin: 0; }
.source-card h3 { margin: 0 0 12px; font-size: 17px; letter-spacing: -.03em; }
.source-card-label { display: inline-flex; margin-bottom: 12px; padding: 4px 9px; border-radius: 999px; background: var(--as-ink); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.source-card-accent { border-color: #a9cf86; background: var(--as-lime-soft); box-shadow: inset 5px 0 0 var(--as-lime); }
.source-card-blue { border-color: #b8cbe0; background: var(--as-blue-soft); box-shadow: inset 5px 0 0 var(--as-blue); }
.source-card-purple { border-color: #c9c5f4; background: var(--as-lavender-soft); box-shadow: inset 5px 0 0 var(--as-lavender); }
.source-card-coral { border-color: #e5b8b1; background: var(--as-coral-soft); box-shadow: inset 5px 0 0 var(--as-coral); }
.source-list { display: grid; gap: 9px; margin: 0; padding-left: 21px; color: #505965; font-size: 13px; }
.source-list li { padding-left: 3px; }
.source-list li::marker { color: var(--as-purple); font-weight: 900; }
.source-list-numbered li::marker { color: #4e842d; font-weight: 900; }
.source-list-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 26px; }
.source-example-list { grid-template-columns: 1fr; gap: 8px; padding-left: 22px; }
.source-example-list li { min-height: 45px; padding: 11px 13px; border: 1px solid #c5dcae; border-radius: 9px; background: rgba(255, 255, 255, .8); }
.editorial-placeholder .source-list { color: inherit; font-size: 12px; }
.source-table-shell { max-width: 100%; margin: 12px 0; overflow-x: auto; border: 1px solid var(--as-line); border-radius: 14px; background: #fff; }
.source-comparison-table { width: 100%; min-width: 610px; border-collapse: collapse; table-layout: fixed; }
.source-comparison-table caption { padding: 13px 16px; background: var(--as-ink); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.source-comparison-table th { padding: 13px 17px; border: 1px solid #d3dae4; background: var(--as-blue); color: var(--as-ink); font-size: 14px; text-align: left; }
.source-comparison-table th:first-child { background: var(--as-lime); }
.source-comparison-table td { padding: 18px; border: 1px solid #d3dae4; vertical-align: top; }
.source-client-table th:first-child, .source-client-table td:first-child { background: var(--as-lavender-soft); }
.source-client-table th:last-child, .source-client-table td:last-child { background: var(--as-blue-soft); }
.diagram-intro-list { margin-bottom: 16px; }
.diagram-card-first { margin-top: 0; }
.diagram-caption-list { margin: 12px 0 0; font-size: 11px; }
.diagram-transcript .source-list { margin-top: 8px; color: inherit; font-size: 12px; }
.source-code-point code { display: inline-block; max-width: 100%; color: #302a87; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.source-gap-card { padding: 18px; border: 1px solid #e2ca78; border-radius: 13px; background: #fff8dc; color: #665619; }
.source-gap-card > strong { display: block; margin-bottom: 9px; font-size: 13px; }
.source-gap-card .source-list { color: inherit; }
.lesson-visual-section { margin-bottom: 42px; }
.lesson-visual-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 18px; border: 1px solid #d5dce6; border-radius: 12px; background: rgba(255, 255, 255, .74); }
.lesson-visual-flow.is-grid, .lesson-visual-flow.is-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lesson-visual-flow.is-stack { max-width: 460px; margin-inline: auto; flex-direction: column; }
.lesson-visual-flow.is-tree { display: grid; justify-items: center; }
.visual-root { width: min(100%, 360px); }
.visual-tree-line { width: 3px; height: 22px; background: var(--as-purple); }
.visual-branches { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 9px; padding-top: 16px; border-top: 3px solid var(--as-purple); }
.visual-step { min-height: 58px; flex: 1 1 120px; display: grid; place-items: center; padding: 11px; border: 1px solid var(--tone-line, #aba6e6); border-radius: 10px; background: var(--tone-bg, var(--as-lavender-soft)); color: var(--tone-text, #37318d); font-size: 11px; font-weight: 850; text-align: center; }
.visual-tone-1 { --tone-bg: var(--as-blue); --tone-line: #8daee7; --tone-text: #233b66; }
.visual-tone-2 { --tone-bg: var(--as-lime); --tone-line: #99c174; --tone-text: #294019; }
.visual-tone-3 { --tone-bg: var(--as-lavender); --tone-line: #a29de1; --tone-text: #37318d; }
.visual-tone-4 { --tone-bg: var(--as-coral); --tone-line: #b84f42; --tone-text: #2d1714; }
.visual-arrow, .visual-loop { color: var(--as-purple); font-size: 19px; font-weight: 900; }
.visual-loop { min-width: 34px; display: grid; place-items: center; color: var(--as-coral); font-size: 28px; }
.source-topology-diagram { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.topology-sketch { position: relative; min-height: 285px; overflow: hidden; border: 1px solid #d5dce6; border-radius: 12px; background: #f6f8fb; }
.topology-sketch > strong { position: absolute; z-index: 3; top: 13px; left: 15px; padding: 4px 9px; border-radius: 999px; background: var(--as-ink); color: #fff; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.sketch-node { position: absolute; z-index: 2; width: 78px; min-height: 38px; display: grid; place-items: center; padding: 5px; border: 1px solid #9ec677; border-radius: 9px; background: var(--as-lime); color: #26351a; font-size: 9px; font-weight: 850; text-align: center; }
.sketch-node-centre { width: 92px; min-height: 48px; left: calc(50% - 46px); top: 119px; border-color: #9e98e7; background: var(--as-lavender); color: #302a87; }
.sketch-node-top { left: calc(50% - 39px); top: 54px; }
.sketch-node-bottom { left: calc(50% - 39px); bottom: 35px; }
.sketch-node-left { left: 22px; top: 124px; }
.sketch-node-right { right: 22px; top: 124px; }
.sketch-link { position: absolute; z-index: 1; display: block; height: 3px; border-radius: 999px; background: #8c86d7; transform-origin: left center; }
.sketch-link-vertical { width: 137px; left: 50%; top: 91px; transform: rotate(90deg); }
.sketch-link-horizontal { width: calc(100% - 122px); left: 61px; top: 146px; }
.sketch-node-nw { left: 28px; top: 59px; }
.sketch-node-ne { right: 28px; top: 59px; }
.sketch-node-sw { left: 28px; bottom: 37px; }
.sketch-node-se { right: 28px; bottom: 37px; }
.mesh-link-top, .mesh-link-bottom { width: calc(100% - 184px); left: 92px; }
.mesh-link-top { top: 78px; }
.mesh-link-bottom { bottom: 55px; }
.mesh-link-left, .mesh-link-right { width: 133px; top: 79px; transform: rotate(90deg); }
.mesh-link-left { left: 67px; }
.mesh-link-right { right: -66px; }
.mesh-link-diagonal-a, .mesh-link-diagonal-b { width: calc(100% - 132px); left: 66px; top: 80px; }
.mesh-link-diagonal-a { transform: rotate(34deg); }
.mesh-link-diagonal-b { top: 205px; transform: rotate(-34deg); }
.choice-note { margin-top: 14px; padding: 14px 16px; border: 1px solid #d5d1ff; border-radius: 11px; background: #eeedff; color: #4f4a8d; font-size: 12px; }
.topology-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.topology-card { padding: 19px; border: 1px solid var(--as-line); border-radius: 13px; background: #fff; }
.topology-card h3 { margin: 12px 0 7px; font-size: 17px; letter-spacing: -.03em; }
.topology-card p { margin: 0; color: #59616c; font-size: 13px; }
.topology-label { display: inline-flex; min-width: 58px; justify-content: center; padding: 4px 9px; border-radius: 999px; background: var(--as-lime); color: #26351a; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.network-figure > h3, .diagram-card > h3 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.03em; }
.diagram-card > p { margin: 0 0 16px; color: #68717d; font-size: 12px; }
.network-diagram { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.topology-path { padding: 15px; border: 1px solid #d8dee7; border-radius: 11px; background: #f7f9fc; }
.topology-path > strong { display: block; margin-bottom: 12px; font-size: 12px; }
.topology-path small { display: block; margin-top: 11px; color: #68717d; font-size: 10px; }
.path-strip { min-height: 62px; display: grid; grid-template-columns: auto auto minmax(90px, 1fr) auto auto; gap: 7px; align-items: center; }
.network-node, .network-hub { display: grid; min-height: 38px; place-items: center; border: 1px solid #a9a3ed; border-radius: 9px; background: #eeedff; color: #4139c3; font-size: 10px; font-weight: 850; text-align: center; padding: 6px 8px; }
.network-node { width: 38px; border-radius: 50%; background: var(--as-lime); border-color: #9bc971; color: #26351a; }
.path-arrow { color: var(--as-purple); font-weight: 950; }
.refinement-tree { display: grid; gap: 10px; padding: 0; list-style: none; }
.refinement-tree li { padding: 10px 13px; border-radius: 8px; background: #fff; border: 1px solid var(--as-line); }
.refinement-tree ol { margin-top: 9px; display: grid; gap: 7px; }
.code-example { overflow-x: auto; padding: 18px; border-radius: 12px; background: var(--as-ink); color: #e7e9ee; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.editorial-placeholder { display: grid; gap: 7px; background: #fffbed; border-color: #eadb92; color: #6b5b16; }
.editorial-placeholder strong { font-size: 14px; }
.editorial-placeholder span { font-size: 12px; }
.lesson-footer-nav { display: flex; justify-content: space-between; gap: 12px; padding: 24px clamp(22px, 6vw, 76px); border-top: 1px solid var(--as-line); background: #fff; }
.lesson-footer-nav a { padding: 10px 13px; border: 1px solid var(--as-line); border-radius: 9px; text-decoration: none; font-size: 11px; font-weight: 800; }
.as-footer { padding: 38px clamp(18px, 4vw, 58px); display: grid; grid-template-columns: 1fr auto; gap: 24px; background: var(--as-ink); color: #8e96a1; font-size: 10px; }
.as-footer nav { display: flex; flex-wrap: wrap; gap: 15px; }
.as-footer a { color: #adb5c0; text-decoration: none; }
.as-footer small { grid-column: 1 / -1; }

@media (max-width: 980px) {
  .as-hero { grid-template-columns: 1fr; }
  .as-hero-panel { max-width: 600px; }
  .as-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-chapter-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-nav-drawer > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; cursor: pointer; list-style: none; border-radius: 9px; background: #fff; color: var(--as-ink); }
  .course-nav-drawer > summary::-webkit-details-marker { display: none; }
  .course-nav-drawer > summary span { font-size: 10px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
  .course-nav-drawer > summary small { color: var(--as-purple); font-size: 9px; font-weight: 850; }
  .course-nav-body { max-height: 56vh; overflow: auto; padding-top: 9px; }
}

@media (max-width: 1100px) {
  .lesson-toc { top: 62px; height: calc(100vh - 62px); }
  .as-header { grid-template-columns: 1fr auto; min-height: 62px; }
  .as-header nav { position: absolute; left: 0; right: 0; top: 62px; padding: 12px 18px 18px; display: grid; background: var(--as-ink); border-top: 1px solid #272b32; }
  .as-header nav[hidden] { display: none; }
  .as-course-chip { display: none; }
  .as-nav-toggle { display: block; }
}

@media (max-width: 860px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-toc { position: static; height: auto; border-right: 0; border-bottom: 1px solid #cad5e1; }
  .topic-navigation-ready .lesson-toc { position: fixed; z-index: 70; top: 62px; bottom: 0; left: 0; width: min(290px, 85vw); height: calc(100dvh - 62px); overflow-y: auto; border-right: 1px solid #cad5e1; transform: translateX(-100%); visibility: hidden; }
  .topic-navigation-ready .lesson-toc.is-open { transform: translateX(0); visibility: visible; }
  .topic-navigation-ready .lesson-contents-toggle { display: block; margin: 12px 20px; padding: 10px 14px; border: 1px solid #c9c5f4; border-radius: 8px; background: var(--as-lavender-soft); color: var(--as-purple); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
  .lesson-contents-backdrop:not([hidden]) { display: block; position: fixed; inset: 62px 0 0; z-index: 60; border: 0; background: #10141b66; }
  .topic-navigation-ready [data-topic-close] { display: block; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--as-ink); font-size: 26px; cursor: pointer; }
}

@media (max-width: 760px) {
  .as-context-nav { justify-content: flex-start; overflow-x: auto; }
  .as-context-nav::before { white-space: nowrap; }
  .as-context-nav a { white-space: nowrap; }
  .as-shell { width: min(100% - 20px, 620px); }
  .as-hero { min-height: 0; margin-top: 10px; padding: 45px 21px; border-radius: 16px; }
  .as-hero h1, .lesson-hero h1 { font-size: 43px; }
  .as-section-heading { grid-template-columns: 1fr; gap: 15px; }
  .as-tools { grid-template-columns: 1fr; }
  .as-unit-grid, .concept-grid, .misconception-grid, .topology-grid, .network-diagram, .source-card-grid-two, .source-topology-diagram { grid-template-columns: 1fr; }
  .as-chapter-group > summary { grid-template-columns: 1fr auto; gap: 9px; padding: 16px; }
  .as-chapter-group > summary mark { justify-self: start; }
  .as-chapter-heading { grid-column: 1 / -1; grid-row: 2; }
  .as-chapter-heading strong { font-size: 18px; }
  .as-chapter-ready { grid-column: 1; grid-row: 3; justify-self: start; }
  .as-chapter-chevron { grid-column: 2; grid-row: 1; }
  .as-chapter-units { grid-template-columns: 1fr; padding: 10px; }
  .lesson-visual-flow.is-grid, .lesson-visual-flow.is-compare, .visual-branches { grid-template-columns: 1fr; }
  .source-list-compact { grid-template-columns: 1fr; }
  .lesson-page-nav { margin-inline: 12px; }
  .lesson-page-nav > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-page-nav a { justify-content: center; text-align: center; }
  .lesson-content { padding-inline: 16px; }
  .lesson-hero { padding: 44px 20px; }
  .lesson-hero::before { right: -75px; opacity: .7; }
  .worked-table { display: block; overflow-x: auto; }
  .as-footer { grid-template-columns: 1fr; }
  .as-footer small { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.as-topic-practice{margin:3rem 0 1.5rem;padding-top:2rem;border-top:1px solid #cbd3df}
.as-topic-practice h2{font:800 14px 'DM Sans',sans-serif;color:#737984;letter-spacing:.09em;text-transform:uppercase;margin:0 0 1rem}
.as-topic-test{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:20px;border:1px solid #cbd3df;border-radius:12px;background:#fff;color:#040608;text-decoration:none}
.as-topic-test:hover{border-color:#463cc8}.as-topic-test strong,.as-topic-test small{display:block}.as-topic-test strong{font-size:18px}.as-topic-test small{font-size:14px;color:#737984;margin-top:4px}
.as-topic-test-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#f7e1dd;color:#ad5045;font-weight:800}
.as-study-progress{background:#e9e7ff;border:1px solid #cbc7f6;border-radius:13px;padding:20px;margin:0 0 28px;font-size:16px}
.as-study-progress>div{display:flex;justify-content:space-between;gap:16px}.as-study-progress [data-study-count]{color:#463cc8;font-weight:700;white-space:nowrap}
.as-study-progress progress{width:100%;height:8px;accent-color:#463cc8;margin-top:14px}.as-study-progress p{font-size:14px;margin:10px 0 0;color:#596270}.as-study-progress a{display:inline-block;margin-top:10px;color:#463cc8;font-weight:700}
.as-study-action{display:flex;justify-content:flex-end;margin:0 0 18px}.as-study-action button{padding:10px 14px;min-height:44px;background:white;border:1px solid #cbd3df;border-radius:8px;color:#596270;font:700 14px 'DM Sans',sans-serif;cursor:pointer}
.as-study-action button[aria-pressed=true]{background:#e9fbd9;border-color:#c9e9af;color:#315719}.as-study-action button:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){.as-study-action button{width:100%}.as-topic-test{padding:16px}}

/* Opt-in starting-point preview; the normal homepage is unchanged. */
[data-starting-preview]{position:relative;z-index:2;min-width:0;background:var(--as-ink);color:#fff;border-color:var(--as-dark-line)}
[data-starting-preview] h2{font-size:28px;line-height:1.16;letter-spacing:-.035em;margin:10px 0 16px}
[data-starting-preview] p{font-size:16px;line-height:1.6;color:var(--as-line)}
[data-starting-preview] .starting-kicker{color:var(--as-lavender)!important}
.starting-kicker{font-size:12px!important;font-weight:800;letter-spacing:.09em;color:var(--as-purple)!important;margin:0!important}
.starting-actions{display:grid;gap:10px;margin-top:22px}
[data-starting-preview] button,.starting-dialog button{font:700 14px 'DM Sans',system-ui,sans-serif;min-height:44px;padding:12px 16px;border:1px solid var(--as-line);border-radius:8px;background:#fff;color:var(--as-ink);cursor:pointer}
[data-starting-preview] button{background:var(--as-panel-soft);border-color:#737b88;color:#fff}
[data-starting-preview] .starting-primary,.starting-dialog .starting-primary{background:var(--as-lime);border-color:#a8d57f;color:var(--as-ink)}
[data-starting-preview] .starting-text{border:0;background:transparent;padding:8px 0;color:var(--as-lavender);text-decoration:underline;text-underline-offset:3px}
[data-starting-preview] .starting-preview-note{font-size:12px;border-top:1px solid var(--as-dark-line);padding-top:14px;margin-top:18px;margin-bottom:0}
.starting-next{display:flex;justify-content:space-between;gap:16px;color:var(--as-ink);background:var(--as-lime-soft);border:1px solid #c4dea9;border-radius:8px;padding:16px;font-weight:800;text-decoration:none;margin:18px 0 8px}
.starting-dialog{box-sizing:border-box;width:min(680px,calc(100% - 24px));max-height:85dvh;padding:0;border:1px solid var(--as-line);border-radius:16px;color:var(--as-ink);background:#fff;box-shadow:0 18px 64px #05070a33}
.starting-dialog::backdrop{background:#05070a88}
.starting-dialog form{margin:0}.starting-dialog header{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:26px 28px 10px}.starting-dialog h2{font-size:26px;line-height:1.2;margin:8px 0}
.starting-dialog .starting-close{font-size:24px;flex-shrink:0;padding:4px;width:44px;border:0}
#starting-dialog-copy{margin:0;padding:0 28px 22px;font-size:16px;color:#535c69}
.starting-chapters{padding:0 28px 20px}.starting-chapters details{border-top:1px solid var(--as-line)}
.starting-chapters summary{cursor:pointer;padding:16px 0;font-weight:800;font-size:16px}.starting-chapters summary small{display:inline-block;font-size:14px;color:var(--as-purple);margin-left:12px;font-weight:600;white-space:nowrap}
.starting-chapters fieldset{border:0;padding:0 0 18px;margin:0;min-width:0}.starting-chapters label{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px;border-radius:6px;cursor:pointer;font-size:16px}.starting-chapters label:has(input:checked){background:var(--as-lime-soft)}.starting-chapters label:hover{background:var(--as-blue-soft)}
.starting-chapters input{flex-shrink:0;width:20px;height:20px;margin:2px 0 0;accent-color:var(--as-purple)}.starting-chapters b{font-weight:600;color:var(--as-purple);margin-right:5px}.starting-chapters .starting-all{font-size:14px;font-weight:700;border-bottom:1px solid var(--as-line);border-radius:0;margin-bottom:8px}
.starting-dialog footer{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--as-line);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.starting-dialog footer>span{font-size:14px;font-weight:700}.starting-dialog footer>div{display:flex;gap:10px}.starting-dialog footer small{width:100%;font-size:12px;color:#535c69}
.starting-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
[data-starting-preview] :focus-visible{outline:3px solid var(--as-lavender);outline-offset:3px}
.starting-dialog :focus-visible{outline:3px solid var(--as-purple);outline-offset:3px}
@media(max-width:600px){.starting-dialog header{padding:20px 18px 8px}#starting-dialog-copy{padding:0 18px 20px}.starting-chapters{padding:0 18px 18px}.starting-dialog footer{padding:14px 18px}.starting-dialog footer>div{width:100%}.starting-dialog footer button{flex:1}.starting-dialog h2{font-size:23px}}