.basics-world{background:radial-gradient(ellipse at top right,#345943,transparent 45%),#0b2426;color:#edf0de;padding-bottom:60px;overflow-x:clip}.basics-intro{padding-block:50px 35px}.basics-intro .breadcrumb{color:#c6d7c3}.basics-world .eyebrow{font-size:.66rem;letter-spacing:.16em;color:#ddc48b;margin-top:26px}.basics-intro h1{font-size:clamp(3rem,6vw,5.6rem);line-height:1;letter-spacing:-.05em;margin:22px 0}.basics-intro em{font-family:Georgia,serif;color:#dfc58a;font-weight:400}.basics-intro>p:not(.eyebrow){max-width:650px;line-height:1.8;color:#c4d8c4}.basics-intro .button{margin-top:15px}.basics-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0}.basics-filters{display:flex;flex-wrap:wrap;gap:8px}.basics-filters button{background:#254638;border:1px solid #718b6460;color:#d9e4cf;border-radius:24px;padding:12px 18px;font:inherit;font-size:.82rem;cursor:pointer}.basics-filters button[aria-pressed=true]{background:#dfc58a;color:#183d2e}.basics-toolbar label{font-size:.75rem;color:#c4d4bb;display:flex;align-items:center;gap:10px}.basics-toolbar select{background:#173b30;color:#e1ead7;border:1px solid #809776;padding:10px;border-radius:5px;font:inherit}.basics-count{font-size:.77rem;color:#b7caaa;margin:20px 0}.basics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.basic-tile{position:relative;display:flex;flex-direction:column;background:#e3d1a2;color:#234332;text-decoration:none;border-radius:8px;padding:22px;min-height:280px;overflow:hidden;border:1px solid #ecdeb2;box-shadow:0 8px 20px #041c1920;transition:box-shadow .25s}.basic-tile[data-category=Logic]{background:#aac8b5;border-color:#c4ddc9}.basic-tile[data-category=Structure]{background:#c3c2d9;border-color:#dddaeb}.basic-tile[data-category=Practice]{background:#dedbcb;border-color:#f0ecdc}.basic-tile:hover{box-shadow:0 0 0 3px #e4d3a066,0 20px 30px #041c1930}.basic-tile:after{content:"";position:absolute;right:-30px;top:25px;width:150px;height:150px;border:1px solid #183e3015;border-radius:50%;pointer-events:none}.tile-top{font-size:.65rem;letter-spacing:.12em}.tile-symbol{font:italic 3.5rem/1 Georgia;margin:25px 0 18px;color:#234936}.basic-tile h2{font-size:1.2rem;line-height:1.25;letter-spacing:-.03em;margin:0 0 12px;max-width:200px}.basic-tile p{font-size:.8rem;line-height:1.65;margin:0 0 20px;color:#405a43}.tile-open{font-size:.73rem;margin-top:auto;border-top:1px solid #66806355;padding-top:13px}.lesson-checked .tile-top:after{content:" ✓"}.basic-reader{margin-top:45px}.basic-lesson{padding:clamp(24px,4vw,50px);background:#f4f0e3;color:#264735;border-radius:12px;margin:30px 0;scroll-margin-top:125px}.basic-lesson:focus{outline:none}.basic-lesson .eyebrow{color:#657651;margin-top:0}.basic-lesson h2{font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.1;letter-spacing:-.04em;margin:18px 0}.basic-lesson header>p:last-child{line-height:1.7;color:#5a7054}.basics-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:35px 0}.basics-steps section{border-top:1px solid #b7c3a3;padding-top:22px}.step-number{font:italic 1.8rem Georgia;color:#a88b4f}.basics-steps h3{font-size:1.03rem;margin:16px 0 12px}.basics-steps p{font-size:.9rem;line-height:1.85}.basics-lab{display:grid;grid-template-columns:1.1fr 1fr;background:#153a2f;color:#e2ecd5;border-radius:10px;overflow:hidden}.basics-lab>div{padding:28px;min-width:0}.basics-lab .eyebrow{color:#dac78f}.basics-lab pre{font: .83rem/1.8 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:20px 0}.basics-lab label{display:block;font-size:.75rem;margin:20px 0 10px}.basics-lab select{background:#f0ecd9;color:#20432f;font:inherit;font-size:.82rem;padding:12px;border:0;border-radius:5px;max-width:100%;width:100%}.run-basic{font:inherit;font-size:.85rem;border:0;border-radius:5px;padding:13px 20px;background:#dfc58a;color:#1c3f2e;cursor:pointer;margin-top:14px}.basics-result{background:#244936;border-left:1px solid #7b98604d}.basics-result>span{font-size:.65rem;letter-spacing:.16em;color:#d8c48b}.basics-result .basic-output{font-size:1.6rem;line-height:1.5;color:#f0e2b9;min-height:85px}.basic-why{font-size:.9rem;line-height:1.8;color:#c2d8b6}.basic-check{margin-top:35px;padding-top:28px;border-top:1px solid #b6c4a4}.basic-check h3{font-size:1.25rem;line-height:1.5}.basic-answers{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.basic-answers button{font:inherit;font-size:.85rem;line-height:1.5;background:#e5e9d7;border:1px solid #a4b68e;color:#2e5037;border-radius:6px;padding:14px 18px;cursor:pointer}.basic-answers button[aria-pressed=true]{background:#2b573d;color:#f1ecd9}.basic-feedback{font-size:.9rem;line-height:1.8;min-height:26px}.basic-next{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #b6c4a4;padding-top:25px;margin-top:25px}.basic-next a{font-size:.85rem;color:#345939}.basics-foot{padding-top:35px;font-size:.8rem;line-height:1.8;color:#b3c7ac}.basics-foot a{color:#dfc58a}.basics-world [hidden]{display:none!important}.basics-world :focus-visible{outline:3px solid #b4893e;outline-offset:4px}#basics-board{scroll-margin-top:125px}@media(max-width:1000px){.basics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.basics-steps{gap:20px}}@media(max-width:720px){.basics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.basic-tile{padding:17px;min-height:260px}.basic-tile h2{font-size:1.08rem}.tile-symbol{font-size:2.8rem}.basics-toolbar{display:block}.basics-toolbar>label{margin-top:18px}.basics-filters button{font-size:.74rem;padding:10px 13px}.basics-steps,.basics-lab{grid-template-columns:1fr}.basics-result{border-left:0;border-top:1px solid #7b98604d}.basics-steps{gap:12px}.basics-intro{padding-top:32px}.basics-lab>div{padding:21px}.basic-next{font-size:.75rem}.basic-answers{display:grid}.basic-reader{margin-top:24px}}@media(max-width:360px){.basics-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.basics-world *{animation:none!important;transition:none!important}}

/* Six learning paths */
.subject-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 24px}.subject-path{position:relative;text-align:left;padding:25px;border:1px solid #839d7866;border-radius:12px;background:linear-gradient(125deg,#214536,#13352d);color:#e8edda;font:inherit;cursor:pointer;transition:background .2s,box-shadow .2s}.subject-path span{display:block;font:2rem Georgia;margin-bottom:12px;color:#e3c98c}.subject-path strong{font-size:.8rem;font-weight:500}.subject-path small{display:block;margin-top:9px;color:#b7cbb4;line-height:1.6}.subject-path[aria-pressed=true]{background:#dfc58a;color:#163d2e;box-shadow:inset 0 0 0 2px #f5e8bd}.subject-path[aria-pressed=true] span,.subject-path[aria-pressed=true] small{color:#234635}.path-context{padding:18px 22px;border-left:2px solid #d7bd83;line-height:1.8;color:#c7d9c0;max-width:850px;font-size:.88rem}.basics-toolbar{flex-wrap:wrap;align-items:end}.basics-toolbar label{flex-direction:column;align-items:start;gap:7px}.basics-toolbar input{font:inherit;background:#173b30;color:#e1ead7;border:1px solid #809776;padding:10px;border-radius:5px;min-width:220px}.basics-progress{color:#dec98f;font-size:.78rem}.basic-tile[data-category="Java"]{background:#d4c3af}.basic-tile[data-category="JavaScript"]{background:#e3d1a2}.basic-tile[data-category="React"]{background:#b9d5d0}.basic-tile[data-category="HTML"]{background:#d9c1b0}.basic-tile[data-category="CSS"]{background:#c8c6de}.basic-tile[data-category="C#"]{background:#bacdb7}.tile-symbol{font-size:2.8rem}.lesson-open #basics-board{display:none}.lesson-open .basics-intro{padding-bottom:0}.lesson-open .basics-intro h1{font-size:2.5rem}.lesson-open .basics-intro>p:not(.eyebrow),.lesson-open .basics-intro>.button{display:none}.basic-next{flex-wrap:wrap;align-items:center}.basic-next>a{max-width:100%}.lesson-setup{font-size:.83rem;line-height:1.8;border-block:1px solid #b6c4a4;padding:15px 0}.lesson-setup summary{cursor:pointer}.lesson-setup a{color:#28573c}.trace-track{display:flex;gap:9px;margin-top:25px}.trace-track i{height:5px;flex:1;background:#42674e;border-radius:8px;transition:background .3s}.trace-track i.active{background:#e4c689}.basics-steps section{transition:border-color .3s}.basics-steps .trace-active{border-top:3px solid #ad863d}.basics-result .basic-output{font-size:1.15rem}.basic-answers{display:grid;grid-template-columns:1fr}.basic-answers button{text-align:left}.more-lessons{margin:25px 0}.basic-lesson header>p{max-width:800px}@media(max-width:720px){.subject-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.subject-path{padding:18px}.subject-path span{font-size:1.65rem}.basics-toolbar{display:flex;gap:14px}.basics-toolbar label{max-width:100%}.basics-toolbar input{min-width:0;width:100%;box-sizing:border-box}.basics-toolbar label:has(input){flex-basis:100%}.basic-next{flex-direction:column;align-items:start}.basic-tile{min-height:280px}.tile-top{letter-spacing:.03em}.basics-intro h1{font-size:3rem}}@media(prefers-reduced-motion:reduce){.subject-path,.trace-track i,.basics-steps section{transition:none}}

/* Deliberate practice and project briefs */
.practice-notebook,.debug-challenge{margin-top:32px;padding:clamp(20px,3vw,32px);border:1px solid #bdc5ac;border-radius:12px;background:#e8e8d8}.practice-notebook h3,.debug-challenge h3{font-size:1.65rem;line-height:1.25;margin:12px 0}.practice-notebook p,.debug-challenge p{font-size:.9rem;line-height:1.8}.practice-notebook summary,.practice-project summary{cursor:pointer;font-weight:600;padding:14px 0}.practice-notebook label:not(.practice-tick){display:block;margin:20px 0 8px;font-size:.85rem}.practice-notebook textarea{box-sizing:border-box;width:100%;max-width:100%;resize:vertical;border:1px solid #8b9d7c;border-radius:7px;padding:14px;background:#fcfaf1;color:#183d32;font:inherit;font-size:.9rem;line-height:1.7}.practice-tick,.project-tests label{display:flex;align-items:start;gap:12px;font-size:.85rem;line-height:1.7;margin:18px 0}.practice-tick input,.project-tests input{flex:none;width:18px;height:18px;accent-color:#25583c;margin-top:5px}.clear-notebook,.reset-debug{font:inherit;font-size:.8rem;padding:10px 14px;border:1px solid #839776;background:transparent;color:#254c36;border-radius:5px;cursor:pointer}.project-jump{display:inline-block;color:#3a6040;font-size:.85rem;margin-top:20px;line-height:1.6}.basics-intro>.project-jump{color:#e4cd91;margin-left:20px}.debug-challenge{background:#173c30;color:#e6eed6;border-color:#617d55}.debug-challenge .eyebrow{color:#e5cd90}.debug-code,.debug-options code{font: .85rem/1.7 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.debug-code{padding:20px;background:#0d2924;border-radius:8px}.debug-options{display:grid;gap:10px;margin:20px 0}.debug-options button{padding:15px;border:1px solid #7d9674;color:#e7efd9;background:#2a4d3b;border-radius:6px;text-align:left;cursor:pointer}.debug-options button[aria-pressed=true]{border:2px solid #dfc58a;background:#365941}.debug-state{padding-left:15px;border-left:2px solid #ddc48b}.debug-challenge .reset-debug{color:#dce8cd;border-color:#91aa7a}.debug-solved{box-shadow:inset 0 0 0 2px #adbd84}.project-workshop{padding-top:70px;scroll-margin-top:130px}.project-workshop>h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;max-width:750px;letter-spacing:-.035em}.project-workshop>p:not(.eyebrow){max-width:760px;color:#c1d1b8;line-height:1.8}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:32px;align-items:start}.practice-project{background:#edf0df;color:#204632;padding:clamp(22px,3vw,35px);border-radius:12px;scroll-margin-top:135px}.practice-project .eyebrow{color:#627446;margin-top:0}.practice-project h3{font-size:1.7rem;line-height:1.2;margin:16px 0}.practice-project p{font-size:.88rem;line-height:1.8}.practice-project .project-prereq{font-size:.76rem;color:#5c7051;border-top:1px solid #bac8a9;padding-top:14px}.project-stages{padding-left:24px}.project-stages li{padding-left:8px;margin:24px 0}.project-stages h4{font-size:1rem;margin:0}.project-stages p{margin-top:8px}.project-tests{border-block:1px solid #bac8a9}.project-download{color:#2b5637;font-size:.85rem;display:inline-block;padding:12px 0}.project-status{color:#526d40}.project-repairs a{display:block;color:#3b6541;font-size:.85rem;margin:12px 0}.lesson-open .project-workshop{display:none}.lesson-open .basics-intro>.project-jump{display:none}.practice-project:focus{outline:2px solid #dfc58a;outline-offset:5px}@media(max-width:720px){.project-grid{grid-template-columns:1fr}.basics-intro>.project-jump{margin-left:0;display:block}.practice-notebook,.debug-challenge{padding:19px}.debug-code{padding:14px}.project-workshop{padding-top:40px}}

/* Runnable labs and learning bridges */
.lesson-prerequisites{display:flex;flex-wrap:wrap;gap:8px 16px;padding:15px 0;font-size:.8rem;line-height:1.6}.lesson-prerequisites span{font-weight:700}.lesson-prerequisites a{color:#365d3b}.lesson-terms{font-size:.86rem;line-height:1.8;margin:12px 0}.lesson-terms summary{cursor:pointer;font-weight:600;padding:10px 0}.lesson-terms dl{padding:20px;background:#e4e8d6;border-radius:8px}.lesson-terms dt{font-weight:700;margin-top:12px}.lesson-terms dd{margin:4px 0 18px}.lesson-workbench{margin-top:30px;padding:clamp(18px,3vw,30px);background:#e3e9d7;border:1px solid #a4b592;border-radius:10px}.lesson-workbench>summary{font-size:1.15rem;font-weight:700;cursor:pointer;padding:5px 0}.lab-context,.lab-reflect{font-size:.85rem;line-height:1.8;max-width:850px}.lesson-workbench label{display:block;font-size:.8rem;margin:20px 0 8px}.lesson-workbench textarea{box-sizing:border-box;display:block;width:100%;resize:vertical;min-height:240px;border:1px solid #527047;background:#102f27;color:#f3f0d9;border-radius:8px;padding:18px;font: .85rem/1.7 Consolas,monospace;tab-size:2}.lab-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.lab-actions button{font:inherit;font-size:.8rem;padding:11px 15px;border:1px solid #69805b;border-radius:6px;background:#f7f4e8;color:#20442f;cursor:pointer}.lab-actions .lab-run{background:#204a35;color:#f5edcf}.lab-status{font-size:.8rem;line-height:1.7;min-height:24px}.lab-preview{width:100%;max-width:100%;margin-top:18px}.lab-preview iframe{width:100%;height:460px;display:block;border:1px solid #9baf8d;border-radius:8px;background:#faf8ee}.lab-narrow .lab-preview{max-width:340px}.lab-fixture{font-size:.83rem}.lab-fixture pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:15px;background:#f3f3e8}.worked-solution{margin:22px 0;padding:15px;border:1px solid #adc097;border-radius:8px}.worked-solution a{color:#2b5938}.worked-solution p{font-size:.85rem}@media(max-width:720px){.lesson-workbench textarea{font-size:.8rem;padding:12px}.lab-actions button{flex:1 1 120px}.lab-preview iframe{height:380px}}

/* A quieter, welcoming place to learn. Keep the main site identity at the edges. */
.basics-world{background:radial-gradient(ellipse at 95% 0,#e4eee7,transparent 42%),#f7f5f0;color:#25463e}
.basics-intro .breadcrumb,.basics-intro>p:not(.eyebrow),.basics-count,.basics-toolbar label,.basics-foot,.basics-progress,.project-workshop>p:not(.eyebrow){color:#52675f}
.basics-world .eyebrow{color:#586e62;letter-spacing:.09em}
.basics-intro h1{line-height:1.08}.basics-intro em{color:#567364}
.basics-intro>.project-jump,.basics-foot a{color:#315c4d}
.subject-path{background:#fffdf9;color:#294b40;border:1px solid transparent;border-radius:20px;box-shadow:0 4px 16px #25463e07}
.subject-path span,.subject-path small{color:#526c60}.subject-path span{font-family:inherit;font-size:1.65rem;font-weight:600}
.subject-path:hover{background:#edf3ed;box-shadow:0 6px 20px #25463e12}
.subject-path[aria-pressed=true]{background:#e0ece3;box-shadow:inset 0 0 0 2px #668273}
.path-context{border:0;background:#eeeee5;border-radius:16px;color:#435e52;padding:20px 24px}
.basics-toolbar input,.basics-toolbar select{background:#fffdf9;color:#294b40;border-color:#95a69d;border-radius:10px;min-height:44px}
.basics-filters button{background:#fffdf9;color:#345747;border-color:#b0bfb5}.basics-filters button[aria-pressed=true]{background:#315f4f;color:#fff}
.basic-tile{border:0;border-radius:20px;box-shadow:0 4px 18px #284a3a06}.basic-tile:after{display:none}
.basic-tile[data-category="C#"]{background:#e2eddf}.basic-tile[data-category="Java"]{background:#f0e5d8}.basic-tile[data-category="JavaScript"]{background:#f3e9ca}.basic-tile[data-category="React"]{background:#dfedeb}.basic-tile[data-category="HTML"]{background:#f3e2d7}.basic-tile[data-category="CSS"]{background:#e9e4f1}
.basic-tile:hover{box-shadow:0 8px 24px #284a3a16}.tile-symbol{font-size:2.3rem;opacity:.8}.tile-open{border:0;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.basic-lesson{background:#fffdf9;border-radius:24px;box-shadow:0 8px 40px #294b3f07;color:#29473e}
.basic-lesson header>p:last-child{color:#52665b}.basic-lesson h2{font-size:clamp(2rem,4vw,3.2rem)}
.lesson-setup{border:0;padding:8px 0}.lesson-prerequisites{color:#53695e}.lesson-terms dl{background:#f0f3eb;border-radius:14px}
.basics-steps{gap:16px}.basics-steps section{background:#f5f4ed;border:0;padding:24px;border-radius:18px}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#e5ece0;color:#42654e;font-size:.85rem;font-weight:600;line-height:1}
.basics-steps .trace-active{border:0;box-shadow:inset 0 0 0 2px #7e9d87}
.basics-lab{background:#f0f3ef;color:#26473d;border-radius:18px}.basics-lab .eyebrow,.basics-result>span{color:#576d60}
.basics-result{background:#e6efe7;border:0}.basics-result .basic-output{color:#254b3d}.basic-why{color:#486052}
.basics-lab select{background:#fffdf9;border:1px solid #9eafa3;border-radius:10px;min-height:44px}
.run-basic{background:#315f4f;color:#fff;border-radius:10px;min-height:44px}.trace-track i{background:#c7d7c9}.trace-track i.active{background:#537a60}
.basic-check{border:0;background:#f6f2e7;padding:26px;border-radius:18px}
.basic-answers button{background:#fffdf9;border-color:#aab9ad;border-radius:12px;min-height:48px}.basic-answers button[aria-pressed=true]{background:#315f4f;color:#fff}
.basic-next{border:0;gap:18px;padding-top:18px}.basic-next a{display:inline-block;padding:12px 0;text-underline-offset:4px}
.practice-notebook,.debug-challenge,.lesson-workbench{background:#eef3ed;border:0;border-radius:18px;color:#29473e}
.lesson-workbench textarea,.debug-code{background:#fffdf9;color:#29473e;border:1px solid #a2b4a6;border-radius:12px;font-size:.9rem;line-height:1.8}
.lab-reassurance{max-width:760px;font-size:.95rem;line-height:1.8;color:#365b48}.lab-context{color:#52665b}
.lab-actions button{border-color:#96aa9c;border-radius:10px;min-height:44px;background:#fffdf9}.lab-actions .lab-run{background:#315f4f;color:#fff}
.lab-preview iframe{border-color:#b3c4b7;border-radius:12px}.debug-options button{background:#fffdf9;color:#29473e;border-color:#a2b4a6;border-radius:10px}.debug-options button[aria-pressed=true]{background:#dceade;border-color:#668b71}
.debug-challenge .eyebrow{color:#586e62}.debug-challenge .reset-debug{color:#315f4f;border-color:#93aa99}.debug-state{border:0}.debug-solved{box-shadow:inset 0 0 0 2px #7e9d87}
.clear-notebook,.reset-debug{min-height:44px;border-radius:10px}.practice-notebook textarea{background:#fffdf9;border-color:#a2b4a6}
.practice-project{background:#fffdf9;border-radius:20px;box-shadow:0 6px 24px #25463e07}.practice-project .project-prereq,.project-tests{border:0}.worked-solution{background:#f0f3eb;border:0;border-radius:12px}
.basics-world :focus-visible{outline:3px solid #326e85;outline-offset:4px}
@media(max-width:720px){.basic-lesson{padding:22px 16px;border-radius:18px}.basics-steps section{padding:20px}.basic-check{padding:20px}.lesson-workbench textarea{font-size:1rem;padding:12px}.basics-toolbar input,.basics-toolbar select,.practice-notebook textarea{font-size:1rem}.basic-tile{padding:18px}.subject-path{padding:18px}.basics-intro h1{font-size:2.8rem}.lesson-open .basics-intro h1{font-size:2rem}}

.basics-world details>summary{border:0}.lab-help{margin:16px 0;font-size:.85rem}.lab-help>summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}.lesson-workbench>summary:after{content:"+";float:right;margin-left:12px;font-weight:400}.lesson-workbench[open]>summary:after{content:"−"}
