/* The showcase, shared by the home page and /elite (2026-10-18): real past price action, the hour first, then the five
   minutes playing out. No setup is named anywhere on it. Colours come from the page (with these fallbacks). */
.show { --sc-line: var(--line, #1f1f1f); --sc-line2: var(--line2, #2a2a2a); --sc-dim: var(--dim, #525252); --sc-ease: var(--ease, cubic-bezier(.2,.7,.2,1)); width: 100%; }
.showbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; font-size: 10px; min-height: 22px; }
.showbar .what { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; transition: opacity .35s; }
.tf { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--sc-line2); border-radius: 6px; }
.tf span { padding: 5px 9px; border-radius: 4px; color: var(--sc-dim); transition: background .35s, color .35s; }
.tf span.on { background: #fff; color: #000; }
.stage { position: relative; border: 1px solid var(--sc-line); border-radius: 14px; padding: 14px 6px 6px 14px; background: #030303; overflow: hidden; }
#show { display: block; width: 100%; }
/* under the chart: what's happening now, in the headline face, and how far this example has played */
.beat { margin-top: 24px; min-height: 1.1em; font: 600 clamp(24px, 4.6vw, 46px)/1.1 'Cormorant Garamond', serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-align: center; transition: color .3s, text-shadow .3s; }
.beat.in { animation: beatIn .45s var(--sc-ease) both; }
.beat.hit { color: #1FD67F; text-shadow: 0 0 26px rgba(31,214,127,.45); }
@keyframes beatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prog { width: 120px; height: 2px; margin: 18px auto 0; background: var(--sc-line2); border-radius: 2px; overflow: hidden; }
.prog b { display: block; height: 100%; width: 0; background: #fff; }
.show .honest { margin-top: 18px; font-size: 9px; color: var(--sc-dim); line-height: 1.8; text-align: center; }