:root{--ink:#00172e;--paper:#fff;--muted:#b8cce1;--blue:#007bff;--line:#c2dbf526;color-scheme:dark}
html{scroll-behavior:auto;scroll-padding-top:0;scrollbar-gutter:stable}
body{background:var(--ink);font-family:Arial,"Segoe UI",sans-serif}
.site-header{position:fixed;inset:0 0 auto;height:78px;padding:0 4%;background:#001326f5;border-bottom:1px solid #a8c9eb17;z-index:12;gap:28px}
.wordmark{font-size:29px;font-weight:600;letter-spacing:4px;line-height:1;position:relative;display:block;padding-bottom:13px}
.wordmark span{color:var(--blue)}
.wordmark small{position:absolute;left:0;bottom:0;width:100%;font-size:6px;font-weight:400;letter-spacing:2.8px;text-align:center;white-space:nowrap}
.desktop-nav{margin-left:auto;margin-right:2%;gap:26px}
.desktop-nav button{font-size:12px;color:#f2f7ff;font-weight:500}
.header-tools{gap:12px}
.header-catalog{border:1px solid #398cff6b;border-radius:4px;min-height:38px;padding:0 15px;font-size:11px;display:flex;gap:20px;align-items:center;background:#072541}
.header-catalog:hover{background:#10375b}.header-catalog span{font-size:17px}
.pool-story{height:1000svh;position:relative}
.pool-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.scene-fit{position:absolute;left:0;right:0;margin-inline:auto;top:50%;transform:translateY(-50%);width:min(100%,177.777778svh);aspect-ratio:16/9}
.scene-fit canvas,.scene-poster{position:absolute;width:100%;height:100%;inset:0;display:block;object-fit:contain}
.scene-fit canvas{opacity:0}.scene-fit canvas.ready{opacity:1}
.edge-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00132638,transparent 24%,transparent 73%,#00172ef2 94%),linear-gradient(90deg,#00152e4a,transparent 55%)}
.intro-copy{position:absolute;left:4%;top:18%;max-width:525px;pointer-events:none;will-change:opacity,transform}
.intro-copy .eyebrow{color:#bbd7ff;letter-spacing:2px;font-size:10px}
.intro-copy h1{font-size:clamp(39px,4.1vw,63px);font-weight:600;letter-spacing:-1.6px;line-height:1.07;margin:17px 0 0;text-shadow:0 2px 25px #00152e7a;text-wrap:initial}
.intro-copy p{font-size:14px;line-height:1.5;color:#e2edff;margin:20px 0 0;letter-spacing:0}
.intro-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px;pointer-events:auto}
.intro-cta,.intro-secondary{display:flex;align-items:center;justify-content:center;gap:16px;min-height:45px;padding:0 18px;font-size:12px;border-radius:4px;transition:background .2s}
.intro-cta{background:var(--blue);border:1px solid var(--blue);box-shadow:0 4px 20px #007bff26;font-weight:600}
.intro-cta:hover{background:#208bff}
.intro-secondary{background:#00172e55;border:1px solid #b8d6f78c;font-weight:400}
.intro-secondary:hover{background:#082b4ee6}
.intro-cta span,.intro-secondary span{font-size:19px}
.chapter-copy{position:absolute;left:4%;top:100px;max-width:480px;opacity:0;pointer-events:none;text-shadow:0 2px 15px #001326b0}
.chapter-copy .eyebrow{color:#bbd7ff;font-size:9px;letter-spacing:2px}
.chapter-copy h2{font-size:clamp(25px,2.45vw,39px);font-weight:500;line-height:1.1;letter-spacing:-.8px;margin-top:10px}
.chapter-copy h2 br{display:none}
.chapter-copy p{font-size:12px;line-height:1.5;color:#dfebfb;margin-top:11px;max-width:370px}
.story-bottom{position:absolute;bottom:0;left:4%;right:4%;padding:0 0 19px;z-index:4;pointer-events:none}
.story-bottom button,.story-bottom input{pointer-events:auto}
.story-meta{display:flex;align-items:center;gap:25px;margin-bottom:16px;font-size:10px;color:#d2e4fc;min-height:25px}
.scroll-hint{display:flex;align-items:center;gap:26px}.scroll-hint>span{font-size:18px}
#load-status{margin-left:auto;color:#a9c4e5;font-size:10px}
#play-motion{font-size:10px;display:flex;gap:14px;align-items:center}
#play-motion:disabled{opacity:.4;cursor:progress}#play-motion span{font-size:20px}
.chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.chapters button{text-align:left;border-top:2px solid #8fb6e433;padding:12px 0 8px;color:#a9c1de;font-size:11px}
.chapters button[aria-current=step]{border-color:var(--blue);color:#fff}
.chapters button span{font-size:9px;margin-right:12px;opacity:.75}
.chapters button[aria-current=step] span{color:#6eafff;opacity:1}
.scrub-label{display:flex;align-items:center;gap:15px;position:relative;height:14px;margin-top:7px}
.scrub-label input{margin:0;flex:1;height:3px;accent-color:var(--blue);cursor:ew-resize;min-width:0}
.scrub-label output{font-size:9px;color:#aec8e6;width:27px;text-align:right;font-variant-numeric:tabular-nums}
.hotspots{position:absolute;inset:0;pointer-events:none;z-index:3}
.hotspot{position:absolute;transform:translate(-50%,-50%);width:31px;height:31px;border:1px solid #c4e3ff;border-radius:50%;background:#007bff;box-shadow:0 0 0 5px #007bff26;color:#fff;font-size:22px;line-height:1;pointer-events:auto;transition:opacity .25s,background .2s}
.hotspot[hidden]{display:none}
.hotspot:hover,.hotspot:focus-visible{background:#fff;color:#007bff}
.hotspot span{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:0;border:0;background:none;white-space:nowrap;font-size:12px;line-height:1.3;color:#fff;font-weight:500;letter-spacing:.1px;text-shadow:0 1px 3px #001326,0 1px 12px #001326}
.hotspot-contextual span{bottom:auto;top:50%;left:auto;right:calc(100% + 12px);transform:translateY(-50%);text-align:right}
.systems{padding:56px 4% 34px;max-width:none;background:#f2f6fc;color:#051c37}
.systems .eyebrow{color:#2873c3}
.systems .section-heading{margin-bottom:28px;align-items:center}
.systems h2{font-size:clamp(28px,2.4vw,38px);font-weight:600;letter-spacing:-.6px;margin-top:8px}
.systems .section-heading p{color:#526b87;font-size:13px}
.system-grid{gap:12px;border:0;grid-template-columns:repeat(6,1fr)}
.system-card{background:#fff;border:1px solid #dce6f3;border-radius:5px;min-height:175px;padding:24px 17px 20px;box-shadow:0 2px 8px #132c4910}
.system-card:hover{background:#e9f2ff;border-color:#85b8fa}
.system-card .number{color:#367bd0}.system-card>svg{right:16px;top:21px;color:#007bff;width:18px;height:18px}
.system-card h3{font-size:18px;font-weight:600;margin-top:31px;color:#08213e}
.system-card p{color:#61728a;font-size:11px;max-width:none}
.section-footer>span{color:#60738d}.systems .text-button{color:#006ded}
.site-footer{background:#001326;margin-top:0;border-color:#bedaff1a;padding-top:35px;padding-bottom:35px}
.site-footer .wordmark{padding-bottom:12px}.site-footer .wordmark small{font-size:4px;letter-spacing:2px}
.site-footer>span{color:#a6c0dd}
.panel{background:#031c37}.panel h2{font-weight:500}.panel::backdrop{background:#001020ba}
.panel-list button:hover,.back-button{color:#6ab0ff}.search-field:focus-within{border-color:var(--blue);box-shadow:0 1px var(--blue)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-aspect-ratio:2/1){.intro-copy{top:20%;left:9%}.chapter-copy{left:7%}}
@media(max-width:1150px){.desktop-nav{gap:19px;margin-right:0}.desktop-nav button{font-size:11px}.header-catalog{display:none}.system-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.site-header{gap:18px}.desktop-nav{gap:14px}.intro-copy h1{font-size:46px}.chapter-copy{top:101px}.chapter-copy h2{font-size:28px}.chapter-copy p{max-width:310px}.chapters{gap:11px}.chapters button{font-size:10px}.chapters button span{margin-right:5px}}
@media(max-width:700px){
 .site-header{height:72px;padding:0 24px;background:#001326}.wordmark{font-size:24px;letter-spacing:3px}.wordmark small{font-size:5px;letter-spacing:2.3px}.desktop-nav{display:none}.header-tools{gap:7px}
 .pool-stage{min-height:650px}.pool-story{height:800svh}.scene-fit{width:100%;top:51%}
 .intro-copy{top:105px;left:25px;right:25px;max-width:none}.intro-copy h1{font-size:38px;letter-spacing:-1px;margin-top:12px}.intro-copy .eyebrow{font-size:8px}.intro-copy p{font-size:12px;margin-top:15px}.intro-actions{margin-top:18px;gap:9px}.intro-cta,.intro-secondary{font-size:10px;padding:0 13px;gap:12px;min-height:40px}
 .chapter-copy{top:105px;left:25px;right:25px}.chapter-copy h2{font-size:28px;max-width:330px}.chapter-copy p{font-size:12px;max-width:310px}
 .edge-shade{background:linear-gradient(#00172e33,transparent 35%,transparent 68%,#00172e 90%),linear-gradient(90deg,#00152e45,transparent 65%)}
 .story-bottom{left:24px;right:24px;bottom:18px}.story-meta{gap:10px;font-size:9px;flex-wrap:wrap;margin-bottom:15px}.scroll-hint{font-size:9px;gap:12px}#load-status{font-size:8px}#play-motion{margin-left:auto;font-size:9px}
 .chapters{gap:7px}.chapters button{font-size:8px;line-height:1.5;min-height:56px}.chapters button span{display:block;font-size:9px;margin-bottom:4px}.scrub-label{margin-top:10px}
 .hotspot{width:26px;height:26px;font-size:18px;box-shadow:0 0 0 4px #007bff26}.hotspot span{font-size:9px;bottom:calc(100% + 8px)}.hotspot-contextual span{bottom:auto;font-size:10px;right:calc(100% + 10px)}.hotspot[data-category=pumps] span{bottom:auto;top:calc(100% + 7px)}
 .systems{padding:42px 24px 28px}.systems h2{font-size:28px}.systems .section-heading p{margin-top:12px}.system-grid{grid-template-columns:repeat(2,1fr)}.system-card{min-height:163px}
}
@media(max-height:680px){
 .pool-stage{min-height:0}.site-header{height:62px}.site-header .wordmark{font-size:23px}.story-bottom{bottom:0;padding-bottom:10px}.story-meta{margin-bottom:5px;min-height:22px}.chapters button{min-height:30px;padding-top:8px;padding-bottom:4px}.scrub-label{margin-top:4px}
 .intro-copy{top:83px}.intro-copy h1{font-size:35px;letter-spacing:-1px;margin-top:8px}.intro-copy p{margin-top:12px;font-size:11px}.intro-actions{margin-top:13px}.intro-cta,.intro-secondary{font-size:10px;min-height:36px}
 .chapter-copy{top:82px}.chapter-copy h2{font-size:24px;max-width:360px}.chapter-copy p{font-size:11px;margin-top:7px}
}
@media(max-width:420px){.intro-copy h1{font-size:32px}.intro-secondary{gap:7px;padding-inline:10px}.intro-cta{padding-inline:11px;gap:9px}.chapter-copy h2{font-size:24px}.chapter-copy p{font-size:11px}.story-meta .scroll-hint{max-width:135px;font-size:8px}#load-status{display:none}.chapters button{font-size:7px}.hotspot-contextual span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.pool-story{height:100svh;min-height:650px}.pool-stage{position:relative}.scroll-hint{visibility:hidden}.intro-copy,.chapter-copy{will-change:auto}}