:root {
  --blue: #147ce5;
  --blue-dark: #0d5dab;
  --blue-soft: #eaf5ff;
  --cyan-soft: #effbfd;
  --ink: #172b3f;
  --muted: #607286;
  --canvas: #f7fbfe;
  --surface: #ffffff;
  --line: #d7e5ef;
  --teal: #087f73;
  --alert: #fff8e9;
  --alert-line: #efc778;
  --danger: #b42318;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(29, 85, 133, .08);
}

html { scroll-behavior: smooth; }
body:has(.chemh-buffer-tool) { margin: 0; background: var(--canvas); }
.chemh-buffer-tool {
  min-height: 100vh;
  background: linear-gradient(180deg, #fbfdff 0, var(--canvas) 260px);
  color: var(--ink);
  font: 16px/1.62 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}
.chemh-buffer-tool * { box-sizing: border-box; }
.chemh-buffer-tool [hidden] { display: none !important; }
.chemh-buffer-tool .shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.chemh-buffer-tool a { color: var(--blue-dark); text-underline-offset: 3px; }
.chemh-buffer-tool a:hover { color: var(--blue); }
.chemh-buffer-tool :focus-visible { outline: 3px solid #f0a44a; outline-offset: 3px; }
.chemh-buffer-tool h1,
.chemh-buffer-tool h2,
.chemh-buffer-tool h3 { margin: 0 0 .62em; color: var(--ink); font-weight: 760; line-height: 1.16; letter-spacing: -.03em; }
.chemh-buffer-tool h1 { max-width: 900px; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.chemh-buffer-tool h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.chemh-buffer-tool h3 { font-size: 1.08rem; }
.chemh-buffer-tool p { margin: .45em 0 1em; }
.chemh-buffer-tool .eyebrow { margin: 0 0 .6rem; color: var(--blue); font-size: .875rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.chemh-buffer-tool .lede { max-width: 770px; color: #4f6378; font-size: 1rem; }

/* Not-found page */
.chemh-buffer-tool .not-found { padding-top: clamp(64px, 8vw, 96px); }
.chemh-buffer-tool .not-found h1 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); }

/* Header */
.chemh-buffer-tool .site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(202, 220, 234, .88); background: rgba(255,255,255,.94); backdrop-filter: blur(15px); }
.chemh-buffer-tool .header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.chemh-buffer-tool .header-identity { display: flex; align-items: center; gap: 15px; }
.chemh-buffer-tool .brand { width: 162px; height: 56px; display: flex; align-items: center; text-decoration: none; }
.chemh-buffer-tool .brand img { width: 100%; height: auto; display: block; }
.chemh-buffer-tool .site-title { padding-left: 15px; border-left: 1px solid #ccdae6; color: #263746; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }

/* Shared fields and panels */
.chemh-buffer-tool input,
.chemh-buffer-tool select { width: 100%; min-height: 46px; padding: 9px 12px; border: 1px solid #b8cad9; border-radius: 10px; background: white; color: var(--ink); font: inherit; font-size: 1rem; }
.chemh-buffer-tool input:hover,
.chemh-buffer-tool select:hover { border-color: #8daec8; }
.chemh-buffer-tool input:focus,
.chemh-buffer-tool select:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 4px rgba(20,124,229,.11); }
.chemh-buffer-tool input[aria-invalid="true"] { border-color: var(--danger); background: #fff8f7; }
.chemh-buffer-tool .field { min-width: 0; display: grid; align-content: start; gap: 6px; }
.chemh-buffer-tool .field > span:first-child { color: #405970; font-size: .875rem; font-weight: 780; }
.chemh-buffer-tool .button { min-height: 46px; padding: 10px 17px; display: inline-grid; place-items: center; align-self: end; border: 1px solid var(--blue); border-radius: 10px; background: var(--blue); color: white; font: inherit; font-size: 1rem; font-weight: 760; line-height: 1.2; cursor: pointer; box-shadow: 0 7px 17px rgba(20,124,229,.18); }
.chemh-buffer-tool .button:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.chemh-buffer-tool .button-quiet { border-color: #aac2d5; background: white; color: var(--blue-dark); box-shadow: none; }
.chemh-buffer-tool .button-quiet:hover { background: var(--blue-soft); }
.chemh-buffer-tool .field-error { margin: 0; color: var(--danger); font-size: .875rem; line-height: 1.4; }

/* Directory and homepage */
.chemh-buffer-tool .page-stack { padding-block: 30px 0; }
.chemh-buffer-tool .home-stack { display: grid; gap: 32px; }
.chemh-buffer-tool .directory-panel { padding: 28px 0 12px; }
.chemh-buffer-tool .section-heading { max-width: 770px; margin-bottom: 24px; }
.chemh-buffer-tool .section-heading p:last-child { color: var(--muted); }
.chemh-buffer-tool .directory-filter-interface { padding: 20px; border: 1px solid #c9deed; border-radius: var(--radius); background: linear-gradient(135deg, #fff 0%, var(--cyan-soft) 100%); box-shadow: var(--shadow); }
.chemh-buffer-tool .filter-tabs { width: max-content; max-width: 100%; padding: 4px; display: flex; gap: 4px; border: 1px solid #c5dae9; border-radius: 12px; background: #edf5fa; }
.chemh-buffer-tool .filter-tab { min-height: 42px; padding: 9px 18px; border: 0; border-radius: 8px; background: transparent; color: #526a7e; font: inherit; font-size: 1rem; font-weight: 780; line-height: 1.2; cursor: pointer; }
.chemh-buffer-tool .filter-tab:hover { color: var(--blue-dark); }
.chemh-buffer-tool .filter-tab[aria-selected="true"] { background: white; color: var(--blue-dark); box-shadow: 0 3px 12px rgba(30,80,125,.12); }
.chemh-buffer-tool .filter-tab-panel { padding-top: 20px; }
.chemh-buffer-tool .name-filter-panel { display: flex; justify-content: center; }
.chemh-buffer-tool .name-search-field { width: 100%; }
.chemh-buffer-tool .category-filter-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.chemh-buffer-tool .category-filter-chip { min-height: 42px; padding: 9px 14px; border: 1px solid #b8d0e1; border-radius: 999px; background: white; color: #49657d; font: inherit; font-size: 1rem; font-weight: 760; line-height: 1.2; cursor: pointer; }
.chemh-buffer-tool .category-filter-chip:hover { border-color: #82afd0; color: var(--blue-dark); }
.chemh-buffer-tool .category-filter-chip[aria-checked="true"] { border-color: var(--blue); background: var(--blue); color: white; box-shadow: 0 6px 14px rgba(20,124,229,.2); }
.chemh-buffer-tool .ph-filter-panel { margin: 0; }
.chemh-buffer-tool .ph-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.chemh-buffer-tool .ph-filter-heading > span { color: #405970; font-size: .875rem; font-weight: 780; }
.chemh-buffer-tool .ph-range-output { flex: none; padding: 8px 13px; border: 1px solid #b9d8ee; border-radius: 999px; background: white; color: var(--blue-dark); font-size: .88rem; font-weight: 820; font-variant-numeric: tabular-nums; }
.chemh-buffer-tool .ph-range-slider { position: relative; height: 38px; margin: 12px 10px 15px; }
.chemh-buffer-tool .ph-range-track { position: absolute; z-index: 1; top: 16px; right: 0; left: 0; height: 6px; overflow: hidden; border-radius: 999px; background: #ccdae5; }
.chemh-buffer-tool .ph-range-track span { position: absolute; top: 0; right: calc(100% - var(--ph-end)); bottom: 0; left: var(--ph-start); border-radius: inherit; background: linear-gradient(90deg, var(--blue), #39a9dc); }
.chemh-buffer-tool .ph-range-input { position: absolute; z-index: 2; inset: 0; width: 100%; min-height: 0; height: 38px; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none; }
.chemh-buffer-tool .ph-range-input-max { z-index: 3; }
.chemh-buffer-tool .ph-range-input:hover,
.chemh-buffer-tool .ph-range-input:focus { border: 0; background: transparent; box-shadow: none; }
.chemh-buffer-tool .ph-range-input::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.chemh-buffer-tool .ph-range-input::-moz-range-track { height: 6px; background: transparent; }
.chemh-buffer-tool .ph-range-input::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 3px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #0a65bd, 0 4px 10px rgba(20,124,229,.28); cursor: grab; pointer-events: auto; appearance: none; -webkit-appearance: none; }
.chemh-buffer-tool .ph-range-input::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #0a65bd, 0 4px 10px rgba(20,124,229,.28); cursor: grab; pointer-events: auto; }
.chemh-buffer-tool .ph-range-input:active::-webkit-slider-thumb { cursor: grabbing; }
.chemh-buffer-tool .ph-range-input:active::-moz-range-thumb { cursor: grabbing; }
.chemh-buffer-tool .ph-range-input:focus-visible::-webkit-slider-thumb { outline: 3px solid #f0a44a; outline-offset: 3px; }
.chemh-buffer-tool .ph-range-input:focus-visible::-moz-range-thumb { outline: 3px solid #f0a44a; outline-offset: 3px; }
.chemh-buffer-tool .ph-filter-controls { display: grid; grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) auto; gap: 12px; align-items: end; }
.chemh-buffer-tool .ph-reset { min-width: 92px; }
.chemh-buffer-tool .directory-filters { display: grid; grid-template-columns: minmax(230px, 1.5fr) minmax(170px, .75fr) minmax(175px, .75fr) auto; gap: 12px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.chemh-buffer-tool .filter-summary { margin: 19px 0 12px; color: var(--muted); font-size: .875rem; }
.chemh-buffer-tool .buffer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.chemh-buffer-tool .tools-grid { grid-template-columns: minmax(0, 420px); }
.chemh-buffer-tool .buffer-card { position: relative; min-height: 235px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 23px rgba(30,80,125,.045); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.chemh-buffer-tool .buffer-card:hover { transform: translateY(-3px); border-color: #9dc5e4; box-shadow: var(--shadow); }
.chemh-buffer-tool .card-top { display: flex; justify-content: space-between; gap: 12px; color: #718195; font-size: .8125rem; letter-spacing: .075em; text-transform: uppercase; }
.chemh-buffer-tool .card-number { flex: none; color: var(--blue); font-weight: 850; white-space: nowrap; }
.chemh-buffer-tool .card-top > span:last-child { margin-left: auto; text-align: right; }
.chemh-buffer-tool .buffer-card h3 { margin-top: 20px; font-size: 1.16rem; }
.chemh-buffer-tool .buffer-card h3 a { color: var(--ink); text-decoration: none; }
.chemh-buffer-tool .buffer-card h3 a::after { position: absolute; inset: 0; content: ""; }
.chemh-buffer-tool .buffer-card p { margin: 0 0 22px; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.chemh-buffer-tool .card-meta-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chemh-buffer-tool .preset-ph { width: max-content; max-width: calc(100% - 32px); padding: 6px 9px; border-radius: 8px; background: var(--blue-soft); color: #315f86; font-size: .875rem; font-weight: 760; font-variant-numeric: tabular-nums; text-align: left; }
.chemh-buffer-tool .card-footer { margin-left: auto; display: flex; flex: none; align-items: center; gap: 10px; color: var(--blue); }
.chemh-buffer-tool .empty-state { padding: 28px; border: 1px dashed #a8bfd3; border-radius: 12px; color: var(--muted); text-align: center; }
.chemh-buffer-tool .content-panel { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.chemh-buffer-tool .global-notice { margin: 0; padding: 19px 21px; border: 1px solid var(--alert-line); border-left: 5px solid #e5922a; border-radius: 14px; background: var(--alert); box-shadow: 0 8px 22px rgba(154,105,43,.05); }
.chemh-buffer-tool .global-notice strong { color: #70451e; }
.chemh-buffer-tool .global-notice p { margin: .25rem 0 0; color: #6f5a43; font-size: 1rem; }

/* Guide page */
.chemh-buffer-tool .guide-page { padding-block: 28px 0; }
.chemh-buffer-tool .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 35px; color: var(--muted); font-size: 1rem; }
.chemh-buffer-tool .breadcrumbs a { color: var(--muted); }
.chemh-buffer-tool .guide-hero { padding: 8px 0 30px; display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.chemh-buffer-tool .guide-hero h1 { font-size: clamp(1.65rem, 2.7vw, 2.25rem); }
.chemh-buffer-tool .calculator-card { margin-bottom: 18px; overflow: hidden; border: 1px solid #cadfed; border-radius: 20px; background: white; box-shadow: var(--shadow); }
.chemh-buffer-tool .calculator-heading { padding: 14px 26px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; border-bottom: 1px solid var(--line); background: #fbfdff; }
.chemh-buffer-tool .calculator-prompt { margin: 0; color: var(--muted); font-size: 1rem; }
.chemh-buffer-tool .calculator-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 7px; }
.chemh-buffer-tool .text-button { padding: 8px 10px; border: 1px solid #c5d9e8; border-radius: 9px; background: white; color: var(--blue-dark); font: inherit; font-size: 1rem; font-weight: 740; line-height: 1.2; cursor: pointer; }
.chemh-buffer-tool .text-button:hover { border-color: #8bb6d7; background: var(--blue-soft); }
.chemh-buffer-tool .calculator-form-v10 { padding: 21px 26px; display: grid; grid-template-columns: minmax(250px, 1.4fr) minmax(145px, .55fr) minmax(110px, .4fr); gap: 12px; align-items: start; border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.chemh-buffer-tool .calculator-card .field > span:first-child { font-size: .875rem; }
.chemh-buffer-tool .field-value input { text-align: right; }
.chemh-buffer-tool .field-unit input { text-align: left; }
.chemh-buffer-tool .calculator-form-v10 .form-error { grid-column: 1 / -1; }
.chemh-buffer-tool .recipe-result { padding: 25px 26px 27px; }
.chemh-buffer-tool .recipe-result[data-valid="false"] .table-wrap { min-height: 88px; border-style: dashed; background: #fbfdff; }
.chemh-buffer-tool .table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.chemh-buffer-tool table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.chemh-buffer-tool caption { padding: 11px 14px; background: var(--blue-dark); color: white; font-weight: 760; text-align: left; }
.chemh-buffer-tool th,
.chemh-buffer-tool td { padding: 11px 12px; border-bottom: 1px solid #e0ebf3; text-align: left; vertical-align: top; }
.chemh-buffer-tool thead th { background: var(--blue-soft); color: #34526e; font-size: .875rem; letter-spacing: .045em; text-transform: uppercase; }
.chemh-buffer-tool tbody tr:nth-child(even) { background: #fbfdff; }
.chemh-buffer-tool tbody tr:last-child > * { border-bottom: 0; }
.chemh-buffer-tool td small { margin-top: 3px; display: block; color: var(--muted); font-size: .875rem; }
.chemh-buffer-tool .chemical-formula { white-space: nowrap; font-family: "Cambria Math", "Times New Roman", serif; font-size: 1.03em; }
.chemh-buffer-tool .chemical-formula sub { font-size: .7em; line-height: 0; }
.chemh-buffer-tool .ph-result { margin-top: 17px; padding: 16px 17px; display: block; text-align: left; border: 1px solid #d4e8f5; border-radius: 12px; background: var(--cyan-soft); }
.chemh-buffer-tool .ph-result strong { color: var(--blue-dark); }
.chemh-buffer-tool .ph-result p { margin: 6px 0 0; color: #50677d; font-size: 1rem; }
.chemh-buffer-tool .ph-result-compact { padding-block: 11px; display: block; text-align: left; }
.chemh-buffer-tool .ph-result-compact strong { display: block; }
.chemh-buffer-tool .calculator-card + .global-notice { margin: 0 0 36px; }
.chemh-buffer-tool .selected-workflow { padding: 25px 26px 27px; border-top: 1px solid var(--line); background: #fbfdff; }
.chemh-buffer-tool .selected-workflow h2,
.chemh-buffer-tool .about-buffer-panel > h2,
.chemh-buffer-tool .faq-panel > h2,
.chemh-buffer-tool .sources-panel > h2,
.chemh-buffer-tool .related-panel > h2 { margin-bottom: 13px; font-size: clamp(1.15rem, 2vw, 1.42rem); }
.chemh-buffer-tool .selected-workflow ol { margin: 0; padding-left: 1.3rem; color: #465d73; font-size: 1rem; line-height: 1.65; }
.chemh-buffer-tool .selected-workflow li + li { margin-top: 7px; }
.chemh-buffer-tool .content-panel { margin-top: 21px; padding: clamp(23px, 4vw, 36px); }
.chemh-buffer-tool .about-buffer-panel { margin-top: 24px; border-color: var(--line); background: var(--surface); }
.chemh-buffer-tool .about-buffer-panel > p { margin: 0; color: #465d73; font-size: 1rem; line-height: 1.65; }
.chemh-buffer-tool .instruction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.chemh-buffer-tool .instruction-grid article,
.chemh-buffer-tool .preset-source-list > article { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdff; }
.chemh-buffer-tool .instruction-grid h3,
.chemh-buffer-tool .preset-source-list h3 { margin-bottom: 9px; font-size: .98rem; }
.chemh-buffer-tool .instruction-grid ol { margin: 0; padding-left: 1.2rem; color: #465d73; font-size: 1rem; }
.chemh-buffer-tool .instruction-grid li { margin-bottom: 7px; }
.chemh-buffer-tool .target-label { margin: 11px 0 0; color: var(--blue-dark); font-size: .875rem; font-weight: 760; }
.chemh-buffer-tool .review-hold { padding: clamp(23px,4vw,36px); border: 1px solid #edd5ac; border-radius: 20px; background: #fffbf3; box-shadow: var(--shadow); }
.chemh-buffer-tool .review-hold p:last-child { max-width: 760px; color: #6f5a43; }
.chemh-buffer-tool .review-list,
.chemh-buffer-tool .preset-source-list { display: grid; gap: 11px; }
.chemh-buffer-tool .review-list article { padding: 15px 16px; display: flex; justify-content: space-between; gap: 20px; border: 1px solid #edd5ac; border-radius: 12px; background: #fffbf4; }
.chemh-buffer-tool .review-list h3 { margin: 0; font-size: .94rem; }
.chemh-buffer-tool .review-list p { margin: 4px 0 0; color: #6f5a43; font-size: 1rem; }
.chemh-buffer-tool .review-list span { color: #8b5929; font-size: .875rem; font-weight: 820; text-transform: uppercase; }
.chemh-buffer-tool .preset-source-list p { margin: 5px 0; color: var(--muted); font-size: 1rem; }
.chemh-buffer-tool .preset-source-list ul { margin: 10px 0 0; padding-left: 1.15rem; }
.chemh-buffer-tool .preset-source-list li { margin-bottom: 7px; font-size: 1rem; }
.chemh-buffer-tool .preset-source-list li small { display: block; color: var(--muted); }
.chemh-buffer-tool .current-preset-source > article { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.chemh-buffer-tool .other-preset-sources { margin-top: 14px; border-top: 1px solid var(--line); }
.chemh-buffer-tool .other-preset-sources summary { padding: 15px 2px 4px; color: var(--blue-dark); font-size: 1rem; font-weight: 780; cursor: pointer; }
.chemh-buffer-tool .other-preset-sources .preset-source-list { margin-top: 10px; }
.chemh-buffer-tool .faq-list { display: grid; gap: 10px; }
.chemh-buffer-tool .faq-list details { border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.chemh-buffer-tool .faq-list summary { padding: 14px 16px; color: #284c6a; font-size: 1rem; font-weight: 780; cursor: pointer; }
.chemh-buffer-tool .faq-list details[open] summary { border-bottom: 1px solid var(--line); }
.chemh-buffer-tool .faq-list p { margin: 0; padding: 14px 16px 16px; color: #50677d; font-size: 1rem; }
.chemh-buffer-tool .related-panel ul { margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; }
.chemh-buffer-tool .related-panel li a { height: 100%; padding: 13px 14px; display: block; border: 1px solid var(--line); border-radius: 11px; background: #fbfdff; color: var(--blue-dark); font-size: .9375rem; font-weight: 740; text-decoration: none; }
.chemh-buffer-tool .related-panel li a:hover { border-color: #9dc5e4; background: var(--blue-soft); }
.chemh-buffer-tool .browse-all-link { color: var(--blue-dark); font-size: 1rem; font-weight: 760; }
.chemh-buffer-tool .category-page { padding-block: 31px 0; }
.chemh-buffer-tool .category-page .directory-panel { padding-top: 0; }

/* Footer */
.chemh-buffer-tool .site-footer { margin-top: 56px; padding: 30px 24px 36px; border-top: 1px solid #d3e4f1; background: #eaf5ff; font-size: inherit; }
.chemh-buffer-tool .footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.chemh-buffer-tool .footer-copy { display: grid; }
.chemh-buffer-tool .site-footer p { margin: 0; color: #5c7086; font-size: inherit; }
.chemh-buffer-tool .footer-copy p { font-size: .875rem; line-height: 1.5; }
.chemh-buffer-tool .footer-copy p + p { margin-top: 4px; }
.chemh-buffer-tool .footer-links { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: inherit; line-height: 1.4; }
.chemh-buffer-tool .footer-links a { display: inline-flex; align-items: center; color: #385d80; font-size: inherit; font-weight: 780; text-decoration: none; }
.chemh-buffer-tool .footer-links a + a::before { margin-right: 10px; color: #7890a5; content: "·"; }
.chemh-buffer-tool .site-footer .footer-copyright { margin-top: 14px; font-size: .875rem; font-weight: 500; line-height: 1.4; }

@media (max-width: 980px) {
  .chemh-buffer-tool .buffer-grid { grid-template-columns: repeat(2, 1fr); }
  .chemh-buffer-tool .directory-filters { grid-template-columns: 1.3fr 1fr 1fr; }
  .chemh-buffer-tool .directory-filters .button { width: 100%; }
  .chemh-buffer-tool .calculator-form-v10 { grid-template-columns: 1.3fr .7fr .5fr; }
}

@media (max-width: 720px) {
  .chemh-buffer-tool .shell { width: min(100% - 28px, 1160px); }
  .chemh-buffer-tool .header-inner { min-height: 65px; }
  .chemh-buffer-tool .brand { width: 138px; height: 51px; }
  .chemh-buffer-tool .header-identity { gap: 10px; }
  .chemh-buffer-tool .site-title { padding-left: 10px; font-size: 1.125rem; }
  .chemh-buffer-tool .directory-filters { grid-template-columns: 1fr 1fr; }
  .chemh-buffer-tool .ph-filter-controls { grid-template-columns: 1fr 1fr; }
  .chemh-buffer-tool .ph-filter-controls .ph-reset { grid-column: 1 / -1; width: 100%; }
  .chemh-buffer-tool .field-search { grid-column: 1 / -1; }
  .chemh-buffer-tool .guide-hero { display: grid; }
  .chemh-buffer-tool .calculator-form-v10 { grid-template-columns: 1fr 1fr; }
  .chemh-buffer-tool .preset-field { grid-column: 1 / -1; }
  .chemh-buffer-tool .instruction-grid { grid-template-columns: 1fr; }
  .chemh-buffer-tool .related-panel ul { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .chemh-buffer-tool .shell { width: min(100% - 22px, 1160px); }
  .chemh-buffer-tool .brand { width: 120px; }
  .chemh-buffer-tool .buffer-grid,
  .chemh-buffer-tool .directory-filters,
  .chemh-buffer-tool .calculator-form-v10 { grid-template-columns: 1fr; }
  .chemh-buffer-tool .directory-filters > *,
  .chemh-buffer-tool .calculator-form-v10 > * { grid-column: 1; }
  .chemh-buffer-tool .field-value input,
  .chemh-buffer-tool .field-unit input { text-align: left; }
  .chemh-buffer-tool .directory-filter-interface { padding: 17px; }
  .chemh-buffer-tool .filter-tabs { width: 100%; }
  .chemh-buffer-tool .filter-tab { flex: 1; padding-inline: 10px; }
  .chemh-buffer-tool .ph-filter-heading { align-items: flex-start; }
  .chemh-buffer-tool .ph-range-output { padding-inline: 10px; font-size: .875rem; }
  .chemh-buffer-tool .calculator-heading,
  .chemh-buffer-tool .calculator-form-v10,
  .chemh-buffer-tool .recipe-result { padding-inline: 18px; }
}

@media (max-width: 640px) {
  .chemh-buffer-tool .site-footer { padding: 26px 20px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chemh-buffer-tool * { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  body:has(.chemh-buffer-tool) { background: white; }
  .chemh-buffer-tool .site-footer,
  .chemh-buffer-tool .breadcrumbs,
  .chemh-buffer-tool .calculator-actions,
  .chemh-buffer-tool .calculator-form-v10,
  .chemh-buffer-tool .review-panel,
  .chemh-buffer-tool .global-notice { display: none !important; }
  .chemh-buffer-tool .site-header { position: static; background: white; }
  .chemh-buffer-tool .calculator-card { border: 0; box-shadow: none; }
  .chemh-buffer-tool .calculator-heading,
  .chemh-buffer-tool .recipe-result { padding-inline: 0; }
}