@font-face { font-family: "IBM VGA ANSI"; src: url("fonts/IBM_VGA_8x16.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: VT323; src: url("fonts/VT323-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root { color-scheme: dark; --dos-link: #55ff55; --frame: #e9a361; }
* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px; color: #aaa; background: #000; font: 22px/1.3 VT323, "Courier New", monospace; }
main { width: 640px; max-width: 100%; margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen { container: caern / inline-size; width: 640px; max-width: 100%; background: #080c10; }
.geometry { width: 640px; position: relative; overflow: hidden; }
.ansi { position: absolute; top: 0; left: 0; width: max-content; margin: 0; padding: 0; font: 400 16px/16px "IBM VGA ANSI", monospace; font-variant-ligatures: none; letter-spacing: 0; white-space: pre; overflow-wrap: normal; word-break: normal; transform: scaleX(.5); transform-origin: top left; }
.ansi a, .callout a { color: var(--dos-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { outline: 1px solid var(--dos-link); outline-offset: 2px; }
.mobile-frame { display: none; border: 3px double var(--frame); }
.mobile-section { border-bottom: 3px double var(--frame); }
.mobile-art { position: relative; height: calc(var(--rows) * 16px * var(--mobile-scale, 1)); overflow: hidden; }
.mobile-native { position: absolute; top: 0; left: calc(-16px * var(--mobile-scale, 1)); width: 640px; height: calc(var(--rows) * 16px); transform: scale(var(--mobile-scale, 1)); transform-origin: top left; }
.copy, .callout { padding: 16px 18px; font: 20px/1.18 VT323, "Courier New", monospace; color: #a7c1c5; overflow-wrap: break-word; }
.copy h2 { font: inherit; color: #ffd39a; margin: 0 0 18px; }
.copy p { margin: 0 0 18px; }
.copy p:last-child { margin-bottom: 0; }
.callout { border-top: 3px double var(--frame); text-align: center; color: #fff4c2; }
.callout p { margin: 0 0 8px; }
.callout a { overflow-wrap: anywhere; }
::selection { background: var(--dos-link); color: #000; }
@container caern (max-width: 639px) { .desktop { display: none; } .mobile-frame { display: block; } }
@media (max-width: 480px) { body { padding: 20px 12px; } }