:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e9edf1;--muted:#a0acbe;--gold:#e9c48b;background:#05080f;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,summary{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer;color:inherit;background:#141e2bbd;border:1px solid #52607777;border-radius:3px;padding:9px 12px;font-size:11px}button:hover{border-color:var(--gold)}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}a{color:inherit;text-underline-offset:4px}#stage{width:100%;height:100svh;min-height:700px;position:relative;overflow:hidden}#sky{position:absolute;inset:0}canvas{touch-action:none;width:100%;height:100%;display:block}header{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:26px;left:32px;right:32px}.brand{letter-spacing:.17em;pointer-events:auto;font-size:12px;text-decoration:none}.brand span{color:var(--muted);margin-left:16px;font-size:9px}.edition{color:#bdc9d9;letter-spacing:.13em;font-size:9px}.intro{pointer-events:none;text-shadow:0 2px 20px #000;position:absolute;top:100px;left:42px}.eyebrow{letter-spacing:.22em;color:var(--gold);margin-bottom:14px;font-size:9px}h1{letter-spacing:-.04em;margin:0 0 18px;font-family:Georgia,serif;font-size:clamp(32px,4vw,60px);font-weight:400;line-height:1.05}.intro>p:last-child{color:#c0cad8;font-size:12px;line-height:1.7}.controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#070d17e8;border:1px solid #53617a66;border-radius:5px;width:226px;padding:22px;position:absolute;top:94px;right:28px}.controls>label:not(.switch){color:#c2ccda;margin-top:22px;font-size:11px;display:block}.controls output{float:right;color:var(--gold)}input[type=range]{width:100%;accent-color:var(--gold);cursor:pointer;margin:12px 0 0}.switch{align-items:center;gap:8px;margin:16px 0;font-size:11px;display:flex}input[type=checkbox]{accent-color:var(--gold);width:15px;height:15px}.orbit-buttons{gap:6px;margin-top:18px;display:flex}.orbit-buttons button{flex:1;padding:5px;font-size:15px}.button-row{gap:6px;margin-top:10px;display:flex}.button-row button{flex:1}.text-button{color:var(--gold);background:0 0;border:0;padding:14px 0 0}.ray-panel{background:#070d17ed;border:1px solid #53617a66;border-radius:5px;width:320px;padding:16px;position:absolute;bottom:64px;left:32px}.ray-panel summary{cursor:pointer;font-size:12px;list-style:none}.ray-panel summary:before{content:"−";color:var(--gold);margin-right:8px}.ray-panel:not([open]) summary:before{content:"+"}#ray-label{float:right;color:var(--gold);font-size:10px}.hint{color:var(--muted);margin:12px 0;font-size:10px;line-height:1.6}.presets{gap:5px;display:flex}.presets button{padding:7px 9px;font-size:9px}.presets button.active{border-color:var(--gold);color:var(--gold)}#ray-diagram{width:100%;height:auto;margin-top:8px;display:block}#ray-diagram text{letter-spacing:1px;fill:#8291a5;font-size:6px}#plot-grid{stroke:#243148;stroke-width:.5px}#horizon{fill:#000;stroke:#75839a;stroke-width:1px}#photon-sphere{fill:none;stroke:#8b738f;stroke-dasharray:3 3;stroke-width:1px}#ray-path{fill:none;stroke:var(--gold);stroke-width:1.4px}#observer{fill:#d9e9ff}#ray-info,.legend,#comparison-note{color:#b3bfd0;margin:4px 0;font-size:9px;line-height:1.6}.legend{color:#8291a5;align-items:center;gap:5px;display:flex}.legend i{border:1px solid #75839a;border-radius:50%;width:7px;height:7px;display:inline-block}.legend i:nth-of-type(2){border-color:#8b738f}.legend i:nth-of-type(3){border-color:var(--gold)}footer{letter-spacing:.05em;color:#b2c0d3;pointer-events:none;text-shadow:0 1px 8px #000;justify-content:space-between;gap:15px;font-size:9px;display:flex;position:absolute;bottom:22px;left:32px;right:32px}#marker{pointer-events:none;border:1px solid #e9c48b;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #0005}#loading{text-align:center;background:#070d17;flex-direction:column;justify-content:center;align-items:center;padding:30px;display:flex;position:absolute;inset:0}#loading[hidden]{display:none}.loading-orbit{border:1px solid #5e6779;border-top-color:var(--gold);border-radius:50%;width:60px;height:60px;animation:2s linear infinite spin}h2{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1.2}#loading p{color:var(--muted);font-size:12px}dialog{color:#dce4ef;background:#0b1320;border:1px solid #4b5b72;border-radius:8px;width:calc(100% - 30px);max-width:590px;max-height:85svh;padding:32px;font-size:12px;line-height:1.75;overflow:auto}dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000b}#close-science{float:right;background:0 0;border:0;padding:0 6px;font-size:20px}#performance{color:var(--muted);font-size:10px}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=700px){#stage{height:100svh;min-height:850px}header{top:20px;left:18px;right:18px}.brand span{display:none}.brand{font-size:10px}.edition{font-size:8px}.intro{top:66px;left:22px}.intro h1{font-size:36px}.intro>p:last-child{font-size:10px}.controls{width:170px;padding:14px;top:auto;bottom:60px;right:12px}.controls .eyebrow{font-size:8px}.controls>label:not(.switch){margin-top:14px}.controls .switch{font-size:10px}.ray-panel{width:calc(100% - 200px);min-width:146px;padding:12px;bottom:60px;left:12px}.ray-panel summary{font-size:10px}#ray-label{float:none;margin:8px 0;display:block}.presets{flex-direction:column}.hint{font-size:9px}#ray-diagram{margin-top:12px}.legend{flex-wrap:wrap;font-size:8px}.button-row{flex-direction:column}.orbit-buttons{gap:3px}.orbit-buttons button{padding:4px}.controls label output{float:none;margin-top:4px;display:block}footer{flex-wrap:wrap;font-size:8px;bottom:18px;left:16px;right:16px}footer span:nth-child(2){display:none}#shadow-size{margin-left:auto}}@media (prefers-reduced-motion:reduce){.loading-orbit{animation:none}}@media (width<=700px){#stage{height:1100px;min-height:1100px}#sky{height:550px;bottom:auto}.controls,.ray-panel{top:580px;bottom:auto}.intro{top:64px}.intro h1{font-size:31px}.intro>p:last-child{display:none}footer{bottom:24px}}
