/* Panyin Academy shell.
   Colour values are transcribed from the reference theme, not approximated. The
   reference declares the same set twice — once under [data-mode=light], once
   under [data-mode=dark]; we key off the site's theme attribute plus a bare
   system preference instead, because the reader may never have chosen a theme.
   Spacing and control sizes are likewise resolved from the reference's own
   theme rather than chosen: its Tailwind spacing unit is .25rem, and its gap
   scale is 6/8/12/20px with a 24px control height. */
body:has(.academy-page) {
  --academy-paper: #faf9f5;
  --academy-paper-2: #f2f0e9;
  --academy-paper-3: #ece9df;
  --academy-fill-2: #e3e1d7;
  --academy-surface: #fff;
  --academy-ink: #141413;
  --academy-progress-blue: #2a78d6;
  --academy-muted: #6a6963;
  --academy-faint: #b8b6a9;
  --academy-line: #1f1e1d1f;
  --academy-line-2: #1f1e1d0f;
  --academy-paper-ring: #0000001a;
  --academy-paper-shadow: #00000024;
  --academy-win-ring: #0000001f;
  --academy-win-shadow: #0000001a;
  --academy-peach: #e9c4b0;
  --academy-violet: #cac9de;
  --academy-blue: #bccbd2;
  /* The site's accent-strong is 4.3:1 on the paper ground, under AA for the
     outline's current item. Darkened by 4 to 4.53:1, scoped here so the
     rest of the site keeps its own value. */
  --accent-strong: #b4583b;
  --academy-focus: var(--accent);
  --academy-container: 1152px;
  --academy-space: .25rem;
  --academy-gap-xs: 6px;
  --academy-gap-sm: 8px;
  --academy-gap-md: 12px;
  --academy-gap-lg: 20px;
  --academy-control-h: 24px;
  --academy-radius: .25rem;
  --academy-hero: #edece8;
  --academy-surface-1: #fcfcfb;
  --academy-brand-ground: #dedcd1;
  --academy-sunken: var(--academy-paper-2);
  /* The academy header is 56px, not the site's 68px. This has to sit on the
     shared ancestor rather than on .site-header: the module bar is the header's
     sibling and reads --header-h for its own sticky offset, so scoping the
     override to the header alone leaves the bar pinned 12px too low and body
     background shows through the gap. */
  --header-h: 56px;
  background: var(--academy-paper);
}
/* The lesson reader runs a three-column layout — a 264px navigation tree, the
   832px reading measure and the "on this page" column — that the reference
   page does not have to hold at once: it drops its table of contents below
   1470px. We keep the contents column, so the container has to be the sum of
   the parts (264 + 48 + 832 + 48 + 320 = 1512, plus the page's own 48px of
   inline padding). Narrower viewports degrade by giving the measure less room,
   which is what minmax already allows. */
body:has(.academy-lesson-page) { --academy-container: 1560px; }
body:has(.academy-page) .site-header {
  background: color-mix(in srgb, var(--academy-paper) 88%, transparent);
  border-bottom-color: var(--academy-line);
}
body:has(.academy-page) .site-header .inner {
  max-width: var(--academy-container);
  padding-left: clamp(16px, 3vw, 24px);
  padding-right: clamp(16px, 3vw, 24px);
}
html[data-theme="dark"] body:has(.academy-page) {
  --academy-paper: #262625;
  --academy-paper-2: #1f1f1e;
  --academy-paper-3: #34332e;
  --academy-fill-2: #3a3933;
  --academy-surface: #1a1a19;
  --academy-ink: #f2f0e9;
  --academy-muted: #9c9a90;
  --academy-faint: #5a5a54;
  --academy-line: #ffffff1a;
  --academy-line-2: #ffffff0f;
  --academy-paper-ring: #ffffff14;
  --academy-paper-shadow: #00000073;
  --academy-win-ring: #00000059;
  --academy-win-shadow: #00000040;
  --academy-peach: #754d40;
  --academy-violet: #535269;
  --academy-blue: #455b65;
  --academy-hero: #20201f;
  --academy-surface-1: #20201f;
  --academy-brand-ground: #262622;
  --accent-strong: #e89275;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body:has(.academy-page) {
    --academy-paper: #262625;
    --academy-paper-2: #1f1f1e;
    --academy-paper-3: #34332e;
    --academy-fill-2: #3a3933;
    --academy-surface: #1a1a19;
    --academy-ink: #f2f0e9;
    --academy-muted: #9c9a90;
    --academy-faint: #5a5a54;
    --academy-line: #ffffff1a;
    --academy-line-2: #ffffff0f;
    --academy-paper-ring: #ffffff14;
    --academy-paper-shadow: #00000073;
    --academy-win-ring: #00000059;
    --academy-win-shadow: #00000040;
    --academy-peach: #754d40;
    --academy-violet: #535269;
    --academy-blue: #455b65;
    --academy-hero: #20201f;
    --academy-surface-1: #20201f;
    --academy-brand-ground: #262622;
    --accent-strong: #e89275;
  }
}
.academy-page {
  max-width: var(--academy-container);
  color: var(--academy-ink);
  padding-top: 0;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px) {
  .academy-page { padding-left: 24px; padding-right: 24px; }
}

.academy-page :is(a, button, input):focus-visible { outline: 2px solid var(--academy-focus); outline-offset: 3px; }
.academy-page a { color: inherit; }
.academy-page a:hover { color: inherit; }
.academy-complete-marker { color: var(--academy-ink); font-weight: 650; white-space: nowrap; }
.academy-kicker { margin: 0 0 8px; color: var(--academy-muted); font-size: 11px; font-weight: 650; letter-spacing: .1em; }
.academy-hero, .academy-course-hero { display: block; padding: 48px 0; border-bottom: 1px solid var(--academy-line); background: var(--academy-hero); box-shadow: 0 0 0 100vmax var(--academy-hero); clip-path: inset(0 -100vmax); }
.academy-hero h1, .academy-collection-hero h1, .academy-course-hero h1, .academy-lesson-header h1, .academy-quiz-hero h1 { max-width: 800px; margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 2.75rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.academy-hero-lead, .academy-collection-summary, .academy-course-subtitle, .academy-quiz-hero > p { max-width: 42rem; margin: 12px 0 0; color: var(--academy-muted); font-size: 1.125rem; line-height: 1.75rem; }
.academy-hero-actions, .academy-collection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; align-items: center; }
.academy-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 8px 16px; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-surface); color: var(--academy-ink); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.academy-action:hover { background: var(--selected-bg); text-decoration: none; }
.academy-page .academy-action-primary { border-color: var(--text); background: var(--text); color: var(--bg); }
.academy-page .academy-action-primary:hover { background: color-mix(in srgb, var(--text) 92%, var(--bg)); color: var(--bg); }
.academy-progress-band { padding: 0 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--academy-line); }
.academy-progress-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 24px; border: 1px solid var(--academy-line); border-radius: 8px; background: var(--academy-paper-2); }
.academy-progress-label { color: var(--academy-muted); font-size: 12px; }
.academy-progress-card strong { margin: 0; font-size: 30px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.academy-progress-card strong small { margin-left: 1px; color: var(--academy-muted); font-size: 14px; font-weight: 500; }
.academy-progress-card p { flex: 1 1 240px; margin: 0; color: var(--academy-muted); font-size: 12px; line-height: 1.6; }
.academy-progress-meter { flex: 1 1 160px; height: 7px; overflow: hidden; border-radius: 999px; background: var(--academy-paper-3); }
.academy-progress-meter > span { display: block; width: var(--academy-progress); height: 100%; border-radius: inherit; background: var(--academy-progress-blue); transition: width 180ms ease-out; }
.academy-home-paths, .academy-home-journey, .academy-home-catalog, .academy-collection-courses, .academy-collection-section, .academy-course-overview, .academy-course-lessons, .academy-course-source { padding: clamp(34px, 5vw, 64px) 0; border-bottom: 1px solid var(--academy-line); }
.academy-section-heading { margin-bottom: 24px; }
.academy-section-heading h2, .academy-course-overview h2, .academy-course-source h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 1.375rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; }
.academy-section-heading--split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.academy-section-heading--split > a, .academy-section-heading--split > span { color: var(--academy-muted); font-size: 13px; white-space: nowrap; }
/* The reference grows the display and section headings at its md breakpoint
   (48rem): display 2.75rem → 3rem, section heading 1.375rem → 1.75rem. */
@media (min-width: 48rem) {
  .academy-hero h1, .academy-collection-hero h1, .academy-course-hero h1, .academy-lesson-header h1, .academy-quiz-hero h1 { font-size: 3rem; }
  .academy-section-heading h2, .academy-course-overview h2, .academy-course-source h2 { font-size: 1.75rem; }
}
/* Home: a two-card path chooser and a staged journey, built from our own
   collection sections rather than a hand-written list, so the home page can
   never drift out of sync with the catalogue. */
.academy-home-section-lead { max-width: 660px; margin: 12px 0 0; color: var(--academy-muted); font-size: 14px; line-height: 1.7; }
.academy-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.academy-path-card { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--academy-line); border-radius: 8px; background: var(--academy-surface); transition: border-color 140ms ease-out; }
.academy-path-card:hover { border-color: var(--academy-faint); }
.academy-path-card-kicker { margin: 0; color: var(--academy-muted); font-size: 12px; }
.academy-path-card h3 { margin: 12px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 26px; font-weight: 500; line-height: 1.3; }
.academy-path-card h3 a { text-decoration: none; }
.academy-path-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.academy-path-card-summary { margin: 0; color: var(--academy-muted); font-size: 14px; line-height: 1.75; }
.academy-path-card-stages { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.academy-path-card-stages li { padding: 5px 8px; border: 1px solid var(--academy-line); border-radius: 999px; color: var(--academy-muted); font-size: 12px; }
.academy-path-card-cta { margin: auto 0 0; padding-top: 20px; color: var(--academy-ink); font-size: 13px; font-weight: 600; }
/* Journey: tabbed by collection, one stage per section. Values are transcribed
   from the reference module rather than chosen — 20px between heading and tabs,
   a 28px numbered rail whose connector runs to the end of the stage (the
   reference keeps it, so the last stage carries a short stub too), and a
   280px-minimum card grid. The reference draws circle and connector from one
   token (10% ink); we use --academy-fill-2 for the circle and --academy-line
   (12% ink) for the line, which is the same role at the same weight. */
.academy-home-journey { display: flex; flex-direction: column; gap: var(--academy-gap-lg); }
.academy-home-journey .academy-section-heading { margin-bottom: 0; }
.academy-journey-tabs { display: flex; flex-direction: column; gap: var(--academy-gap-md); }
.academy-journey-panel { display: flex; flex-direction: column; gap: var(--academy-gap-md); }
/* Hidden until the script enhances the page: without JavaScript the panels
   stack and every path stays readable. */
.academy-journey-tablist { display: none; align-items: center; margin-left: calc(-1 * var(--academy-gap-sm)); }
.academy-journey.is-enhanced .academy-journey-tablist { display: flex; }
.academy-journey-tab { height: var(--academy-control-h); padding-inline: var(--academy-gap-sm); border: 0; border-radius: var(--academy-radius); background: none; color: var(--academy-muted); font: inherit; font-size: 13px; font-weight: 500; line-height: 19px; white-space: nowrap; cursor: pointer; }
.academy-journey-tab:hover { color: var(--academy-ink); }
.academy-journey-tab[aria-selected="true"] { color: var(--academy-ink); background: var(--academy-fill-2); }
.academy-journey-panel[hidden] { display: none; }
.academy-journey-stages { margin: 0; padding: 0; list-style: none; }
.academy-journey-stage { display: flex; gap: var(--academy-gap-md); min-width: 0; }
.academy-journey-rail { display: flex; flex-direction: column; align-items: center; }
.academy-journey-num { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--academy-fill-2); color: var(--academy-ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.academy-journey-line { flex: 1; width: 1px; background: var(--academy-line); }
.academy-journey-body { flex: 1; min-width: 0; padding-bottom: var(--academy-gap-lg); }
.academy-journey-body h3 { display: flex; align-items: center; min-height: 28px; margin: 0 0 var(--academy-gap-sm); font-size: 15px; font-weight: 600; }
.academy-journey-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--academy-gap-sm); }
@media (min-width: 640px) { .academy-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .academy-journey-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.academy-journey-card { display: flex; align-items: center; gap: var(--academy-gap-sm); min-width: 0; box-sizing: border-box; padding: 12px; border: 1px solid var(--academy-line); border-radius: 8px; background: var(--academy-surface); color: var(--academy-ink); font-size: 13px; font-weight: 500; line-height: 19px; text-decoration: none; }
.academy-journey-card:hover { border-color: var(--academy-faint); color: var(--academy-ink); text-decoration: none; }
.academy-journey-card-icon { flex: none; width: 14px; height: 14px; color: var(--academy-muted); }
.academy-journey-card-label { min-width: 0; }
.academy-journey-card-arrow { flex: none; width: 14px; height: 14px; margin-left: auto; color: var(--academy-muted); opacity: 0; transition: opacity 120ms ease-out; }
.academy-journey-card:hover .academy-journey-card-arrow,
.academy-journey-card:focus-visible .academy-journey-card-arrow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .academy-journey-card-arrow { transition: none; } }
/* Card grid steps 1 → 2 → 3 columns at the reference's own breakpoints. */
.academy-course-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 640px) { .academy-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .academy-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The source card uses a 128px cover above its 20px-padded body. */
.academy-course-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-radius: 1rem; background: var(--academy-surface-1); box-shadow: inset 0 0 0 1px hsl(from var(--academy-ink) h s l / 20%), 0 1px 2px 0 rgba(11, 11, 11, .08); }
.academy-course-card-cover { position: relative; display: block; height: 128px; flex: none; overflow: hidden; border-bottom: 1px solid var(--academy-line); background: var(--academy-brand-ground); }
.academy-badge-medal { display: block; flex: none; width: 20px; height: 20px; }
.academy-badge-sidebar-link { margin-top: 16px; }
.academy-course-complete { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; color: #141413; box-shadow: 0 5px 16px rgb(25 20 16 / 14%); font-size: 13px; font-weight: 650; line-height: 20px; white-space: nowrap; pointer-events: none; }
.academy-course-complete .academy-badge-medal { width: 22px; height: 22px; }

/* Full-bleed source crops and the user-provided engineering cover. */
.academy-course-card-art.academy-course-card-art-fullbleed { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.academy-course-card-art { position: absolute; right: -8%; bottom: 0; width: auto; height: 112%; }
.academy-course-card-art-dark { display: none; }
html[data-theme="dark"] .academy-course-card-art-light { display: none; }
html[data-theme="dark"] .academy-course-card-art-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .academy-course-card-art-light { display: none; }
  html:not([data-theme="light"]) .academy-course-card-art-dark { display: block; }
}
.academy-course-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px; }
.academy-course-card-kicker, .academy-course-card-summary { margin: 0; color: var(--academy-muted); font-size: 13px; line-height: 19px; }
.academy-course-card h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 1.25rem; font-weight: 500; line-height: 1.25; text-wrap: pretty; }
.academy-course-card h3 a { text-decoration: none; }
.academy-course-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.academy-course-card-footer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: auto; padding-top: 4px; color: var(--academy-muted); font-size: 13px; line-height: 19px; }
.academy-course-card-cta { margin-left: auto; color: var(--academy-ink); font-weight: 600; }
/* Progress ribbon, transcribed from the reference course ribbon: an outlined
   pill rather than a filled badge (1px ink hairline, transparent fill, 24px
   tall, 12.5px radius, 14px regular text). The reference only changes the
   label between its states. */
.academy-ribbon { align-self: flex-end; display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 3px 8px; border: 1px solid var(--academy-ink); border-radius: 12px; color: var(--academy-ink); font-size: 14px; font-weight: 400; line-height: 16px; white-space: nowrap; }
.academy-collection-hero, .academy-quiz-hero { padding: clamp(28px, 5vw, 64px) 0; border-bottom: 1px solid var(--academy-line); }
.academy-collection-actions > span, .academy-quiz-summary { color: var(--academy-muted); font-size: 13px; }
.academy-collection-section-summary, .academy-course-summary { max-width: 720px; color: var(--academy-muted); line-height: 1.8; }
.academy-resource-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.academy-course-grid + .academy-resource-grid { margin-top: 16px; }
.academy-resource-card { display: grid; grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr) auto; gap: 16px; align-items: start; min-width: 0; min-height: 118px; box-sizing: border-box; padding: 16px; border: 1px solid var(--academy-line); border-radius: 8px; background: var(--academy-surface); text-decoration: none; }
.academy-resource-card:hover { background: var(--selected-bg); text-decoration: none; }
.academy-resource-card-type, .academy-resource-card small { color: var(--academy-muted); font-size: 11px; line-height: 1.6; }
.academy-resource-card-copy, .academy-resource-card-copy strong, .academy-resource-card-copy small { display: block; min-width: 0; }
.academy-resource-card-copy strong { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.academy-resource-card-arrow { align-self: center; color: var(--academy-muted); }
.academy-course-subtitle { margin-top: 16px; font-size: 20px; }
.academy-course-summary { margin: 16px 0 24px; }
.academy-course-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; border: 1px solid var(--academy-line); border-radius: 8px; overflow: hidden; background: var(--academy-line); }
.academy-course-facts > div { min-width: 0; padding: 16px; background: var(--academy-surface); }
.academy-course-facts dt { color: var(--academy-muted); font-size: 11px; }.academy-course-facts dd { margin: 8px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.academy-course-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); gap: clamp(28px, 6vw, 88px); }
.academy-objective-list { padding-left: 20px; margin: 16px 0 0; }.academy-objective-list li { margin: 8px 0; line-height: 1.7; }.academy-course-audience p, .academy-course-source p { margin: 16px 0 0; color: var(--academy-muted); font-size: 14px; line-height: 1.8; }.academy-course-source-list { padding: 0; margin: 16px 0 0; list-style: none; }.academy-course-source-list li { padding: 8px 0; border-top: 1px solid var(--academy-line); }.academy-course-source-list a, .academy-course-source-list span { display: block; }.academy-course-source-list a { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }.academy-course-source-list span { margin-top: 4px; color: var(--academy-muted); font-size: 12px; }
.academy-lesson-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--academy-line); }.academy-lesson-list-item { border-bottom: 1px solid var(--academy-line); }.academy-lesson-list-item > a { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 8px; text-decoration: none; }.academy-lesson-list-item > a:hover { background: var(--selected-bg); text-decoration: none; }.academy-lesson-list-number { color: var(--academy-muted); font-variant-numeric: tabular-nums; }.academy-lesson-list-item strong, .academy-lesson-list-item small { display: block; }.academy-lesson-list-item small { margin-top: 5px; color: var(--academy-muted); font-size: 12px; }.academy-lesson-list-item.is-complete .academy-lesson-list-number { color: var(--accent-strong); }
.academy-lesson-header { max-width: 820px; padding: 28px 0 32px; }.academy-lesson-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; color: var(--academy-muted); font-size: 12px; }.academy-lesson-meta span + span::before { content: "·"; margin-right: 16px; color: var(--academy-line); }
.academy-lesson-breadcrumb, .academy-page-copy, .academy-lesson-summary { display: none; }
.academy-reader { display: grid; grid-template-columns: minmax(0, 832px) minmax(240px, 320px); gap: 48px; justify-content: start; align-items: start; }
/* The documentation shell stands in place of the product chrome rather than
   under it: the site header and the breadcrumb bar give up their space to the
   reading area. Hiding beats swapping — the header keeps its own bindings. */
body:has(.academy-lesson-page) .site-header,
body:has(.academy-lesson-page) .module-bar { display: none; }
/* The reference documentation shell, which replaces the product chrome on
   lesson pages: a fixed 56px header (h-14), a fixed 264px navigation column
   (w-66) shown from lg, and the reading area offset by that column. */
.academy-docs-header { position: fixed; top: 0; right: 0; left: 0; z-index: 30; display: flex; align-items: center; height: 56px; border-bottom: 1px solid var(--academy-line); background: var(--academy-surface-1); }
.academy-docs-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 100%; padding: 0 20px; }
.academy-docs-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--academy-ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.academy-docs-brand-logo { width: 22px; height: 22px; }
.artwork-brand-logo { display: block; flex: none; }
.artwork-brand-logo-dark { display: none !important; }
html[data-theme="dark"] .artwork-brand-logo-light,
html[data-theme="dark"] .artwork-brand-logo-light { display: none !important; }
html[data-theme="dark"] .artwork-brand-logo-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .artwork-brand-logo-light { display: none !important; }
  html:not([data-theme="light"]) .artwork-brand-logo-dark { display: block !important; }
}
.academy-docs-nav { display: none; align-items: center; gap: 4px; height: 100%; }
.academy-docs-nav a { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--academy-radius); color: var(--academy-muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.academy-docs-nav a:hover { color: var(--academy-ink); }
.academy-docs-nav a[aria-current="page"] { color: var(--academy-ink); background: var(--academy-fill-2); }
.academy-docs-actions { display: flex; align-items: center; gap: 8px; }
/* The reference's search sits at the top of the navigation column, wrapped in
   px-md/py-sm, as a full-width control one h-control tall. */
.academy-docs-search { padding: 6px 8px; }
.academy-docs-search .academy-search-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 24px; padding: 0 8px; border: 1px solid var(--academy-line); border-radius: 4px; background: var(--academy-surface); color: var(--academy-muted); font: inherit; font-size: 13px; line-height: 19px; text-align: start; cursor: pointer; }
.academy-docs-search .academy-search-trigger:hover { color: var(--academy-ink); border-color: var(--academy-faint); }
.academy-docs-search .academy-search-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.academy-docs-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: var(--academy-radius); background: none; color: var(--academy-muted); cursor: pointer; }
.academy-docs-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.academy-docs-action:hover { border-color: var(--academy-line); color: var(--academy-ink); }
.academy-docs-sidebar { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 20; display: none; width: 264px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--academy-line); background: var(--academy-surface-1); }
.academy-docs-tree { padding: 8px 12px 32px; }
.academy-docs-tree-section { margin: 16px 0 4px; padding: 0 8px; color: var(--academy-muted); font-size: 11px; font-weight: 650; letter-spacing: .08em; }
.academy-docs-tree a { display: block; padding: 4px 8px; border-radius: var(--academy-radius); color: var(--academy-muted); font-size: 13px; line-height: 19px; text-decoration: none; }
.academy-docs-tree a:hover { color: var(--academy-ink); background: var(--academy-fill-2); }
.academy-docs-tree a.is-current { color: var(--academy-ink); background: var(--academy-fill-2); font-weight: 500; }
.academy-docs-tree a.academy-docs-tree-lesson { padding-left: 20px; }
@media (min-width: 1024px) {
  .academy-docs-nav { display: flex; }
  .academy-docs-sidebar { display: block; }
}
/* The reading area sits to the right of the fixed column, below the fixed
   header. */
body:has(.academy-lesson-page) main.academy-lesson-page { max-width: none; margin: 0; padding: 56px 24px 40px 288px; }
/* Below lg the fixed column is gone, so the reading area takes the page's own
   inline padding again — including the safe area the sticky action row needs at
   the bottom. */
@media (max-width: 1023px) {
  body:has(.academy-lesson-page) main.academy-lesson-page { padding: 56px 16px calc(90px + env(safe-area-inset-bottom)); }
}
/* The contents column follows the reference exactly: it exists only from
   1470px (its min-[91.875rem]), so narrower viewports read a single column. */
body:has(.academy-lesson-page) .academy-reader { grid-template-columns: minmax(0, 832px); gap: 0; }
/* The contents column, to the reference's own measure: w-72 (288px), mr-4,
   pt-8/pb-8, gap-xs between entries, py-1 pl-3 on each link, a 12px indent for
   third-level entries, and a viewport-relative scroll box. */
body:has(.academy-lesson-page) .academy-outline-panel { position: sticky; top: 56px; align-self: start; width: 288px; margin-right: 16px; padding: 32px 0; }
.academy-toc ul { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 144px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.academy-toc li.is-nested { margin-left: 12px; }
.academy-toc a { display: block; padding: 4px 0 4px 12px; color: var(--academy-muted); font-size: 13px; line-height: 19px; text-decoration: none; }
.academy-toc a:hover, .academy-toc a[aria-current="true"] { color: var(--academy-ink); }
/* The reference marks the entry in view with a 2px rounded bar on the rail's
   left edge (w-0.5 rounded-full bg-fill-primary), and it eases to the new entry
   rather than jumping. */
.academy-toc { position: relative; }
.academy-toc-marker { position: absolute; left: 0; top: 0; width: 2px; height: 28px; border-radius: 9999px; background: var(--academy-ink); opacity: 0; pointer-events: none; transition: transform .25s ease, height .25s ease, opacity .15s ease; }
.academy-toc-marker.is-active { opacity: 1; }
@media (max-width: 1469px) { body:has(.academy-lesson-page) .academy-outline-panel { display: none; } }
/* Below lg the fixed column is gone, so the collapsible course list carries the
   navigation the way the reference's own mobile menu does. */
body:has(.academy-lesson-page) .academy-mobile-outline { display: none; }
@media (max-width: 1023px) { body:has(.academy-lesson-page) .academy-mobile-outline { display: block; border-bottom: 1px solid var(--academy-line); } }
/* Typography follows the reference's article scale: its Prose container runs the
   "sm" size, so the whole reading measure is 13px/19px and the headings are
   em-relative to that rather than fixed rem (h2 1.375em, h3 1.125em). Heading
   margins are the reference's own: a break of 2.5/2 flow units above, and its
   --_prose-x-after-heading of .667 below — both of the PROSE size, not of the
   heading's, which is why they go through the flow variable. */
.academy-prose { --academy-flow: 13px; min-width: 0; font-size: var(--academy-flow); line-height: 19px; }.academy-prose > :first-child { margin-top: 0; }.academy-prose :is(h2, h3) { font-family: Georgia, "Songti SC", serif; font-weight: 500; }.academy-prose h2 { margin: calc(var(--academy-flow) * 2.5) 0 calc(var(--academy-flow) * 0.667); font-size: 1.375em; line-height: 1.25; letter-spacing: -.025em; }.academy-prose h3 { margin: calc(var(--academy-flow) * 2) 0 calc(var(--academy-flow) * 0.667); font-size: 1.125em; line-height: 1.3; }.academy-prose p, .academy-prose ul, .academy-prose ol { margin: 1em 0; }.academy-prose li + li { margin-top: .45em; } .academy-prose li::marker { content: "•  "; }.academy-prose :is(pre, code) { font-family: "Cascadia Mono", Consolas, monospace; }.academy-prose :not(pre) > code { font-size: .9em; line-height: 1; padding: .0625em .25em; border: .5px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: .4em; background: color-mix(in srgb, currentColor 5%, transparent); white-space: pre-wrap; overflow-wrap: break-word; }.academy-prose pre { padding: 1em; overflow-x: auto; border: 1px solid var(--academy-line); border-radius: 8px; background: var(--academy-sunken); font-size: 13px; line-height: 1.65; }.academy-prose pre code { padding: 0; border: 0; background: none; font-size: inherit; white-space: inherit; }.academy-prose blockquote { margin: 1.5em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--academy-violet); color: var(--academy-muted); }
.academy-table-scroll { max-width: 100%; margin: 1.5em 0; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--academy-line); border-radius: 6px; }
.academy-table-scroll:focus-visible { outline: 2px solid var(--academy-focus); outline-offset: 3px; }
.academy-prose table { width: max-content; min-width: 100%; border-collapse: collapse; background: var(--academy-surface); font-size: 13px; line-height: 1.55; }
.academy-prose :is(th, td) { min-width: 9rem; padding: .4375em .75em; border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); text-align: left; vertical-align: top; }
.academy-prose :is(th, td):last-child { border-right: 0; }
.academy-prose tbody tr:last-child td { border-bottom: 0; }
.academy-prose th { background: var(--academy-sunken); font-weight: 650; }
/* Code blocks take the reference's shape: a bordered card whose toolbar carries
   the language and a copy control, with the code below it. The copy button stays
   hidden until the script marks the block, so it is never a dead control. */
.academy-code { margin: 1.5em 0; overflow: hidden; border: 1px solid var(--academy-line); border-radius: 9px; background: var(--academy-surface); }
.academy-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 16px; border-bottom: 1px solid var(--academy-line); color: var(--academy-muted); font-size: 12px; line-height: 19px; }
.academy-code-copy { display: none; padding: 2px 8px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--academy-muted); font: inherit; font-size: 12px; cursor: pointer; }
.academy-code[data-academy-code-ready="1"] .academy-code-copy { display: inline-flex; }
.academy-code-copy:hover { border-color: var(--academy-line); color: var(--academy-ink); }
.academy-prose .academy-code pre { margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: none; font-size: 12px; line-height: 17px; }
/* The reference paints syntax with Shiki: every token carries both its light and
   its dark colour as inline variables, and the theme swap just re-reads them. */
.academy-code pre { --shiki-light: #1f2328; --shiki-dark: #f3f7f6; }
.academy-code :is(pre, code, code span) { color: var(--shiki-light); }
html[data-theme="dark"] .academy-code :is(pre, code, code span) { color: var(--shiki-dark); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .academy-code :is(pre, code, code span) { color: var(--shiki-dark); }
}
/* The language switcher: one tab per language in the toolbar, one panel each. */
.academy-code-tablist { display: flex; align-items: center; gap: 2px; }
.academy-code-tab { height: 24px; padding: 0 8px; border: 0; border-radius: var(--academy-radius); background: none; color: var(--academy-muted); font: inherit; font-size: 12px; line-height: 19px; cursor: pointer; }
.academy-code-tab:hover { color: var(--academy-ink); }
.academy-code-tab[aria-selected="true"] { color: var(--academy-ink); background: var(--academy-fill-2); }
.academy-code-panel[hidden] { display: none; }
/* Collapsible sections, the reference's accordion. A details element keeps them
   operable without JavaScript, which the reference's own control cannot do. */
.academy-accordion { border-bottom: 1px solid var(--academy-line); }
/* The trigger is the reference's AccordionHeader: h-control tall (20px inside
   its prose scope) and inset by pad-md (6px). The title selector has to outrank
   `.academy-prose h3`, which would otherwise impose its own heading margins and
   size. */
.academy-accordion-summary { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 0; padding: 0 6px; border-radius: 5px; cursor: pointer; list-style: none; }
.academy-accordion-summary::-webkit-details-marker { display: none; }
.academy-accordion-summary:hover { background: var(--academy-fill-2); }
.academy-prose .academy-accordion-title { margin: 0; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 19px; letter-spacing: 0; }
.academy-accordion-mark { flex: none; width: 10px; height: 10px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 140ms ease-out; }
.academy-accordion[open] .academy-accordion-mark { transform: rotate(225deg) translate(-1px, -1px); }
.academy-accordion-body { padding: 4px 6px 8px; }
.academy-accordion-body > :first-child { margin-top: 0; }
.academy-accordion-body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .academy-accordion-mark { transition: none; } }
/* Next-step cards, the reference's Card at size sm: an icon, a linked title and
   a short description in a ringed box. */
.academy-card { display: flex; gap: 12px; margin: 16px 0; padding: 12px; border: 1px solid var(--academy-line); border-radius: 9px; background: var(--academy-surface); }
.academy-card-icon { display: inline-flex; flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--academy-muted); }
.academy-card-icon svg { width: 16px; height: 16px; }
.academy-card-body { min-width: 0; flex: 1; }
.academy-card-title { display: block; color: var(--academy-ink); font-size: 13px; font-weight: 500; line-height: 19px; text-decoration: none; }
.academy-card-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.academy-card-text { color: var(--academy-muted); font-size: 13px; line-height: 19px; }
.academy-card-text > :first-child { margin-top: 4px; }
.academy-card-text > :last-child { margin-bottom: 0; }
.academy-outline-panel { position: sticky; top: calc(var(--header-h) + var(--module-bar-h, 0px) + 20px); }.academy-outline { border-top: 1px solid var(--academy-line); }.academy-outline-title { margin: 16px 0; font-size: 13px; font-weight: 650; }.academy-outline-list { padding: 0; margin: 0; list-style: none; }.academy-outline-item { border-top: 1px solid var(--academy-line); }.academy-outline-item a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px 0; text-decoration: none; }.academy-outline-item a:hover { color: var(--academy-ink); }.academy-outline-number, .academy-outline-copy small { color: var(--academy-muted); font-size: 11px; }.academy-outline-copy strong, .academy-outline-copy small { display: block; }.academy-outline-copy strong { font-size: 12px; font-weight: 550; line-height: 1.45; }.academy-outline-copy small { margin-top: 4px; }.academy-outline-item.is-current a { color: var(--accent-strong); }.academy-outline-item.is-current .academy-outline-number::after { content: "•"; margin-left: 4px; }.academy-outline-item.is-complete .academy-outline-number { color: var(--accent-strong); }.academy-outline-quiz { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--academy-line); font-size: 12px; font-weight: 600; text-decoration: none; }
.academy-mobile-outline { display: none; }.academy-mobile-outline > summary { display: flex; justify-content: space-between; padding: 12px 0; cursor: pointer; font-size: 13px; font-weight: 600; }.academy-mobile-outline > summary span { color: var(--academy-muted); font-weight: 400; }.academy-mobile-outline[open] .academy-outline { margin-bottom: 16px; }
.academy-interaction { margin: 32px 0; padding: 24px; border: 1px solid var(--academy-line); border-top: 3px solid var(--academy-violet); border-radius: 8px; background: var(--academy-surface); }.academy-interaction-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.academy-interaction-kicker { margin: 0 0 8px; color: var(--academy-muted); font-size: 11px; font-weight: 650; letter-spacing: .08em; }.academy-interaction h3 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 650; }.academy-interaction-explanation, .academy-interaction-instruction, .academy-interaction-fallback { color: var(--academy-muted); font-size: 13px; line-height: 1.8; }.academy-interaction-fallback { margin-bottom: 0; font-size: 12px; }.academy-interaction-static-list { padding-left: 20px; margin: 16px 0; font-size: 13px; }
.academy-source-list { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--academy-line); }.academy-source-list h2 { margin: 0; font-size: 20px; }.academy-source-list ul { padding: 0; margin: 16px 0 0; list-style: none; }.academy-source-list li { padding: 12px 0; border-top: 1px solid var(--academy-line); }.academy-source-list a, .academy-source-list span, .academy-source-list small { display: block; }.academy-source-list a { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }.academy-source-list span, .academy-source-list small { margin-top: 4px; color: var(--academy-muted); font-size: 12px; line-height: 1.7; }
.academy-lesson-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; max-width: 820px; margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--academy-line); }.academy-lesson-previous, .academy-lesson-next { color: var(--academy-ink); font-size: 13px; font-weight: 600; text-decoration: none; }.academy-lesson-next { text-align: right; }.academy-lesson-actions .is-unavailable { color: var(--academy-muted); }.academy-complete-control { text-align: center; }.academy-complete-status, .academy-quiz-status { min-height: 1.4em; margin: 8px 0 0; color: var(--academy-muted); font-size: 12px; }
.academy-enhancement-note { margin: 8px 0 0; color: var(--academy-muted); font-size: 12px; line-height: 1.7; }.academy-section-outline { margin-top: 16px; border-top: 1px solid var(--academy-line); }.academy-section-outline ol { margin: 0; padding: 0; list-style: none; }.academy-section-outline li { border-bottom: 1px solid var(--academy-line); }.academy-section-outline a { display: block; padding: 8px 0; color: var(--academy-muted); font-size: 12px; line-height: 1.5; text-decoration: none; }.academy-section-outline a[aria-current="true"] { color: var(--accent-strong); font-weight: 600; }
.academy-quiz-hero { max-width: 820px; }.academy-quiz-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; }.academy-quiz-form { max-width: 820px; margin-top: 32px; }.academy-quiz-question { min-width: 0; margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--academy-line); }.academy-quiz-question legend { max-width: 100%; padding: 0; font-size: 17px; font-weight: 600; line-height: 1.65; }.academy-quiz-question legend span { display: inline-block; width: 34px; color: var(--academy-muted); font-size: 12px; font-variant-numeric: tabular-nums; vertical-align: 2px; }.academy-quiz-options { display: grid; gap: 8px; margin-top: 16px; }.academy-quiz-options label { display: flex; align-items: start; gap: 8px; padding: 12px 12px; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-surface); font-size: 14px; line-height: 1.6; cursor: pointer; }.academy-quiz-options label:has(input:checked) { border-color: var(--academy-focus); background: var(--selected-bg); }.academy-quiz-options input { flex: 0 0 auto; margin-top: 5px; }.academy-quiz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--academy-line); }
.academy-quiz-question [data-academy-question-result], .academy-quiz-question [data-academy-question-explanation] { min-height: 1.3em; margin: 8px 0 0; font-size: 13px; line-height: 1.7; }.academy-quiz-question.is-correct [data-academy-question-result] { color: var(--accent-strong); }.academy-quiz-question.is-incorrect [data-academy-question-result] { color: var(--academy-muted); }
@media (max-width: 1050px) { .academy-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.academy-reader { grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); gap: 28px; } }
@media (max-width: 900px) { .academy-hero, .academy-course-hero, .academy-course-overview { grid-template-columns: 1fr; }.academy-reader { grid-template-columns: minmax(0, 1fr); }.academy-outline-panel { display: none; }.academy-mobile-outline { display: block; border-bottom: 1px solid var(--academy-line); }.academy-path-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .academy-page { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }.academy-section-heading--split { align-items: start; flex-direction: column; }.academy-course-grid { grid-template-columns: 1fr; }.academy-course-card { min-height: 205px; }.academy-resource-card { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; min-height: 0; }.academy-resource-card-type { grid-column: 1 / -1; }.academy-resource-card-copy { grid-column: 1; }.academy-resource-card-arrow { grid-column: 2; grid-row: 2; }.academy-course-facts { grid-template-columns: 1fr; }.academy-lesson-list-item > a { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }.academy-prose { --academy-flow: 15px; }.academy-interaction { padding: 16px; }.academy-lesson-actions { position: static; grid-template-columns: 1fr auto; margin: 24px -16px 0; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); }.academy-complete-control { order: 3; grid-column: 1 / -1; }.academy-lesson-next { text-align: right; }.academy-quiz-question { padding: 20px 0; }.academy-quiz-question legend { font-size: 16px; }.academy-quiz-options label { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .academy-page *, .academy-page *::before, .academy-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Reader geometry measured against the Claude Platform Docs evaluation page. */
body:has(.academy-lesson-page) {
  --academy-paper: #fcfcfb;
  --academy-surface-1: #fcfcfb;
  --academy-ink: #0b0b0b;
  --academy-muted: #898781;
  --academy-fill-2: #0b0b0b1a;
  --academy-line: #0b0b0b1a;
  --academy-docs-body: #52514e;
  font-size: 14px;
  line-height: 21px;
}
html[data-theme="dark"] body:has(.academy-lesson-page) {
  --academy-paper: #151515;
  --academy-surface-1: #151515;
  --academy-ink: #f0efec;
  --academy-muted: #898781;
  --academy-fill-2: #ffffff1a;
  --academy-line: #ffffff1a;
  --academy-docs-body: #c3c2b7;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body:has(.academy-lesson-page) {
    --academy-paper: #151515;
    --academy-surface-1: #151515;
    --academy-ink: #f0efec;
    --academy-muted: #898781;
    --academy-fill-2: #ffffff1a;
    --academy-line: #ffffff1a;
    --academy-docs-body: #c3c2b7;
  }
}
body:has(.academy-lesson-page) main.academy-lesson-page {
  padding: 56px 0 40px 264px;
}
.academy-lesson-page .academy-docs-content {
  box-sizing: border-box;
  width: min(100%, 896px);
  margin: 0 auto;
  padding: 32px;
}
.academy-lesson-page .academy-docs-header-inner { justify-content: flex-start; gap: 0; padding: 0 16px; }
.academy-lesson-page .academy-docs-brand { flex: 0 0 264px; font-family: "Panyin Serif", Georgia, "Songti SC", serif; font-size: 18px; font-weight: 600; }
.academy-lesson-page .academy-docs-nav { flex: 1; gap: 8px; padding-left: 52px; }
.academy-lesson-page .academy-docs-nav a { height: 32px; font-size: 14px; font-weight: 400; }
.academy-lesson-page .academy-docs-actions { margin-left: auto; }
.academy-lesson-page .academy-lesson-header {
  max-width: none;
  margin: 0 0 28px;
  padding: 0;
}
.academy-lesson-page .academy-lesson-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  margin: 0 0 14px;
  color: #898781;
  font-size: 14px;
  line-height: 20px;
}
.academy-lesson-page .academy-lesson-breadcrumb a { color: inherit; text-decoration: none; }
.academy-lesson-page .academy-lesson-breadcrumb a:hover { color: var(--academy-ink); }
.academy-lesson-page .academy-kicker { display: none; }
.academy-lesson-page .academy-lesson-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.academy-lesson-page .academy-lesson-header h1 {
  max-width: none;
  font-family: "Panyin Serif", Georgia, "Songti SC", serif;
  font-size: 26.25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.academy-lesson-page .academy-page-copy {
  align-items: center;
  flex: none;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--academy-line);
  border-radius: 8px;
  background: var(--academy-surface-1);
  color: var(--academy-ink);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.academy-lesson-page .academy-page-copy[data-academy-page-copy-ready="1"] { display: inline-flex; }
.academy-lesson-page .academy-lesson-summary {
  display: block;
  margin: 12px 0 0;
  color: var(--academy-docs-body);
  font-size: 16.875px;
  line-height: 1.5;
}
.academy-lesson-page .academy-lesson-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.academy-lesson-page .academy-prose {
  --academy-flow: 15px;
  color: var(--academy-docs-body);
  font-size: 15px;
  line-height: 22px;
}
.academy-lesson-page .academy-prose :is(h2, h3) {
  color: var(--academy-ink);
  font-family: "Panyin Serif", Georgia, "Songti SC", serif;
  font-weight: 600;
  letter-spacing: 0;
}
.academy-lesson-page .academy-prose h2 { font-size: 20.625px; line-height: 1.25; }
.academy-lesson-page .academy-prose h3 { font-size: 16.875px; line-height: 1.3; }
.academy-lesson-page .academy-prose > h2:first-of-type,
.academy-lesson-page .academy-toc li:first-child { display: none; }
.academy-lesson-page .academy-prose > h2:first-of-type + h2 { margin-top: 0; }
.academy-lesson-page .academy-accordion-summary { min-height: 40px; padding: 8px 12px; border-radius: 8px; }
.academy-lesson-page .academy-prose .academy-accordion-title { font-size: 15px; line-height: 22px; }
.academy-lesson-page .academy-accordion-body { padding: 4px 12px 12px; }
.academy-lesson-page .academy-code { margin: 15px 0; border-radius: 8px; }
.academy-lesson-page .academy-code-bar { min-height: 36px; padding: 4px 16px; }
.academy-lesson-page .academy-code-tab { height: 28px; padding: 0 10px; font-size: 14px; line-height: 20px; }
.academy-lesson-page .academy-table-scroll { margin: 1em 0; border: 0; border-radius: 0; }
.academy-lesson-page .academy-prose table { border: 1px solid var(--academy-line); border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
.academy-lesson-page .academy-prose :is(th, td) { min-width: 0; padding: .4375em .75em; }
.academy-lesson-page .academy-prose th { background: color-mix(in srgb, var(--academy-ink) 5%, transparent); font-weight: 500; }
.academy-lesson-page .academy-docs-search { padding: 8px 12px; }
.academy-lesson-page .academy-docs-search .academy-search-trigger { height: 32px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.academy-lesson-page .academy-docs-tree { padding: 0 8px 32px; }
.academy-lesson-page .academy-docs-tree-section { margin: 8px 0 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.academy-lesson-page .academy-docs-tree a { min-height: 32px; padding: 6px 8px; border-radius: 8px; font-size: 14px; line-height: 20px; }
.academy-lesson-page .academy-docs-tree a.is-current { font-weight: 400; }
/* The reference's own 1470px row puts the article and the contents rail on one
   flex line: its article is mx-auto at max-w-4xl (896px incl. px-8), so the auto
   margins share the leftover and push the rail to the right edge. The reading
   column therefore centres in what is left of the rail, not in the whole
   viewport, which is what keeps it off the fixed column. Modelling that as a
   two-column grid avoids the overflow a widened row would introduce mid-resize. */
@media (min-width: 1470px) {
  .academy-lesson-page .academy-docs-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 32px 0;
  }
  body:has(.academy-lesson-page) .academy-reader { display: contents; }
  .academy-lesson-page .academy-lesson-header,
  .academy-lesson-page .academy-lesson-actions,
  body:has(.academy-lesson-page) .academy-reader > article { grid-column: 1; width: min(100%, 832px); margin-left: auto; margin-right: auto; }
  .academy-lesson-page .academy-lesson-header { margin-bottom: 28px; }
  .academy-lesson-page .academy-lesson-actions { margin-top: 40px; }
  body:has(.academy-lesson-page) .academy-reader > article { padding: 0; }
  /* The rail keeps its own 288px + mr-4 inside the 304px column, and spans every
     row so its sticky offset still works. */
  body:has(.academy-lesson-page) .academy-outline-panel { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 1023px) {
  body:has(.academy-lesson-page) main.academy-lesson-page { padding: 56px 0 90px; }
  .academy-lesson-page .academy-docs-content { width: min(100%, 896px); padding: 24px; }
  .academy-lesson-page .academy-docs-brand { flex-basis: auto; }
}

/* The Academy landing page follows the documentation home's measured frame. */
body:has(.academy-home-page) {
  --academy-paper: #fcfcfb;
  --academy-hero: #fcfcfb;
  --academy-surface-1: #fcfcfb;
  --academy-ink: #0b0b0b;
  --academy-muted: #52514e;
  --academy-line: #0b0b0b1a;
  --academy-fill-2: #0b0b0b1a;
}
html[data-theme="dark"] body:has(.academy-home-page) {
  --academy-paper: #151515;
  --academy-hero: #151515;
  --academy-surface-1: #151515;
  --academy-ink: #f0efec;
  --academy-muted: #c3c2b7;
  --academy-line: #ffffff1a;
  --academy-fill-2: #ffffff1a;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body:has(.academy-home-page) {
    --academy-paper: #151515;
    --academy-hero: #151515;
    --academy-surface-1: #151515;
    --academy-ink: #f0efec;
    --academy-muted: #c3c2b7;
    --academy-line: #ffffff1a;
    --academy-fill-2: #ffffff1a;
  }
}
body:has(.academy-home-page) .site-header,
body:has(.academy-home-page) .module-bar { display: none; }
body:has(.academy-home-page) main.academy-home-page { padding-top: 56px; }
.academy-home-page .academy-docs-header-inner { justify-content: flex-start; gap: 0; padding: 0 16px; }
.academy-home-page .academy-docs-brand { flex: 0 0 264px; font-family: "Panyin Serif", Georgia, "Songti SC", serif; font-size: 18px; font-weight: 600; }
.academy-home-page .academy-docs-nav { flex: 1; gap: 8px; padding-left: 52px; }
.academy-home-page .academy-docs-nav a { height: 32px; font-size: 14px; font-weight: 400; }
.academy-home-page .academy-docs-actions { margin-left: auto; }
.academy-home-page .academy-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 82px;
  box-sizing: border-box;
  width: min(calc(100vw - 48px), 1340px);
  min-height: min(720px, calc(100svh - 56px));
  margin-left: 50%;
  padding: 122px 0 80px;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  transform: translateX(-50%);
}
.academy-home-page .academy-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; padding-top: 26px; }
.academy-home-page .academy-hero .academy-kicker { margin: 0; font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: 0; }
.academy-home-page .academy-hero h1 { max-width: 620px; margin-bottom: 35px; font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 60px; font-weight: 300; line-height: 1.1; letter-spacing: 0; }
.academy-home-page .academy-hero-lead { max-width: 570px; margin: 0 0 33px; font-size: 19px; line-height: 27px; }
.academy-home-page .academy-hero .academy-search-trigger { width: 350px; max-width: 100%; height: 38px; margin-bottom: 35px; border-radius: 8px; font-size: 16px; line-height: 24px; }
.academy-home-page .academy-hero-actions { gap: 12px; margin: 0; }
.academy-home-page .academy-hero-actions .academy-action { min-height: 40px; padding: 6px 12px; border-color: var(--academy-line); background: var(--academy-surface-1); color: var(--academy-ink); font-size: 16px; font-weight: 400; }
.academy-home-page .academy-hero-actions .academy-action:hover { background: var(--academy-fill-2); }
.academy-home-page .academy-home-example {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  height: 400px;
  margin: 0;
  border-radius: 12px;
  background: var(--academy-surface-1);
}
.academy-home-page .academy-home-example:not(.is-enhanced) { height: auto; }
.academy-home-page .academy-home-example .academy-code-bar { min-height: 44px; padding: 4px 14px; }
.academy-home-page .academy-home-example .academy-code-tablist { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.academy-home-page .academy-home-example .academy-code-tablist::-webkit-scrollbar { display: none; }
.academy-home-page .academy-home-example .academy-code-tab { flex: none; height: 30px; padding: 0 10px; font-size: 16px; transition: color 120ms ease, background 120ms ease; }
.academy-home-page .academy-home-example .academy-code-tab[aria-selected="true"] { background: color-mix(in srgb, var(--academy-ink) 6%, transparent); }
.academy-home-page .academy-home-example .academy-code-copy { position: relative; flex: none; width: 30px; height: 30px; padding: 0; font-size: 0; }
.academy-home-page .academy-home-example .academy-code-copy::before,
.academy-home-page .academy-home-example .academy-code-copy::after { content: ""; position: absolute; width: 11px; height: 13px; border: 1.5px solid currentColor; border-radius: 2px; }
.academy-home-page .academy-home-example .academy-code-copy::before { left: 11px; top: 7px; }
.academy-home-page .academy-home-example .academy-code-copy::after { left: 7px; top: 5px; background: var(--academy-surface-1); }
.academy-home-page .academy-home-example .academy-code-panel { min-height: 0; flex: 1; overflow: auto; }
.academy-home-page .academy-home-example:not(.is-enhanced) .academy-code-panel { flex: none; }
.academy-home-page .academy-home-example pre { margin: 0; padding: 17px 20px; border: 0; background: none; font-family: var(--font-mono); font-size: 16px; line-height: 24px; }
.academy-home-page .academy-home-example :is(code, .academy-code-tab, .academy-code-copy) { font-family: var(--font-mono); }
/* Path layout must be present before soft navigation swaps in the home. */
.academy-fluency-world {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgb(11 11 11 / 10%);
  border-radius: 16px;
  background: var(--academy-surface-1);
  box-shadow: 0 1px 2px rgb(11 11 11 / 8%);
}
.academy-fluency-world-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 417px;
  background-color: #ebc9b7;
}
.academy-fluency-world-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #0b0b0b 1px, transparent 1px) 7px 7px / 14px 14px; opacity: .09; mask-image: radial-gradient(75% 75% at 50% 45%, #000 15%, transparent 72%); pointer-events: none; }
.academy-fluency-world-art img { position: relative; display: block; width: 80px; height: 80px; transition: transform 300ms ease-out; }
.academy-fluency-world:hover .academy-fluency-world-art img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .academy-fluency-world-art img { transition: none; } }
.academy-fluency-world-content { min-width: 0; }
.academy-fluency-world-content h3 {
  margin: 0;
  padding: 12px 14px 14px;
  font-family: "Panyin Serif", Georgia, "Songti SC", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}
.academy-fluency-world-content ul { margin: 0; padding: 0; list-style: none; }
.academy-fluency-world-content li { border-top: 1px solid rgb(11 11 11 / 10%); }
.academy-fluency-world-content a {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding: 10px 14px;
  color: var(--academy-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background 60ms cubic-bezier(.4, 0, .2, 1);
}
.academy-fluency-world-content a:hover { background: rgb(11 11 11 / 3%); }
.academy-fluency-world-content a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.academy-fluency-world-content a:focus-visible { outline: 2px solid var(--academy-focus); outline-offset: -2px; }
.academy-fluency-world-content small { flex: none; color: #898781; font-size: 13px; font-weight: 400; }
html[data-theme="dark"] .academy-fluency-world-art { background-color: #513127; }
html[data-theme="dark"] .academy-fluency-world-art::before { background-image: radial-gradient(circle, #fff 1px, transparent 1px); opacity: .06; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .academy-fluency-world-art { background-color: #513127; } html:not([data-theme="light"]) .academy-fluency-world-art::before { background-image: radial-gradient(circle, #fff 1px, transparent 1px); opacity: .06; } }
@media (max-width: 640px) {
  .academy-fluency-world { grid-template-columns: minmax(0, 1fr); }
  .academy-fluency-world-art { min-height: 128px; }
  .academy-fluency-world-content { padding: 0; }
  .academy-fluency-world-content a { align-items: baseline; }
  .academy-fluency-world-content small { white-space: nowrap; }
}
@media (max-width: 420px) {
  .academy-fluency-world-content a { gap: 8px; font-size: 13px; }
  .academy-fluency-world-content small { font-size: 11px; }
}

.academy-home-page :is(.academy-home-paths, .academy-home-journey, .academy-home-catalog) { padding: 32px 0 48px; border: 0; }
.academy-home-page .academy-home-paths { padding-top: 24px; }
.academy-home-page .academy-section-heading h2 { font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 22px; font-weight: 500; letter-spacing: 0; }
.academy-home-page .academy-section-heading .academy-kicker { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.academy-home-page .academy-progress-band { padding: 32px 0 48px; }
@media (max-width: 1023px) {
  .academy-home-page .academy-docs-brand { flex-basis: auto; }
  .academy-home-page .academy-hero { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 48px 0; }
  .academy-home-page .academy-hero h1 { font-size: 52px; }
  .academy-home-page .academy-home-example { max-width: 520px; width: 100%; }
}
@media (max-width: 640px) {
  .academy-home-page .academy-hero h1 { font-size: 42px; }
  .academy-home-page .academy-hero-copy { gap: 0; }
  .academy-home-page .academy-hero h1 { margin: 12px 0 24px; }
  .academy-home-page .academy-hero-lead { margin-bottom: 24px; font-size: 16px; line-height: 24px; }
  .academy-home-page .academy-hero .academy-search-trigger { margin-bottom: 24px; }
  .academy-home-page .academy-hero .academy-search-trigger-label { display: block; }
  .academy-home-page .academy-hero .academy-keycaps { display: none; }
  .academy-home-page .academy-hero { width: calc(100vw - 36px); }
  .academy-home-page .academy-home-example { height: 320px; }
  .academy-home-page .academy-home-example pre { font-size: 13px; line-height: 21px; }
}
@media (prefers-reduced-motion: reduce) { .academy-home-page .academy-home-example .academy-code-tab { transition: none; } }

/* Enhanced teaching controls keep native inputs and leave the static explanation visible. */
.academy-interaction-static { margin-top: 16px; color: var(--academy-muted); font-size: 13px; line-height: 1.8; }
.academy-interaction-static p { margin: 8px 0; }
.academy-interaction-ui { display: grid; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--academy-line); }
.academy-interaction-ui[hidden] { display: none; }
.academy-interaction-status { min-height: 1.5em; margin: 12px 0 0; color: var(--academy-muted); font-size: 12px; line-height: 1.6; }
.academy-interaction-button { min-height: 34px; justify-self: start; padding: 6px 12px; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-sunken); color: var(--academy-ink); font: inherit; font-size: 13px; cursor: pointer; }
.academy-interaction-button:hover:not(:disabled), .academy-tool-tabs .academy-interaction-button[aria-current="step"] { border-color: var(--academy-focus); background: var(--selected-bg); }
.academy-interaction-button[aria-current="step"]::before { content: "当前："; font-size: 11px; }
.academy-interaction-button:disabled { cursor: not-allowed; color: var(--academy-muted); text-decoration: line-through; }
.academy-interaction-choice { display: flex; align-items: start; gap: 8px; padding: 8px 8px; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-surface); font-size: 13px; line-height: 1.6; }
.academy-interaction-choice:has(input:checked) { border-color: var(--academy-focus); box-shadow: inset 3px 0 0 var(--academy-focus); }
.academy-interaction-choice input { flex: 0 0 auto; margin-top: 4px; }
.academy-four-d { display: grid; gap: 12px; }.academy-four-d-task { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--academy-line); border-radius: 6px; }.academy-four-d-task legend { padding: 0 4px; font-size: 14px; font-weight: 600; }.academy-four-d-task .academy-interaction-choice { display: inline-flex; margin: 5px 5px 0 0; }
.academy-interaction-feedback, .academy-structured-errors, .academy-prompt-output { min-height: 1.6em; margin: 0; padding: 12px; overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-sunken); font: 12px/1.7 "Cascadia Mono", Consolas, monospace; }
.academy-interaction-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }.academy-interaction-field textarea, .academy-interaction-feedback-input, .academy-structured-input { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; padding: 8px 8px; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-sunken); color: var(--academy-ink); font-family: inherit; font-size: 13px; line-height: 1.65; }
.academy-context-materials, .academy-discernment-checks { display: grid; gap: 8px; }.academy-context-total { margin: 0; color: var(--academy-muted); font-size: 12px; }.academy-interaction-ui progress { width: 100%; accent-color: var(--academy-focus); }
.academy-discernment-guide { margin: 0; color: var(--academy-muted); font-size: 13px; }.academy-discernment-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.academy-discernment-answer, .academy-tool-panel { min-width: 0; padding: 16px; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-sunken); }.academy-discernment-answer h4, .academy-tool-panel h4 { margin: 0 0 8px; font-size: 13px; }.academy-discernment-answer p, .academy-tool-panel p { margin: 0; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }.academy-interaction-rationale { display: block; margin: -3px 0 3px 8px; color: var(--academy-muted); font-size: 12px; line-height: 1.6; }
.academy-tool-tabs { display: flex; flex-wrap: wrap; gap: 8px; }.academy-tool-tabs .academy-interaction-button { text-align: left; }.academy-tool-tabs .academy-interaction-button[aria-current="step"] { font-weight: 700; }.academy-tool-panel { min-height: 86px; }.academy-structured-errors { color: var(--academy-ink); }.academy-structured-errors:not(:empty)::before { content: "检查结果：\A"; white-space: pre; color: var(--academy-muted); }
.academy-message-trace, .academy-eval-choices { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }.academy-message-trace-event[aria-pressed="true"] { border-color: var(--academy-focus); background: var(--selected-bg); font-weight: 700; }.academy-message-trace-detail, .academy-eval-result, .academy-resilience-feedback { min-width: 0; margin: 0; padding: 12px; overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid var(--academy-line); border-radius: 6px; background: var(--academy-sunken); font-size: 13px; line-height: 1.7; }.academy-message-trace-detail:focus-visible, .academy-eval-result:focus-visible { outline: 2px solid var(--academy-focus); outline-offset: 3px; }.academy-eval-result { font-variant-numeric: tabular-nums; }.academy-interaction .academy-table-scroll { max-width: 100%; margin: 0; }.academy-interaction .academy-table-scroll table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.55; }.academy-interaction .academy-table-scroll :is(th, td) { min-width: 8rem; padding: 8px 8px; border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); text-align: left; vertical-align: top; }.academy-interaction .academy-table-scroll th { background: var(--academy-sunken); }.academy-resilience-scenario { display: grid; min-width: 0; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--academy-line); border-radius: 6px; }.academy-resilience-scenario legend { padding: 0 4px; font-size: 14px; font-weight: 650; }.academy-resilience-facts { margin: 0; color: var(--academy-muted); font-size: 12px; }.academy-resilience-feedback:empty { display: none; }
@media (max-width: 720px) { .academy-discernment-columns { grid-template-columns: 1fr; }.academy-four-d-task .academy-interaction-choice { display: flex; margin-right: 0; }.academy-tool-tabs { display: grid; grid-template-columns: 1fr; } }

/* Course frames are local, attributed teaching evidence rather than decorative art. */
.academy-lesson-visual {
  display: block;
  max-width: 780px;
  margin: 28px 0 32px;
  overflow: hidden;
  border: 1px solid var(--academy-line);
  border-radius: 8px;
  background: var(--academy-sunken);
}
.academy-lesson-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #111;
}
.academy-lesson-visual-caption {
  display: block;
  padding: 8px 12px 12px;
  color: var(--academy-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Academy search. The trigger is transcribed from the reference documentation
   search: a field-height (24px) control with a 4px radius, a hairline ring that
   firms up on hover, and keycaps that are transparent with a currentColor
   hairline. Its fill is the reference's `--cds-fill-field`, which resolves to
   white at 50% — mixed from our own surface token instead so it also works in
   dark mode. The dialog itself has no reference to copy (the snapshot predates
   it opening), so it follows our own tokens. */
.academy-search { margin-left: auto; min-width: 0; }
.academy-search-trigger { display: flex; align-items: center; box-sizing: border-box; width: 100%; max-width: 18rem; height: 24px; gap: 8px; padding: 0 3px 0 8px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--academy-surface-1) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent); color: var(--academy-muted); font: inherit; font-size: 13px; line-height: 19px; cursor: pointer; transition: box-shadow 60ms ease-out; }
.academy-search-trigger:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }
.academy-search-trigger:focus-visible { outline: 2px solid var(--academy-focus); outline-offset: 2px; }
.academy-search-trigger-icon { flex: none; line-height: 1; }
.academy-search-trigger-label { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: start; }
.academy-keycaps { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.academy-keycaps kbd { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: calc(1em + 6px); height: calc(1em + 6px); padding: 0 3px; border: 1px solid currentColor; border-radius: 4px; background: transparent; font: inherit; line-height: 1; }
.academy-search-dialog { width: min(38rem, calc(100vw - 32px)); max-height: min(32rem, 80vh); margin: 12vh auto 0; padding: 0; overflow: hidden; border: 1px solid var(--academy-line); border-radius: 12px; background: var(--academy-surface); color: var(--academy-ink); box-shadow: 0 18px 48px rgb(0 0 0 / 22%); }
.academy-search-dialog::backdrop { background: rgb(0 0 0 / 28%); }
.academy-search-bar { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--academy-line); }
.academy-search-field { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.academy-search-field-icon { flex: none; color: var(--academy-muted); }
.academy-search-field input { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; line-height: 22px; }
.academy-search-field input:focus { outline: none; }
.academy-search-close { flex: none; padding: 3px 8px; border: 1px solid var(--academy-line); border-radius: 4px; background: none; color: var(--academy-muted); font: inherit; font-size: 12px; cursor: pointer; }
.academy-search-status { margin: 0; padding: 8px 16px 0; color: var(--academy-muted); font-size: 12px; line-height: 18px; }
.academy-search-status:empty { display: none; }
.academy-search-results { max-height: 24rem; margin: 8px 0 0; padding: 0 6px 8px; overflow-y: auto; list-style: none; }
.academy-search-result { display: block; padding: 8px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.academy-search-result:hover, .academy-search-result[aria-selected="true"] { background: var(--academy-paper-2); }
.academy-search-result strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.academy-search-result small { display: block; color: var(--academy-muted); font-size: 12px; line-height: 18px; }
.academy-search-empty { padding: 8px 16px 16px; color: var(--academy-muted); font-size: 13px; line-height: 20px; }

/* Academy header navigation, transcribed from the reference header: items are
   control-height (24px) pills in a 6px-gapped row. The reference hides its nav
   behind a menu button on small screens; ours scrolls instead, so a narrow
   reader keeps the same destinations without a collapsed menu to open. */
.academy-nav { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.academy-nav::-webkit-scrollbar { display: none; }
.academy-nav a { display: flex; flex: none; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px; border-radius: 4px; color: var(--academy-muted); font-size: 13px; line-height: 19px; white-space: nowrap; text-decoration: none; }
.academy-nav a:hover { background: var(--academy-paper-2); color: var(--academy-ink); }
.academy-nav a[aria-current="page"] { color: var(--academy-ink); font-weight: 600; }
/* The reference drops its keycaps on coarse pointers, where a keyboard
   shortcut is meaningless. */
@media (pointer: coarse) {
  .academy-keycaps { display: none; }
}
@media (max-width: 768px) {
  .academy-search-trigger { width: 24px; padding: 0; justify-content: center; }
  .academy-search-trigger-label { display: none; }
}

/* WCAG 2.2 asks for a 24px minimum target size. Links inside prose are exempt,
   as are the card titles (a stretched link already makes the whole card the
   target), but these standalone ones are not. The journey tabs meet it by
   height and the journey cards by padding, so neither is listed here. */
.academy-section-heading--split > a,
.academy-course-source-list a,
.academy-lesson-actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* The human-agent-teams interactions. Same vocabulary as the existing kinds:
   8px gaps, 8px radii, muted secondary text, ink for what the reader set. */
.academy-team-scale-size { display: inline-block; margin-left: 8px; color: var(--academy-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.academy-team-scale-reading { margin: 12px 0 0; padding: 12px; border: 1px solid var(--academy-line); border-radius: 8px; background: var(--academy-sunken); color: var(--academy-ink); font-size: 13px; line-height: 19px; }
.academy-capability-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin: 0 0 12px; }
.academy-capability-row label { font-weight: 650; }
.academy-capability-week { grid-column: 2; margin: 0; color: var(--academy-muted); font-size: 13px; line-height: 19px; }
.academy-roster-north-star { margin: 0 0 16px; padding: 12px; border-left: 3px solid var(--academy-violet); color: var(--academy-ink); font-size: 13px; line-height: 19px; }
.academy-roster-job, .academy-readiness-statement { min-width: 0; margin: 0 0 12px; padding: 12px; border: 1px solid var(--academy-line); border-radius: 8px; }
.academy-roster-job legend, .academy-readiness-statement legend { padding: 0 4px; font-size: 14px; font-weight: 650; }
.academy-roster-feedback { margin: 8px 0 0; color: var(--academy-muted); font-size: 13px; line-height: 19px; }
.academy-readiness-prompt { margin: 8px 0 0; padding: 12px; overflow-x: auto; border: 1px solid var(--academy-line); border-radius: 8px; background: var(--academy-sunken); color: var(--academy-ink); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }

/* Capability course: independently authored UI informed by the verified Chinese course page. */
/* The capability reader defaults to a light surface even when the OS prefers
   dark. Keep its inherited academy text tokens light as well; otherwise the
   global auto-dark palette paints pale text over the reader's white cards. */
html:not([data-theme="dark"]) body:has(:is(.academy-capability-course, .academy-capability-lesson, .academy-capability-quiz)) {
  --academy-ink: #141413;
  --academy-muted: #6a6963;
}
body:has(.academy-capability-course), body:has(.academy-capability-lesson), body:has(.academy-capability-quiz) { --cap-ink: #29231f; --cap-muted: #655f5a; --cap-line: #e7e3df; --cap-paper: #f9f9f7; --cap-surface: #fff; background: var(--cap-paper); color: var(--cap-ink); }
html[data-theme="dark"] body:has(.academy-capability-course), html[data-theme="dark"] body:has(.academy-capability-lesson), html[data-theme="dark"] body:has(.academy-capability-quiz) { --cap-ink: #f0efec; --cap-muted: #c3c2b7; --cap-line: #393939; --cap-paper: #151515; --cap-surface: #242424; }
body:has(.academy-capability-course) .site-header, body:has(.academy-capability-lesson) .site-header, body:has(.academy-capability-quiz) .site-header, body:has(.academy-capability-course) .module-bar, body:has(.academy-capability-lesson) .module-bar, body:has(.academy-capability-quiz) .module-bar { display: none; }
body:has(.academy-capability-course) main.academy-capability-course, body:has(.academy-capability-lesson) main.academy-capability-lesson, body:has(.academy-capability-quiz) main.academy-capability-quiz { max-width: none; margin: 0; padding: 0; }
.capability-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding: 0 max(24px, calc((100vw - 1100px)/2)); border-bottom: 1px solid var(--cap-line); background: var(--cap-surface); font-size: 14px; }
.capability-brand { color: var(--cap-ink); font-family: Georgia, "Songti SC", serif; font-size: 20px; font-weight: 700; text-decoration: none; }.capability-exit { color: var(--cap-muted) !important; text-decoration: none; }
.capability-course-wrap { padding-bottom: 72px; }.capability-crumb { display: flex; flex-wrap: wrap; gap: 10px; color: var(--cap-muted); font-size: 12px; }.capability-crumb a { color: inherit; text-decoration: none; }.capability-crumb a:hover, .capability-exit:hover { text-decoration: underline; }
.capability-hero { background: #f2d2c1; color: #29231f; }.capability-hero-inner { position: relative; max-width: 1100px; min-height: 350px; margin: auto; padding: 28px 340px 48px 0; }.capability-hero-copy h1 { margin: 36px 0 12px; font-family: Georgia, "Songti SC", serif; font-size: clamp(34px, 3.3vw, 46px); font-weight: 500; line-height: 1.24; }.capability-lead { max-width: 650px; margin: 0 0 10px; font-size: 17px; line-height: 1.65; }.capability-desc { max-width: 650px; margin: 0; color: #54463f; font-size: 14px; line-height: 1.7; }.capability-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.capability-facts span, .capability-lesson-counter span { padding: 4px 10px; border: 1px solid rgba(56,44,39,.17); border-radius: 999px; font-size: 12px; }.capability-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; font-size: 12px; }.capability-button { display: inline-flex; align-items: center; gap: 24px; padding: 11px 17px; border-radius: 7px; background: #29231f; color: #fff !important; font-size: 13px; font-weight: 650; text-decoration: none; }.capability-button:hover { background: #59413a; }.capability-hero-art { position: absolute; top: 92px; right: 52px; width: 220px; height: 160px; display: grid; place-items: center; }.capability-hero-art img { display: block; width: 220px; height: 128px; object-fit: contain; }
.capability-course-layout, .capability-lesson-shell { display: grid; grid-template-columns: minmax(0, 768px) minmax(0, 260px); gap: 72px; max-width: 1100px; margin: 0 auto; }.capability-course-layout { padding-top: 38px; }.capability-course-main, .capability-lesson-main { min-width: 0; }.capability-course-main h2, .capability-lesson-main h2, .capability-quiz-wrap h1 { font-family: Georgia, "Songti SC", serif; font-weight: 500; }.capability-course-main h2 { margin: 0 0 12px; font-size: 25px; }.capability-objectives { padding: 24px; border: 1px solid var(--cap-line); border-radius: 12px; background: var(--cap-surface); }.capability-objectives > p, .capability-lesson-objectives > p { margin: 0 0 14px; color: var(--cap-muted); font-size: 13px; }.capability-objectives ul, .capability-lesson-objectives ul { list-style: none; margin: 0; padding: 0; }.capability-objectives li, .capability-lesson-objectives li { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.6; }.capability-objectives li::before, .capability-lesson-objectives li::before { content: "›"; color: #b75e48; font-weight: 700; }.capability-intro { padding: 38px 0; }.capability-intro p { max-width: 720px; color: var(--cap-muted); font-size: 15px; line-height: 1.8; }.capability-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }.capability-heading span { color: var(--cap-muted); font-size: 12px; }.capability-chapters ol { list-style: none; margin: 0; padding: 0; }.capability-chapters li { border-bottom: 1px solid var(--cap-line); }.capability-chapters li a, .capability-quiz-link { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 74px; color: var(--cap-ink); text-decoration: none; }.capability-chapters li a:hover, .capability-quiz-link:hover { background: color-mix(in srgb, var(--cap-ink) 4%, transparent); }.capability-chapter-num { color: var(--cap-muted); font-variant-numeric: tabular-nums; }.capability-chapter-copy small, .capability-chapter-copy strong { display: block; }.capability-chapter-copy small { color: var(--cap-muted); font-size: 11px; }.capability-chapter-copy strong, .capability-quiz-link strong { margin-top: 4px; font-size: 15px; }.capability-chapter-state, .capability-quiz-link span { color: var(--cap-muted); font-size: 12px; }.capability-quiz-link { border-bottom: 1px solid var(--cap-line); }.capability-course-aside, .capability-toc { min-width: 0; }.capability-aside-card, .capability-toc { position: sticky; top: 24px; }.capability-aside-card > p { margin: 0 0 14px; font-size: 13px; font-weight: 700; }.capability-aside-card nav { display: grid; gap: 3px; }.capability-aside-card a { display: flex; gap: 10px; padding: 7px 0; color: var(--cap-muted); font-size: 12px; line-height: 1.45; text-decoration: none; }.capability-aside-card a:hover, .capability-page-links a:hover { color: var(--cap-ink); }.capability-aside-card a span { color: inherit; }.capability-source { max-width: 1100px; margin: 48px auto 0; padding-top: 18px; border-top: 1px solid var(--cap-line); color: var(--cap-muted); font-size: 12px; line-height: 1.7; }
.capability-lesson-shell { padding-top: 34px; }.capability-lesson-heading { margin: 0 0 24px; }.capability-lesson-heading h1 { margin: 24px 0 14px; font-family: Georgia, "Songti SC", serif; font-size: clamp(32px, 3vw, 40px); font-weight: 500; line-height: 1.3; }.capability-lesson-counter { display: flex; flex-wrap: wrap; gap: 8px; color: var(--cap-muted); }.capability-lesson-counter span { border-color: var(--cap-line); }.capability-lesson-objectives { padding: 22px 24px; border: 1px solid var(--cap-line); border-radius: 12px; background: var(--cap-surface); }.capability-lesson-objectives h2 { margin: 0 0 5px; font-size: 18px; }.capability-video { margin-top: 36px; }.capability-video h2 { font-size: 23px; }.capability-video-frame { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--cap-line); border-radius: 12px 12px 0 0; background: #201b19; }.capability-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }.capability-video-caption { padding: 16px 20px; border: 1px solid var(--cap-line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--cap-surface); font-size: 13px; line-height: 1.6; }.capability-video-caption p { margin: 6px 0 12px; color: var(--cap-muted); }.capability-video-caption details { border-top: 1px solid var(--cap-line); padding-top: 10px; }.capability-video-caption summary { cursor: pointer; }.capability-prose { max-width: none; padding-top: 34px; color: var(--cap-ink); }.capability-prose :is(h2,h3) { color: var(--cap-ink); font-family: Georgia, "Songti SC", serif; }.capability-prose > h2:first-of-type { margin-top: 0; }.capability-lesson-footer { max-width: none; margin-bottom: 72px; border-color: var(--cap-line); }.capability-lesson-footer a { line-height: 1.5; }.capability-lesson-footer a strong { font-weight: 650; }.capability-toc { align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; }.capability-course-picker { border: 1px solid var(--cap-line); border-radius: 12px; background: var(--cap-surface); font-size: 12px; }.capability-course-picker summary { padding: 16px; cursor: pointer; font-weight: 650; line-height: 1.5; }.capability-course-picker nav { display: grid; max-height: 45vh; overflow-y: auto; padding: 0 12px 12px; }.capability-course-picker nav a { padding: 7px; color: var(--cap-muted); text-decoration: none; }.capability-course-picker nav a[aria-current] { color: var(--cap-ink); font-weight: 700; }.capability-page-links { display: grid; gap: 2px; margin: 18px 0 0 7px; border-left: 1px solid var(--cap-line); }.capability-page-links a { padding: 7px 0 7px 14px; color: var(--cap-muted); font-size: 12px; line-height: 1.5; text-decoration: none; }.capability-page-links a.is-nested { padding-left: 25px; }.capability-mobile-chapters { display: none; }
.capability-quiz-wrap { max-width: 768px; margin: 0 auto; padding: 36px 0 90px; }.capability-eyebrow { color: #9b5643; font-size: 12px; font-weight: 700; }.capability-quiz-heading { margin: 48px 0 30px; }.capability-quiz-heading h1 { margin: 12px 0; font-size: clamp(32px, 3vw, 40px); }.capability-quiz-heading > p:not(.capability-eyebrow) { color: var(--cap-muted); font-size: 15px; line-height: 1.7; }.capability-quiz-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.capability-quiz-meta span { padding: 5px 10px; border: 1px solid var(--cap-line); border-radius: 999px; color: var(--cap-muted); font-size: 12px; }.capability-quiz-wrap .academy-quiz-form { max-width: none; }.capability-quiz-wrap .academy-quiz-question { margin-bottom: 14px; padding: 22px; border: 1px solid var(--cap-line); border-radius: 12px; background: var(--cap-surface); }.capability-quiz-back { display: inline-block; margin-top: 30px; color: var(--cap-muted); font-size: 13px; }
.academy-course-card-art.capability-card-art { inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f2d2c1; }.academy-course-card-art.capability-card-art-dark { display: none; }html[data-theme="dark"] .academy-course-card-art.capability-card-art-light { display: none; }html[data-theme="dark"] .academy-course-card-art.capability-card-art-dark { display: block; background: #49332f; }@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .academy-course-card-art.capability-card-art-light { display: none; }html:not([data-theme="light"]) .academy-course-card-art.capability-card-art-dark { display: block; background: #49332f; } }
@media (max-width: 1160px) { .capability-hero-inner, .capability-course-layout, .capability-lesson-shell, .capability-source { margin-left: 24px; margin-right: 24px; }.capability-course-layout, .capability-lesson-shell { gap: 36px; }.capability-quiz-wrap { margin-left: 24px; margin-right: 24px; } }
@media (max-width: 800px) { .capability-hero-inner { padding-right: 230px; }.capability-hero-art { right: 0; width: 210px; }.capability-course-layout, .capability-lesson-shell { grid-template-columns: minmax(0, 1fr); }.capability-course-aside, .capability-toc { display: none; }.capability-mobile-chapters { display: block; margin: 22px 0; padding: 14px 0; border-bottom: 1px solid var(--cap-line); }.capability-mobile-chapters summary { cursor: pointer; font-size: 13px; }.capability-mobile-chapters nav { display: grid; gap: 10px; margin-top: 14px; }.capability-mobile-chapters a { color: var(--cap-muted); font-size: 13px; text-decoration: none; }.capability-mobile-chapters a[aria-current] { color: var(--cap-ink); font-weight: 700; } }
@media (max-width: 580px) { .capability-topbar { padding: 0 18px; }.capability-hero-inner { margin: 0 18px; padding: 20px 0 34px; }.capability-hero-copy h1 { margin-top: 28px; }.capability-hero-art { position: static; width: 100%; height: 115px; margin-top: 16px; }.capability-hero-art img { height: 115px; }.capability-course-layout, .capability-lesson-shell, .capability-source, .capability-quiz-wrap { margin-left: 18px; margin-right: 18px; }.capability-lesson-shell { padding-top: 26px; }.capability-objectives, .capability-lesson-objectives { padding: 18px; }.capability-chapter-state { display: none; }.capability-chapters li a { grid-template-columns: 32px minmax(0,1fr); }.capability-lesson-footer { grid-template-columns: 1fr 1fr; }.capability-lesson-footer .academy-complete-control { grid-column: 1 / -1; }.capability-quiz-wrap .academy-quiz-question { padding: 18px; } }
/* Six grouped lesson sections use original color blocks, not invented lesson thumbnails. */
.capability-group { margin-top: 34px; }.capability-group-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }.capability-group-heading h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 20px; font-weight: 600; }.capability-group-heading span { color: var(--cap-muted); font-size: 12px; white-space: nowrap; }.capability-group > p { max-width: 680px; margin: 8px 0 16px; color: var(--cap-muted); font-size: 13px; line-height: 1.7; }.capability-chapters .capability-group ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.capability-chapters .capability-group li { min-width: 0; border: 1px solid var(--cap-line); border-radius: 10px; overflow: hidden; background: var(--cap-surface); }.capability-chapters .capability-group li a { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; height: 100%; }.capability-chapter-art { display: flex; align-items: end; height: 92px; padding: 12px 16px; background: #f3ded4; color: #904d3b; font-family: Georgia, serif; font-size: 28px; }.capability-group:nth-of-type(2n) .capability-chapter-art { background: #dce8e4; color: #406e69; }.capability-group:nth-of-type(3n) .capability-chapter-art { background: #e9e3ec; color: #695674; }.capability-chapters .capability-group .capability-chapter-copy { min-width: 0; padding: 13px 16px 16px; }.capability-chapters .capability-group .capability-chapter-copy strong { overflow-wrap: anywhere; line-height: 1.45; }.capability-chapters .capability-group .capability-chapter-state { display: none; }
@media (max-width: 580px) { .capability-chapters .capability-group ol { grid-template-columns: 1fr; }.capability-chapter-art { height: 68px; } }
/* Course completion follows the source outline: checked disc or empty ring, no visible status words. */
.capability-status-dot { display: inline-flex; flex: none; box-sizing: border-box; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #626260; border-radius: 50%; background: transparent; vertical-align: middle; }
.capability-complete .capability-status-dot,
[data-capability-aside-lesson][data-completed="true"] > .capability-status-dot,
[data-capability-lesson][data-completed="true"] > .capability-status-dot { border-color: #e4e6e6; background: #e4e6e6; }
.capability-complete .capability-status-dot::after,
[data-capability-aside-lesson][data-completed="true"] > .capability-status-dot::after,
[data-capability-lesson][data-completed="true"] > .capability-status-dot::after { content: "✓"; color: #3d4549; font-family: Arial, sans-serif; font-size: 12px; line-height: 1; }
.capability-aside-card [data-capability-aside-lesson] { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; }
.capability-chapter-copy small .capability-status-dot { width: 16px; height: 16px; margin-left: 4px; }
.capability-chapter-copy small .capability-status-dot::after { font-size: 10px; }
/* AI capabilities course overview only: source diagrams, responsive groups, and local progress. */
.academy-capability-course .capability-hero { background: #ebc9b7; }
.academy-capability-course .capability-hero-inner { min-height: 430px; padding-top: 72px; }
.academy-capability-course .capability-hero-copy h1 { margin-top: 22px; }
.academy-capability-course .capability-hero-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; max-width: 650px; margin-top: 24px; font-size: 12px; }
.academy-capability-course .capability-progress-track { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 99px; background: rgb(41 35 31 / 18%); }
.academy-capability-course .capability-progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--academy-progress-blue); }
.academy-capability-course .capability-hero-art { top: 125px; right: 0; width: 300px; height: 180px; }
.academy-capability-course .capability-hero-art img { width: 300px; height: auto; }
.academy-capability-course .capability-cover-dark { display: none; }
html[data-theme="dark"] body:has(.academy-capability-course) { --cap-ink: #f0efec; --cap-muted: #aaa9a6; --cap-line: #393939; --cap-paper: #151515; --cap-surface: #242424; }
html[data-theme="dark"] .academy-capability-course .capability-hero { background: #513127; color: #f0efec; }
html[data-theme="dark"] .academy-capability-course .capability-desc { color: #e0cfc5; }
html[data-theme="dark"] .academy-capability-course .capability-progress-track { background: rgb(255 255 255 / 25%); }
html[data-theme="dark"] .academy-capability-course .capability-progress-track > span { background: var(--academy-progress-blue); }
html[data-theme="dark"] .academy-capability-course .capability-cover-light { display: none; }
html[data-theme="dark"] .academy-capability-course .capability-cover-dark { display: block; }
.academy-capability-course .capability-mobile-progress { display: none; }
.academy-capability-course .capability-aside-progress { display: grid; gap: 8px; margin-bottom: 16px; color: var(--cap-muted); font-size: 12px; }
.academy-capability-course .capability-aside-progress .capability-progress-track, .academy-capability-course .capability-mobile-progress .capability-progress-track { background: var(--cap-line); }
.academy-capability-course .capability-aside-progress .capability-progress-track > span, .academy-capability-course .capability-mobile-progress .capability-progress-track > span { background: var(--academy-progress-blue); }
.academy-capability-course .capability-chapters .capability-group:first-of-type ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.academy-capability-course .capability-chapters .capability-group li { border: 1px solid var(--cap-line); }
.academy-capability-course .capability-chapters .capability-group li.capability-complete { border-color: var(--cap-line); }
.academy-capability-course .capability-chapters .capability-group li.capability-complete .capability-chapter-copy small { color: var(--cap-ink); font-weight: 700; }
.academy-capability-course .capability-chapter-art { align-items: center; justify-content: center; height: auto; aspect-ratio: 16 / 9; padding: 0; background: var(--cap-surface) !important; color: var(--cap-muted) !important; }
.academy-capability-course .capability-chapter-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.academy-capability-course .capability-chapter-art img.capability-lesson-dark { display: none; }
html[data-theme="dark"] .academy-capability-course .capability-chapter-art img.capability-lesson-light { display: none; }
html[data-theme="dark"] .academy-capability-course .capability-chapter-art img.capability-lesson-dark { display: block; }
.academy-capability-course .capability-card-origin { display: block; margin-top: 6px; color: var(--cap-muted); font-size: 11px; font-weight: 400; line-height: 1.4; }
.academy-capability-course .capability-group > p { max-width: 768px; }
@media (max-width: 800px) {
  .academy-capability-course .capability-hero-inner { padding-right: 230px; }
  .academy-capability-course .capability-hero-art { right: 0; width: 210px; }
  .academy-capability-course .capability-hero-art img { width: 210px; }
  .academy-capability-course .capability-mobile-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 12px 24px; border-bottom: 1px solid var(--cap-line); background: var(--cap-surface); color: var(--cap-muted); font-size: 12px; }
  .academy-capability-course .capability-mobile-progress .capability-progress-track { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .academy-capability-course .capability-hero-inner { min-height: 0; padding: 30px 0 35px; }
  .academy-capability-course .capability-hero-progress { margin-top: 22px; }
  .academy-capability-course .capability-hero-copy h1 { margin-top: 28px; font-size: 32px; }
  .academy-capability-course .capability-hero-art { display: none; }
  .academy-capability-course .capability-mobile-progress { padding: 12px 18px; }
  .academy-capability-course .capability-chapters .capability-group ol, .academy-capability-course .capability-chapters .capability-group:first-of-type ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .academy-capability-course .capability-chapters .capability-group .capability-chapter-copy { padding: 10px 12px 13px; }
  .academy-capability-course .capability-chapters .capability-group .capability-chapter-copy strong { font-size: 13px; }
}

/* Source-backed companion text is shown only on lessons whose source exposes it. */
.academy-lesson-page .academy-video-content { margin: 0 0 32px; border: 1px solid var(--academy-line); border-radius: 10px; background: var(--academy-surface-1); overflow: hidden; }
.academy-video-content-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--academy-line); font-weight: 600; }
.academy-video-content-choices { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--academy-line); border-radius: 8px; }
.academy-video-content-choices label { position: relative; cursor: pointer; font-size: 13px; font-weight: 400; }
.academy-video-content-choices input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.academy-video-content-choices label span { display: block; padding: 5px 12px; border-radius: 6px; }
.academy-video-content-choices input:checked + span { background: var(--academy-paper-2); color: var(--academy-ink); font-weight: 650; }
.academy-video-content-choices input:focus-visible + span { outline: 2px solid var(--academy-progress-blue); outline-offset: 2px; }
.academy-video-content-summary, .academy-video-content-transcript { padding: 8px 18px 16px; }
.academy-video-content-summary p, .academy-video-content-transcript p { margin: 12px 0 0; white-space: pre-line; }
.academy-video-content-transcript { display: none; }
.academy-video-content:has(input[value="transcript"]:checked) .academy-video-content-transcript { display: block; }
.academy-video-content:has(input[value="transcript"]:checked) .academy-video-content-summary { display: none; }

/* Academy lesson footers use the source site's two-card lesson navigation. */
.academy-lesson-page .academy-lesson-footer-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  width: min(100%, 768px); max-width: 768px; margin: 40px auto 72px;
  padding: 16px 0 0; border-top: 1px solid var(--academy-line); align-items: stretch;
}
.academy-lesson-page .academy-lesson-footer-cards .academy-footer-card {
  display: flex; box-sizing: border-box; min-width: 0; min-height: 71px;
  align-items: center; gap: 14px; padding: 16px; border: 0; border-radius: 12px;
  background: #fcfcfb; box-shadow: 0 0 0 1px rgba(11,11,11,.1);
  color: #0b0b0b; font-size: 14px; font-weight: 400; line-height: 21px; text-decoration: none;
}
.academy-lesson-page .academy-lesson-footer-cards .academy-footer-card:hover { background: #f4f4f1; }
.academy-lesson-footer-cards .academy-footer-card:focus-visible { outline: 2px solid var(--academy-progress-blue); outline-offset: 2px; }
.academy-lesson-footer-cards .academy-footer-arrow {
  display: flex; flex: 0 0 32px; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(11,11,11,.1); color: #52514e;
}
.academy-lesson-footer-cards .academy-footer-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.academy-lesson-footer-cards .academy-footer-copy > span { color: #898781; font-size: 12px; font-weight: 400; line-height: 17px; }
.academy-lesson-page .academy-lesson-footer-cards .academy-footer-copy strong {
  color: #0b0b0b; font-size: 15px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere;
}
.academy-lesson-page .academy-lesson-footer-cards .academy-lesson-next { flex-direction: row-reverse; text-align: right; }
.academy-lesson-footer-cards .academy-complete-status { grid-column: 1 / -1; min-height: 0; margin: 0; }
.academy-lesson-footer-cards .academy-complete-status:empty { display: none; }
html[data-theme="dark"] .academy-lesson-page .academy-lesson-footer-cards .academy-footer-card { background: #20201f; box-shadow: 0 0 0 1px rgba(255,255,255,.1); color: #f0efec; }
html[data-theme="dark"] .academy-lesson-page .academy-lesson-footer-cards .academy-footer-card:hover { background: #2a2a29; }
html[data-theme="dark"] .academy-lesson-footer-cards .academy-footer-arrow { background: rgba(255,255,255,.1); color: #c3c2b7; }
html[data-theme="dark"] .academy-lesson-page .academy-lesson-footer-cards .academy-footer-copy strong { color: #f0efec; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .academy-lesson-page .academy-lesson-footer-cards .academy-footer-card { background: #20201f; box-shadow: 0 0 0 1px rgba(255,255,255,.1); color: #f0efec; }
  html:not([data-theme]) .academy-lesson-page .academy-lesson-footer-cards .academy-footer-card:hover { background: #2a2a29; }
  html:not([data-theme]) .academy-lesson-footer-cards .academy-footer-arrow { background: rgba(255,255,255,.1); color: #c3c2b7; }
  html:not([data-theme]) .academy-lesson-page .academy-lesson-footer-cards .academy-footer-copy strong { color: #f0efec; }
}