/* =============================================================================
   Theme Variables
   ========================================================================== */

:root {
  --white: rgb(250, 245, 240);
  --gray: rgb(166, 162, 158);

  --space-black: #000000;

  /* Theme */
  --color: var(--white);
  --secondary-color: var(--gray);
  --bg-color: var(--space-black);
  /* 4.76:1 on --bg-color, clearing the 3:1 SC 1.4.11 floor for the boundary of
     an input. Explicit rather than derived: this used to point at an undefined
     --gray-dark, which made the declaration invalid and silently computed to
     border-color's initial value, currentColor. */
  --border-color: rgb(120, 120, 120);
  --light-color: white;
  --disabled-color: hsl(144 5% 75%);
  /* 4.90:1 on --bg-color. Renders at --font-size-s2, so the large-text
     exemption does not apply and this has to clear 4.5:1 outright. */
  --error-color: hsl(0 80% 55%);

  /* Sizes */
  --border-radius: 3px;
}

/* =============================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: "Lexend";
  src: url("/fonts/lexend-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "AtkinsonHyperlegibleMono";
    src: url("/fonts/atkinson-hyperlegible-mono/AtkinsonHyperlegibleMono-variable.ttf") format("truetype");
    font-display: swap;
  }
}

@font-face {
  font-family: "Lexend Bold";
  src: url("/fonts/lexend/lexend-bold.ttf") format("truetype");
  font-weight: bold;
  font-display: swap;
}

:root {
  --sans:
    Lexend, -apple-system, BlinkMacSystemFont, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
    arial, sans-serif;
  --sans-h:
    "Lexend Bold", Lexend, -apple-system, BlinkMacSystemFont, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu,
    roboto, noto, arial, sans-serif;
  --mono: AtkinsonHyperlegibleMono, Courier, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  --serif:
    Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times,
    Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  --font-size: clamp(18px, 1.2rem, 1.2rem);
  --font-size-s1: clamp(16px, 1.1rem, 1.1rem);
  --font-size-s2: clamp(14px, 1rem, 1rem);
  --font-size-s3: clamp(12px, 0.9rem, 0.9rem);

  --font-size-l1: clamp(20px, 1.4rem, 1.4rem);
  --font-size-l2: clamp(28px, 1.8rem, 1.8rem);
  --font-size-l3: clamp(32px, 2rem, 2rem);
  --font-size-l4: clamp(36px, 2.2rem, 2.2rem);
  --font-size-l5: clamp(40px, 2.4rem, 2.4rem);
  --font-size-l6: clamp(44px, 2.6rem, 2.6rem);
  --font-size-l7: clamp(48px, 2.8rem, 2.8rem);
  --font-size-l8: clamp(52px, 3rem, 3rem);
}

body {
  font-family: var(--sans);
  font-size: var(--font-size);
  color: var(--color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sans-h);
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
  color: var(--color);
  width: 100%;
}

p {
  line-height: 1.4;
  margin: 0;
  width: 100%;
}

button,
input,
code,
pre,
textarea {
  font-family: var(--mono);
  letter-spacing: -0.3px;
}

button {
  font-weight: 580;
}

/* =============================================================================
   Global Styles
   ========================================================================== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  /* A fluid linear scale */
  font-size: clamp(11px, 9.5px + 0.5vw, 20px);
}

@media screen and (orientation: portrait) {
  html {
    font-size: clamp(11px, 9.5px + 0.5vw, 20px);
  }
}

html,
body,
#root {
  min-height: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  /* FOUC protection - starts hidden via inline style, fades in when CSS loads.
     `animation: none` cancels the inline style's reveal fallback for a loaded sheet. */
  opacity: 1;
  animation: none;
  transition: opacity 0.1s ease-in;
}

.noscript {
  margin: 0;
  padding: 1rem 1.4rem;
  text-align: center;
  color: var(--secondary-color);
  background: var(--bg-color);
}

/* The wrapper element every island hydrates into. It exists to carry
   `data-island` and `data-props`, not to lay anything out, so it stays out of
   the box tree and lets its child size against the island's actual parent.
   This has to be a stylesheet rule rather than something the hydration script
   sets: the server renders real markup inside, so a plain block div would
   briefly claim layout between first paint and hydration. */
.island {
  display: contents;
}

/* =============================================================================
   Accessibility
   ========================================================================== */

/* Available to assistive tech and to the keyboard, absent from the visual
   design. The moon's navigation markers are three.js geometry with no DOM
   presence, so the keyboard path to those routes is a hidden list of the same
   links -- see MoonShell.tsx.

   Global rather than a CSS module: it is referenced from several components,
   and a hashed class name would have to be threaded through each of them. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  /* clip-path is the modern rule; `clip` stays for browsers that ignore it.
     Both are needed -- neither alone covers everything still in use. */
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden until focused, then a real element again. The skip link uses this: it
   must be the first tab stop but must not occupy the design.

   Every property the rule above sets is unset here, in the same order -- a
   half-restored element lands offscreen or clipped to nothing, which reads as
   the skip link being broken rather than hidden. The class-plus-pseudo-class
   selector outranks `.sr-only` on specificity, so no !important is needed. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.5rem 0.9rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;

  color: var(--color);
  background: var(--bg-color);
  border: 1px solid var(--color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-s1);
  text-decoration: none;
}

/* Fading dots of the scene controls' loading state (SceneControls.module.css). */
@keyframes loading-fade {
  0%,
  80%,
  100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

.scene_ZMUUNw{--scene-gap:1.5rem;height:100svh}.scene_ZMUUNw+.scene_ZMUUNw{margin-top:var(--scene-gap)}.band_ZMUUNw{height:calc(var(--font-size-l5)*1.2)}

.polaroid_OYgugw{--paper:#f4efe4;--ink:#2b2925;--frame:clamp(12px,3.5vw,26px);display:flex;position:relative;flex-direction:column;width:100%;height:100svh;margin:0}.paper_OYgugw{position:absolute;pointer-events:none;width:100%;height:100%;inset:0}.well_OYgugw{position:relative;border:var(--frame)solid var(--paper);border-bottom:0;flex:1;min-height:0}.caption_OYgugw{position:relative;display:flex;padding:1rem var(--frame)calc(max(1rem,env(safe-area-inset-bottom)) + 4.5rem);background:var(--paper);color:var(--ink);text-align:center;justify-content:center;align-items: center;margin-top:-1px}.caption_OYgugw>*{color:inherit}.polaroid_OYgugw[data-paper=canvas] .well_OYgugw{border-color:#0000}.polaroid_OYgugw[data-paper=canvas] .caption_OYgugw{background:0 0}

.form_eihLGA{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}.hint_eihLGA{font-size:var(--font-size-s2);color:var(--secondary-color);margin:.4rem 0 0}.row_eihLGA{display:flex;align-items: center;gap:1rem;margin-top:.6rem}.field_eihLGA{position:relative;display:flex;font-size:var(--font-size-s1);flex:1;min-width:0;height:calc(3em + 6px);transition:transform .2s ease-in-out}.field_eihLGA:focus-within{transform:scale(1.01)}.notch_eihLGA{position:absolute;font-size:var(--font-size-s1);color:var(--light-color);background:var(--bg-color);pointer-events:none;padding:0 .4em;line-height:1;top:0;left:1em;transform:translateY(-50%)}.input_eihLGA{font:inherit;font-size:var(--font-size-s1);color:var(--color);background:var(--bg-color);border:2px solid var(--light-color);border-radius:var(--border-radius);box-shadow:inset 0 0 0 2px var(--bg-color),inset 0 0 0 4px color-mix(in srgb,var(--light-color)20%,transparent),.3em .4em 0 0 color-mix(in srgb,var(--light-color)15%,transparent);flex:1;min-width:0;padding:.6em;transition:all .2s ease-in-out;line-height:1}.input_eihLGA:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--bg-color),inset 0 0 0 4px color-mix(in srgb,var(--light-color)20%,transparent),.4em .6em 0 0 color-mix(in srgb,var(--light-color)15%,transparent)}.input_eihLGA[aria-invalid=true]{border-color:var(--error-color)}.input_eihLGA:disabled{color:var(--disabled-color)}.button_eihLGA{display:flex;font:inherit;font-size:var(--font-size-s1);color:var(--bg-color);cursor:pointer;border:1px solid color-mix(in srgb,var(--light-color)20%,transparent);background:linear-gradient(to right,color-mix(in srgb,var(--secondary-color)20%,transparent),color-mix(in srgb,var(--color)30%,transparent));border-radius:7px;justify-content:center;align-items: center;padding:5px}.content_eihLGA{display:flex;white-space:nowrap;background:var(--color);border:2px solid var(--bg-color);box-shadow:inset 0 0 0 2px var(--color),inset 0 0 0 3px color-mix(in srgb,var(--light-color)30%,transparent),inset 5px 0 0 0 color-mix(in srgb,var(--light-color)30%,transparent);border-radius:5px;justify-content:flex-end;align-items: flex-end;gap:.4em;min-width:8em;height:3em;padding:.2em .5em;transition:all .2s ease-in-out}.text_eihLGA{border-bottom:2px dotted #0000;transition:border-color .2s ease-in-out}.arrow_eihLGA{display:none;width:1em;height:1em}.button_eihLGA:active:not(:disabled) .content_eihLGA{transform:scale(.985)}.button_eihLGA:hover:not(:disabled) .text_eihLGA{border-color:color-mix(in srgb,var(--bg-color)50%,transparent)}.button_eihLGA:focus-visible{outline:3px solid var(--light-color);outline-offset:-1px}.button_eihLGA:disabled{cursor:not-allowed}.button_eihLGA:disabled .content_eihLGA{background:var(--disabled-color);box-shadow:none}@media (max-width:640px){.text_eihLGA{display:none}.content_eihLGA{align-items: center;min-width:0;height:auto;padding:.8em .9em}.arrow_eihLGA{display:block}}.error_eihLGA{font-size:var(--font-size-s2);color:var(--error-color);margin:0}.error_eihLGA:empty{display:none}.success_eihLGA{font-size:var(--font-size);color:var(--light-color);margin:1.5rem 0 0;line-height:1.6}.rss_eihLGA{display:inline-block;font-size:var(--font-size-s2);color:var(--secondary-color);margin-top:1rem}.rss_eihLGA:hover{text-decoration:underline dotted;text-underline-offset:.25em}.rss_eihLGA:focus-visible{text-decoration:underline dotted;text-underline-offset:.25em}

.home_66vGIA{display:flex;flex-direction:column;gap:2.5rem;max-width:40rem;margin:0 auto;padding:17rem 1.4rem 4rem}.title_66vGIA{font-size:var(--font-size-l1)}.tagline_66vGIA{font-size:var(--font-size-s2);color:var(--secondary-color);margin-top:.3rem}.list_66vGIA{list-style:none;display:flex;flex-direction:column;gap:1.6rem;margin:0;padding:0}.story_66vGIA{display:flex;color:var(--light-color);text-decoration:none;flex-direction:column;gap:.9rem}.story_66vGIA:focus-visible{outline:3px solid var(--light-color);outline-offset:3px}.card_66vGIA{display:block;border:1px solid color-mix(in srgb,var(--light-color)20%,transparent);background:linear-gradient(to right,color-mix(in srgb,var(--secondary-color)20%,transparent),color-mix(in srgb,var(--color)30%,transparent));border-radius:7px;padding:5px}.thumb_66vGIA{position:relative;display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--bg-color);border:2px solid var(--bg-color);border-radius:5px}.image_66vGIA{display:block;object-fit:cover;width:100%;height:100%}.play_66vGIA{position:absolute;display:grid;background:color-mix(in srgb,var(--bg-color)20%,transparent);color:color-mix(in srgb,var(--light-color)65%,transparent);border-radius:50%;place-items: center;width:4.5rem;height:4.5rem;transition:background .2s,color .2s;top:50%;left:50%;transform:translate(-50%,-50%)}.play_66vGIA svg{width:50%;height:50%}.story_66vGIA:hover .play_66vGIA{color:var(--light-color);background:color-mix(in srgb,var(--bg-color)70%,transparent)}.story_66vGIA:focus-visible .play_66vGIA{color:var(--light-color);background:color-mix(in srgb,var(--bg-color)70%,transparent)}.caption_66vGIA{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.7rem}.storyTitle_66vGIA{font-family:var(--sans-h);font-size:var(--font-size-s1);color:var(--secondary-color);text-decoration:underline;text-decoration-color:#0000;text-underline-offset:.25em;transition:text-decoration-color .2s}.story_66vGIA:hover .storyTitle_66vGIA{text-decoration-color:currentColor}.story_66vGIA:focus-visible .storyTitle_66vGIA{text-decoration-color:currentColor}.author_66vGIA{font-size:var(--font-size-s2);color:var(--secondary-color)}.subscribe_66vGIA{display:flex;flex-direction:column;gap:1rem;margin-top:4rem}@media (prefers-reduced-motion:reduce){.play_66vGIA,.storyTitle_66vGIA{transition:none}}

.panel_shO1VQ{position:fixed;z-index:3;color:#fff;background:#000c;border:1px solid #ffffff4d;border-radius:6px;max-width:calc(100vw - 2rem);margin:0;padding:.5rem;font:12px/1.4 monospace;top:1rem;right:1rem}.buttons_shO1VQ{display:flex;flex-wrap:wrap;gap:.25rem}.buttons_shO1VQ button{font:inherit;color:inherit;cursor:pointer;background:#ffffff1f;border:0;border-radius:4px;padding:.25rem .5rem}.readout_shO1VQ{display:block;user-select:all;overflow-wrap:anywhere;margin-top:.5rem}

.frame_gJnjUA{position:relative}.canvas_gJnjUA{position:fixed;z-index:0;pointer-events:none;inset:0}.backdrop_gJnjUA{position:fixed;pointer-events:none;inset:0}.scenes_gJnjUA,.footer_gJnjUA{position:relative;z-index:1}.footer_gJnjUA{max-width:40rem;margin:0 auto;padding:6rem 1.4rem 8rem}.back_gJnjUA{display:block;color:var(--secondary-color);font-size:var(--font-size-s1);width:-moz-fit-content;width:fit-content;margin-top:3rem}.back_gJnjUA:hover{color:var(--color)}.back_gJnjUA:focus-visible{color:var(--color)}

.controls_WMa-0Q{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:2;--cell:max(40px,2.5rem);--gap:.2rem;display:flex;gap:var(--gap);border:1px solid var(--border-color);background:#000000bf;border-radius:999px;min-inline-size:auto;margin:0;padding:.25rem;transform:translate(-50%)}.button_WMa-0Q{width:var(--cell);height:var(--cell);display:grid;color:var(--color);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items: center;padding:0}.button_WMa-0Q svg{width:55%;height:55%}.button_WMa-0Q:hover:not([aria-disabled]){background:#ffffff1f}.button_WMa-0Q:focus-visible{background:#ffffff1f}.button_WMa-0Q:focus-visible{outline:1px solid var(--color);outline-offset:1px}.button_WMa-0Q[aria-disabled]{color:var(--secondary-color);opacity:.5;cursor:default}.loading_WMa-0Q{display:flex;width:calc(var(--cell)*3 + var(--gap)*2);height:var(--cell);justify-content:center;align-items: center;gap:.3rem}.dot_WMa-0Q{background:var(--color);will-change:opacity;animation:loading-fade 1.6s ease-in-out infinite;border-radius:50%;width:.4rem;height:.4rem}.dot_WMa-0Q:nth-child(2){animation-delay:.27s}.dot_WMa-0Q:nth-child(3){animation-delay:.54s}

.rail_t2acyg{position:fixed;z-index:2;height:40svh;top:50%;left:.2rem;transform:translateY(-50%)}.bars_t2acyg{list-style:none;display:flex;flex-direction:column;gap:.4rem;height:100%;margin:0;padding:0}.item_t2acyg{display:flex;flex-basis:0;min-height:24px}.bar_t2acyg{position:relative;display:flex;justify-content:center;width:max(24px,1.5rem)}.bar_t2acyg:before,.fill_t2acyg{position:absolute;width:var(--rail-thickness,3px);border-radius:999px;top:0;bottom:0}.bar_t2acyg:before{content:"";background:var(--secondary-color);opacity:.6;transition:opacity .2s,width .2s}.fill_t2acyg{background:var(--rail-fill,var(--color));transition:background-color .2s,width .2s;bottom:auto}.bar_t2acyg:hover:before,.bar_t2acyg[aria-current]:before{opacity:.85}.bar_t2acyg:focus-visible:before{opacity:.85}.bar_t2acyg:hover:before,.bar_t2acyg:hover .fill_t2acyg{width:calc(var(--rail-thickness,3px)*1.5)}.bar_t2acyg:focus-visible:before{width:calc(var(--rail-thickness,3px)*1.5)}.bar_t2acyg:focus-visible .fill_t2acyg{width:calc(var(--rail-thickness,3px)*1.5)}.bar_t2acyg:hover .fill_t2acyg{background:var(--rail-fill-hover,var(--rail-fill,var(--color)))}.bar_t2acyg:focus-visible .fill_t2acyg{background:var(--rail-fill-hover,var(--rail-fill,var(--color)))}@media (pointer:coarse){.bar_t2acyg:before,.fill_t2acyg{width:calc(var(--rail-thickness,3px)*1.5)}}.bar_t2acyg:focus-visible{outline:1px solid var(--color);outline-offset:2px}@media (prefers-reduced-motion:reduce){.bar_t2acyg:before,.fill_t2acyg{transition:none}}