/* Built programmatically; do not edit by hand. */
@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"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-mono-600.woff2) format("woff2"); }

/* The animation's own colors; everything else comes from the site's tokens. */
.lev { --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --edge: #b9b8b1; --in: #1d4ed8; --bad: #c2410c; --band: #eaeef8; --cand: #9a9890; --hl: #f2c230; --hl-edge: #c9950f; --hl-soft: #fcf1cc; --cost: #d55e00; --add: #0072b2; --pill: #ecebe6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lev { --edge: #4a505b; --in: #a3b3ee; --bad: #f0875f; --band: #232a38; --cand: #7c8089; --hl: #e3b93a; --hl-edge: #e3b93a; --hl-soft: #3a3322; --cost: #f0875f; --add: #56b4e9; --pill: #2a2f38; }
}
:root[data-theme="dark"] .lev { --edge: #4a505b; --in: #a3b3ee; --bad: #f0875f; --band: #232a38; --cand: #7c8089; --hl: #e3b93a; --hl-edge: #e3b93a; --hl-soft: #3a3322; --cost: #f0875f; --add: #56b4e9; --pill: #2a2f38; }

.lev { max-width: 1120px; margin: 0.5rem auto 1rem; }

.lev .figure:focus { outline: none; }
.lev .figure:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lev [hidden] { display: none !important; }
.lev .figure > * { min-width: 0; }
.lev .figure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); display: grid; }
.lev .picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); align-items: center; }
.lev .picker .lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-right: 8px; }
.lev .picker button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.lev .picker .soon { font-size: 0.75rem; color: var(--text-muted); margin-left: 4px; }
.lev .pair { padding: 10px 18px 0; font-size: 0.92rem; display: grid; gap: 2px; }
.lev .pair div { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.lev .pair .lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); min-width: 9rem; }
.lev .pair code { font-family: var(--font-mono); font-size: 0.9rem; white-space: nowrap; }
.lev .pair .w { border-radius: 2px; transition: background-color .6s, color .6s, box-shadow .6s; }
.lev .pair .w.flash { background-color: var(--hl-soft); box-shadow: 0 0 0 3px var(--hl-soft); color: var(--hl-edge); }
.lev .svgwrap { overflow-x: auto; padding: 4px 10px 0; }
.lev svg#lev-grid { display: block; width: 100%; min-width: 760px; height: auto; }
.lev svg text { font-family: var(--font-mono); }
.lev .hdr { fill: var(--text-muted); font-size: 12.5px; }
.lev .hdr.axis { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; }
.lev .rowlbl { fill: var(--text); font-size: 13.5px; }
.lev .cell rect { fill: transparent; stroke: var(--border-strong); stroke-width: 1; transition: fill .4s, stroke .4s; }
.lev .cell text { fill: var(--text); font-size: 15px; transition: opacity .3s, fill .4s; }
.lev .cell.pending text { opacity: 0; }
.lev .cell.empty rect { stroke: var(--border); }
.lev .cell.band rect { fill: var(--band); }
.lev .cell.out text { fill: var(--text-muted); }
.lev .cell .hatch { fill: url(#lev-hatch); opacity: 0; transition: opacity .5s; pointer-events: none; }
.lev .hatchline { stroke: var(--border-strong); stroke-width: 1.2; }
.lev .cell.ref:not(.pending):not(.empty) .hatch { opacity: 1; }
.lev .row.faded .cell.ref:not(.pending) .hatch { opacity: 0.5; }
.lev .cell.ref text { fill: var(--text-muted); }
.lev .cell.ref:not(.pending) text { opacity: 0.6; }
.lev .cell.over text, .lev .cell.min.over text { fill: var(--bad); font-weight: 600; }
.lev .cell.focus rect { stroke: var(--hl-edge); stroke-width: 2.5; fill: var(--hl-soft); }
.lev .cell.nbr rect { stroke: var(--hl-edge); stroke-width: 2; stroke-dasharray: 3 2; }
.lev .hdr.cur, .lev .rowlbl.cur { fill: var(--hl-edge); font-weight: 600; }
.lev .hdr { transition: fill .3s; }
.lev .tgtspan { stroke: var(--hl-edge); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.lev .cell.min rect { stroke: var(--in); stroke-width: 2.5; }
.lev .cell.min text { font-weight: 600; fill: var(--in); }
.lev .cell.onpath text { font-weight: 600; }
.lev .row { transition: opacity .6s; }
.lev .row.future { opacity: 0; }
.lev .rowlbl { transition: opacity .6s, fill .3s; }
.lev .row.future .rowlbl, .lev .row.arriving .rowlbl { opacity: 0; }
.lev .row.faded .cell:not(.onpath) text { opacity: 0.3; }
.lev .row.current .rowlbl { font-weight: 600; }
.lev .row.faded .cell.inband:not(.onpath) text { opacity: 0.45; }
.lev .row.faded .cell.inband rect { fill: var(--band); fill-opacity: 0.38; }
.lev .row.faded .cell.offband:not(.onpath) text { opacity: 0.16; }
.lev .row.faded .cell:not(.onpath) rect { stroke: var(--border); }
.lev .arr line { stroke: var(--edge); stroke-width: 1.3; transition: opacity .3s, stroke .3s; }
.lev .arr text { fill: var(--cand); font-size: 11.5px; font-family: var(--font-body); font-weight: 600; transition: opacity .3s; }
.lev .arr.cand line { stroke: var(--hl-edge); stroke-dasharray: 3 2; }
.lev .arr.cand text { fill: var(--cost); font-size: 12.5px; }
.lev .arr.win line { stroke: var(--text-muted); stroke-dasharray: none; stroke-width: 1.6; }
.lev .arr.cand.win line { stroke-dasharray: none; stroke-width: 2.2; }
.lev .arr.win text { fill: var(--text); }
.lev .arr.path line { stroke: var(--in); stroke-width: 2.2; }
.lev .arr.faded line { opacity: 0.25; }
.lev .strip { transition: opacity .3s; }
.lev .pair { transition: opacity .35s; }
.lev .pair text { font-size: 13px; fill: var(--text); }
.lev .pair.sub .t, .lev .pair.ins .t { fill: var(--cost); text-decoration: line-through; }
.lev .pair.sub .g, .lev .pair.del .g { fill: var(--add); font-weight: 600; text-decoration: underline; }
.lev .pair.ins .g, .lev .pair.del .t { fill: var(--text-muted); }
.lev .badge { transition: opacity .3s; }
.lev .badge-lbl { font-family: var(--font-body); font-size: 11px; fill: var(--text-muted); letter-spacing: 0.04em; }
.lev .badge-pill { fill: var(--pill); }
.lev .badge-num { font-size: 12px; font-weight: 600; fill: var(--text); }
.lev .badge-chk { font-family: var(--font-body); font-size: 14px; font-weight: 600; fill: var(--in); }
.lev .badge.bad .badge-pill { fill: var(--bad); }
.lev .badge.bad .badge-num { fill: var(--bg); }
.lev .badge.bad .badge-chk { fill: var(--bad); }
.lev .bandbox { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 5 3; transition: opacity .3s; }
.lev .bandtag { fill: var(--text-muted); font-family: var(--font-body); font-size: 11.5px; }
.lev .bandtagbg { fill: var(--bg); }
.lev .bandtagg { transition: opacity .3s; }
.lev .caption { min-height: 5.6em; padding: 10px 18px 4px; margin: 0; }
.lev .caption { color: var(--text-muted); }
.lev .caption .seq { font-family: var(--font-mono); font-size: 0.92em; white-space: nowrap; color: var(--text); }
.lev .caption i { padding-right: 0.12em; }
.lev .caption .brk { display: block; height: 0.45em; }
.lev .caption .hl { color: var(--hl-edge); font-weight: 600; }
.lev .legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.85rem; color: var(--text-muted); margin: 4px 18px 0; padding: 0; list-style: none; }
.lev .legend li { display: flex; align-items: center; gap: 7px; transition: opacity .4s; }
.lev .legend li.pending { opacity: 0; visibility: hidden; }
.lev .legend li.new { animation: legend-in 1.6s ease-out; }
@keyframes legend-in { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; transform: none; color: var(--text); } 100% { color: var(--text-muted); } }
@media (prefers-reduced-motion: reduce) {
  .lev .legend li.new { animation: none; }
}
@media (max-width: 720px) {
  .lev .pair code { white-space: normal; }
}
.lev .legend .sw { display: inline-block; width: 18px; height: 12px; border-radius: 2px; }
.lev .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px 14px; border-top: 1px solid var(--border); }
.lev .btns { display: flex; gap: 6px; }
.lev button {
    font: inherit; font-size: 0.9rem; color: var(--text); background: var(--bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 5px 12px; cursor: pointer;
  }
.lev button:hover { border-color: var(--text-muted); }
.lev button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lev button:disabled { opacity: 0.4; cursor: default; }
.lev .where { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Word sequences in the intro text: monospace like the captions, but free to wrap. */
.lev-seq { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; color: var(--text); }
/* The one-word shift example (Figure 2). */
.lev .lev-shift { margin: 1.25rem auto 1.5rem; max-width: 44rem; overflow-x: auto; }
.lev .lev-shift-h { margin: 0.9rem 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.lev .lev-shift-grid { display: grid; grid-template-columns: auto repeat(9, auto); gap: 0.2rem 0.9rem; justify-content: start;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); white-space: nowrap; }
.lev .lev-shift-grid .lbl { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); align-self: center; padding-right: 0.4rem; }
.lev .lev-shift-grid .diff { color: var(--cost); }
.lev .lev-shift-grid .miss { color: var(--cost); text-decoration: line-through; }
.lev .lev-shift-grid .extra { color: var(--add); font-weight: 600; text-decoration: underline; }
.lev .lev-shift-grid .gap { color: var(--text-muted); text-align: center; }
.lev .lev-shift-note { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-muted); }