@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plex-mono-400.woff2) format("woff2");
}
:root {
  --bg: #0f0e0b;
  --ink: #e6e1cf;
  --dim: #8d8a78;
  --chrome: #a39e8c;
  --paper: #fffff8;
  --mode: #8b2e1f;
  --line: color-mix(in srgb, var(--bg), var(--ink) 4%);
  --edge: color-mix(in srgb, var(--bg), var(--ink) 9%);
  --card: color-mix(in srgb, var(--bg), var(--ink) 3%);
  --tile: color-mix(in srgb, var(--bg), var(--ink) 7%);
  --hollow: color-mix(in srgb, var(--bg), var(--ink) 22%);
  --font: 13px;
  --cell-h: 16px;
  --cell-w: 7.8px;
  --mono:
    "IBM Plex Mono",
    ui-monospace,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  --bar-h: calc(2 * var(--cell-h));
  --top-h: calc(5 * var(--cell-h));
  --m: 16px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-detent: cubic-bezier(.3, 0, 0, 1);
  --t-click: 80ms;
  --t-light: 120ms;
  --t-detent: 140ms;
  --t-stamp: 200ms;
  --t-move: 240ms;
  color-scheme: dark;
}
@media (min-width: 381px) {
  :root {
    --m: 20px;
  }
}
@media (min-width: 801px) {
  :root {
    --m: 36px;
  }
}
@media (min-width: 1100px) {
  :root {
    --m: 120px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
}
body {
  margin: 0;
  padding-bottom: var(--bar-h);
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--font) / var(--cell-h) var(--mono);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--ink);
  text-decoration: none;
}
b {
  font-weight: 400;
}
button {
  font: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.dim {
  color: var(--dim);
}
.chrome {
  color: var(--chrome);
}
.skip {
  position: absolute;
  left: 8px;
  top: -40px;
  z-index: 10;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--bg);
}
.skip:focus {
  top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) *,
  html:not([data-motion=on]) *::before,
  html:not([data-motion=on]) *::after {
    transition: none !important;
    animation: none !important;
  }
}
html[data-motion=off] *,
html[data-motion=off] *::before,
html[data-motion=off] *::after {
  transition: none !important;
  animation: none !important;
}
.mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 1ch;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex: none;
}
.mark.big {
  width: 48px;
  height: 48px;
  margin: 0;
}
.dashed .mark {
  stroke-dasharray: 2 1.5;
}
.dotted .mark {
  stroke-dasharray: 1 1.5;
  stroke-linecap: butt;
}
.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 calc(2 * var(--cell-w));
  min-height: calc(3 * var(--cell-h));
  padding: calc(1.5 * var(--cell-h)) var(--m) 0;
}
.top .brand {
  margin: 0;
  font: inherit;
}
.top .brand a {
  text-decoration: none;
}
.top .labnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(2 * var(--cell-w));
}
.top .labnav a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--chrome);
  text-decoration: none;
}
.top .labnav a:hover,
.top .labnav a:focus-visible {
  color: var(--ink);
}
.top .labnav a[aria-current] {
  color: var(--ink);
}
.caption {
  margin: 0 0 var(--cell-h);
  padding: 0 var(--m);
  color: var(--dim);
  min-height: var(--cell-h);
  max-width: calc(112ch + 2 * var(--m));
}
.sprite {
  display: none;
}
body.fill {
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 0;
}
body.fill > main {
  flex: 1;
  min-height: 0;
}
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: stretch;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--line);
  color: var(--chrome);
  border-top: 1px solid var(--edge);
  white-space: nowrap;
  overflow: hidden;
  view-transition-name: bar;
}
.bar > * {
  display: flex;
  align-items: center;
}
.bar .mode {
  flex: none;
  padding: 0 var(--cell-w);
  background: var(--mode);
  color: var(--paper);
  letter-spacing: .04em;
}
.bar .mode.click {
  animation: click var(--t-click) steps(2, end);
}
@keyframes click {
  0% {
    background: var(--paper);
    color: var(--mode);
  }
  50%, 100% {
    background: var(--mode);
    color: var(--paper);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) .bar .mode.click {
    animation: none;
  }
}
.bar .path {
  flex: 1;
  min-width: 0;
  padding: 0 var(--cell-w);
  display: block;
  line-height: var(--bar-h);
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar .pos {
  flex: none;
  padding: 0 var(--cell-w);
  white-space: pre;
}
.bar .ps {
  display: none;
}
.bar .eye-word,
.bar .hint {
  flex: none;
  padding: 0 var(--cell-w);
}
.bar .eye-word b {
  color: var(--ink);
  margin-left: 1ch;
}
.bar button,
.bar a {
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0 var(--cell-w);
  min-width: 28px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.bar button:hover,
.bar a:hover,
.bar button:focus-visible,
.bar a:focus-visible {
  color: var(--paper);
  outline-offset: -2px;
}
.bar .motion[aria-pressed=false] {
  color: var(--chrome);
}
.bar .cmd {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.bar .cmd[hidden] {
  display: none;
}
.bar .cmd input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  padding: 0 .2rem;
  outline: none;
}
.bar .causes {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin: 0 calc(2 * var(--cell-w)) 0 var(--cell-w);
  padding: 0;
  list-style: none;
  align-self: center;
}
.bar .causes li {
  display: block;
}
.bar .causes i {
  display: block;
  width: 7px;
  background: var(--ink);
  opacity: .75;
  transition: opacity var(--t-light) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) .bar .causes i,
  html:not([data-motion=on]) .wall li,
  html:not([data-motion=on]) .ledger li,
  html:not([data-motion=on]) .field .g,
  html:not([data-motion=on]) .field .g .ro {
    transition: none;
  }
}
.bar .causes.lit i {
  opacity: .22;
}
.bar .causes.lit li.on i {
  opacity: 1;
}
.bar .causes.filter li.on i {
  background: var(--paper);
  outline: 1px solid var(--ink);
}
@media (max-width: 859px) {
  .bar .hint,
  .bar .eye-word,
  .bar .causes {
    display: none;
  }
}
@media (max-width: 480px) {
  .bar .pl {
    display: none;
  }
  .bar .ps {
    display: inline;
  }
}
html:not(.js) .bar .eye-word,
html:not(.js) .bar .hint,
html:not(.js) .bar .motion,
html:not(.js) .bar .cmdopen {
  display: none;
}
.stamp {
  display: inline-block;
  letter-spacing: .04em;
  white-space: nowrap;
  transform-origin: 0 50%;
}
.stamp.in {
  animation: stamp var(--t-stamp) var(--ease);
}
@keyframes stamp {
  from {
    transform: scale(1.35);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) .stamp.in {
    animation: none;
  }
}
.buffer {
  position: relative;
  overflow: auto;
  padding: 22px 28px 40px;
  min-height: 0;
}
.buffer:focus {
  outline: none;
}
.buffer:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
.buffer .ln {
  margin: 0 0 var(--cell-h);
  max-width: 68ch;
  overflow-wrap: anywhere;
}
.buffer .k {
  display: inline-block;
  min-width: 11ch;
}
.buffer .who {
  color: var(--chrome);
}
.buffer h1 {
  font: inherit;
  margin: 0 0 var(--cell-h);
  max-width: 68ch;
}
.buffer h2 {
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dim);
  margin: var(--cell-h) 0 0;
  max-width: 68ch;
}
.buffer .lesson {
  color: var(--ink);
}
.buffer .head {
  margin: 0 0 var(--cell-h);
}
.buffer .head h1 {
  margin-bottom: 0;
}
.buffer .head .ln {
  margin: 0;
}
.file-head {
  display: inline-block;
  padding: 4px 0;
}
.reading-only {
  padding: var(--cell-h) var(--m) calc(3 * var(--cell-h));
}
@media (max-width: 520px) {
  .buffer {
    padding: 18px 16px 32px;
  }
  .reading-only {
    padding: var(--cell-h) var(--m) calc(3 * var(--cell-h));
  }
}
.dw-figure {
  margin: 8px 0 var(--cell-h);
  max-width: 24rem;
}
.dw-figure svg {
  width: 100%;
  height: auto;
  display: block;
}
.dw text {
  font-family: var(--mono);
  fill: var(--ink);
}
.dw .grey {
  fill: var(--dim);
}
.dw .ink-line {
  stroke: var(--ink);
  stroke-width: 1;
  fill: none;
  transform-box: view-box;
}
.dw .hurdle-line {
  stroke: var(--dim);
  stroke-width: 1;
  fill: none;
}
.dw .dot {
  fill: var(--ink);
}
html[data-motion=on] .dw-figure.pending .dot,
html[data-motion=on] .dw-figure.pending .ink-line,
html[data-motion=on] .dw-figure.pending .num,
html[data-motion=on] .dw-figure.pending .label {
  opacity: 0;
}
.dw-figure.drawing g.row {
  --d: calc(var(--i) * 200ms);
}
.dw-figure.drawing .label {
  animation: fade 120ms var(--ease) both var(--d);
}
.dw-figure.drawing .dot {
  animation: fade 120ms var(--ease) both calc(var(--d) + 40ms);
}
.dw-figure.drawing .ink-line {
  animation: grow 200ms var(--ease) both calc(var(--d) + 80ms);
}
.dw-figure.drawing .num {
  animation: fade 120ms var(--ease) both calc(var(--d) + 200ms);
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes grow {
  from {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) .dw-figure.drawing * {
    animation: none;
  }
}
.dw-figure figcaption,
.dw-figure .attribution {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
  margin: .4rem 0 0;
  max-width: 68ch;
}
.dw-figure:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
.number {
  margin: var(--cell-h) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 2ch;
}
.number .cells {
  display: inline-flex;
  white-space: pre;
}
.number .cell {
  display: inline-block;
  width: 1ch;
  text-align: center;
}
.number .match {
  white-space: nowrap;
}
html[data-motion=on] .dw-figure.pending .number .match {
  opacity: 0;
}
.number .match.in {
  animation: stamp var(--t-light) var(--ease);
  transform-origin: 0 50%;
}
.number .note {
  color: var(--dim);
}
.desk {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  min-height: 0;
}
.desk .term {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}
.eye-col {
  border-left: 1px solid var(--edge);
  padding: 24px 22px;
  color: var(--dim);
}
.eye {
  display: block;
  margin: 0;
  width: 100%;
  font: 9px / 9px var(--mono);
  letter-spacing: 0;
  white-space: pre;
  color: var(--ink);
  overflow: hidden;
  min-height: 108px;
}
.eye i {
  font-style: normal;
  color: var(--dim);
}
.eye-col p {
  margin: var(--cell-h) 0 0;
}
@media (max-width: 859px) {
  .desk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .eye-col {
    display: none;
  }
}
.rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow: auto;
  border-right: 1px solid var(--edge);
  min-height: 0;
  user-select: none;
}
.card {
  flex: none;
  display: block;
  width: 100%;
  max-width: 212px;
  height: 88px;
  padding: 8px 10px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  -webkit-user-drag: none;
}
.card .g {
  display: block;
  color: var(--chrome);
}
.card .s {
  display: block;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .c {
  display: block;
  margin-top: 4px;
  color: var(--chrome);
}
.card:hover .s,
.card:focus-visible .s {
  color: var(--paper);
}
html:not(.js) .card[aria-current] .g,
.card.is-on .g {
  display: inline-block;
  padding: 0 4px;
  background: var(--ink);
  color: var(--bg);
}
@media (min-width: 860px) {
  html.js .rail {
    overflow: hidden;
    touch-action: none;
  }
  html.js .card {
    position: absolute;
    top: 0;
    left: 14px;
    width: 212px;
    will-change: transform;
  }
}
@media (max-width: 859px) {
  .rail {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--edge);
    padding: 10px 14px;
    gap: 10px;
    scroll-snap-type: x mandatory;
  }
  .card {
    width: 212px;
    height: 84px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}
html.js .file:not(.on) {
  display: none;
}
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1ch;
  margin: var(--cell-h) 0;
}
.filter button {
  background: none;
  border: 0;
  padding: 0 .5ch;
  color: var(--ink);
  cursor: pointer;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.filter button:hover,
.filter button:focus-visible {
  color: var(--paper);
}
.filter button[aria-pressed=true] {
  background: var(--ink);
  color: var(--bg);
}
.filter .count {
  margin-left: auto;
  color: var(--dim);
  white-space: pre;
}
.ledger {
  list-style: none;
  margin: 0 0 var(--cell-h);
  padding: 0;
  color: var(--dim);
}
.ledger li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
  min-height: var(--cell-h);
  transition: opacity var(--t-light) var(--ease);
}
.ledger li.off {
  opacity: .28;
}
.ledger li.lit {
  color: var(--ink);
}
.ledger .n {
  min-width: 2ch;
}
.ledger .g {
  min-width: 15ch;
}
.ledger .w,
.ledger a {
  min-width: 23ch;
}
.ledger .c {
  display: inline-flex;
  align-items: center;
}
@media (max-width: 640px) {
  .ledger .g,
  .ledger .w,
  .ledger a,
  .ledger .c {
    min-width: 0;
  }
}
.stage {
  position: relative;
  padding: 0 var(--m);
}
.wallgrid {
  display: block;
}
.band {
  position: relative;
  z-index: 1;
  padding: var(--cell-h) 0 var(--cell-h) 2ch;
}
.band .prompt {
  margin: 0;
  min-height: var(--cell-h);
  white-space: pre-wrap;
}
.kill {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kill {
  max-width: 62ch;
}
.kill .row {
  display: flex;
  align-items: center;
  gap: 0 2ch;
  height: var(--cell-h);
  text-decoration: none;
}
.kill .row .gate {
  min-width: 15ch;
}
.kill .row .slug {
  color: var(--chrome);
}
.kill .row:hover .slug,
.kill .row:focus-visible .slug {
  color: var(--ink);
}
.kill .row .cause {
  margin-left: auto;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.checks {
  list-style: none;
  margin: var(--cell-h) 0 0;
  padding: 0;
  color: var(--dim);
  max-width: 62ch;
}
.checks li {
  min-height: var(--cell-h);
  padding-left: 2ch;
  text-indent: -2ch;
}
.counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(4 * var(--cell-w));
  margin: var(--cell-h) 0 0;
}
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(3 * var(--cell-w));
  margin: 0;
  color: var(--dim);
}
.wall {
  display: contents;
}
.wall li {
  display: flex;
  gap: 0 2ch;
  min-height: var(--cell-h);
  color: var(--ink);
  opacity: .26;
  white-space: nowrap;
  transition: opacity var(--t-light) var(--ease);
}
.wall li.lit {
  opacity: 1;
}
.wall .n {
  min-width: 2ch;
}
.wall .g {
  min-width: 15ch;
}
.wall .w,
.wall a {
  min-width: 23ch;
}
.wall a {
  text-decoration: none;
}
.wall .c {
  display: inline-flex;
  align-items: center;
}
@media (max-width: 999px) {
  .wall li {
    white-space: normal;
    flex-wrap: wrap;
  }
  .wall .c {
    flex-basis: 100%;
    padding-left: 2ch;
  }
  .wall li {
    min-height: 0;
    margin-bottom: var(--cell-h);
  }
  .wall .w,
  .wall a,
  .wall .g {
    min-width: 0;
  }
}
@media (min-width: 1000px) {
  .wallgrid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 4ch;
    justify-content: center;
    grid-auto-flow: column;
    grid-template-rows: repeat(42, var(--cell-h));
  }
  .band {
    grid-column: 1 / -1;
    grid-row: 8 / span 20;
    padding: var(--cell-h) 0 0 2ch;
  }
}
@media (max-width: 640px) {
  .kill .row {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--cell-h);
  }
  .kill .row .slug {
    overflow-wrap: anywhere;
  }
  .kill .row .cause {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 2ch;
  }
}
.matrix {
  display: grid;
  grid-template-columns: repeat(11, 32px);
  gap: 8px;
  margin: var(--cell-h) 0;
  list-style: none;
  padding: 0;
}
.matrix .cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: var(--card);
  color: var(--dim);
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--t-light) var(--ease);
}
.matrix .cell .mark {
  margin: 0;
}
.matrix .cell.pub {
  color: var(--ink);
  background: color-mix(in srgb, var(--bg), var(--ink) 8%);
}
.matrix .cell.open {
  background: none;
  outline: 1px solid var(--edge);
  outline-offset: -1px;
}
.matrix .cell:hover,
.matrix .cell:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 0;
}
.matrix.lit .cell:not(.lit):not(.open) {
  opacity: .5;
}
.readout {
  min-height: var(--cell-h);
  margin: 0 0 var(--cell-h);
  white-space: pre-wrap;
}
@media (max-width: 480px) {
  .matrix {
    grid-template-columns: repeat(11, 24px);
    gap: 6px;
  }
  .matrix .cell {
    width: 24px;
    height: 24px;
  }
}
.og {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1200 / 630;
  background: var(--bg);
  outline: 1px solid var(--edge);
  padding: 4% 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: var(--cell-h) 0;
  overflow: hidden;
}
.og .matrix {
  grid-template-columns: repeat(11, 1fr);
  gap: 1.2%;
  margin: 0;
  width: 56%;
}
.og .matrix .cell {
  width: auto;
  height: auto;
  aspect-ratio: 1;
}
.og .matrix .cell .mark {
  width: 60%;
  height: 60%;
}
.og .line {
  margin: 0;
}
.garden {
  display: flex;
  flex-direction: column;
  max-width: none;
}
.field {
  position: relative;
  flex: 1;
  min-height: 320px;
  margin: var(--cell-h) 0;
  overflow: hidden;
}
.field .g {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 4px;
  margin: -4px;
  border: 0;
  background: none;
  color: var(--dim);
  cursor: pointer;
  text-decoration: none;
  opacity: .75;
  animation: drift var(--d) linear infinite alternate;
  animation-delay: var(--delay);
  transition: opacity var(--t-light) var(--ease);
}
.field .g .mark {
  margin: 0;
  width: var(--s);
  height: var(--s);
}
.field .g.pub {
  color: var(--ink);
  opacity: 1;
}
.field .g .ro {
  position: absolute;
  left: calc(var(--s) + 1.5ch);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--t-light) var(--ease);
  pointer-events: none;
}
.field .g:hover,
.field .g:focus-visible {
  opacity: 1;
  color: var(--ink);
  z-index: 2;
}
.field .g:hover .ro,
.field .g:focus-visible .ro {
  opacity: 1;
}
.field .g.flip .ro {
  left: auto;
  right: calc(var(--s) + 1.5ch);
}
@keyframes drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--dx), var(--dy));
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) .field .g {
    animation: none;
  }
}
.about-head {
  padding: var(--cell-h) var(--m) 0;
}
.about-head .head {
  margin: 0;
}
.about-grid {
  padding: var(--cell-h) var(--m) 0;
}
.story {
  padding: 0 0 calc(3 * var(--cell-h));
}
.portrait-col {
  max-width: 36ch;
  margin: 0 0 calc(2 * var(--cell-h));
}
@media (min-width: 940px) {
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 68ch) 36ch;
    column-gap: 5ch;
    align-items: start;
  }
  .portrait-col {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    margin: 0;
  }
  .story {
    grid-column: 1;
    grid-row: 1;
  }
}
.pgrid {
  display: grid;
  grid-template-columns: 8ch repeat(7, 3ch);
  grid-auto-rows: var(--cell-h);
  margin: 0 0 4px;
}
.pgrid .mo {
  grid-column: 1;
  color: var(--dim);
  font-style: normal;
}
.d {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chrome);
  font: inherit;
  line-height: 1;
}
.d.c {
  cursor: pointer;
  transition: opacity var(--t-light) var(--ease);
}
.d.s {
  color: var(--ink);
}
.d.a {
  background: var(--tile);
}
.d.x {
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--hollow);
}
.d.c:hover,
.d.c:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 0;
}
html[data-motion=on] .portrait.pending .d.c {
  opacity: 0;
}
.portrait.drawing .d.c {
  animation: fade var(--t-light) var(--ease) both var(--i, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) .portrait.drawing .d.c {
    animation: none;
  }
  html:not([data-motion=on]) .d.c,
  html:not([data-motion=on]) .fig,
  html:not([data-motion=on]) .hours .h {
    transition: none;
  }
}
.portrait.lit .d.c {
  opacity: .3;
}
.portrait.lit .d.c.on {
  opacity: .7;
}
.portrait.lit .d.c.hi,
.portrait.lit.nohi .d.c.on,
.portrait.lit .d.c:hover,
.portrait.lit .d.c:focus-visible {
  opacity: 1;
}
.portrait-col .readout {
  margin: 0 0 8px;
  height: calc(2 * var(--cell-h));
  overflow: hidden;
}
.portrait-col .legend {
  margin: 0;
}
.fig {
  margin: 0 0 var(--cell-h);
  max-width: 68ch;
  transition: opacity var(--t-light) var(--ease);
}
html.js[data-motion=on] .fig:not(.on) {
  opacity: .35;
}
.fig figcaption {
  color: var(--dim);
  margin: 0 0 8px;
}
.fig .fn {
  color: var(--ink);
  margin-right: 1ch;
}
.fig .readout,
.fig .legend {
  margin: 4px 0 0;
  min-height: var(--cell-h);
}
.hours {
  display: grid;
  grid-template-columns: repeat(24, 2ch);
}
.hours .h {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: calc(6 * var(--cell-h));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: opacity var(--t-light) var(--ease);
}
.hours .h i,
.hours .t {
  font-style: normal;
  display: block;
  line-height: var(--cell-h);
}
.hours .t {
  color: var(--dim);
}
.hours.lit .h:not(.lit) {
  opacity: .4;
}
.hours .h:hover,
.hours .h:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 0;
}
.bands .bd {
  display: grid;
  grid-template-columns: 11ch repeat(11, 3ch) 5ch;
  grid-auto-rows: var(--cell-h);
}
.bands .nm,
.bands .tot,
.bands .hd i {
  color: var(--dim);
  font-style: normal;
}
.bands .tot {
  text-align: right;
}
.bands .hd i {
  text-align: center;
}
.bands.lit .d.c:not(.lit) {
  opacity: .4;
}
@media (max-width: 480px) {
  .hours {
    grid-template-columns: repeat(24, minmax(0, 1fr));
  }
  .bands .bd {
    grid-template-columns: repeat(11, 3ch) 5ch;
  }
  .bands .bd .nm {
    grid-column: 1 / -1;
  }
  .bands .hd .nm {
    display: none;
  }
}
.tl {
  margin: 0 0 var(--cell-h);
}
.strip {
  display: grid;
  grid-template-columns: repeat(11, 32px);
  gap: 4px 8px;
  margin: var(--cell-h) 0;
}
.strip .cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: var(--card);
  color: var(--chrome);
  font: inherit;
  cursor: pointer;
}
.strip .cell:hover,
.strip .cell:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 0;
}
.strip .cell[aria-pressed=true] {
  background: var(--ink);
  color: var(--bg);
}
.strip .t {
  color: var(--dim);
  font-style: normal;
  text-align: center;
}
html.js .tl.pick .tm:not(.on) {
  display: none;
}
.tm h2 {
  margin-top: 0;
}
@media (max-width: 480px) {
  .strip {
    display: none;
  }
  html.js .tl.pick .tm {
    display: block;
  }
  .tm h2 {
    margin-top: var(--cell-h);
  }
}
.grave {
  display: none;
  margin: 0;
}
.graveopen {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  white-space: pre;
}
.graveopen:hover,
.graveopen:focus-visible {
  color: var(--paper);
}
@media (max-width: 480px) {
  html.js .grave {
    display: block;
    min-height: calc(100svh - var(--bar-h));
    padding: var(--cell-h) 0 0 2ch;
  }
  html.js .band .scr {
    min-height: calc(100svh - var(--bar-h));
  }
  html.js .wallgrid:not(.open) .wall {
    display: none;
  }
}
.sheet {
  padding: 0 var(--m) calc(3 * var(--cell-h));
  max-width: calc(96ch + 2 * var(--m));
}
.sheet h1,
.sheet h2 {
  font: inherit;
  margin: calc(2 * var(--cell-h)) 0 var(--cell-h);
  color: var(--dim);
}
.sheet h1 {
  color: var(--ink);
  margin-top: 0;
}
.sheet p {
  margin: 0 0 var(--cell-h);
  max-width: 68ch;
}
.sheet table {
  border-collapse: collapse;
  margin: 0 0 var(--cell-h);
}
.sheet td,
.sheet th {
  text-align: left;
  font-weight: 400;
  padding: 0 3ch 0 0;
  vertical-align: top;
  min-height: var(--cell-h);
}
.sheet th {
  color: var(--dim);
}
.sheet td:first-child {
  white-space: nowrap;
}
.swatch {
  display: inline-block;
  width: 2ch;
  height: var(--cell-h);
  vertical-align: -4px;
  margin-right: 1ch;
}
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cell-h) calc(4 * var(--cell-w));
  margin: 0 0 var(--cell-h);
  padding: 0;
  list-style: none;
}
.marks li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.marks .small {
  display: inline-flex;
  align-items: center;
  color: var(--dim);
}
.grid16 {
  background-image:
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(
      90deg,
      var(--edge) 1px,
      transparent 1px);
  background-size: 16px 16px;
  padding: 0;
}
.pages {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pages li {
  display: grid;
  grid-template-columns: 10ch minmax(0, 1fr);
  gap: 0 2ch;
  margin: 0 0 var(--cell-h);
  max-width: 90ch;
}
.pages .what {
  color: var(--dim);
}
.pages .what b {
  color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
::view-transition-group(card) {
  animation-duration: var(--t-move);
  animation-timing-function: var(--ease);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
  animation-timing-function: var(--ease);
}
::view-transition-group(bar) {
  animation-duration: 0s;
}
::view-transition-old(bar),
::view-transition-new(bar) {
  animation: none;
}