:root{color-scheme:light;--bg:#f2f5f3;--surface:#fff;--ink:#14231d;--muted:#54665d;--line:#d6ded9;--accent:#0a695a;--soft:#dfefe9;--error:#a53520;--c1:#0a695a;--c2:#b5651d;--c3:#3b5fa8;--c4:#7a4a9c;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0f1714;--surface:#17231c;--ink:#e8eeea;--muted:#b3c4b9;--line:#35473b;--accent:#68d5b7;--soft:#1d392e;--error:#ffad93;--c1:#68d5b7;--c2:#f0a35e;--c3:#8fb0f0;--c4:#c9a0e8}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}a{color:var(--accent);text-underline-offset:3px}button,input,select,summary{min-height:44px;font:inherit;color:inherit}
button{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:0 14px;cursor:pointer}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 16px}.nav{background:var(--surface);border-bottom:1px solid var(--line)}.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:56px}.logo{font-weight:700;text-decoration:none;color:var(--ink)}
.back{display:inline-block;margin:16px 0 0}.hero{padding:8px 0 4px}.eyebrow{margin:0;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}h1{margin:.2em 0;font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.2}h2{margin:1.8em 0 .4em;font-size:1.35rem}h3{margin:1.2em 0 .3em;font-size:1.05rem}.lede{font-size:1.05rem;max-width:62ch}
section{margin-bottom:8px}.help{color:var(--muted);font-size:.92rem;max-width:72ch}.muted{color:var(--muted)}.error{color:var(--error)}.num{font-variant-numeric:tabular-nums}
.tiles{display:grid;gap:12px;grid-template-columns:1fr}.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}.tile h3{margin:0 0 4px;display:flex;align-items:center;gap:8px}.price{margin:0}.price strong{font-size:1.9rem}.delta,.tank{margin:.3em 0 0;font-size:.92rem;color:var(--muted)}.tank span{font-weight:600;color:var(--ink)}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px}.s1{background:var(--c1);color:var(--c1)}.s2{background:var(--c2);color:var(--c2)}.s3{background:var(--c3);color:var(--c3)}.s4{background:var(--c4);color:var(--c4)}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;padding:0;margin:8px 0}.legend li{display:flex;align-items:center;gap:6px;font-size:.92rem}
.chart{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;outline-offset:2px}.chart svg{display:block;width:100%;height:auto}.grid,.tick,.base{stroke:var(--line)}.axis{fill:var(--muted);font-size:11px}.line{fill:none;stroke-width:2.2}.line.s1,.dot.s1,.end.s1{stroke:var(--c1);fill:none}.line.s2{stroke:var(--c2)}.line.s3{stroke:var(--c3)}.line.s4{stroke:var(--c4)}.dot,.end{stroke:none}.dot.s1,.end.s1{fill:var(--c1)}.dot.s2,.end.s2{fill:var(--c2)}.dot.s3,.end.s3{fill:var(--c3)}.dot.s4,.end.s4{fill:var(--c4)}.end-label{fill:var(--ink);font-size:11px}.crosshair{stroke:var(--muted);stroke-dasharray:3 3}
.tooltip{position:absolute;top:8px;transform:translateX(8px);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.85rem;box-shadow:0 2px 8px rgba(0,0,0,.15);pointer-events:none;min-width:150px}.tooltip.flip{transform:translateX(calc(-100% - 8px))}.tooltip ul{list-style:none;margin:4px 0 0;padding:0}.tooltip li{display:flex;gap:6px;align-items:center;justify-content:space-between}
details{margin-top:12px}summary{cursor:pointer;display:flex;align-items:center}.table-scroll{overflow-x:auto;max-width:100%}table.data{border-collapse:collapse;width:100%;background:var(--surface);font-size:.92rem}.data th,.data td{border:1px solid var(--line);padding:8px 10px;text-align:start;vertical-align:top}.data thead th{background:var(--soft)}.data caption{text-align:start;color:var(--muted);padding:6px 0}.data td.num{text-align:end}.src{min-width:200px}
.calc{display:grid;gap:12px;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}.subgrid{display:contents}.subgrid[hidden]{display:none}.field{display:flex;flex-direction:column;gap:4px}.field label{font-size:.92rem;font-weight:600}input,select{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 10px;width:100%}input[aria-invalid="true"]{border-color:var(--error)}
.results{display:grid;gap:12px;grid-template-columns:1fr;margin-top:12px}.result-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}.result-card h3{margin-top:0}.breakdown{margin:0}.breakdown .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}.breakdown dt small{display:block;color:var(--muted);font-weight:400}.breakdown dd{margin:0}.row.total{font-weight:700;border-bottom:0}.verdict{font-weight:600}
.sources{padding-inline-start:1.2em}.sources li{margin:.3em 0}
@media(min-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}.calc{grid-template-columns:repeat(2,1fr)}.results{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}.calc{grid-template-columns:repeat(3,1fr)}}
@media print{.nav,.back,.calc{display:none}}
.follow-grid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:12px}@media(min-width:560px){.follow-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.follow-grid{grid-template-columns:repeat(4,1fr)}}
