/* Subject colors identify workshops without adding decorative edge bars. */
main.learning-page { padding:0; background:#fff; }
.learning-layout :focus-visible,.lesson :focus-visible { outline-color:var(--ink); }
.learning-layout { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start; }
.learning-sidebar { position:sticky; top:var(--header-height); min-height:calc(100dvh - var(--header-height) - 40px); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; scrollbar-width:thin; padding:28px 14px; border-right:1px solid var(--line); background:var(--paper); }
.workshop-contents>summary { display:none; }
.directory-heading { margin:0 38px 16px 10px; font:500 12px/1.4 var(--body); color:var(--muted); }
#sidebar-toggle { position:absolute; top:20px; right:14px; display:grid; place-items:center; width:32px; height:32px; padding:6px; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; }
#sidebar-toggle:hover { background:#eaece5; color:var(--ink); }
#sidebar-toggle svg { width:20px; height:20px; }
.learning-layout.sidebar-collapsed { grid-template-columns:48px minmax(0,1fr); }
.sidebar-collapsed .learning-sidebar { padding-inline:8px; border:0; background:#fff; }
.sidebar-collapsed #sidebar-toggle { right:8px; }
.sidebar-collapsed .sidebar-toggle-arrow { transform:translateX(29px) scaleX(-1); }
.course-group { margin-bottom:12px; }
.course-group summary { display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 10px; list-style:none; cursor:pointer; font:600 14px/1.4 var(--display); border-radius:6px; }
.course-group summary::-webkit-details-marker { display:none; }
.course-group summary:hover { background:#eaece5; }
.subject-icon { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:30px; height:30px; color:var(--subject-ink); background:var(--subject-fill); border-radius:7px; }
.subject-icon svg { width:18px; height:18px; }
.course-group summary small { display:block; margin-top:2px; color:var(--muted); font:400 11px/1.5 var(--body); }
.course-chevron { width:5px; height:5px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); margin-left:auto; margin-right:3px; }
.course-group[open] .course-chevron { transform:rotate(45deg); }
.course-group ol { padding:0; margin:0; list-style:none; }
.course-group li button,.course-introduction { display:flex; width:100%; border:0; background:transparent; text-align:left; color:var(--ink); align-items:center; gap:10px; min-height:38px; padding:8px 10px; margin:2px 0; font-size:12px; line-height:1.5; border-radius:6px; }
.course-group li button:hover,.course-introduction:hover { background:#eaece5; text-decoration:none; }
.course-group li button[aria-current],.course-introduction[aria-current] { background:#e7e9e3; color:var(--ink); font-weight:500; }
.lesson-index { width:20px; flex-shrink:0; text-align:center; font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted); }
[aria-current]>.lesson-index { color:inherit; }
#guide { min-width:0; padding:36px 32px 40px; }
.lesson { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; width:100%; max-width:720px; margin-inline:auto; }
.lesson-copy { min-width:0; }
.lesson-context { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; line-height:1.5; }
.subject-label { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:6px; background:var(--subject-bg); color:var(--subject-ink); font-size:13px; font-weight:500; }
.lesson-heading .lesson-title { color:var(--subject-ink); margin-top:14px; font:600 30px/1.18 var(--display); letter-spacing:-.8px; text-wrap:balance; }
.lesson-heading p { margin-top:14px; font-size:14px; line-height:1.7; color:var(--muted); }
.lesson-heading .lesson-title:focus { outline:none; }
.lesson .lesson-video { max-width:none; margin:0; }
.lesson .lesson-video-compact { width:100%; max-width:320px; margin:0; }
.lesson .lesson-actions > .lesson-video { margin:24px 0 30px; }
.video-preview { display:grid; place-items:center; aspect-ratio:16/9; color:#b8bdb5; border-radius:8px; overflow:hidden; background:#242823; }
.video-preview-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; font:400 13px/1.5 var(--body); }
.video-preview-center svg { width:32px; height:32px; color:#929d90; }
.lesson-video video { border-radius:8px; }
.youtube-video iframe { display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:8px; background:var(--ink); }
.lesson-actions { margin-top:30px; }
.lesson-actions h2 { font:600 14px/1.5 var(--display); letter-spacing:0; }
.lesson-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.lesson-links a { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; min-height:38px; padding:8px 12px; font:500 12px/1.5 var(--body); border-radius:6px; background:#f7f7f5; color:var(--ink); border:1px solid var(--line); }
.lesson-links a:hover { background:#eaece5; text-decoration:none; }
.action-list { margin:20px 0 0; padding:0; list-style:none; }
.action-list li { display:flex; align-items:baseline; gap:12px; margin-top:16px; font-size:14px; line-height:1.8; }
.action-list li>span { flex-shrink:0; width:20px; color:#858a80; font-size:12px; font-variant-numeric:tabular-nums; }
.lesson-prompt { margin-top:24px; }
.lesson-prompt h3 { font:500 12px var(--body); color:var(--muted); }
.lesson-prompt pre { margin-top:10px; background:var(--paper); border:1px solid var(--line); border-radius:6px; font-size:13px; }
.lesson-note { margin:20px 0 0 32px; color:var(--muted); font-size:12px; line-height:1.7; }
.lesson-check { display:flex; gap:10px; padding:18px 0 0; margin-top:24px; border-top:1px solid var(--line); }
.check-symbol { flex-shrink:0; color:var(--muted); font-size:14px; }
.lesson-check h2 { font:500 13px/1.7 var(--body); color:var(--ink); }
.lesson-check p { margin-top:6px; font-size:13px; line-height:1.7; color:var(--muted); }
.lesson-troubleshooting { margin-top:20px; border-bottom:1px solid var(--line); }
.lesson-troubleshooting summary { padding:10px 0 16px; cursor:pointer; font-size:12px; color:var(--muted); }
.lesson-troubleshooting p { margin:0 0 16px; font-size:13px; color:var(--muted); line-height:1.8; }
.lesson-navigation { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:24px; }
.lesson-navigation a { display:flex; align-items:center; gap:12px; min-height:44px; font:500 12px/1.5 var(--display); }
.lesson-navigation a:hover { text-decoration:underline; }
.lesson-navigation small { display:block; font:400 10px/1.8 var(--body); }
.lesson-previous { color:var(--muted); }
.lesson-next { color:var(--ink); margin-left:auto; text-align:right; }
#questions { padding:0; }
#questions .question:first-child { border-top:0; }
#questions .question:last-child { border-bottom:0; }
#questions .question summary { font-size:15px; }
#questions .question>div { color:var(--muted); }
@media(max-width:1199px) {
  .learning-layout { grid-template-columns:216px minmax(0,1fr); }
  #guide { padding:28px 24px; }
  .lesson { gap:28px; }
  .lesson-heading .lesson-title { font-size:27px; }
}
@media(min-width:721px) and (max-width:999px) {
  .learning-layout { grid-template-columns:200px minmax(0,1fr); }
  .lesson { grid-template-columns:1fr; }
}
@media(max-width:720px) {
  #sidebar-toggle { display:none; }
  .learning-layout { display:block; }
  .learning-sidebar { position:static; min-height:0; max-height:none; overflow:visible; padding:0; border-right:0; }
  .workshop-contents>summary { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; min-height:46px; font:500 12px var(--body); cursor:pointer; list-style:none; border-bottom:1px solid var(--line); }
  .workshop-contents>summary::-webkit-details-marker { display:none; }
  .directory-heading { display:none; }
  #workshop-picker { padding:12px; }
  .course-group { margin-bottom:4px; }
  #guide { padding:24px 16px 32px; }
  .lesson { grid-template-columns:1fr; gap:28px; }
  .lesson-heading .lesson-title { font-size:28px; }
  .lesson-navigation a { max-width:48%; }
}

.course-introduction { margin:6px 0 8px; }
/* Workshop overview: one clear entry point, followed by preparation and resources. */
.workshop-introduction { gap:28px; }
.workshop-introduction:has(.introduction-hero) { max-width:1100px; }
.introduction-hero { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(440px,65vh,680px); overflow:hidden; border-radius:24px; background:#111820; color:#fff; padding:clamp(24px,4vw,52px); }
.introduction-hero-media { position:absolute; inset:0; z-index:-2; overflow:hidden; container-type:size; pointer-events:none; }
.introduction-hero-media video { display:block; width:100%; height:100%; object-fit:cover; border:0; }
.introduction-hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.08) 15%,rgba(0,0,0,.4) 48%,rgba(0,0,0,.88) 100%); }
.introduction-hero .introduction-meta,.introduction-hero .introduction-summary,.introduction-hero .introduction-start > span { color:rgba(255,255,255,.8); }
.introduction-heading.introduction-hero .lesson-title { color:#fff; font-size:clamp(36px,5vw,64px); line-height:1.05; letter-spacing:-1.8px; }
.introduction-hero .introduction-summary { max-width:44ch; }
.introduction-hero .introduction-start a { background:#fff; color:#171b20; }
.introduction-hero .introduction-start a:hover { background:#e8e8e4; }
.introduction-hero-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:40px; font-size:11px; }
.introduction-hero-footer a { color:rgba(255,255,255,.7); }
.introduction-hero-footer button { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.35); border-radius:50%; padding:11px; background:rgba(0,0,0,.2); color:#fff; cursor:pointer; }
.introduction-hero-footer button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.introduction-meta { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12px; color:var(--muted); }
.introduction-heading .lesson-title { margin:0; font:600 32px/1.2 var(--display); letter-spacing:-.9px; color:var(--ink); }
.introduction-summary { margin:14px 0 0; max-width:58ch; font-size:16px; line-height:1.65; color:var(--muted); }
.introduction-start { display:flex; align-items:center; gap:16px; margin-top:22px; flex-wrap:wrap; }
.introduction-start a { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:44px; padding:10px 16px; border-radius:8px; background:var(--ink); color:#fff; font:500 14px/1.5 var(--display); }
.introduction-start a:hover { background:#3b3d37; text-decoration:none; }
.introduction-start > span { font-size:12px; color:var(--muted); }
.introduction-preparation { padding:18px 20px; background:#f7f7f4; border-radius:10px; }
.introduction-preparation h2 { margin:0 0 6px; font:600 14px/1.5 var(--display); }
.introduction-preparation p { margin:0; font-size:14px; line-height:1.65; color:var(--muted); }
.introduction-resources { display:grid; gap:22px; min-width:0; }
.introduction-resource-group h2 { margin:0 0 10px; font:600 14px/1.5 var(--display); }
.introduction-resource-list { padding:0 16px; border:1px solid var(--line); border-radius:10px; }
.introduction-resources .resource-row { gap:12px; min-height:48px; padding:12px 0; font-size:13px; }
.introduction-resources .resource-row > span:first-child { min-width:0; }
.introduction-resources .resource-row small { white-space:nowrap; }
.introduction-resources .resource-row > span:last-child { color:var(--muted); }
.introduction-resources .resource-row:last-child { border-bottom:0; }
.introduction-resources .resource-row:hover { color:var(--subject-ink); text-decoration:none; }
@media(max-width:480px) {
  .introduction-heading .lesson-title { font-size:28px; }
  .introduction-start { gap:10px; }
  .introduction-start > span { flex-basis:100%; }
  .introduction-resources .resource-row { flex-wrap:wrap; column-gap:8px; row-gap:3px; }
  .introduction-resources .resource-row > span:first-child { flex:1; }
  .introduction-resources .resource-row small { order:3; flex-basis:100%; }
}

.lesson-toolbar { justify-content:center; gap:8px; margin:0; flex-shrink:0; }
.lesson-toolbar .lesson-next { margin-left:0; }
.lesson-toolbar a { max-width:none; white-space:nowrap; min-height:44px; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.lesson-toolbar a:hover { background:#f0f2ed; text-decoration:none; }
.workshop-introduction .lesson-next { margin-left:0; text-align:left; }



.lesson-entry { display:flex; align-items:center; gap:6px; }
.course-group .lesson-entry button { min-width:0; flex:1; }
.lesson-bottom { grid-column:1 / -1; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-top:12px; border-top:1px solid var(--line); }
.lesson-bottom .lesson-troubleshooting { flex:1; min-width:0; margin:0; border:0; }
.lesson-bottom .lesson-troubleshooting summary { min-height:36px; padding:8px 0; line-height:20px; }
.lesson-bottom .lesson-troubleshooting p { padding-top:8px; }
@media(max-width:400px) {
  .lesson-bottom { gap:8px; }
  .lesson-toolbar a { padding-inline:8px; gap:6px; font-size:11px; }
  .lesson-bottom .lesson-troubleshooting summary { font-size:11px; }
}


.lesson-top { grid-column:1 / -1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.lesson-top .lesson-context { margin-right:auto; }
.lesson-bottom { border:0; padding-top:0; }
.lesson-check { border:0; }
.course-chevron { box-sizing:content-box; padding:6px; width:0; height:0; background-clip:content-box; }
#questions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 40px; align-items:start; }
.question-group h2 { font:600 17px/1.5 var(--display); margin-bottom:8px; }
#questions .question summary { padding:16px 4px; font-size:14px; }
#questions .question summary::after { content:''; width:7px; height:7px; flex-shrink:0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin:0 8px; color:var(--muted); transition:transform 160ms ease; }
#questions .question[open] summary::after { content:''; transform:rotate(225deg); }
#questions .question summary:hover { background:#f1f2ee; }
@media(max-width:720px) { #questions { grid-template-columns:1fr; } .lesson-top { gap:12px; } .lesson-top .lesson-context { width:100%; } .lesson-top .lesson-toolbar { margin-left:auto; } }

.code-heading { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.code-heading h3 { margin-right:auto; }
.code-heading button { padding:5px 12px; font-size:12px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); }
.copy-status { font-size:11px; color:var(--muted); }
.lesson-prompt pre { max-height:320px; overflow:auto; }
/* A single button owns the whole selected lesson row, including completion. */
.course-group .lesson-entry button { width:100%; gap:10px; margin:2px 0; }
.lesson-index { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#eceee8; color:#62685e; }
[aria-current]>.lesson-index { background:#fff; color:var(--ink); }
.lesson-top .lesson-title { display:flex; align-items:center; gap:12px; margin:0 auto 0 0; font:600 28px/1.25 var(--display); letter-spacing:-.7px; color:var(--ink); }
.lesson-actions { margin-top:0; }
.lesson-links { gap:18px; margin:0 0 20px; }
.lesson-links a { display:inline; min-height:0; padding:0; border:0; background:none; border-radius:0; font-size:13px; color:var(--subject-ink,var(--ink)); text-decoration:underline; text-underline-offset:4px; }
.lesson-links a:hover { background:none; }
.learning-block { margin-top:26px; }
.learning-block h2 { margin-bottom:10px; }
.learning-block p,.learning-block li,.learning-extra p,.learning-extra li { font-size:14px; line-height:1.8; color:var(--muted); }
.learning-block ul,.learning-extra ul { padding-left:20px; margin:10px 0; }
.learning-block li,.learning-extra li { margin:8px 0; }
.learning-extra { margin-top:16px; border:1px solid var(--line); border-radius:8px; padding:0 16px; }
.learning-extra summary { cursor:pointer; padding:14px 0; font-size:14px; }
.learning-extra[open] { padding-bottom:16px; }
.learning-extra .lesson-links { margin:16px 0; }
.learning-diagram { margin:0; }
.learning-diagram { padding:28px; background:#f7f7f4; border-radius:12px; }
.learning-diagram figcaption { font:500 13px var(--display); color:var(--muted); margin-bottom:24px; }
.learning-diagram ol { margin:0; padding:0; list-style:none; }
.learning-diagram li { display:flex; align-items:flex-start; gap:16px; position:relative; padding-bottom:32px; }
.learning-diagram li:not(:last-child)::after { content:''; position:absolute; top:34px; bottom:5px; left:16px; border-left:1px dashed #b9beb4; }
.learning-diagram li:last-child { padding-bottom:0; }
.diagram-dot { display:grid; place-items:center; flex-shrink:0; width:33px; height:33px; border-radius:50%; background:#e5eaf3; color:#415478; font-size:12px; }
.learning-diagram li:nth-child(2) .diagram-dot { background:#f5e9c9; color:#715e24; }
.learning-diagram li:nth-child(3) .diagram-dot { background:#dceddf; color:#35583a; }
.learning-diagram strong { font:600 18px/1.4 var(--display); }
.learning-diagram li p { margin-top:8px; font-size:13px; line-height:1.7; color:var(--muted); }
.diagram-caption { margin-top:24px; font-size:12px; line-height:1.7; color:var(--muted); }
@media(max-width:720px) { .lesson-top .lesson-title { width:100%; font-size:24px; } .learning-diagram { padding:20px; } }
.glossary-term { display:inline; padding:0; margin:0; border:0; border-radius:0; background:none; font:inherit; line-height:inherit; color:#586574; background:#eee5d9; border-radius:4px; padding:0 3px; text-decoration:underline dotted; text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer; }
.glossary-term:hover { color:var(--ink); background:#d6bd98; }
#term-definition { position:fixed; inset:auto; margin:0; width:300px; max-width:calc(100vw - 24px); padding:16px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); box-shadow:0 8px 32px #18222a20; }
.definition-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.definition-heading strong { font:600 15px var(--display); }
.definition-heading button { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; padding:0; border:0; border-radius:4px; background:#f4f5f1; font-size:20px; color:var(--muted); }
#term-definition p { margin:10px 0 0; font-size:13px; line-height:1.7; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.lesson-paragraph { margin:0 0 18px; font-size:16px; line-height:1.75; color:var(--ink); }
.learning-block h2 { font:600 19px/1.4 var(--display); margin:30px 0 12px; }
.learning-block p { font-size:16px; line-height:1.75; }
.lesson-resources { margin:0; padding:0; }
.lesson-resources summary { display:flex; align-items:center; gap:10px; width:fit-content; padding:10px 14px; border-radius:8px; background:var(--paper); font:500 14px/1.5 var(--display); cursor:pointer; list-style:none; }
.lesson-resources summary::-webkit-details-marker { display:none; }
.lesson-resources summary::after { content:''; width:6px; height:6px; margin-left:4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.lesson-resources[open] summary::after { transform:rotate(225deg) translate(-2px,-1px); }
.lesson-resources summary:hover { background:#eceee8; }
.resource-count { color:var(--muted); font-size:12px; }
.lesson-resource-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.lesson-resource-links a { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:12px 14px; border-radius:8px; background:var(--paper); font-size:14px; }
.lesson-resource-links a:hover { background:#eceee8; text-decoration:underline; text-underline-offset:4px; }
.tool-logo { display:block; width:auto; height:24px; max-width:130px; }
.tool-logo-v0 { height:26px; }
.learning-diagram .tool-logo { height:20px; }
.idea-list { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin:22px 0; }
.idea-list dt { font:500 14px/1.5 var(--display); }
.idea-list dd { margin:6px 0 0; font-size:13px; line-height:1.7; color:var(--muted); }
@media(max-width:480px) { .idea-list { grid-template-columns:1fr; } }

.lesson-intro .lesson-paragraph:last-child { margin-bottom:0; }
.lesson-actions > .sr-only:first-child + .learning-block { margin-top:0; }
.lesson-actions > .learning-block > h2 { margin-top:0; }
.learning-tool h2 { margin-top:0; }
.learning-tool > :last-child { margin-bottom:0; }

.next-chevron { width:6px; height:6px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); margin-right:2px; }
.tool-introduction { margin:0; }
.tool-link { display:inline-flex; align-items:center; justify-content:center; min-height:0; height:22px; padding:4px 6px; background:var(--subject-bg); border-radius:5px; box-sizing:border-box; vertical-align:middle; transform:translateY(-1px); }

.tool-link .tool-logo { height:12px; max-width:100px; }
.tool-link .tool-logo-v0 { height:12px; }
.learning-tool p,.learning-tool li { font-size:16px; line-height:1.75; color:var(--ink); }
.learning-tool .lesson-links { margin:14px 0 0; }
.learning-tool .lesson-links a { font-size:16px; color:var(--ink); text-decoration-thickness:1px; }

.inline-event-brand { white-space:nowrap; }
.inline-event-brand img { display:inline-block; width:28px; height:28px; margin-right:6px; border-radius:4px; vertical-align:middle; }
.illustrated-diagram { background:#f3f6ef; }
.illustrated-diagram ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.illustrated-diagram li { display:block; padding:0; }
.illustrated-diagram li:not(:last-child)::after { content:'→'; border:0; inset:48px -20px auto auto; color:#74836c; }
.illustrated-diagram .diagram-dot { display:none; }
.idea-drawing { width:100%; height:124px; margin-bottom:16px; color:#34533b; }
.illustrated-diagram strong { font-size:16px; }
.illustrated-diagram li p { font-size:14px; color:var(--ink); }
.idea-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.idea-list > div { padding:20px 0; border-top:1px solid var(--line); }
.idea-list dt { font-size:17px; }
.idea-list dd { font-size:15px; color:var(--ink); }
.idea-exploration { margin-top:12px; }
.idea-exploration summary { cursor:pointer; text-decoration:underline; text-underline-offset:4px; color:var(--subject-ink); }
.idea-exploration p { font-size:15px; color:var(--ink); margin:14px 0 0; }
.idea-exploration strong { display:block; font-size:13px; margin-bottom:3px; }
@media(max-width:600px) {
  .idea-list { grid-template-columns:1fr; }
  .illustrated-diagram ol { grid-template-columns:1fr; gap:26px; }
  .illustrated-diagram li { display:grid; grid-template-columns:110px 1fr; gap:16px; align-items:center; }
  .illustrated-diagram li:not(:last-child)::after { display:none; }
  .idea-drawing { height:92px; margin:0; }
}

.lesson-prompt pre { max-height:200px; padding:12px 14px; font:13px/1.55 ui-monospace, 'Cascadia Code', Consolas, monospace; }
.lesson-prompt code { font:inherit; }
.code-heading button { min-height:28px; height:28px; padding:3px 10px; line-height:1.3; }
.kit-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:24px 0; }
.kit-items > div { min-width:0; }
.kit-items svg { width:100%; height:112px; color:#586574; background:#f7f7f5; border-radius:8px; margin-bottom:12px; }
.kit-items h3 { font:600 16px/1.4 var(--display); margin:0 0 6px; }
.kit-items p { font-size:14px; color:var(--ink); line-height:1.6; }
.kit-connection { margin:24px 0; padding:20px; border:1px solid var(--line); border-radius:10px; }
.kit-connection svg { display:block; width:100%; height:auto; color:#586574; }
.kit-connection figcaption { font-size:13px; line-height:1.6; margin-top:16px; color:var(--muted); }
.deployment-celebration { padding:20px; border-radius:10px; background:#f0f2ed; }
.deployment-celebration p { margin:0 0 12px; }
.deployment-celebration button { border:1px solid var(--line); border-radius:6px; background:#fff; padding:8px 14px; cursor:pointer; }
.celebration-status { display:block; margin-top:8px; }
.deployment-unlocked { display:grid; gap:26px; margin-top:0; }
.deployment-unlocked:focus { outline:none; }
.lesson-skip { color:var(--muted); font-size:13px; text-underline-offset:3px; }
.deployment-confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:1000; }
.deployment-confetti i { position:absolute; top:0; width:7px; height:11px; }
@media(max-width:520px) { .kit-items { grid-template-columns:1fr; gap:18px; } .kit-items svg { width:120px; float:left; margin:0 16px 0 0; } .kit-items > div { display:flow-root; } .kit-connection { padding:10px; } }

.credit-walkthrough { display:grid; gap:24px; margin-top:20px; }
.lesson .credit-walkthrough figure { width:100%; min-width:0; margin:0; text-align:left; }
.credit-walkthrough h3 { font:600 16px/1.5 var(--display); margin:0 0 6px; }
.credit-walkthrough figure > p { margin:0 0 14px; }
.lesson .credit-walkthrough figure > img { margin-inline:0; }
.credit-walkthrough figure > img { display:block; width:100%; max-width:460px; height:auto; border-radius:10px; border:1px solid var(--line); }
.credit-walkthrough figure:first-child > img { max-width:380px; }
.inline-tool-logo { display:inline-block; width:auto; height:.9em; vertical-align:baseline; }
.tutorial-frame { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:10px; background:#e7e9e3; }
.tutorial-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity 180ms ease; }
.lesson-video .tutorial-media { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border:0; border-radius:0; }
.tutorial-media { opacity:0; transition:opacity 250ms ease; }
.tutorial-frame[data-state="playing"] .tutorial-media { opacity:1; }
.tutorial-frame[data-state="playing"] .tutorial-poster { opacity:0; pointer-events:none; }
.tutorial-start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid #ffffff80; border-radius:30px; color:var(--ink); background:#fffffff0; font-size:14px; cursor:pointer; }
.tutorial-start:disabled { cursor:wait; }
.tutorial-controls { position:absolute; z-index:2; inset:auto 0 0; display:flex; align-items:center; gap:12px; padding:24px 14px 10px; color:#fff; background:linear-gradient(transparent,#000a); }
.tutorial-controls button { display:grid; place-items:center; flex-shrink:0; min-width:32px; min-height:32px; border:0; border-radius:4px; background:none; color:inherit; padding:4px; font-size:12px; cursor:pointer; }
.tutorial-controls button:hover { background:#ffffff26; }
.tutorial-controls svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.tutorial-controls input { flex:1; min-width:30px; accent-color:#fff; }
.tutorial-controls output { font:12px ui-monospace,Consolas,monospace; }
.tutorial-frame:fullscreen { width:100%; height:100%; aspect-ratio:auto!important; border-radius:0; background:#000; }
.tutorial-controls :focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .tutorial-poster,.tutorial-media { transition:none; } }

/* Shared lesson media and mentor help. */
.lesson figure { margin-inline:auto; }
.lesson figure > img,.lesson figure > video,.lesson figure > svg { display:block; margin-inline:auto; }
.lesson figure > figcaption { margin:14px 0 0; text-align:center; font:400 13px/1.6 var(--display); color:var(--muted); }
.lesson .learning-diagram > figcaption { margin:0 0 24px; }
.kit-power-note { margin:14px 0 0; font-size:13px; line-height:1.6; }
.lesson .kit-items svg { float:none; display:block; margin:0 auto 12px; }
.lesson-mentor-help { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.lesson-mentor-help h2 { font:600 20px var(--display); margin:0 0 8px; }
.lesson-mentor-help > p { margin:0 0 20px; color:var(--muted); }
.mentor-roster { display:flex; flex-wrap:wrap; gap:20px; padding:0; margin:0; list-style:none; }
.mentor-roster li { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:64px; font-size:12px; }

.mentor-group h3 { font:500 13px var(--display); color:var(--muted); margin:0 0 16px; }
.mentor-backup { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.tutorial-poster { filter:blur(16px); }
.tutorial-frame[data-state="revealing"] .tutorial-media,
.tutorial-frame[data-state="ready"] .tutorial-media { opacity:1; transition:none; }
.tutorial-frame[data-state="revealing"] .tutorial-poster,
.tutorial-frame[data-state="ready"] .tutorial-poster { opacity:0; transition:none; pointer-events:none; }
.tutorial-controls[hidden],.tutorial-media[hidden] { display:none; }

.lesson figure > figcaption { text-align:left; }
.inline-copy button { padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.inline-copy .copy-status { margin-left:10px; font-size:13px; }
.promo-code { display:inline-block; vertical-align:baseline; }
.promo-code button { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid #ded4f4; border-radius:999px; background:#fff; box-shadow:-3px 0 12px #4285f426,3px 0 12px #d84d9b26; font:600 .88em/1.4 ui-monospace,Consolas,monospace; text-decoration:none; transition:box-shadow 150ms ease; }
.promo-code button:hover { box-shadow:-4px 0 16px #4285f445,4px 0 16px #d84d9b45; }
.promo-code-text { color:#6846a5; }
@supports (background-clip:text) {
  .promo-code-text { background:linear-gradient(105deg,#a7376c,#7543b7,#285ac4,#147366); background-clip:text; color:transparent; }
}
.promo-code svg { width:13px; height:13px; color:#766789; flex-shrink:0; }
@media(prefers-reduced-motion:reduce) { .promo-code button { transition:none; } }
@media(forced-colors:active) { .promo-code-text { background:none; color:ButtonText; } }
.inline-event-brand { font-weight:700; background:none; }
.inline-event-brand img { width:20px; height:20px; }
.tutorial-controls { opacity:0; pointer-events:none; transition:opacity 160ms ease; }
.tutorial-frame:hover .tutorial-controls,.tutorial-frame:focus-within .tutorial-controls { opacity:1; pointer-events:auto; }
.tutorial-controls .play-symbol { display:none; }
.tutorial-controls [data-paused="true"] .play-symbol { display:block; }
.tutorial-controls [data-paused="true"] .pause-symbol { display:none; }
@media(hover:none) { .tutorial-controls { opacity:1; pointer-events:auto; } }

:root { --semantic-info:#4285f4; }
.glossary-term { background:color-mix(in srgb,var(--semantic-info) 10%,transparent); color:var(--ink); padding:0 3px; text-decoration-color:var(--semantic-info); }
.glossary-term:hover { background:color-mix(in srgb,var(--semantic-info) 20%,transparent); color:var(--ink); }
.tool-link:hover { background:var(--subject-fill,#dceddf); }

.idea-accordion details { border-bottom:1px solid var(--line); padding:16px 0; }
.idea-accordion summary { cursor:pointer; font-weight:500; }
.idea-accordion p { margin:14px 0 0; }

/* Find an idea: kit and first-project tips. */
.kit-illustration { margin:24px 0 18px; }
.kit-illustration img { display:block; width:100%; height:auto; border-radius:12px; }
.kit-illustration figcaption { margin-top:9px; font-size:12px; color:var(--muted); }
.kit-contents { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0; }
.kit-contents h3 { margin:0 0 6px; font:600 16px/1.4 var(--display); }
.kit-contents p { margin:0; font-size:15px; line-height:1.7; }
.lesson-tip { display:flex; align-items:flex-start; gap:14px; padding:22px 24px; margin:30px 0; border:1px solid #e8dfbd; border-radius:12px; background:#faf5e7; color:#453d27; }
.lesson-tip > svg { flex:0 0 24px; width:24px; height:24px; margin-top:2px; color:#80671f; }
.lesson-tip-label { display:block; margin-bottom:5px; font-size:12px; font-weight:600; color:#80671f; }
.lesson .lesson-tip h2 { margin:0 0 8px; font-size:18px; }
.lesson .lesson-tip p { margin:0; font-size:15px; line-height:1.7; }
@media(max-width:520px) { .kit-contents { grid-template-columns:1fr; gap:16px; } .lesson-tip { padding:18px; gap:10px; } }

/* Give inline definitions breathing room, including on wrapped lines. */
.glossary-term { display:inline-block; margin:2px 2px; padding:0 4px; line-height:1.45; vertical-align:baseline; }
.kit-board-photo { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:28px; background:#f7f7f5; }
.kit-board-photo > img { display:block; width:150px; height:auto; border-radius:8px; }
.kit-board-photo figcaption { margin:0; }
.kit-board-photo h3 { margin:0 0 10px; font-size:18px; color:var(--ink); }
.kit-board-photo figcaption p { margin:0 0 12px; font-size:15px; color:var(--ink); }
.kit-board-photo figcaption > span { font-size:12px; }
.kit-resources { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 30px; }
.kit-resources a { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:16px; border:1px solid #d5dbd0; border-radius:10px; color:var(--ink); background:#f8faf5; text-decoration:none; }
.kit-resources a:hover { background:#edf2e7; border-color:#83937b; }
.kit-resources strong { display:block; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.kit-resources small { display:block; margin-top:7px; font-size:12px; line-height:1.6; color:var(--muted); }
.idea-corkboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:22px; margin:24px 0; padding:28px; border:8px solid #c5a27b; border-radius:14px; background-color:#d8bc96; background-image:radial-gradient(#9c75452e .7px,transparent .7px),radial-gradient(#fff5df55 .8px,transparent .8px); background-size:7px 9px,11px 13px; background-position:0 0,3px 4px; box-shadow:inset 0 2px 7px #64432222; }
.idea-note { position:relative; min-width:0; background:#fff5be; box-shadow:1px 4px 7px #62472826; border-radius:2px; }
.idea-note:nth-child(3n + 2) { background:#e9f0d4; }
.idea-note:nth-child(3n) { background:#f8e4d6; }
.idea-note::before { content:''; position:absolute; top:10px; left:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:#8c6554; box-shadow:1px 2px 2px #53352540,inset 1px 1px 1px #ffffff80; pointer-events:none; }
.idea-note summary { display:block; padding:30px 20px 18px; cursor:pointer; list-style:none; }
.idea-note summary::-webkit-details-marker { display:none; }
.idea-note summary:focus-visible { outline:2px solid #556749; outline-offset:4px; }
.idea-note-title { display:block; font:500 19px/1.35 var(--display); color:#302b24; }
.idea-note-description { display:block; margin-top:10px; font-size:14px; line-height:1.65; color:#514b3f; }
.idea-note-action { display:flex; justify-content:space-between; align-items:center; margin-top:20px; font-size:12px; font-weight:500; color:#514b3f; }
.idea-note-action > span:last-child { font-size:20px; line-height:1; }
.idea-note-close, .idea-note[open] .idea-note-open { display:none; }
.idea-note[open] .idea-note-close { display:inline; }
.idea-note[open] .idea-note-action > span:last-child { transform:rotate(45deg); }
.idea-note-details { padding:0 20px 20px; }
.lesson .idea-note-details p { margin:16px 0 0; font-size:14px; line-height:1.65; color:#514b3f; }
.idea-note-details strong { display:block; margin-bottom:4px; font-size:12px; color:#302b24; }
@media(max-width:580px) { .kit-resources { grid-template-columns:1fr; } .kit-board-photo { grid-template-columns:100px minmax(0,1fr); gap:18px; } .kit-board-photo > img { width:100px; } .idea-corkboard { grid-template-columns:1fr; padding:18px; gap:18px; border-width:6px; } }

/* Shared copyable blocks, adapted from the supplied CodeBlock component. */
.code-block { --cb-accent:#46744c; --cb-bg:#fafafa; --cb-border:#00000014; --cb-header:#00000008; --cb-plain:#171717; --cb-muted:#0009; --cb-gutter:#0005; --cb-hover:#0000000f; overflow:hidden; text-align:left; margin:24px 0; border:1px solid var(--cb-border); border-radius:16px; background:var(--cb-bg); color:var(--cb-plain); }
.code-block-header { display:flex; align-items:center; gap:12px; height:40px; padding:0 14px; border-bottom:1px solid var(--cb-border); background:var(--cb-header); }
.code-block-header > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:12px/1.4 ui-monospace,Consolas,monospace; color:var(--cb-muted); }
.code-block-copy { display:grid; place-items:center; position:relative; width:28px; height:28px; padding:6px; border:0; border-radius:8px; background:transparent; color:var(--cb-gutter); cursor:pointer; transition:background-color 150ms,color 150ms,transform 150ms; }
.code-block-copy:hover { background:var(--cb-hover); color:var(--cb-plain); }
.code-block-copy:active { transform:scale(.9); }
.code-block-copy:focus-visible, .code-block-viewport:focus-visible { outline:2px solid var(--cb-accent); outline-offset:-2px; }
.code-block-copy svg { grid-area:1/1; width:14px; height:14px; transition:opacity 180ms,transform 300ms cubic-bezier(.2,.8,.2,1),filter 180ms; }
.code-block-copy .check-icon { opacity:0; transform:scale(.5); filter:blur(4px); }
.code-block-copy[data-copied] { background:color-mix(in srgb,var(--cb-accent) 12%,transparent); color:var(--cb-accent); }
.code-block-copy[data-copied] .copy-icon { opacity:0; transform:scale(.5); filter:blur(4px); }
.code-block-copy[data-copied] .check-icon { opacity:1; transform:scale(1); filter:blur(0); }
.code-block-copy[data-copied] .check-icon path { stroke-dasharray:1; animation:code-check 200ms ease-out 50ms both; }
.code-block-viewport { overflow:auto; max-height:360px; padding:12px 0; scrollbar-width:thin; scrollbar-color:var(--cb-border) transparent; }
.code-block .code-block-viewport pre { width:max-content; min-width:100%; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; white-space:pre; font:13px/24px ui-monospace,'Cascadia Code',Consolas,monospace; tab-size:4; overflow:visible; }
.code-block code { font:inherit; }
.code-block-line { display:inline-block; min-width:100%; padding:0 14px; }
.code-block-line::before { content:attr(data-line); display:inline-block; width:3ch; margin-right:16px; text-align:right; color:var(--cb-gutter); user-select:none; }
.code-block ::selection { background:color-mix(in srgb,var(--cb-accent) 25%,transparent); }
.code-block > .copy-status:not(.sr-only) { display:block; padding:8px 14px; font-size:13px; }
@keyframes code-check { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
html.dark .code-block, html[data-theme="dark"] .code-block { --cb-bg:#222; --cb-border:#ffffff14; --cb-header:#ffffff08; --cb-plain:#fff; --cb-muted:#fff9; --cb-gutter:#ffffff48; --cb-hover:#ffffff14; --cb-accent:#91bf94; }
@media(prefers-reduced-motion:reduce) { .code-block-copy, .code-block-copy svg { transition:none; } .code-block-copy:active { transform:none; } .code-block-copy[data-copied] .check-icon path { animation:none; } }

.esp32-resources { margin:24px 0 30px; padding:22px; border:1px solid var(--line); border-radius:12px; background:#f7f7f5; }
.esp32-resources .kit-board-photo { margin:0; padding:0; border:0; background:none; grid-template-columns:120px minmax(0,1fr); gap:24px; }
.esp32-resources .kit-board-photo > img { width:120px; }
.esp32-resources .kit-resources { margin:20px 0 0; gap:10px; }
.esp32-resources .kit-resources a { padding:12px; background:#fff; }
.esp32-resources .kit-resources strong { font-size:13px; }
.esp32-resources .kit-resources small { margin-top:5px; font-size:11px; }
.idea-corkboard { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:20px; border-width:6px; }
.idea-note summary { padding:25px 14px 13px; }
.idea-note-title { font-size:16px; }
.idea-note-description { font-size:12px; line-height:1.6; margin-top:8px; }
.idea-note-action { margin-top:14px; font-size:11px; }
.idea-note { transition:transform 180ms ease,box-shadow 180ms ease; }
.idea-note:hover { transform:translateY(-3px); box-shadow:1px 7px 12px #62472830; }
.idea-note-dialog { position:fixed; inset:0; margin:auto; width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:32px; overflow:auto; border:0; border-radius:8px; color:#302b24; box-shadow:0 20px 80px #30221540; }
.idea-note-dialog[open] { animation:idea-note-enter 260ms cubic-bezier(.2,.8,.2,1) both; }
.idea-note-dialog::backdrop { background:#16120d80; }
.idea-note-dialog > button { position:absolute; right:12px; top:10px; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:#00000008; color:inherit; font-size:23px; cursor:pointer; }
.idea-note-dialog h2 { margin:4px 28px 12px 0; font:500 24px/1.3 var(--display); }
.idea-popup-description { font-size:15px; line-height:1.65; margin:0 0 22px; }
.idea-note-dialog .idea-note-details { padding:0; border-top:1px solid #302b2420; }
.idea-note-dialog .idea-note-details p { margin:20px 0 0; font-size:14px; line-height:1.7; }
.idea-note-dialog .idea-note-details strong { margin-bottom:5px; font-size:12px; }
@keyframes idea-note-enter { from { opacity:0; transform:translateY(12px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:660px) { .idea-corkboard { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; gap:12px; } }
@media(max-width:400px) { .idea-corkboard { grid-template-columns:1fr; } .esp32-resources { padding:16px; } .esp32-resources .kit-board-photo { grid-template-columns:80px minmax(0,1fr); gap:16px; } .esp32-resources .kit-board-photo > img { width:80px; } }
@media(prefers-reduced-motion:reduce) { .idea-note { transition:none; } .idea-note:hover { transform:none; } .idea-note-dialog[open] { animation:none; } }

.kit-illustration .kit-inventory { display:flex; flex-wrap:wrap; gap:8px 24px; margin:10px 0 0; padding:0; list-style:none; color:var(--ink); font-size:14px; }
.kit-cable-note { font-size:14px; line-height:1.7; }
.esp32-resources .kit-board-photo figcaption p { margin-bottom:12px; }
.esp32-programming, .esp32-port-note { margin:18px 0 0; font-size:14px; line-height:1.7; }
.esp32-resources .lesson-tip { margin:20px 0; padding:18px; }
.esp32-resources .lesson-tip h2 { font-size:16px; }
.esp32-resources .lesson-tip p { font-size:14px; }
.esp32-extra-resources { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.esp32-extra-resources > summary { cursor:pointer; font-size:14px; font-weight:500; }
.esp32-extra-resources > summary span { display:block; margin:6px 0 0 16px; color:var(--muted); font-size:12px; font-weight:400; }
.esp32-flash-reference { font-size:12px; line-height:1.7; margin:14px 0 0; }
.esp32-flash-reference a { text-decoration:underline; text-underline-offset:3px; }

.lesson-hero-image { margin:0; }
.lesson-hero-image > img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:10px; }

.lesson .lesson-hero-image > .lesson-image-labels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4%; margin:4px 5.5% 24px; text-align:center; }
.lesson-image-labels strong { display:block; color:var(--ink); font:600 clamp(16px,2.5vw,24px)/1.3 var(--display); }
.lesson-image-labels span { display:block; margin-top:6px; color:var(--muted); font:400 clamp(12px,1.6vw,16px)/1.5 var(--body); }

.inline-circuitpython { display:inline; margin:0; line-height:inherit; vertical-align:baseline; white-space:nowrap; background:none; color:var(--ink); }
.inline-circuitpython img { display:inline-block; width:28px; height:24px; margin-right:5px; object-fit:contain; vertical-align:middle; }
#term-definition.definition-expanded { width:480px; max-height:calc(100dvh - 24px); overflow-y:auto; padding:22px; }
.definition-details h3 { margin:18px 0 0; font:600 14px/1.4 var(--display); }
.definition-details ul { padding-left:18px; margin:10px 0 0; }
.definition-details li { margin:8px 0; font:400 13px/1.5 var(--body); }
.definition-details a { color:var(--green-text,#2c6e3a); text-decoration:underline; text-underline-offset:3px; }

/* CircuitPython expands from the click while its text fades into place. */
#term-definition { box-sizing:border-box; max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; }
#term-definition.definition-expanded {
  border-radius:20px;
  clip-path:var(--definition-closed-clip,inset(0 95% 95% 0 round 20px));
  opacity:0;
  transition:clip-path 250ms cubic-bezier(.22,1,.36,1), opacity 200ms ease,
    display 250ms allow-discrete, overlay 250ms allow-discrete;
}
#term-definition.definition-expanded:popover-open {
  clip-path:inset(0 0 0 0 round 20px);
  opacity:1;
  transition-duration:350ms,200ms,350ms,350ms;
  transition-timing-function:cubic-bezier(.34,1.25,.64,1),ease,ease,ease;
}
#term-definition.definition-expanded > * {
  opacity:0; transform:translateY(16px) scale(.97); filter:blur(2px);
  transition:opacity 200ms ease, transform 250ms cubic-bezier(.22,1,.36,1), filter 200ms ease;
}
#term-definition.definition-expanded[data-side="top"] > * { transform:translateY(-16px) scale(.97); }
#term-definition.definition-expanded:popover-open > * { opacity:1; transform:none; filter:none; }
@starting-style {
  #term-definition.definition-expanded:popover-open { opacity:0; clip-path:var(--definition-closed-clip); }
  #term-definition.definition-expanded:popover-open > * { opacity:0; transform:translateY(16px) scale(.97); filter:blur(2px); }
  #term-definition.definition-expanded[data-side="top"]:popover-open > * { transform:translateY(-16px) scale(.97); }
}
@media (prefers-reduced-motion:reduce) {
  #term-definition.definition-expanded, #term-definition.definition-expanded > * { transition:none; }
}

/* Compact checkpoints and illustrated follow-up lessons. */
.deployment-celebration { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; background:#f7f8f5; border:1px solid var(--line); }
.deployment-celebration p { margin:0; font:500 16px/1.5 var(--display); }
.deployment-celebration button { min-width:64px; margin:0; }
.deployment-unlocked .lesson-actions>.learning-block:first-of-type { margin-top:0; }
.learning-illustration { margin:16px 0 20px; }
.learning-illustration img { display:block; width:100%; height:auto; border-radius:10px; }
.learning-illustration figcaption { margin-top:8px; font-size:12px; color:var(--muted); }
.inline-resource-link .brand-icon { display:inline-block; width:1em; height:1em; margin-right:.3em; vertical-align:-.12em; }
.learning-diagram-illustration { background:#fafaf7; border:1px solid var(--line); border-radius:12px; padding:20px 12px; overflow:hidden; }
.learning-diagram-illustration .illustration-art img { object-fit:cover; object-position:50% 44%; aspect-ratio:3.5; }
.diagram-api .illustration-art img { aspect-ratio:4; }
.diagram-mcp .illustration-art img { aspect-ratio:2.6; object-position:50% 48%; }
.learning-diagram-illustration .diagram-labels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; list-style:none; padding:0; margin:8px 0 0; text-align:center; }
.diagram-api .diagram-labels { grid-template-columns:repeat(4,minmax(0,1fr)); }
.diagram-labels strong { display:block; color:var(--ink); font-size:14px; font-weight:500; }
.diagram-labels span { display:block; font-size:12px; line-height:1.5; margin-top:5px; }
.learning-diagram-illustration .diagram-direction { margin:0; text-align:center; font-size:13px; font-weight:500; color:#39764b; }
.learning-diagram-illustration .diagram-response { margin-top:22px; color:var(--muted); }
@media(max-width:500px) {
  .learning-diagram-illustration { padding:16px 8px; }
  .learning-diagram-illustration .diagram-labels { grid-template-columns:1fr; gap:12px; text-align:left; counter-reset:diagram-step; }
  .diagram-labels li { position:relative; padding-left:28px; counter-increment:diagram-step; }
  .diagram-labels li::before { content:counter(diagram-step); position:absolute; left:0; top:0; color:#39764b; font-size:12px; }
  .diagram-labels span { margin-top:2px; }
}
.learning-flow { display:flex; gap:16px; padding:18px!important; margin:16px 0!important; list-style:none; background:#f7f8f5; border-radius:12px; }
.learning-flow li { flex:1; min-width:0; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:8px; }
.learning-flow li:not(:last-child)::after { content:'→'; position:absolute; right:0; top:3px; color:#8c9388; }
.learning-flow svg { width:26px; height:26px; color:#4c7451; }
.learning-flow strong { font:500 13px/1.4 var(--display); }
.learning-flow small { color:var(--muted); font-size:11px; line-height:1.5; }
.lesson-warning { display:flex; gap:14px; margin:26px 0; padding:20px; border:1px solid #e9d9b4; border-radius:10px; background:#fffaf0; color:#6b5529; }
.lesson-warning>svg { width:24px; height:24px; flex-shrink:0; margin-top:2px; }
.lesson-warning h2 { margin:5px 0 8px; font-size:15px; }
.lesson-warning p,.lesson-warning li { font-size:13px; line-height:1.7; }
.lesson-warning ul { padding-left:18px; margin:10px 0 0; }
.lesson-warning li { margin:7px 0; }
.lesson-warning .lesson-links { margin:12px 0 0; }
.learning-project-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.learning-project-card { border:1px solid var(--line); border-radius:10px; background:#f8f9f5; overflow:hidden; }
.learning-project-card:nth-child(2) { background:#f0f5ed; }
.learning-project-card:nth-child(3) { background:#faf5ec; }
.learning-project-card summary { display:flex; flex-direction:column; gap:10px; padding:18px; cursor:pointer; list-style:none; }
.learning-project-card summary::-webkit-details-marker { display:none; }
.learning-project-card summary>strong { font:500 15px/1.4 var(--display); }
.learning-project-card summary>span:not(.learning-card-icon) { font-size:12px; line-height:1.6; color:var(--muted); }
.learning-card-icon svg { width:28px; height:28px; color:#586b55; }
.learning-project-card summary>small { display:flex; justify-content:space-between; margin-top:4px; color:#56624e; font-size:11px; }
.learning-project-card[open] summary>small span { transform:rotate(45deg); }
.learning-card-detail { padding:0 18px 18px; border-top:1px solid var(--line); }
.learning-card-detail p { font-size:12px; line-height:1.6; margin:12px 0; }
.learning-card-detail strong { display:block; margin-bottom:4px; color:var(--ink); }
.learning-card-detail>a { font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.learning-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.learning-resource-grid>a { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid var(--line); border-radius:8px; color:var(--ink); }
.learning-resource-grid>a:hover { background:#f7f8f5; }
.learning-resource-grid svg { width:22px; height:22px; flex-shrink:0; color:#62755a; }
.learning-resource-grid strong { display:block; font-size:13px; font-weight:500; }
.learning-resource-grid small { display:block; margin-top:5px; font-size:12px; line-height:1.5; color:var(--muted); }
.learning-resource-grid>a>span:last-child { margin-left:auto; }
@media(max-width:650px) {
  .learning-project-cards,.learning-resource-grid { grid-template-columns:1fr; }
  .learning-flow { flex-wrap:wrap; }
  .learning-flow li { flex:1 0 40%; }
  .learning-flow li:nth-child(2)::after { content:none; }
  .lesson-warning { padding:16px; gap:10px; }
}

/* Optional learning paths and comparison tables. */
.lesson-entry-optional .lesson-index { background:transparent; border:1px dashed #b9c3b5; }
.lesson-index svg { width:16px; height:16px; }
.lesson-optional-label { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:400; }
.learning-table-scroll { width:100%; overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:8px; }
.learning-table { width:100%; border-collapse:collapse; font-size:13px; line-height:1.6; text-align:left; }
.learning-table th,.learning-table td { padding:14px 16px; vertical-align:top; border-bottom:1px solid var(--line); }
.learning-table thead { background:var(--subject-bg,#eef4eb); }
.learning-table th { font-weight:500; }
.learning-table tbody th { width:23%; }
.learning-table tr:last-child>* { border-bottom:0; }
.learning-table thead th { border-bottom:1px solid var(--line); }
@media(max-width:600px) { .learning-table { min-width:510px; } }

.tool-link:has(.brand-icon) { display:inline; height:auto; padding:1px 3px; border-radius:3px; font:inherit; vertical-align:baseline; transform:none; white-space:nowrap; }
.tool-link .brand-icon { width:.85em; height:.85em; margin-right:.25em; vertical-align:-.08em; object-fit:contain; }

.brand-icon { display:inline-block; width:22px; height:22px; flex-shrink:0; object-fit:contain; vertical-align:middle; }
.lesson-title .brand-icon { width:32px; height:32px; }
.lesson-index:has(.brand-icon) { border:0; background:transparent; }
.lesson-index .brand-icon { width:22px; height:22px; }
.lesson-links .brand-icon { margin-right:7px; }
.resource-name { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.resource-name>span:last-child { overflow-wrap:anywhere; }
.resource-icon { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; }
.resource-icon svg,.resource-icon .brand-icon { width:22px; height:22px; margin:0; }
.resource-icon .tool-logo-v0 { width:28px; }
/* Resource hub: topics stay distinct while the link list grows with lessons. */
.resource-heading,.resource-layout { max-width:1680px; margin-inline:auto; }
.resource-heading { margin-bottom:28px; }
.resource-heading p { margin-top:10px; max-width:65ch; color:var(--muted); font-size:14px; text-wrap:pretty; }
.resource-heading>span { display:block; margin-top:10px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.resource-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; align-items:start; padding-bottom:40px; }
.resource-topics { position:sticky; top:calc(var(--header-height) + 24px); display:grid; gap:4px; }
.resource-topics>span { padding:0 12px 8px; color:var(--muted); font-size:12px; }
.resource-topics a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 12px; border-radius:6px; font-size:14px; line-height:1.4; }
.resource-topics small { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.resource-topics a:hover { background:#eceee8; text-decoration:none; }
.resource-topics a[aria-current] { background:#e9f4e9; color:var(--green-dark); font-weight:500; }
#resource-list { display:grid; gap:24px; min-width:0; }
.resource-topic { min-width:0; padding:24px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px oklch(0 0 0 / .06),0 1px 2px -1px oklch(0 0 0 / .06); }
.resource-topic h2 { display:flex; align-items:baseline; gap:12px; font:600 20px/1.3 var(--display); letter-spacing:-.3px; text-wrap:balance; scroll-margin-top:calc(var(--header-height) + 40px); }
.resource-topic h2>span { color:var(--muted); font:400 12px/1.5 var(--body); letter-spacing:0; font-variant-numeric:tabular-nums; }
.resource-topic header p { margin-top:8px; color:var(--muted); font-size:13px; text-wrap:pretty; }
.resource-topic ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; list-style:none; padding:0; margin:20px 0 0; }
.resource-topic li { min-width:0; border-top:1px solid var(--line); }
#resource-list .resource-row { height:100%; min-height:72px; padding:12px 4px; gap:10px; border:0; font-size:14px; line-height:1.5; border-radius:4px; }
#resource-list .resource-row:hover { background:var(--paper); text-decoration:none; }
#resource-list .resource-row:hover .resource-name>span:last-child { text-decoration:underline; text-underline-offset:3px; }
#resource-list .resource-row:focus-visible { outline-offset:1px; }
#resource-list .resource-row small { flex-shrink:0; max-width:90px; text-align:right; font-size:12px; }
#resource-list .resource-name { align-items:flex-start; }
#resource-list .resource-icon { width:24px; height:24px; }
.resource-host { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.resource-topic footer { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; margin-top:12px; padding-top:8px; border-top:1px solid var(--line); font-size:12px; }
.resource-topic footer>span { color:var(--muted); }
.resource-topic footer a { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--green-text); }
@media(max-width:1100px) {
  .resource-layout { grid-template-columns:180px minmax(0,1fr); gap:24px; }
  .resource-topic ul { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:720px) {
  .resource-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .resource-topics { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 8px; }
  .resource-topics>span { grid-column:1 / -1; padding-left:0; }
  .resource-topics a { padding:10px 8px; background:#eceee8; font-size:13px; }
  .resource-topic { padding:20px 16px; }
  .resource-topic h2 { font-size:18px; }
  #resource-list .resource-row small { max-width:76px; }
}
.learning-flow .brand-icon { width:28px; height:28px; }

/* Media follows the lesson text in one column. */
.lesson .learning-block > .lesson-video { margin:20px 0 0; }
.agent-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin:22px 0; }
.agent-comparison > div { min-width:0; }
.agent-comparison svg { display:block; width:100%; max-width:300px; height:auto; margin:auto; color:#a1a59b; }
.agent-comparison-accent { stroke:#659c63; }
.agent-comparison .agent-comparison-label { display:flex; flex-direction:column; gap:6px; margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--muted); }
.agent-comparison-label strong { font:500 16px/1.4 var(--display); color:var(--ink); }
.model-tier-icon { display:inline-block; width:22px; height:22px; margin-right:8px; vertical-align:middle; color:var(--ink); }
@media(max-width:520px) { .agent-comparison { grid-template-columns:1fr; gap:24px; } }

.context-diagram { margin:24px 0; padding:24px; border:1px solid var(--line); border-radius:12px; }
.context-diagram-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:13px; }
.context-diagram-heading span { color:var(--muted); }
.context-bar { display:grid; grid-template-columns:18fr 32fr 10fr 16fr 24fr; gap:3px; height:40px; margin:18px 0 22px; overflow:hidden; border-radius:6px; }
.context-cached { background:#bdc1b7; }
.context-history { background:#e0e2db; }
.context-request { background:#accbaa; }
.context-output { background:#679765; }
.context-room { background:repeating-linear-gradient(135deg,#fff,#fff 4px,#e9ebe5 4px,#e9ebe5 5px); border:1px solid #dce0d5; }
.lesson .context-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin:0; padding:0; list-style:none; }
.lesson .context-legend li { display:flex; align-items:flex-start; gap:9px; margin:0; padding:0; }
.context-legend i { flex:0 0 12px; height:12px; margin-top:4px; border-radius:2px; }
.context-legend strong { display:block; font-size:13px; font-weight:500; }
.context-legend small { display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--muted); }
.context-diagram figcaption { margin-top:22px; font-size:12px; line-height:1.5; color:var(--muted); }
@media(max-width:520px) { .context-diagram { padding:18px; } .lesson .context-legend { grid-template-columns:1fr; } }