@font-face{font-family:BBC Micro;src:url(./bbc-micro-BeSs-z0Q.ttf) format("truetype");font-display:swap}:root{color-scheme:dark;--page: #000;--window: #0e0f13;--window-solid: #15161b;--text: #f2f2f4;--text-2: rgba(235, 235, 245, .68);--text-3: rgba(235, 235, 245, .42);--hairline: rgba(255, 255, 255, .09);--fill: rgba(255, 255, 255, .055);--fill-hover: rgba(255, 255, 255, .085);--fill-strong: rgba(255, 255, 255, .1);--red: #e8534d;--orange: #ef9a45;--yellow: #f2d04b;--green: #5fcf62;--mint: #63d6c4;--cyan: #5bcfdc;--blue: #4b8ff0;--indigo: #6c6cf0;--purple: #c35bf0;--pink: #f0607e;--accent: var(--red);--glow-a: rgba(232, 83, 77, .22);--glow-b: rgba(91, 207, 220, .16);--glow-c: rgba(242, 208, 75, .08);--phosphor: #ebffeb;--rounded: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;--sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--radius-card: 18px;--radius-tile: 12px}.theme-macbeeb{--accent: var(--red);--glow-a: rgba(232, 83, 77, .22);--glow-b: rgba(91, 207, 220, .16);--glow-c: rgba(242, 208, 75, .08)}.theme-macarch{--accent: var(--green);--glow-a: rgba(95, 207, 98, .2);--glow-b: rgba(91, 207, 220, .16);--glow-c: rgba(239, 154, 69, .08)}.theme-arclibre{--accent: var(--purple);--glow-a: rgba(195, 91, 240, .2);--glow-b: rgba(108, 108, 240, .16);--glow-c: rgba(95, 207, 98, .07)}.theme-vscode{--accent: var(--blue);--glow-a: rgba(75, 143, 240, .22);--glow-b: rgba(195, 91, 240, .12);--glow-c: rgba(91, 207, 220, .08)}.theme-home{--accent: var(--orange);--glow-a: rgba(232, 83, 77, .2);--glow-b: rgba(91, 207, 220, .16);--glow-c: rgba(95, 207, 98, .08)}*{box-sizing:border-box}html{background:var(--page)}body{margin:0;min-height:100vh;background:var(--page);color:var(--text);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding:40px 32px}a{color:inherit}img{max-width:100%}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;z-index:10;background:var(--window-solid);padding:6px 10px;border-radius:8px}.window{position:relative;max-width:1180px;margin:0 auto;border-radius:22px;overflow:hidden;isolation:isolate;background:radial-gradient(circle 560px at 3% 0%,var(--glow-a),transparent),radial-gradient(circle 620px at 100% 12%,var(--glow-b),transparent),radial-gradient(circle 680px at 50% 105%,var(--glow-c),transparent),var(--window);box-shadow:0 0 0 1px #ffffff1c,0 30px 80px #0009}.titlebar{display:flex;align-items:center;gap:18px;padding:14px 20px 0}.lights{display:flex;gap:8px;flex:none}.lights span{width:12px;height:12px;border-radius:50%;background:#ed6a5e;box-shadow:inset 0 0 0 .5px #00000040}.lights span:nth-child(2){background:#f5bf4f}.lights span:nth-child(3){background:#4a4a4f}.nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.brand{display:flex;align-items:center;gap:8px;margin-right:auto;text-decoration:none;font:700 15px/1 var(--rounded);letter-spacing:-.01em;color:var(--text)}.brand img{width:30px;height:30px}.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}.nav-links a{display:block;padding:6px 11px;border-radius:999px;text-decoration:none;color:var(--text-2);font-size:14px;font-weight:500}.nav-links a:hover{color:var(--text);background:var(--fill)}.nav-links a[aria-current=page]{color:var(--text);background:var(--fill-strong)}.nav-links .play a{color:#10232a;background:var(--cyan);font-weight:600;margin-left:6px}.nav-links .play a:hover{background:#7bdbe5;color:#10232a}.menu-toggle{display:none;margin-left:auto}.content{padding:56px 60px 40px}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center;margin-bottom:56px}.eyebrow{margin:0 0 4px;font-size:22px;font-weight:500;color:var(--text-2)}.title{margin:0;font:800 clamp(44px,5.4vw,68px) / 1.04 var(--rounded);letter-spacing:-.025em;background:linear-gradient(#fff,#c7c7c7);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}.lede{margin:14px 0 0;max-width:520px;font-size:19px;line-height:1.45;color:var(--text-2)}.stripe{display:flex;gap:6px;margin:22px 0 0;padding:0}.stripe span{width:34px;height:6px;border-radius:3px;background:linear-gradient(color-mix(in srgb,var(--c) 100%,white 18%),var(--c))}.stripe span:nth-child(1){--c: var(--red)}.stripe span:nth-child(2){--c: var(--orange)}.stripe span:nth-child(3){--c: var(--yellow)}.stripe span:nth-child(4){--c: var(--green)}.stripe span:nth-child(5){--c: var(--cyan)}.stripe span:nth-child(6){--c: var(--blue)}.stripe span:nth-child(7){--c: var(--purple)}.stripe.arc span:nth-child(1){--c: var(--green)}.stripe.arc span:nth-child(2){--c: var(--mint)}.stripe.arc span:nth-child(3){--c: var(--cyan)}.stripe.arc span:nth-child(4){--c: var(--blue)}.stripe.arc span:nth-child(5){--c: var(--indigo)}.stripe.arc span:nth-child(6){--c: var(--orange)}.stripe.arc span:nth-child(7){--c: var(--yellow)}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.hero-meta{margin:12px 0 0;font-size:13px;color:var(--text-3)}.hero-mascot{display:flex;align-items:center;gap:14px}.hero-mascot img{width:76px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}.crt{position:relative;padding:10px;border-radius:20px;background:#292929;box-shadow:0 8px 18px #0009,0 0 30px #5fcf622e}.crt-glass{position:relative;aspect-ratio:400 / 250;border-radius:14px;overflow:hidden;background:#050806;box-shadow:inset 0 0 0 1px #ffffff24;container-type:inline-size}.crt-glass:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,#00000038 2px 3px),radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.06),transparent 60%)}.crt-text{position:absolute;inset:0;margin:0;padding:7% 8%;font:400 4.1cqi / 1.75 "BBC Micro",var(--mono);color:var(--phosphor);text-shadow:0 0 6px rgba(235,255,235,.45);white-space:pre;overflow:hidden}.crt-text .cursor{display:inline-block;width:.75em;border-bottom:.14em solid currentColor;animation:blink 1.05s steps(1) infinite;transform:translateY(-.05em)}@keyframes blink{50%{opacity:0}}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 20px;border-radius:999px;border:0;background:var(--fill-strong);color:var(--text);font:500 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .15s,filter .15s,transform .15s;white-space:nowrap}.button:hover{background:#ffffff26}.button:active{transform:scale(.98)}.button svg{width:18px;height:18px;flex:none}.button.filled{background:var(--tint, var(--accent));color:#fff}.button.filled:hover{filter:brightness(1.1)}.button.filled.dark-text{color:#10232a}.button.wide{width:100%}.button.small{min-height:30px;padding:0 12px;font-size:13px}.button:disabled,.button[aria-disabled=true]{opacity:.4;cursor:default;filter:none;transform:none}.tint-red{--tint: var(--red)}.tint-orange{--tint: var(--orange)}.tint-green{--tint: var(--green)}.tint-cyan{--tint: var(--cyan)}.tint-blue{--tint: var(--blue)}.tint-purple{--tint: var(--purple)}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{--c: var(--accent);position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius-card);border:1px solid transparent;background:linear-gradient(var(--fill),var(--fill)) padding-box,linear-gradient(var(--window-solid),var(--window-solid)) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--c) 45%,transparent),#ffffff0f 55%) border-box;transition:box-shadow .2s,background .2s}.card:hover{background:linear-gradient(var(--fill-hover),var(--fill-hover)) padding-box,linear-gradient(var(--window-solid),var(--window-solid)) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--c) 90%,transparent),#ffffff0f 60%) border-box;box-shadow:0 0 22px color-mix(in srgb,var(--c) 35%,transparent)}.card.red{--c: var(--red)}.card.orange{--c: var(--orange)}.card.yellow{--c: var(--yellow)}.card.green{--c: var(--green)}.card.cyan{--c: var(--cyan)}.card.blue{--c: var(--blue)}.card.purple{--c: var(--purple)}.card.pink{--c: var(--pink)}.card-art{position:relative;height:150px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 35%,transparent),color-mix(in srgb,var(--c) 7%,transparent))}.card-art .app-icon{width:84px;height:84px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}.chips{position:absolute;left:0;right:0;bottom:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0 10px}.chip{padding:4px 9px;border-radius:999px;background:#00000059;font-size:12px;font-weight:600;white-space:nowrap}.card-art.with-chips{place-items:start center;padding-top:18px}.card h2,.card h3{display:flex;align-items:center;gap:10px;margin:4px 0 0;font:700 23px/1.2 var(--sans);letter-spacing:-.01em}.card h3{font-size:19px}.card h2 svg,.card h3 svg{width:22px;height:22px;color:var(--c);flex:none}.card p{margin:0;color:var(--text-2);font-size:15px;line-height:1.5}.card .grow{flex:1}.card-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}.card a.cover-link:after{content:"";position:absolute;inset:0;border-radius:inherit}.card a.cover-link{text-decoration:none}.card .card-actions{position:relative;z-index:1}.section{margin-top:56px}.section-title{margin:0 0 14px;font-size:17px;font-weight:600;color:var(--text-2)}.section-title.big{font:800 34px/1.1 var(--rounded);letter-spacing:-.02em;color:var(--text);margin-bottom:8px}.section-lede{margin:0 0 22px;max-width:680px;color:var(--text-2);font-size:17px}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tile{--c: var(--accent);display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--radius-tile);background:var(--fill);box-shadow:inset 0 0 0 1.5px transparent;text-decoration:none;transition:background .15s,box-shadow .15s}.tile:hover{background:#ffffff17;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent)}.tile svg{width:28px;height:28px;flex:none;color:var(--c)}.tile strong{display:block;font-size:15px;font-weight:600}.tile span{display:block;font-size:13px;color:var(--text-2)}.tile .badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--c) 30%,transparent);color:var(--text);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:2px}.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feature{--c: var(--accent);padding:18px;border-radius:14px;background:var(--fill)}.feature svg{width:24px;height:24px;color:var(--c)}.feature h3{margin:10px 0 4px;font-size:16px;font-weight:600}.feature p{margin:0;color:var(--text-2);font-size:14.5px}.feature code,.prose code,.card code{font:.9em var(--mono);color:var(--text);background:#ffffff12;padding:1px 5px;border-radius:5px}.prose{max-width:760px;color:var(--text-2);font-size:16.5px}.prose p{margin:0 0 14px}.prose strong{color:var(--text)}.prose a{color:var(--text);text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);text-underline-offset:3px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}.checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}.checklist li{position:relative;padding-left:28px;color:var(--text-2);font-size:15px}.checklist li:before{content:"";position:absolute;left:2px;top:4px;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--c, var(--green)) 85%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E")}.checklist li:after{content:"";position:absolute;left:7px;top:7px;width:6px;height:9px;border:solid #0e0f13;border-width:0 2px 2px 0;transform:rotate(45deg)}.checklist.todo li:before{background:#ffffff29}.checklist.todo li:after{left:6px;top:11px;width:8px;height:0;border-width:0 0 2px 0;transform:none;border-color:#fff9}.checklist strong{color:var(--text);font-weight:600}.code{margin:0;padding:16px 18px;border-radius:12px;background:#00000073;box-shadow:inset 0 0 0 1px var(--hairline);font:13.5px/1.6 var(--mono);color:#d9dbe2;overflow-x:auto}.code .k{color:#ff7ab2}.code .s{color:#ff8170}.code .c{color:#7f8c98}.code .n{color:#d9c97c}.code .l{color:#78c2b3}.code .p{color:#b281eb}.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);color:var(--text-2);font-size:14.5px}.note svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:1px}.note p{margin:0}.note strong{color:var(--text)}.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:64px;padding-top:22px;border-top:1px solid var(--hairline);font-size:14px;color:var(--text-2)}.footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}.footer a{text-decoration:none}.footer a:hover{color:var(--text)}.footer .fine{color:var(--text-3);font-size:13px}@media(max-width:1080px){.content{padding:44px 36px 32px}.cards,.tiles,.features{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:860px){body{padding:0}.window{border-radius:0;box-shadow:none;min-height:100vh}.hero{grid-template-columns:1fr;gap:36px}.hero .crt{max-width:460px}.split{grid-template-columns:1fr}.lights{display:none}.titlebar{padding:12px 16px 0;flex-wrap:wrap}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:10px;background:var(--fill);color:var(--text)}.menu-toggle svg{width:20px;height:20px}.nav{flex-wrap:wrap}.nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;padding:10px 0 4px}.nav-links.open{display:flex}.nav-links a{padding:10px 12px;font-size:16px}.nav-links .play a{margin:6px 0 0;text-align:center}.content{padding:32px 16px 28px}.cards,.cards.two,.features{grid-template-columns:1fr}}@media(max-width:520px){.tiles{grid-template-columns:1fr}.lede{font-size:17px}.hero-actions .button{flex:1 1 100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.card h3 img{width:28px;height:28px;flex:none}.shelf{display:flex;align-items:flex-end;gap:6px;height:112px;transform:perspective(500px) rotateX(6deg)}.shelf span{display:grid;place-items:center;width:38px;height:104px;border-radius:5px;writing-mode:vertical-rl;transform:rotate(180deg);font:800 12px/1 var(--rounded);letter-spacing:.04em;text-transform:uppercase;color:#000000bf;box-shadow:0 4px 10px #00000073,inset 0 0 0 1px #ffffff40}.shelf span:nth-child(1){background:linear-gradient(#f0c040,#d9902a);height:108px}.shelf span:nth-child(2){background:linear-gradient(#6fb6ff,#3a78d0);height:96px}.shelf span:nth-child(3){background:linear-gradient(#ff8a6b,#d8503a);height:104px}.shelf span:nth-child(4){background:linear-gradient(#8fe08a,#45a650);height:100px}.shelf span:nth-child(5){background:linear-gradient(#d39bff,#9050d8);height:92px}.econet-art{width:88%;height:auto}.editor{border-radius:14px;overflow:hidden;background:#1e1f24;box-shadow:0 0 0 1px #ffffff1a,0 14px 34px #0000008c,0 0 40px #4b8ff026}.editor-tab{padding:9px 16px;background:#18191d;border-bottom:1px solid rgba(255,255,255,.06);font:13px var(--sans);color:var(--text-2)}.editor-code{margin:0;padding:14px 0;font:13.5px/1.75 var(--mono);color:#d9dbe2;overflow-x:auto}.editor-code .ln{display:inline-block;position:relative;width:44px;padding-right:14px;text-align:right;color:#5c6370}.editor-code .ln.bp:before{content:"";position:absolute;left:8px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#e8534d}.editor-code .cur{background:#f2d04b29;box-shadow:inset 2px 0 #f2d04b;padding-right:100%}.editor-code .k{color:#ff7ab2}.editor-code .s{color:#ff8170}.editor-code .n{color:#d9c97c}.editor-code .l{color:#78c2b3}.editor-panel{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 16px;background:#18191d;border-top:1px solid rgba(255,255,255,.06);font:12.5px var(--mono);color:var(--text-2)}.editor-panel b{color:#78c2b3;font-weight:500;margin-right:4px}.card .checklist{margin:4px 0}.card .code{margin-top:4px}.footer a.author{color:var(--text);text-decoration:underline;text-decoration-color:#ffffff4d;text-underline-offset:3px}.footer a.author:hover{text-decoration-color:currentColor}