:root{color-scheme:light;--bg:#f7f9f9;--surface:#fff;--text:#1b292d;--muted:#56686b;--line:#dce5e5;--brand:#087f73;--brand-strong:#07675f;--accent:#2563eb;--amber:#fff8e8;--amber-line:#eace8a}
*{box-sizing:border-box;letter-spacing:0}
html{scroll-padding-top:92px}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:var(--brand-strong);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit}
button,select,summary{cursor:pointer}
button svg,.mobile-result svg{width:18px;height:18px;flex:none}
:focus-visible{outline:3px solid #368fe0;outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:50;background:white;padding:12px;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px max(24px,calc((100% - 1160px)/2));background:#fff;border-bottom:1px solid var(--line)}
.brand{font-size:17px;font-weight:750;color:var(--text);white-space:nowrap}
.top-nav,.site-footer nav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.top-nav a,.site-footer a{color:var(--muted);font-size:14px}
.nav-button{color:var(--brand-strong)!important}
main{max-width:1200px;margin:0 auto;padding:18px 20px 48px}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:0 0 8px;overflow-wrap:anywhere}
.hero{padding:12px 0 24px}
.hero h1{font-size:38px;line-height:1.18;margin:6px 0 10px;max-width:850px;overflow-wrap:anywhere}
.hero p{max-width:780px;font-size:16px;color:var(--muted);margin:0}
.eyebrow,.step-label{display:inline-block;color:var(--brand-strong);font-weight:700;font-size:11px;text-transform:uppercase}
.tool-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,1fr);gap:24px;align-items:start;margin:0 0 40px}
.calculator-card,.result-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;min-width:0}
.calculator-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.form-heading,.result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.form-heading{grid-column:1/-1;font-weight:750;font-size:16px}
.icon-button{width:36px;height:36px;padding:0;background:#fff;color:var(--muted);border:1px solid var(--line)}
.disclaimer-chip{grid-column:1/-1;margin:6px 0 18px;color:var(--muted);font-size:12px}
.step-block{min-width:0;padding:18px 0;border-top:1px solid var(--line)}
.step-block h2{font-size:17px;margin:3px 0 4px;font-weight:700}
.step-block p{margin:0 0 12px;color:var(--muted);font-size:13px}
.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0 10px}
.syringe-options{display:grid;grid-template-columns:1fr;gap:6px;margin:12px 0 10px}
button,.primary-link{border:1px solid transparent;border-radius:6px;padding:10px 14px;background:var(--brand);color:white;font-weight:650;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:42px}
button:hover,.primary-link:hover{filter:brightness(.97);text-decoration:none}
button:disabled{opacity:.45;cursor:not-allowed}
.preset-button{border-color:var(--line);padding:10px 5px;background:#fff;color:var(--muted);font-size:13px;line-height:1.25;min-height:42px}
.preset-button:hover{border-color:var(--brand)}
.preset-button.is-active{border-color:var(--brand);background:#e9f7f4;color:var(--brand-strong);box-shadow:inset 0 0 0 1px var(--brand)}
.input-pair{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:6px}
.input-pair input,.input-pair select,.unit-lock{width:100%;min-width:0;border:1px solid #bccbcc;border-radius:6px;padding:10px;background:#fff;color:var(--text);font-size:16px;min-height:44px}
.input-pair input{font-variant-numeric:tabular-nums;font-weight:650}
.input-pair input[aria-invalid=true]{border-color:#b42318;background:#fff8f7}
.unit-lock{display:flex;align-items:center;color:var(--muted);background:#f6f8f8}
.inline-help{margin-top:10px;font-size:12px;color:var(--muted)}
.inline-help summary,.calculation-breakdown summary{cursor:pointer}
.unit-conversion{margin-top:8px!important;font-size:12px!important;color:var(--brand-strong)!important}
.form-error{grid-column:1/-1;color:#b42318;font-size:13px;margin:0}
.form-error:empty{display:none}
.result-card{position:sticky;top:90px;border-top:3px solid var(--brand)}
.result-label{font-size:11px;color:var(--muted);font-weight:750}
.math-badge{font-size:10px;color:#95601b;background:#fff5df;padding:3px 7px;border-radius:4px;font-weight:750}
.primary-result{display:grid;justify-items:start;gap:6px;margin:20px 0 24px}
.primary-result span{font-weight:550;color:var(--muted);font-size:12px}
.primary-result strong{font-size:56px;line-height:1.1;color:var(--brand-strong);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:100%}
.primary-result em{font-style:normal;font-size:20px;color:var(--text);font-weight:600;overflow-wrap:anywhere;max-width:100%}
.syringe-visual{margin:0;padding:0 4px 38px}
.syringe-scale{font-size:12px;color:var(--muted);margin-bottom:12px}
.syringe-labels{position:relative;height:22px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.syringe-labels span{position:absolute;transform:translateX(-50%)}
.syringe-labels span:first-child{transform:none}
.syringe-labels span:last-child{transform:translateX(-100%)}
.syringe-meter{position:relative;height:32px;border:1px solid #abc4c1;border-radius:4px;background:#eef4f3}
.syringe-fill{position:absolute;left:0;top:0;bottom:0;width:10%;border-radius:3px;background:#a2d9d0;transition:width .12s ease}
.syringe-marker{position:absolute;left:10%;top:-4px;bottom:-7px;width:2px;background:var(--brand-strong);transition:left .12s ease;z-index:1}
.syringe-marker span{position:absolute;left:50%;top:44px;transform:translateX(-50%);white-space:nowrap;color:var(--brand-strong);font-size:12px;font-weight:750}
.syringe-marker[data-edge=start] span{transform:none}
.syringe-marker[data-edge=end] span{transform:translateX(-100%)}
.syringe-tick{position:absolute;top:0;height:12px;width:1px;background:#607c77}
.warning{padding:10px 12px;border-left:3px solid #c58b1f;background:var(--amber);color:#6e4c11;font-size:13px}
.result-list{display:grid;margin:12px 0 20px}
.result-list div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.result-list span{color:var(--muted)}
.result-list strong{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;max-width:60%}
.calculation-breakdown{font-size:13px}
.calculation-breakdown p{color:var(--muted)}
.button-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.button-row button{font-size:13px;flex:1}
.secondary-button{background:#fff;border-color:#b9cdcb;color:var(--brand-strong)}
.copy-status{font-size:12px;color:var(--brand-strong);min-height:19px;margin:8px 0 0}
.result-note{font-size:11px;color:var(--muted);margin:4px 0 0}
.formula-small,.formula-block{white-space:pre-wrap;overflow-wrap:anywhere;background:#edf3f2;border-left:3px solid #83b8b0;padding:16px;font-size:13px;color:#254843;line-height:1.8}
.section-head{margin-bottom:16px}
.section-head h2,.content-section h2,.related-section h2,.mini-tool h2{margin:4px 0 12px;font-size:24px;line-height:1.3}
.examples-section,.content-section,.faq-section,.related-section,.mini-tool,.conversion-section,.popular-section{margin:0;padding:32px 0;border-top:1px solid var(--line)}
.content-section>p{max-width:880px;color:var(--muted)}
.content-section>h2:not(:first-child){margin-top:24px;font-size:19px}
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:6px}
table{width:100%;border-collapse:collapse;min-width:840px;font-size:13px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
th{background:#edf3f2;font-size:12px;color:#49635e}
tr:last-child td{border-bottom:0}
.faq-section details{border-top:1px solid var(--line);padding:16px 0;margin:0;max-width:900px}
.faq-section summary{font-weight:600;font-size:15px}
.faq-section p{color:var(--muted);max-width:820px;font-size:14px}
.related-list,.popular-grid,.conversion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.related-list a,.popular-grid a,.conversion-grid div{padding:16px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text);font-size:14px;overflow-wrap:anywhere}
.related-list a:hover,.popular-grid a:hover{border-color:var(--brand);color:var(--brand-strong)}
.popular-grid span,.conversion-grid span{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.conversion-grid strong{display:block;font-size:20px}
.disclaimer-band{border-top:1px solid var(--line);padding:24px 0 0;margin-top:12px;font-size:12px;color:var(--muted);max-width:880px}
.site-footer{border-top:1px solid var(--line);padding:24px max(24px,calc((100% - 1160px)/2));color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;font-size:12px}
.mobile-result{display:none}
@media (max-width:1000px){.calculator-card{grid-template-columns:1fr}.preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.syringe-options{grid-template-columns:repeat(3,minmax(0,1fr))}.top-nav{gap:14px}.related-list,.popular-grid,.conversion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.tool-grid{grid-template-columns:1fr;gap:20px}.calculator-card{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.syringe-options{grid-template-columns:1fr}.result-card{position:static}.site-header{padding:12px 16px;flex-wrap:wrap;gap:8px 20px}.top-nav{gap:16px}.top-nav a{font-size:12px}.hero h1{font-size:32px}.hero p{font-size:15px}main{padding:16px 16px 100px}.mobile-result{position:fixed;bottom:0;left:0;right:0;z-index:15;background:#fff;border-top:2px solid var(--brand);padding:12px 20px max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text);font-size:12px;min-height:64px;box-shadow:0 -4px 20px #123b3510}.mobile-result strong{color:var(--brand-strong);font-size:22px;overflow-wrap:anywhere}.mobile-result.has-warning{border-color:#c58b1f}.site-footer{padding-bottom:88px}.section-head h2,.content-section h2,.related-section h2,.mini-tool h2{font-size:22px}}
@media (max-width:540px){.calculator-card{grid-template-columns:1fr;padding:20px}.result-card{padding:20px}.preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.syringe-options{grid-template-columns:repeat(3,minmax(0,1fr))}.hero h1{font-size:30px}.top-nav{gap:14px}.primary-result strong{font-size:52px}.step-block{padding:16px 0}.step-block p{margin-bottom:8px}.related-list,.popular-grid{grid-template-columns:1fr}.result-list div{font-size:12px}.site-footer nav{gap:12px}.formula-block{font-size:12px}.button-row button{padding-inline:10px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}