/* Scroll-linked headers on the phone site (scroll-motion.js). Only transform
   and opacity change while scrolling. */
/* body's overflow-x:hidden makes body a scroll box, so the sticky top bar
   scrolls away with the page; clip keeps the sideways guard and lets the bar
   stay on top, where the moving parts settle. */
html.sm-on body{overflow-x:clip}
/* As in iOS build 136, the top bars are clear at rest. A solid backing in
   the app's background colour fades in over the first 48 px of scroll:
   no blur, no tint and no divider. */
html.sm-on .mobile-head{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.sm-head-backing{position:absolute;inset:0;z-index:-1;background:#080a12;opacity:0;pointer-events:none}
html.sm-on .mobile-brand{position:relative}
html.sm-on .mobile-brand>span:not(.brand-mark):not(.sm-context){display:inline-block;will-change:transform}
.sm-context{position:absolute;left:38px;top:calc(50% + 2px);font-size:11px;font-weight:600;letter-spacing:.1px;color:var(--cyan);white-space:nowrap;opacity:0;pointer-events:none;will-change:transform,opacity}
.sm-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;visibility:hidden}
.sm-me-layer{position:fixed;z-index:21}
.sm-backing{position:absolute;left:0;right:0;top:0;opacity:0;background:#080a12}
.sm-title{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:650;letter-spacing:-.1px;color:var(--text,#f5f5fa);opacity:0;will-change:transform,opacity}
/* The fading headers get their own layer, so fading them repaints nothing. */
html.sm-on #sheetBody>.sheet-id,html.sm-on #mobileMeProfile>.mobile-me-identity{will-change:opacity}
.sm-copy{position:absolute;margin:0;transform-origin:0 0;will-change:transform;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* As in the iOS app (owner, 10-06: "make the avatars circles like ios too"),
   every avatar on the phone site is a circle while this preview is on; the
   LIVE ring (a box-shadow) follows the circle, and the LIVE dot sits on its
   edge at 45 degrees instead of the old square corner. */
html.sm-on .creator-avatar,html.sm-on .account-avatar,html.sm-on .locked-avatar-skeleton{border-radius:50%}
html.sm-on .creator-avatar .live-dot{right:calc(14.6% - 5px);bottom:calc(14.6% - 5px)}
/* Profiles, as in iOS build 141: TikLiveRank at normal size in the bar, and a
   56 px identity row beneath it with the header's rank badge on the right and
   a faint hairline under the row once it has settled. */
.sm-sheet-layer .sm-title{font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:20px}
.sm-rank{position:absolute;right:18px;display:flex;align-items:center;gap:6px;white-space:nowrap;opacity:0;will-change:opacity}
.sm-rank .profile-rank-flag{font-size:13px;line-height:1}
.sm-rank .profile-rank-badge{font-size:11px;padding:4px 8px;border-radius:9px}
.sm-rowline{position:absolute;left:0;right:0;height:1px;transform:scaleY(.5);transform-origin:0 0;background:rgba(245,245,250,.07);opacity:0}
/* Me, as in iOS: "Me" centred in the bar at rest, then TikLiveRank beside the
   compact avatar, name and @handle on the bar's middle line. */
.sm-me-layer .sm-title{font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:20px}
.sm-brand{position:absolute;font-size:15px;font-weight:700;letter-spacing:-.2px;line-height:20px;white-space:nowrap;color:var(--text,#f5f5fa);opacity:0;will-change:opacity}
@media (prefers-reduced-motion:reduce){.sm-context,.sm-backing,.sm-title,.sm-layer,.sm-rank,.sm-rowline,.sm-brand{transition:opacity .16s ease-out}}