@font-face{font-family:"Tiny5";src:url(fonts/Tiny5-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"VT323";src:url(fonts/VT323-Regular.ttf) format("truetype");font-display:swap}
html.retro{--k:#000;--b:#0000d7;--r:#d70000;--m:#d700d7;--g:#00d700;--c:#00d7d7;--y:#d7d700;--w:#d7d7d7;
--B:#0000ff;--R:#ff0000;--M:#ff00ff;--G:#00ff00;--C:#00ffff;--Y:#ffff00;--W:#ffffff;
--px:"Tiny5",ui-monospace,monospace;--tx:"VT323",ui-monospace,"Courier New",monospace;color-scheme:dark}
html.retro *{box-sizing:border-box}
html.retro{background:var(--b)}
html.retro body{margin:0;padding:24px;min-height:100vh;color:var(--w);font:24px/1.32 var(--tx)}
html.retro main{max-width:50rem;margin:0 auto;background:var(--k);padding:28px 36px 40px;outline:4px solid var(--k)}
html.retro nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:28px;font:18px/1 var(--px);text-transform:uppercase}
html.retro nav a,html.retro nav b,html.retro nav button{display:inline-block;padding:7px 8px;text-decoration:none;color:var(--k);border:0;font:inherit;cursor:pointer;text-transform:uppercase}
html.retro nav .n1{background:var(--C)}
html.retro nav .n2{background:var(--G)}
html.retro nav .n3{background:var(--Y)}
html.retro nav .sp{flex:1}
html.retro nav .lang a{background:var(--w)}
html.retro nav .lang b{background:var(--k);color:var(--W);outline:2px solid var(--W);outline-offset:-2px}
html.retro nav .lang{display:inline-flex;gap:4px}
html.retro nav button{background:var(--M)}
html.retro nav button[aria-pressed=true]{background:var(--R);color:var(--W)}
html.retro nav .zx-theme{display:none}
html.retro nav .zx-retro{background:var(--w)}
html.retro nav a:hover,html.retro nav button:hover{filter:brightness(1.25)}
html.retro a:focus-visible,html.retro button:focus-visible{outline:3px solid var(--Y);outline-offset:2px}
html.retro h1{font:38px/1.2 var(--px);color:var(--Y);margin:0 0 6px;overflow-wrap:anywhere}
html.retro h1::after{content:"";display:inline-block;width:.55em;height:.9em;margin-left:.3em;background:var(--Y);vertical-align:-.08em;animation:blink 1s steps(1) infinite}
html.retro h2{font:26px/1.3 var(--px);color:var(--G);margin:34px 0 10px;overflow-wrap:anywhere}
html.retro h2::before{content:"> ";color:var(--M)}
html.retro .bar{display:flex;height:8px;margin:10px 0 22px}
html.retro .bar i{flex:1}
html.retro p,html.retro li{margin:0 0 14px}
html.retro ul,html.retro ol{padding-left:1.4em}
html.retro li::marker{color:var(--C)}
html.retro strong{color:var(--W);font-weight:normal;background:#0000d7;padding:0 3px}
html.retro em{color:var(--Y);font-style:normal}
html.retro .c a{color:var(--C);text-underline-offset:3px}
html.retro .c a:visited{color:var(--M)}
html.retro .c a:hover{background:var(--C);color:var(--k)}
html.retro code{color:var(--G);font-family:var(--tx);font-size:1em;border-bottom:1px dotted var(--g)}
html.retro pre{border:2px solid var(--g);padding:10px;overflow-x:auto}
html.retro table{border-collapse:collapse;width:100%;margin:8px 0 18px}
html.retro td,html.retro th{border:2px solid var(--b);padding:6px 10px;text-align:left;vertical-align:top}
html.retro th{font:18px/1.3 var(--px);color:var(--Y);background:#00006a}
html.retro footer{margin-top:40px;border-top:4px solid var(--b);padding-top:12px;color:var(--c);font:16px/1.6 var(--px);text-transform:uppercase}
@keyframes blink{50%{opacity:0}}
@media (max-width:600px){html.retro body{padding:8px;font-size:22px}
html.retro main{padding:18px 14px 28px}
html.retro h1{font-size:28px}
html.retro h2{font-size:22px}
html.retro nav{font-size:16px;gap:6px}
html.retro nav .sp{flex-basis:100%;height:0}
}
@media (prefers-reduced-motion:reduce){html.retro *,html.retro *::before,html.retro *::after{animation:none!important;transition:none!important}
}
html.retro header,html.retro footer{max-width:50rem;margin:0 auto;background:var(--k);padding:18px 36px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;outline:4px solid var(--k)}
html.retro header{padding-bottom:0}
html.retro footer{color:var(--c);font:16px/1.6 var(--px);text-transform:uppercase}
html.retro footer a{color:var(--c)}
html.retro footer .sp{flex:1}
html.retro footer .zx-retro{display:none}
html.retro .logo{font:20px/1 var(--px);color:var(--Y);text-decoration:none;margin-right:12px}
html.retro .logo b{color:var(--M);font-weight:normal}
html.retro .tools{display:flex;gap:6px;flex-wrap:wrap;font:18px/1 var(--px)}
html.retro .tools .cta,html.retro .tools .zx-theme,html.retro .tools .zx-retro-top{display:none}
html.retro .tools .lang{display:inline-flex;gap:4px}
html.retro .tools .lang a,html.retro .tools .lang b{padding:7px 8px;text-decoration:none;color:var(--k)}
html.retro .tools .lang a{background:var(--w)}
html.retro .tools .lang b{background:var(--k);color:var(--W);outline:2px solid var(--W);outline-offset:-2px}
html.retro .tools button{font:inherit;text-transform:uppercase;border:0;padding:7px 8px;cursor:pointer;color:var(--k);background:var(--w)}
html.retro .tools .zx-music{background:var(--M)}
html.retro .tools .zx-music[aria-pressed=true]{background:var(--R);color:var(--W)}
html.retro .hero,html.retro .figs,html.retro .kick,html.retro .lower{display:none}
html.retro main .wrap,html.retro main .read{max-width:none;padding:0}
html.retro form.access{display:grid;gap:12px;margin:18px 0}
html.retro form.access label{display:grid;gap:4px;color:var(--C)}
html.retro form.access input,html.retro form.access textarea{font:22px var(--tx);background:var(--k);color:var(--W);border:2px solid var(--b);padding:6px}
html.retro form.access .hp{position:absolute;left:-9999px}
html.retro form.access button{justify-self:start;font:18px var(--px);background:var(--G);color:var(--k);border:0;padding:8px 10px}