/* Shared learning library: readable in both existing portal themes. */
.lesson-jumps{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}
.lesson-jumps a,.lesson-source,.lesson-back a{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.lesson-jumps a{padding:12px 16px;border:1px solid var(--line);border-radius:100px;background:var(--paper);font-size:14px}
.lesson-jumps a:hover{border-color:var(--code-violet)}
.code-page a:focus-visible,.code-page button:focus-visible,.code-page summary:focus-visible,.code-page pre:focus-visible{outline:3px solid var(--code-cyan);outline-offset:5px}
.lesson-group{padding-top:42px;scroll-margin-top:110px}
.lesson-group>h3{font:700 clamp(26px,4vw,40px)/1.15 var(--display);letter-spacing:-.025em;color:var(--text);margin:0 0 10px}
.lesson-group>p{color:var(--muted);line-height:1.7;margin:0 0 24px;max-width:70ch}
.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
.lesson-grid article{min-height:280px;gap:0}
.lesson-grid h3 a{color:inherit;text-decoration:none}
.lesson-grid h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.lesson-grid article>span{color:var(--muted);line-height:1.7;letter-spacing:.07em}
.lesson-grid p{font-size:15px;line-height:1.7;margin-bottom:26px}
.lesson-grid .lesson-card-link{display:block;margin-top:auto;color:var(--text);font-size:14px;font-weight:750;text-decoration:underline;text-underline-offset:5px;line-height:1.6}
.lesson-grid .lesson-card-link span{color:inherit;font:inherit}
.lesson-note{padding:24px 28px;border-left:3px solid var(--code-violet);border-radius:0 16px 16px 0;background:var(--paper-2);color:var(--muted);line-height:1.8;margin:28px 0;max-width:95ch}
.alt .lesson-note{background:var(--paper)}
.lesson-note h3{color:var(--text);font-size:18px;margin:0 0 8px}
.lesson-note p{margin:8px 0 0}
.lesson-hero{padding-block:42px 74px}
.lesson-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:14px;margin-bottom:45px;line-height:1.7}
.lesson-breadcrumb a{color:var(--text);text-underline-offset:4px}
.lesson-eyebrow{font:700 12px/1.8 monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lesson-hero h1{color:var(--text);font:700 clamp(42px,6.5vw,82px)/1.04 var(--display);letter-spacing:-.045em;margin:18px 0 28px;overflow-wrap:anywhere}
.lesson-hero h1 em{font-style:normal;color:var(--code-violet)}
.lesson-lead{font-size:clamp(18px,2vw,22px);line-height:1.75;color:var(--muted);max-width:72ch}
.lesson-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lesson-use-grid article{border:1px solid var(--line);border-radius:20px 34px 22px 28px;padding:26px;background:var(--paper)}
.lesson-use-grid h3{margin:0 0 12px;color:var(--text);font-size:22px}
.lesson-use-grid p{margin:0;color:var(--muted);line-height:1.8}
.lesson-example{margin-top:50px;padding-top:36px;border-top:1px solid var(--line);scroll-margin-top:110px}
.lesson-example-title>span{font:700 11px monospace;letter-spacing:.14em;color:var(--muted)}
.lesson-example h3{color:var(--text);font-size:clamp(24px,3vw,34px);line-height:1.25;margin:12px 0}
.lesson-example p{line-height:1.8;color:var(--muted)}
.lesson-code-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:start;margin-top:26px}
.lesson-code{min-width:0;border:1px solid #334d62;border-radius:20px;overflow:hidden;background:#071522;color:#d5edf0}
.lesson-code pre{margin:0;padding:26px;overflow:auto;max-width:100%;font:14px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4}
.lesson-code button{display:block;width:100%;padding:14px 20px;border:0;border-top:1px solid #334d62;background:#122c40;color:#d5edf0;font:700 14px var(--body, sans-serif);cursor:pointer;text-align:left}
.lesson-code button:hover{background:#1b3c54}
.lesson-explanation{min-width:0}
.lesson-explanation h4,.lesson-exercise h4{margin:0 0 14px;font-size:18px;color:var(--text)}
.lesson-explanation ol{padding-left:24px;margin:0 0 26px;color:var(--muted);line-height:1.8}
.lesson-explanation li+li{margin-top:10px}
.lesson-result{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;margin:0;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;color:var(--text);font:14px/1.75 ui-monospace,Consolas,monospace}
.lesson-exercise{padding:24px 28px;margin-top:26px;border:1px solid var(--line);border-radius:18px;background:var(--paper-2)}
.lesson-exercise p{margin:10px 0}
.lesson-exercise summary{cursor:pointer;color:var(--text);font-weight:700;padding:12px 0;text-underline-offset:4px}
.lesson-copy-status{min-height:1.8em;color:var(--muted);line-height:1.8}
.lesson-back{margin-top:35px}
.lesson-page .code-section{scroll-margin-top:75px}
.lesson-skip{position:fixed;left:16px;top:-100px;padding:14px 20px;z-index:10000;background:var(--paper);color:var(--text);border:2px solid var(--code-violet);border-radius:12px}
.lesson-skip:focus{top:16px}
@media(max-width:1000px){.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-code-layout{grid-template-columns:1fr}.lesson-use-grid{grid-template-columns:1fr}}
@media(max-width:600px){.lesson-grid{grid-template-columns:1fr}.lesson-hero{padding-block:28px 46px}.lesson-breadcrumb{margin-bottom:28px}.lesson-note,.lesson-exercise{padding:20px}.lesson-code pre{padding:20px;font-size:13px}.lesson-jumps a{padding:10px 14px}.lesson-grid article{min-height:240px}.lesson-page .code-section-head h2{font-size:36px;overflow-wrap:anywhere}}