/* The page at cybermoon.io. The colours and the type are the product's own tokens
   (docs/design-tokens.md of hsezgin/asm). */
/* The fonts are served from here: a reader's browser asks no one else for anything. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The colours and the type are the product's own tokens, as they stood on 2026-10-13. The page
   follows the reader's system: the light theme's colours by day, the dark theme's when the system
   asks for them, and it changes over when the system does. Nothing on the page chooses. */
:root {
  --ground: #f5f6f8;
  --text-main: #1e2533;
  --text-secondary: #4e5869;
  --line-divider: #dde1e8;
  --accent: #1f6fb0;
  /* The colour of the Moon's points: the ink of the main button on the light theme. */
  --moon: #1e2533;
  /* The colours of the four degrees of risk as the light theme draws them when one stands alone
     on the ground: the lines that run over the Moon. */
  --degree-critical: #972815;
  --degree-high: #9c5300;
  --degree-medium: #836f07;
  --degree-low: #287353;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141b2b;
    --text-main: #d9dee7;
    --text-secondary: #a7b0c2;
    --line-divider: #2a3550;
    --accent: #8fd3ff;
    /* The silver of the main button on the dark theme. */
    --moon: #c9d0dc;
    --degree-critical: #ff8975;
    --degree-high: #f8c379;
    --degree-medium: #ffd941;
    --degree-low: #9de7ac;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  color: var(--text-main);
  font: 400 1rem/1.65 'Atkinson Hyperlegible Next', system-ui, sans-serif;
}

/* The Moon stands at the far side, its unlit half toward the words. It is drawn by moon.js, point
   by point, and turns slowly; with no script there is no Moon and the page says what it says. */
.moon {
  position: absolute;
  top: 50%;
  right: -9vmin;
  width: min(112vh, 78vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}
.moon canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* The ground comes back over the Moon's near side, so that the words are read on a plain ground. */
.shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 30%, transparent 62%);
  pointer-events: none;
}

main {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 2rem clamp(1.5rem, 9vw, 8rem);
}
h1 {
  margin: 0;
  font: 600 clamp(2.5rem, 7vw, 4.5rem)/1.2 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -0.015em;
}
/* The name and the line under it are one thing: the line is as long as the name. */
.name {
  align-self: flex-start;
}
.line {
  width: 100%;
  height: 1px;
  margin: 1.75rem 0;
  background: var(--text-secondary);
  opacity: 0.5;
}
/* The one thing the page says, in the two languages, side by side with an upright line between. */
.soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 0;
  font-size: 1.375rem;
}
.bar {
  width: 1px;
  height: 1.15em;
  background: var(--text-secondary);
  opacity: 0.6;
}
.other {
  color: var(--text-secondary);
}

/* The way back, on the page that says a page is not here: the accent, and a line under it. */
.back {
  margin-top: 1.5rem;
  font-size: 1rem;
}
.back a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-radius: 0.125rem;
}
.back a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* On a narrow screen the Moon rises over the words. */
@media (max-width: 44rem) {
  .moon {
    top: -18vw;
    right: 50%;
    width: 118vw;
    transform: translateX(50%);
  }
  .shade {
    background: linear-gradient(0deg, var(--ground) 0%, var(--ground) 38%, transparent 70%);
  }
  main {
    justify-content: flex-end;
    padding-bottom: 5.5rem;
  }
}