/* Self-hosted type (static/fonts/VERSION.md). Body and prose are Archivo, code
   JetBrains Mono; headings, nav, buttons and labels are Silkscreen, a pixel
   face. */
@font-face{font-family:Silkscreen;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/silkscreen-400.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500.woff2) format("woff2")}

:root{
  --deep:#122036; --navy:#29405f; --mid:#4a78b8; --sky:#6aa6ff;
  --paper:#f4f6f9; --white:#ffffff; --ink:#17202d; --slate:#566174; --rule:#dde3eb;
  --link:#2b5da8;
  --pixel:Silkscreen,Archivo,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 100}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
/* --link on the light sections (sky is ~2.3:1 on paper); sky on the deep
   backgrounds where it has the contrast. */
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}
.nav a:focus-visible,.nav button:focus-visible,.hero a:focus-visible,.hero button:focus-visible,
.play a:focus-visible,.play button:focus-visible,footer a:focus-visible{outline-color:var(--sky)}
img{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
h1,h2,h3{margin:0}
/* The pixel face: one weight, no faux styles, no smoothing, and sizes in
   multiples of 8 px (each design pixel a whole device pixel or more) so the
   edges stay sharp. Every size rule below repeats font-family for that. */
h1,h2,h3,.brand,.nav a.l,.btn,.step .n,dt,.oscard .soon,.seg button,.docs-side .label,.docs-toc .label,footer nav a{
  font-family:var(--pixel);font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;
  font-variation-settings:normal;-webkit-font-smoothing:none;overflow-wrap:break-word}
h1{font-family:var(--pixel);font-size:32px;line-height:40px}
h2{font-family:var(--pixel);font-size:32px;line-height:40px;text-shadow:4px 4px #c5d0de}
h3{font-family:var(--pixel);font-size:16px;line-height:24px}
p{margin:0}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:6px;font-family:var(--pixel);font-size:16px;white-space:nowrap;border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--sky);color:var(--deep)}
.btn-primary:hover{background:#8bbaff}
.btn-ghost{border-color:#ffffff40;color:#fff}
.btn-ghost:hover{background:#ffffff12}

/* nav */
header{background:var(--deep);color:#c9d4e3}
.nav{display:flex;align-items:center;height:68px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--pixel);font-size:24px;line-height:32px;margin-right:auto}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px}
.nav a.l{color:#c9d4e3;font-family:var(--pixel);font-size:16px}
.nav a.l:hover{color:#fff;text-decoration:none}
.nav .btn{height:36px;padding:0 14px;font-size:16px}

/* hero */
.hero{background:var(--deep);color:#fff;padding:56px 0 88px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
/* The ROM's drop shadow: one design pixel (size/8) right and down. */
.hero h1{font-family:var(--pixel);font-size:48px;line-height:56px;text-shadow:6px 6px var(--navy)}
.hero .lede{margin-top:24px;font-size:19px;line-height:1.55;color:#c9d4e3;max-width:34em}
.hero .ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.build{margin-top:28px;font-size:14px;color:#8fa1ba;display:flex;align-items:center;gap:8px}
.build .dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px #4ade8030}
.build code{font:500 13px "JetBrains Mono",monospace;color:#c9d4e3}

.screen{position:relative}
.screen .lcd{background:#000;border-radius:10px;padding:14px;box-shadow:0 0 0 1px #ffffff1a,0 30px 80px #0008}
.screen canvas{display:block;width:100%;aspect-ratio:160/144;image-rendering:pixelated;border-radius:2px}
.screen .bar{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:14px;color:#8fa1ba}
.build a{color:#c9d4e3;text-decoration:underline}
.screen .bar{flex-wrap:wrap;gap:10px}
.seg{display:inline-flex;flex-wrap:wrap;background:#ffffff10;border-radius:6px;padding:3px}
.seg button{all:unset;cursor:pointer;padding:5px 12px;border-radius:4px;font-family:var(--pixel);font-size:16px;font-weight:400;font-synthesis:none;-webkit-font-smoothing:none;color:#c9d4e3}
.seg button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.seg button[aria-pressed=true]{background:var(--sky);color:var(--deep)}

/* sections */
section{padding:96px 0}
/* Blocks inside a document are not page bands. */
.doc section{padding:0;margin-top:40px}
.intro{max-width:40em}
.intro p{margin-top:16px;color:var(--slate);font-size:18px}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.step .n{font-family:var(--pixel);font-size:16px;color:var(--mid)}
.step h3{margin:8px 0 8px}
.step p{color:var(--slate);font-size:16px}
.editor-shot{margin-top:56px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--rule),0 24px 60px #12203622}

/* specs */
.specs{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.specs .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:40px}
dt,dd{padding:16px 0;border-top:1px solid var(--rule);margin:0}
dt{font-family:var(--pixel);font-size:16px;line-height:24px;white-space:nowrap}
dd{color:var(--slate)}

/* examples */
.ex{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.ex figure{margin:0}
.ex .thumb{background:#000;border-radius:8px;padding:10px}
.ex img{width:100%;aspect-ratio:10/9;image-rendering:pixelated;object-fit:cover;border-radius:2px}
.ex figcaption{margin-top:14px}
.ex figcaption h3{font-family:var(--pixel);font-size:16px}
.ex figcaption p{font-size:15px;color:var(--slate);margin-top:4px}
.ex .acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:15px;font-weight:600}
.ex .acts .only{color:var(--slate);font-weight:400}

/* download */
.dlsec{background:var(--paper);border-top:1px solid var(--rule)}
.os{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.oscard{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:28px}
.oscard.me{border:2px solid var(--mid);padding:27px}
.oscard p{color:var(--slate);font-size:15px;margin:6px 0 22px}
.oscard .sz{margin-left:12px;font-size:14px;color:var(--slate)}
.oscard .soon{margin:6px 0 0;font-family:var(--pixel);font-size:16px;color:var(--navy)}
.btn-dark{background:var(--deep);color:#fff}.btn-dark:hover{background:var(--navy)}
.older{margin-top:28px;color:var(--slate);font-size:15px}.older a{margin-left:16px}
/* learn */
.learn{background:var(--white);border-top:1px solid var(--rule)}
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:2px solid var(--ink)}
.docs a{display:block;padding:20px 24px 24px 0;color:var(--ink)}
.docs a:hover{text-decoration:none}
.docs a:hover h3{color:var(--link)}
.docs p{color:var(--slate);font-size:15px;margin-top:6px}
.start{margin-top:56px;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
pre{margin:0;background:var(--deep);color:#dbe5f3;border-radius:8px;padding:22px 24px;font:400 14px/1.7 "JetBrains Mono",monospace;overflow:auto}
pre .c{color:#7d90ab}

footer{background:var(--deep);color:#8fa1ba;padding:48px 0;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer a{color:#c9d4e3}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer nav a{font-family:var(--pixel);font-size:16px}

@media (max-width:900px){
  .wrap{padding:0 20px}
  .hero h1{font-size:40px;line-height:48px;text-shadow:5px 5px var(--navy)}
  .hero .wrap,.specs .wrap,.start{grid-template-columns:1fr;gap:40px}
  .pipe{grid-template-columns:1fr;gap:28px}
  .ex,.docs{grid-template-columns:1fr 1fr}
  .os{grid-template-columns:1fr}
  /* Docs stays down to 360 px; the rest of the nav links go. */
  .nav a.l:not([href$="docs/"]){display:none}
  section{padding:64px 0}
  .doc section{padding:0}
}
@media (max-width:520px){
  .ex,.docs{grid-template-columns:1fr}
  .hero h1{font-family:var(--pixel);font-size:32px;line-height:40px;text-shadow:4px 4px var(--navy)}
  h2{font-family:var(--pixel);font-size:24px;line-height:32px;text-shadow:3px 3px #c5d0de}
}

/* Beyond the mockup: the nav wraps rather than overflowing a 360 px phone,
   and motion stops for visitors who ask for that. */
@media (max-width:520px){
  .wrap{padding:0 16px}
  .nav{flex-wrap:wrap;height:auto;min-height:68px;gap:8px 8px;padding-top:10px;padding-bottom:10px}
  /* 16 px pixel type is wide: trim the brand and the nav button to fit one row at 360 px. */
  .brand{font-size:16px;line-height:24px;gap:4px}
  .brand img{width:20px;height:20px}
  .nav .btn{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* docs */
.docs-layout{display:grid;grid-template-columns:220px minmax(0,44em) 200px;gap:48px;padding-top:48px;padding-bottom:96px;justify-content:center}
.docs-side .label,.docs-toc .label{display:block;font-family:var(--pixel);font-size:16px;line-height:24px;text-shadow:none;color:var(--slate);margin-bottom:12px}
.docs-side a,.docs-toc a{display:block;padding:6px 0;color:var(--ink);font-size:15px;line-height:1.35}
.docs-side a[aria-current="page"]{color:var(--link);font-weight:650;border-left:3px solid var(--mid);padding-left:12px;margin-left:-15px}
.docs-toc{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto}
.docs-toc a{color:var(--slate)}
.doc{min-width:0;font-size:17px;line-height:1.7}
.doc h1,.docs-home h1{font-family:var(--pixel);font-size:40px;line-height:48px;margin-bottom:20px}
.doc h2{font-family:var(--pixel);font-size:24px;line-height:32px;text-shadow:none;margin:48px 0 14px;scroll-margin-top:24px}
.doc h3{font-family:var(--pixel);font-size:16px;margin:32px 0 10px;scroll-margin-top:24px}
.doc p,.doc ul,.doc ol,.doc table,.doc pre{margin:0 0 18px}
.doc ul,.doc ol{padding-left:1.4em}
.doc code{font:400 .88em "JetBrains Mono",monospace;background:#eef2f7;padding:.12em .35em;border-radius:4px}
.doc pre code{background:none;padding:0;font-size:inherit}
.doc table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%}
.doc th,.doc td{border:1px solid var(--rule);padding:8px 12px;text-align:left}
.doc th{background:var(--white)}
.doc img{max-width:100%;height:auto}
@media (max-width:1000px){
  .docs-layout{grid-template-columns:220px minmax(0,44em);gap:40px}
  .docs-toc{display:none}
}
@media (max-width:760px){
  .docs-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:32px}
  .docs-side a[aria-current="page"]{margin-left:0}
}
@media (max-width:520px){
  .doc h1,.docs-home h1{font-family:var(--pixel);font-size:32px;line-height:40px}
}

/* download and licence pages: the OS cards on paper, then prose in .doc */
.dlpage{padding:56px 0 48px}
.dlpage h1{font-family:var(--pixel);font-size:40px;line-height:48px;text-shadow:none;margin-bottom:12px}
.dlpage .lede{color:var(--slate);font-size:18px;max-width:40em}
.dlpage .build{color:var(--slate)}.dlpage .build a{color:var(--link)}
.dlpage .build code{color:var(--ink)}
/* .page keeps .wrap's width and edge; only the prose column is narrowed, left-aligned */
.page{padding-top:0;padding-bottom:72px}
.page .doc{max-width:820px}
.page .doc>:first-child,.page .doc>section:first-child>:first-child{margin-top:0}
.doc .sz{color:var(--slate);font-size:14px;margin-left:8px}
.doc pre{overflow-x:auto;font:400 13px/1.5 "JetBrains Mono",monospace;background:var(--deep);color:#dbe5f3;padding:16px;border-radius:6px;white-space:pre-wrap}  /* dark panel: the light text was inherited onto pale grey */
@media (max-width:520px){
  .dlpage h1{font-family:var(--pixel);font-size:32px;line-height:40px}
}

/* play page: the hero's dark band around one big screen */
.playband{padding:40px 0 72px}
.hero .play{display:block;max-width:720px}
.play h1{font-size:40px;line-height:48px;text-shadow:5px 5px var(--navy)}
.play .stage{margin-top:28px}
.play .lcd{background:#000;border-radius:10px;padding:14px;box-shadow:0 0 0 1px #ffffff1a,0 30px 80px #0008;max-width:640px}
.play canvas{display:block;width:100%;aspect-ratio:160/144;image-rendering:pixelated;border-radius:2px;outline-offset:4px}
.play canvas:focus-visible{outline:2px solid var(--sky)}
.keys{margin-top:16px;font-family:var(--pixel);font-size:16px;line-height:24px;color:#c9d4e3}
.play .acts{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.others{margin-top:24px;font-size:15px;color:#8fa1ba}
.others a{color:#c9d4e3;text-decoration:underline}
.fail{max-width:640px;padding:28px;border:1px solid #ffffff30;border-radius:10px;background:#ffffff0a}
.fail p{margin-bottom:20px;font-size:18px}
.pad{display:none;margin-top:20px;user-select:none;-webkit-user-select:none;touch-action:none;
  grid-template-columns:auto 1fr auto;align-items:center;gap:16px;max-width:640px}
.pad button{font-family:var(--pixel);font-size:16px;font-weight:400;font-synthesis:none;-webkit-font-smoothing:none;
  touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  background:var(--navy);color:#fff;border:1px solid #ffffff30;border-radius:8px;min-width:44px;min-height:44px;padding:0 10px}
.pad button:active{background:var(--mid)}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}
.dpad button{min-width:0;padding:0}
.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}
.menu{display:flex;gap:10px;justify-content:center;align-self:end}
.ab{display:flex;gap:12px;transform:rotate(-12deg)}
.ab button{width:60px;height:60px;border-radius:50%;padding:0}
@media (pointer:coarse){.pad{display:grid}.keys{display:none}}
@media (max-width:520px){
  .play h1{font-size:32px;line-height:40px;text-shadow:4px 4px var(--navy)}
  .pad{grid-template-columns:auto auto;grid-template-areas:"d ab" "m m"}
  .pad .dpad{grid-area:d}.pad .ab{grid-area:ab;justify-self:end}.pad .menu{grid-area:m}
}

/* Both hero buttons fit one row of the hero column at desktop widths. */
.hero .ctas .btn{padding:0 16px}
.screen .bar a{color:#c9d4e3;text-decoration:underline}
[hidden]{display:none!important}
button.btn{cursor:pointer;background:transparent;font-family:var(--pixel)}
button.btn-ghost{color:#fff}