@font-face { font-family: Montserrat; font-weight: 900; src: url(assets/Montserrat-Black.ttf); }
@font-face { font-family: Montserrat; font-weight: 800; src: url(assets/Montserrat-ExtraBold.ttf); }
@font-face { font-family: Montserrat; font-weight: 700; src: url(assets/Montserrat-Bold.ttf); }
@font-face { font-family: Montserrat; font-weight: 600; src: url(assets/Montserrat-SemiBold.ttf); }
@font-face { font-family: Montserrat; font-weight: 400; src: url(assets/Montserrat-Regular.ttf); }
@font-face { font-family: Mayonice; src: url(assets/Mayonice.ttf); }

:root {
  --pink: #eb008b; --pink-bright: #ff2aa0; --purple: #4b2679; --blue: #125b9a;
  --ink: #1e1a2b; --off-white: #f6f6f8; --muted: rgba(255, 255, 255, .6);
  --glow: 0 0 2px rgba(255, 92, 183, .85), 0 0 7px rgba(235, 0, 139, .6),
          0 0 16px rgba(235, 0, 139, .45), 0 0 34px rgba(235, 0, 139, .33);
}
* { margin: 0; box-sizing: border-box; }
body { font-family: Montserrat, system-ui, sans-serif; color: #fff; background: var(--ink); }

/* fixed-size stage scaled to the window (outputs) */
.stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--s, 1)); overflow: hidden; }
.layer { position: absolute; inset: 0; transition: opacity .35s; }
.hide { opacity: 0; pointer-events: none; }
.accent { color: var(--pink-bright); text-shadow: var(--glow); } /* *word* in lyrics */

/* section colours, used on cards and labels */
[data-sec] { --sec: #6b6580; }
[data-sec^="Chorus"], [data-sec^="Refrain"] { --sec: var(--pink); }
[data-sec^="Verse"] { --sec: var(--blue); }
[data-sec^="Bridge"] { --sec: var(--purple); }
[data-sec^="Pre"], [data-sec^="Tag"] { --sec: #b8337a; }
[data-sec^="Scripture"] { --sec: #1f7a6d; }
[data-sec^="Point"], [data-sec^="Title"] { --sec: #a05a00; }