/* The deck's visual language (white, Inter, the method-figure palette), composed for a
   full-frame splash that still reads on a phone. */
:root {
  --flow: #0f8a74; --q: #3a8f7a; --blue: #2a6f97; --amber: #c98a3b; --red: #dc2626;
  --ink: #111; --gray: #6b7280;
}
html, body { margin: 0; background: #fff; }
#stage {
  position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#frame { position: absolute; inset: 0; transform-origin: 0 0; }
#world { position: absolute; inset: 0; }
.blue { color: var(--blue); } .teal { color: var(--flow); } .q { color: var(--q); } .amber { color: var(--amber); } .red { color: var(--red); }

/* Diagram labels */
#labels { position: absolute; inset: 0; pointer-events: none; }
.lbl {
  position: absolute; white-space: nowrap; transform: translate(-50%, -50%); opacity: 0;
  font-family: "STIX Two Text", "Times New Roman", serif; font-style: italic; font-size: 48px; color: #222;
  text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 2px #fff;
}
.lbl sub { font-size: 0.68em; line-height: 0; vertical-align: -0.28em; }
.lbl .up { font-style: normal; }
.lbl.ui .math { font-family: "STIX Two Text", "Times New Roman", serif; font-style: italic; font-size: 1.4em; font-weight: 400; } /* a symbol in a word label */
.lbl.left { transform: translate(0, -50%); }
.lbl.right { transform: translate(-100%, -50%); }
.lbl.ui { font-family: Inter, sans-serif; font-style: normal; font-size: 32px; font-weight: 500; color: #7a7f87; letter-spacing: 0.005em; }
.lbl.chip {
  background: #fff; border-radius: 16px; padding: 0 12px 6px; line-height: 1.2; text-shadow: none;
  box-shadow: 0 3px 12px rgba(12, 51, 131, 0.22);
}
.lbl.ui.chip { padding: 4px 14px 6px; }
/* A speech chip: a tail off its lower right corner, pointing down-right (about 45°) at whoever says it, placed up
   and to the left of them (splash.js puts the corner on that diagonal). */
.lbl.chip.speech { box-shadow: none; filter: drop-shadow(0 3px 6px rgba(12, 51, 131, 0.22)); }
.lbl.chip.speech::after {
  content: ''; position: absolute; right: 10px; bottom: -13px; width: 0; height: 0;
  border-top: 14px solid #fff; border-left: 22px solid transparent;
}
.lbl.bang { font-family: Inter, sans-serif; font-style: normal; font-weight: 700; font-size: 68px; color: var(--red); }

/* Captions: one or two lines per beat, bottom center */
.cap {
  position: absolute; left: 0; right: 0; top: 790px; text-align: center; opacity: 0;
  font-size: 54px; line-height: 1.28; font-weight: 500; letter-spacing: -0.015em;
}
.short .cap { top: 760px; } /* tucked up under the bucket, for a tighter frame */
.cap b { font-weight: 700; }
.cap .note { font-size: 0.62em; font-weight: 400; color: var(--gray); } /* the reel's note under a caption */
.cap .w { display: inline-block; white-space: pre; }

/* End card */
.card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; }
.card .mark { font-size: 210px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.card .mark span { display: inline-block; }
.card .title { margin-top: 30px; font-size: 54px; font-weight: 500; letter-spacing: -0.015em; }
.card .subtitle { margin-top: 16px; font-size: 36px; color: var(--gray); }
.card.plain .mark { display: none; } /* ?card=plain: no wordmark, just the title */
.card.plain .title { margin-top: 0; }
.card .title b { font-weight: 700; }
.card .subtitle.url { margin-top: 26px; font-size: 42px; font-weight: 400; color: var(--ink); } /* the reel's website line */