/* Optics Explorer: experiment components only (bench, stage, controls, readouts, chart).
   Container, type scale, section spacing and large-screen behaviour come from the site layout classes.
   Generated from the 'Inside the Lens' prototype; every selector is scoped under .oe. */
.oe { --stage: #09090b; line-height: 1.65; }
.oe * { box-sizing: border-box; }
.oe * { box-sizing: border-box; }
.oe a { color: inherit; }
.oe .light-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1.5px solid var(--ln); border-radius: 100px; }
.oe .light-seg button { white-space: nowrap; font: 500 12.5px/1 var(--fd); color: var(--t2); background: transparent; border: 0; border-radius: 100px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.oe .light-seg button[aria-pressed="true"] { background: var(--t1); color: var(--bg); }
.oe .light-seg button:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
.oe .swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.oe .swatch.rgb { background: conic-gradient(#ff3b5c, #ffd23b, #3bff7a, #3bb4ff, #8a5bff, #ff3b5c); }
.oe .swatch.green { background: #38ff6b; }
.oe .exp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vh, 44px); }
.oe .bench { border-radius: 28px; overflow: hidden; padding: 0; }
.oe .stage { position: relative; width: 100%; aspect-ratio: 16 / 8; background: var(--stage); overflow: hidden; }
.oe .stage canvas { display: block; width: 100%; height: 100%; outline: none; }
.oe .stage .lbl {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,242,244,.78);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.oe .stage .lbl.strong { color: #fff; }
.oe .stage .hint {
  position: absolute; right: 16px; top: 16px; font-family: var(--fm); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(242,242,244,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 100px; padding: 6px 12px; background: rgba(9,9,11,.5);
}
.oe .stage .status { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,242,244,.55); text-align: center; padding: 24px; }
.oe .controls { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 40px; align-items: center; padding: 24px clamp(18px, 3vw, 32px) 28px; border-top: 1px solid var(--ln); }
.oe .control { display: grid; gap: 6px; }
.oe .control + .control { margin-top: 12px; }
.oe .control-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.oe .control label { font-family: var(--fm); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.oe .control output { font-family: var(--fm); font-size: 13px; font-variant-numeric: tabular-nums; }
.oe input[type="range"] { width: 100%; height: 28px; accent-color: var(--t1); cursor: pointer; }
.oe input[type="range"]:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 4px; }
.oe .readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: 18px; overflow: hidden; margin: 0; }
.oe .readout { background: var(--bg); padding: 14px 16px; display: grid; gap: 2px; min-width: 0; }
.oe .readout dt { font-family: var(--fm); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.oe .readout dd { margin: 0; font-family: var(--fd); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.oe .readout dd small { font-family: var(--fb); font-weight: 400; font-size: 13px; color: var(--t2); letter-spacing: 0; }
.oe .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--ln); border-radius: 100px; }
.oe .seg button, .oe .chip {
  font: 500 14px/1 var(--fd); color: var(--t2); background: transparent; border: 0; border-radius: 100px; padding: 10px 20px; cursor: pointer;
  transition: background-color .2s var(--fluid), color .2s var(--fluid), border-color .2s var(--fluid);
}
.oe .seg button[aria-pressed="true"] { background: var(--t1); color: var(--bg); }
.oe .seg button:focus-visible, .oe .chip:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
.oe .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.oe .chip { border: 1.5px solid var(--ln); padding: 8px 14px; font-size: 13px; }
.oe .chip:hover { border-color: var(--t1); color: var(--t1); }
.oe select { font: 500 14px/1.2 var(--fd); color: var(--t1); background: var(--bg); border: 1.5px solid var(--ln); border-radius: 14px; padding: 10px 14px; width: 100%; max-width: 100%; }
.oe select:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
.oe .spec-line { font-size: 13.5px; color: var(--t2); margin: 12px 0 0; min-height: 1.6em; }
.oe .spec-line b { color: var(--t1); font-weight: 600; }
.oe .est { font-family: var(--fm); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); border: 1px solid var(--ln); border-radius: 100px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.oe .qwr-tag { font-family: var(--fm); font-size: 9.5px; letter-spacing: .12em; color: var(--bg); background: var(--t1); border-radius: 100px; padding: 2px 7px; margin-right: 6px; }
.oe .uses { padding: 18px clamp(18px, 3vw, 32px) 22px; border-top: 1px solid var(--ln); font-size: 14px; color: var(--t2); }
.oe .uses b { color: var(--t1); font-weight: 600; }
.oe .wg-list { display: grid; gap: 8px; padding: 20px clamp(18px, 3vw, 32px) 26px; border-top: 1px solid var(--ln); }
.oe .wg-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 4.5rem; gap: 14px; align-items: center; font-size: 13.5px; }
.oe .wg-row .nm { color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.oe .wg-row .val { font-family: var(--fm); font-size: 12px; color: var(--t2); text-align: right; font-variant-numeric: tabular-nums; }
.oe .wg-track { position: relative; height: 8px; border-radius: 8px; background: var(--ln2); }
.oe .wg-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--t2); }
.oe .wg-row.qwr .wg-bar { background: var(--t1); }
.oe .wg-limit { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--t1); border-radius: 2px; }
.oe .wg-legend { font-family: var(--fm); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.oe .scatter-wrap { position: relative; padding: 18px clamp(10px, 2vw, 24px) 6px; }
.oe .scatter-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.oe .scatter-wrap .axis text { font-family: var(--fm); font-size: 11px; fill: var(--t3); }
.oe .scatter-wrap .axis line { stroke: var(--ln); }
.oe .pt { cursor: pointer; }
.oe .pt:focus { outline: none; }
.oe .pt:focus-visible .mk, .oe .pt:hover .mk { stroke-width: 2.6; }
.oe .tip { position: absolute; z-index: 3; pointer-events: none; max-width: 300px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--t1); background: var(--bg); border: 1px solid var(--ln); box-shadow: 0 20px 50px -24px rgba(0,0,0,.5); }
.oe .tip .tn { font-family: var(--fd); font-weight: 600; }
.oe .tip .tm { color: var(--t2); font-size: 12.5px; }
.oe .filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 20px clamp(18px, 3vw, 32px) 0; }
.oe .legend { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--fm); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); align-items: center; }
.oe .legend svg { width: 14px; height: 14px; vertical-align: -3px; margin-right: 6px; overflow: visible; }
.oe .table-wrap { overflow-x: auto; border-top: 1px solid var(--ln); }
.oe table.ptable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 980px; }
.oe .ptable th, .oe .ptable td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--ln2); vertical-align: top; }
.oe .ptable th { font-family: var(--fm); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.oe .ptable th button { all: unset; cursor: pointer; }
.oe .ptable th button:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
.oe .ptable th[aria-sort] button::after { content: " ↕"; color: var(--t3); }
.oe .ptable th[aria-sort="ascending"] button::after { content: " ↑"; color: var(--t1); }
.oe .ptable th[aria-sort="descending"] button::after { content: " ↓"; color: var(--t1); }
.oe .ptable td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.oe .ptable td.nm { font-weight: 600; color: var(--t1); min-width: 14rem; }
.oe .ptable td.nm small { display: block; font-weight: 400; color: var(--t3); font-size: 12px; }
.oe .ptable td { color: var(--t2); }
.oe .ptable a { color: var(--t2); font-family: var(--fm); font-size: 11px; margin-right: 6px; }
.oe .ptable a:hover { color: var(--t1); }
@media (max-width: 640px) {
.oe .wg-row { grid-template-columns: minmax(0, 1fr) 4rem; }
.oe .wg-row .wg-track { grid-column: 1 / -1; grid-row: 2; }
}
.oe .fine { font-size: 13px; color: var(--t3); max-width: 70ch; margin: 14px 0 0; }
.oe .stage.flat canvas { cursor: crosshair; touch-action: pan-y; }
.oe .stage canvas:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: -3px; }
.oe .ctl-lbl { font-family: var(--fm); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin: 0 0 8px; }
.oe .ctl-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; }
.oe .ctl-row + .ctl-row, .oe .ctl-row + .control, .oe .control + .ctl-row { margin-top: 16px; }
.oe .seg.sm button { padding: 8px 14px; font-size: 13px; }
.oe .bench { overflow: clip; }
@media (min-width: 1000px) {
.oe .bench:has(> .stage) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 360px); }
.oe .bench:has(> .stage) > .stage { grid-column: 1; grid-row: 1; aspect-ratio: auto; height: clamp(400px, calc(100svh - 170px), 640px); }
.oe .bench:has(> .stage) > .controls {
    grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px;
    border-top: 0; border-left: 1px solid var(--ln); padding: 24px 22px; overflow-y: auto; max-height: clamp(400px, calc(100svh - 170px), 640px);
  }
.oe .bench:has(> .stage) > :not(.stage):not(.controls) { grid-column: 1 / -1; }
.oe .bench:has(> .stage) .readouts { grid-template-columns: minmax(0, 1fr); }
.oe .bench:has(> .stage) .readout { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 11px 14px; }
.oe .bench:has(> .stage) .readout dd { font-size: clamp(19px, 1.6vw, 24px); text-align: right; white-space: nowrap; }
}
@media (max-width: 999px) {
.oe .exp-head, .oe .controls { grid-template-columns: minmax(0, 1fr); }
.oe .stage { aspect-ratio: 4 / 3; position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 2; }
.oe .controls { position: relative; z-index: 1; }
}
@media (max-width: 520px) {
.oe .stage { aspect-ratio: 1 / 1; }
.oe .readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oe .readout { padding: 10px 10px; }
.oe .readout dt { font-size: 8.5px; letter-spacing: .1em; }
.oe .readout dd { font-size: 18px; }
.oe .readout dd small { font-size: 11px; }
.oe .controls { padding: 18px 16px 20px; gap: 16px; }
.oe #s-eb .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.oe *, .oe *::before, .oe *::after { animation: none !important; transition: none !important; }
}
/* heading row: two columns on wide screens, built from the site's ach-h2 / ach-body */
.oe .exp-head .ach-h2 { margin: 0; }
.oe .exp-head .ach-body { margin: 0; }
.oe .exp-head .ach-body + .ach-body { margin-top: 14px; }
.oe .ach-body strong { color: var(--t1); font-weight: 600; }
/* notes and small print: comfortable size, spacing and measure (the prototype relied on a page-wide 1.65 line height the site layout does not set) */
.oe .fine { font-size: 14px; max-width: 100ch; margin-top: 18px; }
.oe .uses { font-size: 15px; }
.oe .wg-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) max-content; }
.oe .wg-row .val { white-space: nowrap; }
@media (max-width: 640px) { .oe .wg-row { grid-template-columns: minmax(0, 1fr) max-content; } }
/* display-light control: one floating pill, top right under the nav (bottom left on phones, where the stage pins to the top), always reachable while exploring */
.oe-lightbar { position: fixed; right: clamp(14px, 2vw, 32px); top: 92px; z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 12px 12px 16px; border-radius: 22px; background: var(--bg); border: 1px solid var(--ln2); box-shadow: 0 18px 44px -16px rgba(0,0,0,.4); transition: opacity .25s var(--fluid), top .35s var(--fluid); }
.oe-lightbar .light-seg { gap: 4px; padding: 4px; background: var(--pane); }
.oe-lightbar .light-seg button { font-size: 14px; padding: 10px 16px; color: var(--t1); transition: background .15s ease; }
.oe-lightbar .light-seg button:not([aria-pressed="true"]):hover { background: var(--ln); }
.oe-lightbar .swatch { width: 13px; height: 13px; box-shadow: 0 0 0 1px var(--ln); }
.oe-lightbar.is-hidden { opacity: 0; pointer-events: none; }
.oe-lightbar-label { font-family: var(--fm); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); white-space: nowrap; }
html.ach-nav-away .oe-lightbar { top: 20px; }
/* phones: pin the pill centred under the nav (it tucks up when the nav slides away) */
@media (max-width: 760px) { .oe-lightbar { right: auto; left: 50%; transform: translateX(-50%); top: calc(94px + env(safe-area-inset-top, 0px)); bottom: auto; } html.ach-nav-away .oe-lightbar { top: calc(12px + env(safe-area-inset-top, 0px)); } }
/* phones and tablets: the artifact pins the stage under the nav while the controls scroll up behind it; on a phone that hides the controls, so let the stage and its controls scroll together */
@media (max-width: 999px) { .oe .stage { position: relative; top: auto; z-index: auto; } }
@media (max-width: 760px) { .oe-lightbar { padding: 4px; border-radius: 100px; gap: 0; } .oe-lightbar .light-seg { padding: 2px; } .oe-lightbar .light-seg button { font-size: 13px; padding: 9px 14px; } }
@media (max-width: 520px) { .oe-lightbar-label { display: none; } }
/* phones: the 11-column table cannot fit, so keep product, type and PPD (display, optics, resolution, FOV, maker PPD, weight, year and sources stay on larger screens; FOV is the chart axis and in its tap tooltip); keep header words whole */
@media (max-width: 640px) {
  .oe table.ptable { min-width: 0; font-size: 13px; }
  .oe .ptable :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11)) { display: none; }
  .oe .ptable th, .oe .ptable td { padding: 10px 8px; }
  .oe .ptable th { white-space: nowrap; }
  .oe .ptable td.nm { min-width: 0; }
  .oe .scatter-wrap { padding-inline: 6px; }
}
/* the experiments are taller than a screen, so the site's one-screen snapping fights the reader here: free scrolling on this page */
@media (min-width: 1600px) and (min-height: 700px) {
  html:has(.oe-lightbar) { scroll-snap-type: none; }
}
/* phones: the caption of a 2D scene is a text strip under the picture, and the eyebox gets a band for its front-view inset, so nothing is drawn over the chart */
.oe .stage-cap { display: none; }
@media (max-width: 520px) {
  .oe .stage:has(> .stage-cap) { aspect-ratio: auto; height: auto; display: flex; flex-direction: column; }
  .oe .stage:has(> .stage-cap) canvas { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .oe .stage-cap { display: block; padding: 10px 14px 12px; font: 500 10px/1.5 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: rgba(242,242,244,.7); background: #050506; border-top: 1px solid rgba(255,255,255,.08); }
  .oe #s-eb { aspect-ratio: 1 / 1.38; }
}
/* touch devices: roomier sliders; 16px on the select because iOS Safari zooms the page when a smaller field is focused */
@media (pointer: coarse) { .oe input[type="range"] { height: 44px; } .oe select { font-size: 16px; } }
/* touch: the 3D scenes can be dragged; this is the unlock for free two-axis rotation */
.oe .stage .hint-btn { pointer-events: auto; cursor: pointer; z-index: 3; padding: 8px 14px; }
.oe .stage .hint-btn[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.16); }
.oe .stage.is-free { box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
/* phones: no floating pill. The light toggle lives inside each scene instead, and the nav is held out of the way while a scene is being used */
.oe .stage .light-pick { display: none; }
@media (max-width: 760px) {
  .oe-lightbar { display: none; }
  .oe .stage .light-pick { display: inline-flex; gap: 2px; padding: 3px; position: absolute; left: 12px; top: 13px; z-index: 3; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; background: rgba(9,9,11,.62); }
  .oe .stage .light-pick button { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px/1 var(--fd); color: rgba(242,242,244,.8); background: transparent; border: 0; border-radius: 100px; padding: 7px 9px; white-space: nowrap; cursor: pointer; }
  .oe .stage .light-pick button[aria-pressed="true"] { background: #f5f5f7; color: #1d1d1f; }
  .oe .stage .light-pick .swatch { width: 10px; height: 10px; }
  html.oe-lock .ach-nav { transform: translate(-50%, calc(-100% - 28px)) !important; opacity: 0 !important; pointer-events: none !important; }
}
/* in-copy links: underlined and darker than the body text so they read as links */
.ach-body a:not(.ach-link) { color: var(--t1); text-decoration: underline; text-decoration-color: var(--ln2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ach-body a:not(.ach-link):hover { text-decoration-color: var(--t1); }
/* jump links under the hero: also the topic list a reader (and a crawler) sees first */
.oe.ach-has-bd > .ach-page-hero-inner { position: relative; z-index: 2; }
.oe-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px auto 0; max-width: 880px; }
.oe-jump a { font: 500 13.5px/1 var(--fd); color: var(--t1); text-decoration: none; border: 1px solid var(--ln); border-radius: 100px; padding: 10px 16px; transition: border-color .15s ease; }
.oe-jump a:hover { border-color: var(--t2); }
/* phones: one swipeable row instead of seven wrapped lines, so the first experiment stays near the top */
@media (max-width: 760px) { .oe .ach-page-hero-inner { min-width: 0; max-width: 100%; } .oe-jump { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-top: 22px; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .oe-jump::-webkit-scrollbar { display: none; } .oe-jump a { flex: 0 0 auto; padding: 10px 14px; } }
.oe .oe-sign { font-family: var(--fm); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); margin: 22px 0 0; }