/* ATO Doors :: www.atodoors.com :: shared site styles.
   ATDT's site.css, unchanged, so the family stays one family. The ATO-only
   rules are at the bottom under "ato additions". If ATDT's stylesheet changes,
   copy it over and keep that block. */

/* Archivo, self-hosted. One variable file covers every weight the site uses,
   so it is a single 35 KB request instead of four, and no third party sees
   a visitor's address. SIL Open Font License; the text ships beside it at
   assets/fonts/archivo-OFL.txt. */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-var.woff2") format("woff2-variations"),
      url("fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --void:#07070c;
  --panel:#0e0e17;
  --edge:#22222f;
  --hair:#14141f;
  --gray:#9a9aa8;
  --dim:#6a6a7a;
  --white:#f1f1f6;
  --cyan:#3fdfe8;
  --magenta:#e558c6;
  --amber:#ffc94a;
  --red:#ff5a5a;
  --green:#4ade6a;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--gray);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{color:var(--white);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:0}
p{margin:0}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
hr.rule{border:0;border-top:1px solid var(--edge);margin:0}

/* ── status bar ─────────────────────────────── */
.status{
  position:sticky;top:0;z-index:50;background:rgba(7,7,12,.93);
  border-bottom:1px solid var(--edge);backdrop-filter:blur(6px);
}
.status .wrap{display:flex;align-items:center;gap:18px;height:42px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.status .mark{color:var(--white);font-weight:700;letter-spacing:.3em}
.status .mark:hover{text-decoration:none;color:var(--cyan)}
.status .sp{flex:1}
.status .led{color:var(--amber)}
.status .led::before{content:"\25CF";color:var(--green);margin-right:7px;
  animation:atdt-pulse 2.6s steps(1,end) infinite}
.status nav a{color:var(--dim);margin-left:20px}
.status nav a:hover{color:var(--white);text-decoration:none}
.status nav a[aria-current]{color:var(--white)}
@keyframes atdt-pulse{0%,60%{opacity:1}61%,100%{opacity:.25}}
/* Eight nav items need ~790px; below about 900 the secondary ones
   fold away rather than wrap the bar onto a second line, and on a
   phone the four that remain close ranks so they still fit one row. */
@media(max-width:900px){.status .led,.status .tuck{display:none}}
@media(max-width:480px){.status .wrap{gap:12px}.status nav a{margin-left:12px}}
@media(max-width:400px){.status .tuck-sm{display:none}}

/* ── shared type devices ────────────────────── */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--magenta);margin-bottom:14px}
.lede{max-width:62ch}
code{font-family:var(--mono);font-size:.88em;color:var(--amber);word-break:break-word}
kbd{font-family:var(--mono);font-size:.85em;border:1px solid var(--edge);
  background:var(--panel);color:var(--white);padding:1px 6px;white-space:nowrap}

/* preformatted spec / code block */
.spec{font-family:var(--mono);font-size:13.5px;line-height:1.95;color:var(--gray);
  background:var(--panel);border:1px solid var(--edge);padding:22px 24px;
  overflow-x:auto;white-space:pre;margin:0}
.spec b{color:var(--white);font-weight:400}
.spec .c{color:var(--dim)}
.spec .k{color:var(--cyan)}
.spec .s{color:var(--amber)}

/* buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.btn-row .btn{margin:0}
.btn{display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  background:var(--cyan);color:#000;padding:15px 30px;border:1px solid var(--cyan);font-weight:700}
.btn:hover{background:var(--amber);border-color:var(--amber);text-decoration:none}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--edge);font-weight:400}
.btn.ghost:hover{background:transparent;border-color:var(--cyan);color:var(--cyan)}

/* ── footer ─────────────────────────────────── */
footer{border-top:1px solid var(--edge);padding:48px 0 60px;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.fcols{display:flex;flex-wrap:wrap;gap:36px 56px;margin-bottom:34px}
.fcols div{min-width:130px}
.fcols strong{display:block;color:var(--white);font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;font-size:11px;margin-bottom:12px}
.fcols a{display:block;color:var(--dim);padding:3px 0}
.fcols a:hover{color:var(--cyan);text-decoration:none}
.sig{color:var(--dim)}
.sig span{color:var(--magenta)}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* the status LED doubles as a link to the live board */
.status a.led{color:var(--amber)}
.status a.led:hover{color:var(--white);text-decoration:none}

/* simple prose pages: license, changelog, 404 */
.page{padding-top:56px;padding-bottom:90px;max-width:74ch}
.page h1{font-size:clamp(28px,4.4vw,42px);margin-bottom:16px}
.page h2{font-size:19px;margin:50px 0 18px}
.page p{margin:0 0 22px}
.page ul{list-style:none;margin:0 0 20px;padding:0}
.page li{padding:9px 0 9px 24px;position:relative;line-height:1.6}
.page li::before{content:"\25B8";position:absolute;left:0;top:9px;color:var(--cyan);
  font-family:var(--mono);font-size:13px}
.release{border-top:1px solid var(--edge);padding:38px 0 8px}
.release .tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:10px}
.release h2{margin-top:0}
.center-404{min-height:64vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:60px 0}
.center-404 pre{font-family:var(--mono);color:var(--red);font-size:clamp(11px,3.4vw,20px);
  line-height:1.1;margin:0 0 28px;white-space:pre}

/* ── feature list ────────────────────────────────────────
   The lead block is the configurability story, given its own
   full-width slab because it is the thing that sells the board. */
.feat-lead{border:1px solid var(--edge);background:var(--panel);
  padding:38px 38px 40px;margin-bottom:1px}
.feat-lead h3{font-size:21px;margin:0 0 16px}
.feat-lead > p{max-width:64ch;margin:0 0 30px}
.feat-lead .cols{display:grid;gap:16px 52px}
@media(min-width:760px){.feat-lead .cols{grid-template-columns:1fr 1fr}}

.feat{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
@media(min-width:720px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.feat{grid-template-columns:repeat(3,1fr)}}
.feat .item{background:var(--void);padding:32px 30px 34px}
.feat .item h3{font-size:17px;margin:0 0 16px}
.feat .item .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--magenta);display:block;margin-bottom:14px}

ul.pts{list-style:none;margin:0;padding:0}
ul.pts li{padding:9px 0 9px 24px;position:relative;font-size:15px;line-height:1.62}
ul.pts li::before{content:"\25B8";position:absolute;left:0;top:9px;color:var(--cyan);
  font-family:var(--mono);font-size:12px}
ul.pts li b{color:var(--white);font-weight:500}
ul.pts.amber li::before{color:var(--amber)}

/* ── download ────────────────────────────────────────────
   Facts live in a mono panel so version, date and requirements
   read as a spec sheet rather than marketing copy. */
.grab{display:grid;gap:44px;align-items:start}
@media(min-width:900px){.grab{grid-template-columns:1.25fr 1fr;gap:56px}}
.facts{border:1px solid var(--edge);background:var(--panel);padding:0}
.facts .row{display:flex;gap:18px;padding:16px 24px;border-bottom:1px solid var(--edge);
  font-family:var(--mono);font-size:13.5px;line-height:1.5}
.facts .row:last-child{border-bottom:0}
.facts .row b{color:var(--dim);font-weight:400;width:10em;flex:none;letter-spacing:.06em}
.facts .row span{color:var(--white)}
.facts .row span.hi{color:var(--amber)}

/* ── door library ────────────────────────────────────────
   Each door is a two-column row: a left rail carrying the name,
   status and download, and a description beside it. A single wide
   column of short prose left a dead pocket of whitespace on the
   right; splitting it gives the width a job. Amber marks anything
   not downloadable yet, the same as elsewhere. */
.doors-list{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  max-width:920px}
.door{background:var(--void);padding:32px 34px 34px;display:grid;gap:14px 40px}
@media(min-width:760px){
  .door{grid-template-columns:215px minmax(0,1fr);align-items:start}
}
.door .rail{min-width:0}
.door h3{font-size:20px;margin:0 0 12px;line-height:1.2}
.door .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:3px 9px;border:1px solid var(--edge);color:var(--dim);
  display:inline-block}
.door .badge.soon{color:var(--amber);border-color:rgba(255,201,74,.45)}
.door .by{font-family:var(--mono);font-size:12.5px;color:var(--dim);
  letter-spacing:.06em;margin:14px 0 0}
.door .by span{color:var(--gray)}
.door .body{min-width:0}
.door p.desc{font-size:15.5px;line-height:1.68;margin:0}
.door p.live{font-size:14.5px;line-height:1.6;margin:16px 0 0;color:var(--amber)}
.door p.live b{color:var(--amber);font-weight:700}
.door .get{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  border:1px solid var(--edge);padding:11px 16px;color:var(--gray);
  background:var(--panel);display:inline-block;margin-top:22px;text-align:center}
.door .get:hover{color:#000;background:var(--cyan);border-color:var(--cyan);text-decoration:none}
.door .get.off{color:var(--dim);background:transparent}
.door .get.off:hover{color:var(--dim);background:transparent;border-color:var(--edge);cursor:default}

.panels{display:grid;gap:40px;margin-top:68px}
@media(min-width:860px){.panels{grid-template-columns:1fr 1fr;gap:52px}}
.panel{border:1px solid var(--edge);background:var(--panel);padding:32px 32px 34px}
.panel h3{font-size:17px;margin:0 0 16px}
.panel p{font-size:15px;line-height:1.65;margin:0 0 18px}
.panel p:last-child{margin-bottom:0}
.panel .mail{font-family:var(--mono);font-size:14px;color:var(--amber);word-break:break-all}

/* ── about ───────────────────────────────────────────────*/
.about{display:grid;gap:56px;align-items:start}
@media(min-width:900px){.about{grid-template-columns:1fr 320px;gap:72px}}
.about .prose p{font-size:17.5px;line-height:1.78;margin:0 0 30px}
.about .prose p:last-child{margin-bottom:0}
.about .prose .sign{font-family:var(--mono);font-size:14px;color:var(--cyan);
  letter-spacing:.08em;margin-top:38px}

/* small secondary link under a door's download button */
.door .more{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--dim);margin-top:14px}
.door .more:hover{color:var(--cyan);text-decoration:none}

/* ── door changelog page ─────────────────────────────────
   Narrower than the board changelog: a door's notes are read
   start to finish, not scanned for a version. */
.doc-head{padding:56px 0 0}
.doc-head h1{font-size:clamp(28px,4.4vw,42px);margin-bottom:14px}
.doc-head .tagline{font-family:var(--mono);font-size:13px;color:var(--dim);
  letter-spacing:.04em;margin-top:20px}
.notes{max-width:74ch;padding:0 0 90px}
.notes .band-note{border-top:1px solid var(--edge);padding:38px 0 4px}
.notes h2{font-size:20px;margin:0 0 16px}
.notes h3{font-size:15px;font-family:var(--mono);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);margin:30px 0 14px}
.notes p{margin:0 0 20px;line-height:1.68}
.notes ul{list-style:none;margin:0 0 22px;padding:0}
.notes li{padding:9px 0 9px 24px;position:relative;line-height:1.62}
.notes li::before{content:"\25B8";position:absolute;left:0;top:9px;color:var(--cyan);
  font-family:var(--mono);font-size:12px}
.notes li b{color:var(--white);font-weight:500}

/* ── roadmap ─────────────────────────────────────────────
   A trunk line running down the page with each release hung
   off it as a stop. Amber marks work in testing, dim marks
   work not started; nothing here carries a date on purpose. */
.now{border:1px solid var(--edge);background:var(--panel);padding:28px 32px 30px;
  max-width:900px;margin-bottom:64px}
.now h2{font-size:18px;margin:0 0 14px}
.now p{font-size:15.5px;line-height:1.65;margin:0 0 14px;max-width:66ch}
.now p:last-child{margin-bottom:0}

.road{position:relative;max-width:900px;padding-left:0}
@media(min-width:720px){
  .road{padding-left:132px}
  .road::before{content:"";position:absolute;left:47px;top:10px;bottom:60px;width:1px;
    background:linear-gradient(180deg,var(--cyan) 0%,var(--edge) 22%,var(--edge) 100%)}
}
.stop{position:relative;padding:0 0 52px}
.stop:last-child{padding-bottom:0}
.stop .ver{font-family:var(--mono);font-size:15px;letter-spacing:.1em;color:var(--white);
  display:block;margin-bottom:6px}
.stop .state{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);display:block}
@media(min-width:720px){
  .stop .marker{position:absolute;left:-132px;top:2px;width:96px;text-align:right}
  .stop .marker::after{content:"";position:absolute;right:-90px;top:7px;width:9px;height:9px;
    background:var(--void);border:1px solid var(--edge);border-radius:50%}
  .stop.testing .marker::after{border-color:var(--amber);background:var(--amber)}
  .stop .ver{margin-bottom:5px}
}
@media(max-width:719px){
  .stop .marker{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;
    padding-bottom:12px;border-bottom:1px solid var(--edge)}
  .stop .marker .ver{margin:0}
}
.stop.testing .state{color:var(--amber)}
.stop .feat-row{padding:22px 0 0;border-top:1px solid var(--hair)}
.stop .feat-row:first-of-type{border-top:0;padding-top:0}
.stop h3{font-size:19px;margin:0 0 10px}
.stop p{font-size:15.5px;line-height:1.68;margin:0 0 22px;max-width:64ch}
.stop .feat-row:last-child p{margin-bottom:0}

/* version-number anatomy */
.anat{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  max-width:900px;margin-top:22px}
@media(min-width:760px){.anat{grid-template-columns:repeat(3,1fr)}}
.anat .slot{background:var(--void);padding:24px 26px 26px}
.anat .slot .pat{font-family:var(--mono);font-size:20px;letter-spacing:.12em;color:var(--dim);
  display:block;margin-bottom:14px}
.anat .slot .pat b{color:var(--cyan);font-weight:400}
.anat .slot p{font-size:15px;line-height:1.6;margin:0}

/* list of supported legacy systems on the roadmap */
.sysgrid{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  margin:22px 0 20px;max-width:640px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sysgrid span{background:var(--void);padding:11px 14px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.04em;color:var(--gray)}

/* compact reference table inside a door's release notes */
.notes table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.notes table th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:400;
  padding:0 16px 9px 0;border-bottom:1px solid var(--edge)}
.notes table td{padding:11px 16px 11px 0;border-bottom:1px solid var(--hair);
  vertical-align:top;line-height:1.55}
.notes table td:first-child{color:var(--white);white-space:nowrap;padding-right:24px}
.notes table tr:last-child td{border-bottom:1px solid var(--edge)}

/* ── newsletter signup ───────────────────────────────────
   Buttondown's embed form, restyled with the site's own
   tokens. Plain POST, no JavaScript, no iframe: it degrades
   to a normal form submit if anything fails. */
.signup{border:1px solid var(--edge);background:var(--panel);
  padding:30px 32px 32px;max-width:640px;margin:56px 0 0}
.signup h3{font-size:18px;margin:0 0 10px}
.signup p.why{font-size:15px;line-height:1.6;color:var(--gray);margin:0 0 22px;max-width:56ch}
.signup form{margin:0}
.signup label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:0 0 9px}
.signup .fields{display:flex;flex-wrap:wrap;gap:12px}
.signup input[type="email"]{flex:1 1 240px;min-width:0;
  background:var(--void);border:1px solid var(--edge);color:var(--white);
  font-family:var(--mono);font-size:14px;padding:14px 15px;border-radius:0}
.signup input[type="email"]:focus{outline:2px solid var(--amber);outline-offset:2px;
  border-color:var(--cyan)}
.signup input[type="email"]::placeholder{color:var(--dim)}
.signup input[type="submit"]{flex:0 0 auto;
  background:var(--cyan);color:#000;border:1px solid var(--cyan);
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:14px 30px;border-radius:0;cursor:pointer}
.signup input[type="submit"]:hover{background:var(--amber);border-color:var(--amber)}
.signup p.fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--dim);margin:18px 0 0;line-height:1.6}
.signup p.fine a{color:var(--dim)}
.signup p.fine a:hover{color:var(--cyan);text-decoration:none}

/* confirmation page */
.confirm{min-height:56vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:70px 0 90px}
.confirm pre{font-family:var(--mono);color:var(--cyan);font-size:clamp(11px,3.2vw,19px);
  line-height:1.1;margin:0 0 30px;white-space:pre}
.confirm h1{font-size:clamp(25px,4vw,38px);margin:0 0 16px}
.confirm .lede{margin:0 auto 32px}

/* ── license text ────────────────────────────────────────
   Mono, but flowing: the MIT text ships with hard breaks at
   about 85 columns, which double-wrap in a narrower column.
   Each paragraph is one unbroken line here and wraps once. */
.license-text{border:1px solid var(--edge);background:var(--panel);
  padding:30px 34px;margin-top:36px;max-width:none}
.license-text p{font-family:var(--mono);font-size:13.5px;line-height:1.85;
  color:var(--gray);margin:0 0 22px}
.license-text p:first-child{color:var(--white);margin-bottom:26px}
.license-text p:last-child{margin-bottom:0}

/* ── DOS door packages ───────────────────────────────────
   Ready-made drops: name, a line on the door, download.
   Narrower than the ATDT door cards; these are downloads,
   not games with descriptions to browse. */
.pkgs{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  max-width:920px;margin:0 0 20px}
.pkg{background:var(--void);padding:26px 28px 28px;display:grid;gap:12px 36px}
@media(min-width:720px){.pkg{grid-template-columns:190px minmax(0,1fr) auto;align-items:start}}
.pkg h3{font-size:18px;margin:0;line-height:1.25}
.pkg h3 span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin-top:7px}
.pkg .body{min-width:0}
.pkg p{font-size:15px;line-height:1.62;margin:0 0 12px;color:var(--gray)}
.pkg p:last-child{margin-bottom:0}
.pkg p.note-sm{font-size:14px;color:var(--dim);line-height:1.6}
.pkg .get{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  border:1px solid var(--edge);padding:11px 18px;color:var(--gray);
  background:var(--panel);display:inline-block;white-space:nowrap}
.pkg .get:hover{color:#000;background:var(--cyan);border-color:var(--cyan);text-decoration:none}

/* a loud, unmissable warning */
.warn{border:1px solid rgba(255,201,74,.45);background:rgba(255,201,74,.05);
  padding:24px 28px;margin:0 0 32px;max-width:920px}
.warn h3{font-size:16px;color:var(--amber);margin:0 0 10px}
.warn p{font-size:15px;line-height:1.65;margin:0 0 12px;color:var(--gray)}
.warn p:last-child{margin-bottom:0}

/* a door by someone other than the board's own SysOp: the byline
   carries the author and their board */
.door .by a{color:var(--gray);text-decoration:none;
  border-bottom:1px dotted var(--edge)}
.door .by a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.door .by .sep{color:var(--edge);padding:0 6px}
/* the live-feed note: a quiet aside at the foot of a door's card */
.door p.feed{font-size:14px;line-height:1.6;margin:18px 0 0;color:var(--dim)}

/* a paragraph that answers a question only some readers have: same
   measure as the lede above it, but set back so the eye can skip it */
.aside{max-width:62ch;font-size:15px;line-height:1.66;color:var(--dim);margin:0}
.aside a{color:var(--gray)}
.aside a:hover{color:var(--cyan)}

/* Forum sits at the end of the nav and keeps its place on a phone:
   someone hunting for help on a small screen is exactly who needs it */
.status nav a.forum{color:var(--cyan)}
.status nav a.forum:hover{color:var(--amber)}

/* the help line, sitting under the install steps: where a SysOp lands
   the moment an install does not go the way the four steps promised */
.helpline{border:1px solid var(--edge);border-left:2px solid var(--cyan);
  background:var(--panel);padding:26px 30px 28px;margin-top:40px;max-width:74ch}
.helpline h3{font-size:17px;margin:0 0 10px}
.helpline p{font-size:15.5px;line-height:1.66;margin:0;color:var(--gray);max-width:62ch}

/* ── ato additions ───────────────────────────────────────── */
/* ATO's own colour is the demo's yellow: its masthead, its Play buttons.
   Yellow takes the accent role ATDT gives cyan, so links and buttons follow
   the doors, the way Usurper's green follows its game. It sits next to the
   family amber, so a button turns white on hover instead of amber. */
:root{--cyan:#f2c94c;--atdt-cyan:#3fdfe8}
.btn:hover{background:var(--white);border-color:var(--white);color:#000}
.btn.off,.btn.off:hover{background:transparent;color:var(--dim);border-color:var(--edge);
  font-weight:400;cursor:default}

.band{padding:76px 0}
.band h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:14px;text-wrap:balance}
.band .lede{margin-bottom:44px}

/* hero terminal, the family's component; the modem goes back online */
.hero{padding:56px 0 24px}
.term{border:1px solid var(--edge);background:#000;
  box-shadow:0 0 0 1px rgba(242,201,76,.06),0 30px 70px -40px rgba(242,201,76,.32)}
.term-bar{display:flex;justify-content:space-between;gap:12px;
  padding:8px 14px;border-bottom:1px solid var(--edge);background:var(--panel);
  font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.12em}
.term-bar .hi{color:var(--amber)}
@media(max-width:560px){.term-bar>span:last-child{display:none}}
.term-body{padding:28px 14px 34px;min-height:330px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
@media(max-width:640px){.term-body{min-height:290px;padding:22px 12px 26px}}
.dial{font-family:var(--mono);font-size:13px;color:var(--gray);
  text-align:left;align-self:flex-start;width:max-content;max-width:100%;
  margin:0 0 30px;min-height:6.6em;white-space:pre-wrap}
.dial .ok{color:var(--amber)}
.cur{display:inline-block;width:.6em;height:1.05em;background:var(--cyan);
  vertical-align:-.18em;animation:blink 1.06s steps(1,end) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.stage{width:100%;opacity:0}
.stage.on{opacity:1;transition:opacity .45s ease}
.logo{font-family:var(--mono);font-size:clamp(11px,4.9vw,31px);line-height:.98;
  margin:0 0 24px;color:var(--cyan);white-space:pre;
  text-shadow:.11em .11em 0 rgba(229,88,198,.5)}
.hero h1{font-size:clamp(26px,4.4vw,44px);margin-bottom:14px;text-wrap:balance}
.sub{max-width:58ch;margin:0 auto;text-wrap:balance}
.hot{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.hot a{font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  border:1px solid var(--edge);padding:9px 16px;color:var(--gray);background:var(--panel)}
.hot a:hover{color:#000;background:var(--cyan);border-color:var(--cyan);text-decoration:none}
.hot a b{color:var(--amber);font-weight:400}
.hot a:hover b{color:#000}
.hot a.pri{border-color:var(--cyan);color:var(--white)}
.hint{margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em}

/* three-up claims and four-up steps, as on ATDT's front page */
.claims{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
@media(min-width:820px){.claims{grid-template-columns:repeat(3,1fr)}}
.claim{background:var(--void);padding:28px 26px 30px;display:flex;flex-direction:column}
.claim .ico{font-family:var(--mono);font-size:20px;line-height:1;margin-bottom:16px;display:block}
.claim:nth-child(1) .ico{color:var(--cyan)}
.claim:nth-child(2) .ico{color:var(--amber)}
.claim:nth-child(3) .ico{color:var(--magenta)}
.claim h3{font-size:19px;margin-bottom:10px}
.claim p{font-size:15.5px;line-height:1.62}
.steps{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--void);padding:26px 24px 30px}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--dim);
  display:block;margin-bottom:18px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14.5px;line-height:1.6}

/* screenshots, as on getusurper.com; the lobby and door page are taller
   than the game screens, so every tile is cut to one shape from the top */
.shots{display:grid;gap:22px;margin:0 0 28px}
@media(min-width:760px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.shots{grid-template-columns:repeat(3,1fr)}}
.shots figure{margin:0}
.shots a{display:block;border:1px solid var(--edge);background:#000;line-height:0;
  aspect-ratio:16/10;overflow:hidden}
.shots a:hover{border-color:var(--cyan)}
.shots img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.shots figcaption,.panelshot figcaption{font-size:14px;line-height:1.55;color:var(--dim);margin-top:10px}
.shots figcaption b,.panelshot figcaption b{color:var(--gray);font-weight:500}

/* under the screenshots: the demo's look is only the demo's */
.yours{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;border:1px solid var(--edge);
  background:var(--panel);padding:22px 28px 24px;margin:0 0 56px}
.yours h3{font-size:17px;flex:0 0 auto}
.yours p{flex:1 1 420px;min-width:0;font-size:15.5px;line-height:1.62}

/* the doors: any 16-bit DOS door, and the seven running on the demo */
.demo-doors{border:1px solid var(--edge);background:var(--panel)}
.demo-doors .dh{display:flex;justify-content:space-between;gap:12px;padding:14px 22px;
  border-bottom:1px solid var(--edge);font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.demo-doors .dh b{color:var(--white);font-weight:400}
.demo-doors a.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 22px;border-bottom:1px solid var(--hair);color:var(--white);font-size:15.5px;line-height:1.4}
.demo-doors a.row span{font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}
.demo-doors a.row:hover{background:#12121d;color:var(--cyan);text-decoration:none}
.demo-doors a.row:hover span{color:var(--gray)}
.demo-doors .df{padding:16px 22px 18px;font-size:14.5px;line-height:1.6;color:var(--dim)}

/* how it works: the player's PC beside the shared drive */
.how-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px 24px;margin-bottom:56px}
.node{flex:1 1 340px;min-width:0;position:relative}
.node .sheet{position:absolute;inset:0;border:1px solid var(--edge);background:var(--void)}
.node .s1{transform:translate(8px,8px)}
.node .s2{transform:translate(16px,16px);opacity:.5}
.stack{position:relative;border:1px solid var(--edge);background:var(--void);padding:22px 22px 24px}
.stack .head{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.stack .head b{color:var(--cyan);font-weight:400}
.stack .head span{color:var(--dim)}
.layer{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;margin-top:6px;
  border:1px solid var(--edge);background:var(--panel);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.03em}
.layer b{color:var(--white);font-weight:400}
.layer span{color:var(--dim);text-align:right}
.layer.top{border-color:rgba(242,201,76,.55)}
.layer.top b{color:var(--cyan)}
.stack p{font-size:14.5px;line-height:1.6;margin-top:16px}
.wire{flex:0 1 220px;min-width:180px;font-family:var(--mono);font-size:12.5px;text-align:center;
  color:var(--cyan);line-height:2.1;white-space:pre}
.wire small{display:block;white-space:normal;color:var(--dim);font-size:11.5px;line-height:1.5;
  margin-top:10px;letter-spacing:.04em}

/* maintenance and the sysop panel, with the panel's own screenshots */
.two{display:grid;gap:44px;align-items:start}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:56px}}
.two ul.pts li{font-size:15.5px}
.panelshot{margin:0}
.panelshot a{display:block;border:1px solid var(--edge);background:#fff;line-height:0}
.panelshot a:hover{border-color:var(--cyan)}
.panelshot img{width:100%;height:auto;display:block}
.machine{display:flex;flex-wrap:wrap;align-items:center;gap:28px 44px;margin:0 0 44px}
.machine .panelshot{flex:0 1 520px;min-width:0}
.mcap{flex:1 1 300px;min-width:0}
.mcap .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--magenta);display:block;margin-bottom:12px}
.mcap h3{font-size:21px;margin-bottom:12px}
.mcap p{font-size:15.5px;line-height:1.64}
.sysop-head{padding-top:76px}
.feat .item p{font-size:15px;line-height:1.64}
.warn{margin:40px 0 0;max-width:none}

/* download, coming soon */
.facts .row span.on{color:var(--green)}

/* the family: each card wears its own site's colour */
.fam .claim .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--white);
  display:block;margin:0 0 14px}
.fam .claim p{margin:0 0 14px}
.fam .claim .state{margin:auto 0 0;padding-top:18px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--dim);line-height:1.8}
.fam .claim .state .on{color:var(--green)}
.fam .claim .state .alpha{color:var(--magenta)}
.fam .claim:nth-child(1) .ico{color:var(--atdt-cyan)}
.fam .claim:nth-child(2) .ico{color:var(--amber)}
.fam .claim:nth-child(3) .ico{color:var(--cyan)}
.fam .claim.here{background:var(--panel)}
.fam .claim.here .state{color:var(--cyan)}
.fam-note{margin-top:26px;font-size:15px;color:var(--dim)}

/* why ATO: the Hayes commands, as a two-column list that wraps on a phone */
.spec.cmds{white-space:normal;margin:0 0 40px;display:grid;gap:2px 0}
.cmds div{display:grid;grid-template-columns:6ch minmax(0,1fr);gap:14px}
.cmds dt{color:var(--white)}
.cmds dd{margin:0}
.cmds .hi-cmd dt{color:var(--cyan)}

/* 404: Abort, Retry, Fail? */
.center-404 .hot{margin:0 0 6px}
.center-404 .hint{margin-top:10px}

.credit-line{font-size:12px;color:var(--dim);margin:0 0 14px;letter-spacing:.02em;max-width:90ch;line-height:1.7}

/* screenshot viewer: atabbs.com's lightbox, as on getusurper.com */
a[data-i]{cursor:zoom-in}
.lb{position:fixed;inset:0;background:rgba(3,3,7,.985);display:none;z-index:100;padding:20px}
.lb.open{display:flex;flex-direction:column}
.lb__frame{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.lb__frame img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--edge);background:#000}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  padding-top:14px;font-size:14.5px;color:var(--dim);max-width:1312px;width:100%;margin:0 auto}
.lb__text b{color:var(--white);font-weight:500}
.lb__nav{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:13px}
.lb__nav #lb-count{min-width:3.5em;text-align:center}
.lb button{background:transparent;border:1px solid var(--edge);color:var(--cyan);font-family:var(--mono);
  font-size:13px;letter-spacing:.04em;padding:7px 12px;cursor:pointer}
.lb button:hover,.lb button:focus-visible{background:var(--cyan);color:#000;border-color:var(--cyan)}