.lab-main { display: grid; gap: 0; }
.lab-main :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lab-home-header, .lab-page-header { max-width: 900px; }
.lab-page-header .lead { max-width: 60ch; }
.lab-home-header { padding-bottom: 8px; border-bottom: 0; }
.lab-home-header h1 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); letter-spacing: -.04em; }

.lab-section-label {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .045em;
}

.lab-section {
  display: grid;
  gap: 18px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.lab-section h2 { font-size: clamp(1.28rem, 3vw, 1.9rem); letter-spacing: -.035em; }
.lab-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.lab-section-heading > div { display: grid; gap: 5px; min-width: 0; }
.lab-section-copy { max-width: 66ch; color: var(--muted); line-height: 1.72; }

/* Home */
.lab-home-routes { padding-top: 20px; }
.lab-route-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.lab-route { border-bottom: 1px solid var(--line); }
.lab-route a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 18px;
  align-items: center;
  min-height: 78px;
  padding: 14px 0;
  text-decoration: none;
}
.lab-route-copy { display: grid; grid-template-columns: minmax(110px, .2fr) minmax(0, 1fr); gap: 20px; align-items: baseline; min-width: 0; }
.lab-route-copy strong { font-size: 1.05rem; letter-spacing: -.02em; }
.lab-route-copy span { max-width: 54ch; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.lab-route-arrow { font-size: 1.1rem; text-align: right; transition: transform 120ms ease; }
.lab-route a:hover .lab-route-copy strong { text-decoration: underline; text-underline-offset: .16em; }
.lab-route a:hover .lab-route-arrow { transform: translateX(3px); }

.lab-home-secondary { padding-top: 28px; }
.lab-home-secondary ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lab-home-secondary li + li { border-left: 1px solid var(--line); }
.lab-home-secondary a { display: grid; gap: 4px; min-height: 72px; padding: 14px 18px; text-decoration: none; }
.lab-home-secondary li:first-child a { padding-left: 0; }
.lab-home-secondary strong { font-size: .9rem; }
.lab-home-secondary span { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.lab-home-secondary a:hover strong { text-decoration: underline; text-underline-offset: .16em; }

.lab-line-link, .lab-line-list a { color: inherit; text-decoration: none; }
.lab-line-link {
  display: grid;
  grid-template-columns: minmax(100px, .2fr) minmax(0, 1fr) 24px;
  gap: 18px;
  align-items: baseline;
  min-height: 52px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lab-line-link span { color: var(--muted); font-size: .78rem; }
.lab-line-link span:last-child { text-align: right; color: var(--ink); }
.lab-line-link strong { overflow-wrap: anywhere; }
.lab-line-link:hover strong { text-decoration: underline; text-underline-offset: .16em; }

/* Curated reading paths */
.lab-start-section { gap: 22px; padding-top: 24px; }
.lab-start-list { border-top: 1px solid var(--line); }
.lab-start-path {
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
  gap: 38px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.lab-start-path-heading { align-content: start; }
.lab-start-path-heading > div { display: grid; gap: 6px; min-width: 0; }
.lab-start-path h3 { margin: 0; font-size: 1.16rem; letter-spacing: -.02em; }
.lab-start-path-heading p:last-child { color: var(--muted); font-size: .88rem; line-height: 1.64; }
.lab-start-sequence { min-width: 0; }
.lab-start-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.lab-start-links li { min-width: 0; border-bottom: 1px solid var(--line); }
.lab-start-links li:nth-child(odd) { padding-right: 16px; }
.lab-start-links li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.lab-start-links a { min-height: 52px; padding: 10px 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; text-decoration: none; }
.lab-start-links span { color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.lab-start-links strong { font-size: .9rem; overflow-wrap: anywhere; }
.lab-start-links a:hover strong { text-decoration: underline; text-underline-offset: .16em; }
.lab-start-more summary,
.lab-start-extra > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 9px 0;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 800;
  list-style: none;
}
.lab-start-more summary { border-bottom: 1px solid var(--line); }
.lab-start-more summary::-webkit-details-marker,
.lab-start-extra > summary::-webkit-details-marker { display: none; }
.lab-start-more summary::after,
.lab-start-extra > summary::after { content: '＋'; color: var(--ink); font-size: 1rem; font-weight: 500; }
.lab-start-more[open] summary::after,
.lab-start-extra[open] > summary::after { content: '−'; }
.lab-start-more summary:hover,
.lab-start-extra > summary:hover { color: var(--ink); }
.lab-start-links-more { border-top: 0; }
.lab-start-extra { border-bottom: 1px solid var(--line); }
.lab-start-extra > summary { min-height: 54px; border-top: 1px solid var(--line); }
.lab-start-extra .lab-start-list { border-top: 0; }

/* Reference index */
.lab-index-section { gap: 22px; }
.lab-index-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.lab-index-row { border-bottom: 1px solid var(--line); }
.lab-index-row a {
  display: grid;
  grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr) 22px;
  gap: 24px;
  align-items: center;
  min-height: 78px;
  padding: 14px 0;
  text-decoration: none;
}
.lab-index-title { display: grid; gap: 3px; min-width: 0; }
.lab-index-title strong { font-size: .98rem; overflow-wrap: anywhere; }
.lab-index-title small { color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.lab-index-summary {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lab-index-arrow { text-align: right; }
.lab-index-row a:hover strong { text-decoration: underline; text-underline-offset: .16em; }
.lab-reference-row a { min-height: 92px; }

/* Reading */
.lab-general, .lab-reading-section { max-width: 940px; }
.lab-definition-section { padding-top: 18px; }
.lab-definition {
  max-width: 70ch;
  font-size: clamp(1.18rem, 2.15vw, 1.52rem);
  line-height: 1.8;
  letter-spacing: -.014em;
  overflow-wrap: anywhere;
}
.lab-example-list { list-style: none; padding: 0; margin: 0; counter-reset: example; border-top: 1px solid var(--line); }
.lab-example { counter-increment: example; display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: 34px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.lab-example > div:first-child { display: grid; align-content: start; gap: 5px; min-width: 0; }
.lab-example > div:first-child::before { content: "0" counter(example); color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.lab-example h3 { margin: 0; font-size: 1rem; letter-spacing: -.015em; overflow-wrap: anywhere; }
.lab-example-context { color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.45; }
.lab-example-copy { display: grid; align-content: start; gap: 6px; min-width: 0; }
.lab-example-copy > p:last-child { color: var(--muted); line-height: 1.74; overflow-wrap: anywhere; }
.lab-example-point { font-size: .72rem; font-weight: 800; }
.lab-text-list { list-style: none; padding: 0; margin: 0; max-width: 76ch; border-top: 1px solid var(--line); }
.lab-text-list li { padding: 14px 0 14px 24px; position: relative; border-bottom: 1px solid var(--line); line-height: 1.74; overflow-wrap: anywhere; }
.lab-text-list li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.lab-line-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.lab-line-list li { border-bottom: 1px solid var(--line); }
.lab-line-list a { display: grid; grid-template-columns: minmax(100px, .18fr) minmax(0, 1fr) 22px; gap: 18px; align-items: center; min-height: 50px; padding: 12px 0; }
.lab-line-list span { color: var(--muted); font-size: .72rem; }
.lab-line-list span:last-child { text-align: right; color: var(--ink); }
.lab-line-list strong { overflow-wrap: anywhere; }
.lab-line-list a:hover strong { text-decoration: underline; text-underline-offset: .16em; }
.lab-source-scope { font-size: 1rem; overflow-wrap: anywhere; }

/* Search */
.lab-search-section { padding-top: 20px; }
.lab-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .28fr); gap: 12px; max-width: 860px; }
.lab-search-controls label { display: grid; gap: 6px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.lab-search-controls input, .lab-search-controls select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  padding: 11px 13px;
}
.lab-result-count { color: var(--muted); font-size: .84rem; }
.lab-search-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.lab-search-row { border-bottom: 1px solid var(--line); }
.lab-search-row[hidden] { display: none; }
.lab-search-row a {
  display: grid;
  grid-template-columns: 86px minmax(200px, .35fr) minmax(0, 1fr) 22px;
  gap: 18px;
  min-height: 62px;
  padding: 13px 0;
  text-decoration: none;
  align-items: center;
}
.lab-search-row span, .lab-search-row small { color: var(--muted); }
.lab-search-row span { font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.lab-search-row strong { overflow-wrap: anywhere; }
.lab-search-row small { font-size: .78rem; line-height: 1.48; overflow-wrap: anywhere; }
.lab-search-row i { font-style: normal; text-align: right; }
.lab-search-row a:hover strong { text-decoration: underline; text-underline-offset: .16em; }

@media (min-width: 1100px) {
  .lab-start-path { grid-template-columns: minmax(330px, .38fr) minmax(0, 1fr); gap: 54px; }
  .lab-index-row a { grid-template-columns: minmax(280px, .31fr) minmax(0, 1fr) 22px; gap: 34px; }
  .lab-example { grid-template-columns: minmax(260px, .3fr) minmax(0, 1fr); gap: 48px; }
  .lab-reading-section, .lab-general { max-width: 980px; }
}

@media (max-width: 820px) {
  .lab-section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .lab-start-path { grid-template-columns: 1fr; gap: 18px; }
  .lab-index-row a { grid-template-columns: minmax(170px, .4fr) minmax(0, 1fr) 18px; gap: 16px; }
}

@media (max-width: 640px) {
  .lab-section { padding: 28px 0; gap: 16px; }
  .lab-route a { min-height: 72px; padding: 13px 0; }
  .lab-route-copy { grid-template-columns: 1fr; gap: 4px; }
  .lab-route-copy strong { font-size: 1rem; }
  .lab-route-copy span { font-size: .84rem; line-height: 1.5; }
  .lab-home-secondary ul { grid-template-columns: 1fr; }
  .lab-home-secondary li + li { border-left: 0; border-top: 1px solid var(--line); }
  .lab-home-secondary a, .lab-home-secondary li:first-child a { min-height: 64px; padding: 12px 0; }
  .lab-start-links { grid-template-columns: 1fr; }
  .lab-start-links li:nth-child(odd), .lab-start-links li:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  .lab-start-links a { min-height: 48px; }
  .lab-start-more summary, .lab-start-extra > summary { min-height: 48px; }
  .lab-index-row a, .lab-search-row a, .lab-line-list a, .lab-line-link { grid-template-columns: minmax(0, 1fr) 28px; gap: 5px 12px; align-items: start; }
  .lab-index-row a { min-height: 82px; padding: 14px 0; }
  .lab-index-title, .lab-index-summary, .lab-search-row span, .lab-search-row strong, .lab-search-row small, .lab-line-list span:first-child, .lab-line-list strong, .lab-line-link span:first-child, .lab-line-link strong { grid-column: 1; }
  .lab-index-arrow, .lab-search-row i, .lab-line-list span:last-child, .lab-line-link span:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .lab-index-summary { font-size: .8rem; -webkit-line-clamp: 3; }
  .lab-example { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .lab-example-copy { gap: 5px; }
  .lab-search-controls { grid-template-columns: 1fr; }
  .lab-search-row a { min-height: 72px; }
  .lab-line-list a, .lab-line-link { min-height: 52px; }
}

@media (max-width: 390px) {
  .lab-start-path-heading { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-route-arrow { transition: none; }
  .lab-route a:hover .lab-route-arrow { transform: none; }
}
