@font-face {
  font-family: "Iosevka Term Web";
  src: url("fonts/iosevka-term-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Iosevka Term Web";
  src: url("fonts/iosevka-term-600.woff2") format("woff2");
  font-weight: 600;
  font-display: block;
}

:root {
  /* five steps of one warm tone, and one colour that only ever means "broken now" */
  --bg: #0b0a09;
  --fg: #ece7db;
  --mid: #a59f92;
  --dim: #6c675d;
  --faint: #3f3b35;
  --ghost: #262420;
  --alert: #ff5126;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs, 16px) / 1.25 "Iosevka Term Web", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-variant-ligatures: none;
  font-kerning: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#screen {
  margin: auto;
  padding: var(--pady, 22px) 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* The type size is always a multiple of 4px (app.js), so all three row heights are whole pixels.
   1.25em is the font's own line: box-drawing glyphs fill it and join without seams. */
.row { white-space: pre; height: 1.25em; line-height: 1.25em; }
/* braille rows: four dot pitches are 0.98em, 1em keeps them on the pixel grid */
.row.t { height: 1em; line-height: 1em; }
.row.s { height: 0.5em; line-height: 0.5em; }

.f { color: var(--fg); }
.m { color: var(--mid); }
.d { color: var(--dim); }
.q { color: var(--faint); }
.g { color: var(--ghost); }
.a { color: var(--alert); }
.b { font-weight: 600; }
.inv { background: var(--fg); color: var(--bg); }
.cur { background: var(--ghost); }

[data-act] { cursor: pointer; }
[data-act]:not(.inv):hover { color: var(--fg); }

::selection { background: var(--fg); color: var(--bg); }

#help {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(11 10 9 / 0.86);
}
#help[hidden] { display: none; }

.plain { margin: 22px 28px; font: inherit; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#probe { width: auto; height: auto; clip-path: none; visibility: hidden; left: -9999px; top: 0; }