/* Standing on the Moon's own styling for its store pages.

   Deliberately NOT ../style.css, which is ink-on-paper for the studio index; a
   reader arriving from the App Store listing should land on something that
   looks like the thing they just tapped.

   The palette is lifted from the app's css/style.css, not approximated:
     background  #05070c          the theme-color, and the lunar sky at noon
     ink         #e8edf7          --ink
     dim         #8f9db8          --dim
     accent      #7fb2ff          --accent, earthlight blue
     warm        #ffd9a0          --warm, the low sun on regolith
     rule        rgba(140,170,220,0.16)  --edge

   Dark only, on purpose. The one fact the app exists to make felt is that the
   lunar sky stays black at noon; a light-mode variant would argue with it.
   Every colour is painted explicitly rather than inherited, so a light-mode
   browser still gets the night.

   No web fonts, no build step, no external requests. These pages have to keep
   loading for an App Store reviewer years from now; every moving part removed
   is one that cannot fail. */

:root {
  --bg:     #05070c;
  --ink:    #e8edf7;
  --dim:    #8f9db8;
  --accent: #7fb2ff;
  --warm:   #ffd9a0;
  --rule:   rgba(140, 170, 220, 0.16);
  --mono: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.02rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* A sparse starfield, fixed. Radial-gradient dots rather than elements, so it
   costs nothing, cannot reflow, and needs no image request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.1px 1.1px at 12% 18%,  rgba(232,237,247,0.55) 50%, transparent 51%),
    radial-gradient(1px   1px   at 78% 9%,   rgba(232,237,247,0.42) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 34% 62%,  rgba(232,237,247,0.50) 50%, transparent 51%),
    radial-gradient(1px   1px   at 91% 47%,  rgba(232,237,247,0.35) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 57% 88%,  rgba(232,237,247,0.45) 50%, transparent 51%),
    radial-gradient(1px   1px   at 22% 91%,  rgba(232,237,247,0.30) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 68% 33%,  rgba(232,237,247,0.52) 50%, transparent 51%),
    radial-gradient(1px   1px   at 45% 7%,   rgba(232,237,247,0.28) 50%, transparent 51%);
}

main {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
}

.back {
  display: inline-block;
  margin-bottom: 2.5rem;
  color: var(--dim);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.back:hover { color: var(--accent); }

h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.sub {
  margin: 0 0 2.5rem;
  color: var(--warm);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

h2 {
  margin: 2.6rem 0 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

p { margin: 0 0 1.05rem; }
strong { color: #fff; font-weight: 600; }

ul { margin: 0 0 1.05rem; padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }
li::marker { color: var(--accent); }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--warm); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--warm);
}

.updated {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: 0.86rem;
}

/* The one claim worth setting apart from prose, because it is the whole
   product: it computes, it does not fetch. */
.plain {
  margin: 0 0 1.6rem;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--warm);
  background: rgba(140, 170, 220, 0.05);
  color: var(--ink);
}