:root{--bg:#eef2f6;--bg2:#f7f9fb;--card:#fff;--ink:#13233a;--muted:#607086;--navy:#244e7a;--navy2:#5e84a9;--soft:#dfe7ef;--line:#d8e1ea;--shadow:0 12px 30px rgba(38,63,91,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'Rubik',Arial,sans-serif;background:linear-gradient(180deg,#e8eef4 0,#f7f9fb 32%,#eef2f6 100%);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.wrap{width:min(100% - 28px,760px);margin:auto}
header{padding:16px 0 4px}.top{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px}.mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--navy),#7aa0c2);box-shadow:0 7px 18px #244e7a29}.about{border:0;background:#fff9;color:var(--navy);width:34px;height:34px;border-radius:50%;font-weight:800}
.hero{padding:38px 0 24px;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:7px;background:#ffffffb8;border:1px solid #dbe4ec;padding:8px 12px;border-radius:999px;color:var(--navy);font-size:13px;font-weight:700}.hero h1{font-family:'Secular One','Rubik',sans-serif;font-weight:400;font-size:clamp(38px,11vw,58px);line-height:1.03;margin:18px auto 12px;max-width:650px;letter-spacing:-.5px}.hero p{font-size:16px;color:var(--muted);line-height:1.65;max-width:600px;margin:0 auto}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:8px 0 36px}.feature-btn{position:relative;overflow:hidden;min-height:112px;border:1px solid rgba(37,74,111,.1);border-radius:19px;text-align:right;padding:17px 15px;background:linear-gradient(145deg,#fbfcfd,#dbe5ee);color:var(--ink);box-shadow:0 8px 20px rgba(45,72,99,.08);display:flex;align-items:flex-end;transition:transform .15s ease,box-shadow .15s ease}.feature-btn:active{transform:scale(.98)}.feature-btn:nth-child(3n+2){background:linear-gradient(145deg,#e5edf4,#f8fafc)}.feature-btn:nth-child(3n){background:linear-gradient(145deg,#f8fafb,#d3e0eb)}.feature-btn .bgicon{position:absolute;left:-1px;top:-15px;font-size:82px;opacity:.11;filter:grayscale(.15);transform:rotate(-8deg);pointer-events:none}.feature-btn:nth-child(even) .bgicon{left:auto;right:-8px;transform:rotate(8deg)}.feature-btn .label{position:relative;z-index:1;font-family:'Secular One','Rubik',sans-serif;font-size:21px;line-height:1.08;font-weight:400;max-width:95%}.feature-btn .mini{display:block;font-family:'Rubik';font-size:11px;font-weight:600;color:var(--navy);margin-bottom:6px;letter-spacing:.1px}
.tool-section{display:none;padding:5px 0 44px}.tool-section.on{display:block}.tool-shell{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden}.tool-head{padding:24px 20px 18px;background:linear-gradient(150deg,#dbe5ee,#f9fbfc)}.tool-head .tool-icon{font-size:42px}.tool-head h2{font-family:'Secular One';font-weight:400;font-size:31px;margin:8px 0 8px}.tool-head p{margin:0;color:var(--muted);line-height:1.6}.tool-body{padding:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:7px;font-size:13px;color:#4c6075;font-weight:600}.field.full{grid-column:1/-1}.field input,.field select{width:100%;border:1px solid #ccd7e1;background:#f9fbfc;border-radius:13px;padding:13px 12px;color:var(--ink);outline:none}.field input:focus,.field select:focus{border-color:#6f94b7;box-shadow:0 0 0 3px #8eb1d224}.calc-btn{width:100%;border:0;border-radius:14px;background:linear-gradient(135deg,var(--navy),#668bad);color:#fff;font-weight:800;padding:14px;margin-top:15px;box-shadow:0 9px 19px #244e7a2c}.result{display:none;margin-top:18px;border-radius:18px;padding:18px;background:linear-gradient(145deg,#edf3f8,#fff);border:1px solid #d6e1ea}.result.on{display:block}.result-main{font-family:'Secular One';font-size:31px;color:var(--navy);line-height:1.15}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:13px}.metric{background:#fff;border:1px solid #dde5ec;border-radius:13px;padding:11px}.metric b{display:block;font-size:18px}.metric span{font-size:11px;color:var(--muted)}
.explain{padding:22px 20px 25px;border-top:1px solid #e2e8ee}.explain h3{font-family:'Secular One';font-weight:400;font-size:23px;margin:0 0 9px}.explain p{color:#53667a;line-height:1.72;margin:0 0 12px}.dynamic-explain{background:#f0f5f9;border-radius:16px;padding:15px;margin:15px 0 0;color:#40566c;line-height:1.68}.dynamic-explain b{color:var(--ink)}.note{font-size:12px;color:#748395;margin-top:14px;line-height:1.55}
.recipe-section{display:none;padding:5px 0 44px}.recipe-section.on{display:block}.recipe-list{margin-top:14px}.ingredient{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed #d7e0e8}.share-row{display:flex;gap:8px;margin-top:14px}.share-row button{flex:1;border:0;border-radius:13px;padding:13px;font-weight:800}.share-primary{background:var(--navy);color:white}.share-secondary{background:#e7edf3;color:var(--navy)}
footer{padding:14px 0 36px;text-align:center;color:#7a8999;font-size:12px}.back-home{display:inline-flex;margin:0 0 14px;border:0;background:#e6edf3;color:var(--navy);border-radius:999px;padding:9px 13px;font-weight:700}
@media(min-width:700px){.feature-grid{grid-template-columns:repeat(4,1fr)}.feature-btn{min-height:126px}.wrap{width:min(100% - 40px,1000px)}.tool-shell{max-width:760px;margin:auto}}