/* Shared by the routine mockups: the frame and the things the first run makes. */
.rz { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 2.4vh; padding: 88px var(--gutter) 3vh; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.rz-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.rz-top p { margin: 0; }
.rz-say { margin-top: 6px !important; font: 600 clamp(22px, 2.4vw, 36px)/1.1 var(--sans); letter-spacing: -0.03em; min-height: 1.1em; }
.rz-fact { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.45; color: var(--grey-1); min-height: 2.9em; }
.rz-fact b { color: var(--ink); }
.rz-stage { position: relative; min-height: 0; }
.rz-right { display: grid; justify-items: end; gap: 4px; }
.rz-right b { font: 600 clamp(30px, 3.6vw, 56px)/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.rz-caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -3px; background: currentColor; animation: rz-blink 1s steps(1) infinite; }
@keyframes rz-blink { 50% { opacity: 0; } }

/* The things the run makes, sized by their container. */
.rx { display: grid; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--ink); text-align: left; }
.rx .mono { font-size: 10.5px; color: var(--grey-2); }
.rx b { font: 600 14px/1.25 var(--sans); letter-spacing: -0.01em; }
.rx p { margin: 0; color: var(--grey-1); }
.rx-merged { justify-self: start; padding: 2px 8px; border-radius: 999px; background: #8250df; color: #fff; font: 600 11px var(--sans); }
.rx--reel { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #222; }
.rx--reel img, .rx--post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx--reel img { position: absolute; inset: 0; }
.rx-play { position: absolute; left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: rgba(255,255,255,0.9); }
.rx-play::after { content: ""; position: absolute; left: 13px; top: 10px; border: 7px solid transparent; border-left: 11px solid #0a0a0a; border-right: 0; }
.rx-cap { position: absolute; left: 10px; bottom: 10px; color: #fff; font: 700 15px/1.05 var(--sans); text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.rx-dur { position: absolute; right: 8px; top: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,0.5); color: #fff !important; }
.rx--post { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; }
.rx--post img { height: 56px; border-radius: 8px; }
.rx--ok { padding: 10px; border-radius: 12px; background: var(--ink); color: #fff; }
.rx--ok b { color: #fff; } .rx--ok span { color: #b8b4aa; font-size: 12px; }
.rx-btn { justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 8px; background: var(--gold); color: var(--ink); font: 600 12px var(--sans); font-style: normal; }
.rx-bar { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; font-size: 11.5px; color: var(--grey-1); }
.rx-bar i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) calc(var(--v) * 100%), var(--canvas-deep) 0); }
@media (max-width: 760px) { .rz { padding-top: 70px; } .rz-top { flex-direction: column; align-items: start; } .rz-right { justify-items: start; } .rz-fact { font-size: 13.5px; } }