:root { --ink:#24352d; --muted:#6b776f; --paper:#fbfaf5; --line:#dce2d6; --leaf:#35634d; --leaf-dark:#244936; --lime:#dce9bd; --warm:#f1e8d5; --danger:#9a4f38; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 Georgia, "Times New Roman", serif; }
button, input, select { font:inherit; }
.site-header, main, footer { max-width:1180px; margin:auto; padding-left:24px; padding-right:24px; }
.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--leaf-dark); text-decoration:none; font-size:1.5rem; font-weight:bold; letter-spacing:-.04em; }.site-nav { display:flex; gap:20px; }.site-nav a,footer a,.content-page a { color:var(--leaf); }.site-nav a { font:700 .82rem Arial,sans-serif; text-decoration:none; }.header-note,.muted,small { color:var(--muted); font-size:.9rem; }
.hero { max-width:700px; padding:70px 0 42px; }.eyebrow { margin:0 0 6px; color:var(--leaf); font:700 .72rem/1.2 Arial,sans-serif; text-transform:uppercase; letter-spacing:.12em; }
h1,h2,h3,p { margin-top:0; }h1 { font-size:clamp(2.25rem,5vw,4.3rem); line-height:1.02; letter-spacing:-.05em; margin-bottom:20px; }h2 { font-size:1.65rem; letter-spacing:-.035em; margin-bottom:0; }h3 { margin:0; font-size:1.1rem; }
.hero>p:last-child { color:var(--muted); font-size:1.15rem; max-width:630px; }.calculator { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(330px,.85fr); border:1px solid var(--line); background:#fff; box-shadow:0 12px 38px #32483312; }
.inputs-panel { padding:32px; }.results-panel { background:var(--leaf-dark); color:#fff; padding:32px; }.results-panel .eyebrow { color:#d5e6c1; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }.section-heading>.muted { max-width:300px; text-align:right; margin:0; }
.total-badge { background:var(--lime); color:var(--leaf-dark); padding:6px 10px; border-radius:20px; font:700 .8rem Arial,sans-serif; white-space:nowrap; }.oil-rows { display:grid; gap:10px; margin-bottom:12px; }.oil-row { display:grid; grid-template-columns:1fr 120px 35px; gap:10px; }.oil-amount-label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px; font-size:.8rem; color:var(--muted); }
label { display:grid; gap:6px; color:var(--muted); font-size:.82rem; }input,select { width:100%; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:4px; padding:10px; }.remove-oil { border:0; color:var(--danger); background:#f9ece8; border-radius:4px; font-size:1.4rem; cursor:pointer; }.button { border:0; padding:11px 16px; border-radius:4px; cursor:pointer; font:700 .85rem Arial,sans-serif; }.button-secondary { color:var(--leaf-dark); background:var(--lime); }.button-primary { color:#fff; background:#95bd62; }.button-quiet { color:#fff; background:transparent; border:1px solid #ffffff55; }.options-grid { margin-top:30px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.mold-box { background:var(--warm); margin-top:32px; padding:20px; }.mold-inputs { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:10px; margin-top:14px; align-items:end; }.mold-box .muted { margin:14px 0 0; }
.result-list { margin:25px 0; border-top:1px solid #ffffff33; }.result-list>div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid #ffffff22; }.result-list span { color:#d4ded4; }.result-list strong { font-size:1.2rem; }.result-total strong { color:#d5e6a5; font-size:1.45rem; }.warnings:empty { display:none; }.warnings { margin:22px 0; }.warnings p { margin:0 0 8px; padding:10px; background:#fff1e52b; color:#ffdfae; font-size:.88rem; }.safety-note { border-top:1px solid #ffffff33; padding-top:18px; color:#d4ded4; font-size:.88rem; }.safety-note strong { color:#fff; }.actions { display:flex; gap:10px; margin-top:24px; }.properties-section { padding:70px 0; }.properties { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.property { padding:16px; background:#fff; border-top:3px solid var(--lime); }.property>div:first-child { display:flex; justify-content:space-between; }.meter { height:6px; margin:12px 0 8px; background:#edf0ea; overflow:hidden; }.meter i { display:block; height:100%; background:var(--leaf); }.meter i.outside { background:#cf8d58; }footer { border-top:1px solid var(--line); padding-top:24px; padding-bottom:24px; color:var(--muted); font-size:.85rem; }
.content-page { max-width:800px; padding-top:72px; padding-bottom:72px; }.content-page h1 { max-width:720px; }.content-page .lead { color:var(--muted); font-size:1.2rem; }.content-page section { padding:20px 0; border-top:1px solid var(--line); }.content-page section:first-of-type { margin-top:38px; }.content-page section h2 { font-size:1.35rem; margin-bottom:8px; }.content-page .button { display:inline-block; margin-top:12px; text-decoration:none; }
.fatty-profile { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; }.fatty-profile span { background:#fff; border:1px solid var(--line); padding:10px; font-size:.85rem; }.fatty-profile strong { display:block; color:var(--leaf); }
@media(max-width:760px) { .site-header,main,footer { padding-left:16px; padding-right:16px; }.hero { padding:48px 0 30px; }.calculator { grid-template-columns:1fr; }.inputs-panel,.results-panel { padding:22px; }.options-grid,.properties { grid-template-columns:1fr; }.mold-inputs { grid-template-columns:1fr 1fr; }.mold-inputs .button { grid-column:span 2; }.section-heading { align-items:start; }.section-heading>.muted { text-align:left; }.actions { flex-direction:column; }.button { width:100%; }.content-page { padding-top:48px; padding-bottom:48px; } }
@media print { .site-header,.hero,.inputs-panel,.actions,footer { display:none; } body { background:#fff; }.calculator { display:block; border:0; box-shadow:none; }.results-panel { color:#111; background:#fff; }.result-list span,.safety-note { color:#444; }.results-panel .eyebrow { color:#35634d; }.result-total strong { color:#244936; }.properties-section { padding:24px; }.warnings p { color:#333; background:#f5f0e8; } }