@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Atkinson+Hyperlegible+Mono:wght@400;700&display=swap');
:root{--ink:#020020;--paper:#F1F8F8;--blue:#4C69E3;--pink:#F66DC1;--green:#92D644;--orange:#FF9029;--white:#fff;--muted:#5a5b6a;--shadow:8px 8px 0 var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:18px;line-height:1.48}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-underline-offset:4px}code,pre,.mono{font-family:"Atkinson Hyperlegible Mono",ui-monospace,monospace}.mono{text-transform:uppercase;letter-spacing:.07em}
.sitehead{background:var(--ink);color:var(--paper);border-bottom:5px solid var(--blue);padding:14px clamp(16px,3vw,34px);display:flex;gap:18px;align-items:center;position:sticky;top:0;z-index:20}
.brand{font-weight:700;font-size:20px;white-space:nowrap}.brand b{color:var(--green)}.sitehead nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sitehead nav a{font:700 12px/1 "Atkinson Hyperlegible Mono",monospace;text-transform:uppercase;text-decoration:none;border:2px solid var(--paper);padding:8px 10px}.sitehead nav a[aria-current="page"]{background:var(--paper);color:var(--ink)}
.hero{max-width:1180px;margin:0 auto;padding:54px 24px 32px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:42px;align-items:center}.kicker{font:700 12px/1.3 "Atkinson Hyperlegible Mono",monospace;text-transform:uppercase;letter-spacing:.1em}.hero h1{font-size:clamp(52px,8vw,105px);line-height:.85;letter-spacing:-.065em;margin:12px 0 22px;max-width:9ch}.hero p{font-size:21px;max-width:58ch}.heroimg{background:white;border:4px solid var(--ink);box-shadow:var(--shadow);transform:rotate(1.5deg);padding:14px}.heroimg img{display:block;width:100%;height:auto}
.route{max-width:1180px;margin:0 auto 50px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.route a{display:block;text-decoration:none;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:16px;background:white}.route a:nth-child(1){border-top:10px solid var(--blue)}.route a:nth-child(2){border-top:10px solid var(--pink)}.route a:nth-child(3){border-top:10px solid var(--green)}.route a:nth-child(4){border-top:10px solid var(--orange)}.route small{display:block;font:700 11px "Atkinson Hyperlegible Mono";text-transform:uppercase;letter-spacing:.08em}.route b{display:block;font-size:20px;margin-top:4px}
.deckbar{max-width:1180px;margin:0 auto;padding:10px 24px 14px;display:flex;align-items:center;gap:16px}.deckbar .count{margin-left:auto;font:700 12px "Atkinson Hyperlegible Mono";text-transform:uppercase}.progress{height:10px;flex:1;max-width:260px;border:2px solid var(--ink);background:white}.progress span{display:block;height:100%;background:var(--green);width:0}
.deck{max-width:1180px;margin:0 auto;padding:0 24px 96px}.slide{display:none;min-height:560px;background:white;border:4px solid var(--ink);box-shadow:var(--shadow);padding:clamp(24px,4vw,48px);position:relative;overflow:hidden}.slide.active{display:block}.slide:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-75px;bottom:-90px;background:var(--accent,var(--blue));opacity:.95}.slide[data-accent="blue"]{--accent:var(--blue)}.slide[data-accent="pink"]{--accent:var(--pink)}.slide[data-accent="green"]{--accent:var(--green)}.slide[data-accent="orange"]{--accent:var(--orange)}.slide[data-accent="ink"]{--accent:var(--ink)}.slide h2{font-size:clamp(34px,5vw,64px);line-height:.94;letter-spacing:-.045em;margin:6px 0 22px;max-width:18ch}.slide h3{font-size:24px;margin:24px 0 8px}.slide p{max-width:72ch}.lead{font-size:23px;line-height:1.35}.eyebrow{font:700 11px/1.3 "Atkinson Hyperlegible Mono";text-transform:uppercase;letter-spacing:.1em}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.threecol{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.panel{border:3px solid var(--ink);padding:16px;background:var(--paper)}.panel.blue{background:var(--blue);color:white}.panel.pink{background:var(--pink)}.panel.green{background:var(--green)}.panel.orange{background:var(--orange)}.panel.ink{background:var(--ink);color:var(--paper)}.panel h3{margin-top:0}.rule{border-left:8px solid var(--accent,var(--blue));padding:12px 16px;background:var(--paper);margin:20px 0}.warning{border:4px solid var(--ink);background:var(--orange);padding:16px 18px;font-weight:700}.success{border:4px solid var(--ink);background:var(--green);padding:16px 18px}.code{background:var(--ink);color:var(--paper);border:4px solid var(--ink);padding:16px 18px;white-space:pre-wrap;overflow:auto;font-size:16px}.terminal:before{content:"TERMINAL";display:block;font:700 10px "Atkinson Hyperlegible Mono";letter-spacing:.12em;color:var(--green);margin-bottom:8px}.checklist{padding:0;list-style:none}.checklist li{margin:10px 0;padding-left:34px;position:relative}.checklist li:before{content:"□";position:absolute;left:0;font:700 22px monospace}.compare{width:100%;border-collapse:collapse;margin:18px 0}.compare th,.compare td{border:2px solid var(--ink);padding:10px 12px;text-align:left;vertical-align:top}.compare th{background:var(--paper)}.imagecard{border:3px solid var(--ink);background:var(--paper);padding:12px}.imagecard img{width:100%;display:block}.imagecard figcaption{font-size:14px;margin-top:8px}.pinout{display:grid;grid-template-columns:1fr 52px 52px 1fr;gap:5px 8px;align-items:center;font:700 12px "Atkinson Hyperlegible Mono";margin:16px 0}.pin{height:34px;display:grid;place-items:center;border:2px solid var(--ink);background:white}.p3{background:var(--orange)}.p5{background:#ff4f63;color:white}.pg{background:var(--ink);color:white}.pio{background:var(--green)}.plabel.r{text-align:right}.plabel.l{text-align:left}.callout{font-size:14px;border-top:2px dashed var(--ink);padding-top:12px;margin-top:16px}.part{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center}.particon{width:100px;height:100px;display:grid;place-items:center;border:3px solid var(--ink);background:var(--accent,var(--blue));box-shadow:5px 5px 0 var(--ink);font:700 36px "Atkinson Hyperlegible Mono"}.part dl{display:grid;grid-template-columns:130px 1fr;margin:0}.part dt{font-weight:700;padding:5px 8px 5px 0}.part dd{margin:0;padding:5px 0}.decknav{max-width:1180px;margin:-72px auto 0;padding:0 24px 24px;display:flex;gap:10px;align-items:center}.decknav button{border:3px solid var(--ink);background:white;box-shadow:4px 4px 0 var(--ink);padding:10px 14px;font:700 13px "Atkinson Hyperlegible Mono";text-transform:uppercase;cursor:pointer}.decknav button.primary{background:var(--blue);color:white}.decknav button:disabled{opacity:.35;box-shadow:none}.dots{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}.dot{width:11px;height:11px;border:2px solid var(--ink);background:white}.dot.on{background:var(--green)}.dot.here{outline:3px solid var(--blue);outline-offset:2px}
.homegrid{max-width:1180px;margin:0 auto;padding:0 24px 70px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.homecard{border:4px solid var(--ink);box-shadow:var(--shadow);padding:24px;background:white;min-height:230px;position:relative}.homecard:nth-child(1){border-top:14px solid var(--blue)}.homecard:nth-child(2){border-top:14px solid var(--pink)}.homecard:nth-child(3){border-top:14px solid var(--green)}.homecard:nth-child(4){border-top:14px solid var(--orange)}.homecard h2{font-size:34px;line-height:1;margin:5px 0 12px}.homecard a{font-weight:700}.footer{background:var(--ink);color:var(--paper);padding:25px;text-align:center;font:700 12px "Atkinson Hyperlegible Mono";letter-spacing:.08em}
@media(max-width:820px){.sitehead{align-items:flex-start;flex-wrap:wrap}.sitehead nav{margin-left:0}.hero{grid-template-columns:1fr}.route,.threecol{grid-template-columns:1fr 1fr}.twocol,.homegrid{grid-template-columns:1fr}.slide{min-height:0}.part{grid-template-columns:80px 1fr}.particon{width:72px;height:72px}.part dl{grid-template-columns:100px 1fr}.decknav{margin:-70px auto 0}.dots{display:none}}
@media(max-width:520px){body{font-size:17px}.sitehead nav a{padding:7px;font-size:10px}.hero{padding-top:34px}.hero h1{font-size:52px}.route,.threecol{grid-template-columns:1fr}.deck{padding-left:12px;padding-right:16px}.deckbar,.decknav{padding-left:12px;padding-right:16px}.slide{padding:22px 18px;box-shadow:5px 5px 0 var(--ink)}.slide h2{font-size:36px}.twocol{gap:12px}.pinout{grid-template-columns:1fr 42px 42px 1fr;font-size:10px}.part{display:block}.particon{margin-bottom:18px}}
@media print{.sitehead,.deckbar,.decknav{display:none}.slide{display:block!important;box-shadow:none;border:1px solid #000;page-break-after:always;min-height:auto}.slide:after{display:none}.deck{padding:0}.hero,.route{display:none}}

/* Beginner-teaching additions: make every action visible and recoverable. */
.steps{counter-reset:step;list-style:none;padding:0;margin:18px 0}.steps>li{counter-increment:step;position:relative;padding:13px 14px 13px 58px;margin:10px 0;border:2px solid var(--ink);background:var(--paper);min-height:50px}.steps>li:before{content:counter(step);position:absolute;left:12px;top:11px;width:30px;height:30px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:700 15px "Atkinson Hyperlegible Mono";transform:rotate(-2deg)}
.youdo,.expect,.trouble,.remember,.before{border:3px solid var(--ink);padding:14px 16px;margin:16px 0}.youdo{background:var(--blue);color:white}.expect{background:var(--green)}.trouble{background:var(--pink)}.remember{background:var(--paper);border-style:dashed}.before{background:var(--orange)}
.youdo b,.expect b,.trouble b,.remember b,.before b{display:block;font:700 11px/1.3 "Atkinson Hyperlegible Mono";text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px}
.path{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center;font:700 14px "Atkinson Hyperlegible Mono";margin:7px 0}.path span{border:2px solid var(--ink);padding:5px 7px;background:white;color:var(--ink)}.path i{font-style:normal;font-weight:700}
.prompt{border:3px solid var(--ink);background:#111126;color:var(--paper);padding:16px 18px;margin:14px 0;font:16px/1.55 "Atkinson Hyperlegible Mono";overflow:auto}.prompt .where{color:var(--green)}.prompt .type{color:var(--orange)}.prompt .note{display:block;color:#c9d3d8;font-size:13px;margin-top:8px}
.termkey{display:inline-block;border:2px solid currentColor;border-bottom-width:4px;padding:1px 6px;border-radius:4px;font:700 .85em "Atkinson Hyperlegible Mono";background:rgba(255,255,255,.45)}
.screenmock{border:4px solid var(--ink);background:white;box-shadow:5px 5px 0 var(--ink);margin:16px 0}.taskbar{height:48px;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:12px;padding:0 12px;font:700 12px "Atkinson Hyperlegible Mono"}.taskicon{display:inline-grid;place-items:center;min-width:32px;height:30px;border:2px solid var(--paper);padding:0 7px}.desktopbody{min-height:180px;padding:25px;background:linear-gradient(135deg,#dfe9ef,#f6fafb);position:relative}.desktopbody:after{content:"This is the desktop — your icons may be arranged differently.";position:absolute;left:20px;bottom:18px;font:700 12px "Atkinson Hyperlegible Mono";color:var(--muted)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}.flow>div{border:3px solid var(--ink);padding:12px;background:var(--paper)}.flow>div:nth-child(1){border-top:9px solid var(--green)}.flow>div:nth-child(2){border-top:9px solid var(--blue)}.flow>div:nth-child(3){border-top:9px solid var(--pink)}.flow>div:nth-child(4){border-top:9px solid var(--orange)}.flow small{display:block;font:700 10px "Atkinson Hyperlegible Mono";text-transform:uppercase}.flow b{font-size:18px}
.tryline{padding:12px 14px;border-left:6px solid var(--green);background:var(--paper);margin:14px 0}.tryline b{font-family:"Atkinson Hyperlegible Mono";text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.partslist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}.partslist>div{border:2px solid var(--ink);padding:11px 13px;background:var(--paper)}.partslist b{display:block}
.smallnote{font-size:14px;color:var(--muted)}.bigword{font:700 30px/1 "Atkinson Hyperlegible Mono";margin:12px 0}.stop{background:var(--ink);color:var(--paper);padding:16px 18px;border:4px solid var(--pink)}
@media(max-width:820px){.flow,.partslist{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow,.partslist{grid-template-columns:1fr}.steps>li{padding-left:52px}}