/* Chapter one: five concrete questions, compared through visible results. */
.concept-lab { --lab-line: #dce6f1; --lab-blue: #1769e8; --lab-ink: #10233f; --lab-muted: #596c85; color: var(--lab-ink); font-size: 15px; line-height: 1.8; container: concept-lab / inline-size; }
.concept-lab *, .concept-lab *::before, .concept-lab *::after { box-sizing: border-box; }
.concept-lab [hidden] { display: none !important; }
.concept-lab h3, .concept-lab h4, .concept-lab h5, .concept-lab p, .concept-lab blockquote, .concept-lab figure, .concept-lab ol, .concept-lab ul, .concept-lab dl, .concept-lab dd { margin: 0; }
.concept-lab button, .concept-lab select { min-height: 44px; max-width: 100%; color: inherit; font: inherit; font-size: 14px; }
.concept-lab button { cursor: pointer; touch-action: manipulation; }
.concept-lab button:focus-visible, .concept-lab select:focus-visible, .concept-lab summary:focus-visible, .concept-lab a:focus-visible { outline: 3px solid var(--lab-blue); outline-offset: 4px; }
.concept-lab button:disabled { cursor: default; opacity: .5; }
.concept-lab button:not(:disabled) { transition: background .16s, border-color .16s; }
.concept-lab p, .concept-lab b, .concept-lab strong, .concept-lab dd { overflow-wrap: anywhere; }
.concept-lab h3 { margin-top: 10px; font: 800 clamp(25px, 3vw, 36px)/1.35 var(--display); letter-spacing: -.035em; }
.concept-lab h4 { font: 750 clamp(21px, 2.4vw, 28px)/1.4 var(--display); letter-spacing: -.025em; }
.concept-lab h5 { font-size: 18px; font-weight: 700; line-height: 1.55; }
.concept-lab .lab-kicker { display: block; color: var(--lab-blue); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.concept-lab .lab-heading > p { max-width: 800px; margin-top: 14px; color: var(--lab-muted); }
.concept-lab .lab-challenges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 28px; border-top: 1px solid var(--lab-line); border-bottom: 1px solid var(--lab-line); }
.concept-lab .lab-challenges button { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 118px; padding: 16px 14px; text-align: left; background: #fff; border: 0; border-bottom: 3px solid transparent; }
.concept-lab .lab-challenges small { color: #7b8b9f; font: 500 11px/1.8 var(--mono); }
.concept-lab .lab-challenges b { font-size: 14px; font-weight: 650; line-height: 1.6; }
.concept-lab .lab-challenges span { color: var(--lab-muted); font-size: 11px; line-height: 1.6; }
.concept-lab .lab-challenges button:hover { background: #f5f8fd; }
.concept-lab .lab-challenges button[aria-pressed="true"] { background: #edf4ff; border-bottom-color: var(--lab-blue); }
.concept-lab .lab-challenges button[aria-pressed="true"] b, .concept-lab .lab-challenges button[aria-pressed="true"] small { color: #0e51b4; }
.concept-lab .lab-workbench { padding-top: 30px; scroll-margin-top: 90px; }
.concept-lab .lab-view-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.concept-lab #lab-kind { margin-bottom: 6px; color: var(--lab-blue); font-size: 12px; font-weight: 700; }
.concept-lab .lab-simulation-label { flex-shrink: 0; margin-top: 6px; padding: 4px 9px; color: var(--lab-muted); border: 1px solid var(--lab-line); border-radius: 4px; font-size: 11px; }
.concept-lab #lab-problem { max-width: 860px; margin-top: 12px; color: var(--lab-muted); }
.concept-lab .lab-input { width: 100%; margin-top: 22px; padding: 20px 24px; background: #f3f7fd; border-left: 3px solid var(--lab-blue); }
.concept-lab .lab-input > label { display: block; margin-bottom: 7px; color: #42628a; font-size: 12px; font-weight: 650; }
.concept-lab .lab-input blockquote { max-width: 900px; font-size: 17px; font-weight: 550; line-height: 1.85; overflow-wrap: anywhere; }
.concept-lab .lab-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.concept-lab .lab-options:empty { display: none; }
.concept-lab .lab-options label { color: var(--lab-muted); font-size: 13px; }
.concept-lab .lab-options button, .concept-lab .lab-secondary { padding: 8px 13px; background: #fff; border: 1px solid #bdcfe5; border-radius: 6px; font-size: 13px; }
.concept-lab .lab-options button:hover, .concept-lab .lab-secondary:hover { color: #0e51b4; border-color: #8fb5e8; background: #f7faff; }
.concept-lab .lab-options button[aria-pressed="true"] { color: #0e51b4; border-color: #81ace9; background: #e6efff; }
.concept-lab select { padding: 8px 34px 8px 12px; background-color: #fff; border: 1px solid #bdcfe5; border-radius: 6px; }
.concept-lab .lab-image-input { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: center; width: 100%; }
.concept-lab .lab-image-input > * { min-width: 0; }
.concept-lab .lab-photo { text-align: center; }
.concept-lab .lab-product { display: block; width: 240px; height: auto; max-width: 100%; margin: 0 auto; }
.concept-lab .lab-photo figcaption { margin-top: 6px; color: var(--lab-muted); font-size: 12px; }
.concept-lab .lab-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 26px; }
.concept-lab .lab-comparison > article { min-width: 0; padding-top: 18px; border-top: 3px solid #8998ad; }
.concept-lab .lab-comparison .lab-after { border-top-color: var(--lab-blue); }
.concept-lab .lab-comparison header small { display: block; color: var(--lab-muted); font-size: 12px; font-weight: 650; }
.concept-lab .lab-comparison header h5 { margin-top: 5px; }
.concept-lab .lab-after header small { color: #0e51b4; }
.concept-lab .lab-method { margin-top: 12px; color: var(--lab-muted); font-size: 14px; line-height: 1.85; }
.concept-lab .lab-artifact { margin-top: 16px; padding: 20px; border: 1px solid #dce4ee; border-radius: 7px; background: #fafbfd; }
.concept-lab .lab-after .lab-artifact { border-color: #b7d0f3; background: #f6f9ff; }
.concept-lab .lab-artifact > label, .concept-lab .lab-artifact > small { display: block; margin-bottom: 7px; color: var(--lab-muted); font-size: 12px; }
.concept-lab .lab-artifact > strong { display: block; font-size: 19px; font-weight: 700; line-height: 1.65; }
.concept-lab .lab-artifact > p { margin-top: 9px; color: #425a78; font-size: 14px; line-height: 1.9; }
.concept-lab .lab-artifact p + p { margin-top: 10px; }
.concept-lab .lab-records { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin-top: 14px; font-size: 13px; }
.concept-lab .lab-records dt { color: var(--lab-muted); }
.concept-lab .lab-records dd { color: var(--lab-ink); font-weight: 550; text-align: right; }
.concept-lab .lab-records > div { display: contents; }
.concept-lab .lab-evidence { margin-top: 14px; color: var(--lab-muted); font-size: 13px; line-height: 1.85; }
.concept-lab .lab-evidence ul { padding-left: 18px; }
.concept-lab .lab-evidence li + li { margin-top: 5px; }
.concept-lab .lab-result-status { margin-top: 16px; padding: 11px 0 11px 13px; color: #506681; border-left: 3px solid #aab8ca; font-size: 13px; font-weight: 600; }
.concept-lab .lab-result-status.is-success { color: #1d7455; border-color: #289974; }
.concept-lab .lab-result-status.is-warning { color: #876123; border-color: #c99342; }
.concept-lab .lab-gain { display: grid; grid-template-columns: 78px 1fr; gap: 7px 18px; margin-top: 26px; padding: 21px 24px; background: #edf4ff; }
.concept-lab .lab-gain > span { align-self: center; color: #245d9e; font-size: 12px; font-weight: 650; }
.concept-lab .lab-gain > strong { font-size: 18px; font-weight: 700; line-height: 1.65; }
.concept-lab .lab-gain > p { grid-column: 2; color: #446488; font-size: 13px; }
.concept-lab .lab-how { margin-top: 22px; border-top: 1px solid var(--lab-line); border-bottom: 1px solid var(--lab-line); }
.concept-lab .lab-how summary, .concept-lab .lab-reference summary { min-height: 52px; padding: 13px 0; color: #21496f; font-size: 14px; font-weight: 600; cursor: pointer; }
.concept-lab .lab-how > p { margin: 0 0 18px; color: var(--lab-muted); font-size: 14px; }
.concept-lab .lab-how > div { margin-bottom: 20px; }
.concept-lab #lab-mechanism > p { margin: 14px 0; color: var(--lab-muted); font-size: 14px; }
.concept-lab .lab-simulation-note { margin-top: 12px; color: var(--lab-muted); font-size: 12px; }
.concept-lab .lab-input > p { margin-top: 10px; color: #526985; font-size: 13px; }
.concept-lab .lab-flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.concept-lab .lab-flow > div, .concept-lab .lab-flow > span { flex: 1 1 130px; padding: 12px 14px; color: #315c88; background: #f1f6fd; border-bottom: 2px solid #bdd3f1; border-radius: 4px 4px 0 0; font-size: 13px; }
.concept-lab .lab-flow b, .concept-lab .lab-flow strong { display: block; font-size: 13px; }
.concept-lab .lab-flow small { display: block; margin-top: 4px; color: var(--lab-muted); font-size: 12px; }
.concept-lab .lab-flow > i { align-self: center; color: #6384ac; font-style: normal; }
.concept-lab .lab-table { max-width: 100%; margin-top: 14px; }
.concept-lab .lab-table table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; line-height: 1.8; }
.concept-lab .lab-table th, .concept-lab .lab-table td { padding: 11px 12px; border-bottom: 1px solid var(--lab-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.concept-lab .lab-table th { color: #426083; background: #f3f7fc; font-size: 12px; font-weight: 650; }
.concept-lab .lab-table td { color: var(--lab-muted); }
.concept-lab .lab-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.concept-lab .lab-pagination button { padding: 9px 16px; color: #315675; background: #fff; border: 1px solid #c3d3e7; border-radius: 6px; font-size: 13px; }
.concept-lab .lab-pagination button:hover:not(:disabled) { color: #0e51b4; border-color: #8fb5e8; background: #f3f8ff; }
.concept-lab .lab-pagination > span { color: var(--lab-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.concept-lab .lab-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.concept-lab .lab-chips span { padding: 5px 9px; color: #355e8e; border: 1px solid #c4d5ec; border-radius: 4px; background: #fff; font-size: 12px; line-height: 1.7; }
.concept-lab .lab-data-list { margin-top: 12px; }
.concept-lab .lab-data-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #dce6f1; font-size: 13px; }
.concept-lab .lab-data-list > div:last-child { border-bottom: 0; }
.concept-lab .lab-data-list span { color: #526985; }
.concept-lab .lab-data-list b { color: #245d9e; font-weight: 600; text-align: right; }
.concept-lab .lab-primary, .concept-lab .lab-training-button { padding: 10px 17px; color: #fff; background: var(--lab-blue); border: 1px solid var(--lab-blue); border-radius: 6px; font-size: 14px; font-weight: 600; }
.concept-lab .lab-primary:hover:not(:disabled), .concept-lab .lab-training-button:hover:not(:disabled) { background: #0d4fc0; border-color: #0d4fc0; }
.concept-lab .lab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.concept-lab .lab-actions p { color: var(--lab-muted); font-size: 13px; }
.concept-lab .lab-ledger { margin-top: 14px; padding: 16px 18px; background: #fff; border: 1px solid #c5d6ed; border-radius: 5px; }
.concept-lab .lab-ledger h5, .concept-lab .lab-ledger h6 { margin: 0; color: #305a88; font-size: 14px; }
.concept-lab .lab-ledger dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin-top: 10px; font-size: 13px; }
.concept-lab .lab-ledger dt { color: var(--lab-muted); }
.concept-lab .lab-ledger dd { text-align: right; }
.concept-lab .lab-ledger dl > div { display: contents; }
.concept-lab .lab-timeline { padding: 0; margin-top: 14px; list-style: none; }
.concept-lab .lab-timeline li { position: relative; padding: 0 0 16px 20px; border-left: 1px solid #b7cdea; }
.concept-lab .lab-timeline li::before { content: ""; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #8dadcf; }
.concept-lab .lab-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.concept-lab .lab-timeline li.is-success::before { background: #24936b; }
.concept-lab .lab-timeline li.is-warning::before { background: #b98734; }
.concept-lab .lab-timeline b { display: block; font-size: 13px; font-weight: 650; }
.concept-lab .lab-timeline p { margin-top: 3px; color: var(--lab-muted); font-size: 13px; }
.concept-lab .lab-taxonomy { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--lab-line); color: var(--lab-muted); font-size: 13px; line-height: 1.9; }
.concept-lab .lab-taxonomy h4, .concept-lab .lab-taxonomy h5 { margin-bottom: 8px; color: var(--lab-ink); font-size: 15px; font-weight: 700; }
.concept-lab .lab-taxonomy strong { color: #315b8b; font-weight: 600; }
.concept-lab .lab-taxonomy p + p { margin-top: 8px; }
.concept-lab .lab-reference { margin-top: 16px; }
.concept-lab .lab-reference p, .concept-lab .lab-reference ul { color: var(--lab-muted); font-size: 13px; }
.concept-lab .lab-reference ul { padding-left: 20px; }
.concept-lab .lab-reference li + li { margin-top: 6px; }
.concept-lab .lab-reference a { color: #0e51b4; text-decoration: underline; text-underline-offset: 3px; }
.concept-lab .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@container concept-lab (max-width: 760px) {
  .concept-lab .lab-challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 0; background: var(--lab-line); }
  .concept-lab .lab-challenges button { grid-template-columns: 22px 1fr; align-items: center; gap: 2px 7px; min-height: 75px; padding: 11px 12px; border-bottom: 0; border-left: 3px solid transparent; }
  .concept-lab .lab-challenges small { grid-row: span 2; align-self: start; }
  .concept-lab .lab-challenges span { grid-column: 2; }
  .concept-lab .lab-challenges button:last-child { grid-column: 1 / -1; }
  .concept-lab .lab-challenges button[aria-pressed="true"] { border-left-color: var(--lab-blue); }
  .concept-lab .lab-comparison { gap: 20px; }
  .concept-lab .lab-artifact { padding: 16px; }
  .concept-lab .lab-image-input { grid-template-columns: 190px 1fr; gap: 20px; }
}
@container concept-lab (max-width: 600px) {
  .concept-lab .lab-comparison { grid-template-columns: 1fr; gap: 28px; }
  .concept-lab .lab-view-heading { flex-wrap: wrap; gap: 10px; }
  .concept-lab .lab-simulation-label { margin-top: 0; }
  .concept-lab .lab-input { padding: 18px; }
  .concept-lab .lab-image-input { grid-template-columns: 1fr; gap: 14px; }
  .concept-lab .lab-gain { grid-template-columns: 1fr; gap: 6px; padding: 18px; }
  .concept-lab .lab-gain > p { grid-column: 1; }
  .concept-lab .lab-gain > strong { font-size: 17px; }
  .concept-lab .lab-flow { flex-direction: column; gap: 6px; }
  .concept-lab .lab-flow > div, .concept-lab .lab-flow > span { flex-basis: auto; }
  .concept-lab .lab-flow > i { transform: rotate(90deg); }
  .concept-lab .lab-table th, .concept-lab .lab-table td { padding: 9px 7px; font-size: 12px; }
}
@container concept-lab (max-width: 360px) {
  .concept-lab .lab-challenges button { padding: 10px 7px; grid-template-columns: 17px 1fr; gap: 1px 5px; }
  .concept-lab .lab-challenges b { font-size: 13px; }
  .concept-lab .lab-challenges span { font-size: 10px; }
  .concept-lab .lab-options button { padding: 8px 10px; font-size: 12px; }
  .concept-lab .lab-pagination { gap: 8px; }
  .concept-lab .lab-pagination button { padding: 8px 11px; }
  .concept-lab .lab-records, .concept-lab .lab-ledger dl { gap: 8px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .concept-lab *, .concept-lab *::before, .concept-lab *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}