.fc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
}
.stack {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--bar-h) - var(--nav-h));
  overflow: hidden;
  border-right: 1px solid var(--edge);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  view-transition-name: stack;
}
.stack .track {
  position: absolute;
  inset: 0;
}
html.js .stack .card {
  position: absolute;
  top: 0;
  left: 14px;
  width: 212px;
  height: 88px;
  will-change: transform, opacity;
}
html.js .stack.ready .card {
  transition: transform var(--t-soft) var(--ease-soft), opacity var(--t-soft) var(--ease-soft);
}
.stack .card:focus-visible {
  outline-offset: -2px;
}
.stack .card .g {
  transition: background-color var(--t-soft) var(--ease-soft), color var(--t-soft) var(--ease-soft);
}
html:not(.js) .stack {
  position: static;
  height: auto;
  overflow: visible;
}
html:not(.js) .stack .track {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.case.buffer {
  overflow: visible;
  padding: 0;
  min-width: 0;
}
.case:focus {
  outline: none;
}
.case .intro {
  padding: 22px 40px 0;
}
.case .intro h1 {
  margin-bottom: 0;
}
.scrolly {
  display: grid;
  grid-template-columns: minmax(0, 62ch) minmax(280px, 460px);
  column-gap: 56px;
  align-items: start;
  justify-content: start;
  padding: var(--cell-h) 40px 0;
}
.steps {
  grid-column: 1;
  grid-row: 1;
}
.scrolly.nofig {
  grid-template-columns: minmax(0, 62ch);
}
.steps > section:first-child h2 {
  margin-top: 0;
}
.verdict .head {
  display: block;
  margin: 0 0 var(--cell-h);
}
.steps .endprompt {
  margin: var(--cell-h) 0 0;
}
.steps .notadvice {
  margin-top: 24px;
  max-width: 62ch;
  font: 400 14px / 20px var(--sans);
  color: var(--dim);
  text-wrap: pretty;
}
.fc .stamp,
.fc .stamp.in {
  animation: none;
}
.verdict .number {
  margin: 0;
  row-gap: 0;
}
.verdict .number .rest {
  color: var(--dim);
}
.fc .number .match,
.fc .number .match.in {
  opacity: 1;
  animation: none;
}
.verdict .note {
  margin: 4px 0 0;
  color: var(--dim);
}
.verdict .head .ln {
  padding-left: 11ch;
  text-indent: -11ch;
}
.verdict .head .ln > * {
  text-indent: 0;
}
.verdict .number {
  column-gap: 1ch;
  padding-left: 11ch;
}
.verdict .number .k {
  margin: 0 -1ch 0 -11ch;
}
.verdict .number .rest {
  margin-right: 1ch;
}
.verdict .note {
  padding-left: 11ch;
}
html {
  scroll-padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px) + 16px);
}
.unfold {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
}
.unfold .plot svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.unfold .plot .compact {
  display: none;
}
.figcap {
  margin: 0 0 6px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
  max-width: 68ch;
}
.figcap .chrome {
  margin-right: 1ch;
}
.cap-narrow {
  display: none;
}
.steps {
  padding-bottom: calc(3 * var(--cell-h));
}
.dw .ko {
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.dw .gap-line {
  stroke: var(--dim);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  fill: none;
}
.dw .lev {
  stroke: var(--ink);
  stroke-width: 1;
}
.dw .bracket {
  stroke: var(--dim);
  stroke-width: 1;
  fill: none;
}
.dw .kill {
  stroke: var(--chrome);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.dw .band {
  fill: var(--ink);
  fill-opacity: .07;
}
.dw .ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}
.dw .seg {
  fill: var(--dim);
}
.dw .seg.ink {
  fill: var(--ink);
}
.dw .hole {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.dw .hole.dotted {
  stroke-dasharray: 1 2;
}
.dw .hole.on {
  stroke: var(--ink);
  stroke-dasharray: none;
}
.dw .hatch {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-opacity: .55;
}
.dw .fdot {
  fill: var(--dim);
  fill-opacity: .7;
}
.dw .cell-solid {
  fill: var(--ink);
}
.dw .cell-hollow {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1;
}
.dw .cell-x {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1;
}
.dw .glyph {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: square;
}
.dw .glyph path {
  vector-effect: non-scaling-stroke;
}
@media (max-width: 1099px) {
  .fc {
    grid-template-columns: minmax(0, 1fr);
  }
  .stack {
    position: relative;
    top: auto;
    height: 100px;
    border-right: 0;
    border-bottom: 1px solid var(--edge);
    touch-action: pan-y;
  }
  html.js .stack .card {
    top: 12px;
    left: 0;
    height: 76px;
  }
  html:not(.js) .stack .track {
    flex-direction: row;
    overflow-x: auto;
  }
  html:not(.js) .stack .card {
    flex: none;
    width: 212px;
    height: 76px;
  }
  .case .intro {
    padding: 18px 28px 0;
  }
  .scrolly {
    grid-template-columns: minmax(0, 62ch) minmax(280px, 420px);
    column-gap: 40px;
    padding: var(--cell-h) 28px 0;
  }
}
@media (max-width: 899px) {
  .case .intro {
    padding: 16px 16px 0;
  }
  .scrolly {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
  }
  .unfold {
    order: -1;
    position: sticky;
    top: var(--nav-h);
    z-index: 3;
    margin: 0 0 var(--cell-h);
    padding: 10px 0 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--edge);
  }
  .unfold .plot {
    min-width: 0;
    max-width: 440px;
  }
  .unfold .plot .wide,
  .unfold .cap-wide {
    display: none;
  }
  .unfold .plot .compact {
    display: block;
  }
  .cap-narrow {
    display: block;
    margin: calc(2 * var(--cell-h)) 0 0;
  }
}
@media (max-width: 959px) {
  .bar .pl {
    display: none;
  }
  .bar .ps {
    display: inline;
  }
}
@view-transition {
  navigation: auto;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--t-soft);
  animation-timing-function: var(--ease-soft);
}
::view-transition-group(bar) {
  animation-duration: 0s;
}
::view-transition-old(bar),
::view-transition-new(bar) {
  animation: none;
}