html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height, 100px) + 78px); }
body { --header-height: 100px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.container { width: min(1320px, 66vw); margin: auto; }
.nav-links a[aria-current="page"] { color: var(--blue); }
.nav-links a { white-space: nowrap; }
.calc-intro { padding-bottom: 36px; }
.breadcrumbs { padding: 28px 0; }
.calc-eyebrow { margin: 0 0 12px; color: var(--blue); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.calc-intro h1 { max-width: 896px; margin: 0; font-size: clamp(36px, 4.1vw, 56px); line-height: 1.12; letter-spacing: -.045em; font-weight: 700; }
.calc-lead { margin: 18px 0 10px; font-size: clamp(18px, 2vw, 24px); color: #30465c; }
.calc-description { max-width: 896px; margin: 36px 0 0; color: #465667; font-size: 15px; line-height: 1.75; }
.calc-tabs { position: sticky; top: var(--header-height); z-index: 4; padding: 10px 0; border-block: 1px solid rgba(219,229,239,.8); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.calc-tabs > div { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.calc-tabs a { flex: 0 0 auto; padding: 9px 15px; border-radius: 10px; font-size: 12px; color: #36465b; white-space: nowrap; }
.calc-tabs a:hover { background: #eaf2fa; }
.calc-tabs a[aria-current="location"] { color: #fff; background: var(--blue); }
.calc-sections { padding-bottom: 48px; }
.calc-section { padding-top: 48px; scroll-margin-top: 16px; }
.calc-section-head { margin-bottom: 24px; }
.calc-section-head h2 { margin: 0 0 10px; font-size: clamp(24px, 2.5vw, 30px); line-height: 1.25; letter-spacing: -.025em; font-weight: 660; }
.calc-section-head > p:last-child { max-width: 820px; margin: 0; color: #465667; font-size: 14px; }
.calc-card { padding: clamp(22px, 3.1vw, 42px); border: 1px solid rgba(255,255,255,.92); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 12px 35px rgba(25,61,93,.05); }
.stock-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px 54px; }
.calc-fields { display: grid; gap: 25px; }
.preset-group { min-width: 0; padding: 0; margin: 0; border: 0; }
.preset-group legend { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 15px; font-weight: 620; }
.step-number { width: 25px; height: 25px; display: inline-grid; place-items: center; border: 1px solid #bcd9ef; border-radius: 50%; color: var(--blue); background: #e9f2fb; font-size: 12px; }
.preset-group p { margin: 0 0 12px; color: #65758a; font-size: 12px; }
.preset-options, .sequence-presets, .calc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-options button, .sequence-presets button, .mode-buttons button { min-height: 42px; padding: 8px 17px; border: 1px solid #e2e8f0; border-radius: 10px; color: #34465d; background: #fff; font-size: 13px; transition: background .16s, border-color .16s; }
.preset-options button:hover, .sequence-presets button:hover, .mode-buttons button:hover { border-color: #8db8da; }
.preset-options button[aria-pressed="true"], .mode-buttons button[aria-pressed="true"] { border-color: var(--blue); color: #fff; background: var(--blue); }
.custom-value { display: grid; gap: 6px; max-width: 260px; margin-top: 12px; color: #52657a; font-size: 12px; }
.custom-value input, .field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #d4dfeb; border-radius: 9px; color: #24374b; background: #fff; font-size: 15px; }
.custom-value input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #619ac8; }
.field input[aria-invalid="true"], .custom-value input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #cd5b5b; }
.field textarea { resize: vertical; line-height: 1.65; letter-spacing: .12em; font-family: ui-monospace, Consolas, monospace; }
.calc-results { min-width: 0; padding: 24px; border: 1px solid #e1ebf5; border-radius: 14px; background: linear-gradient(140deg, #f9fcff, #edf5fc); text-align: center; align-self: start; }
.result-kicker { margin: 0 0 10px; color: #66788f; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.hero-result { display: block; color: #245d91; font-size: clamp(27px, 3vw, 38px); font-weight: 680; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.volume-gauge { display: block; width: 166px; height: 208px; margin: 12px auto 0; }
.volume-gauge text { fill: #557087; font-family: inherit; font-size: 11px; }
.calc-muted { margin: 10px 0 0; color: #697c91; font-size: 12px; line-height: 1.6; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 22px; }
.result-grid > div { min-width: 0; }
.result-grid span, .sequence-metrics span { display: block; color: #647890; font-size: 11px; margin-bottom: 5px; }
.result-grid output { display: block; color: #234f77; font-size: 19px; font-weight: 650; overflow-wrap: anywhere; }
.calc-card-bottom { grid-column: 1 / -1; border-top: 1px solid #e1e9f1; padding-top: 20px; }
.calc-formula { margin: 20px 0 0; color: #5a7086; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.calc-card-bottom .calc-formula { margin-top: 0; }
.neighbor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.neighbor-grid > div { padding: 13px; border: 1px solid #e4ebf2; border-radius: 10px; font-size: 12px; color: #647890; text-align: center; }
.neighbor-grid strong { display: block; margin-top: 4px; color: #2b5d88; font-size: 17px; font-weight: 620; }
.calc-actions { margin-top: 20px; }
.calc-button { min-height: 40px; padding: 8px 14px; border: 1px solid #bad5eb; border-radius: 9px; color: var(--blue); background: #f1f7fd; font-size: 12px; font-weight: 600; }
.calc-button:hover { background: #e2f0fb; }
.calc-button:disabled { opacity: .45; cursor: not-allowed; }
.mode-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px; align-items: start; }
.input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 16px; }
.field { min-width: 0; display: grid; align-content: start; gap: 7px; color: #455a70; font-size: 12px; }
.wide { grid-column: 1 / -1; }
.calc-error { margin: 18px 0 0; padding: 12px 15px; border: 1px solid #ecc8c8; border-radius: 9px; color: #9b3d3d; background: #fff6f6; font-size: 13px; }
.mix-bar { overflow: hidden; height: 28px; margin: 30px 0 10px; border: 1px solid #bcd5e9; border-radius: 9px; background: #dcebf7; }
.mix-bar span { display: block; height: 100%; width: 20%; background: #397eb5; transition: width .2s; }
.mix-legend { display: flex; justify-content: space-between; font-size: 11px; color: #5580a5; }
.table-scroll { overflow-x: auto; }
.table-scroll:not(.calc-card) { margin-top: 26px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th { padding: 13px 14px; border-bottom: 1px solid #d4e0eb; color: #657a90; font-size: 11px; font-weight: 600; white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid #e8eef4; color: #374f65; }
tbody tr:last-child td { border-bottom: 0; }
caption { padding: 0 0 14px; color: #718298; font-size: 12px; text-align: left; caption-side: bottom; }
.tube-rack { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 22px 0; }
.tube-rack span { width: 17px; height: 43px; border: 1px solid #7fabce; border-top: 5px solid #397cae; border-radius: 4px 4px 8px 8px; background: linear-gradient(to top, #b4d5ed 72%, #fff 72%); }
.sequence-presets { margin: 13px 0 22px; }
.sequence-presets button { min-height: 35px; padding: 6px 13px; font-size: 11px; }
.residue-strip { display: flex; flex-wrap: wrap; gap: 5px; max-height: 156px; overflow-y: auto; padding: 3px 0; margin-bottom: 22px; }
.residue-strip span { display: inline-grid; place-items: center; width: 29px; height: 32px; border: 1px solid #b5cfe2; border-radius: 5px; background: #edf5fb; color: #37658d; font-family: ui-monospace, monospace; font-size: 12px; }
.sequence-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sequence-metrics > div { min-width: 0; padding: 18px; border: 1px solid #dce7f1; border-radius: 12px; background: #f5f9fd; }
.sequence-metrics output { display: block; color: #285d88; font-size: 23px; font-weight: 630; overflow-wrap: anywhere; }
.ph-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 28px; color: #536c82; font-size: 13px; }
.ph-control input { grid-column: 1 / -1; width: 100%; margin: 2px 0 10px; accent-color: var(--blue); cursor: pointer; }
.charge-chart { margin: 12px 0; border: 1px solid #e3eaf2; border-radius: 12px; background: #fbfdff; }
.charge-chart svg { display: block; width: 100%; touch-action: pan-y; }
.charge-chart text { fill: #71859a; font-family: inherit; font-size: 11px; }
[data-use-sequence] { margin-top: 14px; }
.calc-note { margin: 22px 0 0; color: #64768b; font-size: 12px; line-height: 1.7; }
.calc-note .guide-link { color:var(--calc-accent); }
.calc-note .guide-link:hover { text-decoration:underline; text-underline-offset:3px; }
.calc-method { margin-top: 12px; color: #536c82; font-size: 12px; }
.calc-method a { color: var(--blue); text-decoration: underline; }
summary { cursor: pointer; }
.faq-list details + details { border-top: 1px solid #e1e8f0; }
.faq-list summary { padding: 17px 0; color: #29455e; font-size: 14px; font-weight: 600; }
.faq-list p { max-width: 880px; margin: 0 0 20px; color: #64778c; font-size: 13px; line-height: 1.8; }
.calc-footnote { margin: 30px 0 0; color: #627a90; font-size: 12px; text-align: center; }
.calc-search-results { position: absolute; z-index: 8; width: min(500px, calc(100vw - 48px)); margin: 0; padding: 8px; border: 1px solid #d5e1ed; border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 12px 24px #17395e1a; list-style: none; }
.calc-search-results a { display: block; padding: 10px; color: #365a7c; font-size: 13px; border-radius: 6px; }
.calc-search-results a:hover { background: #edf5fc; }
.footer { margin-top: 0; }
@media (max-width: 1100px) {
  .stock-layout { gap: 26px; }
  .two-column { gap: 24px; }
}
@media (max-width: 960px) {
  .header-inner, .search-inner, .container { width: calc(100% - 48px); }
}
@media (max-width: 700px) {
  .container { width: min(calc(100% - 36px), 520px); }
  .header-inner { width: 100%; padding: 10px 16px 4px; gap: 4px 14px; }
  .search-inner { width: 100%; padding-inline: 16px; }
  .nav-links { justify-content: flex-start; gap: 22px; padding-block: 7px; overflow-x: auto; }
  .nav-links a { flex: 0 0 auto; font-size: 11px; }
  .brand-mark { width: 36px; height: 36px; font-size: 20px; border-radius: 10px; }
  .brand-name { font-size: 21px; }
  .brand-caption { font-size: 8px; }
  .notice { grid-template-columns: 24px minmax(0,1fr) 24px; gap: 4px; padding-inline: 8px; }
  .promo-item { gap: 6px; padding: 0; }
  .promo-label { font-size: 8px; padding-inline: 5px; }
  .promo-copy { font-size: 9px; }
  .promo-arrow { width: 24px; }
  .promo-arrow svg { width: 13px; }
  .breadcrumbs { padding: 20px 0; font-size: 11px; }
  .calc-intro { padding-bottom: 26px; }
  .calc-description { font-size: 13px; }
  .calc-tabs { padding-block: 7px; }
  .calc-tabs a { padding: 8px 12px; font-size: 11px; }
  .calc-section { padding-top: 32px; }
  .calc-section-head > p:last-child { font-size: 13px; }
  .calc-card { padding: 20px 17px; border-radius: 15px; }
  .stock-layout, .two-column { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .preset-options { gap: 6px; }
  .preset-options button { padding: 8px 12px; font-size: 12px; }
  .calc-results { padding: 22px 17px; }
  .volume-gauge { height: 180px; margin-top: 6px; }
  .neighbor-grid { gap: 6px; }
  .neighbor-grid > div { padding: 10px 6px; }
  .neighbor-grid strong { font-size: 15px; }
  .input-grid { gap: 15px 12px; }
  .mode-buttons button { font-size: 12px; padding-inline: 12px; }
  .sequence-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sequence-metrics > div { padding: 14px 12px; }
  .sequence-metrics output { font-size: 19px; }
  .footer-main { grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 380px) {
  .container { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Complete calculator cards: shared desktop rows, diagrams and readouts. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.calc-section { padding-top:56px; }
.calc-section-head h2 { font-size:26px; }
.calc-card { padding:32px; border-radius:12px; background:rgba(255,255,255,.91); }
.calc-eyebrow { font-size:10px; letter-spacing:.14em; }
.calc-tabs a { font-size:11px; text-transform:uppercase; letter-spacing:.055em; }
.stock-layout { grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); gap:40px; }
.stock-gauge-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; text-align:center; }
.stock-gauge-panel .volume-gauge { height:280px; width:225px; margin:0 0 6px; }
.stock-gauge-panel .hero-result { font-size:30px; }
.stock-gauge-panel .calc-muted { margin-top:5px; }
.compact-preset { display:none; }
.subheading, .info-strip h3, .worked-example h3 { margin:0 0 12px; color:#668097; font-size:10px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.preset-group legend { font-size:14px; }
.preset-options button { min-height:38px; padding:8px 17px; border-radius:8px; }
.custom-value input, .field input, .field select, .field textarea { min-height:40px; padding:8px 11px; border-radius:7px; font-size:13px; }
.field { gap:8px; font-size:10px; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; color:#60788d; }
.field input, .field select, .field textarea { letter-spacing:normal; text-transform:none; }
.field textarea { font-family:ui-monospace,Consolas,monospace; letter-spacing:.13em; font-size:15px; padding:14px; }
input[type=range] { accent-color:var(--blue); cursor:pointer; width:100%; min-height:20px; padding:0; margin:0; }
.input-grid { gap:20px 16px; }
.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.span-3 { grid-column:span 3; }
.input-help { margin:16px 0 0; max-width:680px; color:#72849a; font-size:11px; line-height:1.7; align-self:center; }
.joined-input { display:flex; gap:6px; min-width:0; }
.joined-input input { flex:1; min-width:0; width:55%; }
.joined-input select { width:75px; flex:0 0 75px; padding-inline:8px; }
.mode-buttons { display:inline-flex; padding:4px; border:1px solid #e1eaf3; border-radius:9px; background:#f4f8fb; gap:4px; margin:0 0 20px; }
.mode-buttons button { min-height:34px; padding:7px 14px; font-size:11px; border-radius:6px; border-color:transparent; background:transparent; }
.metrics-grid { display:grid; gap:16px; min-width:0; margin-top:24px; }
.metric { min-width:0; padding:18px 20px; background:rgba(255,255,255,.9); border:1px solid #e4ecf3; border-radius:10px; text-align:left; }
.metric .result-kicker { display:block; margin:0 0 7px; color:#758ba0; font-size:9px; letter-spacing:.1em; line-height:1.6; overflow-wrap:anywhere; }
.metric output { display:block; color:#1f4b70; font-size:27px; line-height:1.25; font-weight:650; letter-spacing:-.025em; overflow-wrap:anywhere; }
.metric output .metric-unit { display:inline-block; margin:0; font-size:.55em; font-weight:500; color:#6c8a9f; letter-spacing:0; white-space:nowrap; }
.metric small { display:block; margin-top:8px; color:#7b8fa1; font-size:10px; line-height:1.65; }
.formula-strip { padding:12px 16px; margin:0 0 24px; border:1px solid #e7eef5; border-radius:8px; background:#f7fafc; color:#688096; font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
#stock .formula-strip { margin-top:22px; }
.neighbor-grid { margin-top:0; gap:12px; }
.neighbor-grid > div { background:#fafcfe; border-radius:8px; padding:14px; font-size:11px; }
.neighbor-grid strong { font-size:18px; }
.calc-actions { gap:10px; }
.calc-button { display:inline-flex; align-items:center; justify-content:center; border-radius:7px; font-size:11px; min-height:35px; padding:7px 12px; }
.worked-example { margin-top:24px; padding:18px 22px; max-width:768px; border:1px solid #d5e5f2; border-left:3px solid #3e84b6; border-radius:9px; background:rgba(244,249,253,.82); color:#61798f; }
.worked-example h3 { color:#306898; margin-bottom:9px; }
.worked-example ol { list-style:none; padding:0; margin:0; font-size:12px; line-height:1.85; }
.worked-example li + li { margin-top:3px; }
.worked-example ol { list-style:decimal; padding-left:1.2em; }
.molar-readouts { display:grid; grid-template-columns:160px minmax(0,1fr); gap:28px; align-items:center; margin-top:28px; }
.molar-readouts .metrics-grid { margin:0; }
#molarity .molar-unit-input { position:relative; display:block; min-width:0; }
#molarity .molar-unit-input input { padding-right:46px; appearance:textfield; }
#molarity .molar-unit-input input::-webkit-inner-spin-button,
#molarity .molar-unit-input input::-webkit-outer-spin-button { appearance:none; margin:0; }
#molarity .molar-unit-input > span { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--calc-muted); font-size:11px; letter-spacing:normal; text-transform:none; pointer-events:none; }
#molarity .molar-field-note { color:var(--calc-muted); font-size:11px; line-height:1.375; letter-spacing:normal; text-transform:none; font-weight:400; }
#molarity .molar-vial-density { margin:0; color:var(--calc-accent); font-size:12px; }
#molarity .metric output { color:var(--calc-heading); }
#molarity .metric [data-out="molar-concentration"] { color:var(--calc-accent); }
.vial-panel { text-align:center; }
.vial-panel .subheading { margin-bottom:0; }
.vial-panel svg { width:160px; max-width:100%; height:208px; display:block; margin:auto; }
.vial-panel svg text { font:11px ui-sans-serif,system-ui,sans-serif; fill:#376683; }
.vial-panel .calc-muted { margin:0; font-size:10px; }
.molar-scale { margin-top:30px; padding:20px 16px 10px; border:1px solid #e7eef5; border-radius:9px; background:#fafcfe; }
.log-track { position:relative; height:7px; margin:48px 7px 12px; border-radius:6px; background:linear-gradient(90deg,#d9efea,#89c7ca,#5d98be,#335789); }
.log-track > span { position:absolute; top:-11px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #295f90; transform:translateX(-50%); }
.log-track output { position:absolute; left:0; bottom:13px; transform:translateX(-50%); white-space:nowrap; color:#245e8c; font-size:12px; font-weight:600; }
.log-track [data-edge=left] output { transform:translateX(0); }
.log-track [data-edge=right] output { transform:translateX(-100%); }
.log-labels { display:flex; justify-content:space-between; gap:3px; font-size:9px; color:#8596a7; }
.molar-scale .calc-muted:empty { display:none; }
.dilution-readouts { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:center; gap:24px; margin-top:26px; }
.dilution-readouts .metrics-grid { margin:0; }
#dilution .dilution-unit-input { position:relative; display:block; min-width:0; }
#dilution .dilution-unit-input input { padding-right:70px; appearance:textfield; }
#dilution .dilution-unit-input input::-webkit-inner-spin-button,
#dilution .dilution-unit-input input::-webkit-outer-spin-button { appearance:none; margin:0; }
#dilution .dilution-unit-input > span { position:absolute; top:50%; right:12px; transform:translateY(-50%); font-size:11px; color:var(--calc-muted); text-transform:none; letter-spacing:normal; pointer-events:none; }
#dilution .dilution-field-note { font-size:11px; line-height:1.375; color:var(--calc-muted); text-transform:none; letter-spacing:normal; font-weight:400; }
#dilution .dilution-readouts { align-items:start; }
#dilution .dilution-readouts .metric output { color:var(--calc-heading); }
#dilution .dilution-readouts .metric [data-out="dilution-transfer"] { color:var(--calc-accent); }
#dilution .dilution-readouts .metric-unit { margin-left:.2em; }
#dilution .transfer-panel { padding:20px 12px; border-radius:12px; background:rgba(255,255,255,.65); text-align:center; }
#dilution .transfer-panel svg { width:100%; max-width:230px; }
#dilution .transfer-panel .tube-title { fill:var(--calc-muted); font-size:12px; }
#dilution .transfer-panel .tube-concentration { fill:var(--calc-accent); font-size:11px; }
#dilution .transfer-panel .transfer-volume { fill:var(--calc-muted); font-size:9px; }
#dilution .transfer-panel .calc-muted { font-size:11px; }
.transfer-panel svg { display:block; width:230px; max-width:100%; margin:auto; }
.transfer-panel text { fill:#64829a; font-family:inherit; font-size:10px; }
.serial-controls { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:start; margin-top:24px; }
.serial-controls .preset-group legend { font-size:10px; color:#657f96; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; }
.range-field { position:relative; }
.range-field > output { position:absolute; top:0; right:0; }
.range-labels { display:flex; justify-content:space-between; font-size:10px; color:#8b9cad; }
.rack-panel { margin-top:26px; padding:20px; background:#f7fafc; border:1px solid #e3edf5; border-radius:10px; }
.rack-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rack-heading .subheading { margin:0; }
.rack-heading output { color:#5280a2; font-size:11px; }
.serial-rack, .tube-rack { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.serial-rack svg { width:calc((100% - 88px)/12); min-width:58px; max-width:110px; flex:1; }
.tube-rack svg { width:calc((100% - 72px)/10); max-width:90px; min-width:34px; flex:1 1 34px; }
.serial-rack text, .tube-rack text { fill:#7290a7; font-size:10px; font-family:inherit; }
.rack-panel > .calc-muted { text-align:center; font-size:10px; margin-top:12px; }
.info-strip { border:1px solid #d5e4f0; border-left:3px solid #4d90bc; border-radius:8px; background:#f2f7fc; padding:17px 20px; margin-top:24px; color:#5c768e; }
.info-strip h3 { color:#3e6f96; margin-bottom:8px; }
.info-strip p { margin:5px 0 0; font-size:12px; line-height:1.8; }
.info-strip strong { font-weight:600; font-size:13px; color:#2e5879; }
#aliquots .aliquot-unit-input { position:relative; display:block; min-width:0; }
#aliquots .aliquot-unit-input input { padding-right:56px; appearance:textfield; }
#aliquots .aliquot-unit-input input::-webkit-inner-spin-button,
#aliquots .aliquot-unit-input input::-webkit-outer-spin-button { appearance:none; margin:0; }
#aliquots .aliquot-unit-input > span { position:absolute; top:50%; right:12px; transform:translateY(-50%); font-size:11px; color:var(--calc-muted); text-transform:none; letter-spacing:normal; pointer-events:none; }
#aliquots .aliquot-field-note { font-size:11px; line-height:1.375; color:var(--calc-muted); text-transform:none; letter-spacing:normal; font-weight:400; }
#aliquots .mode-buttons { margin-top:20px; margin-bottom:0; }
.storage-card { border:1px solid #e2eaf2; border-radius:10px; padding:24px; margin-top:24px; background:rgba(250,252,254,.9); }
.storage-layout { display:grid; grid-template-columns:95px minmax(0,1fr); align-items:center; gap:24px; }
.thermometer { width:80px; height:285px; }
.storage-row { display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1.2fr); gap:20px; padding:14px 0; border-bottom:1px solid #e5edf4; align-items:start; }
.storage-row:last-child { border-bottom:0; }
.storage-row strong { font-size:20px; font-weight:600; color:#376582; }
.storage-row span { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#8496a7; }
.storage-row p { margin:4px 0 0; font-size:12px; color:#4b657c; }
.storage-card .calc-note { font-size:11px; margin-top:12px; }
.sequence-presets button { border-radius:6px; min-height:29px; padding:5px 10px; font-size:10px; }
.sequence-presets button[aria-pressed=true] { border-color:#8bb7d7; background:#edf5fb; color:#2c668f; }
#sequence {
 --sequence-basic:#2a78d6;
 --sequence-acidic:#eb6834;
 --sequence-polar:#36363c;
 --sequence-hydrophobic:#1baf7a;
 --sequence-structural:#cdd2d9;
}
.residue-strip { margin-bottom:20px; }
.residue-strip span {
 width:28px; height:30px; color:var(--calc-heading);
 background:color-mix(in srgb,var(--residue-tint-source) var(--residue-tint,24%),transparent);
 border-color:color-mix(in srgb,var(--residue-tint-source) var(--residue-border-tint,52%),transparent);
}
.residue-strip [data-kind=basic] { --residue-tint-source:var(--sequence-basic); }
.residue-strip [data-kind=acidic] { --residue-tint-source:var(--sequence-acidic); }
.residue-strip [data-kind=hydrophobic] { --residue-tint-source:var(--sequence-hydrophobic); }
.residue-strip [data-kind=polar] { --residue-tint-source:var(--sequence-structural); --residue-tint:70%; --residue-border-tint:98%; }
.residue-strip [data-kind=structural] { --residue-tint-source:var(--sequence-structural); --residue-tint:34%; --residue-border-tint:62%; border-style:dashed; }
.residue-strip small { font-size:11px; color:#7c8fa0; }
.composition-bar { display:flex; height:12px; overflow:hidden; border-radius:5px; background:#edf3f7; }
.composition-bar span { height:100%; min-width:0; }
.composition-legend { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:15px 0 24px; }
.composition-legend span { display:flex; align-items:center; gap:6px; text-transform:uppercase; font-size:9px; letter-spacing:.05em; color:#7c8d9e; }
.composition-legend i { display:block; flex-shrink:0; width:6px; height:6px; border-radius:50%; }
.composition-legend strong { display:block; color:#596f82; font-size:12px; font-weight:500; margin:4px 0 0 12px; }
.sequence-metrics { margin-top:0; }
.sequence-metrics > .metric { padding:18px 20px; border-radius:10px; background:white; }
.sequence-metrics output { font-size:25px; }
.sequence-metrics .result-kicker { font-size:9px; margin-bottom:7px; }
.ph-panel { margin-top:24px; padding:18px 20px; background:#f8fbfd; border:1px solid #e3ecf4; border-radius:9px; }
.ph-control { margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.ph-control output { font-size:11px; text-transform:none; letter-spacing:0; color:#447697; }
.ph-control input { margin:8px 0 5px; }
.ph-warning { margin:10px 0 0; font-size:11px; color:#99723c; }
.charge-chart { margin-top:20px; padding:18px 20px; border-radius:9px; }
.charge-chart svg { max-height:320px; }
.charge-chart > .calc-muted { text-align:center; font-size:10px; }
.absorbance-card { margin-top:20px; padding:20px; border:1px solid #e4ebf2; border-radius:9px; background:#fafcfe; }
.absorbance-card p { font-size:12px; color:#637b90; line-height:1.8; margin:0; }
.calc-note { font-size:11px; }
.calc-method { font-size:11px; line-height:1.8; }
.calc-method p { color:#6a8094; }
.table-scroll table { font-size:12px; }
.table-scroll td, .table-scroll th { padding:12px; }
.mw-reference td:nth-child(1) { width:120px; font-variant-numeric:tabular-nums; color:#356181; }
.mw-reference td:nth-child(2) { width:245px; }
.mw-reference td:nth-child(3) { color:#7c8fa0; }
.sequence-cell { font-family:ui-monospace,Consolas,monospace; font-size:10px; overflow-wrap:anywhere; }

.faq-list summary { font-size:14px; padding:20px 0; }
.glossary-card { position:relative; isolation:isolate; margin-top:48px; padding:64px 0; }
.glossary-card::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:rgba(248,250,253,.5); box-shadow:0 0 0 100vmax rgba(248,250,253,.5); clip-path:inset(0 -100vmax); }
.glossary-card h3 { margin:0 0 24px; color:var(--calc-heading); font-size:30px; line-height:1.2; letter-spacing:-.03em; font-weight:600; }
.glossary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; gap:16px; margin:0; }
.glossary-grid > div { min-width:0; padding:16px; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:rgba(255,255,255,.5); }
.glossary-grid dt { color:var(--calc-accent); font-size:11px; line-height:1.5; letter-spacing:.1em; font-weight:400; text-transform:uppercase; }
.glossary-grid dd { margin:4px 0 0; color:var(--calc-text); font-size:13px; line-height:1.625; }
.calc-cta { display:block; max-width:768px; padding:64px 24px; margin:0 auto; border:0; border-radius:0; background:transparent; text-align:center; }
.calc-cta h3 { margin:0 0 12px; font-size:30px; line-height:1.2; font-weight:600; letter-spacing:-.03em; color:var(--calc-heading); }
.calc-cta p:not(.calc-eyebrow) { font-size:15px; color:var(--calc-text); max-width:720px; margin:0 auto; }
.calc-cta .calc-actions { margin:0; }
@media(max-width:1000px) {
 .cols-4, .cols-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .span-3 { grid-column:span 1; }
 .dilution-readouts { grid-template-columns:160px minmax(0,1fr); gap:18px; }
 .metric { padding:16px; }
 .metric output { font-size:23px; }
 .storage-layout { gap:12px; }
 .storage-row { grid-template-columns:95px 1fr 1fr; gap:12px; }
 .mw-reference { padding:20px; }
}
@media(max-width:700px) {
 .calc-card { padding:20px 17px; }
 .calc-section-head h2 { font-size:23px; }
 .stock-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
 #stock .calc-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
 #stock .preset-group legend { font-size:12px; gap:6px; align-items:flex-start; line-height:1.6; }
 #stock .preset-group p { font-size:10px; min-height:40px; line-height:1.5; }
 #stock .preset-options { display:none; }
 .compact-preset { display:grid; font-size:0; gap:0; }
 .step-number { width:20px; height:20px; font-size:10px; flex:0 0 20px; }
 .stock-gauge-panel { padding:0; }
 .stock-gauge-panel .volume-gauge { height:190px; width:170px; }
 .cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #stock .metrics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
 #stock .metric { padding:13px 9px; }
 #stock .metric output { font-size:18px; }
 .metric .result-kicker { font-size:8px; }
 .metric small { font-size:9px; }
 .metrics-grid { gap:10px; }
 .metric, .sequence-metrics > .metric { padding:15px 12px; }
 .metric output, .sequence-metrics output { font-size:21px; }
 .molar-readouts { grid-template-columns:105px minmax(0,1fr); gap:13px; }
 .vial-panel svg { width:105px; height:160px; }
 .molar-readouts .metric output { font-size:19px; }
 .molar-readouts .metrics-grid { gap:8px; }
 .log-labels { font-size:8px; }
 .log-labels span:nth-child(even) { display:none; }
 .molar-scale { padding:16px 10px 10px; }
 .dilution-readouts { grid-template-columns:1fr; gap:10px; margin-top:20px; }
 .transfer-panel svg { width:195px; }
 .dilution-readouts .metrics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .dilution-readouts .metric { padding:13px 9px; }
 .dilution-readouts .metric output { font-size:18px; }
 .serial-controls { grid-template-columns:1fr; gap:22px; }
 .range-field { max-width:none; }
 .rack-panel { padding:16px 12px; }
 .rack-heading output { font-size:10px; }
 .serial-rack { gap:4px; }
 .serial-rack svg { min-width:60px; max-width:85px; }
 .tube-rack { gap:2px; }
 .tube-rack svg { flex:0 1 calc(20% - 4px); width:calc(20% - 4px); min-width:32px; max-width:65px; }
 .info-strip { padding:15px; }
 .worked-example { padding:16px 18px; }
 .storage-card { padding:17px 13px; }
 .storage-layout { grid-template-columns:30px minmax(0,1fr); gap:10px; }
 .thermometer { width:30px; height:300px; }
 .storage-row { grid-template-columns:1fr 1fr; gap:7px 10px; padding:13px 0; }
 .storage-row > div:first-child { grid-column:1 / -1; display:flex; gap:10px; align-items:baseline; }
 .storage-row strong { font-size:17px; }
 .storage-row p { font-size:10px; }
 .storage-row span { font-size:8px; }
 .composition-legend { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
 .composition-legend span { font-size:8px; }
 .ph-panel { padding:16px 12px; }
 .ph-control { gap:8px; }
 .charge-chart { padding:16px 10px; }
 .charge-chart .rack-heading { flex-wrap:wrap; gap:6px; }
 .charge-chart text { font-size:12px; }
 .mw-reference table { min-width:600px; }

 .calc-cta { padding:48px 16px; }
 .calc-cta h3 { font-size:24px; }
}
@media(max-width:400px) {
 #stock .metric .result-kicker { letter-spacing:0; font-size:7.5px; }
 .neighbor-grid strong { font-size:15px; }
 .molar-readouts { grid-template-columns:1fr; }
 .vial-panel svg { width:125px; height:170px; }
 .molar-readouts .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .stock-gauge-panel .hero-result { font-size:27px; }
 .storage-layout { grid-template-columns:1fr; }
 .thermometer { display:none; }

}

/* Reference typography: keep reading text neutral and use blue for emphasis. */
#main {
 --calc-text: #1a1a1e;
 --calc-muted: #36363c;
 --calc-heading: #050507;
 --calc-accent: #1e5289;
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.calc-description, .calc-lead, .calc-section-head > p:last-child,
.preset-group legend, .custom-value input, .field input, .field select, .field textarea {
 color: var(--calc-text);
}
.calc-section-head > p:last-child { font-size:14px; line-height:1.625; }
.preset-group p, .custom-value, .input-help, .calc-muted, .calc-note, .calc-method,
.calc-method p, .metric small, .metric output .metric-unit, .field,
.subheading, .metric .result-kicker, .range-labels, .log-labels,
.composition-legend span, .composition-legend strong, .storage-row span,
.ph-control, .table-scroll th, .mw-reference td:nth-child(3), .calc-footnote {
 color: var(--calc-muted);
}
.input-help { font-size:11px; line-height:1.375; }
.field, .metric .result-kicker, .subheading { font-weight:400; }
.formula-strip { color:var(--calc-text); font-size:12px; line-height:1.5; }
.info-strip {
 display:flex;
 align-items:flex-start;
 gap:12px;
 padding:12px 16px;
 border:1px solid rgb(112 162 207 / .3);
 border-radius:12px;
 background:rgb(41 104 163 / .05);
 color:var(--calc-text);
}
.info-strip-icon { flex:0 0 16px; width:16px; height:16px; margin-top:2px; color:#2968a3; }
.info-strip-content { flex:1; min-width:0; font-size:12.5px; line-height:1.625; font-weight:400; }
.info-strip h3 { margin:0 0 4px; color:var(--calc-accent); font-size:10px; line-height:1.625; letter-spacing:.12em; font-weight:600; }
.info-strip p { margin:0; color:var(--calc-text); font-size:12.5px; line-height:1.625; font-weight:400; }
.info-strip strong { display:block; margin-bottom:4px; color:var(--calc-heading); font-size:12.5px; line-height:1.625; font-weight:500; }
.info-strip [data-out="sequence-avoid"] { margin-top:8px; color:var(--calc-muted); font-size:11px; line-height:1.5; }
.worked-example h3 { color:var(--calc-muted); font-size:10px; line-height:1.5; letter-spacing:.18em; font-weight:400; }
.worked-example ol { color:var(--calc-text); font-size:13px; line-height:1.625; }
.absorbance-card p, .faq-list p, .glossary-grid dd { color:var(--calc-text); font-size:13px; line-height:1.625; }
.faq-list summary { color:var(--calc-heading); }
.storage-row p, .table-scroll td { color:var(--calc-text); }
.calc-note { font-size:12.5px; line-height:1.625; }
.storage-card .calc-note, #sequence .calc-note { font-size:11.5px; line-height:1.625; }
.calc-cta p:not(.calc-eyebrow) { color:var(--calc-text); font-size:15px; line-height:1.625; }
.ph-control output { color:var(--calc-heading); }
@media(max-width:700px) {
 .calc-section-head > p:last-child { font-size:13px; }
 .calc-note { font-size:12px; }
}

/* English reference presentation across all calculator sections. */
.metric output .metric-unit { margin-left:.2em; }
#aliquots .metric output, #sequence .metric output { color:var(--calc-heading); }
#aliquots .metric [data-out="aliquot-size"], #aliquots .metric [data-out="aliquot-mass"],
#sequence .metric [data-out="sequence-mw"], #sequence .metric [data-out="sequence-pi"] { color:var(--calc-accent); }
.info-strip.calc-warning { border-color:#efd59d; background:rgba(255,248,230,.75); }
.info-strip.calc-warning h3 { color:#8d6422; }
.faq-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; align-items:start; }
.faq-layout .calc-section-head { margin:0; }
.faq-layout .faq-list { padding:0; border:0; box-shadow:none; background:transparent; }
.faq-intro { margin-top:24px; padding:16px 20px; border:1px solid #fecaca; border-radius:12px; background:rgba(254,242,242,.5); }
.faq-intro h3 { margin:0; font-size:13px; line-height:1.625; color:var(--calc-text); font-weight:600; }
.faq-intro p { margin:6px 0 0; font-size:13px; line-height:1.625; color:var(--calc-text); }
.faq-list details p { font-size:14px; line-height:1.625; }
.research-footer-note { margin:0; padding:4px 0; border:0; text-align:center; font-size:13px; line-height:1.625; color:var(--calc-text); }
@media (max-width:1023px) { .faq-layout { grid-template-columns:1fr; gap:24px; } }
@media (max-width:639px) { #molarity .input-grid, #dilution .input-grid, #aliquots .input-grid { grid-template-columns:1fr; } }

.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; font-weight:500; color:var(--calc-text); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:""; flex:0 0 7px; width:7px; height:7px; margin-right:3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .15s ease; }
.faq-list details[open] summary::after { transform:rotate(225deg); }

@media (max-width:1023px) { .glossary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639px) { .glossary-card { margin-top:32px; padding:48px 0; } .glossary-card h3 { font-size:24px; } .glossary-grid { grid-template-columns:1fr; grid-auto-rows:auto; } }