:root{color-scheme:dark;font-family:'Segoe UI',Arial,sans-serif;color:#c6d4dc;background:#071119;font-synthesis:none;--electric:#70e7f5;--magnetic:#f5c778;--muted:#7e96a6;--accent:#94d5df;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid #8cc6d9;outline-offset:4px}button,canvas,input{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}#app,#stage{position:absolute;inset:0}#stage>canvas{display:block;touch-action:none}.top-shade{position:absolute;inset:0 0 auto;height:190px;background:linear-gradient(#071119 45%,#071119dc 75%,#07111900);pointer-events:none}
#experiments{position:absolute;top:14px;left:22px;right:22px;display:grid;grid-auto-flow:column;grid-auto-columns:143px;gap:12px;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 0 8px;z-index:3;touch-action:pan-x;mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 18px),transparent)}#experiments::-webkit-scrollbar{display:none}.experiment{position:relative;padding:5px 4px 10px;text-align:left;min-width:0;isolation:isolate;border-radius:8px;transition:background .25s var(--ease),color .25s var(--ease);color:#91a7b5}.experiment:hover{background:#8eafc608;color:#dae9ee}.experiment[aria-pressed=true]{color:#e7f5f7;background:#8eafc60b}.experiment img{display:block;object-fit:contain;width:100%;height:82px;opacity:.68;transform:scale(.95);transition:transform .35s var(--ease),opacity .3s,filter .35s;pointer-events:none}.experiment:hover img{transform:scale(1);opacity:.94}.experiment[aria-pressed=true] img{transform:scale(1);opacity:1;filter:drop-shadow(0 0 9px #78bac21c)}.experiment span{display:block;font-size:11px;font-weight:400;letter-spacing:.01em;line-height:1.4;padding:6px 7px 0;white-space:nowrap}
.scene-controls{position:absolute;left:50%;top:151px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:8;padding:5px 7px 5px 5px;border:1px solid #748f9f24;background:#0d1a23df;border-radius:11px;backdrop-filter:blur(18px);box-shadow:0 5px 22px #0002}.view-modes{display:flex;gap:3px}.view-modes button{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 13px;border-radius:7px;font-size:11px;white-space:nowrap;color:#829eaf;transition:background .24s var(--ease),color .24s,box-shadow .24s}.view-modes button:hover{color:#d3edf2;background:#a6cde408}.view-modes button[aria-pressed=true]{color:#ddf3f5;background:#a2c2d51a;box-shadow:inset 0 0 0 1px #a2c2d51a}.mode-symbol{width:8px;height:8px;display:block;opacity:.8}.field-symbol{border-radius:50%;background:linear-gradient(90deg,#6ee2ee 50%,#9875ed 50%)}.energy-symbol{border-radius:50%;background:#a5e4df;box-shadow:0 0 7px #82e7e780}.phase-symbol{border-radius:50%;background:conic-gradient(#f8a68e,#b3ce81,#82b1ed,#e78fd1,#f8a68e)}.scene-actions{display:flex;gap:1px;align-items:center;padding-left:10px;border-left:1px solid #8aa3b326}.icon{width:34px;height:34px;display:grid;place-items:center;padding:8px;color:#91aab9;border-radius:7px;transition:color .2s,background .2s,transform .25s var(--ease);flex:0 0 auto}.icon:hover{background:#aecedf12;color:#e0f3f5}.icon:active{transform:scale(.92)}.icon svg{width:17px;height:17px}#settings-toggle[aria-expanded=true]{color:#d5eff3;background:#a6d3e11a}
.detector-ui{position:absolute;right:26px;bottom:130px;width:190px;pointer-events:none;z-index:4;transition:opacity .25s var(--ease),visibility .25s}.settings-open .detector-ui{opacity:0;visibility:hidden;pointer-events:none}.detector-heading{display:flex;justify-content:space-between;align-items:center;color:#8da9b6;font-size:12px;margin-bottom:11px;pointer-events:auto}.detector-heading .katex{font-size:1.1em}#clear-probe{font-size:21px;line-height:1;padding:4px 7px}#detector-image{width:100%;aspect-ratio:1;outline:1px solid #91b1c329;pointer-events:auto;cursor:crosshair;touch-action:none;border-radius:2px}#detector-handle{position:absolute;left:-24px;top:-20px;width:48px;height:40px;padding:10px 8px;touch-action:none;cursor:ew-resize;color:#a5c4ce;z-index:2;opacity:.65;border-radius:7px;transition:opacity .2s,background .2s}#detector-handle:hover{opacity:1;background:#96c9df12}#detector-handle svg{width:32px;height:20px;pointer-events:none}#probe-readout{font-size:9px;margin-bottom:14px;padding:12px 0 5px;border-top:1px solid #8bafbf24;background:linear-gradient(90deg,transparent,#071119cc 30%);pointer-events:auto}#probe-readout>div{margin-bottom:9px}#probe-coordinates{color:#8da4b0}#probe-electric{color:var(--electric)}#probe-magnetic{color:var(--magnetic)}#probe-flux{color:#bed5dd}
.distance-control{position:absolute;width:min(500px,calc(100% - 54px));left:50%;bottom:25px;transform:translateX(-50%);z-index:7;padding:8px 18px 8px;background:linear-gradient(180deg,#0c1a23c2,#0b1822ed);backdrop-filter:blur(12px);border:1px solid #7da4b51c;border-radius:9px;box-shadow:0 5px 25px #0002}.distance-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}.distance-heading>label{font-size:11px;color:#a1b9c5}.distance-heading>div{display:flex;align-items:baseline;gap:13px;margin-left:auto;font-size:12px;color:#e0e8de}#physical-distance{font-size:10px;color:#728d9e}.distance-heading .icon{width:28px;height:28px;padding:6px}.distance-heading .icon[aria-pressed=true]{background:#9bd4e31c;color:#beeef0}.detector-stops{display:flex;justify-content:space-between;gap:12px;margin-top:-4px;padding-bottom:2px}.detector-stops button{color:#6c899b;font-size:9px;padding:4px 0;transition:color .2s}.detector-stops button:hover{color:#dbf2f6}.detector-stops button[aria-pressed=true]{color:#b8dde5}
input[type=range]{--fill:50%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:36px;background:transparent;cursor:ew-resize;pointer-events:auto;margin:0;touch-action:none;border-radius:5px}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#8cb5c4 var(--fill),#5b7c8f40 var(--fill));transition:box-shadow .2s}input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:#5b7c8f40}input[type=range]::-moz-range-progress{height:3px;background:#8cb5c4}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:#d7e6e7;border:2px solid #aac9d2;box-shadow:0 0 0 5px #9fced100;transition:box-shadow .2s,transform .2s}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#d7e6e7;border:2px solid #aac9d2}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px #9fced119;transform:scale(1.12)}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 8px #9fced126;transform:scale(1.2)}#distance{height:42px}#distance::-webkit-slider-runnable-track{height:4px}#distance::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;background:#e5eee5;border-color:#bad6db}
#loading{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);display:flex;gap:10px;align-items:center;color:#a5bfcc;font-size:11px;pointer-events:none;transition:opacity .25s;z-index:5}#loading.ready{opacity:0}#loading.refining{left:26px;top:auto;bottom:37px;transform:none;font-size:9px;color:#6d8997}#loading>span:first-child{height:1px;width:24px;background:linear-gradient(90deg,#364e5c,#bbdfe7,#364e5c);background-size:200%;animation:loading 1.3s linear infinite}@keyframes loading{to{background-position:-200%}}#error{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);max-width:400px;font-size:13px;line-height:1.7;background:#15242f;padding:24px;border:1px solid #8b7c5e;z-index:20}
.world-label{position:absolute;left:-75px;top:-11px;width:150px;text-align:center;display:flex;flex-direction:column;gap:4px;font-size:10px;color:#bad7e1;pointer-events:none;z-index:2;text-shadow:0 1px 8px #071119}.world-label .katex{font-size:10px;color:#789daa}.incident-label{color:#6f96a9;font-size:9px}.axis-label{position:absolute;left:5px;top:-9px;color:#7d9bab;font-size:10px;pointer-events:none;z-index:1}#app:not([data-quality]) .world-label,#app:not([data-quality]) .axis-label,#app:not([data-quality]) #detector-handle{visibility:hidden}
dialog{border:1px solid #91b1c32b;border-radius:10px;background:#10202b;color:#c6d7df;width:min(760px,calc(100vw - 30px));max-height:86vh;padding:38px 42px;box-shadow:0 18px 70px #0006;scrollbar-width:thin;scrollbar-color:#4d6b7d transparent;overscroll-behavior:contain}dialog::backdrop{background:#050d15b8;backdrop-filter:blur(5px)}dialog .close{position:absolute;right:20px;top:15px;font-size:25px;color:#95afbd}dialog h1{font-size:24px;font-weight:400;margin:0 35px 20px 0}dialog h2{font-size:13px;font-weight:400;color:#e0eaf1;border-top:1px solid #8daec024;padding-top:22px;margin:30px 0 16px}dialog p{font-size:12px;line-height:1.85;color:#a3b9c5;margin:16px 0}.equation{overflow-x:auto;overflow-y:hidden;margin:22px -5px;padding:9px 5px;color:#dfebf3;font-size:14px;text-align:center}.equation.compact{font-size:12px}.equation .katex-display{margin:.5em 0}.sources{display:flex;flex-wrap:wrap;gap:17px;margin-top:28px;padding-top:21px;border-top:1px solid #8daec024}.sources a{font-size:10px;color:#9dcbd9;text-decoration:none}.sources a:hover{text-decoration:underline}.katex{font-size:1.08em}
@media(min-width:1400px){#experiments{left:32px;right:32px;grid-auto-columns:160px;gap:18px}.experiment img{height:94px}.experiment span{font-size:12px}.scene-controls{top:168px}.detector-ui{width:210px;right:34px;bottom:144px}.distance-control{bottom:32px;width:540px}.top-shade{height:210px}}
@media(max-width:900px){.detector-ui{width:150px;right:20px;bottom:142px}.distance-control{width:440px}.scene-controls{gap:8px}.view-modes button{padding:10px 11px}.scene-actions{padding-left:6px}.world-label{font-size:9px}}
@media(max-width:650px){#experiments{left:10px;right:10px;top:9px;grid-auto-columns:118px;gap:5px}.experiment img{height:70px}.experiment span{font-size:10px;padding-left:4px}.scene-controls{top:131px;padding:4px;gap:4px;border-radius:9px}.view-modes button{font-size:10px;padding:10px 8px;gap:4px}.mode-symbol{width:6px;height:6px}.scene-actions{gap:0;padding-left:4px}.scene-actions .icon{width:29px;height:31px;padding:7px}.scene-actions .icon svg{width:15px;height:15px}.detector-ui{width:115px;right:18px;bottom:147px}.detector-heading{font-size:10px;margin-bottom:8px}.distance-control{width:calc(100% - 28px);bottom:16px;padding:8px 14px 6px}.distance-heading{gap:8px}.distance-heading>label{font-size:10px}.distance-heading>div{font-size:11px}#physical-distance{display:none}.world-label{font-size:8px}.incident-label{font-size:7px}#probe-readout{font-size:6.2px}.top-shade{height:177px}#loading.refining{bottom:130px;left:18px}dialog{padding:30px 20px}dialog p{font-size:11px}.equation{font-size:11px}.equation.compact{font-size:10px}}

#optic-label{pointer-events:auto;cursor:pointer;padding:5px 0;border-radius:4px;transition:color .2s,background .2s}#optic-label:hover{background:#9ac6d214;color:#e2f6fa}#optic-label:focus-visible{outline-offset:1px}