:root{font-family:Arial,Helvetica,sans-serif;color:#243332;background:#fffefa;font-size:16px}*{box-sizing:border-box}body{margin:0}.explorer{max-width:1120px;padding:22px;margin:auto}h1{font-size:28px;margin:0 0 8px}header p{margin:0 0 20px}.app{display:none}.ready .app{display:block}.ready .file-fallback{display:none}.file-fallback img{width:100%}.embedded header{display:none}.embedded .explorer{padding:14px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:16px}label{display:flex;justify-content:space-between;font-weight:600;gap:10px}output{white-space:nowrap}input[type=range]{width:100%;margin:12px 0;accent-color:#157f79}.buttons{display:flex;flex-wrap:wrap;gap:6px}button{background:white;border:1px solid #9cabaa;border-radius:6px;color:#243332;font-size:14px;padding:7px 10px;cursor:pointer}button:hover{background:#eaf3f0}button:focus-visible,input:focus-visible{outline:3px solid #2166b3;outline-offset:2px}.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(190px,1.4fr);gap:8px;background:#edf4f1;border-radius:8px;padding:12px;font-size:13px}.results strong{display:block;font-size:18px;margin-top:5px}svg{width:100%;display:block}svg text{font-family:Arial,Helvetica,sans-serif;font-size:18px;fill:#243332}.note{font-size:13px;line-height:1.45;color:#566261;margin:2px 0 10px}.status{border-left:4px solid #157f79;background:#f0f5f3;padding:10px 12px;margin:0 0 10px;font-size:15px;line-height:1.4}#field-strip{touch-action:none}#marker{cursor:ew-resize}@media(max-width:600px){.explorer{padding:12px}.controls{grid-template-columns:1fr;gap:14px}.results{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}.results strong{font-size:17px}.note{font-size:12px}}

@media(min-width:760px){.slide-view .app{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px}.slide-view .controls{grid-template-columns:1fr;gap:15px}.slide-view .results{grid-template-columns:1fr 1fr;font-size:12px}.slide-view .results strong{font-size:16px}.slide-view label{font-size:14px}.slide-view button{font-size:12px;padding:6px}.slide-view .visuals>.note:last-child{display:none}.slide-view .note{font-size:11px}.slide-view .status{font-size:13px;margin-bottom:0}.slide-view .explorer{max-width:1400px;padding:10px}.slide-view header{display:none}}

.narrow-label{display:none}@media(max-width:600px){svg text{font-size:32px}.wide-label{display:none}.narrow-label{display:block}}
@media(min-width:760px){
 .slide-view .app{position:relative;grid-template-columns:270px minmax(0,1fr);min-height:470px}
 .slide-view .controls{gap:10px;margin-bottom:10px}
 .slide-view input[type=range]{margin:8px 0}
 .slide-view .results{padding:9px;gap:7px}
 .slide-view .results strong{font-size:15px;margin-top:3px}
 .slide-view #ray-diagram{height:235px}
 .slide-view #field-strip{height:130px}
 .slide-view .status{position:absolute;left:0;top:320px;width:270px;font-size:12px;padding:8px;line-height:1.35}
 .slide-view .visuals>.note{font-size:11px;line-height:1.3;margin:2px 0 5px}
}

/* Keep the changing limiter label from shifting the compact slide layout. */
@media(min-width:760px){.slide-view .results>div:last-child strong{min-height:2.4em}}