@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Rubik+Dirt&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-main: #FFFDF7;--bg-texture: none;--bg-off: #F3F1EC;--bg-dark: #202020;--text-primary: #202020;--text-secondary: #453D37;--text-muted: #8F8C8A;--text-on-dark: #FFFDF7;--color-sodium: #6ab5e8;--color-sodium-bg: #baefff;--color-sodium-muted: #A78BFA;--color-carbs: #ff9c00;--color-carbs-bg: #FDF4E1;--color-carbs-muted: #E8CC8E;--color-water: #3B82F6;--color-water-bg: #eefdff;--color-water-muted: #93C5FD;--color-magnesium: #6ab5e8;--color-magnesium-bg: #d1f5ff;--color-magnesium-muted: #A78BFA;--color-potassium: #6ab5e8;--color-potassium-bg: #e4f7fb;--color-potassium-muted: #C4B5FD;--ing-salt_table: rgb(0 192 255);--ing-salt_sea: rgb(20 180 245);--ing-salt_himalayan: rgb(240 140 170);--ing-salt_kosher: rgb(30 195 240);--ing-sodium_citrate: rgb(0 148 235);--ing-magnesium_citrate: rgb(58 134 255);--ing-magnesium_malate: rgb(112 168 255);--ing-potassium_chloride: rgb(0 106 224);--ing-lite_salt: rgb(75 160 235);--ing-cream_of_tartar: rgb(150 200 255);--color-accent: #24b7e5;--color-accent-hover: #E55B22;--border-light: 1px solid rgba(0, 0, 0, .08);--border-medium: 1px solid rgba(0, 0, 0, .12);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 60px rgba(0, 0, 0, .1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-heading: "Space Grotesk", var(--font-sans);--font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px}*,*:before,*:after{box-sizing:border-box}body{background-color:var(--bg-main);background-image:var(--bg-texture);background-repeat:repeat;background-size:180px;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;line-height:1.6;font-size:15px}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;letter-spacing:-.025em;line-height:1.2;margin:0}.font-mono{font-family:var(--font-mono)}.card-clean{background:var(--bg-main);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow .3s ease,transform .3s ease}.card-clean:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:var(--radius-pill);border:1.5px solid rgba(0,0,0,.12);background:var(--bg-main);font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .2s ease;white-space:nowrap;letter-spacing:.01em}.btn-pill:hover{border-color:var(--color-accent);color:var(--color-accent);background:#009fe30a;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-pill:active{transform:translateY(0)}.btn-pill.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.btn-pill:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn-pill:disabled:hover{border-color:#0000001f;color:var(--text-primary);background:var(--bg-main);box-shadow:none;transform:none}.btn-solid{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:var(--radius-pill);border:none;background:var(--color-accent);font-family:var(--font-sans);font-size:13px;font-weight:600;color:#fff;cursor:pointer;transition:all .2s ease;white-space:nowrap;letter-spacing:.02em;text-transform:uppercase}.btn-solid:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:100%;margin:3px 0;cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:#0000001a;border-radius:3px;border:none}input[type=range]::-webkit-slider-thumb{height:18px;width:18px;border-radius:50%;border:2px solid white;background:var(--color-accent);cursor:pointer;-webkit-appearance:none;margin-top:-6.5px;box-shadow:0 2px 5px #0000002e;transition:box-shadow .2s ease,transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 2px 8px #009fe359;transform:scale(1.1)}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}input[type=range]::-moz-range-track{width:100%;height:5px;cursor:pointer;background:#0000001a;border-radius:3px;border:none}input[type=range]::-moz-range-thumb{height:18px;width:18px;border-radius:50%;border:2px solid white;background:var(--color-accent);cursor:pointer;box-shadow:0 2px 5px #0000002e}.slider-sodium input[type=range]::-webkit-slider-thumb{background:var(--color-sodium)}.slider-carbs input[type=range]::-webkit-slider-thumb{background:var(--color-carbs)}.slider-water input[type=range]::-webkit-slider-thumb{background:var(--color-water)}.slider-magnesium input[type=range]::-webkit-slider-thumb{background:var(--color-magnesium)}.slider-potassium input[type=range]::-webkit-slider-thumb{background:var(--color-potassium)}.app-container{min-height:100vh}.site-nav{position:sticky;top:0;z-index:100;background:var(--bg-dark);color:var(--text-on-dark);padding:0 2rem;height:80px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 12px #00000026}.site-nav .logo{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}.site-nav .logo .dot{color:var(--color-accent)}.site-nav .nav-links{display:flex;gap:2rem;align-items:center}.site-nav .nav-link{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#ffffffb3;text-decoration:none;transition:color .2s ease;cursor:pointer}.site-nav .nav-link:hover,.site-nav .nav-link.active{color:#fff}.page-content{max-width:1200px;margin:0 auto;padding:3rem 2rem 6rem}@media(min-width:768px){.page-content{padding:4rem 3rem 8rem}}.section-gap{display:flex;flex-direction:column;gap:3rem}@media(min-width:768px){.section-gap{gap:4rem}}.nutrition-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2rem;align-items:start}.nutrition-main{min-width:0}.nutrition-sidebar{position:sticky;top:100px;align-self:start;min-width:0}@media(max-width:1024px){.nutrition-layout{grid-template-columns:minmax(0,1fr) 250px;gap:1.5rem}}@media(max-width:860px){.nutrition-layout{grid-template-columns:1fr}.nutrition-sidebar{position:static}}.section-header{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem}.section-header .step-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:#fff;font-size:13px;font-weight:700;flex-shrink:0}.section-header h2{font-size:1.5rem;font-weight:700}.section-header .subtitle{font-size:12px;color:var(--text-muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase}.category-tile{border-radius:var(--radius-md);padding:12px 16px;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.category-tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.category-tile .tile-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#0000008c;margin-bottom:2px}.category-tile .tile-value{font-family:var(--font-mono);font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1}.category-tile .tile-unit{font-size:.75rem;font-weight:600;color:#00000073;margin-left:2px}.target-group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.65rem}@media(max-width:480px){.target-group-grid{grid-template-columns:1fr;gap:.5rem}.category-tile{padding:10px 14px}}.nutrition-label{font-family:var(--font-sans);border:1px solid rgba(0,0,0,.1);border-radius:var(--radius-md);padding:16px 18px;background:var(--bg-main);box-shadow:var(--shadow-sm);font-size:13px}.analysis-panel{background:var(--bg-off);border-radius:var(--radius-lg);padding:1.5rem;color:var(--text-primary);border:1px solid rgba(0,0,0,.05)}.osmo-bar-track{width:100%;height:8px;background:#00000014;border-radius:4px;overflow:hidden;position:relative}.osmo-bar-fill{height:100%;border-radius:4px;transition:width .4s ease,background-color .3s ease}.ratio-bar{height:44px;border-radius:var(--radius-pill);overflow:hidden;display:flex;position:relative;box-shadow:var(--shadow-sm)}.site-footer{background:var(--bg-off);border-top:1px solid rgba(0,0,0,.06);padding:2rem;text-align:center;font-size:12px;color:var(--text-muted)}html{scroll-behavior:smooth}::selection{background:var(--color-accent);color:#fff}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes sheetSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.animate-in{animation:fadeInUp .35s ease forwards}@media(min-width:861px){.mobile-step-bar-wrapper,.mobile-flow{display:none!important}.desktop-flow{display:flex!important}.mobile-hud-container{display:none!important}}@media(max-width:860px){.site-nav{height:64px;padding:0 1.25rem}.site-nav .logo{font-size:1.8rem}.page-content{padding:1rem 1rem 7.5rem!important}.desktop-flow{display:none!important}.mobile-flow{display:block!important}.hide-mobile-sidebar{display:none!important}}.mobile-step-bar-wrapper{position:sticky;top:64px;z-index:90;background:var(--bg-main);padding:.5rem 1rem;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 4px 12px #00000008}.mobile-step-bar{display:flex;background:var(--bg-off);padding:4px;border-radius:var(--radius-pill);gap:4px;max-width:500px;margin:0 auto}.mobile-step-tab{flex:1;border:none;background:transparent;padding:8px 10px;border-radius:var(--radius-pill);cursor:pointer;color:var(--text-muted);font-family:var(--font-sans);font-size:13px;font-weight:600;transition:all .25s ease;display:flex;align-items:center;justify-content:center}.mobile-step-tab-inner{display:flex;align-items:center;gap:6px;position:relative}.mobile-step-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#00000014;color:var(--text-secondary);font-size:10px;font-weight:700;transition:all .2s}.mobile-step-icon{display:none}.mobile-step-label{letter-spacing:-.01em}.mobile-step-count-badge{background:var(--color-accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--radius-pill)}.mobile-step-tab.active{background:var(--bg-dark);color:var(--text-on-dark);box-shadow:var(--shadow-sm)}.mobile-step-tab.active .mobile-step-num{background:var(--color-accent);color:#fff}.mobile-step-actions{margin-top:2rem;display:flex;justify-content:flex-end}.mobile-step-actions-split{margin-top:2rem;display:flex;align-items:center;justify-content:space-between;gap:12px}.mobile-action-btn{padding:12px 24px;font-size:14px;display:inline-flex;align-items:center;gap:8px;font-weight:700}.mobile-back-btn{padding:11px 18px;font-size:13px;display:inline-flex;align-items:center;gap:6px}.mobile-hud-container{position:fixed;bottom:0;left:0;right:0;z-index:95;padding:0 12px calc(10px + env(safe-area-inset-bottom,0px));pointer-events:none;display:flex;justify-content:center}.mobile-hud-card{pointer-events:auto;width:100%;max-width:500px;background:#202020f2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--text-on-dark);border-radius:var(--radius-xl);padding:8px 12px 8px 16px;box-shadow:0 10px 30px #00000059,0 0 0 1px #ffffff1a;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.mobile-hud-card:active{transform:scale(.98)}.mobile-hud-metrics{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:space-between}.hud-metric-item{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.hud-metric-label{display:flex;align-items:center;gap:3px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff9}.hud-icon{flex-shrink:0}.hud-icon-cal{color:#fb923c}.hud-icon-carb{color:var(--color-carbs)}.hud-icon-osmo{color:var(--color-accent)}.hud-metric-value{font-family:var(--font-mono);font-size:15px;font-weight:800;line-height:1.1;color:#fff;white-space:nowrap}.hud-metric-unit{font-size:10px;font-weight:500;color:#ffffff80;margin-left:1px}.hud-metric-divider{width:1px;height:24px;background:#ffffff1f;flex-shrink:0}.hud-osmo-badge{font-family:var(--font-mono);font-size:12px;font-weight:800;padding:2px 7px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.hud-expand-btn{background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-pill);padding:8px 12px;display:flex;align-items:center;gap:4px;font-family:var(--font-sans);font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;transition:background-color .2s;box-shadow:0 2px 6px #0003}.hud-expand-btn:hover{background:var(--color-accent-hover)}.hud-chevron{animation:bounceUp 1.5s infinite}@keyframes bounceUp{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.mobile-sheet-backdrop{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fadeInOverlay .25s ease-out}.mobile-sheet-content{background:var(--bg-main);width:100%;max-width:540px;max-height:88vh;border-top-left-radius:24px;border-top-right-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -10px 40px #0000004d;animation:sheetSlideUp .3s cubic-bezier(.16,1,.3,1)}.mobile-sheet-header{padding:12px 18px 8px;border-bottom:1px solid rgba(0,0,0,.06);background:var(--bg-main);position:sticky;top:0;z-index:10}.mobile-sheet-handle{width:36px;height:4px;background:#0003;border-radius:2px;margin:0 auto 10px}.mobile-sheet-title-row{display:flex;align-items:center;justify-content:space-between}.mobile-sheet-close-btn{border:none;background:#0000000f;color:var(--text-secondary);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}.mobile-sheet-close-btn:hover{background:#0000001f}.mobile-sheet-body{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}@media(max-width:767px){.hide-mobile{display:none!important}}