@font-face{font-family:Libron;src:url("/fonts/libron/Libron-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Libron;src:url("/fonts/libron/Libron-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--blue:#084b9e;--navy:#1c3049;--red:#9e382e;--green:#089e4b;--paper:#f7f9fc;--ink:#404040;--muted:#53667d;--line:#c9d6e6;--wash:#eaf2fc;--white:#fff;--serif:Libron,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--navy);font:17px/1.55 var(--serif)}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:var(--blue);text-underline-offset:4px}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
input,select{min-width:0}
[hidden]{display:none!important}
.skip-link{position:absolute;left:12px;top:-60px;padding:10px;background:white;z-index:10}
.skip-link:focus{top:12px}
.page{width:min(100% - 60px,1290px);margin:0 auto}
.site-header{height:92px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}
.brand{font:bold 30px/1 var(--serif);letter-spacing:-.04em;color:var(--blue);text-decoration:none}
.brand span{color:var(--red)}
.site-header nav a{font:600 13px/1.3 var(--sans);color:var(--navy);text-decoration:none}
.site-header nav a:hover,.text-button:hover{text-decoration:underline}
.back-arrow{color:var(--blue);margin-right:10px}
.page-intro{padding:42px 0 50px}
.eyebrow{margin:0;color:var(--blue);font:700 10px/1.6 var(--sans);letter-spacing:.15em}
.eyebrow-rule{display:inline-block;width:23px;height:2px;background:var(--red);vertical-align:middle;margin-right:10px}
.intro-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);align-items:end;gap:7%}
h1,h2,h3,p{margin-top:0}
h1{margin:14px 0 18px;font:700 clamp(43px,5.5vw,78px)/1.03 var(--serif);letter-spacing:-.055em;color:var(--navy)}
h1 em{font-weight:400;color:var(--blue)}
.intro-copy{max-width:670px;margin:0;font:19px/1.6 var(--serif);color:var(--muted)}
.intro-diagram{position:relative;align-self:stretch;min-height:205px;padding:14px 20px 12px;border:1px solid var(--line);border-top:3px solid var(--blue);background:white}
.diagram-overline,.diagram-caption{font:700 10px/1.4 var(--sans);letter-spacing:.07em;color:var(--muted)}
.proportion-art{height:122px;display:flex;gap:22px;justify-content:center;align-items:end;padding:11px 25px 0}
.proportion-column{height:100%;flex:1;max-width:72px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.proportion-value{font:700 12px var(--sans);margin-bottom:6px}
.proportion-bar{width:100%;min-height:17px;border-radius:2px 2px 0 0}
.bar-blue{height:30%;background:var(--blue)}.bar-red{height:59%;background:var(--red)}.bar-green{height:88%;background:var(--green)}
.proportion-label{padding-top:5px;font:700 10px var(--sans)}
.diagram-caption{margin:14px 0 0;text-align:center;font-weight:400}
.workspace{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(0,.83fr);gap:22px;align-items:start}
.entry-panel,.output-panel{background:white;border:1px solid var(--line)}
.entry-panel{padding:28px 30px}
.panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
h2{font:700 clamp(23px,2.7vw,33px)/1.15 var(--serif);letter-spacing:-.025em;margin:8px 0 13px}
.small-index{font:700 10px var(--sans);color:var(--muted);white-space:nowrap;letter-spacing:.12em}
.panel-description{font:15px/1.5 var(--serif);color:var(--muted);margin:0 0 24px}
.reagent-list{display:flex;flex-direction:column;gap:13px}
.reagent-card{border:1px solid #d4deea;border-left:5px solid var(--reagent-color);padding:15px 16px 17px;background:#f9fbfe}
.reagent-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.reagent-identity{display:flex;align-items:center;gap:9px;min-width:0}
.reagent-tag{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:4px;background:var(--reagent-color);color:white;font:800 12px/1 var(--sans);flex:none}
.reagent-card-head strong{font:700 14px var(--sans);color:var(--navy)}
.remove-reagent{background:transparent;border:none;font:600 12px var(--sans);color:var(--muted);padding:5px 2px}
.remove-reagent:hover{color:#8b2421;text-decoration:underline}
.remove-reagent:disabled{opacity:.35;cursor:not-allowed;text-decoration:none}
.reagent-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.77fr);gap:9px}
.field{min-width:0}
.field label{display:block;margin:0 0 6px;font:700 11px/1.45 var(--sans);color:var(--navy)}
.field input,.field select{width:100%;height:45px;padding:10px 11px;border:1px solid #aabbcf;border-radius:2px;background:white;font:15px/1.4 var(--sans);color:var(--navy)}
.field input::placeholder{color:#8090a2}
.field input:focus,.field select:focus{border-color:var(--blue)}
.field .unit-hint{display:block;font:11px/1.5 var(--sans);color:var(--muted);padding-top:5px}
.secondary-button{height:44px;padding:0 15px;background:transparent;border:1px solid var(--blue);color:var(--blue);font:700 12px var(--sans)}
.secondary-button:hover{background:var(--wash)}
.secondary-button:disabled{opacity:.4;cursor:not-allowed}
.add-button{width:100%;margin-top:14px}
.plus{font:700 21px var(--sans);line-height:0;position:relative;top:2px;margin-right:8px}
.field-guidance{margin:13px 0 26px;color:var(--muted);font:12px/1.6 var(--sans)}
.field-guidance strong{color:var(--navy)}
.reference-section{padding-top:23px;border-top:1px solid var(--line)}
.reference-heading h2{font-size:27px}
.reference-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.amount-control{display:grid;grid-template-columns:minmax(0,1fr) 79px}
.amount-control input{border-right:0}
.amount-control select{border-left:1px solid var(--line);background:var(--wash);font-weight:700}
.entry-actions{display:flex;justify-content:flex-end;margin-top:22px}
.text-button{padding:7px 0;border:0;background:none;color:var(--muted);font:700 12px var(--sans)}
.output-panel{position:sticky;top:22px;padding:26px 26px 22px;border-top:4px solid var(--blue);box-shadow:0 14px 35px rgba(28,48,73,.055)}
.output-top{display:flex;align-items:start;justify-content:space-between;gap:12px}
.output-top h2{font-size:29px;margin-bottom:16px}
.live-indicator{display:inline-flex;align-items:center;gap:7px;border:1px solid #b6d6c4;background:#f0faf4;color:#176b43;padding:7px 9px;font:700 10px var(--sans);letter-spacing:.09em}
.live-indicator span{width:6px;height:6px;background:var(--green);border-radius:50%}
.validation-message{font:13px/1.6 var(--sans);color:var(--muted);padding:18px 17px;background:#f2f6fb;border-left:3px solid var(--blue);min-height:67px}
.validation-message.has-error{border-left-color:var(--red);background:#fff5f3;color:#813b36}
.validation-message.is-ready{background:#f1f8f5;border-left-color:var(--green);color:#285a43;min-height:auto;padding:11px 15px}
.result-subheading{margin:0;font:700 11px/1.5 var(--sans);letter-spacing:.055em;text-transform:uppercase;color:var(--navy)}
.ratio-display{margin-top:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.ratio-bars{display:flex;flex-direction:column;gap:10px;margin-top:13px}
.ratio-bar-row{display:grid;grid-template-columns:30px minmax(0,1fr) 66px;gap:10px;align-items:center;font:700 11px var(--sans)}
.ratio-bar-tag{display:grid;place-items:center;width:26px;height:26px;background:var(--reagent-color);color:white}
.ratio-bar-track{height:12px;background:#eef2f7;overflow:hidden}
.ratio-bar-fill{height:100%;width:var(--ratio-width);background:var(--reagent-color)}
.ratio-bar-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.result-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:24px 0 8px}
.result-unit{font:700 10px var(--sans);color:var(--muted);letter-spacing:.06em}
.result-row{display:grid;grid-template-columns:5px minmax(0,1fr) auto;column-gap:11px;align-items:center;padding:15px 0;border-bottom:1px solid #e0e8f1}
.result-color{width:5px;height:100%;min-height:40px;background:var(--reagent-color)}
.result-name{font:700 13px/1.45 var(--sans);word-break:break-word;color:var(--navy)}
.result-sub{font:12px/1.5 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.result-mass{font:700 22px/1.3 var(--serif);white-space:nowrap;text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.result-mass span{font:600 12px var(--sans)}
.result-actions{margin-top:23px}
.primary-button{width:100%;padding:13px 10px;background:var(--blue);border:1px solid var(--blue);color:white;font:700 12px/1.4 var(--sans)}
.primary-button:hover:not(:disabled){background:#063c80}
.primary-button:disabled{cursor:not-allowed;opacity:.42}
.copy-icon{font-size:17px;margin-right:9px;vertical-align:-2px}
.copy-feedback{min-height:19px;margin:5px 0 0;font:12px var(--sans);color:var(--green)}
.assumption-note{margin:21px 0 0;border-top:1px solid var(--line);padding-top:17px;color:var(--muted);font:12px/1.6 var(--sans)}
.assumption-note strong{color:var(--navy)}
.method-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9%;padding:75px 0 90px}
.method-section h2{font-size:clamp(29px,3.5vw,43px);margin-top:12px}
.method-section>div>p:not(.eyebrow){max-width:530px;color:var(--muted)}
.formula-panel{padding:25px 29px;border:1px solid var(--line);background:white}
.equation{font:700 clamp(17px,2vw,25px)/1.6 var(--serif);color:var(--blue);margin-bottom:8px}
.equation sub{font-size:.6em}
.formula-panel p,.formula-panel details{font:13px/1.65 var(--sans);color:var(--muted)}
.formula-panel p{margin:13px 0 0}
.formula-panel details{border-top:1px solid var(--line);margin-top:20px;padding-top:13px}
.formula-panel summary{color:var(--blue);cursor:pointer;font-weight:700}
footer{border-top:1px solid var(--line);min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font:13px var(--sans)}
footer p{margin:0}.footer-brand{font-size:22px}
@media(max-width:1100px){.page{width:min(100% - 44px,1290px)}.workspace{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:16px}.entry-panel{padding:22px}.output-panel{padding:22px}.reagent-grid{grid-template-columns:1fr 1fr}.reagent-grid .name-field{grid-column:1/-1}.reference-fields{grid-template-columns:1fr}.intro-layout{gap:25px}}
@media(max-width:760px){.page{width:min(100% - 32px,1290px)}.site-header{height:72px}.brand{font-size:26px}.page-intro{padding:32px 0 30px}.intro-layout{grid-template-columns:1fr;gap:24px}.intro-diagram{display:none}.intro-copy{font-size:17px}.workspace{grid-template-columns:1fr}.output-panel{position:static}.reference-fields{grid-template-columns:1fr 1fr}.method-section{grid-template-columns:1fr;gap:20px;padding:53px 0 60px}.method-section h2{font-size:32px}footer{padding:22px 0;flex-wrap:wrap;min-height:0}}
@media(max-width:480px){.page{width:min(100% - 24px,1290px)}.page-intro h1{font-size:43px}.entry-panel,.output-panel{padding:18px 16px}.reagent-card{padding:13px 11px 14px}.reagent-grid{grid-template-columns:1fr 1fr;gap:9px}.reagent-grid .name-field{grid-column:1/-1}.reference-fields{grid-template-columns:1fr}.field input,.field select{height:44px;padding:8px}.output-top h2{font-size:25px}.result-mass{font-size:18px}.method-section{padding:40px 0 54px}.formula-panel{padding:18px}.site-header nav a{font-size:12px}footer a:last-child{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}