.lab-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; padding: 72px 0 48px; }
.lab-hero h1 { font-size: clamp(42px, 5.5vw, 72px); margin: 20px 0 0; max-width: 14ch; }
.lab-hero .lead { max-width: 42ch; margin: 0; }
.lab-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 12px/1.7 var(--mono); color: var(--muted); margin: 20px 0; }
.lab-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 40px; background: #f2f4ef; border-radius: 12px; }
.lab-feature h2, .lab-entry h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; margin: 20px 0; }
.lab-feature h2 a:hover, .lab-entry h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.lab-feature p, .lab-entry p { line-height: 1.8; }
.lab-feature .lab-meta, .lab-entry .lab-meta { margin-top: 0; }
.lab-chart { margin: 0; align-self: center; padding: 24px 0; }
.lab-chart figcaption { font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 28px; }
.lab-bar { margin-block: 22px; }
.lab-bar-label { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; margin-bottom: 10px; }
.lab-bar-track { display: block; height: 12px; border-radius: 2px; background: #dde2d8; }
.lab-bar-fill { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.lab-chart .resource-note { margin: 20px 0 0; }
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 48px 0; }
.lab-entry { padding-top: 24px; border-top: 1px solid var(--line); }
.lab-entry .text-link, .lab-feature .text-link { min-height: 44px; }
.lab-stat { font: 32px/1.4 var(--sans); letter-spacing: -1px; margin: 24px 0 4px; }
.lab-stat span { font-size: 14px; letter-spacing: 0; color: var(--muted); }
.lab-method { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; border-top: 1px solid var(--line); padding: 40px 0 56px; }
.lab-method h2 { margin: 0; font-size: 28px; }
.lab-method p { margin: 0; line-height: 1.8; color: var(--muted); }
.lab-takeaway { max-width: 820px; padding: 24px 28px; background: #f2f4ef; border-left: 2px solid var(--ink); margin: 0 0 32px; }
.lab-takeaway p { margin: 0; line-height: 1.8; }
.lab-takeaway .label { margin-bottom: 10px; font-size: 11px; }
.lab-jumps { display: flex; flex-wrap: wrap; gap: 4px 24px; max-width: 820px; padding-bottom: 24px; }
.lab-jumps a { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.lab-code { max-width: 100%; overflow-x: auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font: 12px/1.9 var(--mono); tab-size: 2; }
.lab-code code { font: inherit; }
.lab-shop { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border-top: 1px solid var(--line); padding: 32px 0 48px; }
.lab-shop h2 { margin: 8px 0 12px; font-size: 28px; }
.lab-shop p { max-width: 66ch; line-height: 1.8; color: var(--muted); margin-bottom: 0; }
.lab-shop .resource-actions { margin-top: 0; flex-direction: column; align-items: stretch; }
.lab-related { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 0 0 40px; }
.lab-related a { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.lab-home-link { margin-top: 18px; }
.lab-home-link a { text-decoration: underline; text-underline-offset: 4px; }
.session-chart { margin: 32px 0; padding: 28px; background: #f2f4ef; border-radius: 12px; }
.session-chart figcaption { font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 20px; }
.session-cell { padding: 14px 0; border-top: 1px solid #dde2d8; }
.session-cell-label { margin: 0 0 8px; font-weight: 500; }
.session-cell-label span { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 8px; }
.session-run { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem; align-items: center; gap: 16px; margin: 6px 0; font-size: 14px; }
.session-run-label { font: 12px/1.5 var(--mono); color: var(--muted); }
.session-run strong { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.session-bars { display: grid; gap: 3px; }
.session-bars span { display: block; height: 8px; border-radius: 2px; background: var(--ink); }
.session-bars span + span { opacity: .4; }
.session-cell-reference .session-bars span { background: #8a8f86; }
.session-chart .resource-note { margin: 16px 0 0; }
@media (max-width: 760px) {
  .lab-hero, .lab-feature, .lab-grid, .lab-method, .lab-shop { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lab-hero { padding: 40px 0 32px; }
  .lab-hero h1 { font-size: clamp(38px, 9vw, 56px); }
  .lab-feature { padding: 24px; }
  .lab-chart { padding: 0; }
  .lab-chart figcaption { margin-bottom: 20px; }
  .lab-grid { padding: 32px 0; gap: 32px; }
  .lab-takeaway { padding: 20px; }
  .lab-code { padding: 16px; }
  .lab-meta { gap: 6px 14px; font-size: 11px; }
  .lab-shop .resource-actions { align-items: flex-start; }
  .session-chart { padding: 20px 16px; }
  .session-run { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .session-run-label { grid-column: 1 / -1; }
}