/* REBOOT, the app (fiona/SPEC.md section 9). Every class starts with "rb-", every token "--rb-", everything is scoped
   to .rb-root. The host declares the fonts (Instrument Serif normal + italic, Manrope variable) and sets --rb-w / --rb-h
   on the mount; app.js writes the geometry table (--rb-tab, --rb-hdr, --rb-dbY, ...) next to them, so the rects the
   API returns and the boxes drawn here are the same numbers. Light only: her home gym at 7 am, one plum.
   Motion: transform, opacity, clip-path and stroke-dashoffset only. */

.rb-root {
  --rb-ground: #F5F0E8; --rb-s1: #FFFDF9; --rb-s2: #ECE4D8; --rb-s3: #DCD2C4;
  --rb-hair: rgba(34, 22, 31, .12); --rb-hair2: rgba(34, 22, 31, .18);
  --rb-text: #22161F; --rb-muted: #6E6168; --rb-faint: #A79BA1;
  --rb-plum: #7B2D63; --rb-plum-deep: #5E2049; --rb-plum-press: #6A2555; --rb-plum-wash: #EFE3EB; --rb-sage: #7F948B;
  --rb-card-sh: 0 1px 1px rgba(50, 25, 40, .05), 0 12px 28px -18px rgba(50, 25, 40, .32);
  --rb-shadow: 0 18px 40px -18px rgba(50, 25, 40, .28);
  --rb-ios: cubic-bezier(.32, .72, 0, 1); --rb-out: cubic-bezier(.22, 1, .36, 1); --rb-drop: cubic-bezier(.2, 1.4, .4, 1);
  --rb-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --rb-sans: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rb-hl: 1px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--rb-w, 393px); height: var(--rb-h, 852px);
  background: var(--rb-ground); color: var(--rb-text);
  font: 500 17px/1.3 var(--rb-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
@media (min-resolution: 2dppx) { .rb-root { --rb-hl: .5px; } }
.rb-root :where(*), .rb-root :where(*)::before, .rb-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.rb-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.rb-root :where(h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; font: inherit; list-style: none; }
.rb-root :where(img, video, svg) { display: block; max-width: none; }
.rb-root :where(img) { -webkit-user-drag: none; }
.rb-root :where(b, strong) { font-weight: inherit; }
.rb-root :where(i, em) { font-style: normal; }
.rb-story { pointer-events: none; }
.rb-desk.rb-live :where(button) { cursor: pointer; }
.rb-root :focus { outline: none; }
.rb-root :focus-visible { outline: 2px solid var(--rb-plum); outline-offset: 3px; border-radius: 12px; }
.rb-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ shared type and parts */
.rb-lt { display: block; font: 400 32px/36px var(--rb-serif); letter-spacing: -.01em; color: var(--rb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-ov { display: block; font: 700 11px/14px var(--rb-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rb-muted); }
.rb-meta { display: block; font: 500 15px/20px var(--rb-sans); color: var(--rb-muted); }
.rb-her { font: italic 400 20px/1.2 var(--rb-serif); color: var(--rb-text); letter-spacing: 0; }
.rb-sh { font: 700 17px/22px var(--rb-sans); color: var(--rb-text); }
.rb-card { position: relative; background: var(--rb-s1); border-radius: 20px; box-shadow: var(--rb-card-sh); }
.rb-draft { display: inline-flex; align-items: center; height: 18px; padding: 1px 6px 0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rb-faint); font: 700 10px/1 var(--rb-sans); letter-spacing: .1em; color: var(--rb-muted); vertical-align: middle; white-space: nowrap; flex: none; font-style: normal; }
.rb-src { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/14px var(--rb-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--rb-muted); white-space: nowrap; font-style: normal; }
.rb-src__ic { width: 12px; height: 12px; flex: none; }
.rb-calc { font: 600 11px/1 var(--rb-sans); letter-spacing: .02em; color: var(--rb-muted); font-style: normal; white-space: nowrap; }
.rb-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--rb-s2); font: 600 13px/1 var(--rb-sans); color: var(--rb-text); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.rb-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--rb-s3); }
.rb-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 22, 31, .08); }
.rb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rb-icon { display: block; }
.rb-wm { display: inline-block; font: 400 46px/48px var(--rb-serif); letter-spacing: .06em; padding-left: .06em; text-transform: uppercase; color: var(--rb-text); white-space: nowrap; }

/* the check: a ring, its ink disc fills, the tick draws */
.rb-ck { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rb-s3); }
.rb-ck__f { position: absolute; inset: 0; border-radius: 50%; background: var(--rb-text); opacity: 0; }
.rb-ck svg { position: relative; width: 14px; height: 14px; color: var(--rb-s1); }
.rb-ck__p { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rb-ic-check { width: 14px; height: 14px; }

/* pills: plum is the primary action; quiet and round buttons are secondary */
.rb-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 26px; background: var(--rb-plum); color: var(--rb-s1); font: 700 17px/1 var(--rb-sans); letter-spacing: -.005em; box-shadow: 0 10px 22px -14px rgba(94, 32, 73, .75); transition: transform .16s var(--rb-out), background-color .16s linear; white-space: nowrap; }
.rb-pill svg { width: 18px; height: 18px; flex: none; }
.rb-pill.is-press { transform: scale(.97); background: var(--rb-plum-press); }
.rb-live .rb-pill:active { transform: scale(.97); background: var(--rb-plum-press); }
.rb-pill.is-off { background: var(--rb-s3); color: var(--rb-muted); box-shadow: none; }
.rb-live .rb-pill.is-off { pointer-events: none; }
.rb-quiet { display: inline-flex; align-items: center; justify-content: center; height: 52px; border-radius: 26px; background: var(--rb-s2); color: var(--rb-text); font: 700 16px/1 var(--rb-sans); white-space: nowrap; transition: transform .16s var(--rb-out), background-color .16s linear; }
.rb-live .rb-quiet:active { transform: scale(.97); background: var(--rb-s3); }
.rb-quiet[aria-disabled="true"] { color: var(--rb-faint); }
.rb-rb { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--rb-s2); color: var(--rb-text); transition: transform .16s var(--rb-out), background-color .16s linear; }
.rb-rb--s { width: 36px; height: 36px; }
.rb-rb svg { width: 18px; height: 18px; }
.rb-live .rb-rb:active { transform: scale(.94); background: var(--rb-s3); }
/* the hint: a soft plum pulse around a control, live, until her first touch (static under the OS setting) */
.rb-hint { position: absolute; inset: -5px; border-radius: 31px; box-shadow: 0 0 0 2px var(--rb-plum); opacity: 0; pointer-events: none; }
.is-hint > .rb-hint { animation: rb-hint 1.6s var(--rb-out) infinite; }
@keyframes rb-hint { 0% { opacity: .6; transform: scale(.97); } 70% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.1); } }
.rb-osrm .is-hint > .rb-hint, .rb-rm .is-hint > .rb-hint { animation: none; opacity: .35; transform: none; }

/* ------------------------------------------------------------------ the glass, layers, chrome */
.rb-glass { position: absolute; inset: 0; overflow: hidden; }
.rb-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--rb-ground); contain: layout style size; }
.rb-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.rb-layer.is-moving { box-shadow: -14px 0 38px -10px rgba(50, 25, 40, .24); }
.rb-l-set, .rb-l-row, .rb-l-hills { z-index: 3; }
.rb-l-rest, .rb-l-coach, .rb-l-reel { z-index: 7; background: transparent; }
.rb-l-proof { z-index: 8; background: transparent; }
.rb-l-splash { z-index: 9; background: transparent; }
.rb-bd { position: absolute; inset: 0; z-index: 6; background: #22161F; opacity: 0; pointer-events: none; }
.rb-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--rb-text); transition: color .2s linear; }
.rb-status__t { position: absolute; left: 0; width: 134px; top: 18px; text-align: center; font: 700 17px/1 var(--rb-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rb-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.rb-status.is-light { color: var(--rb-s1); }
.rb-status.is-light .rb-status__t, .rb-status.is-light .rb-status__r { filter: drop-shadow(0 1px 2px rgba(34, 22, 31, .45)); }
.rb-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(34, 22, 31, .86); z-index: 20; pointer-events: none; }
.rb-full .rb-status, .rb-full .rb-homeind { display: none; }
.rb-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 5; display: flex; padding: 0 6px 34px; background: rgba(245, 240, 232, .92); box-shadow: inset 0 var(--rb-hl) 0 var(--rb-hair2); }
.rb-tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; pointer-events: none; background: linear-gradient(180deg, rgba(245, 240, 232, 0), rgba(245, 240, 232, .7)); }
.rb-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 7px; color: var(--rb-muted); font: 600 11px/1.2 var(--rb-sans); letter-spacing: .01em; }
.rb-tab svg { width: 26px; height: 26px; }
.rb-tab.is-on { color: var(--rb-text); }
.rb-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(34, 22, 31, .16); box-shadow: 0 0 0 1.5px rgba(255, 253, 249, .95), 0 6px 18px rgba(50, 25, 40, .3); }
.rb-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(34, 22, 31, .55), inset 0 0 0 1px rgba(255, 253, 249, .6); }
.rb-vs { position: relative; display: block; overflow: hidden; background: var(--rb-s3); }
.rb-vs__p, .rb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rb-video { opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.rb-vs.is-playing .rb-video { opacity: 1; }
.rb-scr { position: absolute; inset: 0; }
.rb-hd { position: absolute; left: 16px; right: 16px; top: var(--rb-ov, 64px); }
.rb-hd .rb-lt { margin-top: 4px; }
.rb-hd .rb-meta { margin-top: 6px; }
.rb-back { position: absolute; left: 16px; top: 58px; z-index: 4; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 253, 249, .92); color: var(--rb-text); box-shadow: 0 6px 16px -8px rgba(34, 22, 31, .45); }
.rb-back svg { width: 18px; height: 18px; margin-left: -1px; }
.rb-back--ink { background: var(--rb-s1); box-shadow: inset 0 0 0 1px var(--rb-hair), 0 6px 16px -10px rgba(34, 22, 31, .3); }

/* thumbnails: her footage, or our pictogram on --rb-s2 */
.rb-th { position: relative; display: block; flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--rb-s2); }
.rb-th--s { width: 44px; height: 44px; border-radius: 11px; }
.rb-th--pic { color: var(--rb-text); }
.rb-pic { display: block; width: 100%; height: 100%; padding: 3px; color: var(--rb-text); }
.rb-th--opt { display: grid; place-items: center; color: var(--rb-muted); }
.rb-th--opt svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ home (9.4.1) */
.rb-hm { position: absolute; inset: 0; }
.rb-hm__wall { position: absolute; inset: 0; background: radial-gradient(120% 70% at 88% 6%, rgba(255, 250, 242, .75) 0%, rgba(255, 250, 242, 0) 60%), linear-gradient(180deg, #F5F0E8 0%, #E6E4DB 48%, #CCD0C8 100%); }
.rb-hm__fg { position: absolute; inset: 0; }
.rb-hm__app, .rb-hm__rb { position: absolute; width: 60px; height: 82px; }
.rb-hm__sq { position: absolute; left: 0; top: 0; width: 60px; height: 60px; border-radius: 13.5px; background: rgba(255, 253, 249, .55); box-shadow: inset 0 0 0 1px rgba(34, 22, 31, .045); }
.rb-hm__lb { position: absolute; left: 50%; top: 69px; height: 6px; border-radius: 3px; background: var(--rb-s3); transform: translateX(-50%); opacity: .9; }
.rb-hm__ib { position: absolute; left: 0; top: 0; width: 60px; height: 60px; border-radius: 13.5px; transform-origin: 50% 50%; }
.rb-hm__ib .rb-icon { width: 60px; height: 60px; }
.rb-hm__name { position: absolute; left: 50%; top: 65px; transform: translateX(-50%); font: 500 12px/14px var(--rb-sans); color: var(--rb-text); white-space: nowrap; letter-spacing: 0; }
.rb-hm__dots { position: absolute; left: 0; right: 0; top: var(--rb-hmDots); display: flex; justify-content: center; gap: 8px; }
.rb-hm__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(34, 22, 31, .2); }
.rb-hm__dots i.is-on { background: rgba(34, 22, 31, .6); }
.rb-hm__dock { position: absolute; left: 0; right: 0; top: var(--rb-hmDock); height: 96px; }
.rb-hm__dk { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; border-radius: 32px; background: rgba(255, 253, 249, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.rb-hm__app--dock { height: 60px; }

/* ------------------------------------------------------------------ splash (9.4.2) */
.rb-sp, .rb-sp__win, .rb-sp__in { position: absolute; inset: 0; }
.rb-sp__in { transform-origin: 0 0; }
.rb-sp__ground { position: absolute; inset: 0; background: radial-gradient(110% 60% at 85% 0%, rgba(255, 250, 242, .8) 0%, rgba(255, 250, 242, 0) 62%), var(--rb-ground); }
.rb-sp__icon { position: absolute; left: calc(50% - 48px); top: calc(var(--rb-spCY) - 48px); width: 96px; height: 96px; transform-origin: 50% 50%; }
.rb-sp__icon .rb-icon { position: relative; width: 96px; height: 96px; }
.rb-sp__sh { position: absolute; inset: 0; border-radius: 22.5%; box-shadow: 0 14px 22px rgba(94, 32, 73, .22); }
.rb-gl-s { transform-box: view-box; transform-origin: 50% 50%; }
.rb-gl-s circle, .rb-gl-s path, .rb-icon__g circle, .rb-icon__g path, .rb-gl-l circle, .rb-gl-l path { stroke-dasharray: 1; }
.rb-gl-s circle, .rb-gl-s path { stroke-dashoffset: 1; }
.rb-sp__wm, .rb-sp__by, .rb-sp__lock { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.rb-sp__wm { top: var(--rb-spWord); }
.rb-sp__wmb { display: block; overflow: hidden; transform-origin: 0 0; }
.rb-sp__wmi { display: block; }
.rb-sp__by { top: var(--rb-spBy); }
.rb-sp__byb { display: block; transform-origin: 0 0; }
.rb-sp__byi { display: block; font: 600 11px/14px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; }
.rb-sp__lock { top: var(--rb-spLock); }
.rb-sp__locki { display: block; font: 700 11px/14px var(--rb-sans); letter-spacing: .12em; padding-left: .12em; text-transform: uppercase; color: var(--rb-muted); white-space: nowrap; }

/* ------------------------------------------------------------------ welcome (9.4.3) */
.rb-we { position: absolute; inset: 0; background: radial-gradient(90% 50% at 92% 0%, rgba(255, 250, 242, .7) 0%, rgba(255, 250, 242, 0) 64%); }
.rb-brand { position: absolute; left: 16px; top: var(--rb-weBrand); z-index: 2; display: flex; align-items: center; gap: 10px; }
.rb-brand__ic { display: block; width: 32px; height: 32px; }
.rb-brand__ic .rb-icon { width: 32px; height: 32px; }
.rb-brand__t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rb-brand__wm { font-size: 22px; line-height: 23px; }
.rb-brand__by { display: block; font: 600 11px/14px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; }
.rb-we__hero { position: absolute; width: var(--rb-weHeroD); height: var(--rb-weHeroD); left: calc(100% - var(--rb-weHeroD) * .7); top: calc(var(--rb-weHeroCY) - var(--rb-weHeroD) / 2); border-radius: 50%; box-shadow: 0 34px 60px -30px rgba(94, 32, 73, .55); }
.rb-plate { display: block; width: 100%; height: 100%; overflow: visible; }
.rb-plate__d { fill: var(--rb-plum); }
.rb-plate__r { fill: none; stroke: rgba(255, 253, 249, .78); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rb-plate__h { fill: var(--rb-ground); stroke: rgba(94, 32, 73, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rb-plate.is-empty .rb-plate__d { fill: var(--rb-s2); }
.rb-plate.is-empty .rb-plate__r { stroke: var(--rb-s3); }
.rb-we__light { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 26%, rgba(255, 250, 242, .3) 0%, rgba(255, 250, 242, 0) 46%), radial-gradient(circle at 70% 82%, rgba(34, 22, 31, .22) 0%, rgba(34, 22, 31, 0) 52%); pointer-events: none; }
.rb-we__line { position: absolute; left: 16px; right: 16px; top: var(--rb-weLine); }
.rb-we__q { font-size: 30px; line-height: 34px; }
.rb-we__line .rb-src { margin-top: 10px; }
.rb-we__card { position: absolute; left: 16px; right: 16px; top: var(--rb-weCard); padding: 18px 18px 16px; }
.rb-we__ct { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rb-we__ct b { font: 700 17px/22px var(--rb-sans); white-space: nowrap; }
.rb-we__wk { font: 600 13px/18px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-we__bar { display: flex; gap: 4px; margin: 16px 0 14px; height: 10px; }
.rb-we__seg { position: relative; flex: 1; border-radius: 5px; background: var(--rb-s2); overflow: hidden; }
.rb-we__seg b { position: absolute; inset: 0; border-radius: 5px; background: var(--rb-plum); transform-origin: 0 50%; transform: scaleX(0); }
.rb-we__seg.is-cur { box-shadow: inset 0 0 0 1.5px var(--rb-plum); background: var(--rb-plum-wash); }
.rb-we__meta { font: 500 15px/20px var(--rb-sans); color: var(--rb-muted); }
.rb-we__cta { position: absolute; left: 16px; right: 16px; top: var(--rb-weCta); }

/* ------------------------------------------------------------------ today (9.4.4) */
.rb-td__ring { position: absolute; right: 0; top: 8px; width: 46px; height: 46px; }
.rb-segring { display: block; }
.rb-sr__s { stroke: var(--rb-s2); }
.rb-sr__a { stroke: var(--rb-plum); }
.rb-sr__h { fill: none; stroke: var(--rb-s3); stroke-width: 2; }
.rb-td .rb-lt { padding-right: 56px; }
.rb-td__list { position: absolute; left: 16px; right: 16px; top: var(--rb-tdList); overflow: hidden; }
.rb-exr { position: relative; height: var(--rb-tdRow); }
.rb-exr + .rb-exr::before { content: ""; position: absolute; left: 76px; right: 14px; top: 0; height: var(--rb-hl); background: var(--rb-hair2); }
.rb-exr__b { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 0 14px 0 12px; text-align: left; transition: background-color .14s linear; }
.rb-exr__b.is-press { background: rgba(220, 210, 196, .45); }
.rb-live .rb-exr__b:active { background: rgba(220, 210, 196, .45); }
.rb-exr__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rb-exr__n { display: block; font: 400 21px/24px var(--rb-serif); color: var(--rb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-exr__m { display: block; font: 500 14px/18px var(--rb-sans); color: var(--rb-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-exr__dots { display: none; gap: 4px; flex: none; }
.rb-exr.is-cur .rb-exr__dots { display: flex; }
.rb-exr__dots i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rb-plum); }
.rb-exr__dots i.is-on { background: var(--rb-plum); }
.rb-exr.is-cur .rb-exr__ck { display: none; }
.rb-td__hills { position: absolute; left: 16px; right: 16px; top: var(--rb-tdHills); height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 14px; text-align: left; }
.rb-td__hi { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--rb-plum-wash); color: var(--rb-plum); }
.rb-td__hi svg { width: 22px; height: 22px; }
.rb-td__ht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-td__ht b { font: 700 17px/22px var(--rb-sans); }
.rb-td__hn { font: 500 14px/18px var(--rb-sans); color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-td__hd { display: flex; gap: 4px; flex: none; }
.rb-td__hd i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rb-s3); }
.rb-td__hd i.is-on { background: var(--rb-text); box-shadow: none; }
.rb-td__hills > svg:last-child { width: 14px; height: 14px; color: var(--rb-faint); flex: none; }

/* ------------------------------------------------------------------ set and row (9.4.5, 9.4.11) */
.rb-exs { position: absolute; inset: 0; }
.rb-hdr { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--rb-hdr) + 24px); overflow: hidden; background: #2E2529; }
.rb-hdr__m, .rb-hdr__vs { position: absolute; inset: 0; }
.rb-hdr__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 22, 31, .46) 0%, rgba(34, 22, 31, 0) 32%, rgba(34, 22, 31, 0) 72%, rgba(34, 22, 31, .2) 100%); pointer-events: none; }
.rb-hdr__pic { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, #E7DED1, var(--rb-s2)); color: var(--rb-text); }
.rb-hdr__pic .rb-pic { width: 128px; height: 128px; margin-top: 10px; }
.rb-exs.is-pic .rb-hdr__shade { display: none; }
.rb-pan { position: absolute; left: 0; right: 0; top: var(--rb-pan); bottom: 0; background: var(--rb-ground); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px -18px rgba(34, 22, 31, .45); }
.rb-pan__t { position: absolute; left: 16px; right: 16px; top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rb-pan__t .rb-lt { min-width: 0; }
.rb-pan__s { position: absolute; left: 16px; right: 16px; top: 62px; font: 500 15px/20px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-pan__last { position: absolute; left: 16px; right: 16px; top: 88px; display: flex; align-items: center; gap: 6px; font: 600 14px/20px var(--rb-sans); color: var(--rb-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-pan__last svg { width: 15px; height: 15px; color: var(--rb-muted); flex: none; }
.rb-pan__last .rb-calc { margin-left: 2px; }
.rb-wc { position: absolute; left: 16px; right: 16px; top: 118px; height: 236px; transform-origin: 50% 50%; }
.rb-db { position: absolute; left: 16px; right: 16px; top: 16px; height: 72px; }
.rb-db__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rb-db__sl { fill: #4B3E46; }
.rb-db__end, .rb-db__h, .rb-db__c { fill: var(--rb-text); }
.rb-db__kn { stroke: var(--rb-s1); stroke-width: 1.5; stroke-linecap: round; opacity: .5; }
.rb-db__g { fill: var(--rb-s2); stroke: var(--rb-s3); stroke-width: 1; }
.rb-db__p rect { fill: var(--rb-plum); }
.rb-db__p path { stroke: rgba(255, 253, 249, .5); stroke-width: 1.3; stroke-linecap: round; fill: none; }
.rb-db__p { opacity: 0; }
.rb-db__ring { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; border-radius: 50%; box-shadow: 0 0 0 2px var(--rb-plum), inset 0 0 0 14px rgba(123, 45, 99, .06); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.5); }
.rb-wc__mid { position: absolute; left: 16px; right: 16px; top: 100px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.rb-wc__w { display: inline-flex; align-items: baseline; gap: 4px; transform-origin: 30% 70%; }
.rb-wc__n { font: 800 64px/64px var(--rb-sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--rb-text); }
.rb-wc__u { font: 700 22px/1 var(--rb-sans); color: var(--rb-text); }
.rb-wc__calc { align-self: flex-start; margin-top: 10px; font: 600 11px/1 var(--rb-sans); color: var(--rb-muted); }
.rb-wc__mid--set .rb-wc__w { transform-origin: 50% 70%; }
.rb-wc.is-bw .rb-wc__mid, .rb-wc.is-bw .rb-db { visibility: hidden; }
.rb-reps { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rb-reps__k { font: 700 11px/14px var(--rb-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rb-muted); }
.rb-reps__c { display: flex; align-items: center; gap: 4px; }
.rb-reps__n { min-width: 36px; text-align: center; font: 800 24px/1 var(--rb-sans); font-variant-numeric: tabular-nums; }
.rb-wc__btns { position: absolute; left: 16px; right: 16px; top: 172px; height: 52px; display: flex; gap: 10px; }
.rb-wc__minus { flex: 0 0 104px; }
.rb-wc__plus { flex: 1; }
.rb-wc__pl { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 253, 249, .16); }
.rb-wc__pl svg { width: 16px; height: 16px; }
.rb-wc__btns--set { align-items: center; }
.rb-wc__btns--set .rb-reps { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 2px; }
.rb-wc__btns--set .rb-reps__k { font-size: 12px; }
.rb-sets { position: absolute; left: 16px; right: 16px; top: calc(var(--rb-sets) - var(--rb-pan)); height: 64px; display: flex; gap: 8px; }
.rb-set { position: relative; flex: 1; min-width: 0; padding: 11px 12px; border-radius: 16px; background: var(--rb-s1); box-shadow: var(--rb-card-sh); }
.rb-set__k { display: block; font: 700 11px/14px var(--rb-sans); letter-spacing: .12em; color: var(--rb-muted); }
.rb-set__v { display: block; margin-top: 5px; font: 700 17px/22px var(--rb-sans); font-variant-numeric: tabular-nums; color: var(--rb-muted); white-space: nowrap; }
.rb-set.is-done .rb-set__v { color: var(--rb-text); }
.rb-set.is-cur { box-shadow: inset 0 0 0 1.5px var(--rb-plum), var(--rb-card-sh); }
.rb-set__ck { position: absolute; right: 9px; top: 9px; width: 22px; height: 22px; }
.rb-set__ck svg { width: 12px; height: 12px; }
.rb-stat { position: absolute; left: 16px; right: 16px; top: calc(var(--rb-stat) - var(--rb-pan)); height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rb-restc { display: none; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 4px; border-radius: 14px; background: var(--rb-s2); font: 600 14px/1 var(--rb-sans); color: var(--rb-text); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.rb-stat.has-rest .rb-restc { display: inline-flex; }
.rb-restc svg { width: 22px; height: 22px; }
.rb-restc__t { fill: none; stroke: var(--rb-s3); stroke-width: 2.4; }
.rb-restc__a { fill: none; stroke: var(--rb-sage); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; }
.rb-restc__l b { font-weight: 800; }
.rb-stat__r { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.rb-stat__next { display: none; font: 600 14px/18px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-stat__next.is-on { display: block; }
.rb-stat__draft { display: none; align-items: center; gap: 6px; white-space: nowrap; }
.rb-stat__draft.is-on { display: inline-flex; }
.rb-stat__draft .rb-her { font-size: 18px; line-height: 22px; }
.rb-log { position: absolute; left: 16px; right: 16px; top: var(--rb-pill); padding: 0 52px; z-index: 2; }
.rb-log__t { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rb-log__ic { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 253, 249, .16); }
.rb-log__ic svg { width: 16px; height: 16px; }
.rb-log.is-off .rb-log__ic { background: transparent; }

/* ------------------------------------------------------------------ rest (the sheet over a set) */
.rb-sheet { position: absolute; inset: 0; }
.rb-sheet__scrim { position: absolute; inset: 0; background: transparent; opacity: 0; }
.rb-sheet__p { position: absolute; left: 0; right: 0; bottom: 0; background: var(--rb-s1); border-radius: 28px 28px 0 0; overflow: hidden; transform: translate3d(0, 100%, 0); box-shadow: 0 -12px 40px -16px rgba(34, 22, 31, .45); }
.rb-grab { position: absolute; left: 50%; top: 8px; z-index: 3; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--rb-s3); }
.rb-sheet__x { position: absolute; right: 14px; top: 14px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rb-s2); color: var(--rb-text); }
.rb-sheet__x svg { width: 15px; height: 15px; }
.rb-rs__p { top: var(--rb-rsTop); }
.rb-rs__band { position: absolute; left: 0; right: 0; top: 0; height: var(--rb-rsBand); overflow: hidden; background: #2E2529; }
.rb-rs__vs { position: absolute; inset: 0; }
.rb-rs__dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 22, 31, .55) 0%, rgba(34, 22, 31, .16) 52%, rgba(34, 22, 31, 0) 100%); }
.rb-rs__band .rb-grab { background: rgba(255, 253, 249, .75); }
.rb-rs__ring { position: absolute; left: 50%; top: calc(var(--rb-rsRingCY) - var(--rb-rsTop) - var(--rb-rsRing) / 2); width: var(--rb-rsRing); height: var(--rb-rsRing); margin-left: calc(var(--rb-rsRing) / -2); display: grid; place-items: center; }
.rb-rs__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--rb-s1); box-shadow: 0 16px 34px -18px rgba(34, 22, 31, .5); }
.rb-rring { position: relative; display: block; }
.rb-rring__t { stroke: var(--rb-s2); }
.rb-rring__a { stroke: var(--rb-sage); stroke-dasharray: 1 1; }
.rb-rs__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rb-rs__k { font: 700 11px/14px var(--rb-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rb-muted); }
.rb-rs__t { font: 800 56px/56px var(--rb-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--rb-text); }
.rb-rs__line { position: absolute; left: 24px; right: 24px; top: calc(var(--rb-rsLine) - var(--rb-rsTop)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.rb-rs__line .rb-her { font-size: 24px; line-height: 28px; }
.rb-rs__line .rb-src { margin-top: 8px; }
.rb-rs__skip { position: absolute; left: 50%; top: calc(var(--rb-rsSkip) - var(--rb-rsTop)); height: 44px; padding: 0 24px; margin-left: -66px; width: 132px; font-size: 15px; }

/* ------------------------------------------------------------------ fuel (9.4.6) */
.rb-fu__ring { position: absolute; left: 16px; right: 16px; top: var(--rb-fuRing); height: var(--rb-fuRingH); display: flex; align-items: center; gap: 20px; padding: 0 20px; }
.rb-fu__rg { position: relative; display: block; flex: none; }
.rb-pring { display: block; }
.rb-pring__t { stroke: var(--rb-plum-wash); }
.rb-pring__a { stroke: var(--rb-plum); stroke-dasharray: 1 1; }
.rb-fu__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rb-fu__n { font: 800 34px/36px var(--rb-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rb-fu__c span { font: 500 12px/15px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; }
.rb-fu__rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rb-fu__rh { font: 400 26px/30px var(--rb-serif); }
.rb-fu__rs { font: 500 15px/20px var(--rb-sans); color: var(--rb-muted); }
.rb-fu__bf { position: absolute; left: 16px; right: 16px; top: var(--rb-fuCard); height: var(--rb-fuCardH); }
.rb-fu__ph { position: absolute; left: 14px; top: 14px; width: 112px; height: 112px; border-radius: 14px; overflow: hidden; background: var(--rb-s3); }
.rb-fu__bt { position: absolute; left: 140px; right: 14px; top: 13px; display: flex; flex-direction: column; }
.rb-fu__bh { display: block; font: 400 22px/26px var(--rb-serif); margin-bottom: 4px; white-space: nowrap; }
.rb-fu__it { display: block; font-size: 17px; line-height: 21px; white-space: nowrap; }
.rb-fu__pr { display: inline-flex; align-self: flex-start; margin-top: 7px; padding: 4px 9px; border-radius: 10px; background: var(--rb-plum-wash); font: 700 13px/16px var(--rb-sans); color: var(--rb-text); white-space: nowrap; }
.rb-fu__bq { position: absolute; left: 14px; right: 14px; bottom: 13px; display: flex; flex-direction: column; gap: 5px; }
.rb-fu__q { font-size: 21px; line-height: 24px; }
.rb-fu__meals { position: absolute; left: 16px; right: 16px; top: var(--rb-fuMeals); padding: 8px 0; }
.rb-meal { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: var(--rb-fuMealH); padding: 0 14px 0 18px; text-align: left; }
.rb-meal + .rb-meal::before { content: ""; position: absolute; left: 18px; right: 14px; top: 0; height: var(--rb-hl); background: var(--rb-hair2); }
.rb-meal__n { flex: 1; font: 700 16px/20px var(--rb-sans); }
.rb-meal__g { font: 600 15px/20px var(--rb-sans); color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-meal__add { display: none; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 8px; border-radius: 15px; background: var(--rb-s2); font: 700 14px/1 var(--rb-sans); color: var(--rb-text); }
.rb-meal__add svg { width: 15px; height: 15px; }
.rb-meal.is-add .rb-meal__add { display: inline-flex; }
.rb-meal.is-add .rb-meal__g, .rb-meal.is-add .rb-meal__ck { display: none; }
.rb-meal__ck { width: 24px; height: 24px; }
.rb-meal__ck svg { width: 12px; height: 12px; }

/* ------------------------------------------------------------------ hills (9.4.7) */
.rb-hi__ov { position: absolute; left: 64px; top: 69px; }
.rb-hi__hd { position: absolute; left: 16px; right: 16px; top: var(--rb-hiTitle); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rb-hi__n { font: 600 15px/20px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-hi__n b { font: 800 22px/1 var(--rb-sans); color: var(--rb-text); }
.rb-hi__list { position: absolute; left: 16px; right: 16px; top: var(--rb-hiList); overflow: hidden; }
.rb-hill { position: relative; height: var(--rb-hiRow); }
.rb-hill + .rb-hill::before { content: ""; position: absolute; left: 62px; right: 14px; top: 0; height: var(--rb-hl); background: var(--rb-hair2); }
.rb-hill__b { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 0 14px 0 12px; text-align: left; }
.rb-hill--w .rb-hill__b { padding-right: 96px; }
.rb-hill__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--rb-s2); color: var(--rb-text); }
.rb-hill__ic svg { width: 18px; height: 18px; }
.rb-hill__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rb-hill__r { display: block; font-size: 19px; line-height: 22px; }
.rb-hill__s { display: block; font: 500 13px/17px var(--rb-sans); color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-hill__w { position: absolute; right: 12px; top: 50%; margin-top: -18px; display: flex; align-items: center; gap: 8px; }
.rb-hill__wr { position: relative; display: block; width: 32px; height: 32px; }
.rb-wring { display: block; }
.rb-wr__s { stroke: var(--rb-text); opacity: 0; }
.rb-hill__wr::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; box-shadow: inset 0 0 0 3.6px var(--rb-s2); }
.rb-hill__wn { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--rb-sans); font-variant-numeric: tabular-nums; }
.rb-hi__line { position: absolute; left: 16px; right: 16px; top: var(--rb-hiLine); }
.rb-hi__line .rb-her { font-size: 22px; line-height: 26px; }
.rb-hi__line .rb-src { margin-top: 8px; }

/* ------------------------------------------------------------------ progress (9.4.8) */
.rb-pg__chart { position: absolute; left: 16px; right: 16px; top: var(--rb-pgChart); height: var(--rb-pgChartH); padding: 16px; }
.rb-pg__ct { display: flex; flex-direction: column; gap: 2px; }
.rb-pg__ex { font: 400 22px/26px var(--rb-serif); }
.rb-pg__cs { font: 500 13px/17px var(--rb-sans); color: var(--rb-muted); }
.rb-pg__plot { position: absolute; left: 16px; right: 16px; top: 64px; bottom: 16px; }
.rb-ch { display: block; overflow: visible; }
.rb-ch__g { stroke: var(--rb-hair); stroke-width: 1; }
.rb-ch__y { font: 600 10.5px var(--rb-sans); fill: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-ch__area { fill: rgba(123, 45, 99, .06); }
.rb-ch__l { fill: none; stroke: var(--rb-text); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.rb-ch__nx { fill: none; stroke: var(--rb-plum); stroke-width: 2.2; stroke-dasharray: 3 4; stroke-linecap: round; }
.rb-ch__nxs { fill: none; stroke: var(--rb-plum); stroke-width: 2.2; stroke-linejoin: round; opacity: 0; }
.rb-pg__chart.is-solid .rb-ch__nx { opacity: 0; }
.rb-pg__chart.is-solid .rb-ch__nxs { opacity: 1; }
.rb-ch__d { fill: var(--rb-s1); stroke: var(--rb-text); stroke-width: 1.6; }
.rb-ch__pd { fill: var(--rb-s1); stroke: var(--rb-plum); stroke-width: 2; stroke-dasharray: 2.6 2.4; }
.rb-ch__ph { fill: var(--rb-plum); }
.rb-pg__chart.is-solid .rb-ch__pd { fill: var(--rb-plum); stroke-dasharray: none; }
.rb-pg__chart.is-solid .rb-ch__ph { fill: var(--rb-s1); }
.rb-ch__x { position: absolute; bottom: -2px; transform: translateX(-50%); font: 600 10.5px/12px var(--rb-sans); color: var(--rb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-ch__x:first-of-type { transform: none; }
.rb-ch__x--r { transform: translateX(-100%); }
.rb-ch__lab { position: absolute; width: 0; height: 0; }
.rb-ch__lb, .rb-ch__la { position: absolute; right: 14px; top: -14px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font: 700 13px/1 var(--rb-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-ch__lb { background: var(--rb-s1); color: var(--rb-plum); box-shadow: inset 0 0 0 1.5px rgba(123, 45, 99, .4); border: 0; }
.rb-ch__la { display: none; background: var(--rb-plum); color: var(--rb-s1); }
.rb-pg__chart.is-solid .rb-ch__lb { display: none; }
.rb-pg__chart.is-solid .rb-ch__la { display: inline-flex; }
.rb-pg__lifts { position: absolute; left: 16px; right: 16px; top: var(--rb-pgLifts); padding: 4px 0; }
.rb-lift { position: relative; display: flex; align-items: center; height: var(--rb-pgLiftH); padding: 0 16px 0 18px; gap: 12px; }
.rb-lift + .rb-lift::before { content: ""; position: absolute; left: 18px; right: 16px; top: 0; height: var(--rb-hl); background: var(--rb-hair2); }
.rb-lift__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rb-lift__t b { font: 700 16px/20px var(--rb-sans); }
.rb-lift__t span { font: 500 14px/18px var(--rb-sans); color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-spark { display: block; flex: none; overflow: visible; }
.rb-spark path { fill: none; stroke: var(--rb-text); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.rb-spark circle { fill: var(--rb-plum); }
.rb-pg__stat { position: absolute; left: 16px; right: 16px; top: var(--rb-pgStat); display: flex; align-items: center; gap: 10px; font: 500 15px/20px var(--rb-sans); color: var(--rb-muted); }
.rb-pg__stat b { font: 800 17px/20px var(--rb-sans); color: var(--rb-text); font-variant-numeric: tabular-nums; }
.rb-pg__si { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rb-s2); color: var(--rb-text); flex: none; }
.rb-pg__si svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ fiona (9.4.9), coach, the reel sheet */
.rb-fi__hdr { position: absolute; left: 0; right: 0; top: 0; height: var(--rb-fiHdr); overflow: hidden; background: var(--rb-s3); }
.rb-fi__pt { position: absolute; inset: 0; }
.rb-fi__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 22, 31, .38) 0%, rgba(34, 22, 31, 0) 30%, rgba(34, 22, 31, 0) 48%, rgba(34, 22, 31, .62) 100%); }
.rb-fi__id { position: absolute; left: 16px; right: 16px; bottom: 18px; color: var(--rb-s1); }
.rb-fi__name { font: 400 40px/42px var(--rb-serif); letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.rb-fi__role { display: block; margin-top: 4px; font: 600 15px/20px var(--rb-sans); color: rgba(255, 253, 249, .9); }
.rb-fi__new { position: absolute; left: 16px; top: var(--rb-fiNew); }
.rb-fi__reels { position: absolute; left: 16px; right: 16px; top: calc(var(--rb-fiNew) + 30px); display: flex; gap: 8px; }
.rb-reel { position: relative; display: block; flex: none; width: var(--rb-fiPosterW); }
.rb-reel__f { display: block; width: 100%; height: var(--rb-fiPosterH); border-radius: 12px; overflow: hidden; background: var(--rb-s3); box-shadow: var(--rb-card-sh); }
.rb-fi__ask { position: absolute; left: 16px; right: 16px; top: var(--rb-fiAsk); height: var(--rb-fiAskH); padding: 14px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.rb-fi__at { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.rb-fi__at b { flex: 1; font: 700 16px/20px var(--rb-sans); }
.rb-fi__at svg { width: 18px; height: 18px; color: var(--rb-muted); }
.rb-fi__q { display: block; padding: 8px 12px; border-radius: 14px; background: var(--rb-s2); font: 500 14px/18px var(--rb-sans); color: var(--rb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-fi__coach { position: absolute; left: 16px; right: 16px; top: var(--rb-fiCoach); height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px; text-align: left; font: 700 16px/20px var(--rb-sans); }
.rb-fi__coach > span:nth-child(2) { flex: 1; }
.rb-fi__ci { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rb-plum-wash); color: var(--rb-plum); flex: none; }
.rb-fi__ci svg { width: 16px; height: 16px; }
.rb-fi__coach > svg:last-child { width: 14px; height: 14px; color: var(--rb-faint); }
.rb-co__p { height: 372px; }
.rb-short .rb-co__p { height: 350px; }
.rb-co__in { position: absolute; left: 24px; right: 24px; top: 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rb-co__t { margin-top: 16px; font: 400 30px/34px var(--rb-serif); }
.rb-co__s { margin-top: 6px; font: 500 15px/20px var(--rb-sans); color: var(--rb-muted); }
.rb-co__apply { margin-top: 24px; width: 220px; }
.rb-co__apply.is-hidden { display: none; }
.rb-co__done { display: none; margin-top: 22px; flex-direction: column; align-items: center; gap: 4px; }
.rb-co__done.is-on { display: flex; }
.rb-co__ck { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rb-text); color: var(--rb-s1); margin-bottom: 6px; }
.rb-co__done b { font: 700 17px/22px var(--rb-sans); }
.rb-co__done span:last-child { font: 500 14px/18px var(--rb-sans); color: var(--rb-muted); }
.rb-rl__p { top: 54px; }
.rb-rl__hd { position: absolute; left: 20px; top: 22px; display: flex; align-items: center; gap: 10px; }
.rb-rl__hd b { font: 700 16px/20px var(--rb-sans); }
.rb-rl__v { position: absolute; left: 32px; right: 32px; top: 70px; aspect-ratio: 4 / 5; }
.rb-rl__vs { position: absolute; inset: 0; border-radius: 18px; display: none; box-shadow: var(--rb-shadow); }
.rb-rl__vs.is-sel { display: block; }

/* ------------------------------------------------------------------ plan (9.4.10, live) */
.rb-seg { position: absolute; left: 16px; right: 16px; top: var(--rb-plSeg); height: 36px; display: flex; padding: 3px; border-radius: 12px; background: var(--rb-s2); }
.rb-seg__b { flex: 1; border-radius: 9px; font: 700 14px/30px var(--rb-sans); text-align: center; color: var(--rb-muted); }
.rb-seg__b.is-on { background: var(--rb-s1); color: var(--rb-text); box-shadow: 0 1px 2px rgba(34, 22, 31, .12); }
.rb-pl__day { position: absolute; left: 16px; right: 16px; top: var(--rb-plDay); font: 400 24px/28px var(--rb-serif); }
.rb-pl__list { position: absolute; left: 16px; right: 16px; top: var(--rb-plList); overflow: hidden; }
.rb-plr { position: relative; height: var(--rb-plRow); }
.rb-plr + .rb-plr::before { content: ""; position: absolute; left: 68px; right: 14px; top: 0; height: var(--rb-hl); background: var(--rb-hair2); }
.rb-plr__b { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 0 14px 0 12px; text-align: left; }
.rb-plr__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-plr__n { display: block; font: 400 19px/22px var(--rb-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-plr__m { display: block; font: 500 14px/18px var(--rb-sans); color: var(--rb-muted); font-variant-numeric: tabular-nums; }
.rb-plr__b > svg { width: 14px; height: 14px; color: var(--rb-faint); flex: none; }
.rb-plr.is-opt .rb-plr__m { color: var(--rb-muted); white-space: normal; }
.rb-pl__rule { position: absolute; left: 16px; right: 16px; top: var(--rb-plRule); }
.rb-pl__rule .rb-her { font-size: 20px; line-height: 24px; }
.rb-pl__rule .rb-src { margin-top: 8px; }

/* ------------------------------------------------------------------ the proof (overlay over row) */
.rb-pf { position: absolute; inset: 0; }
.rb-pf__scrim { position: absolute; inset: 0; background: var(--rb-ground); opacity: 0; }
.rb-pf__card { position: absolute; left: var(--rb-pfX); top: var(--rb-pfY); width: var(--rb-pfW); height: var(--rb-pfH); border-radius: 20px; overflow: hidden; background: #2E2529; box-shadow: var(--rb-shadow); transform-origin: 50% 50%; opacity: 0; }
.rb-pf__vs { position: absolute; inset: 0; }
.rb-pf__grey { position: absolute; inset: 0; background: #8E878B; opacity: .3; pointer-events: none; }
.rb-pf__txt { position: absolute; left: 20px; right: 20px; top: var(--rb-pfCap); }
.rb-pf__cap { display: flex; }
.rb-pf__l1 { margin-top: 8px; font-size: 24px; line-height: 28px; }
.rb-pf__l2 { font-size: 24px; line-height: 28px; }
.rb-pf__data { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; font: 700 15px/20px var(--rb-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-pf__draft { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rb-pf__draft .rb-her { font-size: 26px; line-height: 30px; }
.rb-pf__cap, .rb-pf__l1, .rb-pf__l2, .rb-pf__data, .rb-pf__draft { opacity: 0; }

/* ------------------------------------------------------------------ the 780 canvas (hero areas compressed by 72) */
.rb-short .rb-fu__ph { width: 100px; height: 100px; }
.rb-short .rb-fu__bt { left: 128px; }
.rb-short .rb-fu__n { font-size: 27px; line-height: 30px; }
.rb-short .rb-fu__c span { font-size: 11px; }
.rb-short .rb-fu__it { font-size: 16px; line-height: 19px; }
.rb-short .rb-fu__q { font-size: 19px; line-height: 22px; }
.rb-short .rb-fu__pr { margin-top: 5px; }
.rb-short .rb-rs__t { font-size: 50px; line-height: 50px; }
.rb-short .rb-hill__r { font-size: 18px; line-height: 21px; }
.rb-short .rb-fi__name { font-size: 36px; line-height: 38px; }
.rb-short .rb-fi__ask { padding-top: 12px; gap: 6px; }
.rb-short .rb-fi__q { padding: 6px 12px; }
.rb-short .rb-pf__l1, .rb-short .rb-pf__l2 { font-size: 22px; line-height: 26px; }
.rb-short .rb-pf__draft .rb-her { font-size: 24px; line-height: 28px; }
.rb-short .rb-rl__v { top: 64px; left: 44px; right: 44px; }

/* ------------------------------------------------------------------ reduced motion (?rm=1): fades only */
.rb-rm .rb-pill, .rb-rm .rb-quiet, .rb-rm .rb-rb, .rb-rm .rb-exr__b { transition: none; }
.rb-rm.rb-live .rb-pill:active, .rb-rm.rb-live .rb-quiet:active, .rb-rm.rb-live .rb-rb:active { transform: none; }

@media (hover: hover) {
  .rb-desk.rb-live .rb-tab:hover { color: var(--rb-text); }
  .rb-desk.rb-live .rb-exr__b:hover, .rb-desk.rb-live .rb-plr__b:hover { background: rgba(220, 210, 196, .3); }
}
.rb-plate__g { fill: none; stroke: var(--rb-ground); stroke-width: 5.6; stroke-linecap: round; }
.rb-plate__gs { fill: none; stroke: rgba(34, 22, 31, .3); stroke-width: 6.4; stroke-linecap: round; transform: translate(.35px, .6px); }
.rb-we__q, .rb-rs__line .rb-her, .rb-hi__line .rb-her, .rb-pl__rule .rb-her, .rb-pf__l2, .rb-hill__r, .rb-fu__q { text-wrap: balance; }