/* rt-story.css — the rank tracker walkthrough (partials/rank-tracker-demo).
   One app window; rt-story.js moves a cursor, slides the keyword panel in,
   zooms the camera (.rts-cam) and switches views. Resting state = chapter 1,
   fully visible without JS. */
.rts {
  --ink: #0b1526; --ink2: #232f42; --muted: #5a6577; --faint: #8a93a5; --line: #e9ecf2; --soft: #f7f8fc;
  --orange: #ff6a00; --green: #19b66a; --green-ink: #138a52; --amber: #e8890c; --red: #d64545; --blue: #2f5fe0;
  --f: "Zoho_Puvi_Regular", Arial, sans-serif; --fm: "Zoho_Puvi_Medium", Arial, sans-serif;
  --fs: "Zoho_Puvi_SemiBold", Arial, sans-serif; --fb: "Zoho_Puvi_Bold", Arial, sans-serif;
  color: var(--ink); font-family: var(--f);
}
.rts * { box-sizing: border-box; }
.rts p { margin: 0; }

/* ---------- stage, camera, window ---------- */
.rts-stage { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,21,38,.04), 0 30px 64px -26px rgba(11,21,38,.3); }
.rts-cam { transform-origin: 0 0; transition: transform .6s cubic-bezier(.6,.05,.25,1); will-change: transform; }
.rts-app { background: #fff; border: 1px solid #e3e7ee; border-radius: 20px; overflow: hidden; }
.rts-top { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid #eef0f5; background: #fafbfd; font: 500 13px/1 var(--fm); color: var(--faint); }
.rts-top > i { width: 10px; height: 10px; border-radius: 50%; background: #e4e7ee; }
.rts-top > span { margin-left: 10px; }
.rts-top b { font-weight: 500; color: var(--muted); }
.rts-top em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--fb); font-style: normal; letter-spacing: 1.3px; text-transform: uppercase; }
.rts-top em i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; }
.rts-pause { margin-left: 10px; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.rts-pause svg { width: 12px; height: 12px; }
.rts-body { display: grid; grid-template-columns: 168px 1fr; }
.rts-side { border-right: 1px solid #eef0f5; background: #fbfbfd; padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
.rts-brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; font: 700 14px/1 var(--fb); }
.rts-brand i { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #ff8b1f, #ff5d00); }
.rts-nav { padding: 8px 10px; border-radius: 9px; font: 500 13px/1.2 var(--fm); color: #4a5568; transition: background .25s, color .25s; }
.rts-nav.is-on { background: #eef3ff; color: var(--blue); font-family: var(--fs); }
.rts-nav.is-dim { color: #b3bac6; }

/* views share one grid cell, so the window keeps the tallest view's height */
.rts-main { position: relative; display: grid; background: var(--soft); overflow: hidden; min-width: 0; }
.rts-view { grid-area: 1 / 1; padding: 16px 18px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.rts[data-view="table"] .rts-view--table, .rts[data-view="comp"] .rts-view--comp, .rts[data-view="local"] .rts-view--local { opacity: 1; visibility: visible; transition: opacity .4s ease; }

.rts-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rts-proj { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1 var(--fb); margin-right: 4px; }
.rts-proj i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #c98b4b, #7a4a22); }
.rts-title { font: 700 16px/1 var(--fb); margin-right: 4px; }
.rts-pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; border: 1px solid #e3e7ee; background: #fff; font: 600 11.5px/1 var(--fs); color: #3c4657; }
.rts-fresh { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--fs); color: var(--green-ink); }
.rts-fresh i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; }

/* ---------- KPIs + table ---------- */
.rts-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rts-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.rts-kpi small { display: block; font: 700 10px/1.2 var(--fb); letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rts-kpi b { display: block; margin-top: 7px; font: 800 25px/1 var(--fb); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rts-kpi span { display: inline-block; margin-top: 7px; font: 600 11.5px/1.2 var(--fs); color: var(--muted); }
.rts-kpi span.up { color: var(--green); }
.rts-kpi--hero { background: linear-gradient(135deg, #1c2857, #3346b8); border-color: transparent; color: #fff; }
.rts-kpi--hero small { color: rgba(255,255,255,.72); } .rts-kpi--hero span { color: #b9f3d4; }

.rts-table { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rts-tr { display: grid; grid-template-columns: 1.55fr 50px 60px 1.25fr 54px 78px; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #f4f5f9; font-size: 13px; transition: background .3s, box-shadow .3s; }
.rts-th { padding-block: 8px; font: 700 10px/1 var(--fb); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); background: #fbfbfd; }
.rts-kw { font: 600 13px/1.3 var(--fs); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rts-pos { font: 800 14.5px/1 var(--fb); font-variant-numeric: tabular-nums; }
.rts-chg { font: 700 12px/1 var(--fb); } .rts-chg.up { color: var(--green); } .rts-chg.down { color: var(--red); }
.rts-c-trend svg { width: 70px; height: 22px; display: block; }
.rts-ks { display: inline-block; min-width: 34px; text-align: center; font: 800 12px/1 var(--fb); padding: 5px 6px; border-radius: 7px; }
.rts-ks.good { background: #eafaf1; color: var(--green-ink); } .rts-ks.mid { background: #fff4e2; color: #b35400; } .rts-ks.low { background: #fdecec; color: #c2413a; }
.rts-tr.is-pick.is-sel { background: #fff7ef; box-shadow: inset 3px 0 0 var(--orange); }
.rts-tr.is-pick.is-hover { background: #fffaf5; }

.rts-feats { display: flex; gap: 5px; flex-wrap: wrap; }
.rts-f { --c: #8a93a5; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 7px; border: 1.5px solid var(--c); color: var(--c); font: 800 11px/1 var(--fb); font-style: normal; background: #fff; }
.rts-f.is-own { background: var(--c); color: #fff; }
.rts-f--aio { --c: #6941c6; } .rts-f--paa { --c: #0d9488; } .rts-f--loc { --c: #059669; } .rts-f--vid { --c: #dc2626; } .rts-f--shop { --c: #ea580c; } .rts-f--snip { --c: #2563eb; }
.rts-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 9px 14px; font-size: 11.5px; color: var(--faint); }
.rts-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rts-legend .rts-f { width: 18px; height: 18px; font-size: 9px; border-radius: 6px; }

/* ---------- keyword drawer ---------- */
.rts-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: 46%; min-width: 320px; background: #fff; border-left: 1px solid var(--line); box-shadow: -24px 0 48px -28px rgba(11,21,38,.35); transform: translateX(104%); transition: transform .4s cubic-bezier(.2,.8,.2,1); display: grid; grid-template-rows: auto 1fr; }
.rts[data-drawer="score"] .rts-drawer, .rts[data-drawer="brief"] .rts-drawer { transform: none; }
.rts-dh { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #f0f2f7; }
.rts-dh b { font: 700 15px/1.2 var(--fb); }
.rts-x { margin-left: auto; color: var(--faint); font-size: 13px; }
.rts-dpage { grid-area: 2 / 1; padding: 14px 16px; display: grid; gap: 12px; align-content: start; opacity: 0; visibility: hidden; transform: translateX(16px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.rts[data-drawer="score"] .rts-dpage--score, .rts[data-drawer="brief"] .rts-dpage--brief { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .1s, transform .35s ease .1s; }
.rts-dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rts-dstats span { border: 1px solid #f0f2f7; border-radius: 10px; padding: 8px 9px; }
.rts-dstats small { display: block; font: 700 9px/1.2 var(--fb); letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
.rts-dstats b { display: block; margin-top: 5px; font: 800 15px/1 var(--fb); }
.rts-score { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: #fffaf3; border: 1px solid #ffe2c2; }
.rts-score svg { width: 78px; height: 78px; flex: none; }
.rts-score__val { transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1) .15s; }
.rts-score b { display: block; font: 800 30px/1 var(--fb); }
.rts-score small { display: block; margin-top: 3px; font: 700 11px/1 var(--fb); letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
.rts-score em { display: block; margin-top: 6px; font: 700 12.5px/1.3 var(--fb); font-style: normal; color: #b35400; }
.rts-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rts-issues li { display: flex; gap: 9px; align-items: center; font: 500 12.5px/1.35 var(--fm); color: var(--ink2); }
.rts-issues span { flex: none; min-width: 58px; text-align: center; font: 700 10.5px/1 var(--fb); padding: 5px 7px; border-radius: 999px; }
.hi { background: #fdecec; color: #c2413a; } .md { background: #fff4e2; color: #b35400; } .ok { background: #eafaf1; color: var(--green-ink); }
.rts-btn { justify-self: start; padding: 10px 14px; border-radius: 10px; background: var(--orange); color: #fff; font: 700 13px/1 var(--fb); transition: transform .15s; }
.rts-btn.is-press { transform: scale(.95); }
.rts-bars { display: grid; gap: 9px; }
.rts-bars span { display: flex; justify-content: space-between; font: 600 12.5px/1 var(--fs); color: var(--ink2); margin-bottom: 5px; }
.rts-bars b { font-family: var(--fb); }
.rts-bars i { display: block; height: 7px; border-radius: 4px; background: #eef0f5; overflow: hidden; }
.rts-bars em { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #ff8b1f, #ff5d00); transition: width .6s cubic-bezier(.2,.8,.2,1) .1s; }
.rts-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.rts-terms small, .rts-sov > small, .rts-race__head small, .rts-dist > small { width: 100%; font: 700 10px/1 var(--fb); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.rts-terms em { font-style: normal; font: 600 12px/1 var(--fs); padding: 6px 9px; border-radius: 999px; background: #eafaf1; color: var(--green-ink); }
.rts-rec { position: relative; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #fff7ec, #fff); border: 1.5px solid #ffc98f; display: grid; gap: 7px; transition: box-shadow .5s ease, border-color .5s ease; }
.rts-rec__tags { display: flex; gap: 6px; }
.rts-rec__tags span { font: 700 10.5px/1 var(--fb); padding: 5px 8px; border-radius: 999px; background: #f1f3f8; color: var(--muted); }
.rts-rec__tags span.hi { background: #fdecec; color: #c2413a; }
.rts-rec > b { font: 800 14px/1.2 var(--fb); }
.rts-rec p { font-size: 13px; line-height: 1.5; color: var(--ink2); }
.rts-rec__then { font: 700 12px/1.3 var(--fb); color: var(--blue); }
.rts.is-zoom .rts-rec { border-color: var(--orange); box-shadow: 0 0 0 5px rgba(255,106,0,.14), 0 18px 40px -18px rgba(255,106,0,.55); }

/* ---------- you vs competitors ---------- */
.rts-comp { display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: start; }
.rts-sov, .rts-race { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.rts-sov { display: grid; gap: 10px; justify-items: center; }
.rts-sov > small { text-align: left; }
.rts-sov__ring { position: relative; width: 132px; height: 132px; }
.rts-sov__ring svg { width: 132px; height: 132px; display: block; }
.rts-sov__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rts-sov__mid b { font: 800 24px/1 var(--fb); color: var(--orange); }
.rts-sov__mid span { font: 600 11px/1.3 var(--fs); color: var(--faint); }
.rts-sov ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.rts-sov li { display: flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--fs); color: var(--ink2); }
.rts-sov li i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rts-sov li b { margin-left: auto; font-family: var(--fb); }
.rts-race { display: grid; gap: 10px; }
.rts-race__head { display: grid; grid-template-columns: 150px 1fr 1fr 1fr; align-items: end; font: 700 10px/1 var(--fb); color: var(--faint); }
.rts-race__head small { width: auto; }
.rts-race__head span:nth-child(2) { text-align: left; } .rts-race__head span:nth-child(3) { text-align: center; } .rts-race__head span:nth-child(4) { text-align: right; }
.rts-race__row { display: grid; grid-template-columns: 150px 1fr; gap: 0; align-items: center; min-height: 30px; }
.rts-race__kw { font: 600 12.5px/1.25 var(--fs); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
.rts-race__track { position: relative; height: 26px; border-radius: 999px; background: linear-gradient(90deg, #eafaf1 0 15%, #f4f5f9 15% 100%); }
.rts-dot { position: absolute; top: 50%; left: var(--x); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(11,21,38,.25); transition: left .7s cubic-bezier(.2,.8,.2,1); }
.rts-dot.is-you { z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; font: 800 10.5px/1 var(--fb); color: #fff; font-style: normal; }
.rts-h2h { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 8px; border-top: 1px solid #f0f2f7; font-size: 12px; color: var(--muted); }
.rts-h2h span { display: inline-flex; align-items: center; gap: 6px; }
.rts-h2h i { width: 9px; height: 9px; border-radius: 3px; }
.rts-h2h b { color: var(--ink); font-family: var(--fb); }

/* ---------- local grid (approved design) ---------- */
.rts-local { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: stretch; }
.rtd-map { position: relative; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(115deg, #edf1ec 0%, #e9eef3 55%, #eef0ea 100%); padding: 14px; display: grid; place-items: center; min-height: 290px; }
.rtd-pins { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(7, 30px); gap: 8px; }
.rts-pin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(11,21,38,.25); display: grid; place-items: center; font: 800 11px/1 var(--fb); color: #fff; }
.rts-pin.is-you { background: var(--blue); box-shadow: 0 0 0 5px rgba(47,95,224,.25), 0 4px 10px rgba(11,21,38,.3); font-size: 8px; letter-spacing: .4px; }
.rtd-none { background: #b8bfcc !important; }
/* Distance rings: square like the grid (points 1 km apart). Each line runs
   through the gap between pin rows: pitch 38px -> 114 / 190 / 274px. */
.rtd-map .rtd-ring { position: absolute; left: 50%; top: 50%; z-index: 1; border: 2px dashed rgba(47,95,224,.4); border-radius: 14px; transform: translate(-50%, -50%); }
.rtd-map .rtd-ring.r1 { width: 114px; height: 114px; } .rtd-map .rtd-ring.r2 { width: 190px; height: 190px; } .rtd-map .rtd-ring.r3 { width: 274px; height: 274px; }
.rtd-rlabel { --h: 57px; position: absolute; left: 50%; top: calc(50% - var(--h)); z-index: 3; transform: translate(-50%, -50%); padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; font: 700 9.5px/1.45 var(--fb); white-space: nowrap; box-shadow: 0 2px 6px rgba(11,21,38,.2); }
.rtd-rlabel.r2 { --h: 95px; } .rtd-rlabel.r3 { --h: 137px; }
.rts-dist { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.rts-dist__big { font: 800 32px/1 var(--fb); }
.rts-dist__sub { font-size: 12.5px; color: var(--muted); }
.rts-dist__row { display: grid; grid-template-columns: 86px 1fr 58px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #f4f5f9; font-size: 13px; }
.rts-dist__row i { display: block; height: 7px; border-radius: 4px; background: #eef0f5; overflow: hidden; }
.rts-dist__row em { display: block; height: 100%; width: var(--w); border-radius: 4px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.rts-dist__row b { text-align: right; font: 700 12px/1 var(--fb); }
.rts-dist p { font-size: 12px; color: var(--faint); line-height: 1.45; }

/* ---------- entrance motion (only once JS marks the page) ---------- */
.rts-js .rts-play .rts-tr:not(.rts-th) { animation: rtsRow .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.08s + var(--i, 0) * .05s); }
.rts-js .rts-play .rts-f { animation: rtsPop .3s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.3s + var(--i, 0) * .05s); }
.rts-js .rts-play .rts-kpi { animation: rtsUp .45s ease both; }
.rts-js .rts-play .rts-kpi:nth-child(2) { animation-delay: .08s; } .rts-js .rts-play .rts-kpi:nth-child(3) { animation-delay: .16s; } .rts-js .rts-play .rts-kpi:nth-child(4) { animation-delay: .24s; }
.rts-js .rts:not([data-drawer="score"]):not([data-drawer="brief"]) .rts-score__val { stroke-dashoffset: 263.9; }
.rts-js .rts:not([data-drawer="brief"]) .rts-bars em { width: 0; }
.rts-js .rts[data-drawer="score"] .rts-issues li { animation: rtsRow .4s ease both; animation-delay: calc(.25s + var(--i, 0) * .08s); }
.rts-js .rts[data-drawer="brief"] .rts-terms em { animation: rtsPop .3s cubic-bezier(.3,1.6,.5,1) both; animation-delay: .25s; }
.rts-js .rts:not([data-view="comp"]) .rts-dot { left: 0; }
.rts-js .rts[data-view="comp"] .rts-sov__seg { animation: rtsSeg .5s ease both; animation-delay: calc(.05s + var(--i, 0) * .08s); }
.rts-js .rts:not([data-view="local"]) .rts-dist__row em { width: 0; }
.rts-js .rts[data-view="local"] .rts-pin { animation: rtsPop .35s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.05s + var(--i, 0) * .012s); }
.rts-js .rts[data-view="local"] .rtd-ring { animation: rtsRingIn .6s ease both; }
@keyframes rtsRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rtsUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rtsPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes rtsSeg { from { opacity: 0; } to { opacity: 1; } }
@keyframes rtsRingIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- cursor ---------- */
.rts-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 26px; height: 26px; pointer-events: none; opacity: 0; transform: translate(70%, 60%); transition: transform .5s cubic-bezier(.45,.05,.25,1), opacity .25s ease; filter: drop-shadow(0 3px 6px rgba(11,21,38,.35)); }
.rts-cursor svg { width: 26px; height: 26px; display: block; }
.rts-cursor i { position: absolute; left: 2px; top: 0; width: 34px; height: 34px; margin: -16px 0 0 -16px; border-radius: 50%; background: rgba(255,106,0,.35); transform: scale(0); opacity: 0; }
.rts-cursor.is-on { opacity: 1; }
.rts-cursor.is-click i { animation: rtsClick .45s ease-out; }
@keyframes rtsClick { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- chapter bar + caption ---------- */
.rts-chapters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.rts-ch { text-align: left; padding: 10px 12px 9px; border-radius: 12px; border: 1px solid #dfe3ea; background: #fff; cursor: pointer; font: 600 13px/1.25 var(--fs); color: var(--muted); transition: border-color .2s, color .2s, box-shadow .2s; }
.rts-ch > span { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 6px; border-radius: 6px; background: #f1f3f8; font: 800 10.5px/1 var(--fb); vertical-align: -4px; }
.rts-ch[aria-selected="true"] { border-color: #ffb27a; color: var(--ink); box-shadow: 0 10px 24px -16px rgba(255,106,0,.7); }
.rts-ch[aria-selected="true"] > span { background: var(--orange); color: #fff; }
.rts-ch > i { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: #edf0f5; overflow: hidden; }
.rts-ch > i em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8b1f, #ff5d00); }
.rts-ch.is-run > i em { animation: rtsProg var(--dur, 5s) linear forwards; }
.rts-ch.is-done > i em { width: 100%; }
.rts.is-paused .rts-ch.is-run > i em { animation-play-state: paused; }
@keyframes rtsProg { to { width: 100%; } }
.rts-cap { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 16px; }
.rts-cap p { max-width: 640px; font: 500 15.5px/1.5 var(--fm); color: #3c4657; }
.rts-cap a { flex: none; padding: 13px 20px; border-radius: 11px; background: var(--ink); color: #fff; text-decoration: none; font: 700 15px/1 var(--fb); }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .rts-body { grid-template-columns: 1fr; } .rts-side { display: none; }
  .rts-chapters { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .rts-view { padding: 12px; gap: 10px; }
  .rts-fresh { width: 100%; margin-left: 0; }
  .rts-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rts-kpi b { font-size: 21px; }
  .rts-tr { grid-template-columns: 1fr 34px 76px 40px; gap: 8px; padding: 8px 10px; }
  .rts-c-chg, .rts-c-trend { display: none; }
  .rts-f { width: 19px; height: 19px; font-size: 9.5px; border-radius: 6px; }
  .rts-drawer { width: 100%; min-width: 0; }
  .rts-dstats { grid-template-columns: 1fr 1fr; }
  .rts-comp { grid-template-columns: 1fr; }
  .rts-sov { grid-template-columns: 112px 1fr; justify-items: stretch; align-items: center; }
  .rts-sov > small { grid-column: 1 / -1; }
  .rts-sov__ring, .rts-sov__ring svg { width: 112px; height: 112px; }
  .rts-race__head, .rts-race__row { grid-template-columns: 112px 1fr; }
  .rts-race__head span:nth-child(3), .rts-race__head span:nth-child(4) { display: none; }
  .rts-local { grid-template-columns: 1fr; }
  .rtd-map { min-height: 0; padding: 22px 8px 12px; }
  .rtd-pins { grid-template-columns: repeat(7, 26px); gap: 6px; }
  .rts-pin { width: 26px; height: 26px; font-size: 10px; }
  /* pitch 32px (26 + 6): rings 96 / 160 / 230px */
  .rtd-map .rtd-ring.r1 { width: 96px; height: 96px; } .rtd-map .rtd-ring.r2 { width: 160px; height: 160px; } .rtd-map .rtd-ring.r3 { width: 230px; height: 230px; }
  .rtd-rlabel { --h: 48px; } .rtd-rlabel.r2 { --h: 80px; } .rtd-rlabel.r3 { --h: 115px; }
  .rts-dist p { display: none; }
  .rts-chapters { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -18px; padding: 0 18px 4px; }
  .rts-chapters::-webkit-scrollbar { display: none; }
  .rts-ch { flex: 0 0 auto; scroll-snap-align: start; }
  .rts-cap { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .rts *, .rts *::before { animation: none !important; transition: none !important; }
  .rts-cursor { display: none; }
}