:root { color-scheme:light; --paper:#f4f1e9; --surface:#fcfbf7; --ink:#102b22; --muted:#607168; --line:#d7ddd5; --accent:#d85020; --accent-dark:#af3f17; --soft:#e7eee7; --shadow:0 20px 55px rgba(13,41,31,.11); --hero-bg:#123c2e; --hero-ink:#fffaf1; --hero-muted:#d7e4dc; --hero-kicker:#a8cdbb; --hero-line:rgba(255,255,255,.18); --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
:root[data-theme="dark"] { color-scheme:dark; --paper:#091a14; --surface:#112a21; --ink:#fffaf1; --muted:#c0d0c7; --line:#3e5b4f; --accent:#ff8b5f; --accent-dark:#ffae8d; --soft:#1b372c; --shadow:0 22px 65px rgba(0,0,0,.38); --hero-bg:#06150f; --hero-ink:#fffdf8; --hero-muted:#cfdfd6; --hero-kicker:#86cbaa; --hero-line:rgba(220,245,231,.22); }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --paper:#091a14; --surface:#112a21; --ink:#fffaf1; --muted:#c0d0c7; --line:#3e5b4f; --accent:#ff8b5f; --accent-dark:#ffae8d; --soft:#1b372c; --shadow:0 22px 65px rgba(0,0,0,.38); --hero-bg:#06150f; --hero-ink:#fffdf8; --hero-muted:#cfdfd6; --hero-kicker:#86cbaa; --hero-line:rgba(220,245,231,.22); } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 Inter,Arial,sans-serif; }
button,input,select { font:inherit; }
button,select { cursor:pointer; }
button { transition:transform 150ms var(--ease-out),background-color 180ms ease,color 180ms ease,border-color 180ms ease; }
button:active { transform:scale(.97); }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.skip-link { position:fixed; left:12px; top:-80px; z-index:10; padding:10px 14px; background:var(--ink); color:var(--paper); border-radius:4px; }
.skip-link:focus { top:12px; }
.topbar { min-height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:0 clamp(18px,4vw,64px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 92%,transparent); }
.brand { display:flex; align-items:center; width:max-content; }
.brand img { display:block; width:125px; height:auto; }
.topbar__name { font:500 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.theme-control { justify-self:end; display:flex; align-items:center; gap:9px; color:var(--muted); font:500 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.theme-control select { min-height:38px; padding:0 29px 0 11px; border:1px solid var(--line); border-radius:4px; appearance:auto; background:var(--surface); color:var(--ink); }
.container { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--hero-line); background:var(--hero-bg); color:var(--hero-ink); }
.hero::after { position:absolute; inset:0; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.025) 42%,rgba(255,255,255,.025) 43%,transparent 43%); content:""; pointer-events:none; }
.hero__content { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); align-items:center; gap:32px; min-height:390px; padding-block:46px; }
.hero__copy { align-self:center; }
.eyebrow,.micro { margin:0 0 16px; color:var(--hero-kicker); font:500 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:720px; margin-bottom:24px; color:var(--hero-ink); font:700 clamp(3.4rem,7.4vw,6.8rem)/.92 Georgia,serif; letter-spacing:-.055em; }
.hero__copy > p:last-child { max-width:540px; margin:0; color:var(--hero-muted); font-size:1.04rem; }
.oil-visual { position:relative; width:min(100%,430px); justify-self:end; }
.oil-visual svg { display:block; width:100%; height:auto; overflow:visible; }
.oil-visual > span { display:block; margin-top:-8px; color:var(--hero-kicker); font:500 .61rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; text-align:center; text-transform:uppercase; }
.oil-visual__glow { transform-origin:center; animation:oil-glow 6.8s var(--ease-in-out) infinite; will-change:transform,opacity; }
.oil-visual__auras { transform-origin:220px 145px; animation:aura-drift 8.4s var(--ease-in-out) infinite; will-change:transform; }
.oil-visual__aura { fill:none; transform-origin:220px 145px; }
.oil-visual__aura--haze { stroke:#f8b34b; stroke-opacity:.18; stroke-width:7; animation:aura-breathe 6.8s var(--ease-in-out) -.45s infinite; will-change:transform,opacity; }
.oil-visual__aura--outer { stroke:url(#aura-gradient); stroke-width:1.5; stroke-dasharray:286 124; animation:aura-turn 18s linear infinite; }
.oil-visual__aura--inner { stroke:url(#aura-gradient); stroke-opacity:.7; stroke-width:1; stroke-dasharray:92 72; animation:aura-turn-reverse 13s linear infinite; }
.oil-visual__aura-accent { fill:none; stroke:#fff1b6; stroke-linecap:round; stroke-opacity:.5; stroke-width:2.2; animation:aura-accent 6.8s var(--ease-in-out) -.25s infinite; will-change:transform,opacity; }
.oil-visual__drop { transform-origin:221px 143px; animation:oil-float 6.8s var(--ease-in-out) infinite; will-change:transform; }
.oil-visual__core { transform-origin:221px 155px; animation:oil-core-pulse 6.8s var(--ease-in-out) -.2s infinite; will-change:transform,opacity; }
.oil-visual__sheen { transform-origin:190px 148px; animation:oil-sheen 6.8s var(--ease-in-out) infinite; will-change:transform,opacity; }
.oil-visual__bead { transform-box:fill-box; transform-origin:center; }
.oil-visual__bead--one { animation:oil-bead 4.7s var(--ease-in-out) -.8s infinite alternate; }
.oil-visual__bead--two { animation:oil-bead 6.1s var(--ease-in-out) -2.2s infinite alternate-reverse; }
.oil-visual__bead--three { animation:oil-bead 5.2s var(--ease-in-out) -1.5s infinite alternate; }
@keyframes oil-float { 0%,100% { transform:translateY(2px) rotate(-.35deg) scale(.992); } 50% { transform:translateY(-7px) rotate(.45deg) scale(1.012); } }
@keyframes oil-core-pulse { 0%,100% { transform:scale(.94); opacity:.42; } 50% { transform:scale(1.06); opacity:.88; } }
@keyframes oil-sheen { 0%,100% { transform:translate(-2px,2px) scale(.98); opacity:.48; } 50% { transform:translate(5px,-3px) scale(1.015); opacity:.72; } }
@keyframes oil-glow { 0%,100% { transform:scale(.94); opacity:.42; } 50% { transform:scale(1.08); opacity:.76; } }
@keyframes aura-turn { to { transform:rotate(360deg); } }
@keyframes aura-turn-reverse { to { transform:rotate(-360deg); } }
@keyframes aura-drift { 0%,100% { transform:rotate(-9deg) scale(.99); } 50% { transform:rotate(-6deg) scale(1.015); } }
@keyframes aura-breathe { 0%,100% { transform:scale(.94); opacity:.28; } 50% { transform:scale(1.06); opacity:.62; } }
@keyframes aura-accent { 0%,100% { transform:translate(-2px,2px); opacity:.42; } 50% { transform:translate(3px,-4px); opacity:.8; } }
@keyframes oil-bead { to { transform:translate(7px,-9px) scale(1.12); opacity:.68; } }
.workspace { padding-block:clamp(32px,6vw,76px) 96px; }
.calculator { display:grid; grid-template-columns:minmax(0,.93fr) minmax(340px,1.07fr); min-height:560px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.panel { min-width:0; padding:clamp(24px,4vw,48px); }
.panel--form { border-right:1px solid var(--line); }
.panel .micro { color:var(--accent); }
.panel h2 { margin-bottom:9px; font:700 clamp(2rem,4vw,3.5rem)/.98 Georgia,serif; letter-spacing:-.04em; }
.lead,.hint,.note { color:var(--muted); font-size:.92rem; }
.lead { margin-bottom:34px; }
.field { display:block; margin:0 0 22px; }
.field > span { display:block; margin-bottom:8px; font:700 .69rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
select,input { width:100%; min-height:52px; padding:10px 13px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); }
input[aria-invalid="true"] { border-color:var(--accent); }
.volume { display:grid; grid-template-columns:1fr 54px; }
.volume input { border-radius:4px 0 0 4px; }
.volume b { display:grid; place-items:center; border:1px solid var(--line); border-left:0; border-radius:0 4px 4px 0; background:var(--soft); font:.72rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.preset { min-height:34px; padding:5px 9px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--ink); font:500 .68rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.preset[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:white; }
.hint { margin:25px 0 0; }
.budcare-card { margin:-9px 0 24px; padding:16px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:6px; background:color-mix(in srgb,var(--soft) 76%,var(--surface)); }
.budcare-card > div { display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.budcare-card > div span { color:var(--accent); font:700 .61rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.budcare-card > div strong { font-size:.76rem; text-align:right; }
.budcare-card ul { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 12px; padding:0; list-style:none; }
.budcare-card li { display:inline-flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.budcare-card li strong { font-size:.73rem; }
.budcare-card li span { color:#17704b; font:700 .52rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; text-transform:uppercase; }
.budcare-card li span[data-level="low"] { color:#a75517; }
:root[data-theme="dark"] .budcare-card li span { color:#77d5aa; }
:root[data-theme="dark"] .budcare-card li span[data-level="low"] { color:#ffb36f; }
.budcare-card p { margin:0 0 7px; color:var(--muted); font-size:.72rem; }
.budcare-card a { color:var(--accent); font-size:.7rem; font-weight:750; text-underline-offset:3px; }
.budcare-card.is-unconfirmed { border-style:dashed; }
.budcare-card.is-unconfirmed p { margin-top:12px; }
.panel--result { display:flex; flex-direction:column; background:color-mix(in srgb,var(--soft) 60%,var(--surface)); }
.result-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:25px; border-bottom:1px solid var(--line); }
.result-head h2 { max-width:420px; }
.grams { flex:0 0 auto; color:var(--accent); font:700 clamp(2.3rem,4vw,3.8rem)/.9 Georgia,serif; letter-spacing:-.06em; white-space:nowrap; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-block:22px; }
.facts div { min-width:0; padding:13px; border:1px solid var(--line); border-radius:5px; background:var(--surface); }
.facts span { display:block; margin-bottom:5px; color:var(--muted); font:.58rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.facts strong { display:block; font-size:.79rem; line-height:1.3; }
.draft-label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 8px; color:var(--muted); font:600 .65rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
.copy { min-height:34px; padding:6px 9px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--accent); font:700 .63rem Inter,Arial,sans-serif; }
.copy:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
pre { min-height:188px; margin:0; padding:18px; overflow:auto; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); font:.77rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.equation { margin:17px 0 0; color:var(--muted); font-size:.77rem; }
.equation code { display:block; margin-top:6px; color:var(--ink); font:.72rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.error { margin:14px 0 0; color:var(--accent); font-weight:700; }
.notice { max-width:920px; margin:18px auto 0; padding:16px 18px; border-left:3px solid var(--accent); background:var(--soft); color:var(--muted); font-size:.85rem; }
.notice strong { color:var(--ink); }
.credit { display:flex; justify-content:space-between; gap:18px; padding:20px max(20px,calc((100% - 1180px) / 2)); border-top:1px solid var(--line); color:var(--muted); font:.62rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; text-transform:uppercase; }
.credit strong { color:var(--ink); font-weight:700; }
@media (max-width:860px) { .hero__content { grid-template-columns:1fr; padding-block:52px; } .oil-visual { width:min(86vw,400px); justify-self:center; margin-top:-16px; } }
@media (max-width:780px) { .topbar { grid-template-columns:1fr auto; } .topbar__name { display:none; } .calculator { grid-template-columns:1fr; } .panel--form { border-right:0; border-bottom:1px solid var(--line); } .facts { grid-template-columns:1fr; } .result-head { display:block; } .grams { margin-top:18px; } .credit { display:block; } .credit span + span { display:block; margin-top:8px; } }
@media (max-width:440px) { .container { width:min(100% - 28px,1180px); } .topbar { padding-inline:14px; } .brand img { width:110px; } .theme-control > span { display:none; } h1 { font-size:3.35rem; } .panel { padding:24px 18px; } .budcare-card > div { display:block; } .budcare-card > div strong { display:block; margin-top:6px; text-align:left; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .oil-visual__glow,.oil-visual__auras,.oil-visual__aura,.oil-visual__aura-accent,.oil-visual__drop,.oil-visual__core,.oil-visual__sheen,.oil-visual__bead { animation:none; } }