/* The app, recreated: a 393 x 852 point iPhone screen, drawn at true size
   and scaled down by --s. Sizes, colours and timings follow the iOS code. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Device ---------- */
:where(.phone) { --s: 0.78; } .phone { position: relative; width: max-content; }
.bezel {
  padding: calc(12px * var(--s)); border-radius: calc(68px * var(--s));
  background: linear-gradient(145deg, #3a3d40, #16181a 40%, #26292c 70%, #0e0f10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 calc(60px * var(--s)) calc(120px * var(--s)) rgba(0, 0, 0, 0.6), 0 0 0 calc(2px * var(--s)) #0b0c0d;
}
.screen { position: relative; overflow: hidden; width: calc(393px * var(--s)); height: calc(852px * var(--s)); border-radius: calc(56px * var(--s)); background: #0a0a0b; isolation: isolate; }
.app {
  position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform: scale(var(--s)); transform-origin: 0 0;
  font: 400 15px/1.35 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; color: #fff; overflow: hidden; background: #0a0a0b;
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-align: left;
}
:where(.app) p { margin: 0; }
.app button:focus:not(:focus-visible) { outline: none; }
.app button:focus-visible { outline: 2px solid rgba(52, 192, 143, 0.8); outline-offset: 2px; }
:where(.app) button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.app .lbl { font-size: 13px; font-weight: 600; color: #888; padding: 0 8px; letter-spacing: 0; }
.app .lbl.gap { margin: 24px 0 8px; }
.app .lbl.gap2 { margin: 26px 0 8px; }
.app .card { background: #1c1c1e; border-radius: 26px; padding: 18px; }
.app .gld { color: #D4A574; }
.app .grn { color: #1D9E75; }
.app .ic.gold { color: #D4A574; }
.app .ic.mute { color: #888; }

/* background: four soft circles that drift (GradientBackground.js) */
.a-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.a-bg i { position: absolute; border-radius: 50%; }
.a-bg i:nth-child(1) { width: 432px; height: 432px; top: -196px; left: -98px; background: rgba(74, 222, 128, 0.157); animation: b1 5s ease-in-out infinite alternate; }
.a-bg i:nth-child(2) { width: 314px; height: 314px; top: -59px; right: -118px; background: rgba(74, 222, 128, 0.094); animation: b2 7s ease-in-out infinite alternate; }
.a-bg i:nth-child(3) { width: 354px; height: 354px; top: 128px; left: -59px; background: rgba(74, 222, 128, 0.078); animation: b3 9s ease-in-out infinite alternate; }
.a-bg i:nth-child(4) { width: 236px; height: 236px; top: 469px; right: -79px; background: rgba(74, 222, 128, 0.063); animation: b4 6s ease-in-out infinite alternate; }
@keyframes b1 { to { transform: translate(20px, 30px) scale(1.15); } }
@keyframes b2 { from { transform: scale(1.05); } to { transform: translate(-30px, 25px) scale(0.9); } }
@keyframes b3 { from { transform: translate(-10px, 0) scale(0.95); } to { transform: translate(15px, -20px) scale(1.1); } }
@keyframes b4 { from { transform: translate(-20px, 0); } to { transform: translate(10px, -15px); } }

/* status bar */
.a-status { position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 50px; font-weight: 600; font-size: 17px; pointer-events: none; }
.a-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.a-sys { display: flex; gap: 6px; align-items: center; }
.sig { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.sig b { width: 3px; border-radius: 1px; background: #fff; }
.sig b:nth-child(1) { height: 4px; } .sig b:nth-child(2) { height: 6px; } .sig b:nth-child(3) { height: 9px; } .sig b:nth-child(4) { height: 12px; }
.wifi { width: 16px; height: 12px; background: radial-gradient(circle at 50% 100%, #fff 0 2.5px, transparent 3px), radial-gradient(circle at 50% 100%, transparent 0 4.5px, #fff 5px 6.5px, transparent 7px), radial-gradient(circle at 50% 100%, transparent 0 8.5px, #fff 9px 10.5px, transparent 11px); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bat { width: 26px; height: 12.5px; border: 1.2px solid rgba(255, 255, 255, 0.45); border-radius: 4px; padding: 1.5px; position: relative; }
.bat b { display: block; height: 100%; width: 80%; border-radius: 2px; background: #fff; }
.a-home-ind { position: absolute; z-index: 40; bottom: 8px; left: 50%; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); pointer-events: none; }

/* views */
.a-views { position: absolute; inset: 0; z-index: 1; }
.a-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.33, 1, 0.68, 1), visibility 0s 0.32s; }
.tab-home .v-home, .tab-crew .v-crew, .tab-me .v-me { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.a-scroll { position: absolute; top: 54px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 8px 16px 130px; scrollbar-width: none; }
.a-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px); mask-image: linear-gradient(180deg, transparent 0, #000 8px); }
.a-view::after, .m0::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, 0.92) 62%, #0a0a0b); }
.a-scroll::-webkit-scrollbar { display: none; }
.try-phone .a-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.v-crew .a-scroll, .v-me .a-scroll { padding-left: 20px; padding-right: 20px; }
.v-crew .a-scroll { padding-top: 18px; }

/* tab bar (floating glass capsule) */
.a-tabs { position: absolute; z-index: 20; left: 22px; right: 22px; bottom: 24px; height: 62px; border-radius: 31px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 4px;
  background: rgba(30, 30, 34, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.a-tabpill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 26px; background: rgba(255, 255, 255, 0.12); transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); }
.tab-crew .a-tabpill { transform: translateX(100%); }
.tab-me .a-tabpill { transform: translateX(200%); }
.a-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #888; font-size: 10px; font-weight: 600; transition: color 0.2s; }
.a-tabs button .ic { font-size: 22px; }
.a-tabs button.act { color: #1D9E75; }
.a-tabs button.act .ic { fill: currentColor; }

/* ---------- Home ---------- */
.h-head { text-align: center; margin-bottom: 24px; }
.h-date { font-size: 14px; font-weight: 600; color: #888; }
.h-day { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; color: #F59E0B; }
.qt { margin-top: 16px; font-size: 30px; line-height: 36.6px; font-style: italic; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.qt .qm { color: #F59E0B; font-style: normal; font-weight: 800; padding: 0 2px; }
.qt.left { margin-top: 0; text-align: left; font-size: 32px; line-height: 38px; }
.qt.sm { font-size: 20px; line-height: 25px; }

.h-nudge { display: flex; gap: 10px; align-items: center; overflow: hidden; max-height: 0; opacity: 0; margin-bottom: 0; padding: 0 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid transparent;
  transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.4s ease 0.1s, margin 0.5s cubic-bezier(0.33, 1, 0.68, 1), padding 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
.h-nudge .ic { font-size: 18px; color: #1D9E75; transform-origin: 70% 90%; }
.h-nudge p { font-size: 13px; line-height: 19px; color: #888; }
.h-nudge b { color: #e5e5ea; font-weight: 600; }
.show-nudge .h-nudge, .try-phone .h-nudge { max-height: 80px; opacity: 1; margin-bottom: 16px; padding: 16px; border-color: rgba(255, 255, 255, 0.08); }
.show-nudge .h-nudge .wave { animation: wave 1.1s ease-in-out 0.5s 2; }
@keyframes wave { 0% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-12deg); } 80% { transform: rotate(8deg); } 100% { transform: rotate(0); } }

.seal { position: relative; transition: box-shadow 0.5s; }
.focus-seal .seal { animation: focus 2.4s ease-in-out infinite; }
@keyframes focus { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(29, 158, 117, 0.55), 0 0 24px rgba(29, 158, 117, 0.2); } 50% { box-shadow: 0 0 0 2.5px rgba(52, 192, 143, 0.9), 0 0 48px rgba(29, 158, 117, 0.45); } }
.seal .kick { font-size: 13px; font-weight: 600; color: #888; }
.seal .sq { margin-top: 8px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.seal .meta { margin-top: 4px; font-size: 13px; color: #888; }
.seal-btns { display: flex; gap: 10px; margin-top: 16px; }
.seal-btns button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 99px; padding: 14px 0; font-size: 17px; font-weight: 700; transition: transform 0.15s; }
.seal-btns button:active { transform: scale(0.97); }
.seal-btns .ic { font-size: 19px; stroke-width: 2.4; }
.b-did { background: #1D9E75 !important; color: #fff; }
.glassbtn { background: #232326 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); color: #e5e5ea !important; }
.seal-done { display: none; align-items: center; gap: 14px; }
.sealed .seal-open { display: none; }
.sealed .seal-done { display: flex; }
.popped .seal-done { animation: rise 0.6s cubic-bezier(0.33, 1, 0.68, 1); }
.done-ic { width: 44px; height: 44px; border-radius: 22px; flex: none; display: grid; place-items: center; background: rgba(29, 158, 117, 0.18); border: 1px solid rgba(29, 158, 117, 0.45); color: #30D158; font-size: 22px; }
.done-ic .ic { stroke-width: 2.6; }
.popped .done-ic { animation: popin 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.seal-done b { display: block; font-size: 17px; font-weight: 700; }
.seal-done .dl { display: block; margin-top: 3px; font-size: 15px; color: #c7c7cc; }
.seal-done small { display: block; margin-top: 3px; font-size: 13px; color: #888; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popin { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

.sec-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; padding: 0 8px; }
.sec-row .lbl { padding: 0; }
.sec-row .view { font-size: 14px; font-weight: 600; color: #1D9E75; }
.chap-row { display: grid; grid-template-columns: 2fr 2fr 3fr 3fr; gap: 4px; margin-top: 12px; }
.chap-row span { font-size: 12px; color: #888; }
.chap-row i { display: block; height: 5px; border-radius: 3px; margin-top: 6px; }
.chap-row .c1 i { background: #60A5FA; }
.chap-row .c2 i { background: #F59E0B; }
.chap-row .c3 i { background: rgba(74, 222, 128, 0.27); }
.chap-row .c4 i { background: rgba(167, 139, 250, 0.27); }
.chap-row .now { color: #F59E0B; font-weight: 700; }
.jdots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; align-items: center; }
.jd { width: 9px; height: 9px; border-radius: 5px; position: relative; }
.jd.did { background: #1D9E75; }
.jd.didnt { background: #E0A458; }
.jd.missed { background: #3a3a3c; }
.jd.future { background: rgba(255, 255, 255, 0.08); }
.jd.yday { width: 11px; height: 11px; margin: -1px; border: 2px solid #F59E0B; }
.jd.today { background: #F59E0B; }
.jd.today::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #F59E0B; animation: ripple 1.6s cubic-bezier(0.5, 1, 0.89, 1) infinite; }
@keyframes ripple { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.4); opacity: 0; } }
.popped [data-yday] { animation: popin 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both; }
.thought b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.thought p { font-size: 15px; line-height: 21px; color: #c7c7cc; }

/* ---------- Seal sheet ---------- */
.a-scrim { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.sheet-open .a-scrim { opacity: 1; pointer-events: auto; }
.a-sheet { position: absolute; z-index: 51; left: 8px; right: 8px; bottom: 8px; padding: 10px 22px 26px; border-radius: 44px; background: #1c1c1e; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(110%); transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1); }
.sheet-open .a-sheet { transform: none; }
.grab { display: block; width: 36px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); margin: 0 auto 14px; }
.s-kick { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #1D9E75; }
.s-q { text-align: center; margin-top: 8px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.s-habit { text-align: center; margin-top: 4px; font-size: 18px; font-weight: 600; font-style: italic; color: #c7c7cc; }
.s-ans { display: flex; gap: 8px; margin-top: 16px; }
.s-ans button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 0; border-radius: 12px; font-size: 14px; font-weight: 700; color: #666; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background 0.25s, color 0.25s; }
.s-ans .ic { font-size: 18px; }
.ans-did [data-ans="did"] { background: #1D9E75; color: #fff; box-shadow: none; }
.ans-didnt [data-ans="didnt"] { background: #8B3A3A; color: #fff; box-shadow: none; }
.s-lbl { margin: 18px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #888; }
.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mood { --mc: #888; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px; border-radius: 12px; background: rgba(255, 255, 255, 0.06) !important; box-shadow: inset 0 0 0 1px transparent; color: #666 !important; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.mood .ic { font-size: 22px; }
.mood span { font-size: 9px; font-weight: 600; color: #888; }
.mood.sel { background: color-mix(in srgb, var(--mc) 10%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 34%, transparent); color: var(--mc) !important; animation: tapme 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mood.sel span { color: var(--mc); }
@keyframes tapme { 0% { transform: scale(0.88); } 100% { transform: scale(1); } }
.m-content { --mc: #4ADE80; } .m-great { --mc: #FACC15; } .m-grateful { --mc: #F472B6; } .m-calm { --mc: #2DD4BF; } .m-strong { --mc: #F97316; }
.m-onfire { --mc: #EF4444; } .m-ok { --mc: #60A5FA; } .m-unsure { --mc: #A78BFA; } .m-meh { --mc: #9CA3AF; } .m-tired { --mc: #818CF8; }
.m-down { --mc: #93C5FD; } .m-frustrated { --mc: #FB923C; } .m-anxious { --mc: #FBBF24; } .m-sad { --mc: #7DD3FC; } .m-drained { --mc: #6B7280; }
.s-input { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 15px; color: #666; }
.s-input small { font-size: 11px; }
.s-cta { width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; border-radius: 12px; background: #1D9E75 !important; color: #fff !important; font-size: 16px; font-weight: 700; opacity: 0.4; transition: opacity 0.25s, transform 0.15s; }
.s-cta .ic { font-size: 16px; stroke-width: 2.2; }
.has-ans .s-cta { opacity: 1; }
.s-cta:active { transform: scale(0.98); }
.s-hint { text-align: center; margin-top: 8px; font-size: 11px; color: #666; }

/* ---------- Crew ---------- */
.c-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.c-host { margin-top: 6px; font-size: 15px; color: #888; }
.c-invite { width: 46px; height: 46px; flex: none; border-radius: 23px; display: grid; place-items: center; background: #1D9E75 !important; color: #fff; font-size: 20px; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 99px; background: rgba(32, 32, 36, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.seg-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: rgba(255, 255, 255, 0.14); transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1); }
.seg-on-w .seg-pill { transform: translateX(100%); }
.seg button { position: relative; padding: 9px 0; font-size: 15px; font-weight: 600; color: #888; transition: color 0.2s; }
.seg-on-y [data-seg="y"], .seg-on-w [data-seg="w"] { color: #fff; font-weight: 700; }
.seg-on-y .seg-w, .seg-on-w .seg-y { display: none; }
.seg-y, .seg-w { animation: segin 0.24s cubic-bezier(0.5, 1, 0.89, 1); }
@keyframes segin { from { opacity: 0; transform: translateY(6px); } }
.card.list { padding: 0 0 0 16px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.4s; }
.row:last-child { border-bottom: 0; }
.av { --c: #60A5FA; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.av.a0 { --c: #60A5FA; } .av.a1 { --c: #F59E0B; } .av.a2 { --c: #C084FC; } .av.a3 { --c: #4ADE80; } .av.a4 { --c: #F472B6; }
.rc { flex: 1; min-width: 0; }
.rc b { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; }
.rc b em { font-style: normal; font-size: 14px; font-weight: 500; color: #888; }
.rc b .ic { font-size: 15px; }
.rc small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px; color: #888; }
.rc small .ic { font-size: 13px; stroke-width: 2.4; }
.rc small.grn { color: #1D9E75; }
.rc small.gld { color: #D4A574; }
.chips { display: flex; gap: 8px; }
.chips.mine { opacity: 0.45; }
.chip { display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.06) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.chip .ic { font-size: 16px; }
.chip b { font-size: 14px; font-weight: 600; }
.ch-h .ic { color: #F87171; } .ch-f .ic { color: #FB923C; }
.chip.on-react .ic { fill: currentColor; animation: beat 0.6s ease-out; }
@keyframes beat { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } }
.app:not(.sealed) .me-row { display: none; }
.focus-me .me-row { background: rgba(29, 158, 117, 0.14); margin-left: -16px; padding-left: 16px; animation: rowin 0.8s cubic-bezier(0.33, 1, 0.68, 1); }
@keyframes rowin { from { opacity: 0; transform: translateY(14px); background: rgba(29, 158, 117, 0.4); } }
.nudge { display: flex; align-items: center; padding: 7px 13px; border-radius: 99px; background: #232326 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); color: #1D9E75 !important; font-size: 14px; font-weight: 700; transition: background 0.25s; }
.nudge span { display: none; align-items: center; gap: 5px; }
.nudge .ic { font-size: 14px; }
.nudge .n-a { display: flex; }
.nudge.sent { background: #1D9E75 !important; color: #fff !important; animation: npop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nudge.sent .n-a { display: none; } .nudge.sent .n-b { display: flex; }
.nudge.sent .n-b .ic { animation: wave 1.1s ease-in-out; transform-origin: 70% 90%; }
.nudge.done { background: none !important; box-shadow: none; color: #888 !important; padding-right: 0; animation: rise 0.26s ease; }
.nudge.done .n-a { display: none; } .nudge.done .n-c { display: flex; }
@keyframes npop { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
.wdots { display: flex; gap: 6px; margin-top: 6px; }
.wd { width: 12px; height: 12px; border-radius: 6px; }
.wd.g { background: #1D9E75; } .wd.a { background: #E0A458; } .wd.x { background: #3a3a3c; } .wd.o { background: rgba(255, 255, 255, 0.07); }
.wr { font-size: 14px; color: #888; }
.card.sum { margin-top: 14px; border-radius: 22px; padding: 16px; text-align: center; font-size: 15px; color: #e5e5ea; }
.card.sum b { font-weight: 800; color: #fff; }
.c-priv { display: flex; gap: 8px; margin-top: 28px; padding: 0 8px; font-size: 13px; line-height: 18px; color: #888; }
.c-priv .ic { font-size: 14px; color: #1D9E75; margin-top: 2px; }

/* ---------- Me ---------- */
.p-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.p-name { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.p-name span { font-size: 17px; font-weight: 600; color: #1D9E75; letter-spacing: 0; margin-left: 6px; }
.p-mail { margin-top: 4px; font-size: 16px; color: #888; }
.p-av { width: 46px; height: 46px; border-radius: 23px; display: grid; place-items: center; font-style: normal; font-size: 20px; font-weight: 700; color: #4ADE80; background: rgba(29, 158, 117, 0.18); border: 1px solid rgba(29, 158, 117, 0.45); }
.card.stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 0; text-align: center; }
.stats b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.stats small { font-size: 13px; color: #888; }
.card.cur { display: flex; align-items: center; gap: 10px; }
.cur-in { flex: 1; min-width: 0; }
.cur-meta { display: block; margin-top: 6px; font-size: 15px; color: #888; }
.cur-meta b { color: #F59E0B; font-weight: 700; }
.cur small { display: block; margin-top: 4px; font-size: 13px; color: #888; }
.cur em { display: block; margin-top: 8px; font-size: 17px; color: #e5e5ea; }
.app .chev { font-size: 20px; color: #666; }
.prow { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.prow:last-child { border: 0; }
.prow > .ic:first-child { font-size: 18px; }
.prow span { flex: 1; min-width: 0; }
.prow b { display: block; font-size: 17px; font-weight: 500; }
.prow small { display: block; margin-top: 2px; font-size: 14px; color: #888; }
.srow { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 16px 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 17px; transition: opacity 0.25s; }
.srow:last-child { border: 0; }
.srow.off { opacity: 0.4; }
.srow .val { display: flex; align-items: center; gap: 4px; color: #888; }
.srow .val .chev { font-size: 16px; }
.sw { width: 51px; height: 31px; border-radius: 16px; background: #39393d !important; position: relative; transition: background 0.25s; flex: none; }
.sw i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); }
.sw.on { background: #1D9E75 !important; }
.sw.on i { transform: translateX(20px); }
.card.gap3 { margin-top: 24px; }
.del { margin-top: 24px; text-align: center; font-size: 17px; color: #FF6B6B; }
.ver { margin-top: 8px; text-align: center; font-size: 13px; color: #666; }

/* ---------- Moments (auto-play) ---------- */
.m-scr { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s 0.6s; }
.show-0 .m0, .show-1 .m1, .show-2 .m2, .show-3 .m3 { opacity: 1; visibility: visible; transition-delay: 0s; }
.m0 .a-tabs { pointer-events: none; }
.m0 .h-nudge { max-height: 0; }
.go.show-0 .m0 .h-nudge { max-height: 80px; opacity: 1; margin-bottom: 16px; padding: 16px; border-color: rgba(29, 158, 117, 0.5); background: rgba(29, 158, 117, 0.12); transition-delay: 0.7s; }
.go.show-0 .m0 .h-nudge .wave { animation: wave 1.1s ease-in-out 1.3s 3; }

.inv { position: absolute; inset: 0; padding: 66px 24px 0; text-align: center; }
.inv-top { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #888; }
.inv-av { width: 76px; height: 76px; margin: 22px auto 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 32px; font-weight: 800; color: #F59E0B; background: rgba(245, 158, 11, 0.16); }
.inv-line { margin-top: 14px; font-size: 20px; font-weight: 700; }
.inv-meta { margin-top: 4px; font-size: 13px; color: #888; }
.inv .lbl { display: block; text-align: left; margin: 22px 0 8px; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 700; padding: 0; }
.inv-card { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.inv-card .qt { margin: 0; font-size: 22px; line-height: 28px; }
.inv-card.row2 { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 15px; color: #c7c7cc; }
.inv-card.row2 b { color: #fff; }
.inv-card .ic { font-size: 18px; color: #1D9E75; }
.inv-ctx { margin-top: 18px; font-size: 13px; line-height: 19px; color: #888; }
.inv-ctx b { color: #1D9E75; }
.inv-btns { position: absolute; left: 24px; right: 24px; bottom: 44px; display: flex; gap: 10px; }
.inv-btns span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; border-radius: 14px; font-size: 17px; font-weight: 700; }
.inv-btns .no { flex: 1; background: #232326; color: #e5e5ea; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.inv-btns .yes { flex: 1.6; background: #1D9E75; color: #fff; animation: breathe-o 4s linear infinite; }
.inv-btns .yes .ic { font-size: 18px; }
@keyframes breathe-o { 0%, 100% { opacity: 1; } 15% { opacity: 0.93; } 35% { opacity: 0.7; } 50% { opacity: 0.6; } 65% { opacity: 0.7; } 85% { opacity: 0.93; } }
.go.show-1 .m1 .inv > * { animation: rise 0.7s cubic-bezier(0.33, 1, 0.68, 1) both; }
.go.show-1 .m1 .inv > :nth-child(2) { animation: popin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }
.go.show-1 .m1 .inv > :nth-child(n+3) { animation-delay: 0.3s; }
.go.show-1 .m1 .inv > :nth-child(n+5) { animation-delay: 0.45s; }
.go.show-1 .m1 .inv > :nth-child(n+7) { animation-delay: 0.6s; }
.go.show-1 .m1 .inv > :nth-child(n+9) { animation-delay: 0.75s; }
.go.show-1 .m1 .inv > .inv-btns { animation: rise 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.9s both, none; }

.cc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 150px 34px 56px; text-align: center; background: #0a0a0b; }
.cc-wash { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 18%, rgba(245, 158, 11, 0.32), rgba(245, 158, 11, 0) 70%); }
.cc > * { position: relative; }
.cc-ring { width: 116px; height: 116px; border-radius: 50%; border: 2px solid #F59E0B; display: grid; place-items: center; color: #F59E0B; font-size: 46px; box-shadow: 0 0 60px rgba(245, 158, 11, 0.3); }
.cc-badge { position: absolute; right: -4px; bottom: 2px; width: 36px; height: 36px; border-radius: 50%; background: #F59E0B; color: #fff; display: grid; place-items: center; font-size: 18px; border: 3px solid #0a0a0b; }
.cc-badge .ic { stroke-width: 2.8; }
.cc-meta { margin-top: 34px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; color: #F59E0B; }
.cc-name { margin-top: 10px; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: #F59E0B; }
.cc-done { margin-top: 4px; font-size: 26px; font-weight: 700; }
.cc-sp { flex: 1; }
.cc-weeks { font-size: 17px; font-weight: 600; }
.cc-quote { margin-top: 10px; font-size: 16px; line-height: 24px; font-style: italic; color: #c7c7cc; }
.cc-quote span { color: #F59E0B; font-style: normal; font-weight: 800; }
.cc-close { margin-top: 30px; padding: 12px 44px; border-radius: 99px; border: 1.5px solid #F59E0B; color: #F59E0B; font-size: 16px; font-weight: 700; }
.go.show-2 .cc-wash { animation: fadein 1.2s ease both; }
.go.show-2 .cc-ring { animation: popin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }
.go.show-2 .cc-badge { animation: popin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both; }
.go.show-2 .cc-meta, .go.show-2 .cc-name, .go.show-2 .cc-done { animation: rise 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0.5s both; }
.go.show-2 .cc-weeks, .go.show-2 .cc-quote, .go.show-2 .cc-close { animation: fadein 1s ease 1.2s both; }
@keyframes fadein { from { opacity: 0; } }

.rcx { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 150px 28px 0; text-align: center; overflow: hidden; background: radial-gradient(110% 60% at 50% 28%, rgba(212, 165, 116, 0.22), rgba(212, 165, 116, 0) 70%), #0c0b0a; }
.rcx > p, .rcx > span, .rcx > div { position: relative; z-index: 1; }
.rc-kick { font-size: 12px; font-weight: 800; letter-spacing: 4px; color: #D4A574; }
.rc-medal { margin-top: 24px; width: 100px; height: 100px; border-radius: 50%; border: 1.5px solid #D4A574; display: grid; place-items: center; color: #D4A574; font-size: 46px; animation: medal 3s ease-in-out infinite; }
@keyframes medal { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.35), 0 0 40px rgba(212, 165, 116, 0.2); } 50% { box-shadow: 0 0 0 14px rgba(212, 165, 116, 0), 0 0 70px rgba(212, 165, 116, 0.4); } }
.rc-lbl { margin-top: 30px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #888; }
.rc-habit { margin-top: 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.rc-sub { margin-top: 10px; font-size: 15px; line-height: 22px; font-style: italic; color: #a1a1a6; }
.rc-stats { margin-top: 26px; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 0; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.3); }
.rc-stats b { display: block; font-size: 26px; font-weight: 800; color: #D4A574; }
.rc-stats em { font-style: normal; font-size: 14px; color: #888; font-weight: 600; }
.rc-stats small { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #888; }
.rc-share { margin-top: 18px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; border-radius: 14px; border: 1.5px solid #D4A574; color: #D4A574; font-size: 16px; font-weight: 700; }
.rc-share .ic { font-size: 17px; }
.go.show-3 .rcx > :not(.cf) { animation: rise 0.8s cubic-bezier(0.33, 1, 0.68, 1) both; }
.go.show-3 .rc-medal { animation: popin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both, medal 3s ease-in-out 1.1s infinite; }
.go.show-3 .rc-lbl, .go.show-3 .rc-habit { animation-delay: 0.5s; }
.go.show-3 .rc-sub { animation-delay: 0.7s; }
.go.show-3 .rc-stats { animation-delay: 0.9s; }
.go.show-3 .rc-share { animation-delay: 1.1s; }
.cf { position: absolute; z-index: 0; top: -20px; left: var(--x); width: 7px; height: 12px; border-radius: 2px; opacity: 0; }
.go.show-3 .cf { animation: fall var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite; }
@keyframes fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 900px) rotate(var(--rot)); } }
.cf0 { background: #D4A574; } .cf1 { background: #E4C48A; } .cf2 { background: #F5E3C2; } .cf3 { background: #fff; }
.cf4 { background: #60A5FA; } .cf5 { background: #F59E0B; } .cf6 { background: #4ADE80; } .cf7 { background: #A78BFA; }

/* ---------- Journey (JourneyScreen.js) ---------- */
.sec-row button { cursor: pointer; }
.try-phone .view { animation: breathe-o 4s linear infinite; }
.a-journey { position: absolute; inset: 0; z-index: 25; overflow: hidden; background: #0a0a0b; transform: translateY(102%); transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
.journey-open .a-journey { transform: none; }
.jbg i:nth-child(1) { background: rgba(245, 158, 11, 0.12); }
.jbg i:nth-child(2) { background: rgba(245, 158, 11, 0.07); }
.jbg i:nth-child(3) { background: rgba(245, 158, 11, 0.078); }
.jbg i:nth-child(4) { background: rgba(245, 158, 11, 0.063); }
.j-head { position: absolute; z-index: 2; top: 54px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.j-close { width: 24px; height: 24px; display: grid; place-items: center; font-size: 24px; color: #fff; }
.j-hc { text-align: center; }
.j-title { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #666; }
.j-habit { margin-top: 2px; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.j-week { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: #F59E0B; }
.j-sp { width: 24px; }
.j-tag { position: absolute; z-index: 2; top: 140px; left: 0; right: 0; text-align: center; font-size: 12px; font-style: italic; letter-spacing: 0.3px; color: #888; }
.j-scroll { position: absolute; top: 166px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 10px 24px 70px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px); mask-image: linear-gradient(180deg, transparent 0, #000 12px); }
.j-scroll::-webkit-scrollbar { display: none; }
.try-phone .j-scroll { overflow-y: auto; }
.j-sec { --k: #60A5FA; display: flex; flex-direction: column; margin-bottom: 4px; }
.j-sec.k2 { --k: #F59E0B; } .j-sec.k3 { --k: #4ADE80; } .j-sec.k4 { --k: #A78BFA; }
.j-sec.now { margin: 0 -8px 4px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--k) 3%, transparent); border: 1px solid color-mix(in srgb, var(--k) 12.5%, transparent); }
.j-quote { display: flex; gap: 10px; margin-bottom: 24px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid color-mix(in srgb, var(--k) 19%, transparent); }
.j-quote > .ic { font-size: 14px; color: var(--k); margin-top: 1px; }
.j-quote b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.2px; color: var(--k); }
.j-quote small { display: block; font-size: 13px; line-height: 19px; color: #888; }
.j-gate { align-self: flex-start; display: inline-flex; align-items: center; margin: 0 0 16px 32px; padding: 8px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.right .j-gate { align-self: flex-end; margin: 0 32px 16px 0; }
.now .j-gate { background: color-mix(in srgb, var(--k) 6%, transparent); border-color: color-mix(in srgb, var(--k) 25%, transparent); }
.j-acc { width: 4px; height: 20px; border-radius: 2px; margin-right: 8px; background: var(--k); }
.j-gi { font-size: 14px; margin-right: 6px; color: var(--k); }
.j-gate b { font-size: 13px; font-weight: 700; }
.now .j-gate b { color: var(--k); }
.future .j-acc { background: #666; }
.future .j-gi { color: #666; opacity: 0.55; }
.future .j-gate b { color: #666; }
.j-ok { font-size: 16px; margin-left: 4px; color: var(--k); }
.j-gate em { margin-left: 8px; padding: 2px 6px; border-radius: 6px; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.8px; color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent); }
.j-chev { font-size: 12px; margin-left: 8px; color: var(--k); opacity: 0.6; }
.future .j-chev { color: rgba(255, 255, 255, 0.15); opacity: 1; }
.j-row { display: flex; align-items: center; gap: 14px; height: 28px; padding-left: 38px; }
.right .j-row { justify-content: flex-end; padding: 0 38px 0 0; }
.j-node { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); display: grid; place-items: center; }
.full .j-node { border-color: var(--k); background: var(--k); }
.filling .j-node { border-color: var(--k); }
.j-fill { width: 16px; height: 16px; border-radius: 50%; }
.filling .j-fill { background: var(--k); opacity: 0.57; }
.j-wl { font-size: 13px; font-weight: 600; color: #c7c7cc; }
.empty .j-wl { color: #555; }
.j-halo { position: absolute; left: -10px; top: -10px; width: 36px; height: 36px; border-radius: 50%; background: var(--k); animation: jhalo 2.2s cubic-bezier(0.5, 1, 0.89, 1) infinite; }
@keyframes jhalo { 0% { transform: scale(0.6); opacity: 0; } 15% { opacity: 0.45; } 100% { transform: scale(1.7); opacity: 0; } }
.j-conn { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 20px; height: 36px; margin-left: 38px; color: rgba(255, 255, 255, 0.1); }
.right .j-conn { align-self: flex-end; margin: 0 38px 0 0; }
.j-conn.lit { color: var(--k); }
.j-conn .ic { font-size: 11px; }
.j-conn .ic:nth-child(1) { transform: rotate(180deg) translateX(-3px); }
.j-conn .ic:nth-child(2) { transform: rotate(180deg) translateX(3px); }
.j-bridge { display: flex; justify-content: space-around; align-items: center; height: 24px; margin: 6px 0; color: rgba(255, 255, 255, 0.12); }
.j-bridge.lit { color: var(--k); }
.j-bridge .ic { font-size: 12px; }
.to-r .ic:nth-child(odd) { transform: rotate(90deg) translateY(-3px); } .to-r .ic:nth-child(even) { transform: rotate(90deg) translateY(3px); }
.to-l .ic:nth-child(odd) { transform: rotate(-90deg) translateY(-3px); } .to-l .ic:nth-child(even) { transform: rotate(-90deg) translateY(3px); }
.j-finish { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 26px; font-size: 13px; color: #666; }
.j-finish .ic { font-size: 20px; }

/* the walking figure (WalkingFigure.js at size 22): limbs swing in opposite
   pairs over a calm 1.1s stride, with a small bob on each step */
.walker { position: absolute; top: -6px; width: 15.2px; height: 24px; transform: scale(1.35); transform-origin: 50% 60%; }
.left .walker { right: 32px; }
.right .walker { left: 32px; }
.walker.flip { transform: scale(-1.35, 1.35); }
.wf { position: absolute; inset: 0; animation: wbob 1.1s linear infinite; }
.wf i { position: absolute; display: block; background: #fff; border-radius: 2.2px; }
.wf .head { left: 4.85px; top: 0; width: 5.5px; height: 5.5px; border-radius: 50%; }
.wf .torso { left: 6.5px; top: 6.35px; width: 2.2px; height: 7.6px; }
.wf .arm, .wf .leg { left: 6.5px; width: 2.2px; transform-origin: 50% 0; }
.wf .arm { top: 7.36px; height: 7.6px; }
.wf .leg { top: 13.95px; height: 8px; }
.wf .b { opacity: 0.55; }
.wf .arm.a { animation: armA 1.1s linear infinite; } .wf .arm.b { animation: armB 1.1s linear infinite; }
.wf .leg.a { animation: legA 1.1s linear infinite; } .wf .leg.b { animation: legB 1.1s linear infinite; }
@keyframes wbob { 0%, 50%, 100% { transform: rotate(6deg) translateY(0); } 25%, 75% { transform: rotate(6deg) translateY(-1px); } }
@keyframes legA { 0%, 100% { transform: rotate(32deg); } 25%, 75% { transform: rotate(0); } 50% { transform: rotate(-32deg); } }
@keyframes legB { 0%, 100% { transform: rotate(-32deg); } 25%, 75% { transform: rotate(0); } 50% { transform: rotate(32deg); } }
@keyframes armA { 0%, 100% { transform: rotate(-40deg); } 25%, 75% { transform: rotate(0); } 50% { transform: rotate(40deg); } }
@keyframes armB { 0%, 100% { transform: rotate(40deg); } 25%, 75% { transform: rotate(0); } 50% { transform: rotate(-40deg); } }