/* Millionaire AI. Built to his mIRC plate: a pixel logo on white, then ONE client window,
   then the coin's own window. Flat 1 px bevels, no radius, no shadow, no gradient except the
   title bar, every picture a raster on a 16 px grid. */

@font-face {
  font-family: "W95FA";
  src: url("fonts/w95fa.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Px437";
  src: url("fonts/px437-vga.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* measured off art/ref/mirc.jpg */
  --paper: #ffffff;
  --face: #dfdfdf;          /* win95 button face, the chrome of his plate */
  --face-hi: #ffffff;
  --face-lo: #808080;
  --face-dk: #000000;
  --chrome-text: #000000;
  --blue: #1f449c;          /* his logo blue */
  --blue-lo: #5a8fd6;
  --red: #ed3128;           /* his logo red */
  --yellow: #ffcc00;        /* his logo yellow */
  --log-bg: #020202;        /* his log pane */
  --log-fg: #ffffff;
  --log-srv: #2dd82d;
  --log-dim: #9a9a9a;
  --log-red: #ff5c50;
  --log-cyan: #45e0e0;
  --log-yellow: #ffd400;
  --log-link: #7fb0ff;
  --col: 1120px;
  --chrome: "W95FA", "MS Sans Serif", Tahoma, system-ui, sans-serif;
  --mono: "Px437", "Fixedsys", "Lucida Console", monospace;
  --row: 20px;              /* one log line */
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--chrome-text);
  font: 16px/1.3 var(--chrome);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

.px { will-change: transform; }      /* grey antialiasing for the bitmap faces, see the note in NOTE.md */

img[src*="icons/"] { image-rendering: pixelated; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--face); color: #000; padding: 10px 16px; z-index: 50;
  border: 1px solid #000;
}
.skip:focus { left: 8px; top: 8px; }

.desk {
  width: min(var(--col), calc(100vw - 48px));
  margin: 0 auto;
  padding: 34px 0 56px;
}

/* ---------- the logo: the mark alone, as his reference has it ---------- */

/* The name is not part of the logo (his word 2026-10-20): the mark stands by itself on the
   column's own left edge, and the window's title bar under it carries the name in type.
   The file is his own drawing on its grid, 90 x 39. --mks is how many screen pixels one of its
   blocks gets, so every bound of the clamp is a whole multiple of 90 and the height, which is
   left to the file's own ratio, lands on a whole number too (3x = 270 x 117, 2x = 180 x 78).
   Nothing scales the picture but that one width: no transform, no background-size, no second
   dimension to fight the first. */
.brand {
  --mks: 3;
  display: block;
  margin: 0 0 24px;
}
.brand h1 { margin: 0; }
.brand-mark {
  display: block;
  width: clamp(180px, calc(var(--mks) * 90px), 270px);
  height: auto;
  image-rendering: pixelated;
}

/* ---------- win95 surfaces ---------- */

.raise {
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
}
.sink {
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk), inset -1px -1px 0 var(--face);
}

.win {
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
  padding: 3px;
}

.app {
  display: flex;
  flex-direction: column;
  height: clamp(520px, calc(100vh - 200px), 844px);
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
}
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
}
.app > * { position: relative; z-index: 1; }
/* nothing is ever painted outside the window frame, whatever the screen is */
.app { overflow: hidden; }

/* a surface painted by a sibling, never by an ancestor the text scrolls over */
.bg { position: absolute; inset: 0; display: block; z-index: 0; }
.bg-log {
  background: var(--log-bg);
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk), inset -1px -1px 0 var(--face);
}
.bg-rail {
  background: #fff;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk), inset -1px -1px 0 var(--face);
}
.pane-box { position: relative; min-width: 0; min-height: 0; display: flex; }

/* title bar */
.tb {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0 4px 0 8px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-lo) 100%);
  color: #fff;
}
.tb-small { height: 34px; flex-basis: 34px; }
.tb-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.tb-text {
  flex: 1 1 auto;
  min-width: 0;
  font: 16px/1 var(--chrome);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}
.tb-btns { display: flex; gap: 2px; flex: 0 0 auto; }
.tb-btn {
  width: 22px; height: 20px;
  display: grid; place-items: center;
  padding: 0;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
  cursor: pointer;
}
.tb-btn img { width: 16px; height: 16px; }
.tb-btn:active { border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); box-shadow: inset 1px 1px 0 var(--face-lo); }

/* menu bar */
.menubar {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 34px;
  flex: 0 0 34px;
  background: var(--face);
  border-bottom: 1px solid var(--face-lo);
  z-index: 20;
}
.menu-top {
  font: 16px/1 var(--chrome);
  background: none;
  border: 0;
  color: #000;
  padding: 0 16px;
  cursor: pointer;
}
.menu-top[aria-expanded="true"], .menu-top:hover { background: var(--blue); color: #fff; }
.menu-pop {
  position: absolute;
  top: 34px;
  min-width: 268px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo), 2px 2px 0 rgba(0,0,0,.3);
  padding: 3px;
  z-index: 25;
}
.menu-pop button {
  display: block;
  width: 100%;
  text-align: left;
  font: 16px/1 var(--chrome);
  background: none;
  border: 0;
  color: #000;
  padding: 10px 18px;
  cursor: pointer;
}
.menu-pop button:hover, .menu-pop button:focus-visible { background: var(--blue); color: #fff; outline: none; }
.menu-pop hr { border: 0; border-top: 1px solid var(--face-lo); border-bottom: 1px solid var(--face-hi); margin: 3px 2px; }

/* toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0 4px;
  background: var(--face);
  border-bottom: 1px solid var(--face-lo);
}
.tool {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0;
  background: var(--face);
  border: 1px solid transparent;
  cursor: pointer;
}
.tool img { width: 16px; height: 16px; }
.tool:hover, .tool:focus-visible {
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
  outline: none;
}
.tool[aria-pressed="true"] {
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk);
  background: #d0d0d0;
}
.tool-sep { width: 1px; height: 24px; margin: 0 5px; background: var(--face-lo); border-right: 1px solid var(--face-hi); flex: 0 0 1px; }

/* tab strip */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0 4px;
  background: var(--face);
}
.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 18px;
  font: 16px/1 var(--chrome);
  color: #000;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
  cursor: pointer;
  white-space: nowrap;
}
.tab img { width: 16px; height: 16px; }
.tab[aria-selected="true"] {
  height: 38px;
  background: #efefef;
  font-weight: 700;
}
.tab[data-hot="1"] { color: var(--red); }

/* ---------- the client area ---------- */

.client {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 3px 5px 5px;
}
.topic {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  flex: 0 0 auto;
  padding: 8px 16px;
  margin-bottom: 3px;
  background: #fff;
  font: 16px/18px var(--mono);
  color: #000;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk), inset -1px -1px 0 var(--face);
  overflow-wrap: anywhere;
}
.topic-k { color: var(--blue); flex: 0 0 auto; align-self: flex-start; }
#topic-text { min-width: 0; }

.split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  grid-template-rows: minmax(0, 1fr);
  gap: 3px;
}

.pane {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--log-fg);
  font: 16px/20px var(--mono);
  padding: 10px 16px 12px;
  scrollbar-color: var(--face) #efefef;
}
.pane:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

/* the member rail: white, like his plate */
.rail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rail > .rail-head, .rail > .rail-body { position: relative; z-index: 1; }
.rail-head {
  flex: 0 0 34px;
  margin: 1px 1px 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font: 16px/1 var(--chrome);
  background: var(--face);
  border-bottom: 1px solid var(--face-lo);
  color: #000;
  white-space: nowrap;
  overflow: hidden;
}
.rail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
  font: 16px/20px var(--mono);
  color: #000;
}
.member {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 16px;
  white-space: nowrap;
}
.member b { font-weight: 400; color: #000; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.member .op { color: var(--blue); }
.member i { font-style: normal; color: #444; flex: 0 0 auto; }
.member.up i { color: #007000; }
.member.down i { color: #b40000; }
.rail-note { padding: 8px 16px; font: 16px/20px var(--mono); color: #444; }
.rail-btn {
  display: block; width: calc(100% - 20px); margin: 6px 10px;
  text-align: left;
}

/* the input line */
.inputrow {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 38px;
  margin-top: 4px;
}
.inputrow-l {
  flex: 0 0 auto;
  font: 16px/1 var(--mono);
  color: #000;
  padding: 0 8px 0 2px;
}
#cmd {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 16px;
  font: 16px/1 var(--mono);
  color: #000;
  background: #fff;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk), inset -1px -1px 0 var(--face);
}
#cmd:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }

/* ---------- keys ---------- */

.key {
  min-height: 36px;
  padding: 0 18px;
  font: 16px/1 var(--chrome);
  color: #000;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
}
.key:active:not(:disabled) {
  border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk);
  box-shadow: inset 1px 1px 0 var(--face-lo);
  padding-top: 1px;
}
.key:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.key:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: not-allowed; }
.key img { width: 16px; height: 16px; }
.key .mark { width: 16px; height: 16px; display: block; }

/* ---------- the coin's window ---------- */

.token { margin-top: 22px; }
.token-body { padding: 14px 16px 16px; }
.token-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.token-l {
  font: 16px/1 var(--chrome);
  color: #000;
  flex: 0 0 auto;
}
.token-ca {
  flex: 1 1 320px;
  min-width: 0;
  font: 16px/22px var(--mono);
  color: #000;
  background: #fff;
  padding: 10px 16px;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-dk), inset -1px -1px 0 var(--face);
  overflow-wrap: anywhere;
  user-select: all;
}
.token-ca[data-empty="1"] { color: #606060; user-select: none; }
.token-links { margin-top: 12px; gap: 10px; }
.token-risk {
  margin: 14px 0 0;
  font: 16px/22px var(--chrome);
  color: #333;
  max-width: 78ch;
}

/* ---------- panes: the windows' own content ---------- */

.l {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-left: 8ch;
  text-indent: -8ch;
}
.l.hang { padding-left: 14ch; text-indent: -14ch; }
.l + .l { margin-top: 0; }
.l .t { color: var(--log-dim); }
.l .srv { color: var(--log-srv); }
.l .nick { color: #fff; }
.l .mai { color: var(--log-yellow); }
.l .buy { color: var(--log-cyan); }
.l .sell { color: var(--log-red); }
.l .why { color: var(--log-dim); }
.l .num { color: #fff; }
.l .win-c { color: var(--log-srv); }
.l a { color: var(--log-link); text-decoration: underline; }
.l a:hover { color: #fff; }
.l .ind { padding-left: 1ch; text-indent: 0; display: block; }
@media (max-width: 760px) {
  .l, .l.hang { padding-left: 0; text-indent: 0; }
  .l .ind { padding-left: 3ch; }
}
.l.new { animation: flash .5s steps(2) 1; }
@keyframes flash { 0%, 50% { background: #0d2a0d; } 100% { background: transparent; } }

.pane-doc { color: #fff; }
.pane-h {
  color: var(--log-yellow);
  margin: 0 0 var(--row);
  font: 16px/20px var(--mono);
  font-weight: 400;
}
.pane-h:not(:first-child) { margin-top: var(--row); }

/* the chart, the one big figure of the status window */
.fig {
  margin: 0 0 var(--row);
  background: var(--log-bg);
  border: 1px solid #2a2a2a;
}
.fig canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.stat {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}
.stat::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, #343434 0 2px, transparent 2px 4px);
}
.stat dt { color: var(--log-dim); }
.stat dd { margin: 0; color: #fff; }
.stat dd.big { color: var(--log-yellow); }
.stat dd.bad { color: var(--log-red); }
.stat dd.good { color: var(--log-srv); }

/* tables: graveyard and leaderboard */
.tbl { width: 100%; border-collapse: collapse; font: 16px/20px var(--mono); }
.tbl th {
  position: relative;
  text-align: left;
  font-weight: 400;
  color: var(--log-yellow);
  padding: 2px 16px 6px 0;
  white-space: nowrap;
}
.tbl th::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: #343434;
}
.tbl td { padding: 2px 16px 2px 0; color: #fff; vertical-align: top; }
.tbl td.dim { color: var(--log-dim); }
.tbl td.red { color: var(--log-red); }
.tbl tr.me td { background: #16233d; }

/* the day grid of the deathpool */
.days {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 14px;
}
.day {
  height: 54px;
  padding: 0;
  font: 16px/1 var(--mono);
  color: #000;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.day span { font: 16px/1 var(--mono); }
.day small { font: 16px/1 var(--mono); color: #505050; }
.day[aria-pressed="true"] { background: var(--yellow); }
.day:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: not-allowed; }
.day:disabled small { color: #909090; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 var(--row);
}
.step { background: #0c0c0c; border: 1px solid #262626; padding: 18px 18px 20px; }
.step img { width: 96px; height: 96px; display: block; margin: 0 auto 10px; }
.step h3 { margin: 0 0 6px; font: 16px/20px var(--mono); font-weight: 400; color: var(--log-yellow); }
.step p { margin: 0; font: 16px/20px var(--mono); color: #d8d8d8; }

/* ---------- the dialog ---------- */

.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  display: grid;
  place-items: center;
  z-index: 40;
  padding: 24px;
}
.dlg { width: min(520px, 100%); }
.dlg-body { padding: 20px 22px; font: 16px/22px var(--chrome); color: #000; }
.dlg-body img { float: left; width: 180px; height: auto; margin: 2px 18px 8px 0; }
.dlg-body img.pix { image-rendering: pixelated; }
.dlg-body p { margin: 0 0 10px; }
.dlg-body p:last-child { margin: 0; }
.dlg-foot { display: flex; justify-content: flex-end; padding: 0 22px 20px; }

/* ---------- win95 scrollbars ---------- */

.pane::-webkit-scrollbar, .rail-body::-webkit-scrollbar { width: 17px; }
.pane::-webkit-scrollbar-track, .rail-body::-webkit-scrollbar-track {
  background: #efefef;
  border-left: 1px solid var(--face-lo);
}
.pane::-webkit-scrollbar-thumb, .rail-body::-webkit-scrollbar-thumb {
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo);
}
.pane::-webkit-scrollbar-button:vertical:start {
  background: var(--face) url("img/icons/arr-up.png") no-repeat center / 16px 16px;
  height: 17px;
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
}
.pane::-webkit-scrollbar-button:vertical:end,
.rail-body::-webkit-scrollbar-button:vertical:end {
  background: var(--face) url("img/icons/arr-down.png") no-repeat center / 16px 16px;
  height: 17px;
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
}
.rail-body::-webkit-scrollbar-button:vertical:start {
  background: var(--face) url("img/icons/arr-up.png") no-repeat center / 16px 16px;
  height: 17px;
  border: 1px solid;
  border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
}

/* ---------- widths ---------- */

@media (max-width: 1180px) {
  :root { --col: 980px; }
  .split { grid-template-columns: minmax(0, 1fr) 224px; }
}

@media (max-width: 1020px) {
  .desk { width: calc(100vw - 32px); padding-top: 26px; }
  .brand { --mks: 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) 200px; }
}

@media (max-width: 760px) {
  .app { height: auto; }
  .brand { --mks: 2; margin-bottom: 16px; }
  .toolbar { overflow-x: auto; }
  .tabs { overflow-x: auto; height: 36px; flex-basis: 36px; padding-bottom: 2px; }
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: 420px 232px; }
  .rail { order: 2; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .days { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .menu-pop { min-width: 240px; left: 2px; right: 2px; min-width: 0; }
  .token-ca { flex-basis: 100%; }
}

@media (max-width: 380px) {
  .desk { width: calc(100vw - 20px); }
  .brand { --mks: 2; margin-bottom: 16px; }
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .menu-top { padding: 0 9px; }
  .tb-text { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .l.new { animation: none; }
  * { transition: none !important; }
}


/* window controls: the three buttons really do something */
.app.is-collapsed { height: auto; }
.app.is-collapsed .menubar,
.app.is-collapsed .toolbar,
.app.is-collapsed .tabs,
.app.is-collapsed .client { display: none; }
.app.is-collapsed .tb { cursor: pointer; }
.app.is-maxed {
  position: fixed;
  inset: 10px;
  z-index: 30;
  height: auto;
  width: auto;
}
body.locked { overflow: hidden; }

/* the two soft rasters are resampled, not a grid, so they take the smooth filter */
.step img { image-rendering: auto; }

/* phones: every window tab stays visible, on two rows, and no table pushes past the pane */
@media (max-width: 760px) {
  .tabs { flex-wrap: wrap; height: auto; flex: 0 0 auto; overflow: visible; row-gap: 4px; padding: 0 4px 4px; }
  .tab, .tab[aria-selected="true"] { height: 34px; padding: 0 17px; }
  .tbl { table-layout: fixed; }
  .tbl th, .tbl td { white-space: normal; overflow-wrap: anywhere; padding-right: 10px; }
  .fig canvas { min-height: 180px; }
}