@font-face{font-family:Pixel;src:url('vendor/c64.woff2') format('woff2');font-display:swap}
:root{font-family:Arial,Helvetica,sans-serif;color:#f3f0f7;background:#111319;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #d6fa96;outline-offset:5px}button:disabled{cursor:default;opacity:.5}::selection{background:#ba94ed;color:#181324}
.page{min-height:100svh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 54% 45%,#29203466,transparent 49%),#111319}.topbar{max-width:1560px;margin:auto;padding:27px 4.2vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff0c;position:relative;z-index:1}.wordmark{font-size:21px;font-weight:900;font-style:italic;letter-spacing:-1px;text-decoration:none}.wordmark span{font-size:10px;letter-spacing:3px;font-style:normal;color:#b995e9;margin-left:10px}.edition{font:10px/1.5 monospace;letter-spacing:2px;color:#83818d}.edition i{display:inline-block;width:6px;height:6px;background:#c4ec87;border-radius:50%;margin-right:9px;box-shadow:0 0 9px #bded7566}
.stage{max-width:1440px;min-height:calc(100svh - 147px);margin:auto;display:grid;grid-template-columns:minmax(210px,1fr) minmax(380px,590px) minmax(170px,.8fr);align-items:center;padding:12px 4.2vw 20px;gap:12px}.intro{z-index:2;padding-bottom:40px}.eyebrow{font:10px/1.7 monospace;letter-spacing:2.7px;text-transform:uppercase;color:#b597d8}.intro h1{font-size:clamp(35px,4.25vw,64px);line-height:1.04;letter-spacing:-3px;font-weight:500;margin:22px 0}.intro h1 em{font-style:normal;color:#b9a0da}.intro p{color:#95919f;font-size:14px;line-height:1.8;max-width:235px}.cartridge-tag{display:inline-flex;align-items:center;gap:10px;margin:25px 0 0;padding:10px 13px;border:1px solid #ffffff15;border-radius:5px;color:#d7cde2;font:10px monospace;letter-spacing:1px}.cartridge-tag svg{width:18px;height:22px;fill:none;stroke:#b99ad9}.tiny-note{font:10px/1.8 monospace!important;color:#625d6f!important;margin-top:17px}
.console-column{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center}.console{position:relative;width:100%;max-width:550px;aspect-ratio:2/3;isolation:isolate;user-select:none;-webkit-user-select:none}.shell{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.screen{position:absolute;left:24.86%;top:12.37%;width:49.8%;height:27.8%;overflow:hidden;background:#d5e5a5;color:#253b3b;container-type:inline-size;border:1px solid #3a4540;box-shadow:inset 0 0 9px #132519aa,0 0 5px #b8d88c22;z-index:2;user-select:text;-webkit-user-select:text}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:20;background:linear-gradient(128deg,#fff1,transparent 45%),repeating-linear-gradient(0deg,#192d2810 0px,#192d2810 1px,transparent 1px,transparent 3px)}.lcd{height:100%;display:flex;flex-direction:column;font-family:Pixel,monospace;font-size:3.3cqw;line-height:1.5;text-transform:uppercase;--dark:#253b3b;--accent:#446753;--base:#d5e5a5;--light:#e7efc7;image-rendering:pixelated}.lcd.night{--dark:#dae5c5;--accent:#bd9be0;--base:#293e47;--light:#36525c;background:var(--base);color:var(--dark)}.lcd-top{background:var(--dark);color:var(--base);padding:1.8cqw 3cqw;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;font-size:2.65cqw;letter-spacing:.1cqw}.battery{width:6cqw;height:2.8cqw;border:1px solid currentColor;display:inline-block;position:relative}.battery:after{content:'';position:absolute;inset:1px;background:currentColor}.lcd-heading{margin:0;padding:2cqw 3cqw 1.6cqw;font-size:3.45cqw;line-height:1.45;background:var(--light);border-bottom:1px solid var(--accent);flex-shrink:0}.lcd-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--base);overscroll-behavior:contain;padding:2cqw 3cqw;position:relative}.lcd-body:focus-visible{outline:1px dashed var(--accent);outline-offset:-2px}.lcd-title{font:inherit;font-size:3.9cqw;line-height:1.45;margin:1cqw 0 2cqw;white-space:pre-line}.description{font:inherit;margin:2cqw 0 3cqw;line-height:1.65;overflow-wrap:anywhere}.lcd a{color:var(--dark);text-decoration:underline;text-underline-offset:2px}.lcd a:hover{color:var(--base);background:var(--dark)}.pixel-art{display:block;width:100%;height:auto;max-height:26cqw;image-rendering:pixelated;margin:0 auto 2cqw;background:#99c69c}.art-link{display:block}.lcd-bottom{border-top:1px solid var(--accent);padding:1.5cqw 2.7cqw;display:flex;justify-content:space-between;gap:1cqw;font-size:2.6cqw;background:var(--light);flex-shrink:0}.lcd-bottom button{background:none;border:0;color:var(--dark);padding:0;font:inherit;text-transform:uppercase}.lcd-bottom button:hover{background:var(--dark);color:var(--base)}.lcd-subtitle{font-size:2.6cqw;line-height:1.7;margin:1cqw 0 3cqw}.catalog{padding:1cqw 0}.catalog button{display:flex;align-items:center;gap:2cqw;text-align:left;width:100%;font:inherit;color:var(--dark);background:transparent;border:0;padding:2cqw 2cqw;font-size:3cqw;line-height:1.4;text-transform:uppercase}.catalog button.active{background:var(--dark);color:var(--base)}.catalog button span:first-child{flex-shrink:0}.info p{font-size:3cqw;line-height:1.7;margin:0 0 3cqw}.info a{overflow-wrap:anywhere}.screen-off{height:100%;background:#424b40;box-shadow:inset 0 0 20px #0008}.off-glint{position:absolute;inset:0;background:linear-gradient(125deg,#d0e0a50d,transparent 70%)}
.physical{position:absolute;z-index:4;appearance:none;border:0;background:transparent;padding:0;color:transparent;cursor:pointer;touch-action:manipulation}.physical:hover{background:#e9ddff0d;box-shadow:inset 0 0 7px #eedfff40}.physical:active,.physical.pressed{background:#0004;box-shadow:inset 0 4px 8px #0009;transform:translateY(1px)}.physical:focus-visible{outline:2px solid #d6fa96;outline-offset:3px;background:#e9ddff15}.up{left:20.45%;top:59%;width:7.2%;height:4.75%;border-radius:15% 15% 0 0}.down{left:20.45%;top:67.65%;width:7.2%;height:4.7%;border-radius:0 0 15% 15%}.left{left:13.8%;top:63.65%;width:7%;height:4.5%;border-radius:15% 0 0 15%}.right{left:27%;top:63.65%;width:7%;height:4.5%;border-radius:0 15% 15% 0}.button-a{left:75.8%;top:60.6%;width:10.4%;height:7%;border-radius:50%}.button-b{left:59.7%;top:64%;width:10.5%;height:7%;border-radius:50%}.select{left:39%;top:80%;width:8.7%;height:2.35%;border-radius:50px}.start{left:51.9%;top:80%;width:8.7%;height:2.35%;border-radius:50px}.power{left:12.65%;top:19.55%;width:3.7%;height:2.5%;border-radius:50%}.power.on:after{content:'';position:absolute;left:24%;top:20%;width:52%;height:52%;border-radius:50%;background:#ff424b;box-shadow:0 0 7px 2px #ff253861}.power.off:after{content:'';position:absolute;left:21%;top:18%;width:55%;height:55%;border-radius:50%;background:#582f38}
.console-caption{font:9px/1.5 monospace;letter-spacing:2px;text-transform:uppercase;color:#766b84;margin:5px 0 0;display:flex;align-items:center;gap:9px}.console-caption:before{content:'';width:20px;height:1px;background:#655473}.guide{padding-left:26px;padding-bottom:25px;z-index:2}.guide h2{font:10px monospace;font-weight:400;letter-spacing:2px;color:#c2b0d5;margin:0 0 27px}.control-row{display:flex;align-items:center;gap:13px;margin:0 0 21px;color:#a7a0b0;font-size:11px;line-height:1.5}.control-row kbd{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:31px;height:31px;border-radius:50%;border:1px solid #655376;background:linear-gradient(150deg,#38303f,#201c28);color:#ddd0ed;font:12px monospace;box-shadow:0 2px 0 #09080e}.control-row kbd.wide{border-radius:5px;width:44px;height:22px;font-size:8px;margin-left:-6px;margin-right:-7px}.control-row small{display:block;font-size:10px;color:#686272}.guide-divider{height:1px;background:#ffffff10;margin:26px 0;max-width:150px}.utility{border:0;background:transparent;color:#a99cba;font:10px/1.5 monospace;padding:8px 0;text-align:left;display:block}.utility:hover{color:#d9efba}.utility.active{color:#d9efba}.bottom-bar{max-width:1560px;padding:18px 4.2vw;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:15px;color:#716a7b;font:9px/1.6 monospace;border-top:1px solid #ffffff0c;letter-spacing:1px}.bottom-bar a{text-decoration:none}.bottom-bar a:hover{color:#d3c0e7}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#26202f;border:1px solid #72518d;color:#f2eafa;border-radius:8px;padding:12px 20px;z-index:60;font:12px/1.5 monospace;pointer-events:none;max-width:90vw;text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.reader-dialog{border:1px solid #6d527f;border-radius:15px;background:#14131c;color:#e6ddef;padding:18px;width:min(700px,94vw);max-height:94svh;box-shadow:0 20px 100px #0009}.reader-dialog::backdrop{background:#09090edb;backdrop-filter:blur(8px)}.reader-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font:11px monospace;letter-spacing:1px}.reader-top button{background:#30283b;color:#fff;border:1px solid #665477;padding:7px 12px;border-radius:5px}.reader-screen{height:min(65svh,580px);position:relative;container-type:inline-size;background:#d5e5a5;color:#253b3b;overflow:hidden;border:6px solid #313537;border-radius:3px}.reader-screen .lcd{font-size:2.1cqw}.reader-screen .lcd-top{font-size:1.8cqw}.reader-screen .lcd-heading{font-size:2.4cqw}.reader-screen .lcd-title{font-size:2.6cqw}.reader-screen .lcd-bottom{font-size:1.8cqw}.reader-screen .pixel-art{max-height:21cqw}.reader-screen .catalog button{font-size:2.3cqw}.reader-screen .info p{font-size:2.1cqw}.reader-controls{display:flex;justify-content:center;gap:12px;margin-top:15px}.reader-controls button{background:#332841;color:#ede2f8;border:1px solid #725a8b;padding:10px 15px;border-radius:5px;font:11px monospace}.reader-controls button:hover{background:#524065}
@media(min-width:1500px){.console{max-width:590px}}@media(max-width:1050px){.stage{grid-template-columns:minmax(170px,1fr) minmax(320px,500px);padding-left:5vw;padding-right:5vw}.guide{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;padding:15px 0 0;flex-wrap:wrap}.guide h2,.guide-divider{display:none}.control-row{margin:0}.control-row small{display:none}.guide .utility{margin:0}.intro h1{font-size:45px}.intro p{font-size:13px}.console{max-width:500px}}@media(max-width:660px){.topbar{padding:18px 5vw}.wordmark{font-size:19px}.edition{font-size:8px;letter-spacing:1px}.stage{display:flex;flex-direction:column;padding:0 0 20px;gap:0;min-height:0}.intro{padding:22px 22px 4px;text-align:center;width:100%}.eyebrow{font-size:8px;letter-spacing:2px}.intro h1{font-size:29px;letter-spacing:-1px;margin:9px 0 7px;line-height:1.15}.intro h1 br{display:none}.intro h1 em:before{content:' '}.intro p{font-size:11px;line-height:1.6;max-width:320px;margin:0 auto}.cartridge-tag,.tiny-note{display:none}.console-column{width:100%;max-width:530px}.console{width:100%;max-width:none}.console-caption{font-size:8px;margin-top:0}.guide{gap:13px 18px;padding:24px 22px 0;max-width:420px}.control-row{font-size:10px}.control-row kbd{width:26px;height:26px}.control-row kbd.wide{width:37px;font-size:7px}.bottom-bar{padding:16px 22px;font-size:8px;letter-spacing:.3px;flex-wrap:wrap;justify-content:center;text-align:center}.reader-screen .lcd{font-size:3cqw}.reader-screen .lcd-top,.reader-screen .lcd-bottom{font-size:2.5cqw}.reader-screen .lcd-heading{font-size:3cqw}.reader-screen .lcd-title{font-size:3.5cqw}.reader-screen .info p,.reader-screen .catalog button{font-size:3cqw}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.theme-link{font:inherit;color:var(--dark);background:transparent;border:1px solid var(--accent);padding:1cqw;cursor:pointer}.theme-link:hover{background:var(--dark);color:var(--base)}

/* Phone portrait: the handheld is the entire interface. */
@media (max-width:660px) and (orientation:portrait){
  .topbar,.intro,.guide,.console-caption,.bottom-bar,.toast{display:none}
  .page{height:100dvh;min-height:100dvh;background:#111319}
  .stage{height:100%;min-height:0;max-width:none;padding:0;margin:0;gap:0;justify-content:center;align-items:center}
  .console-column{width:min(100vw,66.6667dvh);max-width:none;flex:none}
  .console{width:100%;max-width:none}
}