:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color-scheme:dark;--bg:#080b0c;--panel:#101617;--line:#253031;--teal:#60d9cc;--muted:#93a5a6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f3f7f6;font:16px var(--font-sans)}header{max-width:1240px;margin:auto;padding:15px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #202829}.brand{display:block;width:240px;height:91px;overflow:hidden}.brand img{width:240px;height:122px;object-fit:cover;transform:translateY(-17px)}.header-label{font-size:12px;letter-spacing:2px;color:var(--muted)}main{max-width:1144px;margin:0 auto;padding:44px 0 24px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;color:var(--teal);display:flex;align-items:center;gap:9px}.eyebrow span{width:18px;height:2px;background:var(--teal)}h1{font:800 clamp(32px,4vw,48px)/1.2 var(--font-sans);letter-spacing:-1.8px;margin:13px 0}h1 em{font-style:normal;color:var(--teal)}.intro>p{color:var(--muted);margin:0 0 32px}.workspace{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}.setup,.results{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--panel)}.results{background:radial-gradient(ellipse at 100% 0%,#19363355,transparent 60%),#0e1718;border-color:#2d4946}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:28px}h2{font:600 18px var(--font-sans);margin:0}.step{font-size:12px;color:var(--teal);border:1px solid #355653;border-radius:6px;padding:5px 7px}button{cursor:pointer;font:inherit}#reset{margin-left:auto;background:none;border:0;color:var(--muted);font-size:14px;padding:8px}label{display:block;color:#c3cece;font-size:14px}input{width:100%;font:500 25px var(--font-sans);background:none;border:0;color:white;outline:none;min-width:0}input:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:3px}.compound input{font:500 16px var(--font-sans);margin-top:10px;background:#0a1011;padding:13px 16px;border:1px solid var(--line);border-radius:9px}.optional{float:right;color:#6f8384;font-size:12px}.field{margin-top:23px}.input-wrap{display:flex;align-items:center;padding:10px 15px;margin-top:9px;border:1px solid #344343;border-radius:9px;background:#0a1011;gap:12px}.input-wrap span{color:var(--muted);font-size:16px}.presets{display:flex;gap:8px;margin-top:10px}.presets button{border:1px solid #2d3b3c;border-radius:6px;background:#162021;color:var(--muted);padding:7px 14px;font-size:14px}.presets button.selected{color:var(--teal);border-color:#3d716b;background:#15302c}.presets button:hover{border-color:var(--teal)}.field-help{color:var(--muted);font-size:13px;line-height:1.6;margin:9px 0 0}.compound-label{color:var(--teal);font-size:12px;letter-spacing:2px;display:block;min-height:18px;overflow-wrap:anywhere}.measurement{display:flex;align-items:baseline;gap:14px;margin-top:10px}.measurement>span:first-child{font:700 clamp(58px,7vw,88px)/1.1 var(--font-sans);letter-spacing:-4px;overflow-wrap:anywhere;min-width:0}.unit-label{font-size:27px;color:var(--teal)}.volume{color:var(--muted);font-size:16px;margin:12px 0 35px}.volume strong{color:#eaf3f2;font-weight:500}.scale-title{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:14px;gap:12px}.ruler{position:relative;height:44px;border-bottom:1px solid #4c6462;background:#101c1d;border-radius:4px 4px 0 0;overflow:visible}.ruler-fill{position:absolute;left:0;bottom:0;height:100%;background:linear-gradient(90deg,#1b454044,#3b9c8966);width:20%;transition:width .2s}.ticks{height:100%;position:relative;display:flex;justify-content:space-between;align-items:flex-end}.ticks i{width:1px;height:13px;background:#52716d}.ticks i.major{height:28px;background:#7a9994}.marker{position:absolute;z-index:2;left:20%;top:-5px;height:49px;width:2px;background:var(--teal);transition:left .2s}.marker:before{content:'';position:absolute;top:-3px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--teal)}.scale-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:9px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:35px;padding-top:27px;border-top:1px solid #2c4140}.metrics>div>span{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}.metrics strong{font:600 29px var(--font-sans)}.metrics b{font-weight:600}.metrics small{font:400 14px var(--font-sans);color:var(--muted)}.equation{margin-top:27px;padding:18px;border:1px solid #2b4542;border-radius:10px;background:#102321}.equation>span{font-size:12px;letter-spacing:1.5px;color:var(--teal)}.equation p{font-size:16px;color:#b1c2c0;margin:12px 0 0;line-height:1.7}.equation b{font-weight:500;color:#edf6f5}#error{font-size:14px;line-height:1.5;color:#ffc4a7;background:#442b20;padding:12px;border-radius:6px}.notes{margin-top:24px;border:1px solid var(--line);border-radius:12px;background:#0d1213}.notes summary{cursor:pointer;padding:18px 24px;color:#b5c2c2;font-size:14px;list-style:none}.notes summary span{float:right;font-size:19px;color:var(--teal)}.notes[open] summary span{transform:rotate(45deg)}.notes>div{padding:0 24px 12px;max-width:900px;color:var(--muted);font-size:14px;line-height:1.7}footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;color:#728687;font-size:12px}footer>span{letter-spacing:2px;font-weight:700}footer p{margin:0}button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:4px}@media(max-width:1200px){main{padding:35px 32px 24px}}@media(max-width:700px){header{padding:9px 22px}.brand{width:190px;height:76px}.brand img{width:190px;height:97px;transform:translateY(-11px)}.header-label{font-size:10px;letter-spacing:1px;max-width:65px;line-height:1.7}main{padding:26px 18px 24px}.eyebrow{font-size:10px;letter-spacing:1.5px}h1{font-size:32px;letter-spacing:-1.2px}.intro>p{font-size:14px;margin-bottom:24px}.workspace{grid-template-columns:1fr;gap:18px}.setup,.results{padding:22px;border-radius:16px}.section-heading{margin-bottom:22px}.measurement>span:first-child{font-size:76px}.results{grid-row:2}.field{margin-top:20px}.metrics{gap:12px}.metrics strong{font-size:26px}footer{flex-direction:column;align-items:flex-start;font-size:12px;line-height:1.7}.notes summary{padding:17px 19px}.notes>div{padding:0 19px 10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
[hidden]{display:none!important}.entry-page{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 22px;background:radial-gradient(ellipse at 15% 10%,#11333177,transparent 50%),radial-gradient(ellipse at 100% 100%,#12373466,transparent 55%),#070b0c}.entry-card{width:100%;max-width:630px;text-align:center;padding:22px 40px 32px;border:1px solid #28403e;border-radius:24px;background:linear-gradient(145deg,#101a1bee,#0a1011ee);box-shadow:0 25px 100px #0006}.entry-logo{display:block;width:100%;max-width:460px;margin:0 auto 14px;border-radius:8px}.entry-kicker{font-size:12px;letter-spacing:2.8px;color:var(--teal);margin:12px 0 19px}.entry-card h1{font-size:38px;letter-spacing:-1.3px;line-height:1.25;margin:0 0 22px}.entry-card h1 em{display:block}.entry-description{color:#b7c6c5;font-size:16px;line-height:1.75;margin:0 0 25px}.acknowledgments{padding:18px;background:#0a1112;border:1px solid #283c3b;border-radius:12px;text-align:left;display:grid;gap:17px}.acknowledgments label{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.6;color:#d3dfdd;cursor:pointer}.acknowledgments input{appearance:auto;width:19px;height:19px;flex:0 0 19px;margin:2px 0 0;accent-color:var(--teal)}.entry-button{width:100%;padding:17px 20px;background:var(--teal);color:#06231e;border:1px solid var(--teal);border-radius:10px;font-weight:700;font-size:16px;margin-top:22px;transition:background .15s}.entry-button:hover{background:#84e8dd}.entry-caption{font-size:12px;line-height:1.5;color:#899e9d;margin:13px 0 24px}.entry-footnote{border-top:1px solid #263d3a;padding-top:22px}.entry-footnote>span{font-size:12px;letter-spacing:1.6px;color:var(--teal)}.entry-footnote p{font-size:13px;line-height:1.7;color:#8fa6a3;margin:10px 0 0}.entry-copyright{font-size:12px;letter-spacing:3px;color:#6d8884;margin:24px 0 0}.entry-nojs{color:#ffc4a7}#review-disclaimer{float:right;color:#9bb4b0;background:none;border:1px solid #30433f;font-size:12px;border-radius:7px;padding:8px 10px}.entry-page:focus{outline:none}@media(max-width:700px){.entry-page{padding:22px 16px;justify-content:flex-start}.entry-card{padding:12px 22px 26px;border-radius:18px}.entry-logo{margin-bottom:10px}.entry-card h1{font-size:32px}.entry-kicker{margin-top:8px}.entry-description{font-size:15px}.acknowledgments{padding:16px}#review-disclaimer{float:none;display:block;margin:0 0 21px;font-size:12px}}@media(min-width:701px){.entry-page{padding-top:28px;padding-bottom:28px}}

.reconstitution-guide{margin:32px 0 0;padding:28px;border:1px solid #294338;border-radius:14px;background:#0c1514;scroll-margin-top:24px}.reconstitution-guide h2{font-size:clamp(20px,2.5vw,26px);line-height:1.3;margin:14px 0 18px}.reconstitution-guide p,.reconstitution-guide li{font-size:14px;line-height:1.7;color:#b7c9bf}.reconstitution-guide ol{padding-left:24px}.reconstitution-guide li{padding-left:5px;margin:12px 0}.reconstitution-guide strong{color:#edf5ef}@media(max-width:700px){.reconstitution-guide{padding:22px 18px}}

/* Functional syringe scale: teal outlines and a moving volume indicator. */
.syringe-visual{margin:8px 0 0}.syringe-outline{position:relative;width:100%;aspect-ratio:520 / 120;color:var(--teal)}.syringe-outline svg{display:block;width:100%;height:100%;overflow:visible}.syringe-outline .ruler{position:absolute;left:12.307692%;top:25%;width:67.307692%;height:50%;background:transparent;border:0;border-radius:0}.syringe-outline .ruler-fill{background:none;bottom:0;height:100%;border-bottom:2px solid var(--teal);transition:width .2s}.syringe-outline .ticks{align-items:flex-end}.syringe-outline .ticks i{height:28%;background:var(--teal);opacity:.55}.syringe-outline .ticks i.major{height:55%;background:var(--teal);opacity:.9}.syringe-outline .marker{top:0;height:100%;width:2px;box-shadow:none}.syringe-outline .marker:before{top:-5px;left:-4px;width:10px;height:10px;box-sizing:border-box;border:2px solid var(--teal);background:var(--panel)}.syringe-visual .scale-labels{position:relative;display:block;height:20px;margin:3px 0 0 12.307692%;width:67.307692%;font-size:14px;color:var(--teal)}.syringe-visual .scale-labels span{position:absolute;transform:translateX(-50%);top:0}@media(prefers-reduced-motion:reduce){.syringe-outline .ruler-fill,.syringe-outline .marker{transition:none}}

@media(max-width:700px){.syringe-visual .scale-labels{font-size:12px}}

.syringe-outline .ruler-fill{background:var(--teal);border:0;transition:none}.syringe-outline .marker{transition:none;background:#073b35;border-right:1px solid var(--teal);width:3px}.syringe-outline .ticks i.in-liquid,.syringe-outline .ticks i.major.in-liquid{background:#073b35;opacity:.85}

.entry-acceptance{margin:0;padding:18px;text-align:left;background:#0a1112;border:1px solid #283c3b;border-radius:12px;font-size:14px;line-height:1.8;color:#d3dfdd}.entry-button{margin-bottom:24px}@media(max-width:700px){.entry-acceptance{padding:16px}}

/* Centered age verification; branded card, logo, background and padding stay unchanged. */
.entry-age-content{margin:0 auto}.entry-age-icon{display:block;width:52px;height:52px;margin:12px auto 18px;color:var(--teal)}.entry-age-content h1{font-size:clamp(12px,calc(3.8vw - 1px),24px);line-height:1.3;letter-spacing:-.4px;white-space:nowrap;max-width:none;margin:0 auto 18px}.entry-age-content .entry-description{font-size:15px;margin-bottom:24px}.entry-age-actions{display:grid;gap:12px;margin-bottom:24px}.entry-age-actions .entry-button{margin:0;font-size:14px;letter-spacing:.4px}.entry-age-actions .entry-button-secondary{background:#0a1112;color:#d3dfdd;border-color:#304944}.entry-age-actions .entry-button-secondary:hover{background:#152321;border-color:var(--teal)}.entry-age-denied{color:#ffc4a7;font-size:14px;line-height:1.6;margin:0 0 20px}

@media(max-width:700px){.entry-age-content .entry-description{font-size:14px}}

/* Unified research access card. Blend the original logo without altering its artwork. */
.entry-card{max-width:630px;padding:24px 38px 28px;background:#08090b;border-color:#293a36;border-radius:22px}
.entry-logo{max-width:330px;margin:0 auto 8px;border-radius:0;mix-blend-mode:screen}
.entry-age-icon{width:46px;height:46px;margin:8px auto 18px}
.entry-age-content .entry-kicker{font-size:11px;line-height:1.5;letter-spacing:3px;margin:0 0 16px}
.entry-age-content h1{font-size:clamp(27px,5.5vw,36px);font-weight:500;line-height:1.2;letter-spacing:-.8px;white-space:normal;margin:0 0 20px}
.entry-age-content .entry-description{font-size:15px;line-height:1.75;color:#c0c6c4;margin:0 auto 18px;max-width:510px}
.entry-age-content .entry-confirmation{color:#929d98;margin-bottom:28px}
.entry-age-actions{gap:10px;margin-bottom:18px}
.entry-age-actions .entry-button{padding:18px 16px;font-size:13px;letter-spacing:2px;border-radius:12px}
.entry-age-actions .entry-button span{margin-left:12px}
.entry-age-actions .entry-button-secondary{background:transparent;border-color:transparent;font-size:11px;padding:8px;letter-spacing:1px;color:#929d98}
.entry-age-actions .entry-button-secondary:hover{background:#101a17;border-color:#293a36;color:#e4eeea}
.entry-footnote{border-top:0;padding-top:0}.entry-footnote>span{font-size:10px;letter-spacing:2.5px;color:#899b94}
@media(max-width:700px){.entry-page{justify-content:center;padding:22px 16px}.entry-card{padding:20px 23px 24px}.entry-logo{max-width:280px}.entry-age-content .entry-description{font-size:14px;line-height:1.7}.entry-age-content .entry-kicker{font-size:10px;letter-spacing:2.5px}.entry-copyright{font-size:10px;margin-top:18px}}

.setup .mixture-example{font-size:11px;line-height:1.6;color:var(--muted);margin:20px 0 0}

/* Use the same crisp typography as the RETROD beginner guide site-wide. */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:var(--font-sans)}
