.js-lesson-introduction{margin:2rem 0;padding:clamp(1.25rem,3vw,2rem);border:1px solid #bfc6c1;border-radius:20px;background:linear-gradient(145deg,#14221e 0 35%,#1b2d27 35% 100%);color:#fff}.js-lesson-context{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#f2b84b;font:750 .8rem/1.4 var(--font-geist-mono),monospace;letter-spacing:.05em}.js-lesson-introduction h2{margin:.8rem 0;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff}.js-lesson-opening{max-width:76ch;margin:0 0 1.5rem;color:#e7efeb;font-size:1.05rem;line-height:1.8}.js-introduction-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:1rem}.js-introduction-grid>article{min-width:0;padding:1.15rem;border:1px solid rgb(255 255 255/.2);border-radius:14px;background:rgb(255 255 255/.07)}.js-introduction-grid svg{color:#f2b84b}.js-introduction-grid h3{margin:.65rem 0 .4rem;color:#fff;font-size:1.05rem}.js-introduction-grid li,.js-introduction-grid p{color:#e7efeb;font-size:.96rem;line-height:1.65}.js-introduction-grid ol{padding-left:1.25rem;margin-bottom:0}.js-lesson-path{display:flex;align-items:center;gap:.55rem;overflow-x:auto;padding:.5rem 0}.js-lesson-path>a,.js-lesson-path>span,.js-lesson-path>strong{min-width:8rem;padding:.65rem;border:1px solid rgb(255 255 255/.22);border-radius:8px;color:#fff;text-decoration:none;font-size:.82rem;line-height:1.35}.js-lesson-path>strong{background:#f2b84b;color:#1f1808}.js-lesson-path>svg{width:14px;flex:none}.js-lesson-path small{display:block;margin-bottom:.2rem;font-size:.65rem;letter-spacing:.08em}.js-lesson-sequence{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:1rem}.js-lesson-sequence a{display:flex;align-items:center;gap:.5rem;padding:.7rem;border:1px solid rgb(255 255 255/.2);border-radius:9px;color:#fff;text-decoration:none;font-size:.88rem}.js-lesson-sequence span{display:grid;place-items:center;width:1.7rem;height:1.7rem;flex:none;border-radius:50%;background:#f2b84b;color:#1f1808;font-weight:800}@media(max-width:900px){.js-introduction-grid{grid-template-columns:1fr}.js-lesson-sequence{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.js-lesson-sequence{grid-template-columns:1fr}.js-lesson-context{display:grid}.js-lesson-path{align-items:stretch;flex-direction:column}.js-lesson-path>svg{rotate:90deg;align-self:center}}.js-depth{display:grid;gap:1.5rem;margin:2rem 0;color:#17201d}.js-depth-examples,.js-depth-explanations,.js-depth-grid>article,.js-depth>header,.js-practice-ladder{border:1px solid #cfd5cf;border-radius:18px;background:#fff;padding:clamp(1.25rem,3vw,2rem)}.js-depth>header{background:linear-gradient(135deg,#fff6d8,#fff 60%)}.js-depth h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:.35rem 0 1rem}.js-depth h3{font-size:1.16rem;line-height:1.35;margin:0 0 .5rem}.js-depth dd,.js-depth li,.js-depth p{font-size:1rem;line-height:1.75}.js-depth>header ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}.js-depth>header li{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem;background:rgb(255 255 255/.75);border:1px solid #eadca9;border-radius:10px}.js-depth>header li svg{width:19px;flex:none;margin-top:.3rem;color:#7a5100}.js-depth-explanations>article{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;padding:1.25rem 0;border-top:1px solid #dde1dd}.js-depth-explanations>article>span{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:#f2b84b;font:700 .8rem/1 var(--font-geist-mono),monospace}.js-depth-explanations article p{margin:0;max-width:76ch}.js-depth-examples{display:grid;gap:1.25rem}.js-depth-examples>.workshop-kicker,.js-depth-examples>h2{grid-column:1/-1}.js-depth-examples>article{min-width:0;padding:1.1rem;background:#f6f7f4;border-radius:12px}.js-depth-examples .tutorial-code-block{margin-bottom:0}.js-depth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.js-depth-grid>article>svg{color:#8a5a00}.js-depth-grid ol{padding-left:1.25rem}.js-depth-grid li{padding:.25rem 0}.js-depth-grid dl{margin:0}.js-depth-grid dl>div{padding:1rem 0;border-top:1px solid #dde1dd}.js-depth-grid dt{font-weight:750}.js-depth-grid dd{margin:.35rem 0 0;color:#43504b}.js-practice-ladder>ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;padding:0;list-style:none}.js-practice-ladder li{padding:1rem;background:#14221e;color:#fff;border-radius:12px}.js-practice-ladder li>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#f2b84b;color:#201704;font-weight:800}.js-practice-ladder li p{margin:.8rem 0 0;color:#fff}.js-practice-ladder>p{margin-bottom:0;color:#4c5854}@media(max-width:800px){.js-depth-explanations>article,.js-depth-grid,.js-depth>header ul,.js-practice-ladder>ol{grid-template-columns:1fr}}.js-workshop{--js-accent:#9b5b00}.js-workshop .workshop-kicker{color:var(--js-accent)}.js-workshop #js-concepts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.js-workshop #js-concepts>section,.js-workshop .workshop-panel{border:1px solid #d9ddd9;border-radius:18px;padding:1.25rem;background:#fff}.js-runner{border:1px solid #c9cec9;border-radius:14px;overflow:hidden;background:#101916}.js-runner-toolbar{display:flex;align-items:center;gap:.65rem;padding:.7rem .8rem;color:#fff;flex-wrap:wrap}.js-runner-toolbar span{font-size:.78rem;color:#c5d0cb;margin-right:auto}.js-runner-toolbar button{display:inline-flex;gap:.35rem;align-items:center;border:0;border-radius:8px;padding:.55rem .75rem;background:#f2b84b;color:#1b160a;font-weight:750}.js-runner-toolbar button.secondary{background:#26332f;color:#fff}.js-runner .syntax-editor{border-radius:0;border-inline:0}.js-runner-result{display:grid;grid-template-columns:1fr;background:#09100e}.js-runner-result.split{grid-template-columns:minmax(0,1.25fr) minmax(15rem,.75fr)}.js-runner-result iframe{width:100%;min-height:260px;border:0;background:#fff}.js-runner-result pre{margin:0;min-height:120px;max-height:260px;overflow:auto;padding:1rem;color:#d9eee6;white-space:pre-wrap;font:12px/1.6 var(--font-geist-mono),monospace}.js-workshop fieldset{border:0;padding:0;margin:1rem 0}.js-workshop fieldset fieldset{border-top:1px solid #d9ddd9;padding-top:1rem}.js-workshop fieldset label{display:block;margin:.55rem 0}.js-check{padding:.55rem;background:#f5f6f2;border-radius:8px}.js-reflection{font-weight:700}.js-reflection textarea{display:block;width:100%;min-height:110px;margin-top:.5rem;padding:.75rem;border:1px solid #bac2bd;border-radius:10px;font:inherit}@media(max-width:760px){.js-runner-result.split,.js-workshop #js-concepts{grid-template-columns:1fr}.js-runner-toolbar span{flex-basis:100%;order:2}}