/* The listing page is a sheet in the page's ground colour that slides up over the map and stays. Its colours are the tokens in base.css. */
#listing.ls {
  --nav-h: 56px; --ease: cubic-bezier(.2,.8,.2,1);
  position: relative; z-index: 60; display: block; background: var(--bg); color: var(--ink);
  border-radius: 24px 24px 0 0; box-shadow: var(--sheet-shadow);
  margin-top: calc(-1 * var(--sheet-overlap, 0px));
  overflow-x: clip; font-size: 16px; line-height: 1.5;
}
:where(.ls) :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; }
:where(.ls) :where(ol, ul) { list-style: none; }
.ls h1:focus { outline: none; }
.ls h1 { margin: 0; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }
.ls h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.16; letter-spacing: -.022em; font-weight: 700; }
.ls h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.22; letter-spacing: -.016em; font-weight: 650; }
.ls h4 { margin: 0; font-size: 15px; line-height: 1.32; font-weight: 650; }
:where(.ls) p + p { margin-top: 0; }
.ls-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.ls-star { width: .82em; height: .82em; fill: currentColor; flex: none; vertical-align: -.03em; }
.ls-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ls-dot { color: var(--ink2); margin: 0 .36em; }
.ls-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.ls-lead { color: var(--ink2); font-size: 16px; margin-bottom: 24px; }
.ls-after { margin-top: 24px; }
.ls-made { font-size: 15px; font-weight: 600; line-height: 1.35; }

/* top */
.ls-handle { display: none; }
.ls-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.ls-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; justify-self: start; font-size: 15px; font-weight: 600; text-decoration: none; padding: 0 14px 0 8px; margin-left: -8px; border-radius: 999px; }
@media (hover: hover) { .ls-back:hover { background: var(--bg2); } }
.ls-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-mark { color: var(--logo, #FF385C); font-size: 25px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ls-nav { position: sticky; top: var(--chrome, 0px); z-index: 8; background: var(--bg); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.ls-nav-in { display: flex; gap: 16px; height: var(--nav-h); align-items: stretch; }
.ls-nav a { display: flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 6px; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 transparent; transition: box-shadow .16s; }
.ls-nav a:first-child { margin-left: -6px; }
@media (hover: hover) { .ls-nav a:hover { box-shadow: inset 0 -2px 0 var(--line); } }
.ls-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--ink); }
.ls-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* title and gallery */
.ls-title { padding: 28px 0 24px; }
.ls-line { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 8px; font-size: 18px; font-weight: 500; }
.ls-line .ls-star { margin-right: 6px; align-self: center; width: 15px; height: 15px; }
.ls-line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ls-line [data-unit] { margin-left: .28em; }
.ls-gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: clamp(300px, 44vh, 440px); border-radius: 16px; overflow: hidden; }
.ls-ph { min-width: 0; min-height: 0; background: var(--bg2); overflow: hidden; }
.ls-ph--big { grid-row: 1 / span 2; }
.ls-ph img { width: 100%; height: 100%; object-fit: cover; }
.ls-gal-dots { display: none; }

/* columns */
.ls-cols { display: grid; grid-template-columns: minmax(0, 640px) 340px; justify-content: space-between; column-gap: 64px; }
.ls-col { min-width: 0; }
.ls-side { position: relative; padding-top: 40px; }
.ls-sec { padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--chrome, 0px) + var(--nav-h) + 8px); }
.ls-col > .ls-sec:first-child { border-top: 0; padding-top: 40px; }
.ls-col > .ls-sec:last-child { padding-bottom: 56px; }

/* effort card */
.ls-card { position: sticky; top: calc(var(--chrome, 0px) + var(--nav-h) + 24px); padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.ls-card { transition: opacity .18s, visibility .18s; }
.ls-card.is-off { opacity: 0; visibility: hidden; }
.ls-card-l { font-size: 12px; font-weight: 700; letter-spacing: .01em; margin-bottom: 10px; }
.ls-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.ls-day { height: 44px; border-radius: 12px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .14s, color .14s, box-shadow .14s; }
@media (hover: hover) { .ls-day:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.ls-day[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.ls-day--max { color: var(--ink2); text-decoration: line-through; background: repeating-linear-gradient(135deg, var(--max-a) 0 2px, var(--max-b) 2px 6px); }
.ls-day--max[aria-pressed="true"] { background: repeating-linear-gradient(135deg, var(--max-a-on) 0 2px, var(--max-b) 2px 6px); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.ls-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line2); }
.ls-num-v { display: flex; align-items: center; gap: 7px; font-size: 38px; line-height: 1.05; letter-spacing: -.03em; font-weight: 750; font-variant-numeric: tabular-nums; }
.ls-num-v .ls-star { width: 24px; height: 24px; }
.ls-num-l { margin-top: 4px; font-size: 14px; color: var(--ink2); }
.ls-maxnote { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); font-size: 14px; line-height: 1.45; color: var(--ink2); }
.ls-maxnote > p { overflow: hidden; min-height: 0; }
.ls-maxnote.is-on { grid-template-rows: 1fr; }
.ls-maxnote.is-on > p { padding-top: 14px; }
/* On a phone the sheet holds the note's space, so choosing max doesn't move the buttons. */
.ls-bar-sheet .ls-maxnote { grid-template-rows: 1fr; transition: none; visibility: hidden; }
.ls-bar-sheet .ls-maxnote > p { padding-top: 14px; }
.ls-bar-sheet .ls-maxnote.is-on { visibility: visible; }

/* suite scores */
.ls-rooms { margin-top: 24px; display: grid; gap: 14px; }
.ls-room { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; column-gap: 16px; align-items: center; }
.ls-room img { width: 72px; height: 52px; object-fit: cover; border-radius: 12px; background: var(--bg2); }
.ls-room-b { display: block; min-width: 0; }
.ls-room-n { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ls-rb { display: block; height: 4px; margin-top: 8px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.ls-rb i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width .55s var(--ease); transition-delay: calc(var(--i, 0) * 24ms); }
.ls-room-v { text-align: right; font-size: 18px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* bars grow the first time you reach them */
.ls-grow i { transform: scaleX(0); transform-origin: left center; }
.ls-grow.is-in i { transform: none; transition: transform .7s var(--ease), width .55s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }

/* one-shot stat */
.ls-stat { font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.012em; }
.ls-stat b { display: inline-block; font-size: 60px; line-height: 1.06; letter-spacing: -.04em; font-weight: 800; vertical-align: -.06em; margin-right: .05em; }
.ls-stat b:last-child { margin: 0 0 0 .05em; }

/* the long-horizon task */
.ls-band { width: 100%; height: 132px; object-fit: cover; object-position: 50% 46%; border-radius: 16px; background: var(--bg2); }
.ls-stay { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 14px; margin-top: 24px; padding-top: 22px; }
.ls-stay::before { content: ''; position: absolute; left: 6px; right: 0; top: 5px; height: 2px; background: var(--line); transform-origin: left; }
.ls-stay li { position: relative; font-size: 14.5px; line-height: 1.34; font-weight: 500; }
.ls-stay li::before { content: ''; position: absolute; left: 0; top: -22px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg); }

/* the session game */
.ls-game { margin-top: 28px; }
.ls-play { margin-top: 20px; }
.ls-chat { display: grid; position: relative; }
.ls-turn { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; visibility: hidden; opacity: 0; position: relative; transform-origin: 50% 50%; }
.ls-turn.is-on { visibility: visible; opacity: 1; animation: ls-turn-in .34s var(--ease); }
@keyframes ls-turn-in { from { opacity: 0; transform: translateY(10px); } }
.ls-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; }
.ls-msg p { padding: 12px 16px; font-size: 16px; line-height: 1.38; border-radius: 20px; }
.ls-msg--a p { background: var(--bg2); border-bottom-left-radius: 6px; }
.ls-msg--e { align-self: flex-end; }
.ls-msg--e p { background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 6px; }
.ls-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.ls-av svg { width: 18px; height: 18px; }
.ls-av--a { background: var(--line2); } .ls-av--a svg { fill: var(--ink); }
.ls-av--e { background: var(--line2); } .ls-av--e svg { fill: var(--ink2); }
.ls-chip { align-self: center; min-height: 30px; padding: 5px 14px; font-size: 14px; font-weight: 600; line-height: 20px; border: 1px solid var(--ink); border-radius: 999px; visibility: hidden; opacity: 0; transform: scale(.92); transition: opacity .18s, transform .28s var(--ease); }
.ls-turn.is-told .ls-chip { visibility: visible; opacity: 1; transform: none; }
.ls-pips { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.ls-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s; }
.ls-pips i.is-on { background: var(--ink); }
.ls-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ls-ask button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--ink); font-size: 15px; font-weight: 600; line-height: 1.2; transition: background .14s, color .14s, opacity .14s; }
@media (hover: hover) { .ls-ask button:hover:not(.is-locked) { background: var(--bg2); } }
.ls-ask button.is-locked { cursor: default; opacity: .55; }
.ls-ask button.is-right { background: var(--ink); color: var(--on-ink); opacity: 1; }
.ls-ask button.is-wrong { opacity: 1; }
.ls-mk { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ls-trays:focus { outline: none; }
.ls-trays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ls-tray { padding: 14px; background: var(--bg2); border-radius: 16px; }
.ls .ls-tray h4 { font-size: 14px; margin-bottom: 10px; }
.ls-stack { position: relative; min-height: 92px; display: flex; flex-direction: column; gap: 0; }
.ls-stack:empty::before { content: ''; flex: 0 0 44px; border: 1.5px dashed var(--line); border-radius: 12px; }
.ls-mini { background: var(--card); border-radius: 12px; padding: 11px 12px; font-size: 14px; font-weight: 600; line-height: 1.25; box-shadow: 0 1px 3px rgba(0,0,0,.14); transform-origin: 50% 100%; }
.ls-mini:nth-child(odd) { transform: rotate(-.9deg); }
.ls-mini:nth-child(even) { transform: rotate(.8deg); margin-top: 4px; }
.ls-game.is-done .ls-trays { margin-top: 16px; }

/* which cases stay */
.ls-keep { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px; align-items: center; }
.ls-keep-fig { position: relative; padding: 24px 42px 46px 34px; }
.ls-keep-plot { position: relative; aspect-ratio: 1; }
.ls-keep-plot svg { display: block; width: 100%; height: 100%; border-radius: 12px 6px 12px 12px; shape-rendering: crispEdges; }
.z-keep { fill: var(--z-keep); } .z-res { fill: var(--z-res); } .z-drop { fill: var(--z-drop); }
.ls-z { position: absolute; transform: translate(-50%, 50%); font-size: 13px; font-weight: 650; line-height: 1; pointer-events: none; }
.ls-z--keep { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ls .ls-z--drop { left: calc(100% + 7px) !important; bottom: 95%; transform: translateY(50%); font-size: 13px; }
.ls-tick { position: absolute; font-size: 12px; line-height: 1; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ls-tick--x { top: calc(100% + 7px); transform: translateX(-50%); }
.ls-tick--y { right: calc(100% + 7px); transform: translateY(50%); }
.ls-keep-x { position: absolute; left: 34px; right: 42px; bottom: 0; text-align: center; font-size: 13px; font-weight: 600; }
.ls-keep-y { position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 600; }
.ls-keep-say { font-size: 20px; line-height: 1.36; font-weight: 500; letter-spacing: -.008em; }

/* score a wrong answer first */
.ls-ladder { display: grid; gap: 12px; margin-top: 8px; }
.ls-rung { display: grid; grid-template-columns: 158px minmax(0, 1fr) 36px; column-gap: 12px; align-items: center; }
.ls-rung-n { font-size: 15px; line-height: 1.25; }
.ls-rung-t { display: block; height: 14px; }
.ls-rung-t i { display: block; height: 100%; background: var(--grey); border-radius: 7px; }
.ls-rung-v { text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink2); }
.ls-rung.is-wrong .ls-rung-n { font-weight: 650; }
.ls-rung.is-wrong .ls-rung-t i { background: var(--ink); }
.ls-rung.is-wrong .ls-rung-v { color: var(--ink); }
.ls-sub-t { grid-column: 2; display: block; height: 4px; margin-top: 8px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.ls-sub-t i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.ls-sub-n { grid-column: 2 / span 2; margin-top: 5px; font-size: 13.5px; line-height: 1.3; font-weight: 500; }

/* coverage */
.ls-cov { position: relative; padding: 0 0 0 30px; margin-top: 8px; }
.ls-axis-y { display: block; margin: 0 0 26px -30px; font-size: 13px; font-weight: 600; }
.ls-axis-x { display: block; margin-top: 30px; font-size: 13px; font-weight: 600; text-align: right; }
.ls-cov-plot { position: relative; height: 280px; }
.ls-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line2); transform: translateY(.5px); }
.ls-cov-plot .ls-tick--y { right: calc(100% + 9px); }
.ls-cov-plot .ls-tick--x { top: calc(100% + 10px); }
.ls-guide { position: absolute; }
.ls-guide--v { bottom: 0; width: 0; border-left: 1px dashed var(--grey); }
.ls-guide--h { left: 0; height: 0; border-top: 1px dashed var(--grey); }
.ls-cov-dot { position: absolute; width: 16px; height: 16px; margin: 0 0 -8px -8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg); }
.ls-cov-l { position: absolute; width: max-content; display: block; line-height: 1.28; font-size: 15px; }
.ls-cov-l b { display: block; font-weight: 650; background: var(--bg); }
.ls-cov-r { display: flex; gap: 12px; font-size: 14px; color: var(--ink2); font-variant-numeric: tabular-nums; background: var(--bg); }
.ls-cov-r span + span { position: relative; }
.ls-cov-r span + span::before { content: ''; position: absolute; left: -7px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--ink2); }
.ls-cov-dot--0 .ls-cov-l { right: 0; bottom: 22px; text-align: right; }
.ls-cov-dot--0 .ls-cov-r, .ls-cov-dot--1 .ls-cov-r { justify-content: flex-end; }
.ls-cov-dot--1 .ls-cov-l { right: 26px; top: 50%; transform: translateY(-50%); text-align: right; }
.ls-cov-dot--2 .ls-cov-l { left: 26px; top: -2px; }

/* the review number line */
.ls-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin-top: 24px; padding: 4px; border-radius: 999px; background: var(--bg2); max-width: 100%; }
.ls-seg button { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.15; transition: background .18s, color .18s; }
.ls-seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.ls-seg b { margin-left: .2em; font-weight: 800; font-variant-numeric: tabular-nums; }
.ls-nl { --row: 33px; --axis: calc(var(--row) * 5 + 12px); position: relative; height: calc(var(--axis) + 62px); margin-top: 24px; }
.ls-nl-axis { position: absolute; left: 0; right: 0; top: var(--axis); height: 2px; margin-top: -1px; background: var(--line); }
.ls-nl-tick { position: absolute; top: calc(var(--axis) + 12px); transform: translateX(-50%); font-size: 12px; line-height: 1; color: var(--ink2); }
.ls-nl-f { position: absolute; top: 0; width: 0; height: var(--axis); transition: left .85s cubic-bezier(.35,.9,.25,1); }
.ls-nl-pole { position: absolute; left: -.5px; width: 1px; background: var(--grey); top: calc(var(--lv) * var(--row) + 12px); bottom: 0; }
.ls-nl-dot { position: absolute; left: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.ls-nl-tag { position: absolute; left: 0; top: calc(var(--lv) * var(--row)); transform: translateX(-50%); display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; white-space: nowrap; background: var(--card); border-radius: 999px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.2); font-size: 13px; font-variant-numeric: tabular-nums; transition: background .18s, color .18s; z-index: 1; }
.ls-nl-tag b { font-weight: 650; }
.ls-nl-f.is-on .ls-nl-tag { background: var(--ink); color: var(--on-ink); }
.ls-nl-br { position: absolute; top: calc(var(--axis) + 36px); height: 10px; border: 1.5px solid var(--ink); border-top: 0; border-radius: 0 0 5px 5px; transition: left .85s cubic-bezier(.35,.9,.25,1), width .85s cubic-bezier(.35,.9,.25,1); }
.ls-nl-lead { margin-top: 14px; }

/* the blind path */
.ls-blind { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ls-tk { display: inline-flex; align-items: center; max-width: 100%; min-height: 48px; padding: 10px 16px; border-radius: 12px; background: var(--bg2); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 16px; line-height: 1.3; }
@media (hover: hover) { .ls-tk:hover { background: var(--line2); } }
.ls-tk-p { position: relative; display: inline-block; height: 1.3em; white-space: nowrap; transition: width .3s var(--ease); }
.ls-tk-a, .ls-tk-b { position: absolute; left: 0; top: 0; }
.ls-tk-b { visibility: hidden; }
.ls-tk.is-blind .ls-tk-a { visibility: hidden; }
.ls-tk.is-blind .ls-tk-b { visibility: visible; font-weight: 650; }
.ls-tk-bar { position: absolute; inset: -1px -2px; background: var(--ink); border-radius: 3px; transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .34s var(--ease), opacity .2s; }
.ls-tk.is-wipe .ls-tk-bar { transform: scaleX(1); opacity: 1; }
.ls-tk-s { white-space: nowrap; }
.ls-steps { counter-reset: st; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 14px 28px; margin-top: 24px; }
.ls-steps li { counter-increment: st; position: relative; padding-left: 34px; font-size: 15px; line-height: 1.34; min-height: 24px; }
.ls-steps li::before { content: counter(st); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--line2); display: grid; place-items: center; font-size: 12.5px; font-weight: 650; }

/* eight categories */
.ls-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 16px 40px; }
.ls-cats li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 34px; column-gap: 10px; align-items: center; font-size: 15px; line-height: 1.25; }
.ls-cat-t { display: block; height: 4px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.ls-cat-t i { display: block; height: 100%; background: var(--grey); border-radius: 2px; }
.ls-cats li.is-low .ls-cat-t i { background: var(--ink); }
.ls-cats b { text-align: right; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ls-cats li.is-low .ls-cat-n { font-weight: 650; }

/* real grader text */
.ls-revs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.ls-rev--wide { grid-column: 1 / -1; }
.ls-rev header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ls-rev header b { font-size: 16px; font-weight: 650; line-height: 1.25; }
.ls-rev p { font-size: 16px; line-height: 1.5; }

/* price details */
.ls-rcpt { margin-top: 20px; }
.ls-rcpt > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.ls-rcpt > div:not(.ls-rcpt-t) { flex-direction: row-reverse; justify-content: flex-end; gap: 12px; }
.ls-rcpt dt { font-size: 16px; }
.ls-op { display: block; width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.ls .ls-rcpt-t { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 700; }
.ls-rcpt-t dt { font-weight: 700; }
.ls-rcpt-t dd { font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the bug */
.ls-bug { display: grid; gap: 16px; margin-top: 8px; }
.ls-bug-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 6px; font-size: 15px; font-weight: 500; }
.ls-bug-r b { font-size: 20px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ls-bug-t { grid-column: 1 / -1; display: block; height: 20px; }
.ls-bug-t i { display: block; height: 100%; background: var(--ink); border-radius: 10px; }
.ls-bug-r.is-bad .ls-bug-t i { background: repeating-linear-gradient(135deg, var(--grey) 0 3px, #D5D5D5 3px 7px); }

/* effort chart */
.ls-where { position: relative; height: 380px; border-radius: 16px; overflow: hidden; background: #F4F2EC; pointer-events: none; user-select: none; }
.ls-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ls-map .m-land { fill: #F4F2EC; }
.ls-map .ls-map line, .ls-map .ls-map .m-minor { stroke: #fff; stroke-width: 1.6; opacity: .9; }
.ls-map .m-case { stroke: #E4E0D6; stroke-width: 6; }
.ls-map .m-road { stroke: #fff; stroke-width: 4; }
.ls-wt { position: absolute; font-size: 12px; line-height: 1; color: var(--ink2); font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #F4F2EC, 0 0 3px #F4F2EC, 0 0 3px #F4F2EC; }
.ls-wt--x { bottom: 10px; transform: translateX(-50%); }
.ls-wt--y { left: 10px; transform: translateY(50%); }
.ls-wa { position: absolute; font-size: 12px; font-weight: 600; line-height: 1; color: var(--ink2); text-shadow: 0 0 3px #F4F2EC, 0 0 3px #F4F2EC, 0 0 3px #F4F2EC; }
.ls-wa--y { left: 10px; top: 12px; }
.ls-wa--x { right: 12px; bottom: 28px; }
.ls-wa--x .belo-i { margin-right: 3px; vertical-align: -2px; }
.ls-wd { pointer-events: auto; position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.ls-wd:focus-visible { outline: none; } .ls-wd:focus-visible b { outline: 2px solid var(--ink); outline-offset: 2px; }
.ls-wd i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.24); transition: background .18s, transform .28s var(--ease); }
.ls-wd b { position: absolute; left: 0; bottom: 13px; transform: translateX(-50%); padding: 3px 9px; background: var(--card); border-radius: 999px; font-size: 12.5px; font-weight: 650; line-height: 1.25; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: background .18s, color .18s; }
.ls-wd.is-max i { background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, var(--bg) 1.5px 4px); }
.ls-wd.is-on i { background: var(--ink); transform: scale(1.18); }
.ls-wd.is-on.is-max i { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--dot-mute) 2px 4px); }
.ls-wd.is-on b { background: var(--ink); color: var(--on-ink); }

/* things to know */
.ls-things { padding: 48px 0 56px; border-top: 1px solid var(--line); }
.ls .ls-things h2 { margin-bottom: 28px; }
.ls-things-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ls .ls-things-g h4 { margin: 14px 0 6px; font-size: 16px; line-height: 1.3; }
.ls-things-g p { font-size: 15px; line-height: 1.42; color: var(--ink2); }
.ls-checks { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.ls-checks ul { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.ls-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.44; }
.ls-checks .ls-ico { width: 22px; height: 22px; stroke-width: 2.2; margin-top: 1px; }

/* close and footer */
.ls-close { padding: 88px 0 80px; border-top: 1px solid var(--line); }
.ls-close-line { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; max-width: 15em; }
.ls .ls-careers { margin-top: 24px; font-size: 18px; }
.ls-careers a { font-weight: 600; text-underline-offset: 3px; padding: 10px 0; }
.ls-foot { padding: 40px 0 56px; background: var(--bg2); border-top: 1px solid var(--line2); font-size: 14px; line-height: 1.5; color: var(--ink2); }
.ls .ls-foot h4 { color: var(--ink); margin-bottom: 6px; }
.ls-foot p { max-width: 760px; }
.ls .ls-notice { margin-top: 14px; font-size: 12.5px; }

/* the phone's bottom bar */
.ls-bar { display: none; }

/* the sheet slides up over the map and back down, and the map's pill becomes the title on the way */
@keyframes ls-sheet-in { from { transform: translateY(100vh); } }
@keyframes ls-sheet-out { to { transform: translateY(100vh); } }
html.ls-vt-up::view-transition-old(root) { animation: none; }
html.ls-vt-up::view-transition-new(root) { animation: none; opacity: 0; }
html.ls-vt-up::view-transition-group(ls-sheet) { animation: none; }
html.ls-vt-up::view-transition-new(ls-sheet) { animation: ls-sheet-in .55s cubic-bezier(.2,.8,.2,1) both; }
html.ls-vt-up::view-transition-group(ls-title) { z-index: 5; animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
html.ls-vt-down::view-transition-new(root) { animation: none; }
html.ls-vt-down::view-transition-old(root) { animation: none; opacity: 0; }
html.ls-vt-down::view-transition-group(ls-sheet) { animation: none; }
html.ls-vt-down::view-transition-old(ls-sheet) { animation: ls-sheet-out .42s cubic-bezier(.4,0,.7,.4) both; }

@media (prefers-reduced-motion: reduce) {
  #listing *, #listing *::before, #listing *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
}

/* ---------- between the phone and the two columns ---------- */
@media (max-width: 1120px) and (min-width: 1024px) {
  .ls-cols { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; }
}

/* ---------- single column with a bottom bar ---------- */
@media (max-width: 1023px) {
  .ls-wrap { padding: 0 24px; max-width: 720px; }
  .ls-cols { display: block; }
  .ls-side { display: none; }
  .ls-sec { padding: 40px 0; }
  .ls-col > .ls-sec:first-child { padding-top: 32px; }
  .ls-sec { scroll-margin-top: calc(var(--chrome, 0px) + 8px); }
  .ls-things-g { grid-template-columns: 1fr 1fr; }
  .ls-bar { display: block; position: sticky; bottom: 0; z-index: 9; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding-bottom: env(safe-area-inset-bottom); }
  .ls-bar { transition: opacity .2s, transform .28s var(--ease), box-shadow .2s; }
  .ls-bar.is-gone { opacity: 0; transform: translateY(100%); pointer-events: none; }
  .ls-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 8px 24px; max-width: 720px; margin: 0 auto; }
  .ls-bar-s { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 16px; font-weight: 500; line-height: 1.25; min-width: 0; }
  .ls-bar-s .ls-star { width: 14px; height: 14px; margin-right: 5px; align-self: center; }
  .ls-bar-s b { font-weight: 700; font-variant-numeric: tabular-nums; }
  .ls-bar-s [data-unit] { margin-left: .28em; color: var(--ink2); font-size: 14px; }
  .ls-bar-s { flex: 1; }
  .ls-bar-row .ls-chev { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; text-decoration: none; }
  .ls-bar.is-off { visibility: hidden; background: transparent; border-color: transparent; box-shadow: none; pointer-events: none; }
  .ls-bar.is-off:not(.is-gone) .ls-chev { visibility: hidden; pointer-events: auto; background: var(--card); box-shadow: 0 1px 6px rgba(0,0,0,.22); }
  .ls-bar-b { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 18px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600; }
  .ls-bar-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .ls-bar-b[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ls-bar-sheet { padding: 16px 24px 4px; max-width: 720px; margin: 0 auto; animation: ls-sheet-up .24s var(--ease); }
  .ls-bar-sheet[hidden] { display: none; }
  @keyframes ls-sheet-up { from { opacity: 0; transform: translateY(10px); } }
}

@media (max-width: 640px) {
  .ls h1 { font-size: 28px; }
  .ls h2 { font-size: 25px; }
  .ls h3 { font-size: 21px; }
  .ls-handle { display: block; width: 36px; height: 4px; margin: 0 auto; position: relative; top: 8px; border-radius: 2px; background: var(--line); }
  .ls-top { display: flex; justify-content: space-between; height: 60px; }
  .ls-mark { font-size: 22px; }
  .ls-nav-in { gap: 10px; height: 48px; }
  .ls-title { padding: 22px 0 20px; }
  .ls-line { font-size: 17px; }

  /* The gallery runs full width and shows one photo at a time. */
  .ls-gal { display: flex; height: auto; margin: 0 -24px; border-radius: 0; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ls-gal::-webkit-scrollbar { display: none; }
  .ls-ph { flex: 0 0 100%; aspect-ratio: 3 / 2; scroll-snap-align: start; }
  .ls-gal-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .ls-gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s; }
  .ls-gal-dots i.is-on { background: var(--ink); }

  .ls-room { grid-template-columns: 60px minmax(0, 1fr) 46px; column-gap: 12px; }
  .ls-room img { width: 60px; height: 44px; }
  .ls-room-n { font-size: 15px; }
  .ls-room-v { font-size: 17px; }
  .ls-stat { font-size: 20px; }
  .ls-stat b { font-size: 52px; }

  .ls-band { height: 112px; }
  .ls-stay { display: block; margin-top: 20px; padding: 0 0 0 26px; }
  .ls-stay::before { left: 5px; right: auto; top: 6px; bottom: 16px; width: 2px; height: auto; transform-origin: top; }
  .ls-stay li { font-size: 15.5px; padding-bottom: 14px; }
  .ls-stay li:last-child { padding-bottom: 0; }
  .ls-stay li::before { left: -26px; top: 3px; }

  .ls-msg { max-width: 92%; gap: 8px; }
  .ls-msg p { font-size: 15.5px; padding: 11px 14px; }
  .ls-av { width: 28px; height: 28px; }
  .ls-av svg { width: 16px; height: 16px; }
  .ls-ask button { font-size: 14px; padding: 8px 10px; }

  .ls-keep { display: block; }
  .ls-keep-fig { max-width: 300px; margin: 0 auto; }
  .ls-keep-say { margin-top: 12px; font-size: 18px; }

  .ls-rung { grid-template-columns: minmax(0, 1fr) 36px; row-gap: 5px; }
  .ls-rung-t { grid-column: 1 / -1; grid-row: 2; height: 12px; }
  .ls-sub-t { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .ls-sub-n { grid-column: 1 / -1; grid-row: 4; margin-top: 0; }

  .ls-cov-plot { height: 300px; }

  .ls-seg { display: grid; width: 100%; }
  .ls-seg button { padding: 0 8px; font-size: 13.5px; }
  .ls-nl { --row: 31px; }
  .ls-nl-tag { padding: 0 8px; font-size: 12.5px; height: 25px; }

  .ls-tk { font-size: 14.5px; padding: 10px 12px; }
  .ls-steps { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 12px; }
  .ls-cats { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 14px; }
  .ls-cats li { grid-template-columns: minmax(0, 1fr) 96px 34px; }
  .ls-revs { grid-template-columns: 1fr; gap: 28px; }

  .ls-where { height: 300px; margin: 0 -8px; }

  .ls-things-g { grid-template-columns: 1fr; gap: 0; }
  .ls-things-g li { padding: 22px 0; border-top: 1px solid var(--line2); }
  .ls-things-g li:first-child { padding-top: 0; border-top: 0; }
  .ls-checks { margin-top: 24px; padding-top: 32px; }
  .ls-checks ul { grid-template-columns: 1fr; }

  .ls-close { padding: 64px 0 56px; }
  .ls-careers { font-size: 17px; }
}
.ls-num-v .belo-i, [data-price] .belo-i { width: .82em; height: .82em; margin-right: .16em; vertical-align: -.06em; }
.ls-nav .ls-chev { visibility: hidden; }
.ls-scrolled .ls-nav .ls-chev { visibility: visible; }
/* Stuck under the blog's nav pill, the bar fills the band above it too, so the page does not show through around the pill. */
.ls-scrolled .ls-nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--chrome, 0px) + 8px); background: var(--bg); }
.ls-game.is-done .ls-made { display: none; }
@media (max-width: 979px) { .ls-bar .ls-chev { display: none; } }
/* The card fades out where it doesn't apply, and stays reachable by keyboard and screen reader. */
.ls-card { transition: opacity .18s; }
.ls-card.is-off { visibility: visible; }
.ls-card.is-off:not(:focus-within) { opacity: 0; pointer-events: none; }
.ls-card.is-off:focus-within { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .ls-nav a.ls-chev { position: absolute; margin-left: -44px; align-self: center; height: 44px; } }
@media (max-width: 979px) {
  .ls-sec { scroll-margin-top: calc(var(--chrome, 0px) + 28px); }
  .ls-bar.is-off { visibility: visible; }
  .ls-bar.is-off:not(:focus-within) { opacity: 0; pointer-events: none; }
  .ls-bar.is-off:focus-within { opacity: 1; pointer-events: auto; background: var(--bg); }
}
/* A wrong pick keeps its mark on the button you pressed, and the right answer is outlined. */
.ls-ask button.is-wrong { background: var(--wrong-bg); color: var(--wrong-ink); box-shadow: inset 0 0 0 1.5px var(--wrong-ring); }
.ls-ask button.is-answer { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
/* The card eases in and out. */
.ls-card { transition: opacity .4s ease, transform .4s ease; }
.ls-card.is-off:not(:focus-within) { transform: translateY(8px); }
@media (max-width: 979px) { .ls-bar { transition: opacity .3s ease, transform .3s ease; } .ls-bar.is-off:not(:focus-within) { transform: translateY(100%); } }

/* edits for this version */
.ls-keep--solo { display: block; }
.ls-keep--solo .ls-keep-fig { max-width: 360px; }
.ls-quote { margin: 0; }
.ls-quote blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--ink); font-size: 17px; line-height: 1.5; }
.ls-quote figcaption { margin-top: 10px; padding-left: 21px; font-size: 14px; line-height: 1.4; color: var(--ink2); }
.ls-mini { display: flex; flex-direction: column; gap: 3px; font-weight: 500; }
.ls-mini b { font-size: 12px; font-weight: 700; color: var(--ink2); }
.ls-nl-br-n { position: absolute; left: 50%; top: 15px; transform: translateX(-50%); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ls-nl { height: calc(var(--axis) + 80px); }
.ls-nl-lead { font-size: 15px; font-weight: 650; }

/* ================= listing, second pass =================
   One column of sections. Each pairs its words (left) with its picture (right) and stacks on a phone.
   The title, the effort picker and the seven suites are one block, and the suites are the listing's rating categories. */
.ls-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "t p" "h h" "s s"; column-gap: 48px; align-items: end; padding: 28px 0 48px; scroll-margin-top: calc(var(--chrome, 0px) + var(--nav-h) + 8px); }
.ls-title-t { grid-area: t; min-width: 0; }
.ls-pick { grid-area: p; }
.ls .ls-head-h { grid-area: h; margin: 28px 0 0; padding-top: 40px; border-top: 1px solid var(--line); }
.ls-pick .ls-card-l { margin-bottom: 8px; color: var(--ink2); }
.ls-pick .ls-days { padding: 4px; border-radius: 16px; background: var(--bg2); }
.ls-pick .ls-day { height: 40px; }
.ls-pick .ls-day[aria-pressed="true"] { box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* max wears the hatch of the blocked band on the effort chart, and a chosen max is as plainly chosen as the other four */
.ls-pick .ls-day--max { text-decoration: none; color: var(--ink); }
.ls-pick .ls-day--max[aria-pressed="true"] { background: repeating-linear-gradient(135deg, var(--ink-hatch) 0 2px, var(--ink) 2px 7px); color: var(--on-ink); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.ls-col > .ls-sec:first-child { border-top: 1px solid var(--line); padding-top: 40px; }
.ls-two { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 680px); justify-content: space-between; column-gap: 64px; align-items: start; }
.ls-two[data-mid] { align-items: center; }
.ls-w > p { margin-top: 12px; font-size: 16px; line-height: 1.5; }
.ls .ls-w h2, .ls .ls-w h3 { margin-bottom: 0; }
.ls-w > .ls-maxnote { margin-top: 0; }
.ls-p > :first-child { margin-top: 0; }
.ls-p { min-width: 0; }

/* the seven rating categories: a name, its score, and a picture of the work, with a rule between one and the next */
.ls-suites { grid-area: s; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 28px -16px 0; }
.ls-suite { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0 16px; border-left: 1px solid var(--line); }
.ls-suite:first-child { border-left: 0; }
.ls-suite-n { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.ls-suite-s { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.ls-suite-v { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* for a moment after the effort changes, each score shows whether it went up, went down or stayed the same */
.ls-suite-d { flex: none; box-sizing: content-box; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; opacity: 0; }
.ls-suite[data-move="up"] .ls-suite-d { border-bottom: 8px solid var(--ink); --from: 5px; animation: ls-move 4s ease both; }
.ls-suite[data-move="down"] .ls-suite-d { border-top: 8px solid var(--ink); --from: -5px; animation: ls-move 4s ease both; }
.ls-suite[data-move="same"] .ls-suite-d { width: 10px; height: 4px; border: 0; border-top: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); --from: 0px; animation: ls-move 4s ease both; }
@keyframes ls-move { 0% { opacity: 0; transform: translateY(var(--from)); } 8% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
/* a suite shared across efforts wears a quieter bar */
.ls-suite.is-shared .ls-rb i { background: var(--grey); }
.ls-suite .ls-rb { margin-top: 10px; }
.ls-suite img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-top: 18px; border-radius: 16px; background: #FDF5EC; }

/* the long-horizon steps: each step on the line wears a mark for what happens in it */
.ls-stay { padding-top: 46px; }
.ls-stay::before { left: 16px; top: 15px; right: calc((100% - 56px) / 5 - 16px); }
.ls-stay li::before { content: none; }
.ls-stay-i { position: absolute; left: 0; top: -46px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink); box-shadow: 0 0 0 4px var(--bg); }
.ls-stay-g { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* a third part of a section: under the words on a wide screen, after the picture on a phone */
.ls-two--more { grid-template-areas: "w p" "m p"; grid-template-rows: auto 1fr; }
.ls-two--more > .ls-w { grid-area: w; }
.ls-two--more > .ls-p { grid-area: p; }
.ls-m { grid-area: m; min-width: 0; margin-top: 12px; }
.ls-m > p { font-size: 16px; line-height: 1.5; }
.ls .ls-m-h { margin: 28px 0 12px; font-size: 16px; line-height: 1.3; letter-spacing: 0; font-weight: 650; }
.ls .ls-after-h2 { margin-top: 14px; }
.ls-two[data-note] > .ls-m { margin-top: 0; }

/* which cases stay: a small square for one rule, with each model's score on its own axis and each zone named beside it */
.ls-m > .ls-keep-fig { max-width: 300px; margin: 0; padding: 4px 62px 42px 52px; }
.ls-keep-fig .ls-keep-y { left: 0; top: 4px; bottom: 42px; width: 16px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; white-space: nowrap; line-height: 16px; font-size: 12.5px; }
.ls-keep-fig .ls-keep-x { left: 52px; right: 62px; font-size: 12.5px; }
.ls-keep-fig .ls-z--keep { font-size: 17px; }
.ls .ls-keep-fig .ls-z--res, .ls .ls-keep-fig .ls-z--drop { left: calc(100% + 7px) !important; transform: translateY(50%); font-size: 12.5px; }
.ls-keep-fig .ls-tick { font-size: 11.5px; }

/* the bar keeps the listing's name, score and price in view once the title has scrolled away */
.ls-now { display: none; }
@media (min-width: 1024px) {
  .ls-now { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s var(--ease); pointer-events: none; }
  .ls-now > span:first-child { margin-right: 8px; }
  .ls-now .ls-star { width: 12px; height: 12px; }
  .ls-now .ls-dot { color: var(--ink2); }
  .ls-scrolled .ls-now { opacity: 1; transform: none; }
}
/* a phone has no room for that in the bar, so the effort chart names the listing a tap chose */
.ls-here { display: none; }

/* a suite's picture marks the part that is about that suite */
.ls-w-art { display: block; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 16px; background: #FDF5EC; }

/* the game ends where it stands, and one button starts it over */
.ls .ls-game.is-done .ls-made { display: block; }
.ls .ls-game.is-done .ls-trays { margin-top: 20px; }
.ls-game.is-done .ls-ask { display: none; }
.ls-again { display: block; width: 100%; min-height: 52px; margin-top: 16px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.2; transition: background .14s; }
.ls-again[hidden] { display: none; }
@media (hover: hover) { .ls-again:hover { background: var(--bg2); } }

/* a path before and after it is scrubbed */
.ls-blind { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ls-blind code { padding: 10px 14px; border-radius: 12px; background: var(--bg2); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.3; white-space: nowrap; }
.ls-blind mark { background: none; color: inherit; font-weight: 700; }
.ls-blind code:first-child mark { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ink2); }
.ls-blind-to { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the grader chart: the architecture picture sits in its title, and each grader's button carries its spread */
.ls-nl-lead { display: flex; align-items: center; gap: 12px; }
.ls-nl-lead .ls-w-art { flex: none; width: 48px; height: 48px; margin: 0; border-radius: 12px; }
.ls-seg { border-radius: 18px; }
.ls-seg button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; padding: 6px 22px; border-radius: 14px; }
.ls-seg b { margin: 0; font-size: 12.5px; font-weight: 600; opacity: .78; }
.ls-nl { height: calc(var(--axis) + 56px); }

/* the ladder's names get room for one or two lines */
@media (min-width: 1024px) { .ls-rung { grid-template-columns: 216px minmax(0, 1fr) 36px; } }

/* the line about verification sits under the Verification rating */
.ls-cats-why { margin-top: 16px; font-size: 15px; line-height: 1.45; }
@media (min-width: 1024px) { .ls-cats-why { margin-left: calc(50% + 20px); } }
.ls-p > .ls-quote { margin-top: 28px; }

/* a label on the coverage chart keeps clear of a guide line that passes it */
.ls-cov-dot--1 .ls-cov-l b, .ls-cov-dot--1 .ls-cov-r { padding-left: 6px; }

/* each effort on the chart is a button with room for a thumb */
.ls-wd::after { content: ''; position: absolute; left: -22px; top: -40px; width: 44px; height: 58px; }

/* the effort chart is a plain chart, and it hatches what we block */
.ls-where { background: var(--plot); pointer-events: auto; }
.ls-blocked b { position: absolute; left: 10px; top: 12px; font-size: 12px; font-weight: 650; line-height: 1; color: var(--band-ink); text-shadow: 0 0 3px var(--plot), 0 0 3px var(--plot), 0 0 3px var(--plot); }
.ls .ls-bug-r.is-bad .ls-bug-t i { background: var(--bar-bad); }
/* the max note is out of reach of a screen reader and of find-in-page until max is chosen */
.ls-maxnote > p { visibility: hidden; transition: visibility 0s .28s; }
.ls-maxnote.is-on > p { visibility: visible; transition-delay: 0s; }
.ls-map .ls-gridline { stroke: var(--plot-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ls-wt, .ls-wa { text-shadow: 0 0 3px var(--plot), 0 0 3px var(--plot), 0 0 3px var(--plot); }
.ls-blocked { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, var(--band) 0 2px, rgba(0,0,0,0) 2px 7px); border-left: 1.5px dashed var(--band-edge); pointer-events: none; }

@media (max-width: 1023px) {
  .ls-head { display: block; padding: 22px 0 36px; scroll-margin-top: calc(var(--chrome, 0px) + 50px); }
  /* the effort picker stays under the bar while the suites pass, so every suite can be seen changing */
  .ls-pick { position: sticky; top: calc(var(--chrome, 0px) + 58px); z-index: 6; margin-top: 14px; padding: 8px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .ls .ls-head-h { margin-top: 28px; padding-top: 0; border-top: 0; }
  .ls-two { display: block; }
  .ls-p { margin-top: 22px; }
  .ls-suites { grid-template-columns: 1fr; margin: 12px 0 0; }
  .ls-suite { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img name v" "img bar v"; column-gap: 14px; align-items: center; padding: 8px 0; border-left: 0; border-top: 1px solid var(--line2); }
  .ls-suite:first-child { border-top: 0; }
  .ls-suite img { grid-area: img; width: 72px; margin: 0; }
  .ls-suite-n { grid-area: name; align-self: end; font-size: 15.5px; }
  .ls-suite-s { grid-area: v; margin: 0; justify-content: flex-end; min-width: 56px; }
  .ls-suite-d { order: -1; }
  .ls-suite-v { font-size: 20px; }
  .ls-suite .ls-rb { grid-area: bar; margin: 8px 0 0; align-self: start; }
  .ls-m { margin-top: 28px; }
  .ls-two[data-note] > .ls-m { margin-top: 0; }
  .ls-m > .ls-keep-fig { max-width: 300px; }
  .ls-w-art { width: 56px; height: 56px; margin-bottom: 12px; border-radius: 13px; }
  .ls-stay { padding: 0 0 0 46px; }
  .ls-stay::before { left: 15px; right: auto; top: 16px; bottom: 30px; }
  .ls-stay li { min-height: 32px; padding: 5px 0 17px; }
  .ls-stay li:last-child { padding-bottom: 5px; }
  .ls-stay-i { left: -46px; top: 0; }
  .ls-here { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .ls-here > span:first-child { margin-right: 8px; }
  .ls-here .ls-star { width: 13px; height: 13px; }
  .ls-here .ls-dot { color: var(--ink2); }
}
@media (max-width: 979px) { .ls-pick { top: calc(var(--chrome, 0px) + 50px); } }
@media (max-width: 599px) {
  .ls-blind { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ls-blind-to { transform: rotate(90deg); margin-left: 14px; }
  .ls-seg button { padding: 6px 8px; }
}
@media (min-width: 1024px) and (max-width: 1180px) { .ls-two { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: 44px; } .ls-suites { margin-left: -12px; margin-right: -12px; } .ls-suite { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .ls-now { transition: none; } .ls-suite[data-move] .ls-suite-d { --from: 0px; } }

/* ================= listing, in motion =================
   Scrolling plays each picture one step at a time, and every step ends on a true state.
   The rules below describe a picture before its step. They apply only while the page is live (.ls-live),
   so a reader who asks for less motion sees every picture finished. */
.ls .ls-grow i { transform: none; transform-origin: left center; }

/* a pinned row holds in the middle of the window while scrolling plays its picture, and its spacer is the length of that scroll */
.ls-pin { scroll-margin-top: var(--pin-top, 64px); }
.ls-pin-space { display: none; }
.ls-pin.is-pinned > .ls-sec { position: sticky; top: var(--pin-top, 64px); }
.ls-pin.is-pinned > .ls-pin-space { display: block; height: var(--space, calc(var(--len, 40) * 1vh)); transition: height .45s var(--ease); }

/* after an effort change a mark stays for a moment where each bar was, and the suites move one after another */
.ls-rb { position: relative; overflow: visible; }
.ls-was { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink2); opacity: 0; text-decoration: none; }
.ls-suite[data-move="up"] .ls-was, .ls-suite[data-move="down"] .ls-was { animation: ls-move 4s ease both; --from: 0px; }
.ls-live .ls-suite[data-move] .ls-rb i { transition-delay: calc(var(--k, 0) * 60ms); }

/* the way in: the pin's name, score and price travel to the title */
.ls-line-s { display: inline-flex; align-items: baseline; }
.ls-line-s .ls-star { align-self: center; }
.ls-line-p > b { display: inline-block; }
.ls .ls-line-p [data-unit] { margin-left: 0; }
::view-transition-old(ls-score), ::view-transition-new(ls-score), ::view-transition-old(ls-price), ::view-transition-new(ls-price) { width: 100%; height: 100%; object-fit: none; object-position: 0 50%; animation-duration: .24s; }
::view-transition-old(ls-score), ::view-transition-old(ls-price) { animation-duration: .1s; }
::view-transition-new(ls-score), ::view-transition-new(ls-price) { animation-delay: 0s; animation-duration: .18s; }
html.ls-vt-up::view-transition-group(ls-score), html.ls-vt-up::view-transition-group(ls-price) { z-index: 5; animation-duration: .6s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
html.ls-vt-up::view-transition-group(ls-score) { animation-delay: .05s; }
html.ls-vt-up::view-transition-group(ls-price) { animation-delay: .1s; }

/* the seven suites arrive one at a time: the picture, the score counting up, the bar filling */
.ls-live .ls-suite > * { transition: opacity .35s, transform .5s var(--ease); }
.ls-live .ls-suite:not(.is-in) > * { opacity: 0; transform: translateY(8px); }
.ls-live .ls-suite:not(.is-in) img { transform: translateY(8px) scale(.9); }
.ls-live .ls-suite .ls-rb i { transition: transform .75s var(--ease), width .55s var(--ease); }
.ls-live .ls-suite:not(.is-in) .ls-rb i { transform: scaleX(0); }

/* the share of perfect one-shot scores, one cell for each score in a hundred */
.ls-strip { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); gap: 2px; margin-top: 24px; }
.ls-strip i { height: 16px; border-radius: 1.5px; background: var(--line2); }
.ls-strip i.on { background: var(--ink); }
.ls-live .ls-strip i.on { transition: background .12s; }
.ls-live .ls-strip i.on:not(.lit) { background: var(--line2); }
.ls-live #lsStat { transition: opacity .3s; }
.ls-live #lsStat[data-step="0"] { opacity: 0; }

/* a long-horizon task, one step after another along its line */
.ls-live .ls-stay::before { transform: scaleX(var(--p, 0)); transition: transform .5s var(--ease); }
.ls-live .ls-stay li { transition: opacity .35s, transform .45s var(--ease); }
.ls-live .ls-stay li:not(.is-in) { opacity: 0; transform: translateY(6px); }

/* a session arrives as it happened: what the agent did, then what the engineer said */
@keyframes ls-say { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.ls-live .ls-turn.is-on { animation: none; }
.ls-live .ls-game:not(.is-in) .ls-turn .ls-msg { opacity: 0; }
.ls-live .ls-game.is-in .ls-turn.is-on .ls-msg { animation: ls-say .38s var(--ease) both; }
.ls-live .ls-game.is-in .ls-turn.is-on .ls-msg--e { animation-delay: .6s; }

/* coverage first, on its own axis, then each set of tests rises to the regressions it caught */
.ls-live .ls-cov-dot { transition: bottom 1s var(--ease), opacity .3s, transform .45s var(--ease); }
.ls-live .ls-guide { transition: bottom 1s var(--ease), height 1s var(--ease), opacity .4s .5s; }
.ls-live .ls-cov[data-step="0"] .ls-cov-dot { opacity: 0; transform: translateY(-16px); }
.ls-live .ls-cov[data-step="1"] .ls-cov-dot { transition-delay: calc(var(--i) * 140ms); }
.ls-live .ls-cov:is([data-step="0"], [data-step="1"]) [data-rise], .ls-live .ls-cov[data-step="2"] :is([data-rise="3"], [data-rise="4"]), .ls-live .ls-cov[data-step="3"] [data-rise="4"] { --up: 0; }
.ls-live .ls-cov:is([data-step="0"], [data-step="1"]) .ls-guide, .ls-live .ls-cov[data-step="2"] .ls-guide:is([data-rise="3"], [data-rise="4"]), .ls-live .ls-cov[data-step="3"] .ls-guide[data-rise="4"] { opacity: 0; transition-delay: 0s; }
.ls-live .ls-cov-y { transition: opacity .3s .6s; }
.ls-live .ls-cov:is([data-step="0"], [data-step="1"]) .ls-cov-y, .ls-live .ls-cov[data-step="2"] :is([data-rise="3"], [data-rise="4"]) .ls-cov-y, .ls-live .ls-cov[data-step="3"] [data-rise="4"] .ls-cov-y { opacity: 0; transition-delay: 0s; }
/* a dot that has not been given its count yet is hollow, so a dot waiting on the axis never reads as a count of nothing */
.ls-live .ls-cov-dot { transition: bottom 1s var(--ease), opacity .3s, transform .45s var(--ease), background .2s; }
.ls-live .ls-cov:is([data-step="0"], [data-step="1"]) .ls-cov-dot, .ls-live .ls-cov[data-step="2"] .ls-cov-dot:is([data-rise="3"], [data-rise="4"]), .ls-live .ls-cov[data-step="3"] .ls-cov-dot[data-rise="4"] { background: var(--bg); box-shadow: 0 0 0 3px var(--bg); outline: 2px dashed var(--grey); outline-offset: -2px; transition-delay: 0s; }
/* a dot waiting on the axis carries its label above the axis */
.ls-live .ls-cov-dot--1 .ls-cov-l { transition: transform .6s var(--ease); }
.ls-live .ls-cov:is([data-step="0"], [data-step="1"], [data-step="2"]) .ls-cov-dot--1 .ls-cov-l { transform: translateY(-96%); }
@media (max-width: 1023px) { .ls-live .ls-cov:is([data-step="0"], [data-step="1"], [data-step="2"]) .ls-cov-dot--1 .ls-cov-l { transform: translateY(-215%); } }
.ls-live .ls-cov-dot--2 .ls-cov-l { transition: transform .6s var(--ease); }
.ls-live .ls-cov:is([data-step="0"], [data-step="1"]) .ls-cov-dot--2 .ls-cov-l { transform: translate(-14px, -80%); }
.ls-live .ls-cov :is(.ls-axis-y, .ls-grid, .ls-tick--y) { transition: opacity .4s; }
.ls-live .ls-cov:is([data-step="0"], [data-step="1"]) :is(.ls-axis-y, .ls-grid:not(:first-child), .ls-tick--y) { opacity: 0; }

/* known answers, scored one at a time */
.ls-live .ls-rung-t i { transition: transform .8s var(--ease); }
.ls-live .ls-rung:not(.is-in) .ls-rung-t i { transform: scaleX(0); }
.ls-live .ls-rung-v { transition: opacity .25s .45s; }
.ls-live .ls-rung:not(.is-in) .ls-rung-v { transition-delay: 0s; }
.ls-live .ls-sub-n, .ls-live .ls-sub-t { transition: opacity .25s; }
.ls-live .ls-rung:not(.is-in) .ls-rung-v, .ls-live .ls-sub-n:not(.is-in), .ls-live #lsLadder:not([data-step="7"]) .ls-sub-t { opacity: 0; }
.ls-live .ls-sub-t i { transition: transform .7s .1s var(--ease); }
.ls-live #lsLadder:not([data-step="7"]) .ls-sub-t i { transform: scaleX(0); }

/* hiding the model: each step lights as it happens, the id arrives at its step and the name is struck out at its step */
.ls .ls-blind .ls-b-old mark { position: relative; text-decoration: none; color: var(--ink2); transition: color .4s; }
.ls-b-old mark::after { content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 1.5px; background: currentColor; transform-origin: left center; transition: transform .5s var(--ease); }
.ls-b-new span { display: inline-block; vertical-align: bottom; max-width: 12ch; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--ease), opacity .3s; }
.ls-live #lsBlind :is(.ls-blind-to, .ls-b-new) { transition: opacity .35s; }
.ls-live #lsBlind:is([data-step="0"], [data-step="1"]) :is(.ls-blind-to, .ls-b-new) { opacity: 0; }
.ls-live #lsBlind:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .ls-b-old mark { color: var(--ink); }
.ls-live #lsBlind:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .ls-b-old mark::after { transform: scaleX(0); }
.ls-live #lsBlind:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .ls-b-new span { max-width: 0; opacity: 0; }
.ls-live #lsSteps li { transition: opacity .3s; }
.ls-live #lsSteps li:not(.is-in) { opacity: .34; }
.ls-live #lsSteps li::before { transition: background .3s, color .3s; }
#lsSteps li.is-in::before { background: var(--ink); color: var(--on-ink); }

/* eight ratings, one at a time, ending on verification and the line about it */
.ls-live .ls-cat-t i { transition: transform .7s var(--ease); }
.ls-live #lsCats li:not(.is-in) .ls-cat-t i { transform: scaleX(0); }
.ls-live #lsCats li b { transition: opacity .25s .4s; }
.ls-live #lsCats li:not(.is-in) b { transition-delay: 0s; }
.ls-live .ls-cats-why { transition: opacity .25s, transform .4s var(--ease); }
.ls-live #lsCats li:not(.is-in) b { opacity: 0; }
.ls-live .ls-cats-why:not(.is-in) { opacity: 0; transform: translateY(6px); }

/* the first report's cost, then the bar falls to the true cost */
@keyframes ls-fall { from { width: 100%; } }
.ls-live .ls-bug-r { transition: opacity .3s; }
.ls-live .ls-bug-r:not(.is-in) { opacity: 0; }
.ls-live .ls-bug-r .ls-bug-t i { transition: transform .6s var(--ease); }
.ls-live .ls-bug-r:first-child:not(.is-in) .ls-bug-t i { transform: scaleX(0); }
.ls-live .ls-bug-r:nth-child(2).is-in .ls-bug-t i { animation: ls-fall .8s .15s cubic-bezier(.5,0,.2,1) both; }

/* effort by effort up the chart, then max, then the band that blocks it */
.ls-live #lsWhere .ls-wd { transition: opacity .25s; }
.ls-live #lsWhere .ls-wd:not(.is-in) { opacity: 0; pointer-events: none; }
.ls-live #lsWhere .ls-wd:not(.is-in) i { transform: scale(.4); }
.ls-live .ls-blocked { transition: clip-path .7s var(--ease); clip-path: inset(0); }
.ls-live .ls-blocked:not(.is-in) { clip-path: inset(0 0 0 100%); }

@media (max-width: 1023px) {
  .ls-live .ls-stay::before { transform: scaleY(var(--p, 0)); }
  .ls-strip { grid-template-columns: repeat(50, minmax(0, 1fr)); gap: 2px; margin-top: 18px; }
  .ls-strip i { height: 11px; border-radius: 1px; }
}

/* ================= listing, the long-horizon suite opened up =================
   The page picks one suite out of the seven and goes into it: its picture leaves the row and lands in a card
   that carries the suite's name and score and shows what one of its tasks is. */
.ls-zoom { margin: 0 -24px; padding: 0 24px 8px; border: 1px solid var(--line); border-radius: 32px; background: var(--bg); box-shadow: 0 6px 20px rgba(0,0,0,.1); scroll-margin-top: calc(var(--chrome, 0px) + var(--nav-h) + 12px); }
.ls-zoom-head { display: grid; grid-template-columns: minmax(0, 1fr) 168px; column-gap: 32px; align-items: center; padding: 32px 0; }
.ls-zoom-img { grid-column: 2; grid-row: 1; display: block; width: 168px; height: 168px; object-fit: cover; border-radius: 24px; background: #FDF5EC; }
.ls-zoom-t { grid-column: 1; grid-row: 1; }
.ls-zoom-n { font-size: 28px; line-height: 1.16; letter-spacing: -.022em; font-weight: 700; }
.ls-zoom-v { margin-top: 4px; font-size: 52px; line-height: 1.05; letter-spacing: -.035em; font-weight: 750; font-variant-numeric: tabular-nums; }
.ls-zoom-t .ls-rb { max-width: 520px; height: 6px; margin-top: 14px; border-radius: 3px; }
.ls-zoom-t .ls-rb i { border-radius: 3px; }
.ls-fly { position: fixed; left: 0; top: 0; z-index: 7; display: none; object-fit: cover; background: #FDF5EC; pointer-events: none; will-change: transform; }
.ls-zoom + .ls-col > .ls-sec:first-child { border-top: 0; }
.ls-two[data-join] { border-top: 0; padding-top: 0; }

/* a long-horizon task: five steps along a line, and a marker that plays them through */
.ls-loop { position: relative; }
.ls-loop-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 16px; }
.ls-loop-steps li { position: relative; font-size: 14.5px; line-height: 1.34; font-weight: 500; }
.ls-loop-steps li:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 19px; width: calc(100% + 16px); height: 2px; background: var(--line); }
.ls-loop-i { position: relative; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--grey); box-shadow: 0 0 0 5px var(--bg); transition: background .3s, border-color .3s; }
.ls-loop-i .ls-stay-g { width: 19px; height: 19px; stroke: var(--ink2); transition: stroke .3s; }
.ls-loop-steps li.is-lit .ls-loop-i { background: var(--ink); border-color: var(--ink); }
.ls-loop-steps li.is-lit .ls-stay-g { stroke: var(--on-ink); }
.ls-loop-dot { position: absolute; left: 0; top: 0; z-index: 1; display: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--rausch, #FF385C); box-shadow: 0 0 0 3px var(--bg); transition: opacity .25s; will-change: transform; }
.ls-loop.is-run .ls-loop-dot { display: block; }

/* the exchanges sort themselves: a copy of each drops into its tray */
.ls-turn.is-ghost { visibility: visible; opacity: 1; z-index: 3; pointer-events: none; }
.ls-live .ls-game.is-in .ls-turn.is-on.is-ghost .ls-msg { animation: none; }
.ls-live #lsSort.is-in .ls-turn.is-on .ls-msg--e { animation-delay: 1s; }
.ls-tray { transition: box-shadow .25s; }
.ls-tray.is-hit { box-shadow: inset 0 0 0 2px var(--ink); }
.ls-mini-a { color: var(--ink2); font-size: 13px; }
.ls-nl-lead + .ls-cats { margin-top: 22px; }

/* what the rule leaves: the two models' mean scores on each new suite, and the cap neither passes */
.ls .ls-w > .ls-lead-p { margin-top: 0; font-size: 18px; line-height: 1.42; font-weight: 500; letter-spacing: -.008em; }
.ls-w > .ls-keep-fig { max-width: 300px; margin: 0; padding: 4px 62px 42px 52px; }
.ls .ls-new-cap { margin: 0 0 14px; }
.ls-new-key { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; font-weight: 600; }
.ls-new-key span { display: inline-flex; align-items: center; gap: 8px; }
.ls-nm { position: relative; display: inline-block; flex: none; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.ls-nm--b { background: var(--bg); border: 2.5px solid var(--ink); }
.ls-new { margin-top: 16px; }
.ls-new-row, .ls-new-ax { display: grid; grid-template-columns: minmax(0, 1fr) 132px; column-gap: 22px; align-items: center; }
.ls-new-t { position: relative; display: block; height: 44px; margin: 0 8px; }
.ls-new-row .ls-new-t::before { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--line); }
.ls-new-row .ls-new-t::after { content: ''; position: absolute; left: calc(var(--cap) * 1%); top: 0; bottom: 0; margin-left: -.75px; border-left: 1.5px dashed var(--ink); }
.ls-new-t .ls-nm { position: absolute; z-index: 1; top: 50%; width: 12px; height: 12px; margin: -14px 0 0 -6px; }
.ls-new-t .ls-nm--b { margin-top: 2px; }
.ls-new-n { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ls-new-n span { display: inline-flex; align-items: center; gap: 6px; }
.ls-new-n .ls-nm { width: 10px; height: 10px; }
.ls-new-n .ls-nm--b { border-width: 2px; }
.ls-new-n b { min-width: 2.3em; font-weight: 650; }
.ls-new-ax .ls-new-t { height: 24px; }
.ls-new-ax .ls-tick { top: 6px; transform: translateX(-50%); }
.ls-new-ax .ls-tick.is-cap { color: var(--ink); font-weight: 700; }

/* cross-family grading: a ring where the same-family grader put each run, a dot where the grader now shown puts it, and a band as wide as that grader's spread */
.ls-gr { --gl: 64px; --gr: 116px; position: relative; margin-top: 22px; padding: 26px 0 30px; }
.ls-gr-plot { position: absolute; left: var(--gl); right: var(--gr); top: 26px; bottom: 30px; }
.ls-gr-plot .ls-tick { top: calc(100% + 10px); transform: translateX(-50%); }
.ls-gr-avg { position: absolute; top: -8px; bottom: 0; width: 0; margin-left: -1px; border-left: 2px solid var(--ink); transition: left .85s cubic-bezier(.35,.9,.25,1), opacity .3s; }
.ls-gr-avg b { font-style: normal; position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); margin-bottom: 3px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* under the cross-family grader a fainter line stays where the same-family average was */
.ls-gr-avg.is-was { border-left: 2px dashed var(--grey); opacity: 0; transition: opacity .2s; }
.ls-gr[data-grader="cross"] .ls-gr-avg.is-was { opacity: 1; transition: opacity .3s .6s; }
.ls-gr-row { position: relative; display: grid; grid-template-columns: var(--gl) minmax(0, 1fr) var(--gr); align-items: center; height: 42px; }
.ls-gr-e { font-size: 14px; font-weight: 600; }
.ls-gr-t { position: relative; display: block; height: 100%; }
.ls-gr-t::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.ls-gr-ring, .ls-gr-dot { position: absolute; top: 50%; box-sizing: border-box; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; }
.ls-gr-ring { background: var(--bg); border: 2px solid var(--grey); transition: opacity .15s; }
/* under the same-family grader each dot sits on its ring, so the ring is put away once the dot is back on it */
.ls-gr[data-grader="same"] .ls-gr-ring { opacity: 0; transition: opacity .2s .7s; }
.ls-gr-dot { background: var(--ink); box-shadow: 0 0 0 2px var(--bg); transition: left .85s cubic-bezier(.35,.9,.25,1), opacity .25s, transform .35s var(--ease); }
.ls-gr-link { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--grey); transition: left .85s cubic-bezier(.35,.9,.25,1), width .85s cubic-bezier(.35,.9,.25,1); }
.ls-gr-n { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; font-size: 14.5px; font-variant-numeric: tabular-nums; transition: opacity .25s; }
.ls-gr-s, .ls-gr-c { font-weight: 650; }
.ls-gr-s { transition: color .3s; }
.ls-gr-to, .ls-gr-c { transition: opacity .3s .4s; }
.ls-gr-to { color: var(--ink2); }
.ls-gr[data-grader="same"] :is(.ls-gr-to, .ls-gr-c) { opacity: 0; transition-delay: 0s; }
.ls-gr[data-grader="cross"] .ls-gr-s { color: var(--ink2); }

/* before each of these plays */
.ls-live #lsKeep svg { background: var(--bg2); }
.ls-live #lsKeep svg rect { transition: opacity .5s; }
.ls-live #lsKeep .ls-z { transition: opacity .35s .15s; }
.ls-live #lsKeep .ls-z:not(.is-in) { opacity: 0; transition-delay: 0s; }
.ls-live #lsKeep[data-step="0"] .z-drop, .ls-live #lsKeep:is([data-step="0"], [data-step="1"]) .z-res, .ls-live #lsKeep:not([data-step="3"]) .z-keep { opacity: 0; }
.ls-live .ls-new-t .ls-nm { transition: left .9s var(--ease), opacity .25s; }
.ls-live .ls-new-row:not(.is-in) .ls-new-t .ls-nm { left: 0 !important; opacity: 0; }
.ls-live .ls-new-n { transition: opacity .25s .2s; }
.ls-live .ls-new-row:not(.is-in) .ls-new-n { opacity: 0; transition-delay: 0s; }
.ls-live #lsGr .ls-gr-dot { transition-delay: 0s, calc(var(--i) * 70ms), calc(var(--i) * 70ms); }
.ls-live #lsGr[data-step="0"] .ls-gr-dot { opacity: 0; transform: scale(.4); }
.ls-live #lsGr[data-step="0"] :is(.ls-gr-ring, .ls-gr-avg, .ls-gr-n) { opacity: 0; }

@media (max-width: 1023px) {
  .ls-zoom { margin: 0 -24px; padding: 0 24px 4px; border-radius: 28px; scroll-margin-top: calc(var(--chrome, 0px) + 40px); }
  .ls-zoom-head { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; padding: 24px 0; }
  .ls-zoom-img { grid-column: 1; width: 96px; height: 96px; border-radius: 18px; }
  .ls-zoom-t { grid-column: 2; }
  .ls-zoom-n { font-size: 21px; }
  .ls-zoom-v { font-size: 36px; }
  .ls-zoom-t .ls-rb { margin-top: 10px; }
  .ls-two[data-join] { padding-top: 0; }
  /* on a phone the steps run down the page */
  .ls-loop-steps { display: block; }
  .ls-loop-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; min-height: 40px; padding-bottom: 22px; font-size: 15.5px; }
  .ls-loop-steps li:last-child { padding-bottom: 0; }
  .ls-loop-steps li > span { padding-top: 9px; }
  .ls-loop-steps li:not(:last-child)::after { left: 19px; top: 20px; width: 2px; height: 100%; }
  .ls-loop-i { margin: 0; box-shadow: 0 0 0 3px var(--bg); }
  /* one tray under the other, so each exchange keeps its line */
  .ls-trays { grid-template-columns: 1fr; }
  .ls-stack { min-height: 0; }
  .ls-loop-i { margin: 0; }
  .ls-w > .ls-keep-fig { max-width: 300px; margin: 0 auto; }
  .ls-new-row, .ls-new-ax { grid-template-columns: minmax(0, 1fr) 118px; column-gap: 14px; }
  .ls-new-n { font-size: 14px; }
  .ls-gr { --gl: 52px; --gr: 98px; }
  .ls-gr-n { font-size: 13.5px; gap: 4px; }
  .ls-gr-ring, .ls-gr-dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
}
/* where the card is as wide as the screen it has no sides */
@media (max-width: 768px) { .ls-zoom { border-left: 0; border-right: 0; } }
@media (max-width: 640px) {
  /* five section links and the way back share the bar */
  .ls-nav-in { gap: 0; }
  .ls-nav a { min-width: 0; padding: 0 7px; }
  .ls-nav a.ls-chev { min-width: 36px; padding: 0; }
  .ls-nav a:first-child { margin-left: -7px; }
}