:root {
   
  --mark-dim: color-mix(in srgb, var(--ink) 48%, var(--ground));
   
  --edge: 16px;
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
}
html {
  background: var(--ground);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  

  font-synthesis: none;
}
body {
  margin: 0;
  padding: 16px var(--edge) 96px;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Handjet Cells', sans-serif;
  font-size: 17px;
  font-size: calc(17 * var(--u));
  line-height: 20px;
  line-height: calc(20 * var(--u));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body > .doc {
  margin-left: auto;
  margin-left: max(0px, round(down, calc((100% - 392 * var(--u)) / 2), var(--u)));
  margin-right: 0;
}


.doc {
  overflow-wrap: break-word;
}







.doc.top {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-top: -16px;
  padding-top: 16px;
  

  padding-bottom: calc(20 * var(--u));
  margin-bottom: calc(-20 * var(--u));
  background: var(--ground);
}





@supports (width: round(down, 1px, 1px)) {
  :is(body, dialog.menu-dlg) > .doc.top {
    --tl: 0px;
    --tw: min(56ch, 100% - var(--tl));
    width: auto;
    max-width: none;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
    padding-left: calc(var(--edge) + var(--tl));
    padding-right: calc(var(--edge) + 100% - var(--tl) - var(--tw));
  }
  body > .doc.top {
    --tl: max(0px, round(down, calc((100% - 392 * var(--u)) / 2), var(--u)));
  }
  .doc.top::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    background: var(--ground);
  }
}
.doc.top .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 calc(14 * var(--u));
  margin: 0;
}
.doc.top [data-menu-open],
.doc.top #menu-close {
  margin-left: auto;
}



[data-menu-open] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

 
.doc .summary {
  margin-top: 0;
}
.doc .date {
  margin-top: 0;
}
.doc h3 {
  font: inherit;
  margin: calc(40 * var(--u)) 0 0;
}


.doc h3 + :is(p, ul, ol, .codeblock, .tbl, figure) {
  margin-top: 0;
}
.doc :is(ul, ol) {
  margin: calc(20 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.doc li {
  position: relative;
  padding-left: calc(14 * var(--u));
}
.doc li :is(ul, ol),
.doc li > p {
  margin-top: 0;
}
.doc ul > li::before {
  content: '-';
  position: absolute;
  left: 0;
}
.doc ol {
  counter-reset: item;
}
.doc ol > li {
  counter-increment: item;
  padding-left: calc(21 * var(--u));
}
.doc ol > li::before {
  content: counter(item) '.';
  position: absolute;
  left: 0;
  font-family: 'Handjet Cells Mono', monospace;
}
.doc blockquote {
  margin: calc(20 * var(--u)) 0 0;
  padding-left: calc(12 * var(--u));
  border-left: calc(2 * var(--u)) solid var(--dim);
}
.doc blockquote > :first-child {
  margin-top: 0;
}


.doc strong {
  font-weight: normal;
  text-shadow: var(--u) 0 currentColor;
}
.doc em {
  font-style: normal;
  color: var(--dim);
}
.doc :is(li, td, th, figcaption, h2, h3, blockquote) code {
  background: var(--well);
  padding: 0 calc(2 * var(--u));
  color: var(--ink);
}
.doc pre code {
  background: none;
  padding: 0;
}
.doc hr {
  border: 0;
  margin: calc(20 * var(--u)) 0 0;
  height: calc(20 * var(--u));
  background: linear-gradient(var(--half), var(--half)) 0 calc(10 * var(--u)) / 100% var(--u)
    no-repeat;
}
.doc sup {
  line-height: 0;
}
.doc .tbl th {
  color: var(--dim);
}
.doc :is(img, video, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}
.doc figure {
  margin: calc(20 * var(--u)) 0 0;
}
.doc figcaption {
  color: var(--dim);
}
.doc :is(canvas, progress) {
  max-width: 100%;
}
 
.doc .fig canvas {
  max-width: none;
}
.doc figure .play {
  margin-top: 0;
}


.cellfig .f-k,
.cellfig .f-x {
  fill: var(--ink);
}
.cellfig .f-p,
.cellfig .f-y {
  fill: var(--ground);
}
.cellfig :is(.f-m, .f-b, .f-s) {
  fill: var(--dim);
}
.cellfig .f-r {
  fill: var(--well);
}
.cellfig text {
  font-family: 'Handjet Cells', sans-serif;
  font-size: 8.5px;
}
.cellfig.cf-wide {
  display: none !important;
}

 
.doc .cmd-line {
  white-space: nowrap;
}
.cmd-name,
.pref-name {
  display: inline-block;
  min-width: calc(84 * var(--u));
  color: var(--dim);
}
.ps {
  color: var(--dim);
}











.playground > p {
  width: fit-content;
}
.pg-frame {
  position: relative;
  box-sizing: border-box;
  max-width: calc(1922 * var(--u));
  margin-top: calc(20 * var(--u));
  border: var(--u) solid var(--ink);
}
.pg-view {
  width: 100%;
  height: min(calc(1080 * var(--u)), 70svh);
  


  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  cursor: grab;
}
.pg-view::-webkit-scrollbar {
  display: none;
}
.pg-view.dragging {
  cursor: grabbing;
}
 
.pg-world {
  position: relative;
  background-color: var(--ground);
  background-image: radial-gradient(var(--off) var(--u), transparent var(--u));
  background-size: calc(48 * var(--u)) calc(48 * var(--u));
  background-position: calc(24 * var(--u)) calc(24 * var(--u));
}
.pg-world .seat {
  position: absolute;
   
  translate: -50% 0;
}
.pg-frame .hands {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.pg-frame .pg-load {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  background: var(--ground);
}
.pg-frame .pg-load[hidden] {
  display: none;
}




main.front .body > h2 {
  color: var(--ink);
  margin-top: calc(20 * var(--u));
  padding-top: calc(20 * var(--u));
  background: linear-gradient(var(--half), var(--half)) 0 calc(10 * var(--u)) / 100% var(--u)
    no-repeat;
}
main.front .col > h2:first-child {
  margin-top: 0;
}




main.front li.entry {
  padding-left: 0;
  margin-top: calc(20 * var(--u));
}
main.front li.entry:first-child {
  margin-top: 0;
}
main.front li.entry::before {
  content: none;
}




main.front li.entry > .line {
  display: block;
}
body.listing main .body > ul > li > a:first-child:not(.cover),
body[data-n] main .body ul > li > a:first-child {
  display: block;
  width: fit-content;
}



body[data-n] main .body ul > li + li {
  margin-top: calc(20 * var(--u));
}
main.front .specimen {
  display: block;
  color: var(--dim);
}





main.front li.stack {
  container-type: inline-size;
}




main.front li.stack > .stk {
  --dx: min(calc(44 * var(--u)), 12.5cqi);
  --dy: calc(4 * var(--u));
  display: block;
  color: var(--ink);
  text-decoration: none;
  outline: none;
}
@supports (width: round(down, 1px, 1px)) {
  main.front li.stack > .stk {
    --dx: round(down, min(calc(44 * var(--u)), 12.5cqi), var(--u));
  }
}
main.front li.stack .name {
  display: inline-block;
  margin-bottom: calc(10 * var(--u));
}
main.front li.stack > .stk:is(:hover, .s-hover) .lnk {
  text-decoration-color: currentColor;
}
main.front li.stack > .stk:focus-visible .lnk {
  background: linear-gradient(var(--ink), var(--ink)) 0 calc(4 * var(--u)) / 100%
    calc(15 * var(--u)) no-repeat;
  color: var(--ground);
}
main.front li.stack > .stk:visited .lnk {
  color: var(--visited);
}



main.front li.stack .pile {
  position: relative;
  isolation: isolate;
  padding: calc(2 * var(--dy)) calc(2 * var(--dx)) 0 0;
}
main.front li.stack :is(.face, .bk) {
  outline: var(--u) solid var(--ink);
  outline-offset: calc(-1 * var(--u));
}
main.front li.stack .face {
  position: relative;
  z-index: 3;
  background: var(--ground);
}
main.front li.stack .bk {
  position: absolute;
  pointer-events: none;
  background: var(--well);
  overflow: hidden;
}
main.front li.stack .bk1 {
  z-index: 2;
  inset: var(--dy) var(--dx) var(--dy) var(--dx);
}
main.front li.stack .bk2 {
  z-index: 1;
  inset: 0 0 calc(2 * var(--dy)) calc(2 * var(--dx));
}
main.front li.stack :is(.face, .bk) img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
 
main.front li.stack .card {
  box-sizing: border-box;
  min-height: calc(120 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}




main.front li.stack .ttl {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(100 * var(--u));
  overflow: hidden;
}
main.front li.stack .ttl > li {
  margin: 0;
  padding: 0;
}
main.front li.stack .ttl > li::before {
  content: none;
}











@media (scripting: enabled) {
  main.front .carousel {
    container-type: inline-size;
    overflow: hidden;
    overscroll-behavior-x: contain;
  }
  main.front .carousel > ul {
    --slide: calc(var(--text, 100cqi) - 48 * var(--u));
    display: flex;
    align-items: flex-start;
    gap: calc(20 * var(--u));
    width: max-content;
    margin: 0;
    padding-inline-end: calc(
      100cqi - var(--span, 1) * (var(--slide) + 20 * var(--u)) + 20 * var(--u) + var(--over, 0px)
    );
  }
  @supports (width: round(down, 1px, 1px)) {
    main.front .carousel > ul {
      --slide: round(down, calc(var(--text, 100cqi) - 48 * var(--u)), var(--u));
    }
  }
  main.front .carousel li.entry {
    flex: none;
    width: var(--slide);
    margin-top: 0;
  }
  main.front .carousel[data-moving] {
    cursor: grabbing;
    user-select: none;
  }
  







  body[data-cols='sections'] main.front .carousel:has(> ul > li.stack) {
    overflow: visible;
  }
  body[data-cols='sections'] main.front .carousel:has(> ul > li.stack) > ul {
    display: block;
    width: auto;
    padding-inline-end: 0;
  }
  body[data-cols='sections'] main.front .carousel:has(> ul > li.stack) li.entry {
    break-inside: avoid;
  }
  body[data-cols='sections'] main.front .carousel:has(> ul > li.stack) li.entry + li.entry {
    margin-top: calc(20 * var(--u));
  }
}
@media (scripting: enabled) and (not ((hover: hover) and (pointer: fine))) {
   
  main.front .carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  main.front .carousel::-webkit-scrollbar {
    display: none;
  }
  main.front .carousel li.entry {
    scroll-snap-align: start;
  }
}






main.front .specimen[data-held],
main.front.arriving .body,
body:has(> main.front.arriving) > canvas.cells {
  visibility: hidden;
}
main.front.arriving .body,
body:has(> main.front.arriving) > canvas.cells {
  animation: let-go 0s 1.5s forwards;
}


@media (scripting: none) {
  main.front.arriving .body {
    animation: none;
    visibility: visible;
  }
}
@keyframes let-go {
  to {
    visibility: visible;
  }
}



@media (scripting: enabled) {
  .menu-foot {
    display: none;
  }
}
.menu-foot {
  margin-top: calc(40 * var(--u));
}
.doc .menu-links li {
  padding-left: 0;
}
.doc .menu-links li::before {
  content: none;
}


.doc .menu .bar {
  grid-column: 1 / -1;
  margin-bottom: calc(20 * var(--u));
}
.doc .menu .bar[hidden] {
  display: none;
}
.doc .bar .pinform p {
  margin: 0;
}
.doc .bar :is(.msg, .menu-links):empty {
  display: none;
}
 
.doc .bar .fieldw {
  display: flex;
}
.doc .bar .field.wide {
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
}







.doc .menu > .menu-links li + li {
  margin-top: calc(20 * var(--u));
}
@media (min-width: 261px) {
  .doc .menu > .menu-links {
    padding-left: calc(84 * var(--u));
  }
}
.doc .menu-prefs {
  margin-top: calc(40 * var(--u));
}


.doc .menu > .menu-links .lnk {
  text-decoration-color: transparent;
}
.doc .menu > .menu-links .lnk:is(:hover, .s-hover) {
  text-decoration-color: currentColor;
}
.doc .pref-line {
  margin-top: 0;
}
dialog.menu-dlg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  padding: 16px var(--edge) 96px;
  overflow: auto;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
}
dialog.menu-dlg::backdrop {
  background: var(--ground);
}







dialog.way {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  padding: 16px var(--edge) 96px;
  overflow: auto;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
}


dialog.way {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
 
dialog.way textarea {
  -webkit-user-select: text;
  user-select: text;
}
dialog.way::backdrop {
  background: var(--ground);
}
html:has(body > dialog.way[open]),
body:has(> dialog.way[open]) {
  overflow: hidden;
}
dialog.way > .doc {
  margin-left: auto;
  margin-left: max(0px, round(down, calc((100% - 392 * var(--u)) / 2), var(--u)));
  margin-right: 0;
}

 
.doc.prefs {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
  max-width: none;
  z-index: 6;
}
dialog#lander {
  padding: 0;
}
dialog#lander > .doc.lander {
  margin: 0;
}
.doc.lander {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  max-width: none;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: 72px 16px;
  box-sizing: border-box;
}
.mark {
  width: 316px;  
  max-width: 100%;
}
.mark svg {
  display: block;
  width: 100%;
  height: auto;
}
.mark-ink {
  fill: var(--ink);
}
.mark-dim {
  fill: var(--mark-dim);
}
.mark.live svg {
  visibility: hidden;
}
.mark-canvas {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.doc .go {
  margin: 0;
}

 






.doc.prefs {
  display: flex;
  justify-content: space-between;
  gap: 1ch;
}
.doc.prefs .lead {
  margin-right: auto;
}


dialog#chooser > .doc.prefs {
  position: static;
  margin-top: 0;
}
.doc.chooser {
  display: flex;
  flex-direction: column;
  margin-top: calc(20 * var(--u));
}
.doc.chooser .choices {
  display: contents;
}
.doc.chooser .if-terminal {
  margin-top: calc(60 * var(--u));
}


.doc.chooser .cmd-name {
  min-width: calc(16 * 7 * var(--u));
}


.doc.chooser h2.title {
  color: var(--ink);
  margin-top: calc(40 * var(--u));
}
.doc .previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--u));
}



.doc .ctl.pv-btn {
  display: grid;
  justify-items: center;
  gap: calc(10 * var(--u));
  padding: 0;
  white-space: normal;
}
.pv-btn .pv {
  justify-self: stretch;
}
dialog#chooser .pv-btn:is(:active, .s-active):not(:disabled) {
  color: var(--ink);
  background: none;
}
dialog#chooser .pv-btn:is(:active, .s-active) > .lbl {
  color: var(--ground);
  background: linear-gradient(var(--ink), var(--ink)) 0 calc(4 * var(--u)) / 100%
    calc(15 * var(--u)) no-repeat;
}


.pv {
  display: grid;
  aspect-ratio: 16 / 10;
  padding: calc(10 * var(--u));
  background: var(--well);
}
.pv i {
  display: block;
  background: var(--d25);
}
.pv.on i {
  background: var(--d50);
}
.pv.on i.on,
.pv.on .pv-title {
  background: var(--ink);
}
.pv-canvas {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: calc(4 * var(--u));
}
.pv-page {
  grid-template-rows: auto 1fr;
  gap: calc(10 * var(--u));
}
.pv .pv-title {
  width: 48%;
  height: calc(6 * var(--u));
}
.pv-body {
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: calc(10 * var(--u));
}
.pv-lines {
  display: grid;
  align-content: start;
  gap: calc(6 * var(--u));
}
.pv-lines i {
  height: calc(2 * var(--u));
}
.pv-lines i:nth-child(2) {
  width: 90%;
}
.pv-lines i:nth-child(4) {
  width: 56%;
}
.doc.cookies p {
  color: var(--dim);
}




@media (min-width: 261px) {
  dialog#lander {
    overflow: hidden;
    touch-action: none;
  }
}

 
@media (max-width: 260px) {
  .if-terminal,
  .if-agent,
  .doc .pv-btn .pv {
    display: none;
  }
  :root {
    --edge: 8px;
  }
   
  .doc.prefs {
    top: 4px;
    right: 8px;
  }
  .pref-name {
    display: block;
  }
   
  .doc.lander {
    justify-content: flex-start;
    gap: 0;
    padding-top: 0;
  }
  .mark {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
  }
}









body {
  container: page / inline-size;
}
.doc.lander {
  container: lander / inline-size;
}
:root {
  --ch: calc(7 * var(--u));
  --gut: calc(4 * var(--ch));
}
@media (hover: hover), (pointer: fine), (min-width: 600px) and (min-height: 600px) {
  










  @container page (min-width: calc(116 * 7em / 17)) {
    body.reading > :is(.top, main) {
      --text: calc(56 * var(--ch));
      --w: min(
        calc((var(--k, 1) * 60 - 4) * var(--ch)),
        calc(round(down, 100cqi + var(--gut), 60 * var(--ch)) - var(--gut))
      );
    }
    





    body.reading[data-laid] main .body > .cols {
      margin: calc(40 * var(--u)) 0 0;
    }
    body.reading[data-laid] main article > header > .ctx {
      max-width: var(--text);
    }
    



    body.reading[data-laid] main {
      overflow-anchor: none;
    }
    body.reading main .cols {
      display: grid;
      grid-template-columns: repeat(var(--k, 1), var(--text));
      column-gap: var(--gut);
      align-items: start;
    }
    body.reading main .col > * {
      box-sizing: border-box;
      max-width: var(--text);
    }
    body.reading main .col > :first-child {
      margin-top: 0;
    }
    body.reading main .col > :last-child {
      margin-bottom: 0;
    }
    


    body.reading main .span {
      position: relative;
      width: calc(var(--span) * var(--text) + (var(--span) - 1) * var(--gut));
      max-width: none;
       
      margin-left: calc(var(--shift, 0) * (var(--text) + var(--gut)) - var(--in, 0px));
    }
    

    body.reading main .col .shim {
      display: block;
      float: left;
      clear: left;
    }
    body.reading main .col > .codeblock {
      display: flow-root;
    }
     
    body.reading main .col > p.cont {
      text-indent: 0;
    }
  }
   
  @container page (min-width: calc(116 * 7em / 17)) {
    body.listing > :is(.top, main) {
      --w: min(
        calc((var(--n) * 60 - 4) * var(--ch)),
        calc(round(down, 100cqi + var(--gut), 60 * var(--ch)) - var(--gut))
      );
    }
    body.listing main .body > ul {
      display: grid;
      grid-template-columns: repeat(auto-fill, calc(56 * var(--ch)));
      column-gap: var(--gut);
      row-gap: calc(20 * var(--u));
    }
     
    dialog#chooser > * {
      --w: calc(116 * var(--ch));
      --pv: calc(56 * var(--ch));
    }
    dialog#chooser .previews {
      grid-template-columns: var(--pv) var(--pv);
      column-gap: var(--gut);
    }
    .doc.chooser > :not(.title, .choices),
    .doc.chooser .choices > :not(.previews) {
      max-width: calc(56 * var(--ch));
    }
     
  }
  @container page (min-width: calc(146 * 7em / 17)) {
    :is(body.menu-page, dialog.menu-dlg) > * {
      --w: calc(146 * var(--ch));
    }
    :is(body.menu-page, dialog.menu-dlg) .menu {
      display: grid;
      grid-template-columns: calc(26 * var(--ch)) calc(41 * var(--ch)) minmax(0, 1fr);
      column-gap: var(--gut);
      align-items: start;
    }
    :is(body.menu-page, dialog.menu-dlg) .menu > * {
      margin-top: 0;
    }
     
    :is(body.menu-page, dialog.menu-dlg) .menu > :is(.menu-links, .menu-prefs) {
      grid-column: 2;
    }
    :is(body.menu-page, dialog.menu-dlg) .menu > .menu-prefs {
      margin-top: calc(40 * var(--u));
    }
  }
  @container page (min-width: calc(176 * 7em / 17)) {
    dialog#chooser > * {
      --w: calc(176 * var(--ch));
      --pv: calc(86 * var(--ch));
    }
  }
   
  @container lander (min-width: calc(176 * 7em / 17)) {
    .mark {
      width: 632px;  
    }
  }
  @container lander (min-width: calc(296 * 7em / 17)) {
    .mark {
      width: 948px;  
    }
  }

  


  :is(body > :is(.top, main, .menu-foot), dialog.menu-dlg > *),
  dialog#chooser > * {
    width: var(--w, calc(56 * var(--ch)));
    max-width: 100%;
    margin-left: max(0px, round(down, calc((100% - var(--w, 56 * var(--ch))) / 2), var(--u)));
  }
   
  @supports (width: round(down, 1px, 1px)) {
    :is(body, dialog.menu-dlg) > .doc.top {
      --tl: max(0px, round(down, calc((100% - var(--w, 56 * var(--ch))) / 2), var(--u)));
      --tw: min(var(--w, calc(56 * var(--ch))), 100%);
      width: auto;
      max-width: none;
      margin-left: calc(-1 * var(--edge));
    }
  }
}