@import url("flower.css"); @import url("wheel.css"); @import url("plan-progress.css"); @import url("checkin.css"); @import url("onboarding.css"); @font-face { font-family: "Bricolage Display"; font-style: normal; font-weight: 400 800; font-display: block; src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2"); } @font-face { font-family: "Bricolage Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2"); } @font-face { font-family: "Bricolage Text Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"), local("Arimo-Regular"); size-adjust: 105.2%; ascent-override: 88.4%; descent-override: 25.7%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Text Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"); size-adjust: 100%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Display Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"); size-adjust: 89.1%; ascent-override: 104.4%; descent-override: 30.3%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Display Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"); size-adjust: 85.1%; ascent-override: 109.3%; descent-override: 31.7%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Text Fallback Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 105.9%; ascent-override: 87.8%; descent-override: 25.5%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Text Fallback Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 105.9%; ascent-override: 87.8%; descent-override: 25.5%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Display Fallback Roboto"; font-style: normal; font-weight: 600; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 94.9%; ascent-override: 98%; descent-override: 28.5%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Display Fallback Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 90.6%; ascent-override: 102.6%; descent-override: 29.8%; line-gap-override: 0%; } :root { --player-font: "Bricolage Text", -apple-system, BlinkMacSystemFont, "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", "Segoe UI", system-ui, sans-serif; --player-ink: #221a1f; --player-text: #4a4046; --player-muted: #675c62; --player-paper: #fffdf9; --player-stage: #1b1418; --player-accent: #b0205a; --player-accent-2: #d8326f; --player-soft: #fbe9f0; --player-gold: #f2b544; --player-badge-ring: #ffd3e2; --player-badge-core: #b0205a; --player-badge-ink: #ffffff; --player-badge-blob: #ffd3e2; --player-moment-a: #a51f4f; --player-moment-b: #5a1640; --fv-shape-arch: 50% 50% 28px 28px / 36% 36% 28px 28px; --fv-shape-oval: 50%; --fv-shape-blob-1: 62% 38% 55% 45% / 52% 46% 54% 48%; --hc-pic-0: url("/brand/fitvee/img/p-day-kit-360.webp"); --hc-pic-1: url("/brand/fitvee/img/p-counter-kit-360.webp"); --hc-pic-2: url("/brand/fitvee/img/p-taichi-kit-360.webp"); --hc-hero: url("/brand/fitvee/img/p-day-kit.webp"); --hc-pause-pic: url("/brand/fitvee/img/p-seated-kit.webp"); } @media (min-width: 900px) { #quiz-root:has(> astro-island[component-url*="/Account."]) { max-width: 1120px; } .has-segments:not(.has-pane) { max-width: 560px; margin: 0 auto; } .has-segments.has-pane { padding: 0 28px 64px 268px; } .has-segments.has-pane > * { max-width: 760px; } } @media (min-width: 1100px) { html:not([data-track="men"]) #quiz-root:has(> astro-island[component-url*="/Account."]) { max-width: 1320px; } } html:has(.has-segments) { --bg: #f6f1ea; --panel: #fffdf9; --surface: #fffdf9; --surface-raised: #ede5da; --border-control: #857980; --text: #221a1f; --text-muted: #5f555b; --text-faint: #6a5f65; --accent: #b0205a; --accent-text: #ffffff; --line: #ddd2c5; --danger: #b3261e; --error: #b3261e; --focus-ring: #b0205a; --on-light: #fffdf9; --color-glass: #efe7dc; --color-glass-strong: #e4d9cc; --font: "Bricolage Text", -apple-system, BlinkMacSystemFont, "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", "Segoe UI", system-ui, sans-serif; --ap-bg-2: #ede5da; --ap-card: #fffdf9; --ap-ink: #221a1f; --ap-muted: #675c62; --ap-acc: #b0205a; --ap-acc-deep: #93174a; --ap-soft: #fbe9f0; --ap-focus: #b0205a; --ap-acc-ink: #ffffff; --ap-done: #b0205a; --ap-done-ink: #ffffff; --wheel-3: #2f6b4f; --reward-box: #b0205a; --reward-win: #2b7049; --reward-win-soft: #e2eedf; --ap-display: "Bricolage Display", "Bricolage Display Fallback", "Bricolage Display Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color-scheme: light; } html:has(.has-segments) body { background: var(--bg); color: var(--text); text-wrap: pretty; } .has-segments :focus-visible { outline: 3px solid var(--ap-focus); outline-offset: 3px; } .has-segments .card { background: var(--ap-card); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); } .seg > h2, .seg-account > h1 { font: 600 28px/1.1 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); margin: 6px 0 16px; text-align: start; } .step.has-segments:not(.has-pane):has(input[autocomplete="current-password"]) > h1 { font: 600 28px/1.1 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } .step.has-segments:not(.has-pane):has(input[autocomplete="current-password"]) .primary { background: var(--ap-btn, var(--ap-acc)); color: var(--ap-btn-ink, var(--ap-acc-ink)); } .has-segments .primary { background: var(--ap-btn, var(--ap-acc)); color: var(--ap-btn-ink, var(--ap-acc-ink)); } .has-segments .primary:hover:not(:disabled) { background: var(--ap-btn, var(--ap-acc)); box-shadow: none; } @media (hover: hover) { .has-segments .primary:hover:not(:disabled) { background: var(--ap-btn-hover, var(--ap-acc-deep)); } } .primary:hover:not(:disabled) { box-shadow: none; } .chal-card-actions .primary, .chal-unlock .primary, .chal-story .primary { box-shadow: none; } .has-segments :is(.secondary, .btn, .choice, .option) { border-radius: 18px; } .has-segments .me-banner { font: 400 15px/1.4 var(--font); color: var(--ap-muted); } .has-segments .me-banner::before { background: var(--sv-i-pause) center / contain no-repeat; } .has-segments .me-banner.is-welcome::before { background-image: var(--sv-i-play); } .has-segments .me-banner b { font: 600 17.5px/1.35 var(--font); color: var(--ap-ink); } .has-segments .resume-note { margin: 10px 0 14px; font: 400 14.5px/1.4 var(--font); text-align: center; } .has-segments .secondary.destructive { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); } .has-segments .secondary.destructive:hover:not(:disabled) { background: rgba(179, 38, 30, .08); } html[data-track="men"] .has-segments .secondary.destructive:hover:not(:disabled) { background: rgba(255, 69, 58, .12); } .account-bar .brand { font: 700 21px/28px var(--font); letter-spacing: -0.04em; color: var(--ap-ink); } @media not all and (forced-colors: active) { .account-bar .brand { flex: none; display: inline-block; width: 118px; height: 28px; font-size: 0; line-height: 0; background: url("logo/lockup-light.svg") left center / 118px 26px no-repeat; } html[data-track="men"] .account-bar .brand { background-image: url("logo/lockup-men-dark.svg"); } } .has-segments .card h2, .has-segments .card h3 { font: 700 18px/1.3 var(--font); color: var(--ap-ink); text-align: start; } .has-segments .ap-app h3 { font: 700 16px/1.25 var(--font); color: var(--ap-ink); margin: 0 0 12px; } .ap-nav { background: rgba(255, 253, 249, .96); } .ap-nav a { border-radius: 14px; font: 650 14px/1 var(--font); color: var(--ap-muted); } .ap-nav a[aria-current="page"] { color: var(--ap-acc-deep); background: var(--ap-soft); } @media (min-width: 900px) { .ap-nav { background: none; border: 0; } .ap-nav a { font-size: 15.5px; } } .ap-owes { border-radius: 20px; background: var(--ap-soft); color: var(--ap-ink); font: 600 15px/1.45 var(--font); } .ap-hero { border-radius: 28px; background: var(--ap-bg-2); } html:not([data-track="men"]) .seg-today .ap-hero:not(.is-plain) { border-radius: var(--fv-shape-arch); } .ap-daychip { padding: 8px 12px; border-radius: 99px; font: 700 13.5px/1 var(--font); background: var(--ap-soft); color: var(--ap-acc-deep); } .ap-hero img { object-position: 50% 14%; } .seg-today .ap-pick-up { margin-top: 14px; } .ap-hero-in { background: linear-gradient(rgba(20, 12, 16, 0), rgba(20, 12, 16, .66) 44px, rgba(20, 12, 16, .84)); color: #fff; } .ap-hero.is-plain .ap-hero-in { background: none; color: var(--ap-ink); } .ap-hero .ap-h1 { font: 600 clamp(34px, 8.5vw, 48px)/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; color: inherit; } .ap-hero .meta span { border-radius: 99px; font: 650 14px/1 var(--font); color: #fff; background: rgba(20, 12, 16, .5); } .ap-hero.is-plain .meta span { color: var(--ap-ink); background: var(--ap-bg-2); } .ap-line { font: 500 16px/1.45 var(--font); color: var(--text); } .plan-done { background: var(--ap-soft); } .plan-done .ap-h1 { color: var(--ap-acc-deep); } .plan-done-proud { font: 650 19px/1.3 var(--font); color: var(--ap-ink); } .plan-done-spot { background-image: url("/brand/fitvee/img/fv/sp-strong.webp"); } .has-segments .ap-app .plan-done-h { font: 600 22px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } .plan-done-tiles li { border-radius: 22px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .plan-done-tiles .lbl { font: 650 14px/1.2 var(--font); color: var(--ap-muted); } .plan-done-tiles b { font: 750 44px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--ap-ink); } .plan-done-tiles small { font: 600 14px/1.25 var(--font); color: var(--ap-muted); } .plan-done-tiles small.is-up { color: var(--ap-acc-deep); } .plan-next-round .plan-next-days { border-radius: 24px; background: var(--ap-bg-2); } .plan-weeks { --pw-i-1: url("/brand/fitvee/img/fv/i-plan.webp"); --pw-i-2: url("/brand/fitvee/img/fv/i-chart.webp"); --pw-i-3: url("/brand/fitvee/img/fv/i-target.webp"); --pw-i-4: url("/brand/fitvee/img/fv/i-medal.webp"); } html[data-track="men"] .plan-weeks { --pw-i-1: url("/brand/fitvee/img/fv/coal/i-plan.webp"); --pw-i-2: url("/brand/fitvee/img/fv/coal/i-chart.webp"); --pw-i-3: url("/brand/fitvee/img/fv/coal/i-target.webp"); --pw-i-4: url("/brand/fitvee/img/fv/coal/i-medal.webp"); } .plan-intro-rows { --pi-i-rest: url("/brand/fitvee/img/fv/i-lotus.webp"); --pi-i-new: url("/brand/fitvee/img/fv/i-bolt.webp"); --pi-i-recheck: url("/brand/fitvee/img/fv/i-target.webp"); --pi-i-same: url("/brand/fitvee/img/fv/i-house.webp"); --pi-i-check: url("/brand/fitvee/img/fv/i-check.webp"); } html[data-track="men"] .plan-intro-rows { --pi-i-rest: url("/brand/fitvee/img/fv/coal/i-lotus.webp"); --pi-i-new: url("/brand/fitvee/img/fv/coal/i-bolt.webp"); --pi-i-recheck: url("/brand/fitvee/img/fv/coal/i-target.webp"); --pi-i-same: url("/brand/fitvee/img/fv/coal/i-house.webp"); --pi-i-check: url("/brand/fitvee/img/fv/coal/i-check.webp"); } .pi-row { font: 400 15.5px/1.45 var(--font); color: var(--ap-ink); } .pi-row b { font-weight: 650; } .pi-row .pi-icon { background-image: var(--pi-i-check); } .pi-row[data-icon="rest"] .pi-icon { background-image: var(--pi-i-rest); } .pi-row[data-icon="new"] .pi-icon { background-image: var(--pi-i-new); } .pi-row[data-icon="recheck"] .pi-icon { background-image: var(--pi-i-recheck); } .pi-row[data-icon="same"] .pi-icon { background-image: var(--pi-i-same); } .plan-weeks li { border-radius: 22px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .plan-weeks li:nth-child(1) .pw-icon { background-image: var(--pw-i-1); } .plan-weeks li:nth-child(2) .pw-icon { background-image: var(--pw-i-2); } .plan-weeks li:nth-child(3) .pw-icon { background-image: var(--pw-i-3); } .plan-weeks li:nth-child(4) .pw-icon { background-image: var(--pw-i-4); } .plan-weeks b { font: 650 13px/1.2 var(--font); color: var(--ap-muted); } .plan-weeks li > span:last-child { font: 650 17px/1.25 var(--font); color: var(--ap-ink); } .plan-round-more summary { font: 650 16px/1.2 var(--font); color: var(--ap-acc-deep); } .plan-round-more summary:focus-visible { outline: 3px solid var(--ap-focus); outline-offset: 3px; border-radius: 8px; } .ap-btn { border-radius: 99px; background: var(--ap-btn, var(--ap-acc)); color: var(--ap-btn-ink, var(--ap-acc-ink)); font: 750 18px/1 var(--font); } .ap-btn.is-quiet { background: transparent; color: var(--ap-acc); box-shadow: inset 0 0 0 2px var(--ap-acc); } .plan-cando-numbers li { font: 500 17px/1.4 var(--font); color: var(--text); } .ap-safe { font: 500 14px/1.45 var(--font); color: var(--ap-muted); } .ap-safe button.link { color: var(--ap-ink); font-weight: 650; } .seg-today .ap-sub { font: 600 22px/1.15 var(--ap-display); letter-spacing: -0.01em; } .ap-moves button { font: 600 13px/1.25 var(--font); color: var(--text); } .ap-moves img { border-radius: 16px; background: var(--ap-bg-2); } .ap-moves .blank, .lib-sheet .ap-moves .blank { border-radius: 16px; background-color: var(--ap-bg-2); background-image: url("/brand/fitvee/img/fv/i-lotus.webp"); background-repeat: no-repeat; background-position: center; background-size: 76px; } .ap-tomorrow { border-radius: 20px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ap-ink); } .ap-tomorrow span { font: 600 13px/1.2 var(--font); color: var(--ap-muted); } .ap-tomorrow b { font: 700 16px/1.3 var(--font); } .ap-tomorrow svg { color: var(--ap-muted); } .ap-card { border-radius: 24px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .ap-stats p { font: 600 14px/1.2 var(--font); color: var(--ap-muted); } .ap-stats b { font: 750 40px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--ap-ink); } .ap-badges b { font: 700 14px/1.2 var(--font); color: var(--ap-ink); } .ap-badges small { font: 600 13px/1.25 var(--font); color: var(--ap-muted); } .hex { fill: var(--ap-bg-2); stroke: var(--line); stroke-width: 2.5; } .hex-num { font: 800 19px/1 var(--font); fill: var(--ap-muted); } .ap-badges .got .hex-num { fill: var(--player-badge-ink, #fff); } .ap-ladder li { font: 600 14px/1.2 var(--font); color: var(--ap-muted); } .ap-ladder li.on { font-weight: 800; color: var(--ap-ink); } .ap-ladder li.on .dot { border-color: var(--ap-done); background: var(--ap-done); box-shadow: 0 0 0 5px var(--ap-soft); } .ap-note { font: 500 14px/1.45 var(--font); color: var(--text); } .ap-wk { border-radius: 24px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .ap-wk.now { box-shadow: inset 0 0 0 2px var(--ap-done); } .ap-wk h3 em { font-style: normal; font-weight: 600; color: var(--ap-muted); } .ap-days li + li { border-top: 1px solid var(--line); } .ap-days button { color: var(--ap-ink); } .ap-days .dn { border-radius: 10px; font: 700 14px/1 var(--font); color: var(--ap-muted); box-shadow: inset 0 0 0 1.5px var(--line); } .ap-days .dt { font: 600 15.5px/1.3 var(--font); } .ap-days .is-done .dn { background: var(--ap-done); color: var(--ap-done-ink); box-shadow: none; } .ap-days .is-done .dt { color: var(--ap-muted); } .ap-days .is-today .dn { box-shadow: inset 0 0 0 2.5px var(--ap-ink); color: var(--ap-ink); } .ap-days .is-today .dt { font-weight: 750; } .ap-days .is-rest .dn { background: var(--ap-bg-2); box-shadow: none; color: var(--ap-ink); } .ap-links button.link { color: var(--ap-ink); font-weight: 650; } .ap-extra { border-radius: 24px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 500 14.5px/1.4 var(--font); } .ap-extra .pic { border-radius: 14px; background: var(--ap-bg-2); } .ap-extra .pic.print { background: #fffdf9; box-shadow: inset 0 0 0 1px var(--line); } .ap-extra .pic.print i { border-radius: 3px; font: 700 8px/1 var(--font); color: #6f6469; box-shadow: inset 0 0 0 1px var(--line); } .ap-extra .pic.print i.done { background: var(--ap-acc); color: #fff; box-shadow: none; } .ap-extra .tx b { font: 700 16.5px/1.25 var(--font); color: var(--ap-ink); } .ap-extra .tx b { text-wrap: balance; } .ap-extra .go { font: 700 14.5px/1 var(--font); color: var(--ap-ink); } .ap-recipes button { font: 600 14px/1.3 var(--font); color: var(--ap-ink); } .ap-recipes .txt { background: var(--ap-bg-2); color: var(--ap-muted); font: 600 13px/1.3 var(--font); } .plan-list .plan-check input, .plan-cando input { accent-color: var(--ap-acc); } .mv-top { background: #f6f1ea; } .mv-back { border-radius: 99px; font: 650 15.5px/1 var(--font); color: var(--ap-ink); } .mv-where { font: 600 13px/1.2 var(--font); color: var(--ap-muted); } .mv-where b { font: 700 14px/1.2 var(--font); color: var(--ap-ink); } .mv-ticks i { border-radius: 4px; background: var(--line); } .mv-ticks i.done { background: var(--ap-done); } .mv-ticks i.now { background: linear-gradient(90deg, var(--ap-done) 50%, var(--line) 50%); } .mv-media { border-radius: 28px; background: var(--ap-bg-2); } .mv-chips span { border-radius: 99px; font: 650 13px/1 var(--font); background: rgba(255, 253, 249, .92); color: var(--ap-ink); } .mv-voice { border-radius: 99px; background: var(--ap-btn, var(--ap-acc)); color: var(--ap-btn-ink, var(--ap-acc-ink)); font: 750 16px/1 var(--font); box-shadow: none; } .mv-voice .ic { border-radius: 50%; background: var(--ap-btn-ink, var(--ap-acc-ink)); color: var(--ap-btn, var(--ap-acc)); } .mv-voice:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--ap-ink); } .mv-caption { border-radius: 16px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); font: 600 15.5px/1.4 var(--font); color: var(--ap-ink); } .mv-page .mv-h { font: 600 38px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; color: var(--ap-ink); text-align: start; } .mv-intro { font: 500 16.5px/1.45 var(--font); color: var(--text); } .mv-today { border-radius: 16px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); font: 500 15px/1.45 var(--font); color: var(--text); } .mv-today b { color: var(--ap-acc-deep); font-weight: 750; } .mv-opts { border-radius: 18px; background: var(--ap-bg-2); } .mv-seg { border-radius: 14px; font: 650 14.5px/1.1 var(--font); color: var(--text); } .mv-seg small { font: 700 11px/1 var(--font); color: var(--ap-acc-deep); } .mv-seg:has(input:checked) { background: var(--ap-card); color: var(--ap-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 0 0 2px var(--ap-done); } .mv-seg:has(input:focus-visible) { outline: 3px solid var(--ap-ink); outline-offset: 2px; } .mv-note { border-radius: 16px; background: var(--ap-soft); font: 550 15.5px/1.45 var(--font); color: var(--ap-ink); } .mv-page .mv-sub { font: 600 24px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); text-align: start; } .mv-steps li + li { border-top: 1px solid var(--line); } .mv-steps p { font: 500 15.5px/1.45 var(--font); color: var(--text); } .mv-steps p b { font-weight: 700; color: var(--ap-ink); } .mv-n { background: var(--ap-soft); color: var(--ap-acc-deep); font: 750 14px/1 var(--font); } .mv-thumb { border-radius: 14px; background: var(--ap-bg-2); } .mv-thumb .mv-n { background: var(--ap-card); font-size: 12.5px; } .mv-safe { border-radius: 20px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .mv-more summary { border-radius: 0 0 20px 20px; font: 600 15px/1.3 var(--font); color: var(--text); } .mv-page .mv-more h3 { font: 700 14.5px/1.2 var(--font); color: var(--ap-ink); text-align: start; } .mv-more li { font: 500 14.5px/1.45 var(--font); color: var(--text); } .mv-care b { font-weight: 700; color: var(--ap-ink); } .mv-bar { background: #fffdf9; } .mv-b2 { border-radius: 99px; background: none; box-shadow: inset 0 0 0 1.5px var(--ap-ink); color: var(--ap-ink); font: 700 15px/1.2 var(--font); } .mv-b1 { border-radius: 99px; background: var(--ap-btn, var(--ap-acc)); color: var(--ap-btn-ink, var(--ap-acc-ink)); } .mv-b1 span { font: 750 15.5px/1.15 var(--font); } .mv-b1 small { font: 600 12.5px/1 var(--font); } @media (min-width: 900px) { .mv-page .mv-h { font-size: 48px; } } .ap-avoid-top b { font: 700 15.5px/1.4 var(--font); color: var(--ap-ink); } .ap-avoid-labels, .ap-avoid-sub { font: 500 14px/1.45 var(--font); color: var(--ap-muted); } .ap-avoid-says summary { font: 650 14.5px/1.3 var(--font); color: var(--ap-ink); } .ap-chip { border: 0; border-radius: 99px; background: var(--ap-bg-2); color: var(--ap-ink); font: 650 14.5px/1 var(--font); } .ap-chip.is-on { background: var(--ap-acc); color: var(--ap-acc-ink, #fff); } .ap-avoid-consent span { font: 500 14.5px/1.45 var(--font); color: var(--text); } .ap-avoid-consent input { accent-color: var(--ap-acc); } .ap-avoid-days > li + li { border-top: 1px solid var(--line); } .ap-avoid-days h3 { font: 700 16px/1.2 var(--font); color: var(--ap-ink); } .ap-avoid-days li { font: 500 15px/1.45 var(--font); color: var(--text); } .ap-avoid-days .slot { font-weight: 650; color: var(--ap-muted); } .ap-avoid-days button.link { font: 650 15px/1.45 var(--font); color: var(--ap-ink); } .ap-avoid-days .from, .ap-avoid-days .total { color: var(--ap-muted); } .ap-switch { border-radius: 16px; background: var(--ap-bg-2); } .ap-switch a { border-radius: 12px; font: 650 15px/1.2 var(--font); color: var(--ap-muted); } .ap-switch a[aria-current="true"] { background: var(--ap-card); color: var(--ap-ink); box-shadow: 0 1px 3px rgba(34, 26, 31, .12); } .ap-more { border-radius: 20px; background: var(--ap-soft); color: var(--ap-ink); } .ap-more .ic { border-radius: 12px; background: var(--ap-card); color: var(--ap-acc-deep); } .ap-more .tx { font: 500 14.5px/1.4 var(--font); color: var(--text); } .ap-more .tx b { font: 700 16.5px/1.3 var(--font); color: var(--ap-ink); } .ap-more > svg { color: var(--ap-muted); } .lib-lede { margin: 0; font: 500 17px/1.4 var(--font); color: var(--ap-ink); } .lib-rule { font: 500 14.5px/1.45 var(--font); color: var(--ap-muted); } .lib-effort { border-radius: 18px; background: var(--ap-soft); } .lib-effort b { font: 750 36px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--ap-acc-deep); } .lib-effort span { font: 700 15.5px/1.3 var(--font); color: var(--ap-ink); } .lib-effort small { font: 500 14px/1.35 var(--font); color: var(--text); } .lib-chip { border-radius: 99px; background: var(--ap-card); box-shadow: inset 0 0 0 1.5px var(--line); font: 650 14.5px/1 var(--font); color: var(--ap-ink); } .lib-chip.is-on { background: var(--ap-ink); color: var(--ap-bg, var(--bg)); box-shadow: none; } .has-segments .ap-app .lib-h, .has-segments .ap-app .lib-gh { font: 600 24px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } .has-segments .ap-app .lib-pack { font: 600 26px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } .has-segments .ap-app .lib-shelf-h :is(h3, h4) { margin: 0; font: 600 22px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } .lib-shelf-h p { font: 600 13.5px/1.3 var(--font); color: var(--ap-muted); } .lib-shelf-h .sh-pic { border-radius: var(--fv-shape-oval); background: var(--ap-bg-2); } .lib-card { color: var(--ap-ink); } .lib-card .pic { border-radius: 18px; background: var(--ap-bg-2); } .lib-card.plain .pic { background: var(--ap-soft); } .lib-card .num, .lib-sheet-hero .num { font: 750 60px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--ap-acc-deep); } .lib-card .min { border-radius: 99px; background: rgba(20, 12, 16, .76); color: #fff; font: 700 12.5px/1 var(--font); } .lib-card .nm { font: 650 15px/1.25 var(--font); color: var(--ap-ink); } .lib-card .mt { margin-top: -3px; font: 500 13px/1.3 var(--font); color: var(--ap-muted); } .lib-card .st { margin-top: -3px; font: 750 13px/1.3 var(--font); color: var(--ap-ink); } .lib-card .st.done { color: var(--ap-acc-deep); } .lib-lens button { border-radius: 22px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ap-ink); } .lib-ring .trk { stroke: var(--ap-bg-2); } .lib-ring .arc { stroke: var(--ap-acc); } .lib-ring b { font: 800 16px/1 var(--font); color: var(--ap-ink); letter-spacing: -0.02em; } .lib-ring b.rg { font-size: 13px; letter-spacing: 0; } .lib-ring small { font: 600 11.5px/1 var(--font); color: var(--ap-muted); } .lib-lens .tx b { font: 600 20px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } .lib-lens .tx small { font: 600 13.5px/1.2 var(--font); color: var(--ap-muted); } .lib-thumbs img, .lib-thumbs .tn { border-radius: 10px; box-shadow: 0 0 0 2.5px var(--ap-card); background: var(--ap-bg-2); } .lib-thumbs .tn { font: 800 15px/1 var(--font); color: var(--ap-ink); } .lib-areas .ph { border-radius: 20px; background: var(--ap-bg-2); } .lib-areas .lb { padding: 0 4px; font: 700 16.5px/1.2 var(--font); color: var(--ap-ink); } .lib-areas button.plain { border-radius: 20px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .lib-mini i { border-radius: 3px; background: var(--ap-bg-2); box-shadow: inset 0 0 0 1px var(--line); } .lib-mini i.on { background: var(--ap-done); box-shadow: none; } .lib-back { font: 650 15.5px/1 var(--font); color: var(--ap-ink); } .lib-sheet .lib-sheet-hero.is-plain { background: var(--ap-soft); } .lib-where { font: 650 14.5px/1.4 var(--font); color: var(--ap-muted); } .lib-sheet-rule { font: 600 14.5px/1.45 var(--font); color: var(--ap-ink); } .lib-sheet .ap-moves .mv { font: 600 13px/1.25 var(--font); color: var(--text); } .lib-sheet .ap-moves img { border-radius: 16px; background: var(--ap-bg-2); } .ap-week-days .d { font: 600 12.5px/1 var(--font); color: var(--ap-muted); } .ap-week-days .box { border-radius: 10px; background: var(--ap-bg-2); } .ap-week-days .is-plan .box { background: var(--ap-acc); } .ap-week-days .is-extra .box { background: var(--ap-soft); box-shadow: inset 0 0 0 1.5px var(--ap-acc); } .ap-week-days .plus { font: 700 12.5px/1 var(--font); color: var(--ap-acc-deep); } .ap-week-key { font: 600 13px/1.3 var(--font); color: var(--ap-muted); } .ap-week-key .k-plan::before { border-radius: 4px; background: var(--ap-acc); } .ap-week-key .k-extra::before { border-radius: 4px; background: var(--ap-soft); box-shadow: inset 0 0 0 1.5px var(--ap-acc); } html[data-track="men"] .has-segments .ap-app .lib-h, html[data-track="men"] .has-segments .ap-app .lib-gh { font: 800 28px/1.05 var(--ap-display); letter-spacing: -0.01em; } html[data-track="men"] .has-segments .ap-app .lib-pack { font: 800 26px/1.05 var(--ap-display); letter-spacing: -0.01em; } html[data-track="men"] .has-segments .ap-app .lib-shelf-h :is(h3, h4) { font: 800 22px/1.1 var(--ap-display); letter-spacing: -0.01em; } html[data-track="men"] .lib-lens .tx b { font: 800 19px/1.05 var(--ap-display); letter-spacing: -0.01em; } @media (max-width: 359px) { html[data-track="men"] .lib-lens .tx b { font-size: 17px; } } html[data-track="men"] .lib-effort b, html[data-track="men"] .lib-card .num, html[data-track="men"] .lib-sheet-hero .num { font-weight: 800; letter-spacing: -0.02em; } html[data-track="men"] .lib-card.plain .pic, html[data-track="men"] .lib-sheet .lib-sheet-hero.is-plain { background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } html[data-track="men"] .lib-sheet-hero img { object-position: 50% 67%; } @media (min-width: 560px) { html[data-track="men"] .lib-sheet .lib-sheet-hero { max-width: 416px; margin-inline: auto; } } html[data-track="men"] .lib-sheet .lib-sheet-hero:not(.is-plain) { overflow: visible; aspect-ratio: auto; max-height: none; background: none; } html[data-track="men"] .lib-sheet .lib-sheet-hero:not(.is-plain) img { height: auto; aspect-ratio: 4 / 5; max-height: min(58vh, 520px); border-radius: inherit; } html[data-track="men"] .lib-sheet .lib-sheet-hero:not(.is-plain) .ap-hero-in { position: static; padding: 16px 2px 0; background: none; color: var(--ap-ink); } html[data-track="men"] .lib-sheet .lib-sheet-hero:not(.is-plain) .meta span { color: var(--ap-ink); background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } html[data-track="men"] .ap-moves .blank, html[data-track="men"] .lib-sheet .ap-moves .blank { background-color: var(--ap-card); background-image: url("/brand/fitvee/img/fv/coal/i-mzone-full.webp"); box-shadow: inset 0 0 0 1px var(--line); } html[data-track="men"] .lib-shelf-h .sh-pic { border-radius: 12px; } html:has(.has-segments)[data-track="men"] { --bg: #050300; --panel: #1b1916; --surface: #1b1916; --surface-raised: #12100c; --border-control: #857c70; --text: #d6ccbe; --text-muted: #b3a999; --text-faint: #a39a8b; --accent: #8fb3d9; --accent-text: #050300; --line: rgba(235, 225, 211, .16); --danger: #ff453a; --error: #ff453a; --focus-ring: #8fb3d9; --on-light: #050300; --color-glass: #12100c; --color-glass-strong: #1b1916; --font: "Bricolage Text", -apple-system, BlinkMacSystemFont, "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", "Segoe UI", system-ui, sans-serif; --ap-bg-2: #12100c; --ap-card: #1b1916; --ap-ink: #ebe1d3; --ap-muted: #b3a999; --ap-acc: #ebe1d3; --ap-acc-deep: #8fb3d9; --ap-soft: rgba(143, 179, 217, .16); --ap-focus: #8fb3d9; --ap-acc-ink: #050300; --ap-done: #8fb3d9; --ap-done-ink: #050300; --wheel-3: #ebe1d3; --wheel-5: #b3a999; --reward-box: #8fb3d9; --reward-win: #7fc79a; --reward-win-soft: #1b1916; --ap-btn: #8fb3d9; --ap-btn-ink: #050300; --ap-btn-hover: #a9c6e4; --ap-switch-on: #5088c4; --ap-display: "Bricolage Display", "Bricolage Display Fallback", "Bricolage Display Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color-scheme: dark; } html:has(.has-segments)[data-track="men"] { --color-glass-strong: #292622; } html:has(.has-segments)[data-track="men"] .toggle .toggle-fill { background: var(--ap-switch-on); } html[data-track="men"] .has-segments .secondary:not(.destructive) { box-shadow: inset 0 0 0 1.5px var(--border-control); } html[data-track="men"] .seg > h2, html[data-track="men"] .seg-account > h1 { font: 800 28px/1.08 var(--ap-display); letter-spacing: -0.01em; } html[data-track="men"] .step.has-segments:not(.has-pane):has(input[autocomplete="current-password"]) > h1 { font: 800 28px/1.08 var(--ap-display); letter-spacing: -0.01em; } html[data-track="men"] .ap-hero .ap-h1 { font: 800 clamp(34px, 8.5vw, 48px)/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; } html[data-track="men"] .seg-today .ap-sub { font: 800 22px/1.15 var(--ap-display); letter-spacing: -0.01em; } html[data-track="men"] .plan-done { background: var(--ap-card); } html[data-track="men"] .plan-done-spot { background-image: url("/brand/fitvee/img/fv/sm-flex.webp"); } html[data-track="men"] .has-segments .ap-app .plan-done-h { font-weight: 800; } html[data-track="men"] .plan-done-tiles li { background: var(--ap-card); } html[data-track="men"] .plan-done-tiles b { font-weight: 800; } html[data-track="men"] .plan-next-round .plan-next-days { background: var(--ap-card); } html[data-track="men"] .ap-stats b { font: 800 40px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; } html[data-track="men"] .mv-page .mv-h { font: 800 38px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; } html[data-track="men"] .mv-page .mv-sub { font: 800 24px/1.1 var(--ap-display); letter-spacing: -0.01em; } @media (min-width: 900px) { html[data-track="men"] .mv-page .mv-h { font-size: 48px; } } html[data-track="men"] .mv-voice:focus-visible { outline-color: #ebe1d3; box-shadow: 0 0 0 6px #050300; } html[data-track="men"] .ap-nav, html[data-track="men"] .mv-bar { background: #1b1916; } html[data-track="men"] .mv-top { background: #050300; } html[data-track="men"] .mv-chips span { background: #1b1916; color: #ebe1d3; } html[data-track="men"] .mv-chips-plain span, html[data-track="men"] .ap-hero.is-plain .meta span { background: var(--ap-bg-2); box-shadow: inset 0 0 0 1px var(--line); } html[data-track="men"] .ap-extra .pic.print, html[data-track="men"] .ap-extra .pic.print i { box-shadow: inset 0 0 0 1px #ddd2c5; } html[data-track="men"] .ap-extra .pic.print i.done { background: #050300; color: #fffdf9; box-shadow: none; } @media (min-width: 900px) { html[data-track="men"] .ap-nav { background: none; } } @media (max-width: 899px) { html[data-seg="me"] .ap-nav, html[data-seg="progress"] .ap-nav { background: var(--ap-card); } } html[data-track="men"] :is(.coach, .coach-row) { --coach-ink: #8fb3d9; --coach-on-ink: #050300; --coach-text: #ebe1d3; --coach-muted: #b3a999; --coach-soft-ink: #8fb3d9; --coach-page: #050300; --coach-bubble: #1b1916; --coach-surface: #2c2925; --coach-surface-edge: transparent; --coach-hint: #9a9184; --coach-glyph: #b3a999; --coach-glyph-off: #5f584f; --coach-dots: #b3a999; --coach-sheet: #36322d; --coach-sheet-shadow: rgba(0, 0, 0, .5); --coach-window-shadow: rgba(0, 0, 0, .6); --coach-edge: rgba(235, 225, 211, .12); --coach-edge-strong: rgba(235, 225, 211, .16); --coach-head-line: rgba(235, 225, 211, .14); --coach-ring-track: rgba(235, 225, 211, .14); --coach-cancel-tint: #3d3934; --coach-press: rgba(235, 225, 211, .08); } @media (min-width: 1024px) { html[data-track="men"] .coach { --coach-page: #27241f; --coach-bubble: #322e29; --coach-surface: #3f3b35; --coach-sheet: #49453f; --coach-cancel-tint: #4a4540; --coach-muted: #c8bfb0; --coach-hint: #b0a797; --coach-glyph-off: #6b645b; } } .ap-group, html[data-seg="me"] .seg-account > h1 { margin: 26px 0 12px; font: 600 20px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); text-align: start; } html[data-track="men"] .ap-group, html[data-track="men"][data-seg="me"] .seg-account > h1 { font: 800 20px/1.15 var(--ap-display); letter-spacing: -0.01em; } .pl .pl-fin-spot { display: block; background-image: url("/brand/fitvee/img/fv/sp-celebrate.webp"); } html:has(.has-segments):not([data-track="men"]) .pl-moment { background: #f8f2e9; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-pips i { background: rgba(43, 21, 48, .12); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-pips i.is-on { background: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-say { font: 750 34px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.028em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-say2 { color: var(--ks-plum-soft); opacity: 1; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-finish .pl-proud { font: 600 19px/1.3 var(--font); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-shout, html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-mega { color: var(--ks-plum); text-shadow: none; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-hint { color: var(--ks-plum-soft); opacity: 1; } html:has(.has-segments):not([data-track="men"]) .pl-moment button:focus-visible { outline-color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-wbtn { border-radius: 18px; background: var(--ks-magenta); color: #fff8f2; font: 620 17.5px/1 var(--font); box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-wbtn.is-quiet { background: none; box-shadow: none; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-photo { box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-track { stroke: rgba(43, 21, 48, .07); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-arc { stroke: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-bead { fill: #fff6e0; filter: none; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-count b { font: 750 44px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-count span { font: 500 17px/1 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-week li { background: rgba(43, 21, 48, .06); color: rgba(43, 21, 48, .5); font: 650 11.5px/1 var(--font); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-week li.is-done, html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-week li.is-fill { background: var(--ks-magenta); color: #fff8f2; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-week li.is-rest { background: none; box-shadow: inset 0 0 0 1.5px rgba(43, 21, 48, .16); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-week li.is-fill { animation: ks-fin-fill .9s cubic-bezier(.22, .61, .24, 1) 1.3s both; } @keyframes ks-fin-fill { 0% { background: var(--ks-paper); color: var(--ks-magenta); box-shadow: inset 0 0 0 2px var(--ks-magenta); transform: scale(1); } 55% { transform: scale(1.14); } 100% { box-shadow: none; transform: none; } } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-bigring .pl-track { stroke: rgba(43, 21, 48, .07); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-bigring .pl-fill { stroke: var(--ks-magenta); filter: none; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-soft { margin-top: 22px; padding: 0; border-radius: 0; background: none; border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-soft p { color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-dots li { background: rgba(43, 21, 48, .08); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-dots li.is-on { background: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-dots path { stroke: #fff8f2; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-nextday { padding: 14px 0 0; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-nextday .day-ring { color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-nextday-text b { color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-nextday-text small { color: var(--ks-plum-soft); opacity: 1; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-hexrow li { color: var(--ks-plum-soft); opacity: 1; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-hexrow path:first-child { fill: rgba(176, 32, 90, .1); stroke: rgba(176, 32, 90, .45); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-hexrow text { fill: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-hexrow path + path { stroke: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-lvl svg { filter: drop-shadow(0 18px 24px rgba(43, 21, 48, .22)); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-ladder { background: rgba(43, 21, 48, .06); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-ladder .pl-knob { background: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-ladder span.is-on { color: #fff8f2; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-confetti { top: 30%; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-confetti i { width: 4px; height: 4px; border-radius: 50%; background: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-confetti i:nth-child(5n+2) { background: #7b3f8c; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-confetti i:nth-child(5n+3) { width: 3px; height: 3px; background: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-confetti i:nth-child(5n+4) { width: 5px; height: 5px; background: #b98bc9; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-confetti i:nth-child(5n) { width: 2px; height: 2px; background: var(--ks-magenta-deep); } @media (min-width: 900px) { html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-say { font-size: 60px; line-height: .98; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-finish .pl-say { max-width: 15ch; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-fin-count b { font-size: 64px; } html:has(.has-segments):not([data-track="men"]) .pl-moment .pl-confetti { left: 32%; top: 50%; } } html[data-track="men"] { --hc-pic-0: url("/brand/fitvee/img/men-pushups-kit.webp"); --hc-pic-1: url("/brand/fitvee/img/men-floor-kit.webp"); --hc-pic-2: url("/brand/fitvee/img/men-back-kit.webp"); --hc-hero: url("/brand/fitvee/img/men-hero-kit-800.webp"); --hc-bit-alt: #8fb3d9; --hc-shade: rgba(5, 3, 0, .82); --hc-flame-in: #050300; --hc-badge-ink: #050300; --hc-on-accent: #050300; --hc-pause-pic: url("/brand/fitvee/img/men-back-kit.webp"); --hc-fade-bg: linear-gradient(180deg, #050300 0%, #172434 100%); --hc-stop: #b3a999; --player-font: "Bricolage Text", -apple-system, BlinkMacSystemFont, "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", "Segoe UI", system-ui, sans-serif; --player-ink: #ebe1d3; --player-text: #d6ccbe; --player-muted: #b3a999; --player-paper: #1b1916; --player-stage: #050300; --player-accent: #8fb3d9; --player-accent-2: #8fb3d9; --player-soft: rgba(143, 179, 217, .16); --player-raised: rgba(235, 225, 211, .1); --player-on-accent: #050300; --player-gold: #ebe1d3; --player-badge-ring: #b9d0ea; --player-badge-core: #8fb3d9; --player-badge-ink: #050300; --player-badge-blob: #8fb3d9; --player-backdrop: #000; --player-moment-a: #172434; --player-moment-b: #15130f; } html[data-track="men"] .pl { color-scheme: dark; } html[data-track="men"] .pl-media { background: #050300; } html[data-track="men"] .pl-media-back { display: none; } html[data-track="men"] .pl-bottom { background: #050300; } html[data-track="men"] .pl-count { color: #fff; } html[data-track="men"] .pl-ci-back::after { background: rgba(5, 3, 0, .55); } .pl-ci-back, .pl-media-back { filter: none; } .pl-glass { background: var(--bg); } html[data-track="men"] .pl-glass { background: #12100c; box-shadow: none; } html[data-track="men"] .pl-icon { background: #292622; } html[data-track="men"] .pl-segs li { background: #3a362f; } html[data-track="men"] .pl-chip.is-ink { background: none; } html[data-track="men"] .pl-ci-sheet { box-shadow: inset 0 0 0 1px #24211c; } html[data-track="men"] .pl-ready { gap: 6px; } html[data-track="men"] .pl-ready h1, html[data-track="men"] .pl-name, html[data-track="men"] .pl-q legend, html[data-track="men"] .pl-ci-head h1, html[data-track="men"] .pl-later b { font-weight: 800; } html[data-track="men"] .pl-shout { font-weight: 800; line-height: .95; letter-spacing: -.04em; text-transform: none; } html[data-track="men"] .pl-say { font-weight: 800; } html[data-track="men"] .pl-say2 { max-width: 32ch; } html[data-track="men"] .pl-go, html[data-track="men"] .pl-ci-done, html[data-track="men"] .pl-wbtn { background: #8fb3d9; color: #050300; box-shadow: none; } html[data-track="men"] .pl-ci-done:disabled { background: #2a2620; color: #b3a999; box-shadow: none; } html[data-track="men"] .pl-opt[aria-expanded="true"] { background: none; color: #ebe1d3; } html[data-track="men"] .pl-pop { background: #ebe1d3; color: #050300; } html[data-track="men"] .pl-tile { background: none; color: var(--p-ink); box-shadow: none; } html[data-track="men"] .pl-ic { --d: rgba(235, 225, 211, .07); --t: rgba(235, 225, 211, .16); --a: #b3a999; --n: #d6ccbe; } html[data-track="men"] .pl-tile-pick input:checked + .pl-tile { background: none; box-shadow: none; color: #8fb3d9; } html[data-track="men"] .pl-tile-pick input:checked + .pl-tile .pl-ic { --d: var(--p-soft); --t: rgba(143, 179, 217, .35); --a: var(--p-accent); --n: var(--p-ink); } html[data-track="men"] .pl-ok path { stroke: #050300; } html[data-track="men"] .pl-dots li.is-on { background: #8fb3d9; } html[data-track="men"] .pl-dots path { stroke: #050300; } html[data-track="men"] .pl-rays { background: none; } html[data-track="men"] .pl-knob { background: #ebe1d3; } html[data-track="men"] .pl-ladder span.is-on { color: #050300; } html[data-track="men"] .pl-lvl { --p-accent-2: #3e5f82; } html[data-track="men"] .pl-confetti i:nth-child(5n) { background: #b9d0ea; } html[data-track="men"] .pl .pl-fin-spot { background-image: url("/brand/fitvee/img/fv/sm-celebrate.webp"); } html:has(#quiz-root > astro-island[component-url*="/Home."]), html:has(#quiz-root > astro-island[component-url*="/Paid."]) { --bg: #f6f1ea; --panel: #fffdf9; --surface: #fffdf9; --surface-raised: #ede5da; --border-control: #857980; --text: #221a1f; --text-muted: #5f555b; --text-faint: #6a5f65; --accent: #b0205a; --accent-text: #ffffff; --line: #ddd2c5; --danger: #b3261e; --error: #b3261e; --focus-ring: #b0205a; --on-light: #fffdf9; --color-glass: #efe7dc; --color-glass-strong: #e4d9cc; --font: "Bricolage Text", -apple-system, BlinkMacSystemFont, "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", "Segoe UI", system-ui, sans-serif; background: #f6f1ea; color-scheme: light; } html:has(#quiz-root > astro-island[component-url*="/Home."]) body, html:has(#quiz-root > astro-island[component-url*="/Paid."]) body { background: #f6f1ea; color: #221a1f; font-family: var(--font); } .step.home :focus-visible { outline: 3px solid #b0205a; outline-offset: 3px; } .step.home > h1 { font: 700 21px/1 var(--font); letter-spacing: -0.04em; color: #221a1f; } @media not all and (forced-colors: active) { .step.home > h1 { font-size: 0; line-height: 0; } .step.home > h1::before { content: ""; display: block; width: 118px; height: 26px; background: url("logo/lockup-light.svg") left center / contain no-repeat; } } .step.home .lede { color: #5f555b; } .step.home .home-charge { background: #fffdf9; border-radius: 22px; box-shadow: inset 0 0 0 1px #ddd2c5; } .step.home .home-charge > h2 { font: 600 28px/1.1 "Bricolage Display", "Bricolage Display Fallback", "Bricolage Display Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; color: #221a1f; } .step.home .primary { background: #b0205a; color: #ffffff; } .step.home .primary:hover:not(:disabled) { background: #93174a; box-shadow: none; } .step.home .home-footer, .step.home .home-footer a { color: #5f555b; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .bar .brand { font: 700 21px/1 var(--font); letter-spacing: -0.04em; color: #221a1f; } @media not all and (forced-colors: active) { html:has(#quiz-root > astro-island[component-url*="/Paid."]) .bar .brand { font-size: 0; line-height: 0; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .bar .brand::before { content: ""; display: inline-block; vertical-align: middle; width: 118px; height: 26px; background: url("logo/lockup-light.svg") left center / contain no-repeat; } } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .step > h1 { font: 600 34px/1.04 "Bricolage Display", "Bricolage Display Fallback", "Bricolage Display Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-variation-settings: "opsz" 96; letter-spacing: -0.015em; color: #221a1f; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .primary { background: #b0205a; color: #ffffff; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .primary:hover:not(:disabled) { background: #93174a; box-shadow: none; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #b0205a; outline-offset: 3px; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) { --pm-c1: #f2b544; --pm-c2: #d8326f; --pm-c3: #b0205a; --pm-c4: #f29bbb; --pm-c5: #221a1f; --pm-ink: #221a1f; --pm-text: #4a4046; --pm-muted: #675c62; --pm-acc: #b0205a; --pm-soft: #fbe9f0; --pm-line: #e4d9cc; --pm-bg: #f6f1ea; --pm-plum: #2b1530; --pm-purple: #7a2d73; --pm-purple-soft: rgba(122, 45, 115, .14); --pm-display: "Bricolage Display", "Bricolage Display Fallback", "Bricolage Display Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --pm-art: url("/brand/fitvee/img/fv/sp-celebrate.webp"); --pm-wait-art: url("/brand/fitvee/img/fv/sp-planner.webp"); --pm-still-art: url("/brand/fitvee/img/fv/sp-envelope.webp"); --pm-offer-art: url("/brand/fitvee/img/fv/sp-strong.webp"); --pm-i-day: url("/brand/fitvee/img/fv/i-play.webp"); --pm-i-check: url("/brand/fitvee/img/fv/i-check.webp"); --pm-i-mail: url("/brand/fitvee/img/fv/i-mail.webp"); --pm-i-1: url("/brand/fitvee/img/fv/i-posture.webp"); --pm-i-2: url("/brand/fitvee/img/fv/i-lotus.webp"); --pm-i-3: url("/brand/fitvee/img/fv/i-heart.webp"); --pm-i-4: url("/brand/fitvee/img/fv/i-plan.webp"); --pm-i-5: url("/brand/fitvee/img/fv/i-bolt.webp"); --pm-i-6: url("/brand/fitvee/img/fv/i-shield.webp"); } html[data-track="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) { --bg: #050300; --panel: #1b1916; --surface: #1b1916; --surface-raised: #12100c; --border-control: #857c70; --text: #ebe1d3; --text-muted: #b3a999; --text-faint: #a39a8b; --accent: #8fb3d9; --accent-text: #050300; --line: rgba(235, 225, 211, .16); --focus-ring: #8fb3d9; --on-light: #050300; --color-glass: #1b1916; --color-glass-strong: #262320; --pm-c1: #ebe1d3; --pm-c2: #8fb3d9; --pm-c3: #b9d0ea; --pm-c4: #4a6c90; --pm-c5: #ffffff; --pm-ink: #ebe1d3; --pm-text: #d6ccbe; --pm-muted: #b3a999; --pm-acc: #8fb3d9; --pm-soft: rgba(143, 179, 217, .16); --pm-line: rgba(235, 225, 211, .16); --pm-bg: #050300; --pm-plum: #ebe1d3; --pm-purple: #8fb3d9; --pm-purple-soft: rgba(143, 179, 217, .18); --pm-art: url("/brand/fitvee/img/fv/sm-celebrate.webp"); --pm-wait-art: url("/brand/fitvee/img/fv/sm-path.webp"); --pm-still-art: url("/brand/fitvee/img/fv/sm-envelope.webp"); --pm-i-day: url("/brand/fitvee/img/fv/coal/i-play.webp"); --pm-i-check: url("/brand/fitvee/img/fv/coal/i-check.webp"); --pm-i-mail: url("/brand/fitvee/img/fv/coal/i-mail.webp"); --pm-offer-art: url("/brand/fitvee/img/fv/sm-flex.webp"); --pm-i-1: url("/brand/fitvee/img/fv/coal/i-posture.webp"); --pm-i-2: url("/brand/fitvee/img/fv/coal/i-lotus.webp"); --pm-i-3: url("/brand/fitvee/img/fv/coal/i-heart.webp"); --pm-i-4: url("/brand/fitvee/img/fv/coal/i-plan.webp"); --pm-i-5: url("/brand/fitvee/img/fv/coal/i-bolt.webp"); --pm-i-6: url("/brand/fitvee/img/fv/coal/i-shield.webp"); background: #050300; color-scheme: dark; } html[data-track="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) body { background: #050300; color: #ebe1d3; } html[data-art="chair"]:has(#quiz-root > astro-island[component-url*="/Paid."]) { --pm-offer-art: url("/brand/fitvee/img/premium/p-chair-dance.webp"); --pm-art: url("/brand/fitvee/img/premium/p-chair-core.webp"); } html[data-art="walk"]:has(#quiz-root > astro-island[component-url*="/Paid."]) { --pm-offer-art: url("/brand/fitvee/img/premium/p-walk-dance.webp"); --pm-art: url("/brand/fitvee/img/premium/p-walk-core.webp"); } html[data-art="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) { --pm-offer-art: url("/brand/fitvee/img/premium/p-men-conditioning.webp"); --pm-art: url("/brand/fitvee/img/premium/p-men-core.webp"); } html[data-art="men"] .offer-pitch > .offer-art, html[data-art="men"] .pm-art, .plan-pack-art[data-art="men"] { border-radius: 38% 62% 55% 45% / 50% 42% 58% 50%; } .plan-pack-art { float: right; width: 84px; aspect-ratio: 1; margin: 0 0 6px 8px; background: center / contain no-repeat; } .plan-pack-art[data-art="chair"][data-collection="core"] { background-image: url("/brand/fitvee/img/premium/p-chair-core.webp"); } .plan-pack-art[data-art="chair"][data-collection="mobility"] { background-image: url("/brand/fitvee/img/premium/p-chair-mobility.webp"); } .plan-pack-art[data-art="chair"][data-collection="dance"] { background-image: url("/brand/fitvee/img/premium/p-chair-dance.webp"); } .plan-pack-art[data-art="walk"][data-collection="core"] { background-image: url("/brand/fitvee/img/premium/p-walk-core.webp"); } .plan-pack-art[data-art="walk"][data-collection="mobility"] { background-image: url("/brand/fitvee/img/premium/p-walk-mobility.webp"); } .plan-pack-art[data-art="walk"][data-collection="dance"] { background-image: url("/brand/fitvee/img/premium/p-walk-dance.webp"); } .plan-pack-art[data-art="men"][data-collection="core"] { background-image: url("/brand/fitvee/img/premium/p-men-core.webp"); } .plan-pack-art[data-art="men"][data-collection="mobility"] { background-image: url("/brand/fitvee/img/premium/p-men-mobility.webp"); } .plan-pack-art[data-art="men"][data-collection="dance"] { background-image: url("/brand/fitvee/img/premium/p-men-dance.webp"); } .plan-pack-art[data-art="men"][data-collection="conditioning"] { background-image: url("/brand/fitvee/img/premium/p-men-conditioning.webp"); } @media (prefers-reduced-motion: no-preference) { html:has(#quiz-root > astro-island[component-url*="/Paid."]) body { transition: background-color .45s ease-out, color .45s ease-out; } } @media not all and (forced-colors: active) { html[data-track="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) .bar .brand::before { background-image: url("logo/lockup-men-dark.svg"); } } html[data-track="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) .step > h1 { color: #ebe1d3; font-weight: 800; } html[data-track="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) .primary { background: #8fb3d9; color: #050300; } html[data-track="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) .primary:hover:not(:disabled) { background: #a9c6e4; } html[data-track="men"]:has(#quiz-root > astro-island[component-url*="/Paid."]) :is(a, button, input, select, textarea, summary):focus-visible { outline-color: #8fb3d9; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) #quiz-root { overflow-x: clip; } .pm { display: grid; justify-items: stretch; } .pm-art { position: relative; justify-self: center; width: min(54vw, 212px); aspect-ratio: 1; margin: -8px 0 0; background: var(--pm-art) center / contain no-repeat; } .pm-art .pl-confetti { position: absolute; left: 50%; top: 38%; pointer-events: none; } .pm-ring { position: absolute; left: -2%; bottom: 6%; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--pm-acc); box-shadow: 0 0 0 5px var(--pm-bg); } .pm-ring svg { width: 46px; height: 46px; overflow: visible; } .pm-ring circle { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-dasharray: 145; stroke-dashoffset: 0; } .pm-ring path { fill: none; stroke: #ffffff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; } html[data-track="men"] .pm-ring circle { stroke: rgba(5, 3, 0, .35); } html[data-track="men"] .pm-ring path { stroke: #050300; } .pm-body { display: grid; justify-items: start; min-width: 0; } .pm h1 { margin: 6px 0 0; font: 600 34px/1.05 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--pm-ink); text-wrap: balance; } html[data-track="men"] .pm h1 { font-weight: 800; letter-spacing: -0.01em; } .pm-lede { margin: 12px 0 0; font: 400 17px/1.45 var(--font); color: var(--pm-text); text-wrap: pretty; } .pm-icon { display: block; width: 40px; height: 40px; background: center / contain no-repeat; } .pm-day { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; width: 100%; margin: 22px 0 0; } .pm-day .pm-icon { width: 48px; height: 48px; background-image: var(--pm-i-day); } .pm-day b, .pm-step b { display: block; font: 600 17px/1.25 var(--font); color: var(--pm-ink); } .pm-day b + span, .pm-step b + span { display: block; margin-top: 2px; font: 400 15px/1.4 var(--font); color: var(--pm-muted); } .pm-go { margin-top: 18px; } .pm-steps { display: grid; gap: 14px; width: 100%; margin: 30px 0 0; padding: 0; list-style: none; } .pm-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; } .pm-step b { font-size: 16px; } .pm-step b + span { font-size: 14.5px; } .pm-step-check .pm-icon { background-image: var(--pm-i-check); } .pm-step-mail .pm-icon { background-image: var(--pm-i-mail); } .pm .note { margin: 10px 0 0; } .pm-wait .paid-pending { margin: 14px 0 0; font: 400 17px/1.45 var(--font); color: var(--pm-muted); } .pm-wait .pm-art { background-image: var(--pm-wait-art); } .pm-still .pm-art { background-image: var(--pm-still-art); } .pm-strip { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 0 0 4px; } .pm-tick { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pm-acc); } .pm-tick svg { width: 24px; height: 24px; } .pm-tick path { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; } .pm-strip p { margin: 0; } .pm-strip b { display: block; font: 700 28px/1.1 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; color: var(--pm-ink); } .pm-art .pl-confetti i { position: absolute; width: 8px; height: 13px; border-radius: 3px; background: var(--k); opacity: 0; } .offer-sell { display: block; } .offer-pitch { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "head art" "why why" "card card"; align-items: start; column-gap: 10px; } .offer-pitch > h1 { grid-area: head; align-self: center; margin: 0; font: 600 26px/1.06 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; color: var(--pm-ink); text-wrap: balance; } .offer-pitch > .offer-art { grid-area: art; justify-self: end; align-self: center; width: 96px; aspect-ratio: 1; margin: 0; background: var(--pm-offer-art) center / contain no-repeat; } .offer-pitch > img.offer-art-picture { background: none; object-fit: cover; border-radius: var(--radius-md); } #quiz-root:has(img.offer-art-picture[src*="p-seated-kit"]) { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; } .offer-sell:has(img.offer-art-picture[src*="p-seated-kit"]) { flex: 1 0 auto; display: flex; flex-direction: column; } .offer-pitch:has(> img.offer-art-picture[src*="p-seated-kit"]) { display: flex; flex-direction: column; flex: 1 1 auto; } .offer-pitch:has(> img.offer-art-picture[src*="p-seated-kit"]) > :not(img) { align-self: stretch; } .offer-pitch > img.offer-art-picture[src*="p-seated-kit"] { flex: 1 1 0; width: 100%; min-height: clamp(60px, calc(100svh - 627px), 150px); max-height: 420px; height: auto; aspect-ratio: auto; margin: 0 0 18px; object-fit: cover; object-position: 50% 12%; border-radius: var(--radius-md); } .offer-sell:has(img.offer-art-picture[src*="p-seated-kit"]) .offer-buy { margin-top: auto; padding-top: 22px; } @media (max-height: 686px) { .offer-pitch > img.offer-art-picture[src*="p-seated-kit"] { display: none; } } .offer-pitch > .offer-why { grid-area: why; margin: 8px 0 0; font: 600 17px/1.35 var(--font); color: var(--pm-acc); text-wrap: pretty; } .offer-pitch > .offer-why b { font-weight: 750; } .offer-pitch > .offer-card { grid-area: card; margin: 10px 0 0; } @media (max-width: 599px) { .offer-pitch { grid-template-columns: minmax(0, 1fr) 72px; column-gap: 8px; } .offer-pitch > .offer-art { width: 72px; } } .offer-buy { margin: 24px 0 0; } .offer-sell .offer-card > p { margin: 0; font: 400 16px/1.45 var(--font); color: var(--pm-text); text-wrap: pretty; } .offer-sell .offer-card > .card-items + p { margin-top: 6px; font-size: 15px; text-align: center; } .offer-sell .offer-card .card-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px 6px; margin: 0; padding: 0; list-style: none; font-size: 16px; } .offer-sell .offer-card .card-items li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 0; font: 650 16px/1.1 var(--font); font-size: clamp(12px, calc((100vw - 56px) / 21), 16px); color: var(--pm-ink); text-align: center; overflow-wrap: anywhere; } .offer-sell .offer-card .card-items li::before { content: ""; position: static; flex: none; width: 36px; height: 36px; border: 0; transform: none; background: var(--pm-i-1) center / contain no-repeat; } .offer-sell .offer-card .card-items li:nth-child(2)::before { background-image: var(--pm-i-2); } .offer-sell .offer-card .card-items li:nth-child(3)::before { background-image: var(--pm-i-3); } .offer-sell .offer-card .card-items li:nth-child(4)::before { background-image: var(--pm-i-4); } .offer-sell .offer-card .card-items li:nth-child(5)::before { background-image: var(--pm-i-5); } .offer-sell .offer-card .card-items li:nth-child(6)::before { background-image: var(--pm-i-6); } @media (max-width: 399px) { .offer-sell .offer-card .card-items { gap: 6px 4px; } .offer-sell .offer-card .card-items li { gap: 1px; } .offer-sell .offer-card .card-items li::before { width: 26px; height: 26px; } .offer-buy { margin: 16px 0 0; } } .offer-sell .offer-price { margin: 0 0 12px; } .offer-sell .offer-price p { margin: 0; font: 400 16px/1.4 var(--font); color: var(--pm-text); } .offer-sell .offer-price b { margin-right: 4px; font: 700 46px/1 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--pm-ink); font-variant-numeric: tabular-nums; } .offer-sell .offer-price .offer-price-was { font: 600 24px/1 var(--pm-display); color: var(--pm-muted); text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; } .offer-sell .offer-price .offer-price-day { margin-top: 6px; color: var(--pm-acc); font-weight: 600; } .offer-sell .offer-price .offer-price-then { margin-top: 8px; font-weight: 600; color: var(--pm-ink); } .offer-sell .card.retention { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } .offer-sell .offer-binding p { margin: 0 0 8px; font: 400 15px/1.5 var(--font); color: var(--pm-text); } .offer-sell .offer-binding p.offer-renewal { font: 600 16px/1.4 var(--font); color: var(--pm-ink); } .offer-sell .offer-binding .offer-card-line { font-weight: 400; color: var(--pm-text); } .offer-sell .retention :is(.primary, .secondary) { width: 100%; min-height: var(--control-height, 56px); margin-top: 10px; } .offer-sell .retention .primary { margin-top: 16px; } .offer-sell .retention .secondary { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pm-line); color: var(--pm-ink); } .offer-sell .retention .secondary:hover:not(:disabled) { background: var(--pm-soft); } .offer-sell .offer-notice p { color: var(--pm-muted); } @media (max-width: 599px) { .offer-sell:has(.goods-terms-link) .offer-pitch > .offer-why { margin-top: 4px; } .offer-sell:has(.goods-terms-link) .offer-pitch > .offer-card { margin-top: 6px; } .offer-sell:has(.goods-terms-link) .offer-buy { margin-top: 10px; } .offer-sell:has(.goods-terms-link) .offer-price { margin-bottom: 4px; } .offer-sell:has(.goods-terms-link) .offer-binding p { margin-bottom: 2px; } .offer-sell:has(.goods-terms-link) .goods-terms-link { margin: 0; } .offer-sell:has(.goods-terms-link) .retention .primary { margin-top: 8px; } .offer-sell:has(.goods-terms-link) .retention .secondary { margin-top: 8px; } } [data-icon="arm"] { --fv-icon: url("/brand/fitvee/img/fv/line/dumbbell.svg"); } [data-icon="repeat"] { --fv-icon: url("/brand/fitvee/img/fv/line/repeat.svg"); } [data-icon="moon"] { --fv-icon: url("/brand/fitvee/img/fv/line/moon.svg"); } [data-icon="pill"] { --fv-icon: url("/brand/fitvee/img/fv/line/pill.svg"); } [data-icon="target"] { --fv-icon: url("/brand/fitvee/img/fv/line/target.svg"); } [data-icon="check"] { --fv-icon: url("/brand/fitvee/img/fv/line/check.svg"); } .vit-gets li:nth-child(n) .vit-glyph[data-icon], .vit-glyph[data-icon] { background: currentColor; border-radius: 0; -webkit-mask: var(--fv-icon, linear-gradient(transparent, transparent)) center / 28px no-repeat; mask: var(--fv-icon, linear-gradient(transparent, transparent)) center / 28px no-repeat; } #quiz-root:has(.offer-hero) { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; } .offer-hero { display: flex; flex-direction: column; flex: 1 0 auto; align-self: stretch; } .offer-hero-picture { display: block; flex: 1 1 0; width: 100%; min-height: 150px; max-height: 340px; object-fit: cover; border-radius: 30px 24px 34px 22px / 26px 32px 22px 30px; background: var(--pm-soft); } .offer-hero-body { flex: none; } .offer-hero h1 { margin: 12px 0 0; text-align: left; font: 600 26px/1.08 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; color: var(--pm-ink); text-wrap: balance; } .offer-hero .offer-hero-line { margin: 4px 0 0; font: 600 16px/1.35 var(--font); color: var(--pm-acc); text-wrap: pretty; } .offer-hero .card-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .offer-hero .card-items li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0; font: 600 14px/1.2 var(--font); color: var(--pm-ink); text-align: center; text-wrap: balance; } .offer-hero .card-items li::before { content: ""; flex: none; width: 34px; height: 34px; } .offer-hero .card-items li[data-icon]::before { background: currentColor; -webkit-mask: var(--fv-icon, linear-gradient(transparent, transparent)) center / 30px no-repeat; mask: var(--fv-icon, linear-gradient(transparent, transparent)) center / 30px no-repeat; } .offer-sell .offer-card .card-items li[data-icon="none"]::before, .offer-hero .card-items li[data-icon="none"]::before { display: none; } .offer-sell .offer-card .card-items:has(li[data-icon="none"]) { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 20px; } .offer-sell .offer-card .card-items:has(li[data-icon="none"]) li { align-items: flex-start; flex: 0 0 auto; text-align: left; overflow-wrap: normal; } .offer-sell .offer-card .card-items:has(li[data-icon="none"]) + p { text-align: left; } .offer-hero .offer-buy { margin: 14px 0 0; } .offer-hero .offer-price-row { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 14px/1.35 var(--font); color: var(--pm-text); } .offer-hero .offer-price-row b { flex: none; font: 700 40px/1 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--pm-ink); font-variant-numeric: tabular-nums; } .offer-hero .offer-price-row span { text-wrap: balance; } .offer-sell.offer-hero .retention .primary { margin-top: 12px; } .offer-hero .offer-under { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; margin: 8px 0 0; } .offer-hero .offer-under p { margin: 0; font: 400 13px/1.4 var(--font); color: var(--pm-muted); text-align: center; } .offer-hero .offer-under a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .offer-sell.offer-hero .retention .secondary { min-height: 44px; margin-top: 2px; background: none; box-shadow: none; font: 600 15px/1.2 var(--font); color: var(--pm-text); text-decoration: underline; text-underline-offset: 3px; } .offer-sell.offer-hero .retention .secondary:hover:not(:disabled) { background: none; color: var(--pm-ink); } @media (max-height: 600px) { .offer-hero-picture { min-height: 88px; } .offer-hero h1 { font-size: 22px; } .offer-hero .card-items, .offer-hero .offer-buy { margin-top: 10px; } .offer-sell.offer-hero .retention .primary { margin-top: 8px; } } @media (min-width: 900px) { .offer-sell.offer-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: 64px; align-items: center; align-content: center; } .offer-hero-picture { height: min(560px, calc(100svh - 160px)); max-height: 560px; } .offer-hero h1 { margin: 0; font-size: 40px; } .offer-hero .offer-hero-line { font-size: 18px; } .offer-hero .card-items { margin-top: 22px; } .offer-hero .card-items li { font-size: 15px; } .offer-hero .offer-buy { margin-top: 22px; } .offer-hero .offer-price-row b { font-size: 48px; } } .offer-sell .offer-fine { margin: 6px 0 0; } .offer-sell .offer-fine > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 600 14px/1.3 var(--font); color: var(--pm-acc); } .offer-sell .offer-fine > summary::-webkit-details-marker { display: none; } .offer-sell .offer-fine > summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .offer-sell .offer-fine[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } .offer-sell .offer-fine > p { margin: 0 0 6px; font: 400 14px/1.45 var(--font); color: var(--pm-muted); } @media (prefers-reduced-motion: no-preference) { .pm-wait .pm-art { animation: pm-breathe 3.2s ease-in-out infinite; } .pm-still .pm-art { animation: none; } .pm:not(.pm-wait) .pm-art { animation: pm-in .4s cubic-bezier(.2, .8, .2, 1) both; } .pm-art .pl-confetti i { animation: pm-fly 1.7s cubic-bezier(.15, .75, .3, 1) both; animation-delay: calc(var(--at) + var(--n) * 14ms); } .pm-ring, .pm-tick { animation: pm-pop .32s cubic-bezier(.3, 1.5, .5, 1) .04s both; } .pm-ring circle { stroke-dashoffset: 145; animation: pm-draw .36s ease-out .1s forwards; } .pm-ring path { stroke-dashoffset: 40; animation: pm-draw .26s ease-out .2s forwards; } .pm-tick path { stroke-dashoffset: 24; animation: pm-draw .26s ease-out .16s forwards; } .pm-body > *, .pm-step { animation: pm-rise .3s cubic-bezier(.2, .8, .2, 1) both; } .pm-body > :nth-child(2) { animation-delay: .03s; } .pm-body > :nth-child(3) { animation-delay: .06s; } .pm-body > :nth-child(4) { animation-delay: .09s; } .pm-body > :nth-child(n + 5), .pm-step { animation-delay: .12s; } .pm-wait .pm-body > * { animation: none; } .offer-pitch > *, .offer-buy { animation: pm-rise .3s cubic-bezier(.2, .8, .2, 1) both; } .offer-pitch > .offer-art { animation: pm-in .4s cubic-bezier(.2, .8, .2, 1) both; } .offer-buy { animation-delay: .06s; } .offer-sell .card-items li { animation: pm-rise .3s cubic-bezier(.2, .8, .2, 1) both; } .offer-sell .card-items li:nth-child(2) { animation-delay: .03s; } .offer-sell .card-items li:nth-child(3) { animation-delay: .06s; } .offer-sell .card-items li:nth-child(4) { animation-delay: .09s; } .offer-sell .card-items li:nth-child(5) { animation-delay: .12s; } .offer-sell .card-items li:nth-child(6) { animation-delay: .15s; } .offer-sell .offer-fine > summary::after { transition: transform .2s cubic-bezier(.2, .8, .2, 1), margin-top .2s cubic-bezier(.2, .8, .2, 1); } .offer-sell .offer-fine[open] > p { animation: pm-rise .3s cubic-bezier(.2, .8, .2, 1) both; } } @keyframes pm-fly { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } } @keyframes pm-draw { to { stroke-dashoffset: 0; } } @keyframes pm-pop { from { opacity: 0; transform: scale(.4); } } @keyframes pm-in { from { opacity: 0; transform: scale(.92); } } @keyframes pm-breathe { 50% { transform: scale(1.03); } } @keyframes pm-rise { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .pm-art .pl-confetti { display: none; } .pm-art, .pm-ring, .pm-tick, .pm-body > *, .pm-step, .offer-pitch > *, .offer-buy, .offer-sell .card-items li { animation: none; } } @media (min-width: 900px) { html:has(#quiz-root > astro-island[component-url*="/Paid."]) #quiz-root { max-width: 1120px; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .bar { height: 76px; padding: 0 48px; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .step { padding: 8px 48px 48px; } html:has(#quiz-root > astro-island[component-url*="/Paid."]) .step > :is(h1, p, a) { max-width: 600px; } .pm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 72px; min-height: min(620px, calc(100dvh - 160px)); } .pm-art { width: min(100%, 440px); margin: 0; } .pm-ring { width: 80px; height: 80px; left: 2%; } .pm-ring svg { width: 68px; height: 68px; } .pm h1 { margin: 0; font-size: 52px; } .pm-lede { max-width: 34ch; font-size: 19px; } .pm-go { width: auto; min-width: 280px; padding-inline: 44px; } .pm-strip { margin: 0 0 10px; } .pm-strip b { font-size: 36px; } .offer-sell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); column-gap: 80px; align-items: start; } .offer-pitch { grid-template-columns: minmax(0, 1fr) 140px; grid-template-areas: "head head" "why why" "card art"; column-gap: 20px; } .offer-pitch.offer-short { grid-template-areas: "head art" "why why"; } .offer-pitch > h1 { font-size: 44px; } .offer-pitch > .offer-art { align-self: center; width: 140px; margin: 0; } .offer-pitch > .offer-card { margin-top: 22px; } .offer-buy { margin: 0; } .offer-sell .offer-price b { font-size: 56px; } } .pr { display: grid; justify-items: stretch; align-content: center; max-width: 560px; min-height: calc(100dvh - 150px); padding-bottom: 24px; } .pr h1 { margin: 0; font: 600 34px/1.05 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; color: var(--pm-plum); text-wrap: balance; } .pr-rows { display: grid; margin: 22px 0 0; padding: 0; list-style: none; } .pr-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 56px; border-bottom: 1px solid var(--pm-line); } .pr-row:first-child { border-top: 1px solid var(--pm-line); } .pr-tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pm-purple-soft); } .pr-tick svg { width: 18px; height: 18px; overflow: visible; } .pr-tick path { fill: none; stroke: var(--pm-purple); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; } .pr-label { font: 400 15px/1.3 var(--font); color: var(--pm-muted); } .pr-value { font: 600 21px/1.2 var(--pm-display); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; color: var(--pm-purple); text-align: right; overflow-wrap: anywhere; } .pr .pr-wait { min-height: 1.45em; margin: 18px 0 0; font: 400 16px/1.45 var(--font); color: var(--pm-muted); } .pr .pr-wait::before { display: none; } .pr .pr-strip { margin-top: 22px; } .p1-arch { justify-self: center; width: 100%; max-width: 360px; aspect-ratio: 6 / 5; margin: 0; overflow: hidden; border-radius: 999px 999px 26px 26px / 520px 520px 26px 26px; background: var(--pm-soft); } .p1-arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; } .p1 h1 { margin: 22px 0 0; color: var(--pm-plum); } .p1 .pm-lede { margin-top: 10px; } .p1-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 8px 0; justify-items: center; width: 100%; margin: 22px 0 0; padding: 0; list-style: none; } .p1-d { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pm-purple-soft); font: 600 9px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--pm-purple); } .p1-today { background: var(--pm-bg); box-shadow: inset 0 0 0 2px var(--pm-acc); color: var(--pm-acc); font-weight: 750; } .p1-day { width: 100%; margin: 18px 0 0; } .p1-day b { display: block; font: 650 17px/1.25 var(--font); color: var(--pm-plum); } .p1-day span { display: block; margin-top: 2px; font: 400 15px/1.4 var(--font); color: var(--pm-muted); } .p1 .pm-go { margin-top: 16px; } .p1-bought { margin-top: 20px; } .install-line { width: 100%; margin: 16px 0 0; } .install-line-open { padding: 6px 0; border: 0; background: none; font: 500 15px/1.4 var(--font); color: var(--pm-muted); text-decoration: underline; text-decoration-color: var(--pm-line); text-underline-offset: 4px; cursor: pointer; } .install-line-open:hover { color: var(--pm-plum); } .install-line-steps { margin: 10px 0 0; } .install-line-steps .secondary { width: 100%; margin-top: 12px; } @media (prefers-reduced-motion: no-preference) { .pr-row { animation: pr-in .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--pr-at, 0ms); } .pr-row .pr-tick { animation: pm-pop .3s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--pr-at, 0ms) + 120ms); } .pr-row .pr-tick path { stroke-dashoffset: 24; animation: pm-draw .28s ease-out forwards; animation-delay: calc(var(--pr-at, 0ms) + 220ms); } .pr .pr-wait { animation: pm-rise .3s cubic-bezier(.2, .8, .2, 1) both; } .pr .p1-d { animation-delay: var(--p1-at, 0ms); } .pr .p1-today { animation: p1-fill .5s cubic-bezier(.2, .8, .2, 1) both, pr-ring .45s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--p1-at, 0ms), var(--pr-ring-at, 0ms); } .pr-settled .pr-row, .pr-settled .pr-row .pr-tick, .pr-settled .pr-row .pr-tick path, .pr-settled .p1-d { animation: none; stroke-dashoffset: 0; } .p1-arch { animation: pm-in .5s cubic-bezier(.2, .8, .2, 1) both; } .p1-d { animation: p1-fill .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--p1-at, 0ms) + 200ms); } } @keyframes pr-in { from { opacity: 0; transform: translateY(8px); } } @keyframes pr-ring { from { background: var(--pm-purple-soft); box-shadow: inset 0 0 0 0 var(--pm-acc); color: var(--pm-purple); transform: scale(1); } 60% { transform: scale(1.25); } } @keyframes p1-fill { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .pr-row, .pr-row .pr-tick, .pr-row .pr-tick path, .pr .pr-wait, .p1-arch, .p1-d { animation: none; stroke-dashoffset: 0; } } @media (min-width: 900px) { .pr { margin: 24px auto 0; } .pr h1 { font-size: 46px; } .pr-row { min-height: 58px; } .pr { min-height: calc(100dvh - 190px); } .pr-value { font-size: 24px; } .pr .p1-strip { max-width: none; } .pr .p1-d { width: 26px; height: 26px; font-size: 10.5px; } .p1-arch { max-width: 460px; aspect-ratio: 4 / 5; } .p1 h1 { margin-top: 0; } .p1-strip { max-width: 440px; } .p1-d { width: 26px; height: 26px; font-size: 10.5px; } .p1 .install-line { max-width: 440px; } } .plan-day-start { --pd-i-0: url("/brand/fitvee/img/fv/i-clock.webp"); --pd-i-n: url("/brand/fitvee/img/fv/i-check.webp"); --pd-i-ask: url("/brand/fitvee/img/fv/i-target.webp"); --pd-i-tip: url("/brand/fitvee/img/fv/i-bulb.webp"); --pd-i-check: url("/brand/fitvee/img/fv/i-check.webp"); --pd-i-setup: url("/brand/fitvee/img/fv/i-house.webp"); --pd-i-wall: url("/brand/fitvee/img/fv/i-wall.webp"); --pd-i-chair: url("/brand/fitvee/img/fv/i-chair.webp"); --pd-i-shoe: url("/brand/fitvee/img/fv/i-shoe.webp"); } html[data-track="chair"] .plan-day-start { --pd-i-setup: url("/brand/fitvee/img/fv/i-chair.webp"); } html[data-track="men"] .plan-day-start { --pd-i-0: url("/brand/fitvee/img/fv/coal/i-clock.webp"); --pd-i-n: url("/brand/fitvee/img/fv/coal/i-check.webp"); --pd-i-ask: url("/brand/fitvee/img/fv/coal/i-target.webp"); --pd-i-tip: url("/brand/fitvee/img/fv/coal/i-bulb.webp"); --pd-i-check: url("/brand/fitvee/img/fv/coal/i-check.webp"); --pd-i-setup: url("/brand/fitvee/img/fv/coal/i-house.webp"); --pd-i-wall: var(--pd-i-n); --pd-i-chair: url("/brand/fitvee/img/fv/coal/i-chair.webp"); --pd-i-shoe: url("/brand/fitvee/img/fv/coal/i-shoe.webp"); } .plan-day-start .pd-art { background-image: url("/brand/fitvee/img/fv/sp-day1.webp"); } html[data-track="chair"] .plan-day-start .pd-art { background-image: url("/brand/fitvee/img/fv/sp-chair-day1.webp"); } html[data-track="men"] .plan-day-start .pd-art { background-image: url("/brand/fitvee/img/fv/sm-day1.webp"); } .plan-day-start .pd-top h2 { font: 600 32px/1.05 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; color: var(--ap-ink); } html[data-track="men"] .plan-day-start .pd-top h2 { font-weight: 800; letter-spacing: -0.01em; } .plan-day-start .pd-lead { font: 400 16.5px/1.5 var(--font); color: var(--ap-ink); } .plan-day-start .pd-lead-more p { font: 400 15px/1.45 var(--font); color: var(--ap-muted); max-width: 60ch; } .plan-day-start .pd-cue { font: 650 16px/1.35 var(--font); color: var(--ap-ink); } .plan-day-start .pd-fact { font: 400 15px/1.45 var(--font); color: var(--ap-muted); } .plan-day-start .pd-fact b { font: 600 16px/1.3 var(--font); color: var(--ap-ink); } .plan-day-start .pd-fact .pd-icon { background-image: var(--pd-i-n); } .plan-day-start .pd-fact[data-i="0"] .pd-icon { background-image: var(--pd-i-0); } .plan-day-start .pd-row { font: 400 15.5px/1.45 var(--font); color: var(--ap-ink); } .plan-day-start .pd-row .pd-icon { background-image: var(--pd-i-n); } .plan-day-start .pd-row[data-icon="wall"] .pd-icon { background-image: var(--pd-i-wall); } .plan-day-start .pd-row[data-icon="chair"] .pd-icon { background-image: var(--pd-i-chair); } .plan-day-start .pd-row[data-icon="shoe"] .pd-icon { background-image: var(--pd-i-shoe); } .plan-day-start .pd-ask .pd-icon { background-image: var(--pd-i-ask); } .plan-day-start .pd-tip .pd-icon { background-image: var(--pd-i-tip); } .plan-day-start .pd-check .pd-icon { background-image: var(--pd-i-check); } .plan-day-start .pd-setup .pd-icon { background-image: var(--pd-i-setup); } .plan-day-start .pd-sec h3, .plan-day-start .pd-more > summary h3 { font: 600 20px/1.2 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } html[data-track="men"] .plan-day-start .pd-sec h3, html[data-track="men"] .plan-day-start .pd-more > summary h3 { font-weight: 800; } .plan-day-start .pd-pic { border-radius: 16px; background: var(--ap-bg-2); } .plan-day-start .pd-pic img { border-radius: 16px; } html[data-track="men"] .plan-day-start .pd-pic { background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .plan-day-start .pd-n { background: var(--ap-card); color: var(--ap-acc); box-shadow: 0 0 0 3px var(--bg); font-size: 14px; } .plan-day-start .pd-pic:not(:has(img)) { background-color: var(--ap-bg-2); background-image: url("/brand/fitvee/img/fv/i-lotus.webp"); background-repeat: no-repeat; background-position: center; background-size: 76%; } html[data-track="men"] .plan-day-start .pd-pic:not(:has(img)) { background-color: var(--ap-card); background-image: url("/brand/fitvee/img/fv/coal/i-mzone-full.webp"); } .plan-day-start .pd-pic:not(:has(img)) .pd-n { left: -6px; top: auto; bottom: -6px; transform: none; width: 28px; height: 28px; background: var(--ap-card); box-shadow: 0 0 0 3px var(--bg); font-size: 14px; } html[data-track="men"] .plan-day-start .pd-n { color: #8fb3d9; } .plan-day-start .pd-move > .plan-move-name, .plan-day-start .pd-move-name .inline-link { font: 600 17px/1.3 var(--font); color: var(--ap-ink); text-decoration: none; } .plan-day-start .pd-move-list > li:has(.plan-move-name) { padding-right: 26px; } .plan-day-start .pd-move-list > li:has(.plan-move-name)::after { content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) rotate(-90deg); background: var(--ap-muted); -webkit-mask: url("icons/chevron.svg") center / contain no-repeat; mask: url("icons/chevron.svg") center / contain no-repeat; } .plan-day-start .pd-move-list > li:has(.plan-move-name:hover) .plan-move-name { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; } .plan-day-start .pd-dose { font: 600 14.5px/1.35 var(--font); color: var(--ap-acc); } html[data-track="men"] .plan-day-start .pd-dose { color: #8fb3d9; } .plan-day-start .pd-note { font: 400 15px/1.45 var(--font); color: var(--ap-muted); } .plan-day-start .pd-move .plan-move-option, .plan-day-start .pd-move .plan-take-care { font: 400 14.5px/1.45 var(--font); color: var(--ap-muted); } .plan-day-start .pd-more > summary { color: var(--ap-ink); } .plan-day-start :is(.pd-text, .pd-ask, .pd-tip, .pd-check, .pd-setup, .pd-more) .plan-page :is(p, li) { font: 400 15.5px/1.5 var(--font); color: var(--ap-muted); } .plan-day-start .pd-foot { font: 400 14px/1.45 var(--font); color: var(--ap-muted); } @media (min-width: 900px) { .plan-day-start .pd-top h2 { font-size: 42px; } .plan-day-start .pd-lead { font-size: 18px; } .plan-day-start .pd-lead-more p { font-size: 16px; } } @media (prefers-reduced-motion: no-preference) { .plan-day-start .pd-art { animation: pm-in .4s cubic-bezier(.2, .8, .2, 1) both; } .plan-day-start .pd-fact, .plan-day-start .pd-go { animation: pm-rise .3s cubic-bezier(.2, .8, .2, 1) both; } .plan-day-start .pd-go { animation-delay: .06s; } } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-art.has-photo { background-image: none; overflow: hidden; border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%; box-shadow: 0 24px 48px -30px rgba(43, 21, 48, .5); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-art.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-top h2 { font: 750 36px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.028em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-icon { display: none; } html:has(.has-segments):not([data-track="men"]) .plan-day-start :is(.pd-fact, .pd-row, .pd-ask, .pd-tip, .pd-check, .pd-setup) { grid-template-columns: minmax(0, 1fr); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-sec { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ks-plum-faint); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-cue + .pd-sec { border-top: 0; padding-top: 0; } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-sec h3, html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-more > summary h3 { font: 750 24px/1.05 var(--ap-display); letter-spacing: -0.022em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-rows li + li { padding-top: 12px; border-top: 1px solid var(--ks-plum-faint); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-pic, html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-pic img { border-radius: 44% 56% 61% 39% / 55% 41% 59% 45%; } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-pic:not(:has(img)) { background-color: var(--ks-blush); background-image: none; } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-n { background: var(--ks-paper); color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-dose { color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-move-list > li + li { border-top-color: var(--ks-plum-faint); } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-foot { padding-top: 18px; border-top: 1px solid var(--ks-plum-faint); } @media (min-width: 900px) { html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-art.has-photo { width: 300px; } html:has(.has-segments):not([data-track="men"]) .plan-day-start .pd-top h2 { font-size: 54px; } } html:has(.has-segments):not([data-track="men"]) .lib-sheet .lib-sheet-hero:not(.is-plain) { overflow: visible; aspect-ratio: auto; max-height: none; background: none; border-radius: 0; box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .lib-sheet .lib-sheet-hero:not(.is-plain) img { display: block; height: auto; aspect-ratio: 6 / 5; max-height: min(52vh, 480px); object-position: 50% 18%; border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%; box-shadow: 0 30px 60px -36px rgba(43, 21, 48, .45); } html:has(.has-segments):not([data-track="men"]) .lib-sheet .lib-sheet-hero:not(.is-plain) .ap-hero-in { position: static; padding: 22px 0 0; background: none; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .lib-sheet .lib-sheet-hero .ap-h1 { font: 750 34px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.026em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .lib-sheet .lib-sheet-hero .meta { gap: 0; margin-top: 8px; font: 400 17px/1.35 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .lib-sheet .lib-where { margin-top: 6px; font: 500 15px/1.35 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .lib-sheet .ap-sub { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ks-plum-faint); font: 750 24px/1.05 var(--ap-display); letter-spacing: -0.022em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .lib-sheet .ap-moves .blank { background-color: var(--ks-blush); background-image: none; } @media (min-width: 560px) { html:has(.has-segments):not([data-track="men"]) .lib-sheet .lib-sheet-hero:not(.is-plain) { max-width: 460px; } } .has-segments { --sv-art: url("/brand/fitvee/img/fv/sp-path.webp"); --sv-i-too_expensive: url("/brand/fitvee/img/fv/i-tag.webp"); --sv-i-no_time: url("/brand/fitvee/img/fv/i-clock.webp"); --sv-i-too_hard: url("/brand/fitvee/img/fv/i-feather.webp"); --sv-i-too_easy: url("/brand/fitvee/img/fv/i-bolt.webp"); --sv-i-no_results: url("/brand/fitvee/img/fv/i-chart.webp"); --sv-i-technical: url("/brand/fitvee/img/fv/i-phone.webp"); --sv-i-other: url("/brand/fitvee/img/fv/i-chat.webp"); --sv-i-discount: url("/brand/fitvee/img/fv/i-tag.webp"); --sv-i-pause: url("/brand/fitvee/img/fv/i-pause.webp"); --sv-i-lifetime: url("/brand/fitvee/img/fv/i-medal.webp"); --sv-i-plan_done: url("/brand/fitvee/img/fv/i-target.webp"); --sv-i-play: url("/brand/fitvee/img/fv/i-play.webp"); } html[data-track="chair"] .has-segments { --sv-art: url("/brand/fitvee/img/fv/sp-heart.webp"); } html[data-track="men"] .has-segments { --sv-art: url("/brand/fitvee/img/fv/sm-path.webp"); --sv-i-too_expensive: url("/brand/fitvee/img/fv/coal/i-tag.webp"); --sv-i-no_time: url("/brand/fitvee/img/fv/coal/i-clock.webp"); --sv-i-too_hard: url("/brand/fitvee/img/fv/coal/i-feather.webp"); --sv-i-too_easy: url("/brand/fitvee/img/fv/coal/i-bolt.webp"); --sv-i-no_results: url("/brand/fitvee/img/fv/coal/i-chart.webp"); --sv-i-technical: url("/brand/fitvee/img/fv/coal/i-phone.webp"); --sv-i-other: url("/brand/fitvee/img/fv/coal/i-chat.webp"); --sv-i-discount: url("/brand/fitvee/img/fv/coal/i-tag.webp"); --sv-i-pause: url("/brand/fitvee/img/fv/coal/i-pause.webp"); --sv-i-lifetime: url("/brand/fitvee/img/fv/coal/i-medal.webp"); --sv-i-plan_done: url("/brand/fitvee/img/fv/coal/i-target.webp"); --sv-i-play: url("/brand/fitvee/img/fv/coal/i-play.webp"); } .has-segments section:has(> .sticky-exit) > .sticky-exit .secondary { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ap-ink); color: var(--ap-ink); } .has-segments section:has(> .sticky-exit) > .sticky-exit .secondary:hover:not(:disabled) { background: var(--ap-soft); } .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede) { position: relative; } .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede)::before { content: ""; position: absolute; right: -4px; top: -4px; width: 88px; aspect-ratio: 1; background: var(--sv-art) center / contain no-repeat; pointer-events: none; } .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede) > h1 { min-height: 84px; padding-right: 96px; } .has-segments section:has(> .sticky-exit) > h1 { margin: 0; font: 600 34px/1.04 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; color: var(--ap-ink); text-wrap: balance; } html[data-track="men"] .has-segments section:has(> .sticky-exit) > h1 { font-weight: 800; letter-spacing: -0.01em; } .has-segments .save-lede { margin: 12px 0 22px; font: 400 16.5px/1.45 var(--font); color: var(--ap-muted); text-wrap: pretty; } .has-segments .save-progress { margin: 0 0 22px; font: 600 17.5px/1.35 var(--font); color: var(--ap-ink); } .has-segments .cancel-one { display: block; gap: 0; } .has-segments .cancel-one .retention[data-kind] { gap: 0; } .has-segments .save-fold { border-top: 1px solid var(--line); } .has-segments .save-more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ap-ink); font: 600 17.5px/1.35 var(--font); text-align: start; text-decoration: none; } .has-segments .save-more::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 12px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .has-segments .save-more[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); } .has-segments .save-fold .retention[data-kind] { border-top: 1px solid var(--line); } .has-segments .terms-fold { margin: 4px 0 0; } .has-segments .terms-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--ap-acc-deep); font: 600 14.5px/1.3 var(--font); } .has-segments .terms-fold > summary::-webkit-details-marker { display: none; } .has-segments .terms-fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .has-segments .terms-fold[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } .has-segments .terms-fold > p { margin: 0 0 6px; font: 400 14px/1.45 var(--font); color: var(--ap-muted); } .has-segments .moment-terms .terms-fold > p { font-size: 12.5px; line-height: 1.4; } @media (prefers-reduced-motion: no-preference) { .has-segments .terms-fold > summary::after { transition: transform .2s cubic-bezier(.2, .8, .2, 1), margin-top .2s cubic-bezier(.2, .8, .2, 1); } .has-segments .terms-fold[open] > p { animation: pm-rise .3s cubic-bezier(.2, .8, .2, 1) both; } } .has-segments .cancel-survey { margin: 0 0 22px; padding: 0; border: 0; background: none; box-shadow: none; } .has-segments .cancel-survey h2 { margin: 0; font: 600 18px/1.3 var(--font); color: var(--ap-ink); text-align: start; } .has-segments .cancel-survey .note { margin: 4px 0 12px; font: 400 14.5px/1.4 var(--font); color: var(--ap-muted); } .has-segments .cancel-survey .options-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .has-segments .cancel-survey .option { display: flex; justify-content: flex-start; align-items: center; gap: 12px; width: 100%; min-height: 50px; margin: 0; padding: 6px 14px 6px 10px; border-radius: 16px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ap-ink); font: 500 15.5px/1.25 var(--font); letter-spacing: 0; text-align: start; } .has-segments .cancel-survey .option::before { content: ""; flex: none; width: 32px; height: 32px; background: var(--sv-i-other) center / contain no-repeat; } .has-segments .cancel-survey .option[data-reason="too_expensive"]::before { background-image: var(--sv-i-too_expensive); } .has-segments .cancel-survey .option[data-reason="no_time"]::before { background-image: var(--sv-i-no_time); } .has-segments .cancel-survey .option[data-reason="too_hard"]::before { background-image: var(--sv-i-too_hard); } .has-segments .cancel-survey .option[data-reason="too_easy"]::before { background-image: var(--sv-i-too_easy); } .has-segments .cancel-survey .option[data-reason="no_results"]::before { background-image: var(--sv-i-no_results); } .has-segments .cancel-survey .option[data-reason="technical"]::before { background-image: var(--sv-i-technical); } .has-segments .cancel-survey .option[data-reason="plan_done"]::before { background-image: var(--sv-i-plan_done); } .has-segments .cancel-survey .option[aria-pressed="true"] { background: var(--ap-soft); box-shadow: inset 0 0 0 2px var(--ap-acc); } html[data-track="men"] .has-segments .cancel-survey .option[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #8fb3d9; } .has-segments .retention[data-kind] { position: relative; display: flex; flex-direction: column; margin: 0; padding: 20px 0 20px 60px; border: 0; border-radius: 0; background: none; box-shadow: none; } .has-segments .retention[data-kind] + .retention[data-kind] { border-top: 1px solid var(--line); } .has-segments .retention[data-kind] { scroll-margin-top: 24px; } .has-segments .retention[data-kind]::before { content: ""; position: absolute; left: 0; top: 18px; width: 44px; height: 44px; background: var(--sv-i-discount) center / contain no-repeat; } .has-segments .retention[data-kind="pause"]::before, .has-segments .retention[data-kind="paid_pause"]::before { background-image: var(--sv-i-pause); } .has-segments .retention[data-kind="lifetime"]::before { background-image: var(--sv-i-lifetime); } .has-segments .retention[data-kind] > p { margin: 0 0 6px; font: 400 14.5px/1.45 var(--font); color: var(--ap-muted); } .has-segments .retention[data-kind] > p:first-child { margin-bottom: 8px; font: 600 17.5px/1.35 var(--font); color: var(--ap-ink); } .has-segments .retention[data-kind] > p:last-of-type { margin-bottom: 14px; } .has-segments .retention[data-kind] > :is(.primary, .secondary) { width: calc(100% + 60px); margin: auto 0 0 -60px; } html:has(.has-segments):not([data-track="men"]) .has-segments .retention[data-kind] { padding-left: 0; padding-right: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .retention[data-kind]::before { content: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .retention[data-kind] > :is(.primary, .secondary) { width: 100%; margin: auto 0 0; } .has-segments .retention[data-kind] > .primary { background: var(--ap-btn, var(--ap-acc)); color: var(--ap-btn-ink, var(--ap-acc-ink)); } .has-segments .retention[data-kind] > .primary:hover:not(:disabled) { background: var(--ap-btn, var(--ap-acc)); box-shadow: none; } @media (hover: hover) { .has-segments .retention[data-kind] > .primary:hover:not(:disabled) { background: var(--ap-btn-hover, var(--ap-acc-deep)); } } @media (min-width: 900px) { .has-segments:not(.has-pane):has(section:not(.save-drawn) > .sticky-exit) { max-width: 1000px; } .has-segments section:not(.save-drawn):has(> .sticky-exit) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: stretch; } .has-segments section:not(.save-drawn):has(> .sticky-exit) > * { grid-column: 1 / -1; } .has-segments section:not(.save-drawn):has(> .sticky-exit) > .retention[data-kind] { grid-column: auto; } .has-segments section:not(.save-drawn):has(> .sticky-exit) > .retention[data-kind] + .retention[data-kind] { border-top: 0; } .has-segments:not(.has-pane):has(section.has-reasons:not(.save-drawn)) { max-width: 640px; } .has-segments section.has-reasons:not(.save-drawn) { display: block; } .has-segments section.has-reasons:not(.save-drawn) > .retention[data-kind] + .retention[data-kind] { border-top: 1px solid var(--line); } .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede)::before { width: 150px; top: -14px; } .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede) > h1 { min-height: 0; padding-right: 0; } .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede) > :is(h1, .save-lede) { max-width: calc(100% - 170px); } .has-segments .cancel-survey .options-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .has-segments section:has(> .sticky-exit) > h1 { font-size: 44px; } .has-segments .save-lede { max-width: 60ch; margin-bottom: 30px; } .has-segments .save-progress { margin: 6px 0 0; } } .rejoin p.terms-renewal { font-weight: 600; } .rejoin .offer-fine { margin: 6px 0 0; } .rejoin .offer-fine > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 600 14px/1.3 var(--font); } .rejoin .offer-fine > summary::-webkit-details-marker { display: none; } .rejoin .offer-fine > summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .rejoin .offer-fine[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } .rejoin .offer-fine > p { margin: 0 0 6px; font: 400 14px/1.45 var(--font); } .seg-today .plan-day-done { display: grid; justify-items: center; padding: 22px 20px 20px; border-radius: 28px; background: var(--ap-soft); text-align: center; } .plan-done-art { display: block; width: min(176px, 46vw); aspect-ratio: 1; background: url("/brand/fitvee/img/fv/sp-path.webp") center / contain no-repeat; } .plan-done-body { display: grid; justify-items: center; width: 100%; } .plan-day-done .done-mark { display: inline-grid; grid-template-columns: auto auto; justify-content: center; gap: 12px; margin: 6px 0 0; padding: 0; background: none; } .plan-day-done .done-badge { width: 48px; height: 48px; color: var(--ap-done); } .plan-day-done .done-text { font: 600 27px/1.1 var(--ap-display); letter-spacing: -0.015em; color: var(--ap-acc-deep); text-wrap: balance; } .plan-done-next { display: grid; justify-items: center; gap: 6px; width: 100%; margin: 20px 0 0; padding: 14px 18px 16px; border-radius: 20px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .plan-done-when { font: 650 12px/16px var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-muted); } .plan-done-next b { font: 700 18px/1.3 var(--font); color: var(--ap-ink); } .plan-done-min { padding: 7px 12px; border-radius: 99px; font: 650 14px/1 var(--font); color: var(--ap-ink); background: var(--ap-bg-2); } .has-segments .plan-next-now { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 48px; margin: 8px 0 -8px; padding: 0 10px; font: 650 16px/1.2 var(--font); color: var(--ap-acc-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .plan-next-now svg { width: 18px; height: 18px; } @media (min-width: 560px) { .seg-today .plan-day-done { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; padding: 28px 32px; text-align: left; } .plan-done-art { grid-column: 2; grid-row: 1; width: 200px; } .plan-done-body { grid-column: 1; grid-row: 1; justify-items: start; } .plan-day-done .done-mark { justify-content: start; } .plan-done-next { justify-items: start; } .has-segments .plan-next-now { margin-left: -10px; } } html[data-track="men"] .seg-today .plan-day-done { background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } html[data-track="men"] .plan-done-art { background-image: url("/brand/fitvee/img/fv/sm-path.webp"); } html[data-track="men"] .plan-day-done .done-text { font-weight: 800; color: var(--ap-ink); } html[data-track="men"] .plan-done-next { background: var(--ap-bg-2); } html[data-track="men"] .plan-done-min { background: var(--ap-card); } .seg-today .ap-rhythm { margin: 22px 0 0; padding: 14px 16px 6px; border-radius: 20px; background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--line); } .has-segments .ap-app .ap-rhythm .kit-label { margin: 0 0 6px; font: 650 12px/16px var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-muted); } .ap-rhythm .kit-rhythm { display: block; } .ap-rhythm .kit-rhythm-open { display: grid; gap: 10px; width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px 10px; } .ap-rhythm .kit-rhythm-days { width: 100%; gap: 0; } .ap-rhythm .kit-rhythm-days li { flex: 1 1 0; width: auto; min-width: 0; gap: 7px; } @media (min-width: 560px) { .ap-rhythm .kit-rhythm-days { max-width: 440px; } } .ap-rhythm .kit-rhythm-letter { font: 650 12.5px/1 var(--font); letter-spacing: 0.02em; color: var(--ap-muted); } .ap-rhythm .kit-rhythm-dot { width: 16px; height: 16px; border: 2px solid var(--line); background: var(--ap-bg-2); } .ap-rhythm .kit-rhythm-days li.is-on .kit-rhythm-dot { border-color: var(--ap-done); background: var(--ap-done); } .ap-rhythm .kit-rhythm-days li.is-today .kit-rhythm-letter { color: var(--ap-ink); font-weight: 800; } .ap-rhythm .kit-rhythm-days li.is-today .kit-rhythm-dot { box-shadow: 0 0 0 3px var(--ap-card), 0 0 0 5px var(--ap-done); } .ap-rhythm .kit-rhythm-line { display: flex; width: 100%; font: 600 15px/1.35 var(--font); color: var(--ap-ink); } .ap-rhythm .kit-rhythm-line::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--ap-muted); transform: rotate(-90deg); -webkit-mask: url("icons/chevron.svg") center / contain no-repeat; mask: url("icons/chevron.svg") center / contain no-repeat; } .ap-rhythm .kit-rhythm-check path { stroke: var(--ap-done); } .ap-rhythm .kit-rhythm-act { margin: 0 0 10px; } .seg-today .plan-day-done + .ap-rhythm, .seg-today .plan-day-done + .note + .ap-rhythm { margin-top: 14px; } .has-segments .ap-app .seg-today > .ap-rhythm + .ap-sub, .seg-today > .ap-rhythm + .ap-moves-wait { margin-top: 30px; } @media (min-width: 1200px) { :is(html[data-seg="today"], html:not([data-seg])) .has-segments .seg-today:has(> .ap-hero:not(.is-plain)):not(:has(> .kit-welcome)) { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto auto auto 1fr; column-gap: 22px; align-items: start; } .seg-today:has(> .ap-hero:not(.is-plain)):not(:has(> .kit-welcome)) > * { grid-column: 1 / -1; } .seg-today:has(> .ap-hero:not(.is-plain)):not(:has(> .kit-welcome)) > .ap-hero { grid-column: 1; grid-row: 1 / span 4; } .seg-today:has(> .ap-hero:not(.is-plain)):not(:has(> .kit-welcome)) > .ap-rhythm { grid-column: 2; grid-row: 1; margin-top: 0; } .seg-today:has(> .ap-hero:not(.is-plain)):not(:has(> .kit-welcome)) > .ap-tomorrow { grid-column: 2; grid-row: 2; margin-top: 12px; } .seg-today:has(> .ap-hero:not(.is-plain)):not(:has(> .kit-welcome)) > .ap-more { grid-column: 2; grid-row: 3; margin-top: 12px; } } .seg-today .kit-welcome { grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 0; margin: 0 0 16px; padding: 18px 18px 20px; background: var(--ap-card); border-color: var(--line); } .seg-today .kit-welcome-text { display: contents; } .seg-today .kit-welcome-text h2 { grid-column: 2; margin: 0; padding-right: 34px; font: 600 23px/1.15 var(--ap-display); letter-spacing: -0.01em; color: var(--ap-ink); } .seg-today .kit-welcome-text p, .seg-today .kit-welcome-actions { grid-column: 1 / -1; } .seg-today .kit-welcome-text p { margin: 0 0 4px; font: 500 15.5px/1.45 var(--font); color: var(--text); } .seg-today .kit-welcome-text h2 + p { margin-top: 12px; } .seg-today .kit-welcome-actions .primary { width: 100%; min-height: 54px; border-radius: 99px; font: 750 17px/1 var(--font); } @media (min-width: 560px) { .seg-today .kit-welcome-actions .primary { width: auto; padding: 0 28px; } } html[data-track="men"] .seg-today .kit-welcome-text h2 { font-weight: 800; } .seg-today > .habit-card { margin: 16px 0 0; } .seg-today .kit-asks > .kit-ask > :first-child { margin-top: 24px; } .seg-today .plan-day-done ~ .ap-more { margin-top: 14px; } html[data-seg="me"] .has-segments[data-acct-screen] .seg-me { display: none; } .seg-me .me-line { margin: -8px 0 18px; color: var(--ap-muted, var(--text-muted)); font-size: 16px; } .seg-me .me-rows { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .seg-account .account-hero { display: none; } .seg-account .account-home > .account-rows:not(.is-quiet) { margin-top: -14px; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); } .step:has(.seg-me[data-me-screen]) .seg-account { display: none; } .seg-me > .kit-avatar-button { display: inline-grid; margin: 0 14px 0 0; vertical-align: middle; } .seg-me > .kit-avatar-button + h2 { display: inline-block; vertical-align: middle; } .seg-me > .kit-avatar-button .kit-avatar { background: var(--ap-soft); color: var(--ap-acc-deep); font-family: var(--ap-display); } .ap-badges li { position: relative; } .ap-badges li.is-new .done-burst { inset: 0 auto auto 50%; width: 58px; height: 64px; margin-left: -29px; } @media (prefers-reduced-motion: no-preference) { .plan-day-done:has(.done-mark.is-fresh) .plan-done-art { animation: ap-art-in var(--m-rise, 420ms) var(--e-out, ease-out) backwards; } .plan-day-done:has(.done-mark.is-fresh) .plan-done-next { animation: ap-rise var(--m-rise, 420ms) var(--e-out, ease-out) 900ms backwards; } .plan-day-done:has(.done-mark.is-fresh) .plan-next-now { animation: ap-rise var(--m-rise, 420ms) var(--e-out, ease-out) 1000ms backwards; } @keyframes ap-art-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } } @keyframes ap-rise { from { opacity: 0; transform: translateY(10px); } } .ap-badges li.is-new svg { animation: ap-badge-pop var(--m-burst, 600ms) var(--e-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) calc(160ms + var(--n, 0) * 180ms) backwards; } .ap-badges li.is-new .done-burst i { animation: ap-badge-spark 640ms ease-out calc(420ms + var(--n, 0) * 180ms) backwards; } @keyframes ap-badge-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-12deg); } 55% { opacity: 1; } } @keyframes ap-badge-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-30px) scaleY(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-46px) scaleY(1); } } } .plan-offline { margin-top: 10px; } .plan-offline .ap-safe { margin-top: 8px; } .offline-play .player-page { display: none; } .offline-home .ap-line { margin-bottom: 14px; } .offline-home .ap-days .dt small { display: block; margin-top: 2px; font: 500 13px/1.3 var(--font); color: var(--ap-muted); } .offline-home .ap-days .go { margin-inline-start: auto; font: 700 14.5px/1 var(--font); color: var(--ap-acc-deep); } .offline-home .note { margin: 14px 0 0; font: 500 14px/1.45 var(--font); color: var(--ap-muted); } .offline-home .offline-retry { margin-top: 18px; } .has-segments :is(.chal-list, .chal-page, .ap-slot-challenge) { --chal-ink: var(--ap-ink); --chal-ink-soft: var(--ap-muted); --chal-line: var(--line); --chal-cta: var(--ap-btn, var(--ap-acc)); --chal-cta-ink: var(--ap-btn-ink, var(--ap-acc-ink)); --chal-pic-r: 18px; } html:not([data-track="men"]) .has-segments :is(.chal-list, .chal-page, .ap-slot-challenge) { --chal-ink: #2b1530; --chal-ink-soft: #5b4359; --chal-line: rgba(43, 21, 48, .12); --chal-cta: #2b1530; --chal-cta-ink: #fdf9f3; --chal-icon: var(--ks-magenta, #b0205a); } .has-segments .chal-story-head h2 { font: 600 28px/1.1 var(--ap-display); letter-spacing: -0.01em; } .has-segments .chal-list > h1 { font: 600 28px/1.1 var(--ap-display); letter-spacing: -0.01em; color: var(--chal-ink); text-align: start; } .has-segments .chal-len-badge b { font: 600 26px/1 var(--ap-display); } :root:has(.has-segments .chal-page) .ap-daychip { display: none; } html[data-track="men"] .has-segments .ks-greet h2 { margin: 8px 0 0; } html[data-track="men"] .has-segments .ks-name { display: block; } html[data-track="men"] .has-segments .ks-lede { margin: 8px 0 0; font: 400 17px/1.4 var(--font); color: var(--ap-muted); } html[data-track="men"] .has-segments .ks-frame { position: relative; margin-top: 18px; } html[data-track="men"] .has-segments .ks-frame > img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 8 / 7; object-fit: cover; border-radius: 22px; } html[data-track="men"] .has-segments .ks-inset { display: none; } html[data-track="men"] .has-segments .ks-session .ap-hero-in { position: static; padding: 16px 0 0; background: none; color: var(--ap-ink); } html[data-track="men"] .has-segments .ks-page > .plan-open { margin-top: 16px; } html[data-track="men"] .has-segments .ks-session .meta { display: block; margin: 8px 0 0; font: 400 17px/1.35 var(--font); color: var(--ap-muted); } html[data-track="men"] .has-segments .ks-session .meta span { padding: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; } html[data-track="men"] .has-segments .ks-rings, html[data-track="men"] .has-segments .ks-round, html[data-track="men"] .has-segments .ks-treats { margin-top: 34px; } html[data-track="men"] .has-segments .ks-rings-in { display: flex; align-items: center; gap: 20px; } html[data-track="men"] .has-segments .ks-rings svg { flex: none; width: 132px; height: 132px; } html[data-track="men"] .has-segments .ks-rings circle { fill: none; stroke-width: 11; stroke-linecap: round; } html[data-track="men"] .has-segments .ks-rings .track { stroke: rgba(235, 225, 211, .1); } html[data-track="men"] .has-segments .ks-rings .arc { stroke: var(--ap-acc-deep); } html[data-track="men"] .has-segments .ks-rings .arc.is-next { stroke: var(--ap-ink); } html[data-track="men"] .has-segments .ks-rings .arc.is-event { stroke: var(--ap-muted); } html[data-track="men"] .has-segments .ks-ring-key { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } html[data-track="men"] .has-segments .ks-ring-key b, html[data-track="men"] .has-segments .ks-ring-key span { display: block; } html[data-track="men"] .has-segments .ks-ring-key .n, html[data-track="men"] .has-segments .ks-streak .n { font-style: normal; font-weight: 700; color: var(--ap-acc-deep); } html[data-track="men"] .has-segments .ks-dots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px 0; justify-items: center; margin: 14px 0 0; padding: 0; list-style: none; } html[data-track="men"] .has-segments .ks-dots .c { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(235, 225, 211, .08); font: 600 10.5px/1 var(--font); color: var(--ap-muted); } html[data-track="men"] .has-segments .ks-dots li.is-done .c { background: var(--ap-acc-deep); color: #050300; } html[data-track="men"] .has-segments .ks-dots li.is-today .c { box-shadow: inset 0 0 0 2px var(--ap-acc-deep); color: var(--ap-acc-deep); } html[data-track="men"] .has-segments .ks-streak { margin: 14px 0 0; color: var(--ap-muted); } html[data-track="men"] .has-segments .flower-n { color: var(--ap-acc-deep); } html[data-track="men"] .has-segments .flower-count { color: var(--ap-muted); } html[data-track="men"] .has-segments .ks-flower.is-count { margin-top: 34px; } html[data-track="men"] .has-segments .ks-flower.is-count .flower-count { justify-content: flex-start; margin: 10px 0 0; } html[data-track="men"] .has-segments .ks-treats { display: grid; gap: 18px; } html[data-track="men"] .has-segments .ks-spin .kit-gifts-chip { max-width: 100%; } @media (min-width: 1100px) { html[data-track="men"] .has-segments .ks-dots { grid-template-columns: repeat(14, minmax(0, 1fr)); } html[data-track="men"] .has-segments .ks-spread:not(.is-framed) { max-width: 760px; } } .has-segments .notifications-time button.link { min-height: 44px; margin-top: -6px; margin-bottom: -6px; } .has-segments .notifications-switch .notifications-time > button.link { min-height: 44px; margin: -10px 0 -2px; } .has-segments .account-screen a[href^="mailto:"] { display: inline-block; padding: 12px 0; margin: -12px 0; } .install-steps { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 22px; } .install-steps p { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--text); } .install-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: .9375rem; font-weight: 700; } .install-shot { padding: 14px; border-radius: 22px; background: color-mix(in srgb, var(--accent) 7%, #f4eee6); } .install-picture { display: block; width: 100%; height: auto; } html:has(.has-segments):not([data-track="men"]) { --ks-ivory: #f8f2e9; --ks-paper: #fdf9f3; --ks-blush: #f5e4e1; --ks-plum: #2b1530; --ks-plum-soft: #5b4359; --ks-plum-faint: rgba(43, 21, 48, .12); --ks-magenta: #b0205a; --ks-magenta-deep: #7e1440; --ks-gold: #c9a15a; --ks-gold-light: #f3ddb0; --bg: #f8f2e9; --panel: #fdf9f3; --surface: #fdf9f3; --surface-raised: #efe6da; --text: #2b1530; --text-muted: #5b4359; --text-faint: #5b4359; --accent: #b0205a; --line: rgba(43, 21, 48, .12); --focus-ring: #b0205a; --color-glass: #efe6da; --color-glass-strong: #e6dbcc; --ap-bg-2: #efe6da; --ap-card: #fdf9f3; --ap-ink: #2b1530; --ap-muted: #5b4359; --ap-acc: #b0205a; --ap-acc-deep: #7e1440; --ap-soft: #f5e4e1; --ap-focus: #b0205a; --ap-done: #b0205a; } html:has(.has-segments):not([data-track="men"]) body { background: #f8f2e9; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg > h2 { margin: 14px 0 22px; font: 750 46px/0.96 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.028em; color: var(--ks-plum); text-wrap: balance; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-group, html:has(.has-segments):not([data-track="men"])[data-seg="me"] .has-segments .seg-account h1 { margin: 40px 0 6px; font: 750 26px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.022em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app h3 { font: 750 22px/1.05 var(--ap-display); letter-spacing: -0.02em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-line { font: 400 17px/1.45 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-card, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-wk, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-extra, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-tomorrow, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-more, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-rhythm, html:has(.has-segments):not([data-track="men"]) .has-segments .account-rows, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-hero, html:has(.has-segments):not([data-track="men"]) .has-segments .plan-day-done, html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-next, html:has(.has-segments):not([data-track="men"]) .has-segments .card { background: none; box-shadow: none; border: 0; border-radius: 0; padding-left: 0; padding-right: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-wk.now { box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .ap-daychip { padding: 0; border-radius: 0; background: none; font: 500 15px/1.2 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-hero .meta span { padding: 0; border-radius: 0; background: none; font: inherit; color: inherit; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-hero .meta span + span::before { content: ", "; } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-min { padding: 0; border-radius: 0; background: none; font: 400 16px/1.3 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ap-rhythm .kit-label { margin: 0 0 10px; font: 750 22px/1.05 var(--ap-display); letter-spacing: -0.02em; text-transform: none; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-when { font: 500 15px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-btn, html:has(.has-segments):not([data-track="men"]) .has-segments .primary { border-radius: 18px; background: var(--ks-magenta); color: #fff8f2; font: 620 17.5px/1 var(--font); box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-btn.is-quiet { background: transparent; color: var(--ks-plum); box-shadow: inset 0 0 0 1.5px rgba(43, 21, 48, .22); } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-open { min-height: 58px; } html:has(.has-segments):not([data-track="men"]) .ap-nav { padding-top: 10px; background: linear-gradient(to top, rgba(248, 242, 233, .98) 62%, rgba(248, 242, 233, 0)); } html:has(.has-segments):not([data-track="men"]) .ap-nav a { position: relative; isolation: isolate; gap: 5px; border-radius: 0; background: none; font: 600 15px/1 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .ap-nav svg { width: 30px; height: 30px; } html:has(.has-segments):not([data-track="men"]) .ap-nav a[aria-current="page"] { background: none; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .ap-nav a[aria-current="page"]::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 56px; height: 38px; margin-left: -28px; background: radial-gradient(closest-side, rgba(255, 141, 180, .42), transparent); pointer-events: none; } html:has(.has-segments):not([data-track="men"]) .ap-nav a[aria-current="page"]::after { content: ""; position: absolute; top: 1px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ks-magenta); box-shadow: 0 0 10px 3px rgba(255, 141, 180, .55); } html:has(.has-segments):not([data-track="men"]) .account-bar .ap-daychip { font: 560 16px/1.2 var(--font); color: var(--ks-plum-soft); } @media (min-width: 1100px) { html:has(.has-segments) .account-bar .ap-daychip.is-date { display: none; } } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-greet h2 { margin: 8px 0 0; font: 750 clamp(34px, 12.4vw, 50px)/0.98 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--ks-plum); text-align: start; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-name { display: block; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-lede { max-width: 24ch; margin: 8px 0 0; font: 400 18px/1.35 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-frame { position: relative; margin-top: 18px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 7; object-fit: cover; object-position: 50% 8%; border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%; background: #e9e1d6; box-shadow: 0 40px 70px -40px rgba(43, 21, 48, .55); } html:has(.has-segments):not([data-never]) .has-segments .ks-inset { display: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-frame > img { border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%; object-position: 50% 8%; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-session .ap-hero-in { position: static; padding: 16px 0 0; background: none; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-session .ap-h1 { font: 750 34px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.025em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-session .meta { display: block; margin: 8px 0 0; font: 400 17px/1.35 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-page > .ap-line { margin: 12px 0 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-page > .plan-open { margin-top: 16px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-page > .plan-cando-open { align-self: flex-start; justify-self: start; width: auto; min-height: 44px; margin-top: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 560 16px/1.3 var(--font); color: var(--ks-magenta); text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 1099px) { html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-frame { width: min(100%, max(160px, calc((100svh - 518px) * 8 / 7))); margin-left: auto; margin-right: auto; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spread.is-framed > .ks-page { display: flex; flex-direction: column; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spread.is-framed > .ks-page > .ks-session + .ap-line { order: 1; margin-top: 14px; } } @media (max-width: 1099px) and (max-height: 720px) { html:has(.has-segments):not([data-track="men"]) .has-segments .ks-greet h2 { font-size: clamp(32px, 10.6vw, 40px); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-lede { font-size: 16.5px; } } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings { margin: 56px 0 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ks-rings h3 { margin: 0 0 22px; font: 750 30px/1.05 var(--ap-display); letter-spacing: -0.022em; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings-in { display: flex; align-items: center; gap: 22px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings svg { flex: none; width: 150px; height: 150px; overflow: visible; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings circle { fill: none; stroke-width: 11; stroke-linecap: round; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings .track { stroke: rgba(43, 21, 48, .07); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings .arc.is-round { stroke: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings .arc.is-next { stroke: #ee85ad; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings .arc.is-event { stroke: var(--ks-gold); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key li { position: relative; padding-left: 22px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key li.is-next::before { background: #ee85ad; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key li.is-event::before { background: var(--ks-gold); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key b { display: block; font: 640 16px/1.25 var(--font); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key span { display: block; font: 400 16px/1.25 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-ring-key .n { font-style: normal; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-round { margin: 52px 0 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ks-round h3 { margin: 0; font: 750 30px/1.05 var(--ap-display); letter-spacing: -0.022em; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-dots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px 0; justify-items: center; margin: 18px 0 0; padding: 0; list-style: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-dots li { position: relative; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-dots .c { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(43, 21, 48, .08); font: 600 10.5px/1 var(--font); font-variant-numeric: tabular-nums; color: rgba(43, 21, 48, .5); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-dots li.is-done .c { background: radial-gradient(circle at 35% 30%, #d64a82, var(--ks-magenta) 55%, var(--ks-magenta-deep)); color: #fff4ec; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-dots li.is-today .c { background: var(--ks-paper); box-shadow: inset 0 0 0 2px var(--ks-magenta); font-weight: 750; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-streak { margin: 16px 0 0; font: 400 16px/1.4 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-streak .n { font-style: normal; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-treats { display: grid; gap: 26px; margin: 52px 0 34px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ks-treats h3 { margin: 0; font: 750 30px/1.05 var(--ap-display); letter-spacing: -0.022em; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift .mp-gift { grid-template-columns: 92px minmax(0, 1fr); column-gap: 18px; row-gap: 0; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift .mp-giftic { grid-row: span 2; width: 92px; height: 92px; border-radius: 0; background: url("img/ks-gift.svg") center / contain no-repeat; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift .mp-giftic svg { display: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift .mp-t { margin: 0; font: 750 22px/1.1 var(--ap-display); letter-spacing: -0.02em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift .mp-s { margin: 4px 0 0; font: 400 16px/1.35 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift .mp-gift-open { grid-column: 2; justify-self: start; justify-content: flex-start; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 0; text-align: start; border-radius: 0; background: none; box-shadow: none; font: 620 16px/1.2 var(--font); color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin .kit-gifts-chip { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; column-gap: 18px; align-items: center; width: 100%; min-height: 92px; padding: 0; border: 0; border-radius: 0; background: none; text-align: start; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin .kit-gifts-chip::before { content: ""; width: 92px; height: 92px; background: url("img/ks-gift.svg") center / contain no-repeat; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin .kit-gifts-chip[data-ready="spin"]::before { box-sizing: border-box; padding: 6px; border-radius: 50%; background: conic-gradient(var(--ks-paper) 0 25.3%, #f0c9d2 0 41.4%, var(--ks-plum) 0 69%, var(--ks-gold-light) 0 92%, var(--ks-magenta) 0 100%) content-box, conic-gradient(#f7e7c4, #c9a15a 18%, #fff3da 30%, #a77f3b 52%, #f3ddb0 70%, #b8914b 86%, #f7e7c4) border-box; box-shadow: 0 16px 30px -18px rgba(43, 21, 48, .6); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin .kit-gifts-chip > svg:first-child { display: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin .kit-chip-text { font: 750 22px/1.1 var(--ap-display); letter-spacing: -0.02em; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin .kit-chip-more { width: 22px; height: 22px; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .ap-rhythm { margin-top: 34px; padding-top: 0; padding-bottom: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-tomorrow, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-more { margin-top: 18px; padding-top: 6px; padding-bottom: 6px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-more .ic { border-radius: 0; background: none; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-moves img, html:has(.has-segments):not([data-track="men"]) .has-segments .ap-moves .blank { border-radius: 44% 56% 61% 39% / 55% 41% 59% 45%; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .plan-day-done { padding-top: 6px; padding-bottom: 6px; } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-day-done .done-text { font: 750 30px/1.02 var(--ap-display); letter-spacing: -0.025em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-weeks { gap: 34px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-wk { padding-top: 0; padding-bottom: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ap-wk h3 { margin: 0 0 8px; font: 750 30px/1 var(--ap-display); letter-spacing: -0.025em; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-wk h3 em { display: block; margin: 4px 0 0; font: 400 18px/1.2 var(--font); letter-spacing: 0; color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days li + li { border-top: 1px solid var(--ks-plum-faint); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .dn { width: 28px; border-radius: 0; background: none; box-shadow: none; font: 700 15px/1 var(--font); color: rgba(43, 21, 48, .45); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .dt { font: 560 16.5px/1.3 var(--font); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .is-done .dn { background: none; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .is-done .dt { color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .is-rest .dn { background: none; color: rgba(43, 21, 48, .45); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .is-today { background: radial-gradient(60% 120% at 30% 50%, rgba(243, 205, 140, .45), transparent 70%); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .is-today .dn { box-shadow: none; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-days .is-today .dt { font-weight: 700; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-switch { display: flex; gap: 28px; padding: 0; border-radius: 0; background: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-switch a { min-height: 44px; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 560 17px/1.2 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-switch a[aria-current="true"] { background: none; box-shadow: none; color: var(--ks-plum); text-decoration: underline; text-decoration-color: var(--ks-magenta); text-decoration-thickness: 2px; text-underline-offset: 8px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-card { margin-bottom: 30px; padding-top: 0; padding-bottom: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-week-days .box { max-width: 22px; border-radius: 50%; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-stats b { font: 750 56px/1 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-stats p:first-child b { color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-progress.has-keepsake > h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-progress-top { display: grid; gap: 48px; margin: 10px 0 40px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ks-rewards h3 { margin: 0; font: 750 46px/0.98 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rewards .ks-streak { max-width: 36ch; margin: 12px 0 0; font-size: 17px; line-height: 1.45; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gifts { display: flex; flex-wrap: wrap; gap: 20px clamp(16px, 5vw, 44px); margin: 26px 0 0; padding: 0; list-style: none; text-align: center; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gifts li { display: grid; flex: 0 1 112px; justify-items: center; gap: 4px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-giftic { display: block; width: 72px; height: 72px; margin-bottom: 8px; background: url("img/ks-gift.svg") center / contain no-repeat; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gifts li.is-opened .ks-giftic { background-image: url("img/ks-gift-opened.svg"); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gifts b { font: 650 17px/1.2 var(--font); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gifts small { font: 400 15px/1.3 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gifts li:is(.is-opened, .is-ready) :is(b, small) { color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rewards .ap-badges { margin-top: 26px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rewards .ap-badges b { font-size: 17px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rewards .ap-badges small { font-size: 15px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-flower { position: relative; isolation: isolate; text-align: center; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ks-flower h3 { margin: 0; font: 750 46px/0.98 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-flower > p { max-width: 30ch; margin: 12px auto 0; font: 400 17px/1.45 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-flower-art { margin: 10px 0 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-extra { padding-top: 18px; padding-bottom: 18px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-extra + .ap-extra { border-top: 1px solid var(--ks-plum-faint); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-extra .tx b { font: 560 18px/1.3 var(--font); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-extra .tx { color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .account-rows li + li { border-top: 1px solid var(--ks-plum-faint); } html:has(.has-segments):not([data-track="men"]) .has-segments .account-rows:not(.is-quiet) .account-row { min-height: 64px; padding-left: 0; padding-right: 0; font: 520 18px/1.3 var(--font); color: var(--ks-plum); } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .account-bar { height: 84px; } html:has(.has-segments):not([data-never]) .account-bar .ap-daychip { margin-left: 28px; font-size: 17px; } html:has(.has-segments):not([data-never]) .ap-nav { position: static; display: flex; gap: clamp(32px, 3.6vw, 52px); width: auto; margin-left: auto; padding: 0; background: none; } html:has(.has-segments):not([data-never]) .ap-nav a { display: block; min-height: 0; padding: 13px 8px; margin: 0 -8px; font: 600 21px/1.2 var(--font); letter-spacing: -0.01em; } html:has(.has-segments):not([data-never]) .ap-nav svg { display: none; } html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"]::before { content: none; } html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"]::after { top: auto; bottom: -2px; } html:has(.has-segments):not([data-never]) .has-segments.has-pane:has(.ap-app) { padding: 0 var(--gutter, 24px) 72px; } html:has(.has-segments):not([data-never]) .has-segments.has-pane:has(.ap-app) > * { max-width: none; } html:has(.has-segments):not([data-never]) .has-segments.has-pane:has(.ap-app) { padding-bottom: 72px; } html[data-track="men"]:has(.has-segments) .ap-nav a { position: relative; } html[data-track="men"]:has(.has-segments) .ap-nav a[aria-current="page"] { background: none; } html[data-track="men"]:has(.has-segments) .ap-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ap-acc-deep); } html:has(.has-segments):not([data-track="men"]) .has-segments .seg > h2 { font-size: 72px; margin: 26px 0 30px; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-progress, html:has(.has-segments):not([data-track="men"]) .has-segments .seg-me { max-width: 760px; } html:has(.has-segments):not([data-track="men"]) .has-segments.has-pane:has(.ap-app) > .seg-account { max-width: 760px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-weeks { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 44px; } } @media (min-width: 1100px) { html:has(.has-segments):not([data-never]) #quiz-root:has(> astro-island[component-url*="/Account."]) { max-width: 1320px; } html:has(.has-segments):not([data-never]) .account-bar, html:has(.has-segments):not([data-never]) .has-segments.has-pane:has(.ap-app) { padding-left: clamp(24px, 4.4vw, 64px); padding-right: clamp(24px, 4.4vw, 64px); } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-areas: "frame greet" "frame glance" "session treats"; grid-template-rows: auto 1fr auto; column-gap: clamp(48px, 5.8vw, 84px); align-items: start; margin-top: 18px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) { grid-template-areas: "frame greet" "frame glance" "session glance"; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-greet { grid-area: greet; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-frame { grid-area: frame; margin: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-page { grid-area: session; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); column-gap: 28px; align-items: end; margin-top: 26px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-page > * { grid-column: 1 / -1; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-page > .ks-session { grid-column: 1; grid-row: 1; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-page > .plan-open { grid-column: 2; grid-row: 1; width: 100%; margin: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-page > .plan-cando-open { grid-column: 2; grid-row: 2; margin-top: 14px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-glance { grid-area: glance; align-self: start; display: flex; flex-direction: column; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-treats { grid-area: treats; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-self: end; margin-top: 30px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread:not(.is-framed) { max-width: 760px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread:not(.is-framed):has(> .ks-glance) { display: grid; max-width: none; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-areas: "greet glance" "page glance" "page treats"; grid-template-rows: auto auto 1fr; column-gap: clamp(48px, 5.8vw, 84px); align-items: start; margin-top: 18px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread:not(.is-framed):has(> .ks-glance) > .ks-greet { grid-area: greet; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread:not(.is-framed):has(> .ks-glance) > .ks-page { grid-area: page; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread:not(.is-framed):has(> .ks-glance) > .ks-glance { grid-area: glance; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread:not(.is-framed):has(> .ks-glance) > .ks-treats { grid-area: treats; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 40px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread:not(.is-framed):has(> .ks-glance) .ks-rings { margin-top: 8px; } html:has(.has-segments):not([data-never]) .has-segments .ap-app .ks-spread:not(.is-framed):has(> .ks-glance) .ks-treats h3 { grid-column: 1 / -1; } html:has(.has-segments):not([data-never]) .has-segments .ks-greet h2 { margin-top: 6px; font-size: clamp(54px, 5.2vw, 80px); letter-spacing: -0.035em; white-space: nowrap; } html:has(.has-segments):not([data-never]) .has-segments .ks-lede { max-width: 34ch; margin-top: 16px; font-size: 21px; } html:has(.has-segments):not([data-never]) .has-segments .ks-frame > img { aspect-ratio: 19 / 20; object-position: 50% 4%; border-radius: 47% 53% 44% 56% / 58% 46% 54% 42%; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-frame { width: min(100%, calc(max(360px, 100svh - 310px) * 19 / 20)); } html:has(.has-segments):not([data-never]) .has-segments .ks-inset { display: block; position: absolute; z-index: 2; right: -8%; top: 64%; width: 30%; aspect-ratio: 1; border-radius: 44% 56% 61% 39% / 55% 41% 59% 45%; overflow: hidden; background: radial-gradient(80% 80% at 30% 20%, #fff7ef, var(--ks-blush) 70%); box-shadow: 0 30px 60px -36px rgba(43, 21, 48, .45), 0 0 0 10px rgba(253, 249, 243, .85); } html:has(.has-segments):not([data-never]) .has-segments .ks-inset img { display: block; width: 100%; height: 100%; object-fit: cover; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .ap-hero-in { padding: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .ap-h1 { font-size: 40px; } html:has(.has-segments):not([data-never]) .has-segments .ap-app .ks-spread.is-framed .ks-rings h3, html:has(.has-segments):not([data-never]) .has-segments .ap-app .ks-spread.is-framed .ks-treats h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-rings { margin-top: 36px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-rings-in { gap: 34px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-rings svg { width: 168px; height: 168px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-ring-key span, html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-ring-key b { font-size: 17px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-round { margin-top: 30px; } html:has(.has-segments):not([data-never]) .has-segments .ap-app .ks-spread.is-framed .ks-round h3 { font-size: 24px; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 12px 0; margin-top: 14px; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots .c { width: 22px; height: 22px; font-size: 10px; } html:has(.has-segments):not([data-never]) .has-segments .ks-streak { font-size: 17px; } html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-gift .mp-gift, html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-spin .kit-gifts-chip { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; } html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-gift .mp-giftic, html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-spin .kit-gifts-chip::before { width: 76px; height: 76px; } html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-spin .kit-gifts-chip { grid-template-columns: 76px minmax(0, 1fr) auto; min-height: 76px; } html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-gift .mp-t, html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-spin .kit-chip-text { font-size: 20px; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-progress.has-keepsake { max-width: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-progress.has-keepsake > :not(.ks-progress-top) { max-width: 760px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-progress-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; min-height: 640px; margin: 24px 0 56px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ks-rewards h3 { font-size: clamp(60px, 5.4vw, 78px); letter-spacing: -0.035em; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rewards .ks-streak { font-size: 19px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gifts { max-width: 520px; margin-top: 44px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-giftic { width: 80px; height: 80px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-flower { padding: 56px 24px 48px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-flower::before { content: ""; position: absolute; z-index: -1; inset: 0 -2% 0 -6%; border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%; background: radial-gradient(60% 50% at 50% 55%, rgba(246, 214, 196, .7), transparent 75%), #f2dedb; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .ks-flower h3 { font-size: 56px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-rings { margin-top: clamp(20px, calc(100svh - 700px), 40px); } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-rings-in { gap: 40px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-rings svg { width: clamp(168px, calc(100svh - 684px), 216px); height: clamp(168px, calc(100svh - 684px), 216px); } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-ring-key { gap: 18px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-ring-key span, html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-ring-key b { font-size: 18px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-round { margin-top: 40px; } } @media (prefers-reduced-motion: no-preference) { html:has(.has-segments):not([data-track="men"]) .has-segments .ks-greet h2 { animation: ks-rise 1.1s cubic-bezier(0.22, 0.61, 0.24, 1) backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-name { animation: ks-rise 1.1s cubic-bezier(0.22, 0.61, 0.24, 1) .35s backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-lede { animation: ks-rise 1.1s cubic-bezier(0.22, 0.61, 0.24, 1) .6s backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-rings .arc { animation: ks-fill 1.6s cubic-bezier(0.65, 0, 0.25, 1) calc(.3s + var(--i, 0) * .35s) backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-dots li.is-done .c { animation: ks-land .75s cubic-bezier(0.22, 0.61, 0.24, 1) calc(.5s + var(--d, 0) * .06s) backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift > * { animation: ks-moment .9s cubic-bezier(0.22, 0.61, 0.24, 1) .4s backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin > * { animation: ks-moment .9s cubic-bezier(0.22, 0.61, 0.24, 1) .55s backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-gift .mp-giftic { animation: ks-giftin 1.1s cubic-bezier(0.22, 0.61, 0.24, 1) .5s backwards; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-spin .kit-gifts-chip[data-ready="spin"]::before { animation: ks-spinin 1.6s cubic-bezier(.15, .7, .25, 1) .6s backwards; } @keyframes ks-rise { from { opacity: 0; transform: translateY(0.35em); } } @keyframes ks-fill { from { stroke-dasharray: 0 100; } } @keyframes ks-land { 0% { opacity: 0; transform: translateY(-18px) scale(0.7); } 55% { opacity: 1; transform: translateY(2px) scale(1.1, 0.88); } 78% { transform: translateY(-2px) scale(0.97, 1.04); } to { opacity: 1; transform: none; } } @keyframes ks-moment { from { opacity: 0; transform: translateY(10px); } } @keyframes ks-giftin { 0% { opacity: 0; transform: translateY(18px) scale(0.5) rotate(-10deg); } 55% { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(3deg); } 78% { transform: translateY(1px) scale(0.98) rotate(-1deg); } to { transform: none; } } @keyframes ks-spinin { from { transform: rotate(-540deg); } } } html:has(.has-segments) .has-segments .seg-today .ap-slot-trackers:has(> .trk-wait) { margin-top: 44px; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .trk-wait { height: 441px; } html[data-track="men"]:has(.has-segments) .has-segments .seg-today .trk-wait { height: 434px; } @media (min-width: 347px) { html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .trk-wait { height: 383px; } html[data-track="men"]:has(.has-segments) .has-segments .seg-today .trk-wait { height: 376px; } } @media (min-width: 371px) { html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .trk-wait { height: 337px; } html[data-track="men"]:has(.has-segments) .has-segments .seg-today .trk-wait { height: 330px; } } @media (min-width: 720px) { html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .trk-wait { height: 294px; } html[data-track="men"]:has(.has-segments) .has-segments .seg-today .trk-wait { height: 291px; } } @media (min-width: 900px) { html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .trk-wait { height: 162px; } html[data-track="men"]:has(.has-segments) .has-segments .seg-today .trk-wait { height: 205px; } } @media (min-width: 1025px) { html[data-track="men"]:has(.has-segments) .has-segments .seg-today .trk-wait { height: 159px; } } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-chips { gap: 22px; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-chip { padding: 0; border-radius: 0; background: none; box-shadow: none; font: 560 16px/1.2 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-chip.is-on { background: none; color: var(--ks-plum); text-decoration: underline; text-decoration-color: var(--ks-magenta); text-decoration-thickness: 2px; text-underline-offset: 8px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app :is(.lib-h, .lib-gh, .lib-pack) { font: 750 30px/1.05 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.022em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-app .lib-shelf-h :is(h3, h4) { font: 750 24px/1.1 var(--ap-display); letter-spacing: -0.02em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-effort { padding-left: 0; padding-right: 0; border-radius: 0; background: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-effort b { color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-card .pic { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-card .pic img { display: block; height: auto; aspect-ratio: 2 / 3; border-radius: 50% 50% 22px 22px / 30% 30% 22px 22px; background: #e9e1d6; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-card.plain .pic { aspect-ratio: 2 / 3; border-radius: 50% 50% 22px 22px / 30% 30% 22px 22px; background: var(--ks-blush); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-card .min { position: static; display: block; margin-top: 8px; padding: 0; transform: none; border-radius: 0; background: none; font: 500 14px/1.2 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-card .nm { color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-card .st.done { color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-lens { gap: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-lens li + li { border-top: 1px solid var(--ks-plum-faint); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-lens button { height: auto; min-height: 100px; padding: 12px 0; border-radius: 0; background: none; box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-lens .tx b { font: 750 22px/1.1 var(--ap-display); letter-spacing: -0.02em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-ring .trk { stroke: rgba(43, 21, 48, .07); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-ring .arc { stroke: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-thumbs img, html:has(.has-segments):not([data-track="men"]) .has-segments .lib-thumbs .tn { border-radius: 50%; box-shadow: 0 0 0 2.5px var(--ks-ivory); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-areas .ph { border-radius: 44% 56% 61% 39% / 55% 41% 59% 45%; background: #e9e1d6; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-areas button.plain { min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-areas button.plain::before { content: ""; display: block; aspect-ratio: 4 / 3; border-radius: 44% 56% 61% 39% / 55% 41% 59% 45%; background: var(--ks-blush); } html:has(.has-segments):not([data-track="men"]) .has-segments .lib-areas .lb { padding: 0; font: 600 17px/1.2 var(--font); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl { --player-ink: #2b1530; --player-text: #5b4359; --player-muted: #5b4359; --player-paper: #f8f2e9; --player-backdrop: #f8f2e9; } html:has(.has-segments):not([data-track="men"]) .pl-top { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments):not([data-track="men"]) .pl-icon { background: rgba(248, 242, 233, .88); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-ready { left: 0; right: 0; bottom: 0; gap: 10px; padding: 72px 24px max(20px, env(safe-area-inset-bottom)); border-radius: 0; background: #f8f2e9; -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments):not([data-track="men"]) .pl-chips { display: grid; gap: 4px; } html:has(.has-segments):not([data-track="men"]) .pl-chip { padding: 0; border-radius: 0; background: none; font: 600 16px/1.3 var(--font); color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-chip.is-ink { background: none; font-weight: 500; color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .pl-ready h1 { font: 750 34px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.028em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-go, html:has(.has-segments):not([data-track="men"]) .pl-ci-done { border-radius: 18px; background: var(--ks-magenta); color: #fff8f2; font: 620 17.5px/1 var(--font); box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .pl-stop .pl-yes { border-radius: 18px; background: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-opts { gap: 6px 24px; } html:has(.has-segments):not([data-track="men"]) .pl-opt { padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 600 16px/1.2 var(--font); color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; } html:has(.has-segments):not([data-track="men"]) .pl-opt[aria-expanded="true"] { background: none; color: #fff; text-decoration-thickness: 3px; } html:has(.has-segments):not([data-track="men"]) .pl-tile { border-radius: 0; background: none; box-shadow: none; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-tile-pick input:checked + .pl-tile { background: none; box-shadow: none; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl-ci-head h1 { font: 750 20px/1.15 var(--ap-display); letter-spacing: -0.02em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl-q legend { font-family: var(--ap-display); font-weight: 750; letter-spacing: -0.025em; color: var(--ks-plum); } @media (min-width: 900px) { html:has(.has-segments):not([data-track="men"]) .pl .pl-frame { border-radius: 0; background: none; box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-media, html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-ci-back { overflow: hidden; border-radius: 50% 50% 32px 32px / 28% 28% 32px 32px; } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-top { color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-icon { background: rgba(43, 21, 48, .06); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-segs li { background: rgba(43, 21, 48, .1); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-segs b { background: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-segs li.is-done b { background: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-ready { padding: 0; background: none; } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-bottom { color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame :is(.pl-lead, .pl-name, .pl-theme) { color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame :is(.pl-count, .pl-cue, .pl-opt-text) { color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-opt, html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-opt[aria-expanded="true"] { color: var(--ks-plum); text-decoration-color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-timer circle { stroke: rgba(43, 21, 48, .1); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-timer .pl-arc { stroke: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-round { background: rgba(43, 21, 48, .06); color: var(--ks-plum); -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-ci-sheet { background: none; } } html:has(.has-segments):not([data-track="men"]) .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede)::before { content: none; } html:has(.has-segments):not([data-track="men"]) .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede) > h1 { min-height: 0; padding-right: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments section:has(> .sticky-exit) > h1, html:has(.has-segments):not([data-track="men"]) .has-segments .cancel-flow > h1 { font-weight: 750; letter-spacing: -0.028em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .cancel-survey .options-chips { gap: 0; } html:has(.has-segments):not([data-track="men"]) .has-segments .cancel-survey .option::before { content: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .cancel-survey .option { padding-left: 0; padding-right: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .cancel-survey .option[aria-pressed="true"] { background: none; box-shadow: none; font-weight: 700; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) .has-segments .cancel-survey .option + .option, html:has(.has-segments):not([data-track="men"]) .has-segments .cancel-survey .option + .option[aria-pressed="true"] { box-shadow: inset 0 1px 0 var(--ks-plum-faint); } @media (min-width: 900px) { html:has(.has-segments):not([data-track="men"]) .has-segments section:not(.save-drawn):has(> .sticky-exit):has(> .save-lede) > :is(h1, .save-lede) { max-width: none; } } html:has(.has-segments):not([data-track="men"]) .has-segments .secondary:not(.destructive):not(.sticky-exit *) { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(43, 21, 48, .22); color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-art { display: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-today .plan-day-done { justify-items: start; text-align: start; } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-body, html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-next { justify-items: start; } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-day-done .done-mark { justify-content: start; } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-spot { display: block; aspect-ratio: 319 / 475; height: auto; background-image: url("/brand/fitvee/img/flower/stage-8@1x.webp"); background-image: image-set(url("/brand/fitvee/img/flower/stage-8@1x.avif") type("image/avif") 1x, url("/brand/fitvee/img/flower/stage-8@2x.avif") type("image/avif") 2x, url("/brand/fitvee/img/flower/stage-8@3x.avif") type("image/avif") 3x, url("/brand/fitvee/img/flower/stage-8@1x.webp") type("image/webp") 1x); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-hero.plan-done { justify-items: start; padding-top: 6px; padding-bottom: 6px; text-align: start; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-hero.plan-done .ap-h1 { font: 750 46px/0.98 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.03em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-done-proud { font: 400 18px/1.35 var(--font); color: var(--ks-plum-soft); } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-next-round .plan-next-days { padding-left: 0; padding-right: 0; border-radius: 0; background: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .plan-next-round .plan-next-days .ap-sub { font: 750 26px/1.05 var(--ap-display); letter-spacing: -0.022em; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-extra .pic.print { padding: 0; border-radius: 0; background: none; box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .ap-extra .pic.print i { color: rgba(43, 21, 48, .55); } html:has(.has-segments):not([data-track="men"]) .has-segments .account-rows.is-quiet .account-row { padding-left: 0; padding-right: 0; } html:has(.has-segments):not([data-track="men"]) .install-shot { padding: 0; border-radius: 0; background: none; } html:has(.has-segments):not([data-track="men"]) .has-segments .seg-progress .ap-slot-trackers { margin-bottom: 44px; } html:has(.has-segments):not([data-track="men"]) .has-segments .ks-flower-art { min-height: 528px; } @media (min-width: 1100px) { html:has(.has-segments):not([data-track="men"]) .has-segments .ks-flower-art { min-height: 584px; } } html:has(.has-segments):not([data-track="men"]) .ck { --player-paper: #f8f2e9; --player-ink: #2b1530; --player-muted: #5b4359; --player-raised: #efe6da; --ck-accent: var(--ks-magenta); --ck-accent-2: var(--ks-magenta-deep); } html:has(.has-segments):not([data-track="men"]) .ck-title { font-weight: 750; color: var(--ks-plum); } html:has(.has-segments):not([data-track="men"]) .ck-go { border-radius: 18px; background: var(--ks-magenta); color: #fff8f2; font: 620 17.5px/1 var(--font); box-shadow: none; } html:has(.has-segments):not([data-track="men"]) .ck .ck-stop { background: none; box-shadow: none; color: var(--ks-magenta); } html:has(.has-segments):not([data-track="men"]) { --v3-accent: var(--ks-magenta); --v3-pressed: var(--ks-magenta-deep); --v3-ink: var(--ks-plum); --v3-muted: var(--ks-plum-soft); --v3-line: var(--ks-plum-faint); --v3-on: #fff; --v3-soft: var(--ks-blush); --v3-dot: rgba(43, 21, 48, .08); --v3-bg: #f8f2e9; } html[data-track="men"]:has(.has-segments) { --v3-accent: var(--ap-acc-deep); --v3-pressed: var(--ap-acc); --v3-ink: var(--ap-ink); --v3-muted: var(--ap-muted); --v3-line: rgba(235, 225, 211, .14); --v3-on: #050300; --v3-soft: rgba(235, 225, 211, .08); --v3-dot: rgba(235, 225, 211, .1); --v3-bg: var(--bg); } html:has(.has-segments) body { overflow-x: clip; } html:has(.has-segments):not([data-never]) .account-bar { position: relative; z-index: 3; } html:has(.has-segments):not([data-never]) .account-bar .ap-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; } html:has(.has-segments):not([data-never]) .avatar { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--v3-soft); color: var(--v3-accent); font: 650 16px/1 var(--font); text-decoration: none; } html:has(.has-segments):not([data-never]) .avatar::after, html:has(.has-segments):not([data-never]) .ap-ask::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; } html:has(.has-segments):not([data-never]) .avatar[aria-current="page"] { box-shadow: 0 0 0 2px var(--v3-bg), 0 0 0 4px var(--v3-accent); } html:has(.has-segments):not([data-never]) .ap-ask { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--v3-ink); font: 600 17px/1 var(--font); cursor: pointer; } html:has(.has-segments):not([data-never]) .ap-ask-words { display: none; } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .account-bar .ap-acts { margin-left: 48px; gap: 14px; } html:has(.has-segments):not([data-never]) .avatar { width: 42px; height: 42px; font-size: 17px; } html:has(.has-segments):not([data-never]) .ap-ask-words { display: inline; } } @media (max-width: 899px) { html:has(.has-segments):not([data-never]) .ap-nav { padding-top: 8px; background: var(--v3-bg); } html:has(.has-segments):not([data-never]) .ap-nav a { min-height: 54px; gap: 4px; font: 600 12.5px/1 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .ap-nav svg { width: 26px; height: 26px; } html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"] { color: var(--v3-accent); } html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"]::before, html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"]::after { content: none; } } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed { display: flex; flex-direction: column; } html:has(.has-segments):not([data-never]) .has-segments .ks-lead, html:has(.has-segments):not([data-never]) .has-segments .ks-aside { display: contents; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-aside > .ks-greet { order: 1; margin-top: 4px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame { order: 2; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page { order: 3; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-glance { order: 5; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-treats { order: 7; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame { position: relative; height: 352px; margin: 14px -24px 0; width: auto; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 76px), rgba(0, 0, 0, .35) calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 76px), rgba(0, 0, 0, .35) calc(100% - 30px), transparent 100%); } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:has(.pinned) .ks-frame { height: 312px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame > img { position: absolute; left: 0; top: 0; display: block; width: 100%; max-width: none; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page { position: relative; margin-top: -18px; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .ap-hero-in { padding: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .ap-h1 { font: 750 30px/1.05 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.024em; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .meta { display: block; margin: 6px 0 0; font: 400 16px/1.35 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .ks-session .meta span { padding: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .plan-open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; margin-top: 18px; padding: 0 24px; border-radius: 14px; background: var(--v3-accent); color: var(--v3-on); box-shadow: none; font: 620 20px/1 var(--font); letter-spacing: -0.005em; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .plan-open:active { background: var(--v3-pressed); } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .plan-open svg { display: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .plan-cando-open { display: inline-flex; align-items: center; justify-self: start; align-self: start; width: auto; min-height: 44px; margin-top: 14px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--v3-accent); font: 560 16px/1.3 var(--font); text-decoration: underline; text-underline-offset: 4px; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .pinned { margin: 18px 0 0; border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .pinned .row { min-height: 68px; } html:has(.has-segments):not([data-never]) .has-segments .ks-rings { margin: 44px 0 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-rings svg { width: 140px; height: 140px; } html:has(.has-segments):not([data-never]) .has-segments .ks-rings-in { gap: 24px; } html:has(.has-segments):not([data-never]) .has-segments .ks-round { margin: 40px 0 0; } html:has(.has-segments):not([data-never]) .has-segments .ap-app .ks-round h3 { font: 750 24px/1.08 var(--ap-display); letter-spacing: -0.02em; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px 0; margin: 16px 0 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots li { display: grid; justify-items: center; align-content: end; gap: 10px; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots .ks-wd { font: 600 12px/1 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .ks-dots .ks-wd.is-today { color: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .ks-dots li:nth-child(n+8) .ks-wd { display: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots .c { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--v3-dot); } html:has(.has-segments):not([data-never]) .has-segments .ks-dots li.is-done .c { background: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .ks-dots li.is-today .c { background: var(--v3-bg); box-shadow: inset 0 0 0 2px var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .ks-dots li.is-missed .c { background: transparent; box-shadow: inset 0 0 0 1.5px var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .ks-streak { margin: 16px 0 0; } html[data-track="men"]:has(.has-segments) .has-segments .ks-rings .arc { stroke: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .ks-treats { margin: 30px 0 0; gap: 0; } html:has(.has-segments):not([data-never]) .has-segments .ap-app .ks-treats h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-gift { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-giftic { grid-row: span 2; width: 28px; height: 28px; background: var(--v3-accent); -webkit-mask: url("icons/gift.svg") center / contain no-repeat; mask: url("icons/gift.svg") center / contain no-repeat; } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-t { font: 620 17px/1.3 var(--font); letter-spacing: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-s { font-size: 15px; } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-gift-open { grid-column: 3; grid-row: 1 / span 2; justify-self: end; min-height: 44px; font: 620 16px/1.2 var(--font); color: var(--v3-accent); } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed { display: grid; grid-template-areas: none; grid-template-rows: none; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); column-gap: clamp(48px, 5.8vw, 84px); align-items: start; margin-top: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-lead, html:has(.has-segments):not([data-never]) .has-segments .ks-aside { display: block; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-aside > .ks-greet { margin-top: 28px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame { --bleed: calc(max(0px, (100vw - 1320px) / 2) + clamp(24px, 4.4vw, 64px)); width: calc(var(--bleed) + 600px); height: 700px; margin: -84px 0 0 calc(-1 * var(--bleed)); z-index: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100px, #000 calc(100% - 120px), rgba(0, 0, 0, .5) calc(100% - 50px), transparent 100%), linear-gradient(to right, #000 calc(100% - 150px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 100px, #000 calc(100% - 120px), rgba(0, 0, 0, .5) calc(100% - 50px), transparent 100%), linear-gradient(to right, #000 calc(100% - 150px), transparent 100%); mask-composite: intersect; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:has(.pinned) .ks-frame { height: 640px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame > img { left: 0; top: 0; width: max(830px, calc(var(--bleed) + 707px)); } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:has(.pinned) .ks-frame > img { top: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page { display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 28px; align-items: end; margin-top: -30px; z-index: 1; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page > * { grid-column: 1 / -1; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page > .ks-session { grid-column: 1; grid-row: 1; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page > .plan-open { grid-column: 2; grid-row: 1; width: 100%; min-height: 56px; margin: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page > .plan-cando-open { grid-column: 2; grid-row: 2; margin-top: 14px; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .ap-h1 { font-size: 40px; letter-spacing: -0.026em; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .meta { font-size: 17px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page > .pinned { margin-top: 24px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page > .pinned .row { min-height: 62px; padding: 8px 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-greet h2 { white-space: nowrap; } html:has(.has-segments):not([data-never]) .has-segments .ks-rings { margin-top: 34px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-rings svg { width: 164px; height: 164px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-rings-in { gap: 34px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-ring-key span, html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-ring-key b { font-size: 17px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-ring-key { gap: 12px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-round { margin-top: 30px; } html:has(.has-segments):not([data-never]) .has-segments .ap-app .ks-spread.is-framed .ks-round h3 { font-size: 24px; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 12px 0; margin-top: 12px; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots .c { width: 20px; height: 20px; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots .ks-wd { font-size: 11px; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots li:nth-child(n+8) .ks-wd { display: block; } html:has(.has-segments):not([data-never]) .has-segments .ks-dots li:nth-child(n+15) .ks-wd { display: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-streak { margin-top: 14px; } } html:has(.has-segments):not([data-never]) .has-segments .seg-more > h2 { margin: 8px 0 0; font: 750 34px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.026em; color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .seg-more h3 { margin: 26px 0 6px; font: 750 24px/1.08 var(--ap-display); letter-spacing: -0.02em; color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .more-cols { display: block; } html:has(.has-segments):not([data-never]) .has-segments .more-day .rows, html:has(.has-segments):not([data-never]) .has-segments .more-side section .rows { border-top: 1px solid var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .more-side .foot { margin-top: 28px; border-top: 1px solid var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .rows { list-style: none; margin: 0; padding: 0; } html:has(.has-segments):not([data-never]) .has-segments .rows > li + li { border-top: 1px solid var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; width: 100%; min-height: 64px; padding: 12px 0; border: 0; background: none; color: var(--v3-ink); text-align: start; text-decoration: none; font: inherit; cursor: pointer; } html:has(.has-segments):not([data-never]) .has-segments .row .ic { width: 28px; height: 28px; color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .row .ic svg { width: 28px; height: 28px; } html:has(.has-segments):not([data-never]) .has-segments .row .tt { display: block; font: 560 17px/1.3 var(--font); color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .row .sub { display: block; margin-top: 2px; font: 400 15px/1.3 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .row .chev { width: 20px; height: 20px; color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .row .chev svg { width: 20px; height: 20px; } html:has(.has-segments):not([data-never]) .has-segments .row.trk { min-height: 72px; } html:has(.has-segments):not([data-never]) .has-segments .row.trk.is-compact { min-height: 68px; } html:has(.has-segments):not([data-never]) .has-segments .row .mid { display: grid; gap: 9px; min-width: 0; } html:has(.has-segments):not([data-never]) .has-segments .row .line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; } html:has(.has-segments):not([data-never]) .has-segments .row .amt { font: 400 15px/1.3 var(--font); color: var(--v3-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } html:has(.has-segments):not([data-never]) .has-segments .row .amt .n { font-style: normal; font-weight: 680; color: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .glasses { display: flex; gap: 6px; } html:has(.has-segments):not([data-never]) .has-segments .glasses i { display: block; width: 12px; height: 15px; } html:has(.has-segments):not([data-never]) .has-segments .glasses svg { width: 12px; height: 15px; fill: transparent; stroke: var(--v3-line); stroke-width: 1.2; } html:has(.has-segments):not([data-never]) .has-segments .glasses i.on svg { stroke: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .bar { display: block; height: 4px; border-radius: 2px; background: var(--v3-dot); overflow: hidden; } html:has(.has-segments):not([data-never]) .has-segments .bar i { display: block; height: 100%; border-radius: 2px; background: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .row .end { display: flex; align-items: center; gap: 12px; } html:has(.has-segments):not([data-never]) .has-segments .trk-pin { justify-self: start; min-height: 32px; margin: -4px 0; padding: 0; font: 600 14px/1.2 var(--font); color: var(--v3-accent); background: none; border: 0; cursor: pointer; } html:has(.has-segments):not([data-never]) .has-segments .plus { position: relative; flex: none; display: inline-block; width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--v3-on); background: linear-gradient(currentColor, currentColor) center / 40% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 40% no-repeat, var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .plus:active { background-color: var(--v3-pressed); } html:has(.has-segments):not([data-never]) .has-segments .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; } html:has(.has-segments):not([data-never]) .v3-toast { position: fixed; z-index: 30; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 18px; transform: translateX(-50%); padding: 10px 16px 10px 20px; border-radius: 14px; background: var(--v3-ink); color: var(--v3-bg); font: 560 16px/1.2 var(--font); } html:has(.has-segments):not([data-never]) .v3-toast .link { min-height: 44px; padding: 0; background: none; border: 0; color: var(--v3-bg); font: 700 16px/1 var(--font); text-decoration: underline; cursor: pointer; } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .has-segments .seg-more > h2 { font-size: 48px; letter-spacing: -0.03em; margin-bottom: 18px; } html:has(.has-segments):not([data-never]) .has-segments .seg-more h3 { margin-top: 8px; } html:has(.has-segments):not([data-never]) .has-segments .more-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 96px; align-items: start; } html:has(.has-segments):not([data-never]) .has-segments .more-day { max-width: 640px; } html:has(.has-segments):not([data-never]) .v3-toast { bottom: 32px; } } html:has(.has-segments):not([data-never]) .has-segments .me-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 0; } html:has(.has-segments):not([data-never]) .has-segments .me-head .me-pic { flex: none; width: 72px; height: 72px; font: 650 28px/1 var(--ap-display); } html:has(.has-segments):not([data-never]) .has-segments .me-head h2 { margin: 0; font: 750 34px/1.02 var(--ap-display); font-variation-settings: "opsz" 96; letter-spacing: -0.026em; color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .me-head .me-line { margin: 6px 0 0; font: 400 16px/1.35 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .me-head + .account-rows, html:has(.has-segments):not([data-never]) .has-segments .me-head ~ .account-rows { margin-top: 32px; } html:has(.has-segments):not([data-never]) .has-segments .account-rows .account-row .ic { width: 28px; height: 28px; margin-right: 16px; color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .account-rows .account-row .ic svg { width: 28px; height: 28px; } html:has(.has-segments):not([data-never]) .has-segments .account-rows .account-row { display: flex; align-items: center; min-height: 64px; font: 560 17px/1.3 var(--font); color: var(--v3-ink); } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .has-segments .me-head .me-pic { width: 88px; height: 88px; font-size: 34px; } html:has(.has-segments):not([data-never]) .has-segments .me-head h2 { font-size: 48px; } } html:has(.has-segments):not([data-never]) .has-segments .account-rows .account-row > span:not(.ic) { flex: 1; text-align: start; } html:has(.has-segments):not([data-never]) .ap-nav .t-on { display: none; } html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"] .t-on { display: block; } html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"] .t-off { display: none; } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .ap-nav { gap: 44px; margin-left: auto; } html:has(.has-segments):not([data-never]) .ap-nav svg, html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"] .t-on { display: none; } html:has(.has-segments):not([data-never]) .ap-nav a { padding: 12px 8px; margin: 0 -8px; font: 600 19px/1.2 var(--font); letter-spacing: -0.01em; } html:has(.has-segments):not([data-never]) .ap-nav a[aria-current="page"]::after { top: auto; bottom: 0; width: 6px; height: 6px; background: var(--v3-accent); box-shadow: none; } html:has(.has-segments):not([data-never]) .account-bar { height: 84px; } } @media (min-width: 1100px) { html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-rings { margin-top: 34px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-rings-in { gap: 34px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-rings svg { width: 164px; height: 164px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-ring-key { gap: 12px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-ring-key span, html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-ring-key b { font-size: 17px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:not(:has(> .ks-treats)) .ks-round { margin-top: 30px; padding-top: 0; } } @media (max-width: 899px) { html:has(.has-segments):not([data-never]) .account-bar { height: 64px; min-height: 64px; padding-top: 0; padding-bottom: 0; align-items: center; } html:has(.has-segments):not([data-never]) .has-segments .ks-greet h2 { font-size: 44px; line-height: .98; } html:has(.has-segments):not([data-never]) .has-segments .ks-lede { max-width: 28ch; margin-top: 10px; font-size: 18px; line-height: 1.38; } } html:has(.has-segments):not([data-never]) .has-segments .cal-list .row.meal { grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; padding: 6px 0 6px 48px; } html:has(.has-segments):not([data-never]) .has-segments .cal-list .row.meal .tt { font: 500 16px/1.3 var(--font); } html:has(.has-segments):not([data-never]) .has-segments .cal-list > li.meal { border-top-color: transparent; } html:has(.has-segments):not([data-never]) .has-segments .cal-list > li.meal:last-child { padding-bottom: 6px; } html:has(.has-segments):not([data-never]) .has-segments .rows .end .iconbtn.scan { width: 40px; height: 40px; } html:has(.has-segments):not([data-never]) .has-segments .rows .end .iconbtn.scan svg { width: 22px; height: 22px; } html:has(.has-segments):not([data-never]) .has-segments .me-back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 14px -4px; font: 500 17px/1 var(--font); color: var(--v3-ink); text-decoration: none; } html:has(.has-segments):not([data-never]) .has-segments .me-back svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you { margin-top: 32px; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); background: none; border-radius: 0; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows > li { border: 0; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows > li + li { border-top: 1px solid var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; align-items: center; column-gap: 12px; width: 100%; min-height: 64px; padding: 12px 0; border: 0; background: none; color: var(--v3-ink); text-align: start; font: 560 17px/1.3 var(--font); cursor: pointer; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row .ic { width: 28px; height: 28px; color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row .ic svg { width: 28px; height: 28px; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row > span:not(.ic):not(.val) { grid-column: 2; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row .val { font: 400 15px/1.3 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row > svg { grid-column: 4; width: 20px; height: 20px; fill: none; stroke: var(--v3-muted); stroke-width: 1.5; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row:not(:has(.ic)) > span:first-child { grid-column: 1 / 3; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows.is-quiet { margin-top: 36px; border-top: 0; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows.is-quiet .account-row { min-height: 52px; font: 500 16px/1.3 var(--font); color: var(--v3-muted); } .has-segments .scrim { position: fixed; z-index: 40; inset: 0; background: rgba(43, 21, 48, .30); } .has-segments .wsheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #f8f2e9; will-change: transform; color: var(--v3-ink); font-family: var(--font); outline: 0; } .has-segments .wsheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; border-radius: 22px 22px 0 0; background: #fbf7ef; pointer-events: none; } .has-segments .wsheet::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; background: #f8f2e9; } .has-segments .wsheet > * { position: relative; } .has-segments .wsheet .ws-grab { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--v3-line); } .has-segments .wsheet .ws-head { display: flex; align-items: center; justify-content: space-between; } .has-segments .wsheet .ws-head h2 { margin: 0; font: 650 17px/1.2 var(--font); color: var(--v3-muted); } .has-segments .wsheet .ws-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--v3-ink); cursor: pointer; } .has-segments .wsheet .ws-close svg { width: 22px; height: 22px; } .has-segments .wsheet .ws-big { margin: 0; font: 400 20px/1.1 var(--font); color: var(--v3-muted); } .has-segments .wsheet .ws-big b { font: 780 48px/1 var(--ap-display, var(--font)); letter-spacing: -0.02em; color: var(--v3-ink); font-variant-numeric: tabular-nums; } .has-segments .wsheet .ws-now { margin: 8px 0 8px; font: 400 16px/1.3 var(--font); color: var(--v3-muted); } .has-segments .wsheet .ws-now .n { font-style: normal; font-weight: 680; color: var(--v3-accent); } .has-segments .wsheet .bar { display: block; height: 5px; border-radius: 3px; background: var(--v3-dot); overflow: hidden; } .has-segments .wsheet .bar i { display: block; height: 100%; border-radius: 3px; background: var(--v3-accent); } .has-segments .wsheet .ws-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; } .has-segments .wsheet .ws-tile { position: relative; display: grid; justify-items: center; align-content: end; gap: 6px; width: 100%; min-height: 112px; padding: 14px 4px 12px; border: 0; border-radius: 14px; background: none; color: var(--v3-ink); font: inherit; cursor: pointer; } .has-segments .wsheet .ws-tile .ws-glass { width: var(--g); height: var(--g); fill: none; stroke: var(--v3-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .has-segments .wsheet .ws-tile .ws-glass .lvl { fill: var(--v3-accent); stroke: none; opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); } .has-segments .wsheet .ws-tile.is-on .ws-glass .lvl { } .has-segments .wsheet .ws-tile b { font: 620 16px/1.2 var(--font); font-variant-numeric: tabular-nums; } .has-segments .wsheet .ws-tile small { min-height: 15px; margin-top: -2px; font: 500 12.5px/1.2 var(--font); color: var(--v3-muted); } .has-segments .wsheet .ws-tile.is-on { background: var(--v3-soft); } .has-segments .wsheet .ws-tile.is-on .ws-glass { stroke: var(--v3-accent); } .has-segments .wsheet .ws-tile.is-on b { color: var(--v3-accent); } .has-segments .wsheet .ws-step { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 8px 0; } .has-segments .wsheet .ws-step-l { font: 500 16px/1.3 var(--font); } .has-segments .wsheet .ws-step-c { display: flex; align-items: center; gap: 12px; } .has-segments .wsheet .ws-step-c output { min-width: 72px; text-align: center; font: 620 17px/1 var(--font); font-variant-numeric: tabular-nums; } .has-segments .wsheet .ws-round { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--v3-soft); color: var(--v3-ink); cursor: pointer; } .has-segments .wsheet .ws-round svg { width: 18px; height: 18px; } .has-segments .wsheet .ws-add { display: block; width: 100%; min-height: 54px; margin-top: 14px; border: 0; border-radius: 18px; background: var(--v3-accent); color: var(--v3-on); font: 650 17px/1 var(--font); cursor: pointer; } .has-segments .wsheet .ws-add:active { background: var(--v3-pressed); } .has-segments .wsheet .ws-usual { display: flex; justify-content: center; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; color: var(--v3-muted); font: 500 15px/1 var(--font); text-decoration: underline; cursor: pointer; } @media (min-width: 900px) { .has-segments .scrim { background: rgba(43, 21, 48, .10); } .has-segments .wsheet::before, .has-segments .wsheet::after { display: none; } .has-segments .wsheet { background: #faf4ea; left: 50%; right: auto; bottom: auto; top: 280px; width: 420px; margin-left: -360px; padding: 20px 24px; border-radius: 18px; box-shadow: 0 0 0 1px var(--v3-line); } .has-segments .wsheet .ws-grab { display: none; } } .has-segments .glasses i { position: relative; } .has-segments .glasses i.rise svg { transform-origin: 50% 100%; } .has-segments .glasses .drop { position: absolute; left: 50%; top: 0; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--v3-accent); opacity: 0; } .has-segments .glasses .drop.d1 { --dx: -7px; } .has-segments .glasses .drop.d2 { --dx: 0px; } .has-segments .glasses .drop.d3 { --dx: 7px; } .has-segments .v3-toast { } .has-segments .row .mid.is-open { cursor: pointer; } @media (prefers-reduced-motion: no-preference) { .has-segments .scrim { animation: wsheet-fade .2s ease-out both; } .has-segments .wsheet { animation: wsheet-in .38s cubic-bezier(.2, .9, .3, 1.12) both; } .has-segments .wsheet .ws-big { animation: wsheet-swap .22s ease-out both; } .has-segments .wsheet .ws-tile.is-on .ws-glass .lvl { animation: wsheet-fill .42s cubic-bezier(.2, .8, .3, 1) both; } @media (min-width: 900px) { .has-segments .wsheet { animation: wsheet-pop .3s cubic-bezier(.2, .9, .3, 1.1) both; } } .has-segments .glasses i.rise svg { animation: wsheet-rise .5s cubic-bezier(.2, .8, .3, 1) both; } .has-segments .glasses .drop { animation: wsheet-drop .55s ease-out both; } .has-segments .glasses .drop.d2 { animation-delay: .04s; } .has-segments .glasses .drop.d3 { animation-delay: .08s; } .has-segments .v3-toast { animation: wsheet-toast .3s cubic-bezier(.2, .9, .3, 1) both; } @keyframes wsheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes wsheet-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes wsheet-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes wsheet-swap { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes wsheet-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes wsheet-rise { 0% { transform: scaleY(.2); opacity: .4; } 60% { transform: scaleY(1.12); opacity: 1; } 100% { transform: scaleY(1); } } @keyframes wsheet-drop { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -12px); } } @keyframes wsheet-toast { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } } } @media (prefers-reduced-motion: reduce) { .has-segments .wsheet .ws-tile.is-on .ws-glass .lvl { transform: scaleY(1); } .has-segments .glasses .drop { display: none; } } html:has(.has-segments):not([data-never]) .v3-toast { z-index: 50; width: max-content; max-width: calc(100vw - 32px); } html:has(.has-segments) { --trk-page-pic: url("/brand/fitvee/img/trk-water-page-800.webp"); --trk-goal-pic: url("/brand/fitvee/img/trk-water-goal-800.webp"); --trk-walk-pic: url("/brand/fitvee/img/trk-walk-goal.jpg"); --trk-win: #2b7049; } @media (min-width: 900px), (min-resolution: 2dppx) { html:has(.has-segments) { --trk-page-pic: url("/brand/fitvee/img/trk-water-page-1600.webp"); --trk-goal-pic: url("/brand/fitvee/img/trk-water-goal-1600.webp"); } } html:has(.has-segments)[data-track="men"] { --trk-page-pic: url("/brand/fitvee/img/trk-water-page-men-800.webp"); --trk-goal-pic: url("/brand/fitvee/img/trk-water-goal-men-800.webp"); --trk-walk-pic: url("/brand/fitvee/img/trk-walk-goal-men-800.webp"); } @media (min-width: 900px), (min-resolution: 2dppx) { html:has(.has-segments)[data-track="men"] { --trk-page-pic: url("/brand/fitvee/img/trk-water-page-men-1600.webp"); --trk-goal-pic: url("/brand/fitvee/img/trk-water-goal-men-1600.webp"); --trk-walk-pic: url("/brand/fitvee/img/trk-walk-goal-men-1600.webp"); } } .has-segments .row .tt.row-open { padding: 0; border: 0; background: none; text-align: start; cursor: pointer; } .has-segments .row .tt.row-open::after { content: ""; position: absolute; inset: 0; } .has-segments .row.trk { position: relative; } .has-segments .row.trk .end, .has-segments .row.trk .trk-pin, .has-segments .row.trk .wf-undo { position: relative; z-index: 1; } .has-segments .wf-glasses { position: relative; display: block; height: 21px; } .has-segments .wf-set { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 6px; } .has-segments .wf-set.is-big { gap: 8px; } html:has(.has-segments):not([data-never]) .has-segments .wf-set i { position: relative; display: block; width: auto; flex: 0 1 12px; min-width: 5px; height: 15px; transform-origin: 50% 100%; } html:has(.has-segments):not([data-never]) .has-segments .wf-set.is-big i { flex-basis: 17px; height: 21px; } html:has(.has-segments):not([data-never]) .has-segments .wf-set svg { display: block; width: 100%; height: 100%; fill: none; stroke-width: 1.2; } html:has(.has-segments):not([data-never]) .has-segments .wf-set.is-big svg { stroke-width: 1; } html:has(.has-segments):not([data-never]) .has-segments .fu-glasses .wf-set i { flex: 0 0 20px; height: 25px; } .has-segments .wf-set .wo { fill: none; stroke: var(--v3-line); } .has-segments .wf-set .wl { fill: var(--v3-accent); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; } .has-segments .wf-set .wo-on { fill: none; stroke: var(--v3-accent); opacity: 0; } .has-segments .wf-set i.on .wo-on { opacity: 1; } .has-segments .wf-meter { position: relative; display: block; height: 21px; } .has-segments .wf-bar { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 10px; border-radius: 11px; background: var(--trk-win); } .has-segments .wf-bar-l { font: 700 13px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; } .has-segments .wf-undo { min-height: 44px; margin: -14px 0 -14px; padding: 0 0 0 16px; border: 0; background: none; font: 500 15px/1 var(--font); color: var(--v3-muted); cursor: pointer; } html:has(.has-segments):not([data-never]) .has-segments .row.is-done .plus, html:has(.has-segments):not([data-never]) .has-segments .row.is-done .plus:active { background: var(--trk-win); opacity: 1; } .has-segments .wf-done { position: absolute; inset: 0; display: grid; place-items: center; } .has-segments .wf-done::before { content: ""; width: 8px; height: 15px; margin-top: -4px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } @media (prefers-reduced-motion: no-preference) { .has-segments .wf-set i { animation: wf-pop .26s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--k, 0) * 35ms); } .has-segments .wf-bar { animation: wf-bar .3s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 0 50%; } .has-segments .wf-set .wl { transition: transform .46s cubic-bezier(.3, .75, .25, 1); } @keyframes wf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } @keyframes wf-bar { from { opacity: 0; transform: scaleX(.4); } to { opacity: 1; transform: scaleX(1); } } } .has-segments .fu-scrim { position: fixed; z-index: 39; inset: 0; background: rgba(43, 21, 48, .3); } .has-segments .fu { position: fixed; z-index: 40; inset: 0; overflow-y: auto; background: var(--v3-bg); color: var(--v3-ink); font-family: var(--font); outline: 0; -webkit-overflow-scrolling: touch; } .has-segments .fu { top: var(--preview-bar, 0px); } .has-segments .fu-scrim { display: none; } .has-segments .fu-photo { position: relative; height: 356px; background: var(--trk-page-pic) 50% 6% / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, rgba(0, 0, 0, .5) 87%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 70%, rgba(0, 0, 0, .5) 87%, transparent 100%); } .has-segments .fu-x { position: absolute; z-index: 3; top: 12px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(248, 242, 233, .9); color: #2b1530; cursor: pointer; } .has-segments .fu-x::after { content: ""; position: absolute; inset: -4px; } .has-segments .fu-x svg { width: 22px; height: 22px; } .has-segments .fu-body { position: relative; z-index: 2; margin-top: -40px; padding: 0 20px 40px; } .has-segments .fu-h { margin: 0; font: 750 34px/1.05 var(--ap-display, var(--font)); letter-spacing: -0.02em; color: var(--v3-ink); } .has-segments .fu-now { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; } .has-segments .fu-amt { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; color: var(--v3-ink); } .has-segments .fu-v { font: 750 64px/1 var(--ap-display, var(--font)); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .has-segments .fu-u { font: 560 20px/1.2 var(--font); color: var(--v3-muted); white-space: nowrap; } .has-segments .fu-plus { width: 60px; height: 60px; border: 0; background-size: 36% 2.8px, 2.8px 36%; } .has-segments .fu-glasses { display: flex; gap: 9px; margin-top: 16px; } .has-segments .fu-glasses .wf-set { position: static; } .has-segments .fu-goal { margin: 14px 0 0; font: 400 15px/1.3 var(--font); color: var(--v3-muted); } .has-segments .fu-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 24px; } .has-segments .fu-size { display: grid; justify-items: center; align-content: end; gap: 6px; min-height: 76px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--v3-dot); color: var(--v3-ink); font: 600 15px/1.2 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; } .has-segments .fu-size svg { width: var(--g); height: var(--g); fill: none; stroke: var(--v3-muted); stroke-width: 1.5; stroke-linejoin: round; } .has-segments .fu-size svg .lv { fill: none; stroke: none; } .has-segments .fu-size.is-on { background: var(--v3-soft); color: var(--v3-accent); } .has-segments .fu-size.is-on svg { stroke: var(--v3-accent); } .has-segments .fu-size.is-on svg .lv { fill: var(--v3-accent); } .has-segments .fu-week { margin-top: 30px; } .has-segments .fu-wk-h { display: flex; align-items: baseline; justify-content: space-between; } .has-segments .fu-wk-h h2 { margin: 0; font: 650 17px/1.2 var(--font); color: var(--v3-ink); } .has-segments .fu-wk-h span { font: 400 15px/1.3 var(--font); color: var(--v3-muted); font-variant-numeric: tabular-nums; } .has-segments .fu-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; } .has-segments .fu-bars li { display: grid; justify-items: center; gap: 8px; font: 500 13px/1 var(--font); color: var(--v3-muted); } .has-segments .fu-bars b { position: relative; display: block; width: 100%; max-width: 28px; height: 72px; border-radius: 8px; background: var(--v3-dot); overflow: hidden; } .has-segments .fu-bars b i { position: absolute; inset: 0; background: var(--v3-accent); transform-origin: 50% 100%; } .has-segments .fu-bars li.is-today { color: var(--v3-accent); font-weight: 680; } .has-segments .fu-coach { position: relative; z-index: 4; display: flex; align-items: center; gap: 4px; margin-top: 14px; padding: 12px 6px 12px 16px; border-radius: 16px; background: var(--v3-ink); color: var(--v3-bg); transform-origin: calc(100% - 30px) 0; } .has-segments .fu-coach::before { content: ""; position: absolute; top: -6px; right: 24px; width: 12px; height: 12px; border-radius: 2px; background: var(--v3-ink); transform: rotate(45deg); } .has-segments .fu-coach p { margin: 0 auto 0 0; font: 500 15px/1.35 var(--font); } .has-segments .fu-got { flex: none; min-height: 44px; padding: 0 10px; border: 0; background: none; font: 650 15px/1 var(--font); color: #f4b3cb; cursor: pointer; } @media (min-width: 900px) { .has-segments .fu-scrim { display: block; } .has-segments .fu { inset: auto; left: calc(50% - 280px); top: calc(24px + var(--preview-bar, 0px)); bottom: 24px; width: 560px; border-radius: 24px; } .has-segments .fu-photo { height: 360px; background-position: 50% 8%; } .has-segments .fu-body { padding: 0 40px 28px; } .has-segments .fu-bars b { height: 56px; } } @media (prefers-reduced-motion: no-preference) { .has-segments .fu { animation: fu-in .3s cubic-bezier(.2, .8, .2, 1) both; } .has-segments .fu-scrim { animation: wsheet-fade .2s ease-out both; } .has-segments .fu-coach { animation: fu-coach .32s .5s cubic-bezier(.2, .8, .2, 1) both; } .has-segments .fu-bars li.is-today b i { animation: fu-bar .5s cubic-bezier(.3, .75, .25, 1) both; } @keyframes fu-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes fu-coach { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes fu-bar { from { transform: scaleY(0); } } } :where(html:has(.has-segments)) .goal-moment { --gm-plum: #2b1530; --gm-cream: #fff8f2; --gm-acc: #ee85ad; --gm-box: #3e2844; --gm-win: #2b7049; position: fixed; inset: 0; z-index: 70; display: grid; padding: 24px; overflow-y: auto; font-family: var(--font); } :where(html:has(.has-segments)) .goal-moment .gm-bg { position: absolute; inset: 0; background: var(--gm-plum); } :where(html:has(.has-segments)) .goal-moment .gm-body { position: relative; display: grid; width: 100%; max-width: 400px; margin: auto; text-align: start; } :where(html:has(.has-segments)) .goal-moment .gm-hero { position: relative; display: grid; place-items: center; justify-self: center; } :where(html:has(.has-segments)) .goal-moment .gm-photo { position: relative; width: 236px; height: 262px; overflow: hidden; border-radius: 56% 44% 52% 48% / 47% 53% 47% 53%; background: var(--trk-goal-pic) 56% 13% / 180% auto no-repeat, var(--v3-muted); } :where(html:has(.has-segments)) .goal-moment.is-walk .gm-photo { background: var(--trk-walk-pic) 50% 20% / 150% auto no-repeat, var(--v3-muted); } :where(html:has(.has-segments)) .gm-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } :where(html:has(.has-segments)) .gm-confetti i { position: absolute; left: 0; top: 0; display: block; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); background: var(--c); opacity: 0; will-change: transform, opacity; } :where(html:has(.has-segments)) .gm-confetti i.d { border-radius: 0 50% 50% 50%; } :where(html:has(.has-segments)) .gm-confetti i.s { border-radius: 1.5px; } :where(html:has(.has-segments)) .goal-moment.is-walk .gm-confetti i.d { background: none; border-radius: 0; } :where(html:has(.has-segments)) .goal-moment.is-walk .gm-confetti i.d svg { display: block; width: 100%; height: 100%; fill: var(--c); } :where(html:has(.has-segments)) .goal-moment .gm-h { margin: 24px 0 0; font: 750 clamp(26px, 9vw, 38px)/1.05 var(--ap-display, var(--font)); letter-spacing: -0.02em; color: var(--gm-cream); } :where(html:has(.has-segments)) .gm-lead { color: var(--gm-acc); } :where(html:has(.has-segments)) .goal-moment .gm-box { margin: 24px 0 0; padding: 16px 18px 18px; border-radius: 22px; background: var(--gm-box); } :where(html:has(.has-segments)) .goal-moment .gm-did { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: var(--gm-cream); } :where(html:has(.has-segments)) .goal-moment .gm-did b { font: 700 46px/1 var(--ap-display, var(--font)); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } :where(html:has(.has-segments)) .goal-moment .gm-did span { font: 500 17px/1.3 var(--font); } :where(html:has(.has-segments)) .goal-moment .gm-streak { margin: 8px 0 0; font: 700 18px/1.3 var(--font); color: var(--gm-acc); } :where(html:has(.has-segments)) .gm-n { display: inline-grid; vertical-align: top; } :where(html:has(.has-segments)) .gm-n > span { grid-area: 1 / 1; } :where(html:has(.has-segments)) .gm-week { display: flex; justify-content: space-between; margin: 14px 0 0; padding: 0; list-style: none; } :where(html:has(.has-segments)) .gm-week li { display: grid; justify-items: center; row-gap: 6px; width: 24px; } :where(html:has(.has-segments)) .gm-week b { display: block; font: 600 13px/1 var(--font); color: rgba(255, 248, 242, .62); } :where(html:has(.has-segments)) .gm-week i { position: relative; display: block; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 248, 242, .16); } :where(html:has(.has-segments)) .gm-week .is-done i, :where(html:has(.has-segments)) .gm-week .is-today i > span { background: var(--gm-win); } :where(html:has(.has-segments)) .gm-week .is-done i::after, :where(html:has(.has-segments)) .gm-week .is-today i > span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; margin: -7px 0 0 -3px; border: solid var(--gm-cream); border-width: 0 2px 2px 0; transform: rotate(45deg); } :where(html:has(.has-segments)) .gm-week .is-today i > span { position: absolute; inset: 0; border-radius: 50%; } :where(html:has(.has-segments)) .gm-week .is-today b { color: var(--gm-cream); font-weight: 750; } :where(html:has(.has-segments)) .gm-week .is-ahead i { background: rgba(255, 248, 242, .08); } :where(html:has(.has-segments)) .goal-moment .gm-acts { display: grid; margin: 24px 0 0; } :where(html:has(.has-segments)) .goal-moment .gm-go { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--gm-acc); color: var(--gm-plum); font: 700 17px/1.2 var(--font); cursor: pointer; } :where(html:has(.has-segments)) .goal-moment .gm-go:active { background: #e4709c; } :where(html:has(.has-segments)) .goal-moment .gm-not { justify-self: center; min-height: 44px; margin: 4px 0 0; padding: 0 16px; border: 0; background: none; color: var(--gm-cream); font: 600 16px/1 var(--font); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; } :where(html:has(.has-segments)) .goal-moment:not(.is-playing) .gm-n0 { display: none; } @media (min-width: 900px) { :where(html:has(.has-segments)) .goal-moment .gm-photo { width: 288px; height: 320px; } :where(html:has(.has-segments)) .goal-moment .gm-h { font-size: 44px; } } @media (prefers-reduced-motion: reduce) { :where(html:has(.has-segments)) .goal-moment .gm-n0 { display: none; } } html:has(.has-segments)[data-track="men"] .goal-moment { --gm-plum: #050300; --gm-cream: #ebe1d3; --gm-acc: #8fb3d9; --gm-box: #1b1916; } html:has(.has-segments)[data-track="men"] .goal-moment .gm-h { font-weight: 800; } html:has(.has-segments)[data-track="men"] .goal-moment .gm-lead { color: var(--gm-cream); } html:has(.has-segments)[data-track="men"] .goal-moment .gm-go:active { background: #a9c6e4; } html:has(.has-segments)[data-track="men"] .has-segments .fu-scrim { background: rgba(5, 3, 0, .5); } html:has(.has-segments)[data-track="men"] .has-segments .fu-x { color: #050300; } html:has(.has-segments)[data-track="men"] .has-segments .fu-got { color: #345d88; } html:has(.has-segments):not([data-never]) .has-segments .rows .end .iconbtn.scan { border: 0; background: none; box-shadow: none; padding: 0; display: grid; place-items: center; color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .plus.is-sm { width: 32px; height: 32px; } @media (max-width: 899px) { html[data-seg="more"]:has(.has-segments):not([data-never]) .account-bar .brand, html[data-seg="me"]:has(.has-segments):not([data-never]) .account-bar .brand { visibility: hidden; } html[data-seg="more"]:has(.has-segments):not([data-never]) .has-segments .seg-more > h2 { position: relative; z-index: 4; margin: -50px 0 22px; font-size: 34px; pointer-events: none; } html[data-seg="me"]:has(.has-segments):not([data-never]) .has-segments .me-back { display: flex; width: fit-content; position: relative; z-index: 4; margin: -46px 0 14px -4px; } } html:has(.has-segments):not([data-never]) .has-segments .ks-session, html:has(.has-segments):not([data-never]) .has-segments .ks-session .ap-hero { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; min-height: 0; margin-left: 0; margin-right: 0; } @media (max-width: 899px) { html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed > .ks-aside > .ks-greet { margin-top: -12px; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .meta { margin-top: 1px; } } html:has(.has-segments):not([data-never]) .has-segments .pl-rows { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); background: none; border-radius: 0; } html:has(.has-segments):not([data-never]) .has-segments .pl-rows > li + li { border-top: 1px solid var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .pl-rows .account-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; align-items: center; column-gap: 12px; width: 100%; min-height: 64px; padding: 12px 0; border: 0; background: none; color: var(--v3-ink); text-align: start; font: 560 17px/1.3 var(--font); cursor: pointer; } html:has(.has-segments):not([data-never]) .has-segments .pl-rows .account-row .ic svg { width: 28px; height: 28px; } html:has(.has-segments):not([data-never]) .has-segments .pl-rows .account-row > span:not(.ic):not(.val) { grid-column: 2; } html:has(.has-segments):not([data-never]) .has-segments .pl-rows .account-row .val { font: 400 15px/1.3 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .pl-rows .account-row > svg { grid-column: 4; width: 20px; height: 20px; color: var(--v3-muted); } @media (max-width: 899px) { html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame { margin-top: 0; height: 254px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame > img { top: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:has(.pinned) .ks-frame { height: 176px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 56px), rgba(0, 0, 0, .35) calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 56px), rgba(0, 0, 0, .35) calc(100% - 22px), transparent 100%); } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed:has(.pinned) .ks-frame > img { top: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-page { margin-top: -34px; } html:has(.has-segments):not([data-never]) .has-segments .ks-session .meta { margin-top: -3px; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .plan-open { min-height: 54px; margin-top: 14px; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .pinned { margin-top: 14px; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .pinned .row { min-height: 60px; padding: 8px 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-rings { margin-top: 24px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-rings svg { width: 128px; height: 128px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-ring-key { gap: 6px; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-round { margin-top: 22px; } } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-gift { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-giftic { grid-row: auto; width: 28px; height: 28px; border-radius: 0; background: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-giftic svg { display: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-t { margin: 0; font: 600 17px/1.25 var(--font); color: var(--v3-ink); } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-s { margin: 2px 0 0; font: 400 15px/1.3 var(--font); color: var(--v3-muted); } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-gift-open { grid-column: 3; justify-self: end; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--v3-accent); font: 650 16px/1 var(--font); } @media (max-width: 899px) { html:has(.has-segments)[data-seg="me"]:has(.has-segments[data-acct-screen]) .account-bar .avatar, html:has(.has-segments)[data-seg="me"]:has(.seg-me[data-me-screen]) .account-bar .avatar { display: none; } } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .has-segments .seg-me, html:has(.has-segments):not([data-never]) .has-segments .seg-account { max-width: 720px; margin-left: auto; margin-right: auto; } html:has(.has-segments):not([data-never]) .has-segments .me-back { display: none; } } html:has(.has-segments):not([data-never]) .has-segments .account-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 10px -4px; padding: 0; border: 0; background: none; color: var(--v3-ink); font: 500 17px/1 var(--font); text-decoration: none; cursor: pointer; } html:has(.has-segments):not([data-never]) .has-segments .t-h2, html:has(.has-segments):not([data-never]) .has-segments .more-day h3, html:has(.has-segments):not([data-never]) .has-segments .more-side h3, html:has(.has-segments):not([data-never]) .has-segments .ks-round h3, html:has(.has-segments):not([data-never]) .has-segments .pp .g-h, html:has(.has-segments):not([data-never]) .has-segments .pp .t-h2 { font-weight: 780; letter-spacing: -0.034em; word-spacing: -0.04em; } @media (max-width: 899px) { html:has(.has-segments) .account-bar .brand { width: 98px; background-size: 98px 22px; } html[data-track="men"]:has(.has-segments) .ap-nav a[aria-current="page"] { background: none; } } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-row > svg, html:has(.has-segments):not([data-never]) .has-segments .pl-rows .account-row > svg, html:has(.has-segments):not([data-never]) .has-segments .row .chev { stroke: var(--v3-muted); opacity: .55; stroke-width: 1.3; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows.is-quiet { border-bottom: 0; } html:has(.has-segments):not([data-never]) .has-segments .cal-list > li.row.meal:nth-child(2) { border-top-color: var(--v3-line); } html:has(.has-segments):not([data-never]) .has-segments .seg-me .ap-pref[role="switch"] .go { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--v3-dot); font-size: 0; color: transparent; } html:has(.has-segments):not([data-never]) .has-segments .seg-me .ap-pref[role="switch"] .go::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transform: translateX(0); } html:has(.has-segments):not([data-never]) .has-segments .seg-me .ap-pref[role="switch"][aria-checked="true"] .go { background: var(--v3-accent); } html:has(.has-segments):not([data-never]) .has-segments .seg-me .ap-pref[role="switch"][aria-checked="true"] .go::after { transform: translateX(18px); } html[data-track="men"]:has(.has-segments) .has-segments .ks-greet h2 { line-height: .98; } @media (prefers-reduced-motion: no-preference) { html:has(.has-segments):not([data-never]) .has-segments .seg-me .ap-pref[role="switch"] .go::after { transition: transform .18s ease; } } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-gift .mp-gift { grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 14px; } html:has(.has-segments):not([data-never]) .has-segments .ks-treats .ks-gift .mp-giftic { width: 20px; height: 20px; } } html:has(.has-segments):not([data-never]) .has-segments .more-day .rows, html:has(.has-segments):not([data-never]) .has-segments .more-side section .rows { border-top: 0; } html:has(.has-segments):not([data-never]) .has-segments .more-side .foot { border-top: 0; } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows, html:has(.has-segments):not([data-never]) .has-segments .pl-rows { border-top: 0; border-bottom: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-page > .pinned { border-top: 0; border-bottom: 0; } html:has(.has-segments):not([data-never]) .has-segments .ks-gift .mp-gift { border-top: 0; border-bottom: 0; } html:has(.has-segments):not([data-never]) .has-segments .bar i { margin: 0; padding: 0; } @media (max-width: 899px) { html:has(.has-segments):not([data-never])[data-seg="me"] .account-bar .avatar { display: none; } html:has(.has-segments):not([data-never]) .has-segments .ks-spread.is-framed .ks-frame > img:not([srcset]) { top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 76% 16%; } } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .has-segments .seg-me .seg-account, html:has(.has-segments):not([data-never]) .has-segments .seg-account .seg-me { max-width: none; margin-left: 0; margin-right: 0; } } @media (max-width: 899px) { html:has(.has-segments):not([data-never]) .has-segments[data-acct-screen] .account-help p, html:has(.has-segments):not([data-never]) .has-segments[data-acct-screen] .account-screen p { text-align: left; } } html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows.is-quiet + .account-rows.is-quiet, html:has(.has-segments):not([data-never]) .has-segments .account-home.is-you .account-rows.is-quiet ~ .account-rows.is-quiet { margin-top: -14px; } html:has(.has-segments):not([data-never]) .has-segments .row .bar, html:has(.has-segments):not([data-never]) .has-segments .trk .bar { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 0; } html:has(.has-segments):not([data-never]) .has-segments .seg-me .ap-extra + .ap-extra { border-top: 0; margin-top: 18px; } @media (min-width: 900px) { html:has(.has-segments):not([data-never]) .has-segments .seg-me, html:has(.has-segments):not([data-never]) .has-segments .seg-account { box-sizing: border-box; width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; } html:has(.has-segments):not([data-never]) .has-segments .seg-account .account-home.is-you, html:has(.has-segments):not([data-never]) .has-segments .seg-account .account-rows { width: 100%; } } html:has(.has-segments) .pl-media { background: var(--p-stage); } html:has(.has-segments) .pl-ci-back, html:has(.has-segments) .pl-media-back { filter: none; } html:has(.has-segments) .pl-glass { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments) .pl-opt, html:has(.has-segments) .pl-round, html:has(.has-segments) .pl-soft { -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments) .pl-bottom { background: rgba(20, 12, 16, .62); } html:has(.has-segments) .pl-go, html:has(.has-segments) .pl-stop .pl-yes { background: var(--p-accent); box-shadow: none; } html:has(.has-segments) .ck-go { background: var(--ck-accent); box-shadow: none; } html:has(.has-segments) .pl-ci-back::after { background: rgba(20, 12, 16, .55); } html:has(.has-segments) .pl-rays { background: none; } html:has(.has-segments) .pl-ci-sheet, html:has(.has-segments) .pl-tile, html:has(.has-segments) .pl-frame, html:has(.has-segments) .ck-frame { box-shadow: none; } html:has(.has-segments) .ck-switch::after { box-shadow: none; } html:has(.has-segments) .pl-tile-pick input:checked + .pl-tile { box-shadow: inset 0 0 0 2.5px var(--p-accent); } @media (min-width: 900px) { html:has(.has-segments):not([data-track="men"]) .pl .pl-frame .pl-bottom { background: none; } } html[data-track="men"]:has(.has-segments) .pl-media, html[data-track="men"]:has(.has-segments) .pl-bottom { background: #050300; } html[data-track="men"]:has(.has-segments) .pl-ci-back::after { background: rgba(5, 3, 0, .55); } html[data-track="men"]:has(.has-segments) .pl-glass { background: #12100c; box-shadow: none; } html[data-track="men"]:has(.has-segments) .pl-go, html[data-track="men"]:has(.has-segments) .pl-stop .pl-yes, html[data-track="men"]:has(.has-segments) .ck-go { background: #8fb3d9; color: #050300; box-shadow: none; } html[data-track="men"]:has(.has-segments) .pl-ci-sheet { box-shadow: inset 0 0 0 1px #24211c; } html[data-track="men"]:has(.has-segments) .pl-tile { border-radius: 0; background: none; box-shadow: none; color: var(--p-ink); } html[data-track="men"]:has(.has-segments) .pl-tile-pick input:checked + .pl-tile { background: none; box-shadow: none; color: #8fb3d9; } html[data-track="men"]:has(.has-segments) .pl-ready { background: #050300; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } @media (max-width: 899px) { html[data-track="men"]:has(.has-segments) .pl-ready { left: 0; right: 0; bottom: 0; gap: 10px; padding: 72px 24px max(20px, env(safe-area-inset-bottom)); } } html[data-track="men"]:has(.has-segments) .pl-chips { display: grid; gap: 4px; } html[data-track="men"]:has(.has-segments) .pl-chip { padding: 0; border-radius: 0; background: none; font: 600 16px/1.3 var(--font); color: #8fb3d9; } html[data-track="men"]:has(.has-segments) .pl-chip.is-ink { padding: 0; border-radius: 0; background: none; font-weight: 500; color: #b3a999; } html[data-track="men"]:has(.has-segments) .pl-opts { gap: 6px 24px; } html[data-track="men"]:has(.has-segments) .pl-opt { padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 600 16px/1.2 var(--font); color: #ebe1d3; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; } html[data-track="men"]:has(.has-segments) .pl-opt[aria-expanded="true"] { background: none; color: #ebe1d3; text-decoration-thickness: 3px; } html[data-track="men"]:has(.has-segments) .pl-top { background: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-track="men"]:has(.has-segments) .pl-icon { background: #292622; color: #ebe1d3; } html[data-track="men"]:has(.has-segments) .pl-segs li { background: #3a362f; } html[data-track="men"]:has(.has-segments) .pl-moment .pl-soft { margin-top: 22px; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments) .rl-gf-icon { -webkit-mask: url("icons/gift.svg") center / contain no-repeat; mask: url("icons/gift.svg") center / contain no-repeat; background: var(--rl-m); } html:has(.has-segments) .cel::backdrop, html:has(.has-segments) .intro-dialog::backdrop { background: rgba(20, 12, 16, .6); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-track="men"]:has(.has-segments) .cel::backdrop, html[data-track="men"]:has(.has-segments) .intro-dialog::backdrop { background: rgba(5, 3, 0, .78); -webkit-backdrop-filter: none; backdrop-filter: none; } html:has(.has-segments) .cel-sheet { box-shadow: none; } html:has(.has-segments) .kit-welcome { background: var(--ap-card, var(--kit-card)); } html:has(.has-segments) .kit-welcome-art circle { fill: none; } html:has(.has-segments) .cel-moon .rim { fill: none; }