:root{color-scheme:light;--bg:#EFE9DA;--ink:#1A1814;--accent:#D2451E;--dim:#7D7566;--line:#1A1814;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.65 "Space Mono","Courier New",monospace}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);z-index:9}
.w{max-width:1100px;margin:0 auto;padding:0 48px 60px;min-height:100vh}

/* DOS menu bar */
nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;background:var(--ink);color:var(--bg);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);padding:3px 0;font-family:VT323,"Courier New",monospace;font-size:22px}
nav .p{color:var(--accent);margin-right:auto;text-transform:uppercase;letter-spacing:1px}
nav a{color:var(--bg);text-decoration:none;padding:0 10px}
nav a:hover,nav a[aria-current]{background:var(--bg);color:var(--ink)}

h1,h2{font-family:VT323,"Courier New",monospace;font-weight:400;margin:0;text-transform:uppercase}
h1{font-size:60px;line-height:1;letter-spacing:2px}
h1 span,.ac{color:var(--accent)}
h2{font-size:34px;border-bottom:1px solid var(--line);padding:22px 0 4px;margin:0 0 6px;display:flex;justify-content:space-between;align-items:baseline}
h2 small{font-size:18px;color:var(--dim)}
.tag{color:var(--accent);font-family:VT323,monospace;font-size:22px;margin-top:26px}
.hero{display:flow-root}
.fig{float:left;width:200px;margin:15px 12px 0 0}
.pf{border:2px solid var(--line);position:relative;background:var(--bg)}
.pf canvas{display:block;width:100%;height:auto}
.pf button{position:absolute;left:8px;bottom:8px;font:inherit;font-size:11px;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:2px 6px;cursor:pointer}
.pf button:hover{background:var(--accent);color:var(--bg)}
.cap{font-size:11px;color:var(--dim);margin-top:4px}
.who{border:1px dashed var(--ink);padding:10px 14px;margin:20px 0;font-size:13px}
.who b{color:var(--accent);font-weight:400}
.st{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--line);margin:22px 0}
.st div{padding:8px 12px;border-right:1px solid var(--line);font-size:11px;color:var(--dim);text-transform:uppercase}
.st div:last-child{border-right:0}
.st strong{display:block;font:400 40px/1 VT323,monospace;color:var(--accent)}
.row{display:grid;grid-template-columns:180px 1fr;gap:4px 28px;padding:14px 0;border-bottom:1px dashed var(--dim)}
.row .d{color:var(--dim);font-size:12px}
.row h3{margin:0;font-size:15px}
.row h3 em{font-style:normal;color:var(--accent)}
ul{margin:6px 0 0;padding-left:18px}
li::marker{color:var(--accent);content:"> "}
a{color:var(--accent)}
.tl .row{padding:8px 0}
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:16px}
.lists h3{font:400 22px VT323,monospace;margin:0 0 4px;border-bottom:1px solid var(--line)}
.lists ul{list-style:none;padding:0}
.lists li::before{content:"+ ";color:var(--accent)}
.lists li::marker{content:""}
footer{margin-top:50px;border-top:2px solid var(--line);padding-top:10px;color:var(--dim);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.cur{display:inline-block;width:.5em;height:.8em;background:var(--accent);vertical-align:-2px;animation:b 1.1s steps(1) infinite}
@keyframes b{50%{opacity:0}}
@media (max-width:640px){.fig{float:none;width:170px;margin:20px 0 0}.row{grid-template-columns:1fr}h1{font-size:44px}.st{grid-template-columns:1fr 1fr}.st div:nth-child(2){border-right:0}.st div:nth-child(-n+2){border-bottom:1px solid var(--line)}}