/* GenetixBay public site: shared nav, footer, before/after slider, the mix-station plumbing diagram
   and the small lab visuals used in the blog. Diagrams sit on a fixed Night Garden panel in every theme,
   so their colours are literal. All motion is transform/opacity/dash only and stops under reduced motion;
   every visual is complete and readable at rest. */

/* ---------- nav ---------- */
.pnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);color:var(--ink)}
.pnav .pn-in{display:flex;align-items:center;gap:10px;height:64px}
.pnav .brand{flex:0 0 auto;color:var(--ink)}
.pnav .brand img{width:34px;height:auto}
.pn-links{display:none;margin-left:auto;gap:2px;align-items:center}
.pn-links a{padding:8px 12px;border-radius:var(--r-pill);text-decoration:none;font-size:.93rem;color:var(--ink-2);white-space:nowrap}
.pn-links a:hover{background:var(--line-2);color:var(--ink)}
.pn-links a[aria-current="page"]{background:var(--ink);color:var(--cream)}
.pn-links a.pn-fund{color:var(--gold-deep);font-weight:600}
.pn-links a.pn-fund[aria-current="page"]{color:var(--cream)}
.pn-r{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.pnav .pn-join{padding:9px 14px;font-size:.88rem;border-radius:10px;white-space:nowrap}
.pn-menu{position:relative}
.pn-menu summary{list-style:none;cursor:pointer;font:600 .88rem var(--f-ui);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:7px 12px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pn-menu summary::-webkit-details-marker{display:none}
.pn-menu:not([open]) .pn-sheet{display:none}
.pn-menu summary svg{width:14px;height:14px}
.pn-menu[open] summary{background:var(--ink);color:var(--cream)}
.pn-sheet{position:absolute;right:0;top:calc(100% + 10px);width:min(250px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;z-index:70}
.pn-sheet a{padding:11px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:1rem}
.pn-sheet a:hover{background:var(--line-2)}
.pn-sheet a[aria-current="page"]{background:var(--green-wash);color:var(--green-text);font-weight:600}
.pn-sheet .pn-fund{color:var(--gold-deep);font-weight:600}
@media(min-width:1120px){.pn-links{display:flex}.pn-menu{display:none}.pn-r{margin-left:6px}}
@media(max-width:600px){.pnav .brand>span{display:none}.pnav .tp-btn .tl{display:none}.pnav .tp-btn{padding:7px 9px}}
@media(max-width:350px){.pnav .pn-join{padding:8px 10px;font-size:.82rem}.pn-menu summary{padding:7px 10px}}

/* ---------- footer ---------- */
.pfoot{background:var(--seed);color:#EADFD6;padding-block:40px;position:relative;isolation:isolate}
.pfoot .wrap{display:grid;gap:20px}
.pfoot .pf-brand{display:flex;gap:12px;align-items:center}
.pfoot .pf-brand img{width:40px;height:auto}
.pfoot .pf-brand b{display:block;color:#FFF8EF;font-size:1.05rem}
.pfoot .pf-brand span{font-family:var(--f-mono);font-size:var(--fs-read);letter-spacing:.08em;color:#D9C7C4}
.pfoot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pfoot nav a{color:#F6EDE4;text-decoration:none;font-weight:600;font-size:.94rem}
.pfoot nav a:hover{color:#C9EC72}
.pfoot .pf-legal{font-size:.8rem;color:#D9C7C4;max-width:72ch;line-height:1.5}
@media(min-width:900px){.pfoot .wrap{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:48px}.pfoot nav{justify-content:flex-end}.pfoot .pf-legal{grid-column:1/-1}}

/* ---------- shared bits for public pages ---------- */
.pub-cta{display:grid;gap:18px;align-items:center;background:var(--paper);border:var(--sticker-border);box-shadow:8px 8px 0 var(--seed);border-radius:var(--r-lg);padding:clamp(22px,4vw,40px)}
@media(min-width:860px){.pub-cta{grid-template-columns:minmax(0,1fr) auto}}
.pub-cta h2{font-size:clamp(1.9rem,4vw,3rem)}
.pub-cta p{color:var(--ink-2);margin-top:8px;max-width:58ch}
.pub-cta .ctas{display:flex;flex-wrap:wrap;gap:10px}
.illus{display:inline-block;font:600 var(--fs-label) var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px;background:var(--gold-wash);color:var(--gold-deep);vertical-align:middle}
.dark .illus,.lvp .illus{background:#3A2C1A;color:#F2BF80}

/* ---------- before / after slider (transform-only reveal) ---------- */
.compare{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid #3A4434;aspect-ratio:16/10;background:#10150E;touch-action:pan-y;--pos:50;container-type:inline-size}
.compare img,.prose .compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0!important;border:0!important;border-radius:0!important}
.cmp-before{position:absolute;inset:0;overflow:hidden;transform:translateX(calc((var(--pos) - 100) * 1%))}
.cmp-before .cmp-in{position:absolute;inset:0;transform:translateX(calc((100 - var(--pos)) * 1%))}
.cmp-before img{background:#F5F2E9}
.cmp-handle{position:absolute;top:0;bottom:0;left:0;width:0;transform:translateX(calc(var(--pos) * 1cqw));pointer-events:none}
.cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:linear-gradient(#C9EC72,#E8A65D);box-shadow:0 0 18px rgba(201,236,114,.7)}
.cmp-handle::after{content:"";position:absolute;top:50%;left:-24px;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:#F5F2E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M19 16l-8 8 8 8M29 16l8 8-8 8' fill='none' stroke='%23263D12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/48px no-repeat;box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 3px rgba(201,236,114,.6)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.cmp-range:focus-visible ~ .cmp-handle::after{outline:3px solid #C9EC72;outline-offset:3px}
.cmp-tag{position:absolute;bottom:14px;z-index:2;font:500 var(--fs-read) var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);background:#10150E;color:#EEF0E6;border:1px solid #3A4434;pointer-events:none;white-space:nowrap}
.cmp-tag.l{left:14px}.cmp-tag.r{right:14px;background:#F5F2E9;color:#1C2016;border-color:#F5F2E9}
@media(max-width:560px){.cmp-tag{font-size:.62rem;padding:4px 8px;bottom:10px}.cmp-tag.l{left:10px}.cmp-tag.r{right:10px}.cmp-handle::after{width:40px;height:40px;left:-20px;margin-top:-20px;background-size:40px}}
@media (prefers-reduced-motion:no-preference){.compare.is-inview .cmp-handle::after{animation:cmp-nudge 1.6s var(--ease-out) 2}}
@keyframes cmp-nudge{30%{transform:translateX(-10px)}60%{transform:translateX(10px)}}
.cmp-cap{color:var(--ink-2);font-size:.92rem;margin-top:12px}

/* ---------- lab-visual panel (fixed night palette) ---------- */
.lvp{background:#191D18;color:#EEF0E6;border:1px solid #3A4434;border-radius:var(--r-lg);padding:clamp(14px,2.4vw,24px);min-width:0;position:relative;overflow:hidden}
.lvp svg{display:block;width:100%;height:auto}
.lvp svg text{font-family:var(--f-ui);fill:#EEF0E6}
.lvp svg .t{font-weight:600}
.lvp svg .s{font-family:var(--f-mono);fill:#B3BAA8}
.lvp .lv-k{display:block;font:500 var(--fs-read) var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#C9EC72;margin-bottom:10px}
.lvp .lv-cap{color:#C9CFBE;font-size:.88rem;margin-top:12px;line-height:1.5}
.lvp .lv-cap b{color:#FFF8EF}
.lv-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:.82rem;color:#C9CFBE}
.lv-legend span{display:inline-flex;align-items:center;gap:8px}
.lv-legend i{display:inline-block;width:24px;border-top:3px solid}
.prose .lvp{margin:10px 0 26px}
@media(min-width:1000px){.prose .lvp.wide{margin-right:-12ch}}

/* ---------- mix station: fresh water -> mix tank -> manifold -> tents -> waste ---------- */
.mix-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media(min-width:980px){.mix-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:36px}}
.mix-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:ms}
.mix-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper);transition:border-color .3s,box-shadow .3s,background .3s}
.mix-steps li::before{counter-increment:ms;content:counter(ms);display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--line-2);color:var(--ink);font:600 .86rem var(--f-mono)}
.mix-steps b{display:block;font-size:1rem}
.mix-steps span{display:block;font-size:.9rem;color:var(--ink-2);margin-top:2px}
.mix-steps li.on{border-color:var(--ink);box-shadow:var(--sticker-shadow)}
.mix-steps li.on::before{background:var(--accent-fill);color:#16200A}
.dark .mix-steps li{background:#222820;border-color:#3A4434}
.dark .mix-steps li::before{background:#2D3529;color:#EEF0E6}
.dark .mix-steps b{color:#EEF0E6}.dark .mix-steps span{color:#C9CFBE}
.dark .mix-steps li.on{border-color:#C9EC72;box-shadow:4px 4px 0 #8FBD2C}
.dark .mix-steps li.on::before{color:#16200A;background:linear-gradient(115deg,#8FBD2C,#C2C443 52%,#E8A65D)}
@media(max-width:979px){.mix-grid .lvp{order:-1}.mix-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}}
@media(max-width:600px){.mixst .mx-scroll{overflow-x:auto;margin-inline:-6px;padding-bottom:6px}.mixst .mx-scroll svg{min-width:560px}.mix-steps span{font-size:.86rem}}
.mixst svg text{font-size:17px}
.mixst svg .s{font-size:12.5px}
.mixst .box{fill:#2D3529;stroke:#5A6852;stroke-width:1.5}
.mixst .box.tank{fill:#222820;stroke:#8FA084}
.mixst .box.hot{stroke:#8FBD2C}
.mixst .box.waste{stroke:#B98A5A}
.mixst .liq{fill:#2F6B9A;opacity:.85}
.mixst .pp{fill:none;stroke:#3F4A39;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.mixst .pf{fill:none;stroke:#7FC0EA;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 12}
.mixst .pf.dose{stroke:#C9EC72}
.mixst .pf.drain{stroke:#D7A46A}
.mixst .mx-jug{stroke:#0B0E09;stroke-width:1}
.mixst .jl{font:600 12px var(--f-mono);fill:#16200A}
.mixst .pp.thin{stroke-width:5}
.mixst .pf.dose{stroke-width:3}
.mixst .valve{fill:#191D18;stroke:#8FA084;stroke-width:2}
.mixst .valve-x{stroke:#8FA084;stroke-width:2.5;stroke-linecap:round}
.mixst .gate{fill:#191D18;stroke:#E8A65D;stroke-width:1.5}
.mixst .plant{fill:#8FBD2C}
.mixst .stir{transform-box:fill-box;transform-origin:center}
.mixst .drop{fill:#C9EC72}
/* JS adds .mx-run and a data-phase; inactive pipes dim but never vanish. */
.mixst.mx-run .pf{opacity:.22;transition:opacity .4s}
.mixst.mx-run[data-phase="fill"] .ph-fill,.mixst.mx-run[data-phase="dose"] .ph-dose,.mixst.mx-run[data-phase="deliver"] .ph-deliver,.mixst.mx-run[data-phase="drain"] .ph-drain{opacity:1}
.mixst.mx-run .valve{transition:fill .3s,stroke .3s}
.mixst.mx-run[data-phase="deliver"] .valve{fill:#2F6B9A;stroke:#7FC0EA}
.mixst.mx-run .gate{transition:fill .3s}
.mixst.mx-run[data-phase="verify"] .gate{fill:#3A2C1A}
.mixst .gate-ok{opacity:1;transition:opacity .3s}
.mixst.mx-run .gate-ok{opacity:.35}
.mixst.mx-run[data-phase="verify"] .gate-ok,.mixst.mx-run[data-phase="deliver"] .gate-ok{opacity:1}
.mixst.mx-run .drop{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .mixst.mx-run .pf{animation:pf-run 1s linear infinite}
  .mixst.mx-run[data-phase="dose"] .drop{animation:ms-drop 1.1s ease-in infinite}
  .mixst.mx-run[data-phase="dose"] .drop:nth-of-type(2n){animation-delay:-.55s}
  .mixst.mx-run[data-phase="mix"] .stir,.mixst.mx-run[data-phase="settle"] .stir{animation:spin 1.4s linear infinite}
  .mixst.mx-run[data-phase="settle"] .stir{animation-duration:4s}
  .mixst.mx-run .liq{transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.4s var(--ease-out)}
  .mixst.mx-run[data-phase="fill"] .liq{transform:scaleY(.55)}
  .mixst.mx-run[data-phase="drain"] .liq{transform:scaleY(.45)}
  .mixst.paused *{animation-play-state:paused!important}
}
@keyframes pf-run{to{stroke-dashoffset:-22}}
@keyframes ms-drop{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(34px);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- soon.html teaser band ---------- */
.jt-band{display:grid;gap:22px;align-items:center;background:#191D18;color:#EEF0E6;border-radius:var(--r-lg);padding:clamp(22px,4vw,44px);position:relative;isolation:isolate;overflow:hidden}
.jt-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 100% 0%,rgba(143,189,44,.22),transparent 65%),radial-gradient(50% 80% at 0% 100%,rgba(95,168,211,.18),transparent 70%)}
@media(min-width:900px){.jt-band{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.jt-band .eyebrow{color:#B3BAA8}.jt-band .eyebrow b{color:#C9EC72}
.jt-band h2{color:#FFF8EF;font-size:clamp(2rem,4.4vw,3.2rem);margin-top:10px}
.jt-band h2 em{color:#C9EC72;font-style:italic}
.jt-band p{color:#D2D8C6;margin-top:12px;max-width:56ch}
.jt-band .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.jt-band .btn-ghost{border-color:#EEF0E6;color:#EEF0E6}
.jt-band .btn-ghost:hover{background:#EEF0E6;color:#191D18}
.jt-band ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.jt-band li{font:500 var(--fs-read) var(--f-mono);letter-spacing:.06em;padding:5px 10px;border-radius:var(--r-pill);border:1px solid #4A5643;color:#E3E8D8}
.jt-art svg{display:block;width:100%;height:auto;max-width:460px;margin-inline:auto}
.jt-art text{font-family:var(--f-mono);font-size:13px;fill:#C9CFBE}
.jt-art .jt-liq{fill:#2F6B9A}
.jt-art .jt-drop{fill:#C9EC72}
.jt-art .jt-mist{fill:#DDEFF6}
@media (prefers-reduced-motion:no-preference){
  .jt-art .jt-drop{animation:jt-drop 1.6s ease-in infinite}
  .jt-art .jt-drop.d2{animation-delay:-.4s}.jt-art .jt-drop.d3{animation-delay:-.8s}.jt-art .jt-drop.d4{animation-delay:-1.2s}
  .jt-art .jt-wave{animation:jt-wave 3s ease-in-out infinite}
  .jt-art .jt-mist{transform-box:fill-box;transform-origin:center;animation:s-mist 1.8s ease-in-out infinite}
  .jt-art .jt-mist:nth-of-type(2n){animation-delay:-.6s}.jt-art .jt-mist:nth-of-type(3n){animation-delay:-1.2s}
  .jt-art .jt-flow{animation:pf-run 1s linear infinite}
  .jt-art .jt-root{transform-box:fill-box;transform-origin:50% 0;animation:jt-sway 4s ease-in-out infinite}
}
@keyframes jt-drop{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(46px);opacity:0}}
@keyframes jt-wave{50%{transform:translateY(-3px)}}
@keyframes jt-sway{50%{transform:rotate(3deg)}}
@keyframes s-mist{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- blog lab visuals ---------- */
/* #3 system diagram: pulses travel along the wires */
.lv-sys .box{fill:#2D3529;stroke:#5A6852;stroke-width:1.3}
.lv-sys .box.hot{fill:#26331A;stroke:#8FBD2C}
.lv-sys .box.safe{fill:#33291B;stroke:#E8A65D}
.lv-sys .box.opt{stroke-dasharray:6 5}
.lv-sys text{font-size:19px}.lv-sys .s{font-size:14px}
.lv-sys .w{fill:none;stroke:#4A5643;stroke-width:3;stroke-linecap:round}
.lv-sys .wf{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:4 14}
.lv-sys .wf.in{stroke:#7FC0EA}.lv-sys .wf.out{stroke:#C9EC72}.lv-sys .wf.net{stroke:#C9A6E8;stroke-dasharray:3 9}.lv-sys .wf.sf{stroke:#E8A65D}
@media (prefers-reduced-motion:no-preference){
  .lv-sys .wf{animation:pf-run .9s linear infinite}
  .lv-sys .wf.net{animation-duration:2.2s}
  .lv-sys .beat{transform-box:fill-box;transform-origin:center;animation:lv-beat 1s ease-in-out infinite}
}
@keyframes lv-beat{50%{transform:scale(1.35);opacity:.6}}

/* #4 per-style mini animations */
.lv-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px}
.lv-st{background:#222820;border:1px solid #3A4434;border-radius:var(--r);padding:10px 10px 12px;display:grid;gap:6px;align-content:start}
.lv-st svg{border-radius:8px;background:#141812}
.lv-st b{font-size:.95rem;color:#FFF8EF}
.lv-st span{font-size:.8rem;color:#C9CFBE;line-height:1.4}
.lv-st svg .w{fill:#2F6B9A}.lv-st svg .wl{fill:#5FA8D3}.lv-st svg .ct{fill:none;stroke:#8FA084;stroke-width:2}
.lv-st svg .rt{stroke:#F2E3C4;stroke-width:1.5;fill:none}.lv-st svg .pl{fill:#8FBD2C}.lv-st svg .md{fill:#7A5A3A}.lv-st svg .pk{fill:#C9C1A8}.lv-st svg .ms{fill:#DDEFF6}
@media (prefers-reduced-motion:no-preference){
  .lv-st .a-drip{animation:s-drip 1.4s ease-in infinite}
  .lv-st .a-bub{animation:s-bub 2.2s ease-in infinite}
  .lv-st .a-mist{transform-box:fill-box;transform-origin:center;animation:s-mist 1.6s ease-in-out infinite}
  .lv-st .a-flow{animation:s-flow 1.2s linear infinite}
  .lv-st .a-tide{transform-box:fill-box;transform-origin:50% 100%;animation:s-tide 6s ease-in-out infinite}
  .lv-st .a-fog{animation:s-fog 4s ease-in-out infinite}
}
@keyframes s-drip{from{transform:translateY(0);opacity:1}to{transform:translateY(22px);opacity:0}}
@keyframes s-bub{from{transform:translateY(0);opacity:0}20%{opacity:1}to{transform:translateY(-30px);opacity:0}}
@keyframes s-flow{to{transform:translateX(16px)}}
@keyframes s-tide{0%,100%{transform:scaleY(.25)}40%,60%{transform:scaleY(1)}}
@keyframes s-fog{0%,100%{transform:translateX(-6px);opacity:.5}50%{transform:translateX(6px);opacity:1}}

/* #5 dose sequence: JS steps data-s through 0..6; at rest every jug and the scale are shown */
.lv-dose text{font-size:14px}.lv-dose .s{font-size:11.5px}
.lv-dose .mx-jug rect{stroke:#0B0E09;stroke-width:1}
.lv-dose .jl{fill:#16200A;font-family:var(--f-mono);font-weight:600;font-size:12px}
.lv-dose .tank{fill:#222820;stroke:#8FA084;stroke-width:1.5}
.lv-dose .liq{fill:#2F6B9A}
.lv-dose .lv-scale{fill:#3F4A39}
.lv-dose .tube{fill:none;stroke:#4A5643;stroke-width:3}
.lv-dose .drop{fill:#C9EC72;opacity:0}
.lv-dose .readout{fill:#0E110C;stroke:#5A6852}
.lv-dose .rv{font-family:var(--f-mono);font-size:15px;fill:#C9EC72}
.lv-dose .rl{opacity:0}.lv-dose:not([data-s]) .rl.r6{opacity:1}
.lv-dose .stir{transform-box:fill-box;transform-origin:center}
.lvp .lv-seq{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lvp .lv-seq li{font:500 var(--fs-read) var(--f-mono);letter-spacing:.04em;padding:5px 10px;border-radius:var(--r-pill);border:1px solid #4A5643;color:#E3E8D8;transition:background .3s,color .3s,border-color .3s}
.lvp .lv-seq li.on{background:#C9EC72;color:#16200A;border-color:#C9EC72}
.lv-dose[data-s="0"] .rl.r0,.lv-dose[data-s="1"] .rl.r1,.lv-dose[data-s="2"] .rl.r2,.lv-dose[data-s="3"] .rl.r3,.lv-dose[data-s="4"] .rl.r4,.lv-dose[data-s="5"] .rl.r5,.lv-dose[data-s="6"] .rl.r6{opacity:1}
.lv-dose .mx-jug{transition:transform .4s var(--ease-out)}
.lv-dose[data-s="1"] .j1,.lv-dose[data-s="2"] .j2,.lv-dose[data-s="3"] .j3,.lv-dose[data-s="4"] .j4{transform:translateY(6px)}
@media (prefers-reduced-motion:no-preference){
  .lv-dose[data-s="1"] .d1,.lv-dose[data-s="2"] .d2,.lv-dose[data-s="3"] .d3,.lv-dose[data-s="4"] .d4{animation:ms-drop .8s ease-in infinite}
  .lv-dose[data-s="5"] .stir{animation:spin 1.2s linear infinite}
  .lv-dose[data-s="6"] .stir{animation:spin 5s linear infinite}
  .lv-dose .liq{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ease-out)}
  .lv-dose[data-s="0"] .liq{transform:scaleY(.86)}
  .lv-dose[data-s="1"] .liq{transform:scaleY(.9)}
  .lv-dose[data-s="2"] .liq{transform:scaleY(.94)}
  .lv-dose[data-s="3"] .liq{transform:scaleY(.97)}
  .lv-dose.paused *{animation-play-state:paused!important}
}

/* #5 ion bars: achieved vs target. Bars are full at rest and grow once when they scroll into view. */
.lv-ions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;height:200px;padding:8px 4px 0;border-bottom:2px solid #4A5643}
.lv-ion{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.lv-ion .bar{width:min(46px,70%);height:calc(var(--a) * 1%);border-radius:8px 8px 2px 2px;background:var(--c);transform-origin:50% 100%}
.lv-ion .tgt{position:absolute;left:8%;right:8%;bottom:calc(var(--t) * 1%);border-top:2px dashed #FFF8EF}
.lv-ion .ceil{border-top-color:#E8A65D}
.lv-ion .v{position:absolute;bottom:calc(var(--a) * 1% + 6px);font:600 .78rem var(--f-mono);color:#FFF8EF}
.lv-names{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:6px;text-align:center;font:600 .86rem var(--f-mono);color:#E3E8D8}
.lv-names small{display:block;white-space:nowrap;font-weight:400;font-size:.72rem;color:#C9CFBE}
.lv-names small.off{color:#F2BF80}
@media (prefers-reduced-motion:no-preference){
  .lv-ionbox.is-inview .bar{animation:lv-grow 1.2s var(--ease-out) both;animation-delay:calc(var(--i) * 120ms)}
  .lv-ionbox.is-inview .v{animation:lv-fade 1.2s var(--ease-out) both;animation-delay:calc(var(--i) * 120ms + 600ms)}
}
@keyframes lv-grow{from{transform:scaleY(0)}}
@keyframes lv-fade{from{opacity:0}}