.lentex-principle {
  display: flex;
  align-items: start;
  gap: 1rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}
.lentex-principle > li { flex: 1 1 0; min-inline-size: 0; border-block-start: 2px solid #c8d9e8; padding-block-start: .75rem; }
.lentex-principle > li + li { border-color: #8caeca; }
.lentex-principle strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.4; color: #233d54; text-wrap: pretty; }
.lentex-principle span { display: block; margin-block-start: .35rem; font-size: .75rem; line-height: 1.5; color: #606773; }
.beam-section .lentex-principle-note { margin: .75rem 0 0; font-size: .75rem; line-height: 1.6; color: #606773; }
.lentex-manual-control { display: grid; gap: .5rem; margin-block: 1rem .25rem; color: #46596b; font-size: .8125rem; line-height: 1.5; }
.lentex-manual-control input[type=range] { display: block; inline-size: 100%; min-block-size: 44px; margin: 0; padding: 0; touch-action: pan-y; accent-color: var(--blue, #0071e3); }
.lentex-manual-control input:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; border-radius: .25rem; }
.comparison-section > .lentex-manual-control { max-inline-size: 900px; margin: 1rem auto .75rem; }
.comparison-section > .interactive-demo-controls { max-inline-size: 900px; margin-inline: auto; }
@media (max-width: 780px) {
  .beam-section { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .5rem; }
  .beam-section > div { display: contents; }
  .beam-section > div > .overline { order: 0; }
  .beam-section > div > h2 { order: 1; margin: 0 0 .25rem; }
  .beam-section > div > p:not(.lentex-principle-note) { order: 2; margin: 0 0 .5rem; }
  .beam-section > div > .lentex-principle { order: 3; margin: .5rem 0 .875rem; }
  .beam-section > .beam-visual { order: 4; display: block; inline-size: 100%; block-size: auto; max-block-size: 20rem; aspect-ratio: 3 / 2; }
  .beam-section > div > .interactive-demo-controls { order: 5; margin: .375rem 0 0; }
  .beam-section > div > .beam-label { order: 6; margin: .25rem 0 0; }
  .beam-section > div > .lentex-manual-control { order: 7; margin: 0; gap: .25rem; }
  .beam-section > div > .range-labels { order: 8; margin: 0; }
  .beam-section > div > small { order: 9; margin: .375rem 0 0; }
  .beam-section > div > .lentex-principle-note { order: 10; margin: .25rem 0 0; }
  .lentex-principle { gap: .75rem; margin-block-start: 1.25rem; }
  .lentex-principle strong { font-size: .8125rem; }
}
@media (max-width: 480px) {
  .lentex-principle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
  .lentex-principle > li { padding-block-start: .5rem; }
  .lentex-principle strong { font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; hyphens: auto; }
  .lentex-principle span { margin-block-start: .2rem; font-size: .6875rem; line-height: 1.5; overflow-wrap: anywhere; hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lentex-manual-control input { scroll-behavior: auto; }
}