/* The dark theme switch: a hairline track with a moon for a knob, on pure white or pure black; the word beside it in
   Archivo (a variable sans, weight 100 to 900 and width 62 to 125). The script draws the moon's phase, moves the
   knob, opens the night across the page and swaps the two themes' colours at the end. */
:root {
  --light-page: #ffffff;    /* the page, light theme */
  --light-ink: #0b0b0b;     /* the ink, light theme */
  --dark-page: #000000;     /* the page, dark theme */
  --dark-ink: #f2efe8;      /* the ink, dark theme */
  --accent: #ff7a2f;        /* the terminator's edge as it sweeps, and the focus ring */
  --page: var(--light-page);
  --ink: var(--light-ink);
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  background: var(--page);
  isolation: isolate;
}

/* ---------------------------------------------------------------- the night and its edge */
.sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  background: var(--page);
  color: var(--ink);
  clip-path: ellipse(0px 0px at 50% 50%);
  pointer-events: none;
}

.edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.edge ellipse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.25;
  opacity: 0;
}

/* ---------------------------------------------------------------- the switch */
.theme {
  position: relative;
  z-index: 0;
  display: grid;
  gap: 8px;
}

.theme__name {
  padding-left: 4px;
  font-size: 15px;
  line-height: 1.3;
  font-variation-settings: 'wght' 470, 'wdth' 100;
  user-select: none;
  -webkit-user-select: none;
}

.theme__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.switch {
  display: block;
  width: 104px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch:focus {
  outline: none;
}

.switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.switch__art {
  display: block;
  width: 104px;
  height: 56px;
  overflow: visible;
}

.switch__track {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.switch__rim {
  fill: var(--page);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.switch__lit {
  fill: var(--ink);
}

.theme__word {
  position: relative;
  display: block;
  width: 84px;
  height: 1.2em;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
}

.theme__w {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-variation-settings: 'wght' 560, 'wdth' 100;
}

@media (max-width: 420px) {
  .theme__word {
    font-size: 22px;
    width: 70px;
  }
}