main.css

body {
  box-sizing: border-box;
  background: linear-gradient(0.09turn, thistle, skyblue, peachpuff);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 6em 0 0;
  box-sizing: border-box;
  margin: 0;
}

/* hsluv rotation:
 * Array.from({length: 9}).map((_, i) => $.husl.toHex(i / 10 * 360, 81, 72)).map((h, i) => `.t${i+1} { color: ${h} }`).join('\n')
 * works on their old site https://husl-colors.org/
 */
.t1 { color: #f396a9 }
.t2 { color: #f49c5c }
.t3 { color: #c7b04c }
.t4 { color: #92be4c }
.t5 { color: #4ec688 }
.t6 { color: #51c2b6 }
.t7 { color: #54bed7 }
.t8 { color: #8fb1f1 }
.t9 { color: #ce9df1 }

#bg {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
#bg:after {
  display: block;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0.95turn, hsla(220, 60%, 33%, 0.3), hsla(0, 100%, 50%, 0));
}
.no-js #bg {
  background: linear-gradient(0.95turn, hsla(220, 60%, 28%, 0.8), hsla(316, 70%, 25%, 0.7));
  animation: no-js-bg-fade 2s forwards;
}
@keyframes no-js-bg-fade {
  from { opacity: 0 }
  to   { opacity: 1 }
}

#stars {
  width: 100vw;
  height: 100vh;
  transition: opacity ease-out 1s;
  opacity: 0.4;
}
#stars.ready {
  opacity: 0.8;
}

.stuff {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: peachpuff;
  max-width: 64em;
  margin: 0 auto 5em;
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  padding: 0 0.5rem;

/*  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;*/
}
.stuff.footer {
  max-width: 36rem;
}
.what {
  text-align: center;
}
.what strong {
  background: hsla(0, 0%, 0%, 0.15);
  display: inline-block;
  border-radius: 0.3em;
  margin: 0.1em 0;
  padding: 0 0.2em;
  font-weight: normal;
  color: #fee;
}
h1, h2 {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  font-weight: normal;
}
.blahs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 1em;
  margin-top: 3em;
}
.thing {
  background: hsla(290, 59%, 9%, 0.2);
  border-width: 1px;
  border-style: dashed;
  border-color: burlywood;
  border-radius: 0.6em;
  flex: 1 1 40%;
  padding: 1em;
  opacity: 0.9;
}
.thing.rly {
  border-style: solid;
  opacity: 1;
}
h2 {
  margin-top: 4em;
}
h2:first-child {
  margin-top: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:active {
  color: wheat;
  text-decoration: underline;
}
p {

}

a.button {
  background: hsla(290, 59%, 9%, 0.2);
  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  display: inline-block;
  border-width: 0.5px;
  border-style: solid;
  border-radius: 0.3em;
  padding: 0 0.6em;
  margin-right: 0.3em;
  font-size: 0.9em;
}
a.button:hover,
a.button:active {
  background: hsla(290, 59%, 9%, 0.6);
  text-decoration: none;
}

@media screen and (max-width: 48em) {
  .thing {
    flex-basis: 80%;
  }
}

/*
 * Array.from({length: 9}).map((_, i) => $.husl.toHex(i / 10 * 360, 39, 56)).map((h, i) => `.b${i+1} { border-color: ${h} }`).join('\n')
 * at https://husl-colors.org
 */
.b1 { border-color: #c16d7f }
.b2 { border-color: #a67d68 }
.b3 { border-color: #8f8667 }
.b4 { border-color: #7b8c67 }
.b5 { border-color: #698f78 }
.b6 { border-color: #6b8d88 }
.b7 { border-color: #6c8b95 }
.b8 { border-color: #7187b2 }
.b9 { border-color: #9c78b6 }

/* boring marketing main */

.main {
  --bg-light: hsla(0, 0%, 100%, 0.8);
  --h-gap: 1px;
  --v-gap: 2rem;
  display: flex;
}
.main-side-expander {
  flex-grow: 1;
  background: var(--bg-light);
}
.main-main {
  flex-basis: 72em;
}

/*.main h2 {
  background: hsla(0, 0%, 0%, 0.9);
  color: #fff;
  mix-blend-mode: multiply;
  font-size: 3rem;
  font-weight: bold;
}*/

.main h2 {
  /*font-family: sans-serif;*/
  background: var(--bg-light);
  color: #000;
  mix-blend-mode: screen;
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
  z-index: 1;
  position: relative;
  padding: 0.667rem 1rem 0;
}
.main-sub {
  background: var(--bg-light);
  padding: 1rem 1rem 0;
  position: relative;
  z-index: 0;
}

.main h3 {
  font: inherit;
  font-size: 1.5rem;
  margin: 0.5em 0;
  background: transparent;
  margin: 0;
  padding: 0;
}

.main-thing {
  border-radius: 5px;
  display: flex;
  gap: var(--h-gap);
  justify-content: space-between;
  margin: var(--v-gap) 0;
  position: relative;
}
.main-thing::before {
  width: 100%;
  height: var(--v-gap);
  position: absolute;
  bottom: 100%;
  background: var(--bg-light);
  content: "";
}
.main-thing.last::after {
  width: 100%;
  height: var(--v-gap);
  position: absolute;
  top: 100%;
  background: var(--bg-light);
  content: "";
}
.main-thing > * {
  background: var(--bg-light);
  padding: 0.5rem 1rem;
  flex: 1 1 33%;
}

.main h4 {
  font: inherit;
  font-size: 1.2em;
  margin: 0;
}

.main a {
  /* fixme */
  color: #54bed7;
}

.top3 {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
}
.top3 > label {
  display: block;
  padding: 0 0.5rem 0.5rem;
  border-radius: 0.5rem;
}

#quick-constellation:checked ~ .top3 > label[for="quick-constellation"],
#quick-spacedust:checked ~ .top3 > label[for="quick-spacedust"],
#quick-slingshot:checked ~ .top3 > label[for="quick-slingshot"] {
  background: hsla(0, 0%, 0%, 0.333);
}
.top3 > label:hover {
  background: hsla(0, 0%, 0%, 0.5) !important;
  cursor: pointer;
}
.top3 > label > img {
  display: block;
  margin: 0 auto;
  width: 6rem;
  max-width: 100%;
}
.top3 > label > h3 {
  margin: -1rem 0 0;
  font-weight: normal;
}
.top3 > label > p {
  margin: 0;
  opacity: 0.667;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.source-container {
  font-family: monospace;
  width: 36rem;
  max-width: 100%;
  max-width: calc(100vw - 1rem);
  color: #ccc;
  margin: 1rem auto 0;
  border: 0.5px solid #222;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: -1rem 0 1rem -1rem hsla(0, 0%, 0%, 0.8) inset;
}

#quick-constellation:not(:checked) ~ #api-app-constellation,
#quick-spacedust:not(:checked) ~ #api-app-spacedust,
#quick-slingshot:not(:checked) ~ #api-app-slingshot {
  display: none;
}

.api-app {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.api-info {
  padding: 0.5rem 0;
  flex-shrink: 1;
  flex-basis: 36rem;
}
.api-info-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.source-container.hidden {
  /*display: none;*/
}

.source-container .filename {
  font: inherit;
  margin: 0;
  padding: 0.25rem 0.5rem;
  background: #333;
}
.source-container .filename small {
  display: inline-block;
  margin-left: 1rem;
  color: #999;
}

.source-container .show-imports + .filename label:before {
  content: "show ";
}
.source-container .show-imports:checked + .filename label:before {
  content: "hide ";
}

.source-container pre.import {
  display: none;
}
.source-container .show-imports:checked ~ .source pre.import {
  display: block;
}

.source-container .source {
  padding: 0 0.5rem 0 0;
  line-height: 1.5;
  overflow-x: auto;
  overflow-y: hidden;
  background: hsla(0, 0%, 0%, 0.5);
}
.source-container pre {
  margin: 0;
}

.source-container pre:before {
  font: inherit;
  color: #978;
  line-height: 1.5;
  display: inline-block;
  content: '00 ';
  opacity: 0.667;
  padding-left: 0.5rem;
  background: #222;
  margin-right: 0.5rem;
}
.source-container pre:nth-child(2):before { content: ' 1 '; }
.source-container pre:nth-child(3):before { content: ' 2 '; }
.source-container pre:nth-child(4):before { content: ' 3 '; }
.source-container pre:nth-child(5):before { content: ' 4 '; }
.source-container pre:nth-child(6):before { content: ' 5 '; }
.source-container pre:nth-child(7):before { content: ' 6 '; }
.source-container pre:nth-child(8):before { content: ' 7 '; }
.source-container pre:nth-child(9):before { content: ' 8 '; }
.source-container pre:nth-child(10):before { content: ' 9 '; }
.source-container pre:nth-child(11):before { content: '10 '; }
.source-container pre:nth-child(12):before { content: '11 '; }
.source-container pre:nth-child(13):before { content: '12 '; }

.source-container pre:nth-child(1):before,
.source-container pre.end:before {
  content: '   ';
  line-height: 0.5;
}
.source-container pre:nth-child(1),
.source-container pre.end {
  line-height: 0.5;
}

.source .v { color: #f396a9 }
.source .s { color: #4ec688 }
.source .p { color: #c7b04c }
.source .b { color: #c7b04c }
.source .k { color: #c7b04c }
.source .f { color: #54bed7 }
.source .c {
  color: #888;
  font-style: italic;
}
.source .u {
  color: #ccc;
  background: hsla(0, 0%, 0%, 0.2);
  display: inline-block;
}
.source .hey { color: #ce9df1 }

.source-container .action {
  padding: 0.25rem 0rem;
  background: #222;
  border-top: 1px solid #333;
  white-space: nowrap;
  overflow-x: auto;
}
.source-container button {
  font: inherit;
  /*color: #ccc;*/
  color: #8fb1f1;
  background: #222;
/*  border: 1px solid #444;
  border-radius: 0.25rem;*/
  border: none;
  padding: 0;
  cursor: pointer;
}
.source-container button::before,
.source-container button::after {
  content: ' ';
}

.api-intro {
  margin: 0 0.5rem;
}