/* Theme art direction: motion/petals, quiet paper, and black neon. Fonts and floral art use stable /public URLs served by Rails in production. */ @font-face { font-family: "Manrope"; src: url("/fonts/manrope-variable.ttf") format("truetype"); font-style: normal; font-weight: 200 800; font-display: swap; } @font-face { font-family: "Caveat"; src: url("/fonts/caveat-variable.ttf") format("truetype"); font-style: normal; font-weight: 400 700; font-display: swap; } @font-face { font-family: "Oswald"; src: url("/fonts/oswald-variable.ttf") format("truetype"); font-style: normal; font-weight: 200 700; font-display: swap; } body { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; } .ui-icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; } .theme-handnote { font-family: "Caveat", cursive; font-size: 26px; line-height: 1.05; font-weight: 500; color: var(--accent); } .landing-shell { position: relative; } .landing-hero__prelude { margin: 0 0 18px; } .landing-hero__lead { max-width: 450px; font-size: 15px; } .landing-hero h1 { font-weight: 800; } .landing-hero__actions { gap: 20px; } .landing-start { min-height: 52px; } .landing-brand__name { font-weight: 800; } .theme-food-photo, .theme-hero-mascots { display: none; } .theme-hero-details { position: absolute; inset: 0; pointer-events: none; } .theme-hero-details__note { position: absolute; right: 10px; top: 2px; margin: 0; transform: rotate(7deg); } .theme-hero-details__arrow { position: absolute; top: 55px; right: -8px; width: 64px; height: 75px; color: var(--accent); } .theme-hero-details__petal { position: absolute; width: 90px; height: 145px; border-radius: 90% 5% 90% 5%; pointer-events: none; } .theme-hero-details__petal--one { top: 20%; left: 0; transform: rotate(-45deg); } .theme-hero-details__petal--two { right: 0; bottom: 10%; transform: rotate(25deg); } .theme-hero-details__spark { position: absolute; display: block; color: var(--accent-second); } .theme-hero-details__spark--one { top: 30%; left: 2%; transform: rotate(10deg); } .theme-hero-details__spark--two { right: 2%; bottom: 20%; transform: scale(.6) rotate(-15deg); } .scene-mascot { position: relative; display: inline-block; width: 112px; flex-shrink: 0; aspect-ratio: 1; pointer-events: none; } .scene-mascot__image { display: block; width: 100%; height: 100%; object-fit: contain; } .scene-mascot__image--light { mix-blend-mode: multiply; filter: brightness(1.018); } .scene-mascot__image--dark { display: none; } :root[data-theme="dark"] .scene-mascot__image--light { display: none; } :root[data-theme="dark"] .scene-mascot__image--dark { display: block; mix-blend-mode: normal; } .chat-empty > .scene-mascot { width: clamp(145px, 25vh, 220px); margin-bottom: 18px; } .chat-empty > .chat-empty__note { margin: 0 0 22px; font-size: 25px; } .chat-empty > p:not(.chat-empty__eyebrow):not(.chat-empty__note) { margin-bottom: 13px; } .chat-suggestions button { min-height: 43px; font-size: 12px; } .workspace-section-heading--illustrated { position: relative; min-height: 92px; align-items: center; padding-right: 100px; margin-top: 6px; } .workspace-section-heading--illustrated > .scene-mascot { position: absolute; right: 0; bottom: -3px; width: 100px; } .workspace-section-heading--illustrated .workspace-discuss { display: inline-flex; align-items: center; min-height: 36px; margin: 12px 0 0; padding: 0 12px; font-size: 11px; } .workspace-section-heading h2 { font-size: 22px; line-height: 1.2; } .workspace-panel { animation: none; } .workspace-scene { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 104px; margin: 0 0 19px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); } .workspace-scene > div { min-width: 0; } .workspace-scene strong { display: block; max-width: 210px; font-size: 13px; line-height: 1.45; text-wrap: balance; } .workspace-scene .theme-handnote { max-width: 200px; margin: 8px 0 0; font-size: 23px; } .workspace-scene .scene-mascot { width: 102px; margin: -10px -8px -9px 0; } .nutrition-card { position: relative; } .nutrition-progress__value { display: none; } .workspace-quick-actions .ui-icon { width: 21px; height: 21px; } .workspace-quick-actions button { min-height: 54px; } .workout-card__details { border-color: var(--line); } .workout-card__details summary { padding: 12px; } .workout-exercise { border-color: var(--line); } .workout-card__discuss { width: calc(100% - 24px); min-height: 40px; } .workout-sets { row-gap: 9px; } .memory-row__delete { min-height: 34px; } .profile-facts dt, .profile-facts dd { font-size: 11px; } .profile-appearance h3 { font-weight: 750; } .landing-routine article { position: relative; } .landing-routine__number { position: absolute; top: 14px; right: 16px; background: transparent; width: auto; height: auto; font-size: 10px; opacity: .75; } .landing-routine__icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 16px; color: var(--accent); background: var(--accent-soft); } .landing-routine__icon .ui-icon { width: 25px; height: 25px; } .landing-routine article > div { padding-top: 3px; } .landing-routine h3 { font-size: 15px; } .landing-routine article p { font-size: 11px; } .landing-routine { margin-bottom: 18px; } .feature-ribbon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 80px; padding: 17px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); } .feature-ribbon__item { display: flex; align-items: center; gap: 12px; min-width: 0; } .feature-ribbon__icon { display: grid; width: 42px; height: 46px; flex-shrink: 0; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 13px; } .feature-ribbon__item strong { display: block; font-size: 12px; } .feature-ribbon__item small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; } .landing-final__character { position: absolute; right: 2%; bottom: 3%; } .landing-final__character .scene-mascot { width: 175px; } .landing-final__avatar { display: none; } .landing-final .landing-start, .landing-final__link { z-index: 1; } /* Active pink: pearl surfaces, petals, ribbons and handwritten accents. */ :root[data-theme="care"] { --cream: #fff5f8; --paper: #fffdfd; --ink: #271638; --ink-soft: #756180; --line: #eddae9; --line-strong: #d7b7d2; --accent: #b81678; --surface-soft: #fdf0f7; --shadow: 0 22px 70px #9c507415; } :root[data-theme="care"] .web-landing-page { background: radial-gradient(ellipse at 10% 9%, #ffdfe8, transparent 28%), radial-gradient(ellipse at 94% 22%, #efe2fd, transparent 30%), radial-gradient(ellipse at 30% 70%, #fff0e7, transparent 35%), var(--cream); } :root[data-theme="care"] .landing-shell { margin-top: 24px; } :root[data-theme="care"] .landing-nav { position: relative; z-index: 2; min-height: 96px; padding: 16px 28px; border: 2px solid #fff; border-bottom: 1px solid #f4e6ed; border-radius: 28px 28px 0 0; background: #fffcfded; box-shadow: 0 -12px 35px #b9719207; } :root[data-theme="care"] .landing-nav__links a { color: #55415f; } :root[data-theme="care"] .landing-brand__avatar { border: 3px solid #fff; border-radius: 17px; box-shadow: 0 5px 16px #bc679929; } :root[data-theme="care"] .landing-hero { z-index: 1; min-height: 590px; padding: 44px 38px 48px; grid-template-columns: 1.05fr 1fr; background: linear-gradient(120deg, #fffdfaee, #fff5f8db 65%, #f8efffdf); border: 2px solid #fff; border-top: 0; border-radius: 0 0 28px 28px; box-shadow: 0 25px 45px #8d3b7010; } :root[data-theme="care"] .landing-hero::before { inset: 0; background: radial-gradient(ellipse at 89% 75%, #dfc2f746, transparent 46%), radial-gradient(ellipse at 5% 65%, #ffcfce4a, transparent 44%); opacity: 1; border-radius: inherit; } :root[data-theme="care"] .landing-hero__prelude { margin-bottom: 16px; color: #bf2f80; transform: rotate(-3deg); transform-origin: left; font-size: 27px; } :root[data-theme="care"] .landing-hero h1 { font-size: clamp(42px, 4.7vw, 63px); line-height: 1.07; letter-spacing: -.058em; } :root[data-theme="care"] .landing-hero h1 em { background-image: linear-gradient(115deg, #e66058, #c722ac 85%); } :root[data-theme="care"] .landing-eyebrow--pill { color: #743c94; background: linear-gradient(110deg, #f1dff8, #fff6fa); border: 1px solid #fff; box-shadow: 0 5px 18px #c484cb16; } :root[data-theme="care"] .landing-hero__lead { max-width: 395px; font-size: 14px; line-height: 1.8; } :root[data-theme="care"] .landing-start { border: 1px solid #fff8; border-radius: 18px; background: linear-gradient(112deg, #ce482b, #c71e89); box-shadow: inset 0 1px #ffffff65, 0 9px 20px #c3257025, 0 0 0 4px #ffffff78; } :root[data-theme="care"] .landing-demo-link__play { border-color: #bd8cc7; box-shadow: 0 0 0 5px #fff7; } :root[data-theme="care"] .landing-proof { gap: 10px 18px; } :root[data-theme="care"] .landing-proof li { font-size: 10px; } :root[data-theme="care"] .landing-proof li > span { color: #8452a1; background: #f4e8fa; box-shadow: inset 0 1px #fff; } :root[data-theme="care"] .landing-identity { min-height: 490px; align-self: stretch; } :root[data-theme="care"] .landing-identity > .landing-identity__mascot { display: none; } :root[data-theme="care"] .theme-food-photo { display: flex; flex-direction: column; position: absolute; top: 62px; right: 0; width: 275px; margin: 0; padding: 12px; background: #fffdfb; border: 2px solid #fff; border-radius: 25px; box-shadow: 0 16px 45px #9e588030, 0 0 0 9px #fff6; transform: rotate(7deg); } .theme-food-photo > img { display: block; width: 100%; height: 245px; object-fit: cover; object-position: 75% 50%; border-radius: 17px; } .theme-food-photo figcaption { display: flex; order: -1; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 3px; } .theme-food-photo figcaption strong { display: block; color: #2e183e; font-size: 14px; } .theme-food-photo figcaption small { display: block; margin-top: 4px; color: #776482; font-size: 9px; line-height: 1.5; } .theme-food-photo__icon { display: grid; flex: 0 0 35px; height: 35px; place-items: center; border-radius: 12px; color: #6b3288; background: #f6eef9; } .theme-food-photo__icon .ui-icon { width: 20px; height: 20px; } :root[data-theme="care"] .theme-hero-mascots { display: block; position: absolute; z-index: 2; left: -30px; bottom: -2px; mix-blend-mode: multiply; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: 325px; } :root[data-theme="care"] .theme-hero-details__note { top: -4px; right: -5px; color: #9745a9; font-size: 25px; } :root[data-theme="care"] .theme-hero-details__arrow { top: 27px; right: -34px; color: #a44bab; width: 52px; transform: rotate(-20deg); } :root[data-theme="care"] .theme-hero-details__petal--one { left: 1%; top: 1%; background: linear-gradient(130deg, #ffa99a8c, #f6c6df25); transform: rotate(-33deg); } :root[data-theme="care"] .theme-hero-details__petal--two { right: -20px; bottom: 0; width: 135px; height: 170px; background: linear-gradient(20deg, #dab7f64d, #ffd5edb3); } :root[data-theme="care"] .theme-hero-details__spark--one { top: 32%; left: -3%; color: #e77aad; } :root[data-theme="care"] .theme-hero-details__spark--two { color: #9f77d0; } :root[data-theme="care"] .landing-routine { position: relative; z-index: 1; margin-top: 20px; padding: 28px 24px 22px; border: 2px solid white; border-radius: 25px; background: #ffffffb8; box-shadow: 0 14px 38px #b66c9a0b; } :root[data-theme="care"] .landing-routine article { gap: 12px; padding: 24px 17px; border-color: #eee0f1; background: linear-gradient(120deg, #fff, #fffafd); border-radius: 19px; box-shadow: inset 0 0 0 3px #fff9; } :root[data-theme="care"] .landing-routine__icon { color: #663781; background: linear-gradient(145deg, #f6e8ff, #fceef5); border: 2px solid white; border-radius: 50%; box-shadow: 0 4px 14px #9e7bc316; } :root[data-theme="care"] .landing-routine article:nth-child(2) .landing-routine__icon:not(.landing-art-icon) { background: #ffe8f1; } :root[data-theme="care"] .landing-routine__heading h2 { font-size: 26px; } :root[data-theme="care"] .feature-ribbon { background: linear-gradient(110deg, #fffafaed, #fff0f7d9); border: 2px solid #fff; box-shadow: 0 8px 30px #a4619c0a; } :root[data-theme="care"] .feature-ribbon__icon { color: #a33ab1; background: #f5e8ff; box-shadow: inset 0 1px white; } :root[data-theme="care"] .feature-ribbon__item--food .feature-ribbon__icon { color: #c45536; background: #fff0e6; } :root[data-theme="care"] .feature-ribbon__item--memory .feature-ribbon__icon { color: #c32a89; background: #ffe8f3; } :root[data-theme="care"] .landing-case-group { background: linear-gradient(155deg, #ffffffed, #fff5fb); border: 2px solid white; box-shadow: 0 16px 40px #9b5f9010, inset 0 0 0 1px #ead8ed; } :root[data-theme="care"] .landing-case-group:nth-child(2) { background: linear-gradient(155deg, #fff, #f5efff); } :root[data-theme="care"] .landing-platform, :root[data-theme="care"] .landing-pricing__card { border: 1px solid #e9d7e9; background: #fffdfdf5; box-shadow: 0 6px 20px #98668b0a; } :root[data-theme="care"] .landing-pricing { border: 2px solid white; background: radial-gradient(ellipse at 0% 100%, #e7d1f5, transparent 50%), linear-gradient(120deg, #ffeff0, #f9f0ff); box-shadow: inset 0 0 0 1px #e6cfea; } :root[data-theme="care"] .landing-faq details { margin-bottom: 10px; padding: 0 20px; border: 1px solid #ead8e9; border-radius: 17px; background: #fffdfde3; } :root[data-theme="care"] .landing-faq summary { min-height: 63px; } :root[data-theme="care"] .landing-final { border: 2px solid white; background: radial-gradient(ellipse at 90% 110%, #d1a3ef88, transparent 55%), linear-gradient(115deg, #ffede4, #ffe1f0 65%, #eee0fd); box-shadow: inset 0 0 0 1px #fff9; } :root[data-theme="care"] .landing-final::before { content: ""; position: absolute; left: -20px; top: -45px; width: 160px; height: 220px; border-radius: 90% 0 90% 0; background: #fff5; transform: rotate(30deg); } :root[data-theme="care"] .web-chat-page { background: radial-gradient(ellipse at 7% 12%, #ffe0ea, transparent 45%), radial-gradient(ellipse at 93% 83%, #eadbf9, transparent 50%), #fff5f8; } :root[data-theme="care"] .chat-app { border: 2px solid #fff; border-radius: 28px; box-shadow: 0 20px 65px #925d811c; } :root[data-theme="care"] .chat-main { background: radial-gradient(ellipse at 10% 30%, #ffe0e530, transparent 45%), radial-gradient(ellipse at 100% 80%, #e9d6fa52, transparent 50%), #fffafd; } :root[data-theme="care"] .chat-header, :root[data-theme="care"] .chat-workspace__header, :root[data-theme="care"] .chat-composer-wrap { background: #fffafdf2; border-color: #efdfed; } :root[data-theme="care"] .chat-brand__avatar { box-shadow: 0 4px 14px #b5689230; border: 2px solid #fff; } :root[data-theme="care"] .chat-message__bubble { border: 1px solid #eadcec; box-shadow: 0 5px 18px #9e5d7f09; border-radius: 9px 23px 23px; } :root[data-theme="care"] .chat-message--user .chat-message__bubble { background: linear-gradient(135deg, #f6e6fc, #ecddfa); border: 1px solid #dfc8ef; color: #553674; border-radius: 23px 9px 23px 23px; } :root[data-theme="care"] .chat-message--assistant .chat-message__actions { background: #fff9fcee; border: 1px solid #ead8ed; box-shadow: 0 5px 18px #9e5d7f08; } :root[data-theme="care"] .chat-composer { background: #fff; border: 1px solid #e9d9e6; box-shadow: 0 4px 20px #925d8109, inset 0 0 0 3px #fff9fc; border-radius: 22px; } :root[data-theme="care"] .chat-send { border-radius: 50%; background: linear-gradient(135deg, #d44b47, #c51d8d); box-shadow: 0 5px 13px #c72b8b27; } :root[data-theme="care"] .chat-suggestions button { background: #ffffffc7; border: 1px solid #e8cbe1; box-shadow: 0 4px 13px #b9789c0b; } :root[data-theme="care"] .chat-empty > .scene-mascot { width: clamp(155px, 27vh, 235px); } :root[data-theme="care"] .chat-empty__note { color: #ae359b; transform: rotate(-3deg); } :root[data-theme="care"] .chat-workspace { background: linear-gradient(155deg, #fffaf8, #fff5fb 55%, #f8f0ff); } :root[data-theme="care"] .workspace-tabs { background: #fffafdf7; border-color: #efdfed; } :root[data-theme="care"] .workspace-tab.is-active { color: #b92181; background: linear-gradient(135deg, #ffe0ed, #f7e5f7); box-shadow: inset 0 1px #fff; border: 1px solid #f0d1e5; } :root[data-theme="care"] .nutrition-card { padding: 23px 19px 18px; background: linear-gradient(125deg, #ffffff, #fffaff); border: 1px solid #ead8e6; box-shadow: 0 9px 25px #97647a0b, 0 0 0 3px #ffffff80; border-radius: 22px; } :root[data-theme="care"] .nutrition-card__eyebrow { color: #765b81; font-size: 11px; } :root[data-theme="care"] .nutrition-card__main { flex-wrap: wrap; gap: 4px; } :root[data-theme="care"] .nutrition-card--with-goal .nutrition-card__eyebrow { padding-right: 84px; } :root[data-theme="care"] .nutrition-card--with-goal .nutrition-card__main { padding-right: 80px; } :root[data-theme="care"] .nutrition-card__main strong { font-size: 39px; } :root[data-theme="care"] .nutrition-card__main span { font-size: 10px; } :root[data-theme="care"] .nutrition-progress { position: absolute; top: 37px; right: 16px; width: 72px; height: 72px; margin: 0; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(from -90deg, #ed8272, #c72391 var(--nutrition-progress), #f4e7ef var(--nutrition-progress)); box-shadow: 0 4px 15px #ba6b9816; } :root[data-theme="care"] .nutrition-progress::before { content: ""; position: absolute; inset: 7px; background: #fffafd; border-radius: 50%; } :root[data-theme="care"] .nutrition-progress > span { display: none; } :root[data-theme="care"] .nutrition-progress__value { position: relative; display: block; color: #392046; font-size: 15px; font-weight: 800; } :root[data-theme="care"] .nutrition-macros { gap: 9px; margin-top: 22px; } :root[data-theme="care"] .nutrition-macros > div { padding: 9px 8px 7px; background: #fff7fb; border: 1px solid #f0dfed; border-top: 2px solid var(--macro-protein); border-radius: 10px; } :root[data-theme="care"] .nutrition-macros > div:nth-child(2) { border-top-color: var(--macro-fat); } :root[data-theme="care"] .nutrition-macros > div:nth-child(3) { border-top-color: var(--macro-carbs); } :root[data-theme="care"] .workspace-quick-actions button { min-height: 58px; border-radius: 17px; box-shadow: inset 0 1px #fff8, 0 4px 15px #a574aa0a; } :root[data-theme="care"] .workspace-quick-actions button:first-child { background: linear-gradient(120deg, #ce4935, #c71d87); } :root[data-theme="care"] .workspace-quick-actions button:last-child { border-color: #e8d6f7; background: linear-gradient(125deg, #f1e5ff, #ead9f8); } :root[data-theme="care"] .energy-ledger, :root[data-theme="care"] .meal-row, :root[data-theme="care"] .workout-card, :root[data-theme="care"] .memory-row, :root[data-theme="care"] .diary-day { border-color: #ead9e8; background: #ffffffeb; box-shadow: 0 6px 16px #95658208; } :root[data-theme="care"] .energy-ledger__result { background: linear-gradient(110deg, #fff0f4, #f7eefa); border-color: #efdfef; } :root[data-theme="care"] .energy-ledger__row { border-color: #f1e5ef; } :root[data-theme="care"] .workspace-scene { border: 1px solid #edd8e8; border-radius: 19px; background: linear-gradient(112deg, #ffeaf0, #f7e9ff); box-shadow: inset 0 1px #fff; } :root[data-theme="care"] .workspace-scene--workout { background: linear-gradient(112deg, #f2e6ff, #ffeef8); } :root[data-theme="care"] .workspace-scene--memory { background: linear-gradient(112deg, #f3eafa, #fff2f6); } :root[data-theme="care"] .profile-appearance { background: #ffffffd9; border-color: #ead5e5; box-shadow: 0 7px 18px #985b8d0a; } :root[data-theme="care"] .profile-facts { background: #ffffffc7; border-color: #eadbe7; } :root[data-theme="care"] .profile-connection { background: #ffffff8c; } /* Selected Soft UI daylight: pearl surfaces, slate type and a restrained violet accent. */ :root[data-theme="light"] .theme-handnote { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 650; line-height: 1.55; color: #5e67aa; } :root[data-theme="light"] .web-landing-page { background: radial-gradient(ellipse at 86% 8%, #eaecffbb, transparent 32%), radial-gradient(ellipse at 4% 39%, #edf1ff80, transparent 34%), #f7f8fb; } :root[data-theme="light"] .landing-nav { min-height: 105px; border-bottom: 1px solid #dfe3f0; } :root[data-theme="light"] .landing-hero { min-height: 620px; padding-top: 58px; gap: 35px; background: transparent; } :root[data-theme="light"] .landing-hero::before { inset: 0; opacity: 1; background: radial-gradient(ellipse at 78% 51%, #e7e9ffb0, transparent 50%); } :root[data-theme="light"] .landing-hero__prelude { text-transform: uppercase; letter-spacing: .11em; font-size: 10px; margin-bottom: 22px; } :root[data-theme="light"] .landing-hero h1 { font-size: clamp(44px, 4.6vw, 65px); line-height: 1.11; letter-spacing: -.06em; } :root[data-theme="light"] .landing-hero h1 em { color: #5559bd; text-decoration: none; } :root[data-theme="light"] .landing-eyebrow--pill { color: #4b50ad; border: 1px solid #d9def7; background: #f2f3ff; border-radius: 999px; font-weight: 700; } :root[data-theme="light"] .landing-start { border-radius: 14px; background: #5d60c9; box-shadow: 0 10px 24px #5057b026, inset 0 1px #ffffff45; } :root[data-theme="light"] .landing-demo-link__play { border-color: #c7cbed; box-shadow: 0 4px 12px #3e488310; } :root[data-theme="light"] .landing-proof li > span { border-radius: 10px; background: #f0f1fc; border: 1px solid #dfe2f8; } :root[data-theme="light"] .landing-identity { padding: 24px 18px 0; } :root[data-theme="light"] .landing-identity::before { content: ""; position: absolute; z-index: -1; inset: 42px 0 26px; border: 1px solid #dfe2f4; border-radius: 31px; background: radial-gradient(circle at 74% 26%, #eaecff, transparent 43%), linear-gradient(145deg, #fff, #f3f4ff); box-shadow: 0 20px 55px #56619a14, inset 0 1px #fff; transform: rotate(1deg); } :root[data-theme="light"] .theme-hero-details__note { top: 6px; right: 22px; max-width: 170px; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 650; line-height: 1.5; color: #5d62aa; transform: none; } :root[data-theme="light"] .theme-hero-details__arrow { display: none; } :root[data-theme="light"] .theme-hero-details__spark { color: #a2a6db; } :root[data-theme="light"] .theme-hero-details__spark--one { left: 0; top: 28%; } :root[data-theme="light"] .theme-hero-details__spark--two { color: #d58365; } :root[data-theme="light"] .theme-hero-details__petal { display: none; } :root[data-theme="light"] .landing-routine { position: relative; padding: 27px 22px 22px; border: 1px solid #e0e3f0; border-radius: 24px; background: #fffffff2; box-shadow: 0 13px 38px #4d558914; } :root[data-theme="light"] .landing-routine__grid { gap: 13px; } :root[data-theme="light"] .landing-routine article { align-items: flex-start; padding: 24px 17px; border: 1px solid #e2e5f3; border-radius: 18px; background: linear-gradient(145deg, #fff, #fbfbff); box-shadow: 0 7px 19px #4d55890b, inset 0 1px #fff; } :root[data-theme="light"] .landing-routine__number { font-family: ui-monospace, monospace; color: #8489ad; } :root[data-theme="light"] .landing-routine__icon { color: #5d60c9; border: 1px solid #dfe1f7; background: #f0f1ff; border-radius: 14px; } :root[data-theme="light"] .landing-routine article:nth-child(2) .landing-routine__icon:not(.landing-art-icon) { color: #b95032; background: #fff1eb; border-color: #f1dbd3; } :root[data-theme="light"] .feature-ribbon { border: 1px solid #e0e4f0; border-radius: 20px; background: #ffffffeb; padding: 17px; box-shadow: 0 7px 22px #4b548b0c; } :root[data-theme="light"] .feature-ribbon__icon { background: #f0f1fc; border: 1px solid #dfe1f5; border-radius: 12px; } :root[data-theme="light"] .feature-ribbon__item--food .feature-ribbon__icon { color: #b95032; background: #fff1eb; border-color: #f1dbd3; } :root[data-theme="light"] .landing-case-group { border-radius: 22px; background: #fff; border-color: #e1e4f1; box-shadow: 0 15px 35px #515b8f12; } :root[data-theme="light"] .landing-case-group__format { display: inline-block; padding: 5px 9px; border: 1px solid #dcdff0; border-radius: 8px; font-size: 10px; } :root[data-theme="light"] .landing-case-group:nth-child(2) .landing-case-group__format { color: #565cb5; border-color: #dfe1f7; background: #f2f3ff; } :root[data-theme="light"] .landing-platform { border-radius: 17px; border-color: #e0e4f1; box-shadow: 0 7px 20px #545d900b; } :root[data-theme="light"] .landing-pricing { border-radius: 24px; background: radial-gradient(ellipse at 86% 15%, #e8eafe, transparent 42%), linear-gradient(130deg, #f9faff, #f0f2ff); border-color: #dce0f0; } :root[data-theme="light"] .landing-pricing__card { border-radius: 19px; box-shadow: 0 16px 35px #535c9318; } :root[data-theme="light"] .landing-faq details { margin-bottom: 12px; padding: 0 22px; border: 1px solid #e0e4f0; border-radius: 17px; background: #fff; box-shadow: 0 5px 14px #4c568908; } :root[data-theme="light"] .landing-faq details p { padding: 0 0 20px; } :root[data-theme="light"] .landing-final { border-radius: 25px; background: radial-gradient(ellipse at 80% 10%, #e6e9ff, transparent 50%), linear-gradient(135deg, #fff, #f0f2ff); border-color: #dce0f0; box-shadow: 0 16px 40px #4d579011; } :root[data-theme="light"] .landing-final__orb { border-color: #a6a9db55; border-radius: 46%; width: 710px; height: 390px; top: -210px; transform: translateX(-50%) rotate(-8deg); } :root[data-theme="light"] .landing-final__character .scene-mascot { width: 150px; } :root[data-theme="light"] .web-chat-page { background: radial-gradient(ellipse at 7% 12%, #e9ecff, transparent 40%), #f3f5fb; } :root[data-theme="light"] .chat-app { border-color: #dce0ef; border-radius: 24px; box-shadow: 0 20px 55px #38456b17; } :root[data-theme="light"] .chat-main { background: radial-gradient(ellipse at 75% 95%, #f0f1ff, transparent 40%), #fafbff; } :root[data-theme="light"] .chat-header, :root[data-theme="light"] .chat-composer-wrap { background: #ffffffed; border-color: #e1e4f0; } :root[data-theme="light"] .chat-brand__avatar { border: 1px solid #e1e4f2; padding: 1px; border-radius: 14px; box-shadow: 0 3px 12px #5260a21b; } :root[data-theme="light"] .chat-header__button, :root[data-theme="light"] .theme-picker--compact summary { border-color: #dfe3f0; box-shadow: 0 2px 7px #4450840b; } :root[data-theme="light"] .chat-message__bubble { border-radius: 9px 20px 20px; background: #fff; border-color: #dfe3f0; box-shadow: 0 6px 18px #4d578b0d; } :root[data-theme="light"] .chat-message--user .chat-message__bubble { color: #323864; background: #ebedff; border: 1px solid #d9dcf5; box-shadow: 0 3px 10px #535db00c; border-radius: 20px 9px 20px 20px; } :root[data-theme="light"] .chat-message--user .chat-message__time, :root[data-theme="light"] .chat-message--user .chat-message__processing { color: #59629c; } :root[data-theme="light"] .chat-message--assistant .chat-message__actions { background: #f8f9ff; border-color: #dfe2f2; border-radius: 16px; box-shadow: 0 5px 16px #505b9010; } :root[data-theme="light"] .chat-action-button { border-color: #cfd4eb; border-radius: 11px; } :root[data-theme="light"] .chat-action-button--primary { color: #fff; background: #5d60c9; border-color: #5d60c9; box-shadow: 0 7px 18px #5259b52b; } :root[data-theme="light"] .chat-action-button--primary:hover { box-shadow: 0 9px 21px #5259b537; } :root[data-theme="light"] .chat-tool-trace__item { color: #4d5793; border-color: #dfe2f6; background: #f1f2ff; border-radius: 9px; } :root[data-theme="light"] .chat-tool-trace__item--running { color: #4b50a5; background: #e9ebff; } :root[data-theme="light"] .chat-agent-activity { color: #41496f; border-color: #dfe2f4; background: #f5f6ff; border-radius: 16px; box-shadow: 0 4px 14px #4c579013; } :root[data-theme="light"] .chat-agent-activity__orb { color: #545cc0; background: #e7e9ff; border-radius: 11px; } :root[data-theme="light"] .chat-agent-activity__orb i { background: #5d60c9; } :root[data-theme="light"] .chat-agent-activity__tools span { color: #59639a; } :root[data-theme="light"] .chat-empty > .scene-mascot { width: clamp(145px, 23vh, 205px); } :root[data-theme="light"] .chat-empty .chat-empty__note { font-size: 12px; color: #626b92; } :root[data-theme="light"] .chat-suggestions button { border-radius: 11px; border-color: #d9ddf0; background: #fff; box-shadow: 0 3px 10px #505b8b0b; } :root[data-theme="light"] .chat-composer { border-radius: 16px; background: #fff; border-color: #d7dcf0; box-shadow: 0 4px 16px #4b558b0d; } :root[data-theme="light"] .chat-composer:focus-within { border-color: #8b90df; box-shadow: 0 0 0 4px #e8e9ff, 0 5px 18px #4d579017; } :root[data-theme="light"] .chat-composer textarea:focus-visible { outline: none; } :root[data-theme="light"] .chat-send { border-radius: 12px; box-shadow: 0 5px 14px #5359b52a; } :root[data-theme="light"] .chat-workspace { background: #fbfbff; } :root[data-theme="light"] .chat-workspace__header, :root[data-theme="light"] .workspace-tabs { background: #ffffffed; border-color: #e1e4f0; } :root[data-theme="light"] .workspace-tab { border-radius: 9px; } :root[data-theme="light"] .workspace-tab.is-active { color: #4f55bb; background: #eceeff; box-shadow: inset 0 -2px #5d60c9; } :root[data-theme="light"] .nutrition-card { border-radius: 19px; background: linear-gradient(145deg, #fff, #f5f6ff); border-color: #dfe3f3; box-shadow: 0 8px 25px #4e598c12, inset 0 1px #fff; } :root[data-theme="light"] .nutrition-card__eyebrow { font-weight: 600; } :root[data-theme="light"] .nutrition-card__main strong { font-size: 44px; font-weight: 800; letter-spacing: -.06em; } :root[data-theme="light"] .nutrition-progress { background: #dfe2f4; border-radius: 999px; } :root[data-theme="light"] .nutrition-progress span { background: #5d60c9; border-radius: inherit; } :root[data-theme="light"] .nutrition-macros > div { padding: 8px 0 0; border-radius: 0; } :root[data-theme="light"] .workspace-quick-actions button { border: 1px solid #dfe2f3; border-radius: 13px; background: #fff; box-shadow: 0 4px 13px #4e578710; } :root[data-theme="light"] .workspace-quick-actions button:first-child { color: #b95032; border-color: #f1ddd7; background: #fff8f5; } :root[data-theme="light"] .workspace-quick-actions button:last-child { color: #555abc; border-color: #dfe1f7; background: #f1f2ff; } :root[data-theme="light"] .energy-ledger { border-radius: 19px; background: #fff; border-color: #dfe3f0; box-shadow: 0 8px 25px #4e598c0d; } :root[data-theme="light"] .energy-ledger__result { background: #f3f4ff; border-color: #dfe2f3; border-radius: 12px; } :root[data-theme="light"] .energy-ledger__row { border-radius: 9px; } :root[data-theme="light"] .meal-row, :root[data-theme="light"] .workout-card, :root[data-theme="light"] .memory-row, :root[data-theme="light"] .diary-day { background: #fff; border-color: #e0e4f1; border-radius: 15px; box-shadow: 0 4px 14px #4d578a0d; } :root[data-theme="light"] .meal-row time, :root[data-theme="light"] .diary-day__meal time { font-variant-numeric: tabular-nums; color: #727c98; } :root[data-theme="light"] .workspace-scene { border-radius: 16px; border-color: #dfe2f4; background: linear-gradient(125deg, #f0f1ff, #fafaff); box-shadow: inset 0 1px #fff; } :root[data-theme="light"] .workspace-scene .theme-handnote { font-size: 11px; color: #626bb1; } :root[data-theme="light"] .workspace-scene .scene-mascot { width: 90px; } :root[data-theme="light"] .profile-appearance { background: #fff; border-color: #e0e3f2; border-radius: 17px; box-shadow: 0 5px 16px #4c568d0c; } :root[data-theme="light"] .profile-facts { border-radius: 15px; background: #fff; border-color: #e0e3f2; } /* Black neon: precise luminous edges and a quiet diagonal rhythm. */ :root[data-theme="dark"] .web-landing-page { background: radial-gradient(ellipse at 84% 12%, #25203340, transparent 37%), #09090b; } :root[data-theme="dark"] .landing-nav { position: relative; border-bottom-color: #39353f; } :root[data-theme="dark"] .landing-nav::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 85px; height: 2px; background: linear-gradient(90deg, #d7ff3f, #ab95ff); box-shadow: 0 0 10px #d7ff3f30; } :root[data-theme="dark"] .landing-brand__avatar { border: 1px solid #666274; box-shadow: 0 0 0 4px #18161f; } :root[data-theme="dark"] .landing-hero { min-height: 630px; grid-template-columns: 1fr 1.05fr; gap: 38px; background: var(--cream); } :root[data-theme="dark"] .landing-hero::before { background: repeating-linear-gradient(135deg, transparent 0 89px, #a88be707 89px 90px), radial-gradient(ellipse at 83% 70%, #34284345, transparent 44%); opacity: 1; inset: 0 -20px; } :root[data-theme="dark"] .landing-hero h1 { font-family: "Oswald", sans-serif; font-size: clamp(62px, 6.3vw, 87px); font-weight: 650; line-height: 1.12; letter-spacing: -.03em; text-transform: uppercase; } :root[data-theme="dark"] .landing-hero h1 em { color: #dbff4a; text-shadow: 0 0 35px #d7ff3f13; } :root[data-theme="dark"] .landing-hero__prelude { font-family: "Oswald", sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: .14em; color: #c3aff4; } :root[data-theme="dark"] .landing-eyebrow--pill { color: #d7ff3f; background: #17171a; border: 1px solid #41432e; border-radius: 6px; box-shadow: inset 2px 0 #d7ff3f; } :root[data-theme="dark"] .landing-start { border: 1px solid #edffb0; border-radius: 9px; box-shadow: 0 0 24px #d7ff3f24, inset 0 -3px #b5dd155e; } :root[data-theme="dark"] .landing-start small { background: #15151518; border: 1px solid #11111125; } :root[data-theme="dark"] .landing-demo-link__play { background: #151319; color: #d2bdff; border-color: #69567e; box-shadow: 0 0 0 4px #ad91ff08; } :root[data-theme="dark"] .landing-proof li > span { color: #c5b1f6; background: #18151f; border: 1px solid #3b314b; border-radius: 6px; } :root[data-theme="dark"] .landing-identity { padding: 0 0 12px; } :root[data-theme="dark"] .landing-identity::before { content: ""; position: absolute; z-index: -1; inset: 25px -5px 18px; border-radius: 30px 6px 30px 6px; border: 1px solid #3a3344; background: repeating-linear-gradient(130deg, transparent 0 14px, #a884ec05 14px 15px); transform: skewY(-4deg); } :root[data-theme="dark"] .landing-identity::after { content: ""; position: absolute; right: -6px; bottom: 25px; width: 90px; height: 2px; transform: rotate(-45deg); background: linear-gradient(90deg, #aa8eed, #d7ff3f); box-shadow: 0 0 14px #c5b1ff50; } :root[data-theme="dark"] .theme-handnote { font-family: "Oswald", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: #b8a3e7; } :root[data-theme="dark"] .theme-hero-details__note { top: 0; right: 5px; text-align: right; transform: none; font-size: 16px; } :root[data-theme="dark"] .theme-hero-details__arrow { display: none; } :root[data-theme="dark"] .theme-hero-details__petal { width: 120px; height: 9px; border-radius: 0; background: repeating-linear-gradient(115deg, #ab95ff40 0 13px, transparent 13px 21px); transform: rotate(-48deg); } :root[data-theme="dark"] .theme-hero-details__petal--one { left: 0; top: 15%; } :root[data-theme="dark"] .theme-hero-details__petal--two { right: -5px; bottom: 11%; background: repeating-linear-gradient(115deg, #d7ff3f50 0 13px, transparent 13px 21px); } :root[data-theme="dark"] .theme-hero-details__spark { color: #7ed4e5; opacity: .6; } :root[data-theme="dark"] .landing-routine { position: relative; background: #111113; border-color: #33303a; border-radius: 16px; box-shadow: inset 0 1px #b098d810; } :root[data-theme="dark"] .landing-routine::before { content: ""; position: absolute; top: 0; left: 28px; width: 75px; height: 2px; background: #d7ff3f; box-shadow: 0 0 13px #d7ff3f4d; } :root[data-theme="dark"] .landing-routine article { background: linear-gradient(135deg, #19181e, #111113); border-color: #39343f; border-radius: 11px; } :root[data-theme="dark"] .landing-routine__icon { position: relative; color: #d7ff3f; background: #141317; border: 1px solid #494437; border-radius: 10px; } :root[data-theme="dark"] .landing-routine__icon::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; } :root[data-theme="dark"] .landing-routine article:nth-child(2) .landing-routine__icon { color: #ab95ff; border-color: #4a3b65; } :root[data-theme="dark"] .landing-routine article:nth-child(3) .landing-routine__icon { color: #56cce8; border-color: #274650; } :root[data-theme="dark"] .landing-routine__number { font-family: ui-monospace, monospace; color: #a4a0ac; } :root[data-theme="dark"] .feature-ribbon { background: #0e0e10; border-color: #343039; border-radius: 13px; } :root[data-theme="dark"] .feature-ribbon__icon { color: #d7ff3f; border: 1px solid #414231; background: #171719; border-radius: 9px; } :root[data-theme="dark"] .feature-ribbon__item--workout .feature-ribbon__icon { color: #bda3ff; border-color: #453557; } :root[data-theme="dark"] .feature-ribbon__item--history .feature-ribbon__icon { color: #70d3e8; border-color: #27434b; } :root[data-theme="dark"] .feature-ribbon__item--memory .feature-ribbon__icon { color: #bda3ff; border-color: #453557; } :root[data-theme="dark"] .landing-shell h2 { font-family: "Oswald", sans-serif; font-weight: 550; letter-spacing: -.025em; } :root[data-theme="dark"] .landing-case-group, :root[data-theme="dark"] .landing-platform, :root[data-theme="dark"] .landing-pricing__card { border: 1px solid #39323f; background: linear-gradient(135deg, #1d1b22, #121214 72%); border-radius: 14px; box-shadow: inset 0 1px #8c77ba15; } :root[data-theme="dark"] .landing-case-group:nth-child(2) { border-color: #463855; } :root[data-theme="dark"] .landing-case-group__format { color: #c4abff; font-family: ui-monospace, monospace; font-size: 10px; } :root[data-theme="dark"] .landing-platform__status--web { color: #b7a1ed; } :root[data-theme="dark"] .landing-pricing { background: repeating-linear-gradient(135deg, transparent 0 19px, #b999e006 19px 20px), #101013; border-color: #494037; border-radius: 18px; } :root[data-theme="dark"] .landing-final { background: repeating-linear-gradient(135deg, transparent 0 39px, #b799ff0c 39px 40px), radial-gradient(ellipse at 85% 65%, #3b264759, transparent 55%), #111114; border-color: #49404e; border-radius: 18px; } :root[data-theme="dark"] .landing-final::after { content: ""; position: absolute; left: 28px; bottom: 24px; width: 70px; height: 7px; background: repeating-linear-gradient(110deg, #d7ff3f 0 10px, transparent 10px 19px); } :root[data-theme="dark"] .landing-final__orb { border-color: #69537d4d; } :root[data-theme="dark"] .web-chat-page { background: #070708; } :root[data-theme="dark"] .chat-app { border-color: #3a323f; border-radius: 20px; box-shadow: 0 20px 60px #0008, inset 0 0 0 1px #aa8ed00d; } :root[data-theme="dark"] .chat-header, :root[data-theme="dark"] .chat-workspace__header { background: #111114; border-bottom-color: #39303f; } :root[data-theme="dark"] .chat-brand__avatar { border: 1px solid #605267; box-shadow: 0 0 0 4px #aa8bd90b; } :root[data-theme="dark"] .chat-main { background: radial-gradient(ellipse at 50% 45%, #241b2c3d, transparent 63%), #0a0a0c; } :root[data-theme="dark"] .chat-empty__eyebrow { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } :root[data-theme="dark"] .chat-empty h1 { font-family: "Oswald", sans-serif; font-weight: 550; font-size: 37px; letter-spacing: -.01em; } :root[data-theme="dark"] .chat-empty .chat-empty__note { font-family: "Oswald", sans-serif; font-size: 16px; color: #ab92d8; } :root[data-theme="dark"] .chat-suggestions button { border-radius: 8px; background: #121215; color: #d7ff75; border-color: #434a2d; box-shadow: inset 0 1px #caff2210; } :root[data-theme="dark"] .chat-suggestions button:nth-child(2) { color: #c9b5ff; border-color: #4a3b63; } :root[data-theme="dark"] .chat-message__bubble { background: #19171e; border-color: #37303f; box-shadow: none; border-radius: 5px 15px 15px; } :root[data-theme="dark"] .chat-message--user .chat-message__bubble { background: #212126; border: 1px solid #515239; box-shadow: inset -2px 0 #d7ff3f; border-radius: 15px 5px 15px 15px; } :root[data-theme="dark"] .chat-message__time { color: #a2a0ac; } :root[data-theme="dark"] .chat-message--assistant .chat-message__actions { background: #131215; border-color: #453951; } :root[data-theme="dark"] .chat-composer-wrap { background: #111114; border-top-color: #342b3b; } :root[data-theme="dark"] .chat-composer { border-radius: 12px; border-color: #504358; background: #0d0c10; box-shadow: inset 0 1px #c49ced10; } :root[data-theme="dark"] .chat-composer:focus-within { border-color: #a5ba43; box-shadow: 0 0 0 3px #d7ff3f0b; } :root[data-theme="dark"] .chat-send { border-radius: 9px; box-shadow: 0 0 17px #d7ff3f33, inset 0 -2px #8caa3050; } :root[data-theme="dark"] .chat-workspace { background: #101013; } :root[data-theme="dark"] .workspace-tabs { background: #101013; border-bottom-color: #302935; } :root[data-theme="dark"] .workspace-tab { border-radius: 6px; } :root[data-theme="dark"] .workspace-tab.is-active { background: #202024; box-shadow: inset 0 -2px #d7ff3f; } :root[data-theme="dark"] .workspace-eyebrow { font-family: ui-monospace, monospace; letter-spacing: .08em; } :root[data-theme="dark"] .workspace-section-heading h2 { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 26px; letter-spacing: -.01em; } :root[data-theme="dark"] .nutrition-card { border: 1px solid #49404e; border-radius: 15px; background: linear-gradient(140deg, #232028, #141417); box-shadow: inset 0 1px #b899df20; padding: 21px; } :root[data-theme="dark"] .nutrition-card::before { content: ""; position: absolute; top: 0; right: 22px; width: 46px; height: 2px; background: #b396f5; box-shadow: 0 0 12px #b396f545; } :root[data-theme="dark"] .nutrition-card__main strong { font-family: "Oswald", sans-serif; font-weight: 550; font-size: 55px; letter-spacing: -.025em; } :root[data-theme="dark"] .nutrition-progress { height: 8px; background: #333038; border-radius: 3px; } :root[data-theme="dark"] .nutrition-progress > span { background: repeating-linear-gradient(90deg, #d7ff3f 0 18px, #91ac2b 18px 20px); border-radius: 3px; box-shadow: 0 0 17px #d7ff3f40; } :root[data-theme="dark"] .nutrition-macros strong { font-family: ui-monospace, monospace; font-size: 14px; } :root[data-theme="dark"] .nutrition-macros > div { padding-top: 10px; border-top-width: 2px; } :root[data-theme="dark"] .workspace-quick-actions button { border-radius: 10px; border-color: #4b4058; } :root[data-theme="dark"] .workspace-quick-actions button:first-child { box-shadow: 0 0 15px #d7ff3f18, inset 0 -2px #829e2850; } :root[data-theme="dark"] .workspace-quick-actions button:last-child { color: #ceb8ff; background: #241b30; } :root[data-theme="dark"] .energy-ledger { background: #17151b; border-color: #3b3244; border-radius: 15px; } :root[data-theme="dark"] .energy-ledger__result { border-color: #493f4d; background: #201c25; border-radius: 10px; } :root[data-theme="dark"] .energy-ledger__result strong { font-family: "Oswald", sans-serif; font-size: 30px; } :root[data-theme="dark"] .energy-ledger__row { border-color: #363039; border-radius: 7px; } :root[data-theme="dark"] .energy-ledger__row dd { font-family: ui-monospace, monospace; } :root[data-theme="dark"] .meal-row, :root[data-theme="dark"] .workout-card, :root[data-theme="dark"] .memory-row, :root[data-theme="dark"] .diary-day { border-color: #3b3243; background: #18151d; border-radius: 10px; } :root[data-theme="dark"] .meal-row time { color: #b9a6d4; font-family: ui-monospace, monospace; font-size: 10px; } :root[data-theme="dark"] .meal-row b { color: #e0e2d3; font-family: ui-monospace, monospace; } :root[data-theme="dark"] .workspace-scene { border-radius: 11px; border-color: #43354f; background: repeating-linear-gradient(135deg, transparent 0 19px, #b398e609 19px 20px), #19151f; } :root[data-theme="dark"] .workspace-scene strong { color: #e9e3f0; } :root[data-theme="dark"] .workspace-scene .theme-handnote { color: #b7a0d5; font-size: 13px; } :root[data-theme="dark"] .workout-card__header > strong { font-family: "Oswald", sans-serif; font-size: 18px; color: #d7ff3f; } :root[data-theme="dark"] .workout-sets { font-family: ui-monospace, monospace; font-size: 11px; } :root[data-theme="dark"] .profile-appearance { background: #1c1822; border-color: #44334f; border-radius: 12px; } :root[data-theme="dark"] .profile-facts { background: #16131b; border-color: #372d3f; border-radius: 11px; } :root[data-theme="dark"] .profile-facts dd { font-family: ui-monospace, monospace; } /* Detail remains secondary to reading and to touch targets. */ .chat-header__button, .chat-action-button, .workspace-discuss, .workspace-quick-actions button, .chat-suggestions button { transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; } .workspace-quick-actions button:hover, .chat-suggestions button:hover { transform: translateY(-1px); } .scene-mascot, .theme-hero-details, .landing-final__character { user-select: none; } @media (max-width: 1100px) { :root[data-theme="care"] .landing-hero { padding-right: 26px; padding-left: 26px; grid-template-columns: 1.04fr 1fr; } :root[data-theme="care"] .landing-hero h1 { font-size: 49px; } :root[data-theme="care"] .theme-food-photo { width: 230px; right: 0; top: 87px; } :root[data-theme="care"] .theme-food-photo > img { height: 215px; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: 290px; } :root[data-theme="care"] .theme-hero-mascots { left: -20px; bottom: 5px; } :root[data-theme="care"] .theme-hero-details__arrow { right: -15px; } .landing-routine article { flex-direction: column; gap: 14px; } .feature-ribbon { gap: 12px; } .feature-ribbon__item { gap: 8px; } .feature-ribbon__icon { width: 34px; height: 42px; } .feature-ribbon__item strong { font-size: 11px; } .feature-ribbon__item small { font-size: 9px; } .landing-final__character .scene-mascot { width: 135px; } } @media (max-width: 900px) { :root[data-theme="care"] .landing-nav { padding: 19px 24px 15px; } :root[data-theme="care"] .landing-hero { padding: 34px 26px; gap: 14px; } :root[data-theme="care"] .landing-hero h1 { font-size: 42px; } :root[data-theme="care"] .landing-hero__prelude { font-size: 23px; } :root[data-theme="care"] .landing-identity { min-height: 465px; } :root[data-theme="care"] .theme-food-photo { width: 210px; } :root[data-theme="care"] .theme-food-photo > img { height: 190px; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: 260px; } :root[data-theme="care"] .theme-hero-mascots { bottom: 2px; } :root[data-theme="dark"] .landing-hero h1 { font-size: 67px; } :root[data-theme="dark"] .landing-hero { gap: 20px; } .feature-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } :root[data-theme="light"] .feature-ribbon__item:nth-child(3) { border-left: 0; padding-left: 0; } } @media (max-width: 640px) { .landing-nav > .theme-picker .theme-picker__option { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; } .landing-nav__links a { min-height: 44px; } .theme-picker--compact summary { width: 44px; height: 44px; } .theme-picker--compact .theme-picker__option { min-height: 44px; } .chat-header__button { width: 44px; min-width: 44px; min-height: 44px; padding-inline: 0; } .workspace-tab { min-height: 44px; } :root[data-theme="care"] .landing-shell { width: calc(100% - 24px); margin-top: 12px; } :root[data-theme="care"] .landing-nav { padding: 16px 17px 12px; border-radius: 23px 23px 0 0; gap: 16px 10px; } :root[data-theme="care"] .landing-hero { display: flex; min-height: 0; padding: 29px 22px 20px; gap: 12px; border-radius: 0 0 23px 23px; } :root[data-theme="care"] .landing-hero__prelude { font-size: 23px; margin-bottom: 16px; } :root[data-theme="care"] .landing-hero h1 { font-size: clamp(34px, 9.5vw, 52px); margin-top: 18px; } :root[data-theme="care"] .landing-hero__lead { font-size: 13px; line-height: 1.75; margin-top: 18px; } :root[data-theme="care"] .landing-hero__actions { gap: 12px; margin-top: 24px; } :root[data-theme="care"] .landing-start { min-height: 48px; padding: 0 13px; font-size: 11px; border-radius: 15px; } :root[data-theme="care"] .landing-demo-link { font-size: 10px; gap: 7px; } :root[data-theme="care"] .landing-hero__hint { font-size: 8px; } :root[data-theme="care"] .landing-proof { gap: 8px 12px; margin-top: 20px; } :root[data-theme="care"] .landing-proof li { font-size: 8px; } :root[data-theme="care"] .landing-identity { min-height: 540px; width: 100%; } :root[data-theme="care"] .theme-hero-details__note { top: 9px; right: 2px; font-size: 22px; } :root[data-theme="care"] .theme-food-photo { top: 63px; right: 7px; width: 225px; padding: 10px; border-radius: 21px; } :root[data-theme="care"] .theme-food-photo > img { height: 175px; border-radius: 13px; } :root[data-theme="care"] .theme-food-photo figcaption { margin-bottom: 8px; } :root[data-theme="care"] .theme-food-photo figcaption strong { font-size: 12px; } :root[data-theme="care"] .theme-food-photo figcaption small { font-size: 8px; } :root[data-theme="care"] .theme-hero-mascots { left: -18px; bottom: 0; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: 258px; } :root[data-theme="care"] .theme-hero-details__arrow { top: 28px; right: -8px; width: 42px; } :root[data-theme="care"] .landing-routine { margin-top: 14px; padding: 22px 15px 16px; border-radius: 21px; } :root[data-theme="care"] .landing-routine__heading h2 { font-size: 25px; } .landing-routine article { flex-direction: row; padding: 23px 18px; align-items: flex-start; } .landing-routine__icon { width: 45px; height: 45px; } .landing-routine h3 { font-size: 15px; } .landing-routine article p { font-size: 11px; } .feature-ribbon { padding: 16px; gap: 17px 12px; margin-bottom: 55px; border-radius: 20px; } .feature-ribbon__item strong { font-size: 11px; } .feature-ribbon__item small { font-size: 9px; } .feature-ribbon__icon { width: 32px; height: 37px; border-radius: 10px; } .feature-ribbon__icon .ui-icon { width: 20px; height: 20px; } :root[data-theme="care"] .landing-faq details { padding: 0 15px; } .landing-final { padding-bottom: 95px; } .landing-final__character { right: 4px; bottom: 0; } .landing-final__character .scene-mascot, :root[data-theme="light"] .landing-final__character .scene-mascot { width: 112px; } :root[data-theme="light"] .landing-hero { min-height: 0; gap: 38px; padding-top: 35px; } :root[data-theme="light"] .landing-hero h1 { font-size: clamp(38px, 10vw, 57px); } :root[data-theme="light"] .landing-hero__prelude { max-width: 250px; font-size: 8px; line-height: 1.8; margin-bottom: 20px; } :root[data-theme="light"] .landing-identity { padding: 25px 0 0; } :root[data-theme="light"] .landing-identity::before { inset: 38px 4px 0; } :root[data-theme="light"] .theme-hero-details__note { font-size: 12px; right: 7px; top: -4px; } :root[data-theme="light"] .theme-hero-details__arrow { right: -8px; top: 9px; } :root[data-theme="dark"] .landing-hero { min-height: 0; gap: 33px; padding-top: 35px; } :root[data-theme="dark"] .landing-hero h1 { font-size: clamp(53px, 14vw, 78px); } :root[data-theme="dark"] .landing-hero__prelude { font-size: 14px; } :root[data-theme="dark"] .landing-identity { padding-top: 25px; } :root[data-theme="dark"] .landing-identity::before { inset: 24px 0 7px; border-radius: 20px 5px; } :root[data-theme="dark"] .theme-hero-details__note { font-size: 13px; top: -5px; } :root[data-theme="dark"] .landing-shell h2 { font-size: 34px; } :root[data-theme="dark"] .landing-routine__heading h2 { font-size: 27px; } :root[data-theme="care"] .chat-app, :root[data-theme="light"] .chat-app, :root[data-theme="dark"] .chat-app { border: 0; border-radius: 0; margin: 0; width: 100%; } .chat-empty > .scene-mascot, :root[data-theme="care"] .chat-empty > .scene-mascot, :root[data-theme="light"] .chat-empty > .scene-mascot { width: 160px; margin-bottom: 15px; } .chat-empty h1 { font-size: 25px; } :root[data-theme="dark"] .chat-empty h1 { font-size: 33px; } .chat-empty > .chat-empty__note { font-size: 24px; } .chat-suggestions button { font-size: 11px; min-height: 42px; } .chat-workspace__header { min-height: 71px; } .workspace-section-heading--illustrated { min-height: 85px; margin-top: 1px; padding-right: 96px; } .workspace-section-heading--illustrated > .scene-mascot { width: 96px; } .workspace-section-heading h2 { font-size: 21px; } .workspace-scene { padding-left: 13px; } .workspace-scene strong { font-size: 12px; } .workspace-scene .scene-mascot { width: 92px; } .workspace-scene .theme-handnote { font-size: 22px; } :root[data-theme="care"] .nutrition-card { padding: 21px 17px 17px; } :root[data-theme="care"] .nutrition-card__main strong { font-size: 36px; } :root[data-theme="care"] .nutrition-progress { width: 67px; height: 67px; right: 14px; top: 39px; } :root[data-theme="care"] .nutrition-macros { gap: 7px; } :root[data-theme="care"] .nutrition-macros strong { font-size: 13px; } .workspace-quick-actions button { font-size: 12px; } } @media (max-width: 370px) { .chat-header { padding-inline: 8px; gap: 4px; } .chat-header__actions { gap: 2px; } .chat-brand { gap: 6px; } .chat-brand__avatar { width: 34px; height: 34px; } .chat-brand__name { font-size: 16px; } :root[data-theme="care"] .landing-hero { padding-left: 17px; padding-right: 17px; } :root[data-theme="care"] .landing-hero h1 { font-size: 34px; } :root[data-theme="care"] .landing-proof { gap: 8px; } :root[data-theme="care"] .theme-food-photo { width: 199px; right: 1px; } :root[data-theme="care"] .theme-food-photo > img { height: 158px; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: 240px; } :root[data-theme="care"] .landing-identity { min-height: 505px; } .feature-ribbon { gap: 16px 9px; padding: 14px 10px; } .feature-ribbon__item { gap: 6px; } .feature-ribbon__item small { font-size: 8px; } .workspace-section-heading h2 { font-size: 19px; } :root[data-theme="care"] .nutrition-card__main strong { font-size: 32px; } :root[data-theme="care"] .nutrition-macros span { font-size: 9px; } .workspace-scene strong { font-size: 11px; } .workspace-scene .theme-handnote { font-size: 20px; } } @media (max-height: 680px) { .chat-empty > .scene-mascot, :root[data-theme="care"] .chat-empty > .scene-mascot, :root[data-theme="light"] .chat-empty > .scene-mascot { width: 115px; margin-bottom: 10px; } .chat-empty > .chat-empty__note { margin-bottom: 14px; } } @media (prefers-reduced-motion: reduce) { .chat-header__button, .chat-action-button, .workspace-discuss, .workspace-quick-actions button, .chat-suggestions button { transition: none; } } /* Landing illustrations are real bitmap assets, composed as a lightweight sprite. */ .landing-art-icon { display: block; width: 78px; height: 78px; min-width: 78px; flex: 0 0 78px; } .landing-art-icon--camera { --art-position: -18px -17px; } .landing-art-icon--save { --art-position: -114px -17px; } .landing-art-icon--results { --art-position: -202px -17px; } .landing-art-icon--food { --art-position: -3px -103px; } .landing-art-icon--workout { --art-position: -82px -103px; } .landing-art-icon--history { --art-position: -150px -103px; } .landing-art-icon--memory { --art-position: -218px -103px; } :root[data-theme="care"] { --landing-art-image: url("/media/themes/landing-icons-care.webp"); --landing-art-frame: #f0d4e8; --landing-art-shadow: #bc659023; } :root[data-theme="light"] { --landing-art-image: url("/media/themes/landing-icons-light-warm.webp"); --landing-art-frame: #e4d9ee; --landing-art-shadow: #6850831e; } :root[data-theme="dark"] { --landing-art-image: url("/media/themes/landing-icons-dark.webp"); --landing-art-frame: #4c4158; --landing-art-shadow: #0008; } :root[data-theme] .landing-routine article .landing-art-icon, :root[data-theme] .feature-ribbon__item .landing-art-icon { border: 1px solid var(--landing-art-frame); border-radius: 19px; background-color: transparent; background-image: var(--landing-art-image); background-position: var(--art-position); background-repeat: no-repeat; background-size: 294px 196px; box-shadow: 0 8px 20px var(--landing-art-shadow); } :root[data-theme="care"] .landing-art-icon, :root[data-theme="light"] .landing-art-icon { mix-blend-mode: multiply; } :root[data-theme="dark"] .landing-art-icon { mix-blend-mode: screen; } :root[data-theme="dark"] .landing-routine__icon::after { content: none; } .landing-routine article { min-height: 164px; align-items: center; } .landing-routine article > div { padding: 0; } .landing-routine h3 { margin: 0 0 8px; font-size: 17px; } .landing-routine article p { font-size: 12px; line-height: 1.65; } .feature-ribbon { gap: 12px; padding: 12px; } .feature-ribbon__item { min-height: 104px; padding: 9px 13px; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); } .feature-ribbon__item strong { font-size: 13px; } .feature-ribbon__item small { font-size: 10px; } :root[data-theme="care"] .feature-ribbon__item { background: linear-gradient(145deg, #fffefd, #fff3fa); border-color: #f0ddea; } :root[data-theme="light"] .feature-ribbon__item { background: linear-gradient(145deg, #fff, #f6f7ff); border-color: #e1e4f3; } :root[data-theme="dark"] .landing-routine article { border-color: #48404f; background: radial-gradient(circle at 13% 38%, #3a284c69, transparent 38%), linear-gradient(145deg, #1b1921, #111113); box-shadow: inset 0 1px #ffffff12, 0 12px 25px #0003; } :root[data-theme="dark"] .feature-ribbon__item { background: linear-gradient(145deg, #1e1b24, #111114); border-color: #403847; box-shadow: inset 0 1px #ffffff10; } :root[data-theme="dark"] .feature-ribbon__item strong { color: #f4f0f8; } /* The pink hero is a broad editorial composition, without the detached vase. */ :root[data-theme="care"] .landing-hero::before { background: radial-gradient(ellipse at 81% 40%, #f6daf3b8, transparent 48%), radial-gradient(ellipse at 18% 85%, #ffe6df90, transparent 42%), linear-gradient(118deg, #fffefde0, #fff7f9e8 62%, #f9f0ffe9); } :root[data-theme="care"] .landing-identity::before { content: ""; position: absolute; inset: 7% 1% 2% 0; border-radius: 49% 51% 46% 54% / 50% 43% 57% 50%; background: radial-gradient(circle at 30% 70%, #ffdddca6, transparent 45%), radial-gradient(circle at 73% 35%, #e9cff8a8, transparent 48%); transform: rotate(-8deg); } :root[data-theme="care"] .landing-routine { margin-top: 24px; } :root[data-theme="care"] .landing-routine article { background: linear-gradient(145deg, #fff, #fff8fc); box-shadow: 0 11px 28px #ac629715, inset 0 1px white; } :root[data-theme="care"] .theme-hero-details__petal--one { left: 16%; top: 5%; opacity: .55; } :root[data-theme="care"] .theme-hero-details__petal--two { right: 2%; bottom: 0; opacity: .55; } @media (min-width: 1101px) { .landing-shell { width: min(1600px, calc(100% - 88px)); } :root[data-theme="light"] .landing-hero, :root[data-theme="dark"] .landing-hero { padding-inline: 48px; } :root[data-theme="light"] .landing-identity__mascot, :root[data-theme="dark"] .landing-identity__mascot { width: min(100%, 600px); } .landing-routine h3 { font-size: 19px; } .landing-routine article p { font-size: 13px; } .feature-ribbon__item strong { font-size: 14px; } .feature-ribbon__item small { font-size: 11px; } :root[data-theme="care"] .landing-nav { min-height: 92px; padding-inline: 48px; } :root[data-theme="care"] .landing-hero { min-height: 565px; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 24px; padding: 40px 52px 42px 62px; } :root[data-theme="care"] .landing-hero h1 { font-size: clamp(55px, 4.25vw, 78px); max-width: 720px; } :root[data-theme="care"] .landing-hero__lead { max-width: 560px; font-size: 16px; line-height: 1.7; } :root[data-theme="care"] .landing-hero__prelude { font-size: 31px; } :root[data-theme="care"] .landing-identity { min-height: 480px; } :root[data-theme="care"] .theme-food-photo { top: 68px; right: -3px; width: min(50%, 345px); padding: 14px; transform: rotate(5deg); } :root[data-theme="care"] .theme-food-photo > img { height: 210px; } :root[data-theme="care"] .theme-food-photo figcaption strong { font-size: 17px; } :root[data-theme="care"] .theme-food-photo figcaption small { font-size: 11px; } :root[data-theme="care"] .theme-hero-mascots { left: -15px; bottom: -10px; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: min(21vw, 360px); } :root[data-theme="care"] .theme-hero-details__note { top: -30px; right: 38px; font-size: 29px; } :root[data-theme="care"] .theme-hero-details__arrow { right: -4px; top: 29px; } :root[data-theme="care"] .landing-routine { padding: 32px 32px 28px; } :root[data-theme="care"] .landing-routine__heading h2 { font-size: 31px; } } @media (max-width: 900px) { .landing-routine article { min-height: 0; } .feature-ribbon__item { min-height: 98px; } } @media (max-width: 640px) { :root[data-theme="care"] .landing-identity { min-height: 430px; } :root[data-theme="care"] .theme-food-photo { top: 55px; right: 0; width: min(58%, 190px); } :root[data-theme="care"] .theme-food-photo > img { height: 145px; } :root[data-theme="care"] .theme-hero-mascots { left: -23px; bottom: -7px; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: min(68vw, 248px); } .landing-routine article { gap: 10px; padding: 17px 14px; } .landing-routine h3 { font-size: 15px; } .landing-routine article p { font-size: 11px; } .feature-ribbon__item { min-height: 148px; padding: 10px; flex-direction: column; align-items: flex-start; gap: 0; } .feature-ribbon__item .landing-art-icon { transform: scale(.82); transform-origin: top left; margin-bottom: -10px; } .feature-ribbon__item strong { font-size: 12px; } .feature-ribbon__item small { font-size: 9px; } } @media (max-width: 360px) { :root[data-theme="care"] .landing-identity { min-height: 395px; } :root[data-theme="care"] .theme-food-photo { width: 165px; } :root[data-theme="care"] .theme-food-photo > img { height: 130px; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: 210px; } .landing-routine article { flex-direction: column; align-items: flex-start; } .landing-routine article > div { width: 100%; } .feature-ribbon { grid-template-columns: 1fr; } .feature-ribbon__item { min-height: 94px; flex-direction: row; align-items: center; gap: 6px; } .feature-ribbon__item .landing-art-icon { transform: scale(.78); transform-origin: center; margin: -8px -6px -8px -8px; } } /* The two daylight directions use layered, purposeful details from the concept boards. */ .theme-hero-details__aside, .theme-photo-steps, .theme-hero-details__petal--three, .theme-hero-details__petal--four { display: none; } .theme-photo-steps { gap: 6px; margin-top: 12px; } .theme-photo-steps span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 9px; font-weight: 700; white-space: nowrap; } .theme-photo-steps span + span::before { content: "ยท"; margin-right: 7px; color: var(--accent); font-size: 14px; line-height: 0; } :root[data-theme="care"] .theme-photo-steps, :root[data-theme="light"] .theme-photo-steps { display: flex; } :root[data-theme="care"] .theme-hero-details__aside, :root[data-theme="light"] .theme-hero-details__aside { display: block; position: absolute; right: 14px; bottom: 1%; max-width: 205px; margin: 0; text-align: right; transform: rotate(-6deg); } :root[data-theme="care"] .theme-hero-details__aside { color: #c84889; font-size: 27px; } :root[data-theme="care"] .theme-hero-details__petal--three, :root[data-theme="care"] .theme-hero-details__petal--four, :root[data-theme="light"] .theme-hero-details__petal--three, :root[data-theme="light"] .theme-hero-details__petal--four { display: block; } :root[data-theme="care"] .theme-hero-details__petal--three { top: 10%; left: 35%; width: 38px; height: 56px; transform: rotate(38deg); background: linear-gradient(140deg, #f583a460, #ffd8e647); } :root[data-theme="care"] .theme-hero-details__petal--four { right: 28%; bottom: 7%; width: 32px; height: 49px; transform: rotate(-23deg); background: linear-gradient(140deg, #d8a9f57a, #fff2f2); } :root[data-theme="care"] .landing-hero::after { content: ""; position: absolute; z-index: -1; inset: 3% 1%; pointer-events: none; background-image: radial-gradient(#dc83b632 1px, transparent 1px); background-size: 19px 19px; mask-image: radial-gradient(ellipse at 78% 43%, #000 4%, transparent 57%); } :root[data-theme="care"] .landing-proof li { padding: 5px 9px 5px 5px; border: 1px solid #f0d9e8; border-radius: 999px; background: #fffafdd9; box-shadow: 0 4px 14px #bb74a00c; } :root[data-theme="care"] .landing-routine__heading > p { font-family: "Caveat", cursive; color: #aa4a98; font-size: 24px; transform: rotate(-3deg); } :root[data-theme="care"] .feature-ribbon__item { position: relative; overflow: hidden; } :root[data-theme="care"] .feature-ribbon__item::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; background: linear-gradient(90deg, #f58b74, #d77bc3, transparent); opacity: .72; } /* Universal neutral: warm violet and coral detail on calm, readable surfaces. */ :root[data-theme="light"] .web-landing-page { background: radial-gradient(ellipse at 86% 11%, #f4e7fa9c, transparent 33%), radial-gradient(ellipse at 5% 47%, #fff0e982, transparent 36%), #faf9fc; } :root[data-theme="light"] .landing-shell .theme-handnote { font-family: "Caveat", cursive; font-size: 27px; font-weight: 500; line-height: 1.04; color: #7046b0; } :root[data-theme="light"] .landing-hero__prelude { text-transform: none; letter-spacing: 0; font-size: 29px; margin-bottom: 19px; } :root[data-theme="light"] .landing-nav { border-bottom-color: #e8e0ef; } :root[data-theme="light"] .landing-hero { min-height: 650px; gap: 26px; } :root[data-theme="light"] .landing-hero::before { background: radial-gradient(ellipse at 82% 47%, #f0e3fb, transparent 46%), radial-gradient(ellipse at 58% 84%, #fff1e9, transparent 43%); } :root[data-theme="light"] .landing-hero h1 em { background: linear-gradient(105deg, #ef7045, #d95534); background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="light"] .landing-eyebrow--pill { color: #6542a9; border-color: #e7d9f3; background: #f4ebfb; } :root[data-theme="light"] .landing-start { background: linear-gradient(115deg, #37234f, #6845ad); box-shadow: 0 10px 24px #59407824, inset 0 1px #ffffff45; } :root[data-theme="light"] .landing-demo-link__play { border-color: #d8c9e9; color: #6845b3; } :root[data-theme="light"] .landing-proof li { padding: 5px 9px 5px 5px; border: 1px solid #e9e0f1; border-radius: 999px; background: #fffdfef0; box-shadow: 0 5px 16px #6651880a; } :root[data-theme="light"] .landing-proof li > span { color: #e86b42; background: #fff1eb; border-color: #f6ded4; } :root[data-theme="light"] .landing-identity { min-height: 540px; justify-content: flex-end; align-items: flex-start; padding: 20px 15px 0; } :root[data-theme="light"] .landing-identity::before { inset: 41px 0 24px; border-color: #eadff1; border-radius: 38px; background: radial-gradient(ellipse at 70% 29%, #f2e4fb, transparent 42%), radial-gradient(ellipse at 23% 79%, #fff0e6, transparent 44%), #fffdfd; box-shadow: 0 20px 55px #65418518, inset 0 1px #fff; } :root[data-theme="light"] .landing-identity__mascot { width: min(56%, 440px); margin: 0 0 8px 4px; } :root[data-theme="light"] .theme-food-photo { display: flex; flex-direction: column; position: absolute; z-index: 1; top: 98px; right: 15px; width: min(43%, 315px); margin: 0; padding: 13px; border: 1px solid #eadfed; border-radius: 24px; background: #fff; box-shadow: 0 18px 45px #593b801f, 0 0 0 7px #ffffff8c; transform: rotate(5deg); } :root[data-theme="light"] .theme-food-photo > img { height: 215px; border-radius: 16px; } :root[data-theme="light"] .theme-food-photo figcaption strong { color: #2c233d; font-size: 16px; } :root[data-theme="light"] .theme-food-photo__icon { color: #6f4cba; background: #f1e9fc; } :root[data-theme="light"] .theme-photo-steps span { border-color: #e9e0f0; color: #5c5270; background: #faf6fe; } :root[data-theme="light"] .theme-photo-steps span:last-child { color: #3d8b64; background: #f1fbf5; border-color: #dceee3; } :root[data-theme="light"] .theme-hero-details__note { top: -18px; right: 23px; max-width: 220px; font-family: "Caveat", cursive; font-size: 27px; color: #7048b6; transform: rotate(5deg); } :root[data-theme="light"] .theme-hero-details__arrow { display: block; top: 51px; right: -4px; width: 48px; color: #8b5ac5; transform: rotate(-19deg); } :root[data-theme="light"] .theme-hero-details__aside { color: #b95c43; font-size: 24px; } :root[data-theme="light"] .theme-hero-details__petal--one { display: block; left: 7%; top: 7%; width: 75px; height: 110px; transform: rotate(-28deg); background: linear-gradient(125deg, #ffd9c36b, #fff3ec1a); } :root[data-theme="light"] .theme-hero-details__petal--two { display: block; right: 0; bottom: 9%; width: 98px; height: 145px; transform: rotate(32deg); background: linear-gradient(145deg, #dfc6fa79, #f8eefa22); } :root[data-theme="light"] .theme-hero-details__petal--three { top: 24%; left: 41%; width: 31px; height: 45px; transform: rotate(36deg); background: #f3d9fa9c; } :root[data-theme="light"] .theme-hero-details__petal--four { right: 25%; bottom: 4%; width: 27px; height: 41px; transform: rotate(-27deg); background: #ffe1d37a; } :root[data-theme="light"] .theme-hero-details__spark--one { color: #b67dd2; } :root[data-theme="light"] .theme-hero-details__spark--two { color: #e9986f; } :root[data-theme="light"] .landing-routine { border-color: #e9e0f0; background: #fffefd; box-shadow: 0 13px 38px #5c418214; } :root[data-theme="light"] .landing-routine article { border-color: #ece2f2; background: linear-gradient(145deg, #fff, #fdf9ff); } :root[data-theme="light"] .landing-routine__heading > p { font-family: "Caveat", cursive; color: #7048b6; font-size: 24px; transform: rotate(-3deg); } :root[data-theme="light"] .landing-routine__number { color: #d45f3c; } :root[data-theme="light"] .feature-ribbon { border-color: #e9e0ef; background: #fffdfd; } :root[data-theme="light"] .feature-ribbon__item { position: relative; overflow: hidden; border-color: #e9e0ee; background: linear-gradient(145deg, #fff, #fbf8ff); } :root[data-theme="light"] .feature-ribbon__item::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; background: linear-gradient(90deg, #f3966b, #9c70c8, transparent); opacity: .75; } :root[data-theme="light"] .landing-case-group { border-color: #e8e0ec; background: linear-gradient(145deg, #fff, #fdfaff); } :root[data-theme="light"] .landing-pricing { border-color: #e7dcf0; background: radial-gradient(ellipse at 85% 20%, #f1e1fa, transparent 43%), linear-gradient(135deg, #fffdfd, #faf5fe); } :root[data-theme="light"] .landing-final { border-color: #e7ddee; background: radial-gradient(ellipse at 80% 10%, #f2dffa, transparent 50%), linear-gradient(135deg, #fff, #fff2ea); } :root[data-theme="light"] .web-chat-page { background: radial-gradient(ellipse at 8% 10%, #f2e6fa, transparent 42%), radial-gradient(ellipse at 96% 95%, #fff0e6, transparent 40%), #faf9fc; } :root[data-theme="light"] .chat-app { border-color: #e3d9ec; box-shadow: 0 20px 55px #50366b19; } :root[data-theme="light"] .chat-main { background: radial-gradient(ellipse at 76% 92%, #f5e9fb, transparent 42%), #fffdfd; } :root[data-theme="light"] .chat-header, :root[data-theme="light"] .chat-composer-wrap, :root[data-theme="light"] .chat-workspace__header, :root[data-theme="light"] .workspace-tabs { border-color: #e9e0ed; background: #fffefd; } :root[data-theme="light"] .chat-message--user .chat-message__bubble { color: #463264; background: #f0e8fb; border-color: #dfd0f0; } :root[data-theme="light"] .chat-message--assistant .chat-message__actions { background: #fffaf6; border-color: #eedfd8; } :root[data-theme="light"] .chat-action-button--primary, :root[data-theme="light"] .chat-send { background: #6845b3; border-color: #6845b3; box-shadow: 0 7px 18px #6944ab2b; } :root[data-theme="light"] .chat-tool-trace__item { color: #6845a8; border-color: #e8dff3; background: #f6effd; } :root[data-theme="light"] .chat-agent-activity { color: #44385c; border-color: #e5d9ef; background: #f7f0fc; } :root[data-theme="light"] .chat-agent-activity__orb { color: #7149b8; background: #eee2fb; } :root[data-theme="light"] .chat-agent-activity__orb i { background: #7149b8; } :root[data-theme="light"] .chat-composer:focus-within { border-color: #ac86d5; box-shadow: 0 0 0 4px #f0e5fa, 0 5px 18px #65448418; } :root[data-theme="light"] .chat-workspace { background: #fdfafc; } :root[data-theme="light"] .workspace-tab.is-active { color: #6643ad; background: #f0e7fb; box-shadow: inset 0 -2px #6845b3; } :root[data-theme="light"] .nutrition-card { border-color: #e7dced; background: linear-gradient(145deg, #fff, #fcf8ff); box-shadow: 0 8px 25px #5d418312; } :root[data-theme="light"] .nutrition-card--with-goal .nutrition-card__eyebrow { padding-right: 84px; } :root[data-theme="light"] .nutrition-card--with-goal .nutrition-card__main { padding-right: 80px; } :root[data-theme="light"] .nutrition-card__main strong { color: #2d233e; } :root[data-theme="light"] .nutrition-progress { position: absolute; top: 37px; right: 16px; display: grid; place-items: center; width: 72px; height: 72px; margin: 0; border-radius: 50%; background: conic-gradient(from -90deg, #f08256, #704cb5 var(--nutrition-progress), #eee4f5 var(--nutrition-progress)); box-shadow: 0 5px 16px #754e9c1c; } :root[data-theme="light"] .nutrition-progress::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; } :root[data-theme="light"] .nutrition-progress > span { display: none; } :root[data-theme="light"] .nutrition-progress__value { position: relative; display: block; color: #352546; font-size: 15px; font-weight: 800; } :root[data-theme="light"] .nutrition-macros { gap: 9px; margin-top: 22px; } :root[data-theme="light"] .nutrition-macros > div { padding: 9px 8px 7px; border: 1px solid #eee1ee; border-top: 2px solid var(--macro-protein); border-radius: 10px; background: #fffafd; } :root[data-theme="light"] .nutrition-macros > div:nth-child(2) { border-top-color: var(--macro-fat); } :root[data-theme="light"] .nutrition-macros > div:nth-child(3) { border-top-color: var(--macro-carbs); } :root[data-theme="light"] .workspace-quick-actions button:first-child { color: #fff; border-color: #352348; background: #352348; } :root[data-theme="light"] .workspace-quick-actions button:last-child { color: #6845b3; border-color: #e2d3f0; background: #f2eafb; } :root[data-theme="light"] .energy-ledger__result { border-color: #e9dff1; background: #f7f0fc; } :root[data-theme="light"] .workspace-scene { border-color: #e6dbee; background: linear-gradient(125deg, #f3e8fb, #fff4ed); } :root[data-theme="light"] .profile-appearance, :root[data-theme="light"] .profile-facts { border-color: #e5ddeb; background: #fffdfd; } @media (min-width: 1101px) { :root[data-theme="light"] .landing-identity__mascot { width: min(56%, 440px); } :root[data-theme="light"] .landing-hero h1 { font-size: clamp(53px, 4.5vw, 72px); } :root[data-theme="light"] .landing-hero { min-height: 590px; padding-top: 45px; padding-bottom: 45px; } :root[data-theme="light"] .landing-identity { min-height: 480px; } :root[data-theme="light"] .theme-food-photo { top: 67px; } :root[data-theme="light"] .theme-food-photo > img { height: 188px; } } @media (max-width: 640px) { :root[data-theme="care"] .theme-hero-details__aside, :root[data-theme="light"] .theme-hero-details__aside { display: none; } :root[data-theme="care"] .theme-photo-steps, :root[data-theme="light"] .theme-photo-steps { display: none; } :root[data-theme="light"] .landing-hero { min-height: 0; } :root[data-theme="light"] .landing-identity { min-height: 430px; width: 100%; padding: 0; } :root[data-theme="light"] .landing-identity__mascot { position: absolute; left: 0; bottom: 0; width: min(68vw, 245px); margin: 0; } :root[data-theme="light"] .theme-food-photo { top: 58px; right: 0; width: min(51%, 175px); padding: 10px; } :root[data-theme="light"] .theme-food-photo > img { height: 120px; } :root[data-theme="light"] .theme-food-photo figcaption strong { font-size: 12px; } :root[data-theme="light"] .theme-food-photo figcaption small { font-size: 8px; } :root[data-theme="light"] .theme-hero-details__note { top: 0; right: 0; font-size: 22px; } :root[data-theme="care"] .theme-hero-details__note { top: -14px; } :root[data-theme="light"] .theme-hero-details__note { top: -19px; } :root[data-theme="light"] .theme-hero-details__arrow { top: 32px; right: -5px; } :root[data-theme="care"] .landing-routine__heading > p, :root[data-theme="light"] .landing-routine__heading > p { display: none; } } @media (max-width: 360px) { :root[data-theme="light"] .landing-identity { min-height: 395px; } :root[data-theme="light"] .landing-identity__mascot { width: 205px; } :root[data-theme="light"] .theme-food-photo { width: 150px; } :root[data-theme="light"] .theme-food-photo > img { height: 108px; } } /* Real app screens sit beside the landing story on wide screens. */ .chat-tool-trace { gap: 7px; margin-top: 9px; } .chat-tool-trace__item { min-height: 29px; padding: 6px 10px; border-radius: 10px; font-size: 11px; box-shadow: 0 4px 12px #2720380c; } .chat-tool-trace__item i { width: 7px; height: 7px; } .landing-hero__phones { display: flex; min-width: 0; flex-direction: column; align-items: center; align-self: center; position: relative; z-index: 2; } .landing-hero__phones-label { display: flex; width: 100%; justify-content: space-between; gap: 8px; margin: 0 0 12px; color: var(--ink); font-size: 14px; font-weight: 800; } .landing-hero__phones-label span { color: var(--ink-soft); font-size: 10px; font-weight: 650; } .landing-hero__phones-swipe { display: none; } .landing-hero__phones-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .landing-phone { width: min(100%, 245px); min-width: 0; justify-self: center; margin: 0; padding: 7px 7px 0; border: 2px solid #30263d; border-radius: 29px; background: #211a2a; box-shadow: 0 18px 38px #3b244226, inset 0 1px #ffffff38; } .landing-phone__screen { overflow: hidden; aspect-ratio: 390 / 844; border-radius: 21px; background: var(--paper); } .landing-phone__screen img { display: none; width: 100%; height: 100%; object-fit: cover; } :root[data-theme="care"] .landing-phone__screen img[data-preview-theme="care"], :root[data-theme="light"] .landing-phone__screen img[data-preview-theme="light"], :root[data-theme="dark"] .landing-phone__screen img[data-preview-theme="dark"] { display: block; } .landing-phone figcaption { padding: 9px 1px 10px; color: #fff; font-size: 10px; font-weight: 700; text-align: center; } .landing-hero__phones-note { max-width: 410px; margin: 11px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; text-align: center; } :root[data-theme="care"] .landing-phone { border-color: #6b4168; background: #3f2848; box-shadow: 0 18px 38px #9c5b8727, inset 0 1px #fff6; } :root[data-theme="light"] .landing-phone { border-color: #574468; background: #342743; box-shadow: 0 18px 38px #62447724, inset 0 1px #fff6; } :root[data-theme="dark"] .landing-phone { border-color: #62596d; background: #111114; box-shadow: 0 18px 38px #0008, 0 0 0 1px #c6a5ff19; } :root[data-theme="dark"] .landing-hero__phones-label { color: #f4f0f8; } :root[data-theme="dark"] .landing-hero__phones-label span { color: #c9b6e1; } @media (min-width: 1101px) { :root[data-theme="care"] .landing-hero, :root[data-theme="light"] .landing-hero, :root[data-theme="dark"] .landing-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.3fr); gap: 12px; } :root[data-theme="care"] .landing-hero h1 { font-size: clamp(50px, 4vw, 64px); } :root[data-theme="light"] .landing-hero h1 { font-size: clamp(50px, 4vw, 64px); } :root[data-theme="dark"] .landing-hero h1 { font-size: clamp(58px, 4.5vw, 70px); } :root[data-theme="care"] .landing-identity, :root[data-theme="light"] .landing-identity, :root[data-theme="dark"] .landing-identity { min-height: 520px; } :root[data-theme="care"] .theme-food-photo { top: 74px; right: -8px; width: min(77%, 270px); padding: 10px; } :root[data-theme="care"] .theme-food-photo > img { height: 152px; } :root[data-theme="care"] .theme-food-photo figcaption strong { font-size: 13px; } :root[data-theme="care"] .theme-food-photo figcaption small { font-size: 8px; } :root[data-theme="care"] .theme-hero-mascots { left: -13px; bottom: 4px; } :root[data-theme="care"] .theme-hero-mascots .scene-mascot { width: min(17vw, 215px); } :root[data-theme="care"] .theme-hero-details__note { top: -8px; right: 2px; font-size: 22px; } :root[data-theme="care"] .theme-hero-details__aside { right: 3px; bottom: 8px; font-size: 19px; } :root[data-theme="light"] .landing-identity__mascot { width: min(75%, 240px); margin-left: -8px; } :root[data-theme="light"] .theme-food-photo { top: 74px; right: -8px; width: min(77%, 270px); padding: 10px; } :root[data-theme="light"] .theme-food-photo > img { height: 152px; } :root[data-theme="light"] .theme-food-photo figcaption strong { font-size: 13px; } :root[data-theme="light"] .theme-food-photo figcaption small { font-size: 8px; } :root[data-theme="light"] .theme-hero-details__note { top: -8px; right: 2px; font-size: 22px; } :root[data-theme="light"] .theme-hero-details__aside { display: none; } :root[data-theme="dark"] .landing-identity__mascot { width: min(100%, 340px); } } @media (min-width: 641px) and (max-width: 1100px) { .landing-hero__phones { grid-column: 1 / -1; width: min(100%, 530px); margin: 20px auto 0; } :root[data-theme="care"] .theme-photo-steps, :root[data-theme="light"] .theme-photo-steps { display: none; } :root[data-theme="light"] .theme-food-photo { width: min(55%, 230px); } :root[data-theme="light"] .theme-food-photo > img { height: 180px; } } @media (max-width: 640px) { .landing-hero__phones { width: 100%; align-self: stretch; margin: 0; } .landing-hero__phones-grid { display: flex; overflow-x: auto; gap: 11px; padding: 0 3px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; } .landing-hero__phones-grid::-webkit-scrollbar { display: none; } .landing-phone { flex: 0 0 205px; scroll-snap-align: start; } .landing-hero__phones-label { font-size: 13px; } .landing-hero__phones-swipe { display: block; align-self: flex-end; margin: -8px 0 9px; color: var(--accent); font-size: 10px; font-weight: 700; } .landing-hero__phones-note { font-size: 9px; } } /* The three atmospheres share the same content and dimensions. Decoration lives around solid reading surfaces, including the real product previews. */ :root[data-theme="care"] .web-landing-page { background: radial-gradient(ellipse 520px 410px at 2% 6%, #ffdce9 0, transparent 83%), radial-gradient(ellipse 510px 460px at 98% 15%, #f1dcfb 0, transparent 82%), radial-gradient(ellipse 660px 420px at 8% 57%, #ffece7 0, transparent 83%), radial-gradient(ellipse 600px 420px at 95% 82%, #f6e9fd 0, transparent 84%), #fff8fa; } :root[data-theme="care"] .landing-hero { background: linear-gradient(114deg, #fffefd 0%, #fff9fb 52%, #fff2f9 76%, #f8edff 100%); } :root[data-theme="care"] .landing-hero::before { background: radial-gradient(ellipse at 84% 72%, #eed2fa8c, transparent 46%), radial-gradient(ellipse at 46% 30%, #ffe2e978, transparent 43%); } :root[data-theme="care"] .landing-routine { background: linear-gradient(125deg, #ffffffed, #fff7fbeb); box-shadow: 0 18px 40px #bd769d16, inset 0 1px #fff; } :root[data-theme="care"] .feature-ribbon { background: linear-gradient(110deg, #fffefd, #fff4fa 68%, #f8f0ff); } :root[data-theme="care"] .web-chat-page { background: radial-gradient(ellipse 430px 580px at -8% 10%, #ffdde9, transparent), radial-gradient(ellipse 490px 510px at 108% 90%, #e9d7f8, transparent), #fff8fa; } :root[data-theme="care"] .chat-main { background: radial-gradient(ellipse at 88% 6%, #f6e8ff, transparent 46%), radial-gradient(ellipse at 10% 94%, #ffe9ef, transparent 48%), #fffafd; } :root[data-theme="light"] .web-landing-page { background: radial-gradient(ellipse 620px 430px at 4% 7%, #fff0e9 0, transparent 80%), radial-gradient(ellipse 670px 500px at 98% 18%, #eee5f8 0, transparent 82%), radial-gradient(ellipse 660px 500px at 2% 66%, #f1ebfb 0, transparent 84%), #faf9fc; } :root[data-theme="light"] .landing-hero::before { background: radial-gradient(circle at 86% 46%, transparent 0 104px, #e9dbed78 105px 106px, transparent 107px), radial-gradient(ellipse at 84% 29%, #f2e7fa, transparent 49%), radial-gradient(ellipse at 52% 87%, #fff0e8, transparent 44%); } :root[data-theme="light"] .landing-routine { background: linear-gradient(130deg, #fffefd, #fbf8ff); box-shadow: 0 17px 38px #5c418218; } :root[data-theme="light"] .feature-ribbon { background: linear-gradient(120deg, #fff, #faf6fc); } :root[data-theme="light"] .web-chat-page { background: radial-gradient(ellipse 490px 520px at 0% 5%, #f0e5fa, transparent), radial-gradient(ellipse 500px 490px at 102% 96%, #fff0e6, transparent), #faf9fc; } :root[data-theme="light"] .chat-main { background: radial-gradient(ellipse at 78% 92%, #f3eaf9, transparent 46%), #fffdfd; } /* Black neon is mineral, angular and energetic. Lime remains an edge signal, never a field colour behind body copy or diary data. */ :root[data-theme="dark"] .web-landing-page { background: radial-gradient(ellipse 480px 670px at 100% 9%, #241b2e 0, transparent 82%), radial-gradient(ellipse 520px 560px at 0% 72%, #191421 0, transparent 84%), #08080a; } :root[data-theme="dark"] .landing-hero { background-color: #09090b; background-image: linear-gradient(90deg, #09090b 0%, #09090bf5 23%, #09090bcb 45%, #09090b70 70%, #09090b94 100%), url("/media/themes/dark-graphite-v2.webp"); background-size: cover; background-position: center, center; } :root[data-theme="dark"] .landing-hero::before { inset: 0; background: repeating-linear-gradient(135deg, transparent 0 139px, #c8b4ff12 139px 140px, transparent 140px 280px), linear-gradient(0deg, #09090bcc, transparent 18%, transparent 80%, #09090b7a), radial-gradient(ellipse at 66% 78%, #563b6b33, transparent 43%); } :root[data-theme="dark"] .landing-hero::after { content: ""; position: absolute; top: 0; right: 0; width: min(34%, 420px); height: 3px; pointer-events: none; background: linear-gradient(90deg, transparent, #b89aff 30%, #d7ff3f 83%, transparent); box-shadow: 0 2px 25px #d7ff3f4d; } :root[data-theme="dark"] .landing-identity::before { border-color: #6c5b7c; background: linear-gradient(140deg, #17131bc9, #0a090dc9 67%); box-shadow: 0 26px 70px #0009, inset 0 1px #bea3e33d, 0 0 0 4px #a788ca0b; } :root[data-theme="dark"] .landing-identity::after { width: 158px; height: 4px; box-shadow: 0 0 18px #c5b1ff7a, 0 0 35px #d7ff3f35; } :root[data-theme="dark"] .landing-hero__phones-label span { color: #d0c2e0; } :root[data-theme="dark"] .landing-phone:first-child { border-color: #8a7a9b; box-shadow: 0 19px 45px #000b, 0 0 0 1px #c7aaff2b, 0 0 30px #b287e621; } :root[data-theme="dark"] .landing-phone:nth-child(2) { border-color: #747d60; box-shadow: 0 19px 45px #000b, 0 0 0 1px #d7ff3f26, 0 0 30px #d7ff3f12; } :root[data-theme="dark"] .landing-routine { border-color: #51485c; background: linear-gradient(125deg, #17141a 0%, #101013 70%); box-shadow: 0 20px 55px #0008, inset 0 1px #d3baff21; } :root[data-theme="dark"] .landing-routine::before { width: 125px; height: 3px; } :root[data-theme="dark"] .landing-routine article { overflow: hidden; border-color: #4a4352; background: linear-gradient(135deg, #211d25, #141317 68%); box-shadow: inset 3px 0 #d7ff3f, 0 10px 24px #0005; } :root[data-theme="dark"] .landing-routine article:nth-child(2) { box-shadow: inset 3px 0 #ab95ff, 0 10px 24px #0005; } :root[data-theme="dark"] .landing-routine article:nth-child(3) { box-shadow: inset 3px 0 #56cce8, 0 10px 24px #0005; } :root[data-theme="dark"] .landing-routine article::after { content: ""; position: absolute; top: 0; right: 0; width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #c0a1f878); } :root[data-theme="dark"] .landing-routine h3, :root[data-theme="dark"] .feature-ribbon__item strong { color: #f5f3f8; } :root[data-theme="dark"] .landing-routine article p, :root[data-theme="dark"] .feature-ribbon__item small { color: #bbb6c5; } :root[data-theme="dark"] .feature-ribbon { border-color: #49414f; background: linear-gradient(115deg, #151317, #0e0d10); box-shadow: 0 14px 36px #0006, inset 0 1px #c2a7dc17; } :root[data-theme="dark"] .feature-ribbon__item { position: relative; padding-left: 11px; border-left: 2px solid #d7ff3f; } :root[data-theme="dark"] .feature-ribbon__item:nth-child(2), :root[data-theme="dark"] .feature-ribbon__item:nth-child(4) { border-left-color: #ab95ff; } :root[data-theme="dark"] .feature-ribbon__item:nth-child(3) { border-left-color: #56cce8; } :root[data-theme="dark"] .landing-case-group, :root[data-theme="dark"] .landing-platform, :root[data-theme="dark"] .landing-pricing__card { border-color: #514657; background: linear-gradient(125deg, #201b24, #121114 72%); box-shadow: inset 0 1px #cbb1df20, 0 13px 30px #0004; } :root[data-theme="dark"] .landing-final { background: linear-gradient(90deg, #111014 0%, #111014db 57%, #111014a3 100%), url("/media/themes/dark-graphite-v2.webp") center / cover; border-color: #66576d; } /* Keep legacy light recordings comfortable within a dark page. Opening the native player lifts the tint for reading, without changing the recording. */ :root[data-theme="dark"] .landing-case-demo__player { border-color: #594d66; background: #111014; box-shadow: 0 16px 36px #0007, inset 0 1px #c6a8e326; } :root[data-theme="dark"] .landing-case-demo video { filter: brightness(.62) saturate(.68); transition: filter 180ms ease; } :root[data-theme="dark"] .landing-case-demo video[controls] { filter: brightness(.82) saturate(.88); } :root[data-theme="dark"] .landing-case-demo__play { border: 1px solid #e7ff8c; border-radius: 8px; box-shadow: 0 5px 22px #0009, 0 0 20px #d7ff3f24; } :root[data-theme="dark"] .landing-product-video video { filter: brightness(.88) saturate(.9); } @media (prefers-reduced-motion: reduce) { :root[data-theme="dark"] .landing-case-demo video { transition: none; } } :root[data-theme="dark"] .web-chat-page { background: radial-gradient(ellipse 470px 510px at 100% 3%, #22172f, transparent), radial-gradient(ellipse 400px 440px at 0% 100%, #191520, transparent), #070708; } :root[data-theme="dark"] .chat-main { background: repeating-linear-gradient(135deg, transparent 0 138px, #aa8dee0a 138px 139px, transparent 139px 277px), radial-gradient(ellipse at 71% 73%, #3a254b45, transparent 58%), #0a0a0c; } :root[data-theme="dark"] .chat-workspace { background: linear-gradient(180deg, #17141a, #101013 28%); } :root[data-theme="dark"] .chat-header, :root[data-theme="dark"] .chat-workspace__header { border-bottom-color: #66576d; box-shadow: inset 0 3px #b595e52b; } :root[data-theme="dark"] .nutrition-card { border-color: #64556c; background: linear-gradient(135deg, #29222f, #161419 76%); box-shadow: inset 0 1px #d6b9f337, 0 10px 27px #0004; } :root[data-theme="dark"] .chat-message__bubble, :root[data-theme="dark"] .meal-row, :root[data-theme="dark"] .workout-card, :root[data-theme="dark"] .memory-row, :root[data-theme="dark"] .diary-day { background: #1b1820; border-color: #504458; } @media (max-width: 640px) { :root[data-theme="dark"] .landing-hero { background-position: center, 57% center; background-image: linear-gradient(180deg, #09090bf5 0%, #09090be8 42%, #09090b75 66%, #09090ba3 100%), url("/media/themes/dark-graphite-v2.webp"); } :root[data-theme="dark"] .landing-hero::after { width: 45%; } :root[data-theme="dark"] .feature-ribbon__item { padding-left: 8px; } } /* Imagegen renders the dark characters on a graphite studio background. Matching stages preserve opaque materials and avoid fake cutout halos. */ :root[data-theme="dark"] .scene-mascot { overflow: hidden; vertical-align: middle; line-height: 0; border-radius: 9px; background: #060608; } :root[data-theme="dark"] .workspace-scene { background: linear-gradient(110deg, #17131b, #060608 65%); border-color: #4b4058; } :root[data-theme="dark"] .workspace-scene .scene-mascot { margin: -4px -5px -4px 0; } :root[data-theme="dark"] .workspace-section-heading--illustrated { min-height: 116px; padding: 12px 104px 12px 12px; border: 1px solid #423849; border-radius: 11px; background: linear-gradient(110deg, #18131d, #060608 65%); } :root[data-theme="dark"] .workspace-section-heading--illustrated h2 { font-size: 23px; } :root[data-theme="dark"] .workspace-section-heading--illustrated > .scene-mascot { right: 5px; bottom: 7px; width: 102px; } :root[data-theme="dark"] .chat-empty > .scene-mascot { border: 1px solid #3a3043; border-radius: 20px 5px; } :root[data-theme="dark"] .landing-identity::before { inset: 10px -5px; border-radius: 14px 3px; background: #09090b; transform: none; } :root[data-theme="dark"] .landing-identity__mascot { border-radius: 9px; } :root[data-theme="dark"] .landing-final { padding-right: 260px; background: linear-gradient(90deg, #09090b 0 48%, transparent 68%), #09090b url("/media/themes/final-dark-v3.webp") right center / auto 100% no-repeat; } :root[data-theme="dark"] .landing-final__orb, :root[data-theme="dark"] .landing-final__character { display: none; } @media (min-width: 1101px) { :root[data-theme="dark"] .landing-identity { min-height: 420px; align-self: center; } } @media (max-width: 900px) { :root[data-theme="dark"] .landing-final { min-height: 0; padding: 35px 18px 215px; background-image: url("/media/themes/final-dark-v3.webp"); background-size: auto 185px; background-position: right bottom; background-repeat: no-repeat; } }