html,body{margin:0;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.font-serif{font-family:"Source Serif 4",Georgia,Times New Roman,serif}.prose h1,.prose h2,.prose h3,.prose h4{font-family:"Source Serif 4",Georgia,Times New Roman,serif!important}.hero-image-wrapper{position:relative}.hero-grain{position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:128px 128px}.hero-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.25) 100%)}.prose img{border-radius:.75rem;margin-top:2rem;margin-bottom:2rem}@media (max-width: 640px){.prose table{display:block;max-width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.prose th,.prose td{white-space:nowrap}.prose th:last-child,.prose td:last-child{min-width:9rem;white-space:normal}}.prose .food-log-example{background:#fff8df;border:1px solid rgba(234,179,8,.24);border-radius:14px;color:#2f2f2f;font-size:.96rem;line-height:1.65;margin:2rem 0;padding:1.15rem 1.25rem}.prose .food-log-example p{margin:0}.prose .food-log-example p+p{margin-top:.45rem}.prose .food-log-example .note-total{border-top:1px solid rgba(234,179,8,.26);margin-top:.85rem;padding-top:.85rem}.prose p:has(>img[src*=app-screenshot]){position:relative;background:url(/images/blog/screenshot-bg-1.jpg) center / cover no-repeat;border-radius:20px;padding:2.5rem 2rem 1.5rem;display:flex;flex-direction:column;align-items:center;border:1px solid #e0e0e0;margin-top:2rem;margin-bottom:2rem;overflow:hidden}.prose p:has(>img[src*=app-screenshot]):after{content:"";position:absolute;inset:0;-webkit-backdrop-filter:blur(.5px) saturate(1.1);backdrop-filter:blur(.5px) saturate(1.1);border-radius:20px;z-index:0}.prose p:has(>img[src*=app-screenshot]):before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:20px;z-index:1;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.3'/%3E%3C/svg%3E");background-size:200px 200px,80px 80px;mix-blend-mode:soft-light;opacity:.9}.prose p:has(>img[src*=app-screenshot]) img{position:relative;z-index:2;max-width:260px;margin:0;padding:7px;background:#f2f1f2;border:1px solid #d4d4d4;border-radius:24px;box-shadow:inset 0 0 0 1px #d1d5db,0 1px 3px #0000000f,0 6px 20px #0000000a}.prose p:has(>img[src*=screenshot-amy]),.prose p:has(>img[src*=screenshot-fooducate]){background-image:url(/images/blog/screenshot-bg-1.jpg)}.prose p:has(>img[src*=screenshot-cronometer]),.prose p:has(>img[src*=screenshot-macrofactor]){background-image:url(/images/blog/screenshot-bg-2.jpg)}.prose p:has(>img[src*=screenshot-loseit]),.prose p:has(>img[src*=screenshot-fatsecret]){background-image:url(/images/blog/screenshot-bg-3.jpg)}.prose p:has(>img[src*=screenshot-myfitnesspal]),.prose p:has(>img[src*=screenshot-seehow]){background-image:url(/images/blog/screenshot-bg-4.jpg)}.prose p:has(>img[src*=screenshot-ate]),.prose p:has(>img[src*=screenshot-meallogger]){background-image:url(/images/blog/screenshot-bg-5.jpg)}.prose p:has(>img[src*=app-screenshot])+p:has(>em:only-child){text-align:center;margin-top:-.75rem;margin-bottom:2rem}.prose p:has(>img[src*=app-screenshot])+p:has(>em:only-child) em{font-style:normal;font-size:.8125rem;color:#6b7280;font-weight:500;letter-spacing:.01em}