@font-face{font-family:BluuNext;src:url(/BluuNext.otf)}:root{--green: rgba(5, 255, 117, .822);--pink: rgba(255, 0, 155, .822)}*{font-family:Inter,sans-serif,monospace;margin:0;padding:0;box-sizing:border-box}body{background-color:#000;color:#fff}h2{font-family:BluuNext}header{position:relative;width:100dvw;height:110dvh;&:after{position:absolute;z-index:5;content:"";height:10dvh;top:100dvh;left:0;width:100%;background:linear-gradient(0deg,#000,#0000)}>svg,>svg>rect{width:100%;height:100%}>div{position:absolute;bottom:calc(10dvh + 64px);left:64px;>h2{font-size:6rem;font-weight:900}>p{font-size:2rem;font-weight:400;color:#fffa;text-transform:uppercase}}>#satellite{position:absolute;z-index:10;bottom:10dvh;left:0;right:0;width:100dvw;height:100dvh;pointer-events:none}>a{position:absolute;top:64px;left:64px;display:flex;flex-direction:row;gap:4px;align-items:center;padding:6px 8px;background-color:#fff4;border-radius:4px;color:#fff;text-decoration:unset;transition:background .3s ease;backdrop-filter:blur(2px);&:hover{background-color:#fff6}}}#earth{position:absolute;width:25dvw;height:25dvw;top:calc(50dvh - 12.5dvw);left:37.5dvw}main,section{min-height:90dvh;padding:64px 25vw;position:relative}@media(width<800px){header>div{bottom:calc(10dvh + 32px);left:32px;>h2{font-size:3rem}>p{font-size:1.5rem}}#earth{position:absolute;width:90dvw;height:90dvw;top:calc(50dvh - 45dvw);left:5dvw}header>a{top:32px;left:32px}main,section{padding:32px}}iframe{display:block;border:unset;min-height:100dvh;padding:64px 5vw;height:100%;width:100%}.method{font-size:.7rem;font-weight:700;padding:2px 4px;border-radius:4px;user-select:none;&.get{background-color:var(--green)}&.post{background-color:var(--pink)}}.api{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto 1fr;gap:8px;>h2{width:100%;height:fit-content;grid-column:3 span}}@media(width<1000px){.api{display:flex;flex-direction:column;gap:32px}}fieldset{outline:unset;border:unset;background:unset;width:100%;position:relative;>h3{padding:12px;border:2px solid #FFF4;color:#fff8;font-weight:500}>*+h3{border-top-width:0}>h3:has(+*){border-bottom-width:0}}.endpoint{border:2px solid #FFF4;>.head{padding:12px;display:flex;flex-direction:row;align-items:center;gap:12px;border:unset;outline:unset;background:unset;color:#fff;width:100%;cursor:pointer;transition:background .5s ease}>.head:hover{background-color:#fff2}& input{display:none}>.head>code{font-weight:600}&:has(input:checked):has(.get)>.head{background-color:hsl(from var(--green) h s l / .2)}&:has(input:checked):has(.post)>.head{background-color:hsl(from var(--pink) h s l / .2)}&:has(+.endpoint){border-bottom-width:0}}[data-endpoint]{display:none}.api:has(#endpoint-orbit-launch:checked) [data-endpoint=orbit-launch],.api:has(#endpoint-orbit-update:checked) [data-endpoint=orbit-update],.api:has(#endpoint-orbit-signal:checked) [data-endpoint=orbit-signal],.api:has(#endpoint-ws:checked) [data-endpoint=ws],.api:has(#endpoint-listen:checked) [data-endpoint=listen]{width:100%;display:block;border:2px solid #FFF4;.heading,.body{padding:16px}.heading h3{display:flex;flex-direction:row;align-items:center;gap:8px}.heading code{font-size:1.5rem}.heading p{margin-top:4px;font-size:.9rem;color:#fff8}& hr{border-color:#fff4;border-width:1px;border-style:solid}}[data-endpoint] .body{display:flex;flex-direction:column;gap:16px;>label>.meta{display:flex;flex-direction:row;align-items:center;gap:4px}>label>p{margin:4px 0;color:#fff8}>label>input,button{display:block;font-size:1.2rem;width:100%;padding:8px 12px;outline:unset;border:unset;background-color:#fff2;color:#fff}& button{text-align:left;transition:background .3s ease;cursor:pointer;background-color:hsl(from var(--pink) h s l / .2);&:hover{background-color:hsl(from var(--pink) h s l / .5)}}>pre{text-align:left}}[data-endpoint] .body .meta{.type{margin-left:4px;padding:2px 4px;font-size:.8rem;background-color:#fff2;border-radius:4px}& sup.required{color:#f22;font-weight:900}}[data-endpoint] .listen{display:flex;flex-direction:row;align-items:center;gap:8px;& button:not(.stop){background-color:hsl(from var(--green) h s l / .2);&:hover{background-color:hsl(from var(--green) h s l / .5)}&.active{background-color:hsl(from var(--green) h s l / .1)}}& button.stop{&.active{background-color:hsl(from var(--pink) h s l / .1)}}}
