@import url('../../assets/fonts/fonts.css');
:root{color-scheme:dark;--bg:#060910;--ink:#edf3fc;--muted:#929dad;--line:#ffffff16;--blue:#a6ceff;--panel:#0c121ccc}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button{border:0;background:none}button:hover{color:white;background:#ffffff0d}button:disabled{opacity:.3;cursor:default}#app{height:calc(100dvh - var(--explonio-bar, 0px));min-height:660px;position:relative;overflow:hidden}#space,#labels{position:absolute;inset:0}#space canvas{width:100%;height:100%;display:block;touch-action:none}#labels{pointer-events:none}.planet-label{position:absolute;padding:5px 8px;border-radius:5px;font-size:12px;white-space:nowrap;background:#06091077;pointer-events:auto;text-shadow:0 1px 5px #000;transform:translate(12px,-50%);border-left:2px solid var(--planet-color)}.planet-label.selected{color:var(--blue);background:#152234cc}header{height:100px;position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:linear-gradient(#060910dc,#06091000);z-index:3}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:white}.brand svg{width:42px;fill:none;stroke:#c5d2df;stroke-width:1.3}.brand svg circle{fill:#d5dfeb;stroke:none}.brand span{font-family:Manrope,sans-serif;letter-spacing:1px;font-size:24px;font-weight:600}.brand small{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--muted);display:block;letter-spacing:1px;margin-top:2px}.view-nav{display:flex;background:#131922a6;backdrop-filter:blur(16px);padding:5px;border:1px solid var(--line);border-radius:10px;position:absolute;left:50%;transform:translateX(-50%)}.view-nav button{padding:10px 16px;border-radius:6px;color:#a0aab9;white-space:nowrap}.view-nav button.active{background:#2a3443;color:#fff;box-shadow:0 1px 5px #0003}.icon-button{border:1px solid #ffffff30;border-radius:50%;width:30px;height:30px;font-family:Georgia,serif;font-style:italic}.planet-nav{position:absolute;left:38px;top:145px;width:174px;bottom:180px;z-index:2}.section-label{font-size:12px;letter-spacing:1.5px;color:var(--muted)}#planet-list{display:grid;gap:7px;margin-top:22px}.planet-button{display:flex;align-items:center;gap:13px;padding:11px 12px;text-align:left;border-radius:8px;color:#b2baca;width:100%;border:1px solid transparent}.planet-button.active{background:linear-gradient(100deg,#aacaff19,#aacaff07);border-color:#b7d5ff22;color:#fff}.planet-thumbnail{width:25px;height:25px;border-radius:50%;background-size:auto 100%;box-shadow:inset -8px -3px 8px #000b,0 0 13px #0004;flex-shrink:0}.planet-button.active:after{content:'•';margin-left:auto;color:#a6ceff}.nav-footer{border-top:1px solid var(--line);margin-top:23px;padding-top:23px;display:flex;gap:12px;font-size:12px;line-height:1.8;color:#a2abba}.nav-footer small{font-size:12px;color:#717e90}.tiny-orbit{font-size:27px;font-weight:300;color:#79879b}.scene-caption{position:absolute;top:135px;left:calc(50% - 160px);display:flex;gap:12px;align-items:center;color:#abb5c6;font-size:12px;letter-spacing:1.3px;pointer-events:none}.accent-line{height:1px;width:27px;background:#8194b0}.info{position:absolute;right:38px;top:146px;width:280px;z-index:2}.info-heading{display:flex;justify-content:space-between;align-items:center}.info-heading>span:last-child{color:#718099;font-size:12px}h1{font-family:Manrope,sans-serif;font-weight:400;font-size:62px;line-height:1.15;letter-spacing:-3px;margin:15px 0 16px}#description{font-size:14px;line-height:1.8;color:#a5afbf;margin:0 0 25px}.live-heading{font-size:12px;color:#9babc0;display:flex;gap:8px;align-items:center}.signal{width:5px;height:5px;border-radius:50%;background:#9dbeee;box-shadow:0 0 8px #acd3ff66}.distance{display:flex;align-items:baseline;gap:10px;margin:8px 0 20px}.distance strong{font-family:Manrope,sans-serif;font-size:32px;font-weight:400;letter-spacing:-1px}.distance>span{font-size:12px;color:#8e9daf}.stats{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:16px}.stats>div{display:flex;justify-content:space-between;font-size:12px;gap:8px}.stats span{color:#8c99ac}.stats b{font-weight:450;white-space:nowrap}.facts{border-top:1px solid var(--line);margin-top:21px;padding-top:19px;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}.facts span{display:block;color:#8c99ac;font-size:12px;margin-bottom:6px}.facts b{font-size:14px;font-weight:450}.data-note{font-size:12px;line-height:1.6;color:#77869c;margin:20px 0}.focus-button{background:#b8d3f40b;border:1px solid #bbd6fc2b;width:100%;border-radius:7px;padding:12px 15px;text-align:left;font-size:13px}.focus-button span{float:right}.view-tools{position:absolute;right:342px;top:50%;display:flex;flex-direction:column;gap:9px}.view-tools button{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#10172488;font-size:24px;color:#aebfd7}.scene-bottom{position:absolute;bottom:130px;left:250px;right:350px;display:flex;justify-content:space-between;align-items:end;gap:12px;pointer-events:none}.legend{color:#a2afc1;font-size:12px}.legend small{display:block;margin-top:7px;font-size:12px;color:#6c7c94}.toggles{display:flex;gap:16px;pointer-events:auto;font-size:12px;color:#91a1b7}.toggles label{display:flex;align-items:center;gap:5px;cursor:pointer}.toggles input{accent-color:#a9cbf6;width:13px;height:13px}.time-panel{position:absolute;inset:auto 38px 25px;border-top:1px solid #d4e1ff21;background:#0d131fba;backdrop-filter:blur(24px);border-radius:12px;height:84px;padding:14px 22px;display:flex;align-items:center;gap:27px;z-index:3;box-shadow:0 15px 60px #0003}.date-block{min-width:228px}.date-block label,.time-speed label{display:block;color:#8796ac;font-size:12px;margin-bottom:8px}.date-block label span{margin-left:8px;color:#63718a}.date-block input{background:none;border:0;outline:none;color:#dae5f6;padding:0;font-size:14px;max-width:230px}.playback{display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);padding-left:22px}.playback button{border-radius:7px;font-size:12px;color:#a1b0c6;padding:9px}.playback .play{background:#d2e2f6;color:#152237;width:42px;height:42px;font-size:15px}.time-speed{border-left:1px solid var(--line);padding-left:24px}.time-speed select{background:none;color:#d6e0ed;border:0;min-width:128px;font-size:14px;outline:none;cursor:pointer}.time-speed option{background:#111c2b}.now{border:1px solid #ffffff23;border-radius:6px;padding:10px 16px;margin-left:auto;white-space:nowrap}.now span{margin-left:8px;color:#91a8c8}.timeline-label{color:#74849c;font-size:12px;min-width:106px}.loading{position:absolute;inset:0;background:#060910;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}.loading-orbit{font-size:64px;color:#a2c6ee;animation:turn 4s linear infinite}.loading h2{font-family:Manrope,sans-serif;font-weight:400}.loading p{color:var(--muted)}@keyframes turn{to{transform:rotate(360deg)}}#toast{position:absolute;left:50%;bottom:124px;transform:translateX(-50%);padding:12px 20px;background:#233149f0;color:white;border:1px solid #556c8a;border-radius:8px;z-index:9;opacity:0;pointer-events:none;transition:opacity .2s;max-width:80vw;text-align:center}#toast.show{opacity:1}dialog{background:#101722;color:#dce6f5;border:1px solid #809abd44;border-radius:16px;max-width:650px;width:calc(100% - 36px);padding:35px;max-height:85dvh;box-shadow:0 20px 100px #000}dialog::backdrop{background:#02050bd9;backdrop-filter:blur(7px)}dialog h2{font-family:Manrope,sans-serif;font-size:32px;font-weight:400;margin:14px 0 22px}dialog h3{font-size:15px;margin:25px 0 8px;font-weight:550}dialog p{font-size:14px;line-height:1.8;color:#a7b4c7}dialog a{color:#c0dbff}dialog .close{position:absolute;right:18px;top:12px;font-size:28px}.keyboard-help{border-top:1px solid var(--line);padding-top:20px}body[data-view='detail'] .toggles{visibility:hidden}body[data-view='detail'] #focus{visibility:hidden}
@media(min-width:1600px){.planet-nav{left:55px}.info{right:55px;top:19vh;width:310px}header{padding:0 55px}.scene-bottom{left:280px;right:405px}.view-tools{right:395px}.time-panel{inset:auto 55px 32px}.planet-nav{top:19vh}#planet-list{gap:12px}}
@media(max-height:800px) and (min-width:901px){.info{top:115px}h1{font-size:49px;margin:10px 0}#description{margin-bottom:16px}.facts{gap:12px;margin-top:15px;padding-top:13px}.data-note{margin:12px 0}.planet-nav{top:120px}.scene-caption{top:115px}#planet-list{gap:2px;margin-top:15px}.nav-footer{margin-top:15px;padding-top:12px}.distance{margin-bottom:14px}.focus-button{padding:9px}.scene-bottom{bottom:120px}}
@media(max-width:1100px){header{padding:0 22px}.planet-nav{left:22px;width:150px}.info{right:22px;width:244px}.view-tools{right:280px}.scene-bottom{left:185px;right:285px}.time-panel{left:22px;right:22px;gap:18px}.timeline-label{display:none}.view-nav button{padding:9px 12px}.brand span{font-size:20px}.brand svg{width:35px}.scene-caption{left:32%}.info .stats>div{font-size:12px}}
@media(max-width:900px){#app{min-height:720px}header{height:80px;padding:0 18px}.brand span{font-size:21px}.brand small{font-size:11px}.view-nav{top:84px;width:max-content}.planet-nav{top:138px;left:12px;right:12px;bottom:auto;width:auto}.planet-nav>.section-label,.nav-footer{display:none}#planet-list{display:flex;justify-content:center;gap:3px;margin:0}.planet-button{width:auto;padding:8px;flex-direction:column;gap:7px;font-size:11px;border-radius:8px}.planet-thumbnail{width:22px;height:22px}.planet-button.active:after{display:none}.info{top:auto;bottom:138px;left:20px;right:20px;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 25px;pointer-events:none}.info-heading{grid-column:1}.info h1{font-size:39px;grid-column:1;margin:5px 0 10px}.info #description{display:none}.live-heading{grid-column:2;grid-row:1}.distance{grid-column:2;grid-row:2;margin:4px 0 8px}.distance strong{font-size:28px}.stats{grid-column:2;grid-row:3/5;padding-top:10px;gap:8px}.facts{grid-column:1;grid-row:3;margin:0;padding-top:10px;gap:9px}.facts b{font-size:12px}.facts span{font-size:11px;margin-bottom:3px}.data-note{display:none}#focus{grid-column:1;grid-row:4;margin-top:10px;pointer-events:auto;padding:7px;font-size:12px}.info-heading>span:last-child{display:none}.scene-caption{top:215px;left:22px;font-size:11px}.scene-bottom{left:20px;right:20px;bottom:112px}.legend{font-size:10px}.legend small{display:none}.toggles{gap:7px;font-size:11px}.view-tools{top:230px;right:18px;gap:7px}.view-tools button{width:32px;height:32px;font-size:21px}.time-panel{height:85px;left:12px;right:12px;bottom:12px;gap:10px;padding:12px}.date-block{min-width:0;flex:1}.date-block input{width:180px;font-size:12px}.date-block label{font-size:11px}.playback{padding:0;border:0;gap:1px}.playback button{padding:6px;font-size:11px}.playback .play{width:33px;height:33px}.time-speed{padding:0;border:0}.time-speed label{font-size:10px}.time-speed select{min-width:95px;width:95px;font-size:12px}.now{font-size:12px;padding:8px}.now span{display:none}#toast{bottom:110px}.info:before{content:'';position:absolute;z-index:-1;inset:-20px -20px -20px;background:linear-gradient(transparent,#060910de 25%,#060910ee)}}
@media(max-width:540px){.brand small{font-size:10px}.view-nav button{font-size:12px;padding:9px 13px}.planet-button{padding:7px 5px;font-size:10px}#planet-list{gap:0}.planet-thumbnail{width:23px;height:23px}.info{gap:0 17px}.info h1{font-size:34px}.live-heading{font-size:10px}.distance{gap:5px}.distance strong{font-size:25px}.distance>span{font-size:10px}.stats>div{font-size:10px;gap:4px}.facts{gap:10px}.time-panel{flex-wrap:wrap;height:94px;gap:4px 12px}.date-block{width:calc(100% - 140px);flex:none}.date-block label{margin-bottom:4px}.playback{margin-left:auto}.time-speed{display:flex;align-items:center;gap:7px}.time-speed label{margin:0}.time-speed select{width:107px}.now{padding:3px 9px;margin-left:auto}.info{bottom:152px}.scene-bottom{bottom:119px}.scene-caption{top:209px}.toggles{font-size:10px}.legend{max-width:230px}.info .section-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.info{max-height:calc(100dvh - 290px - var(--explonio-bar, 0px));overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4c5e7633 transparent;padding-right:4px}.moon-block{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}.moon-heading{display:flex;align-items:center;justify-content:space-between;color:#9babc0;font-size:12px;gap:8px}.moon-heading button{padding:5px 0;color:#c2dbfa;font-size:11px}#moon-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}#moon-list button{border:1px solid #aecbfa25;border-radius:5px;padding:6px 8px;font-size:12px;background:#13203388}#moon-data{font-size:11px;line-height:1.65;color:#8293ac}.belt-label{position:absolute;font-size:12px;letter-spacing:1px;color:#91a2b8;transform:translate(-50%,-50%);background:#060910a0;padding:7px 12px;border-radius:4px}.moon-label{font-size:11px;color:#bdc9d9;border-left:1px solid #8393a8;background:#091321bb}.scene-bottom{right:350px;flex-wrap:wrap;gap:12px}.toggles{gap:10px}.toggles label{font-size:11px}body[data-view='detail'] #focus{display:none}body[data-view='detail'] .moon-block{margin-top:12px}
@media(max-width:900px){.info{max-height:240px;overflow-y:auto;pointer-events:auto}.moon-block{grid-column:1/-1;grid-row:5;margin-top:12px;padding-top:10px}.info .stats{gap:8px;align-content:start}.scene-bottom{right:20px;gap:5px}.scene-bottom .legend{font-size:9px;max-width:100%}.scene-bottom .toggles{margin-left:auto}.moon-heading button{font-size:11px}#moon-list button{font-size:11px;padding:5px 7px}.belt-label{font-size:10px}}

.header-end{display:flex;align-items:center;gap:12px}.lang-switch{display:flex;gap:2px;padding:3px;border:1px solid #ffffff1f;border-radius:10px;background:#0b1220cc}.lang-switch button{border:0;background:transparent;color:#9fb0c6;font:600 12px/1 'DM Sans',sans-serif;letter-spacing:.04em;padding:7px 9px;border-radius:7px;cursor:pointer}.lang-switch button[aria-pressed=true]{background:#e9eef6;color:#0b1220}.lang-switch button:focus-visible{outline:2px solid #8ea2ff;outline-offset:2px}