/* one look: light page, white panels; the light panels (inferno) and the flux paths are dark image areas */
:root{
  --bg:#f3f4f6; --panel:#ffffff; --fg:#1a1f28; --muted:#5d6674; --line:#d7dbe2;
  --accent:#b8650a; --cool:#1f66c9; --scale:#3550c8; --faint:#b3b9c3;
  --sans:"IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px}
/* layout: shared controls on top; diffractive (left) and refractive (right) columns, each half the width, sharing the rest of the window height */
.bar{flex:none;display:flex;align-items:center;gap:clamp(10px,2vw,28px);padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.cols{flex:1 1 0;min-height:0;display:flex}
.col{flex:none;width:50%;min-width:0;display:flex;flex-direction:column;gap:12px;padding:12px 16px 14px}
.col+.col{border-left:1px solid var(--line)}
.chead{flex:none;display:flex;align-items:center;gap:clamp(10px,2vw,26px);min-height:32px;white-space:nowrap}
h2{font-size:15px;font-weight:600;margin:0;letter-spacing:.01em}
.ctl{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);min-width:0;white-space:nowrap}
/* a slider control: its text at its own width, the sliders in one row share the remaining space equally */
.ctl.grow{flex:1 1 auto}
.ctl .tl{display:flex;gap:8px;align-items:baseline}
.ctl input[type=range]{flex:1 1 0;width:0;min-width:40px;accent-color:var(--accent)}
.ctl b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
/* values sized for their widest text, so the sliders don't move while dragging */
#lv{min-width:5ch}#fv,#dv{min-width:7ch}#tv{min-width:7ch}#bV{min-width:10ch}#v{min-width:26ch}
.chk{display:flex;align-items:center;gap:5px;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--muted)}
.chk input{margin:0;accent-color:var(--accent)}
.tg{font-family:var(--mono);font-size:12px;color:var(--fg);background:var(--line);border:1px solid var(--line);border-radius:3px;padding:6px 10px;cursor:pointer;min-height:32px}
.tg:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.panel{display:flex;flex-direction:column;gap:4px;min-height:0}
.lbl{flex:none;display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.lbl .m{text-transform:none;letter-spacing:0}   /* maths keeps its case */
.lbl .leg{letter-spacing:0;text-transform:none;font-family:var(--mono);display:flex;gap:14px;flex-wrap:wrap}
.lbl .chk{font-size:11px}
.sw{display:inline-block;width:16px;height:0;border-top:2px solid var(--accent);vertical-align:middle;margin-right:5px}
.sw.d{border-top:2px dashed var(--fg)}
.sw.c{border-top:6px solid var(--cool);opacity:.7}
.sw.x{border-top:6px solid var(--accent);opacity:.7}
.sw.f{border-top:2px solid var(--fg)}
canvas{display:block;width:100%;min-height:0;flex:1 1 0;background:var(--panel);border-radius:2px;touch-action:pan-y}
/* diffractive: panels share the column height in these proportions (each canvas is drawn at whatever height it gets) */
#D .pScr{flex:170 1 0}#D .pLight{flex:858 1 0}
#zwrap{flex:1 1 0;min-height:0;display:flex;flex-direction:column;position:relative}
#close,#near,#far{flex:260 1 0}#logp{flex:788 1 0}
#wg,#wg2{flex:none;height:4px;background:none}
#D{position:relative}
#D canvas{touch-action:none}   /* wheel / pinch: horizontal zoom */
#zov{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;background:none}   /* zoom lines, over the whole diffraction column */
/* refractive: likewise */
#R .pS{flex:180 1 0}#R .pI{flex:170 1 0}#R .pP{flex:300 1 0}
/* the two observer-plane panels at the bottom: same height on both sides (their labels are given the same height in JS), so they line up */
.pObs,.pF{flex:0 0 16%}
.strips{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:3px}
#paths{background:#07090d;cursor:grab}
#paths:active{cursor:grabbing}
#img{cursor:crosshair}
.box{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.zl{position:absolute;left:8px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.85);text-shadow:0 0 3px #000,0 0 6px #000;pointer-events:none}