.syringe-visual{margin:0 0 14px;padding:18px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(145deg,#11245d,#0e2055);overflow:hidden}
.syringe-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.syringe-heading>div>span{display:block;color:var(--muted);font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.12em}
.syringe-heading strong{display:block;margin-top:5px;font:600 16px 'Space Grotesk',sans-serif}
.syringe-heading output{color:#fff;font:600 18px 'IBM Plex Mono',monospace;white-space:nowrap}
.syringe-stage{position:relative;height:72px;margin:16px 38px 0 34px}
.syringe-barrel{position:absolute;left:8%;right:18%;top:15px;height:40px;border:2px solid #c2d2fc;border-radius:5px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 14px rgba(255,255,255,.04)}
.syringe-liquid{position:absolute;inset:0 auto 0 0;width:5%;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.62));border-right:1px solid #fff;transition:width .28s cubic-bezier(.22,.61,.36,1)}
.syringe-ticks{position:absolute;inset:0}
.syringe-ticks i{position:absolute;top:0;width:1px;background:#c7d7ff;transform:translateX(-.5px);opacity:.72}
.syringe-ticks .minor{height:9px}.syringe-ticks .medium{height:14px}.syringe-ticks .major{height:19px;width:2px;opacity:1}
.syringe-plunger{position:absolute;top:-5px;left:5%;width:4px;height:50px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7);transform:translateX(-2px);transition:left .28s cubic-bezier(.22,.61,.36,1);z-index:3}
.syringe-plunger span{position:absolute;right:-8px;top:3px;width:8px;height:40px;background:#6f7fa9;border-radius:1px}
.syringe-tip{position:absolute;left:4%;top:25px;width:5%;height:19px;background:#a7b7e1;clip-path:polygon(0 35%,100% 0,100% 100%,0 65%)}
.syringe-needle{position:absolute;right:96%;top:32px;width:36%;height:2px;background:#94a4ce}
.syringe-needle span{position:absolute;left:0;top:-1px;width:9px;height:4px;border-radius:50%;background:#eee}
.syringe-flange{position:absolute;right:16%;top:7px;width:7px;height:57px;background:#c8d8ff;border-radius:2px}
.syringe-flange i{position:absolute;right:-9px;width:23px;height:5px;background:#c8d8ff;border-radius:3px}.syringe-flange i:first-child{top:0}.syringe-flange i:last-child{bottom:0}
.syringe-rod{position:absolute;left:84%;right:2%;top:31px;height:5px;background:#6f7fa9}
.syringe-thumb{position:absolute;right:0;top:20px;width:5px;height:27px;background:#eee;border-radius:3px}
.syringe-labels{display:grid;grid-template-columns:repeat(6,1fr);margin:1px 17.5% 0 8%;color:#61719b;font:500 9px 'IBM Plex Mono',monospace}
.syringe-labels span{text-align:center}.syringe-labels span:first-child{text-align:left}.syringe-labels span:last-child{text-align:right}
.syringe-note{margin:10px 0 0!important;color:var(--muted)!important;font:500 11px/1.5 'IBM Plex Mono',monospace!important}
.syringe-visual.is-over-capacity{border-color:rgba(251,191,36,.55)}
.syringe-visual.is-over-capacity .syringe-heading output,.syringe-visual.is-over-capacity .syringe-note{color:#fbbf24!important}
.syringe-visual.is-invalid{opacity:.68}
@media(max-width:480px){.syringe-visual{padding:15px}.syringe-stage{margin-left:25px;margin-right:26px}.syringe-heading output{font-size:15px}}
@media(prefers-reduced-motion:reduce){.syringe-liquid,.syringe-plunger{transition:none}}