/* NullMoth Systems — a 1998 homepage on purpose: black, dark purple, Times and Courier, bevels, a marquee.
   ⛔ No external fonts: the CSP has no font-src and the privacy page promises no third-party fonts, so every face
   here is one that ships with Windows and macOS (Times New Roman, Courier New, Verdana), with free Linux stand-ins.
   ⭐ Cyan is borrowed from the circuit traces on the logbook moth (assets/moth-logbook.jpg) and means "it worked". */
:root {
  --bg: #000;
  --panel: #0b0613;
  --panel-2: #150a24;
  --line: #3b1f5f;
  --hi: #8b5cc8;            /* bevel light edge */
  --lo: #13081f;            /* bevel dark edge */
  --text: #e6ddf3;
  --muted: #a898c2;
  --purple: #b98aff;
  --purple-2: #7c3fd0;
  --btn: #4b1f86;
  --link: #c9a3ff;
  --visited: #e59bff;       /* the 90s rule: visited links go purple */
  --cyan: #58e6ea;
  --err: #ff7092;
  --paper-a: #1d0f31;       /* 1403 printout, purple-bar instead of green-bar */
  --paper-b: #120a1f;
  --serif: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --mono: "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS", monospace;
  --sans: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 18px/1.45 var(--serif);
  /* a tiled starfield, the way every homepage had one; two tile sizes so the repeat doesn't show */
  background-color: var(--bg);
  background-image:
    radial-gradient(1px 1px at 23px 41px, #cdb6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 157px 12px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 91px 133px, #8e6ad0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 201px 187px, #d9c8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 61px 211px, #6f4bb0 50%, transparent 51%),
    radial-gradient(1px 1px at 131px 71px, #b89cff 50%, transparent 51%),
    radial-gradient(1px 1px at 37px 97px, #fff 50%, transparent 51%);
  background-size: 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 173px 173px;
}
/* CRT scanlines over everything; pointer-events off so it never eats a click */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 3px);
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: #fff; background: var(--purple-2); }
code { font-family: var(--mono); font-size: 0.9em; color: var(--purple); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }

/* the 640x480 column, solid black over the starfield — ⛔ without it a star lands between two letters and reads
   as an accent ("Probė" in the first render) */
.top, main, .foot { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 16px; background: var(--bg); }

/* ---------- header ---------- */
.top { padding-top: 1.25rem; }
.brand { display: flex; align-items: center; gap: 0.9rem; color: var(--text); text-decoration: none; }
.brand:visited { color: var(--text); }
.brand:hover { background: none; color: var(--text); }
.mark {
  width: 64px; height: 64px; flex: none; display: block;
  border: 3px ridge var(--hi);
}
.word { display: grid; line-height: 1; }
.word b {
  font: bold 2rem/1 var(--serif);
  letter-spacing: 0.14em;
  color: var(--purple);
  text-shadow: 0 0 6px rgba(185, 138, 255, 0.7), 2px 2px 0 #2a0f52;
}
.word i { font: normal 0.8rem/1.2 var(--mono); letter-spacing: 0.42em; color: var(--muted); margin-top: 0.35rem; }

/* marquee: a CSS scroll, because <marquee> is gone from the spec; it holds still for reduced motion */
.ticker {
  margin-top: 1rem; overflow: hidden; white-space: nowrap;
  border: 2px inset var(--hi); background: var(--panel);
  font: 0.85rem/1.9 var(--mono); color: var(--cyan);
}
.ticker span { display: inline-block; padding-left: 100%; animation: scroll 26s linear -9s infinite; }
@keyframes scroll { to { transform: translateX(-100%); } }

hr.groove { border: 0; border-top: 2px groove var(--hi); margin: 1.6rem 0; }

/* ---------- main ---------- */
main { padding-top: 1.6rem; padding-bottom: 2.5rem; }
h1 {
  font: bold clamp(1.9rem, 6.4vw, 2.5rem)/1.1 var(--serif);
  margin: 0 0 0.8rem; color: #fff;
  text-shadow: 0 0 10px rgba(124, 63, 208, 0.9);
}
h1::after { content: "_"; color: var(--purple); animation: blink 1.1s step-start infinite; }
@keyframes blink { 50% { visibility: hidden; } }
h2 { font: bold 1.3rem/1.2 var(--serif); margin: 0 0 0.6rem; color: var(--purple); }
h3 { font: bold 0.8rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.4rem; }
.lede { margin: 0 0 1.5rem; }
.lede strong { color: var(--purple); }

/* Fig. 1 */
.fig { margin: 0 auto 1.6rem; max-width: 360px; text-align: center; }
.fig img { display: block; width: 100%; height: auto; border: 4px ridge var(--hi); background: #000; }
.fig figcaption { font: 0.78rem/1.45 var(--mono); color: var(--muted); margin-top: 0.5rem; }

/* raised panel + fieldset boxes */
.panel { background: var(--panel); border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); padding: 1rem; }
fieldset { margin: 0 0 1rem; padding: 0.75rem 0.9rem 0.9rem; border: 2px groove var(--hi); }
legend { font: bold 0.8rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); padding: 0 0.4rem; }

/* 1402 card reader */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 8.5rem; padding: 1rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); background: var(--panel-2);
  /* the slot: a faint punched-card grid */
  background-image:
    linear-gradient(90deg, rgba(139, 92, 200, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(139, 92, 200, 0.07) 1px, transparent 1px);
  background-size: 12px 18px;
}
.drop:hover, .drop.over { border-color: var(--purple); }
.drop.over { background-color: #24103f; }
.vh:focus-visible + .drop { outline: 2px solid var(--cyan); outline-offset: 3px; }
.drop-title { font: bold 1.1rem/1.3 var(--serif); color: #fff; }
.drop-sub { font: 0.8rem/1.4 var(--mono); color: var(--muted); }
.drop-sub u { color: var(--link); }

.files { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.files:empty { display: none; }
.file {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.2rem 0.7rem;
  padding: 0.45rem 0.6rem; border: 2px inset var(--hi); background: #000;
  font-family: var(--mono);
}
.file .name { font-size: 0.82rem; overflow-wrap: anywhere; }
.file .size { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.file .x {
  font: bold 0.9rem/1 var(--sans); color: var(--text); background: var(--panel-2); cursor: pointer;
  border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); padding: 0.1rem 0.4rem;
}
.file .x:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.file .state { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); }
.file .state.ok { color: var(--cyan); }
.file .state.err { color: var(--err); }
.file progress { grid-column: 1 / -1; width: 100%; height: 10px; appearance: none; border: 1px inset var(--hi); background: #000; }
.file progress::-webkit-progress-bar { background: #000; }
.file progress::-webkit-progress-value { background: repeating-linear-gradient(90deg, var(--purple) 0 8px, #000 8px 10px); }
.file progress::-moz-progress-bar { background: repeating-linear-gradient(90deg, var(--purple) 0 8px, #000 8px 10px); }

.field { display: grid; gap: 0.3rem; }
.field + .field { margin-top: 0.8rem; }
.field label { font: bold 0.95rem/1.3 var(--serif); }
.opt { font: normal 0.72rem/1 var(--mono); color: var(--muted); margin-left: 0.3rem; }
textarea, input[type="text"] {
  width: 100%; font: 0.9rem/1.4 var(--mono); color: var(--text); background: #000;
  border: 2px inset var(--hi); border-radius: 0; padding: 0.5rem 0.6rem; resize: vertical;
}
textarea:focus, input[type="text"]:focus { outline: 1px dotted var(--cyan); outline-offset: 2px; }
::placeholder { color: #6c5f82; }

.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; cursor: pointer; }
.consent input { margin-top: 0.3rem; width: 1rem; height: 1rem; accent-color: var(--purple-2); flex: none; }

.msg { margin: 0.9rem 0 0; color: var(--err); font: bold 0.85rem/1.4 var(--mono); }
.msg::before { content: "ERROR: "; }
button { font: inherit; }
#go, .ghost {
  margin-top: 1rem; width: 100%; padding: 0.65rem 1rem; cursor: pointer; border-radius: 0;
  font: bold 1rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; background: var(--btn);
  border: 3px solid; border-color: #a77ae6 #230c45 #230c45 #a77ae6;
}
#go:hover, .ghost:hover { background: #5c28a3; }
#go:active, .ghost:active { border-color: #230c45 #a77ae6 #a77ae6 #230c45; }
#go:disabled { opacity: 0.6; cursor: progress; }
#go:focus-visible, .ghost:focus-visible { outline: 1px dotted #fff; outline-offset: -7px; }
.ghost { background: var(--panel-2); }

/* 1403 printer: receipts on purple-bar continuous form with tractor holes down both edges */
.done h2 { color: var(--cyan); }
.receipts {
  list-style: none; margin: 1rem 0 0; padding: 0.6rem 28px;
  font-family: var(--mono);
  background:
    radial-gradient(circle at 11px 50%, #000 4px, transparent 4.5px) left top / 22px 24px repeat-y,
    radial-gradient(circle at 11px 50%, #000 4px, transparent 4.5px) right top / 22px 24px repeat-y,
    repeating-linear-gradient(to bottom, var(--paper-a) 0 2.9rem, var(--paper-b) 2.9rem 5.8rem);
  border-left: 1px dashed var(--line); border-right: 1px dashed var(--line);
}
.receipts::before { content: "1403 PRINTER  ·  JOB OUTPUT"; display: block; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 0.4rem; }
.receipt { padding: 0.5rem 0; border-bottom: 1px dashed var(--line); }
.receipt:last-child { border-bottom: 0; }
.receipt .rid { font-size: 1.1rem; font-weight: bold; letter-spacing: 0.06em; color: var(--cyan); }
.receipt .rname { color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
.receipt dl { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.8rem; margin: 0.4rem 0 0; font-size: 0.82rem; }
.receipt dt { color: var(--muted); text-transform: uppercase; }
.receipt dt::after { content: ":"; }
.receipt dd { margin: 0; overflow-wrap: anywhere; }

/* under construction — honest: the 1401 installer page really is still being built */
.construct {
  margin-top: 2rem; padding: 0.7rem 0.9rem; text-align: center; font: 0.85rem/1.5 var(--mono);
  border: 3px solid transparent;
  border-image: repeating-linear-gradient(45deg, var(--purple-2) 0 10px, #000 10px 20px) 3;
}
.construct b { color: var(--purple); letter-spacing: 0.15em; }

/* nav: a row of raised Win95 buttons under the marquee; the page you are on is pressed in */
.nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.nav a {
  display: inline-block; padding: 0.35rem 0.7rem; font: bold 0.78rem/1 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: #fff; background: var(--panel-2);
  border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi);
}
.nav a:visited { color: #fff; }
.nav a:hover { background: var(--btn); }
.nav a[aria-current="page"] { background: #000; color: var(--cyan); border-color: var(--lo) var(--hi) var(--hi) var(--lo); }

/* the three-step strip on the front page */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.flow li { padding: 0.5rem 0.6rem; border: 2px outset var(--hi); background: var(--panel); font: 0.85rem/1.35 var(--sans); }
.flow b { display: block; font: bold 0.72rem/1 var(--mono); letter-spacing: 0.15em; color: var(--cyan); margin-bottom: 0.25rem; }

/* download center */
.dl {
  display: block; margin: 0.4rem 0 0.5rem; padding: 0.8rem 1rem; text-align: center; text-decoration: none;
  color: #fff; background: var(--btn); border: 3px solid; border-color: #a77ae6 #230c45 #230c45 #a77ae6;
}
.dl:visited { color: #fff; }
.dl:hover { background: #5c28a3; color: #fff; }
.dl:active { border-color: #230c45 #a77ae6 #a77ae6 #230c45; }
.dl:focus-visible { outline: 1px dotted #fff; outline-offset: -7px; }
.dl b { display: block; font: bold 1rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.dl span { display: block; margin-top: 0.3rem; font: 0.78rem/1.3 var(--mono); color: #d9c6f7; }
.dl.alt { background: var(--panel-2); }
/* ⛔ main p.sum, not .sum: .about p / .steps p outrank a bare class and blew the image hash up to body size */
main p.sum { margin: 0 0 0.3rem; font: 0.72rem/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.sum code { color: var(--cyan); font-size: 1em; }
.need { margin: 0; padding-left: 1.1rem; }
.need li::marker { color: var(--purple); }

/* operator's manual: numbered steps with a bevelled number plate */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.2rem 3rem; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center; font: bold 1.1rem/1 var(--mono); color: var(--cyan); background: #000;
  border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.steps h3 { margin: 0.35rem 0 0.4rem; font: bold 1.1rem/1.2 var(--serif); text-transform: none; letter-spacing: 0; color: var(--purple); }
.steps p, .steps ul { margin: 0.3rem 0; font-size: 0.95rem; }
.steps ul { padding-left: 1.1rem; }
.steps li li::marker { color: var(--purple); }
.note { margin: 0.5rem 0; padding: 0.45rem 0.7rem; border-left: 3px solid var(--cyan); background: var(--panel-2); font-size: 0.9rem; }
.note b { color: var(--cyan); }

/* boot-menu keys: a 1996 <table border=1> */
.keys { width: 100%; margin: 0.5rem 0; border-collapse: separate; border-spacing: 2px; border: 2px outset var(--hi); font: 0.85rem/1.3 var(--mono); }
.keys th, .keys td { padding: 0.25rem 0.45rem; border: 1px inset var(--hi); text-align: left; }
.keys th { color: var(--muted); font-weight: normal; }
.keys td { color: var(--cyan); font-weight: bold; }

.about { margin-top: 2rem; }
.cols { display: grid; grid-template-columns: 1fr 1fr; border: 2px outset var(--hi); }
.cols > div { padding: 0.8rem 0.9rem; border: 1px inset var(--hi); }
.about ul { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; }
.about li { margin: 0.25rem 0; }
.about li::marker { color: var(--purple); }
.about p { font-size: 0.95rem; margin-top: 1rem; }

.prose h2 { margin-top: 1.8rem; }
.prose p, .prose li { color: var(--text); }
.prose strong { color: var(--purple); }
.prose li::marker { color: var(--purple); }

/* ---------- footer ---------- */
.foot { padding-top: 1rem; padding-bottom: 2rem; text-align: center; font: 0.8rem/1.6 var(--sans); color: var(--muted); }
.foot p { margin: 0.3rem 0; }
/* 88x31 buttons */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.badges li {
  width: 88px; height: 31px; display: grid; place-items: center; text-align: center;
  font: bold 9px/1.05 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
  border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  background: linear-gradient(#2a1150, #0d0518); color: #fff;
}
.badges li:nth-child(2) { background: linear-gradient(#0f3a3c, #041213); color: var(--cyan); }
.badges li:nth-child(3) { background: #000; color: var(--purple); }
.badges li:nth-child(4) { background: linear-gradient(#3b1a6b, #1a0a33); color: #e7d8ff; }
.counter { font-family: var(--mono); }
.counter b { display: inline-block; padding: 0 0.3rem; margin: 0 0.3rem; background: #000; color: var(--cyan); border: 2px inset var(--hi); letter-spacing: 0.25em; font-weight: normal; }
.present { font: italic 0.85rem/1.4 var(--serif); color: #6c5f82; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .word b { font-size: 1.55rem; letter-spacing: 0.1em; }
  .word i { letter-spacing: 0.3em; }
  .mark { width: 52px; height: 52px; }
  .cols { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .steps > li { padding-left: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker span { animation: none; padding-left: 0.8rem; }
  h1::after { animation: none; }
}