/* GHIM on iPhone, dark appearance (AdaptivePalette.dark): background #0E0E11, cards #1A1A1C, accent #1CBA54. */
.app-phone { color: #fff; background: #0e0e11; letter-spacing: -0.01em; }
.app-phone .mp { visibility: hidden; }
.app-phone .still { width: 100%; height: 100%; object-fit: contain; }

/* status bar */
.sbar { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 46px; color: currentColor; }
.sb-time { font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sb-ic { display: flex; align-items: center; gap: 6px; }
.sb-sig { width: 17px; height: 11px; fill: currentColor; }
.sb-wifi { width: 15px; height: 11px; fill: currentColor; }
.sb-batt { position: relative; width: 25px; height: 12px; border-radius: 3.6px; box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.55); }
.sb-batt::after { content: ""; position: absolute; right: -3px; top: 4px; width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, 0.55); }
.sb-batt > i { position: absolute; left: 2px; top: 2px; bottom: 2px; border-radius: 1.8px; background: currentColor; max-width: 21px; }
.p-sb { color: #fff; }

.p-panel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.p-circ { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #fff; }
.p-circ .gl { width: 18px; height: 18px; }

/* Today: the wheel of days under a fixed selection, the figure, and the bottom card */
.p-wk { overflow: hidden; }
.wk-row { position: absolute; left: 0; top: 0; height: 72px; display: flex; will-change: transform; }
.wk-cell { position: relative; flex: none; width: 49.857px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.wk-cell::before { content: ""; position: absolute; left: 2px; right: 2px; top: 6px; bottom: 6px; border-radius: 14px; background: #1cba54; opacity: 0; }
.wk-cell.today::before { opacity: 1; }
.wk-cell > * { position: relative; }
.wk-cell small { font-size: 11px; font-weight: 500; color: #b8b8bd; }
.wk-cell b { font-size: 17px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wk-cell.today small, .wk-cell.today b { color: #fff; }
.wk-cell.today b { font-weight: 700; }
.wk-cell em { display: flex; gap: 2.5px; height: 7px; align-items: center; }
.wk-cell em i { width: 5px; height: 5px; border-radius: 50%; transition: none; }
.wk-check { width: 11px; height: 11px; color: #1cba54; }
.wk-cell.today .wk-check { color: rgba(255, 255, 255, 0.85); }
.p-wksel { background: rgba(28, 186, 84, 0.25); box-shadow: inset 0 0 0 2px #1cba54; }
.p-jump span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; border-radius: 11px; background: #1cba54; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); opacity: 0; }

.fig { position: absolute; inset: 0; }
.fig img, .fig i { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig img { object-fit: contain; opacity: 0.92; }
.fig i { opacity: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
/* a touch on the glass: a soft disc that presses */
.p-touch { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); opacity: 0; pointer-events: none; }
.p-bell { color: #1cba54; }
.p-greet { font-size: 16px; font-weight: 600; white-space: nowrap; }
.p-cap { font-size: 12.5px; font-weight: 600; color: #1cba54; white-space: nowrap; }
.p-browse { display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #e8e8ec; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.p-start { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14.5px; font-weight: 650; color: #fff; }
.p-start .gl { width: 12px; height: 12px; }

/* the floating tab bar */
.p-tabbg { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 10px 26px rgba(0, 0, 0, 0.45); }
.p-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #a2a2a8; }
.p-tab .gl { width: 23px; height: 23px; }
.p-tab b { font-size: 10px; font-weight: 600; }

/* Planner */
.p-plhead { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.p-plhead i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.p-plhead i .gl { width: 15px; height: 15px; }
.p-plhead b { font-size: 13px; font-weight: 600; }
.p-plweek { display: flex; padding: 0 6px; }
.pw-sel { position: absolute; left: 0; top: 7px; width: 42px; height: 58px; border-radius: 13px; background: #1cba54; transform: translateX(var(--px, 0px)); }
.pw-cell { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.pw-cell small { font-size: 10px; font-weight: 500; color: #808085; }
.pw-cell b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-cell em { display: flex; gap: 2px; height: 6px; align-items: center; }
.pw-cell em i { width: 4.5px; height: 4.5px; border-radius: 50%; }
.pw-cell .wk-check { width: 9px; height: 9px; }
.pw-cell.on small, .pw-cell.on b { color: #fff; }
.p-pldate { text-align: center; font-size: 19px; font-weight: 400; }
.p-pldate .pd { position: absolute; left: 0; right: 0; top: 0; }
.p-label { font-size: 12px; font-weight: 600; color: #b8b8bd; white-space: nowrap; }
.p-plcard .pc { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pc-name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.pc-name .gl { width: 12px; height: 12px; color: #808085; }
.pc-m { width: 100%; display: flex; justify-content: space-around; }
.pc-m span { display: flex; flex-direction: column; align-items: center; }
.pc-m b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-m small { font-size: 10.5px; color: #808085; }
.pc-chips { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #b8b8bd; }
.pc-chips .gl { width: 11px; height: 11px; color: #1cba54; }
.p-row { display: grid; grid-template-columns: 44px 1fr 24px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 3px 12px 3px 4px; }
.p-row .still { grid-row: 1 / 3; width: 44px; height: 44px; background: #fff; border-radius: 10px; padding: 2px; }
.p-row b { font-size: 14px; font-weight: 500; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row small { font-size: 11.5px; color: #808085; align-self: start; white-space: pre; }
.p-info { grid-row: 1 / 3; grid-column: 3; color: #808085; width: 20px; height: 20px; }
.p-plstart .ps { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 25px; font-size: 16px; font-weight: 600; }
.p-plstart .ps.a { background: #1cba54; color: #fff; }
.p-plstart .ps.b { background: #1a1a1c; color: #b8b8bd; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); opacity: 0; }
.p-plstart .gl { width: 15px; height: 15px; }
.p-plist .pl { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 6px; }
.p-plist .pl.b { opacity: 0; }
.p-dim { pointer-events: none; }
.p-sheet { overflow: hidden; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); }
.sh-grab { position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); }
.sh-head { position: absolute; left: 14px; right: 14px; top: 20px; display: flex; align-items: center; justify-content: space-between; }
.sh-head b { font-size: 16px; font-weight: 600; }
.sh-x, .sh-go { height: 34px; padding: 0 15px; display: grid; place-items: center; border-radius: 17px; font-size: 14.5px; font-weight: 600; }
.sh-x { background: rgba(255, 255, 255, 0.1); color: #1cba54; }
.sh-go { background: #1cba54; color: #fff; }
.sh-month { position: absolute; left: 22px; right: 22px; top: 76px; display: flex; align-items: center; justify-content: space-between; }
.sh-month b { font-size: 14px; font-weight: 600; }
.sh-month i { width: 18px; height: 18px; color: #1cba54; }
.sh-dow, .sh-cal { position: absolute; left: 14px; right: 14px; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.sh-dow { top: 110px; font-size: 10px; font-weight: 600; color: #808085; }
.sh-cal { top: 132px; row-gap: 6px; font-size: 14.5px; font-weight: 500; }
.sh-cal span { height: 38px; display: grid; place-items: center; position: relative; z-index: 1; color: #fff; }
.sh-cal span.off { color: rgba(255, 255, 255, 0.28); }
.sh-sel { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: #1cba54; z-index: 0; transform: translate(var(--sx, 0px), var(--sy, 0px)); }
.sh-note { position: absolute; left: 22px; right: 22px; bottom: 26px; font-size: 11.5px; color: #808085; }

/* Workouts */
.p-title { font-size: 33px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.p-h2 { font-size: 22px; font-weight: 700; white-space: nowrap; }
.p-sub { font-size: 12.5px; line-height: 1.35; color: #b8b8bd; }
.p-chips { overflow: hidden; }
.w-row { position: absolute; left: 0; top: 0; display: flex; gap: 8px; will-change: transform; }
.w-chip { position: relative; flex: none; width: 108px; height: 56px; border-radius: 15px; background: #1a1a1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.w-chip::before { content: ""; position: absolute; inset: 0; border-radius: 15px; background: linear-gradient(135deg, #1cba54, #33d9b3); opacity: var(--on, 0); }
.w-chip > * { position: absolute; }
.w-chip .gl { left: 10px; top: 9px; width: 15px; height: 15px; color: #fff; }
.w-chip em { right: 10px; top: 9px; font-style: normal; font-size: 11px; font-weight: 600; color: #b8b8bd; }
.w-chip b { left: 10px; bottom: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p-note .wn { position: absolute; inset: 0; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 8px; padding: 0 12px; opacity: 0; }
.p-note .gl { grid-row: 1 / 3; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(28, 186, 84, 0.18); color: #1cba54; }
.p-note b { font-size: 12px; font-weight: 600; }
.p-note small { font-size: 11px; color: #b8b8bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ess b { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; }
.p-ess b .gl { width: 18px; height: 18px; color: #1cba54; }
.p-ess small { display: block; margin-top: 3px; font-size: 11px; color: #b8b8bd; }
.p-wcard { overflow: hidden; }
.wcc { position: absolute; inset: 0; opacity: 0; }
.wc-strip { position: absolute; left: 10px; right: 10px; top: 10px; height: 92px; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #f4f4f6; }
.wc-strip .still { flex: 1; min-width: 0; }
.wc-name { position: absolute; left: 16px; top: 114px; font-size: 15px; font-weight: 600; }
.wc-lv { position: absolute; right: 14px; top: 113px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #1cba54; padding: 3px 8px; border-radius: 9px; background: rgba(28, 186, 84, 0.16); }
.wc-sub { position: absolute; left: 16px; right: 16px; top: 137px; font-size: 11.5px; line-height: 1.32; color: #b8b8bd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-meta { position: absolute; left: 16px; top: 172px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: #808085; }
.wc-meta .gl { width: 12px; height: 12px; }
.wc-meta i { width: 8px; }
.wc-view { position: absolute; left: 16px; top: 194px; font-size: 12px; font-weight: 600; color: #1cba54; }
.wc-go { position: absolute; right: 14px; top: 189px; width: 20px; height: 20px; color: #1cba54; }

/* a workout */
.p-nav { display: flex; justify-content: space-between; padding: 0 16px; }
.p-nav .r { margin-left: auto; }
.p-shead b { display: block; font-size: 22px; font-weight: 700; }
.p-shead p { margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: #b8b8bd; }
.p-shead small { display: block; margin-top: 8px; font-size: 12px; color: #808085; }
.p-exh b { display: block; font-size: 16px; font-weight: 600; }
.p-exh small { font-size: 12px; color: #b8b8bd; }
.p-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-dock span { display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 27px; font-size: 15px; font-weight: 600; }
.p-dock .gl { width: 17px; height: 17px; }
.dk-l { background: rgba(255, 255, 255, 0.1); color: #1cba54; }
.dk-t { background: #1cba54; color: #fff; transform: scale(var(--press-s, 1)); }

/* Add exercises */
.p-anav { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.p-anav b { font-size: 16px; font-weight: 600; }
.a-save { height: 34px; padding: 0 16px; display: grid; place-items: center; border-radius: 17px; font-size: 15px; font-weight: 600; color: #1cba54; background: rgba(255, 255, 255, 0.1); }
.a-save.on { background: #1cba54; color: #fff; }
.p-astrip small { font-size: 11.5px; color: #b8b8bd; }
.p-astrip small b { font-weight: 600; color: #fff; }
.a-thumbs { position: absolute; left: 0; top: 22px; display: flex; gap: 6px; }
.a-th { width: 56px; height: 56px; border-radius: 12px; background: #fff; padding: 3px; transform-origin: 50% 50%; }
.p-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.a-card { position: relative; height: 158px; border-radius: 16px; background: #1a1a1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.a-card .still { position: absolute; left: 6px; right: 6px; top: 6px; width: calc(100% - 12px); height: 84px; border-radius: 10px; background: #fff; }
.a-card b { position: absolute; left: 9px; right: 6px; top: 96px; font-size: 11.5px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-card small { position: absolute; left: 9px; bottom: 9px; font-size: 10px; color: #808085; }
.a-card::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: rgba(28, 186, 84, 0.22); box-shadow: inset 0 0 0 1.5px #1cba54; opacity: var(--pick, 0); }
.a-tick, .a-plus { position: absolute; right: 9px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; z-index: 1; }
.a-tick { background: #1cba54; color: #fff; opacity: var(--pick, 0); }
.a-tick .gl { width: 12px; height: 12px; }
.a-plus { background: rgba(0, 0, 0, 0.45); color: #fff; opacity: calc(1 - var(--pick, 0)); }
.a-plus .gl { width: 12px; height: 12px; }
.p-apanel { box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.ap-chips { position: absolute; left: 16px; top: 16px; display: flex; gap: 6px; }
.ap-chips > span { height: 28px; padding: 0 11px; display: flex; align-items: center; gap: 5px; border-radius: 14px; font-size: 12.5px; font-weight: 600; }
.ap-clear { color: #1cba54; background: rgba(255, 255, 255, 0.08); }
.ap-c { opacity: 0; }
.ap-c .gl { width: 10px; height: 10px; }
.ap-sh { color: #fa9e47; background: rgba(250, 158, 71, 0.16); }
.ap-cb { color: #1cba54; background: rgba(28, 186, 84, 0.16); }
.ap-search { position: absolute; left: 16px; right: 16px; top: 56px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); font-size: 14px; color: #808085; }
.ap-search .gl { width: 15px; height: 15px; }
.ap-fig { position: absolute; left: 110px; top: 104px; width: 173px; height: 206px; }
.ap-fig .fig img { opacity: 0.9; }
.ap-lab { position: absolute; left: 18px; top: 296px; font-size: 12px; font-weight: 600; color: #fa9e47; opacity: 0; }
.ap-grid { position: absolute; left: 16px; right: 16px; top: 322px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ap-grid span { position: relative; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 12.5px; font-weight: 500; }
.ap-grid span i { width: 8px; height: 8px; border-radius: 50%; }
.ap-grid span em { margin-left: auto; width: 13px; height: 13px; color: #1cba54; opacity: 0; }
.ap-grid span.on { background: rgba(250, 158, 71, 0.14); }
.ap-grid span.on em { opacity: 1; }

/* Exercises */
.p-etop { display: flex; align-items: center; justify-content: center; }
.p-etop b { font-size: 17px; font-weight: 600; }
.p-etop .r { position: absolute; right: 16px; top: 4px; }
.p-elist { overflow: hidden; }
.el-in { position: absolute; left: 16px; right: 16px; top: 0; will-change: transform; }
.el-h b { display: block; font-size: 22px; font-weight: 700; }
.el-h small { display: block; margin-top: 4px; font-size: 12.5px; color: #b8b8bd; }
.el-sec { margin: 18px 0 8px; font-size: 12.5px; font-weight: 600; color: #b8b8bd; }
.e-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.e-tile { position: relative; height: 62px; border-radius: 14px; background: #1a1a1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.e-tile .still { position: absolute; left: 6px; top: 6px; width: 50px; height: 50px; border-radius: 9px; background: #f4f4f6; }
.e-tile b { position: absolute; left: 66px; top: 13px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.e-tile small { position: absolute; left: 66px; top: 33px; font-size: 11px; color: #808085; }

/* a muscle's list */
.p-cnav { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.p-cnav b { font-size: 17px; font-weight: 600; }
.p-chead { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 0 10px; }
.ch-fig { grid-row: 1 / 3; width: 50px; height: 50px; border-radius: 10px; background: #f4f4f6; padding: 2px; }
.ch-cnt { position: relative; height: 18px; font-size: 13.5px; font-weight: 600; }
.ch-cnt span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.p-chead small { font-size: 11px; color: #808085; }
.p-cchips { display: flex; gap: 6px; padding-left: 6px; }
.p-cchips > span { position: relative; z-index: 1; height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 5px; border-radius: 16px; font-size: 12.5px; font-weight: 600; color: #e6e6ea; background: rgba(255, 255, 255, 0.07); white-space: nowrap; }
.p-cchips em { font-style: normal; color: #808085; }
.cc-sel { position: absolute; left: 0; top: 0; height: 32px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--cc, #1cba54); background: color-mix(in oklab, var(--cc, #1cba54) 18%, transparent); z-index: 2; transform: translateX(var(--cx, 0px)); width: var(--cw, 50px); }
.p-cgrid .cg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; opacity: 0; }
.c-card { position: relative; height: 236px; border-radius: 18px; background: #1a1a1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.c-card .still { position: absolute; left: 6px; right: 6px; top: 6px; width: calc(100% - 12px); height: 132px; border-radius: 12px; background: #f4f4f6; }
.c-card b { position: absolute; left: 11px; right: 8px; top: 146px; font-size: 12.5px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-card small { position: absolute; left: 11px; top: 178px; font-size: 10.5px; color: #808085; }
.c-card .c-eq { top: 193px; display: flex; align-items: center; gap: 3px; }
.c-card .c-eq .gl { width: 10px; height: 10px; }
.c-card em { position: absolute; left: 11px; bottom: 9px; font-style: normal; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 8px; }
.lv-beginner { color: #1cba54; background: rgba(28, 186, 84, 0.16); }
.lv-intermediate { color: #fa9e47; background: rgba(250, 158, 71, 0.16); }
.lv-advanced { color: #f57575; background: rgba(245, 117, 117, 0.16); }

/* an exercise */
.p-dnav { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.p-dnav .star { margin-left: auto; color: #fa9e47; }
.p-dnav .plus { color: #1cba54; }
.p-dmotion { overflow: hidden; }
.motion { position: absolute; inset: 0; }
.motion .still { position: absolute; inset: 4% 6%; width: 88%; height: 92%; opacity: 0; }
.motion .still.on { opacity: 1; }
.p-dname b { display: block; font-size: 21px; font-weight: 700; }
.p-dname small { display: block; margin-top: 4px; font-size: 12.5px; color: #b8b8bd; }
.p-dseg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; }
.p-dseg span { position: relative; z-index: 1; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #e6e6ea; }
.ds-sel { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 3); border-radius: 15px; background: rgba(255, 255, 255, 0.18); transform: translateX(var(--dx, 0px)); }
.p-dbody .db { position: absolute; inset: 0; opacity: 0; }
.db-h { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.db ol { list-style: none; display: grid; gap: 7px; }
.db li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.33; color: #d6d6da; }
.db li b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #1cba54; background: rgba(28, 186, 84, 0.16); }
.dh { margin-bottom: 14px; }
.dh b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dh span { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; color: #e6e6ea; font-variant-numeric: tabular-nums; }
.dh span:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }
.dh span i { font-style: normal; color: #808085; }
.db.notes small { display: block; font-size: 11.5px; color: #808085; margin-bottom: 10px; }
.dn { position: relative; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); font-size: 14px; line-height: 1.45; }
.dn .caret { display: inline-block; width: 2px; height: 16px; margin-left: 2px; vertical-align: -3px; background: #1cba54; }

/* Stats */
.p-gear { display: grid; place-items: center; color: #1cba54; box-shadow: inset 0 0 0 2px rgba(28, 186, 84, 0.6); }
.p-gear .gl { width: 18px; height: 18px; }
.p-stiles { display: flex; gap: 10px; }
.p-stiles > span { position: relative; flex: none; width: 116px; height: 96px; border-radius: 16px; background: #1a1a1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.p-stiles i { position: absolute; left: 11px; top: 10px; width: 15px; height: 15px; color: #1cba54; }
.p-stiles b { position: absolute; left: 11px; top: 32px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-stiles small { position: absolute; left: 11px; top: 58px; font-size: 11px; font-weight: 500; }
.p-stiles em { position: absolute; left: 11px; top: 73px; font-style: normal; font-size: 10px; color: #808085; }
.p-sseg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; }
.p-sseg span { position: relative; z-index: 1; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #e6e6ea; }
.ss-sel { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 3); border-radius: 17px; background: #1cba54; transform: translateX(var(--sx, 0px)); }
.p-schart { padding: 14px 16px; }
.p-schart b { font-size: 14px; font-weight: 600; }
.sc-p { position: absolute; right: 16px; top: 16px; font-size: 11px; color: #808085; }
.sc-bars { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 132px; display: flex; gap: 6px; align-items: flex-end; }
.sc-bars span { position: relative; flex: 1; height: 100%; }
.sc-bars span i { position: absolute; left: 0; right: 0; bottom: 18px; height: calc(var(--h, 0) * 104px + 3px); border-radius: 3px; background: #1cba54; opacity: var(--o, 1); }
.sc-bars span em { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-style: normal; font-size: 9.5px; color: #808085; }
.sr-h { display: block; font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.sr { position: relative; height: 54px; margin-bottom: 8px; border-radius: 14px; background: #1a1a1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.sr > i { position: absolute; left: 10px; top: 10px; width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: #1cba54; background: rgba(28, 186, 84, 0.16); }
.sr > b { position: absolute; left: 54px; top: 11px; font-size: 13px; font-weight: 600; }
.sr > small { position: absolute; left: 54px; top: 30px; font-size: 11px; color: #808085; }
.sr > em { position: absolute; right: 12px; top: 11px; font-style: normal; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sr > .sr-d { left: auto; right: 12px; }
.p-sevent b { display: block; font-size: 14px; font-weight: 600; }
.p-sevent small { font-size: 11.5px; color: #b8b8bd; }
.ag { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.ag-b { opacity: 0; }
.a-fly { position: absolute; left: 0; top: 0; width: 107px; height: 84px; border-radius: 10px; background: #fff; transform-origin: 0 0; visibility: hidden; z-index: 5; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.a-fly .still { width: 100%; height: 100%; object-fit: contain; }
.p-slist { overflow: hidden; }
.sl-in { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 6px; will-change: transform; }
.s-row { position: relative; height: 50px; border-radius: 16px; background: #1a1a1c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
/* the library's pictures, out of the glass */
.fan-card { position: absolute; left: 0; top: 0; width: 120px; height: 120px; padding: 8px; transform-origin: 0 0; visibility: hidden; border-radius: 22px; background: #f4f4f6; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6); backface-visibility: hidden; }
.fan-card .still { width: 100%; height: 100%; object-fit: contain; }