:root{color-scheme:light;--paper:#eeebe3;--ink:#252820;--muted:#62665b;--line:#cccfc0;--accent:#d7512c;--mono:'Courier New',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-underline-offset:4px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{transition:background .15s,transform .15s}button:not(:disabled):active{transform:translateY(1px)}.masthead,main,footer{max-width:1320px;margin:auto;padding-left:56px;padding-right:56px}.masthead{height:104px;display:flex;align-items:center;justify-content:space-between;font:12px var(--mono);letter-spacing:.04em}.masthead a{text-decoration:none}.wordmark{display:flex;align-items:center;gap:15px;font-weight:bold}.apple-mark{font:bold 32px var(--mono);letter-spacing:-8px;margin-right:8px}.masthead>a:last-child{border-bottom:1px solid var(--ink);padding-bottom:4px}.hero{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start;margin:0 auto;padding:32px 0 70px}.eyebrow{font:11px var(--mono);font-weight:bold;letter-spacing:.09em;margin:0 0 25px;display:flex;align-items:center;gap:9px}.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#79994c}.primary{display:flex;justify-content:space-between;gap:40px;align-items:center;background:var(--accent);border:1px solid var(--accent);border-radius:3px;color:#fff6e9;padding:17px 23px;font-weight:bold;font-size:16px;box-shadow:0 3px 0 #a53f23}.primary:hover:not(:disabled){background:#bd4423}.fine{font:11px/1.6 var(--mono);color:var(--muted);margin:13px 0 23px}.text-link{font-size:13px;font-weight:bold;line-height:1.7}.station{padding-top:8px;min-width:0}.monitor{padding:19px 23px 15px;background:linear-gradient(110deg,#d5d2bd,#c3c3af);border:1px solid #a8aa95;border-radius:13px 13px 8px 8px;box-shadow:inset 0 2px 0 #f9f5dc,5px 9px 0 #deddd0,0 18px 30px #2b2c1713}.monitor-top{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.1em;color:#555949;margin:0 0 13px}.bezel{background:#34382f;padding:14px;border-radius:17px;box-shadow:inset 1px 3px 8px #161910}.bezel canvas{display:block;width:100%;height:auto;aspect-ratio:560/384;background:#000;image-rendering:pixelated;border-radius:7px}.monitor-bottom{display:flex;gap:9px;align-items:center;padding:19px 3px 0}.monitor-bottom strong{font:italic bold 17px Georgia,serif;color:#525646}.rainbow{height:20px;width:15px;display:block;background:linear-gradient(#79a452 0 17%,#dbca49 17% 34%,#d79a3e 34% 51%,#ca573a 51% 68%,#997898 68% 84%,#6192a4 84%)}.power{margin-left:auto;font:9px var(--mono);display:flex;gap:8px;align-items:center}.power .dot{background:#b5dc76;box-shadow:0 0 6px #a3c45f}.monitor-foot{width:47%;height:17px;margin:auto;background:linear-gradient(#a5a793,#bfc1ad);border-radius:0 0 7px 7px;box-shadow:0 6px 0 #ddded0}.console-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:21px}.console-bar p{font:11px/1.5 var(--mono);color:#535949;margin:0}.small{background:transparent;border:1px solid #aeb39e;border-radius:3px;white-space:nowrap;padding:7px 9px;font:10px var(--mono)}.screen-help{font:10px/1.5 var(--mono);color:var(--muted);margin:12px 0 7px}form{display:flex;align-items:center;border:1px solid #aeb39e;border-radius:3px;background:#f9f7f0;padding-left:11px;gap:7px}form>span{font:19px var(--mono);color:var(--accent)}input{min-width:0;flex:1;background:none;border:0;padding:12px 0;font:12px var(--mono);color:var(--ink)}form button{border:0;border-left:1px solid var(--line);background:transparent;padding:12px;font:11px var(--mono)}.experiment{margin-top:23px;display:flex;align-items:center;justify-content:space-between;gap:10px}.experiment>span{font:9px var(--mono);letter-spacing:.06em}.swatches{display:flex;gap:5px}.swatches button{display:flex;align-items:center;gap:5px;font:10px var(--mono);padding:8px;background:none;border:1px solid #b9bdab;border-radius:3px}.swatches button[aria-pressed=true]{background:#dedfcf;border-color:#535c43}.swatches i{width:10px;height:10px;border:1px solid #9b9d90}.white{background:#fff}.black{background:#181c17}.purple{background:repeating-linear-gradient(90deg,#bc36ed 0 3px,#25cc41 3px 6px)}.station>.fine{margin-top:10px;margin-bottom:0}.walkthrough{border-top:1px solid var(--line);padding-top:42px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:35px}.section-heading .eyebrow,.why .eyebrow{color:var(--muted);margin-bottom:12px}h2{font-size:32px;line-height:1.1;letter-spacing:-.04em;margin:0}.section-heading>p{font-size:13px;line-height:1.6;margin:0;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.step{min-width:0;padding-right:25px;border-right:1px solid var(--line)}.step:last-child{border:0;padding-right:0}.step-number{font:12px var(--mono);color:var(--accent)}h3{font-size:19px;letter-spacing:-.025em;margin:13px 0}.step p,.why p{font-size:13px;line-height:1.75;color:#555b4d}.step p{min-height:90px}code,pre{font-family:var(--mono)}p code{font-size:.95em;color:var(--ink)}.snippet{position:relative;border:1px solid var(--line);background:#e4e5d9;border-radius:3px;display:flex;justify-content:space-between;align-items:start;gap:12px;padding:13px;font:12px/1.65 var(--mono)}.snippet button{background:none;border:0;font:10px var(--mono);color:#434c36;white-space:nowrap;padding:2px 0;border-bottom:1px solid #909781}.bytes{flex-direction:column;gap:8px}.bytes code{overflow-wrap:anywhere}.bytes button{align-self:end}.step .aside{font:11px/1.65 var(--mono);min-height:0;color:var(--muted)}details{margin-top:17px;font:11px/1.6 var(--mono)}summary{cursor:pointer}details p{min-height:0!important}pre{font-size:11px;white-space:pre-wrap}.why{display:grid;grid-template-columns:1fr 2fr;gap:60px;margin-top:55px;border-top:1px solid var(--line);padding:40px 0 55px}.why p:first-child{margin-top:0}.why h2{font-size:34px}.why>div:last-child{max-width:630px}footer{padding-top:23px;padding-bottom:30px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font:10px/1.6 var(--mono);color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.noscript{padding:20px;background:#fff0d8;position:fixed;bottom:0;width:100%;margin:0}@media(max-width:1050px){.masthead,main,footer{padding-left:30px;padding-right:30px}.swatches span{display:none}.experiment>span{font-size:8px}.monitor{padding:15px}.bezel{padding:10px}.steps{gap:20px}.step{padding-right:17px}}@media(max-width:760px){.masthead,main,footer{padding-left:22px;padding-right:22px}.masthead{height:80px;font-size:9px}.hero{padding-top:24px}.station{width:100%;margin:auto}.swatches span{display:inline}.section-heading{display:block}.section-heading>p{margin-top:16px}.steps{grid-template-columns:1fr;gap:26px}.step{border-right:0;border-bottom:1px solid var(--line);padding:0 0 22px}.step p{min-height:0}.why{grid-template-columns:1fr;gap:23px}.why h2 br{display:none}footer{flex-direction:column;gap:10px}.experiment{gap:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}

.live-guide{margin-top:20px;border:1px solid #b9bdab;border-left:3px solid var(--accent);border-radius:3px;padding:18px;background:#f5f3eb}.live-guide .eyebrow{font-size:10px;margin-bottom:10px}.live-guide h2{font-size:23px}.live-guide p:not(.eyebrow){font-size:13px;line-height:1.6;margin:10px 0}.live-guide .guide-evidence{font-family:var(--mono);font-size:11px!important;color:#525e44}.live-guide .snippet{margin-top:13px}.live-guide code{overflow-wrap:anywhere;min-width:0}.live-guide [hidden]{display:none}.live-guide .boot-note{margin-top:14px}.live-guide .boot-note p{font-family:Arial,Helvetica,sans-serif}.live-guide[data-step="done"]{border-left-color:#79994c}

/* The front door is a field notebook. The article fades down the page;
   nothing disappears on a timer while someone is trying to read it. */
[hidden]{display:none!important}
.reading{max-width:720px;margin:65px auto 100px;font-family:Georgia,'Times New Roman',serif}
.reading>.eyebrow{color:var(--muted);font-size:11px;margin-bottom:25px}
.reading h1{font-weight:normal;font-size:clamp(38px,4.4vw,57px);line-height:1.13;letter-spacing:-.045em;margin:0 0 30px;text-wrap:balance}
.reading .post-deck{font-size:21px;line-height:1.7;margin:0 0 38px;color:#414638}
.reading h2{font-family:Georgia,'Times New Roman',serif;font-weight:normal;letter-spacing:-.025em;font-size:28px;line-height:1.25;margin:32px 0 15px}
.reading p,.reading li,.reading dd{font-size:17px;line-height:1.85;color:#42473c}
.reading p{margin:0 0 21px}
.reading-preview{max-height:335px;overflow:hidden;mask-image:linear-gradient(to bottom,#000 0%,#000 18%,#0009 53%,transparent 100%)}
.reading-preview h2:first-child{margin-top:0}
.reading-choices{position:relative;margin:0 -20px;padding-top:4px;display:grid;gap:12px}
.reading-choice{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;padding:23px 25px;border:1px solid #c6c8b9;border-radius:3px;background:#f7f5ef;transition:background .15s,border-color .15s}
.reading-choice>span:last-child{font:20px Arial,sans-serif;flex-shrink:0}
.reading-choice.impatient{font-size:23px;line-height:1.4;color:#ad3d20;border-color:#c8a18e}
.reading-choice.studious{font-size:19px;line-height:1.5}
.reading-choice:hover{background:#fffdf5;border-color:var(--accent)}
body[data-view="documentation"] .reading-preview{max-height:none;overflow:visible;mask-image:none}
.reading .reading-switch{font:12px/1.6 var(--mono);margin:26px 0 38px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-files{margin:22px 0 35px}.project-files>div{padding:15px 0;border-bottom:1px solid var(--line)}.project-files dt{font-size:14px}.project-files dd{margin:5px 0 0;font-size:16px}
.reading-references{padding-left:23px}.reading .reading-source{font:11px/1.8 var(--mono);margin-top:45px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted)}
.playground-nav{display:flex;justify-content:space-between;gap:15px;padding-top:20px;font:11px/1.5 var(--mono)}
@media(max-width:760px){.reading{margin-top:36px;margin-bottom:65px}.reading h1{font-size:39px}.reading h1 br{display:none}.reading .post-deck{font-size:19px}.reading-preview{max-height:330px}.reading-choices{margin:0}.reading-choice{padding:19px;gap:13px}.reading-choice.impatient{font-size:21px}.reading-choice.studious{font-size:17px}.reading h2{font-size:25px}.playground-nav{font-size:10px}}
@media(prefers-reduced-motion:reduce){.reading-choice{transition:none}}

#post-title:focus,#title:focus{outline:none}


.instruction-column{min-width:0;padding-top:8px}.instruction-column .live-guide{margin-top:0}.instruction-column .guide-howto{color:var(--muted);font-size:12px!important}.instruction-column .screen-help{font-size:11px;line-height:1.6;margin-top:18px}
@media(min-width:1450px){body[data-view="playground"] main{max-width:1480px}.hero{grid-template-columns:340px minmax(0,1fr);gap:40px}}
@media(max-width:1000px){.hero{grid-template-columns:280px minmax(0,1fr);gap:22px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:26px}.instruction-column{padding-top:0}}

.hardware-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:24px}.hardware-controls button{padding:11px;font-size:11px;background:#f5f3eb}.hardware-controls button[aria-pressed="true"],.hardware-controls .control-held,#control-key[aria-pressed="true"]{border-color:#607948;background:#e0e8d3}.hardware-controls button span{margin-left:7px;font-weight:bold}.drive-light{font:9px var(--mono);margin-left:auto;display:flex;gap:7px;align-items:center}.drive-light .dot,.monitor[data-power="off"] .power .dot{background:#77796a;box-shadow:none}.drive-light.active .dot{background:#e57634;box-shadow:0 0 6px #e57634}.bezel[data-signal="off"] canvas{visibility:hidden}.bezel{background-color:#131611}.boot-note button{margin-top:8px}

.keyboard-feedback{margin:16px 0;padding:14px;background:#f6e5ca;border:1px solid #c99559;border-radius:3px}.keyboard-feedback h3{font-size:16px;line-height:1.35;margin:0}.keyboard-feedback p{font-size:12px!important}.keyboard-feedback button{font-size:10px;white-space:normal}

/* US Apple IIe keyboard, including the separate reset and power indicator. */
body[data-view="playground"] footer{display:none}
.sidebar-credits{font:10px/1.6 var(--mono);color:var(--muted);margin-top:19px}
.instruction-column .console-bar{align-items:start}.instruction-column .console-bar p{min-width:0}
.keyboard-scroll{max-width:100%;overflow-x:auto;margin-top:24px;padding-bottom:10px}
.apple-keyboard{--key-gap:2px;display:grid;grid-template-columns:minmax(0,14.5fr) minmax(0,1fr);gap:12px;min-width:620px;padding:26px 26px 34px;background:linear-gradient(120deg,#d6d0b6,#bfbba2);border:1px solid #a4a48b;border-radius:13px 13px 22px 22px;box-shadow:inset 0 2px 0 #eee7ce,inset 0 -9px 0 #b1ae96,0 6px 0 #deddd0;user-select:none;touch-action:pan-x}
.keyboard-well{padding:4px;background:#32352c;border:1px solid #686951;border-radius:5px;box-shadow:inset 0 3px 7px #171a10}
.keyboard-row{display:grid;grid-template-columns:repeat(58,minmax(0,1fr))}
.apple-key{grid-column:span 4;height:49px;margin:var(--key-gap);border:1px solid #626451;border-bottom-width:3px;border-radius:5px;background:linear-gradient(145deg,#929580,#6b705b);color:#151d12;box-shadow:inset 1px 2px 1px #c2c1a0,inset -2px -2px 2px #555c48,0 2px 1px #181e12;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;font:600 13px/1.1 Arial,Helvetica,sans-serif;padding:5px 6px;touch-action:none;transition:background .08s,box-shadow .08s}
.apple-key:disabled{opacity:.85;cursor:default}.apple-key:hover:not(:disabled){background:linear-gradient(145deg,#a5a78c,#7c8169)}
.apple-key .key-shifted,.apple-key .key-plain{display:block;align-self:flex-start;font-size:11px;line-height:1.4}
.apple-key.key-word{font-size:10px;align-items:flex-start;justify-content:flex-start;padding-top:9px;font-weight:500}
.apple-key[data-key="CapsLock"]{white-space:normal;max-width:100%;line-height:1.2}
.apple-key svg{width:20px;height:22px;fill:currentColor}
.apple-key[data-key="Reset"]{grid-column:2;grid-row:1;height:43px;margin-top:6px;align-items:center;padding:8px 2px;border:1px solid #81816b;background:linear-gradient(#b4b29a,#8c8e77);box-shadow:inset 1px 1px 2px #ded7b9,0 0 0 5px #bab7a0}
.apple-key.pressed,.apple-key.physical-pressed,.apple-key[aria-pressed="true"]{background:linear-gradient(#626d53,#899478);box-shadow:inset 1px 2px 4px #303a24,inset -1px -1px 0 #acb694;border-bottom-width:1px;transform:translateY(1px)}
.apple-key:focus-visible{outline:2px solid var(--accent);outline-offset:0;z-index:1}
.keyboard-power{grid-column:span 4;height:49px;margin:2px;background:#535843;border:2px solid #555b46;border-radius:3px;box-shadow:inset 0 1px 5px #303624;display:flex;align-items:center;justify-content:center}.keyboard-power span{font:7px Arial,sans-serif;letter-spacing:.06em;color:#a9ae96;padding:8px 1px;border-radius:2px;background:#626953}
.apple-keyboard[data-power="on"] .keyboard-power span{color:#28311c;background:#c2d58b;box-shadow:0 0 7px #c0d4878a}
@media(max-width:1050px){.apple-keyboard{padding:18px 16px 28px;gap:9px;min-width:570px}.apple-key,.keyboard-power{height:43px}.apple-key{font-size:12px;padding:4px}.apple-key.key-word{font-size:9px}.apple-key .key-shifted,.apple-key .key-plain{font-size:10px}.apple-key[data-key="Reset"]{height:37px}}
@media(prefers-reduced-motion:reduce){.apple-key{transition:none}}

.paste-options{margin-top:18px;padding:16px;border:1px solid #c5ae7d;border-radius:4px;background:#f5ecd9}.paste-options h3{margin:0;font-size:17px;line-height:1.35}.paste-options p{font-size:12px;line-height:1.6}.paste-options label{display:block;font:11px/1.6 var(--mono);margin-bottom:8px}.paste-options textarea{min-width:0;width:100%;flex:1;background:none;border:0;padding:12px 0;font:12px/1.5 var(--mono);color:var(--ink);resize:vertical}.paste-options textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.paste-options #guide-send{margin-top:12px;white-space:normal}