/* Ruff Diesel: the app inside the phone (the APP builder's file).
   Everything is scoped to .rd-root (added by app.js on the mount element); every class starts with "rd-".
   Layout reads only the size of the mount box (--rd-w / --rd-h, default 393 × 852; a 780 canvas is supported).
   Only transform and opacity animate (plus clip-path on the six workout cards while the story builds them, and the
   stroke-dashoffset of three small SVG rings). Fonts are declared by the host page: "Anton", "Instrument Sans",
   "Archivo" (variable, wdth 62–125). Dark lifting-app UI: ground #0B0B0D, surfaces #16161A / #1E1E23, gold #E2B04A. */

.rd-root {
  --rd-bg: #0B0B0D; --rd-s1: #16161A; --rd-s2: #1E1E23; --rd-s3: #27272D; --rd-s4: #313138;
  --rd-line: rgba(255, 255, 255, .08); --rd-line-2: rgba(255, 255, 255, .14);
  --rd-ink: #F5F2EC; --rd-ink-2: #CFCAC2; --rd-muted: #8C8780; --rd-faint: #57534E;
  --rd-gold: #E2B04A; --rd-gold-hi: #F6D48A; --rd-gold-lo: #B8862E; --rd-gold-ink: #1B1307;
  --rd-gold-soft: rgba(226, 176, 74, .13); --rd-gold-line: rgba(226, 176, 74, .34);
  --rd-gold-grad: linear-gradient(180deg, #F0C76A 0%, #E2B04A 52%, #CF9A35 100%);
  --rd-anton: "Anton", "Archivo", Impact, "Arial Narrow", sans-serif;
  --rd-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rd-fig: "Archivo", "Instrument Sans", -apple-system, sans-serif;
  --rd-ios: cubic-bezier(.32, .72, 0, 1); --rd-out: cubic-bezier(.16, 1, .3, 1); --rd-spring: cubic-bezier(.2, 1.25, .35, 1);
  --rd-status: 54px; --rd-tb: 83px; --rd-r: 55px; --rd-band: 6px; --rd-bz: 11px;
  --rd-thw: 56px; --rd-rh: 82px;

  position: relative;
  width: var(--rd-w, 393px);
  height: var(--rd-h, 852px);
  isolation: isolate;
  font-family: var(--rd-sans);
  font-size: 15px;
  line-height: 1.35;
  font-kerning: normal;
  letter-spacing: normal;
  text-align: left;
  color: var(--rd-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.rd-root *, .rd-root *::before, .rd-root *::after { box-sizing: border-box; }
.rd-root :where(p, h1, h2, h3, ol, ul, li, figure) { margin: 0; padding: 0; }
.rd-root :where(ol, ul) { list-style: none; }
.rd-root :where(img, video, svg) { display: block; max-width: none; }
.rd-root :where(img) { -webkit-user-drag: none; }
.rd-root :where(h1, h2, h3) { font-size: inherit; font-weight: inherit; }
.rd-root :where(i, b, em) { font-style: normal; font-weight: inherit; }
.rd-root :where(button) {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; letter-spacing: inherit;
  cursor: pointer; touch-action: manipulation;
}
.rd-root [hidden] { display: none !important; }
.rd-root :focus { outline: none; }
.rd-root :focus-visible { outline: 2px solid var(--rd-gold); outline-offset: 2px; }
/* story mode: a shield over the glass takes the pointer (switching pointer-events on the screen, an inherited
   property, would restyle the whole app at every mode switch) */
.rd-shield { position: absolute; inset: 0; z-index: 90; display: none; }
.rd-story > .rd-shield { display: block; }
.rd-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ------------------------------------------------------------------ the glass, the device */
.rd-screen {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  border-radius: var(--rd-r); background: var(--rd-bg);
  clip-path: inset(0 round var(--rd-r));
  transform: translateZ(0);
}
.rd-square .rd-screen, .rd-full .rd-screen { border-radius: 0; clip-path: none; }

/* black titanium: a 6px brushed band that catches the warm stage light, an 11px black bezel ring, side buttons.
   Band and bezel are rings (the middle is the glass), so the hardware can close in around the screen. */
.rd-dev {
  position: absolute; z-index: 3; pointer-events: none;
  inset: calc((var(--rd-band) + var(--rd-bz)) * -1);
  border-radius: calc(var(--rd-r) + var(--rd-bz) + var(--rd-band));
  box-shadow: 0 0 0 .75px rgba(0, 0, 0, .95), 0 1px 0 .75px rgba(255, 244, 222, .05);
  will-change: opacity, transform;
}
.rd-dev::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--rd-band);
  background:
    linear-gradient(140deg, rgba(255, 244, 222, .55) 0%, rgba(255, 244, 222, 0) 9%) border-box,
    linear-gradient(140deg, #6F6C67 0%, #3A3936 6%, #212122 15%, #161617 29%, #2F2E2C 40%, #6B6862 46.5%, #393835 52%, #171718 66%, #1F1F20 82%, #4A4844 93%, #7A766F 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.rd-dev::after {
  content: ""; position: absolute; inset: var(--rd-band);
  border-radius: calc(var(--rd-r) + var(--rd-bz));
  border: var(--rd-bz) solid #050506;
  box-shadow: 0 0 0 .75px rgba(0, 0, 0, .9), inset 0 0 0 .75px rgba(255, 255, 255, .07);
}
.rd-dev__ant { position: absolute; z-index: 1; width: var(--rd-band); height: 2.5px; background: rgba(0, 0, 0, .55); }
.rd-dev__ant--1 { left: 0; top: 109px; } .rd-dev__ant--2 { left: 0; bottom: 109px; }
.rd-dev__ant--3 { right: 0; top: 109px; } .rd-dev__ant--4 { right: 0; bottom: 109px; }
.rd-dev__btn {
  position: absolute; width: 4.5px; border-radius: 2px;
  background: linear-gradient(90deg, #1E1E1F 0%, #55534F 42%, #7D7A73 55%, #2A2A2B 100%);
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .8);
}
.rd-dev__btn--act { left: -3.5px; top: 139px; height: 32px; }
.rd-dev__btn--vu { left: -3.5px; top: 199px; height: 60px; }
.rd-dev__btn--vd { left: -3.5px; top: 271px; height: 60px; }
.rd-dev__btn--pw { right: -3.5px; top: 231px; height: 94px; background: linear-gradient(270deg, #1E1E1F 0%, #55534F 42%, #7D7A73 55%, #2A2A2B 100%); }
.rd-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: var(--rd-r);
  background: linear-gradient(115deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 22%, rgba(255, 255, 255, 0) 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.rd-island {
  position: absolute; top: 11px; left: 50%; z-index: 4; width: 124px; height: 36px; margin-left: -62px;
  border-radius: 18px; background: #000; pointer-events: none;
}
.rd-island::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #34404F 0, #10151C 38%, #05070A 62%, #000 72%);
}
.rd-nodev .rd-dev, .rd-nodev .rd-glare, .rd-nodev .rd-island,
.rd-full .rd-dev, .rd-full .rd-glare, .rd-full .rd-island { display: none; }
.rd-square .rd-glare { border-radius: 0; }

/* ------------------------------------------------------------------ layers */
.rd-layer {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; overflow: clip;
  background: var(--rd-bg); visibility: hidden;
  /* each screen is its own layout and paint island: a number or a typed letter inside one never relays out the rest */
  contain: strict;
}
.rd-layer.is-on { visibility: visible; }
/* story: a screen kept painted under the one on show (app.js, sinkUnder), below an opaque curtain that every screen
   covers. Two screens crossfading never let it show through. */
.rd-layer.rd-under { visibility: visible; z-index: 0; }
.rd-screen::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--rd-bg); pointer-events: none; }
.rd-layer.is-moving { box-shadow: -20px 0 44px -16px rgba(0, 0, 0, .9); }
.rd-layer.is-sheet { border-radius: 38px 38px 0 0; box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .8); }
/* always a scroller (the story moves the content by transform behind the shield): no overflow switch, so no relayout
   of every screen when the phone goes live */
.rd-scroll { position: absolute; inset: 0; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: auto; scrollbar-width: none; }
.rd-scroll::-webkit-scrollbar { display: none; }
.rd-in { position: relative; padding: calc(var(--rd-status) + 6px) 16px calc(var(--rd-tb) + 24px); }

/* ------------------------------------------------------------------ atoms */
.rd-k { font: 650 11px/1.2 var(--rd-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); }
.rd-k--gold { color: var(--rd-gold); }
.rd-card { position: relative; background: var(--rd-s1); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border-radius: 16px;
  background: var(--rd-gold-grad); color: var(--rd-gold-ink);
  font: 700 17px/1 var(--rd-sans); letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, .5), inset 0 -1px 0 rgba(120, 80, 20, .35), 0 12px 26px -14px rgba(226, 176, 74, .75);
  transition: transform 160ms var(--rd-out);
}
.rd-btn svg { width: 16px; height: 16px; }
/* :active only ever happens in the live phone (in story mode the shield takes every touch), so these rules carry no
   mode class: a mode switch restyles none of these controls */
.rd-root .rd-btn:active, .rd-root .rd-pill:active, .rd-root .rd-glass:active, .rd-root .rd-step__b:active,
.rd-root .rd-dock__log:active, .rd-root .rd-addset:active { transform: scale(.96); }
.rd-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  background: var(--rd-s2); color: var(--rd-ink-2); font: 650 12px/1 var(--rd-sans); letter-spacing: .01em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--rd-line);
}
.rd-chip--sm { height: 22px; padding: 0 8px; font-size: 11.5px; }
.rd-chip--gold { background: var(--rd-gold); color: var(--rd-gold-ink); box-shadow: 0 0 0 0 rgba(226, 176, 74, .5); }
.rd-draft {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; border-radius: 10px;
  border: 1px dashed rgba(226, 176, 74, .55); color: var(--rd-gold);
  font: 700 10px/1 var(--rd-sans); letter-spacing: .1em; text-transform: uppercase;
}
.rd-draft::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rd-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); }
.rd-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 1.5px rgba(226, 176, 74, .7); }
.rd-wm { display: inline-flex; gap: .22em; font: 400 20px/1 var(--rd-anton); letter-spacing: .03em; text-transform: uppercase; color: var(--rd-gold); white-space: nowrap; }
.rd-glass {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px;
  background: rgba(14, 14, 16, .5); color: #fff;
  box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .16);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-glass { background: rgba(14, 14, 16, .34); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}
.rd-glass svg { width: 22px; height: 22px; }
.rd-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px; border-radius: 26px;
  background: var(--rd-s2); color: var(--rd-ink); font: 650 16px/1 var(--rd-sans);
  box-shadow: inset 0 0 0 1px var(--rd-line-2); transition: transform 140ms var(--rd-out);
}
.rd-pill--gold { background: var(--rd-gold-grad); color: var(--rd-gold-ink); box-shadow: inset 0 1px 0 rgba(255, 246, 220, .5), 0 10px 22px -12px rgba(226, 176, 74, .7); }
.rd-chev { display: inline-flex; color: var(--rd-faint); }
.rd-okc {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rd-gold); color: var(--rd-gold-ink);
}
.rd-okc svg { width: 15px; height: 15px; }
.rd-flame { color: var(--rd-gold); }
.rd-sec { margin: 24px 2px 10px; font: 700 19px/1.2 var(--rd-sans); letter-spacing: -.01em; color: var(--rd-ink); }
.rd-dg { display: inline-block; width: .5em; text-align: center; }
.rd-dg--s { width: auto; margin: 0 .02em; }
.rd-odo { display: inline-flex; flex-direction: column; height: 1.2em; line-height: 1.2; vertical-align: top; }
.rd-root .rd-sum__streak b:has(.rd-odo) { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: top; }

/* ------------------------------------------------------------------ status bar, home indicator, tab bar, toast */
.rd-status { position: absolute; left: 0; right: 0; top: 0; z-index: 60; height: var(--rd-status); color: #fff; pointer-events: none; }
.rd-status__time { position: absolute; left: 0; top: 18px; width: 138px; padding-left: 8px; text-align: center; font: 650 16.5px/20px var(--rd-sans); letter-spacing: -.01em; }
.rd-status__ic { position: absolute; right: 0; top: 22px; width: 138px; padding-right: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rd-homeind { position: absolute; left: 50%; bottom: 8px; z-index: 61; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: rgba(255, 255, 255, .9); pointer-events: none; }
.rd-full .rd-status, .rd-full .rd-homeind { display: none; }

.rd-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--rd-tb);
  display: flex; align-items: flex-start; justify-content: space-around; padding: 7px 6px 0;
  background: rgba(11, 11, 13, .94); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .12);
  visibility: hidden;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-tabbar { background: rgba(11, 11, 13, .94); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); }
}
.rd-tabbar.is-on { visibility: visible; }
.rd-tab {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 49px; padding-top: 2px;
  color: var(--rd-muted); font: 650 10.5px/1.1 var(--rd-sans); letter-spacing: .01em;   /* #8C8780 on #0B0B0D: 5.5:1 */
}
.rd-tab svg { width: 26px; height: 26px; }
.rd-tab .rd-fillable { fill: none; }
.rd-tab[aria-current] { color: var(--rd-gold); }
.rd-tab[aria-current] .rd-fillable { fill: currentColor; fill-opacity: .2; }

.rd-toast {
  position: absolute; left: 0; right: 0; bottom: calc(var(--rd-tb) + 16px); z-index: 50;
  width: max-content; max-width: calc(100% - 48px); margin: 0 auto; padding: 11px 16px; border-radius: 14px;
  background: rgba(38, 38, 44, .96); color: var(--rd-ink); font: 600 14px/1.25 var(--rd-sans); text-align: center;
  box-shadow: inset 0 0 0 1px var(--rd-line-2), 0 16px 30px -12px rgba(0, 0, 0, .8);
  transform: translate3d(0, 12px, 0); opacity: 0; pointer-events: none;
  transition: transform 300ms var(--rd-out), opacity 220ms linear;
}
.rd-toast.is-on { transform: translate3d(0, 0, 0); opacity: 1; }

/* nav bar (pushed screens) */
.rd-nav { display: flex; align-items: center; justify-content: space-between; height: 44px; margin: -6px -8px 0 -10px; }
.rd-back { display: inline-flex; align-items: center; height: 44px; padding: 0 10px 0 0; color: var(--rd-gold); font: 500 17px/1 var(--rd-sans); }
.rd-back svg { width: 28px; height: 28px; margin-right: -2px; }
.rd-navbtn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 8px;
  color: var(--rd-gold); font: 650 16px/1 var(--rd-sans);
}

/* ------------------------------------------------------------------ splash */
.rd-splash {
  background:
    radial-gradient(70% 46% at 50% 0%, rgba(255, 244, 222, .16), rgba(255, 244, 222, 0) 70%),
    radial-gradient(60% 40% at 50% 46%, rgba(226, 176, 74, .14), rgba(226, 176, 74, 0) 70%),
    #070708;
}
.rd-splash__beam {
  position: absolute; left: 50%; top: -10%; width: 120%; height: 80%; margin-left: -60%;
  background: conic-gradient(from 180deg at 50% 0%, rgba(255, 244, 222, 0) 160deg, rgba(255, 244, 222, .1) 175deg, rgba(255, 244, 222, .14) 180deg, rgba(255, 244, 222, .1) 185deg, rgba(255, 244, 222, 0) 200deg);
  opacity: 0; transition: opacity 700ms linear;
}
.rd-splash__in { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-56%); display: flex; flex-direction: column; align-items: center; }
.rd-splash__av { transform: scale(.9); opacity: 0; transition: transform 800ms var(--rd-out), opacity 500ms linear; }
.rd-splash__av img { box-shadow: 0 0 0 2px var(--rd-gold), 0 0 0 9px rgba(226, 176, 74, .1), 0 30px 70px -20px rgba(226, 176, 74, .45); }
.rd-wm--xl {
  margin-top: -30px; font-size: 64px; letter-spacing: .02em; gap: .2em;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7));
}
.rd-wm--xl span {
  display: inline-block; color: transparent;
  background: linear-gradient(100deg, #D9A23C 0%, #F6D48A 38%, #FFF1CC 47%, #F6D48A 56%, #E2B04A 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  transform: translate3d(0, 24px, 0); opacity: 0;
  transition: transform 700ms var(--rd-out) 160ms, opacity 400ms linear 160ms, background-position 1400ms cubic-bezier(.4, 0, .2, 1) 420ms;
}
.rd-wm--xl span + span { transition-delay: 240ms, 240ms, 420ms; }
.rd-splash.is-in .rd-splash__av { transform: none; opacity: 1; }
.rd-splash.is-in .rd-wm__w { transform: none; opacity: 1; background-position: 0 0; }
.rd-splash.is-in .rd-splash__beam { opacity: 1; }
.rd-rm .rd-splash__av, .rd-rm .rd-wm--xl span { transition-duration: 150ms; transition-delay: 0ms; }

/* ------------------------------------------------------------------ today */
.rd-top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.rd-brand { display: flex; align-items: center; gap: 10px; }
.rd-brand .rd-wm { font-size: 21px; }
.rd-streak {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 17px;
  background: var(--rd-gold-soft); box-shadow: inset 0 0 0 1px var(--rd-gold-line);
  font: 650 13px/1 var(--rd-sans); color: var(--rd-ink);
}
.rd-streak b { color: var(--rd-gold-hi); font-weight: 750; }
.rd-greet { margin-top: 14px; }
.rd-greet__h { font: 700 30px/1.08 var(--rd-sans); letter-spacing: -.025em; color: var(--rd-ink); }
.rd-greet__d { margin-top: 6px; font: 500 14.5px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-prog { margin-top: 14px; padding: 14px 16px 15px; }
.rd-prog__hd { display: flex; justify-content: space-between; align-items: baseline; }
.rd-prog__pc { font: 700 13px/1 var(--rd-fig); color: var(--rd-gold); }
.rd-prog__t { margin-top: 8px; font: 680 17px/1.2 var(--rd-sans); letter-spacing: -.01em; color: var(--rd-ink); }
.rd-prog__t span { color: var(--rd-muted); font-weight: 550; }
.rd-prog__bar { position: relative; height: 6px; margin: 11px 0 12px; border-radius: 3px; background: var(--rd-s3); overflow: hidden; }
.rd-prog__bar i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, var(--rd-gold-lo), var(--rd-gold) 70%, var(--rd-gold-hi)); transform-origin: 0 50%; transform: scaleX(.3); }
.rd-week { display: flex; justify-content: space-between; }
.rd-day { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 36px; }
.rd-day b { font: 650 11px/1 var(--rd-sans); color: var(--rd-muted); letter-spacing: .04em; }
.rd-day i {
  position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--rd-s2); box-shadow: inset 0 0 0 1px var(--rd-line); color: var(--rd-gold-ink);
}
.rd-day i svg { width: 14px; height: 14px; opacity: 0; }
.rd-day.is-done .rd-day__d { background: var(--rd-gold); box-shadow: none; }
.rd-day.is-done .rd-day__ck { opacity: 1; }
.rd-day.is-today .rd-day__l { color: var(--rd-gold); }
.rd-day.is-today .rd-day__d { background: transparent; box-shadow: inset 0 0 0 2px var(--rd-gold); }
.rd-day.is-today .rd-day__d::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--rd-gold); }

.rd-today { padding: 14px; overflow: hidden; }
.rd-today::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 100% 0%, rgba(226, 176, 74, .12), rgba(226, 176, 74, 0) 60%);
}
.rd-strip { display: flex; gap: 6px; }
.rd-home .rd-sec { margin: 18px 2px 9px; }
.rd-strip__i { position: relative; flex: 1; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--rd-s3); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-strip__i img { width: 100%; height: 100%; object-fit: cover; }
.rd-today__row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; margin-top: 14px; }
.rd-today__t { font: 400 32px/1 var(--rd-anton); letter-spacing: .01em; text-transform: uppercase; color: var(--rd-ink); }
.rd-today__m { margin-top: 7px; font: 500 14px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-today__wk { height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; font: 650 12px/1 var(--rd-sans); color: var(--rd-gold); box-shadow: inset 0 0 0 1px var(--rd-gold-line); margin-bottom: 2px; }
.rd-today__go { position: relative; margin-top: 14px; height: 52px; }
.rd-today.is-done .rd-today__go { background: var(--rd-s2); color: var(--rd-gold); box-shadow: inset 0 0 0 1px var(--rd-gold-line); }
.rd-hps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rd-hp { position: relative; display: flex; flex-direction: column; align-items: stretch; height: 116px; padding: 12px 13px 12px; overflow: hidden; text-align: left; }
.rd-hp > * { position: relative; }
.rd-hp__hd { display: flex; align-items: center; gap: 6px; color: var(--rd-gold); }
.rd-hp__hd svg { flex: none; width: 15px; height: 15px; }
.rd-hp__k { font: 400 16px/1 var(--rd-anton); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.rd-hp__m { margin-top: auto; font: 550 12px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-hp__v { margin-top: 3px; font: 600 12.5px/1 var(--rd-sans); color: var(--rd-muted); white-space: nowrap; }
.rd-hp__v b { font: 760 22px/1 var(--rd-fig); letter-spacing: -.02em; color: var(--rd-ink); }
.rd-hp__v--s { font: 650 14px/1.15 var(--rd-sans); color: var(--rd-ink); }
.rd-hp__mac { margin-top: 6px; font: 650 10.5px/1 var(--rd-fig); color: var(--rd-muted); letter-spacing: .01em; white-space: nowrap; }
.rd-hp--fuel { background: radial-gradient(90% 80% at 100% 0%, rgba(226, 176, 74, .14), rgba(226, 176, 74, 0) 62%), var(--rd-s1); }
.rd-hp__ring { position: absolute !important; right: 9px; top: 9px; width: 46px; height: 46px; }
.rd-hp__ring svg { width: 100%; height: 100%; }
.rd-hp__mr .rd-mring__tr, .rd-hp__mr .rd-mring__a { stroke-width: 5; }
.rd-hp__img { position: absolute !important; inset: 0; border-radius: inherit; overflow: hidden; }
.rd-hp__img img { position: absolute; right: -18px; bottom: -14px; width: 118px; height: 118px; object-fit: cover; object-position: 50% 22%; }
.rd-hp__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #16161A 30%, rgba(22, 22, 26, .74) 58%, rgba(22, 22, 26, .1) 100%), linear-gradient(180deg, #16161A 0%, rgba(22, 22, 26, 0) 42%), linear-gradient(0deg, rgba(14, 14, 16, .85) 0%, rgba(14, 14, 16, 0) 46%);
}
.rd-hp--pose .rd-hp__hd { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.rd-hp__sp { flex: 1; }
.rd-hp__bar { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.rd-hp__bar i { display: block; height: 100%; border-radius: 2px; background: var(--rd-gold-grad); transform-origin: 0 50%; transform: scaleX(.42); }
.rd-root .rd-hp:active { transform: scale(.98); }
.rd-hp { transition: transform 160ms var(--rd-out); }
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-greet { margin-top: 12px; }
:where(.rd-short) .rd-greet__h { font-size: 28px; }
:where(.rd-short) .rd-prog { margin-top: 14px; padding: 13px 14px 14px; }
:where(.rd-short) .rd-prog__bar { margin: 10px 0 12px; }
:where(.rd-short) .rd-home .rd-sec { margin: 14px 2px 7px; }
:where(.rd-short) .rd-today { padding: 12px; }
:where(.rd-short) .rd-strip__i { aspect-ratio: 5 / 5.6; }
:where(.rd-short) .rd-today__row { margin-top: 12px; }
:where(.rd-short) .rd-today__go { margin-top: 12px; height: 50px; }
:where(.rd-short) .rd-hps { margin-top: 8px; }
:where(.rd-short) .rd-hp { height: 104px; padding: 10px 12px; }
:where(.rd-short) .rd-hp__ring { width: 40px; height: 40px; }

/* ------------------------------------------------------------------ workout */
.rd-wk__off { position: absolute; inset: 0; z-index: 2; background: #000; pointer-events: none; visibility: hidden; opacity: 0; }
.rd-wk__head { margin-top: 4px; }
.rd-wk__t { font: 400 36px/1 var(--rd-anton); letter-spacing: .01em; text-transform: uppercase; color: var(--rd-ink); white-space: nowrap; }
.rd-wk__t span { color: var(--rd-muted); }
.rd-wk__m { margin-top: 8px; font: 500 14px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-wk__prog { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rd-wk__seg { flex: 1; display: flex; gap: 4px; }
.rd-wk__seg i { flex: 1; height: 4px; border-radius: 2px; background: var(--rd-s3); transition: background-color 300ms linear; }
.rd-wk__seg i.is-on { background: var(--rd-gold); }
.rd-wk__done { font: 650 12px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-wk__list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.rd-wrow {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: var(--rd-rh); padding: 0 14px 0 6px; text-align: left;
  --rd-thh: calc(var(--rd-thw) * 1.25);
}
.rd-wrow__bg { position: absolute; inset: 0; border-radius: 18px; background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-wrow__th {
  position: relative; z-index: 3; flex: none; width: var(--rd-thw); height: var(--rd-thh); border-radius: 12px; overflow: hidden;
  background: var(--rd-s3); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.rd-wrow__th img { width: 100%; height: 100%; object-fit: cover; }
.rd-wrow__tx { position: relative; flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rd-wrow__n { font: 650 16px/1.2 var(--rd-sans); letter-spacing: -.005em; color: var(--rd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-wrow__m { font: 500 13.5px/1.2 var(--rd-sans); color: var(--rd-muted); white-space: nowrap; }
.rd-wrow__m .rd-num:first-child { color: var(--rd-ink-2); font-weight: 600; }
.rd-wrow__st { position: relative; flex: none; display: flex; align-items: center; justify-content: flex-end; min-width: 28px; }
.rd-wrow.is-next .rd-wrow__bg { background: linear-gradient(90deg, rgba(226, 176, 74, .1), rgba(226, 176, 74, .02) 60%), var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-gold-line); }
.rd-wrow.is-done .rd-wrow__n { color: var(--rd-ink-2); }
.rd-wrow.is-done .rd-wrow__bg { background: linear-gradient(90deg, rgba(226, 176, 74, .16), rgba(226, 176, 74, .04) 70%), var(--rd-s1); }
.rd-root .rd-wrow:active .rd-wrow__bg { background: var(--rd-s2); }
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-wk { --rd-thw: 50px; --rd-rh: 74px; }
:where(.rd-short) .rd-wk__t { font-size: 32px; }
:where(.rd-short) .rd-wk__m { margin-top: 6px; }
:where(.rd-short) .rd-wk__prog { margin-top: 11px; }
:where(.rd-short) .rd-wk__list { margin-top: 12px; }

/* ------------------------------------------------------------------ exercise */
.rd-ex .rd-in { padding: 0 0 calc(150px + 24px); }
.rd-ex__media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0 0 30px 30px; background: #111; }
.rd-ex__media video { position: absolute; inset: -2px 0 0; width: 100%; height: calc(100% + 2px); object-fit: cover; }
.rd-ex__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(0deg, rgba(11, 11, 13, .78) 0%, rgba(11, 11, 13, 0) 26%);
}
.rd-ex__chip {
  position: absolute; left: 14px; bottom: 14px; height: 32px; padding: 0 12px 0 5px; border-radius: 16px;
  background: rgba(10, 10, 12, .55); color: #fff; font-size: 13px; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .18);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-ex__chip { background: rgba(10, 10, 12, .34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.rd-ex__chip .rd-av img { box-shadow: 0 0 0 1.5px var(--rd-gold); }
.rd-ex__vbar { position: absolute; right: 16px; bottom: 28px; width: 56px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.rd-ex__vbar i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.rd-ex__head { padding: 16px 18px 0; }
.rd-ex__t { font: 700 26px/1.1 var(--rd-sans); letter-spacing: -.025em; color: var(--rd-ink); }
.rd-ex__m { margin-top: 6px; font: 500 14px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-cue {
  display: flex; align-items: flex-start; gap: 12px; margin: 14px 16px 0; padding: 12px 14px 13px 12px; border-radius: 16px;
  background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line);
}
.rd-cue__b { flex: 1; min-width: 0; }
.rd-cue__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-cue__n { font: 650 12px/1 var(--rd-sans); color: var(--rd-muted); letter-spacing: .02em; }
.rd-cue__q { margin-top: 6px; font: 550 15px/1.35 var(--rd-sans); color: var(--rd-ink); letter-spacing: -.005em; }

.rd-sets { margin: 18px 12px 0; }
.rd-sets__hd, .rd-set { display: grid; grid-template-columns: 42px 1fr 74px 62px 46px; align-items: center; column-gap: 6px; }
.rd-sets__hd { height: 26px; padding: 0 4px; font: 700 10.5px/1 var(--rd-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rd-muted); }
.rd-sets__hd span { text-align: center; }
.rd-sets__hd span:nth-child(2) { text-align: left; padding-left: 4px; }
.rd-sets__ck { display: flex; justify-content: center; }
.rd-sets__ck svg { width: 14px; height: 14px; }
.rd-sets__body { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.rd-set { position: relative; height: 48px; padding: 0 4px; border-radius: 13px; }
.rd-set > * { position: relative; }
.rd-set__gold, .rd-set__flash { position: absolute !important; inset: 0; border-radius: inherit; pointer-events: none; }
.rd-set__gold {
  background: linear-gradient(90deg, rgba(226, 176, 74, .26), rgba(226, 176, 74, .1) 80%);
  box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .3);
  transform-origin: 0 50%; transform: scaleX(0);
}
.rd-set.is-done .rd-set__gold { transform: none; }
.rd-set__flash { background: linear-gradient(90deg, rgba(246, 212, 138, .75), rgba(226, 176, 74, .45)); opacity: 0; }
.rd-set__k { display: flex; justify-content: center; }
.rd-set__k b {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--rd-s2); font: 700 14px/1 var(--rd-fig); color: var(--rd-ink);
}
.rd-set.is-warm .rd-set__kb { color: var(--rd-gold); background: var(--rd-gold-soft); }
.rd-set__p { padding-left: 4px; font: 500 14px/1 var(--rd-fig); color: var(--rd-muted); white-space: nowrap; }
.rd-cell {
  display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 10px;
  background: var(--rd-s2); font: 650 16.5px/1 var(--rd-fig); color: var(--rd-ink);
  transition: background-color 200ms linear, color 200ms linear;
}
.rd-cell.is-ph { color: var(--rd-faint); }
/* each cell holds a real button */
.rd-set__c { display: flex; align-items: center; min-width: 0; }
.rd-set__c > .rd-cell { flex: 1; min-width: 0; }
.rd-set__c--ck { justify-content: center; }
.rd-check { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: -1px 0; }
.rd-check__box {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--rd-s3); color: #67635D; transition: background-color 180ms linear, color 180ms linear;
}
.rd-check__box svg { width: 17px; height: 17px; }
.rd-set.is-done .rd-cell { background: transparent; color: var(--rd-gold-hi); }
.rd-set.is-done .rd-set__p { color: rgba(246, 212, 138, .55); }
.rd-set.is-done .rd-set__kb { background: rgba(226, 176, 74, .2); color: var(--rd-gold-hi); }
.rd-set.is-done .rd-check__box { background: var(--rd-gold-grad); color: var(--rd-gold-ink); box-shadow: 0 6px 14px -6px rgba(226, 176, 74, .8); }
.rd-set.is-active { background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1.5px var(--rd-gold); }
.rd-set.is-active .rd-set__kb { background: var(--rd-gold); color: var(--rd-gold-ink); }
.rd-set.is-active .rd-check__box { box-shadow: inset 0 0 0 1.5px rgba(226, 176, 74, .5); color: var(--rd-gold); background: var(--rd-s2); }
.rd-addset {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 32px); height: 44px; margin: 10px 16px 0; border-radius: 13px;
  background: var(--rd-s1); color: var(--rd-ink-2); font: 650 15px/1 var(--rd-sans); box-shadow: inset 0 0 0 1px var(--rd-line);
  transition: transform 140ms var(--rd-out);
}
.rd-addset svg { width: 16px; height: 16px; color: var(--rd-gold); }

.rd-ex__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: calc(var(--rd-status) + 50px); pointer-events: none;
  background: rgba(11, 11, 13, .94); box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .1); opacity: 0;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-ex__bar { background: rgba(11, 11, 13, .8); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
}
.rd-ex__bar-t {
  position: absolute; left: 70px; right: 70px; top: calc(var(--rd-status) + 4px); height: 42px; display: flex; align-items: center; justify-content: center;
  font: 650 16px/1 var(--rd-sans); color: var(--rd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-ex__top {
  position: absolute; left: 12px; right: 12px; top: calc(var(--rd-status) + 2px); z-index: 7; height: 44px;
  display: flex; align-items: center; justify-content: space-between;
}
.rd-ex__clock { width: auto; height: 30px; padding: 0 11px 0 9px; gap: 6px; font: 650 13.5px/1 var(--rd-fig); color: #fff; }
.rd-ex__clock svg { width: 14px; height: 14px; color: var(--rd-gold); }
.rd-ex__top .rd-glass:not(.rd-ex__clock) svg { width: 22px; height: 22px; }

/* the logging dock */
.rd-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 11px 14px 34px; border-radius: 24px 24px 0 0;
  background: rgba(19, 19, 23, .97);
  box-shadow: inset 0 .75px 0 rgba(255, 255, 255, .1), 0 -18px 40px -10px rgba(0, 0, 0, .75);
  transform: translate3d(0, 110%, 0); opacity: 0;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-dock { background: rgba(19, 19, 23, .86); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
}
.rd-ex.is-dock .rd-dock { transform: none; opacity: 1; }
.rd-dock__hd { display: flex; align-items: baseline; justify-content: space-between; height: 18px; padding: 0 4px; }
.rd-dock__set { font: 700 12px/1 var(--rd-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rd-gold); }
.rd-dock__prev { font: 500 12.5px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-dock__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rd-step {
  flex: 1.15; display: flex; align-items: center; height: 58px; border-radius: 17px;
  background: var(--rd-s2); box-shadow: inset 0 0 0 1px var(--rd-line);
  transition: box-shadow 180ms linear;
}
.rd-step--r { flex: 1; }
.rd-step.is-hot { box-shadow: inset 0 0 0 1.5px var(--rd-gold), 0 0 0 4px rgba(226, 176, 74, .12); }
.rd-step__b { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 58px; color: var(--rd-ink-2); transition: transform 120ms var(--rd-out); }
.rd-step__b svg { width: 18px; height: 18px; }
.rd-step__v { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 58px; }
.rd-win { display: block; height: 23px; overflow: hidden; }
.rd-roll { display: flex; flex-direction: column; }
.rd-roll b { display: block; height: 23px; font: 750 22px/23px var(--rd-fig); color: var(--rd-ink); text-align: center; letter-spacing: -.01em; white-space: nowrap; }
.rd-step__v i { font: 700 10px/1 var(--rd-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rd-muted); }
.rd-dock__log {
  flex: none; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 17px;
  background: var(--rd-gold-grad); color: var(--rd-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, .5), 0 12px 24px -12px rgba(226, 176, 74, .8);
  transition: transform 140ms var(--rd-out), box-shadow 240ms linear;
}
.rd-dock__log svg { width: 26px; height: 26px; }
.rd-dock__log.is-on { box-shadow: inset 0 1px 0 rgba(255, 246, 220, .6), 0 0 0 5px rgba(226, 176, 74, .18), 0 14px 30px -10px rgba(226, 176, 74, .95); }
.rd-dock.is-idle .rd-step, .rd-dock.is-idle .rd-dock__log { opacity: .4; pointer-events: none; }

/* the list fades out under the home indicator while no dock covers the bottom (as iOS lists do) */
.rd-ex::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 40px; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 13, 0) 0, rgba(11, 11, 13, .82) 62%, rgba(11, 11, 13, .94) 100%);
  transition: opacity 200ms linear;
}
.rd-ex.is-dock::after { opacity: 0; }

/* a finger tap (story) */
.rd-tap {
  position: absolute; left: 0; top: 0; z-index: 9; width: 44px; height: 44px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 34%, rgba(255, 255, 255, .18) 35% 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 6px 18px rgba(0, 0, 0, .5);
}
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-ex__head { padding-top: 13px; }
:where(.rd-short) .rd-ex__t { font-size: 24px; }
:where(.rd-short) .rd-cue { margin-top: 11px; padding: 10px 12px 11px 10px; }
:where(.rd-short) .rd-sets { margin-top: 14px; }

/* ------------------------------------------------------------------ approved */
.rd-ap { position: absolute; inset: 0; z-index: 40; contain: strict; }
/* off: laid out but unseen (display: none would make its first frame on show compute every style and lay it all out) */
.rd-ap[hidden] { display: block; visibility: hidden; }
.rd-ap__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 50% at 50% 30%, rgba(226, 176, 74, .18), rgba(226, 176, 74, 0) 70%),
    rgba(5, 5, 6, .72);
}
.rd-ap__card {
  position: absolute; left: 22px; right: 22px; top: calc(var(--rd-status) + 66px);
  padding: 26px 18px 22px; border-radius: 32px; text-align: center;
  background: linear-gradient(180deg, #1D1D22 0%, #141417 100%);
  box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .3), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -24px rgba(0, 0, 0, .9);
}
.rd-ap__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 50% at 50% 0%, rgba(246, 212, 138, .16), rgba(246, 212, 138, 0) 70%);
}
.rd-ap__fw {
  position: relative; width: 204px; height: 204px; margin: 0 auto; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--rd-gold), 0 0 0 10px rgba(226, 176, 74, .14), 0 0 60px rgba(226, 176, 74, .35);
}
.rd-ap__face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #222;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.rd-ap__face video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transform: scale(1.12); transform-origin: 50% 30%; }
.rd-ap__stamp {
  position: absolute; left: 50%; top: calc(26px + 204px - 8px); z-index: 2;
  transform: translate(-50%, -50%) rotate(-7deg); opacity: 0;
}
.rd-ap.is-stamped .rd-ap__stamp { opacity: 1; }
.rd-ap__stamp-in {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 8px 11px; border-radius: 11px; white-space: nowrap;
  background: rgba(17, 17, 20, .96); color: var(--rd-gold);
  border: 3px solid var(--rd-gold);
  box-shadow: inset 0 0 0 2px rgba(17, 17, 20, .96), inset 0 0 0 3.25px var(--rd-gold), 0 14px 30px -10px rgba(0, 0, 0, .9), 0 0 30px rgba(226, 176, 74, .25);
  font: 400 31px/1 var(--rd-anton); letter-spacing: .05em; text-transform: uppercase;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the stamp's medallion is his face (outside the stamp's grunge mask): a gold ring, a small gold check on it */
.rd-ap__ck { display: inline-block; flex: none; width: 28px; height: 26px; }
.rd-ap__me { position: absolute; left: 11px; top: 50%; z-index: 1; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; }
.rd-ap__me img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 1.5px var(--rd-gold), 0 0 0 3.5px rgba(17, 17, 20, .96); }
.rd-ap__mck { position: absolute; right: -4px; bottom: -3px; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--rd-gold); color: #141417; box-shadow: 0 0 0 1.5px rgba(17, 17, 20, .96); }
.rd-ap__mck svg { width: 9px; height: 9px; }
.rd-ap__wave {
  position: absolute; left: 50%; top: calc(26px + 204px - 8px); z-index: 1; width: 250px; height: 76px; border-radius: 16px;
  border: 2px solid var(--rd-gold-hi); transform: translate(-50%, -50%) rotate(-7deg); opacity: 0; pointer-events: none;
}
.rd-ap__sparks { position: absolute; left: 50%; top: calc(26px + 204px - 8px); z-index: 1; width: 0; height: 0; }
.rd-ap__sparks i { position: absolute; left: -1.5px; top: -9px; width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(var(--rd-gold-hi), rgba(226, 176, 74, 0)); opacity: 0; }
.rd-ap__line { position: relative; margin-top: 44px; font: 650 15.5px/1.3 var(--rd-sans); color: var(--rd-ink); letter-spacing: -.005em; }
.rd-ap__delta { display: inline-block; color: var(--rd-gold-hi); font-weight: 750; }
.rd-ap__delta.is-flat { color: var(--rd-ink-2); }

/* ------------------------------------------------------------------ rest */
.rd-rest { display: flex; flex-direction: column; align-items: center; background: #09090B; }
.rd-rest__bg { position: absolute; inset: 0; overflow: hidden; }
.rd-rest__bg img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(30px) saturate(1.2); opacity: .3; }
.rd-rest__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .5) 0%, rgba(9, 9, 11, .2) 40%, #09090B 82%); }
.rd-rest__glow { position: absolute; left: 50%; top: 28%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 176, 74, .2), rgba(226, 176, 74, 0)); pointer-events: none; }
.rd-rest__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; margin-top: calc(var(--rd-status) + 2px); padding: 0 12px; }
.rd-rest__h { font: 650 17px/1 var(--rd-sans); color: var(--rd-ink); }
.rd-rest__sp { width: 44px; }
.rd-rest__ring { position: relative; z-index: 1; width: 292px; height: 292px; margin-top: 34px; }
.rd-ring { display: block; width: 100%; height: 100%; overflow: visible; }
.rd-ring__tr { fill: none; stroke: rgba(255, 255, 255, .08); }
.rd-ring__a { fill: none; stroke: var(--rd-gold); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.rd-rest__svg .rd-ring__tr, .rd-rest__svg .rd-ring__a { stroke-width: 9; }
.rd-rest__knob { position: absolute; inset: 0; pointer-events: none; }
.rd-rest__knob::after {
  content: ""; position: absolute; left: 50%; top: calc(100% * 4 / 264 - 7px); width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: #FFF6DC; box-shadow: 0 0 0 4px var(--rd-gold), 0 0 18px rgba(246, 212, 138, .9);
}
.rd-rest__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rd-rest__t { margin-top: 6px; font: 400 88px/1 var(--rd-anton); letter-spacing: .01em; color: var(--rd-ink); }
.rd-rest__of { margin-top: 10px; font: 600 14px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-rest.is-low .rd-rest__t { color: var(--rd-gold-hi); }
.rd-rest__next {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; width: calc(100% - 40px); margin-top: 34px; padding: 11px 14px 11px 11px; border-radius: 18px;
  background: rgba(22, 22, 26, .86); box-shadow: inset 0 0 0 1px var(--rd-line);
}
.rd-rest__next img { flex: none; width: 46px; height: 57.5px; border-radius: 10px; object-fit: cover; }
.rd-rest__next-t { font: 680 16.5px/1.2 var(--rd-sans); color: var(--rd-ink); }
.rd-rest__next-n { margin-top: 4px; font: 500 13.5px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-rest__ctl { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 44px; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px; }
.rd-rest__ctl .rd-pill { padding: 0; }
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-rest__ring { width: 264px; height: 264px; margin-top: 22px; }
:where(.rd-short) .rd-rest__t { font-size: 80px; }
:where(.rd-short) .rd-rest__next { margin-top: 24px; }
:where(.rd-short) .rd-rest__ctl { bottom: 38px; }

/* ------------------------------------------------------------------ summary */
.rd-sum { background: #09090B; }
.rd-sum__glow { position: absolute; left: -20%; right: -20%; top: -12%; height: 60%; background: radial-gradient(50% 50% at 50% 40%, rgba(226, 176, 74, .2), rgba(226, 176, 74, 0) 70%); pointer-events: none; }
.rd-sum .rd-in { padding-bottom: 130px; }
.rd-sum__top { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 14px; }
.rd-sum__medal {
  display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--rd-gold-grad); color: var(--rd-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, .6), 0 0 0 8px rgba(226, 176, 74, .12), 0 16px 40px -10px rgba(226, 176, 74, .7);
}
.rd-sum__medal svg { width: 30px; height: 30px; }
.rd-sum__t { margin-top: 16px; font: 400 42px/1 var(--rd-anton); letter-spacing: .01em; text-transform: uppercase; color: var(--rd-ink); }
.rd-sum__s { margin-top: 8px; font: 500 14.5px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-tiles { display: grid; grid-template-columns: 1.25fr 1fr .8fr; gap: 8px; margin-top: 22px; }
.rd-tile { padding: 13px 13px 14px; border-radius: 16px; background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-tile__v { margin-top: 8px; white-space: nowrap; }
.rd-tile__v b { font: 750 25px/1 var(--rd-fig); letter-spacing: -.02em; color: var(--rd-ink); }
.rd-tile__v span { font: 600 13px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-pr {
  position: relative; display: flex; align-items: center; gap: 13px; margin-top: 10px; padding: 13px 16px 13px 13px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(120deg, #F4D27F 0%, #E2B04A 46%, #C28E31 100%); color: var(--rd-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 248, 224, .6), 0 16px 34px -16px rgba(226, 176, 74, .8);
}
.rd-pr__ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(27, 19, 7, .9); color: var(--rd-gold-hi); }
.rd-pr__ic svg { width: 22px; height: 22px; }
.rd-pr__k { font: 800 11px/1 var(--rd-sans); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.rd-pr__t { margin-top: 5px; font: 750 16.5px/1.2 var(--rd-sans); letter-spacing: -.01em; }
.rd-pr__shine {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0));
  transform: translate3d(-150%, 0, 0) skewX(-16deg);
}
.rd-pr.is-shine .rd-pr__shine { transform: translate3d(360%, 0, 0) skewX(-16deg); transition: transform 1100ms cubic-bezier(.4, 0, .2, 1); }
.rd-rm .rd-pr.is-shine .rd-pr__shine { transition: none; }
.rd-chart { margin-top: 10px; padding: 15px 16px 12px; }
.rd-chart__hd { display: flex; align-items: flex-start; justify-content: space-between; }
.rd-chart__v { margin-top: 7px; }
.rd-chart__v b { font: 750 22px/1 var(--rd-fig); letter-spacing: -.02em; color: var(--rd-ink); }
.rd-chart__v span { font: 500 13px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-chart__up { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--rd-gold-soft); color: var(--rd-gold); font: 700 12px/1 var(--rd-fig); }
.rd-chart__up svg { width: 12px; height: 12px; }
.rd-chart__up.is-down { background: var(--rd-s2); color: var(--rd-muted); }
.rd-chart__plot { --ph: 96px; position: relative; display: flex; align-items: flex-end; height: calc(var(--ph) + 20px); margin-top: 16px; }
.rd-chart__grid { position: absolute; left: 0; right: 0; top: 0; height: var(--ph); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.rd-chart__grid i { height: 1px; background: rgba(255, 255, 255, .05); }
.rd-chart__col { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.rd-chart__bar {
  width: 58%; height: calc(var(--h, .5) * var(--ph)); border-radius: 6px 6px 3px 3px; background: var(--rd-s4);
  transform-origin: 50% 100%; transform: scaleY(1);
}
.rd-chart__bar.is-last { background: var(--rd-gold-grad); box-shadow: 0 0 22px -4px rgba(226, 176, 74, .6); }
.rd-chart__l { height: 20px; padding-top: 7px; font: 600 10px/1 var(--rd-fig); color: var(--rd-muted); letter-spacing: -.01em; }
.rd-chart__col:last-of-type .rd-chart__l { color: var(--rd-gold); }
.rd-chart__cap {
  position: absolute; left: calc(100% * 15 / 16); bottom: calc(20px + var(--h, .9) * var(--ph) + 7px);
  padding: 4px 7px; border-radius: 7px; background: var(--rd-gold); color: var(--rd-gold-ink); font: 750 11px/1 var(--rd-fig); white-space: nowrap;
  transform: translate3d(-50%, 0, 0);
}
.rd-sum__streak { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; font: 650 15px/1.2 var(--rd-sans); color: var(--rd-ink); }
.rd-sum__streak svg { width: 18px; height: 18px; }
.rd-sum__streak b { color: var(--rd-gold-hi); }
.rd-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 22px 16px 36px; background: linear-gradient(rgba(9, 9, 11, 0), #09090B 34%); }
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-sum__top { padding-top: 4px; }
:where(.rd-short) .rd-sum__medal { width: 54px; height: 54px; }
:where(.rd-short) .rd-sum__t { margin-top: 12px; font-size: 38px; }
:where(.rd-short) .rd-tiles { margin-top: 16px; }
:where(.rd-short) .rd-chart__plot { --ph: 74px; margin-top: 12px; }
:where(.rd-short) .rd-sum__streak { margin-top: 12px; }
:where(.rd-short) .rd-foot { padding-bottom: 30px; }

/* ------------------------------------------------------------------ macro rings (Today card, Fuel ring, Fuel bar) */
.rd-mring { display: block; width: 100%; height: 100%; overflow: visible; }
.rd-mring__tr { fill: none; stroke: rgba(255, 255, 255, .08); }
.rd-mring__a { fill: none; stroke-linecap: round; }
.rd-mring__p { stroke: var(--rd-gold); }
.rd-mring__c { stroke: #FBE3A8; }
.rd-mring__f { stroke: #8F5F22; }

/* ------------------------------------------------------------------ pillars (the title card) */
.rd-pl {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255, 244, 222, .1), rgba(255, 244, 222, 0) 70%),
    radial-gradient(70% 40% at 50% 52%, rgba(226, 176, 74, .1), rgba(226, 176, 74, 0) 70%),
    #070708;
}
.rd-pl__beam {
  position: absolute; left: 50%; top: -8%; width: 130%; height: 92%; margin-left: -65%; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, rgba(255, 244, 222, 0) 156deg, rgba(255, 244, 222, .08) 172deg, rgba(255, 244, 222, .13) 180deg, rgba(255, 244, 222, .08) 188deg, rgba(255, 244, 222, 0) 204deg);
}
.rd-pl__in { position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -56%); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rd-pl__w { display: flex; align-items: center; gap: 16px; transform-origin: 26px 50%; }
.rd-pl__ic {
  flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--rd-gold); background: rgba(226, 176, 74, .08); box-shadow: inset 0 0 0 1.5px rgba(226, 176, 74, .45);
  transition: background-color 240ms linear, color 240ms linear, box-shadow 240ms linear;
}
.rd-pl__ic svg { width: 28px; height: 28px; }
.rd-pl__ic .rd-fillable { fill: currentColor; fill-opacity: .2; }
.rd-pl__w.is-in .rd-pl__ic { background: var(--rd-gold-grad); color: var(--rd-gold-ink); box-shadow: 0 0 0 5px rgba(226, 176, 74, .1), 0 10px 26px -8px rgba(226, 176, 74, .7); }
.rd-pl__w.is-in .rd-pl__ic .rd-fillable { fill-opacity: .25; }
.rd-pl__t { font: 400 60px/1 var(--rd-anton); letter-spacing: .02em; text-transform: uppercase; color: var(--rd-ink); }
.rd-pl__w.is-in .rd-pl__t { text-shadow: 0 0 40px rgba(255, 244, 222, .16); }
.rd-pl__dot { display: block; width: 2px; height: 20px; margin-left: 25px; border-radius: 1px; background: linear-gradient(var(--rd-gold), rgba(226, 176, 74, .25)); box-shadow: 0 0 10px rgba(226, 176, 74, .5); transform-origin: 50% 0; }
.rd-pl__wm { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; justify-content: center; }
.rd-pl__wm .rd-wm { font-size: 22px; letter-spacing: .06em; opacity: .9; }
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-pl__t { font-size: 54px; } :where(.rd-short) .rd-pl__dot { height: 14px; }

/* ------------------------------------------------------------------ fuel (the AI meal plan) */
.rd-fu { background: #0A0A0C; }
.rd-fu__aura {
  position: absolute; left: 0; right: 0; top: 0; height: 330px; pointer-events: none;
  background: radial-gradient(230px 230px at 100% 0%, rgba(226, 176, 74, .2), rgba(226, 176, 74, .06) 55%, rgba(226, 176, 74, 0));
}
.rd-fu .rd-in { padding-top: calc(var(--rd-status) + 2px); padding-bottom: calc(var(--rd-tb) + 132px); }
.rd-fu__hd { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.rd-fu__t { display: flex; align-items: center; gap: 10px; font: 400 46px/1 var(--rd-anton); letter-spacing: .015em; text-transform: uppercase; color: var(--rd-ink); }
.rd-fu__sp {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--rd-gold-grad); color: var(--rd-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, .55), 0 10px 26px -8px rgba(226, 176, 74, .7);
}
.rd-fu__sp svg { width: 24px; height: 24px; }
.rd-fu__av img { box-shadow: 0 0 0 1.5px var(--rd-gold), 0 0 0 5px rgba(226, 176, 74, .12); }
.rd-fu__tag { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rd-fu__ai { font: 600 13.5px/1.2 var(--rd-sans); color: var(--rd-ink-2); }
.rd-fu__ai b { font-weight: 800; color: var(--rd-gold); letter-spacing: .06em; }
.rd-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 44px; margin-top: 16px; padding: 3px; border-radius: 14px; background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-seg__th {
  position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 3); border-radius: 11px;
  background: var(--rd-gold-grad); box-shadow: inset 0 1px 0 rgba(255, 246, 220, .55), 0 6px 16px -8px rgba(226, 176, 74, .8);
  transition: transform 420ms var(--rd-spring);
}
.rd-seg__b { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font: 650 14px/1 var(--rd-sans); color: var(--rd-ink-2); transition: color 200ms linear; }
.rd-seg__b.is-on { color: var(--rd-gold-ink); }
.rd-fu__in { display: flex; gap: 6px; margin-top: 10px; }
.rd-inp { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border-radius: 15px; box-shadow: inset 0 0 0 1px var(--rd-line-2); font: 600 12.5px/1 var(--rd-sans); color: var(--rd-muted); white-space: nowrap; }
.rd-inp b { font: 700 13px/1 var(--rd-fig); color: var(--rd-ink); }
.rd-ask {
  position: relative; display: flex; align-items: center; gap: 10px; height: 56px; margin-top: 12px; padding: 0 7px 0 14px; border-radius: 19px;
  background: linear-gradient(180deg, #1A1A1F, #141418); box-shadow: inset 0 0 0 1px var(--rd-line-2), 0 18px 34px -24px rgba(0, 0, 0, .9);
  transition: box-shadow 260ms linear;
}
.rd-ask.is-typing, .rd-ask.is-gen { box-shadow: inset 0 0 0 1.5px rgba(226, 176, 74, .62), 0 0 0 4px rgba(226, 176, 74, .08), 0 18px 34px -20px rgba(226, 176, 74, .35); }
.rd-ask.is-done { box-shadow: inset 0 0 0 1px rgba(226, 176, 74, .34); }
.rd-ask__ic { flex: none; display: flex; color: var(--rd-gold); }
.rd-ask__ic svg { width: 19px; height: 19px; }
.rd-ask__tx { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 24px; overflow: hidden; white-space: nowrap; font: 550 15px/24px var(--rd-sans); color: var(--rd-ink); letter-spacing: -.005em; }
.rd-ask__ty { flex: none; white-space: nowrap; }
.rd-ask.is-long .rd-ask__tx { justify-content: flex-end; }
.rd-ask.is-done.is-long .rd-ask__tx { justify-content: flex-start; }
.rd-ask.is-done.is-long .rd-ask__ty { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rd-ask__ph { position: absolute; left: 0; top: 0; color: var(--rd-faint); }
.rd-caret { flex: none; display: inline-block; width: 2px; height: 19px; margin-left: 1px; border-radius: 1px; background: var(--rd-gold); }
@keyframes rd-blink { 50% { visibility: hidden; } }
.rd-ask__go {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px; overflow: hidden;
  background: var(--rd-gold-grad); color: var(--rd-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, .55), 0 8px 20px -10px rgba(226, 176, 74, .9);
}
.rd-ask__go > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 160ms linear; }
.rd-ask__go svg { width: 20px; height: 20px; }
.rd-ask__go-b, .rd-ask__go-c { opacity: 0; }
.rd-ask.is-gen .rd-ask__go-a, .rd-ask.is-done .rd-ask__go-a { opacity: 0; }
.rd-ask.is-gen .rd-ask__go-b { opacity: 1; }
.rd-ask.is-done .rd-ask__go-c { opacity: 1; }
.rd-ask__go-c svg { width: 20px; height: 20px; }
.rd-ask__glow { position: absolute; inset: -5px; border-radius: 23px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px rgba(246, 212, 138, .9), 0 0 30px rgba(226, 176, 74, .55); }
.rd-fu__st { display: flex; align-items: center; gap: 8px; height: 20px; margin: 12px 2px 0; font: 600 13.5px/20px var(--rd-sans); color: var(--rd-gold-hi); white-space: nowrap; }
.rd-fu__pulse { display: flex; color: var(--rd-gold); }
.rd-fu__pulse svg { width: 16px; height: 16px; }
.rd-fu__st.is-done { color: var(--rd-ink); }
.rd-shim { position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; }
.rd-shim i {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%;
  background: linear-gradient(90deg, rgba(226, 176, 74, 0) 0%, rgba(226, 176, 74, .07) 38%, rgba(246, 212, 138, .34) 49%, rgba(255, 241, 204, .85) 50%, rgba(246, 212, 138, .34) 51%, rgba(226, 176, 74, .07) 62%, rgba(226, 176, 74, 0) 100%);
  transform: translate3d(-130%, 0, 0) skewX(-18deg);
}
.rd-mac { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding: 14px 16px 14px 14px; overflow: hidden; }
.rd-mac::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 90% at 0% 50%, rgba(226, 176, 74, .1), rgba(226, 176, 74, 0) 70%); }
.rd-mac__ring { position: relative; flex: none; width: 124px; height: 124px; }
.rd-mac__svg .rd-mring__tr, .rd-mac__svg .rd-mring__a { stroke-width: 10; }
.rd-mac__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.rd-mac__k { font: 400 31px/1 var(--rd-anton); letter-spacing: .01em; color: var(--rd-ink); }
.rd-mac__c span { font: 700 10px/1 var(--rd-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rd-muted); }
.rd-mac.is-sk .rd-mac__k { color: var(--rd-faint); }
.rd-mac__l { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.rd-mac__r { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; column-gap: 8px; row-gap: 6px; }
.rd-mac__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-gold); }
.rd-mac__r--c .rd-mac__dot { background: #FBE3A8; } .rd-mac__r--f .rd-mac__dot { background: #8F5F22; }
.rd-mac__n { font: 600 13px/1 var(--rd-sans); color: var(--rd-ink-2); }
.rd-mac__g { font: 750 15px/1 var(--rd-fig); color: var(--rd-ink); letter-spacing: -.01em; }
.rd-mac__b { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 3px; background: var(--rd-s3); overflow: hidden; }
.rd-mac__b i { position: absolute; inset: 0; border-radius: 3px; background: var(--rd-gold); transform-origin: 0 50%; transform: scaleX(0); }
.rd-mac__r--c .rd-mac__b i { background: #FBE3A8; } .rd-mac__r--f .rd-mac__b i { background: #8F5F22; }

.rd-meals { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rd-meal { position: relative; display: flex; gap: 12px; }
.rd-meal__tl { position: relative; flex: none; width: 40px; padding: 13px 10px 0 0; text-align: right; }
.rd-meal__tl b { font: 700 12.5px/1 var(--rd-fig); color: var(--rd-muted); letter-spacing: -.01em; }
.rd-meal__tl::before { content: ""; position: absolute; right: -1px; top: 0; bottom: -8px; width: 1px; background: var(--rd-line-2); }
.rd-meal:first-child .rd-meal__tl::before { top: 20px; }
.rd-meal:last-child .rd-meal__tl::before { bottom: auto; height: 20px; }
.rd-meal__tl i { position: absolute; right: -5px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--rd-s4); box-shadow: 0 0 0 3px #0A0A0C; transition: background-color 200ms linear, box-shadow 200ms linear; }
.rd-meal.is-in .rd-meal__dot { background: var(--rd-gold); box-shadow: 0 0 0 3px #0A0A0C, 0 0 12px rgba(226, 176, 74, .8); }
.rd-meal.is-in .rd-meal__hr { color: var(--rd-ink-2); }
.rd-meal__c { position: relative; flex: 1; min-width: 0; min-height: 96px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-meal__c.is-pre { background: linear-gradient(100deg, rgba(226, 176, 74, .08), rgba(226, 176, 74, 0) 60%), var(--rd-s1); }
.rd-meal__sk { position: absolute; left: 14px; right: 14px; top: 15px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.rd-meal__sk i { height: 10px; border-radius: 5px; background: var(--rd-s3); }
.rd-meal__sk i.rd-meal__sk-rec { width: 100%; height: 50px; border-radius: 12px; margin-top: 4px; }
.rd-meal__sk i:nth-child(1) { width: 68%; height: 13px; } .rd-meal__sk i:nth-child(2) { width: 88%; } .rd-meal__sk i:nth-child(3) { width: 46%; height: 20px; border-radius: 7px; margin-top: 2px; }
.rd-meal__in { position: relative; }
.rd-meal__hd { display: flex; align-items: flex-start; gap: 10px; }
.rd-meal__t { flex: 1; min-width: 0; font: 650 15.5px/1.25 var(--rd-sans); letter-spacing: -.012em; color: var(--rd-ink); }
.rd-meal__sw {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; margin: -3px -3px 0 0; padding: 0 10px 0 8px; border-radius: 15px;
  background: var(--rd-s2); box-shadow: inset 0 0 0 1px var(--rd-line-2); color: var(--rd-gold); font: 650 12.5px/1 var(--rd-sans);
  transition: transform 140ms var(--rd-out);
}
.rd-meal__sw::after { content: ""; position: absolute; inset: -7px -4px; }
.rd-meal__sw svg { width: 14px; height: 14px; }
.rd-root .rd-meal__sw:active { transform: scale(.94); }
.rd-meal__q { margin-top: 4px; font: 500 12.5px/1.3 var(--rd-sans); color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-meal__mac { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.rd-meal__mac > span { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--rd-s2); font: 650 11.5px/1 var(--rd-fig); color: var(--rd-ink-2); }
.rd-meal__mac > span i { margin-right: 4px; font-weight: 800; color: var(--rd-gold); }
.rd-meal__cc i { color: #FBE3A8 !important; } .rd-meal__f i { color: #B57A30 !important; }
.rd-meal__k { margin-left: auto; font: 760 14.5px/1 var(--rd-fig); color: var(--rd-ink); letter-spacing: -.01em; white-space: nowrap; }
.rd-meal__k span { font: 600 11px/1 var(--rd-sans); color: var(--rd-muted); letter-spacing: 0; }
.rd-meal__rec { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 8px 6px 6px; border-radius: 12px; background: var(--rd-s2); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-meal__rec img { flex: none; width: 68px; height: 38px; border-radius: 8px; object-fit: cover; }
.rd-meal__rx { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rd-meal__rt { max-width: 100%; font: 600 11.5px/1.2 var(--rd-sans); color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-meal__pl { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(226, 176, 74, .16); color: var(--rd-gold); }
.rd-meal__pl svg { width: 12px; height: 12px; margin-left: 2px; }
.rd-meal__ok {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(246, 212, 138, .14), rgba(226, 176, 74, 0) 55%);
  box-shadow: inset 0 0 0 1.5px var(--rd-gold), 0 0 26px -6px rgba(226, 176, 74, .7);
}
.rd-meal__c.is-busy .rd-meal__in { opacity: .3; transition: opacity 160ms linear; }
.rd-meal__c.is-busy .rd-shim { opacity: 1; }
.rd-meal__c.is-busy .rd-shim__i { animation: rd-scan 900ms linear infinite; }
@keyframes rd-scan { from { transform: translate3d(-130%, 0, 0) skewX(-18deg); } to { transform: translate3d(230%, 0, 0) skewX(-18deg); } }
.rd-meal--train .rd-meal__tl { padding-top: 13px; }
.rd-meal--train .rd-meal__tl i { top: 15px; background: var(--rd-gold-hi); }
.rd-train {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px 0 11px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(226, 176, 74, .18), rgba(226, 176, 74, .04)); box-shadow: inset 0 0 0 1px var(--rd-gold-line);
  font: 600 13.5px/1 var(--rd-sans); color: var(--rd-ink-2); white-space: nowrap;
}
.rd-train svg { flex: none; width: 19px; height: 19px; color: var(--rd-gold); }
.rd-train b { font-weight: 750; color: var(--rd-gold-hi); }
.rd-train__m { margin-left: auto; font: 650 12px/1 var(--rd-fig); color: var(--rd-muted); }
.rd-sec--kit { margin-top: 24px; }
.rd-kit { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px; overflow: hidden; scroll-padding: 0 16px; }
.rd-kit, .rd-chat__sug, .rd-drill__poses { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rd-kit::-webkit-scrollbar, .rd-chat__sug::-webkit-scrollbar, .rd-drill__poses::-webkit-scrollbar { display: none; }
.rd-kit__i { flex: none; width: 160px; text-align: left; scroll-snap-align: start; }
.rd-kit__img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--rd-s2); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-kit__img img { width: 100%; height: 100%; object-fit: cover; }
.rd-kit__t { display: block; margin-top: 8px; font: 650 14px/1.2 var(--rd-sans); color: var(--rd-ink); }
.rd-kit__m { display: block; margin-top: 3px; font: 500 12px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-rt__pl { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(10, 10, 12, .6); color: #fff; }
.rd-rt__pl svg { width: 12px; height: 12px; margin-left: 1px; }

.rd-fu__bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px;
  height: calc(var(--rd-status) + 46px); padding: var(--rd-status) 16px 0;
  background: rgba(10, 10, 12, .94); box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .1); opacity: 0; visibility: hidden; pointer-events: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-fu__bar { background: rgba(10, 10, 12, .9); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
}
.rd-fu__scrim { position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: calc(var(--rd-status) + 26px); pointer-events: none; opacity: 0; background: linear-gradient(#0A0A0C 0%, #0A0A0C 62%, rgba(10, 10, 12, 0) 100%); }
.rd-fu__bar-r { flex: none; width: 30px; height: 30px; }
.rd-fu__bar-r .rd-mring__tr, .rd-fu__bar-r .rd-mring__a { stroke-width: 4; }
.rd-fu__bar-k { font: 600 13px/1 var(--rd-sans); color: var(--rd-muted); white-space: nowrap; }
.rd-fu__bar-k b { font: 760 17px/1 var(--rd-fig); color: var(--rd-ink); letter-spacing: -.01em; }
.rd-fu__bar-m { margin-left: auto; font: 650 12.5px/1 var(--rd-fig); color: var(--rd-muted); white-space: nowrap; }

.rd-chat {
  position: absolute; left: 0; right: 0; bottom: var(--rd-tb); z-index: 8; padding: 14px 12px 10px;
  background: linear-gradient(rgba(10, 10, 12, 0) 0px, rgba(10, 10, 12, .92) 12px, #0A0A0C 24px);
  visibility: hidden;
}
.rd-chat__sug { display: flex; gap: 6px; margin: 0 -12px; padding: 0 12px; overflow: hidden; overflow-x: auto; scroll-padding: 0 12px; }
/* rows that run past the glass fade out at its edge (they scroll in the live phone) instead of cutting a word */
.rd-chat__sug, .rd-drill__poses {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.rd-sug {
  position: relative; flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 17px; scroll-snap-align: start;
  background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-gold-line); color: var(--rd-ink); font: 600 13px/1 var(--rd-sans); white-space: nowrap;
  transition: background-color 200ms linear, color 200ms linear, transform 140ms var(--rd-out);
}
.rd-sug::after { content: ""; position: absolute; inset: -5px 0; }
.rd-sug.is-on { background: var(--rd-gold); color: var(--rd-gold-ink); }
.rd-root .rd-sug:active { transform: scale(.95); }
.rd-chat__in { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 9px; padding: 0 6px 0 15px; border-radius: 24px; background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line-2); }
.rd-chat__ic { display: flex; color: var(--rd-gold); }
.rd-chat__ic svg { width: 18px; height: 18px; }
.rd-chat__ph { flex: 1; font: 550 15px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-chat__go { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rd-s3); color: var(--rd-muted); }
.rd-chat__go svg { width: 17px; height: 17px; }

.rd-bub { position: absolute; left: 14px; right: 14px; bottom: calc(var(--rd-tb) + 118px); z-index: 9; display: none; }
.rd-bub::before { content: ""; position: absolute; left: -14px; right: -14px; top: -56px; bottom: -6px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(10, 10, 12, 0), rgba(10, 10, 12, .82) 36%, rgba(10, 10, 12, .92)); }
.rd-bub.is-on { display: block; }
.rd-bub__q {
  width: max-content; max-width: 78%; margin-left: auto; padding: 10px 14px; border-radius: 18px 18px 5px 18px;
  background: var(--rd-gold-grad); color: var(--rd-gold-ink); font: 650 14.5px/1.25 var(--rd-sans);
  box-shadow: 0 14px 30px -14px rgba(226, 176, 74, .7);
}
.rd-bub__a { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.rd-bub__b {
  position: relative; flex: 1; min-width: 0; padding: 10px 12px 13px 14px; border-radius: 18px 18px 18px 5px;
  background: rgba(30, 30, 35, .98); box-shadow: inset 0 0 0 1px var(--rd-line-2), 0 24px 50px -16px rgba(0, 0, 0, .95);
}
.rd-bub__hd { display: flex; align-items: center; gap: 8px; height: 22px; }
.rd-bub__n { font: 750 12px/1 var(--rd-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--rd-gold); }
.rd-bub__x { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -2px -4px 0 auto; border-radius: 13px; background: var(--rd-s3); color: var(--rd-ink-2); }
.rd-bub__x::after { content: ""; position: absolute; inset: -9px; }
.rd-bub__t { margin-top: 6px; font: 550 15px/1.38 var(--rd-sans); color: var(--rd-ink); letter-spacing: -.005em; }
.rd-bub__dots { display: none; gap: 5px; margin-top: 10px; height: 8px; }
.rd-bub.is-typing .rd-bub__dots { display: flex; }
.rd-bub.is-typing .rd-bub__t { display: none; }
.rd-bub__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-gold); }
.rd-bub__dots i:nth-child(2) { animation-delay: .15s; } .rd-bub__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rd-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-fu__hd { height: 46px; }
:where(.rd-short) .rd-fu__t { font-size: 42px; }
:where(.rd-short) .rd-seg { margin-top: 12px; }
:where(.rd-short) .rd-ask { margin-top: 10px; height: 52px; }
:where(.rd-short) .rd-mac__ring { width: 112px; height: 112px; }
:where(.rd-short) .rd-mac { margin-top: 10px; padding: 12px 14px 12px 12px; }

/* ------------------------------------------------------------------ posing academy */
.rd-po { background: #09090B; }
.rd-po .rd-in { padding-top: 0; }
.rd-po__hero { position: relative; height: 290px; margin: 0 -16px; overflow: hidden; background: #0E0E10; }
.rd-po__img { position: absolute; inset: 0; overflow: hidden; }
.rd-po__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transform-origin: 50% 30%; }
.rd-po__beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% -4%, rgba(255, 244, 222, .22), rgba(255, 244, 222, 0) 70%); }
.rd-po__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 24%, rgba(9, 9, 11, 0) 40%, rgba(9, 9, 11, .8) 74%, #09090B 100%); }
.rd-po__hd { position: absolute; left: 16px; right: 16px; bottom: 4px; }
.rd-po__t { display: flex; flex-direction: column; font: 400 54px/.92 var(--rd-anton); letter-spacing: .012em; text-transform: uppercase; }
.rd-po__t span {
  display: block; width: max-content; color: transparent;
  background: linear-gradient(100deg, #D9A23C 0%, #F6D48A 40%, #FFF1CC 50%, #F6D48A 60%, #E2B04A 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .65));
}
.rd-po__by { margin-top: 9px; font: 600 14px/1.2 var(--rd-sans); color: var(--rd-ink); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.rd-po__prog { margin-top: 14px; padding: 12px 14px 13px; border-radius: 16px; background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-po__pt { display: flex; align-items: baseline; justify-content: space-between; font: 600 13px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-po__pt b { color: var(--rd-ink); font-weight: 750; }
.rd-po__pc { font: 750 13px/1 var(--rd-fig) !important; color: var(--rd-gold) !important; }
.rd-po__bar { display: block; position: relative; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--rd-s3); overflow: hidden; }
.rd-po__bar i { position: absolute; inset: 0; border-radius: 3px; background: var(--rd-gold-grad); transform-origin: 0 50%; transform: scaleX(.36); }
.rd-sec--po { margin: 20px 2px 10px; font-size: 18px; }
.rd-mods { display: flex; flex-direction: column; gap: 8px; }
.rd-mod {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 78px; padding: 0 12px 0 9px; border-radius: 18px; text-align: left;
  background: var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-line); transition: transform 160ms var(--rd-out);
}
.rd-mod.is-part { background: linear-gradient(95deg, rgba(226, 176, 74, .12), rgba(226, 176, 74, .02) 60%), var(--rd-s1); box-shadow: inset 0 0 0 1px var(--rd-gold-line); }
.rd-mod__th { position: relative; flex: none; width: 104px; height: 60px; border-radius: 11px; overflow: hidden; background: var(--rd-s3); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.rd-mod__th img { width: 100%; height: 100%; object-fit: cover; }
.rd-mod__blur { filter: blur(5px) brightness(.55) saturate(.7); transform: scale(1.2); object-position: 50% 20%; }
.rd-mod__pl { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(10, 10, 12, .58); color: #fff; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .25); }
.rd-mod__pl svg { width: 12px; height: 12px; margin-left: 2px; }
.rd-mod__veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(9, 9, 11, .5); color: var(--rd-ink-2); }
.rd-mod__veil svg { width: 18px; height: 18px; }
.rd-mod__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .22); }
.rd-mod__line i { position: absolute; inset: 0; background: var(--rd-gold); transform-origin: 0 50%; }
.rd-mod__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rd-mod__k { font: 700 10.5px/1.1 var(--rd-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--rd-muted); }
.rd-mod.is-part .rd-mod__k { color: var(--rd-gold); }
.rd-mod__t { font: 650 14.5px/1.22 var(--rd-sans); letter-spacing: -.01em; color: var(--rd-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-mod__m { font: 500 12px/1.2 var(--rd-sans); color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-mod.is-lock .rd-mod__t { color: var(--rd-ink-2); }
.rd-mod__st { flex: none; display: flex; align-items: center; justify-content: flex-end; min-width: 36px; }
.rd-mod__pr { position: relative; width: 38px; height: 38px; }
.rd-mod__ring .rd-ring__tr, .rd-mod__ring .rd-ring__a { stroke-width: 3; }
.rd-mod__ring .rd-ring__a { stroke-dashoffset: .58; }
.rd-mod__pr b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 750 10px/1 var(--rd-fig); color: var(--rd-gold-hi); letter-spacing: -.02em; }
.rd-mod__lk { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rd-s2); color: var(--rd-muted); }
.rd-mod__lk svg { width: 14px; height: 14px; }
.rd-root .rd-mod:active { transform: scale(.985); }

.rd-drill { padding: 16px 14px 14px; overflow: hidden; background: radial-gradient(90% 70% at 0% 0%, rgba(226, 176, 74, .13), rgba(226, 176, 74, 0) 60%), var(--rd-s1); }
.rd-drill__top { display: flex; align-items: center; gap: 16px; }
.rd-drill__ring { position: relative; flex: none; width: 128px; height: 128px; border-radius: 50%; transition: transform 160ms var(--rd-out); }
.rd-drill__svg .rd-ring__tr, .rd-drill__svg .rd-ring__a { stroke-width: 8; }
.rd-drill__svg .rd-ring__a { stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(226, 176, 74, .55)); }
.rd-drill__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rd-drill__n { font: 400 48px/1 var(--rd-anton); color: var(--rd-ink); letter-spacing: .01em; }
.rd-drill__u { font: 700 10px/1 var(--rd-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rd-muted); }
.rd-drill__go { position: absolute; left: 50%; bottom: 2px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--rd-gold-grad); color: var(--rd-gold-ink); box-shadow: 0 0 0 4px var(--rd-s1), 0 6px 14px -4px rgba(226, 176, 74, .8); }
.rd-drill__go svg { width: 12px; height: 12px; margin-left: 2px; }
.rd-drill__ok { position: absolute; left: 50%; top: 50%; display: none; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--rd-gold-grad); color: var(--rd-gold-ink); box-shadow: 0 0 0 8px rgba(226, 176, 74, .14), 0 14px 30px -8px rgba(226, 176, 74, .8); }
.rd-drill__ok svg { width: 34px; height: 34px; }
.rd-drill.is-hold .rd-drill__go, .rd-drill.is-ok .rd-drill__go, .rd-drill.is-ok .rd-drill__c { display: none; }
.rd-drill.is-ok .rd-drill__ok { display: flex; }
.rd-drill.is-hold .rd-drill__n { color: var(--rd-gold-hi); }
.rd-drill__tx { flex: 1; min-width: 0; }
.rd-drill__k { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-drill__k .rd-num { font: 700 11px/1 var(--rd-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--rd-gold); }
.rd-drill__t { margin-top: 7px; font: 700 20px/1.12 var(--rd-sans); letter-spacing: -.02em; color: var(--rd-ink); }
.rd-drill__cues { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.rd-drill__cues li { display: flex; align-items: flex-start; gap: 8px; font: 550 13.5px/1.3 var(--rd-sans); color: var(--rd-muted); transition: color 200ms linear; }
.rd-drill__cues li i { flex: none; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: -.5px; border-radius: 50%; background: var(--rd-s3); font: 700 10.5px/1 var(--rd-fig); color: var(--rd-ink-2); transition: background-color 200ms linear, color 200ms linear; }
.rd-drill__cues li.is-on { color: var(--rd-ink); }
.rd-drill__cues li.is-on .rd-drill__n { background: var(--rd-gold); color: var(--rd-gold-ink); }
.rd-drill__poses { display: flex; gap: 6px; margin: 14px -14px 0; padding: 0 14px; overflow: hidden; overflow-x: auto; scroll-padding: 0 14px; }
.rd-dp {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 6px; border-radius: 18px; scroll-snap-align: start;
  background: var(--rd-s2); box-shadow: inset 0 0 0 1px var(--rd-line); font: 600 13px/1 var(--rd-sans); color: var(--rd-ink-2); white-space: nowrap;
  transition: box-shadow 200ms linear, color 200ms linear;
}
.rd-dp::after { content: ""; position: absolute; inset: -4px 0; }
.rd-dp__n { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rd-s3); font: 700 10.5px/1 var(--rd-fig); color: var(--rd-muted); }
.rd-dp__ok { display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rd-gold); color: var(--rd-gold-ink); order: -1; }
.rd-dp__ok svg { width: 13px; height: 13px; }
.rd-dp.is-on { box-shadow: inset 0 0 0 1.5px var(--rd-gold); color: var(--rd-ink); }
.rd-dp.is-on .rd-dp__n { background: var(--rd-gold); color: var(--rd-gold-ink); }
.rd-dp.is-done .rd-dp__n { display: none; }
.rd-dp.is-done .rd-dp__ok { display: flex; }
.rd-po__nav {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: calc(var(--rd-status) + 44px); padding-top: var(--rd-status);
  display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden;
  background: rgba(9, 9, 11, .94); box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .1);
  font: 650 16px/1 var(--rd-sans); color: var(--rd-ink);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-po__nav { background: rgba(9, 9, 11, .95); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
}
/* the short glass (≤ 824 px tall; was a container query: a class keeps mode switches from restyling the whole app in layout) */
:where(.rd-short) .rd-po__hero { height: 250px; }
:where(.rd-short) .rd-po__t { font-size: 48px; }
:where(.rd-short) .rd-mod { height: 72px; }
:where(.rd-short) .rd-mod__th { width: 96px; height: 54px; }
:where(.rd-short) .rd-sec--po { margin: 16px 2px 8px; }

/* ------------------------------------------------------------------ status bar scrim (scrolled screens) */
.rd-sbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: calc(var(--rd-status) + 16px); pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(11, 11, 13, .97) 0, rgba(11, 11, 13, .9) 64%, rgba(11, 11, 13, 0) 100%);
  transition: opacity 160ms linear;
}
.rd-layer.is-scrolled .rd-sbar { opacity: 1; }
.rd-sbar--t {
  height: calc(var(--rd-status) + 44px); padding-top: var(--rd-status);
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 13, .95); box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, 0); transition: opacity 160ms linear, box-shadow 200ms linear;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rd-sbar--t { background: rgba(11, 11, 13, .82); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
}
.rd-sbar--t span { font: 650 16px/1 var(--rd-sans); color: var(--rd-ink); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 180ms linear, transform 260ms var(--rd-out); }
.rd-layer.is-titled .rd-sbar--t { box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .1); }
.rd-layer.is-titled .rd-sbar__t { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ progress */
.rd-pg__hd { margin-top: 2px; }
.rd-pg__t { font: 400 36px/1 var(--rd-anton); letter-spacing: .01em; text-transform: uppercase; color: var(--rd-ink); }
.rd-pg__s { margin-top: 7px; font: 500 14px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-pg__card { margin-top: 10px; padding: 13px 16px; }
.rd-pg__hd + .rd-pg__card { margin-top: 16px; }
.rd-pg__ch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rd-pg__cm { font: 500 12px/1 var(--rd-sans); color: var(--rd-muted); }
.rd-parts { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.rd-parts li { display: grid; grid-template-columns: 74px 1fr 56px; align-items: center; gap: 10px; height: 19px; }
.rd-parts__l { font: 600 13.5px/1 var(--rd-sans); color: var(--rd-ink-2); }
.rd-parts__b { position: relative; height: 8px; border-radius: 4px; background: var(--rd-s3); overflow: hidden; }
.rd-parts__b i { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, rgba(226, 176, 74, .45), rgba(226, 176, 74, .8)); transform-origin: 0 50%; transform: scaleX(var(--k)); }
.rd-parts li:first-child .rd-parts__b i { background: var(--rd-gold-grad); }
.rd-parts__v { font: 650 12.5px/1 var(--rd-fig); color: var(--rd-muted); text-align: right; }
.rd-prs { display: flex; flex-direction: column; margin-top: 8px; }
.rd-prs li { display: flex; align-items: center; gap: 12px; height: 47px; }
.rd-prs li + li { box-shadow: inset 0 1px 0 var(--rd-line); }
.rd-prs__th { flex: none; width: 32px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--rd-s3); }
.rd-prs__th img { width: 100%; height: 100%; object-fit: cover; }
.rd-prs__tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rd-prs__n { font: 650 14.5px/1.2 var(--rd-sans); color: var(--rd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-prs__d { font: 500 12px/1.2 var(--rd-sans); color: var(--rd-muted); }
.rd-prs__v { font: 750 16px/1 var(--rd-fig); color: var(--rd-ink); white-space: nowrap; }
.rd-prs li.is-new .rd-prs__v { color: var(--rd-gold-hi); }
.rd-cal__h { display: inline-flex; align-items: center; gap: 6px; font: 650 15px/1 var(--rd-sans); color: var(--rd-ink); }
.rd-cal__h svg { width: 17px; height: 17px; }
.rd-cal__h b { color: var(--rd-gold-hi); }
.rd-cal__dn, .rd-cal__g { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.rd-cal__dn { margin-top: 12px; font: 650 10.5px/1 var(--rd-sans); color: var(--rd-muted); letter-spacing: .04em; }
.rd-cal__g { row-gap: 4px; margin-top: 7px; }
.rd-cd { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; }
.rd-cd i { font: 650 11.5px/1 var(--rd-fig); color: var(--rd-faint); }
.rd-cd.is-old { background: var(--rd-s3); }
.rd-cd.is-old .rd-cd__n { color: var(--rd-muted); }
.rd-cd.is-on { background: var(--rd-gold); }
.rd-cd.is-on .rd-cd__n { color: var(--rd-gold-ink); font-weight: 750; }
.rd-cd.is-today { box-shadow: 0 0 0 2px var(--rd-bg), 0 0 0 3.5px var(--rd-gold-hi); }
.rd-cd.is-future .rd-cd__n { color: #3E3B38; }

/* ------------------------------------------------------------------ ambient loops (decorative; the OS setting stops them)
   Each loop runs only while its screen is on show: an infinite animation in a hidden layer still costs a style
   update on every frame. */
@keyframes rd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 176, 74, .45); } 60% { box-shadow: 0 0 0 7px rgba(226, 176, 74, 0); } }
.rd-wk.is-on .rd-wrow.is-next .rd-chip--gold { animation: rd-pulse 2.4s ease-out infinite; }
@keyframes rd-breathe { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.rd-rest.is-on .rd-rest__glow { animation: rd-breathe 4s ease-in-out infinite; }
.rd-fu.is-on .rd-caret { animation: rd-blink 1s steps(1) infinite; }
.rd-fu.is-on .rd-bub.is-typing .rd-bub__dot { animation: rd-dot 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .rd-root .rd-wrow.is-next .rd-chip--gold, .rd-root .rd-rest__glow, .rd-root .rd-caret, .rd-root .rd-bub__dots i { animation: none !important; }
}
.rd-rm .rd-wrow.is-next .rd-chip--gold, .rd-rm .rd-rest__glow, .rd-rm .rd-caret, .rd-rm .rd-bub__dots i, .rd-rm .rd-meal__c.is-busy .rd-shim__i { animation: none !important; }

/* ---------------------------------------------------------------------------------------- story mode: no live blur
   While the story drives the app, the phone moves with the scroll (scale, 3D tilt between steps). Every backdrop
   blur under the glass would then be recomputed on every frame (in a profile of steps 1–4 it was ≈ 6× the frame
   cost). The glass surfaces take their opaque fallback in story mode; the real frosted glass comes back in
   interactive mode, where the phone stands still (.rd-blur, set in idle time just after the hand-off, so that its
   first paint never lands in the frame where the phone goes live). */
.rd-root:not(.rd-blur) .rd-glass, .rd-root:not(.rd-blur) .rd-tabbar, .rd-root:not(.rd-blur) .rd-ex__chip, .rd-root:not(.rd-blur) .rd-ex__bar, .rd-root:not(.rd-blur) .rd-dock,
.rd-root:not(.rd-blur) .rd-fu__bar, .rd-root:not(.rd-blur) .rd-po__nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
.rd-root:not(.rd-blur) .rd-glass { background: rgba(14, 14, 16, .5); }
.rd-root:not(.rd-blur) .rd-tabbar { background: rgba(11, 11, 13, .96); }
.rd-root:not(.rd-blur) .rd-ex__chip { background: rgba(10, 10, 12, .55); }
.rd-root:not(.rd-blur) .rd-ex__bar { background: rgba(11, 11, 13, .94); }
.rd-root:not(.rd-blur) .rd-dock { background: rgba(19, 19, 23, .97); }
.rd-root:not(.rd-blur) .rd-fu__bar { background: rgba(10, 10, 12, .95); }
.rd-root:not(.rd-blur) .rd-po__nav { background: rgba(9, 9, 11, .96); }