@import"https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&display=swap";:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0}:root{font-family:Inter,Segoe UI,system-ui,sans-serif;background:radial-gradient(circle at 20% 20%,#f7f9fc,#edf1f7 50%,#e3e8f2);color:#0f172a}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}.page{padding:8rem clamp(1rem,3vw,3rem) 3rem;display:flex;flex-direction:column;gap:1.5rem;position:relative}.banner-backdrop{position:fixed;top:0;left:0;width:100vw;height:110px;background:radial-gradient(circle at 20% 20%,#f7f9fc,#edf1f7 55%,#e3e8f2);z-index:11;pointer-events:none}.floating-banner{position:fixed;top:14px;left:50%;transform:translate(-50%);width:min(1100px,calc(100vw - 2rem));z-index:12;display:flex;align-items:center;gap:1.1rem;padding:.7rem 1rem;background:linear-gradient(135deg,#0b3d5b,#0a2f47);color:#e6f3ff;border-radius:14px;box-shadow:0 14px 28px #0b2d4d3d;border:1px solid rgba(255,255,255,.08);min-height:64px}.banner-total{margin:.1rem 0 0;font-size:1.4rem;letter-spacing:-.01em}.micro-timeline{flex:1;display:flex;gap:.2rem;align-items:stretch;min-height:22px}.micro-segment{display:flex;align-items:center;padding:.15rem .45rem;border-radius:10px;font-size:.78rem;color:#0b2438;background:#b5dff3;box-shadow:inset 0 0 0 1px #ffffff40;position:relative;overflow:visible}.micro-segment span{white-space:nowrap}.micro-tooltip{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(2px);background:#0b3d5b;color:#e6f3ff;padding:.55rem .7rem;border-radius:10px;box-shadow:0 14px 28px #061c3259;border:1px solid rgba(255,255,255,.08);min-width:220px;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:20}.micro-tooltip:after{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);border:8px solid transparent;border-bottom-color:#0b3d5b;filter:drop-shadow(0 4px 6px rgba(6,28,50,.25))}.micro-segment:hover .micro-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.tt-title{margin:0 0 .25rem;font-weight:700;letter-spacing:-.01em}.tt-line{margin:.05rem 0;font-size:.9rem;color:#cfe6ff}.tt-chem-list{display:grid;gap:.2rem;margin-top:.35rem}.tt-label{font-weight:700;color:#e6f3ff}.tt-chip{display:inline-flex;align-items:center;gap:.35rem;background:#ffffff14;border-radius:999px;padding:.12rem .5rem;border:1px solid rgba(255,255,255,.15);font-size:.86rem;color:#e6f3ff}.tt-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px #ffffff40}.hero{display:grid;grid-template-columns:1.8fr 1fr;gap:1.25rem;background:linear-gradient(135deg,#0b3d5b,#06283d);color:#e5f2ff;padding:1.8rem 2rem;border-radius:18px;box-shadow:0 18px 50px #06283d40;margin-top:.6rem}.hero h1{margin:.3rem 0;letter-spacing:-.01em}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:#8ac6ff;margin:0 0 .15rem;font-weight:700}.lede{margin:0;color:#bed8f5}.flow-control{background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1rem 1.1rem}.flow-control label{display:block;font-weight:700;margin-bottom:.3rem}input[type=range]{width:100%}.flow-values{display:flex;justify-content:space-between;font-weight:700;margin-top:.35rem}.process-map{background:linear-gradient(135deg,#0b3d5b,#0a2f47);color:#e6f3ff;border-radius:16px;padding:1.15rem 1.35rem;box-shadow:0 18px 36px #0b2d4d47;border:1px solid rgba(255,255,255,.08)}.process-map h2{color:#e6f3ff}.stage-row{display:grid;grid-template-columns:260px 1fr;gap:.75rem;align-items:start;padding:1.1rem 0}.stage-row+.stage-row{border-top:1px dashed #d8e2f2}.stage-label h3{margin:.1rem 0}.mini{margin:.1rem 0 0;font-size:.95rem}.stage-meta{display:flex;flex-direction:column;gap:.15rem;line-height:1.1}.stage-line{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}.pipe{display:none}.unit-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.35rem;flex:1;align-items:stretch;width:100%;padding-top:.1rem}.unit-strip.filters-grid{grid-template-columns:repeat(4,minmax(150px,1fr))}.injection-badges{display:flex;flex-wrap:wrap;gap:.35rem;padding-bottom:.25rem}.injection-badges.inline{margin-top:0}.injection-badge{display:inline-flex;align-items:center;gap:.3rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.26rem .65rem;font-weight:600;font-size:.82rem;line-height:1.2;box-shadow:0 8px 18px #06203447;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;background:#0c1e32d9;color:#dce8f5}.injection-icon{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff73}.injection-label{white-space:nowrap}.unit-block{flex:1;min-width:110px;padding:.55rem .65rem;border-radius:10px;border:1px solid #d6deeb;background:#0f2438;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff0a;transition:transform .12s ease,box-shadow .12s ease,border .12s ease;display:grid;gap:.15rem}.unit-block.on{background:var(--stage-bg, linear-gradient(150deg, #0f2d47 0%, #0c2034 100%));color:#e9f4ff;border-color:var(--stage-border, rgba(255, 255, 255, .12));box-shadow:0 12px 24px #05142847,inset 0 0 0 1px #ffffff0f}.unit-block.off{background:#1e2f45;color:#8ca0bd;border-style:dashed;border-color:#ffffff14}.unit-block:hover{transform:translateY(-2px);box-shadow:0 16px 26px #05142852}.unit-block.on.stage-flash{--stage-bg: linear-gradient(150deg, #176fa3 0%, #0f486d 100%);--stage-border: #3aa6e0}.unit-block.on.stage-floc{--stage-bg: linear-gradient(150deg, #415cb4 0%, #2b3e7a 100%);--stage-border: #7ea0f3}.unit-block.on.stage-clar{--stage-bg: linear-gradient(150deg, #c48e3d 0%, #8f6a2c 100%);--stage-border: #f1ca7b}.unit-block.on.stage-pac{--stage-bg: linear-gradient(150deg, #2f7c53 0%, #1f5338 100%);--stage-border: #6acb92}.unit-block.on.stage-filters{--stage-bg: linear-gradient(150deg, #6042b2 0%, #432e7e 100%);--stage-border: #a88bf2}.unit-block.on.stage-clearwell{--stage-bg: linear-gradient(150deg, #278c8c 0%, #1b5f5f 100%);--stage-border: #69d4d4}:root{--bar-flash: #8fc8e6;--bar-floc: #9fb0ea;--bar-clar: #e2c28d;--bar-pac: #9dd1ac;--bar-filters: #c1a4ed;--bar-clearwell: #8dc9c9}.injection-badge{background:#eef2f7;border-color:#d6deeb;color:#1b2e45}.injection-icon{background:linear-gradient(135deg,#8bbcd1,#7fb3cb)}.unit-name{font-weight:800}.unit-vol{font-size:.9rem}.timeline{background:linear-gradient(135deg,#0b3d5b,#0a2f47);color:#e8f0ff;padding:1.35rem 1.5rem;border-radius:18px;box-shadow:0 22px 44px #0b2d4d59;border:1px solid rgba(255,255,255,.08)}.timeline h2{margin-top:0}.chem{background:linear-gradient(135deg,#f9fbff,#eef3fb);border-radius:16px;padding:1.15rem 1.25rem;box-shadow:0 18px 36px #0f172a24;border:1px solid #dbe6f6}.chem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem;margin-top:.4rem}.chem-card{border:1px solid #dce4f3;border-radius:12px;padding:.75rem .9rem;background:#f7f9fd}.chem-name{margin:0 0 .2rem;font-weight:800}.bar-stack{display:flex;gap:.4rem;margin:.6rem 0 .9rem}.bar{background:linear-gradient(135deg,#38bdf8,#0ea5e9);border-radius:10px;padding:.75rem;min-width:90px;display:flex;flex-direction:column;gap:.25rem;box-shadow:inset 0 0 0 1px #ffffff24;color:#0b1f30}.bar-time{font-weight:800}.muted{color:#9fb6d8}.error{color:#f97316;font-weight:700}@media(max-width:900px){.hero{grid-template-columns:1fr}}