/* Owner-selected preserved neon artwork; surrounding page stays light. */
#B12 .neon{margin-top:0}
#B12 .neonsign{margin:0}
#B12 .neon p{text-wrap:pretty}
#B12 .live-status-note{font-size:14px;line-height:1.65}
#B12 .lives{min-width:0}
@media(max-width:600px){#B12 .neon{padding:24px 20px}#B12 .lives{grid-template-columns:1fr}#B12 .lv{max-width:320px;width:100%;justify-self:center}}
@media(prefers-reduced-motion:reduce){#B12 .neonsign b{animation:none}}
@media(forced-colors:active){#B12 .neon,#B12 .neonsign{background:Canvas;border-color:CanvasText;box-shadow:none}#B12 .neonsign b,#B12 .neonsoon,#B12 .neon p{color:CanvasText;text-shadow:none}}
#B12 .neonsign b{font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif!important}

/* Restore vertical live-video cards with portrait scene artwork. */
#B12 .lv{aspect-ratio:4 / 5.6} 
#B12 .lv img{object-fit:cover}
@media(max-width:600px){#B12 .lv{max-width:480px}}

#B12 .lv .sample-comments{display:block;font:600 11px/1.5 "Plus Jakarta Sans",sans-serif;text-shadow:0 1px 3px #000}
#B12 .page-support{justify-content:center;text-align:center}
@media(max-width:700px){#B12 .page-support{align-items:center}}

#chapter-links .chapter-home{display:block;flex:none;width:18px;height:18px;color:#08766A}

#B12 .lv .sample-comments{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11px;line-height:1.3}
#B12 .lv .sample-comment{position:static;display:block;max-width:100%;padding:3px 6px;background:#111b;border-radius:5px;color:white;font-size:11px;white-space:normal}
#B12 .lv .sample-reaction{position:absolute;left:auto;right:3px;bottom:22px;color:#ff8a7b;font-size:17px;animation:sample-heart 3s ease-in-out infinite}
@keyframes sample-heart{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-10px);opacity:1}}
@media(prefers-reduced-motion:reduce){#B12 .lv .sample-reaction{animation:none}}

@media(prefers-reduced-motion:no-preference){#B12 .sample-comment{animation:sample-comment-in 5s ease-in-out infinite}#B12 .sample-comment:nth-child(2){animation-delay:1.5s}}
@keyframes sample-comment-in{0%,12%{opacity:0;transform:translateY(6px)}25%,82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-4px)}}

/* Stagger illustrative reactions so the samples do not move in lockstep. */
#B12 .sample-reaction:nth-last-child(3){right:3px;color:#ff8a7b;animation-delay:-.4s;animation-duration:3.4s}
#B12 .sample-reaction:nth-last-child(2){right:17px;color:#ffd378;animation-delay:-1.6s;animation-duration:4.3s}
#B12 .sample-reaction:nth-last-child(1){right:30px;color:#a9e4d8;animation-delay:-2.7s;animation-duration:3.8s}
#B12 .lv:nth-child(2) .sample-reaction{animation-delay:-2s}
#B12 .lv:nth-child(3) .sample-reaction{animation-delay:-1s}

#B12 .sample-reaction{right:5px!important;left:auto!important;bottom:20px;opacity:0;animation:none!important}
#B12 .sample-reaction.is-floating{animation:sample-float 1.8s ease-out forwards!important}
@keyframes sample-float{0%{opacity:0;transform:translateY(0) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){#B12 .sample-reaction.is-floating{animation:none!important;opacity:0}}
/* Occasional bursts of sample reactions, independent on each card. */
#B12 .lv .sample-reaction{right:5px!important;bottom:16px;width:48px;height:1px;opacity:1;pointer-events:none;overflow:visible}
#B12 .reaction-particle{position:absolute;right:var(--reaction-x);bottom:0;color:var(--reaction-color);font:700 25px/1 sans-serif;text-shadow:0 1px 3px #000,0 0 5px #0009;opacity:0;animation:live-reaction-rise var(--reaction-time) ease-out forwards}
@keyframes live-reaction-rise{0%{opacity:0;transform:translate(0,0) scale(.7)}12%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translate(var(--reaction-drift),-140px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){#B12 .reaction-particle{display:none;animation:none}}