/* Purple mini app (next). Velvet and calm: warm paper, soft ink, nothing loud. */
@font-face { font-family: 'BDO Grotesk'; src: url(./fonts/BDOGrotesk-VF.woff2?v=1) format('woff2'); font-weight: 300 900; font-display: swap; }
/* 28.10 (owner): BDO Grotesk has no Cyrillic, so in RU/UK the Latin words (Purple, Tokens, Hello) came out in another
font than the words around them. There the letters all use the system font; the digits keep ours */
@font-face { font-family: 'PU Num'; src: url(./fonts/BDOGrotesk-VF.woff2?v=1) format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0030-0039, U+0024, U+0025, U+002B-002E; }
:root {
--bg: #f6f3ee;
--card: #fffdf9;
--ink: #1b1820;
--mute: #8a8492;
--line: rgba(27, 24, 32, .07);
--purple: #8d4bef;
--gold: #ffb21e;
--r: 22px;
--spring: cubic-bezier(.34, 1.4, .64, 1);
--soft: cubic-bezier(.22, .8, .24, 1);
/* type canon (DESIGN-CANON.md): one family, light weights, one figure style */
--w-light: 300; --w-reg: 400; --w-mid: 500;
/* full screen in Telegram (owner, 2026-10-15): the phone's own edge plus Telegram's Close and ⋯ buttons.
Telegram sets --tg-safe-area-inset-* and --tg-content-safe-area-inset-* itself (Bot API 8.0) */
--top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
--bot: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font: 400 16px/1.4 'BDO Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
h2, h3, p { margin: 0; }
/* ---------- launch ---------- */
.splash { position: fixed; inset: 0; z-index: 50; background: var(--bg); cursor: pointer; outline: none; }
.splash_cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash_hint {
position: absolute; left: 0; right: 0; bottom: calc(44px + var(--bot)); text-align: center;
font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--mute);
opacity: 0; transform: translateY(8px); transition: opacity .8s var(--soft), transform .8s var(--soft);
}
.splash.is-hint .splash_hint { opacity: 1; transform: none; animation: breathe 2.6s ease-in-out .8s infinite; }
.splash.is-go .splash_hint { opacity: 0; animation: none; transition-duration: .25s; }
@keyframes breathe { 50% { opacity: .45; } }
/* ---------- screens ---------- */
.app { position: fixed; inset: 0; }
.app.is-in { animation: appIn 1.4s var(--soft) both; }
@keyframes appIn { from { opacity: 0; transform: scale(.965); filter: blur(6px); } }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.scr.is-enter { animation: scrIn .38s cubic-bezier(0.16, 1, 0.3, 1) both; }
.scr.is-back { animation: scrBack .34s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes scrIn { from { opacity: 0; transform: scale(.988); } to { opacity: 1; transform: none; } }
@keyframes scrBack { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }
.top {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: calc(14px + var(--top)) 18px 10px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.tok-btn {
display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 8px 0 14px; border-radius: 99px;
background: var(--card); box-shadow: 0 0 0 1px var(--line); font-weight: 500; font-size: 15px;
transition: transform .35s var(--spring);
}
.tok-btn:active, .pill:active, .chat-row:active, .back:active, .help-btn:active { transform: scale(.94); }
.lbl { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 26px 4px 10px; }
/* ---------- chats ---------- */
.home-body { flex: 1; overflow-y: auto; padding: 6px 16px calc(28px + var(--bot)); -webkit-overflow-scrolling: touch; }
.ahead { background: var(--card); border-radius: var(--r); padding: 18px 18px 16px; box-shadow: 0 0 0 1px var(--line); }
.ahead h2 { font-size: 20px; font-weight: 400; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.ahead h2::before { content: ''; width: 24px; height: 24px; background: url(./img/social/hello.svg) center/contain no-repeat; }
.ahead p { color: var(--mute); font-size: 15px; margin-top: 6px; }
.ahead_ppl { display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ahead_ppl::-webkit-scrollbar { display: none; }
.person { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
.person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: saturate(1.15) brightness(1.04); }
.person .hi {
height: 26px; padding: 0 11px; border-radius: 99px; background: rgba(141, 75, 239, .1); color: var(--purple);
font-weight: 500; font-size: 13px; transition: transform .35s var(--spring), background .3s;
}
.person .hi:active { transform: scale(.9); }
.person .hi.is-sent { background: transparent; color: var(--mute); }
.chats { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.chat-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 16px; transition: transform .35s var(--spring), background .2s; }
.chats li + li .chat-row { border-top: 1px solid var(--line); }
.chat-row img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; filter: saturate(1.15) brightness(1.04); }
.chat-row .t { flex: 1; min-width: 0; }
.chat-row b { display: block; font-weight: 500; }
.chat-row small { display: block; color: var(--mute); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row time { font-size: 12px; color: var(--mute); align-self: flex-start; margin-top: 4px; }
/* a new message: a thin gold outline, as on the site */
.chat-row.is-new img { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--gold); }
/* ---------- chat ---------- */
.top--chat { justify-content: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.back { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin-left: -6px; transition: transform .35s var(--spring); }
.back svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.who_face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; filter: saturate(1.15) brightness(1.04); }
.who { flex: 1; min-width: 0; line-height: 1.2; }
.who b { display: block; font-weight: 500; }
.who small { color: var(--mute); font-size: 13px; }
.help-btn { margin-left: auto; transition: transform .35s var(--spring); }
.msgs { flex: 1; overflow-y: auto; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; }
.day { align-self: center; font-size: 12px; color: var(--mute); margin: 4px 0 8px; }
.bub {
position: relative; max-width: 78%; padding: 9px 14px; border-radius: 20px; font-size: 16px; line-height: 1.35;
background: var(--card); box-shadow: 0 0 0 1px var(--line); align-self: flex-start; word-wrap: break-word; white-space: pre-wrap;
}
.bub.me { align-self: flex-end; background: var(--purple); color: #fff; box-shadow: none; }
.bub.is-born { animation: bubIn .5s var(--soft) both; }
@keyframes bubIn { from { transform: scale(.92) translateY(6px); opacity: 0; } }
/* typing: three symbols that keep changing */
.typing { display: inline-flex; gap: 3px; font-weight: 500; color: var(--mute); }
.typing i { font-style: normal; display: inline-block; width: .7em; text-align: center; animation: tbob 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tbob { 50% { transform: translateY(-3px); opacity: .5; } }
/* the composer: classic while you type */
.cmp { flex: none; display: flex; align-items: center; gap: 8px; margin: 6px 12px calc(10px + var(--bot)); padding: 5px 5px 5px 16px; border-radius: 26px; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s; }
.cmp:focus-within { box-shadow: 0 0 0 1px rgba(141, 75, 239, .28), 0 6px 22px rgba(141, 75, 239, .08); }
.cmp_in { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--ink); padding: 8px 0; }
.cmp_in::placeholder { color: var(--mute); }
.cmp_send { width: 38px; height: 38px; border-radius: 50%; flex: none; background: rgba(141, 75, 239, .12); color: var(--purple); display: grid; place-items: center; transition: background .3s, color .3s, transform .35s var(--spring); }
.cmp_send svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmp.is-typing .cmp_send { background: var(--purple); color: #fff; }
.cmp_send.is-fly svg { animation: fly .5s var(--soft); }
@keyframes fly { 45% { transform: translateY(-26px); opacity: 0; } 46% { transform: translateY(14px); opacity: 0; } }
/* the quiet aura question */
.aura-ask { align-self: center; width: min(320px, 92%); margin: 10px 0; padding: 14px 16px 12px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); text-align: center; animation: bubIn .6s var(--soft) both; }
.aura-ask p { font-size: 14px; color: var(--mute); }
.aura-ask p b { color: var(--ink); font-weight: 500; }
.aura-scale { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 8px; }
.aura-scale button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; transition: transform .35s var(--spring); }
.aura-scale button i { display: block; border-radius: 50%; background: currentColor; transition: transform .3s var(--spring); }
.aura-scale button:active i { transform: scale(1.4); }
.aura-scale .m { color: #b7b0c0; }
.aura-scale .p { color: var(--gold); }
.aura-scale .z { width: 10px; }
.aura-scale .sgn { font-size: 18px; font-weight: 500; color: var(--mute); width: 18px; }
.aura-ask .skip { font-size: 13px; color: var(--mute); padding: 4px 10px; }
/* ---------- token ---------- */
.tok-body { flex: 1; overflow-y: auto; padding: 16px 16px calc(28px + var(--bot)); -webkit-overflow-scrolling: touch; }
.bal { position: relative; text-align: center; padding: 24px 18px 18px; border-radius: var(--r); background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.bal_coin { position: relative; display: block; width: 120px; height: auto; margin: 0 auto 6px; }
.bal_n { margin-top: 12px; }
.bal_n b { display: block; font-size: 40px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.bal_n span { color: var(--mute); font-size: 14px; }
.bal_launch { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.cd { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.cd div { min-width: 56px; padding: 8px 6px 6px; border-radius: 14px; background: var(--bg); }
.cd b { display: block; font-size: 20px; font-weight: 400; color: var(--ink); }
.cd small { font-size: 11px; }
.tasks { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.tasks li { display: flex; align-items: center; gap: 12px; padding: 13px 14px 13px 16px; }
.tasks li + li { border-top: 1px solid var(--line); }
.tasks .ic { width: 38px; height: 38px; flex: none; }
.tasks .t { flex: 1; min-width: 0; }
.tasks .t b { display: block; font-weight: 500; font-size: 15px; }
.tasks .t small { color: var(--mute); font-size: 13px; }
.tasks .t .task-partner { display: block; font-size: 11px; margin-bottom: 3px; }
.tasks .js-task { min-width: 78px; flex: none; }
.task-sheet .task-partner { display: block; color: var(--mute); font-size: 13px; margin: 0 0 6px; }
.task-sheet .task-reward { color: var(--ink); font-size: 22px; margin-top: 14px; }
.task-progress { margin-top: 9px; }
.task-progress progress { display: block; appearance: none; border: 0; border-radius: 4px; overflow: hidden; width: 100%; height: 4px; background: var(--soft-ink); color: var(--purple, #8953d5); }
.task-progress progress::-webkit-progress-bar { background: var(--soft-ink); border-radius: 4px; }
.task-progress progress::-webkit-progress-value { background: #8953d5; border-radius: 4px; transition: width .3s ease; }
.task-progress progress::-moz-progress-bar { background: #8953d5; border-radius: 4px; }
.task-progress small { display: block; margin-top: 5px; color: var(--mute); font-size: 12px; }
.task-sheet .task-progress { max-width: 280px; margin: 16px auto 0; }
.pill { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 500; font-size: 14px; transition: transform .35s var(--spring), opacity .3s; }
.pill.is-done { background: transparent; color: var(--mute); box-shadow: 0 0 0 1px var(--line); }
.tasks--partners .pill:not(.is-done) { background: var(--ink); }
.rw { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-weight: 500; vertical-align: -2px; }
.rw img { display: block; margin: 0 !important; }
.steps { text-align: left; margin: 14px auto 0; padding: 0 0 0 22px; max-width: 300px; font-size: 15px; }
.msheet-body .steps li { padding: 4px 0; border: 0; }
.msheet-body .steps li::before { content: none; }
.ch-note { color: var(--ink) !important; font-size: 14px !important; background: var(--line); border-radius: 12px; padding: 10px 12px; }
.fine { font-size: 12px; color: var(--mute); text-align: center; margin: 18px 12px 0; }
/* ---------- token intro ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: rgba(27, 24, 32, .28); animation: fade .35s both; }
@keyframes fade { from { opacity: 0; } }
.sheet_card { width: 100%; padding: 22px 20px calc(18px + var(--bot)); border-radius: 28px 28px 0 0; background: var(--card); animation: up .5s var(--soft) both; }
@keyframes up { from { transform: translateY(40%); } }
.slide { display: none; text-align: center; padding: 6px 4px 0; }
.slide.is-on { display: block; animation: scrIn .45s var(--soft) both; }
.slide img { margin: 0 auto 14px; }
.slide h2 { font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.slide p { color: var(--mute); font-size: 15.5px; margin: 8px auto 0; max-width: 340px; }
.slide .big { font-size: 32px; font-weight: 300; color: var(--ink); margin-top: 8px; }
.sheet_nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line); transition: width .35s var(--spring), background .3s; }
.dots i.is-on { width: 20px; background: var(--purple); }
.sheet .pill { height: 42px; padding: 0 22px; }
/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(92px + var(--bot)); z-index: 60; max-width: 86%; padding: 10px 16px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 14px; text-align: center; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--spring); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* ---------- symbols in messages: each moves by what it means (type.js) ---------- */
.g { display: inline-block; white-space: pre; animation-duration: .6s; animation-timing-function: var(--soft); animation-fill-mode: both; }
/* the loose symbols that play along when a message is sent */
.spark { position: fixed; z-index: 48; pointer-events: none; font-weight: 500; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
.g, .bub.is-born, .scr.is-enter, .scr.is-back, .app.is-in { animation: none !important; }
}
/* ---------- v2: hellos for you, empty state, money line, exchange, rules ---------- */
.face0 { width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #ece8f1; color: var(--mute); font-weight: 300; font-size: 20px; }
.person .face0 { width: 56px; height: 56px; }
.who .face0, .face0.sm { width: 36px; height: 36px; font-size: 15px; }
.hello-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.hello-row .t { flex: 1; min-width: 0; }
.hello-row b { display: block; font-weight: 500; }
.hello-row small { color: var(--mute); font-size: 14px; }
.hello-row img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; filter: saturate(1.15) brightness(1.04); }
.hello-row .pill { background: var(--ink); }
.hello-row .no { font-size: 13px; color: var(--mute); padding: 6px 8px; }
.empty { color: var(--mute); font-size: 14px; text-align: center; padding: 18px 20px; }
.ahead_none { color: var(--mute); font-size: 14px; padding: 6px 0 2px; }
.pill--x { margin-top: 14px; height: 40px; padding: 0 26px; }
.msheet-body { text-align: center; padding: 4px 4px 0; }
.msheet-body img { margin: 0 auto 12px; }
.msheet-body h2 { font-size: 20px; font-weight: 400; letter-spacing: -.02em; }
.msheet-body p { color: var(--mute); font-size: 15px; margin: 8px auto 0; max-width: 340px; }
.msheet-body ul { text-align: left; margin: 14px auto 0; padding: 0; list-style: none; max-width: 320px; }
.msheet-body li { padding: 9px 0 9px 28px; position: relative; font-size: 15px; border-top: 1px solid var(--line); }
.msheet-body li:first-child { border-top: 0; }
.msheet-body li::before { content: ''; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; background: url(./img/social/smile.svg) center/contain no-repeat; }
.msheet-act { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.msheet-act .pill { height: 44px; padding: 0 24px; }
.msheet-act .pill.ghost { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.slide canvas, .msheet-body canvas { display: block; margin: 0 auto 14px; }
/* ---------- first-run intro: a short chat that shows how Purple works ---------- */
.intro { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--bg); padding: calc(10px + var(--top)) 14px calc(14px + var(--bot)); animation: fade .5s both; transition: opacity .45s; }
.intro.is-out { opacity: 0; }
.intro_top { display: flex; justify-content: flex-end; padding: 0 2px 6px; }
.intro_skip { font-size: 15px; font-weight: 500; color: var(--mute); padding: 8px 10px; margin-right: -8px; }
.intro_chat { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r); background: rgba(255, 253, 249, .55); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.intro_who { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.intro_msgs { padding-top: 12px; }
.intro_cmp { margin: 6px 10px 10px; }
.intro_in { flex: 1; min-width: 0; padding: 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro_in span:not(.intro_ph)::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--purple); animation: caret 1s steps(1) infinite; }
.intro_ph { color: var(--mute); }
@keyframes caret { 50% { opacity: 0; } }
.intro_hello { align-self: center; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); animation: bubIn .5s var(--soft) both; font-size: 15px; }
.intro_hello img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.intro_hello p b { font-weight: 500; }
.intro_ok { color: var(--mute); font-size: 13px; padding: 2px 6px; }
.intro_photo { padding: 4px; overflow: hidden; }
.intro_photo img { width: 220px; max-width: 100%; height: auto; border-radius: 16px; filter: blur(14px) saturate(1.1); transform: scale(1.04); transition: filter 1.1s var(--soft), transform 1.1s var(--soft); }
.intro_photo.is-clear img { filter: none; transform: none; }
.intro_sys { align-self: center; width: min(300px, 92%); padding: 12px 14px; border-radius: 18px; background: rgba(141, 75, 239, .07); text-align: center; font-size: 14px; animation: bubIn .5s var(--soft) both; }
.intro_sys p b { font-weight: 500; }
.intro_sys div { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.is-press { transform: scale(.9) !important; filter: brightness(1.08); transition: transform .2s var(--spring) !important; }
.intro_go { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; bottom: calc(38px + var(--bot)); padding: 0 40px; height: 50px; font-size: 17px; box-shadow: 0 10px 30px rgba(141, 75, 239, .3); animation: bubIn .5s var(--soft) both; }
.intro_sys .pill--x { margin-top: 0; height: 34px; padding: 0 14px; background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.intro_sys .pill:not(.pill--x) { background: var(--purple); }
.intro_msgs > * { flex-shrink: 0; }
.intro_chat { transition: filter .6s var(--soft), opacity .6s var(--soft); }
.intro.is-note .intro_chat { filter: blur(6px); opacity: .55; }
.intro_note {
position: absolute; left: 24px; right: 24px; bottom: calc(104px + var(--bot)); text-align: center; pointer-events: none;
font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--mute);
opacity: 0; transform: translateY(8px); transition: opacity .6s var(--soft), transform .6s var(--soft);
}
.intro.is-note .intro_note { opacity: 1; transform: none; }
.intro.is-done .intro_cmp { opacity: 0; transition: opacity .4s; }
/* Token value: one black curve on white, grey numbers, no brand colours (owner, 2026-10-10) */
.scr--value { --bg: #fff; --card: #fff; --ink: #111; --mute: #8e8e93; --line: rgba(0, 0, 0, .08); background: #fff; color: #111; }
.val-body { flex: 1; overflow-y: auto; padding: 18px 16px calc(28px + var(--bot)); }
.val-tabs { display: flex; gap: 6px; background: #f2f2f4; border-radius: 99px; padding: 4px; }
.val-tabs button { flex: 1; height: 34px; border-radius: 99px; color: #8e8e93; font-weight: 500; font-size: 14px; transition: background .25s, color .25s; }
.val-tabs button.is-on { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.val-tabs--range { margin-top: 14px; background: transparent; padding: 0; }
.val-tabs--range button { height: 32px; font-size: 13px; }
.val-tabs--range button.is-on { background: #111; color: #fff; box-shadow: none; }
.val-big { margin-top: 26px; }
.val-big b { display: block; font-size: 40px; font-weight: 300; letter-spacing: -.03em; }
.val-big small { color: var(--mute); font-size: 14px; }
.val-chart { position: relative; margin-top: 18px; }
.val-chart svg { display: block; width: 100%; height: 200px; touch-action: pan-y; }
.val-chart .l { fill: none; stroke: #111; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.val-chart .g { stroke: rgba(0, 0, 0, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.val-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #111; box-shadow: 0 0 0 4px rgba(0, 0, 0, .1); pointer-events: none; }
.val-axis { display: flex; justify-content: space-between; color: var(--mute); font-size: 12px; margin-top: 8px; }
.val-rows { margin: 22px 0 0; border-top: 1px solid var(--line); }
.val-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.val-rows dt { color: var(--mute); }
.val-rows dd { margin: 0; color: #3a3a3c; font-weight: 500; }
.val-note { color: var(--mute); font-size: 13px; margin: 16px 2px 0; }
.val-open { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); color: var(--ink); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); padding: 14px 14px 14px 18px; margin-top: 14px; transition: transform .35s var(--spring); }
.val-open:active { transform: scale(.98); }
.val-open span { flex: 1; }
.val-open b { display: block; font-size: 15px; font-weight: 500; }
.val-open small { color: var(--mute); font-size: 13px; }
.val-open svg { width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- home, owner 2026-10-10: hellos count, a feed of people, strip + Favorites ---------- */
.hcount { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 8px 0 14px; border-radius: 99px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-weight: 500; font-size: 15px; }
.top .tok-btn { margin-left: auto; }
.tok-btn.is-new { animation: tokCall 1.6s ease-in-out infinite; }
@keyframes tokCall { 50% { box-shadow: 0 0 0 1px var(--line), 0 0 0 7px rgba(141, 75, 239, .18); transform: scale(1.04); } }
.feed { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pcard { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; background: var(--card); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); padding: 16px; text-align: left; animation: bubIn .45s var(--soft) both; }
.pcard_face, .pcard .face0 { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: saturate(1.15) brightness(1.04); grid-row: span 2; }
.pcard .face0 { font-size: 26px; }
.pcard_t b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.pcard_t small { display: block; color: var(--mute); font-size: 14px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard_act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pcard_act time { font-size: 12px; color: var(--mute); }
.pcard--chat { cursor: pointer; transition: transform .35s var(--spring); }
.pcard--chat:active { transform: scale(.98); }
.pcard--chat .pcard_act { grid-column: 2; }
.pcard.is-new .pcard_face { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--gold); }
.pcard--new { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 18px 18px; }
.pcard--new .pcard_face, .pcard--new .face0 { width: 96px; height: 96px; grid-row: auto; font-size: 36px; }
.pcard--new .pcard_t small { max-width: 280px; margin: 4px auto 0; }
.pcard--new .pcard_act { justify-content: center; margin-top: 10px; }
.pcard .pill.ghost { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.pcard .pill.is-sent { background: transparent; color: var(--mute); box-shadow: 0 0 0 1px var(--line); }
.feed_none { color: var(--mute); font-size: 14px; text-align: center; padding: 18px; }
.favs { min-height: 96px; border-radius: var(--r); border: 1px dashed rgba(27, 24, 32, .18); background: transparent; padding: 10px; display: flex; align-items: center; transition: background .25s, border-color .25s, transform .3s var(--spring); }
.favs.is-target { border-color: rgba(27, 24, 32, .4); }
.favs.is-over { background: rgba(27, 24, 32, .04); transform: scale(1.02); }
.favs_hint { flex: 1; text-align: center; color: var(--mute); font-size: 13px; }
.favs_row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; border-radius: var(--r); transition: background .25s; }
.strip.is-over { background: rgba(27, 24, 32, .04); }
.strip::-webkit-scrollbar, .favs_row::-webkit-scrollbar { display: none; }
.sitem { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: opacity .2s, transform .3s var(--spring); }
.sitem span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem_face, .sitem .face0 { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: saturate(1.15) brightness(1.04); pointer-events: none; -webkit-user-drag: none; }
.sitem.is-new .sitem_face { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--gold); }
.sitem.is-lifted { opacity: .25; }
.sitem--ghost { position: fixed; z-index: 60; pointer-events: none; transform: scale(1.1); filter: drop-shadow(0 14px 22px rgba(27, 24, 32, .25)); }
.sitem--ghost.is-hint { opacity: 0; animation: favHint 3.2s var(--soft) .1s both; }
@keyframes favHint {
0% { opacity: 0; transform: translate(0, 0) scale(1); }
12% { opacity: .55; transform: translate(0, 0) scale(1.08); }
48% { opacity: .55; transform: translate(var(--dx), var(--dy)) scale(1.08); }
60%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
/* sign-up: light type, thin lines, soft glow avatars */
.scr--join { overflow-y: auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { height: 36px; padding: 0 16px; border-radius: 99px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 400; transition: background .2s, color .2s, box-shadow .2s; }
.chips button.is-on { background: var(--ink); color: #fff; box-shadow: none; font-weight: 500; }
/* ---------- type canon (docs/product/DESIGN-CANON.md) ----------
One family (BDO Grotesk), one figure style, light weights: 300 for big numbers and titles,
400 for text, 500 for names, buttons and small labels. Nothing heavier. */
.pill { font-size: 14px; font-weight: 500; }
.tok-btn img, .hcount img { width: 22px; height: 22px; }
.tok-btn b, .hcount b { font-weight: 500; font-size: 15px; }
.pcard_t small, .chat-row small, .tasks .t small { font-weight: 400; }
/* =====================================================================================
NATURAL CANON (owner, 2026-10-10): no boxes, no frames, no corners, no lines that cut
the screen into parts. Things sit on a soft paper ground and are told apart by space,
tone and light. Where a shape is needed it is natural: a pebble, a drop, a circle.
===================================================================================== */
:root {
--pebble: 48% 52% 46% 54% / 56% 50% 50% 44%; /* a stone smoothed by water */
--pebble2: 54% 46% 52% 48% / 48% 56% 44% 52%;
--soft-ink: rgba(27, 24, 32, .055);
--halo: 0 0 0 5px rgba(27, 24, 32, .07), 0 8px 26px rgba(27, 24, 32, .08);
}
/* the ground: warm paper with a faint grain and two slow light clouds */
body, .scr:not(.scr--value) {
background-color: var(--bg);
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(60% 40% at 12% 8%, rgba(236, 143, 220, .07), transparent 70%),
radial-gradient(55% 45% at 92% 96%, rgba(127, 168, 255, .07), transparent 70%);
}
/* no frames, no cards, no dividers */
.bal, .tasks, .ahead, .pcard, .val-open, .stats, .aura-ask, .cmp, .favs, .jm, .hcount, .tok-btn,
.chips button, .join-fld input, .jp--up, .look, .cd div, .val-tabs, .pill.ghost, .pcard .pill.ghost, .msheet-act .pill.ghost {
box-shadow: none !important; border: 0 !important;
}
.bal, .tasks, .ahead, .pcard, .val-open, .stats, .favs, .jm { background: transparent !important; }
.tasks li + li, .chats li + li .chat-row, .val-rows, .val-rows div, .msheet-body li, .top--chat, .bal_launch { border: 0 !important; }
.top--chat { padding-bottom: 6px; }
/* shapes: pebbles for things you press, circles for people */
.pill, .chips button, .hcount, .tok-btn, .jp--up { border-radius: var(--pebble) !important; }
.pill.ghost, .pcard .pill.ghost, .msheet-act .pill.ghost, .chips button, .hcount, .tok-btn, .jp--up { background: var(--soft-ink) !important; color: var(--ink); }
.chips button:nth-child(2n), .pcard_act .pill:nth-child(2n) { border-radius: var(--pebble2) !important; }
.chips button.is-on { background: var(--ink) !important; color: #fff; }
.pill { padding: 0 18px; }
.cmp { background: var(--soft-ink); border-radius: 28px 34px 30px 26px / 30px 26px 32px 28px; }
.cmp:focus-within { background: rgba(27, 24, 32, .075); }
.sheet_card { border-radius: 46% 54% 0 0 / 34px 40px 0 0; }
.toast { border-radius: var(--pebble); }
.aura-ask { background: var(--soft-ink) !important; border-radius: 30px 38px 32px 36px / 34px 30px 38px 32px; }
/* chosen things glow softly instead of getting a ring */
/* lists breathe: space instead of lines */
.feed { gap: 26px; }
.pcard { padding: 4px 2px; }
.tasks li { padding: 12px 2px; }
.val-rows div { padding: 11px 0; }
.bal { padding-top: 10px; }
.cd div { background: transparent; }
.cd b { font-weight: 300; font-size: 24px; }
.val-tabs { background: transparent; gap: 2px; }
.val-tabs button.is-on { background: transparent; color: var(--ink); box-shadow: none; position: relative; }
.val-tabs button.is-on::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; }
.val-tabs--range button.is-on { background: transparent; color: var(--ink); }
.val-open { padding: 14px 4px; }
.favs { min-height: 92px; background: radial-gradient(70% 90% at 50% 50%, rgba(27, 24, 32, .045), transparent 72%) !important; border-radius: 50%; }
/* sign-up: two ways shown as two faces, not two boxes */
/* wide things get round, slightly uneven ends (px radii), small things the % pebble */
.pill, .chips button, .hcount, .tok-btn, .toast { border-radius: 26px 30px 28px 24px / 28px 24px 30px 26px !important; }
.chips button:nth-child(2n), .pcard_act .pill:nth-child(2n) { border-radius: 30px 24px 26px 30px / 24px 30px 26px 28px !important; }
.pill.is-done { box-shadow: none !important; background: var(--soft-ink) !important; color: var(--mute); }
/* messages: soft drops, no outlines */
.bub { box-shadow: none !important; border: 0 !important; background: rgba(255, 253, 249, .78); border-radius: 22px 24px 22px 8px / 22px 22px 24px 10px; }
.bub.me { border-radius: 24px 22px 8px 22px / 22px 24px 10px 22px; }
/* =====================================================================================
SIGN-UP (owner, 2026-10-10): don't load the person. A small face, the name, one tick to
take both from Telegram, "Tap to continue". No gender, no gestures, no frames.
===================================================================================== */
.scr--join { overflow-y: auto; }
.js2 { width: 100%; min-height: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column;
padding: calc(64px + var(--top)) 24px calc(26px + var(--bot)); }
.js2-h { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.js2-sub { margin: 6px 0 0; color: var(--mute); font-size: 15px; }
.js2-row { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.js2-face { flex: none; width: 52px; height: 52px; padding: 0; border-radius: 50%; overflow: hidden; transition: transform .4s var(--spring), opacity .3s; }
.js2-face:active { transform: scale(.93); }
.js2-face img, .js2-face .face0 { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; font-size: 20px; }
.js2-face.is-busy { opacity: .5; }
.js2-name { flex: 1; width: 0; min-width: 0; height: 52px; border: 0; outline: 0; padding: 0 20px; font: inherit; font-size: 17px; line-height: 1.25; color: var(--ink);
background: var(--soft-ink); border-radius: 999px; caret-color: var(--purple); transition: background .3s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.js2-name:focus { background: rgba(27, 24, 32, .08); }
.js2-name::placeholder { color: #b3aeb9; }
.js2-tg { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-left: 2px; font-size: 14px; color: var(--mute); }
.js2-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.js2-tg i { flex: none; position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--soft-ink); transition: background .25s; }
.js2-tg input:checked + i { background: var(--ink); }
.js2-tg input:checked + i::after { content: ''; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.js2-tg input:checked ~ span { color: var(--ink); }
.js2-tg[hidden] { display: none; }
.js2-err { margin: 12px 2px 0; color: #b0475a; font-size: 13px; }
.js2-end { flex: none; margin-top: auto; padding-top: 14px; text-align: center; }
.js2-agree { align-items: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.45; }
.js2-agree i { margin-top: -1px; }
.js2-tgico { width: 16px; height: 16px; vertical-align: -3px; margin: 0 1px; }
.js2-cam { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: var(--soft-ink); }
.js2-cam svg { width: 22px; height: 22px; fill: none; stroke: var(--mute); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.js2-agree a { color: var(--ink); text-decoration: none; background: linear-gradient(transparent 62%, rgba(141, 75, 239, .14) 62%); padding: 0 1px; }
.js2-go { margin-top: 0; padding: 10px 16px; font-size: 15px; font-weight: 400; color: var(--ink); transition: opacity .3s, transform .4s var(--spring); }
.js2-go span { display: inline-block; margin-left: 4px; transition: transform .4s var(--spring); }
.js2-go:active span { transform: translateX(4px); }
.js2-go:disabled { opacity: .3; }
.js2-terms { margin: 6px auto 0; max-width: 300px; color: var(--mute); font-size: 12px; line-height: 1.5; }
.js2-terms a { color: var(--ink); text-decoration: none; background: linear-gradient(transparent 62%, rgba(141, 75, 239, .14) 62%); padding: 0 1px; }
/* =====================================================================================
CHAT (owner, 2026-10-10): fewer brand colours. Your message is the same soft pill as
theirs, with light glowing behind it. Messages arrive softly in their own place (type.js);
the send arrow is ink, never purple; "typing" is three breathing dots.
===================================================================================== */
/* messages gather at the bottom, by the composer, like in any messenger; none of them is ever
squeezed by the list (a flex item would shrink) */
.scr--chat .msgs { overscroll-behavior: contain; }
.scr--chat .msgs > :first-child { margin-top: auto; }
.scr--chat .msgs > * { flex: none; }
.bub { max-width: min(78%, 330px); padding: 9px 14px; font-weight: var(--w-light); white-space: pre-wrap; overflow-wrap: normal; transform-origin: 0 100%; }
.bub.me { transform-origin: 100% 100%; }
/* no brand colour in the glow (owner, 2026-10-10): a soft grey light, quiet, not sharp */
.bub.me { background: rgba(255, 253, 249, .92) !important; color: var(--ink) !important;
box-shadow: 0 6px 26px rgba(27, 24, 32, .09), 0 1px 6px rgba(27, 24, 32, .04) !important; }
.cmp_send { background: var(--soft-ink) !important; color: var(--mute) !important; }
.cmp.is-typing .cmp_send { background: var(--ink) !important; color: #fff !important; }
/* with the keyboard open the app is the visible part of the screen (app.js sets these), so the
composer stays on the keys; the home-bar gap under it goes away while the keys are up */
.app { top: var(--app-y, 0px); bottom: auto; height: var(--app-h, 100dvh); }
.is-kb .cmp { margin-bottom: 8px; }
/* the dots' pill is exactly as tall as a one-line message, so the reply opens out of it in place */
.bub--typing { padding: 9px 16px; }
.bub--typing .typing { display: flex; align-items: center; height: 1.35em; }
.typing { gap: 5px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); opacity: .35; animation: tBreathe 1.6s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .25s; }
.typing i:nth-child(3) { animation-delay: .5s; }
@keyframes tBreathe { 40% { opacity: .9; transform: translateY(-2px); } }
/* token screen (owner, 2026-10-10): a black-and-white chart icon beside Exchange opens Token value;
"?" is just a classic question mark that goes to the help centre; Support sits quietly at the
bottom in Telegram blue and opens the help bot */
.bal_act { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.bal_act .pill--x { margin-top: 0; }
.chart-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soft-ink); transition: transform .35s var(--spring); }
.chart-btn:active { transform: scale(.92); }
.chart-btn svg { width: 20px; height: 20px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-q { width: 32px; height: 32px; display: grid; place-items: center; font-size: 20px; font-weight: 300; color: var(--mute); line-height: 1; }
.support { display: block; margin: 0 auto; padding: 10px 16px; font-size: 14px; color: #2481cc; transition: opacity .2s; }
.support:active { opacity: .6; }
/* token block (owner, 2026-10-10): the glow under the token was a filter on the canvas, drawn as a
square layer that cut into the header. Now it is a soft light that fades out well before any edge,
and nothing around the token clips */
.bal { overflow: visible !important; }
.scr--token .tok-body { padding-top: 34px; }
.bal::before { content: ''; position: absolute; left: 50%; top: 70px; width: 240px; height: 200px; margin: -100px 0 0 -120px; pointer-events: none;
background: radial-gradient(closest-side, rgba(124, 58, 237, .13), rgba(124, 58, 237, .05) 55%, transparent); }
/* while scrolling, things fade out under the header instead of being cut by a hard line */
.scr--token .tok-body { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
/* sign-up documents (owner, 2026-10-10): the Terms, Privacy Policy and Rules sit right on the screen,
see-through and scrollable, with no frame; edges fade out. A touch lights the text up to read */
.js2 { height: 100%; }
.js2-docs { position: relative; flex: 1; min-height: 120px; margin: 22px -4px 0; padding: 18px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch;
font-size: 13px; line-height: 1.55; color: var(--ink); opacity: .32; outline: 0; transition: opacity .5s var(--soft);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%); }
.js2-docs.is-lit { opacity: 1; }
.js2-docs h2 { font-size: 17px; font-weight: 400; margin: 26px 0 6px; letter-spacing: -.01em; }
.js2-docs h2:first-child { margin-top: 0; }
.js2-docs h3 { font-size: 14px; font-weight: 500; margin: 16px 0 4px; }
.js2-docs p, .js2-docs li { margin: 0 0 8px; color: #3a3541; }
.js2-docs ul, .js2-docs ol { padding-left: 18px; margin: 0 0 8px; }
.js2-docs a { color: var(--ink); }
/* the end of a page (owner, 2026-10-10): one thin line says the page ends here; under it the
documents in quiet words and Support in Telegram blue, at the very bottom */
.pfoot { margin-top: 56px; padding: 18px 0 calc(8px + var(--bot)); border-top: 1px solid rgba(27, 24, 32, .08); text-align: center; }
.home-body { display: flex; flex-direction: column; }
.home-body > * { flex: none; }
.home-body .pfoot { margin-top: auto; }
.home-body .feed { margin-bottom: 56px; }
.pfoot_docs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.pfoot_docs a { font-size: 13px; color: var(--mute); text-decoration: none; }
.scr--value .pfoot { border-top-color: rgba(0, 0, 0, .08); }
/* footer, tidied (owner, 2026-10-10): close to the bottom, one quiet row: the documents on the left,
Support on the right; the page itself adds no extra space under it */
.tok-body, .home-body, .val-body { padding-bottom: calc(86px + var(--bot, 0px)) !important; }
.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 40px; padding: 12px 2px calc(12px + var(--bot)); text-align: left; }
.pfoot_docs { justify-content: flex-start; gap: 4px 14px; margin: 0; }
.pfoot_docs a { font-size: 12px; }
.pfoot .support { margin: 0; padding: 4px 0; font-size: 13px; }
.home-body .pfoot { justify-content: center; }
/* no scroll bars anywhere in the mini app */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* token screen without a header */
.scr--token .tok-body { padding-top: calc(30px + var(--top)); }
/* chart: the finger reads the line, the page does not move */
.val-chart svg { touch-action: none; }
/* sign-up: the tick line names the documents in plain words; a touch scrolls to them */
.js2-agree b { font-weight: 400; color: var(--ink); }
.js2-left { margin: 0 0 2px; font-size: 12px; color: var(--mute); transition: opacity .4s; }
.js2-left.is-done { opacity: 0; }
/* a person without a photo: a quiet circle with the first letter */
.pcard--new .pcard_t small { color: var(--mute); }
/* section names: quiet words, not UPPERCASE labels (canon: uppercase reads technical) */
.lbl { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 400 !important; margin: 28px 2px 10px; }
/* tasks still closed: a quiet row under a lock */
.tasks li.is-locked { opacity: .45; }
.tasks li.is-locked .ic { filter: grayscale(1); }
/* the chats list is a social list, not posters (owner, 2026-10-10): smaller faces, one calm row each */
.feed { gap: 4px; }
.pcard { gap: 2px 12px !important; padding: 8px 2px !important; }
.pcard_face, .pcard .face0 { width: 48px !important; height: 48px !important; font-size: 19px !important; }
.pcard_t b { font-size: 15px; }
.pcard_t small { font-size: 13px; -webkit-line-clamp: 1; }
.pcard .pill { height: 30px; padding: 0 12px; font-size: 13px; }
.pcard--hello, .pcard--new, .pcard--sent { grid-template-columns: auto 1fr auto !important; justify-items: stretch !important; text-align: left !important; }
.pcard--hello .pcard_face, .pcard--new .pcard_face, .pcard--new .face0, .pcard--hello .face0, .pcard--sent .pcard_face, .pcard--sent .face0 { grid-row: auto !important; }
.pcard--hello .pcard_act, .pcard--new .pcard_act, .pcard--sent .pcard_act { grid-column: 3 !important; margin: 0 !important; flex-wrap: nowrap; justify-content: flex-end; }
.pcard--new .pcard_t small { margin: 2px 0 0 !important; max-width: none !important; }
.pcard.is-new .pcard_face { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); }
/* sign-up: Photo / Generate under the name, as words with their icons after them */
.js2-pics { display: flex; gap: 22px; margin: 14px 0 4px 2px; }
.js2-pic { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 14px; color: var(--ink); transition: opacity .2s; }
.js2-pic:active { opacity: .5; }
.js2-pic svg { width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.js2-agree + .js2-agree { margin-top: 10px; }
.js2-agree a { color: var(--ink); text-decoration: none; background: linear-gradient(transparent 62%, rgba(27, 24, 32, .1) 62%); padding: 0 1px; }
/* you, top left. button.me only: a bare .me also matched your chat message (.bub.me) and made it
one squeezed row that ran off the screen */
button.me { display: flex; align-items: center; gap: 10px; text-align: left; padding: 0; transition: transform .35s var(--spring); }
button.me:active { transform: scale(.97); }
.me_face { width: 38px; height: 38px; flex: none; }
.me_face img, .me_face .face0 { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; font-size: 15px; }
.me_t b { display: block; font-size: 15px; font-weight: 500; line-height: 1.2; }
.me_t small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mute); }
/* the picture menu: one soft pill under the face, like the system one, with Generate in it */
.js2-row { position: relative; }
.js2 { position: relative; }
.pmenu { position: absolute; z-index: 20; left: 20px; margin-top: -6px; min-width: 220px; padding: 8px; border-radius: 26px 30px 28px 24px / 28px 24px 30px 26px;
background: rgba(255, 253, 249, .96); box-shadow: 0 18px 50px rgba(27, 24, 32, .16), 0 2px 8px rgba(27, 24, 32, .06);
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: pmIn .35s var(--spring) both; transform-origin: 30px 0; }
@keyframes pmIn { from { opacity: 0; transform: scale(.85); } }
.pmenu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; font-size: 16px; color: var(--ink); border-radius: 18px; text-align: left; }
.pmenu button:active { background: var(--soft-ink); }
.pmenu svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* people who said hello, still closed: their face a little blurred, the hands it takes on the right */
.pcard.is-locked .pcard_face, .pcard.is-locked .face0 { filter: blur(3px) saturate(.9); transform: scale(.96); }
.pcard.is-locked { cursor: pointer; }
.cost { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.cost img { width: 16px; height: 16px; }
.pcard.is-locked .pcard_act { grid-column: 3 !important; }
/* a closed chat: the face blurred, one button at the bottom */
.scr--chat.is-locked .js-face { filter: blur(3px); }
.lock-note { margin: auto; text-align: center; color: var(--mute); font-size: 14px; padding: 30px 0; }
.lock-face { display: block; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; position: relative; }
.lock-face img, .lock-face .face0 { width: 100%; height: 100%; object-fit: cover; font-size: 36px; filter: blur(7px); transform: scale(1.1); transition: filter 1.2s var(--soft), transform 1.2s var(--soft); }
.lock-face::after { content: ''; position: absolute; inset: 22%; background: url(./img/purple-wave-hand.svg?v=2) center / contain no-repeat; opacity: 0; transform: scale(.4) rotate(-20deg); }
.lock-note.is-opening .lock-face img, .lock-note.is-opening .lock-face .face0 { filter: blur(0); transform: scale(1); }
.lock-note.is-opening .lock-face::after { animation: unlockWave 1.4s var(--soft) both; }
@keyframes unlockWave {
0% { opacity: 0; transform: scale(.4) rotate(-20deg); }
25% { opacity: 1; transform: scale(1.1) rotate(14deg); }
45% { transform: scale(1.05) rotate(-12deg); }
65% { transform: scale(1.05) rotate(10deg); }
85% { opacity: 1; transform: scale(1) rotate(0); }
100% { opacity: 0; transform: scale(1.3) rotate(0); }
}
.unlock { flex: none; padding: 10px 16px calc(14px + var(--bot)); }
.unlock_go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; font-size: 16px; color: #fff; background: var(--ink);
border-radius: 26px 30px 28px 24px / 28px 24px 30px 26px; transition: transform .35s var(--spring), opacity .3s; }
.unlock_go .cost { color: #fff; opacity: .85; }
.unlock_go:active { transform: scale(.97); }
.unlock_go:disabled { opacity: .6; }
/* slow network: the hand waves softly at the top (owner, 2026-10-10: a loader in our style) */
.netload { position: fixed; z-index: 70; left: 50%; top: calc(14px + var(--top)); transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 22px; background: rgba(255, 253, 249, .92);
box-shadow: 0 8px 26px rgba(27, 24, 32, .1); font-size: 13px; color: var(--mute); transition: opacity .4s, transform .5s var(--spring); }
.netload.is-on { opacity: 1; transform: translate(-50%, 0); }
.netload img { width: 20px; height: 20px; animation: nlWave 1.6s ease-in-out infinite; transform-origin: 70% 90%; }
@keyframes nlWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-8deg); } 75% { transform: rotate(10deg); } }
/* =====================================================================================
SYMBOLS (owner, 2026-10-10): soft, a little long, never sharp; each moves once when it
arrives and, rarely, again later. They never vanish and come back: they only move.
===================================================================================== */
.w { white-space: nowrap; }
.w.w--long { white-space: normal; }
.k { display: inline-block; white-space: pre; }
/* knocked in: each character is in its place from the start, only unseen, so the pill never grows */
.bub.is-knock .k { opacity: 0; transform: translateY(-.16em) scale(.92); transition: opacity .18s ease-out, transform .26s cubic-bezier(.3, 1.45, .5, 1); }
.bub.is-knock .k.in { opacity: 1; transform: none; }
/* their words come clear while the pill opens out of the typing dots */
.bub.is-soft .k { opacity: 0; transition: opacity .6s ease-out .3s; }
.bub.is-soft .k.in { opacity: 1; }
.g-ex .ex-b::before { content: attr(data-c); }
.g { animation-fill-mode: both; animation-timing-function: cubic-bezier(.37, 0, .25, 1); }
/* "!": the stroke rises and lands on its dot; the dot gives a little under it */
.g-ex { position: relative; }
.g-ex .ex-d { display: inline-block; clip-path: inset(70% 0 0 0); transform-origin: 50% 100%; }
.g-ex .ex-b { position: absolute; left: 0; top: 0; clip-path: inset(0 0 32% 0); }
.g-ex.is-play .ex-b { animation: exBar 1.15s cubic-bezier(.37, 0, .25, 1) both; }
.g-ex.is-play .ex-d { animation: exDot 1.15s ease-out both; }
@keyframes exBar { 0% { transform: none; } 38% { transform: translateY(-.34em); } 62% { transform: translateY(.02em) scaleY(.94); } 76% { transform: translateY(-.06em); } 100% { transform: none; } }
@keyframes exDot { 0%, 58% { transform: none; } 66% { transform: scale(1.18, .78); } 82% { transform: scale(.96, 1.04); } 100% { transform: none; } }
.g-q.is-play { animation: gTilt 1.5s; transform-origin: 50% 90%; }
@keyframes gTilt { 30% { transform: rotate(13deg); } 60% { transform: rotate(-5deg); } 82% { transform: rotate(2deg); } }
.g-dot.is-play { animation: gSettle 1.1s; transform-origin: 50% 100%; }
@keyframes gSettle { 30% { transform: translateY(-.22em); } 55% { transform: scale(1.2, .82); } 75% { transform: scale(.95, 1.05); } }
/* ",": hangs lightly, like something hung on a hook */
.g-cm.is-play { animation: gHangSoft 1.6s; transform-origin: 50% 0; }
@keyframes gHangSoft { 25% { transform: rotate(-9deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } }
.g-eye.is-play { animation: gBlink 1s; }
@keyframes gBlink { 45% { transform: scaleY(1); } 55% { transform: scaleY(.15); } 68% { transform: scaleY(1); } }
.g-smile.is-play { animation: gSmile 1.4s; }
@keyframes gSmile { 40% { transform: rotate(10deg) scale(1.08); } }
.g-wave.is-play { animation: gWaveSoft 1.8s; }
@keyframes gWaveSoft { 25% { transform: translate(.08em, -.06em); } 50% { transform: translate(-.06em, .05em); } 75% { transform: translate(.03em, -.02em); } }
/* "@": a few slow turns, then it settles */
.g-at.is-play { animation: gSpin 2.6s cubic-bezier(.3, 0, .2, 1); }
@keyframes gSpin { to { transform: rotate(1080deg); } }
.g-hash.is-play { animation: gPulse 1s; }
@keyframes gPulse { 40% { transform: scale(1.18); } }
.g-star.is-play { animation: gTwinkle 1.6s; }
@keyframes gTwinkle { 50% { transform: rotate(72deg) scale(1.22); } }
.g-plus.is-play { animation: gTurn90 1.3s; }
@keyframes gTurn90 { to { transform: rotate(90deg); } }
.g-line.is-play { animation: gStretch 1.1s; }
@keyframes gStretch { 45% { transform: scaleX(1.35); } }
.g-slash.is-play { animation: gLean 1.1s; }
@keyframes gLean { 45% { transform: rotate(14deg); } }
.g-amp.is-play { animation: gRock 1.5s; }
@keyframes gRock { 30% { transform: rotate(-10deg); } 65% { transform: rotate(7deg); } }
.g-pct.is-play { animation: gHalf 1.7s; }
@keyframes gHalf { to { transform: rotate(180deg); } }
.g-cur.is-play { animation: gCoin 1.8s; }
@keyframes gCoin { to { transform: perspective(80px) rotateY(360deg); } }
.g-num.is-play { animation: gRollSoft 1s; }
@keyframes gRollSoft { 40% { transform: translateY(-.16em); } }
.g-qt.is-play { animation: gHangSoft 1.4s; transform-origin: 50% 0; }
.g-ptr.is-play { animation: gNudge 1.1s; }
@keyframes gNudge { 40% { transform: translateX(calc(var(--dir, 1) * .2em)); } }
.g-emo.is-play { animation: gBloomSoft 1.5s; }
@keyframes gBloomSoft { 40% { transform: scale(1.25) rotate(6deg); } 70% { transform: scale(.96) rotate(-2deg); } }
/* header: you on the left; hellos and the token as two equal pills on the right */
.me_n { font-size: 15px; font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr--home .top .hcount { margin-left: auto; }
.scr--home .top .tok-btn { margin-left: 0; }
.scr--home .top { gap: 8px; }
/* home: they are typing (you left the chat before their answer) */
.typing-line { font-style: normal; color: var(--ink); animation: tLine 1.8s ease-in-out infinite; }
@keyframes tLine { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
/* letter faces of closed hellos: a lighter veil, the letter still guessable */
.pcard.is-locked .face0 { filter: blur(1.5px) saturate(.9); }
/* 2026-10-13 (owner) */
/* reading the documents: the rest of sign-up steps back, softly */
.js2 > * { transition: filter .5s ease, opacity .5s ease; }
.js2.is-reading > :not(.js2-docs):not(.js2-end) { opacity: .6; }
/* the dollar estimate: faint, under the tokens, never a block */
.bal_usd { display: block; margin-top: 6px; font-size: 13px; color: var(--mute); opacity: .7; }
.bal_usd:empty { display: none; }
/* the chart: a sideways touch reads the days, an up-down one scrolls the page */
.js-val-svg { touch-action: pan-y; }
button.hcount { cursor: pointer; transition: transform .35s var(--spring); }
button.hcount:active { transform: scale(.96); }
/* THE VEIL (owner, 2026-10-13): one blur for every closed face, whatever its size. The blur is
1/16 of the face's width, so the same person looks the same on a card (48), in the chat header
(36) and in the middle of a closed chat (96). A letter gets half of it: still guessable. */
.pcard.is-locked .pcard_face { filter: blur(3px) saturate(.9); transform: none; }
.scr--chat.is-locked .js-face { filter: blur(2.25px) saturate(.9); }
.lock-face img { filter: blur(6px) saturate(.9); transform: scale(1.06); }
.pcard.is-locked .face0 { filter: blur(1.5px) saturate(.9); transform: none; }
.lock-face .face0 { filter: blur(3px) saturate(.9); transform: none; }
.lock-note.is-opening .lock-face img, .lock-note.is-opening .lock-face .face0 { filter: none; transform: none; }
/* leaving and coming back (owner, 2026-10-13): the same quiet form as sign-up */
.js2--gone { height: auto; min-height: 100%; }
.gn-q { margin: 30px 0 2px; font-size: 15px; color: var(--ink); }
.gn-note { display: block; width: 100%; margin-top: 18px; padding: 14px 20px; border: 0; outline: 0; resize: none; font: inherit; font-size: 15px; color: var(--ink);
background: var(--soft-ink); border-radius: 26px 30px 28px 24px / 28px 24px 30px 26px; }
.gn-note::placeholder { color: #b3aeb9; }
.gn-facts { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--mute); }
.gn-facts li { margin-top: 6px; }
.gn-quiet { display: block; margin: 6px auto 0; padding: 8px 14px; font-size: 13px; color: var(--mute); }
.gn-quiet:active { opacity: .5; }
.gn-quiet[hidden] { display: none; }
.js2--gone > * { flex: none; }
.gn-note { min-height: 76px; }
/* the chart's dot (owner, 2026-10-13): soft, never stiff. It glides from day to day; on today it
breathes; a dashed line drops from it to the dates */
.val-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 0 4px rgba(17, 17, 17, .08), 0 2px 8px rgba(17, 17, 17, .18); }
.val-dot.is-glide, .val-line.is-glide { transition: left .16s cubic-bezier(.22, .8, .24, 1), top .16s cubic-bezier(.22, .8, .24, 1), height .16s cubic-bezier(.22, .8, .24, 1); }
.val-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: rgba(17, 17, 17, .16); opacity: 0; }
.val-dot.is-today::after { animation: vPulse 2.4s ease-in-out infinite; }
@keyframes vPulse { 0%, 100% { transform: scale(.7); opacity: 0; } 45% { transform: scale(1.5); opacity: .7; } }
.val-line { position: absolute; width: 0; margin-top: 8px; border-left: 1px dashed rgba(17, 17, 17, .28); pointer-events: none; }
.val-line[hidden], .val-dot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .val-dot.is-today::after { animation: none; opacity: .4; } }
/* ICON BESIDE A NUMBER (owner, 2026-10-13): one rule everywhere. The hand and the token are drawn
with different empty space inside their files, so the same box made them look different sizes.
Here the size is set by what the eye sees: the drawn shape is 1.2 x the number's height, and it
stands .4 of that height away from the number. Sizes are in em, so they follow the number.
Hand: the shape fills 156 of 256 x 237. Token: the hexagon fills 215 x 248 of 256 x 256. */
.hcount img, .cost img, .ic-hand { flex: none; width: 1.969em !important; height: 1.823em !important; margin: -.377em -.377em -.246em -.392em !important; }
.tok-btn img, .rw img, .ic-tok { flex: none; width: 1.238em !important; height: 1.238em !important; margin: -.019em -.1em !important; }
.hcount, .tok-btn { font-size: 15px; gap: .4em; padding: 0 14px 0 11px; }
.cost { gap: .4em; }
.rw { gap: .4em; }
/* 2026-10-13, evening (owner) */
input, textarea, select { font-family: inherit; }
/* editing your profile later: only the name and the photo */
#join.is-edit .js2-agree, #join.is-edit .js2-docs, #join.is-edit .js2-left { display: none; }
/* your profile: plain rows, no boxes, no lines */
.st-me { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; font-size: 20px; }
.st-me b { font-weight: 400; letter-spacing: -.01em; }
.st-face, .st-face img, .st-face .face0 { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; font-size: 22px; flex: none; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 2px; font-size: 16px; color: var(--ink); text-align: left; text-decoration: none; }
.st-row::after { content: '›'; color: var(--mute); font-size: 20px; line-height: 1; opacity: .7; }
.st-row:active { opacity: .5; }
.st-gap { height: 20px; }
.st-sw { position: relative; }
.st-sw::after { content: none; }
.st-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-sw i { flex: none; position: relative; width: 46px; height: 28px; border-radius: 15px 14px 15px 14px / 14px 15px 14px 15px; background: var(--soft-ink); transition: background .3s; }
.st-sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(27, 24, 32, .18); transition: transform .35s var(--spring); }
.st-sw input:checked + i { background: var(--ink); }
.st-sw input:checked + i::after { transform: translateX(18px); }
/* opening a chat with a hand: the face just comes clear, no hand waving over it */
.lock-face::after { content: none !important; }
/* typing: the three dots carry the chameleon tints (pink, sky, violet, peach), softly */
.typing i { background: #b9a6f2; opacity: .55; animation: tBreathe 1.6s ease-in-out infinite, tCham 5.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .25s, -1.7s; }
.typing i:nth-child(3) { animation-delay: .5s, -3.4s; }
@keyframes tCham { 0%, 100% { background: #f3a9cf; box-shadow: 0 0 6px rgba(243, 169, 207, .55); } 25% { background: #9ccdf6; box-shadow: 0 0 6px rgba(156, 205, 246, .55); } 50% { background: #a98bf0; box-shadow: 0 0 6px rgba(169, 139, 240, .55); } 75% { background: #f7c4a2; box-shadow: 0 0 6px rgba(247, 196, 162, .55); } }
/* a tap on a message: how long ago, right under it, then it fades */
.bub { position: relative; }
.bub::after { content: attr(data-ago); position: absolute; top: calc(100% + 2px); left: 12px; z-index: 2; white-space: nowrap; font-size: 11px; font-weight: 400; color: var(--mute); opacity: 0; transform: translateY(-3px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.bub.me::after { left: auto; right: 12px; }
.bub.is-when::after { opacity: 1; transform: none; }
/* a hello given in the chat: the hand itself, no pill around it */
.bub.bub--hand, .bub.me.bub--hand { background: none !important; box-shadow: none !important; padding: 2px 6px; }
.bub--hand img { display: block; width: 72px; height: 66px; }
/* hold the empty arrow: a ring fills around it, then a hand rises above; slide up to give it */
.cmp { position: relative; }
.cmp_send { position: relative; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.cmp_ring { position: absolute; left: -3px; top: -3px; width: calc(100% + 6px) !important; height: calc(100% + 6px) !important; transform: rotate(-90deg); pointer-events: none; animation: none !important; }
.cmp_ring circle { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 116.3; stroke-dashoffset: 116.3; }
.cmp_send.is-hold .cmp_ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset .65s linear; }
.cmp_hand { position: absolute; right: -2px; bottom: 100%; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
transform: translateY(var(--dy, 0px)); animation: handUp .45s var(--spring) backwards; }
.cmp_hand[hidden] { display: none; }
.cmp_hand img { width: 64px; height: 59px; transition: transform .3s var(--spring); filter: drop-shadow(0 6px 14px rgba(27, 24, 32, .14)); }
.cmp_hand small { font-size: 11px; color: var(--mute); transition: opacity .25s; }
.cmp_hand.is-armed img { transform: scale(1.22) rotate(-8deg); }
.cmp_hand.is-armed small { opacity: 0; }
.cmp_hand.is-go { transition: transform .4s ease-in, opacity .4s ease-in; transform: translateY(-190px) scale(.7); opacity: 0; }
@keyframes handUp { from { opacity: 0; transform: translateY(24px) scale(.5); } }
/* the chart's dot and its dashed line (owner, 2026-10-13, evening): moved by transform, no lag */
.val-dot { left: 0 !important; top: 0 !important; will-change: transform; transition: none !important; }
.val-line { left: 0 !important; margin-top: 0; will-change: transform; transition: none !important; border-left: 1px dashed rgba(17, 17, 17, .3); }
/* reading the documents (owner, 2026-10-14): no blur. On iPhone a blurred layer over a scrolling
list broke into smeared text and pink stripes; the rest of the screen only fades a little */
/* chat text in the same weight as the rest of the app: settings, the composer, names */
.bub { font-weight: var(--w-reg); }
/* "Time on every message" (settings → Chats) */
.bub_t { display: none; }
.msgs.is-times .bub_t { display: block; margin: 2px -2px -3px 0; font-size: 11px; line-height: 1.3; color: var(--mute); text-align: right; font-weight: 400; white-space: nowrap; }
.msgs.is-times .bub--hand .bub_t { text-align: center; }
/* say hello back: the chat opens in place (owner, 2026-10-14) */
.lock-note.is-leaving { transition: opacity .3s ease-out, transform .3s ease-out; opacity: 0; transform: scale(.97); }
.msgs.is-arriving > * { animation: chatIn .5s var(--soft) backwards; }
.cmp.is-arriving { animation: chatIn .45s var(--soft) backwards; }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } }
/* the hand beside the arrow (owner, 2026-10-14): half the old size, up and to the left of the arrow
at about 60 degrees, tilted; it stays where it appeared until it is given or put away */
.cmp_hand { right: auto !important; left: auto; bottom: auto !important; margin: 0 !important; position: absolute; display: block !important;
inset: auto 34px 46px auto !important; padding: 10px; transform: rotate(-24deg) !important; transform-origin: 70% 80%;
pointer-events: auto !important; animation: handPop .38s cubic-bezier(.3, 1.5, .5, 1) backwards !important; }
.cmp_hand[hidden] { display: none !important; }
.cmp_hand img { width: 32px !important; height: 30px !important; display: block; transform: none !important; filter: drop-shadow(0 3px 7px rgba(27, 24, 32, .16)) !important; }
.cmp_hand:active img { transform: scale(.92) !important; }
.cmp_hand.is-away { transition: opacity .2s ease-out; opacity: 0; }
.cmp_hand.is-go { transition: transform .45s cubic-bezier(.5, 0, .75, .4), opacity .45s ease-in; transform: translate(-60px, -220px) rotate(-8deg) scale(1.3) !important; opacity: 0; }
@keyframes handPop { from { opacity: 0; transform: translate(14px, 18px) rotate(10deg) scale(.4); } }
/* ICON BESIDE A NUMBER, v2 (owner, 2026-10-14: "the hand is bigger than the digits"): the drawn
shape now stands at about the height of the digits plus a little (×0.8 of v1), hand and token alike */
.hcount img, .cost img, .ic-hand { width: 1.575em !important; height: 1.458em !important; margin: -.302em -.302em -.197em -.314em !important; }
.tok-btn img, .rw img, .ic-tok { width: .99em !important; height: .99em !important; margin: -.015em -.08em !important; }
/* Favorites on the same grid as Chats (owner, 2026-10-14): the same left edge, gap and size, so a
face kept in Favorites stands right above the faces below. Empty: soft seats where faces will go */
.favs { display: block !important; min-height: 0 !important; padding: 4px 2px 8px !important; border: 0 !important; border-radius: 0 !important; background: none !important; transform: none !important; }
.favs.is-over .favs_seats i, .favs.is-target .favs_seats i { background: radial-gradient(closest-side, rgba(27, 24, 32, .09), rgba(27, 24, 32, .025) 70%, transparent); }
.favs.is-over .favs_row { transform: scale(1.02); }
.favs_row { gap: 10px !important; transition: transform .3s var(--spring); }
.favs_row:empty { display: none; }
.favs_seats { position: relative; display: flex; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.favs_seats[hidden] { display: none; }
.favs_seats i { flex: none; width: 64px; height: 64px; margin: 0 6px 25px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(27, 24, 32, .055), rgba(27, 24, 32, .015) 70%, transparent); transition: background .3s, transform .4s var(--spring); }
.favs_seats i:nth-child(n+2) { opacity: .6; }
.favs_seats i:nth-child(n+3) { opacity: .35; }
.favs_seats i.is-landed { transform: scale(1.06); background: radial-gradient(closest-side, rgba(169, 139, 240, .22), rgba(156, 205, 246, .08) 70%, transparent); }
.favs_hint { position: absolute; left: 6px; right: 0; bottom: 4px; margin: 0; text-align: left !important; font-size: 13px; color: var(--mute); }
.sitem.is-hinting { transform: scale(.96); opacity: .7; }
.sitem--ghost.is-hint { animation: favHint2 3.2s var(--soft) .1s both !important; }
@keyframes favHint2 {
0% { opacity: 0; transform: translate(0, 0) scale(1); }
14% { opacity: .7; transform: translate(0, -6px) scale(1.06); }
46% { opacity: .7; transform: translate(var(--dx), var(--dy)) scale(1.04); }
58% { opacity: .55; transform: translate(var(--dx), var(--dy)) scale(1); }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
/* Watch a short video: the AdsGram task inside the sheet, in our type */
.vd-task { margin: 14px auto 4px; max-width: 340px; text-align: left; }
.vd-el { display: block; width: 100%; font-family: inherit; --adsgram-task-font-size: 15px; --adsgram-task-icon-size: 44px; --adsgram-task-title-gap: 4px;
--adsgram-task-button-width: 84px; --adsgram-task-icon-title-gap: 12px; }
.vd-rw { font-size: 13px; color: var(--mute); }
/* The slotted label otherwise inherits Arial from the SDK's native button. */
.vd-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; font-family: 'BDO Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.4; }
.vd-btn.is-done { background: var(--soft-ink); color: var(--mute); }
.tasks li.vd-placement { display: block; }
.vd-placement > .task-partner { display: block; font-size: 11px; color: var(--mute); margin: 0 0 5px 50px; }
.vd-placement .vd-el { --adsgram-task-icon-size: 38px; --adsgram-task-button-width: 78px; }
.vd-placement .ch-note { margin: 7px 0 0 50px; font-size: 12px; }
/* the header sits a little lower (owner, 2026-10-14) */
.scr--home .top { padding-top: calc(26px + var(--top)); }
/* two-step verification (owner, 2026-10-14) */
.ts-row { display: flex; margin: 18px 0 0; }
.ts-code { letter-spacing: .3em; font-size: 22px; text-align: center; }
.ts-err { min-height: 20px; margin: 10px 2px 0; font-size: 13px; color: var(--mute); }
.ts-go { display: block; height: 46px; margin: 8px auto 0; padding: 0 26px; font-size: 15px; }
.ts-go:disabled { opacity: .35; }
.ts-off { margin-top: 18px; }
.ts-gate { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: calc(80px + var(--top)) 22px 22px; background: var(--bg); animation: chatIn .5s ease both; }
.ts-in { width: 100%; max-width: 420px; text-align: center; }
/* per token card on the token page (owner, 2026-10-15) */
.pt { display: block; width: 100%; text-align: left; margin: 22px 0 0; padding: 4px 4px 0; }
.pt_top { display: flex; justify-content: space-between; color: var(--mute); font-size: 13px; }
.pt_n { display: block; font-size: 28px; font-weight: 300; letter-spacing: -.02em; margin-top: 4px; }
.pt_svg { display: block; width: 100%; height: 70px; margin-top: 8px; }
.pt_svg .pt_l { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pt_svg .pt_floor { stroke: var(--mute); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; vector-effect: non-scaling-stroke; }
.pt_rows { display: flex; justify-content: space-between; margin-top: 8px; color: var(--mute); font-size: 13px; }
.pt_rows b { color: var(--ink); font-weight: 500; margin-left: 4px; }
.pt:active { opacity: .7; }
/* settings groups (2026-10-15) */
.st-h { margin: 22px 2px 2px; font-size: 13px; color: var(--mute); }
.st-me + .st-h { margin-top: 0; }
/* chats waitlist (2026-10-15) */
.wl { text-align: center; padding: 34px 18px 8px; }
.wl_t { display: block; font-size: 20px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
.wl_p { margin: 8px auto 14px; max-width: 300px; color: var(--mute); font-size: 14px; line-height: 1.45; }
/* boxes (2026-10-15) */
.bal_act { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bx_i { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 12px; background: var(--card); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); transition: transform .35s var(--spring); }
.bx_i:active { transform: scale(.95); }
.bxc { display: block; width: 84px; height: 84px; }
.bxc--big { width: 180px; height: 180px; margin: 0 auto; }
.bx_i b { font-size: 14px; font-weight: 500; color: var(--ink); }
.bx_i span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mute); }
.bx-s_img { width: 170px; margin: 18px auto 6px; }
.bx_i--x { grid-column: 1 / -1; flex-direction: row; gap: 12px; padding: 10px 16px; background: #111013; box-shadow: none; color: #fff; text-align: left; }
.bx_i--x .bxc { width: 72px; height: 72px; flex: none; }
.bx_i--x .bx_x { display: flex; flex-direction: column; flex: 1; min-width: 0; text-align: left; }
.bx_i--x b { color: #fff; }
.bx_i--x small { font-size: 12px; color: rgba(255,255,255,.55); }
.bx_i--x > span:last-child { color: rgba(255,255,255,.75); }
.bx-s--x .bx-s_img { background: #111013; border-radius: 22px; padding: 6px; width: 192px; }
.bx-s_img.is-shake { animation: bxShake .45s ease-in-out infinite; }
.bx-s_img.is-open { animation: bxPop .5s var(--spring) both; }
.bx-s .msheet-act { display: flex; gap: 8px; justify-content: center; align-items: center; }
.bx-s .msheet-act .pill { margin: 0; }
.bx-s_usd { margin-top: 8px; font-size: 11px; color: var(--mute); opacity: .55; }
@keyframes bxShake { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-4deg) scale(1.03) } 75% { transform: rotate(4deg) scale(1.03) } }
@keyframes bxPop { from { transform: scale(.8); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .bx-s_img.is-shake, .bx-s_img.is-open { animation: none; } }
.bx-s_img { position: relative; }
.bx-tk { position: absolute; left: 50%; top: 22%; width: 26px; height: 26px; margin-left: -13px; opacity: 0; animation: bxTk .9s var(--spring) var(--d) both; }
@keyframes bxTk { from { opacity: 0; transform: translate(0, 20px) scale(.4) } 60% { opacity: 1 } to { opacity: 1; transform: translate(var(--x), -34px) scale(1) } }
@media (prefers-reduced-motion: reduce) { .bx-tk { animation: none; opacity: 1; transform: translate(var(--x), -34px); } }
.bx_i--x .bx_x b, .bx_i--x .bx_x small { align-self: flex-start; text-align: left; }
/* the hello button: the hand inside, the price only after a tap (owner, 2026-10-15) */
.pill--hi { display: inline-flex; align-items: center; gap: 6px; }
.pill--hi .pill_hand { width: 18px; height: 18px; }
.pill--hi.is-ask .cost { color: inherit; }
/* two-step (owner, 2026-10-15): a tick while it is on, one switch, six lines for the code */
.ts-ok { display: inline-block; width: .8em; height: .8em; vertical-align: -.05em; margin-left: 4px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.st-row .ts-ok { width: 16px; height: 16px; vertical-align: -2px; }
.ts-sw { margin-top: 14px; }
.ts-otp { position: relative; display: block; margin: 22px auto 0; width: 264px; max-width: 100%; height: 52px; cursor: text; }
.ts-otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; background: none; color: transparent; caret-color: transparent; }
.ts-otp_d { display: flex; justify-content: space-between; height: 100%; pointer-events: none; }
.ts-otp_d i { position: relative; width: 34px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-style: normal; font-family: inherit; font-weight: 400; font-size: 26px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ts-otp_d i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--mute); opacity: .55; transition: background .25s; }
.ts-otp_d i.is-at::after { background: var(--ink); opacity: 1; }
/* verified tick (owner, 2026-10-15): Telegram's idea, in Purple */
.vbadge { display: inline-block; width: 1em; height: 1em; margin-left: 4px; vertical-align: -.14em; }
.vbadge path { fill: var(--purple); }
.vbadge .vbadge_t { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* home (owner, 2026-10-15): light hello buttons; a hello you sent waits on top; people who said hello wave */
.pcard .pill--hi.ghost { background: var(--soft-ink) !important; color: var(--ink); box-shadow: none; }
.pcard--sent { opacity: .9; }
.sent-hand img { width: 22px; height: 22px; opacity: .55; }
.pcard--hello.is-waving .pill_hand { animation: hiWave 1.8s ease-in-out infinite; transform-origin: 70% 90%; }
@keyframes hiWave { 0%, 55%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .pcard--hello.is-waving .pill_hand { animation: none; } }
/* remove from my list: a quiet round button on the right of the chat header */
.rm-btn { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--mute); }
.rm-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rm-btn:active { opacity: .5; }
/* 15.10 later (owner): icons sit on the text's centre line; hello back is an outlined "Open chat";
the hello flies off; rule lists with icons; footer: Support on one side, Report a bug on the other */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill--hi, .pill--open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.pill--hi .pill_hand { display: block; width: 21px; height: 19.5px; margin: -2px -2px 0 -2px; } /* the hand fills only 61% of its file: sized and lifted by the drawing, not the frame */
.pcard .pill--open { background: transparent !important; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
.pill--open .ico { width: 16px; height: 16px; margin-top: -1px; }
.hi-fly { position: fixed; z-index: 90; width: 28px; height: 28px; pointer-events: none; animation: hiFly 1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes hiFly { 0% { transform: translate(0, 0) scale(.6) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(40px, -180px) scale(1.25) rotate(-18deg); opacity: 0; } }
.ilist { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
.ilist li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; font-size: 15px; line-height: 1.4; }
.ilist .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--purple); }
.pfoot_row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px; }
.pfoot_row .support { margin: 0; }
.bugbtn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 4px; font-size: 14px; color: var(--mute); }
.bugbtn .ico { width: 16px; height: 16px; }
.bug-s > .ico { width: 44px; height: 44px; color: var(--ink); stroke-width: 1.6; }
.bug-t { width: 100%; margin-top: 14px; min-height: 110px; padding: 12px 14px; resize: none; font: inherit; text-align: left; }
@media (prefers-reduced-motion: reduce) { .hi-fly { animation-duration: .01s; } }
.msheet-body .ilist li { padding: 9px 0; }
.msheet-body .ilist li::before { content: none; }
/* token chart like a wallet (owner, 2026-10-15): green going up, red going down, prices on the right,
today a little in from the edge */
.val-chart { position: relative; }
.val-ylab { position: absolute; top: 0; right: 0; width: 16%; height: 0; padding-bottom: 56.25%; pointer-events: none; }
.val-ylab span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--mute); }
.pfoot a, .support, .bugbtn { transition: opacity .15s, background .15s; border-radius: 10px; }
.pfoot a.is-tap, .support.is-tap, .bugbtn.is-tap, .pfoot a:active, .support:active, .bugbtn:active { opacity: .45; background: rgba(27, 24, 32, .06); }
/* form opening, last step: the gathered symbols melt into the real token */
.bx-s_img { position: relative; }
.bx-real { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%) scale(.82); opacity: 0; transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.bx-s_img.is-real .bx-real { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bx-s_img.is-real .bxc { opacity: 0; transition: opacity 1.1s ease .15s; }
.val-ylab { height: 180px; padding-bottom: 0; }
.val-ylab span { font-family: inherit; letter-spacing: 0; }
.pfoot:has(.pfoot_row) { flex-wrap: wrap; }
.pfoot_docs + .pfoot_row { width: 100%; margin-top: 10px; }
.bugbtn { white-space: nowrap; }
/* the change under the price: % in a soft pill, then $, in green going up and red going down */
.js-val-sub .chg { display: inline-block; padding: 3px 9px; margin-right: 8px; border-radius: 99px; background: rgba(49, 181, 69, .12); color: #2a9d3c; font-weight: 500; }
.js-val-sub .chg-usd { margin-right: 8px; color: #2a9d3c; font-weight: 500; }
.js-val-sub .chg.is-down { background: rgba(229, 72, 77, .12); color: #d8343a; }
.js-val-sub .chg-usd.is-down { color: #d8343a; }
/* line or candles (owner, 2026-10-15): a small red-and-green candles button at the end of the range tabs */
.val-tabs--range .val-mode { flex: 0 0 36px; display: grid; place-items: center; opacity: .5; transition: opacity .25s; }
.val-tabs--range .val-mode.is-on { opacity: 1; }
.val-mode svg { width: 18px; height: 18px; stroke-width: 1.6; stroke-linecap: round; }
.val-chart .w { stroke-width: 1; vector-effect: non-scaling-stroke; }
.val-ohlc { display: flex; gap: 12px; margin-top: 4px; font-size: 13px; color: #3a3a3c; white-space: nowrap; }
.val-ohlc i { font-style: normal; color: var(--mute); margin-right: 3px; }
.val-ohlc[hidden] { display: none; }
/* no pinned headers (owner, 2026-10-15): on the home, token and value screens the whole page
scrolls, the top with your name, hellos and balance included; nothing fades under a header */
.scr--home, .scr--token, .scr--value { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.scr--home .home-body, .scr--token .tok-body, .scr--value .val-body { flex: 1 0 auto; overflow: visible; }
.scr--token .tok-body { -webkit-mask-image: none; mask-image: none; }
/* want to talk to you: a sideways row of faces, each with a waving hand */
.wantrow { display: flex; gap: 14px; overflow-x: auto; margin: 0; padding: 4px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.want { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 7px; scroll-snap-align: start; }
.want_f { position: relative; width: 64px; height: 64px; }
.want_f .want_img, .want_f .face0, .want_f img:not(.want_hand) { width: 64px !important; height: 64px !important; border-radius: 50%; object-fit: cover; font-size: 24px; }
.want_hand { position: absolute; right: -4px; bottom: -2px; width: 26px; height: 24px; padding: 3px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 4px rgba(27, 24, 32, .12);
transform-origin: 70% 90%; animation: hiWave 2.2s ease-in-out infinite; }
.want:nth-child(2n) .want_hand { animation-delay: .5s; }
.want:nth-child(3n) .want_hand { animation-delay: 1.1s; }
.want b { max-width: 72px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.want:active .want_f { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .want_hand { animation: none; } }
.want_f .face0 { display: grid; place-items: center; }
/* $ per 1,000 tokens under the big value; the price labels get the 20% right of the plot (owner, 2026-10-15) */
.val-per { display: block; margin: 2px 0 6px; color: var(--mute); font-size: 13px; }
.val-ylab { width: 20%; }
/* footer (owner, 2026-10-15): Report a bug only on the chats page, on the left, the same size as
Support, the bug after the word; Support on the right */
.pfoot--home .pfoot_row { justify-content: space-between; padding: 0 2px; }
.pfoot--home .bugbtn, .pfoot--home .support { font-size: 13px; padding: 4px 0; margin: 0; }
.pfoot--home .bugbtn { gap: 5px; }
.pfoot--home .bugbtn .ico { width: 13px; height: 13px; }
/* the real token sits exactly where the symbols formed it */
.bx-real { transform: translate(-50%, -50%) scale(.9); }
.bx-s_img.is-real .bx-real { transform: translate(-50%, -50%) scale(1); }
.home-body .pfoot--home { display: block; } .pfoot--home .pfoot_row { width: 100%; }
/* ---------- weak phones (lite.js, owner 2026-10-15): no live blur. The app comes in without the
blur, the menu loses its glass (it is nearly opaque anyway), and blurred pictures switch to
sharp with a fade instead of animating the blur. Good phones keep everything above. ---------- */
@keyframes appInLite { from { opacity: 0; transform: scale(.965); } }
.is-lite .app.is-in { animation-name: appInLite; }
.is-lite .pmenu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255, 253, 249); }
.is-lite .intro_photo img, .is-lite .lock-face img, .is-lite .lock-face .face0 { transition-property: transform, opacity; }
.is-lite .intro_chat, .is-lite .js2 > * { transition-property: opacity; }
/* ---------- value screen and token card (owner, 2026-10-16) ---------- */
/* the line under the price is one line of a fixed height: moving the finger never moves the page */
.js-val-sub { display: block; height: 26px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the token card shows the change like the value screen: a green or red pill with the %, then the $ */
.pt_chg { display: block; height: 24px; line-height: 24px; margin-top: 4px; color: var(--mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt_chg .chg { display: inline-block; padding: 0 9px; margin-right: 8px; border-radius: 99px; background: rgba(49, 181, 69, .12); color: #2a9d3c; font-weight: 500; }
.pt_chg .chg-usd { margin-right: 8px; color: #2a9d3c; font-weight: 500; }
.pt_chg .chg.is-down { background: rgba(229, 72, 77, .12); color: #d8343a; }
.pt_chg .chg-usd.is-down { color: #d8343a; }
/* the candles switch: a round white button, a bit bigger; on, its icon is full */
.val-tabs--range button.val-mode { flex: 0 0 40px; width: 40px; height: 40px; align-self: center; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(17, 17, 17, .1); opacity: 1; }
.val-tabs--range button.val-mode svg { width: 22px; height: 22px; opacity: .45; transition: opacity .25s; }
.val-tabs--range button.val-mode.is-on svg { opacity: 1; }
.val-tabs--range button.val-mode.is-on::after { display: none; }
/* forms (owner, 2026-10-16): the real token shows exactly where the symbols gathered, same size;
only a fade, no growing, so it doesn't drift */
.bx-real, .bx-s_img.is-real .bx-real { transform: translate(-50%, -50%); }
.bx-real { display: flex; align-items: center; justify-content: center; }
.bx-real img { display: block; width: 100%; height: auto; margin: 0; }
/* ---------- pills and the token card, pass 2 (owner, 2026-10-16) ---------- */
/* the pill sits in the middle of its line and is never cut */
.js-val-sub, .pt_chg { display: flex; align-items: center; height: 30px; line-height: 20px; white-space: nowrap; overflow: hidden; }
.js-val-sub .chg, .pt_chg .chg { flex: none; padding: 3px 10px; line-height: 20px; }
.js-val-sub .chg-usd, .pt_chg .chg-usd { flex: none; }
/* the range tabs and the round candles button stand on one middle line */
.val-tabs--range { align-items: center; }
.val-tabs--range button.val-mode { flex: 0 0 38px; width: 38px; height: 38px; margin-left: 4px; }
/* the token card: an arrow says it opens the chart; a dot stands on today */
.pt_top { align-items: center; }
.pt_go { width: 16px; height: 16px; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt_plot { position: relative; display: block; }
.pt_dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; }
.pt_dot[hidden] { display: none; }
/* forms (owner, 2026-10-16): no pop and no moving layers while the token shows: it only fades in,
placed by left/top, so nothing jumps and no dark corners appear on phones */
.bx-s_img.is-open { animation: none; }
.bx-real, .bx-s_img.is-real .bx-real { transform: none; will-change: auto; }
/* ---------- value screen, pass 3 (owner, 2026-10-16): the line and the candles share one set of periods ---------- */
.js-val-sub .chg-t, .pt_chg .chg-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the launch mark on the value line (owner, 2026-10-16): a small label above the point where the price appeared */
.val-mark { position: absolute; transform: translate(-100%, -150%); margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: #fff; box-shadow: 0 1px 4px rgba(17, 17, 17, .12); color: #3a3a3c; font-size: 11px; line-height: 16px; white-space: nowrap; pointer-events: none; }
.val-mark[hidden] { display: none; }
/* home (owner, 2026-10-16): your chats and Favorites on the page; Want to talk to you and New for you
in one white block that you can swipe away to the left, leaving a thin edge, and swipe back */
.scr--home .home-body { overflow-x: hidden; }
.wcard { position: relative; margin: 18px 0 4px; padding: 2px 14px 14px; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 rgba(27, 24, 32, .04), 0 8px 24px rgba(27, 24, 32, .05);
transition: transform .45s cubic-bezier(.2,.8,.2,1), max-height .45s ease; max-height: 6000px; }
.wcard.is-drag { transition: none; }
.wcard .feed { margin-top: 0; transition: opacity .3s; }
.wcard .lbl:first-child { margin-top: 18px; }
.wcard .pcard { background: transparent; box-shadow: none; padding: 12px 2px; border-radius: 0; }
.wcard .pcard + .pcard, .wcard .lbl + .pcard { border-top: 1px solid rgba(27, 24, 32, .06); }
.wcard .lbl + .pcard { border-top: 0; }
.wcard .feed { gap: 0; }
.wcard .wantrow { margin: 0 -14px; padding: 4px 14px 12px; }
.wcard.is-tucked { transform: translateX(calc(-100% + 34px)); max-height: 150px; overflow: hidden; }
.wcard.is-tucked .feed { opacity: .35; pointer-events: none; }
.wcard_tab { position: absolute; top: 0; right: 0; bottom: 0; width: 34px; display: none; align-items: center; justify-content: center; border-radius: 0 26px 26px 0; color: var(--mute); }
.wcard.is-tucked .wcard_tab { display: flex; }
.wcard_tab .ico { width: 18px; height: 18px; }
/* only the first drawing pops the cards in; after that nothing jumps */
.feed.is-calm .pcard, .strip.is-calm .sitem { animation: none; }
.feed.is-calm .is-in, .strip.is-calm .is-in { animation: fade .35s ease both; }
.pill--hi { white-space: nowrap; }
.wcard .feed { margin-bottom: 0; }
.wcard .lbl { margin-top: 16px; }
.wcard { margin-bottom: 40px; }
/* chat (owner, 2026-10-16): holding the empty arrow grows it, so the finger sees it; the message bar
trembles softly while the ring fills */
.cmp_send.is-hold { transform: scale(1.32); transition: transform .65s cubic-bezier(.2,.8,.2,1), background .3s, color .3s; }
.cmp.is-holding { animation: cmpBuzz .12s linear infinite; }
@keyframes cmpBuzz { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.8px) rotate(-.15deg); } 75% { transform: translateX(.8px) rotate(.15deg); } }
@media (prefers-reduced-motion: reduce) { .cmp.is-holding { animation: none; } }
/* the chat header no longer cuts the messages: they fade softly under it */
.top--chat { position: relative; z-index: 2; }
.top--chat::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 26px; pointer-events: none; background: linear-gradient(rgba(246, 243, 238, 1), rgba(246, 243, 238, 0)); }
.scr--chat .msgs { padding-top: 22px; }
/* the time under the last message has room above the message bar (owner, 2026-10-16) */
.scr--chat .msgs { padding-bottom: 26px; }
/* candles, clearer (owner, 2026-10-16): wicks a touch heavier so they read on a phone */
.val-chart .w { stroke-width: 1.3; stroke-linecap: round; }
/* home (owner, 2026-10-16, later): a hello you sent waits in your chats row */
.sitem.is-wait { opacity: .8; }
.sitem_wf { position: relative; width: 64px; height: 64px; }
.sitem.is-wait .sitem_face, .sitem.is-wait .face0 { filter: saturate(.7) brightness(1.05); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(27, 24, 32, .14); }
.sitem_hand { position: absolute; right: -3px; bottom: -2px; width: 24px; height: 22px; padding: 3px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 4px rgba(27, 24, 32, .12); }
.sitem small { margin-top: -5px; font-size: 11px; font-weight: 400; color: var(--mute); }
/* people who want to talk to you: warm, bright, their own card */
.wantcard { position: relative; overflow: hidden; margin: 18px 0 0; padding: 16px 14px 4px; border-radius: 26px;
background: linear-gradient(140deg, #fff6e4 0%, #fffdf9 52%, #fdf3ff 100%);
box-shadow: 0 0 0 1px rgba(255, 178, 30, .3), 0 12px 30px rgba(255, 178, 30, .14); }
.wantcard::before { content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(255, 210, 120, .45) 0%, rgba(255, 210, 120, 0) 65%); }
.wantcard > * { position: relative; }
.want_head { display: flex; align-items: center; gap: 8px; }
.want_head b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.want_n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--gold); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.want_sub { margin: 4px 0 12px; font-size: 13px; line-height: 1.35; color: var(--mute); }
.wantcard .wantrow { margin: 0 -14px; padding: 2px 14px 12px; }
.wantcard .want_img, .wantcard .want_f .face0 { box-shadow: 0 0 0 2px #fffdf9, 0 0 0 3.5px var(--gold); }
.wantcard.is-fresh { animation: wantGlow 1.4s ease 2; }
@keyframes wantGlow { 50% { box-shadow: 0 0 0 2px rgba(255, 178, 30, .55), 0 14px 40px rgba(255, 178, 30, .35); } }
@media (prefers-reduced-motion: reduce) { .wantcard.is-fresh { animation: none; } }
/* meet someone new: the white block, with a warm heading instead of a shop label */
.new_head { padding: 16px 2px 6px; }
.new_head b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.new_head p { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--mute); }
.wcard { margin-top: 14px; }
/* tucked away it keeps its size, only slides to the edge */
.wcard.is-tucked { max-height: none; overflow: visible; }
/* a new message: its first words in a small bubble over the face, plus the ring */
.strip, .favs_row { padding-top: 16px; }
.sitem_wf { position: relative; display: block; width: 64px; height: 64px; font-style: normal; }
.sitem_msg { position: absolute; left: 50%; bottom: calc(100% - 12px); transform: translateX(-50%); z-index: 2; max-width: 92px; padding: 4px 9px; border-radius: 12px;
background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 3px 10px rgba(27, 24, 32, .1); font-size: 11px; font-style: normal; font-weight: 500; line-height: 1.25; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: msgPop .4s var(--spring) both; }
@keyframes msgPop { from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(.8); } }
.strip.is-calm .sitem_msg { animation: none; }
.strip.is-calm .is-in .sitem_msg { animation: msgPop .4s var(--spring) both; }
.sitem.is-new .sitem_msg { box-shadow: 0 0 0 1px rgba(255, 178, 30, .45), 0 3px 10px rgba(255, 178, 30, .18); }
/* the bubble starts at the face's left edge, so the first one in the row is never cut */
.sitem_msg { left: -2px; transform: none; max-width: 86px; }
@keyframes msgPop { from { opacity: 0; transform: translateY(4px) scale(.8); } }
/* Chaters not linked yet (owner, 2026-10-16): red cross in the note, Open Chaters winks a few times */
.ch-note.is-bad { position: relative; padding-left: 40px; background: rgba(229, 72, 77, .1); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .28); animation: chBad .4s ease-out; }
.ch-note.is-bad::before { content: ''; position: absolute; left: 11px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: #e5484d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.pill.is-nudge { animation: chNudge 1.1s ease-in-out 4; }
@keyframes chBad { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes chNudge { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } 45% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(229, 72, 77, .22); } }
@media (prefers-reduced-motion: reduce) { .ch-note.is-bad, .pill.is-nudge { animation: none; } }
/* home (owner, 2026-10-16, night): the want card reads at a glance, its rings are whole, the first face
keeps its distance from the edge, the count sits straight, and nothing empty flashes while loading */
.wantcard { margin-top: 20px; padding: 18px 16px 6px;
background: linear-gradient(140deg, #ffe9bf 0%, #fff4dc 48%, #fde9ff 100%);
box-shadow: 0 0 0 1px rgba(255, 170, 20, .42), 0 14px 34px rgba(255, 170, 20, .22); }
.wantcard::before { background: radial-gradient(circle, rgba(255, 200, 90, .6) 0%, rgba(255, 200, 90, 0) 65%); }
.want_sub { color: rgba(27, 24, 32, .62); }
.wantcard .wantrow, .wcard .wantrow { margin: 0 -16px; padding: 7px 16px 12px; scroll-padding-inline: 16px; }
.wantcard .want_img, .wantcard .want_f .face0 { box-shadow: 0 0 0 2.5px #fff4dc, 0 0 0 4.5px var(--gold); }
.want_n { height: 22px; min-width: 24px; padding: 0 8px; line-height: 22px; display: inline-block; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; flex: none; }
.want_img, .sitem_face, .pcard_face { background: #ece8f1; }
.wcard:has(> .feed:empty) { display: none; }
.wcard.is-empty { display: none; }
/* holding the arrow: the arrow grows steadily, only the message field trembles a little */
.cmp.is-holding { animation: none; }
.cmp.is-holding .cmp_in { animation: cmpBuzz .14s linear infinite; }
@keyframes cmpBuzz { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.6px); } 75% { transform: translateX(.6px); } }
@media (prefers-reduced-motion: reduce) { .cmp.is-holding .cmp_in { animation: none; } }
/* chat header, same ground as the chat (owner, 2026-10-16, night): no painted band under it; the messages
themselves fade out softly as they reach the header, so the paper, grain and light show through */
.top--chat::after { display: none; }
.scr--chat .msgs { padding-top: 30px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 16px, #000 44px); mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 16px, #000 44px); }
/* photos in chats (owner, 2026-10-16): the paperclip at the start of the message bar, photos with
soft corners in the chat, a quiet shimmer while sending, the whole screen on a tap */
.cmp { padding-left: 6px; }
.cmp_clip { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--mute); transition: color .2s, transform .3s var(--spring); }
.cmp_clip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-8deg); }
.cmp_clip:active { transform: scale(.88); color: var(--ink); }
.bub.bub--photo, .bub.me.bub--photo { padding: 3px; background: rgba(255, 253, 249, .78); }
.bub_ph { display: block; width: min(62vw, 240px); max-height: 340px; border-radius: 19px 21px 19px 7px / 19px 19px 21px 9px; overflow: hidden; background: #ece8f1; }
.me .bub_ph { border-radius: 21px 19px 7px 19px / 19px 19px 9px 21px; }
.bub_ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; cursor: zoom-in; }
.bub--photo.is-loaded .bub_ph img { opacity: 1; }
.bub--photo .bub_t { padding: 0 8px 4px; }
.bub--photo.is-sending .bub_ph { position: relative; }
.bub--photo.is-sending .bub_ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 70%) -100% 0 / 200% 100% no-repeat; animation: phSend 1.3s linear infinite; }
.bub--photo.is-sending img { filter: saturate(.8) brightness(1.04); }
.bub--photo.is-gone { opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; }
.bub--photo.is-broken .bub_ph { background: #ece8f1 url(./img/social/lock.svg) center / 22px no-repeat; }
@keyframes phSend { to { background-position: 100% 0; } }
.phv { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(12, 10, 16, 0); transition: background .25s; padding: calc(16px + var(--top, 0px)) 12px calc(16px + var(--bot, 0px)); }
.phv img { max-width: 100%; max-height: 100%; border-radius: 14px; transform: scale(.94); opacity: 0; transition: transform .3s var(--spring), opacity .25s; }
.phv.is-on { background: rgba(12, 10, 16, .92); }
.phv.is-on img { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bub--photo.is-sending .bub_ph::after { animation: none; } }
/* the first photo from someone: blurred until you choose to see their photos */
.bub_ph { position: relative; }
.bub--photo.is-veiled .bub_ph img { filter: blur(22px) saturate(.8); transform: scale(1.15); }
.bub_veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; background: rgba(27, 24, 32, .18); text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.bub_veil b { font-size: 15px; font-weight: 600; }
.bub_veil span { font-size: 12.5px; opacity: .9; }
/* Plain status; loading never shows the aura. */
.netload { padding: 8px 14px; }
/* The attachment is secondary and closer to Send. */
.cmp { padding-left: 16px; }
.cmp_clip { width: 38px; height: 38px; background: transparent; box-shadow: none; color: var(--mute); border: 0; opacity: .5; margin-right: -5px; }
.cmp_clip svg { width: 18px; height: 18px; }
.cmp_clip:hover, .cmp_clip:active, .cmp_clip:focus-visible { background: transparent; color: var(--ink); opacity: .8; }
/* the thank-you hand next to the clip (owner, 2026-10-20); it steps aside while you type */
.cmp_give { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: transparent; border: 0; padding: 0; margin-right: -10px; color: var(--mute); opacity: .5; transition: transform .3s var(--spring), opacity .2s, width .25s, margin .25s; }
.cmp_give svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cmp_give:active, .cmp_give:focus-visible { color: var(--ink); opacity: .8; transform: scale(.88); }
.cmp_clip svg { transform: none !important; }
.cmp.is-typing .cmp_give { width: 0; margin: 0 -8px 0 0; opacity: 0; pointer-events: none; overflow: hidden; }
.cmp_hand.is-left { inset: auto var(--give-r, 64px) 46px auto !important; transform: rotate(14deg) !important; transform-origin: 30% 80%; }
.bub.bub--emoji, .bub.me.bub--emoji { background: transparent !important; box-shadow: none !important; padding: 8px; }
.bub--emoji > .w { display: block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 112px; line-height: 1.1; }
.msgs.is-times .bub--emoji .bub_t { text-align: center; }
/* One checking/claim action across partner and Purple task rows. */
.tasks .js-task, .vd-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; max-width: calc(100% - 50px); }
.pill.is-checking { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; white-space: nowrap; background: rgba(27, 24, 32, .08) !important; color: var(--ink); animation: taskChecking 2.6s ease-in-out infinite; }
.task-gear { flex: none; width: 14px; height: 14px; animation: taskGear 7s linear infinite; }
.task-amount { white-space: nowrap; }
@keyframes taskChecking { 0%, 100% { opacity: .58; } 50% { opacity: .82; } }
@keyframes taskGear { to { transform: rotate(360deg); } }
.vd-frame { position: relative; min-height: 42px; width: 100%; }
.vd-frame.is-empty { min-height: 62px; }
.vd-frame.has-action .vd-btn { visibility: hidden; }
.vd-action { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.vd-action:active { transform: translateY(-50%) scale(.94); }
.vd-placeholder { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding-right: 120px; pointer-events: none; }
.vd-placeholder span { min-width: 0; }
.vd-placeholder b { display: block; font-size: 15px; font-weight: 500; }
.vd-placeholder small { display: block; font-size: 12px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .pill.is-checking, .task-gear { animation: none; } .pill.is-checking { opacity: .72; } }
/* forms: the top prize next to the price, the chance spelled out in the sheet (owner 2026-10-20) */
.bx_up { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--mute); }
.bx-s_win { margin: 6px 0 2px; font-size: 16px; color: var(--mute); }
.bx-s_win b { color: var(--ink); font-weight: 700; }
.bx-s_odds { margin: 0 0 8px; font-size: 13px; color: var(--mute); }
/* Checking: a thin ring that turns */
.task-spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid currentColor; border-right-color: transparent; animation: taskGear .9s linear infinite; }
.task-amount { display: inline-flex; align-items: center; gap: 3px; }
.task-amount img { flex: none; }
/* 20.10: an ad row with no ad steps aside (still laid out, so AdsGram can draw into it) */
.vd-placement.is-away { position: absolute; left: -9999px; width: 100%; visibility: hidden; pointer-events: none; }
.tasks--partners { position: relative; }
/* forms 20.10: number then token mark, icon rows in the sheet */
.ic2 { flex: none; width: 18px; height: 18px; color: var(--mute); }
.bx_up { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--mute); }
.bx_up .ic2 { width: 13px; height: 13px; }
.bx-s_rows { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 10px; text-align: left; }
.bx-s_rows li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--mute); }
.bx-s_rows li span { flex: 1; }
.bx-s_rows li b { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 700; }
.bx-s_p:empty { display: none; }
/* 20.10 (owner): pills read "number, icon"; the number sits on the icon's centre line, not lower */
.hcount, .tok-btn { padding: 0 11px 0 14px; }
.hcount b, .tok-btn b { display: block; line-height: 1; transform: translateY(.04em); }
/* the hand in the pill now and then runs through the chameleon colours, then settles back to purple */
.hcount img { animation: handGlint 11s ease-in-out 2.5s infinite; }
@keyframes handGlint {
0%, 84% { filter: none; }
88% { filter: hue-rotate(-70deg) saturate(1.5) brightness(1.08); }
92% { filter: hue-rotate(60deg) saturate(1.6) brightness(1.1); }
96% { filter: hue-rotate(150deg) saturate(1.4); }
100% { filter: none; }
}
@media (prefers-reduced-motion: reduce) { .hcount img { animation: none; } }
/* hands sheet (20.10): number then hand, short rows with icons, buy and sell */
.hs { text-align: center; }
.hs_hand { animation: handGlint 6s ease-in-out .6s infinite; }
.hs_n { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.hs_trade { display: grid; gap: 8px; margin-top: 4px; }
.hs_trade .pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
/* 20.10 evening: coloured line icons (each its own colour, softly filled) and the form text back as one paragraph */
.ic2--up { color: #E0479E; } .ic2--up path { fill: none; }
.ic2--pay { color: #7B5CFF; fill: rgba(123, 92, 255, .14); }
.ic2--dice { color: #3E7BFA; fill: rgba(62, 123, 250, .14); }
.ic2--flame { color: #FF7A1A; fill: rgba(255, 159, 67, .28); }
.ic2--meet { color: #8E5CF6; fill: rgba(142, 92, 246, .12); }
.ic2--back { color: #12A0A0; }
.ic2--day { color: #F2A100; fill: rgba(242, 161, 0, .14); }
.bx-s_txt { line-height: 1.55; color: var(--mute); margin: 6px 0 10px; }
.bx-s_txt .ic2 { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }
.bx-s_amt { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); vertical-align: -2px; }
.js-bx-go { display: inline-flex; align-items: center; gap: 5px; }
.bx-s_amt img, .js-bx-go img, .hs_trade .pill img { display: block; flex: none; width: 1.05em; height: 1.05em; }
.bx-s_amt { vertical-align: -.18em; }
/* sheet text (owner, 2026-10-20 "криво"): the amount is plain text on the line, and every icon,
the token too, is 1em and sits on the same line as the words */
.bx-s_txt .ic2 { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin: 0 .22em 0 0; }
.bx-s_txt .bx-s_amt { display: inline; vertical-align: baseline; font-weight: 600; font-size: 1em; color: var(--ink); white-space: nowrap; }
.bx-s_txt .bx-s_amt img { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin: 0 0 0 .2em !important; }
/* the sheet's picture margin must not lift small icons inside text and buttons */
.msheet-body :is(p, b, button, span, small, li) img { margin-bottom: 0; }
/* task rewards (owner, 2026-10-20 "криво"): the amount and its token are plain text on the line,
the token centred on the digits, not dropped below them */
.tasks .rw { display: inline; vertical-align: baseline; white-space: nowrap; }
.tasks .rw img { display: inline-block; width: 1.05em !important; height: 1.05em !important; vertical-align: -.17em; margin: 0 0 0 .22em !important; }
/* the hand comes apart into shimmering symbols and back (handfx.js, owner 2026-10-20); the old colour blink is gone */
.hcount img, .hs_hand { animation: none !important; transition: opacity .12s linear; }
.hcount { overflow: visible; }
.hfx { position: absolute; pointer-events: none; z-index: 3; }
/* Claim is a light button (owner, 2026-10-20): the reward waits for you, the dark one is only for Open */
.tasks .pill:has(.task-amount), .vd-action:has(.task-amount) { background: #fff !important; color: var(--ink) !important; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(27, 24, 32, .06) !important; }
/* the thank-you card in a chat (owner, 2026-10-20) */
.bub.bub--hand, .bub.me.bub--hand { padding: 0 !important; }
.bub_hc { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 22px; background: linear-gradient(135deg, rgba(142, 92, 246, .10), rgba(224, 71, 158, .07)); box-shadow: 0 0 0 1px rgba(142, 92, 246, .16); position: relative; }
.bub_hc img { width: 40px !important; height: 37px !important; flex: none; }
.bub_hc b { display: block; font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.2; }
.bub_hc small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
/* ── the feed (owner, 2026-10-20) ── */
.fdpeek { display: block; width: 100%; text-align: left; margin: 14px 0 4px; padding: 14px 16px; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 rgba(27, 24, 32, .04), 0 8px 24px rgba(27, 24, 32, .05); transition: transform .35s var(--spring); }
.fdpeek:active { transform: scale(.985); }
.fdpeek_h { display: flex; align-items: center; gap: 8px; }
.fdpeek_h b { font-size: 17px; font-weight: 600; }
.fdpeek_h .ico { width: 20px; height: 20px; flex: none; color: #8E5CF6; fill: rgba(142, 92, 246, .12); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fdpeek_h .fdpeek_go { margin-left: auto; color: var(--mute); fill: none; width: 18px; height: 18px; }
.fdpeek_p { display: block; margin-top: 6px; color: var(--mute); font-size: 14px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fdpeek_p b { color: var(--ink); font-weight: 600; }
.scr--posts { display: flex; flex-direction: column; }
.fd-body { flex: 1; overflow-y: auto; padding: 12px 12px calc(28px + var(--bot)); -webkit-overflow-scrolling: touch; }
.fdc { display: flex; gap: 10px; padding: 12px 14px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); margin-bottom: 14px; }
.fdc_face, .fdp > .fdp_f, .fdp > img.fdp_f { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.fdc_face img, .fdc_face .face0 { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.fdc_main { flex: 1; min-width: 0; }
.fdc_in { width: 100%; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); padding: 8px 0 4px; min-height: 44px; }
.fdc_in::placeholder { color: var(--mute); }
.fdc_row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.fdc_n { color: var(--mute); font-size: 13px; }
.fdc_n.is-over { color: #E0479E; }
.fdc_row .pill:disabled { opacity: .35; }
.fdc_q { position: relative; margin-top: 6px; }
.fdc_qx { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--soft-ink); color: var(--mute); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.fdp { display: flex; gap: 10px; padding: 14px 14px 8px; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 rgba(27, 24, 32, .04), 0 6px 18px rgba(27, 24, 32, .04); margin-bottom: 10px; }
img.fdp_f, .fdp_f { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.fdp_main { flex: 1; min-width: 0; }
.fdp_h { display: flex; align-items: baseline; gap: 8px; }
.fdp_h b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdp_h time { color: var(--mute); font-size: 13px; white-space: nowrap; }
.fdp_menu { margin-left: auto; width: 30px; height: 24px; display: grid; place-items: center; color: var(--mute); align-self: center; }
.fdp_menu .ico, .fda .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fdp_menu .ico { stroke-width: 3; }
.fdp_t { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.fdq { margin-top: 10px; padding: 10px 12px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); background: rgba(27, 24, 32, .02); }
.fdq--gone { color: var(--mute); font-size: 14px; }
.fdq_h { display: flex; align-items: center; gap: 6px; }
.fdq_h img, .fdq_h .face0, .fdq_f { width: 20px !important; height: 20px !important; border-radius: 50%; object-fit: cover; font-size: 11px; flex: none; }
.fdq_h b { font-size: 14px; font-weight: 600; }
.fdq_h time { color: var(--mute); font-size: 12px; }
.fdq p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.fdp_a { display: flex; gap: 6px; margin: 8px 0 0 -8px; }
.fda { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 17px; color: var(--mute); font-size: 14px; transition: background .2s, color .2s, transform .3s var(--spring); }
.fda b { font-weight: 500; color: var(--ink); }
.fda:active { transform: scale(.92); }
.fda--hand.is-mine { opacity: .45; }
.fda--hand.is-armed { background: rgba(142, 92, 246, .12); color: #8E5CF6; transform: scale(1.06); }
.fda--hand.is-armed .ico { animation: fdWave .9s ease-in-out infinite; transform-origin: 70% 85%; }
.fda--hand.is-given { color: #8E5CF6; }
.fda--hand.is-given .ico { animation: fdPop .6s cubic-bezier(.3, 1.6, .5, 1); }
/* the glossy hand in the button once you gave one (handburst.js lands it there) */
.fda_gh { flex: none; width: 31.2px; height: 28.9px; margin: -5.9px -6px -3.9px -6.2px; }
.fda_tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; padding: 5px 10px; border-radius: 12px; background: var(--ink); color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fda--hand.is-armed .fda_tip { opacity: 1; }
@keyframes fdWave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(16deg); } 65% { transform: rotate(-10deg); } }
@keyframes fdPop { from { transform: scale(1.6); } }
.fd-empty { text-align: center; color: var(--mute); margin: 28px 16px; }
.fd-more { display: block; margin: 8px auto 0; }
/* hands sheet (owner, 2026-10-20 "кривая"): no smiley bullets from the generic sheet list, one icon per
row on the first line of its text, and the token on a button right after its number */
.hs .bx-s_rows { max-width: 320px; margin: 10px auto 14px; gap: 12px; }
.hs .bx-s_rows li { padding: 0 !important; align-items: flex-start; line-height: 1.35; }
.hs .bx-s_rows li::before { content: none !important; display: none !important; }
.hs .bx-s_rows li .ic2 { width: 20px; height: 20px; margin-top: 0; flex: none; }
.msheet-body .pill img { margin: 0 !important; }
.hs_trade .pill { gap: 6px; }
.hs_n img { margin: 0 !important; }
/* post from home, like on X (owner, 2026-10-20) */
.hfc { display: flex; gap: 12px; margin: 12px 0 4px; padding: 14px 16px 12px; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 rgba(27, 24, 32, .04), 0 8px 24px rgba(27, 24, 32, .05); }
.hfc_face { flex: none; width: 42px; height: 42px; }
.hfc_face img, .hfc_face .face0 { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; font-size: 16px; }
.hfc_main { flex: 1; min-width: 0; }
.hfc_in { width: 100%; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 19px; line-height: 1.35; color: var(--ink); padding: 8px 0 6px; min-height: 42px; }
.hfc_in::placeholder { color: var(--mute); }
.hfc_row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hfc_feed { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 2px; color: #8E5CF6; font-size: 14px; font-weight: 500; margin-right: auto; }
.hfc_feed .ico { width: 20px; height: 20px; fill: rgba(142, 92, 246, .12); }
.hfc_row .pill { height: 36px; padding: 0 18px; font-weight: 600; }
.hfc_row .pill:disabled { opacity: .35; }
/* no white card under the home field (owner, 2026-10-20): it sits on the page itself, like on X */
.hfc { background: none !important; box-shadow: none !important; border-radius: 0; padding: 10px 4px 12px; border-bottom: 1px solid var(--line); }
/* the token chart is off for now (owner, 2026-10-20): it showed a trend without saying what grew.
The per-token card and the chart button stay in the page, just not shown */
/* 21.10 (owner): the per-token chart is back on the token page, above Invite friends; shown only when Settings → Token → Token chart is on */
.scr--token .js-pt { display: none; }
.is-tchart .scr--token .js-pt { display: block; }
.ex-chart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ex-chart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Favorites are off for now (owner, 2026-10-20); the chats row stays */
.lbl--favs, .js-favs { display: none !important; }
/* the post writer's tools (owner, 2026-10-20): photo, emoji, poll, later; small, quiet, no brand colour */
.cx_bar { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 -6px; }
.cx_b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--mute); transition: background .2s, color .2s, transform .3s var(--spring); }
.cx_b .ico { width: 17px; height: 17px; stroke-width: 1.9; fill: none; }
.cx_b:active { transform: scale(.88); background: var(--soft-ink); }
.cx_b.is-on { color: var(--ink); background: var(--soft-ink); }
.cx_b:disabled { opacity: .3; }
.cx_dt { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hfc_feed { margin-right: 0; padding: 0 8px; color: var(--mute); }
.hfc_feed .ico { width: 17px; height: 17px; fill: none; }
.hfc_row, .fdc_row { position: relative; }
.cx_att:empty { display: none; }
.cx_att { display: grid; gap: 8px; margin: 4px 0 6px; }
.cx_x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(17, 17, 17, .55); color: #fff; font-size: 17px; line-height: 1; display: grid; place-items: center; }
.cx_q { position: relative; }
.cx_q .cx_x { background: var(--soft-ink); color: var(--mute); }
.cx_ph { position: relative; border-radius: 18px; overflow: hidden; max-height: 260px; background: var(--soft-ink); }
.cx_ph img { display: block; width: 100%; max-height: 260px; object-fit: cover; transition: opacity .2s; }
.cx_ph.is-busy img { opacity: .55; }
.cx_ph .task-spin { position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; }
.cx_pl { display: grid; gap: 8px; padding: 10px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.cx_po { width: 100%; height: 40px; border: 0; outline: 0; border-radius: 12px; background: var(--soft-ink); padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); }
.cx_po::placeholder { color: var(--mute); }
.cx_plr { display: flex; justify-content: space-between; align-items: center; }
.cx_add, .cx_rm { font-size: 14px; color: var(--ink); padding: 4px 2px; }
.cx_rm { color: var(--mute); }
.cx_at { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 40px 0 12px; border-radius: 14px; background: var(--soft-ink); font-size: 14px; color: var(--ink); }
.cx_at .ico { width: 16px; height: 16px; color: var(--mute); fill: none; }
.cx_at .cx_x { top: 6px; background: transparent; color: var(--mute); }
.cx_emo { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; margin: 2px 0 6px; border-radius: 16px; background: var(--soft-ink); }
.cx_emo[hidden] { display: none; }
.cx_emo button { height: 36px; font-size: 21px; border-radius: 10px; }
.cx_emo button:active { background: rgba(17, 17, 17, .06); }
.fdc .fdc_row { justify-content: flex-start; }
.fdc .fdc_n { margin-left: auto; }
/* a post's photo and poll */
.fdp_ph { margin-top: 10px; border-radius: 18px; overflow: hidden; background: var(--soft-ink); max-height: 420px; }
.fdp_ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.fdp_ph.is-loaded img { opacity: 1; }
.fdpl { display: grid; gap: 6px; margin-top: 10px; }
.fdpl_o { height: 40px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); font-size: 15px; color: var(--ink); font-weight: 500; transition: transform .3s var(--spring), background .2s; }
.fdpl_o:active { transform: scale(.98); background: var(--soft-ink); }
.fdpl_r { position: relative; display: flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 12px; overflow: hidden; font-size: 15px; color: var(--ink); }
.fdpl_r i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--soft-ink); border-radius: 12px; transition: width .6s cubic-bezier(.22, .8, .24, 1); }
.fdpl_r.is-mine i { background: rgba(17, 17, 17, .1); }
.fdpl_r span, .fdpl_r b { position: relative; }
.fdpl_r span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdpl_r.is-mine span { font-weight: 600; }
.fdpl_r b { font-weight: 500; margin-left: 10px; }
.fdpl_n { color: var(--mute); font-size: 13px; }
.fdp--sched { opacity: .85; box-shadow: 0 0 0 1px var(--line) !important; background: transparent !important; }
.fdp_at { display: inline-flex; align-items: center; gap: 4px; }
.fdp_at .ico { width: 13px; height: 13px; fill: none; }
/* icons follow their word (owner, 2026-10-20): a little space before, none after */
.bx-s_txt .ic2 { margin: 0 .05em 0 .28em !important; }
.hs_txt { margin: 10px auto 14px; max-width: 320px; }
/* the home field without a face (owner, 2026-10-20): the text and the tools start at the left edge */
.hfc { gap: 0; padding-left: 2px; }
.hfc .cx_bar { margin-left: -8px; }
/* quieter, grown-up tool icons: thin lines, one grey */
.cx_b .ico { width: 19px; height: 19px; stroke-width: 1.6; }
.cx_b { color: rgba(27, 24, 32, .5); }
/* forms copy (casual-game chat, 2026-10-20): icons after their words in the result line and the earn
button, and the won amount reads "number, token" */
.bx-s_p .ic2, .js-bx-earn .ic2 { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; margin: 0 .05em 0 .28em; }
.js-bx-earn { display: inline-flex; align-items: center; }
.js-bx-earn .ic2 { color: currentColor; fill: none; }
.js-bx-h .bx-s_htok { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; margin: 0 0 0 .18em !important; }
/* forms copy 2 (casual-game chat, 2026-10-20): the amount you lack sits on the button, number then token;
line icons a hair higher, so they sit on the middle of the letters */
.js-bx-earn { gap: .28em; }
.js-bx-earn img { display: block; flex: none; width: 1.05em; height: 1.05em; margin: 0 !important; }
.bx-s_txt .ic2, .bx-s_p .ic2 { vertical-align: -.12em; }
/* "Not done ↻" (owner, 2026-10-20): a red pill with a retry arrow, tap to start the task again */
.pill.is-fail { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #E5484D !important; color: #fff !important; animation: none !important; }
.task-retry { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the home in pages: Feed (left), Chats (center), Token (right) */
.scr--home { overflow: hidden; }
.hm-track { flex: 1; min-height: 0; display: flex; width: 300%; transform: translate3d(0, 0, 0); transition: transform .50s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; touch-action: pan-y; }
.hm-track.is-feed { transform: translate3d(0, 0, 0); }
.hm-track.is-chats { transform: translate3d(-33.333333%, 0, 0); }
.hm-track.is-token { transform: translate3d(-66.666667%, 0, 0); }
.hm-page { width: 33.333333%; flex: none !important; min-width: 0; }
.hm-feed .hfc { margin-top: 4px; }
.hm-feed .fd-list { margin-top: 12px; }
.hm-tog { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--soft-ink); margin-left: auto; transition: background .2s, transform .3s var(--spring); flex: none; }
.hm-tog .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hm-tog.is-on { background: var(--ink); color: #fff; }
.hm-tog:active { transform: scale(.92); }
.hm-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #8E5CF6; box-shadow: 0 0 0 2px var(--bg); }
.hm-dot[hidden] { display: none; }
.scr--home .top .hm-tog + .hcount { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .hm-track { transition: none; } }
/* 20.10 (owner): the home header is not pinned; it lies over the pages and scrolls up with them (app.js hmSync) */
.scr--home { position: absolute; }
#home > .top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; will-change: transform; }
#home .hm-page { padding-top: calc(var(--hm-top, calc(74px + var(--top, 0px))) + 6px); }
/* 20.10 (owner) the feed: the hand goes first in the row, like a like; bigger, a bit denser letters; a small ⋯ menu */
.fdp { position: relative; }
.fdp_a { gap: 4px; margin-top: 6px; }
.fdh { gap: 5px; padding: 0 10px 0 8px; }
.fdh .fda_gh { display: block; flex: none; width: 21px; height: 21px; margin: 0; opacity: .32; filter: saturate(.55); transition: opacity .25s, filter .25s, transform .3s var(--spring); }
.fdh b { font-size: 14px; font-weight: 550; color: var(--ink); min-width: 0; }
.fdh b:empty { display: none; }
.fdh.is-armed { background: rgba(142, 92, 246, .1) !important; transform: scale(1.04); }
.fdh.is-armed .fda_gh { opacity: .8; filter: none; animation: fdWave .9s ease-in-out infinite; transform-origin: 70% 85%; }
.fdh.is-given .fda_gh { opacity: 1; filter: none; }
.fdh.is-given b { color: #8E5CF6; }
.fdh.is-mine { opacity: 1; }
.fdh.is-mine .fda_gh { opacity: .22; }
.fdh .fda_tip { left: 0; transform: none; }
.fdp_h b { font-size: 16px; font-weight: 620; }
.fdp_h time { font-size: 13.5px; }
.fdp_t { font-size: 16.5px; line-height: 1.45; font-weight: 440; letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fdq { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s; }
.fdq:active { background: rgba(27, 24, 32, .05); }
.fdq p { font-size: 15px; font-weight: 430; }
.fdq_h b { font-size: 14.5px; }
.hfc_in { font-size: 20px; font-weight: 440; letter-spacing: -.005em; }
.fdp.is-flash { animation: fdFlash 1.4s ease-out; }
@keyframes fdFlash { 0%, 30% { box-shadow: 0 0 0 2px rgba(142, 92, 246, .45), 0 6px 18px rgba(27, 24, 32, .04); } 100% { box-shadow: 0 1px 0 rgba(27, 24, 32, .04), 0 6px 18px rgba(27, 24, 32, .04); } }
.fdp_h { position: relative; }
.fdm { position: absolute; right: 0; top: 28px; z-index: 6; min-width: 176px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(27, 24, 32, .14); display: flex; flex-direction: column; transform-origin: top right; }
.fdm button { text-align: left; padding: 11px 12px; border-radius: 12px; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.fdm button:active { background: rgba(27, 24, 32, .05); }
.fdm button.is-red { color: #E5484D; }
.fd-one { padding-top: 8px; }
.fd-one .fdp { box-shadow: none; margin: 0; padding: 4px 0 0; background: none; }
/* 20.10 (owner): the whole feed is ~18% bigger: post text, names, quotes, the field, polls, the row under a post */
.hm-feed .fdp { padding: 16px 16px 10px; gap: 12px; }
.hm-feed .fdp > .fdp_f, .hm-feed .fdp > img.fdp_f, .hm-feed .fdp_f { width: 45px !important; height: 45px !important; }
.hm-feed .fdp_h b { font-size: 19px; }
.hm-feed .fdp_h time { font-size: 16px; }
.hm-feed .fdp_t { font-size: 19.5px; line-height: 1.42; margin-top: 5px; }
.hm-feed .fdq { padding: 12px 14px; border-radius: 20px; }
.hm-feed .fdq_h b { font-size: 17px; }
.hm-feed .fdq_h time { font-size: 14px; }
.hm-feed .fdq_h img, .hm-feed .fdq_h .face0, .hm-feed .fdq_f { width: 24px !important; height: 24px !important; }
.hm-feed .fdq p { font-size: 17.5px; }
.hm-feed .hfc_in { font-size: 23.5px; min-height: 48px; }
.hm-feed .fda { height: 40px; font-size: 16.5px; }
.hm-feed .fda .ico { width: 21px; height: 21px; }
.hm-feed .fdh .fda_gh { width: 25px; height: 25px; }
.hm-feed .fdh b { font-size: 16.5px; }
.hm-feed .fdpl_o { height: 47px; font-size: 17.5px; }
.hm-feed .fdpl_r { height: 45px; font-size: 17.5px; }
.hm-feed .fdpl_n { font-size: 15px; }
.hm-feed .fdm button { font-size: 18px; padding: 13px 14px; }
.hm-feed .fdm { min-width: 200px; }
/* 20.10 (owner): the time under a tapped message made room for itself, so it never lies over the next message */
.msgs .bub.is-when { margin-bottom: 17px !important; }
/* 20.10 (owner): posts 15% smaller than the 18% step above (the field to write stays big) */
.hm-feed .fdp { padding: 14px 14px 9px; gap: 10px; }
.hm-feed .fdp > .fdp_f, .hm-feed .fdp > img.fdp_f, .hm-feed .fdp_f { width: 38px !important; height: 38px !important; }
.hm-feed .fdp_h b { font-size: 16.2px; }
.hm-feed .fdp_h time { font-size: 13.6px; }
.hm-feed .fdp_t { font-size: 16.6px; margin-top: 4px; }
.hm-feed .fdq { padding: 10px 12px; border-radius: 18px; }
.hm-feed .fdq_h b { font-size: 14.5px; }
.hm-feed .fdq_h time { font-size: 12px; }
.hm-feed .fdq_h img, .hm-feed .fdq_h .face0, .hm-feed .fdq_f { width: 20px !important; height: 20px !important; }
.hm-feed .fdq p { font-size: 14.9px; }
.hm-feed .fda { height: 34px; font-size: 14px; }
.hm-feed .fda .ico { width: 18px; height: 18px; }
.hm-feed .fdh .fda_gh { width: 21px; height: 21px; }
.hm-feed .fdh b { font-size: 14px; }
.hm-feed .fdpl_o { height: 40px; font-size: 14.9px; }
.hm-feed .fdpl_r { height: 38px; font-size: 14.9px; }
.hm-feed .fdpl_n { font-size: 12.8px; }
.hm-feed .fdm button { font-size: 15.3px; padding: 11px 12px; }
.hm-feed .fdm { min-width: 176px; }
/* 20.10 (owner): bigger, even icons. The composer toolbar, and the row under a post: the hand and the
quote mark look the same size (measured by the drawing: the quote icon fills ~20 of its 24) and sit on one line */
.hfc .cx_bar { gap: 6px; }
.hfc .cx_b { width: 40px; height: 40px; }
.hfc .cx_b .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.hm-feed .fdp_a { gap: 10px; align-items: center; margin-left: -8px; }
.hm-feed .fda { height: 36px; padding: 0 8px; gap: 7px; align-items: center; line-height: 1; }
.hm-feed .fda .ico { width: 24px; height: 24px; stroke-width: 1.7; display: block; flex: none; }
.hm-feed .fdh .fda_gh { width: 22px; height: 20.4px; display: block; }
.hm-feed .fda b, .hm-feed .fdh b { font-size: 15px; font-weight: 550; line-height: 1; color: var(--ink); }
.hm-feed .fda span:not(.fda_tip) { font-size: 15px; line-height: 1; }
/* the hand drawing fills ~61×66% of its file, so its box is bigger to look as tall as the quote mark (~21px) */
.hm-feed .fdh .fda_gh { width: 34px; height: 31.5px; margin: -6px -6px -5px -6px; opacity: .45; }
.hm-feed .fdh.is-mine .fda_gh { opacity: .35; }
.hm-feed .fdh.is-given .fda_gh, .hm-feed .fdh.is-armed .fda_gh { opacity: 1; }
/* 20.10 (owner): composer icons 15% smaller and closer; post-row icons 20% smaller, the word Quote 30% smaller,
the hand and the quote evenly spaced */
.hfc .cx_bar { gap: 0; margin-left: -6px; }
.hfc .cx_b { width: 34px; height: 34px; }
.hfc .cx_b .ico { width: 20.4px; height: 20.4px; }
.hm-feed .fdp_a { gap: 14px; margin-left: -6px; }
.hm-feed .fda { height: 32px; padding: 0 6px; gap: 6px; }
.hm-feed .fda .ico { width: 19.2px; height: 19.2px; }
.hm-feed .fdh .fda_gh { width: 27.2px; height: 25.2px; margin: -4.8px -4.8px -4px -4.8px; }
.hm-feed .fda b, .hm-feed .fdh b { font-size: 14px; }
.hm-feed .fda span:not(.fda_tip) { font-size: 10.5px; font-weight: 500; letter-spacing: .01em; }
/* 20.10 (owner) Invites: a card on the token page, a sheet with progress, hands, tokens and friends */
.inv { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 14px 14px 14px 16px; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(27, 24, 32, .04), 0 6px 18px rgba(27, 24, 32, .04); text-align: left; color: var(--ink); transition: transform .3s var(--spring); }
.inv:active { transform: scale(.98); }
.inv_t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv_t b { font-size: 16px; font-weight: 600; }
.inv_t small { font-size: 13px; color: var(--mute); }
.inv_bar { position: relative; display: block; width: 64px; height: 6px; border-radius: 3px; background: var(--soft-ink, rgba(27, 24, 32, .06)); overflow: hidden; flex: none; }
.inv_bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #a98bf0, #8E5CF6); transition: width .6s cubic-bezier(.22, .8, .24, 1); }
.inv_go { width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.inv_tok, .inv_hand { display: inline-block !important; vertical-align: -.16em; width: 1.05em !important; height: 1.05em !important; margin: 0 .05em 0 .25em !important; }
.inv-s h2 { margin-bottom: 6px; }
.inv-s_txt { text-align: center; }
.inv-s_prog { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0 6px; }
.inv-s_prog .inv_bar { width: 100%; height: 8px; border-radius: 4px; }
.inv-s_prog small { font-size: 13px; color: var(--mute); }
.inv-s_stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.inv-s_stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.inv-s_stats b { font-size: 20px; font-weight: 600; color: var(--ink); }
.inv-s_stats small { font-size: 12px; color: var(--mute); }
.inv-s_grow { margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 500; color: #8E5CF6; }
.inv-s_h { margin-top: 18px !important; text-align: left; }
.inv-s_list { list-style: none; margin: 0; padding: 0; text-align: left; }
.inv-s_list li::before { content: none !important; }
.inv-s_p { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.inv-s_p:last-child { border-bottom: 0; }
.inv-s_p > img, .inv-s_f { width: 36px !important; height: 36px !important; border-radius: 50%; object-fit: cover; margin: 0 !important; flex: none; }
.inv-s_p > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inv-s_p b { font-size: 15px; font-weight: 600; }
.inv-s_p small { font-size: 12.5px; color: var(--mute); }
.val-inv dt, .val-inv dd { color: #8E5CF6 !important; }
.msheet-body .inv-s_list { padding: 0 !important; margin: 0 !important; }
.msheet-body .inv-s_p { padding: 9px 0 !important; margin: 0 !important; }
.msheet-body .inv-s_p .inv_hand { width: 20px !important; height: 18.5px !important; margin: 0 !important; opacity: .9; }
.msheet-body .inv-s_grow { color: #8E5CF6 !important; }
/* Obsidian (owner, 2026-10-20): the chats page is one living web of your chats, over the whole screen */
/* not the whole screen (owner, 2026-10-20, later): about 60% of it, the blocks below show up under it */
.obs { position: relative; flex: none; margin: -6px -16px 4px; height: calc((var(--tg-viewport-stable-height, 100dvh) - var(--hm-top, 80px)) * .6); min-height: 320px; max-height: 560px; }
.obs[hidden] { display: none; }
.obs_cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.obs_more { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; }
.obs_more .ico { width: 16px; height: 16px; }
.obs_more:active { transform: translateX(-50%) scale(.97); }
.obs_note { position: absolute; top: 4px; left: 28px; right: 28px; margin: 0; text-align: center; color: var(--mute); font-size: 14px; line-height: 1.35; pointer-events: none; transition: opacity .8s; }
.obs_note.is-off { opacity: 0; }
/* 20.10 (owner): the row under a post, measured. The hand file is now cropped to its drawing
(purple-wave-hand-tight.svg), so 17px of hand = 17px of quote mark; the quote icon's own side room
(2 of 24 px each side) is taken back, so icon-to-number is the same 6px in both buttons */
.hm-feed .fdp_a { gap: 2px; margin: 6px 0 0 -8px; align-items: center; }
.hm-feed .fda { height: 32px; padding: 0 8px; gap: 6px; align-items: center; }
.hm-feed .fdh .fda_gh { width: 17px; height: 17px; margin: 0; object-fit: contain; }
.hm-feed .fda .ico { width: 19.2px; height: 19.2px; margin: 0 -1.6px; }
.hm-feed .fda b, .hm-feed .fdh b { font-size: 14px; line-height: 17px; }
.hm-feed .fda span:not(.fda_tip) { line-height: 17px; }
/* Invites: hand and token at the same visible size as the text around them */
.inv_tok, .inv_hand { width: auto !important; height: .95em !important; vertical-align: -.12em !important; margin: 0 .04em 0 .22em !important; }
.inv-s_stats .inv_tok, .inv-s_stats .inv_hand { height: .9em !important; }
.msheet-body .inv-s_p .inv_hand { width: auto !important; height: 17px !important; }
/* our own emoji (emoji.js, owner 2026-10-20): a picture the size of a letter, sitting on the line */
.pe { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.24em; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.bub--emoji .pe { width: 1em; height: 1em; vertical-align: top; }
.cx_emo.cx_emo--pu { display: block; padding: 4px 6px 6px; }
.cx_et { display: flex; gap: 2px; padding-bottom: 4px; }
.cx_et button { width: 40px; height: 32px; border-radius: 10px; display: grid; place-items: center; opacity: .45; }
.cx_et button.is-on { opacity: 1; background: rgba(17, 17, 17, .06); }
.cx_et .pe { width: 20px; height: 20px; vertical-align: 0; }
.cx_eg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cx_eg[hidden] { display: none; }
.cx_eg button { height: 40px; display: grid; place-items: center; border-radius: 10px; }
.cx_eg .pe { width: 28px; height: 28px; vertical-align: 0; }
/* 20.10 (owner) chat: one rule for the time under every message. It always sits at the message's right
edge, inside the pill for words and right under the card for a hand or a big emoji; with times on,
a tap shows nothing extra (no second time). The hand in the card and the give button are our glossy
hand (the cropped file), the button see-through like under posts */
.msgs.is-times .bub--hand .bub_t, .msgs.is-times .bub--emoji .bub_t, .msgs.is-times .bub--photo .bub_t { text-align: right !important; padding: 0 12px 0 0 !important; margin: 3px 0 0 !important; }
.msgs.is-times .bub::after { display: none !important; }
.msgs.is-times .bub.is-when { margin-bottom: 0 !important; }
.bub_hc img { width: 26px !important; height: 26px !important; margin: 0 4px 0 6px; }
.cmp_give { opacity: 1; }
.cmp_give img { display: block; width: 20px; height: 20px; opacity: .45; filter: saturate(.6); transition: opacity .2s, filter .2s; }
.cmp_give:active img, .cmp_give:focus-visible img { opacity: 1; filter: none; }
/* form posts (formpost.js, owner 2026-10-20): a faint tint, a soft light behind, no rim, tiny drifting symbols */
.fdp.fdp--form { isolation: isolate; }
.fdp--fm-s { background: #fbf8ff; box-shadow: 0 10px 34px -14px rgba(141, 75, 239, .28); }
.fdp--fm-m { background: #fffbf3; box-shadow: 0 10px 34px -14px rgba(240, 160, 20, .28); }
.fdp--fm-l { background: #f6fbff; box-shadow: 0 10px 34px -14px rgba(40, 140, 240, .26); }
.fdp--form > .fdp_cv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: 0; }
.fdp--form > :not(.fdp_cv) { position: relative; z-index: 1; }
.fm-tag { font-weight: var(--w-mid); white-space: nowrap; }
.fm-tag--s { color: #7a3ae6; } .fm-tag--m { color: #c27806; } .fm-tag--l { color: #1f74d6; }
.fp-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* 21.10 (owner): the official Purple check after a name: the size of a capital letter, on its centre line */
.off-b { display: inline-block; width: .82em; height: .82em; margin: 0 0 0 .22em; vertical-align: -.08em; flex: none; }
.fdp_h b, .fdq_h b, .pcard_t b, .js-name { white-space: nowrap; }
/* 21.10 (owner): the hand under a post is a line drawing like the quote mark (17px drawn, same stroke);
it turns purple when readied and glossy once given */
.hm-feed .fdh .fda_hl { width: 17px; height: 17px; margin: 0; display: block; flex: none; }
.hm-feed .fdh.is-armed { color: #8E5CF6; }
.hm-feed .fdh.is-armed .fda_hl { animation: fdWave .9s ease-in-out infinite; transform-origin: 70% 85%; }
.hm-feed .fdh.is-mine .fda_hl { opacity: .5; }
/* the composer toolbar */
.hfc_row { align-items: center; }
.hfc .cx_bar { align-self: center; align-items: center; gap: 4px; }
.hfc .cx_b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.hfc .cx_b .ico { width: 20px; height: 20px; margin: 0; transform: none; }
/* the quote you are adding: a quiet × inside the card, on the line of the name */
.cx_q .cx_x { top: 10px !important; right: 10px !important; width: 24px; height: 24px; background: transparent !important; color: var(--mute); font-size: 20px; }
.cx_q .fdq { padding-right: 40px; }
/* links in a chat: one small chip per link; a tap warns first */
.bub_links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bub_link { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(27, 24, 32, .06); color: var(--ink); font-size: 13px; font-weight: 500; }
.bub_link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bub_link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leave-s .bx-s_txt { text-align: center; }
/* composer icon centering */
.hfc .js-cx-photo .ico, .hfc .js-cx-emoji .ico, .hfc .js-cx-poll .ico, .hfc .js-cx-cal .ico { transform: none; }
.hfc .cx_b.is-on { background: var(--soft-ink); color: var(--ink); }
.cx_q .cx_x { top: 30px !important; transform: translateY(-50%); line-height: 24px; }
/* Invite friends as a page + the hands sheet (casual chat, 2026-10-21) */
.inv_bag { flex: none; width: 40px; height: 40px; margin: 0 -2px 0 0; animation: ivBob 3.2s ease-in-out infinite; }
.inv_t .inv_bar { width: 100%; max-width: 150px; margin-top: 6px; }
.inv_t small .inv_hand { width: 1.1em !important; height: 1.1em !important; }
@keyframes ivBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
.ivp_hero { position: relative; margin-top: 22px; padding-right: 92px; min-height: 84px; }
.ivp_big { display: flex; align-items: center; gap: 8px; }
.ivp_big b { font-size: 44px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; }
.ivp_tok { width: 32px; height: 32px; flex: none; }
.ivp_sub { display: block; margin-top: 4px; color: var(--mute); font-size: 14px; line-height: 1.45; }
.ivp_sub .inv_hand, .ivp_sub .inv_tok { width: 1.1em !important; height: 1.1em !important; }
.ivp_bag { position: absolute; right: 0; top: 2px; width: 76px; height: 76px; animation: ivBob 3.2s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(46, 194, 126, .28)); }
.ivp_chart { position: relative; margin-top: 18px; }
.ivp_chart svg { display: block; width: 100%; height: 150px; }
.ivp_l { fill: none; stroke: #8E5CF6; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ivp_dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #8E5CF6; box-shadow: 0 0 0 4px rgba(142, 92, 246, .16); pointer-events: none; }
.ivp_dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: rgba(142, 92, 246, .22); animation: vPulse 2.4s ease-in-out infinite; }
.ivp_grow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.ivp_grow span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: rgba(142, 92, 246, .07); }
.ivp_grow b { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 600; color: #8E5CF6; }
.ivp_grow small { font-size: 12px; color: var(--mute); }
.ivp_grow .inv_tok { margin: 0 !important; width: 15px !important; height: 15px !important; }
.ivp_tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ivp_tile small em { font-style: normal; color: #8E5CF6; }
.ivp_tile { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 13px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.ivp_tile b { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 600; line-height: 1.1; }
.ivp_tile b img { width: 22px; height: 22px; flex: none; }
.ivp_tile small { font-size: 12.5px; color: var(--mute); }
.ivp_tile .inv_bar { width: 100%; margin-top: 6px; }
.ivp_act { display: flex; gap: 8px; margin-top: 18px; }
.ivp_act .pill { height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ivp_act .js-inv-share { flex: 1; }
.ivp_act .pill img { width: 18px; height: 18px; flex: none; }
.ivp_note { color: var(--mute); font-size: 14px; text-align: center; width: 100%; }
.ivp_h { margin-top: 26px !important; }
.ivp_list { list-style: none; margin: 0; padding: 0; }
.ivp_plus { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: #8E5CF6; flex: none; }
.ivp_plus .inv_hand { width: 18px !important; height: 18px !important; margin: 0 0 0 4px !important; }
.ivp_more { display: block; margin: 12px auto 0; }
.hs_h { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; }
.hs_h.is-win { font-size: 30px; font-weight: 600; color: #8E5CF6; letter-spacing: -.01em; }
.hs_em { display: inline-block !important; width: 1.1em !important; height: 1.1em !important; vertical-align: -.2em; margin: 0 0 0 .25em !important; }
.hs_trade .pill img { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .inv_bag, .ivp_bag, .ivp_dot::after { animation: none; } }
.ivp_grow[hidden] + .ivp_tiles { margin-top: 20px; }
/* the hand and Quote as one pair (owner, 2026-10-21): the same line weight as Quote (1.7 of 24 = 13.4 of 168),
the same colour, full strength on your own post too, and no empty counter adding a gap */
.hm-feed .fda--hand.is-mine, .hm-feed .fdh.is-mine .fda_hl { opacity: 1; }
.hm-feed .fdh .fda_hl path { stroke-width: 13.4; }
.hm-feed .fda b:empty { display: none; }
/* hand to Quote: 12px between the drawings (measured 17.4 at 375 wide) */
.hm-feed .fdp_a .js-fd-quote { margin-left: -5.4px; }
/* the partner you opened keeps its own icon in the row while we check (2026-10-21) */
.vd-placeholder .ic.is-partner { border-radius: 10px; object-fit: cover; }
.task-sec { opacity: .7; }
/* Translate bar on top of the feed, like Telegram's (owner, 2026-10-21) */
.fd-tr { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; margin: 0 0 10px; border-radius: 12px; background: rgba(36, 129, 204, .09); color: #2481CC; font-size: 14px; font-weight: 500; }
.fd-tr[hidden] { display: none; }
.fd-tr .ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fd-tr:active { transform: scale(.98); }
/* Invites card (owner, 2026-10-21): one still money bag fills the right side, no hand, no bar, no motion */
.inv { padding: 12px 12px 12px 16px; min-height: 76px; }
.inv_bag { width: 52px; height: 52px; margin: 0; animation: none !important; }
/* one hand, one token next to an amount (owner, 2026-10-21): the drawing is 16.4 px high everywhere, like the
hand under a post, and its middle sits on the middle of the digits (measured at 375 wide) */
.js-hc img, .js-tok img { width: auto !important; height: 16.8px !important; margin: 0 !important; position: relative; }
.js-hc img { top: -.6px; }
.js-tok img { top: .4px; }
.hm-feed .fdh .fda_hl { position: relative; top: -1.3px; }
.hm-feed .fdh .fda_gh { width: 16.4px !important; height: 16.4px !important; position: relative; top: -1.3px; }
.ivp_plus .inv_hand { width: auto !important; height: 16.8px !important; margin: 0 0 0 5.9px !important; position: relative; top: -1.2px; }
.ivp_grow .inv_tok { width: auto !important; height: 16.8px !important; margin: 0 0 0 2px !important; }
.ivp_tok { position: relative; top: -3.4px; }
.ivp_tile b img { position: relative; top: -1.6px; }
/* "Get N more": the tasks that give tokens now blink twice (owner, 2026-10-21) */
.tasks li.is-hint { animation: earnHint 1.1s ease-in-out 2; border-radius: 14px; }
@keyframes earnHint { 0%, 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } 50% { background: rgba(142, 92, 246, .1); box-shadow: 0 0 0 6px rgba(142, 92, 246, .1); } }
@media (prefers-reduced-motion: reduce) { .tasks li.is-hint { animation-duration: 2s; animation-iteration-count: 1; } }
/* opening a form: the title, the words and the buttons fade out; only the form is left */
/* opening a form: enlarge animation and eliminate empty space below */
.bx-s .js-bx-h, .bx-s .bx-s_txt, .bx-s .js-bx-p, .bx-s .js-bx-act, .bx-s .bx-s_warn { transition: opacity .25s ease; }
.bx-s.is-opening { padding-bottom: 16px !important; }
.bx-s.is-opening .bx-s_img {
width: 220px !important;
transform: scale(1.24) !important;
margin: 14px auto 6px !important;
transition: transform .42s cubic-bezier(.16, 1, .3, 1) !important;
}
.bx-s.is-opening .bxc--big {
width: 220px !important;
height: 220px !important;
}
.bx-s.is-opening .bx-s_txt,
.bx-s.is-opening .bx-s_warn,
.bx-s.is-opening .js-bx-p,
.bx-s.is-opening .js-bx-act {
display: none !important;
}
/* Invites, 21.10 (owner): words, a two-line chart, the goal, the link. No big total, no bag, no doubled icons */
.ivp > .ivp_sub { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ivp_sub .ivp_ic { display: inline-block; width: auto; height: 16.8px; margin: 0 0 0 5.8px; position: relative; top: 2.6px; vertical-align: baseline; }
.ivp_sub .inv_hand { width: auto !important; height: 16.8px !important; margin: 0 0 0 5.8px !important; vertical-align: baseline !important; position: relative; top: 2.6px; }
.ivp_chart { margin-top: 22px; }
.ivp_leg { display: flex; gap: 18px; margin-bottom: 10px; }
.ivp_k { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mute); }
.ivp_k i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ivp_k b { font-size: 15px; font-weight: 600; color: var(--ink); }
.ivp_k--fr i { background: #8E5CF6; }
.ivp_k--tk i { background: #E8962E; }
.ivp_plot { position: relative; }
.ivp_l--tk { stroke: #E8962E; }
.ivp_dot--tk { background: #E8962E; box-shadow: 0 0 0 4px rgba(232, 150, 46, .18); }
.ivp_dot--tk::after { background: rgba(232, 150, 46, .22); }
.ivp_dot[hidden] { display: none; }
.ivp_grow span { background: rgba(232, 150, 46, .09); }
.ivp_grow b { color: #C77A17; }
.ivp_goal { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ivp_goal small { font-size: 13px; color: var(--mute); }
.ivp_goal small em { font-style: normal; color: #8E5CF6; }
.ivp_goal .inv_bar { width: 100%; height: 6px; }
/* Share ↔ Copy: the black and the grey are two backgrounds that slide between the buttons */
.ivp_sw { position: relative; display: flex; gap: 8px; width: 100%; }
.ivp_sw .pill { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transition: color .45s ease; }
.ivp_sw .js-inv-share { flex: 1; color: #fff; }
.ivp_sw .js-inv-copy { color: var(--ink); padding: 0 22px; }
.ivp_sw.is-copy .js-inv-share { color: var(--ink); }
.ivp_sw.is-copy .js-inv-copy { color: #fff; }
.ivp_bg { position: absolute; left: 0; top: 0; height: 100%; border-radius: 24px; transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1); }
.ivp_bg--ink { z-index: 0; background: var(--ink, #1B1820); }
.ivp_bg--ghost { z-index: 0; background: rgba(27, 24, 32, .06); }
.ivp_sw.is-instant .ivp_bg, .ivp_sw.is-instant .pill { transition: none; }
.ivp_sw .pill img { transition: filter .45s ease; }
.ivp_sw.is-copy .js-inv-share img { filter: none; }
@media (prefers-reduced-motion: reduce) { .ivp_bg { transition-duration: .01s; } }
/* edit a post */
.fde h2 { margin-bottom: 12px; }
.fde_in { display: block; width: 100%; min-height: 120px; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(27, 24, 32, .05); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; resize: none; outline: none; }
.fde_n { display: block; min-height: 16px; margin-top: 6px; text-align: right; font-size: 12px; color: var(--mute); }
/* 21.10 (owner): the composer icons and the counter one more pixel up, 2.5 px above the Post button's bottom edge */
.hfc .js-cx-n { position: relative; top: -1px; }
/* Translate under someone else's post in another language */
.fdp_tr { display: block; margin: 4px 0 0; padding: 2px 0; background: none; border: 0; color: #2481CC; font-size: 13px; font-weight: 500; }
.fdp_tr:active { opacity: .6; }
/* @ in a post: the form tags people use most */
.cx_tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.cx_tags[hidden] { display: none; }
.cx_tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 8px; border-radius: 15px; background: rgba(27, 24, 32, .06); color: var(--ink); font-size: 13px; font-weight: 500; }
.cx_tag img { width: 18px; height: 18px; flex: none; }
.cx_tag:active { transform: scale(.95); }
/* 21.10 (owner): the hand looked bigger than Quote: 15 px of drawing, its middle on the middle of Quote */
.hm-feed .fdh .fda_hl { width: 15.5px !important; height: 15.5px !important; top: -0.1px; }
.hm-feed .fdh .fda_gh { width: 15.5px !important; height: 15.5px !important; top: -0.1px; }
/* our icons in the post field (owner, 2026-10-21): the field's letters see-through, the copy under it draws them */
.cx_mir { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; color: var(--ink); box-sizing: border-box; border: 0 solid transparent; }
.cx_mir[hidden] { display: none; }
.hfc_in { position: relative; z-index: 1; }
.hfc_in.has-pe { color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink); }
.cx_ek { display: inline-block; position: relative; height: 0; vertical-align: baseline; }
.cx_ek .pe { position: absolute; left: 50%; bottom: -.12em; transform: translateX(-50%); }
/* one grid, no sections */
.cx_eg--all { padding-top: 2px; }
/* 21.10 (owner): a flat-bottomed icon (the crown) read as sitting below the line: every icon in text 0.12em higher */
.pe { vertical-align: -.12em; }
.bub--emoji .pe, .cx_eg .pe, .cx_et .pe { vertical-align: 0; }
.bub--emoji .pe { vertical-align: top; }
/* "quoted your post" over the feed (owner, 2026-10-21) */
.fd-notes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.fd-notes[hidden] { display: none; }
.fdn { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 12px; height: 52px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.fdn_go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; text-align: left; }
.fdn_f { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.fdn_t { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdn_t b { font-weight: 600; }
.fdn time { flex: none; font-size: 12px; color: var(--mute); }
.fdn_x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--mute); }
.fdn { padding: 0 0 0 12px; }
.fdn_x { width: 34px; }
/* someone from the feed: photo, name, Say hello (owner, 2026-10-21) */
.fdpp { text-align: center; }
.fdpp_f { display: block; width: 76px; height: 76px; margin: 4px auto 12px; border-radius: 50%; object-fit: cover; }
.fdpp span.fdpp_f { display: grid; place-items: center; font-size: 30px; }
.fdpp h2 { margin-bottom: 6px; }
.fdp_f, .fdp_h > b { cursor: pointer; }
/* a hello you sent, waiting: "Sent" + the hand on the right of the card (owner, 2026-10-21) */
.pcard_pend { display: inline-flex; align-items: center; gap: 5.8px; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(142, 92, 246, .1); color: #8E5CF6; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pcard_pend img { width: auto; height: 16.4px; flex: none; position: relative; animation: pendWave 2.6s ease-in-out infinite; transform-origin: 70% 85%; }
@keyframes pendWave { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .pcard_pend img { animation: none; } }
.pcard_pend img { top: -1px; }
/* "didn’t answer · +1 👋 back" */
.fdn_h { display: inline-block; height: 16.4px; width: auto; margin: 0 0 0 4px; vertical-align: -3.4px; }
.fdn_h { height: 16.8px; margin: 0 1.8px 0 5.8px; vertical-align: -2.6px; }
.fdn_h { margin-right: 2.7px; vertical-align: -3.1px; }
/* a hello you sent, waiting: "Sent" and a clock, quiet and still (owner, 2026-10-21) */
.pcard_pend { background: rgba(27, 24, 32, .06) !important; color: var(--mute) !important; font-weight: 500 !important; }
.pcard_pend img { display: none; }
.pcard_pend .ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* "Ads are here for you": a card in the middle of the screen, once per profile */
.adpop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(20, 16, 28, 0); transition: background .25s ease; }
.adpop.is-on { background: rgba(20, 16, 28, .42); }
.adpop_card { width: 100%; max-width: 320px; padding: 26px 22px 14px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 24px 60px rgba(20, 16, 28, .25); transform: scale(.92); opacity: 0; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s ease; }
.adpop.is-on .adpop_card { transform: none; opacity: 1; }
.adpop_ic { width: 56px; height: 56px; margin: 0 auto 12px; display: block; }
.adpop h2 { font-size: 20px; margin: 0 0 8px; }
.adpop p { margin: 0 0 18px; color: var(--mute); font-size: 15px; line-height: 1.45; }
.adpop p .inv_tok { width: auto !important; height: 16.8px !important; margin: 0 0 0 5.8px !important; vertical-align: -3px !important; }
.adpop .pill { width: 100%; height: 48px; }
.adpop_later { display: block; width: 100%; height: 40px; margin-top: 4px; color: var(--mute); font-size: 14px; }
.adpop p .inv_tok { height: 16.2px !important; }
/* three tips after sign-up (owner, 2026-10-21): a soft light over the thing, a card under it */
.coach { position: fixed; inset: 0; z-index: 95; opacity: 0; transition: opacity .25s ease; }
.coach.is-on { opacity: 1; }
.coach.is-off { opacity: 0; }
.coach_spot { position: fixed; border-radius: 22px; box-shadow: 0 0 0 9999px rgba(20, 16, 28, .5), 0 0 0 3px rgba(142, 92, 246, .55); pointer-events: none; }
.coach_spot.is-moving { transition: left .35s cubic-bezier(.3, .8, .3, 1), top .35s cubic-bezier(.3, .8, .3, 1), width .35s, height .35s; }
.coach_card { position: fixed; padding: 16px 16px 12px; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(20, 16, 28, .25); }
.coach_card::before { content: ''; position: absolute; top: -7px; left: calc(var(--ax, 50%) - 7px); width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.coach_card.is-in { animation: coachIn .3s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes coachIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.coach_t { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.coach_p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: var(--mute); }
.coach_act { display: flex; align-items: center; gap: 10px; }
.coach_skip { color: var(--mute); font-size: 14px; padding: 8px 4px; }
.coach_dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
.coach_dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(27, 24, 32, .15); }
.coach_dots i.is-on { background: #8E5CF6; }
.coach_act .pill { height: 40px; padding: 0 18px; }
@media (prefers-reduced-motion: reduce) { .coach_spot { transition: none; } .coach_card.is-in { animation: none; } }
/* no chats yet */
.chempty { text-align: center; padding: 18px 8px 22px; }
.chempty b { display: block; font-size: 17px; margin-bottom: 4px; }
.chempty p { margin: 0 0 14px; color: var(--mute); font-size: 14.5px; }
.chempty .pill_hand { height: 16.4px; width: auto; margin-left: 5.8px; vertical-align: -3px; }
.fdn { height: auto; min-height: 52px; padding-top: 8px; padding-bottom: 8px; } .fdn_t { white-space: normal; line-height: 1.35; }
/* the ads card comes up slowly, once the screen is calm (owner, 2026-10-21) */
.adpop { transition: background .5s ease; }
.adpop_card { transition: transform .55s cubic-bezier(.2, .8, .25, 1), opacity .45s ease; transform: translateY(18px) scale(.96); }
/* 21.10 (owner): your hand on a post stays lit; giving it plays on the button only, no ring over the feed */
.fdh { position: relative; }
.fdh.is-given { background: rgba(142, 92, 246, .08); }
.fda_sp { position: absolute; left: 15.75px; top: 50%; width: 0; height: 0; pointer-events: none; }
.fda_sp i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #8E5CF6; }
.fda_sp i:nth-child(2n) { background: #C3A6FF; width: 3px; height: 3px; }
/* 21.10 (owner): the rest of a form's name in grey right in the field; @ opens a quiet grey panel, like mentions in Threads */
.cx_gh { position: absolute; z-index: 0; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; box-sizing: border-box; border: 0 solid transparent; color: transparent; }
.cx_gh[hidden] { display: none; }
.cx_ghs { color: var(--mute); opacity: .7; }
.cx_tags { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 6px 0 4px; padding: 4px; border-radius: 16px; background: var(--card, #fff); box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(27, 24, 32, .08); }
.cx_tag { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border-radius: 12px; background: none; color: var(--ink); font-size: 15px; font-weight: 450; text-align: left; }
.cx_tag img { width: 20px; height: 20px; flex: none; filter: grayscale(1); opacity: .55; }
.cx_tag:active { transform: none; background: rgba(27, 24, 32, .05); }
.fdp_t { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.vbadge .vbadge_t { stroke-width: 1.9; }
/* 21.10 (owner): a plus on someone's photo sends them a hello, like a friend request */
.fdp_add { position: absolute; z-index: 2; left: 39.5px; top: 39.5px; margin: 0; width: 19px; height: 19px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--bg, #F8F7F3); -webkit-tap-highlight-color: transparent; transition: transform .25s var(--spring); }
.fdp_add::before { content: ''; position: absolute; inset: -10px; }
.fdp_add svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.fdp_add:active { transform: scale(.88); }
.cx_ek .pe { width: 1.06em; height: 1.06em; bottom: -.1em; }
.vbadge circle { fill: var(--purple); }
.off-b { vertical-align: -.045em; }
/* 21.10 (owner): buying a hand plays on the hand in the sheet, small sparks around it */
.hs_sp { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; }
.hs_sp i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #8E5CF6; }
.hs_sp i:nth-child(2n) { background: #C3A6FF; width: 4px; height: 4px; left: -2px; top: -2px; }
.fdp--form > .fdp_add { position: absolute; z-index: 2; }
/* 21.10 (owner): the hand right after its words in "No chats yet", canonical size */
.chempty .chempty_h { display: inline-block; height: 16.2px; width: auto; margin-left: 5.8px; vertical-align: -3px; position: relative; top: -0.8px; }
/* 21.10: close crosses are drawn, so they sit exactly in the middle (the × letter sat low) */
.xic { display: block; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cx_q .cx_x .xic, .fdn_x .xic { width: 12px; height: 12px; }
/* 21.10 (owner): the plus is lighter and sits under the photo, so the post doesn't look crowded */
.fdp_add { width: 17px; height: 17px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(27, 24, 32, .12), 0 1px 3px rgba(27, 24, 32, .12); }
.fdp_add svg { width: 9px; height: 9px; stroke-width: 2; }
/* 21.10 (owner): an outline gift on the left of Invite friends, black and white like the hand under posts */
.inv_gift { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 21.10 (owner): emoji in a row no longer touch each other or the word before them */
.fdp_t .pe, .fdq .pe, .bub:not(.bub--emoji) .pe, .fdn .pe { margin: 0 .09em; }
/* 21.10: an emoji stuck to a word gets air on that side, close to a space (owner) */
.fdp_t .pe-jl, .fdq .pe-jl, .bub:not(.bub--emoji) .pe-jl, .fdn .pe-jl { margin-left: .2em; }
.fdp_t .pe-jr, .fdq .pe-jr, .bub:not(.bub--emoji) .pe-jr, .fdn .pe-jr { margin-right: .2em; }
.is-tchart .pt + .inv { margin-top: 20px; }
/* 21.10 artifact audit: the four icons under "What's new?" share one drawn box (17 of 24, middle on 12),
and the poll card lines up with the cards below it: same edges, its words on the options' text line */
.hfc .cx_att { margin-left: -2px; margin-right: -4px; }
.cx_pl { border-radius: 22px; padding-bottom: 6px; }
.cx_plr { padding: 0 10px; }
.hfc .cx_bar .cx_b .ico { transform: none; }
/* 21.10 (owner): the chat button is a pill with its word; new hellos or unread chats light it and a count sits on its corner */
.hm-tog { width: auto; height: 36px; border-radius: 18px; display: inline-flex; align-items: center; padding: 0 13px; font-size: 14px; font-weight: 500; }
.hm-tog .ico { display: none; }
.hm-tog .hm-l { line-height: 1; }
.hm-tog .hm-dot { display: none; }
.hm-tog.is-new:not(.is-on) { background: rgba(142, 92, 246, .14); color: #5B2FC9; }
.hm-n { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #8E5CF6; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.hm-n[hidden] { display: none; }
.scr--home .top .me { min-width: 0; }
.scr--home .top .me_n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 21.10 artifact audit: a token next to an amount, one rule everywhere (the header is the model: drawn
1.12 of the digits' size, its middle on the digits' middle, a gap of .4 of the digits' size).
purple-token.svg has a little air around the drawing (93% of its box), so its box is 1.204em and its
gap .307em; the cropped files use 1.12em and .4em. Inline lines sit by vertical-align, flex rows by top. */
.tasks .rw img, .bx-s_txt .bx-s_amt img { display: inline-block; width: auto !important; height: 1.204em !important; vertical-align: -.2325em; margin: 0 0 0 .307em !important; }
.task-sheet .task-reward.rw, .bx_i span, .hs_trade .pill, .js-bx-act .pill, .task-amount { gap: 0 !important; }
.task-sheet .task-reward.rw img, .bx_i span img, .js-bx-act .pill img, .task-amount img { width: auto !important; height: 1.204em !important; margin: 0 0 0 .307em !important; position: relative; top: -.06em; }
.hs_trade .pill img { width: auto !important; height: 1.12em !important; margin: 0 0 0 .4em !important; position: relative; top: -.06em; }
.js-val-inv-n .inv_tok { height: 1.12em !important; vertical-align: -.19em !important; margin: 0 0 0 .4em !important; }
.js-tok img { top: -.8px; }
.js-bx-act .pill.js-bx-earn img { margin: 0 .307em !important; }
/* the tour: the dots in the middle of the card on every step, Skip and the button on the sides */
.coach_act { display: grid; grid-template-columns: 1fr auto 1fr; }
.coach_skip { justify-self: start; }
.coach_act .js-co-next { justify-self: end; }
/* "Say hello" in a person's sheet: the same hand as on the chats page */
.msheet-body .pill--hi .pill_hand { margin: -2px -2px 0 -2px !important; }
/* 320-wide phones: "Open to a chat" fits on its line (was cut to "Open to a…") */
@media (max-width: 359px) {
.pcard--new { column-gap: 10px !important; }
.pcard--new .pcard_face, .pcard--new .face0 { width: 42px !important; height: 42px !important; }
.pcard--new .pill--hi { padding-left: 10px; padding-right: 10px; }
}
/* 21.10 (owner): comments open right under the post, in the feed: oldest first, a field at the bottom */
.fdcm { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); text-align: left; }
.cm_list { padding: 0 0 6px; }
.cm_wait { margin: 6px 0; }
.cm_empty { color: var(--mute); font-size: 14px; text-align: left; margin: 4px 0 8px; }
.cm_r { display: flex; gap: 10px; padding: 8px 0; }
.cm_r + .cm_r { border-top: 1px solid var(--line); }
.cm_fc { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: 0; }
.cm_b { flex: 1; min-width: 0; }
.cm_n { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.cm_n b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm_n time { font-size: 12px; color: var(--mute); flex: none; }
.cm_x { margin-left: auto; font-size: 12px; color: var(--mute); padding: 0 2px; background: none; border: 0; }
.cm_b p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.cm_b p .pe { margin: 0 .09em; }
.cm_b p .pe-jl { margin-left: .2em; } .cm_b p .pe-jr { margin-right: .2em; }
.cm_f { display: flex; align-items: flex-end; gap: 8px; }
.cm_in { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; border-radius: 18px; background: var(--soft-ink); padding: 8px 14px; font: inherit; font-size: 16px; line-height: 20px; color: var(--ink); max-height: 120px; }
.cm_go { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; border: 0; }
.cm_go svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 21.10 (owner): replies under a comment, a little in; Reply and Delete on the name line */
.cm_r.is-reply { margin-left: 38px; }
.cm_r.is-reply .cm_fc { width: 24px; height: 24px; }
.cm_to { font-size: 12px; color: var(--mute); white-space: nowrap; }
.cm_acts { margin-left: auto; display: inline-flex; gap: 10px; flex: none; }
.cm_acts .cm_x { margin-left: 0; }
.cm_rto { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); margin: 0 0 6px 2px; }
.cm_rto button { width: 22px; height: 22px; display: grid; place-items: center; background: none; border: 0; color: var(--mute); }
.cm_n b { flex: 0 0 auto; max-width: 48%; }
.cm_to { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 21.10 (owner): a commenter's photo and name open them, like a post's */
.cm_fc, .cm_n > b { cursor: pointer; }
/* 21.10: the comment button now follows the hand, so it takes the hand's nudge; Quote sits after it with the same gap */
.hm-feed .fdp_a .js-fd-cm { margin-left: -5.4px; }
.hm-feed .fdp_a .js-fd-quote { margin-left: -5.4px; }
/* 21.10 (owner): Post later — ready times and your own day and time */
.pl8_l { margin: 16px 0 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; text-align: left; }
.pl8_r { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; padding: 0 16px; background: var(--card, #fff); border: 0; font-size: 15px; color: var(--ink); }
.pl8_r + .pl8_r { border-top: 1px solid var(--line); }
.pl8_r b { font-weight: 500; color: var(--mute); }
.pl8_r:active { background: var(--soft-ink); }
.pl8_h { font-size: 13px !important; margin: 18px 0 8px !important; text-align: left; }
.pl8_own { display: flex; gap: 8px; }
.pl8_in { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 14px; background: var(--soft-ink); padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.pl8 .msheet-act { margin-top: 18px; }
/* 21.10 (owner): the Chats pill is the same as the hand and token pills: same grey, shape, type; a new hello shows only as the purple count */
.scr--home .top .hm-tog { background: rgba(27, 24, 32, .055); color: var(--ink); border-radius: 26px 30px 28px 24px / 28px 24px 30px 26px; padding: 0 14px; font-size: 15px; font-weight: 500; }
.scr--home .top .hm-tog.is-new:not(.is-on) { background: rgba(27, 24, 32, .055); color: var(--ink); }
.scr--home .top .hm-tog.is-on { background: var(--ink); color: #fff; }
.scr--home .top .hm-tog .hm-l { position: relative; top: 1.5px; }
/* 21.10 (owner): the two-step badge is the shield itself: solid purple, a white tick, no circle */
.vbadge { width: 1.1em; height: 1.1em; vertical-align: -.21em; }
.vbadge .vbadge_s { fill: var(--purple); stroke: none; }
.vbadge .vbadge_k { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 22.10 (owner): Chats, hand and token pills sit at one equal gap */
.scr--home .top .hm-tog + .hcount { margin-left: 0; }
/* withdraw sheet (owner, 2026-10-22) */
.bal_act .pill.ghost { background: transparent; color: var(--ink); }
.wd_opts { display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: 18px auto 0; }
.wd_opts .pill { height: 44px; }
.wd_opts .pill.ghost { background: var(--soft-ink); color: var(--ink); }
.wd_f { display: block; text-align: left; max-width: 320px; margin: 14px auto 0; position: relative; }
.wd_f span { display: block; font-size: 13px; color: var(--mute); margin: 0 0 6px 4px; }
.wd_f input, .wd_f select { width: 100%; height: 44px; border: 0; border-radius: 14px; background: var(--soft-ink); color: var(--ink); font: inherit; font-size: 16px; padding: 0 14px; -webkit-appearance: none; appearance: none; }
.wd_f--sum input { padding-right: 64px; }
.wd_max { position: absolute; right: 6px; bottom: 6px; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 14px; color: var(--ink); background: var(--card); }
.wd_to { display: block; width: 100%; max-width: 320px; margin: 16px auto 0; padding: 10px 14px; border-radius: 14px; background: var(--soft-ink); text-align: left; }
.wd_to span { display: block; font-size: 15px; }
.wd_to small { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; }
.wd .wd_fine { font-size: 13px; margin-top: 8px; }
/* 22.10 (owner): a picked photo waits above the field until the arrow sends it */
.cmp_pv { position: absolute; left: 10px; bottom: calc(100% + 8px); z-index: 3; }
.cmp_pv img { display: block; height: 96px; max-width: 160px; width: auto; object-fit: cover; border-radius: 16px; box-shadow: var(--halo); }
.cmp_pv_x { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.cmp_pv_x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* 22.10 (owner): chat like the reference: yours light purple with purple text, theirs white with a
hairline; behind them a still pattern of small grey glyphs (one SVG tile, no animation) */
/* the pattern lives in the message list and scrolls with it */
.scr--chat .msgs { background: url(./img/chat-glyphs.svg?v=3) 0 0 / 420px 420px repeat local; }
.scr--chat .bub:not(.bub--hand):not(.bub--emoji):not(.bub--photo) { background: #fffdf9 !important; color: var(--ink) !important; box-shadow: 0 0 0 1px rgba(27, 24, 32, .08) !important; }
.scr--chat .bub.me:not(.bub--hand):not(.bub--emoji):not(.bub--photo) { background: #f1e8fe !important; color: #5a24c4 !important; box-shadow: 0 0 0 1px rgba(141, 75, 239, .2) !important; }
.scr--chat .bub.me .bub_t { color: rgba(90, 36, 196, .55); }
.scr--chat .cmp { background: #fffdf9; box-shadow: 0 0 0 1px rgba(27, 24, 32, .08); }
/* 22.10 (owner): posts were taller than the screen. Smaller text, a long post shows 8 lines
(a tap on it opens it in full with the comments), a lower photo, a smaller field to write in */
.hm-feed .fdp_t { font-size: 15px; line-height: 1.42; }
.hm-feed .fdp:not(:has(.cm_list)) .fdp_t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.hm-feed .fdp_ph { max-height: 300px; }
.hm-feed .hfc_in { font-size: 17px; line-height: 1.38; min-height: 40px; }
/* header chats pill hidden per user request */
.hm-tog { display: none !important; }
/* Box opening risk warning */
.bx-s_warn {
display: flex;
align-items: flex-start;
gap: 8px;
background: rgba(255, 180, 0, 0.08);
border: 1px solid rgba(255, 180, 0, 0.22);
border-radius: 14px;
padding: 10px 12px;
margin: 10px 0 12px;
font-size: 12.5px;
line-height: 1.42;
color: var(--mute);
text-align: left;
}
.bx-s_warn-ic {
font-size: 15px;
line-height: 1;
flex: none;
margin-top: 1px;
}
/* Top header alignment: hand pill on right side next to token */
.scr--home .top .hcount { margin-left: auto !important; }
.scr--home .top .tok-btn { margin-left: 8px !important; }
/* Static wcard (no tucking curtain) */
.wcard { transform: none !important; margin-bottom: 24px !important; }
.wcard.is-tucked { transform: none !important; max-height: none !important; overflow: visible !important; }
.wcard.is-tucked .feed { opacity: 1 !important; pointer-events: auto !important; }
.wcard_tab { display: none !important; }
/* Micro-hint navigation indicator */
.hm-hint {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px 6px;
margin: 0 4px 6px;
user-select: none;
}
.hm-hint_b {
font-size: 13px;
font-weight: 500;
color: var(--mute);
background: none;
border: 0;
padding: 4px 8px;
border-radius: 12px;
transition: color .2s, background .2s;
cursor: pointer;
}
.hm-hint_b:active {
color: var(--ink);
background: var(--soft-ink);
}
.hm-hint_dots {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hm-hint_dots .hm-dot {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(27, 24, 32, .18);
transition: background .25s, transform .25s;
}
.hm-hint_dots .hm-dot.is-active {
background: #8E5CF6;
transform: scale(1.35);
}
/* Likes button on posts */
.fda--like {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--mute);
transition: color .2s, transform .2s var(--spring);
}
.fda--like .ico {
width: 19px;
height: 19px;
stroke-width: 1.7;
}
.fda--like.is-liked {
color: #E5484D;
}
.fda--like:active {
transform: scale(.88);
}
/* Token page exact alignment on #home - eliminates double padding and restores footer position */
#home #token.hm-page {
padding-top: calc(var(--hm-top, calc(74px + var(--top, 0px))) + 6px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
#home #token .tok-body {
padding: 4px 0 0 0 !important;
margin: 0 !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
#home #token .fine {
margin: 22px 4px 0 !important;
}
#home #token .pfoot {
margin-top: 40px !important;
justify-content: space-between !important;
padding: 12px 2px calc(14px + var(--bot)) !important;
}
/* Fluid sliding horizontal page track (#home: Chats <-> Feed <-> Token) */
#home > .top {
z-index: 20;
}
.hm-swipe-hud {
position: absolute;
top: calc(var(--hm-top, calc(74px + var(--top, 0px))) + 8px);
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 14px;
pointer-events: none;
z-index: 25;
}
.hm-swipe-hud,
.hm-sh-card {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
.hm-sh-card.is-visible {
opacity: 1;
transform: scale(1);
}
.hm-sh-card.js-sh-center {
margin: 0 auto;
}
.hm-track {
flex: 1;
min-height: 0;
display: flex !important;
width: 300% !important;
transform: translate3d(0, 0, 0);
transition: transform .50s cubic-bezier(0.16, 1, 0.3, 1) !important;
will-change: transform;
touch-action: pan-y;
position: relative !important;
}
.hm-track.is-feed { transform: translate3d(0, 0, 0) !important; }
.hm-track.is-chats { transform: translate3d(-33.333333%, 0, 0) !important; }
.hm-track.is-token { transform: translate3d(-66.666667%, 0, 0) !important; }
#home .hm-page {
width: 33.333333% !important;
flex: none !important;
min-width: 0 !important;
height: 100% !important;
position: relative !important;
inset: auto !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-y: contain;
touch-action: pan-y;
transform: none !important;
filter: none !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
.hm-track {
transition: none !important;
}
}
/* Uniform symmetry for Forms cards (.bx / .bx_i / .bxc) */
.bx {
align-items: stretch;
}
.bx_i:not(.bx_i--x) {
justify-content: flex-start;
padding: 12px 4px 12px;
}
.bx_i:not(.bx_i--x) .bxc {
width: 84px;
height: 84px;
flex: none;
margin: 0 auto 2px;
}
/* Hand-supported post aura & background effect (owner, 2026-10-23) */
.fdp {
transition: background .45s ease, box-shadow .45s ease;
}
.fdp--fm-h {
background: linear-gradient(145deg, #fcf9ff 0%, #f7f1ff 55%, #fffaf6 100%);
box-shadow: 0 10px 34px -13px rgba(142, 92, 246, .30), 0 0 0 1px rgba(142, 92, 246, .08);
}
.fdp.is-hand-wave {
animation: fdpHandWave .88s cubic-bezier(.22, .8, .24, 1);
}
@keyframes fdpHandWave {
0% { box-shadow: 0 0 0 0 rgba(142, 92, 246, .36), 0 10px 34px -13px rgba(142, 92, 246, .30); }
40% { box-shadow: 0 0 0 9px rgba(142, 92, 246, .14), 0 14px 40px -10px rgba(142, 92, 246, .42); }
100% { box-shadow: 0 0 0 18px rgba(142, 92, 246, 0), 0 10px 34px -13px rgba(142, 92, 246, .30); }
}
.fdp_t { cursor: auto; }
.fdn_lk { display: inline-block; width: 16.2px; height: 16.2px; margin: 0 2.7px 0 5.2px; vertical-align: -3px; }
/* ── Telegram-Grade Chat Mechanics (2026-10-23): Swipe-to-Reply, Quotes & Multi-Photo Albums (Original Date/Time behavior preserved) ── */
.msgs { position: relative; overflow-x: hidden; }
/* Swipe-to-Reply indicator on message bubbles */
.bub { will-change: transform; touch-action: pan-y; }
.bub_swp {
position: absolute;
right: -44px;
top: 50%;
width: 31px;
height: 31px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(141, 75, 239, .14);
color: var(--purple);
pointer-events: none;
opacity: var(--swp-p, 0);
transform: translateY(-50%) scale(calc(.55 + var(--swp-p, 0) * .45));
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.bub.is-swp-ready .bub_swp {
background: var(--purple);
color: #fff;
box-shadow: 0 4px 12px rgba(141, 75, 239, .34);
}
.bub_swp svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Highlight pulse when jumping to a quoted message */
.bub.is-flash { animation: bubFlash 1.5s cubic-bezier(.22, .8, .24, 1); }
@keyframes bubFlash {
0%, 100% { filter: none; }
25% { box-shadow: 0 0 0 3px rgba(141, 75, 239, .45), 0 8px 24px rgba(141, 75, 239, .22) !important; transform: scale(1.015); }
}
/* Quoted message block inside bubble (.bub_q) */
.bub_q {
display: flex;
align-items: center;
gap: 8px;
margin: -2px -4px 6px;
padding: 5px 10px 5px 8px;
border-radius: 11px;
background: rgba(141, 75, 239, .08);
cursor: pointer;
position: relative;
overflow: hidden;
max-width: 100%;
transition: background .18s ease;
}
.bub.me .bub_q { background: rgba(124, 58, 237, .12); }
.bub--photo .bub_q { margin: 3px 3px 5px; }
.bub_q:active { background: rgba(141, 75, 239, .18); }
.bub_q_bar {
width: 3px;
align-self: stretch;
min-height: 26px;
border-radius: 3px;
background: var(--purple);
flex: none;
}
.bub_q_th {
width: 32px;
height: 32px;
border-radius: 7px;
overflow: hidden;
flex: none;
background: #e6e1ec;
}
.bub_q_th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bub_q_body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.24;
}
.bub_q_who {
font-size: 12.5px;
font-weight: 600;
color: var(--purple);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bub_q_txt {
font-size: 13px;
color: var(--ink);
opacity: .8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Quick Context Action Bar on tap (Reply / Copy / Time) */
.bub_act {
position: absolute;
bottom: calc(100% + 5px);
left: 0;
z-index: 25;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px 6px;
border-radius: 99px;
background: rgba(27, 24, 32, .93);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
box-shadow: 0 6px 20px rgba(27, 24, 32, .22);
white-space: nowrap;
animation: actPop .2s var(--spring) both;
}
.bub_act.is-me { left: auto; right: 0; }
@keyframes actPop { from { opacity: 0; transform: translateY(5px) scale(.92); } }
.bub_act_btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius: 99px;
font-size: 12.5px;
font-weight: 500;
color: #fff;
transition: background .15s;
}
.bub_act_btn:active { background: rgba(255, 255, 255, .18); }
.bub_act_btn svg {
width: 13.5px;
height: 13.5px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.bub_act_ago {
font-size: 11px;
color: rgba(255, 255, 255, .64);
padding: 0 7px 0 6px;
border-left: 1px solid rgba(255, 255, 255, .14);
margin-left: 2px;
}
/* Multi-Photo Album Mosaic Grid & Photo Captions */
.scr--chat .bub.bub--photo.me {
background: #f1e8fe !important;
color: #5a24c4 !important;
box-shadow: 0 0 0 1px rgba(141, 75, 239, .2) !important;
}
.bub.bub--album {
width: min(72vw, 280px);
max-width: 82%;
padding: 3px;
}
.bub_album {
position: relative;
display: grid;
gap: 3px;
width: 100%;
border-radius: 17px;
overflow: hidden;
background: #ece8f1;
}
.bub_album--2 { grid-template-columns: 1fr 1fr; aspect-ratio: 1.55; }
.bub_album--3 { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1.25; }
.bub_album--3 .bub_alb_it:first-child { grid-row: 1 / span 2; }
.bub_album--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1.08; }
.bub_album--5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1.15fr 1fr; aspect-ratio: 1.12; }
.bub_album--5 .bub_alb_it:nth-child(1) { grid-column: 1 / span 3; }
.bub_album--5 .bub_alb_it:nth-child(2) { grid-column: 4 / span 3; }
.bub_album--5 .bub_alb_it:nth-child(3) { grid-column: 1 / span 2; }
.bub_album--5 .bub_alb_it:nth-child(4) { grid-column: 3 / span 2; }
.bub_album--5 .bub_alb_it:nth-child(5) { grid-column: 5 / span 2; }
.bub_alb_it {
position: relative;
width: 100%;
height: 100%;
min-height: 70px;
overflow: hidden;
background: #e6e1ec;
cursor: zoom-in;
}
.bub_alb_it img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity .3s ease;
}
.bub_alb_it img.is-in, .bub--photo.is-loaded .bub_alb_it img { opacity: 1; }
.bub--photo.is-veiled .bub_alb_it img { filter: blur(22px) saturate(.8); transform: scale(1.15); }
.bub_alb_more {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(18, 14, 24, .54);
backdrop-filter: blur(3px);
color: #fff;
font-size: 20px;
font-weight: 600;
pointer-events: none;
}
.bub_cap {
padding: 7px 11px 4px;
font-size: 15.5px;
line-height: 1.35;
color: var(--ink);
word-wrap: break-word;
white-space: pre-wrap;
}
.bub.me .bub_cap { color: #5a24c4; }
/* Unified Composer Deck: Reply Bar (.cmp_reply) & Multi-Photo Pre-Send Strip (.cmp_pv) */
.cmp {
flex-wrap: wrap;
transition: box-shadow .3s, border-radius .25s;
}
.cmp.has-deck {
border-radius: 22px;
padding-top: 8px;
}
.cmp_reply {
flex: 0 0 100%;
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 2px 6px 7px 0;
margin-bottom: 2px;
border-bottom: 1px solid rgba(27, 24, 32, .07);
cursor: pointer;
animation: deckIn .2s var(--soft) both;
}
@keyframes deckIn { from { opacity: 0; transform: translateY(4px); } }
.cmp_reply_ic {
color: var(--purple);
display: grid;
place-items: center;
flex: none;
}
.cmp_reply_ic svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.cmp_reply_bar {
width: 3px;
height: 30px;
border-radius: 3px;
background: var(--purple);
flex: none;
}
.cmp_reply_th {
width: 32px;
height: 32px;
border-radius: 7px;
overflow: hidden;
flex: none;
background: #ece8f1;
}
.cmp_reply_th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp_reply_body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.22;
}
.cmp_reply_body b {
font-size: 12.5px;
font-weight: 600;
color: var(--purple);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp_reply_body span {
font-size: 13px;
color: var(--mute);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp_reply_x {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--mute);
flex: none;
}
.cmp_reply_x:active { background: rgba(27, 24, 32, .07); color: var(--ink); }
.cmp_reply_x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.cmp .cmp_pv {
position: static !important;
left: auto !important;
bottom: auto !important;
flex: 0 0 100%;
width: 100%;
padding: 2px 6px 8px 0;
margin-bottom: 2px;
border-bottom: 1px solid rgba(27, 24, 32, .07);
animation: deckIn .22s var(--soft) both;
}
.cmp_pv_head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px 6px 2px;
font-size: 12px;
font-weight: 500;
color: var(--mute);
}
.cmp_pv_clr {
font-size: 12px;
font-weight: 500;
color: var(--purple);
padding: 2px 6px;
border-radius: 8px;
}
.cmp_pv_strip {
display: flex;
align-items: center;
gap: 9px;
overflow-x: auto;
padding: 5px 4px 2px 2px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cmp_pv_strip::-webkit-scrollbar { display: none; }
.cmp_pv_it {
position: relative;
flex: none;
width: 66px;
height: 66px;
border-radius: 14px;
}
.cmp_pv_it img {
display: block !important;
width: 66px !important;
height: 66px !important;
max-width: none !important;
object-fit: cover;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(27, 24, 32, .12);
cursor: zoom-in;
}
.cmp_pv_num {
position: absolute;
left: 5px;
bottom: 5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 99px;
background: rgba(18, 14, 24, .68);
backdrop-filter: blur(4px);
color: #fff;
font-size: 10.5px;
font-weight: 600;
display: grid;
place-items: center;
pointer-events: none;
}
.cmp_pv_it .cmp_pv_x {
position: absolute;
top: -5px;
right: -5px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--ink);
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .24);
}
.cmp_pv_it .cmp_pv_x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.cmp_pv_add {
flex: none;
width: 66px;
height: 66px;
border-radius: 14px;
border: 1.5px dashed rgba(141, 75, 239, .34);
background: rgba(141, 75, 239, .05);
color: var(--purple);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 11px;
font-weight: 500;
transition: background .2s, transform .2s;
}
.cmp_pv_add:active { transform: scale(.94); background: rgba(141, 75, 239, .12); }
.cmp_pv_add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
/* Scroll-to-bottom floating button (.chat-down) */
.chat-down {
position: absolute;
right: 16px;
bottom: calc(68px + var(--bot));
z-index: 18;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 253, 249, .95);
box-shadow: 0 4px 16px rgba(27, 24, 32, .15), 0 0 0 1px rgba(27, 24, 32, .08);
color: var(--ink);
display: grid;
place-items: center;
transition: transform .25s var(--spring), opacity .2s;
}
.chat-down:active { transform: scale(.9); }
.chat-down svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat-down_n {
position: absolute;
top: -5px;
right: -4px;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 99px;
background: var(--purple);
color: #fff;
font-size: 11px;
font-weight: 600;
display: grid;
place-items: center;
}
/* Upgraded Fullscreen Multi-Photo Gallery Lightbox (.phv) */
.phv {
display: flex !important;
flex-direction: column;
justify-content: space-between;
}
.phv_top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px;
color: #fff;
z-index: 2;
}
.phv_cnt { font-size: 14px; font-weight: 500; opacity: .9; }
.phv_x {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
color: #fff;
display: grid;
place-items: center;
}
.phv_x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.phv_stage {
position: relative;
flex: 1;
width: 100%;
min-height: 0;
display: grid;
place-items: center;
}
.phv_nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
backdrop-filter: blur(6px);
color: #fff;
display: grid;
place-items: center;
}
.phv_nav--prev { left: 6px; }
.phv_nav--next { right: 6px; }
.phv_nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.phv_cap {
width: 100%;
max-width: 480px;
margin: 8px auto 0;
padding: 8px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, .1);
color: #fff;
font-size: 14.5px;
text-align: center;
}
/* Temporary Hand Support aura on post card: softly glows and dissolves back to original card/form */
.fdp {
transition: background .75s ease, box-shadow .75s ease;
}
.fdp.is-hand-temp:not(.fdp--form) {
background: linear-gradient(145deg, #fcf9ff 0%, #f7f1ff 55%, #fffaf6 100%);
box-shadow: 0 10px 34px -13px rgba(142, 92, 246, .28), 0 0 0 1px rgba(142, 92, 246, .10);
}
.fdp_cv--temp {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: inherit;
}
/* Ensure background canvas (.fdp_cv / .fdp_cv--temp) is always strictly behind post photos, text, and header */
.fdp {
isolation: isolate;
}
.fdp > .fdp_cv,
.fdp > .fdp_cv--temp {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
pointer-events: none;
z-index: 0 !important;
}
.fdp > :not(.fdp_cv):not(.fdp_cv--temp):not(.fdp_add) {
position: relative;
z-index: 1;
}
.fdp > .fdp_add {
position: absolute;
z-index: 2;
}
.fdp_ph {
position: relative;
z-index: 2;
background: var(--card, #fffdf9);
}
/* Official badge on user's own header (.me_n) and profile (.st-me b) + icon spacing polish */
.me_n .off-b {
width: 14px;
height: 14px;
margin-left: 4px;
vertical-align: -2px;
}
.st-me b .off-b {
width: 16px;
height: 16px;
margin-left: 5px;
vertical-align: -2.5px;
}
.top-r {
gap: 8px;
}
.hcount, .tok-btn {
gap: 6px;
}
/* Hand Market Asset card inside handSheet (.hs_mkt) */
.hs_mkt {
margin: 10px 0 14px;
padding: 11px 14px;
border-radius: 16px;
background: rgba(123, 92, 255, .06);
border: 1px solid rgba(123, 92, 255, .14);
text-align: left;
}
.hs_mkt_row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.hs_mkt_row > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.hs_mkt_row > div:last-child {
text-align: right;
}
.hs_mkt_row span {
font-size: 11.5px;
color: var(--mute);
font-weight: 500;
}
.hs_mkt_row b {
font-size: 15px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.01em;
}
.hs_mkt_row b small {
font-weight: 500;
font-size: 12px;
color: var(--mute);
}
.hs_up {
font-style: normal;
font-size: 12px;
font-weight: 600;
color: #2a9d3c;
background: rgba(49, 181, 69, .12);
padding: 1px 6px;
border-radius: 99px;
margin-left: 4px;
}
.hs_mkt_sub {
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid rgba(27, 24, 32, .06);
font-size: 12px;
color: var(--mute);
line-height: 1.35;
}
/* Big Hand Drop card in News Feed (.fd-drop) */
.fd-drop-wrap {
margin: 0 0 12px;
}
.fd-drop-wrap[hidden] {
display: none !important;
}
.fd-drop {
position: relative;
padding: 16px 18px;
border-radius: 22px;
background: linear-gradient(145deg, rgba(255, 253, 249, .96), rgba(245, 239, 255, .92));
border: 1px solid rgba(141, 75, 239, .22);
box-shadow: 0 8px 26px -12px rgba(123, 92, 255, .18);
overflow: hidden;
}
.fd-drop.is-claimed {
border-color: rgba(27, 24, 32, .09);
box-shadow: none;
background: var(--card, #fffdf9);
}
.fd-drop_top {
display: flex;
align-items: center;
gap: 14px;
}
.fd-drop_icon-wrap {
flex: none;
width: 58px;
height: 58px;
border-radius: 18px;
background: rgba(141, 75, 239, .11);
display: grid;
place-items: center;
}
.fd-drop_icon {
width: 40px;
height: 40px;
transform-origin: 70% 85%;
animation: hiWave 2.4s ease-in-out infinite, handGlint 7s ease-in-out infinite;
}
.fd-drop_body {
flex: 1;
min-width: 0;
}
.fd-drop_tag {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
color: #7B5CFF;
margin-bottom: 3px;
}
.fd-drop_h {
margin: 0;
font-size: 16.5px;
font-weight: 650;
letter-spacing: -.015em;
color: var(--ink);
line-height: 1.25;
}
.fd-drop_p {
margin: 3px 0 0;
font-size: 13.5px;
color: var(--mute);
line-height: 1.35;
}
.fd-drop_p b {
color: var(--ink);
font-weight: 650;
}
.fd-drop_bar {
height: 6px;
border-radius: 99px;
background: rgba(27, 24, 32, .07);
margin: 13px 0 12px;
overflow: hidden;
}
.fd-drop_bar i {
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #8D4BEF, #B37CFF);
transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.fd-drop_foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.fd-drop_meta {
font-size: 12.5px;
color: var(--mute);
}
.fd-drop_btn {
height: 36px;
padding: 0 16px;
font-size: 14px;
font-weight: 600;
}
.fd-drop_done {
font-size: 13px;
font-weight: 600;
color: #7B5CFF;
}
/* ── Clickable @form tags & @username system (2026-10-23) ── */
.fm-tag.js-fm-tag {
cursor: pointer;
display: inline-block;
padding: 1px 6px;
margin: 0 -2px;
border-radius: 6px;
transition: transform 0.14s ease, background 0.14s ease;
}
.fm-tag.js-fm-tag:active {
transform: scale(0.95);
background: rgba(124, 58, 237, 0.12);
}
.usr-tag {
color: #6d28d9;
font-weight: 620;
cursor: pointer;
display: inline-block;
padding: 0 3px;
margin: 0 -1px;
border-radius: 5px;
background: rgba(124, 58, 237, 0.08);
transition: transform 0.14s ease, background 0.14s ease;
}
.usr-tag:active {
transform: scale(0.95);
background: rgba(124, 58, 237, 0.18);
}
.js2-uname-wrap {
position: relative;
display: flex;
align-items: center;
height: 50px;
margin-top: 10px;
padding: 0 16px;
border-radius: 999px;
background: rgba(25, 21, 36, 0.045);
border: 1.5px solid rgba(25, 21, 36, 0.08);
transition: border-color 0.18s ease, background 0.18s ease;
}
.js2-uname-wrap:focus-within {
background: #fff;
border-color: rgba(124, 58, 237, 0.45);
}
.js2-uname-at {
font-size: 16px;
font-weight: 650;
color: #7c3aed;
margin-right: 4px;
user-select: none;
}
.js2-uname {
flex: 1;
min-width: 0;
border: 0;
outline: none;
background: transparent;
font: inherit;
font-size: 16px;
font-weight: 560;
color: var(--ink, #191524);
padding: 0;
}
.js2-uname::placeholder {
color: rgba(25, 21, 36, 0.38);
font-weight: 450;
}
.js2-uname-st {
font-size: 12px;
font-weight: 600;
margin-left: 8px;
white-space: nowrap;
color: rgba(25, 21, 36, 0.45);
}
.js2-uname-st.is-ok {
color: #16a34a;
}
.js2-uname-st.is-bad {
color: #dc2626;
}
.un-sheet {
text-align: center;
}
.un-sheet_ic {
width: 52px;
height: 52px;
margin: 0 auto 12px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(168, 85, 247, 0.08));
color: #7c3aed;
font-size: 26px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.un-sheet_inp {
margin: 14px 0 6px;
text-align: left;
}
.fdpp_un {
margin: -4px 0 10px;
font-size: 14px;
font-weight: 580;
color: #7c3aed;
}
.st-me_info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.st-me_un {
font-size: 13px;
font-weight: 560;
color: rgba(25, 21, 36, 0.52);
}
.st-me_un--set {
border: 0;
padding: 2px 8px;
border-radius: 999px;
background: rgba(124, 58, 237, 0.1);
color: #7c3aed;
font-family: inherit;
cursor: pointer;
}
.cx_tag_f {
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
font-size: 11px;
}
.cx_tag_sub {
margin-left: auto;
font-size: 12px;
font-weight: 480;
color: rgba(25, 21, 36, 0.44);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
}
/* ── Offline Full-Screen Blur + Centered Shining Multi-Spectrum Aura + Native Bottom Text (2026-10-23) ── */
.netload {
position: fixed !important;
inset: 0 !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
z-index: 95 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: rgba(246, 243, 238, 0.54) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.08);
backdrop-filter: blur(22px) saturate(1.08);
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.netload.is-on {
opacity: 1 !important;
transform: none !important;
pointer-events: auto;
}
.nl-aura {
position: relative;
width: 112px;
height: 112px;
display: grid;
place-items: center;
animation: nlAuraPulse 3.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
will-change: transform;
}
/* Soft outer ambient aura light bleeding around the sphere from different sides */
.nl-aura_halo {
position: absolute;
inset: -38px;
border-radius: 50%;
filter: blur(24px);
opacity: 0.88;
pointer-events: none;
}
/* Crisp high-definition Aura sphere in the center */
.nl-aura_orb {
position: relative;
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, #bba0fa 0%, #a57bf4 62%, #9260ee 100%);
box-shadow:
0 0 36px 6px rgba(165, 123, 244, 0.34),
0 0 68px 16px rgba(236, 143, 220, 0.22),
inset 0 0 18px rgba(255, 255, 255, 0.38);
-webkit-mask-image: radial-gradient(circle, #000 62%, rgba(0, 0, 0, 0.82) 82%, transparent 100%);
mask-image: radial-gradient(circle, #000 62%, rgba(0, 0, 0, 0.82) 82%, transparent 100%);
}
/* The 4 signature Aura color spectrums that chaotically & sequentially shine through from different sides */
.nl-sp {
position: absolute;
border-radius: 50%;
pointer-events: none;
mix-blend-mode: normal;
will-change: transform, opacity;
}
/* Spectrum 1: Rose / Orchid Pink (#ec8fdc -> #f9b8ec) */
.nl-sp--1 {
width: 78%;
height: 78%;
left: -10%;
top: -8%;
background: radial-gradient(circle at 46% 46%, #fad0f2 0%, #ec8fdc 46%, rgba(236, 143, 220, 0) 76%);
filter: blur(6px);
animation: nlSpec1 5.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Spectrum 2: Sky / Periwinkle Blue (#7fa8ff -> #b0ceff) */
.nl-sp--2 {
width: 76%;
height: 76%;
right: -12%;
top: -6%;
background: radial-gradient(circle at 54% 46%, #bfd8ff 0%, #7fa8ff 48%, rgba(127, 168, 255, 0) 76%);
filter: blur(6px);
animation: nlSpec2 6.9s cubic-bezier(0.4, 0, 0.6, 1) -1.7s infinite;
}
/* Spectrum 3: Warm Peach / Sunset Coral (#ffb98f -> #ffe0c8) */
.nl-sp--3 {
width: 74%;
height: 74%;
right: -10%;
bottom: -10%;
background: radial-gradient(circle at 52% 54%, #ffe2cc 0%, #ffb98f 46%, rgba(255, 185, 143, 0) 76%);
filter: blur(6px);
animation: nlSpec3 6.2s cubic-bezier(0.4, 0, 0.6, 1) -3.4s infinite;
}
/* Spectrum 4: Deep Electric Violet (#9461f0 -> #c49dff) */
.nl-sp--4 {
width: 80%;
height: 80%;
left: -12%;
bottom: -10%;
background: radial-gradient(circle at 48% 54%, #caa8ff 0%, #9461f0 50%, rgba(148, 97, 240, 0) 78%);
filter: blur(6px);
animation: nlSpec4 7.5s cubic-bezier(0.4, 0, 0.6, 1) -4.9s infinite;
}
/* Luminous white Aura core in the center */
.nl-aura_core {
position: absolute;
inset: 16%;
border-radius: 50%;
background: radial-gradient(
circle at 50% 50%,
#ffffff 0%,
rgba(255, 255, 255, 0.92) 28%,
rgba(255, 255, 255, 0.46) 56%,
rgba(255, 255, 255, 0) 100%
);
animation: nlCoreBreath 3.5s ease-in-out infinite;
}
@keyframes nlAuraPulse {
0%, 100% { transform: scale(0.955); }
50% { transform: scale(1.045); }
}
@keyframes nlCoreBreath {
0%, 100% { transform: scale(0.94); opacity: 0.92; }
50% { transform: scale(1.07); opacity: 1; }
}
/* Organic, chaotic multi-directional spectrum shimmer keyframes */
@keyframes nlSpec1 {
0%, 100% { transform: translate3d(-4px, -3px, 0) scale(0.84); opacity: 0.34; }
28% { transform: translate3d(8px, 4px, 0) scale(1.24); opacity: 0.98; }
58% { transform: translate3d(-6px, 10px, 0) scale(0.92); opacity: 0.48; }
82% { transform: translate3d(4px, -7px, 0) scale(1.12); opacity: 0.78; }
}
@keyframes nlSpec2 {
0%, 100% { transform: translate3d(5px, -4px, 0) scale(0.86); opacity: 0.32; }
22% { transform: translate3d(-7px, 8px, 0) scale(0.94); opacity: 0.52; }
52% { transform: translate3d(-9px, 3px, 0) scale(1.26); opacity: 0.98; }
79% { transform: translate3d(6px, 9px, 0) scale(1.06); opacity: 0.68; }
}
@keyframes nlSpec3 {
0%, 100% { transform: translate3d(4px, 5px, 0) scale(0.82); opacity: 0.30; }
34% { transform: translate3d(-8px, -6px, 0) scale(1.25); opacity: 0.96; }
66% { transform: translate3d(7px, -9px, 0) scale(0.90); opacity: 0.44; }
86% { transform: translate3d(-5px, 4px, 0) scale(1.14); opacity: 0.80; }
}
@keyframes nlSpec4 {
0%, 100% { transform: translate3d(-5px, 6px, 0) scale(0.88); opacity: 0.38; }
19% { transform: translate3d(6px, -5px, 0) scale(1.22); opacity: 0.96; }
49% { transform: translate3d(9px, 4px, 0) scale(0.86); opacity: 0.36; }
76% { transform: translate3d(-6px, -8px, 0) scale(1.18); opacity: 0.88; }
}
/* Native bottom text (like Save in .js2-end / .js2-go on Name & Photo screen, but soft greyish) */
.nl-foot {
position: absolute;
left: 0;
right: 0;
bottom: calc(22px + var(--bot, 0px));
padding: 10px 16px;
text-align: center;
pointer-events: none;
}
.nl-txt {
display: inline-block;
font-family: 'BDO Grotesk', system-ui, -apple-system, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.01em;
color: rgba(27, 24, 32, 0.44);
}
@media (prefers-reduced-motion: reduce) {
.nl-aura, .nl-sp, .nl-aura_core { animation: none !important; }
}
/* Composer multi-photo preview strip */
.cx_phs {
margin: 6px 0 8px;
border-radius: 18px;
background: var(--soft-ink);
padding: 8px 10px 10px;
}
.cx_phs_head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--mute);
}
.cx_phs_clr {
font-size: 12.5px;
font-weight: 500;
color: var(--purple, #8E5CF6);
background: none;
border: 0;
padding: 2px 6px;
border-radius: 8px;
cursor: pointer;
}
.cx_phs_strip {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
padding: 2px 0 4px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cx_phs_strip::-webkit-scrollbar { display: none; }
.cx_phs_it {
position: relative;
flex: none;
width: 74px;
height: 74px;
border-radius: 14px;
overflow: hidden;
background: rgba(27, 24, 32, .06);
}
.cx_phs_ph {
width: 100%;
height: 100%;
background: rgba(27, 24, 32, .06);
}
.cx_phs_it img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
}
.cx_phs_num {
position: absolute;
left: 4px;
bottom: 4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 99px;
background: rgba(18, 14, 24, .68);
backdrop-filter: blur(4px);
color: #fff;
font-size: 10.5px;
font-weight: 600;
display: grid;
place-items: center;
pointer-events: none;
}
.cx_phs_x {
position: absolute;
top: 3px;
right: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(18, 14, 24, .75);
backdrop-filter: blur(3px);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
border: 0;
z-index: 2;
transition: transform .18s var(--spring);
}
.cx_phs_x:active { transform: scale(.88); }
.cx_phs_x svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.cx_phs_it.is-busy img { opacity: .45; }
.cx_phs_it .task-spin { position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; }
.cx_phs_add {
flex: none;
width: 74px;
height: 74px;
border-radius: 14px;
border: 1.5px dashed rgba(142, 92, 246, .35);
background: rgba(142, 92, 246, .05);
color: var(--purple, #8E5CF6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 11.5px;
font-weight: 550;
cursor: pointer;
transition: transform .2s var(--spring), background .2s;
}
.cx_phs_add:active { transform: scale(.93); background: rgba(142, 92, 246, .12); }
.cx_phs_add svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; }
/* Feed Multi-Photo Mosaic Grid */
.fdp_alb {
position: relative;
display: grid;
gap: 3px;
width: 100%;
border-radius: 18px;
overflow: hidden;
margin-top: 10px;
background: #ece8f1;
cursor: zoom-in;
z-index: 2;
}
.fdp_alb--2 { grid-template-columns: 1fr 1fr; aspect-ratio: 1.55; }
.fdp_alb--3 { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1.25; }
.fdp_alb--3 .fdp_alb_it:first-child { grid-row: 1 / span 2; }
.fdp_alb--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1.08; }
.fdp_alb--5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1.15fr 1fr; aspect-ratio: 1.12; }
.fdp_alb--5 .fdp_alb_it:nth-child(1) { grid-column: 1 / span 3; }
.fdp_alb--5 .fdp_alb_it:nth-child(2) { grid-column: 4 / span 3; }
.fdp_alb--5 .fdp_alb_it:nth-child(3) { grid-column: 1 / span 2; }
.fdp_alb--5 .fdp_alb_it:nth-child(4) { grid-column: 3 / span 2; }
.fdp_alb--5 .fdp_alb_it:nth-child(5) { grid-column: 5 / span 2; }
.fdp_alb_it {
position: relative;
width: 100%;
height: 100%;
min-height: 80px;
overflow: hidden;
background: #e6e1ec;
cursor: zoom-in;
}
.fdp_alb_it img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity .3s ease;
cursor: zoom-in;
}
.fdp_alb_it.is-loaded img, .fdp_alb_it img.is-loaded { opacity: 1; }
.fdp_alb_more {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(18, 14, 24, .54);
backdrop-filter: blur(3px);
color: #fff;
font-size: 22px;
font-weight: 600;
pointer-events: none;
}
.fdp_ph {
cursor: zoom-in;
}
.fdp_ph img {
cursor: zoom-in;
}
/* =========================================================
Apple Glass Navigation Bar (Discreet, Neutral Gray / Black)
========================================================= */
/* Uniform, generous content clearance for bottom floating glass dock across ALL pages */
#home .hm-page,
#home #token.hm-page,
#home .js-hm-feed,
#home .js-hm-chats,
#home .js-hm-token,
#home .js-hm-tok,
#me,
#me .js2,
.scr--join .js2 {
padding-bottom: calc(88px + var(--bot, 0px)) !important;
box-sizing: border-box !important;
}
#home #token .pfoot,
.home-body .pfoot,
.pfoot {
margin-top: 36px !important;
padding-bottom: 0 !important;
}
#me {
display: block !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
height: 100% !important;
box-sizing: border-box !important;
}
#me .js2 {
display: block !important;
min-height: auto !important;
box-sizing: border-box !important;
}
#me .js2-end {
margin-top: 36px !important;
margin-bottom: 24px !important;
}
.toast {
bottom: calc(100px + var(--bot, 0px)) !important;
z-index: 95 !important;
}
/* Modals sit comfortably above the tab bar */
.sheet {
z-index: 100 !important;
}
/* ── Hand Drop: Official Post Presentation ── */
.fdp--drop {
border: 1px solid rgba(141, 75, 239, 0.18) !important;
background: linear-gradient(180deg, rgba(255, 253, 249, 1), rgba(250, 246, 255, 0.85)) !important;
box-shadow: 0 4px 20px -6px rgba(141, 75, 239, 0.10) !important;
}
.fdp--drop.is-claimed {
border-color: rgba(27, 24, 32, 0.08) !important;
background: var(--card) !important;
box-shadow: none !important;
}
.fdp_drop_stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 14px 0 6px;
gap: 10px;
}
.fdp_drop_emblem {
position: relative;
width: 68px;
height: 68px;
border-radius: 50%;
background: rgba(141, 75, 239, 0.09);
display: grid;
place-items: center;
cursor: pointer;
border: 0;
padding: 0;
transition: transform 0.22s cubic-bezier(.34, 1.4, .64, 1), background-color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.fdp_drop_emblem:active {
transform: scale(0.92);
}
.fdp_drop_emblem.is-done {
cursor: default;
opacity: 0.85;
}
.fdp_drop_emblem.is-done:active {
transform: none;
}
.fdp_drop_hand {
width: 48px;
height: 48px;
display: block;
transform-origin: 70% 85%;
animation: hiWave 2.2s ease-in-out infinite, handGlint 6s ease-in-out infinite;
}
.fdp_drop_glow {
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(141, 75, 239, 0.22), transparent 70%);
animation: breathe 2.4s ease-in-out infinite;
pointer-events: none;
}
.fdp_drop_emblem.is-done .fdp_drop_glow {
display: none;
}
.fdp_drop_info {
text-align: center;
}
.fdp_drop_tag {
font-size: 13px;
color: var(--mute);
line-height: 1.35;
}
.fdp_drop_tag b {
color: var(--ink);
font-weight: 600;
}
.fdp_drop_tag--done {
color: #1b1820;
font-weight: 600;
}
/* ── Fullscreen Deep Celebration Takeover (.drop-burst-overlay) ── */
.drop-burst-overlay {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity .35s cubic-bezier(.16, 1, .3, 1);
pointer-events: auto;
}
.drop-burst-overlay.is-active {
opacity: 1;
}
.drop-burst-backdrop {
position: absolute;
inset: 0;
background: rgba(18, 14, 24, 0.72);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
}
.drop-burst-cv {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.drop-burst-modal {
position: relative;
z-index: 2;
width: 100%;
max-width: 320px;
padding: 32px 24px 26px;
border-radius: 32px;
background: rgba(255, 253, 249, 0.95);
box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.35);
text-align: center;
transform: scale(0.85) translateY(18px);
transition: transform .42s cubic-bezier(.34, 1.4, .64, 1);
}
.drop-burst-overlay.is-active .drop-burst-modal {
transform: scale(1) translateY(0);
}
.drop-burst-hand-wrap {
position: relative;
width: 108px;
height: 108px;
margin: 0 auto 16px;
display: grid;
place-items: center;
}
.drop-burst-hand {
width: 88px;
height: 88px;
transform-origin: 70% 85%;
animation: hiWave 1.8s ease-in-out infinite, handGlint 4s ease-in-out infinite;
filter: drop-shadow(0 12px 24px rgba(141, 75, 239, 0.35));
}
.drop-burst-halo {
position: absolute;
inset: -14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(141, 75, 239, 0.28), rgba(236, 143, 220, 0.15) 50%, transparent 75%);
animation: breathe 2s ease-in-out infinite;
pointer-events: none;
}
.drop-burst-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
color: #8d4bef;
margin-bottom: 6px;
}
.drop-burst-title {
margin: 0;
font-size: 28px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--ink);
line-height: 1.2;
}
.drop-burst-desc {
margin: 8px auto 22px;
font-size: 14.5px;
color: var(--mute);
line-height: 1.4;
max-width: 260px;
}
.drop-burst-btn {
width: 100%;
height: 48px;
font-size: 16px;
font-weight: 600;
border-radius: 99px;
background: #1b1820 !important;
color: #fff !important;
transition: transform .2s var(--spring);
}
.drop-burst-btn:active {
transform: scale(0.94);
}
/* =========================================================
Tasks & Claim action stability (anti-jitter, zero CLS)
========================================================= */
.tasks:empty {
display: none !important;
}
.tasks li {
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
padding: 12px 14px 12px 16px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
box-sizing: border-box !important;
contain: layout size !important;
overflow: hidden !important;
}
.tasks .ic {
width: 38px !important;
height: 38px !important;
flex: none !important;
}
.tasks .t {
flex: 1 1 0% !important;
min-width: 0 !important;
overflow: hidden !important;
}
.tasks .t b,
.tasks .t small,
.vd-placeholder b,
.vd-placeholder small {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: block !important;
max-width: 100% !important;
}
.tasks .js-task,
.vd-action:not([hidden]),
.vd-btn {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
padding: 0 4px !important;
box-sizing: border-box !important;
flex: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
font-size: 12.5px !important;
gap: 4px !important;
line-height: 1 !important;
}
.tasks li.vd-placement,
.vd-placement,
.vd-frame {
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.tasks li.vd-placement {
padding: 0 14px 0 16px !important;
}
.vd-placeholder {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 0 114px 0 0 !important;
box-sizing: border-box !important;
pointer-events: none !important;
}
.vd-action {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.vd-placement .vd-el {
--adsgram-task-button-width: 100px !important;
}
.task-spin {
flex: none !important;
width: 12px !important;
height: 12px !important;
margin: 0 !important;
}
.task-sec {
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1 !important;
font-size: 12px !important;
}
.task-amount {
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1 !important;
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
}
/* =========================================================
Hard lock against horizontal scroll shift (anti-crooked)
========================================================= */
.scr--home,
#home {
overflow-x: hidden !important;
overflow-x: clip !important;
scroll-behavior: auto !important;
}
.hm-track {
overflow-x: hidden !important;
overflow-x: clip !important;
scroll-behavior: auto !important;
}
.hm-page {
overflow-x: hidden !important;
overflow-x: clip !important;
}
/* =========================================================
Apple-style Liquid Glass Tab Bar (Glass with Mirror Reflection)
========================================================= */
.apl-tabbar {
position: fixed !important;
left: 50% !important;
bottom: calc(16px + var(--bot, 0px)) !important;
transform: translate3d(-50%, 0, 0) !important;
width: calc(100% - 28px) !important;
max-width: 380px !important;
height: 60px !important;
border-radius: 30px !important;
box-sizing: border-box !important;
/* Crisp Luminous White Frosted Glass (Telegram Wallet style, never muddy grey on macOS!) */
background: rgba(255, 255, 255, 0.88) !important;
-webkit-backdrop-filter: blur(28px) saturate(190%) !important;
backdrop-filter: blur(28px) saturate(190%) !important;
border: 1px solid rgba(255, 255, 255, 0.85) !important;
box-shadow:
0 12px 36px -4px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.95) !important;
display: flex !important;
align-items: center !important;
justify-content: space-around !important;
padding: 0 6px !important;
z-index: 85 !important;
transition: transform .36s cubic-bezier(.16, 1, .3, 1), opacity .25s ease !important;
user-select: none !important;
-webkit-user-select: none !important;
will-change: transform, opacity !important;
}
.apl-tabbar[hidden] {
display: none !important;
}
.apl-tabbar.is-hidden {
opacity: 0 !important;
pointer-events: none !important;
transform: translate3d(-50%, 32px, 0) scale(0.95) !important;
}
.apl-tabbar.is-kbd {
opacity: 0 !important;
pointer-events: none !important;
transform: translate3d(-50%, 20px, 0) scale(0.96) !important;
}
/* Individual Tab Button - Resting directly on the glass */
.apl-tab {
flex: 1 !important;
height: 48px !important;
max-height: 48px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
border-radius: 20px !important;
color: #1c1c1e !important;
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
transition: background .2s ease, opacity .2s ease, transform .16s ease !important;
padding: 2px 4px !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
touch-action: manipulation !important;
z-index: 2 !important;
}
.apl-tab:not(.is-active) {
opacity: 0.65 !important;
}
.apl-tab:not(.is-active):hover {
opacity: 0.9 !important;
}
.apl-tab:active {
transform: scale(0.94) !important;
}
/* Active Tab: soft rounded pill background like Telegram Wallet */
.apl-tab.is-active {
opacity: 1 !important;
color: #000000 !important;
background: rgba(0, 0, 0, 0.055) !important;
}
.apl-tab_icon-box {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
height: 24px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.apl-tab_icon {
width: 22px !important;
height: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform .2s ease !important;
}
.apl-tab.is-active .apl-tab_icon {
transform: scale(1.05) !important;
}
/* Vector Icons (Monochrome custom brand vectors) */
.apl-tab_icon svg {
width: 100% !important;
height: 100% !important;
display: block !important;
color: inherit !important;
}
.apl-tab_label {
font-size: 10px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: -0.15px !important;
color: #1c1c1e !important;
margin-top: 3px !important;
transition: color .2s, font-weight .2s !important;
}
.apl-tab.is-active .apl-tab_label {
font-weight: 700 !important;
color: #000000 !important;
}
/* Chat unread badge on tab */
.apl-tab_badge {
position: absolute !important;
top: 1px !important;
right: 1px !important;
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #1c1c1e !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}
@media (prefers-color-scheme: dark) {
.apl-tab_badge {
background: #ffffff !important;
box-shadow: 0 0 0 2px rgba(28, 28, 30, 0.8) !important;
}
}
/* =========================================================
Profile Page (#me) Clean Layout & Uniform Bottom Clearance
========================================================= */
#me {
display: block !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
height: 100% !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
box-sizing: border-box !important;
}
#me .js2 {
display: flex !important;
flex-direction: column !important;
min-height: auto !important;
padding-top: calc(16px + var(--top, 0px)) !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: calc(88px + var(--bot, 0px)) !important;
box-sizing: border-box !important;
}
#me .js2-end {
margin-top: 32px !important;
padding-top: 0 !important;
padding-bottom: 8px !important;
}
/* =========================================================
Token Page & Ads Task Mutual Exclusivity (No Double Button)
========================================================= */
/* Action button: strictly hidden when [hidden] or when frame has no action */
.vd-action[hidden],
.vd-action.is-hidden,
.vd-frame:not(.has-action) .vd-action {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
z-index: -1 !important;
}
/* Action button: visible only when frame has .has-action and is not hidden */
.vd-frame.has-action .vd-action:not([hidden]) {
display: inline-flex !important;
visibility: visible !important;
pointer-events: auto !important;
opacity: 1 !important;
z-index: 12 !important;
}
/* While has-action is active, hide AdsGram component and its slotted buttons completely */
.vd-frame.has-action .vd-el,
.vd-frame.has-action adsgram-task,
.vd-frame.has-action .vd-btn {
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
z-index: -1 !important;
}
/* Placeholder rules: only visible when has-action and not hidden */
.vd-placeholder[hidden],
.vd-frame:not(.has-action) .vd-placeholder {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.vd-frame.has-action .vd-placeholder:not([hidden]) {
display: flex !important;
visibility: visible !important;
background: transparent !important;
z-index: 10 !important;
pointer-events: auto !important;
}
/* Ensure no rogue cards, frames, or borders on task list and partner placement */
.tasks--partners,
.tasks li.vd-placement,
.vd-placement,
.vd-frame,
.vd-placeholder {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* While has-action is NOT active, AdsGram element is visible and interactive */
.vd-frame:not(.has-action) .vd-el {
display: block !important;
visibility: visible !important;
pointer-events: auto !important;
opacity: 1 !important;
position: relative !important;
z-index: 2 !important;
}
/* Slotted button before custom element is defined */
adsgram-task:not(:defined) .vd-btn {
display: none !important;
}
/* Give Forms comfortable room to scroll cleanly right above the floating Apple glass menu */
#home #token.hm-page,
#home .js-hm-token {
padding-bottom: calc(88px + var(--bot, 0px)) !important;
}
#home #token .tok-body {
padding-bottom: 0 !important;
}
/* Anti-jitter & task row stabilization */
.tasks li,
.js-reels li {
min-height: 64px !important;
box-sizing: border-box !important;
}
.tasks .t {
min-width: 0 !important;
overflow: hidden !important;
}
.tasks .t b,
.tasks .t small {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.st-me.js-st-me-hdr {
cursor: pointer !important;
border-radius: 16px !important;
padding: 8px 10px !important;
margin: -8px -10px 12px !important;
transition: background .2s ease !important;
}
.st-me.js-st-me-hdr:active {
background: rgba(0, 0, 0, 0.04) !important;
}
@media (prefers-color-scheme: dark) {
.st-me.js-st-me-hdr:active {
background: rgba(255, 255, 255, 0.06) !important;
}
}
.st-me_un {
background: transparent !important;
border: none !important;
padding: 0 !important;
color: var(--mute) !important;
font-size: 13.5px !important;
cursor: pointer !important;
text-align: left !important;
display: block !important;
}
/* =========================================================
Profile Edit Screen (#me -> stProfileEdit)
========================================================= */
.st-edit-wrap {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
max-width: 420px;
margin: 0 auto;
box-sizing: border-box;
}
.st-edit-top {
margin-bottom: 2px;
}
.st-edit-avatar-box {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: var(--card);
border-radius: 20px;
box-shadow: 0 0 0 1px var(--line);
}
.st-edit-avatar-preview {
flex: none;
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.st-edit-avatar-preview img,
.st-edit-avatar-preview .face0 {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
font-size: 26px;
}
.st-edit-avatar-preview.is-busy {
opacity: 0.45;
filter: grayscale(0.5);
}
.st-edit-avatar-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1;
}
.st-edit-act-btn {
height: 32px !important;
padding: 0 13px !important;
font-size: 13px !important;
font-weight: 500 !important;
background: var(--soft-ink) !important;
color: var(--ink) !important;
box-shadow: none !important;
border-radius: 999px !important;
transition: transform 0.14s ease, opacity 0.14s ease !important;
}
.st-edit-act-btn:active {
transform: scale(0.95);
opacity: 0.75;
}
.st-edit-fields {
display: flex;
flex-direction: column;
gap: 16px;
}
.st-edit-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.st-edit-lbl {
font-size: 13px;
font-weight: 500;
color: var(--mute);
margin-left: 2px;
}
.st-edit-inp.js2-name {
width: 100% !important;
flex: none !important;
height: 48px !important;
border-radius: 999px !important;
padding: 0 18px !important;
font-size: 16px !important;
background: rgba(25, 21, 36, 0.045) !important;
border: 1.5px solid rgba(25, 21, 36, 0.08) !important;
box-sizing: border-box !important;
transition: border-color 0.18s ease, background 0.18s ease !important;
}
.st-edit-inp.js2-name:focus {
background: #ffffff !important;
border-color: rgba(124, 58, 237, 0.45) !important;
}
.st-edit-uname-wrap {
margin-top: 0 !important;
height: 48px !important;
box-sizing: border-box !important;
}
.st-edit-hint {
margin: 2px 0 0 4px;
font-size: 12px;
color: var(--mute);
line-height: 1.35;
}
.st-edit-foot {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 6px;
}
.st-edit-foot .js-st-save-btn {
width: 100% !important;
height: 48px !important;
border-radius: 999px !important;
font-size: 16px !important;
font-weight: 500 !important;
}
.st-edit-foot .js-st-cancel-btn {
margin: 0 auto !important;
padding: 6px 14px !important;
font-size: 13px !important;
color: var(--mute) !important;
}
@media (prefers-color-scheme: dark) {
.st-edit-avatar-box {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.st-edit-inp.js2-name {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
}
.st-edit-inp.js2-name:focus {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(168, 85, 247, 0.6) !important;
}
}
/* Settings value display */
.st-val {
color: var(--mute);
font-size: 14px;
margin-left: auto;
margin-right: 6px;
}
.st-set {
color: #7c3aed;
font-weight: 500;
}
/* 27.10 chats, testers only (chatglow.js): the background lights up with the talk */
.cg-l { position: absolute; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
background: linear-gradient(120deg, #ec8fdc, #9461f0, #7fa8ff, #ffb98f, #ec8fdc) 0 0 / 300% 300%;
-webkit-mask: url(./img/chat-glyphs-glow.svg?v=2) 0 0 / 420px 420px repeat; mask: url(./img/chat-glyphs-glow.svg?v=2) 0 0 / 420px 420px repeat;
animation: cgMove 30s linear infinite; }
@keyframes cgMove { to { background-position: 300% 0; } }
.cg-on .scr--chat .msgs { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .cg-l { animation: none; } }
/* 27.10 the testers' new home (v2.js): the money in dollars first, the day plan, a hot post now and then */
.is-v2 .js-hm-tok .bal_coin, .is-v2 .js-hm-tok .bal_n { display: none; }
.v2-hero { padding: 6px 0 4px; }
.v2-hero small { display: block; color: var(--mute); font-size: 13px; margin-bottom: 8px; }
.v2-hero b { display: block; font-size: 46px; font-weight: 300; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.v2-hero > div { margin-top: 10px; font-size: 14px; }
.v2-chg { font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; }
.v2-chg.is-up { color: #31B545; }
.v2-chg.is-dn { color: #E5484D; }
.v2-chg_t { color: var(--mute); margin-left: 6px; }
.v2-ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.v2-plan { margin: 0 0 8px; padding: 14px 16px; border-radius: var(--r); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.v2-plan_t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.v2-plan_t b { font-weight: 500; font-size: 15px; }
.v2-plan_t span { font-weight: 500; font-size: 15px; white-space: nowrap; }
.v2-plan_bar { height: 6px; margin: 12px 0 8px; border-radius: 99px; background: rgba(27, 24, 32, .07); overflow: hidden; }
.v2-plan_bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink); transition: width .6s var(--soft); }
.v2-plan small { color: var(--mute); font-size: 13px; }
.v2-hot { margin: 26px 0 0; padding: 14px 16px; border-radius: var(--r); background: var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; animation: bubIn .5s var(--soft) both; }
.v2-hot:active { transform: scale(.98); }
.v2-hot_h { display: flex; justify-content: space-between; align-items: center; color: var(--mute); font-size: 13px; margin-bottom: 10px; }
.v2-hot_x { width: 26px; height: 26px; margin: -6px -6px -6px 0; border-radius: 50%; color: var(--mute); font-size: 18px; line-height: 1; }
.v2-hot_b { display: flex; gap: 10px; align-items: flex-start; }
.v2-hot_b .v2-hot_f { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.v2-hot_b .v2-hot_f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-hot_b b { font-weight: 500; font-size: 15px; }
.v2-hot_b p { margin: 2px 0 0; font-size: 15px; line-height: 1.38; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.v2-hot_n { margin-top: 10px; font-size: 13px; color: var(--mute); }
/* 27.10 v2, pass 2: no bottom menu; the change in a pill (7 days / 24 hours); a gift pill; the ad plan starts the video */
.is-v2 .apl-tabbar { display: none !important; }
.is-v2 .js-hm-tok .inv, .is-v2 .js-reels, .is-v2 .js-reels-h { display: none !important; }
.v2-day { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(27, 24, 32, .05); font-size: 13px; }
.v2-day:active { transform: scale(.96); }
.v2-day .v2-chg_t { margin-left: 0; }
.v2-gift { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; margin-right: 8px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
.v2-gift[hidden] { display: none; }
.v2-gift svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-gift.is-pop { animation: v2Pop .7s var(--spring) both; }
.v2-gift:active { transform: scale(.92); }
@keyframes v2Pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.is-v2 .top .v2-gift:not([hidden]) ~ .hcount { margin-left: 0 !important; }
.v2-plan { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.v2-plan[hidden] { display: none; }
.v2-plan_r { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; }
.v2-plan_ic { flex: none; width: 40px; height: 40px; }
.v2-plan_m { flex: 1; min-width: 0; }
.v2-plan_bar { margin: 9px 0 7px; }
.v2-plan_go { flex: none; }
.v2-plan_go[hidden] { display: none; }
.v2-prog { position: relative; margin: 4px 0 18px; padding: 18px 18px 16px; border-radius: var(--r); background: var(--card); box-shadow: 0 0 0 1px var(--line); text-align: left; }
.v2-prog_i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(141, 75, 239, .08); color: var(--purple); margin-bottom: 10px; }
.v2-prog_i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-prog h3 { margin: 0 0 10px; font-size: 18px; font-weight: 500; }
.v2-prog ol { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 12px; }
.v2-prog li { position: relative; padding-left: 34px; counter-increment: st; }
.v2-prog li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; }
.v2-prog li b { display: block; font-weight: 500; font-size: 15px; }
.v2-prog li span { display: block; color: var(--mute); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.v2-prog > small { display: block; margin-top: 14px; color: var(--mute); font-size: 12px; }
.is-v2 .js-ivp-sub { display: none; }
/* 27.10 v2, pass 3: the balance is the inner layer, the rest is a sheet that rides up over it */
.is-v2 .js-hm-tok .bal { position: sticky; top: 0; z-index: 0; background: transparent; box-shadow: none; transform-origin: 50% 0; will-change: opacity, transform; }
.is-v2 .js-hm-tok .bal::before, .is-v2 .js-hm-tok .bal::after { display: none; }
.v2-sheet { position: relative; z-index: 1; margin: 22px -16px 0; padding: 8px 16px calc(28px + var(--bot, 0px)); min-height: 100%; border-radius: 30px 30px 0 0; background: var(--bg); box-shadow: 0 -1px 0 var(--line), 0 -18px 40px -24px rgba(27, 24, 32, .25); }
.v2-sheet::before { content: ''; display: block; width: 38px; height: 5px; margin: 0 auto 4px; border-radius: 99px; background: rgba(27, 24, 32, .12); }
.is-v2 .js-hm-tok .tok-body { padding-bottom: 0; }
/* withdraw and the chart button are not for this home; the token pill opens the chart */
.is-v2 .js-hm-tok .js-withdraw, .is-v2 .js-hm-tok .bal_act .chart-btn { display: none !important; }
.v2-swap { display: inline-flex; align-items: center; gap: 5px; }
.v2-swap .v2-ic { width: 16px; height: 16px; vertical-align: 0; }
.v2-swap_ar { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the gift slides in from the right edge with its words, then folds into a round pill */
.v2-gift { width: auto; min-width: 36px; padding: 0 9px; gap: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.v2-gift_t { max-width: 0; opacity: 0; font-size: 14px; font-weight: 500; transition: max-width .6s var(--soft), opacity .4s ease, margin .6s var(--soft); }
.v2-gift.is-open .v2-gift_t { max-width: 140px; opacity: 1; margin-left: 7px; }
.v2-gift.is-in { animation: v2In .9s var(--soft) both; }
@keyframes v2In { 0% { transform: translateX(120vw); } 100% { transform: none; } }
.v2-gift svg { flex: none; }
/* 27.10 v2: the level row at the top of the sheet; the Tasks plan sits above the task itself */
.v2-lv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 2px 4px; }
.v2-lv[hidden] { display: none; }
.v2-lv b { font-weight: 500; font-size: 14px; }
.v2-lv_bar { flex: 1; min-width: 80px; height: 5px; border-radius: 99px; background: rgba(27, 24, 32, .07); overflow: hidden; }
.v2-lv_bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--purple); transition: width .6s var(--soft); }
.v2-lv small { width: 100%; color: var(--mute); font-size: 12px; }
.v2-plan--t { cursor: default; }
/* 27.10 v2, pass 5: the header stays with the balance; avatar only; the gift floats; your page */
.is-v2 #home:has(.js-hm-track.is-token) > .top { transform: none !important; }
.is-v2 .scr--home .top .me_n { display: none; }
.is-v2 .scr--home .top .me { padding: 0; }
.is-v2 .scr--home .top { position: relative; }
.v2-gift { position: absolute; right: 16px; top: 0; z-index: 30; margin: 0 !important; height: 36px; padding: 0 12px; border-radius: 99px; box-shadow: 0 0 0 1px var(--line), 0 8px 22px -10px rgba(27, 24, 32, .3);
transform: translateX(calc(100% + 32px)); opacity: 0; transition: transform .8s var(--soft), opacity .5s ease, right .7s var(--soft), padding .6s var(--soft); animation: none !important; }
.v2-gift.is-in { transform: none; opacity: 1; }
.v2-gift.is-dock { right: var(--dock, 160px); padding: 0 9px; }
.v2-pf { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.v2-pf_back, .v2-pf_set { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.v2-pf_back svg, .v2-pf_set svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-pf_back:active, .v2-pf_set:active { transform: scale(.92); }
.v2-pf_f { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: rgba(27, 24, 32, .06); }
.v2-pf_f > *, .v2-pf_f img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.v2-pf_t { flex: 1; min-width: 0; }
.v2-pf_t > b { display: block; font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-pf_t small { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }
.v2-seg { display: flex; gap: 4px; padding: 4px; margin: 12px 0 10px; border-radius: 99px; background: rgba(27, 24, 32, .05); }
.v2-seg button { flex: 1; height: 34px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--mute); transition: background .3s, color .3s; }
.v2-seg button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(27, 24, 32, .1); }
.v2-mine .js-fd-list .fdp:not(.is-mine) { display: none; }
.v2-mine-empty[hidden] { display: none; }
/* 27.10 fix: the balance starts at the very top of the page, so sticking never moves it */
.is-v2 .js-hm-tok .tok-body { padding-top: 0 !important; }
.is-v2 .js-hm-tok .bal { top: 0 !important; padding-top: 40px; } /* 27.10: the header already holds the Telegram inset; counting it here again left a gap */
/* 27.10 the level is a reward people see: on your avatar, on your page, next to your name on posts */
.is-v2 .scr--home .top .me { position: relative; overflow: visible; }
.v2-avlv { position: absolute; right: -4px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff; box-shadow: 0 0 0 2px var(--bg);
background: linear-gradient(120deg, #ec8fdc, #9461f0, #7fa8ff, #ffb98f, #ec8fdc) 0 0 / 300% 100%; animation: lvMove 9s linear infinite; }
.v2-avlv[hidden] { display: none; }
@keyframes lvMove { to { background-position: 300% 0; } }
.v2-pf_lv { display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; height: 28px; padding: 0 12px; border-radius: 99px; background: rgba(141, 75, 239, .08); color: var(--ink); font-size: 13px; }
.v2-pf_lv[hidden] { display: none; }
.v2-pf_lv:active { transform: scale(.96); }
.v2-pf_lv b { font-weight: 600; }
.v2-pf_lvbar { display: block; width: 46px; height: 4px; border-radius: 99px; background: rgba(27, 24, 32, .1); overflow: hidden; }
.v2-pf_lvbar i { display: block; height: 100%; width: 0; background: var(--purple); border-radius: inherit; }
.v2-lvb { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 99px; vertical-align: 1px;
font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff;
background: linear-gradient(120deg, #ec8fdc, #9461f0, #7fa8ff, #ffb98f, #ec8fdc) 0 0 / 300% 100%; animation: lvMove 9s linear infinite; }
.v2-lvs { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; background: rgba(27, 24, 32, 0); transition: background .35s ease; }
.v2-lvs[hidden] { display: none; }
.v2-lvs.is-on { background: rgba(27, 24, 32, .32); }
.v2-lvs_card { width: 100%; padding: 26px 22px calc(22px + var(--bot, 0px)); border-radius: 28px 28px 0 0; background: var(--card); transform: translateY(100%); transition: transform .45s var(--soft); text-align: center; }
.v2-lvs.is-on .v2-lvs_card { transform: none; }
.v2-lvs_n small { display: block; color: var(--mute); font-size: 13px; }
.v2-lvs_n b { display: block; font-size: 64px; font-weight: 300; line-height: 1.05; letter-spacing: -.03em;
background: linear-gradient(120deg, #ec8fdc, #9461f0, #7fa8ff, #ffb98f, #ec8fdc) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lvMove 9s linear infinite; }
.v2-lvs_bar { height: 6px; margin: 14px auto 8px; max-width: 260px; border-radius: 99px; background: rgba(27, 24, 32, .07); overflow: hidden; }
.v2-lvs_bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--purple); transition: width .7s var(--soft); }
.v2-lvs_s { color: var(--mute); font-size: 14px; margin: 0 0 18px; }
.v2-lvs h4 { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--mute); text-align: left; }
.v2-lvs_l { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; border-radius: 18px; background: rgba(27, 24, 32, .035); }
.v2-lvs_l li { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 15px; }
.v2-lvs_l li + li { border-top: 1px solid var(--line); }
.v2-lvs_l li[hidden] { display: none; }
.v2-lvs_l b { font-weight: 500; }
.v2-lvs_f { color: var(--mute); font-size: 13px; margin: 0 0 16px; }
.v2-lvs_ok { width: 100%; height: 48px; }
@media (prefers-reduced-motion: reduce) { .v2-avlv, .v2-lvb, .v2-lvs_n b { animation: none; } }
/* ── stage 3 (27.10): a person's page, the follow sheet, your price, posts for followers ── */
.v2-ring { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; padding: 3px; box-sizing: border-box; background: conic-gradient(#7fa8ff, #9461f0, #ec8fdc, #ffb98f, #7fa8ff); }
.v2-ring--m { width: 72px; height: 72px; margin: 0 auto; }
.v2-ring_in { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--card); box-sizing: border-box; overflow: hidden; background: rgba(27, 24, 32, .06); }
.v2-ring_in > *, .v2-ring_in img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 50%; }
.v2-ring_lv { position: absolute; right: -4px; bottom: 0; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 99px; background: var(--ink); color: #fff; font: 600 13px/22px inherit; font-style: normal; text-align: center; border: 2px solid var(--bg); }
.v2-hn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.v2-st { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 14px; color: var(--mute); }
.v2-st b { color: var(--ink); font-weight: 600; }
.v2-price { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; margin: 0 0 14px; border-radius: 99px; background: rgba(27, 24, 32, .05); color: var(--mute); font-size: 13px; }
.v2-price b { color: var(--ink); font-weight: 600; }
.v2-price:active, .v2-ff:active { transform: scale(.96); }
.v2-ff { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; margin: 8px 0 0; border-radius: 99px; background: rgba(27, 24, 32, .05); color: var(--mute); font-size: 13px; transition: background .25s, color .25s; }
.v2-ff svg, .fdp_lock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-ff.is-on { background: var(--ink); color: #fff; }
.fdp_lock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 96px; margin-top: 8px; border-radius: 16px; background: repeating-linear-gradient(135deg, #e9e3ef 0 10px, #efe9f4 10px 20px); color: var(--ink); font-size: 14px; font-weight: 500; }
.fdp_lock svg { width: 22px; height: 22px; }
.fdp_lock:active { transform: scale(.98); }
.v2-pp { position: fixed; inset: 0; z-index: 180; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.v2-pp.is-in { transform: none; }
.v2-pp_top { position: sticky; top: 0; z-index: 2; display: flex; padding: calc(8px + var(--top)) 12px 4px; background: var(--bg); }
.v2-pp_body { padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.v2-pp_h { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.v2-pp_t { min-width: 0; }
.v2-pp_t b { display: block; font-size: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-pp_t small { display: block; margin-top: 2px; color: var(--mute); font-size: 14px; }
.v2-pp_act { display: flex; gap: 8px; }
.v2-pp_go, .v2-fs_go { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 500; }
.v2-pp_alt { flex: none; height: 48px; padding: 0 20px; border-radius: 99px; background: var(--card); box-shadow: 0 0 0 1px rgba(27, 24, 32, .1); color: var(--ink); font-size: 15px; font-weight: 500; }
.v2-pp_go:active, .v2-pp_alt:active, .v2-fs_go:active { transform: scale(.97); }
.v2-pp_go .v2-ic, .v2-fs_go .v2-ic { filter: brightness(0) invert(1); }
.v2-pp_note { margin: 8px 0 16px; color: var(--mute); font-size: 13px; line-height: 1.4; }
.v2-pp_wait { color: var(--mute); font-size: 14px; }
.v2-pp_list .fdp { margin-bottom: 10px; }
.v2-fs { position: fixed; inset: 0; z-index: 210; }
.v2-fs_bg { position: absolute; inset: 0; background: rgba(27, 24, 32, 0); transition: background .3s; }
.v2-fs.is-in .v2-fs_bg { background: rgba(27, 24, 32, .32); }
.v2-fs_card { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--card); text-align: center; transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.v2-fs.is-in .v2-fs_card { transform: none; }
.v2-fs_grip { display: block; width: 38px; height: 5px; margin: 0 auto 16px; border-radius: 99px; background: rgba(27, 24, 32, .12); }
.v2-fs_card h3 { margin: 12px 0 0; font-size: 20px; font-weight: 600; }
.v2-fs_card p { margin: 6px auto 0; max-width: 300px; color: var(--mute); font-size: 15px; line-height: 1.4; }
.v2-fs_rows { margin: 16px 0 0; border-radius: 18px; background: rgba(27, 24, 32, .035); text-align: left; }
.v2-fs_rows > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; font-size: 15px; }
.v2-fs_rows > div + div { border-top: 1px solid rgba(27, 24, 32, .07); }
.v2-fs_rows .v2-hn { font-weight: 500; }
.v2-fs_go { width: 100%; margin-top: 16px; }
.v2-fs_go:disabled { opacity: .5; }
.v2-fs_no { display: block; margin: 6px auto 0; height: 40px; padding: 0 16px; color: var(--mute); font-size: 14px; }
.v2-step { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 0; }
.v2-step button { width: 44px; height: 44px; border-radius: 50%; background: rgba(27, 24, 32, .06); font-size: 22px; color: var(--ink); }
.v2-step b { min-width: 70px; font-size: 22px; font-weight: 600; display: flex; justify-content: center; }
.v2-step b .v2-ic { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .v2-pp, .v2-fs_card, .v2-fs_bg { transition: none; } }
.v2-price, .v2-ff { width: max-content; max-width: 100%; align-self: flex-start; }
/* 27.10: while the gift shows its words it would sit over the Hellos pill: the pill steps aside, then comes back when the gift folds */
.is-v2 .scr--home .top .hcount { transition: opacity .35s ease; }
.is-v2 .scr--home .top:has(.v2-gift.is-open.is-in) .hcount { opacity: 0; }
/* 27.10 (owner): the gift slides out from behind the token pill, then folds left of the Hellos */
.is-v2 .scr--home .top .tok-btn { position: relative; z-index: 31; }
.v2-gift { right: var(--from, 16px); }
.v2-gift.is-in.is-open { right: var(--open, 120px); }
.v2-gift:not(.is-in) { transform: none; opacity: 0; }
/* the token pill: tokens, then dollars */
.is-v2 .tok-btn { position: relative; overflow: hidden; }
.is-v2 .tok-btn > b, .is-v2 .tok-btn > img { transition: opacity .35s ease, transform .35s ease; }
.v2-tusd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 15px; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.is-v2 .tok-btn.is-usd > b, .is-v2 .tok-btn.is-usd > img { opacity: 0; transform: translateY(-8px); }
.is-v2 .tok-btn.is-usd .v2-tusd { opacity: 1; transform: none; }
/* your page: no header with the pills, just your page */
.is-v2 #home:has(.js-hm-track.is-feed):has(.js-hm-feed.v2-open) > .top { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.is-v2 #home:has(.js-hm-track.is-feed):has(.js-hm-feed.v2-open) .js-hm-feed { padding-top: calc(10px + var(--top, 0px)); }
@media (prefers-reduced-motion: reduce) { .v2-tusd, .is-v2 .tok-btn > b, .is-v2 .tok-btn > img { transition: none; } }
/* 27.10 (owner): the day plans are rows like every other task, no white frame */
.is-v2 .v2-plan { margin: 0; padding: 12px 14px 12px 16px; border-radius: 0; background: transparent; box-shadow: none; }
.is-v2 .v2-plan--t { cursor: pointer; }
/* the task plan is the "Open the ad" task: its one-time row is not shown twice */
/* 27.10: the plain "Open the ad" row is the plan's step when there is no AdsGram widget */
/* the AdsGram widget is the plan's step: one block, the plan on top, the widget under it */
.is-v2 .v2-plan--t.is-head { padding-bottom: 2px; cursor: default; }
.is-v2 .v2-plan--t.is-head .v2-plan_go { display: none; }
/* 27.10 the ad task sits under the plan text, as its step, with air above it */
/* 27.10 (owner): when the ad is an AdsGram task, the plan is a heading: no icon of its own (the task row has the partner's logo),
the bar and the count full width; the task row sits right under it at full width, like every other row */
.is-v2 .v2-plan--t.is-head .v2-plan_ic { display: none; }
.is-v2 .v2-plan--t.is-head { padding: 14px 14px 2px 16px; }
.is-v2 .v2-plan--t.is-head .v2-plan_r { gap: 0; }
.is-v2 .v2-sheet:has(.js-v2-tplan.is-head:not([hidden])) .js-partners li.vd-placement { margin: 4px 0 8px !important; }
.is-v2 .v2-sheet:has(.js-tasks:empty) .v2-ph { display: none; }
/* 27.10 (owner): one style of digits everywhere, the same as the balance */
/* 27.10 (owner): no slashed zero; BDO Grotesk draws it in its tabular digits, so digits stay proportional everywhere */
html, html *, html *::before, html *::after { font-variant-numeric: normal !important; }
/* 27.10 Settings → Language: the chosen one has a check instead of the arrow */
.st-lang_r::after { content: ''; }
.st-lang_r.is-on::after { content: '✓'; color: var(--ink); font-size: 17px; opacity: 1; }
/* 27.10 (owner): the exchange countdown opens from the Exchange button, not on the balance screen */
.is-v2 .js-hm-tok .bal_launch { display: none !important; }
.msheet-body .cd { margin: 4px 0 14px; }
/* no empty screen under the last row; the sheet still covers a short page */
.is-v2 .v2-sheet { min-height: 70vh; }
/* the top row fades with the balance and stops taking taps once the sheet is over it */
.is-v2 #home:has(.js-hm-track.is-token) > .top { opacity: var(--tok-top, 1); }
.is-v2 #home.is-tok-up:has(.js-hm-track.is-token) > .top { pointer-events: none; }
/* 27.10 the partner's logo in the plan row; the ad row under it drops its own icon so the title has room */
/* 27.10 (owner): the balance digits a little denser, the change too */
.is-v2 .v2-hero b { font-weight: 370; }
.is-v2 .v2-chg { font-weight: 540; }
/* the sheet runs to the bottom edge: the page's own bottom padding goes into the sheet */
.is-v2 #home #token.hm-page { padding-bottom: 0 !important; }
.is-v2 .v2-sheet { padding-bottom: calc(40px + var(--bot, 0px)); }
/* 27.10 (owner): behind the balance, a soft chameleon wash that slowly moves, only round the edges and mostly at the
bottom; the middle stays clear. Two layers drift and trade places; no hue filter, so only our four colours show */
.is-v2 .js-hm-tok .bal { isolation: isolate; }
.v2-aura { position: absolute; left: -40px; right: -40px; top: -150px; height: 610px; z-index: -1; pointer-events: none; filter: blur(26px);
-webkit-mask-image: radial-gradient(62% 52% at 50% 44%, transparent 45%, #000 85%); mask-image: radial-gradient(62% 52% at 50% 44%, transparent 45%, #000 85%); }
.v2-aura::before, .v2-aura::after { content: ''; position: absolute; inset: 0; will-change: transform, opacity; }
.v2-aura::before { background: radial-gradient(30% 26% at 14% 86%, rgba(236, 143, 220, .6), transparent 72%), radial-gradient(34% 24% at 56% 96%, rgba(148, 97, 240, .5), transparent 72%), radial-gradient(26% 30% at 92% 70%, rgba(127, 168, 255, .55), transparent 72%), radial-gradient(22% 20% at 6% 34%, rgba(255, 185, 143, .35), transparent 72%);
animation: v2-aura-a 11s ease-in-out infinite alternate; }
.v2-aura::after { background: radial-gradient(30% 26% at 84% 90%, rgba(255, 185, 143, .55), transparent 72%), radial-gradient(32% 24% at 34% 94%, rgba(127, 168, 255, .48), transparent 72%), radial-gradient(24% 28% at 6% 64%, rgba(148, 97, 240, .45), transparent 72%), radial-gradient(22% 20% at 96% 30%, rgba(236, 143, 220, .32), transparent 72%);
animation: v2-aura-b 14s ease-in-out infinite alternate; }
@keyframes v2-aura-a { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(28px, -14px) scale(1.08); opacity: .5; } }
@keyframes v2-aura-b { 0% { transform: translate(0, 0) scale(1.06); opacity: .45; } 100% { transform: translate(-26px, -10px) scale(1); opacity: 1; } }
.is-lite .v2-aura::before, .is-lite .v2-aura::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .v2-aura::before, .v2-aura::after { animation: none; } }
/* the sheet is white paper lifted over the wash, not the same colour as the balance */
.is-v2 .v2-sheet { background: #fffdf9; box-shadow: 0 -1px 0 rgba(27, 24, 32, .05), 0 -22px 44px -28px rgba(74, 31, 168, .42); }
/* Post + lock (owner, 2026-10-27): one button with a lock tail; the lock snaps shut for followers-only */
.is-v2 .hfc_row .pill.v2-go { border-radius: 18px 6px 6px 18px !important; padding: 0 15px 0 18px; }
.v2-lk { position: relative; flex: none; width: 40px; height: 36px; margin-left: -7px; border-radius: 6px 18px 18px 6px; background: rgba(27, 24, 32, .07); color: var(--ink); display: grid; place-items: center; transition: background .25s, color .25s; -webkit-tap-highlight-color: transparent; }
.v2-lk svg { width: 18px; height: 18px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-lk_s { transform-box: view-box; transform-origin: 8.5px 11px; transform: translateY(-2.2px) rotate(-16deg); transition: transform .42s cubic-bezier(.3, 1.7, .5, 1); }
.v2-lk.is-on { background: var(--ink); color: #fff; }
.v2-lk.is-on .v2-lk_s { transform: none; }
.v2-lk.is-snap svg { animation: v2-lk-snap .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes v2-lk-snap { 0% { transform: scale(1); } 35% { transform: scale(.86) translateY(1px); } 100% { transform: scale(1); } }
.v2-lk_tip { position: absolute; right: -2px; bottom: calc(100% + 7px); padding: 4px 9px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(5px) scale(.94); transform-origin: right bottom; transition: opacity .22s, transform .32s cubic-bezier(.3, 1.5, .5, 1); z-index: 5; }
.v2-lk_tip.is-in { opacity: 1; transform: none; }
.v2-lk_tip.is-all { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(27, 24, 32, .08), 0 4px 12px rgba(27, 24, 32, .1); }
.is-lite .v2-lk_s, .is-lite .v2-lk_tip { transition: none; }
.is-lite .v2-lk.is-snap svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .v2-lk_s, .v2-lk_tip { transition: none; } .v2-lk.is-snap svg { animation: none; } }
/* Stage (owner, 2026-10-27): your page and a person's page, face in the centre, three even numbers */
.is-v2 .v2-pf { position: relative; display: block; text-align: center; margin: 0 0 18px; padding-top: 6px; }
.is-v2 .v2-pf_back, .is-v2 .v2-pf_set { position: absolute; top: 0; }
.is-v2 .v2-pf_back { left: -6px; }
.is-v2 .v2-pf_set { right: -6px; }
.v2-pf_av { position: relative; display: block; width: 112px; height: 112px; margin: 0 auto; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.v2-pf_av:active { transform: scale(.97); }
.v2-pf_ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 3; }
.v2-pf_ring circle:first-child { stroke: rgba(27, 24, 32, .08); }
.v2-pf_ring circle + circle { stroke: var(--ink); stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2, .8, .3, 1); }
.is-v2 .v2-pf_av .v2-pf_f { position: absolute; inset: 9px; width: auto; height: auto; }
.v2-pf_lvn { position: absolute; right: 2px; bottom: 4px; min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 99px; background: var(--ink); color: #fff; font: 600 12px/24px inherit; font-style: normal; box-shadow: 0 0 0 3px var(--bg); }
.v2-pf_lvn[hidden] { display: none; }
.is-v2 .v2-pf_t { margin-top: 14px; }
.is-v2 .v2-pf_t > b { font-size: 26px; font-weight: 540; letter-spacing: -.02em; }
.is-v2 .v2-pf_t small { font-size: 15px; }
.is-v2 .v2-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 18px; text-align: center; font-size: 12.5px; }
.is-v2 .v2-st > span + span { border-left: 1px solid var(--line); }
.is-v2 .v2-st b { display: block; margin-bottom: 2px; font-size: 20px; font-weight: 540; letter-spacing: -.02em; }
.is-v2 .v2-price { display: flex; width: 100%; max-width: none; justify-content: center; height: 44px; margin: 0 0 16px; background: var(--ink); color: rgba(255, 255, 255, .75); font-size: 15px; }
.is-v2 .v2-price b { color: #fff; }
.is-v2 .v2-price .v2-ic { filter: brightness(0) invert(1); }
.is-v2 .v2-pp_h { flex-direction: column; gap: 0; text-align: center; margin: 0 0 18px; }
.is-v2 .v2-pp_h .v2-ring { width: 112px; height: 112px; }
.is-v2 .v2-pp_t { margin-top: 14px; max-width: 100%; }
.is-v2 .v2-pp_t b { font-size: 26px; font-weight: 540; letter-spacing: -.02em; }
.is-v2 .v2-swap { justify-content: center; padding: 0 18px; }
.is-v2 .v2-swap_ar { width: 19px; height: 19px; stroke-width: 1.9; }
/* @ list in colour (owner, 2026-10-27): clear colour, kept soft so the eye stays on the text */
.cx_tag img { filter: saturate(.8) brightness(1.04); opacity: .9; }
.cx_tag--u img.cx_tag_f, .cx_tag--u .cx_tag_f img { filter: saturate(.85); opacity: 1; }
.cx_tag--u .face0.cx_tag_f, .cx_tag--u .cx_tag_f .face0 { color: rgba(27, 24, 32, .55); font-weight: 500; }
.cx_tag--u:nth-child(4n+1) .face0 { background: #f3dcef; }
.cx_tag--u:nth-child(4n+2) .face0 { background: #e2d9fb; }
.cx_tag--u:nth-child(4n+3) .face0 { background: #d9e6fd; }
.cx_tag--u:nth-child(4n) .face0 { background: #fde6d9; }
/* the task plan's step keeps one height whether the ad is there or not (owner, 2026-10-27: "it drops down") */
.is-v2 .v2-tstep { display: none; align-items: center; gap: 12px; height: 64px; margin: 4px 0 8px; padding: 0 14px 0 16px; box-sizing: border-box; }
.is-v2 .v2-sheet:has(.js-v2-tplan:not([hidden])):has(.js-partners li.vd-placement.is-away) .v2-tstep { display: flex; }
.v2-tstep img { flex: none; width: 38px; height: 38px; opacity: .45; filter: grayscale(1); }
.v2-tstep b { display: block; font-size: 15px; font-weight: 500; color: var(--mute); }
.v2-tstep small { display: block; margin-top: 2px; font-size: 13px; color: var(--mute); opacity: .8; }
/* composer tools (owner, 2026-10-27): the open tool is lit and carries a small ×, a second tap closes it */
.hfc .cx_b.is-on:not(.js-cx-photo), .fdc .cx_b.is-on:not(.js-cx-photo) { position: relative; background: var(--ink); color: #fff; }
.hfc .cx_b.is-on:not(.js-cx-photo)::after, .fdc .cx_b.is-on:not(.js-cx-photo)::after { content: ''; position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' stroke='%231b1820' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat; box-shadow: 0 0 0 1px rgba(27, 24, 32, .12); }
.cx_pl { background: rgba(27, 24, 32, .03); box-shadow: 0 0 0 1px var(--line); } /* 28.10 (owner): no brand colour on the poll */
.cx_plh { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 4px; }
.cx_plh b { font-size: 14px; font-weight: 600; }
.cx_plh .cx_x { position: static; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(27, 24, 32, .07); }
.cx_plh .xic { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.cx_po { background: #fff; }
/* Settings, variant A (owner, 2026-10-27): you on one card, then groups as white cards, an icon per row */
.st-ic { display: none; }
.is-v2 .st-me.js-st-me-hdr { margin: 0 0 6px !important; padding: 14px !important; border-radius: 22px !important; background: var(--card); box-shadow: 0 1px 0 rgba(27, 24, 32, .04); }
.is-v2 .st-h { margin: 18px 6px 8px; }
.is-v2 .st-card { border-radius: 22px; background: var(--card); overflow: hidden; box-shadow: 0 1px 0 rgba(27, 24, 32, .04); }
.is-v2 .st-card .st-row { justify-content: flex-start; min-height: 52px; padding: 0 14px; box-sizing: border-box; font-size: 15.5px; }
.is-v2 .st-card .st-row + .st-row { border-top: 1px solid rgba(27, 24, 32, .06); }
.is-v2 .st-card .st-row::after { margin-left: auto; }
.is-v2 .st-card .st-row:has(.st-val)::after { margin-left: 8px; }
.is-v2 .st-card .st-row:active { opacity: 1; background: rgba(27, 24, 32, .04); }
.is-v2 .st-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(27, 24, 32, .06); font-style: normal; }
.is-v2 .st-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 27.10 (owner): the gift sits in the right corner past the tokens; it opens its words over the token pill, then folds back */
/* the same 8 px between the Hellos pill, the token pill and the gift */
.is-v2 .scr--home .top .tok-btn { margin-left: 0 !important; }
.is-v2 .scr--home .top.has-gift .tok-btn { margin-right: 44px; }
.v2-gift, .v2-gift.is-dock, .v2-gift.is-in.is-open { right: var(--corner, 16px); z-index: 33; }
.v2-gift.is-open { padding: 0 11px; }
.v2-gift.is-open .v2-gift_t { font-size: 13.5px; }
.is-v2 .scr--home .top:has(.v2-gift.is-open.is-in) .hcount { opacity: 1; }
.is-v2 .scr--home .top .tok-btn { transition: opacity .35s ease; }
.is-v2 .scr--home .top:has(.v2-gift.is-open.is-in) .tok-btn { opacity: 0; }
.v2-avlv { display: none !important; }
/* the face glows when something new waits (instead of a number) */
.is-v2 .scr--home .top .me { border-radius: 50%; transition: box-shadow .5s ease; }
.is-v2 .scr--home .top .me.v2-new { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(148, 97, 240, .55), 0 0 16px 2px rgba(236, 143, 220, .45); animation: v2-new 2.8s ease-in-out infinite; }
@keyframes v2-new { 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(127, 168, 255, .55), 0 0 18px 3px rgba(148, 97, 240, .4); } }
.is-lite .scr--home .top .me.v2-new { animation: none; }
@media (prefers-reduced-motion: reduce) { .is-v2 .scr--home .top .me.v2-new { animation: none; } }
/* level variant 3 (owner, 2026-10-27): chameleon ring, a "Level N" chip under the face */
.v2-pf_ring circle + circle { stroke: url(#v2pfg); stroke-width: 4; }
.v2-pf_ring circle:first-child { stroke-width: 4; }
.is-v2 .v2-pf_lvn { right: auto; left: 50%; bottom: -12px; transform: translateX(-50%); height: 26px; padding: 0 11px; font-size: 13px; font-weight: 600; line-height: 26px; white-space: nowrap; }
.is-v2 .v2-pf_t { margin-top: 22px; }
.is-v2 .v2-pp_h .v2-ring_lv { right: auto; left: 50%; bottom: -12px; transform: translateX(-50%); height: 26px; padding: 0 11px; line-height: 22px; white-space: nowrap; }
.is-v2 .v2-pp_t { margin-top: 22px; }
/* the bell by the settings; a dot when something new waits */
.is-v2 .v2-pf_bell { position: absolute; top: 0; right: 32px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.v2-pf_bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-pf_bell:active { transform: scale(.92); }
.v2-pf_bell.is-new::after { content: ''; position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #9461f0; box-shadow: 0 0 0 2px var(--bg); }
.fd-notes.v2-flash { animation: v2-flash 1.2s ease; }
@keyframes v2-flash { 30% { transform: scale(1.015); filter: brightness(1.04); } }
/* 27.10 (owner): no × on the lit tools, it was too much; the lit state says it, a second tap closes */
.hfc .cx_b.is-on::after, .fdc .cx_b.is-on::after { content: none !important; }
.cx_plh { min-height: 28px; }
/* XP per step, next to each plan's title */
.v2-pxp { flex: none; margin-left: auto; height: 22px; padding: 0 8px; border-radius: 99px; background: rgba(142, 92, 246, .1); color: var(--ink); font-size: 12px !important; font-weight: 600 !important; line-height: 22px; }
.v2-pxp[hidden] { display: none; }
.is-v2 .v2-plan_t { align-items: center; }
/* the gift pours into the token pill like a drop and lets go with a rubbery bounce (owner, 2026-10-27) */
.v2-gift { width: 36px; padding: 0 !important; justify-content: center; transform-origin: right center;
transition: width .7s cubic-bezier(.34, 1.45, .5, 1), opacity .5s ease, background .3s ease; }
.v2-gift.is-open { width: var(--gw, 120px); }
.v2-gift .v2-gift_t { transition: max-width .7s cubic-bezier(.34, 1.45, .5, 1), opacity .3s ease .12s, margin .7s cubic-bezier(.34, 1.45, .5, 1); }
.v2-gift:not(.is-open) .v2-gift_t { transition-delay: 0s; }
.is-v2 .scr--home .top .tok-btn { transition: opacity .28s ease, transform .45s cubic-bezier(.34, 1.45, .5, 1); }
.is-v2 .scr--home .top:has(.v2-gift.is-open.is-in) .tok-btn { opacity: 0; transform: scale(.86); }
.tok-btn.v2-jelly { animation: v2-jelly .85s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes v2-jelly { 0% { transform: scale(.86); } 35% { transform: scale(1.09, .9); } 60% { transform: scale(.96, 1.05); } 80% { transform: scale(1.02, .98); } 100% { transform: scale(1); } }
.is-lite .tok-btn.v2-jelly { animation: none; }
@media (prefers-reduced-motion: reduce) { .tok-btn.v2-jelly { animation: none; } .v2-gift { transition: none; } }
/* 27.10 (owner): Ads: two rows in one grammar, Watch an ad and Complete a task, each with its icon */
.is-v2 .v2-plan--t.is-head .v2-plan_ic { display: block; }
.is-v2 .v2-plan--t.is-head { padding: 12px 14px 4px 16px; }
.is-v2 .v2-plan--t.is-head .v2-plan_r { gap: 12px; }
.is-v2 .v2-sheet:has(.js-v2-tplan.is-head:not([hidden])) .js-partners li.vd-placement { margin: 0 0 4px !important; }
.is-v2 .v2-tstep { margin: 0 0 4px; }
/* the gift flows smoother: a softer curve, the words fade in after the pill has grown */
.v2-gift { transition: width .95s cubic-bezier(.22, 1.18, .36, 1), opacity .5s ease, background .4s ease; }
.v2-gift .v2-gift_t { transition: max-width .95s cubic-bezier(.22, 1.18, .36, 1), opacity .45s ease .3s, margin .95s cubic-bezier(.22, 1.18, .36, 1); }
.v2-gift:not(.is-open) .v2-gift_t { transition: max-width .8s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, margin .8s cubic-bezier(.22, 1, .36, 1); }
.is-v2 .scr--home .top .tok-btn { transition: opacity .4s ease, transform .7s cubic-bezier(.22, 1.18, .36, 1); }
.tok-btn.v2-jelly { animation: v2-jelly 1.1s cubic-bezier(.22, 1, .36, 1); }
@keyframes v2-jelly { 0% { transform: scale(.9); } 40% { transform: scale(1.05, .96); } 70% { transform: scale(.985, 1.02); } 100% { transform: scale(1); } }
/* the task bar ends where the ad bar ends, both rows read the same */
.is-v2 .v2-plan--t.is-head .v2-plan_bar { margin-right: 110px; }
/* 27.10 (owner): the home has two layers: no page bounce; the sheet and the balance move on their own (v2.js) */
.is-v2 #home .js-hm-tok { overscroll-behavior-y: none; }
.is-v2 .js-v2-sheet { will-change: transform; }
/* the gift returns as smooth as it opens: the words go first, then the pill folds without a jerk */
.v2-gift:not(.is-open) { transition: width .85s cubic-bezier(.32, .72, 0, 1) .08s, opacity .5s ease, background .4s ease; }
.is-v2 .scr--home .top:not(:has(.v2-gift.is-open)) .tok-btn { transition: opacity .5s ease .35s, transform .8s cubic-bezier(.22, 1.15, .36, 1) .3s; }
/* Invite friends: the handshake, then each step as its own round pill */
.v2-shake { position: relative; height: 76px; margin: 2px 0 6px; }
.v2-shake span { position: absolute; left: 50%; top: 6px; width: 64px; height: 60px; margin-left: -32px; }
.v2-shake img { display: block; width: 64px; height: 60px; }
.v2-shake_l { transform: translateX(-16px) rotate(72deg); }
.v2-shake_r { transform: translateX(16px) scaleX(-1) rotate(72deg); }
.v2-shake.is-go .v2-shake_l { animation: v2ShL 1.9s cubic-bezier(.22, 1, .36, 1) both; }
.v2-shake.is-go .v2-shake_r { animation: v2ShR 1.9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes v2ShL { 0% { transform: translateX(-90px) rotate(55deg); opacity: 0; } 34% { transform: translateX(-16px) rotate(72deg); opacity: 1; } 48% { transform: translate(-16px, -7px) rotate(68deg); } 60% { transform: translate(-16px, 6px) rotate(76deg); } 72% { transform: translate(-16px, -4px) rotate(70deg); } 84% { transform: translate(-16px, 3px) rotate(73deg); } 100% { transform: translateX(-16px) rotate(72deg); } }
@keyframes v2ShR { 0% { transform: translateX(90px) scaleX(-1) rotate(55deg); opacity: 0; } 34% { transform: translateX(16px) scaleX(-1) rotate(72deg); opacity: 1; } 48% { transform: translate(16px, -7px) scaleX(-1) rotate(68deg); } 60% { transform: translate(16px, 6px) scaleX(-1) rotate(76deg); } 72% { transform: translate(16px, -4px) scaleX(-1) rotate(70deg); } 84% { transform: translate(16px, 3px) scaleX(-1) rotate(73deg); } 100% { transform: translateX(16px) scaleX(-1) rotate(72deg); } }
.is-lite .v2-shake.is-go span { animation-duration: 1s; }
@media (prefers-reduced-motion: reduce) { .v2-shake.is-go span { animation: none; } }
.v2-prog { text-align: center; }
.v2-prog h3 { margin-bottom: 14px; }
.v2-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.v2-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 99px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.v2-steps i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-style: normal; font-size: 13px; font-weight: 600; }
.v2-steps b { display: block; font-size: 15px; font-weight: 500; }
.v2-steps small { display: block; margin-top: 1px; color: var(--mute); font-size: 13px; line-height: 1.35; }
.v2-steps .v2-ic { width: 15px; height: 15px; vertical-align: -2px; }
/* 27.10 (owner), rewritten: the task row is like the ad row; the AdsGram widget is cropped to its button */
.is-v2 .v2-plan--t.is-head { padding: 12px 14px 12px 16px; align-items: center; }
.is-v2 .v2-plan--t.is-head .v2-plan_bar { margin-right: 0; }
.v2-tgo { position: relative; flex: none; width: 100px; height: 40px; margin-left: 12px; border-radius: 99px; overflow: hidden; isolation: isolate; }
.v2-tgo .js-partners { position: absolute !important; right: 0; top: 50%; width: 340px; margin: 0 !important; padding: 0 !important; transform: translateY(-50%); z-index: 1; }
.is-v2 .v2-tgo .js-partners li.vd-placement, .is-v2 .v2-tgo .js-partners > li { margin: 0 !important; padding: 0 !important; }
.v2-tgo .ch-note, .v2-tgo .task-partner { display: none !important; }
/* the native button (ours, slotted into AdsGram): light, Continue */
.is-v2 .v2-tgo [slot="button"] { font-size: 0 !important; background: rgba(27, 24, 32, .07) !important; color: var(--ink) !important; box-shadow: none !important; }
.is-v2 .v2-tgo [slot="button"]::after { content: attr(data-l); font-size: 15px; font-weight: 500; }
/* while the ad loads: a calm light pill with a moving sheen, instead of AdsGram's grey skeleton */
.v2-tgo .vd-frame.is-empty .vd-action { color: transparent !important; background: rgba(27, 24, 32, .06) !important; overflow: hidden; }
.v2-tgo .vd-frame.is-empty .vd-action * { opacity: 0 !important; }
.v2-tgo .vd-frame.is-empty .vd-action::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); animation: v2Sheen 1.4s ease-in-out infinite; }
@keyframes v2Sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* no ad right now: a quiet Later */
.v2-tlater { position: absolute; inset: 0; z-index: 0; display: none; align-items: center; justify-content: center; background: rgba(27, 24, 32, .05) !important; color: var(--mute) !important; font-size: 15px; pointer-events: none; }
.v2-plan--t.is-away .v2-tlater { display: flex; }
/* Start: our own button over the widget until you take the task */
.v2-tstart { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0 !important; padding: 0; font-size: 15px; transition: transform .45s cubic-bezier(.22, 1.3, .36, 1), opacity .35s ease; }
.v2-plan--t.is-go .v2-tstart { opacity: 0; transform: scale(.7); pointer-events: none; }
.v2-plan--t.is-away:not(.is-go) .v2-tstart { z-index: 5; }
/* the unlock: a chameleon wave runs over the row once */
.v2-plan--t.is-unlock { position: relative; overflow: hidden; }
.v2-plan--t.is-unlock::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 15%, rgba(127, 168, 255, .22) 35%, rgba(148, 97, 240, .26) 50%, rgba(236, 143, 220, .22) 65%, transparent 85%); animation: v2Unlock 1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes v2Unlock { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.v2-plan--t.is-unlock .v2-plan_ic { animation: v2-jelly .9s cubic-bezier(.22, 1, .36, 1); }
/* in progress: the bar breathes in the chameleon */
.v2-plan--t.is-run .v2-plan_bar { position: relative; }
.v2-plan--t.is-run .v2-plan_bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(148, 97, 240, .35), rgba(236, 143, 220, .3), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: v2Run 2.2s ease-in-out infinite; }
@keyframes v2Run { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
/* XP is experience: it glows in our chameleon, it is what grows your level */
.v2-xp { font-weight: 600; background: linear-gradient(90deg, #7fa8ff, #9461f0, #ec8fdc, #7fa8ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: v2Xp 4s linear infinite; }
@keyframes v2Xp { 0% { background-position: 0 0; } 100% { background-position: 150% 0; } }
.is-lite .v2-xp, .is-lite .v2-plan--t.is-run .v2-plan_bar::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .v2-xp, .v2-plan--t.is-run .v2-plan_bar::after, .v2-tgo .vd-frame.is-empty .vd-action::after { animation: none; } }
.is-v2 .v2-tstep { display: none !important; }
.is-v2 .v2-sheet:has(.js-v2-tplan.is-head:not([hidden])) .v2-tgo .js-partners li.vd-placement { margin: 0 !important; }
/* the handshake: a line drawing in the chameleon; the hands slide in, meet and shake */
.v2-shake { height: 84px; display: grid; place-items: center; }
.v2-shake svg { width: 78px; height: 78px; overflow: visible; fill: none; stroke: url(#v2shg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v2-shake g { transform-box: view-box; transform-origin: 12px 12px; }
.v2-shake_l, .v2-shake_r { transform: none; }
.v2-shake.is-go .v2-shake_l { animation: v2HsL 1.8s cubic-bezier(.22, 1, .36, 1) both; }
.v2-shake.is-go .v2-shake_r { animation: v2HsR 1.8s cubic-bezier(.22, 1, .36, 1) both; }
.v2-shake.is-go svg { animation: v2HsShake 1.8s ease-in-out both; }
@keyframes v2HsL { 0% { transform: translateX(-9px); opacity: 0; } 38%, 100% { transform: none; opacity: 1; } }
@keyframes v2HsR { 0% { transform: translateX(9px); opacity: 0; } 38%, 100% { transform: none; opacity: 1; } }
@keyframes v2HsShake { 0%, 40% { transform: none; } 52% { transform: translateY(-4px) rotate(-4deg); } 64% { transform: translateY(3px) rotate(3deg); } 76% { transform: translateY(-2px) rotate(-2deg); } 88%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .v2-shake.is-go svg, .v2-shake.is-go g { animation: none; } }
.v2-steps li { padding-left: 10px; }
.v2-steps li::before { display: none !important; }
.v2-steps b { color: var(--ink); }
/* 27.10 (owner): the handshake is the real 🤝: two hands slide in, meet, and become one shake */
.v2-shake { position: relative; height: 84px; display: block; }
.v2-shake span { position: absolute; left: 50%; top: 50%; font-size: 54px; line-height: 1; transform: translate(-50%, -50%); }
.v2-hs_l, .v2-hs_r { opacity: 0; }
.v2-shake.is-go .v2-hs_l { animation: v2HL 1.9s cubic-bezier(.22, 1, .36, 1) both; }
.v2-shake.is-go .v2-hs_r { animation: v2HR 1.9s cubic-bezier(.22, 1, .36, 1) both; }
.v2-shake.is-go .v2-hs_m { animation: v2HM 1.9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes v2HL { 0% { opacity: 0; transform: translate(-150%, -50%) rotate(-12deg); } 25% { opacity: 1; } 42% { opacity: 1; transform: translate(-78%, -50%); } 50%, 100% { opacity: 0; transform: translate(-62%, -50%); } }
@keyframes v2HR { 0% { opacity: 0; transform: translate(50%, -50%) rotate(12deg); } 25% { opacity: 1; } 42% { opacity: 1; transform: translate(-22%, -50%); } 50%, 100% { opacity: 0; transform: translate(-38%, -50%); } }
@keyframes v2HM { 0%, 44% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 54% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 64% { transform: translate(-50%, -58%) scale(1) rotate(-4deg); } 74% { transform: translate(-50%, -44%) rotate(3deg); } 84% { transform: translate(-50%, -53%) rotate(-1deg); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .v2-shake.is-go span { animation: none; } .v2-hs_m { opacity: 1; } }
/* the "Tap again" tip rides above a photo in the post, not under it */
.fdp_a { position: relative; z-index: 6; }
.fda_tip { z-index: 7; }
/* 27.10 (owner), Invite friends: one white page, no frame on a frame; narrow pills; our hand of symbols */
.is-v2 .v2-prog { margin: 0 0 22px; padding: 6px 0 0; background: none; box-shadow: none; border-radius: 0; text-align: center; }
.is-v2 canvas.v2-shake { display: block; width: 160px; height: 160px; margin: -6px auto 0; }
.is-v2 .v2-steps { align-items: center; gap: 10px; }
.is-v2 .v2-steps li { width: fit-content; max-width: 100%; box-sizing: border-box; padding: 9px 18px 9px 9px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(27, 24, 32, .25); }
.is-v2 .v2-steps small { max-width: 240px; }
.is-v2 .v2-prog > small { margin-top: 12px; }
.is-v2 #invites .ivp_goal { display: none !important; }
/* Send and the copy icon: the icon pours into Send, it turns white and says Copied, then lets go */
.is-v2 .ivp_sw { position: relative; }
.is-v2 .ivp_sw .ivp_bg { display: none !important; }
.is-v2 .ivp_sw .js-inv-share { flex: 1; margin-right: 56px; background: var(--ink) !important; color: #fff !important; transition: opacity .35s ease, transform .6s cubic-bezier(.22, 1.2, .36, 1); }
.is-v2 .ivp_sw .js-inv-copy.v2-cp { position: absolute; right: 0; top: 0; z-index: 2; width: 48px; height: 48px; padding: 0 !important; gap: 0; overflow: hidden; white-space: nowrap; border-radius: 99px;
background: var(--card) !important; color: var(--ink) !important; box-shadow: 0 0 0 1px var(--line); transition: width .85s cubic-bezier(.32, .72, 0, 1); }
.is-v2 .ivp_sw .js-inv-copy.v2-cp svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-cp_t { max-width: 0; opacity: 0; font-size: 16px; font-weight: 500; transition: max-width .6s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, margin .6s cubic-bezier(.32, .72, 0, 1); }
.is-v2 .ivp_sw.v2-pour .js-inv-copy.v2-cp { width: var(--cw, 100%); transition: width .8s cubic-bezier(.22, 1.18, .36, 1); }
.is-v2 .ivp_sw.v2-pour .v2-cp_t { max-width: 120px; opacity: 1; margin-left: 8px; transition: max-width .8s cubic-bezier(.22, 1.18, .36, 1), opacity .4s ease .25s, margin .8s cubic-bezier(.22, 1.18, .36, 1); }
.is-v2 .ivp_sw.v2-pour .js-inv-share { opacity: 0; transform: scale(.94); }
.is-v2 .ivp_sw:not(.v2-pour) .js-inv-share { transition: opacity .45s ease .3s, transform .8s cubic-bezier(.22, 1.15, .36, 1) .25s; }
.is-v2 .ivp_sw .js-inv-copy.v2-cp { background: #fff !important; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(27, 24, 32, .3) !important; }
/* 27.10 (owner): only the word XP glows; the digits stay like every other digit */
.v2-xp { font-weight: inherit !important; }
/* Start reacts on the pill only, softly: a sheen runs over it, then it melts into the light Continue */
.v2-plan--t.is-unlock::after { content: none !important; }
.v2-plan--t.is-unlock .v2-plan_ic { animation: none !important; }
.v2-tstart { overflow: hidden; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), background .5s ease; }
.v2-tstart.is-press { transform: scale(.96); }
.v2-tstart.is-press::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(127, 168, 255, .45) 40%, rgba(236, 143, 220, .45) 60%, transparent 80%); animation: v2Unlock .9s cubic-bezier(.22, 1, .36, 1) both; }
.v2-plan--t.is-go .v2-tstart { opacity: 0; transform: scale(1.02); }
.is-v2 .v2-tgo [slot="button"] { transition: background .5s ease; }
/* the bar in progress breathes slower and lighter */
.v2-plan--t.is-run .v2-plan_bar::after { animation-duration: 3.2s; opacity: .7; }
/* Checking with a timer: the spinner and the time, no word */
.is-v2 .v2-plan :is(.v2-plan_go, .v2-tgo .vd-action):has(.task-sec) .task-txt { display: none; }
.is-v2 .v2-plan .task-sec { font-variant-numeric: tabular-nums; }
/* Continue on the ad plan is light, like the task's */
.is-v2 .v2-plan_go.is-cont { background: rgba(27, 24, 32, .07) !important; color: var(--ink) !important; }
/* the partner's logo sits in the same square as the megaphone */
.v2-plan--t.has-logo .v2-plan_ic { border-radius: 11px; object-fit: cover; background: none; }
/* both plan buttons are the same width, so the titles and the lines never wrap */
.is-v2 .v2-plan .v2-plan_go { flex: none; width: 100px; min-width: 0; padding: 0 8px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.is-v2 .v2-plan .v2-plan_t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.is-v2 .v2-plan .v2-plan_m small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 13px; }
.is-v2 .v2-plan .v2-plan_m { min-width: 0; flex: 1; }
.is-v2 .v2-plan .v2-plan_go, .is-v2 .v2-tgo { width: 108px; margin-left: 10px; }
.is-v2 .v2-plan .v2-plan_go { font-size: 14.5px; padding: 0 6px; }
.is-v2 .v2-tgo .vd-action, .is-v2 .v2-tgo [slot="button"]::after, .is-v2 .v2-tstart { font-size: 14.5px; }
.is-v2 .v2-tgo .vd-el { --adsgram-task-button-width: 108px !important; }
.is-v2 .v2-tgo .vd-action { width: 108px !important; min-width: 0 !important; padding: 0 6px !important; }
/* 27.10 (owner): the clap canvas; the steps are thin pills of one width */
.is-v2 canvas.v2-shake { width: 300px; height: 150px; max-width: 100%; margin: -4px auto 2px; }
.is-v2 .v2-steps { gap: 8px; }
.is-v2 .v2-steps li { width: 100%; max-width: 320px; gap: 10px; padding: 6px 16px 6px 6px; box-shadow: 0 0 0 1px var(--line); }
.is-v2 .v2-steps i { width: 26px; height: 26px; font-size: 12px; font-weight: 500; }
.is-v2 .v2-steps b { font-size: 14px; line-height: 1.3; }
.is-v2 .v2-steps small { max-width: none; font-size: 12px; line-height: 1.3; }
/* 27.10 (owner), variant C: Hellos and tokens, one swap card like Telegram Wallet */
.hsw { text-align: left; }
.hsw .hs_h { text-align: center; margin: 4px 0 16px; }
.hsw_card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 22px; background: rgba(27, 24, 32, .05); }
.hsw_row { padding: 12px 16px; border-radius: 18px; background: var(--card); }
.hsw_row small { display: block; font-size: 13px; color: var(--mute); }
.hsw_v { display: flex; align-items: center; justify-content: space-between; margin: 2px 0; }
.hsw_v b { font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
.hsw_v span { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; }
.hsw_v span img { width: 20px; height: 20px; }
.hsw_flip { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px #efece8; cursor: pointer; transition: transform .5s cubic-bezier(.22, 1.2, .36, 1); }
.hsw_flip:active { transform: scale(.9); }
.hsw_flip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hsw_card.is-flip .hsw_flip { animation: hswTurn .5s cubic-bezier(.22, 1, .36, 1); }
.hsw_card.is-flip .hsw_row { animation: hswRow .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes hswTurn { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes hswRow { 0% { opacity: 1; } 35% { opacity: .2; transform: scale(.98); } 100% { opacity: 1; transform: none; } }
.hsw_act { margin-top: 16px; }
.hsw_act .pill { width: 100%; height: 52px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.hsw_act .pill img { width: 16px; height: 16px; }
.hsw_note { text-align: center; min-height: 18px; margin-top: 10px; }
/* 27.10 (owner): no ring around other people's faces: it read like a story to tap; the level stays as a quiet chip */
.v2-ring { background: none !important; padding: 0 !important; }
.v2-ring_in { border: 0 !important; }
.is-v2 .v2-ring_lv { box-shadow: 0 0 0 3px var(--card); }
/* 27.10 (owner): the swap sheet, smaller and calmer */
.hsw .hs_h { font-size: 18px; margin: 2px 0 12px; }
.hsw_card { border-radius: 18px; gap: 3px; padding: 3px; }
.hsw_row { padding: 9px 14px; border-radius: 15px; }
.hsw_row small { font-size: 12px; }
.hsw_v { margin: 1px 0; }
.hsw_v b { font-size: 22px; }
.hsw_v span { font-size: 14px; gap: 5px; }
.hsw_v span img { width: 16px; height: 16px; }
.hsw_flip { width: 32px; height: 32px; margin: -16px 0 0 -16px; box-shadow: 0 0 0 3px #efece8; }
.hsw_flip svg { width: 15px; height: 15px; }
.hsw_act { margin-top: 12px; }
.hsw_act .pill { height: 46px; font-size: 15px; }
.hsw_note { font-size: 12.5px; margin-top: 8px; }
.v2-fs_card .hsw { margin-top: -4px; }
.v2-fs_card .hsw .hs_h { font-weight: 600; }
/* 27.10 (owner): support as reactions. One button (tap: like, hold: choose a like or a Hello); the kinds as chips */
.is-v2 .fdp_a.v2-sx .js-fd-like, .is-v2 .fdp_a.v2-sx .js-fd-hand { display: none !important; }
.is-v2 .fdp_a.v2-sx { display: flex; align-items: center; gap: 8px; }
.v2-rx { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-rx:empty { display: none; }
.v2-rx_c { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 99px; background: rgba(27, 24, 32, .05); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform .25s cubic-bezier(.22, 1.3, .36, 1), background .25s ease; }
.v2-rx_c:active { transform: scale(.92); }
.v2-rx_c.is-mine { background: rgba(148, 97, 240, .12); color: #6f45d8; box-shadow: inset 0 0 0 1px rgba(148, 97, 240, .3); }
.v2-rx_c svg { width: 14px; height: 14px; fill: #e5484d; }
.v2-rx_c img { width: 15px; height: 15px; }
.v2-sup { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer;
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: transform .3s cubic-bezier(.22, 1.3, .36, 1); }
.v2-sup:active { transform: scale(.86); }
.v2-sup svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.v2-sup.is-liked svg { fill: #e5484d; stroke: #e5484d; animation: v2-jelly .6s cubic-bezier(.22, 1, .36, 1); }
.v2-sup img { width: 22px; height: 22px; }
.v2-sup.is-hand img { animation: v2-jelly .6s cubic-bezier(.22, 1, .36, 1); }
.v2-pick_bg { position: fixed; inset: 0; z-index: 299; }
.v2-pick { position: fixed; z-index: 300; display: flex; gap: 4px; padding: 5px; border-radius: 99px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 14px 34px -12px rgba(27, 24, 32, .45);
transform-origin: var(--ox, 50%) 100%; animation: v2PickIn .42s cubic-bezier(.22, 1.3, .36, 1) both; }
.v2-pick.is-out { animation: v2PickOut .2s ease both; }
.v2-pick button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; animation: v2PickI .45s cubic-bezier(.22, 1.4, .36, 1) both; transition: transform .25s cubic-bezier(.22, 1.4, .36, 1); }
.v2-pick button:nth-child(2) { animation-delay: .06s; }
.v2-pick button:active, .v2-pick button.is-go { transform: scale(1.25) translateY(-4px); }
.v2-pick svg { width: 30px; height: 30px; fill: #e5484d; }
.v2-pick img { width: 32px; height: 32px; }
@keyframes v2PickIn { 0% { opacity: 0; transform: scale(.5) translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes v2PickOut { 100% { opacity: 0; transform: scale(.85) translateY(6px); } }
@keyframes v2PickI { 0% { opacity: 0; transform: scale(.3) translateY(8px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v2-pick, .v2-pick button { animation: none; } }
/* 28.10 (owner): one ad, one reward again: the two rows have no day bar; the day count is the streak row */
.is-v2 .js-v2-plan .v2-plan_bar, .is-v2 .js-v2-tplan .v2-plan_bar { display: none; }
.is-v2 .js-v2-plan .v2-plan_m small, .is-v2 .js-v2-tplan .v2-plan_m small { margin-top: 3px; }
.v2-plan--t .v2-tstart { display: none; }
/* the streak "Watch N ads today": its bar fills with each claimed ad; Claim shows only at the goal */
.is-v2 .v2-str { cursor: default; }
.is-v2 .v2-str .v2-plan_bar { margin: 8px 0 6px; }
.is-v2 .v2-str.is-ready .v2-plan_go { animation: v2-jelly .9s cubic-bezier(.22, 1, .36, 1); }
.is-v2 .v2-str.is-paid .v2-plan_bar i { background: rgba(27, 24, 32, .25); }
/* 28.10 (owner): the invite page in the summer layout, today's look. Send sits under the animation;
then How it works (steps on a rail), Your friends, Your link, the crew and the questions */
.is-v2 #invites .ivp_chart, .is-v2 #invites .ivp_grow, .is-v2 #invites .ivp_goal { display: none !important; }
.is-v2 .v2-prog { text-align: left; }
.is-v2 .v2-prog .ivp_act { margin: 6px 0 4px; }
.is-v2 .v2-ivh, .is-v2 #invites .ivp_h { margin: 26px 0 10px 4px !important; font-size: 13px; font-weight: 500; color: var(--mute); text-align: left; letter-spacing: 0; }
.is-v2 .v2-prog ol.v2-rail { gap: 0; padding: 16px 16px 4px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); text-align: left; }
.is-v2 .v2-rail li { display: flex; gap: 14px; padding: 0 0 16px; }
.is-v2 .v2-rail li::before { content: none; }
.is-v2 .v2-rail li > i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(27, 24, 32, .06); color: var(--ink); font-style: normal; font-size: 13px; font-weight: 500; }
.is-v2 .v2-rail li:not(:last-child) > i::after { content: ''; position: absolute; left: 50%; top: 32px; width: 1.5px; height: calc(100% + 6px); margin-left: -.75px; border-radius: 1px; background: rgba(27, 24, 32, .1); }
.is-v2 .v2-rail li { position: relative; }
.is-v2 .v2-rail li > i::after { height: 0; }
.is-v2 .v2-rail li:not(:last-child)::after { content: ''; position: absolute; left: 13.25px; top: 32px; bottom: 4px; width: 1.5px; border-radius: 1px; background: rgba(27, 24, 32, .1); }
.is-v2 .v2-rail li > i.is-gift svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-v2 .v2-rail li > span { display: block; padding-top: 4px; margin: 0; color: var(--mute); font-size: 14px; line-height: 1.4; }
.is-v2 .v2-rail li b { display: block; color: var(--ink); font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.is-v2 .v2-rail li small { display: block; font-size: 14px; color: var(--mute); }
.is-v2 .v2-ivg { display: flex; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: 16px 0; text-align: left; }
.is-v2 .v2-ivg > div { flex: 1; padding: 0 18px; }
.is-v2 .v2-ivg > div + div { border-left: 1px solid var(--line); }
.is-v2 .v2-ivg b { display: flex; align-items: center; gap: 6px; font-size: 28px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.is-v2 .v2-ivg b .v2-ic { width: 20px; height: 21px; }
.is-v2 .v2-ivg small { display: block; margin-top: 4px; color: var(--mute); font-size: 13px; }
.is-v2 .v2-ivl { display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.is-v2 .v2-ivl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-v2 .v2-ivl svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--mute); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-v2 .v2-ivl:active { transform: scale(.985); }
.is-v2 .v2-faq { border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; text-align: left; margin-bottom: 24px; }
.is-v2 .v2-faq details + details { border-top: 1px solid var(--line); }
.is-v2 .v2-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; font-size: 15px; cursor: pointer; }
.is-v2 .v2-faq summary::-webkit-details-marker { display: none; }
.is-v2 .v2-faq summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 1.8px solid var(--mute); border-bottom: 1.8px solid var(--mute); transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; }
.is-v2 .v2-faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.is-v2 .v2-faq p { margin: -4px 16px 14px; color: var(--mute); font-size: 14px; line-height: 1.45; }
.is-v2 #invites .ivp_h, .is-v2 #invites .ivp_list, .is-v2 #invites .ivp_more { display: none !important; }
.v2-lvs_next[hidden], .v2-lvs h4[hidden] { display: none !important; }
.cx_phs_add { border-color: rgba(27, 24, 32, .18) !important; background: rgba(27, 24, 32, .03) !important; color: var(--mute) !important; }
.is-v2 .hm-track, .is-v2 .js-hm-track { touch-action: pan-y; overscroll-behavior-x: none; }
/* 28.10 (owner): the balance page scrolls smoothly: no native bounce fighting our pull, the balance only fades */
.is-v2 .js-hm-tok { overscroll-behavior-y: none; }
.is-v2 .js-hm-tok .bal { will-change: opacity; transition: none !important; transform: none !important; }
.is-v2 .js-v2-sheet { will-change: transform; }
/* 28.10 (owner): the documents line up with the text of the row above, no icons */
.is-v2 .st-card .st-row--doc { padding-left: 56px !important; }
/* 28.10 (owner): one "Watch an ad" block: of its two rows only one shows, and they look the same */
.is-v2 .v2-plan.v2-off { display: none !important; }
.is-v2 .js-v2-tplan.is-head { padding: 12px 14px 12px 16px !important; }
.is-v2 .js-v2-tplan .v2-plan_ic { display: block !important; border-radius: 0; }
.st-docs { justify-content: center !important; gap: 6px 18px !important; margin: 22px 0 4px !important; }
.st-docs a { font-size: 13px !important; color: var(--mute); }
/* 28.10 (owner): two kinds of sheet. The big one has a grip and the same shape, padding and motion
everywhere (the app's sheets now match the v2 ones); the level is a card without a grip */
.is-v2 .sheet_card { position: relative; border-radius: 28px 28px 0 0 !important; padding: 30px 22px calc(22px + var(--bot, 0px)) !important; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
.is-v2 .sheet_card::before { content: ''; position: absolute; top: 12px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 99px; background: rgba(27, 24, 32, .12); }
.is-v2 .v2-fs_card { padding-top: 30px; }
.is-v2 .v2-fs_card .v2-fs_grip { position: absolute; top: 12px; left: 50%; margin: 0 0 0 -19px; }
/* 28.10 (owner, profile variant A): Edit profile under your name and its sheet */
.v2-pf_edit { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; margin: 12px auto 0; border: 0; border-radius: 99px; background: rgba(27, 24, 32, .07) !important; color: var(--ink) !important; font-size: 14.5px; font-weight: 500; box-shadow: none !important; }
.v2-pf_edit:active { transform: scale(.97); }
.v2-ed { text-align: left; }
.v2-ed_ph { position: relative; display: block; width: 88px; height: 88px; margin: 0 auto 8px; padding: 0; border: 0; background: none; border-radius: 50%; }
.v2-ed_ph > :first-child { width: 88px !important; height: 88px !important; border-radius: 50%; overflow: hidden; font-size: 30px; }
.v2-ed_ph img { width: 100%; height: 100%; object-fit: cover; }
.v2-ed_cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 3px var(--card), 0 1px 4px rgba(27, 24, 32, .18); display: grid; place-items: center; }
.v2-ed_cam svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-ed_f { display: block; margin-top: 12px; }
.v2-ed_f small { display: block; margin: 0 0 5px 4px; font-size: 12.5px; color: var(--mute); }
.v2-ed_f input { box-sizing: border-box; width: 100%; height: 48px; border: 0; outline: 0; border-radius: 14px; background: rgba(27, 24, 32, .05); padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); }
.v2-ed_u { position: relative; display: block; }
.v2-ed_u i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 16px; color: var(--mute); }
.v2-ed_u input { padding-left: 30px; padding-right: 96px; }
.v2-ed_u b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 500; color: var(--mute); }
.v2-ed_u b.is-ok { color: var(--ink); }
.v2-ed_u b.is-bad { color: #c2410c; }
.v2-ed_err { margin: 6px 4px 0; font-size: 13px; color: #c2410c; }
.v2-ed_row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 14px; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(27, 24, 32, .05); color: var(--ink); font: inherit; font-size: 15.5px; text-align: left; }
.v2-ed_v { margin-left: auto; color: var(--mute); font-size: 14.5px; }
.v2-ed_ch { flex: none; width: 15px; height: 15px; fill: none; stroke: rgba(27, 24, 32, .3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v2-ed .v2-fs_go { margin-top: 18px; }
/* 28.10 (owner): the balance page scrolls natively (no touch handlers) with its own bounce; where the
browser has scroll timelines, the balance and the top row fade on it, off the main thread */
.is-v2 .js-hm-tok { overscroll-behavior-y: auto; }
.is-v2.v2-stl .js-hm-tok .bal { animation: v2BalFade linear both; animation-timeline: scroll(nearest y); animation-range: 0px 240px; }
@keyframes v2BalFade { from { opacity: 1; } to { opacity: .15; } }
/* 28.10 (owner): Send to a friend is a happy button, not a black one: the chameleon, soft and light */
.is-v2 #invites .ivp_act .js-inv-share { background: linear-gradient(100deg, #7fa8ff 0%, #9461f0 50%, #ec8fdc 100%) !important; background-size: 160% 100% !important; color: #fff !important; box-shadow: 0 8px 20px -10px rgba(148, 97, 240, .55) !important; animation: v2SendGlow 6s ease-in-out infinite; }
@keyframes v2SendGlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.is-lite #invites .ivp_act .js-inv-share { animation: none; }
@media (prefers-reduced-motion: reduce) { #invites .ivp_act .js-inv-share { animation: none; } }
/* 28.10 (owner, idea 2): no Edit button; a hint only while something is missing; the camera on a face with no photo */
.is-v2 .st-row[data-st="name"], .is-v2 .st-row[data-st="username"], .is-v2 .st-row[data-st="photo"] { display: none !important; }
.is-v2 .st-card .st-row[data-st="price"] { border-top: 0 !important; }
.v2-pf_edit { display: none !important; }
.v2-pf_hint { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; margin: 12px auto 0; border: 0; border-radius: 99px; background: rgba(27, 24, 32, .06) !important; color: var(--ink) !important; font-size: 13.5px; font-weight: 500; box-shadow: none !important; }
.v2-pf_hint[hidden] { display: none !important; }
.v2-pf_cam { position: absolute; right: 2px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 3px var(--bg), 0 1px 4px rgba(27, 24, 32, .18); display: grid; place-items: center; z-index: 2; }
.v2-pf_cam[hidden] { display: none; }
.v2-pf_cam svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 28.10 (owner): the rail's circles stand at equal steps, whatever the text length; the numbers ~20% bolder */
.is-v2 .v2-prog ol.v2-rail { display: grid; grid-auto-rows: 1fr; } /* every step as tall as the tallest: equal steps between the circles */
.is-v2 .v2-rail li > i { font-weight: 600; }
.is-v2 .v2-rail li > i.is-gift svg { stroke-width: 2.15; }
/* the invite page ends with the documents and support */
.v2-ivdocs { justify-content: center !important; gap: 6px 18px !important; margin: 6px 0 26px !important; }
.v2-ivdocs a { font-size: 13px !important; color: var(--mute) !important; text-decoration: none; }
/* 28.10 (owner): thanks for testing, a quiet official note; the gift flies into the pills */
.v2-ty { text-align: center; }
.v2-ty_brand { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--mute); }
.v2-ty h3 { margin: 10px 0 0; font-size: 21px; font-weight: 600; }
.v2-ty p { margin: 8px auto 0; max-width: 310px; color: var(--mute); font-size: 15px; line-height: 1.45; }
.v2-ty_gifts { display: flex; margin: 20px 0 18px; border-radius: 18px; background: rgba(27, 24, 32, .04); }
.v2-ty_gifts > div { flex: 1; padding: 14px 0; }
.v2-ty_gifts > div + div { border-left: 1px solid var(--line); }
.v2-ty_gifts b { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 600; }
.v2-ty_gifts b .v2-ic { width: 19px; height: 19px; }
.v2-ty_gifts small { display: block; margin-top: 2px; color: var(--mute); font-size: 13px; }
.v2-fly { position: fixed; z-index: 400; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; transition: transform .8s cubic-bezier(.5, -.35, .4, 1), opacity .8s ease-in; }
.v2-fly .v2-ic { width: 22px; height: 22px; }
.v2-got { animation: v2Got .6s cubic-bezier(.22, 1.4, .36, 1); }
@keyframes v2Got { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* 28.10 (owner): Claim on the ad rows is the word only; the reward is already in the line under the title */
.is-v2 .v2-plan :is(.v2-plan_go, .v2-tgo .vd-action) .task-amount { display: none !important; }
/* 28.10 (owner): notes on your posts live under the bell, not over the posts */
.is-v2 .js-hm-feed .js-fd-list ~ .fd-notes, .is-v2 .js-hm-feed .fd-notes.js-fd-notes { display: none !important; }
.v2-bn { text-align: left; padding: 0 0 6px; }
.v2-bn .v2-bn_h { margin: 12px 0 14px; text-align: center; }
.v2-bn_l { max-height: 56vh; overflow-y: auto; margin: 0; -webkit-overflow-scrolling: touch; }
.v2-bn_l .fdn { box-shadow: none; background: rgba(27, 24, 32, .04); }
.v2-bn_e { margin: 4px 8px 10px; text-align: center; color: var(--mute, #5f5a66); font-size: 15px; line-height: 1.45; }
.v2-bn_chat { display: flex; align-items: center; width: 100%; min-height: 52px; margin: 0 0 8px; padding: 0 14px; border: 0; border-radius: 18px; background: rgba(141, 75, 239, .08); color: inherit; font: inherit; font-size: 15px; font-weight: 500; text-align: left; }
/* 28.10 (owner): the swap without the grey frame; you type what you give; red when it can't go */
.hsw_card { padding: 0; gap: 6px; background: none; }
.hsw_row { box-shadow: 0 0 0 1px var(--line); }
.hsw_flip { box-shadow: 0 0 0 5px var(--bg); }
.hsw_in { width: 0; flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 28px; font-weight: 400; letter-spacing: -.02em; caret-color: #9461f0; }
.hsw_v .js-hsw-get { font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
.hsw_card.is-bad .js-hsw-a .hsw_in { color: #e5484d; }
.hsw_card.is-bad .js-hsw-a { box-shadow: 0 0 0 1.5px rgba(229, 72, 77, .55); }
.hsw_note.is-bad { color: #e5484d; }
html:lang(ru) body, html:lang(uk) body, html:lang(ru) .vd-btn, html:lang(uk) .vd-btn { font-family: 'PU Num', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
/* 28.10 (owner): the key facts in the steps and answers are bold and dark, so the text reads alive */
.is-v2 .v2-rail li small b, .is-v2 .v2-faq p b { display: inline; margin: 0; font-size: inherit; color: var(--ink); font-weight: 600; }
/* 28.10 (owner): something new on your face is a quiet hint, not a bold ring */
.is-v2 .scr--home .top .me.v2-new { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(148, 97, 240, .3); animation: v2-new2 3.2s ease-in-out infinite; }
@keyframes v2-new2 { 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(127, 168, 255, .32), 0 0 10px 0 rgba(148, 97, 240, .16); } }
.is-lite .scr--home .top .me.v2-new, .is-v2.is-lite .scr--home .top .me.v2-new { animation: none; }
/* 28.10 (owner, audit): no empty space under the pages. The old 86px kept room for the tab bar, which the new
home doesn't have; now a page ends 24px under its last line (plus the phone's own bottom inset) */
.is-v2 .home-body:not(.js-hm-tok), .is-v2 .val-body, .is-v2 .js2 { padding-bottom: calc(24px + var(--bot, 0px)) !important; }
.is-v2 .home-body .feed { margin-bottom: 0; }
.is-v2 #invites .v2-faq { margin-bottom: 0; }
.is-v2 #invites .v2-ivdocs { margin: 36px 0 0 !important; }
/* 28.10 (owner): the Hello and token icons in the step titles sit on the line, not under it */
.is-v2 .v2-rail li b .v2-ic { vertical-align: -.5px; }
/* 28.10: the Chaters mark in a note sits where a face would */
.fdn_f.fdn_ch { border-radius: 9px; object-fit: contain; background: none; }
/* 28.10 (owner): a Chaters task is a panel of steps, as on the old app's task page */
.chs { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; text-align: left; }
.chs_s { padding: 14px 16px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: opacity .3s ease; }
.chs_s.is-cur { box-shadow: 0 0 0 1.5px var(--ink); }
.chs_s.is-done { opacity: .55; }
.chs_s.is-off { opacity: .4; }
.chs_h { display: flex; align-items: center; gap: 12px; }
.chs_h span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(27, 24, 32, .06); color: var(--mute); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chs_h span svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chs_s.is-cur .chs_h span, .chs_s.is-done .chs_h span { background: var(--ink); color: #fff; }
.chs_h b { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.chs_v { flex: none; padding: 3px 9px; border-radius: 99px; background: rgba(27, 24, 32, .06); color: var(--mute); font-size: 12.5px; font-style: normal; font-weight: 500; }
.chs_v.is-pending { background: rgba(141, 75, 239, .1); color: #7a45d6; }
.chs_v.is-approved { background: var(--ink); color: #fff; }
.chs_v.is-rejected { background: #c4322b; color: #fff; }
.chs_b { margin-top: 12px; }
.chs_b > p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.chs_b .pill { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; }
.chs_b .pill + .pill { margin-top: 8px; }
.chs_b .pill.is-ghost { background: rgba(27, 24, 32, .06) !important; color: var(--ink) !important; }
.chs_b .task-progress { margin: 0 0 10px; }
.chs_s.is-fail, .chs_s.is-warn { box-shadow: 0 0 0 1.5px #c4322b; background: #fff7f6; }
.chs_s.is-fail .chs_h b, .chs_s.is-warn .chs_h b { color: #c4322b; }
.chs_s.is-fail .chs_h span, .chs_s.is-warn .chs_h span { background: #c4322b; color: #fff; }
.chs_s.is-fail .chs_b > p, .chs_s.is-warn .chs_b > p { color: #8e2a24; }
.chs-sheet h2 { margin-bottom: 2px; }
/* 28.10 (owner): the step panel starts right under the grip, nothing repeated above it */
.chs-sheet .chs { margin-top: 6px; }
.chs_b > p.chs_wait { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
/* 28.10 (owner): a wrong amount shakes, like the old withdraw field; Max fills the most that can go */
@keyframes hswShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.hsw_row.is-shake { animation: hswShake .42s cubic-bezier(.36, .07, .19, .97) both; }
.hsw_max { flex: none; margin: 0 10px 0 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 99px; background: rgba(27, 24, 32, .06); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hsw_max:active { transform: scale(.94); }
.hsw_card.is-bad .js-hsw-a .hsw_in { color: #e5484d; }
@media (prefers-reduced-motion: reduce) { .hsw_row.is-shake { animation: none; } }
/* 28.10 (owner): the invite page footer is the balance one */
.is-v2 #invites .v2-ivfoot { margin-top: 36px; }
/* 28.10 casual copy: the token icon right after its number and an emoji at the end, in the task step panels */
.chs .v2-ic { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-left: .2em; }
.chs .chs-em { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-left: .3em; }
/* 28.10 (owner): the steps sit by their own text, not on equal rows: closer, easy to read, the line still joins them */
.is-v2 ol.v2-rail { display: block !important; grid-auto-rows: auto !important; }
.is-v2 .v2-rail li { padding-bottom: 14px !important; min-height: 0 !important; }
.is-v2 .v2-rail li:last-child { padding-bottom: 0 !important; }
.is-v2 .v2-rail li:not(:last-child)::after { bottom: 2px; }
.is-v2 .v2-prog ol.v2-rail { padding-bottom: 16px; }
/* 28.10 (owner): no ring around your face on the balance at all; what is new lives under the bell */
.is-v2 .scr--home .top .me, .is-v2 .scr--home .top .me.v2-new { box-shadow: none !important; animation: none !important; }
/* 28.10 (owner): no profile card in Settings: name, @username and photo change on your own page */
.is-v2 #me .st-me { display: none !important; }
/* 28.10 (owner): "What's new?" is a big field that invites writing: twice as tall; the icons and Post keep their size */
.is-v2 .hm-feed .hfc_in { min-height: 88px !important; }
/* photo sheet: three round icon buttons and Save */
.ps-ics { display: flex; justify-content: center; gap: 14px; }
.ps-ic { width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(27, 24, 32, .06); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ps-ic:active { transform: scale(.93); }
.ps-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Hellos next to a number sit on its middle, not under it */
.v2-hn { display: inline-flex; align-items: center; gap: 5px; }
.v2-hn .v2-ic { vertical-align: 0 !important; }
/* followers: tappable count, and the list with Message */
.is-v2 .v2-st_f { cursor: pointer; }
.v2-fl h3 { margin: 12px 0 12px; text-align: center; }
.v2-fl_l { max-height: 60vh; overflow-y: auto; text-align: left; }
.v2-fl_r { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.v2-fl_r + .v2-fl_r { border-top: 1px solid var(--line); }
.v2-fl_p { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.v2-fl_p .v2-fl_f, .v2-fl_p > :first-child { flex: none; width: 44px !important; height: 44px !important; border-radius: 50%; overflow: hidden; }
.v2-fl_p span { min-width: 0; }
.v2-fl_p b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-fl_p small { display: block; font-size: 13px; color: var(--mute); }
.v2-fl_m { flex: none; height: 36px; padding: 0 16px; font-size: 14px; }
.v2-pf_msg.is-new::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #9461f0; box-shadow: 0 0 0 2px var(--bg); }
/* notifications in the bell sheet: face, the words, the time under them, the cross on the right; one even row */
.v2-bn_l .fdn { height: auto; min-height: 56px; padding: 8px 4px 8px 10px; border-radius: 16px; }
.v2-bn_l .fdn_go { display: grid !important; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; flex: 1; min-width: 0; }
.v2-bn_l .fdn_go > :first-child { grid-row: 1 / 3; width: 36px !important; height: 36px !important; }
.v2-bn_l .fdn_t { grid-column: 2; white-space: normal !important; line-height: 1.35; font-size: 14.5px; }
.v2-bn_l .fdn_go time { grid-column: 2; margin: 2px 0 0 !important; font-size: 12.5px; color: var(--mute); position: static !important; }
.v2-bn_l .fdn_x { flex: none; align-self: center; }
.is-v2 .v2-pf_msg { right: 68px; }
/* 28.10 (owner): the soft colours behind the balance live on their own layer, painted once; the scroll and the
sheet never make them repaint (the blur over 600px was redrawn on every scroll frame) */
.is-v2 .v2-aura { transform: translateZ(0); will-change: transform; contain: layout style; }
.v2-fl_m { background: rgba(27, 24, 32, .07) !important; color: var(--ink) !important; }
/* 28.10 (owner, again): Settings start right under the top, no empty band (the profile card is gone) */
.is-v2 #me .js2 { padding-top: calc(4px + var(--top, 0px)) !important; }
.is-v2 #me .js2 > .st-h:first-of-type { margin-top: 4px !important; }
/* 28.10 (owner, final): the sum reads big: the dollars large with open spacing, the cents half size and softer beside them */
.is-v2 .v2-hero b.js-v2-usd { font-size: 60px; font-weight: 420; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.is-v2 .v2-hero b.js-v2-usd .v2-c { font-size: .56em; font-weight: 420; letter-spacing: 0; margin-left: .02em; vertical-align: baseline; color: var(--ink); opacity: .55; }
/* 28.10 (owner): your page sits lower, not under the very top; the post field is a card, not an empty band */
.is-v2 .v2-pf { padding-top: 26px !important; }
.is-v2 .hm-feed .hfc { margin: 8px 0 14px !important; padding: 14px 14px 10px !important; border-radius: 22px !important; background: var(--card) !important; box-shadow: 0 0 0 1px var(--line) !important; border-bottom: 0 !important; }
.is-v2 .hm-feed .hfc_in { min-height: 64px !important; }
/* 28.10 (owner, again): the 88px under the feed, the chats and Settings came from an #id rule that beat the
24px fix above; same weight here, so the pages really end 24px under their last line */
.is-v2 #home .js-hm-feed, .is-v2 #home .js-hm-chats, .is-v2 #me, .is-v2 #me .js2 { padding-bottom: calc(24px + var(--bot, 0px)) !important; }
.is-v2 #home .js-hm-chats .pfoot { margin-top: 24px; }
/* 28.10 (owner): "What's new?" is big, as big as its field */
.is-v2 .hm-feed .hfc_in { min-height: 96px !important; font-size: 22px !important; line-height: 1.35 !important; }
/* 28.10 (owner): the post field is compact: one line to type, then photo and the lightning */
.is-v2 .hm-feed .hfc_in { min-height: 34px !important; padding: 2px 0 4px !important; }
.is-v2 .hm-feed .hfc { padding: 12px 14px 10px !important; }
.is-v2 .hm-feed .hfc_row { margin-top: 4px; }
.hfc .cx_b[hidden] { display: none !important; }
/* the lightning leads: a soft violet chip; once charged it shows the amount */
.hfc .cx_b.cx_bolt { width: auto; min-width: 36px; height: 34px; padding: 0 9px; gap: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 17px; background: rgba(142, 92, 246, .1); color: #7a4fe0; margin-right: 4px; }
.hfc .cx_b.cx_bolt .ico { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.hfc .cx_b.cx_bolt b { font-size: 14px; font-weight: 600; font-family: 'PU Num', inherit; }
.hfc .cx_b.cx_bolt b:empty { display: none; }
.hfc .cx_b.cx_bolt.is-on { background: #8E5CF6; color: #fff; }
.hfc .cx_b.cx_bolt.is-on::after { content: none !important; }
/* the charge sheet */
.cg_p { margin: -4px 0 14px; color: var(--mute); font-size: 14.5px; line-height: 1.4; text-align: center; }
.cg_go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cg_go .ico { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.cg_off { display: block; margin: 10px auto 0; color: var(--mute); font-size: 14px; padding: 6px 10px; }
/* a charged post: a small lightning after the time */
.fdp_ch { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; color: #8E5CF6; font-style: normal; }
.fdp_ch .ico { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.fdp_ch b { font-size: 12.5px; font-weight: 600; }
/* content for followers: the shape of the post, blurred, with one way in */
.fdp_tz { position: relative; display: block; width: 100%; margin-top: 6px; padding: 0; text-align: left; border-radius: 16px; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.fdp_tz_t { display: flex; flex-direction: column; gap: 9px; padding: 6px 0 10px; filter: blur(4px); }
.fdp_tz_t i { display: block; height: 11px; border-radius: 6px; background: rgba(27, 24, 32, .16); }
.fdp_tz_ph { display: block; position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #d9cdf3, #f0dbe9); }
.fdp_tz_ph img { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(26px) saturate(1.15); opacity: .85; }
.fdp_tz_c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink); }
.fdp_tz:not(.has-ph) .fdp_tz_c { position: static; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 2px 0 4px; }
.fdp_tz:not(.has-ph) { overflow: visible; }
.fdp_tz_c svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fdp_tz_c b { font-size: 14.5px; font-weight: 600; }
.fdp_tz.has-ph .fdp_tz_c { color: #fff; text-shadow: 0 1px 8px rgba(27, 24, 32, .35); }
.fdp_tz.has-ph .fdp_tz_c svg { width: 26px; height: 26px; }
.fdp_tz_go { height: 32px !important; padding: 0 16px !important; font-size: 14px; font-weight: 600; text-shadow: none; }
.fdp_tz:not(.has-ph) .fdp_tz_go { margin-left: auto; }
.fdp_tz:active { transform: scale(.985); }
/* 28.10 (owner, concept C): "+ Hello" slides out next to the heart for 4 seconds after a like */
.v2-of { position: relative; flex: none; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 16px; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; background: #8E5CF6; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; opacity: 0; transform: translateX(-12px) scale(.85); transition: opacity .22s, transform .34s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.v2-of[hidden] { display: none; }
.v2-of.is-in { opacity: 1; transform: none; }
.v2-of img { width: 19px; height: 19px; }
.v2-of:active { transform: scale(.94); }
.v2-of.is-done { background: rgba(142, 92, 246, .12); color: #6f45d8; }
.v2-of_bar { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .55); transform-origin: left; transform: scaleX(0); }
.v2-of.is-in:not(.is-done) .v2-of_bar { animation: v2ofbar 4s linear forwards; }
@keyframes v2ofbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* 28.10 (owner): the lightning has no pill and no outline box: an outlined bolt; a tap fills it yellow and
tilts it a little; it stays yellow and tilted while the post is charged */
.hfc .cx_b.cx_bolt, .hfc .cx_b.cx_bolt.is-on { width: 34px; min-width: 0; height: 34px; padding: 0; margin-right: 2px; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--ink); }
.hfc .cx_b.cx_bolt b { display: none !important; }
.hfc .cx_b.cx_bolt .ico { width: 22px; height: 22px; fill: transparent; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transform-origin: 50% 55%; transition: fill .2s, stroke .2s, transform .38s cubic-bezier(.3, 1.7, .5, 1); }
.hfc .cx_b.cx_bolt.is-on .ico, .hfc .cx_b.cx_bolt.is-zap .ico { fill: #FFC21A; stroke: #F0A800; transform: rotate(14deg); }
.hfc .cx_b.cx_bolt.is-zap .ico { animation: cxzap .42s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes cxzap { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(18deg) scale(1.18); } 100% { transform: rotate(14deg) scale(1); } }
.hfc .cx_b.cx_bolt:active { background: none !important; transform: none; }
/* a charged post: the small lightning is yellow too */
.fdp_ch { color: #E0A000; }
.fdp_ch .ico { fill: #FFC21A; stroke: #F0A800; stroke-width: 1.2; transform: rotate(14deg); }
/* the sheet: a big yellow bolt over a selling title; the place among charged posts updates as you type */
.cg_bolt { display: block; width: 56px; height: 56px; margin: 2px auto 8px; }
.cg_bolt .ico { width: 56px; height: 56px; fill: #FFC21A; stroke: #F0A800; stroke-width: 1.2; stroke-linejoin: round; transform: rotate(14deg); animation: cgbolt .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes cgbolt { 0% { transform: rotate(-8deg) scale(.5); opacity: 0; } 100% { transform: rotate(14deg) scale(1); opacity: 1; } }
.cg_h { font-size: 24px !important; font-weight: 650 !important; }
.cg_p { margin: 2px 6px 16px; color: var(--ink); opacity: .72; font-size: 15.5px; line-height: 1.42; }
.cg_rank { min-height: 20px; margin: 10px 0 0; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cg_rank:empty { visibility: hidden; }
.cg_rank.is-top { color: #C98A00; }
.cg_go .ico { fill: #FFC21A; stroke: none; }
.cg_fine { margin: 10px 8px 0; text-align: center; font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.cg_gt { display: inline-flex; margin-left: -2px; }
.cg_gt[hidden] { display: none; }
.cg_gt img { width: 18px; height: 18px; }
/* 28.10 (owner): the charge sheet: a yellow button, the line under it thin, the field's caret a faint grey */
.cg .cg_go { background: #FFC21A !important; color: #1b1820 !important; }
.cg .cg_go:disabled { background: rgba(255, 194, 26, .38) !important; color: rgba(27, 24, 32, .45) !important; opacity: 1 !important; }
.cg .cg_go .ico { fill: #1b1820; }
.cg .cg_fine { font-size: 12px; font-weight: 350; color: rgba(27, 24, 32, .42); }
.cg .hsw_in { caret-color: rgba(27, 24, 32, .28); }
.cg .hsw_row { box-shadow: 0 0 0 1px rgba(27, 24, 32, .07); }
/* the bolt is yellow only while charged; a tap only presses it */
.hfc .cx_b.cx_bolt.is-zap:not(.is-on) .ico { fill: transparent; stroke: currentColor; transform: none; animation: none; }
.hfc .cx_b.cx_bolt.is-press .ico { animation: cxpress .18s ease-out; }
@keyframes cxpress { 50% { transform: scale(.84); } }
.hfc .cx_b.cx_bolt.is-on.is-press .ico { animation: none; }
/* 28.10 (owner): the post menu as a bottom sheet */
.fdm.fdm--sheet { position: static; min-width: 0; margin: 8px -6px 0; padding: 0; border-radius: 0; background: none; box-shadow: none; gap: 2px; }
.fdm.fdm--sheet button { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; text-align: center; font-size: 17px; font-weight: 500; }
/* 28.10: a hidden profile screen stays hidden; the "#me { display:block !important }" rules above beat [hidden]
and laid an empty #me over the sign-up screen, so new people saw a blank page */
#me[hidden] { display: none !important; }
/* 28.10: charge sheet title carries the bolt after the word; footnote smaller */
.cg .cg_h { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px !important; }
.cg_hb { display: inline-flex; width: 30px; height: 30px; flex: none; }
.cg_hb .ico { width: 30px; height: 30px; fill: #FFC21A; stroke: #F0A800; stroke-width: 1.2; stroke-linejoin: round; transform: rotate(14deg); animation: cgbolt .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.cg .cg_fine { font-size: 11px; line-height: 1.35; margin-top: 8px; }
/* 28.10 (owner): Purple topic accounts take no Hellos: no hand chip and no + Hello under their posts */
.fdp--house .js-fd-hand, .fdp--house .v2-rx, .fdp--house .v2-of { display: none !important; }
.v2-pp_go.is-on { opacity: .55; }
/* 28.10 (owner): a light Messages button under your numbers; the "What's new?" field a touch taller */
.v2-stm { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin: -4px 0 16px; border: 0; border-radius: 23px; background: rgba(27, 24, 32, .06); color: #1b1820; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s; }
.v2-stm:active { transform: scale(.98); }
.v2-stm svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.v2-stm.is-new::after { content: ''; position: absolute; top: 12px; left: calc(50% + 52px); width: 8px; height: 8px; border-radius: 50%; background: #9461f0; }
.is-v2 .hm-feed .hfc_in { min-height: 44px !important; }
.is-v2 .hm-feed .hfc { padding: 16px 16px 12px; }
/* 28.10 (owner): the bolt is the same size and grey as the photo icon until the post is charged */
.hfc .cx_b.cx_bolt .ico { width: 19px; height: 19px; stroke-width: 1.6; }
.hfc .cx_b.cx_bolt:not(.is-on) { color: rgba(27, 24, 32, .5); }
/* charge sheet: smaller words with air before the amount; hidden while the amount is typed */
.cg .cg_p { font-size: 14px; line-height: 1.4; margin: 0 8px 18px; max-height: 120px; overflow: hidden; transition: max-height .25s ease, opacity .2s, margin .25s; }
.cg.is-typing .cg_p { max-height: 0; opacity: 0; margin-bottom: 8px; }
.v2-fs_card { overflow-y: auto; overscroll-behavior: contain; }
/* 28.10 (owner): one way to the messages: the button under the numbers, text only; the icon up top is gone.
Unread messages make the button glow softly */
.is-v2 .js-v2-msg { display: none !important; }
.v2-stm.is-new::after { content: none; }
.v2-stm { transition: transform .15s, background .3s, box-shadow .3s, color .3s; }
.v2-stm.is-new { background: rgba(148, 97, 240, .12); color: #6d3fd6; box-shadow: 0 0 0 1px rgba(148, 97, 240, .22), 0 6px 18px -6px rgba(148, 97, 240, .45); animation: stmglow 2.4s ease-in-out infinite; }
@keyframes stmglow { 50% { box-shadow: 0 0 0 1px rgba(148, 97, 240, .3), 0 8px 24px -6px rgba(148, 97, 240, .6); } }
@media (prefers-reduced-motion: reduce) { .v2-stm.is-new { animation: none; } }
/* 28.10 (owner): the level pill under the face is half as loud: smaller and see-through */
.is-v2 .v2-pf_lvn { bottom: -8px; height: 18px; padding: 0 7px; font-size: 10.5px; line-height: 18px; font-weight: 600; background: rgba(27, 24, 32, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 2px var(--bg); }
/* 28.10 (owner): no purple here. Unread messages: the button stays neutral and a soft chameleon glow
(pink, sky, peach, like the wash behind the balance) breathes around it */
.v2-stm.is-new { background: #fff; color: #1b1820; animation: stmcham 5s ease-in-out infinite; box-shadow: -12px 2px 22px -8px rgba(236, 143, 220, .85), 12px 2px 22px -8px rgba(127, 168, 255, .85), 0 8px 18px -10px rgba(255, 185, 143, .9); }
@keyframes stmcham {
33% { box-shadow: -12px 2px 22px -8px rgba(127, 168, 255, .85), 12px 2px 22px -8px rgba(255, 185, 143, .85), 0 8px 18px -10px rgba(236, 143, 220, .9); }
66% { box-shadow: -12px 2px 22px -8px rgba(255, 185, 143, .85), 12px 2px 22px -8px rgba(236, 143, 220, .85), 0 8px 18px -10px rgba(127, 168, 255, .9); }
}
.is-lite .v2-stm.is-new { animation: none; }
@media (prefers-reduced-motion: reduce) { .v2-stm.is-new { animation: none; } }
/* 28.10 (owner): bolt and photo sit closer together */
.hfc .cx_b.cx_bolt, .hfc .cx_b.cx_bolt.is-on { width: 30px; margin-right: -4px; }
.hfc .cx_b.js-cx-photo { width: 30px; }
/* 28.10 (owner): the level is part of the avatar: the words sit on the ring line itself, cutting it,
on the page colour, no dark pill under the face */
.is-v2 .v2-pf_lvn { bottom: -6px; height: 18px; padding: 0 7px; background: var(--bg); color: rgba(27, 24, 32, .62); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 18px; }
/* the grey track round the face was never drawn (its first child is ): now it is, so the level words read as part of the ring */
.v2-pf_ring circle:first-of-type { stroke: rgba(27, 24, 32, .09); stroke-width: 3; }
/* 28.10 fix: the description had a 300px width from an old rule and lost its auto margins: it hugged the left. Centred, lines balanced */
.cg .cg_p { max-width: 320px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.cg.is-typing .cg_p { margin-left: auto; margin-right: auto; }
/* 28.10 (owner): the levels bar takes the colour of your level, like the ring */
.v2-lvs_bar i { background: linear-gradient(90deg, var(--lv-a, #7fa8ff), var(--lv-b, #9fd0ff)) !important; }
/* opening a form, 29.10 (owner): only the animation and the amount. The sheet keeps its height; the form's
canvas covers the whole sheet, so the symbols scatter across it and gather into the token */
.bx-s { position: relative; }
.bx-s.is-opening { padding-bottom: 0 !important; }
.bx-s.is-opening > :not(.bx-s_img) { visibility: hidden !important; display: block; }
.bx-s.is-opening .bx-s_img {
position: absolute !important; left: -22px; right: -22px; top: 0; bottom: 0;
width: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; background: none !important;
}
.bx-s.is-opening .bx-s_img .bxc, .bx-s.is-opening .bxc--big { width: 100% !important; height: 100% !important; margin: 0 !important; }
.bx-won { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 30px; font-weight: 700; color: var(--ink); opacity: 0; transition: opacity .5s ease .25s, transform .45s ease; }
.bx-won img { display: block; width: 26px; height: 26px; margin: 0; }
.bx-won_h { margin-left: 10px; font-size: 22px; }
.bx-s_img.is-real .bx-won { opacity: 1; }
.bx-s_img.is-ready { cursor: pointer; }
.bx-s_img.is-ready .bx-real img { animation: bxTake 1.6s ease-in-out infinite; }
@keyframes bxTake { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.bx-s_img.is-taken .bx-real { transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .45s ease; transform: translateY(-140px) scale(.35) !important; opacity: 0 !important; }
.bx-s_img.is-taken .bx-real img { animation: none; }
.bx-s_img.is-taken .bx-won { opacity: 0; transform: translateY(-16px); transition: opacity .3s ease, transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .bx-s_img.is-ready .bx-real img { animation: none; } }
/* Get to know Purple, 29.10 (owner): five short reads (learn.js). A row of cards on the token page, each opens its own page */
.lrn_wrap { margin: 0 -16px; }
.lrn_wrap .lbl { margin-left: 18px; margin-right: 18px; }
.lrn_row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 8px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lrn_row::-webkit-scrollbar { display: none; }
.lrn_c { flex: none; width: 132px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px 14px 13px; border-radius: 22px;
background: var(--card); box-shadow: 0 0 0 1px rgba(27, 24, 32, .07); text-align: left; color: var(--ink); scroll-snap-align: start; transition: transform .3s var(--spring, ease); }
.lrn_c:active { transform: scale(.97); }
.lrn_c b { font-size: 15px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.lrn_c.is-read b { color: var(--mute); }
.lrn_pic { display: flex; align-items: center; justify-content: flex-start; height: 60px; }
.lrn_cv { width: 60px !important; height: 60px !important; margin: 0 !important; }
.lrn_ic { width: 52px; height: 52px; display: block; object-fit: contain; }
.lrn_gift { display: inline-flex; width: 52px; height: 52px; }
.lrn_gift svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lrn_faces { display: flex; }
.lrn_faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -10px; }
.lrn_faces img:first-child { margin-left: 0; }
/* the page */
.lrn { background: var(--bg); }
.lrn_hero { position: relative; height: 230px; display: flex; align-items: center; justify-content: center; }
.lrn_bigcv { width: 210px !important; height: 210px !important; margin: 0 auto !important; }
.lrn_hand { width: 150px; height: auto; }
.lrn_tok { width: 150px; height: 150px; }
.lrn_body { padding: 4px 20px calc(30px + var(--bot, 0px)); max-width: 560px; margin: 0 auto; color: var(--ink); }
.lrn_body h1 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
.lrn_body h3 { margin: 22px 0 4px; font-size: 17px; line-height: 1.3; font-weight: 600; }
.lrn_body p { margin: 0; font-size: 16px; line-height: 1.55; color: #4f4a56; }
.lrn_body .lrn_lead { font-size: 17px; color: var(--ink); }
.lrn_em { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; margin: 0 .05em; }
.lrn_go { display: block; width: 100%; height: 54px; margin: 30px 0 0; border: 0; border-radius: 27px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; }
.lrn_go:active { transform: scale(.98); }
/* invites: a gift and friends floating in to it */
.lrn_inv { position: relative; width: 240px; height: 200px; }
.lrn_gift--l { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); }
.lrn_fly { position: absolute; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(27, 24, 32, .1); animation: lrnFloat 4.5s ease-in-out infinite; }
.lrn_fly--0 { left: 6px; top: 18px; }
.lrn_fly--1 { right: 4px; top: 6px; animation-delay: -1.2s; }
.lrn_fly--2 { left: 22px; bottom: 6px; animation-delay: -2.4s; }
.lrn_fly--3 { right: 18px; bottom: 16px; animation-delay: -3.3s; }
@keyframes lrnFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -9px); } }
/* your profile: people circling around you */
.lrn_orbit { position: relative; width: 220px; height: 220px; animation: lrnSpin 40s linear infinite; }
.lrn_o { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(27, 24, 32, .1); animation: lrnSpin 40s linear infinite reverse; }
.lrn_o--0 { translate: 0 -92px; } .lrn_o--1 { translate: 72px -57px; } .lrn_o--2 { translate: 90px 20px; } .lrn_o--3 { translate: 40px 83px; }
.lrn_o--4 { translate: -40px 83px; } .lrn_o--5 { translate: -90px 20px; } .lrn_o--6 { translate: -72px -57px; }
.lrn_me { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(27, 24, 32, .1); animation: lrnSpin 40s linear infinite reverse; }
.lrn_me .lrn_em { width: 44px; height: 44px; margin: 0; vertical-align: 0; }
@keyframes lrnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lrn_fly, .lrn_orbit, .lrn_o, .lrn_me { animation: none; } }
/* Settings, 29.10 (owner): the follow price and two-step read the same way, the symbol first, then the text,
with the same visible gap. The shield's drawing leaves ~2.6px of air on each side of its box, the hand fills
its own, so the shield's box gap is smaller; both read ~7px apart and ~16px tall */
.st-val.js-st-price .v2-hn, .st-val.js-2fa-val { display: inline-flex; align-items: center; }
.st-val.js-st-price .v2-hn { flex-direction: row-reverse; gap: 7px; }
.st-val.js-st-price .v2-ic { display: block; width: 17px !important; height: 17px !important; margin: 0 !important; }
.st-val.js-2fa-val { gap: 4px; }
.st-val.js-2fa-val .js-2fa-ok { display: inline-flex; }
.st-val.js-2fa-val .vbadge { display: block; width: 19px; height: 19px; margin: 0; vertical-align: 0; }
/* 29.10 casual copy: icons right after their word in the Get to know Purple pages, one visible size */
.lrn_body .lrn_em { margin: 0 0 0 .22em; }
.lrn_li { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.25em; margin-left: .14em; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Banners, 29.10 (owner): the summer app's long banners in today's look (learn.js). One fills the width,
they change every 7 s, a tap opens the read. Dark, a soft chameleon glow behind the picture on the right */
.lrn_wrap { display: none; }
.bn { margin: 18px -16px 6px; }
.bn_track { display: flex; gap: 32px; overflow-x: auto; padding: 0 16px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bn_track::-webkit-scrollbar { display: none; }
.bn_s { flex: 0 0 100%; position: relative; height: 104px; border-radius: 20px; overflow: hidden; padding: 15px 16px 14px; display: flex; flex-direction: column; justify-content: space-between;
background: #1b1820; color: #fff; text-align: left; scroll-snap-align: center; scroll-snap-stop: always; -webkit-tap-highlight-color: transparent; transition: transform .2s ease; }
.bn_s:active { transform: scale(.99); }
.bn_glow { position: absolute; right: -40px; top: 50%; width: 220px; height: 220px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--g), transparent); opacity: .42; pointer-events: none; }
.bn_cre { position: absolute; right: 14px; top: 0; bottom: 0; width: 120px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bn_cv { width: 96px !important; height: 96px !important; margin: 0 !important; }
.bn_ic { width: 72px; height: 72px; object-fit: contain; display: block; }
.bn_gift { width: 62px; height: 62px; display: block; }
.bn_gift svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bn_faces { display: flex; }
.bn_faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #1b1820; margin-left: -12px; }
.bn_faces img:first-child { margin-left: 0; }
.bn_t { position: relative; z-index: 1; max-width: 190px; font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.bn_act { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.bn_link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.bn_link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn_dots { display: inline-flex; align-items: center; gap: 5px; }
.bn_dot { position: relative; display: block; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.bn_dot.is-on { width: 18px; }
.bn_dot.is-on::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #fff; transform-origin: left center; }
.bn_dot.is-on.is-run::after { animation: bnFill 7s linear forwards; }
@keyframes bnFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 360px) { .bn_t { font-size: 17px; max-width: 170px; } }
@media (prefers-reduced-motion: reduce) { .bn_dot.is-on.is-run::after { animation: none; } }
/* Back, 29.10 (owner): inside Telegram (html.tg-back, app.js) its own Back button at the top takes you back,
so the pages draw no arrows. Each page ends with a button that takes you on (.pg-done and the pages' own) */
.tg-back .back[data-back], .tg-back .v2-pf_back { display: none !important; }
.tg-back .v2-pp_top { padding-bottom: 0; }
.tg-back .top--chat .who { margin-left: 4px; }
.pg-done { display: flex; width: 100%; height: 52px; margin: 26px 0 4px; align-items: center; justify-content: center; }
/* 29.10 (owner): "+ Hello" after a like has no purple pill: the purple hand on purple was invisible.
The hand and the words sit right on the card. Hold a post to quote it */
.v2-of, .v2-of.is-done { background: transparent !important; color: var(--ink); padding: 0 8px 0 4px; }
.v2-of.is-done { color: var(--mute); }
.v2-of_bar { left: 6px; right: 8px; background: rgba(27, 24, 32, .22); }
.js-fd-list .fdp { -webkit-touch-callout: none; transition: transform .25s var(--spring, ease); }
.js-fd-list .fdp.is-hold { transform: scale(.985); }
/* 29.10 (owner): two pills under a post. Heart: outline, your like tints the pill red. Hand: a line drawing,
once given it fills with the chameleon and the pill takes a light chameleon tint. Numbers stay dark */
.is-v2 .fdp_a.v2-sx .v2-sup, .is-v2 .fdp_a.v2-sx .v2-of { display: none !important; }
.v2-rx { gap: 8px; }
.v2-rx_c { height: 32px; padding: 0 12px; gap: 6px; font-size: 14px; font-weight: 550; color: var(--ink); background: rgba(27, 24, 32, .05); box-shadow: none; }
.v2-rx_c span { color: var(--ink); }
.v2-rx_c.is-mine { color: var(--ink); box-shadow: none; }
.v2-rx_c svg { width: 17px; height: 17px; fill: none; stroke: rgba(27, 24, 32, .62); stroke-width: 1.9; stroke-linejoin: round; transition: fill .25s, stroke .25s; }
.v2-rx_c--like.is-mine { background: rgba(229, 72, 77, .13); }
.v2-rx_c--like.is-mine svg { fill: #e5484d; stroke: #e5484d; }
.v2-rx_c .v2-hl { width: 18px; height: 18px; display: block; flex: none; color: rgba(27, 24, 32, .62); }
.v2-rx_c .v2-hl path { stroke-width: 13; }
.v2-rx_c--hand.is-mine { background: linear-gradient(120deg, rgba(236, 143, 220, .2), rgba(148, 97, 240, .16), rgba(127, 168, 255, .2), rgba(255, 185, 143, .2), rgba(236, 143, 220, .2)) 0 0 / 300% 100%; animation: lvMove 9s linear infinite; }
.v2-hg { position: relative; display: block; flex: none; width: 19px; height: 19px; isolation: isolate; }
.v2-hg img { display: block; width: 100%; height: 100%; }
.v2-hg i { position: absolute; inset: 0; mix-blend-mode: color; background: linear-gradient(120deg, #ec8fdc, #9461f0, #7fa8ff, #ffb98f, #ec8fdc) 0 0 / 300% 100%; animation: lvMove 4s linear infinite;
-webkit-mask: url(./img/purple-wave-hand-tight.svg?v=1) center / contain no-repeat; mask: url(./img/purple-wave-hand-tight.svg?v=1) center / contain no-repeat; }
.v2-rx_c.is-pop svg, .v2-rx_c.is-pop .v2-hg { animation: v2-jelly .6s cubic-bezier(.22, 1, .36, 1); }
.v2-rx_c--hand.is-pop { animation: lvMove 9s linear infinite, v2HandLit .9s ease-out; }
@keyframes v2HandLit { 0% { box-shadow: 0 0 0 0 rgba(148, 97, 240, .45); } 100% { box-shadow: 0 0 0 10px rgba(148, 97, 240, 0); } }
@media (prefers-reduced-motion: reduce) { .v2-rx_c--hand.is-mine, .v2-hg i { animation: none; } }
/* 29.10 (owner): the level badge sits right after the name, on its line */
.fdp_h .v2-lvb { margin-left: -3px; align-self: center; vertical-align: 0; position: relative; top: 0; }
/* 29.10 (owner): every task in the sheet is its own block, like the hot post card */
.is-v2 .js-v2-sheet .tasks { display: flex; flex-direction: column; gap: 8px; }
.is-v2 .js-v2-sheet .tasks > li, .is-v2 .js-v2-sheet .v2-plan { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px rgba(27, 24, 32, .07); }
.is-v2 .js-v2-sheet .tasks > li { padding: 12px 14px 12px 14px; border: 0; }
.is-v2 .js-v2-sheet .tasks > li::before, .is-v2 .js-v2-sheet .tasks > li::after { display: none; }
.is-v2 .js-v2-sheet .v2-plan { padding: 12px 14px; margin-bottom: 8px; }
.is-v2 .js-v2-sheet .v2-plan[hidden], .is-v2 .js-v2-sheet .tasks > li[hidden] { display: none !important; }
/* 29.10 (owner): the forms on the balance sit in blocks of their own */
.is-v2 .bx .bx_i { background: #fff; box-shadow: 0 0 0 1px rgba(27, 24, 32, .06), 0 8px 20px -14px rgba(27, 24, 32, .35); }
/* the Forms page: every form in its own block, a tap opens its sheet over the page */
.fpg-on .sheet.js-msheet { z-index: 200 !important; }
.fp_s { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 0 36px; border-bottom: 1px solid rgba(27, 24, 32, .08); }
.fp_s:last-of-type { border-bottom: 0; }
.fp_cv { width: 210px !important; height: 210px !important; margin: 0 auto 10px !important; cursor: pointer; }
.lrn-fp .fp_s h2 { margin: 0 0 6px; font-size: 24px; font-weight: 650; letter-spacing: -.01em; }
.lrn-fp .fp_p { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 10px; font-size: 15px; font-weight: 550; color: var(--ink); }
.fp_p img { display: block; }
.fp_dot { color: var(--mute); margin: 0 3px; }
.lrn-fp .fp_d { margin: 0 0 20px; max-width: 320px; font-size: 16px; line-height: 1.5; color: #4f4a56; }
.fp_go { height: 48px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.is-v2 .js-hm-tok .inv.inv-pop { display: flex !important; margin: 4px 0 18px; background: #fff; box-shadow: 0 0 0 1px rgba(27, 24, 32, .07); }
.lrn-fp .lrn_body { padding-top: 28px; }
.lrn-fp .lrn_body > h1, .lrn-fp .lrn_body > .lrn_lead { text-align: center; }
/* 29.10 (owner): Telegram's bar and the page meet without a seam: the top of the page is exactly the bar's colour
(#f6f3ee) and the chameleon wash fades in only below it */
.v2-aura { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, #000 340px); mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, #000 340px); }
/* 29.10 (owner): a thinner level ring, the level written along its bottom curve; the text cuts the ring with the page colour */
.is-v2 .v2-pf_ring circle:first-of-type, .is-v2 .v2-pf_ring circle + circle { stroke-width: 2.2 !important; }
.v2-arcd .v2-pf_lvn, .v2-arcd .v2-ring_lv { display: none !important; }
.v2-arc_t, .v2-arc_h { font: 600 10.5px/1 -apple-system, system-ui, sans-serif; letter-spacing: .03em; dominant-baseline: central; }
.v2-arc_t { fill: rgba(27, 24, 32, .62); stroke: none !important; }
.v2-arc_h { fill: var(--bg, #f6f3ee); stroke: var(--bg, #f6f3ee) !important; stroke-width: 7px !important; stroke-linejoin: round; }
.v2-pp_h .v2-ring { overflow: visible; }
.v2-arc { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; pointer-events: none; fill: none; }
.v2-arc circle { stroke: rgba(27, 24, 32, .12); stroke-width: 1.6; }
.v2-arc .v2-arc_t, .v2-arc .v2-arc_h { font-size: 10px; }
.v2-arcd .v2-pf_ring, .v2-arcd { overflow: visible !important; }
/* 29.10: the partner task row steps aside without leaving the layout, so AdsGram can still draw a task into it */
.is-v2 .v2-plan.v2-gone { position: absolute !important; left: -9999px !important; width: calc(100% - 32px); visibility: hidden !important; pointer-events: none !important; }