/* Rust-DOS website: a Turbo Vision desktop with a Norton Commander download screen.
 *
 * Everything sits on the 8x16 character grid of the IBM VGA font:
 * 1ch is one column, 1em is one row. Window frames are drawn with borders
 * placed exactly where the font draws its box characters (═ ║ ─ │), so the
 * CSS frames and the text-mode frames of the NC panels line up. */

@font-face {
  font-family: "IBM VGA";
  src: url("../fonts/WebPlus_IBM_VGA_8x16.woff") format("woff");
  font-display: block;
}

:root {
  --fs: 16px;
  --px: calc(var(--fs) / 16); /* one VGA font pixel */

  /* The 16 colors of the VGA text mode palette. */
  --black: #000000;
  --blue: #0000aa;
  --green: #00aa00;
  --cyan: #00aaaa;
  --red: #aa0000;
  --magenta: #aa00aa;
  --brown: #aa5500;
  --lgray: #aaaaaa;
  --dgray: #555555;
  --lblue: #5555ff;
  --lgreen: #55ff55;
  --lcyan: #55ffff;
  --lred: #ff5555;
  --lmagenta: #ff55ff;
  --yellow: #ffff55;
  --white: #ffffff;

  --shadow: rgba(0, 0, 0, 0.62);
  scrollbar-color: var(--blue) var(--cyan);
}

@media (min-width: 1760px) { :root { --fs: 20px; } }
@media (min-width: 2400px) { :root { --fs: 24px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--fs);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font: 1rem/1 "IBM VGA", monospace;
  color: var(--lgray);
  /* Turbo Vision's desktop: the ░ character, blue on light gray. */
  background: var(--lgray) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%230000aa' d='M3 0h1v1H3zM1 1h1v1H1z'/%3E%3C/svg%3E") 0 0 / calc(var(--px) * 4) calc(var(--px) * 2);
  -webkit-font-smoothing: none;
}

h1, h2, h3, p, ul, dl, dd, pre, form { margin: 0; padding: 0; }
h1, h2, h3, b, strong { font: inherit; }
ul { list-style: none; }
a { color: inherit; }
kbd { font: inherit; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
:focus { outline: none; }
::selection { background: var(--cyan); color: var(--black); }

.hk { color: var(--red); }

.cursor { animation: blink 0.46s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }


/* ─── Menu bar and status line ─────────────────────────────────────── */

.menubar, .statusline {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 30;
  height: 1em;
  display: flex;
  justify-content: space-between;
  background: var(--lgray);
  color: var(--black);
  white-space: nowrap;
}
.menubar { top: 0; }
.statusline { bottom: 0; overflow: hidden; }

.mb { display: flex; padding-left: 1ch; }
.mb-item { position: relative; }
.mb-title { height: 1em; padding: 0 1ch; }
.mb-title.is-sel,
.mb-title:focus-visible { background: var(--green); }
.clock { padding: 0 1ch; }

.mbox {
  position: absolute;
  top: 1em;
  left: 0;
  z-index: 31;
  min-width: 24ch;
  padding: 1em 1ch;
  background: var(--lgray);
  color: var(--black);
  box-shadow: 2ch 1em 0 var(--shadow);
  --frame: var(--black);
}
.mbox[hidden] { display: none; }
.mbox [role="menuitem"] {
  display: flex;
  justify-content: space-between;
  gap: 3ch;
  width: 100%;
  height: 1em;
  padding: 0 1ch;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
}
.mbox [role="menuitem"]:focus { background: var(--green); }
.mbox [role="separator"] {
  height: 1em;
  margin: 0 calc(var(--px) * 3 - 1ch);
  background: linear-gradient(var(--frame), var(--frame)) 0 calc(var(--px) * 7) / 100% var(--px) no-repeat;
}

.sl-items { display: flex; padding-left: 1ch; }
.sl-items > * { padding: 0 1ch; height: 1em; }
.sl-items > button:hover,
.sl-items > button:focus-visible { background: var(--green); }
.sl-hint { padding: 0 1ch; overflow: hidden; text-overflow: clip; }
.sl-hint:not(:empty)::before { content: "│ "; }


/* ─── Window frames ─────────────────────────────────────────────────── */

.win, .dialog { position: relative; }

.win::before, .win::after,
.dialog::before, .dialog::after,
.mbox::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border: solid var(--frame);
  border-width: var(--px) calc(var(--px) * 2);
}
/* ╔═╗ double frame: the outer and inner lines of ═ and ║ */
.win::before, .dialog::before {
  inset: calc(var(--px) * 5) var(--px) calc(var(--px) * 8) calc(var(--px) * 2);
}
.win::after, .dialog::after {
  inset: calc(var(--px) * 7) calc(var(--px) * 4) calc(var(--px) * 10) calc(var(--px) * 5);
}
/* ┌─┐ single frame: inactive windows and menus */
.win:not(.is-active)::before, .mbox::before {
  inset: calc(var(--px) * 7) calc(var(--px) * 3) calc(var(--px) * 8) calc(var(--px) * 3);
}
.win:not(.is-active)::after { display: none; }

.win {
  --bg: var(--blue);
  --frame: var(--lgray);
  background: var(--bg);
  color: var(--lgray);
  padding: 1em 1ch;
  box-shadow: 2ch 1em 0 var(--shadow);
  scroll-margin: 3em 0 2em;
}
.win.is-active { --frame: var(--white); }

.dialog {
  --bg: var(--lgray);
  --frame: var(--white);
  background: var(--bg);
  color: var(--black);
  padding: 1em 1ch;
  box-shadow: 2ch 1em 0 var(--shadow);
}
.win.dialog:not(.is-active) { --frame: var(--black); }

.win-title {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: fit-content;
  max-width: calc(100% - 14ch);
  margin: 0 auto;
  padding: 0 1ch;
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg);
  color: var(--frame);
}

.win-zoom, .win-close, .win-num {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 1em;
  background: var(--bg);
  color: var(--frame);
}
.win-zoom { right: 2ch; }
.win-close { left: 2ch; }
.win-num { right: 3ch; }
.demo .win-num { right: 6ch; }
.win-zoom b, .win-close b { color: var(--lgreen); }
.win:not(.is-active) .win-zoom { display: none; }


/* ─── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  height: 1em;
  padding: 0 2ch;
  background: var(--green);
  color: var(--black);
  text-decoration: none;
  white-space: pre;
  /* The ▄ and ▀ shadow Turbo Vision draws right of and below a button. */
  box-shadow: 1ch calc(var(--px) * 7) 0 var(--black);
}
.btn .hk { color: var(--yellow); }
.btn.is-default { color: var(--lcyan); }
.btn:hover, .btn:focus-visible { color: var(--white); }
.btn:active { transform: translateX(1ch); box-shadow: none; }


/* ─── Desktop layout ────────────────────────────────────────────────── */

.desktop { padding: 3em 2ch 4em; }

.deskgrid {
  container: desk / inline-size;
  max-width: 148ch;
  margin: 0 auto;
  display: grid;
  gap: 3em 4ch;
}

.row-top, .features { display: grid; gap: 3em 4ch; }

@container desk (min-width: 126ch) {
  .row-top { grid-template-columns: minmax(40ch, 1fr) 82ch; }
}
/* The two halves of the feature list side by side, the screenshots
   centred below them. */
@container desk (min-width: 124ch) {
  .features { grid-template-columns: 1fr 1fr; }
  .features .shots { grid-column: 1 / -1; }
}


/* ─── Hero ──────────────────────────────────────────────────────────── */

.hero { display: flex; }
.hero-body {
  margin: auto;
  padding: 2em 1ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  text-align: center;
}
.logo { width: 100%; display: flex; justify-content: center; }
.logo svg { display: block; width: 54ch; max-width: 100%; height: auto; }
.tagline { color: var(--white); }
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 2em 4ch; padding-bottom: 1em; }
.hero-meta { color: var(--cyan); }
.hero-meta span { white-space: nowrap; }


/* ─── Live demo ─────────────────────────────────────────────────────── */

.demo {
  container: demo / inline-size;
  width: 100%;
  max-width: 82ch;
  justify-self: center;
}
.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--black);
  overflow: hidden;
  touch-action: manipulation;
}
/* Out of the flow, so its 640 pixels don't widen the window; the script
   sizes it to the largest 4:3 box that fits. */
.screen canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.screen canvas.smooth { image-rendering: auto; }
/* DOS draws its mouse's cursor, and a finger works the mouse as a trackpad
   instead of scrolling the page. */
.screen.is-running.dos-mouse canvas { cursor: none; touch-action: none; }

/* Before power on: a power-on self test screen. */
.post {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 1em 2ch;
  background: var(--black);
  color: var(--lgray);
  text-align: center;
}
.post[hidden] { display: none; }
.post-title { color: var(--yellow); }
.post-dir { border-spacing: 2ch 0; text-align: left; color: var(--lgray); }
.post-dir td:first-child { color: var(--white); }
.post p:has(.btn) { padding: 1em 0; }
.post .btn[hidden] { display: none; }
.post-status { min-height: 1em; color: var(--cyan); white-space: pre; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.screen:focus-visible .post .btn { color: var(--white); }

.frame-bottom {
  position: absolute;
  z-index: 1;
  left: 2ch;
  right: 2ch;
  bottom: 0;
  height: 1em;
  display: flex;
  gap: 1ch;
  white-space: nowrap;
  pointer-events: none;
}
.d-led, .d-sound, .d-tool { padding: 0 1ch; background: var(--bg); color: var(--frame); }
.d-led { margin-right: auto; }
.d-led b { color: var(--dgray); }
.d-led.on b { color: var(--lred); }
.d-sound, .d-tool { pointer-events: auto; height: 1em; }
.d-sound b { color: var(--lgreen); }
.d-sound[aria-pressed="false"] b { color: var(--dgray); }
/* The frame's buttons for the touch controls, the keyboard, screenshots
   and recordings: green while what they show is shown, red while
   recording, and shorter where the frame is narrow. */
.d-tools { display: flex; gap: 1ch; }
.d-tools[hidden] { display: none; }
.d-tool:hover, .d-tool:focus-visible { color: var(--white); }
.d-tool[aria-pressed="true"] { color: var(--lgreen); }
.d-tool[data-tool="record"][aria-pressed="true"] { color: var(--lred); }
.d-tool .short { display: none; }
@container demo (max-width: 60ch) {
  .d-tool .long { display: none; }
  .d-tool .short { display: inline; }
  .d-tool { padding: 0; }
}

/* Touch controls below the screen: a D-pad, Esc and the switch between
   keys and joystick, and four buttons, pressed as Turbo Vision's are. */
.touch {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "dpad middle buttons";
  align-items: end;
  gap: 1em 1ch;
  padding-top: 1em;
  user-select: none;
  -webkit-user-select: none;
}
.touch[hidden], .osk[hidden] { display: none; }
@container demo (max-width: 60ch) {
  .touch { grid-template-areas: "dpad . buttons" "middle middle middle"; }
}
.dpad {
  grid-area: dpad;
  display: grid;
  grid-template: repeat(3, 3em) / repeat(3, 6ch);
  /* The hub between the arms. */
  background: linear-gradient(var(--lgray), var(--lgray)) center / 6ch 3em no-repeat;
  touch-action: none;
}
.dpad-arm {
  display: grid;
  place-items: center;
  background: var(--lgray);
  color: var(--black);
}
.dpad-arm.up { grid-area: 1 / 2; }
.dpad-arm.down { grid-area: 3 / 2; }
.dpad-arm.left { grid-area: 2 / 1; }
.dpad-arm.right { grid-area: 2 / 3; }
.dpad-arm.down-now { background: var(--green); color: var(--white); }
.pad-middle {
  grid-area: middle;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em 3ch;
  padding-bottom: 1em;
}
.pad-buttons {
  grid-area: buttons;
  display: grid;
  grid-template-columns: repeat(2, 6ch);
  gap: 1em 2ch;
  padding-right: 1ch;
}
.pad-button, .pad-small {
  background: var(--green);
  color: var(--black);
  box-shadow: 1ch calc(var(--px) * 7) 0 var(--black);
  touch-action: none;
}
.pad-button { height: 3em; }
.pad-small { height: 2em; padding: 0 1ch; min-width: 8ch; }
.pad-small[aria-pressed="true"] { color: var(--yellow); }
.pad-button.down-now, .pad-small.down-now { transform: translateX(1ch); box-shadow: none; color: var(--white); }

/* The on-screen keyboard, below the screen. */
.osk {
  display: grid;
  gap: var(--px);
  padding-top: 1em;
  user-select: none;
  -webkit-user-select: none;
}
.osk-row { display: flex; gap: var(--px); }
.osk-key {
  flex: var(--width, 1) 1 0;
  min-width: 0;
  height: 2em;
  overflow: hidden;
  white-space: nowrap;
  background: var(--lgray);
  color: var(--black);
  touch-action: none;
}
.osk-key.down-now, .osk-key.latched { background: var(--green); color: var(--white); }
@container demo (max-width: 60ch) {
  .osk-key { font-size: 0.75em; height: calc(2em / 0.75); }
}

.demo.is-zoomed {
  position: fixed;
  inset: 1em 0;
  z-index: 25;
  max-width: none;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
.demo.is-zoomed .screen { flex: 1; aspect-ratio: auto; }
html.is-zoomed { overflow: hidden; }


/* ─── Feature list and screenshots ──────────────────────────────────── */

/* Labelled check box clusters, black on cyan inside a gray dialog, their
   boxes in up to three columns. */
.checklist {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.clusters {
  width: 100%;
  max-width: 102ch;
  margin: 1em auto 0;
  padding: 0 1ch;
}
.group { padding-bottom: 1em; }
.group h3 { padding-left: 1ch; }
/* A column is as wide as the longest label, "[X] " and 28 characters; where
   even one column is narrower, a label wraps under its text, past the box. */
.cluster {
  columns: 32ch 3;
  column-gap: 1ch;
  padding: 0 1ch;
  background: var(--cyan);
  color: var(--black);
}
.cluster li { padding-left: 4ch; text-indent: -4ch; break-inside: avoid; }

/* VR and the debugger: a blue window each, a screenshot over a few lines
   and a list. The screenshots are photos, scaled smoothly to the window. */
.spot {
  width: 100%;
  max-width: 82ch;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 2em 3ch 2em;
}
/* Several pictures in one shot sit on top of each other and take turns. */
.spot-shot { display: grid; }
.spot-shot img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--black);
  transition: opacity .6s;
}
.spot-shot img:not(:only-child):not(.is-shown) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .spot-shot img { transition: none; }
}
.spot code { color: var(--yellow); }
.spot-list { columns: 36ch 2; column-gap: 2ch; }
.spot-list li { padding-left: 2ch; text-indent: -2ch; break-inside: avoid; }
.spot-list li::before { content: "■ "; color: var(--lcyan); }

/* The tour of screenshots, 1:1 where there's room, as the demo is. */
.shots {
  width: 100%;
  max-width: 82ch;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shots img {
  display: block;
  width: 80ch;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}


/* ─── Windows 3.x and Windows 95 ────────────────────────────────────── */

/* Two more feature boxes, each drawn as a window of the system it's about:
   a Windows 3.11 application window and Windows 95 and 98 ones. Their frames are
   measured in Windows pixels, one to a VGA font pixel, and their text is
   set in the sans serif nearest to the System and MS Sans Serif fonts. */
.gui {
  position: relative;
  width: 100%;
  max-width: 41rem; /* 82 columns, as the demo */
  justify-self: center;
  display: flex;
  flex-direction: column;
  font: calc(var(--px) * 13) / calc(var(--px) * 18) "Microsoft Sans Serif", "MS Sans Serif", Arial, "Liberation Sans", Helvetica, sans-serif;
  color: #000;
}
.gui .hk { color: inherit; text-decoration: underline; }
.gui h2 { min-width: 0; overflow: hidden; white-space: nowrap; }
.gui-menu { display: flex; overflow: hidden; white-space: nowrap; cursor: default; }
.gui-checks {
  flex: 1;
  columns: calc(var(--px) * 216) 2;
  column-gap: calc(var(--px) * 16);
}
.gui-checks li {
  display: flex;
  gap: calc(var(--px) * 6);
  padding: calc(var(--px) * 2) 0;
  break-inside: avoid;
}
.gui-checks li::before {
  content: "";
  flex: none;
  width: calc(var(--px) * 13);
  height: calc(var(--px) * 13);
  margin-top: calc(var(--px) * 2);
  background: var(--check) 0 0 / 100% 100%;
}

/* Windows 3.11: a sizing border between two black lines, its corners
   marked off level with the caption's edges; the control-menu box and the
   minimize and maximize buttons; a white menu bar; flat check boxes, and
   the bold System font throughout. */
.w31 {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h13v13H0z'/%3E%3Cpath fill='%23fff' d='M1 1h11v11H1z'/%3E%3Cpath d='M1 1h1v1h-1zM11 1h1v1h-1zM2 2h1v1h-1zM10 2h1v1h-1zM3 3h1v1h-1zM9 3h1v1h-1zM4 4h1v1h-1zM8 4h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM4 8h1v1h-1zM8 8h1v1h-1zM3 9h1v1h-1zM9 9h1v1h-1zM2 10h1v1h-1zM10 10h1v1h-1zM1 11h1v1h-1zM11 11h1v1h-1z'/%3E%3C/svg%3E");
  padding: calc(var(--px) * 5);
  background: #fff;
  font-weight: bold;
  box-shadow: inset 0 0 0 var(--px) #000, inset 0 0 0 calc(var(--px) * 4) #c0c0c0, inset 0 0 0 calc(var(--px) * 5) #000;
}
.w31::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --k: linear-gradient(#000, #000);
  --t: calc(var(--px) * 23);
  --across: var(--px) calc(var(--px) * 5);
  --down: calc(var(--px) * 5) var(--px);
  background:
    var(--k) left var(--t) top 0 / var(--across),
    var(--k) right var(--t) top 0 / var(--across),
    var(--k) left var(--t) bottom 0 / var(--across),
    var(--k) right var(--t) bottom 0 / var(--across),
    var(--k) left 0 top var(--t) / var(--down),
    var(--k) right 0 top var(--t) / var(--down),
    var(--k) left 0 bottom var(--t) / var(--down),
    var(--k) right 0 bottom var(--t) / var(--down);
  background-repeat: no-repeat;
}
.w31-caption {
  display: flex;
  height: calc(var(--px) * 19);
  border-bottom: var(--px) solid #000;
  background: #000080;
  color: #fff;
}
.w31-caption h2 { flex: 1; padding: 0 calc(var(--px) * 4); text-align: center; }
.w31-sys, .w31-min, .w31-max { flex: none; width: calc(var(--px) * 19); }
.w31-sys {
  border-right: var(--px) solid #000;
  background: #c0c0c0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23808080' d='M1 5h15v1H1zM15 1h1v4h-1z'/%3E%3Cpath d='M0 0h15v5H0z'/%3E%3Cpath fill='%23fff' d='M1 1h13v3H1z'/%3E%3C/svg%3E") var(--px) calc(var(--px) * 6) / calc(var(--px) * 16) calc(var(--px) * 6) no-repeat;
}
.w31-min, .w31-max {
  border-left: var(--px) solid #000;
  background: #c0c0c0 var(--glyph) calc(var(--px) * 5) calc(var(--px) * 6) / calc(var(--px) * 7) calc(var(--px) * 4) no-repeat;
  box-shadow: inset var(--px) var(--px) #fff, inset calc(var(--px) * -2) calc(var(--px) * -2) #808080;
}
.w31-min { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E"); }
.w31-max { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM2 1h3v1H2zM1 2h5v1H1zM0 3h7v1H0z'/%3E%3C/svg%3E"); }
.w31-menu { height: calc(var(--px) * 19); padding: 0 var(--px); border-bottom: var(--px) solid #000; }
.w31-menu > span { padding: 0 calc(var(--px) * 7); }
.w31 .gui-checks { padding: calc(var(--px) * 12) calc(var(--px) * 14); }

/* Windows 95: a raised frame and caption buttons, the title beside the
   window's icon, an etched panel of sunken, ticked check boxes and a
   status bar with the sizing grip. */
.w95 {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h13v13H0z'/%3E%3Cpath fill='%23808080' d='M0 0h12v1H1v11H0z'/%3E%3Cpath d='M1 1h10v1H2v9H1z'/%3E%3Cpath fill='%23dfdfdf' d='M11 1h1v11H1v-1h10z'/%3E%3Cpath d='M9 3h1v1H9zM8 4h2v1H8zM3 5h1v1H3zM7 5h3v1H7zM3 6h2v1H3zM6 6h3v1H6zM3 7h5v1H3zM4 8h3v1H4zM5 9h1v1H5z'/%3E%3C/svg%3E");
  padding: calc(var(--px) * 3);
  background: #c0c0c0;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) #000, inset var(--px) var(--px) #dfdfdf, inset calc(var(--px) * -2) calc(var(--px) * -2) #808080, inset calc(var(--px) * 2) calc(var(--px) * 2) #fff;
}
.w95-caption {
  display: flex;
  align-items: center;
  height: calc(var(--px) * 18);
  padding: 0 calc(var(--px) * 2);
  background: #000080;
  color: #fff;
}
.w95-caption h2 {
  flex: 1;
  padding-left: calc(var(--px) * 20);
  font-weight: bold;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23808080' d='M2 14h14v1H2zM15 3h1v11h-1z'/%3E%3Cpath d='M1 2h14v12H1z'/%3E%3Cpath fill='%230000ff' d='M2 3h12v2H2z'/%3E%3Cpath fill='%23fff' d='M2 6h12v7H2z'/%3E%3Cpath fill='%23c0c0c0' d='M11 3h2v2h-2z'/%3E%3C/svg%3E") 0 center / calc(var(--px) * 16) calc(var(--px) * 16) no-repeat;
}
.w95-btn {
  flex: none;
  width: calc(var(--px) * 16);
  height: calc(var(--px) * 14);
  background: var(--glyph) no-repeat #c0c0c0;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) #000, inset var(--px) var(--px) #fff, inset calc(var(--px) * -2) calc(var(--px) * -2) #808080, inset calc(var(--px) * 2) calc(var(--px) * 2) #dfdfdf;
}
.w95-min { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h6v2H0z'/%3E%3C/svg%3E") calc(var(--px) * 4) calc(var(--px) * 9) / calc(var(--px) * 6) calc(var(--px) * 2); }
.w95-max { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h9v2H0zM0 2h1v7H0zM8 2h1v7H8zM1 8h7v1H1z'/%3E%3C/svg%3E") calc(var(--px) * 3) calc(var(--px) * 2) / calc(var(--px) * 9) calc(var(--px) * 9); }
.w95-close { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0zM6 0h2v1H6zM1 1h2v1H1zM5 1h2v1H5zM2 2h4v1H2zM3 3h2v1H3zM2 4h4v1H2zM1 5h2v1H1zM5 5h2v1H5zM0 6h2v1H0zM6 6h2v1H6z'/%3E%3C/svg%3E") calc(var(--px) * 4) calc(var(--px) * 3) / calc(var(--px) * 8) calc(var(--px) * 7); margin-left: calc(var(--px) * 2); }
.w95-menu { padding: var(--px) 0; }
.w95-menu > span { padding: 0 calc(var(--px) * 6); }
.w95 .gui-checks {
  margin: calc(var(--px) * 4) calc(var(--px) * 5) calc(var(--px) * 6);
  padding: calc(var(--px) * 12) calc(var(--px) * 14);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) #fff, inset calc(var(--px) * -2) calc(var(--px) * -2) #808080, inset var(--px) var(--px) #808080, inset calc(var(--px) * 2) calc(var(--px) * 2) #fff;
}
.w95-status {
  position: relative;
  display: flex;
  height: calc(var(--px) * 20);
  padding: calc(var(--px) * 2) calc(var(--px) * 14) 0 0;
  white-space: nowrap;
  cursor: default;
}
.w95-status span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0 calc(var(--px) * 4);
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) #fff, inset var(--px) var(--px) #808080;
}
.w95-status::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M11 0h1v1h-1zM10 1h1v1h-1zM9 2h1v1h-1zM8 3h1v1h-1zM7 4h1v1h-1zM11 4h1v1h-1zM6 5h1v1h-1zM10 5h1v1h-1zM5 6h1v1h-1zM9 6h1v1h-1zM4 7h1v1h-1zM8 7h1v1h-1zM3 8h1v1h-1zM7 8h1v1h-1zM11 8h1v1h-1zM2 9h1v1h-1zM6 9h1v1h-1zM10 9h1v1h-1zM1 10h1v1h-1zM5 10h1v1h-1zM9 10h1v1h-1zM0 11h1v1h-1zM4 11h1v1h-1zM8 11h1v1h-1z'/%3E%3Cpath fill='%23808080' d='M11 1h1v1h-1zM10 2h2v1h-2zM9 3h2v1h-2zM8 4h2v1h-2zM7 5h2v1h-2zM11 5h1v1h-1zM6 6h2v1h-2zM10 6h2v1h-2zM5 7h2v1h-2zM9 7h2v1h-2zM4 8h2v1h-2zM8 8h2v1h-2zM3 9h2v1h-2zM7 9h2v1h-2zM11 9h1v1h-1zM2 10h2v1h-2zM6 10h2v1h-2zM10 10h2v1h-2zM1 11h2v1h-2zM5 11h2v1h-2zM9 11h2v1h-2z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}


/* Lead lines under the menu bar of the installation windows. */
.gui-lead { padding: calc(var(--px) * 8) calc(var(--px) * 14) 0; }
.w95-lead { margin: 0 calc(var(--px) * 5); }

/* The built-in Windows: a Windows 98 window across both columns, its
   caption shaded from navy to blue, with the body of a setup wizard: a
   picture down the left side, a bold heading, the check boxes, push
   buttons, and a status bar. */
.features .w98 { grid-column: 1 / -1; max-width: none; min-width: 0; }
.w98 .w95-status span { text-overflow: ellipsis; }
.w98-caption { background: linear-gradient(90deg, #000080, #1084d0); }
.w98-body {
  display: flex;
  margin: calc(var(--px) * 4) calc(var(--px) * 5) calc(var(--px) * 6);
  background: #fff;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) #fff, inset calc(var(--px) * -2) calc(var(--px) * -2) #dfdfdf, inset var(--px) var(--px) #808080, inset calc(var(--px) * 2) calc(var(--px) * 2) #000;
  padding: calc(var(--px) * 2);
}
/* A wizard's picture: a PC with a window on its screen and no Windows
   CD beside it, over a teal shade. */
.w98-side {
  flex: none;
  width: calc(var(--px) * 164);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 2h24v19H3z'/%3E%3Cpath fill='%23c0c0c0' d='M4 3h22v17H4z'/%3E%3Cpath fill='%23000' d='M6 5h18v13H6z'/%3E%3Cpath fill='%23008080' d='M7 6h16v11H7z'/%3E%3Cpath fill='%23c0c0c0' d='M9 8h11v7H9z'/%3E%3Cpath fill='%23000080' d='M9 8h11v2H9z'/%3E%3Cpath fill='%23fff' d='M10 11h7v1h-7zM10 13h5v1h-5z'/%3E%3Cpath fill='%23808080' d='M24 19h1v1h-1z'/%3E%3Cpath fill='%2300ff00' d='M22 19h1v1h-1z'/%3E%3Cpath fill='%23000' d='M11 21h8v2h-8zM6 23h18v1H6z'/%3E%3Cpath fill='%23c0c0c0' d='M7 24h16v4H7z'/%3E%3Cpath fill='%23000' d='M6 24h1v5H6zM23 24h1v5h-1zM7 28h16v1H7z'/%3E%3Cpath fill='%23808080' d='M17 26h4v1h-4z'/%3E%3C/svg%3E") center calc(var(--px) * 40) / calc(var(--px) * 128) calc(var(--px) * 128) no-repeat,
    linear-gradient(#008080, #00406b);
}
.w98-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 10);
  padding: calc(var(--px) * 16) calc(var(--px) * 20) calc(var(--px) * 18);
}
.w98-kicker { color: #000080; font-weight: bold; }
.w98-head {
  font-size: calc(var(--px) * 26);
  line-height: calc(var(--px) * 30);
  font-weight: bold;
}
.w98-lead { max-width: 80ch; }
.w98 .w98-checks {
  margin: 0;
  padding: calc(var(--px) * 4) 0;
  box-shadow: none;
  columns: calc(var(--px) * 216) 3;
}
.w98-btns { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 8); }
/* Windows 95's push button; the default one has a black outline. */
.w95-push {
  display: inline-block;
  min-width: calc(var(--px) * 75);
  padding: calc(var(--px) * 4) calc(var(--px) * 12);
  background: #c0c0c0;
  color: #000;
  text-align: center;
  text-decoration: none;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) #000, inset var(--px) var(--px) #fff, inset calc(var(--px) * -2) calc(var(--px) * -2) #808080, inset calc(var(--px) * 2) calc(var(--px) * 2) #dfdfdf;
}
.w95-push.is-default { outline: var(--px) solid #000; }
.w95-push:focus-visible { outline: var(--px) dotted #000; outline-offset: calc(var(--px) * -4); }
.w95-push:active {
  padding: calc(var(--px) * 5) calc(var(--px) * 11) calc(var(--px) * 3) calc(var(--px) * 13);
  box-shadow: inset var(--px) var(--px) #000, inset calc(var(--px) * -1) calc(var(--px) * -1) #fff, inset calc(var(--px) * 2) calc(var(--px) * 2) #808080;
}
@container desk (max-width: 100ch) {
  .w98-side { display: none; }
  .w98-head { font-size: calc(var(--px) * 20); line-height: calc(var(--px) * 24); }
}


/* ─── Questions ─────────────────────────────────────────────────────── */

/* A Turbo Vision dialog, folded to a line and a button until opened: then
   a list box of questions, black on cyan, beside a text box with the
   answer, as Borland's help shows a topic, and a row of buttons. The
   script builds the boxes from the plain list in the page. */
.faq {
  container: faq / inline-size;
  width: 100%;
  max-width: 100ch;
  justify-self: center;
}
.win-fold {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 2ch;
  height: 1em;
  background: var(--bg);
  color: var(--frame);
}
.win-fold b { color: var(--lgreen); }
.win-fold:hover b, .win-fold:focus-visible b { color: var(--white); }

.faq-folded {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  padding: 2em 1ch 1em;
  text-align: center;
}
.faq-folded[hidden], .faq-body[hidden] { display: none; }
/* Without the script, the questions and answers as a plain list. */
.faq-src dt { margin-top: 1em; color: var(--blue); }
.faq-src dd > * { margin-top: 1em; }
.faq-src pre { font: inherit; overflow-x: auto; }

.faq-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em 2ch;
  padding: 1em 1ch 0;
}
@container faq (min-width: 96ch) {
  .faq-body { grid-template-columns: 38ch 1fr; }
}
.faq-body.is-unfolding { animation: unfold 0.24s steps(12); }
@keyframes unfold { from { clip-path: inset(0 0 100% 0); } }

.faq-pane { display: flex; flex-direction: column; min-width: 0; }
/* The label above a control turns white while the control has the focus. */
.faq-label { padding: 0 1ch; height: 1em; }
.faq-pane:focus-within .faq-label { color: var(--white); }

.faq-list {
  position: relative; /* for the questions' offsetTop */
  overflow-y: auto;
  max-height: 22em;
  background: var(--cyan);
  color: var(--black);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.faq-list li {
  height: 1em;
  padding: 0 1ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.faq-list li[aria-selected="true"] { background: var(--green); }
.faq-list:focus li[aria-selected="true"] { color: var(--white); }

.faq-answer {
  height: min(22em, 70vh);
  overflow: auto;
  padding: 1em 2ch;
  background: var(--blue);
  color: var(--lgray);
  line-height: 1;
}
@container faq (min-width: 96ch) {
  .faq-answer { height: 22em; }
  .faq-list { flex: 1; }
}
.faq-answer > * + * { margin-top: 1em; }
.faq-answer b { color: var(--white); }
/* Ahead of .dialog a, whose blue would vanish on the blue box. */
.faq .faq-answer a { color: var(--lmagenta); }
.faq .faq-answer a:hover, .faq .faq-answer a:focus-visible { color: var(--white); }
.faq-answer li { padding-left: 2ch; text-indent: -2ch; }
.faq-answer li::before { content: "• "; color: var(--yellow); }
.faq-answer pre {
  font: inherit;
  color: var(--lcyan);
  overflow-x: auto;
}
.faq-answer pre b { color: var(--yellow); }
.faq-answer .faq-note { color: var(--cyan); }
.faq-answer:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--px) var(--lcyan); }

.faq-buttons {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em 4ch;
  padding: 1em 0;
}


/* ─── Norton Commander ──────────────────────────────────────────────── */

/* The "Download:" banner above it: block letters coloured row by row like
   the hero logo, with the same solid black drop shadow, on a blue panel. 76
   columns wide with its padding, so it shrinks with the desk once that no
   longer fits. */
.dl-logo {
  justify-self: center;
  margin-bottom: -1em;
  padding: 1em 2ch;
  background: var(--blue);
  box-shadow: 2ch 1em 0 var(--shadow);
  font-family: inherit;
  font-size: min(1rem, 100cqi / 38);
  text-shadow: 1ch 0.5em 0 var(--black);
}
.dl-logo span { display: block; }
.dl-logo span:nth-child(1) { color: #ffe45c; }
.dl-logo span:nth-child(2) { color: #ffc93c; }
.dl-logo span:nth-child(3) { color: #f5921f; }
.dl-logo span:nth-child(4) { color: #e57718; }
.dl-logo span:nth-child(5) { color: #d15e12; }

.nc {
  justify-self: center;
  max-width: 100%;
  background: var(--black);
  color: var(--lgray);
  box-shadow: 2ch 1em 0 var(--shadow);
  /* Room for the banner, so jumping to the downloads keeps it in view. */
  scroll-margin: 12em 0 2em;
}
.nc-panels { display: flex; flex-wrap: wrap; }
.nc-files, .nc-info, .nc-cmd, .nc-keys { white-space: pre; }
.nc-files, .nc-info {
  background: var(--blue);
  color: var(--lcyan);
  overflow: hidden;
}
.nc-files { cursor: default; user-select: none; touch-action: manipulation; }
.nc-ln { display: block; height: 1em; overflow: hidden; }
.nc-item.is-cur { background: var(--cyan); color: var(--black); }
.nc-files:focus .n-t { background: var(--cyan); color: var(--black); }
.n-h { color: var(--yellow); }
.n-y { color: var(--yellow); }
.n-w { color: var(--white); }
.nc-btn { background: var(--cyan); color: var(--black); text-decoration: none; }
.nc-btn:hover, .nc-btn:focus-visible { background: var(--lcyan); }
.nc-cmd { display: block; height: 1em; overflow: hidden; color: var(--lgray); }
.nc-keys { display: flex; height: 1em; overflow: hidden; }
.nc-keys > span { display: flex; flex: 1; min-width: 0; cursor: pointer; }
.nc-keys .k-n { color: var(--lgray); flex: none; }
.nc-keys .k-l { flex: 1; min-width: 0; overflow: hidden; background: var(--cyan); color: var(--black); }
.nc-keys > span:hover .k-l { background: var(--lcyan); }
.nc-noscript { padding: 1em 2ch; }


/* ─── Dialogs ───────────────────────────────────────────────────────── */

dialog.dialog {
  border: 0;
  overflow: visible;
  width: fit-content;
  min-width: min(40ch, calc(100vw - 6ch));
  max-width: calc(100vw - 6ch);
  max-height: calc(100vh - 4em);
}
dialog.dialog::backdrop { background: transparent; }
dialog.dialog form { display: grid; gap: 1em; padding: 1em 3ch; }
.dialog .center { text-align: center; }
.dialog a { color: var(--blue); }
.dialog p b { color: var(--white); }
.dialog .btn { justify-self: center; }

.keys { display: grid; grid-template-columns: 15ch 1fr; }
.keys dt { color: var(--blue); }
.keys dt.grp { grid-column: 1 / -1; margin-top: 1em; color: var(--black); }
.keys dd.grp { display: none; }


/* ─── Small screens ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .clock, .sl-hint { display: none; }
  .desktop { padding-left: 1ch; padding-right: 2ch; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .faq-body.is-unfolding { animation: none; }
}