/* Water table collection and individual interactive pages. */
[hidden]{display:none!important}
.interactives-page button,.interactives-page input{font:inherit}
.interactives-page button{cursor:pointer}
.interactives-page :focus-visible{outline:3px solid #0284c7;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.catalogue-hero,.detail-head{position:relative;overflow:hidden}
.catalogue-hero>.container,.detail-head>.container{position:relative;z-index:2}
/* Start the rising bubbles throughout the header immediately on page load. */
.interactives-page .bubbles span{bottom:auto;top:var(--bubble-top);width:var(--bubble-size);height:var(--bubble-size);opacity:.75;border-color:rgba(3,105,161,.4);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.95),rgba(56,189,248,.24) 60%,rgba(14,165,233,.12));animation-name:interactive-bubble-rise;animation-delay:var(--bubble-delay)}
.interactives-page .bubbles span:nth-child(1){--bubble-top:18%;--bubble-size:36px;--bubble-delay:-10s;left:5%}
.interactives-page .bubbles span:nth-child(2){--bubble-top:72%;--bubble-size:24px;--bubble-delay:-4s;left:16%}
.interactives-page .bubbles span:nth-child(3){--bubble-top:8%;--bubble-size:28px;--bubble-delay:-13s;left:36%}
.interactives-page .bubbles span:nth-child(4){--bubble-top:43%;--bubble-size:20px;--bubble-delay:-9s;left:49%}
.interactives-page .bubbles span:nth-child(5){--bubble-top:88%;--bubble-size:42px;--bubble-delay:-2s;left:43%}
.interactives-page .bubbles span:nth-child(6){--bubble-top:7%;--bubble-size:30px;--bubble-delay:-16s;left:85%}
.interactives-page .bubbles span:nth-child(7){--bubble-top:67%;--bubble-size:22px;--bubble-delay:-7s;left:97%}
@keyframes interactive-bubble-rise{0%{top:calc(100% + 45px);transform:translateX(0);opacity:0}10%{opacity:.75}85%{opacity:.65}100%{top:-55px;transform:translateX(18px);opacity:0}}
.overline{font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--aqua-deep);margin-bottom:16px}
.catalogue-hero{background:linear-gradient(130deg,#f1faff,#eaf5f8 55%,#f6fbfc);padding:28px 0 58px;border-bottom:1px solid var(--line)}
.interactives-page .breadcrumbs{font-size:.75rem;margin-bottom:30px;display:flex;gap:9px;flex-wrap:wrap}
.catalogue-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.catalogue-hero h1{font-size:clamp(2.3rem,4vw,3.55rem);line-height:1.13;letter-spacing:-.05em}
.catalogue-hero h1 span{color:var(--aqua-deep)}
.catalogue-hero .lead{font-size:1rem;line-height:1.9;max-width:48ch;margin:22px 0 26px}
.hero-facts{display:flex;gap:30px;padding-top:30px;margin-top:24px;border-top:1px solid #ccdee7;font-size:.72rem;color:var(--muted)}
.hero-facts strong{display:block;font-size:1.12rem;color:var(--navy);margin-bottom:2px}
.featured-render{position:relative;display:block;overflow:hidden;border:1px solid #d3e0e5;border-radius:20px;background:#dadfdf;box-shadow:0 16px 40px #143e5412;color:var(--navy)}
.featured-render:hover{text-decoration:none}
.featured-render>img{width:100%;aspect-ratio:1;object-fit:cover}
.featured-badge{position:absolute;left:22px;top:22px;border-radius:30px;padding:7px 12px;background:#fffffff0;font-size:.6rem;font-weight:800;letter-spacing:.08em}
.featured-caption{display:flex;justify-content:space-between;align-items:center;gap:15px;background:#fff;padding:20px 24px}
.featured-caption small{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--muted);margin-bottom:5px}
.featured-caption strong{font-size:1.1rem}
.circle-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--aqua-light);color:var(--aqua-deep);font-size:1.3rem}
.collection-section{padding:68px 0 58px;scroll-margin-top:100px}
.collection-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:32px}
.collection-heading h2{margin:0;font-size:1.9rem}
.collection-heading .overline{margin-bottom:8px}
.collection-heading>p{max-width:43ch;color:var(--muted);font-size:.85rem}
.collection-tools{margin-bottom:30px}
.search-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px}
.search-box{display:flex;gap:12px;align-items:center;max-width:500px;width:100%;border:1px solid #cedce7;border-radius:10px;background:#fbfdff;padding:10px 15px}
.search-box>span:first-child{font-size:1.5rem;color:var(--muted);line-height:1}
.search-box input{border:0;background:transparent;width:100%;min-width:0;color:var(--ink);font-size:.85rem;padding:3px}
.search-box:focus-within{outline:2px solid var(--aqua-deep);outline-offset:2px}
.search-box input:focus-visible{outline:none}
#result-count{font-size:.76rem;color:var(--muted);white-space:nowrap}
.filter-list{display:flex;gap:8px;flex-wrap:wrap}
.filter-chip{border:1px solid #dce7ef;border-radius:30px;background:#fff;color:var(--muted);padding:8px 15px;font-size:.73rem!important;font-weight:600!important;min-height:40px}
.filter-chip:hover{border-color:var(--aqua-deep);color:var(--aqua-deep)}
.filter-chip[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.interactive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.interactive-card{overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;scroll-margin-top:120px;transition:box-shadow .2s}
.interactive-card:target{outline:3px solid var(--aqua-deep);outline-offset:5px}
.interactive-card:hover{box-shadow:0 10px 30px #071f3d10}
.interactive-card-image{position:relative;display:block;width:100%;border:0;padding:0;background:#e0e4e4;overflow:hidden}
.interactive-card-image img{width:100%;aspect-ratio:1.15;object-fit:cover;transition:transform .3s}
.interactive-card-image:hover img{transform:scale(1.025)}
.preview-hint{position:absolute;bottom:12px;right:12px;background:#fffffff2;border-radius:20px;padding:5px 11px;font-size:.65rem;color:var(--navy)}
.interactive-card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.small-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--aqua-deep);margin-bottom:9px}
.interactive-card h3{font-size:1.06rem;line-height:1.4;margin-bottom:10px}
.interactive-card-body>p:not(.small-label){font-size:.8rem;color:var(--muted);line-height:1.85;margin-bottom:20px;flex:1}
.text-link{font-weight:700;font-size:.84rem;display:inline-block}
.coming-soon{font-size:.7rem;color:var(--muted);padding-top:13px;border-top:1px solid var(--line)}
.interactive-card .text-link{padding-top:11px;border-top:1px solid var(--line);display:flex;justify-content:space-between}
.empty-results{text-align:center;padding:50px 0}
.empty-results p{margin:10px 0 20px;color:var(--muted)}
.show-more-wrap{text-align:center;margin-top:36px}
.collection-note{background:var(--bg-soft);border-top:1px solid var(--line);padding:55px 0}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.note-grid h2{font-size:1.7rem;max-width:20ch}
.note-grid p:not(.overline){color:var(--muted);margin-bottom:18px;font-size:.93rem}
.detail-head{padding:28px 0 34px;background:linear-gradient(120deg,#f3faff,#fff)}
.detail-heading{display:flex;justify-content:space-between;gap:25px;align-items:center}
.detail-heading h1{font-size:clamp(2.3rem,4vw,3.3rem)}
.detail-heading .lead{margin:17px 0 22px;font-size:1.05rem}
.back-link{white-space:nowrap;align-self:start;margin-top:40px}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px}
.detail-tags span{background:#eaf5fa;border:1px solid #d9eaf2;color:var(--aqua-deep);padding:5px 12px;border-radius:30px;font-size:.7rem;font-weight:600}
.experience-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:45px;align-items:start;padding-top:10px}
.viewer-shell{padding:0;border:1px solid #d7e3ea;border-radius:16px;overflow:hidden;background:#f5f8fa}
.viewer-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;background:#fff;border-bottom:1px solid var(--line)}
.viewer-heading h2{font-size:.85rem;margin:0;letter-spacing:0}
.viewer-badge{font-size:.6rem;font-weight:800;color:var(--aqua-deep);letter-spacing:.1em;background:var(--aqua-light);padding:4px 9px;border-radius:20px}
.viewer-stage{position:relative;height:480px;background:radial-gradient(ellipse at 50% 35%,#fff,#e5eef1)}
.viewer-poster{position:absolute;inset:0;z-index:2;background:#d9dddd}
.viewer-poster img{width:100%;height:100%;object-fit:contain}
.load-model{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);white-space:nowrap}
.load-model:hover{transform:translateX(-50%) translateY(-2px)}
.load-model:disabled{cursor:wait;opacity:.8}
#model-mount,model-viewer{width:100%;height:100%;display:block}
model-viewer{--progress-bar-color:var(--aqua-deep);--poster-color:transparent;touch-action:pan-y}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:#fff;flex-wrap:wrap}
.viewer-toolbar>div{display:flex;gap:6px}
.viewer-toolbar button{border:1px solid #d8e3ec;background:#fff;border-radius:8px;min-width:40px;min-height:40px;padding:7px 10px;color:var(--navy);font-size:.73rem}
.viewer-toolbar>div button{font-size:1.15rem}
.viewer-toolbar button:hover{background:var(--aqua-light)}
.viewer-status{font-size:.7rem;color:var(--muted);padding:11px 18px;text-align:center;border-top:1px solid var(--line);background:#fff;margin:0}
.model-note{font-size:.7rem;color:var(--muted);line-height:1.7;margin:12px 4px 0}
.interaction-intro{padding-top:25px}
.interaction-intro h2{font-size:1.8rem;margin-bottom:18px}
.interaction-intro>p:not(.overline){font-size:.9rem;color:var(--muted);margin-bottom:16px;line-height:1.9}
.quick-facts{margin:25px 0}
.quick-facts>div{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;border-top:1px solid var(--line);padding:12px 0;font-size:.73rem}
.quick-facts dt{color:var(--muted)}
.quick-facts dd{font-weight:700;color:var(--navy)}
.interaction-intro .btn{font-size:.85rem}
.detail-jump-links{display:flex;gap:28px;flex-wrap:wrap;padding:25px 0;margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.detail-jump-links a{font-size:.77rem;font-weight:700}
.interactives-page section[id]{scroll-margin-top:100px}
.how-section{padding:60px 0}
.how-section h2{font-size:1.95rem}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:30px}
.step-number{display:block;font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--aqua-deep);margin-bottom:16px;padding-top:17px;border-top:2px solid #bce4f6}
.steps-grid h3{font-size:1rem}
.steps-grid p{color:var(--muted);font-size:.87rem;line-height:1.85}
.perspective-section{padding:40px;background:var(--bg-soft);border:1px solid var(--line);border-radius:18px}
.section-side-heading{display:flex;justify-content:space-between;gap:40px;align-items:center;margin-bottom:20px}
.section-side-heading h2{font-size:1.7rem}
.section-side-heading>p{font-size:.82rem;max-width:42ch;color:var(--muted)}
.perspective-button{display:block;position:relative;border:0;background:#dadedf;width:100%;border-radius:12px;overflow:hidden}
.perspective-button img{width:100%;max-height:680px;object-fit:contain}
.perspective-button>span{position:absolute;bottom:20px;right:20px;background:#fff;border-radius:30px;padding:10px 16px;color:var(--navy);font-size:.75rem;font-weight:700}
.perspective-section figcaption{font-size:.7rem;color:var(--muted);margin-top:14px}
.learning-section{display:grid;grid-template-columns:1fr 1fr;gap:75px;padding:70px 0}
.learning-section h2{font-size:2rem}
.learning-section p{font-size:.9rem;color:var(--muted);line-height:1.9}
.learning-section>div>p:not(.overline){max-width:45ch;margin-top:20px}
.learning-list article{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.learning-list article:last-child{margin:0;padding:0;border:0}
.learning-list h3{font-size:1rem}
.planning-section{display:grid;grid-template-columns:1.6fr 1fr;gap:70px;border-top:1px solid var(--line);padding:60px 0}
.planning-section h2{font-size:1.8rem}
.planning-section>div>p:not(.overline){font-size:.9rem;color:var(--muted);margin:18px 0;line-height:1.9}
.discovery-prompt{background:#eaf6fc;border-radius:16px;padding:30px;align-self:center}
.discovery-prompt p{font-size:1.4rem;line-height:1.6;color:var(--navy);font-weight:700;margin:20px 0}
.discovery-prompt>span:last-child{font-size:.75rem;color:var(--muted)}
.sample-related{padding:15px 0 65px}
.sample-related h2{font-size:1.8rem}
.related-concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:25px}
.related-concepts a{border-radius:12px;overflow:hidden;border:1px solid var(--line);color:var(--navy);font-weight:700;font-size:.85rem}
.related-concepts img{aspect-ratio:1.35;object-fit:cover;width:100%}
.related-concepts span{display:flex;justify-content:space-between;gap:10px;padding:18px}
.interactive-sequence{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;border-top:1px solid var(--line);padding:26px 0 42px}
.interactive-sequence a{padding:12px 0;color:var(--navy)}
.interactive-sequence small,.interactive-sequence strong{display:block}
.interactive-sequence small{color:var(--aqua-deep);font-size:.7rem;margin-bottom:6px}
.interactive-sequence strong{font-size:.95rem}
.interactive-sequence a:last-child{text-align:right}
.interactive-sequence .sequence-count{text-align:center;font-size:.75rem;color:var(--muted)}
.sequence-count span{display:block;font-size:.65rem}
@media(max-width:640px){.interactive-sequence{gap:14px;grid-template-columns:1fr 1fr}.interactive-sequence .sequence-count{grid-column:1/-1;grid-row:2}.interactive-sequence strong{font-size:.8rem}.interactive-sequence small{font-size:.63rem}}
.render-dialog{margin:auto;border:0;border-radius:16px;padding:20px;width:min(850px,94vw);max-height:94dvh;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg)}
.render-dialog::backdrop{background:#04162cd9;backdrop-filter:blur(4px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.dialog-top h2{font-size:1rem;margin:0}
.dialog-top button{border:1px solid var(--line);border-radius:8px;padding:8px 14px;background:#fff;min-height:42px}
.render-dialog img{max-height:calc(94dvh - 130px);width:100%;object-fit:contain;border-radius:8px;background:#dde1e1}
.render-dialog>p{font-size:.7rem;color:var(--muted);margin-top:10px}
body.render-open,body.viewer-open{overflow:hidden}
.viewer-shell.expanded{position:fixed;inset:20px;z-index:1000;display:flex;flex-direction:column;box-shadow:0 0 0 100vmax #071f3ddd;background:#f3f8fb}
.viewer-shell.expanded .viewer-stage{flex:1;height:auto;min-height:0}
.viewer-shell.expanded .viewer-heading,.viewer-shell.expanded .viewer-toolbar,.viewer-shell.expanded .viewer-status{flex-shrink:0}
@media(max-width:1100px){.interactives-page .nav{gap:15px}.catalogue-hero-grid{gap:30px}.experience-layout{gap:28px}.viewer-stage{height:420px}.hero-facts{gap:20px}}
@media(max-width:900px){.catalogue-hero-grid{grid-template-columns:1fr 1fr;gap:25px}.catalogue-hero h1{font-size:2.45rem}.interactive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.experience-layout{grid-template-columns:1fr}.interaction-intro{padding:5px 0 0;max-width:70ch}.viewer-stage{height:530px}.quick-facts{max-width:440px}.collection-heading{align-items:start}.planning-section{gap:35px}}
@media(max-width:640px){.catalogue-hero{padding:22px 0 32px}.catalogue-hero-grid{grid-template-columns:1fr;gap:28px}.catalogue-hero h1{font-size:2.5rem}.hero-facts{padding-top:20px;margin-top:25px}.featured-render>img{aspect-ratio:1.1}.collection-section{padding:42px 0}.collection-heading,.section-side-heading{display:block}.collection-heading>p,.section-side-heading>p{margin-top:14px}.collection-heading h2{font-size:1.6rem}.search-row{display:block}.search-row #result-count{margin-top:12px}.filter-list{gap:7px}.filter-chip{padding:7px 12px}.interactive-grid{gap:18px;grid-template-columns:1fr}.interactive-card-image img{aspect-ratio:1.25}.note-grid{grid-template-columns:1fr;gap:18px}.detail-heading{display:block}.back-link{margin:0 0 20px}.detail-head{padding-bottom:25px}.detail-heading .lead{font-size:.95rem}.viewer-stage{height:360px}.viewer-heading{padding:14px}.viewer-toolbar{padding:10px}.viewer-toolbar button{font-size:.67rem;padding:6px 8px}.detail-jump-links{gap:13px 20px}.steps-grid{grid-template-columns:1fr;gap:20px}.how-section{padding:40px 0}.how-section h2{font-size:1.6rem}.steps-grid .step-number{margin-bottom:10px}.perspective-section{padding:22px 16px}.perspective-button img{max-height:none}.perspective-button>span{right:12px;bottom:12px;padding:7px 12px}.learning-section,.planning-section{grid-template-columns:1fr;gap:30px;padding:40px 0}.learning-section h2,.planning-section h2{font-size:1.7rem}.related-concepts{grid-template-columns:1fr}.related-concepts img{aspect-ratio:1.5}.sample-related h2{font-size:1.6rem}.viewer-shell.expanded{inset:8px}.dialog-top h2{font-size:.85rem}.render-dialog{padding:14px}}