/* The store X-ray (GET /xray, features/xray). Tokens from mobile-tokens.css, recipes from journey.css. Phone first.
   Two acts: the film (their own live ads on a lightbox, a beam passing, three readouts filling) and the report (one
   card, the skyline, a dead page if any, the offer). No step list. Motion: design/MOTION.md curves; reduced motion
   drops the beam, the counts and the rises. The paste box styles at the top are shared with the front door. */
.xr{--xr-cyan:#8fdcff;--xr-film:#070b10;width:min(100% - 32px,720px);margin:0 auto;padding:8px 0 calc(48px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:24px}
.xr h1{font-size:2.25rem;letter-spacing:var(--track-display);line-height:1.04;overflow-wrap:anywhere}
.xr h2{font-size:var(--text-title);letter-spacing:var(--track-title);line-height:1.15}
.xr-head{display:flex;flex-direction:column;gap:12px}
.xr-kicker,.xr-k{font-size:var(--text-caption);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.xr-k.is-bad{color:var(--error)}
.xr-lead{color:var(--muted);font-size:var(--text-lead);line-height:1.55}
.xr-note{color:var(--muted);font-size:var(--text-small);line-height:1.5}
.xr-note.is-error,[data-xr-error]{color:var(--error)}
.xr-fine{color:var(--faint);font-size:.8125rem;line-height:1.5}
.xr-fine a{color:var(--link)}
[hidden]{display:none!important}

/* the paste box (here and on the front door) */
.xr-form{display:flex;flex-direction:column;gap:12px}
.xr-field{display:flex;flex-direction:column;gap:8px}
.xr-label{font-size:var(--text-small);font-weight:700;color:var(--ink)}
.xr-form.is-again{padding-top:20px;border-top:1px solid var(--line)}

/* ---------- act one: the film ---------- */
.xr-lab{display:flex;flex-direction:column;gap:14px;transition:opacity var(--dur-exit) var(--ease-out),transform var(--dur-exit) var(--ease-out)}
.xr-lab.is-leaving{opacity:0;transform:scale(.97)}
.xr-film{position:relative;overflow:hidden;border-radius:var(--radius-sheet);padding:16px 14px 14px;background:radial-gradient(120% 70% at 50% 18%,#12232f 0%,var(--xr-film) 72%);box-shadow:inset 0 0 0 1px rgba(143,220,255,.14),var(--elev-2);display:flex;flex-direction:column;gap:14px}
.xr-film-head{display:flex;justify-content:space-between;gap:12px;font:500 .6875rem/1 'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--xr-cyan);opacity:.85}
.xr-film-head span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr-site{position:relative;display:flex;align-items:center;gap:12px;min-height:52px}
.xr-site-img{width:84px;height:52px;flex:none;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px rgba(143,220,255,.3);animation:xr-develop .7s var(--ease-out) both}
.xr-site-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.xr-site-name b{font-size:1.375rem;font-weight:850;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.xr-site-name span{color:var(--muted);font-size:var(--text-small)}
.xr-site-name span:empty{display:none}

/* the contact sheet: skeleton slots until the ads arrive, then their own ads as negatives; the longest turns positive */
.xr-sheet{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.xr-slot{position:relative;aspect-ratio:9/14;border-radius:8px;overflow:hidden;background:linear-gradient(100deg,rgba(143,220,255,.05) 20%,rgba(143,220,255,.12) 40%,rgba(143,220,255,.05) 60%) 0 0/300% 100%;animation:xr-shimmer 1.6s linear infinite}
.xr-slot.is-ad{background:#0c1419;animation:xr-drop .5s var(--ease-out) both}
.xr-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:invert(1) grayscale(1) sepia(1) hue-rotate(160deg) saturate(2.4) brightness(.78) contrast(1.15);opacity:.62;transition:filter .7s var(--ease-out),opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.xr-slot img.is-missing{display:none}
.xr-slot-days{position:absolute;left:5px;bottom:5px;padding:2px 5px;border-radius:5px;background:rgba(3,8,12,.72);font:600 .625rem/1.2 'IBM Plex Mono',ui-monospace,monospace;color:var(--xr-cyan);font-variant-numeric:tabular-nums}
.xr-slot.is-hot{z-index:1;overflow:visible;box-shadow:0 0 0 2px var(--xr-cyan),0 0 32px rgba(143,220,255,.45);animation:xr-lift .7s var(--ease-out) both}
.xr-slot.is-hot img{filter:none;opacity:1;border-radius:8px}
.xr-slot.is-hot .xr-slot-days{left:50%;bottom:-10px;transform:translateX(-50%);padding:5px 9px;border-radius:8px;background:var(--xr-cyan);color:#041018;font:800 .9375rem/1 var(--body);letter-spacing:-.02em;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.xr-sheet.is-empty .xr-slot,.xr-sheet.is-bare{animation:none;opacity:.35}
.xr-sheet.is-bare{opacity:1;display:block}
.xr-sheet-note{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-weight:800;font-size:1.0625rem;letter-spacing:-.02em;color:var(--ink);background:rgba(7,11,16,.5)}
.xr-sheet-big{display:flex;flex-direction:column;align-items:center;padding:26px 0}
.xr-sheet-big b{font-size:5rem;font-weight:900;letter-spacing:-.06em;line-height:.9;color:var(--xr-cyan);font-variant-numeric:tabular-nums}
.xr-sheet-big span{color:var(--muted);font-size:var(--text-small)}

/* three readouts that fill as the live reads land */
.xr-reads{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.xr-read{display:flex;flex-direction:column;gap:3px;padding:10px 10px 9px;border-radius:12px;background:rgba(143,220,255,.06);box-shadow:inset 0 0 0 1px rgba(143,220,255,.1);min-width:0}
.xr-read b{font-size:1.375rem;font-weight:850;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;min-height:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr-read span{font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr-read:not(.is-in) b{width:60%;border-radius:6px;background:linear-gradient(100deg,rgba(143,220,255,.06) 20%,rgba(143,220,255,.14) 40%,rgba(143,220,255,.06) 60%) 0 0/300% 100%;animation:xr-shimmer 1.6s linear infinite}
.xr-read.is-in{animation:xr-pop var(--dur-pop) var(--ease-out) both}
.xr-read.is-in b{color:var(--ink)}
.xr-read.is-muted b{color:var(--muted);font-size:1rem;line-height:1.4}
.xr-read.is-bad{background:var(--error-surface);box-shadow:inset 0 0 0 1px rgba(255,154,145,.3)}
.xr-read.is-bad b{color:var(--error)}

/* the beam: passes over the film only while the X-ray is running */
.xr-beam{position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;background:var(--xr-cyan);box-shadow:0 0 18px 5px rgba(143,220,255,.5);opacity:0}
.xr.is-running .xr-beam{animation:xr-beam 2.2s var(--ease-in-out) infinite alternate}
.xr-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:0 4px}
.xr-progress i{height:3px;border-radius:2px;background:var(--line-strong);overflow:hidden;position:relative}
.xr-progress i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--xr-cyan);transition:transform .5s var(--ease-out)}
.xr-progress i.is-running::after{transform:scaleX(.45)}
.xr-progress i.is-done::after{transform:scaleX(1)}
.xr-progress i.is-failed::after,.xr-progress i.is-missing::after{transform:scaleX(1);background:var(--faint)}
.xr-cap{min-height:3em;padding:0 4px;text-align:center;font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;line-height:1.45;color:var(--ink)}
.xr-cap.is-failed{color:var(--muted);font-weight:600}
.xr-cap.is-in{animation:xr-cap .35s var(--ease-out) both}

/* ---------- act two: the report ---------- */
.xr-report{display:flex;flex-direction:column;gap:28px}
.xr-card-col{display:flex;flex-direction:column;gap:10px;perspective:1000px}
.xr-when{text-align:center;color:var(--faint);font-size:.8125rem}
.xr-when:empty{display:none}

/* the card: their longest-running ad as the art, one huge number, three stats. The thing to screenshot. */
.xr-card{--rx:2deg;--ry:-3deg;--gx:30%;position:relative;padding:8px;border-radius:30px;background:linear-gradient(140deg,#ffc2a6 0%,#ff794a 26%,#7c2c10 55%,#ff8f63 80%,#ffe0d2 100%);box-shadow:0 34px 70px -26px rgba(255,121,74,.6),0 22px 44px -10px rgba(0,0,0,.7);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .4s var(--ease-out);animation:xr-card .9s var(--ease-out) both}
.xr-card-in{position:relative;overflow:hidden;border-radius:23px;background:#121416;isolation:isolate}
.xr-card-in::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.2) 48%,rgba(255,255,255,0) 60%) var(--gx) 0/260% 100% no-repeat;mix-blend-mode:screen;animation:xr-sheen 1.6s .5s var(--ease-out) both}
.xr-art{position:relative;aspect-ratio:4/4.3;overflow:hidden;background:var(--media-bg)}
.xr-art video,.xr-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.xr-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#121416 0%,rgba(18,20,22,.75) 20%,rgba(18,20,22,0) 48%),linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%)}
.xr-art.is-frames img{opacity:0;animation:xr-frames calc(var(--n)*1.6s) calc(var(--i)*1.6s) infinite}
.xr-art.is-frames img:first-child{opacity:1}
.xr-card.no-art .xr-art{aspect-ratio:auto;height:120px;background:radial-gradient(90% 120% at 20% 0%,rgba(255,121,74,.35),rgba(255,121,74,0) 70%)}
.xr-card-top{position:absolute;z-index:2;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.xr-brand{font-size:1.25rem;font-weight:850;letter-spacing:-.03em;text-shadow:0 2px 12px rgba(0,0,0,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr-badge{flex:none;padding:6px 11px;border-radius:12px;background:var(--grad-accent);color:var(--on-accent);font-weight:900;font-size:.9375rem;letter-spacing:-.01em;box-shadow:var(--btn-primary)}
.xr-days{position:relative;z-index:2;margin-top:-86px;padding:0 18px;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:8px}
.xr-days b{font-size:6.5rem;font-weight:900;letter-spacing:-.07em;line-height:.8;font-variant-numeric:tabular-nums;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.xr-days-unit{font-size:1.625rem;font-weight:850;letter-spacing:-.03em;padding-bottom:4px}
.xr-days-sub{grid-column:1/-1;margin-top:10px;color:var(--muted);font-size:.9375rem;font-weight:600}
.xr-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:16px 10px 10px;border-radius:16px;background:#1c1f23;box-shadow:var(--hi)}
.xr-stats div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;text-align:center;min-width:0}
.xr-stats div+div{box-shadow:-1px 0 0 rgba(255,255,255,.06)}
.xr-stats b{font-size:1.5rem;font-weight:900;letter-spacing:-.04em;line-height:1.05;white-space:nowrap}
.xr-stats span{font-size:.6875rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.xr-stats .is-bad b{color:var(--error)}
.xr-card-foot{display:flex;justify-content:space-between;gap:12px;padding:2px 16px 14px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.xr-card-foot span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr-card-foot span:last-child{flex:none}

.xr-story{display:flex;flex-direction:column;gap:28px}
.xr-verdict{font-size:1.5rem;font-weight:850;letter-spacing:-.035em;line-height:1.2;animation:rise var(--dur-enter) .3s var(--ease-out) both}
.xr-verdict-soft{color:var(--muted);font-weight:700}

/* the skyline: every brand in the category, one bar each, theirs lit and pinned with their own ad */
.xr-rank{display:flex;flex-direction:column;gap:6px;padding:22px 18px 18px;border-radius:var(--radius-sheet);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.xr-sky{position:relative;height:180px;margin:26px 0 6px}
.xr-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:1px}
.xr-bars i{flex:1;min-width:0;border-radius:2px 2px 0 0;background:rgba(255,255,255,.2);transform-origin:bottom;transition:transform .8s calc(var(--i)*4ms) var(--ease-out)}
.xr-bars i.is-me{background:var(--accent);box-shadow:0 0 14px rgba(255,121,74,.8)}
.xr-rank.is-waiting .xr-bars i{transform:scaleY(0)}
.xr-med{position:absolute;left:0;right:0;border-top:1.5px dashed rgba(255,255,255,.4);pointer-events:none}
.xr-med span{position:absolute;right:0;top:5px;font-size:.75rem;font-weight:700;color:var(--muted);background:rgba(23,26,29,.8);padding:1px 4px;border-radius:4px}
.xr-pin{position:absolute;display:flex;flex-direction:column;gap:4px;transition:opacity .5s .7s var(--ease-out),translate .5s .7s var(--ease-out)}
.xr-rank.is-waiting .xr-pin{opacity:0;translate:0 10px}
.xr-pin img{width:46px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;box-shadow:0 0 0 2px var(--accent),0 10px 24px rgba(0,0,0,.6)}
.xr-pin img.is-missing{display:none}
.xr-pin-days{padding:3px 7px;border-radius:7px;background:var(--accent);color:var(--on-accent);font-size:.75rem;font-weight:900;white-space:nowrap}
.xr-pin:not(.is-right){align-items:flex-start;transform:translateX(-4px)}
.xr-pin.is-right{align-items:flex-end;transform:translateX(calc(-100% + 4px))}
.xr-top-label{position:absolute;right:0;top:-4px;font-size:.75rem;font-weight:700;max-width:60%;text-align:right}
.xr-top-label a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:2px}
.xr-axis{display:flex;justify-content:space-between;color:var(--faint);font-size:.75rem;font-weight:600;margin-bottom:8px}

/* a broken ad link, as the page a buyer lands on */
.xr-dead{display:flex;flex-direction:column;gap:12px}
.xr-browser{border-radius:18px;overflow:hidden;background:#1a1112;box-shadow:0 0 0 1px rgba(255,154,145,.35),0 20px 50px -20px rgba(255,90,80,.45)}
.xr-browser-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#241617}
.xr-browser-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,154,145,.35)}
.xr-browser-bar span{margin-left:8px;flex:1;min-width:0;padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.35);font:500 .75rem/1.2 'IBM Plex Mono',ui-monospace,monospace;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr-browser-body{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px 38px}
.xr-browser-body b{font-size:4.5rem;font-weight:900;letter-spacing:-.06em;line-height:.9;color:var(--error)}
.xr-browser-body span{color:var(--ink);font-weight:700}
.xr-dead-line{color:var(--muted);line-height:1.5}

/* the gap and the offer */
.xr-result{display:flex;flex-direction:column;gap:16px;padding:22px 18px;border-radius:var(--radius-sheet);background:var(--grad-raised);box-shadow:var(--hi),var(--ring),var(--elev-2),var(--glow-accent)}
.xr-gap{display:flex;flex-direction:column;gap:8px;padding-bottom:18px;border-bottom:1px solid var(--line-strong)}
.xr-gap-line{font-size:1.125rem;font-weight:750;letter-spacing:-.02em;line-height:1.4}
.xr-offer{display:flex;flex-direction:column;gap:14px}
.xr-offer-copy{display:flex;flex-direction:column;gap:8px}
.xr .xr-offer-q{font-size:1.375rem;font-weight:850;letter-spacing:-.03em;line-height:1.2}
.xr-offer-q b{color:var(--link)}
.xr-offer-sub{color:var(--muted);font-size:.9375rem;line-height:1.45}
.xr-queue{display:flex;flex-direction:column;gap:16px;padding:22px 18px;border-radius:var(--radius-sheet);background:var(--grad-raised);box-shadow:var(--hi),var(--ring),var(--elev-2),var(--glow-accent);animation:rise var(--dur-enter) var(--ease-out) both}
.xr-offer-quiet{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.xr-offer-quiet .xr-offer-q{font-size:1.125rem}
.xr-how{color:var(--muted);font-size:var(--text-small);line-height:1.55}
.xr-how summary{cursor:pointer;font-weight:700;color:var(--ink)}
.xr-how p{margin-top:8px}
.xr-sources{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.xr-sources:empty{display:none}
.xr-sources a,.xr-dev-list a{color:var(--link)}
.xr-dev-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.xr-dev-raw{font-size:.8125rem;margin-left:8px}

@keyframes xr-shimmer{to{background-position:-300% 0}}
@keyframes xr-drop{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes xr-lift{0%{transform:none}60%{transform:scale(1.12) translateY(-4px)}100%{transform:scale(1.08) translateY(-3px)}}
@keyframes xr-develop{from{opacity:0;filter:blur(8px) brightness(2)}to{opacity:1;filter:none}}
@keyframes xr-pop{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
@keyframes xr-beam{0%{top:0;opacity:.9}100%{top:calc(100% - 2px);opacity:.9}}
@keyframes xr-cap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes xr-card{from{opacity:0;transform:translateY(40px) rotateX(18deg) scale(.94)}to{opacity:1;transform:rotateX(var(--rx)) rotateY(var(--ry))}}
@keyframes xr-sheen{from{background-position:130% 0}to{background-position:-60% 0}}
@keyframes xr-frames{0%{opacity:0}8%{opacity:1}33%{opacity:1}41%{opacity:0}100%{opacity:0}}

/* wide screens: the card stays in view on the left while the story reads on the right */
@media (min-width:64rem){
 .xr{width:min(100% - 64px,1120px);padding-top:32px}
 .xr h1{font-size:var(--text-desktop)}
 .xr-lab{width:min(100%,560px);margin:0 auto}
 .xr-report{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:start}
 .xr-card-col{position:sticky;top:88px}
 .xr-story{padding-top:8px}
 .xr-verdict{font-size:2.25rem;letter-spacing:-.045em;line-height:1.1}
 .xr-sky{height:220px}
 .xr .xr-offer-q{font-size:1.75rem}
 .xr-report~.xr-how,.xr-report~.xr-form,.xr-report~.xr-queue,.xr-report~.xr-note{width:min(100%,720px);margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
 .xr-lab,.xr-card,.xr-card-in::after,.xr-verdict,.xr-queue,.xr-slot,.xr-read.is-in,.xr-cap.is-in,.xr-site-img{animation:none!important;transition:none!important}
 .xr-slot.is-hot{animation:none;transform:scale(1.08)}
 .xr-art.is-frames img{animation:none}
 .xr-bars i,.xr-pin{transition:none}
}

/* round 2: the offer shows their own ads, fanned; quieter chrome while the film runs */
.xr.is-running .xr-how,.xr.is-running .xr-form.is-again{display:none}
.xr-fan-box{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.xr-fan{position:relative;width:min(100%,250px);height:190px;margin:0 auto}
.xr-fan img{position:absolute;left:50%;top:8px;width:96px;aspect-ratio:9/16;object-fit:cover;border-radius:12px;box-shadow:var(--ring-media),0 12px 24px -8px rgba(0,0,0,.7);transform:translateX(-50%) translateX(calc(var(--i)*70px)) rotate(calc(var(--i)*8deg));transform-origin:50% 130%}
.xr-fan img:nth-child(2){z-index:1}
.xr-fan-box figcaption{font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.xr-offer.no-fan .xr-fan-box{display:none}
.xr-rank-title{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.xr-card-foot span:first-child{white-space:normal;overflow:visible}
.xr-top-label{white-space:nowrap;max-width:none}
.xr-sheet.is-empty{min-height:140px;grid-template-rows:none}
.xr-sheet.is-empty .xr-slot{display:none}

/* round 3: the card says whose it is and where it came from; bars ahead of you read at a glance */
.xr-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.xr-cat{font-size:.8125rem;font-weight:700;color:rgba(245,245,243,.85);text-shadow:0 1px 8px rgba(0,0,0,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr-card-top{align-items:flex-start}
.xr-card-foot{align-items:baseline;letter-spacing:.03em}
.xr-card-foot span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0;font-size:.75rem}
.xr-mark{color:var(--link);text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:800}
.xr-dead-pill{position:relative;z-index:2;margin:14px 10px 0;padding:10px 14px;border-radius:14px;background:var(--error-surface);color:var(--error);font-weight:800;font-size:.9375rem;box-shadow:inset 0 0 0 1px rgba(255,154,145,.35)}
.xr-dead-pill+.xr-stats{margin-top:10px}
.xr-bars i.is-ahead{background:rgba(255,255,255,.42)}
.xr-save{align-self:center}
.xr-slot.is-hot .xr-slot-days{bottom:-6px}
.xr-progress i.is-failed::after,.xr-progress i.is-missing::after{background:var(--xr-cyan);opacity:.4}
.xr-cat{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.xr-badge.is-bad{background:var(--error-surface);color:var(--error);box-shadow:inset 0 0 0 1px rgba(255,154,145,.45)}
.xr-art::after{background:linear-gradient(to top,#121416 0%,rgba(18,20,22,.78) 22%,rgba(18,20,22,0) 50%),linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,.25) 20%,rgba(0,0,0,0) 34%)}
.xr-live{display:inline-flex;align-items:center;gap:7px}
.xr-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--xr-cyan);box-shadow:0 0 0 3px rgba(143,220,255,.2)}
.xr.is-done .xr-live::before{background:var(--faint);box-shadow:none}
.xr-offer-lead{font-size:1rem;font-weight:700;line-height:1.45;color:var(--ink)}
.xr-progress i.is-failed::after,.xr-progress i.is-missing::after{opacity:1}
.xr-art::after{background:linear-gradient(to top,#121416 0%,rgba(18,20,22,.78) 22%,rgba(18,20,22,0) 50%),linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 22%,rgba(0,0,0,0) 36%)}
.xr-offer-lead{font-size:1rem;font-weight:700;line-height:1.45;color:var(--ink)}
.xr-progress i.is-failed::after,.xr-progress i.is-missing::after{opacity:1}
.xr-art::after{background:linear-gradient(to top,#121416 0%,rgba(18,20,22,.78) 22%,rgba(18,20,22,0) 50%),linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 22%,rgba(0,0,0,0) 36%)}