.projection-lab { max-width: 1440px; }
.projection-lab .demo-intro h1 { max-width: 1050px; }
.projection-lab .demo-intro p:not(.eyebrow) { max-width: 1000px; }
.projection-lab h2 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.projection-lab h3 { margin: 0 0 .8rem; font-size: 1.04rem; }
.projection-lab p, .projection-lab li, .projection-live p { line-height: 1.75; }
.projection-lab code, .projection-live code { overflow-wrap: anywhere; }
.projection-notice { padding: 1rem 1.15rem; border-left: 3px solid var(--accent); background: var(--accent-soft); line-height: 1.75; }
.projection-topic-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0; font-size: .9rem; }
.projection-example-boundary { border-top: 2px solid var(--accent); padding-bottom: 1.25rem; }
.projection-example-boundary + .projection-section { padding-top: 1.5rem; }
.projection-layer-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 1rem 0; margin: 1.8rem 0; }
.projection-layer-flow li { border-top: 2px solid var(--accent); padding-top: 1rem; min-width: 0; }
.projection-layer-flow h2 { font-size: 1.25rem; }
.projection-layer-flow p { color: var(--muted); margin-bottom: 0; }
.projection-section { padding: 2.5rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.projection-section-heading { display: flex; gap: 1rem; align-items: end; justify-content: space-between; flex-wrap: wrap; }
.projection-section-heading .field { flex: 0 1 420px; }
.projection-envelope { color: var(--muted); overflow-wrap: anywhere; font-size: .9rem; }
.projection-mapping-grid, .projection-query-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.projection-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.15rem; }
.projection-lab textarea { font: .83rem/1.6 Consolas, monospace; resize: vertical; min-height: 22rem; tab-size: 2; }
.projection-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0; }
.projection-lab pre, .projection-live pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: .9rem; border-radius: 8px; background: #edf1ee; color: #253e36; font: .83rem/1.7 Consolas, monospace; }
.projection-join { font-size: .85rem; }
.projection-table-wrap { overflow: auto; max-height: 36rem; }
.projection-table { border-collapse: collapse; width: 100%; text-align: left; font-size: .84rem; }
.projection-table caption { text-align: left; color: var(--muted); padding: 0 0 .6rem; font-size: .82rem; }
.projection-table th, .projection-table td { padding: .65rem .55rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.projection-table th { font-size: .75rem; color: var(--muted); }
.projection-table td { overflow-wrap: anywhere; }
.projection-table td code { white-space: pre-wrap; }
.projection-table td details { min-width: 7rem; }
.projection-table td details code { display: block; max-width: 22rem; font-size: .75rem; }
.projection-detail { font-size: .84rem; color: var(--muted); }
.projection-lab summary, .projection-live summary { cursor: pointer; line-height: 1.7; color: var(--accent-strong); }
.projection-lab details { margin-top: .85rem; }
.projection-lab details p { font-size: .9rem; }
.projection-scope-controls, .projection-criterion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.projection-criterion { border: 1px solid var(--line); border-radius: 9px; padding: .9rem; }
.projection-criterion legend { color: var(--muted); padding: 0 .4rem; }
.projection-check { display: flex; align-items: center; gap: .55rem; font-size: .9rem; }
.projection-query-grid { margin-top: 1rem; }
.projection-query-grid p { font-size: .88rem; }
#projection-sets { white-space: pre-wrap; overflow-wrap: anywhere; }
.projection-lab [aria-pressed="true"] { color: white; background: var(--accent); border-color: var(--accent); }
.projection-warning { color: #8c531d; }
.projection-warning:empty { display: none; }
.projection-diagnostics { color: var(--muted); font-size: .85rem; }
.projection-dictionary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.projection-dictionary details { border-bottom: 1px solid var(--line); padding: .4rem 0 .9rem; min-width: 0; }
.projection-dictionary dl { font-size: .86rem; line-height: 1.7; }
.projection-dictionary dt { color: var(--accent-strong); margin-top: .8rem; overflow-wrap: anywhere; }
.projection-dictionary dd { margin: .15rem 0 0; color: var(--muted); }
.projection-access-steps { padding-left: 1.4rem; }
.projection-access-steps li { padding-left: .35rem; margin-bottom: .85rem; }
.projection-live { margin-top: 1.5rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.projection-live h2 { margin-top: 0; }
.projection-live .projection-table-wrap { max-height: 22rem; }
.projection-lab :focus-visible, .projection-live :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) {
  .projection-mapping-grid, .projection-query-grid { grid-template-columns: minmax(0, 1fr); }
  .projection-layer-flow { gap: .85rem; }
}
@media (max-width: 620px) {
  .projection-layer-flow, .projection-scope-controls, .projection-criterion, .projection-dictionary { grid-template-columns: minmax(0, 1fr); }
  .projection-panel { padding: .85rem; }
  .projection-table { min-width: 500px; }
  .projection-lab textarea, .projection-lab input, .projection-lab select { font-size: 1rem; }
  .projection-lab .button { min-height: 44px; line-height: 1.3; }
  .projection-section { padding: 1.8rem 0; }
}
@media (prefers-reduced-motion: reduce) { .projection-lab .button { transition: none; } }