/* pages.css: the site pages (about/, manual/, 404.html) in mek's voice
   (mek's public/pages.css, cut to what these pages use). Monospace, titles
   uppercase and letter-spaced, content framed in a bordered glowing box like
   the title screen. Every URL on the pages is relative: the site lives under /fps/. */
:root{--bg:#07050f;--ink:#cfe9f5;--bright:#eaf9ff;--dim:rgba(207,233,245,.7);--faint:rgba(207,233,245,.42);
  --cyan:#22e3ff;--pink:#ff8df5;--line:rgba(34,227,255,.18);--line-strong:rgba(34,227,255,.4);--box:rgba(7,5,15,.7);}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--ink);font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Roboto Mono","Courier New",monospace;
  font-size:14px;line-height:1.75;max-width:680px;margin:0 auto;padding:22px 16px 64px;
  padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));}
header{display:flex;gap:18px;}
.back{font-size:13px;letter-spacing:.16em;color:var(--dim);text-decoration:none;white-space:nowrap;border-bottom:none;}
.back:hover,.back:focus-visible{color:var(--cyan);outline:none;}
main{margin-top:24px;background:var(--box);border:1px solid var(--line-strong);
  box-shadow:0 0 40px rgba(255,61,240,.1) inset,0 0 26px rgba(34,227,255,.12);padding:28px 28px 32px;}
@media (max-width:480px){main{padding:22px 18px 26px;}}
h1{margin:0 0 16px;font-weight:700;font-size:clamp(22px,5vw,28px);letter-spacing:.2em;text-transform:uppercase;color:var(--bright);text-shadow:0 0 14px rgba(34,227,255,.45);}
h2{margin:36px 0 10px;font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--bright);border-bottom:1px solid var(--line);padding-bottom:6px;}
h3{margin:22px 0 6px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);}
p{color:var(--dim);}
p + p{margin-top:12px;}
p strong,li strong{color:var(--pink);font-weight:700;}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);}
a:hover,a:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan);outline:none;}
ul,ol{margin:10px 0 0 1.4em;color:var(--dim);}
li + li{margin-top:6px;}
ul + p,ol + p{margin-top:14px;}
kbd{font-family:inherit;font-size:12px;color:var(--bright);border:1px solid var(--line-strong);padding:1px 6px;white-space:nowrap;}
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px;color:var(--dim);}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bright);font-weight:700;}
td:first-child{color:var(--bright);white-space:nowrap;}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
.btn{display:inline-block;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  background:none;border:1px solid var(--line-strong);padding:10px 18px;transition:border-color .15s ease,color .15s ease;}
.btn:hover,.btn:focus-visible{border-color:var(--pink);color:var(--pink);outline:none;}
.btn.ghost{color:var(--dim);}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:var(--bg);box-shadow:0 0 14px rgba(34,227,255,.3);}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--pink);border-color:var(--pink);color:var(--bg);}
.fine{margin-top:44px;border-top:1px solid var(--line);padding-top:16px;font-size:12px;line-height:1.7;color:var(--faint);}
/* the keycard chips and the palette swatches on the manual page */
.sw{display:inline-block;width:10px;height:10px;vertical-align:-1px;margin-right:6px;border:1px solid currentColor;}
.cy{color:#22e3ff;}.mg{color:#ff3df0;}.br{color:#F0CE7A;}.or{color:#ff8a2a;}.lm{color:#7dff5a;}.vi{color:#8a6bff;}.pk{color:#ff8df5;}