@font-face{font-family:C64;src:url('fonts/C64_Pro_Mono-STYLE.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
:root{color-scheme:dark;--border:#7b73d5;--blue:#302581;--ink:#b8b1ff;--edge:clamp(16px,4.2vw,64px);--type:clamp(16px,2vw,25px)}
*{box-sizing:border-box}
html{height:100%;background:var(--border)}
body{margin:0;min-height:100%;height:100svh;display:flex;flex-direction:column;padding:var(--edge) var(--edge) 0;background:var(--border);color:var(--ink);font-family:C64,monospace;font-size:var(--type);line-height:1.4;-webkit-font-smoothing:none}
.screen{flex:1;min-height:0;position:relative;background:var(--blue);padding:clamp(24px,3.6vh,48px) clamp(18px,3vw,48px);overflow:hidden}
.screen::after{content:'';pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#00000009 3px 4px);opacity:.5}
.terminal{width:40ch;max-width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;position:relative}
.boot{text-align:center;flex:none;margin-bottom:1.4em}
.brand{white-space:nowrap}
.memory{margin-top:1.4em;white-space:nowrap}
.mobile-version{display:none}
.ready,.command{flex:none;min-height:1.4em}
.command{white-space:pre-wrap;margin-bottom:0}
.hello{font:inherit;margin:1.4em 0 1.4em;flex:none}
.hello[hidden]{display:none}
.log{flex:1;min-height:0;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.line{min-height:1.4em;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.line a{color:inherit;text-decoration:none}
.line a:hover{text-decoration:underline;text-underline-offset:.15em}
.line a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.cursor::after{content:'';display:inline-block;width:1ch;height:.95em;background:var(--ink);margin-left:0;vertical-align:-.05em;animation:cursor 1.04s steps(1,end) infinite}
.typing.cursor::after{animation:none}
.connection{font-size:.58em;line-height:1.5;min-height:1.5em;margin:.7em 0 0;flex:none;opacity:.9}
.connection:empty{visibility:hidden}
.foot{height:var(--edge);min-height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#211767;font-size:clamp(8px,.8vw,10px);line-height:1.5}
.credits{display:flex;gap:.7ch;flex-wrap:wrap;align-items:center}
.credits a{color:inherit;text-decoration:none}
.credits a:hover{text-decoration:underline}
button{font:inherit;color:inherit;border:0;padding:8px 0 8px 12px;background:transparent;cursor:pointer;min-height:32px}
button:focus-visible,.credits a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
body[data-paused="true"] .cursor::after{animation:none;opacity:.5}
@keyframes cursor{50%{opacity:0}}
@media(min-width:1600px){:root{--type:28px}.screen{padding-top:48px}}
@media(max-width:700px){:root{--edge:18px;--type:14px}.screen{padding:25px 18px 18px}.terminal{width:100%}.brand{white-space:normal}.desktop-version{display:none}.mobile-version{display:block;margin-top:.7em}.memory{white-space:normal;margin-top:1.4em}.memory span{display:block}.boot{margin-bottom:1.4em}.hello{margin:1.4em 0}.foot{font-size:8px;min-height:44px}.credits{gap:.5ch}}
@media(max-width:370px){:root{--type:12px;--edge:12px}.screen{padding:20px 12px}}
@media(max-height:650px) and (min-width:701px){:root{--edge:24px;--type:16px}.screen{padding:20px 28px}.boot{margin-bottom:.7em}.memory{margin-top:.7em}.hello{margin:.7em 0}}
@media(max-height:620px) and (max-width:700px){.screen{padding-top:16px}.boot{margin-bottom:.7em}.memory{margin-top:.7em}.mobile-version{margin-top:0}.hello{margin:.7em 0}}
@media(prefers-reduced-motion:reduce){.cursor::after{animation:none}.screen::after{display:none}}