:root { --ink:#18362d; --muted:#6c8178; --cream:#fbfaf5; --sage:#dfeadf; --green:#2d6a4f; --deep:#1e4d3b; --line:#d8e3d8; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:radial-gradient(#c8d5c7 0.65px, transparent 0.65px); background-size:18px 18px; mask-image:linear-gradient(to bottom, black, transparent 75%); }
.page-shell { position:relative; width:min(1120px, calc(100% - 48px)); margin:auto; padding:30px 0 28px; }
.site-header { display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); display:flex; align-items:center; gap:9px; font-size:1.2rem; font-weight:700; letter-spacing:-.03em; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:var(--green); font-size:.75rem; }
.header-note { color:var(--muted); font-size:.76rem; letter-spacing:.03em; }
.hero { display:flex; align-items:center; justify-content:space-between; min-height:285px; padding:55px 48px 40px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 17px; color:var(--green); font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#8dbb8d; }
h1,h2 { font-family:"Playfair Display",serif; font-weight:700; letter-spacing:-.045em; }
h1 { margin:0; font-size:clamp(3.2rem, 7vw, 5.6rem); line-height:.93; }
h1 em { color:var(--green); font-weight:600; }
.intro { max-width:380px; margin:24px 0 0; color:var(--muted); font-size:1rem; line-height:1.65; }
.leaf-art { position:relative; width:200px; height:190px; margin-right:45px; transform:rotate(7deg); }
.stem { position:absolute; bottom:9px; left:98px; width:3px; height:175px; border-radius:10px; background:#9ab99b; transform:rotate(18deg); }
.leaf { position:absolute; display:block; width:55px; height:95px; border-radius:100% 0 100% 0; background:#b8d4b7; }
.leaf-one { top:16px; left:103px; transform:rotate(40deg); }
.leaf-two { top:55px; left:46px; background:#d1e1ca; transform:rotate(-35deg) scale(.84); }
.leaf-three { top:91px; left:110px; background:#92bc99; transform:rotate(43deg) scale(.74); }
.leaf-four { bottom:7px; left:40px; background:#c1d9bf; transform:rotate(-37deg) scale(.66); }
.calculator-card { display:grid; grid-template-columns:270px 1fr; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.74); box-shadow:0 18px 60px rgba(32,73,54,.08); backdrop-filter:blur(6px); }
.input-panel { padding:40px 32px; background:var(--sage); }
label { display:block; margin-bottom:12px; font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.weight-input-wrap { display:flex; align-items:center; border-bottom:2px solid #9db9a1; }
input { width:100%; padding:2px 0 8px; border:0; outline:0; color:var(--ink); background:transparent; font:600 2.3rem/1 "DM Sans",sans-serif; }
input::placeholder { color:#8aa18e; }
.weight-input-wrap span { padding-bottom:7px; color:var(--green); font-size:.95rem; font-weight:700; }
.profile-options { margin:24px 0 0; padding:0; border:0; }
.profile-options legend { margin-bottom:10px; font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.profile-choice-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.profile-choice { display:flex; align-items:center; gap:7px; margin:0; padding:9px 8px; border:1px solid #b8cdb9; border-radius:8px; color:#648072; background:rgba(255,255,255,.26); font-size:.74rem; font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer; }
.profile-choice:has(input:checked) { border-color:var(--green); color:var(--deep); background:rgba(255,255,255,.62); }
.profile-choice input { width:auto; margin:0; padding:0; accent-color:var(--green); font:inherit; }
.input-help { min-height:39px; margin:12px 0 23px; color:#648072; font-size:.78rem; line-height:1.5; }
button { width:100%; padding:14px 15px; border:0; border-radius:10px; color:#fff; background:var(--deep); cursor:pointer; font:600 .86rem "DM Sans",sans-serif; transition:transform .2s, background .2s; }
button:hover { background:var(--green); transform:translateY(-2px); }
button span { float:right; font-size:1.1rem; line-height:.8; }
.error-message { margin:11px 0 0; color:#a05243; font-size:.72rem; }
.results-panel { padding:38px 40px 28px; }
.results-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.results-heading .eyebrow { margin-bottom:9px; }
h2 { margin:0; font-size:1.65rem; }
.results-weight { padding:7px 10px; border-radius:100px; color:var(--green); background:#edf4eb; font-size:.74rem; font-weight:700; white-space:nowrap; }
.result-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; margin-top:25px; }
.result-card { min-height:140px; padding:17px 14px 13px; border-radius:15px; display:flex; flex-direction:column; justify-content:space-between; }
.calories-card { grid-column:span 2; background:#eef4e8; }.protein-card { grid-column:span 2; background:#f5efe3; }.fat-card { grid-column:span 2; background:#f1e9e3; }.carbs-card { grid-column:span 3; background:#e7f0e9; }.water-card { grid-column:span 3; background:#e7eff0; }
.result-icon { color:var(--green); font-size:1.25rem; line-height:1; }.protein-card .result-icon{color:#aa8755}.fat-card .result-icon{color:#b67a5e}.water-card .result-icon{color:#598890}
.result-label { margin:9px 0 3px; color:var(--muted); font-size:.72rem; font-weight:600; }
.result-value { margin:0; color:var(--ink); font-size:1.7rem; font-weight:700; letter-spacing:-.06em; }.result-value small { color:var(--muted); font-size:.68rem; font-weight:500; letter-spacing:0; }
.result-note { margin:8px 0 0; color:#82938a; font-size:.66rem; }
.formula-note { margin:20px 0 0; color:#8b9b91; font-size:.68rem; }
.performance-notes { display:grid; gap:8px; margin-top:14px; padding:12px 14px; border-left:3px solid #9dbd9d; border-radius:0 10px 10px 0; color:#648072; background:#f1f7ef; font-size:.7rem; line-height:1.45; }
.performance-notes p { display:grid; gap:2px; margin:0; }
.performance-notes strong { color:var(--deep); font-size:.68rem; }
.site-footer { display:flex; justify-content:space-between; gap:18px; padding:24px 4px 0; color:#9aaba0; font-size:.67rem; letter-spacing:.03em; }
.site-footer span:last-child { color:#aebbb1; white-space:nowrap; }
.update-toast { position:fixed; right:24px; bottom:24px; z-index:10; max-width:330px; border:1px solid #b8d0ba; border-radius:12px; background:#f2f8f0; box-shadow:0 10px 30px rgba(32,73,54,.16); }
.update-toast-action { width:100%; padding:13px 16px; border-radius:12px; color:var(--deep); background:transparent; font-size:.8rem; text-align:left; }
.update-toast-action:hover { color:var(--deep); background:#e7f2e5; transform:none; }
@media (max-width:760px) { .page-shell{width:min(100% - 28px, 570px);padding-top:20px}.header-note{display:none}.hero{min-height:300px;padding:55px 14px 30px}.leaf-art{position:absolute;right:0;opacity:.45;transform:scale(.78) rotate(7deg)}.hero-copy{position:relative;z-index:1}.calculator-card{grid-template-columns:1fr}.input-panel{padding:28px}.results-panel{padding:30px 20px 24px}.result-grid{gap:8px}.result-card{padding:14px 11px}.result-value{font-size:1.45rem}.site-footer{gap:20px;flex-direction:column} }
@media (max-width:390px) { .hero{padding-left:5px}.result-grid{grid-template-columns:repeat(2,1fr)}.calories-card,.protein-card,.fat-card,.carbs-card,.water-card{grid-column:span 1}.water-card{grid-column:span 2} }