/* One black, one white, one laser. All other color comes from the Splashes. */
:root {
  color-scheme: light dark;
  --paper: #ffffff;
  --ink: #000000;
  --soft: #595959;
  --wash: #f0f0f0;
  --hair: #000000;
  --laser: #ff2b14;
  --laser-ink: #cf1505;
  --plate: #ffffff;
  --plate-ink: #000000;
  --head: 56px;
  --gutter: 16px;
  --wide: 1320px;
  --face: "Splashery Module", "Arial Black", Impact, sans-serif;
  --text: "OCR-B", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --m: calc(100vw / 37);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000;
    --ink: #ffffff;
    --soft: #a6a6a6;
    --wash: #161616;
    --hair: #ffffff;
    --laser-ink: #ff5a47;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000;
  --ink: #ffffff;
  --soft: #a6a6a6;
  --wash: #161616;
  --hair: #ffffff;
  --laser-ink: #ff5a47;
}
:root[data-theme="light"] {
  color-scheme: light;
}
@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
}


@font-face { font-family: "Splashery Module"; src: url("/fonts/module.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "OCR-B"; src: url("/fonts/ocrb.woff2") format("woff2"); font-display: swap; }

/* The frame every page shares, the Manual's too: the header, the footer, and focus. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
  scroll-padding-top: calc(var(--head) + 12px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}
a:hover {
  color: var(--laser-ink);
}
:focus-visible {
  outline: 3px solid var(--laser);
  outline-offset: 2px;
}
button {
  font: inherit;
  color: inherit;
}
.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
}
.skip:focus {
  top: 8px;
}
.head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--head);
  padding: 0 var(--gutter);
  background: var(--paper);
  color: var(--ink);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 20px/1 var(--face);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav > a:not(.go, .icon) {
  display: none;
  padding: 8px 10px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.nav > a:not(.go, .icon):hover,
.nav > a[aria-current]:not(.go, .icon) {
  text-decoration: underline;
}
.icon,
.menu > summary {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.icon svg,
.menu > summary svg {
  width: 20px;
  height: 20px;
}
.nav > a.icon {
  display: none;
}
.go {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-left: 2px;
  padding: 0 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.go:hover {
  background: var(--laser);
  color: #000;
}
.mode {
  position: relative;
}
.mode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.8125rem;
  text-transform: uppercase;
}
.mode-button svg {
  display: none;
  width: 22px;
  height: 22px;
}
.mode-button[data-now="system"] .m-system,
.mode-button[data-now="light"] .m-light,
.mode-button[data-now="dark"] .m-dark {
  display: block;
}
.mode-word {
  display: none;
}
.mode-say {
  position: absolute;
  top: 44px;
  right: 0;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.mode-say.is-on {
  opacity: 1;
}
.menu-panel {
  position: absolute;
  right: 0;
  top: var(--head);
  width: min(280px, 100%);
  display: grid;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 0;
}
.menu-panel a {
  padding: 11px 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.menu-panel a:hover {
  background: var(--laser);
  color: #000;
}
@media (max-width: 400px) {
  .head {
    gap: 6px;
  }
  .brand {
    gap: 6px;
    font-size: 17px;
  }
  .brand svg {
    width: 18px;
    height: 18px;
  }
  .icon,
  .menu > summary,
  .mode-button {
    width: 32px;
    min-width: 32px;
  }
  .go {
    padding: 0 8px;
    font-size: 0.6875rem;
  }
}
@media (max-width: 340px) {
  :root {
    --gutter: 12px;
  }
}
@media (min-width: 900px) {
  .mode-word {
    display: inline;
  }
  .mode-button {
    padding: 0 8px;
  }
  .mode-say {
    display: none;
  }
  .nav > a:not(.go, .icon) {
    display: inline-block;
  }
  .nav > a.icon {
    display: inline-grid;
  }
  .menu {
    display: none;
  }
}
.foot {
  margin-top: 96px;
  padding: 32px var(--gutter) 40px;
  border-top: 6px solid var(--ink);
  display: grid;
  gap: 28px;
}
.foot-code {
  width: 148px;
  height: 148px;
  background: #fff;
}
.foot nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
  align-content: start;
}
.foot nav a {
  padding: 6px 0;
  font-size: 0.875rem;
  text-decoration: none;
  text-transform: uppercase;
}
.foot nav a:hover {
  text-decoration: underline;
}
.foot .fine {
  margin: 0;
  color: var(--soft);
  font-size: 0.8125rem;
  max-width: 62ch;
}
@media (min-width: 900px) {
  .foot {
    grid-template-columns: 148px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
  }
  .foot .fine {
    grid-column: 2 / -1;
  }
}

/* Going from page to page, the plate becomes the picture. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}
::view-transition-group(stage) {
  animation-duration: 0.34s;
  animation-timing-function: var(--ease);
}
.plate,
.stage {
  view-transition-name: stage;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}