@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');
:root{color-scheme:light;--paper:#f5f4ee;--ink:#202821;--muted:#70776f;--green:#406752;--mint:#dce9df;--line:#d9ddd3;--white:#fffefa;--serif:'Newsreader',Georgia,serif;--sans:'DM Sans',sans-serif;--mono:'DM Mono',monospace;--ease:cubic-bezier(.32,.72,0,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}a{color:inherit}button,textarea{font:inherit}button{color:inherit}.skip-link{position:absolute;top:-60px;left:16px;z-index:5;padding:10px 16px;background:#fff;border-radius:12px}.skip-link:focus{top:12px}.topbar{height:80px;max-width:1440px;padding:0 6.2%;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:15px;letter-spacing:-.03em}.brand b{font-weight:700}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:10px 10px 10px 3px;background:var(--green);color:white;font:500 14px var(--mono);letter-spacing:-.08em}.topnav{display:flex;gap:36px}.topnav a,.mobile-menu a{text-decoration:none;font-size:13px;color:#596158;transition:color .3s var(--ease)}.topnav a:hover,.mobile-menu a:hover{color:var(--green)}.menu-toggle,.mobile-menu{display:none}.hero{max-width:1440px;min-height:575px;margin:0 auto;padding:64px 8% 72px;display:grid;grid-template-columns: .95fr 1.05fr;align-items:center;gap:7%}.hero-copy{position:relative;z-index:1}.eyebrow{margin:0 0 18px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#738176}.hero .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow-dot,.live-dot{width:7px;height:7px;border-radius:50%;background:#689279;display:inline-block;box-shadow:0 0 0 4px #e2ebe2}.hero h1,.section-heading h2,.lesson-content h2,.lab-head h2,.resources-copy h2{font-size:clamp(54px,6.4vw,88px);letter-spacing:-.075em;line-height:.96;font-weight:500;margin:0}.hero h1 em,.section-heading h2 em,.lab-head h2 em,.resources-copy h2 em{font-family:var(--serif);font-weight:500;letter-spacing:-.05em;color:var(--green)}.hero-intro{max-width:400px;margin:26px 0 27px;color:#656d65;font-size:16px;line-height:1.75}.hero-actions{display:flex;align-items:center;gap:24px}.button{display:inline-flex;align-items:center;gap:14px;border:0;border-radius:40px;padding:7px 8px 7px 20px;text-decoration:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}.button:hover{transform:translateY(-2px)}.button:active{transform:scale(.98)}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:#344b3b}.button-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13);font-size:16px;transition:transform .4s var(--ease)}.button:hover .button-icon{transform:translate(2px,-2px)}.text-link{font-size:13px;text-decoration:none;color:var(--green);font-weight:600}.text-link span{padding-left:5px}.syllabus-note{margin:38px 0 0;font-size:11px;line-height:1.8;color:#868c82}.syllabus-note a{color:#586e5e;text-underline-offset:3px}.hero-art{height:395px;position:relative;display:flex;align-items:center;justify-content:center}.orbit{position:absolute;border:1px solid #dce1d8;border-radius:50%;transform:rotate(-24deg)}.orbit-one{width:450px;height:225px}.orbit-two{width:490px;height:300px;transform:rotate(22deg);border-color:#e5e5dc}.code-card{position:relative;width:min(430px,90%);background:#202a23;color:#e5e9df;border:7px solid rgba(255,255,255,.6);border-radius:25px;box-shadow:0 28px 70px #283a2b20,inset 0 1px #ffffff12;overflow:hidden;transform:rotate(-2deg);z-index:1}.window-dots{height:47px;padding:0 17px;display:flex;gap:5px;align-items:center;border-bottom:1px solid #ffffff13;color:#8d9c8d;font:10px var(--mono)}.window-dots i{width:6px;height:6px;border-radius:50%;background:#69806d}.window-dots i:first-child{background:#c4866f}.window-dots i:nth-child(2){background:#d7b566}.window-dots span{margin-left:10px}.code-card pre{margin:0;padding:26px 26px 24px;font:12px/1.9 var(--mono);overflow:auto}.code-muted{color:#819183}.code-purple{color:#c3a8e2}.code-blue{color:#9ec8dc}.code-orange{color:#e9bd7c}.code-green{color:#b2d5a5}.code-output{padding:13px 25px;border-top:1px solid #ffffff13;color:#c5d6bf;font:11px var(--mono)}.output-cursor{color:#76bd87;padding-right:9px}.output-check{float:right;color:#91c88c}.float-note{position:absolute;z-index:2;border:1px solid #e8e9df;background:#fffefa;padding:10px 14px;border-radius:30px;font-size:10px;box-shadow:0 12px 30px #3345280c;animation:drift 5s var(--ease) infinite alternate}.float-note span{color:var(--green);font:10px var(--mono);padding-right:8px}.note-one{top:40px;right:18px}.note-two{bottom:45px;left:0;animation-delay:-2.2s}@keyframes drift{to{transform:translateY(-7px)}}.learning-bar{border-top:1px solid #e1e2d9;border-bottom:1px solid #e1e2d9;display:flex;justify-content:center;gap:10%;padding:22px 4%;color:#737970;font-size:11px}.learning-bar div{display:flex;align-items:center;gap:10px}.bar-icon{width:24px;height:24px;display:grid;place-items:center;background:#e7ebe3;border-radius:8px;color:var(--green);font-size:16px}.course-section{max-width:1200px;padding:105px 6% 120px;margin:auto}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:54px}.section-heading h2,.lab-head h2,.resources-copy h2{font-size:clamp(40px,5vw,62px);line-height:1.02}.progress-card{width:240px;margin-bottom:8px}.progress-top{display:flex;justify-content:space-between;font-size:11px;color:#7a8078;margin-bottom:10px}.progress-top strong{font-weight:600;color:#4e5d50}.progress-track{height:5px;background:#e3e6de;border-radius:10px;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:#68866d;border-radius:10px;transition:width .7s var(--ease)}.course-layout{display:grid;grid-template-columns:190px 1fr;gap:52px}.course-sidebar{align-self:start;position:sticky;top:20px}.sidebar-label{font:10px var(--mono);letter-spacing:.13em;color:#96998f;margin:0 0 17px}.unit-button{display:block;width:100%;text-align:left;border:0;border-left:1px solid #d8ddd4;background:none;padding:10px 14px;color:#92968e;font-size:11px;cursor:pointer;transition:all .35s var(--ease)}.unit-button span{font:10px var(--mono);display:block;margin-bottom:3px}.unit-button.active{border-color:var(--green);color:var(--green);padding-left:20px}.pack-link{display:flex;align-items:center;gap:13px;margin:40px 0 0;padding:15px 13px;border:1px solid #dfe2d8;border-radius:15px;color:#617665;text-decoration:none;font:19px var(--mono);transition:background .3s var(--ease)}.pack-link span{font:11px/1.5 var(--sans);color:#657068}.pack-link:hover{background:#eaeee6}.lesson-list{display:grid;gap:10px}.lesson-row{display:grid;grid-template-columns:42px 1fr auto 24px;align-items:center;gap:18px;padding:19px 20px;border-radius:17px;background:#faf9f4;border:1px solid transparent;cursor:pointer;text-align:left;transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}.lesson-row:hover{background:var(--white);border-color:#dce2d8;transform:translateX(4px)}.lesson-row.selected{background:var(--white);border-color:#bfcdbf}.lesson-index{color:#a5a99f;font:11px var(--mono)}.lesson-row-title{font-size:14px;font-weight:600}.lesson-row-desc{display:block;color:#888e85;font-size:11px;font-weight:400;margin-top:3px}.lesson-duration{font:10px var(--mono);color:#93988e}.lesson-check{font-size:14px;color:#8b9d8b}.lesson-row.completed .lesson-check{color:#497451}.lesson-view{padding:105px 7%;background:#e9eee6;scroll-margin-top:30px}.lesson-wrap{max-width:1090px;margin:auto}.lesson-kicker{display:flex;align-items:center;gap:16px;margin-bottom:32px;font:10px var(--mono);letter-spacing:.12em;color:#788578}.lesson-kicker-line{width:44px;height:1px;background:#b7c2b4}.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:9%;align-items:start}.lesson-content h2{font-size:clamp(39px,4vw,55px);line-height:1.05}.lesson-lead{max-width:690px;font-size:17px;line-height:1.75;color:#59655a;margin:20px 0 32px}.lesson-body{max-width:690px;color:#4b554c;font-size:14px;line-height:1.8}.lesson-body p{margin:0 0 17px}.lesson-body h3{margin:30px 0 10px;font-size:17px;letter-spacing:-.03em}.lesson-body code,.lesson-body pre{font-family:var(--mono);font-size:12px}.lesson-body pre{padding:18px 21px;background:#29352c;color:#e9eee4;border-radius:15px;overflow:auto}.lesson-body ul{padding-left:20px}.lesson-practice{margin:34px 0 26px;padding:24px;border-radius:20px;background:#f8f8f1;border:1px solid #e0e4da}.practice-heading{display:flex;align-items:center;gap:13px}.practice-icon{width:34px;height:34px;border-radius:12px;background:#e4ede3;display:grid;place-items:center;color:var(--green)}.practice-heading .eyebrow{margin-bottom:2px;font-size:9px}.practice-heading h3{margin:0;font-size:16px}.lesson-practice>p{color:#687067;font-size:13px;margin:14px 0}.button-outline{border:1px solid #cbd5c9;background:transparent;color:#4c6652}.button-outline .button-icon{background:#e5ebe3}.lesson-nav{display:flex;justify-content:space-between;align-items:center;margin-top:25px;gap:10px}.quiet-button{padding:7px 3px;border:0;background:transparent;color:#728075;font-size:11px;cursor:pointer;transition:color .3s var(--ease)}.quiet-button:hover{color:var(--green)}.lesson-aside{display:grid;gap:13px;padding-top:2px}.aside-card{padding:20px;background:#f4f5ee;border-radius:17px;border:1px solid #e0e5db}.aside-number{font:9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#879386}.aside-card p{font-size:12px;line-height:1.75;color:#667064;margin:11px 0}.aside-card a{font-size:11px;color:#4c6d52;text-underline-offset:3px}.aside-tip{background:#dce8db}.lab-section{max-width:1200px;margin:auto;padding:110px 6% 125px}.lab-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px}.lab-head>p{max-width:300px;color:#747b71;font-size:13px;line-height:1.75;margin:0 0 6px}.lab-shell{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid #dedfd5;padding:7px;gap:7px;background:#e9e9df;border-radius:23px}.editor-pane,.output-pane{background:#242e27;color:#e5eade;border-radius:17px;overflow:hidden}.editor-toolbar,.output-heading{height:48px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14}.editor-title{display:flex;align-items:center;gap:9px;font:10px var(--mono);color:#c2cdbf}.editor-title .live-dot{width:6px;height:6px;box-shadow:0 0 0 3px #40614a}.reset-button{font-size:10px;color:#9ba99a}.reset-button:hover,.output-heading .quiet-button:hover{color:white}.editor-pane textarea{display:block;resize:vertical;width:100%;height:270px;min-height:180px;padding:22px;background:#242e27;color:#dcead7;border:0;outline:none;font:12px/1.9 var(--mono);tab-size:4}.editor-pane textarea:focus-visible{box-shadow:inset 0 0 0 2px #85a48b}.editor-help{padding:0 20px 13px;color:#92a091;font-size:10px}.editor-footer{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff14;gap:12px}.editor-footer [role=status]{color:#9aaa99;font-size:10px}.button-run{background:#b8d4b4;color:#203126;padding:7px 17px}.button-run:hover{background:#cbe2c7}.button-run:disabled{opacity:.65;cursor:wait}.output-pane{background:#202820;display:flex;flex-direction:column}.output-heading{font:10px var(--mono);letter-spacing:.12em;color:#aab8a5}.output-heading .quiet-button{color:#9ba99a}.output-pane pre{flex:1;min-height:260px;max-height:350px;margin:0;padding:23px;color:#c6d9c0;white-space:pre-wrap;overflow:auto;font:12px/1.8 var(--mono)}.runtime-footnote{margin:0;padding:0 20px 18px;color:#8a9887;font-size:10px;line-height:1.6}.resources-section{padding:92px 10%;background:#e5eae1;display:grid;grid-template-columns:.8fr 1.2fr;gap:12%;align-items:center}.resources-section>*{max-width:600px}.resources-copy h2{font-size:clamp(40px,4.5vw,58px)}.resources-copy>p:last-child{max-width:340px;color:#727a70;font-size:13px;line-height:1.75;margin-top:20px}.resource-actions{display:grid;gap:10px}.resource-card{width:100%;display:grid;grid-template-columns:42px 1fr 20px;gap:14px;align-items:center;padding:16px 17px;text-align:left;text-decoration:none;background:#f8f8f2;border:1px solid #e1e5dd;border-radius:16px;cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease)}.resource-card:hover{transform:translateY(-2px);background:#fffefa}.resource-icon{width:38px;height:38px;border-radius:13px;background:#e5ede3;color:#4e7155;display:grid;place-items:center;font:18px var(--mono)}.resource-card strong,.resource-card small{display:block}.resource-card strong{font-size:12px}.resource-card small{margin-top:4px;color:#82897e;font-size:10px}.resource-arrow{color:#8b998a}.notebook-tip{margin:6px 0 0 60px;color:#788075;font-size:10px;line-height:1.7}.footer{max-width:1200px;margin:auto;min-height:95px;padding:20px 6%;display:flex;align-items:center;justify-content:space-between;color:#83897e;font-size:10px}.footer .brand{color:var(--ink);font-size:13px}.footer .brand-mark{width:25px;height:25px;font-size:12px}.footer a:last-child{text-underline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.hero{padding-left:6%;padding-right:6%;gap:2%}.hero-art{transform:scale(.9)}.course-layout{grid-template-columns:150px 1fr;gap:30px}.lesson-grid{grid-template-columns:1fr 210px;gap:5%}.resources-section{padding-left:7%;padding-right:7%;gap:7%}}
@media(max-width:680px){html{scroll-padding-top:70px}.topbar{height:68px;padding:0 20px}.topnav{display:none}.menu-toggle{display:block;padding:8px 14px;border:1px solid #dfe2d9;background:#fbfaf5;border-radius:22px;font-size:11px}.mobile-menu{position:absolute;z-index:3;top:60px;right:18px;padding:14px 20px;background:#fffefa;border:1px solid #e1e4dc;border-radius:15px;box-shadow:0 16px 40px #24342118}.mobile-menu:not([hidden]){display:grid;gap:14px}.hero{padding:50px 22px 45px;display:flex;flex-direction:column;align-items:stretch;gap:5px}.hero h1{font-size:64px}.hero-intro{font-size:14px;margin:21px 0}.syllabus-note{margin-top:27px}.hero-art{height:300px;transform:none}.orbit-one{width:340px}.orbit-two{width:370px}.code-card{width:min(390px,95%);transform:rotate(-1deg)}.code-card pre{padding:18px;font-size:10px}.note-one{right:-2px;top:21px}.note-two{left:-3px;bottom:17px}.learning-bar{justify-content:flex-start;overflow:auto;gap:25px;padding:16px 20px;white-space:nowrap}.learning-bar div{font-size:10px}.course-section{padding:75px 20px 85px}.section-heading{display:block;margin-bottom:32px}.section-heading h2{font-size:46px}.progress-card{width:100%;margin-top:27px}.course-layout{display:flex;flex-direction:column;gap:23px}.course-sidebar{position:static;width:100%}.course-sidebar #unit-list{display:flex;overflow:auto;gap:5px}.unit-button{width:auto;min-width:112px;border:1px solid #dfe2d9;border-radius:12px;padding:8px 11px}.unit-button.active{padding:8px 11px;background:#e9eee6}.pack-link{display:none}.lesson-row{grid-template-columns:30px 1fr 20px;gap:11px;padding:15px 12px}.lesson-duration{display:none}.lesson-row-title{font-size:12px}.lesson-row-desc{font-size:10px}.lesson-view{padding:72px 21px}.lesson-grid{display:block}.lesson-content h2{font-size:43px}.lesson-lead{font-size:15px}.lesson-aside{margin-top:27px}.lesson-nav{flex-wrap:wrap}.lesson-nav .button{order:3}.lab-section{padding:75px 20px 85px}.lab-head{display:block}.lab-head h2{font-size:46px}.lab-head>p{margin-top:15px}.lab-shell{grid-template-columns:1fr}.editor-pane textarea{height:230px}.output-pane pre{min-height:160px;max-height:260px}.resources-section{display:block;padding:70px 21px}.resources-copy{margin-bottom:28px}.resources-copy h2{font-size:45px}.resource-card{grid-template-columns:38px 1fr 15px;padding:13px 12px}.resource-card strong{font-size:11px}.resource-card small{font-size:9px}.notebook-tip{margin-left:3px}.footer{padding:23px 20px;display:grid;grid-template-columns:1fr auto;gap:12px}.footer>span{grid-column:1/-1;grid-row:2}.footer a:last-child{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}