/* Culture Over Code v3: Cinema. Loaded after engine.css, so it is the show's look.
   Near-black, the panel's own footage full bleed and sharp, one display face (League Gothic),
   one accent (a red REC dot), hard cuts. Sizes in --u (one pixel of a 1920-wide stage). */

html, html body { background: #0A0A0B; }
html body { color: #F4F1EA; font-family: "Wix Madefor Text", Arial, sans-serif; }
html .beat.statement { background: #0A0A0B; padding: 0; }

/* hard cuts: the type is simply there when the picture cuts in (no rise, no rule draw) */
html body .statement [data-in] { opacity: 1 !important; transform: none !important; }
html body .statement .rule { display: none !important; }

/* every cover between screens is a dip to black: short inside a part, a longer beat of black between parts */
html .tx-bars { display: none !important; }
html .p-tx.in-part .tx-dip { animation: tx-dip-in .16s ease-in both; }
html .p-tx.out-part .tx-dip { animation: tx-dip-out .34s ease-out both; }

/* the engine's reader chrome (chapter rail, progress line, corner buttons) stays off the stage */
html.present :is(.rail, .progress, .ctrl) { display: none !important; }

/* ---------- footage ---------- */
html .beat-bg { background: #0A0A0B; --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .78) 34%, rgba(10, 10, 11, .22) 62%, rgba(10, 10, 11, .08) 100%); }
html .beat-bg video, html .beat-bg img { transform: none; }
html body .has-bg :is(.st-line, .st-sub, .sec-kicker, .st-asks li) { text-shadow: 0 0 calc(30 * var(--u)) rgba(10, 10, 11, .55); }

/* ---------- the one marker: a red REC dot and the part name ---------- */
html body .statement .sec-kicker { position: absolute; left: 0; top: calc(92 * var(--u)); margin: 0; padding: 0; background: none; display: flex; align-items: center; gap: calc(18 * var(--u));
  font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 600; font-size: calc(26 * var(--u)); line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: #F4F1EA; white-space: nowrap; }
html body .statement .sec-kicker::before { content: ""; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #FF3B30; box-shadow: 0 0 calc(22 * var(--u)) rgba(255, 59, 48, .75); }

/* ---------- the default screen: a line of type over footage, left ---------- */
html body .statement.beat .safe { position: absolute; left: calc(116 * var(--u)); top: 0; bottom: 0; width: calc(1080 * var(--u)); max-width: none; margin: 0; padding: 0; transform: none;
  display: flex; flex-direction: column; justify-content: center; }
html body .statement.surface-stage .st-line { font-family: "League Gothic", "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .004em; color: #F4F1EA;
  font-size: calc(124 * var(--u)); line-height: .92; margin: 0; max-width: none; text-wrap: balance; }
html body .statement.surface-stage .st-sub { font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 500; color: #F4F1EA; font-size: calc(40 * var(--u)); line-height: 1.25; margin: calc(40 * var(--u)) 0 0; max-width: none; text-wrap: balance; }
html body .statement.surface-stage .st-sub:empty { display: none; }
html body .statement .st-line .nb { white-space: nowrap; }
html body .statement .st-hero { display: none; }
html body .statement .st-asks { margin: 0; padding: 0; list-style: none; max-width: none; gap: 0; }

/* questions: the panelist's name under the question, quiet and tracked */
html body :is([data-chapter="3"], [data-chapter="4"], [data-chapter="5"]).statement.surface-stage .st-sub { font-weight: 650; font-size: calc(30 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: #CFCAC0; margin-top: calc(52 * var(--u)); }

/* read the room: the question to the audience, bigger */
html body [data-chapter="1"].statement.surface-stage .st-line { font-size: calc(170 * var(--u)); }
html body [data-chapter="1"].statement.surface-stage .st-sub { font-size: calc(48 * var(--u)); }
html body [data-chapter="1"].statement.beat .safe { width: calc(1240 * var(--u)); }

html body #room-0 .st-line { font-size: calc(132 * var(--u)); }
html body #room-0.statement.beat .safe { width: calc(760 * var(--u)); }  /* WHO HERE / MAKES THINGS?, ending near x 706 */

/* ---------- walk-in: the title over Paul's skyline, the credits along the bottom ---------- */
html body #open-0 .safe { left: calc(120 * var(--u)); width: calc(1680 * var(--u)); justify-content: flex-start; }
html #open-0 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .8) 30%, rgba(10, 10, 11, .15) 58%, rgba(10, 10, 11, 0) 70%), linear-gradient(0deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .6) 22%, rgba(10, 10, 11, 0) 40%); }
html #open-0 .beat-bg video { object-position: 60% 50%; }
html body :is(#open-0, #open-2, #close-1) .st-line { font-size: calc(300 * var(--u)); line-height: .86; text-wrap: nowrap; white-space: nowrap; }
html body :is(#open-0, #open-2, #close-1) .st-line .w { display: block; }
html body :is(#open-0, #open-2, #close-1) .st-line .w2 { font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 600; font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: .5em; color: #CFCAC0; margin: calc(22 * var(--u)) 0 calc(18 * var(--u)) calc(10 * var(--u)); }
html body :is(#open-0, #open-2, #close-1) .st-line .w3 { color: rgba(244, 241, 234, .62); }
html body #open-0 .st-line { margin-top: calc(196 * var(--u)); margin-left: calc(-8 * var(--u)); }
html body :is(#open-0, #open-2, #close-1) .st-sub { font-size: calc(42 * var(--u)); margin-top: calc(34 * var(--u)); }
html body #open-0 .st-asks { position: absolute; left: 0; right: 0; bottom: calc(78 * var(--u)); display: flex; gap: calc(48 * var(--u)); }
html body #open-0 .st-asks li { border: 0; padding: 0; margin: 0; font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 400; font-size: calc(26 * var(--u)); line-height: 1; color: #CFCAC0; }
html body #open-0 .st-asks li .label { display: block; font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 650; font-size: calc(23 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: #F4F1EA; margin: 0 0 calc(10 * var(--u)); }

/* the small Global Mixx mark: walk-in, title, closing title and thank-you only */
html body :is(#open-0, #open-2, #close-1, #close-2)::after { content: ""; position: absolute; z-index: 3; right: calc(120 * var(--u)); top: calc(78 * var(--u)); width: calc(252 * var(--u)); height: calc(40 * var(--u));
  background: url(brand/logo/gm-logo-white.png) right center / contain no-repeat; pointer-events: none; }
html body #close-2::after { top: auto; bottom: calc(84 * var(--u)); width: calc(330 * var(--u)); height: calc(52 * var(--u)); }

/* ---------- title (screen 3): Paul's code city resolves into the lit city, then the title cuts in ---------- */
html body :is(#open-2, #close-1) .safe { left: calc(120 * var(--u)); width: calc(1200 * var(--u)); }
html #open-2 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .72) 32%, rgba(10, 10, 11, .1) 60%, rgba(10, 10, 11, 0) 72%); }
html #open-2 .beat-bg::after { opacity: 0; }
html #open-2.v3-landed .beat-bg::after { opacity: 1; }
html.present body #open-2:not(.v3-landed) :is(.safe) { visibility: hidden; }
html.present body #open-2:not(.v3-landed)::after { visibility: hidden; }
html #close-1 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .72) 32%, rgba(10, 10, 11, .1) 60%, rgba(10, 10, 11, 0) 72%); }
html #close-1 .beat-bg img { transform-origin: 70% 40%; animation: v3-push 30s ease-out both; }
@keyframes v3-push { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---------- name cards: their own footage, their portrait as a column on the right ---------- */
html body :is(#open-1, [data-chapter="2"]).statement.beat .safe { justify-content: flex-end; padding-bottom: calc(92 * var(--u)); width: calc(1120 * var(--u)); }
html body :is(#open-1, [data-chapter="2"]).statement .sec-kicker { position: static; margin-bottom: calc(26 * var(--u)); }
html body :is(#open-1, [data-chapter="2"]).statement.surface-stage .st-line { font-size: calc(200 * var(--u)); line-height: .86; white-space: nowrap; text-wrap: nowrap; }
html body :is(#open-1, [data-chapter="2"]).statement.surface-stage .st-sub { font-size: calc(38 * var(--u)); margin-top: calc(22 * var(--u)); font-weight: 500; letter-spacing: 0; text-transform: none; color: #F4F1EA; }
html :is(#open-1, [data-chapter="2"]) .beat-bg { --bg-overlay: linear-gradient(0deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .72) 26%, rgba(10, 10, 11, .1) 55%), linear-gradient(90deg, rgba(10, 10, 11, .6) 0%, rgba(10, 10, 11, .2) 50%, rgba(10, 10, 11, .55) 100%); }
html body :is(#open-1, #panel-0, #panel-1, #panel-2).statement .st-hero { display: block; position: absolute; z-index: 1; left: auto; right: 0; top: 0; bottom: 0; width: calc(640 * var(--u)); height: auto; margin: 0; padding: 0;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 calc(160 * var(--u))); mask: linear-gradient(90deg, transparent 0, #000 calc(160 * var(--u))); }
html body :is(#open-1, [data-chapter="2"]).statement .st-hero img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; margin: 0; filter: none; box-shadow: none; }
html body #open-1 .st-hero img { object-position: 50% 30%; }
html body #panel-0 .st-hero img { object-position: 46% 30%; }
html body #panel-1 .st-hero img { object-position: 40% 30%; }
html body #panel-2 .st-hero img { object-position: 50% 30%; }
html #panel-3 .beat-bg video { object-position: 50% 30%; }
html #panel-3 .beat-bg { --bg-overlay: linear-gradient(0deg, rgba(10, 10, 11, .95) 0%, rgba(10, 10, 11, .75) 28%, rgba(10, 10, 11, 0) 58%), linear-gradient(90deg, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, 0) 60%); }

/* the lower third over each panelist's intro clip: the clip plays clean, the name comes up, then leaves */
html .p-clip video { object-fit: cover; }
html .p-clip .clip-lower { position: absolute; left: 0; right: 0; bottom: 0; display: none; flex-direction: column; align-items: flex-start; gap: 0;
  padding: calc(260 * var(--u)) calc(120 * var(--u)) calc(92 * var(--u)); background: linear-gradient(0deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .7) 45%, rgba(10, 10, 11, 0) 100%); }
html .p-clip .clip-lower.on { display: flex; animation: v3-lower-in .5s ease-out 1.1s both, v3-lower-out .6s ease-in 8.6s forwards; }
html .p-clip .clip-lower.lift { padding-bottom: calc(190 * var(--u)); }  /* Paul's intro burns captions into its bottom band */
html .cl-bars, html .cl-photo { display: none !important; }
html .cl-box { background: none; padding: 0; border: 0; color: #F4F1EA; }
html .cl-kicker { display: flex; align-items: center; gap: calc(18 * var(--u)); font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 600; font-size: calc(26 * var(--u)); line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: #F4F1EA; background: none; padding: 0; margin: 0 0 calc(26 * var(--u)); }
html .cl-kicker::before { content: ""; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #FF3B30; box-shadow: 0 0 calc(22 * var(--u)) rgba(255, 59, 48, .75); }
html .cl-name { font-family: "League Gothic", "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; font-size: calc(200 * var(--u)); line-height: .86; color: #F4F1EA; margin: 0; white-space: nowrap; }
html .cl-role { font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 500; font-size: calc(38 * var(--u)); line-height: 1.2; color: #F4F1EA; margin: calc(22 * var(--u)) 0 0; white-space: nowrap; }
@keyframes v3-lower-in { from { opacity: 0; transform: translateY(calc(18 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes v3-lower-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- part openers: one word, full height ---------- */
html body :is(#make-0, #protect-0, #own-0) .safe { width: calc(1700 * var(--u)); justify-content: flex-end; padding-bottom: calc(150 * var(--u)); }
html body :is(#make-0, #protect-0, #own-0) .st-line { font-size: calc(420 * var(--u)); line-height: .82; white-space: nowrap; text-wrap: nowrap; margin-left: calc(-10 * var(--u)); }
html body :is(#make-0, #protect-0, #own-0) .st-sub { font-weight: 500; font-size: calc(44 * var(--u)); letter-spacing: 0; text-transform: none; color: #F4F1EA; margin-top: calc(30 * var(--u)); }
html :is(#make-0, #protect-0, #own-0) .beat-bg { --bg-overlay: linear-gradient(0deg, rgba(10, 10, 11, .92) 0%, rgba(10, 10, 11, .6) 40%, rgba(10, 10, 11, .1) 75%), linear-gradient(90deg, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, 0) 70%); }

/* ---------- the three facts: black, the figure lands alone, the sentence follows ---------- */
html body :is(#make-1, #protect-1, #own-1) .safe { left: calc(120 * var(--u)); width: calc(1680 * var(--u)); justify-content: flex-start; }
html body :is(#make-1, #protect-1, #own-1) .st-line { position: absolute; left: calc(-20 * var(--u)); top: calc(178 * var(--u)); font-size: calc(780 * var(--u)); line-height: .8; white-space: nowrap; text-wrap: nowrap; letter-spacing: -.005em; }
html body #protect-1 .st-line { font-size: calc(330 * var(--u)); line-height: .86; top: calc(170 * var(--u)); left: calc(-8 * var(--u)); white-space: normal; width: calc(1600 * var(--u)); text-wrap: balance; }
html body #own-1 .st-line { font-size: calc(600 * var(--u)); top: calc(200 * var(--u)); }
html body :is(#make-1, #protect-1, #own-1) .st-sub { position: absolute; left: 0; bottom: calc(146 * var(--u)); width: calc(1440 * var(--u)); margin: 0; font-weight: 500; font-size: calc(40 * var(--u)); line-height: 1.32; letter-spacing: 0; text-transform: none; color: #F4F1EA; }
html body :is(#make-1, #protect-1, #own-1) .st-asks { display: block; position: absolute; left: 0; right: auto; width: calc(1680 * var(--u)); max-width: none; bottom: calc(84 * var(--u)); }
html body :is(#make-1, #protect-1, #own-1) .st-asks li { display: block; white-space: nowrap; max-width: none; border: 0; padding: 0; margin: 0; font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 500; font-size: calc(24 * var(--u)); line-height: 1.2; letter-spacing: .04em; color: #CFCAC0; }
html body :is(#make-1, #protect-1, #own-1) .st-asks li .label { display: inline; font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 600; font-size: calc(24 * var(--u)); letter-spacing: .24em; text-transform: uppercase; color: #CFCAC0; margin: 0 calc(18 * var(--u)) 0 0; }
html.present body .v3-after { filter: opacity(0); }
html.present[data-beat="make-1"] body #make-1 .v3-after,
html.present[data-beat="protect-1"] body #protect-1 .v3-after,
html.present[data-beat="own-1"] body #own-1 .v3-after { animation: v3-after .9s ease-out 1.6s both; }
@keyframes v3-after { from { filter: opacity(0); } to { filter: opacity(1); } }

/* ---------- questions over footage: where the footage's subject sits, the picture moves right ---------- */
html #make-2 .beat-bg video { left: 24%; width: 105%; height: 105%; top: -3%; }
html :is(#protect-2, #protect-3, #protect-4) .beat-bg video { left: 22%; }
html #protect-2 .beat-bg video { left: 30%; }  /* Melody's face and earrings stay clear of the question as she sings */
html #make-3 .beat-bg video { left: 42%; }  /* Cinderella at the T.P. Lounge sits right of the question */
html #make-3 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, 1) 0%, rgba(10, 10, 11, 1) 42%, rgba(10, 10, 11, .9) 55%, rgba(10, 10, 11, .2) 66%, rgba(10, 10, 11, 0) 78%); }
html #room-0 .beat-bg video { left: 42%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(120 * var(--u))); mask-image: linear-gradient(90deg, transparent 0, #000 calc(120 * var(--u))); }  /* footage starts at x 806: every face in the loop clears the type */
html #room-0 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, 1) 0%, rgba(10, 10, 11, .96) 38%, rgba(10, 10, 11, .55) 52%, rgba(10, 10, 11, .1) 66%, rgba(10, 10, 11, 0) 80%); }
html #open-1 .beat-bg video { transform: scale(1.25); transform-origin: 0 50%; }
html #make-2 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, 1) 0%, rgba(10, 10, 11, 1) 24%, rgba(10, 10, 11, .86) 42%, rgba(10, 10, 11, .15) 62%, rgba(10, 10, 11, 0) 72%); }
html :is(#protect-2, #protect-3, #protect-4) .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, 1) 0%, rgba(10, 10, 11, .96) 22%, rgba(10, 10, 11, .8) 42%, rgba(10, 10, 11, .12) 64%, rgba(10, 10, 11, 0) 76%); }

/* ---------- audience questions ---------- */
html body #qa-0 .safe { width: calc(1680 * var(--u)); justify-content: flex-end; padding-bottom: calc(150 * var(--u)); }
html body #qa-0 .st-line { font-size: calc(400 * var(--u)); line-height: .82; white-space: nowrap; text-wrap: nowrap; margin-left: calc(-8 * var(--u)); }
html body #qa-0 .st-sub { font-weight: 500; font-size: calc(44 * var(--u)); letter-spacing: 0; text-transform: none; color: #F4F1EA; margin-top: calc(30 * var(--u)); }
html #qa-0 .beat-bg { --bg-overlay: linear-gradient(0deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .62) 42%, rgba(10, 10, 11, .1) 78%); }

/* ---------- lightning round: four black and white strips snap to color, one after another ---------- */
html body #close-0 .st-hero { display: grid; position: absolute; z-index: 0; inset: 0; grid-template-columns: repeat(4, 1fr); gap: calc(4 * var(--u)); width: auto; height: auto; margin: 0; padding: 0; }
html body #close-0 .st-hero img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; margin: 0; box-shadow: none; filter: grayscale(1) contrast(1.1) brightness(.95); }
html body #close-0 .st-hero img:nth-child(1) { object-position: 44% 0; }
html body #close-0 .st-hero img:nth-child(2) { object-position: 40% 0; }
html body #close-0 .st-hero img:nth-child(3) { object-position: 50% 0; }
html body #close-0 .st-hero img:nth-child(4) { object-position: 50% 0; }
html body #close-0::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 10, 11, .96) 0%, rgba(10, 10, 11, .86) 26%, rgba(10, 10, 11, 0) 52%), linear-gradient(180deg, rgba(10, 10, 11, .85) 0%, rgba(10, 10, 11, .72) 12%, rgba(10, 10, 11, 0) 24%); }
html body #close-0 .safe { z-index: 2; left: calc(112 * var(--u)); width: calc(1700 * var(--u)); justify-content: flex-end; padding-bottom: calc(84 * var(--u)); }
html body #close-0 .st-line { font-size: calc(210 * var(--u)); line-height: .86; white-space: nowrap; text-wrap: nowrap; }
html body #close-0 .st-sub { font-weight: 500; font-size: calc(38 * var(--u)); letter-spacing: 0; text-transform: none; color: #F4F1EA; margin-top: calc(26 * var(--u)); }
html body #close-0 .sec-kicker { left: calc(8 * var(--u)); }
html.present[data-beat="close-0"] body #close-0 .st-hero img { animation: v3-strike .5s ease-out both; }
html.present[data-beat="close-0"] body #close-0 .st-hero img:nth-child(1) { animation-delay: .7s; }
html.present[data-beat="close-0"] body #close-0 .st-hero img:nth-child(2) { animation-delay: 1.3s; }
html.present[data-beat="close-0"] body #close-0 .st-hero img:nth-child(3) { animation-delay: 1.9s; }
html.present[data-beat="close-0"] body #close-0 .st-hero img:nth-child(4) { animation-delay: 2.5s; }
@keyframes v3-strike {
  0% { filter: grayscale(1) contrast(1.1) brightness(.95); }
  12% { filter: grayscale(0) contrast(1.05) brightness(2.1); }
  100% { filter: grayscale(0) contrast(1.04) brightness(1); }
}

/* ---------- thank you, and find them ---------- */
html body #close-2 .safe { width: calc(1300 * var(--u)); }
html body #close-2 .st-line { font-size: calc(170 * var(--u)); line-height: .88; }
html body #close-2 .st-sub { font-weight: 500; font-size: calc(40 * var(--u)); letter-spacing: 0; text-transform: none; color: #F4F1EA; margin-top: calc(36 * var(--u)); }
html #close-2 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, .95) 0%, rgba(10, 10, 11, .9) 62%, rgba(10, 10, 11, .5) 82%, rgba(10, 10, 11, .15) 100%), linear-gradient(0deg, rgba(10, 10, 11, .7) 0%, rgba(10, 10, 11, 0) 30%); }
html body #close-3 .safe { width: calc(1680 * var(--u)); justify-content: center; }
html body #close-3 .st-line { font-size: calc(200 * var(--u)); line-height: .86; white-space: nowrap; text-wrap: nowrap; margin-bottom: calc(56 * var(--u)); }
html body #close-3 .st-asks { display: block; }
html body #close-3 .st-asks li { display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; align-items: baseline; border: 0; padding: 0; margin: 0 0 calc(18 * var(--u)); font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 500; font-size: calc(40 * var(--u)); line-height: 1.2; color: #F4F1EA; }
html body #close-3 .st-asks li .label { font-family: "Wix Madefor Text", Arial, sans-serif; font-weight: 650; font-size: calc(34 * var(--u)); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #CFCAC0; margin: 0; }
html #close-3 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .86) 55%, rgba(10, 10, 11, .6) 100%); }

/* ---------- closet demo (optional edition) ---------- */
html body #closet-0 .safe { width: calc(1680 * var(--u)); justify-content: flex-start; padding-top: calc(190 * var(--u)); }
html body #closet-0 .st-line { font-size: calc(124 * var(--u)); }
html body #closet-0 .st-sub { font-weight: 500; font-size: calc(40 * var(--u)); letter-spacing: 0; text-transform: none; color: #F4F1EA; margin-top: calc(28 * var(--u)); }
html body #closet-0 .frames { position: absolute; z-index: 2; left: calc(120 * var(--u)); right: calc(120 * var(--u)); bottom: calc(80 * var(--u)); display: flex; justify-content: flex-start; gap: calc(24 * var(--u)); margin: 0; }
html body #closet-0 .frame { width: calc(330 * var(--u)); aspect-ratio: 3 / 4; border: 0; border-radius: 0; box-shadow: none; background: #fff; margin: 0; }
html body #closet-0 .frame img { width: 100%; height: 100%; object-fit: contain; }
html #closet-0 .beat-bg { --bg-overlay: linear-gradient(90deg, rgba(10, 10, 11, .92) 0%, rgba(10, 10, 11, .8) 50%, rgba(10, 10, 11, .5) 100%); }

/* ---------- presenter notes and the blank, in the show's type ---------- */
html.present.notes-on .notes { font-family: "Wix Madefor Text", Arial, sans-serif; font-size: 22px; letter-spacing: 0; background: #111113; color: #F4F1EA; border-top: 4px solid #FF3B30; }

@media (prefers-reduced-motion: reduce) {
  html .p-clip .clip-lower.on { animation: none; }
  html.present body .v3-after { filter: none; animation: none !important; }
  html.present[data-beat="close-0"] body #close-0 .st-hero img { animation: none; filter: none; }
  html #close-1 .beat-bg img { animation: none; }
}