/* ================= Moshpit =================
   One room, lights down, one stage light. The crowd is your images; the red one is you. Type is a
   gig-poster condensed (Big Shoulders Display) for the name and headings, Archivo for everything you
   read. Red is the only color: it marks you (the blob), the live thing (the pit), and nothing else. */
:root, :root[data-theme="light"] {
  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --display: "Big Shoulders Display", "Archivo", sans-serif;
  --mp-red: #ff3b1f;
  --signal: #ff3b1f; --signal-deep: #ff3b1f;
  --frame: #050505; --stage: #050505;
  --ink: #efece6; --text: #efece6;
}
body { background: var(--frame); }

/* The name, in the header and on the loader. */
.mp-mark { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .9; color: var(--ink); white-space: nowrap; }
.brand .mp-mark { font-size: 26px; display: block; padding: 2px 2px 0; }
.brand:hover .mp-mark { color: var(--mp-red); }
.loader .mp-mark { font-size: clamp(56px, 12vw, 132px); animation: mp-jolt .9s steps(1) infinite; }
@keyframes mp-jolt { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 2px) rotate(-.6deg); }
  50% { transform: translate(2px, -2px) rotate(.4deg); } 75% { transform: translate(-1px, -3px) rotate(.2deg); } }

/* Headings speak in the poster face. */
#spaceHeading, #emptyTitle, #worldTitle, #importTitle {
  font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
#spaceHeading { font-size: 34px !important; }

/* The pit: where the rail's live light is. A red beam sweeps the slot like a stage light. */
.strip-world .fan-c::before { background: conic-gradient(from var(--spin), var(--mp-red), transparent 30%, transparent 55%, var(--mp-red) 75%, transparent 95%, var(--mp-red)) !important; opacity: 1; }
.strip-world .fan-c::after { display: none; }
.strip-world .plus-dot { color: var(--ink); }
.strip-world .plus-dot circle.you { fill: var(--mp-red); stroke: none; }
.strip-world .plus-dot circle:not(.you) { fill: currentColor; stroke: none; }

/* You: the blob is red and solid, the one colored body in the crowd. */
.depth-blob { mix-blend-mode: normal; }
.depth-blob i { background: var(--mp-red); box-shadow: 0 0 18px rgba(255, 59, 31, .55); }
.depth-blob.over i { transform: scale(2.6); opacity: .85; }
.depth-blob svg { stroke: var(--mp-red); }
.depth-blob b { color: var(--ink); text-shadow: 0 1px 6px #000; }

/* No light mode: the room stays dark. */
[data-theme-choice], .theme-row { display: none !important; }

/* The dot over the I is you: the same red as the blob. */
.mp-i { position: relative; display: inline-block; }
.mp-i::before { content: ""; position: absolute; left: 50%; top: -.2em; width: .22em; height: .22em; translate: -50% 0; border-radius: 50%;
  background: var(--mp-red); box-shadow: 0 0 .35em rgba(255, 59, 31, .6); }
.strip-world .plus-dot svg { width: 30px !important; height: 30px !important; }