@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#172d3a;--muted:#526875;--blue:#15364a;--paper:#f2f6f4;--line:#d9e3df;--green:#d8f3e5;--yellow:#fff0c2;--purple:#e8ddfa;--coral:#ffe0d6;--shadow:0 10px 30px #102b3910;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;line-height:1.6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper)}.hero{background:radial-gradient(circle at 78% 25%,#355e69 0 3%,transparent 3.3%),radial-gradient(circle at 83% 68%,#e6b75c 0 2%,transparent 2.3%),linear-gradient(125deg,#102d42,#194d57 64%,#327363);color:white;padding:1.2rem max(1rem,calc((100% - 1000px)/2)) 2.8rem}.hero-inner{max-width:1000px;margin:auto}.back{color:white}.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.12em;margin:.6rem 0;color:#45816e}.hero .eyebrow{color:#c5e6d8;margin-top:2.5rem}.hero h1{font:700 clamp(2.3rem,6vw,4.2rem)/1 'Space Grotesk',sans-serif;margin:.3rem 0 1rem;max-width:750px}.lead{font-size:1.13rem;max-width:720px;color:#e7f1ef}.hero-tags{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.5rem}.hero-tags span{border:1px solid #ffffff55;border-radius:999px;padding:.3rem .8rem;font-size:.88rem}main{max-width:1000px;padding:1rem;margin:-1.4rem auto 3rem;position:relative}.lesson-nav{background:#fff;border:1px solid var(--line);border-radius:17px;padding:1rem 1.2rem;box-shadow:var(--shadow);margin-bottom:1rem;position:sticky;top:.5rem;z-index:5}.lesson-nav strong{font:600 1rem 'Space Grotesk',sans-serif}.lesson-nav>div{display:flex;gap:.45rem;flex-wrap:wrap;margin:.5rem 0}.lesson-nav a,.text-link{display:inline-block;padding:.32rem .65rem;color:#234c59;background:#eef5f1;border-radius:999px;text-decoration:none;font-size:.87rem}.lesson-nav a[aria-disabled=true]{opacity:.5;pointer-events:none}.lesson-nav p{margin:0;font-size:.83rem;color:var(--muted)}.panel{background:white;border:1px solid var(--line);border-radius:20px;padding:clamp(1rem,3vw,1.8rem);margin:1rem 0;box-shadow:var(--shadow);scroll-margin-top:9rem}.start-panel{border-top:5px solid #478e70}.section-head{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem}.section-head h2{font:600 clamp(1.35rem,4vw,1.9rem)/1.2 'Space Grotesk',sans-serif;margin:.1rem 0}.section-head .eyebrow{margin:0}.step{display:grid;place-items:center;width:3rem;height:3rem;flex:0 0 3rem;border-radius:1rem;background:#e0f2e9;color:#205843;font:700 1.2rem 'Space Grotesk',sans-serif}.field{display:grid;gap:.35rem;font-weight:600;max-width:560px}input,select{font:inherit;color:var(--ink);border:1px solid #b6c8c3;border-radius:9px;padding:.65rem;background:#fff;max-width:100%}input[type=number]{width:9rem}.checkline{display:flex;align-items:center;gap:.5rem;margin:.8rem 0}.story-intro{display:flex;align-items:center;gap:1rem;border-radius:16px;background:#eaf5ef;padding:1rem}.story-intro p{margin:.1rem}.pixel-icon{font-size:2.5rem;color:#28764f;background:#d0eadb;border-radius:14px;width:4rem;height:4rem;display:grid;place-items:center;flex:0 0 4rem}.story{margin:1rem 0}.story p{position:relative;margin:.65rem 0;padding:.85rem 1rem .85rem 3rem;border-radius:12px;background:#f4f7f5}.story b{position:absolute;left:.85rem;top:.85rem;color:#47856b}.taskbox{background:#fbfcfb;border:1px solid var(--line);border-radius:15px;padding:1rem;margin:1rem 0}.taskbox h3{font:600 1.15rem 'Space Grotesk',sans-serif;margin:.1rem 0 .5rem}.mc label{display:flex;gap:.65rem;align-items:flex-start;padding:.7rem;background:white;border:1px solid #e0e8e4;border-radius:10px;margin:.5rem 0;cursor:pointer}.mc label:has(input:checked){border-color:#4a9970;background:#eff9f3}.mc input{margin-top:.35rem}.matching{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:.55rem}.matching>label{display:grid;gap:.25rem;padding:.65rem;background:#f4f7f5;border-radius:10px;font-size:.94rem}.matching button{grid-column:1/-1;justify-self:start}.feedback{min-height:1.4em;font-weight:600;margin:.55rem 0;color:#35515c}.feedback.good{color:#17663f}.feedback.try{color:#9a5814}.feedback.hint{background:#fff4d7;padding:.7rem;border-left:4px solid #d99b25;border-radius:6px}.feedback.answer{background:#edf2fa;padding:.7rem;border-left:4px solid #5b77aa;border-radius:6px}button,.primary{font:600 .95rem 'DM Sans',sans-serif;padding:.67rem 1rem;border:0;border-radius:9px;background:#17495b;color:white;cursor:pointer;display:inline-block;text-decoration:none;margin:.25rem 0}button:hover,.primary:hover{background:#246579}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #dfad38;outline-offset:2px}.help,.hint{border:1px solid var(--line);border-radius:11px;padding:.8rem 1rem;background:#f9fbfa;margin:1rem 0}.help summary,.hint summary{cursor:pointer;font-weight:700}.help dl{display:grid;grid-template-columns:140px 1fr;gap:.35rem}.help dd{margin:0}.system-map{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.65rem;align-items:center;background:#eff5f2;border-radius:17px;padding:1rem;margin:1.2rem 0}.node{min-height:125px;padding:.85rem;border-radius:13px;display:flex;flex-direction:column;justify-content:center}.node span,.store span{font-size:.72rem;font-weight:700;letter-spacing:.06em}.node strong{font:600 1.03rem 'Space Grotesk',sans-serif;margin:.3rem 0}.node small,.store small{color:#3e5962}.input{background:var(--blue);color:white}.input small{color:#e2edf1}.process{background:#f2ca63}.output{background:#bce3cf}.system-map>i{font-size:1.5rem;font-style:normal;color:#4d786c}.store{grid-column:2/5;display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;background:#e8ddfa;border-radius:12px}.store span{font-size:1.4rem;color:#7048a2}.fact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.fact-cards article{padding:.9rem;border:1px solid var(--line);border-radius:13px}.fact-cards article:nth-child(1){background:#eff5fb}.fact-cards article:nth-child(2){background:#fff8e4}.fact-cards article:nth-child(3){background:#eff9f3}.fact-cards article:nth-child(4){background:#f6f0fc}.fact-cards span{font-size:1.4rem}.fact-cards h3{font:600 1rem 'Space Grotesk',sans-serif;margin:.2rem 0}.fact-cards p{font-size:.9rem;margin:.2rem 0}.recovery{background:#fff5d8;padding:1rem;border-radius:14px;margin-top:1rem}.recovery h3{margin:.1rem}.recovery .mc{background:white;padding:.7rem;border-radius:11px;margin:.8rem 0}.locked{border:2px dashed #b7c6c1;background:#f9fbfa}.unlock-note{padding:.85rem;border-radius:10px;background:#f1eee4}.scratch-body .build-steps li{margin:.7rem 0}.visual-code{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:1rem 0}.event-block,.motion-block{padding:.7rem .9rem;border-radius:8px;font-weight:700;color:white}.event-block{background:#e3ae25;color:#342805;border-radius:18px 18px 7px 7px}.motion-block{background:#4184bd}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:580px;margin:1rem 0}td,th{border:1px solid #cdd9d4;padding:.55rem;text-align:left}thead{background:#eaf2ee}.extra-zone{border-top:5px solid #d8a738}.extra-card{display:grid;grid-template-columns:2.3rem 1fr;gap:.8rem;padding:1rem;margin:.8rem 0;background:#fffbf0;border:1px solid #f0dfad;border-radius:14px}.extra-card h3{font:600 1.1rem 'Space Grotesk',sans-serif;margin:0}.extra-num{display:grid;place-items:center;border-radius:50%;width:2.3rem;height:2.3rem;background:#f0d98c;font-weight:700}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.grid-3 label{display:grid;gap:.3rem}footer{text-align:center;padding:1rem;color:var(--muted);font-size:.88rem}details[open] summary{margin-bottom:.6rem}.disabled{opacity:.55;pointer-events:none}
@media(max-width:700px){.lesson-nav{position:relative;top:auto}.fact-cards{grid-template-columns:repeat(2,1fr)}.system-map{grid-template-columns:1fr}.system-map>i{transform:rotate(90deg);justify-self:center}.store{grid-column:1}.help dl{grid-template-columns:1fr;gap:0}.help dd{margin-bottom:.5rem}}
@media(max-width:440px){main{padding:.65rem}.fact-cards{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.hero{padding-bottom:2.4rem}}