/* Two real sections. The gesture director holds only the authored animation stops. */
.system-page #content{padding-top:var(--header-height)}
.system-page .system-story,.system-page .filter-story{height:calc(100svh - var(--header-height));position:relative}
.system-page .system-stage{position:relative;top:0;height:100%}
.system-page .frame-vignette{--fade-bottom:12px!important;--fade-top:0px!important;--fade-side:6px!important}
.system-page .frame-vignette:before{background:linear-gradient(0deg,#fff,transparent)}
.system-page .system-live-status{font-size:clamp(9px,1vw,13px);letter-spacing:.18em}
.system-page .system-live-lamp{width:8px;height:8px}
.system-page .connection-chip{box-shadow:0 6px 20px color-mix(in srgb, var(--primary-dark) 2.353%, transparent)}
.system-page .scene-tag{box-shadow:0 6px 20px color-mix(in srgb, var(--primary-dark) 2.353%, transparent)}
.system-page #filter-stage{--charcoal:var(--text-dark);position:relative;height:100%;overflow:hidden;background:var(--charcoal);color:var(--brand-tint);isolation:isolate}
.filter-topline{position:absolute;top:25px;left:var(--side);right:var(--side);display:flex;justify-content:space-between;color:var(--text-muted);font-size:9px;letter-spacing:.2em;z-index:3}
.filter-copy{position:absolute;top:69px;left:var(--side);right:var(--side);z-index:4;pointer-events:none;text-align:center}
.filter-copy .story-kicker{font-size:8px;letter-spacing:.2em;color:var(--text-muted);margin-bottom:12px}
.filter-copy h2{font-size:clamp(30px,3vw,46px);line-height:1.1;letter-spacing:-.04em;font-weight:430;margin:0 0 12px;text-wrap:balance}
.filter-copy h2 em{font-style:normal;color:var(--primary)}
.filter-copy>p:last-child{font-size:12px;line-height:1.6;color:var(--text-muted);max-width:600px;margin:0 auto}
#filter-canvas{position:absolute;inset:0;width:100%;height:100%}
.filter-picture{position:absolute;pointer-events:none}
#filter-diagram{width:100%;height:100%;overflow:visible}
.diagram-labels text{fill:var(--text-muted);font-family:inherit;font-size:14px;letter-spacing:2px}
.water-route{stroke:var(--primary);stroke-width:8;stroke-linecap:round}
.water-glow{stroke:var(--primary);stroke-width:20;opacity:.2;stroke-linecap:round}
.water-spark{stroke:var(--bg-gray);stroke-width:3;stroke-dasharray:2 52;stroke-linecap:round}
.filter-material{transition:opacity .25s}
.filter-detail{position:absolute;right:var(--side);top:185px;z-index:4;display:flex;gap:14px;align-items:center;border:1px solid color-mix(in srgb, var(--text-gray) 16.863%, transparent);background:color-mix(in srgb, var(--text-dark) 92.157%, transparent);border-radius:16px;padding:14px 18px;box-shadow:0 12px 30px #0001}
.filter-detail svg{width:84px;height:70px}
.filter-detail small{display:block;font-size:8px;letter-spacing:.13em;color:var(--primary-light);margin-bottom:8px}
.filter-detail span{font-size:12px;color:var(--brand-tint)}
.jug-water{position:absolute;z-index:2;pointer-events:none;mix-blend-mode:normal}
.fill-status{position:absolute;top:175px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;font-size:9px;letter-spacing:.14em;z-index:4;background:color-mix(in srgb, var(--text-dark) 78.824%, transparent);border:1px solid color-mix(in srgb, var(--brand-tint) 13.333%, transparent);border-radius:25px;padding:9px 16px}
.fill-status i{width:5px;height:5px;border-radius:50%;background:var(--primary-light);box-shadow:0 0 10px color-mix(in srgb, var(--primary-light) 26.667%, transparent)}
.fill-status b{font-size:12px;font-weight:400;letter-spacing:0;color:var(--primary-light)}
.water-properties{position:absolute;inset:32% 15% 22%;z-index:4;display:grid;grid-template-columns:140px 140px;justify-content:space-between;align-content:space-between;pointer-events:none}
.water-properties>div{padding:13px 18px;border-left:1px solid color-mix(in srgb, var(--primary) 40.000%, transparent);background:color-mix(in srgb, var(--text-dark) 85.098%, transparent);border-radius:0 12px 12px 0;animation:copy-in .6s ease both}
.water-properties small{font-size:9px;letter-spacing:.16em;color:var(--text-muted);display:block;margin-bottom:7px}
.water-properties strong{font-size:29px;line-height:1;font-weight:400;color:var(--brand-tint);letter-spacing:-.025em;white-space:nowrap}
.water-properties strong span{font-size:12px;color:var(--text-muted);letter-spacing:0}
.water-properties>p{position:absolute;left:0;right:0;bottom:-38px;text-align:center;font-size:8px;letter-spacing:.2em;color:var(--text-muted)}
.filter-bottom{position:absolute;bottom:22px;left:var(--side);right:var(--side);display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:5}
.filter-note{font-size:10px;color:var(--brand-line);min-width:170px}
.filter-note small{display:block;font-size:7px;letter-spacing:.03em;color:var(--text-gray);margin-top:8px}
.filter-steps{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid color-mix(in srgb, var(--brand-line) 12.157%, transparent);border-radius:30px;padding:14px 20px;background:color-mix(in srgb, var(--text-dark) 90.980%, transparent)}
.filter-steps button{padding:6px 0;color:var(--text-gray);background:none;border:0;font-size:10px;white-space:nowrap;cursor:pointer}
.filter-steps button[aria-current]{color:var(--primary-light)}
.filter-steps button.is-done{color:var(--brand-tint)}
.filter-steps span{width:10px;height:1px;background:var(--text-dark)}
.filter-controls{display:flex;gap:8px}
.filter-controls button{border:1px solid color-mix(in srgb, var(--brand-line) 18.824%, transparent);border-radius:50%;background:transparent;color:var(--primary-light);width:34px;height:34px;cursor:pointer;font-size:16px}
.filter-stage button:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.filter-total-progress{height:2px;position:absolute;bottom:0;left:0;right:0;background:var(--text-dark)}
.filter-total-progress span{height:100%;display:block;background:var(--primary);width:0}
.filter-loading,.filter-error{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);padding:15px 22px;background:color-mix(in srgb, var(--text-dark) 90.980%, transparent);border:1px solid color-mix(in srgb, var(--primary-light) 20.000%, transparent);border-radius:18px;font-size:12px;z-index:9;white-space:nowrap}
.filter-error button{display:block;margin:12px auto 0;background:var(--primary-dark);color:#fff;border:0;border-radius:15px;padding:9px 16px}
@media(orientation:portrait){
 .system-page .story-shade{background:linear-gradient(180deg,#fff 0%,#fffffff2 var(--copy-bottom,210px),#ffffff00 calc(var(--copy-bottom,210px) + 28px))}
 .system-page .frame-vignette{--fade-bottom:4px!important;--fade-top:0px!important;--fade-side:0px!important}
 .system-page .pos-caption{bottom:115px}
 .filter-copy{top:67px;left:22px;right:22px}
 .filter-copy h2{font-size:clamp(29px,4.5vw,44px)}
 .filter-copy>p:last-child{font-size:12px;max-width:510px}
 .filter-topline{font-size:8px;top:23px}
 .filter-detail{top:auto;bottom:137px;right:auto;left:50%;transform:translateX(-50%);padding:10px 16px;gap:14px;max-width:90%;white-space:nowrap}
 .filter-detail svg{width:85px;height:65px}
 .filter-detail small{font-size:7px}
 .filter-detail span{font-size:11px}
 .filter-bottom{display:grid;grid-template-columns:1fr auto;gap:14px;bottom:18px}
 .filter-steps{grid-column:1/-1;grid-row:1;justify-self:center;padding:10px 15px;gap:8px}
 .filter-steps button{font-size:9px}
 .filter-steps span{width:8px}
 .filter-note{min-width:0;font-size:9px}.filter-note small{font-size:6px}
 .filter-controls{gap:6px}.filter-controls button{width:28px;height:28px;font-size:14px}
 .fill-status{top:210px;font-size:8px;padding:7px 12px}
 .water-properties{inset:auto 22px 140px;grid-template-columns:repeat(4,1fr);gap:9px}
 .water-properties>div{padding:10px 8px;background:var(--text-dark);min-width:0}
 .water-properties small{font-size:6px;margin-bottom:7px}.water-properties strong{font-size:22px}
 .water-properties strong span{font-size:8px}.water-properties>p{bottom:-30px;font-size:6px}
}
@media(max-width:370px){.filter-steps{padding:9px 12px;gap:6px}.filter-steps button{font-size:8px}.filter-steps span{width:6px}.filter-copy h2{font-size:27px}.filter-copy>p:last-child{font-size:11px}}
@media(orientation:landscape) and (max-height:600px){
 .filter-topline{top:14px;font-size:7px}.filter-copy{top:38px}.filter-copy h2{font-size:26px;margin-bottom:7px}.filter-copy .story-kicker{font-size:6px;margin-bottom:6px}.filter-copy>p:last-child{font-size:10px}
 .filter-detail{top:122px;padding:8px 10px}.filter-detail svg{width:55px;height:45px}.filter-detail small{font-size:6px}.filter-detail span{font-size:9px}
 .filter-bottom{bottom:12px}.filter-note{display:none}.filter-steps{padding:7px 14px}.filter-steps button{font-size:8px}.filter-controls button{width:28px;height:28px}
 .fill-status{top:108px;padding:4px 12px;font-size:7px}.water-properties{inset:35% 15% 22%;grid-template-columns:95px 95px}.water-properties>div{padding:6px 10px}.water-properties strong{font-size:22px}.water-properties small{font-size:6px;margin-bottom:3px}.water-properties>p{bottom:-26px;font-size:6px}
}
@media(orientation:portrait){
 .water-properties{inset:var(--jug-y) 16px auto;height:var(--jug-h);grid-template-columns:83px 83px;gap:8px;align-content:space-between;padding-block:12px}
 .water-properties>div{padding:9px 8px;background:color-mix(in srgb, var(--text-dark) 92.549%, transparent)}.water-properties strong{font-size:20px}.water-properties strong span{font-size:8px}
 .water-properties>p{bottom:-38px}
}
.water-properties>p{width:max-content;max-width:100%;margin-inline:auto;background:color-mix(in srgb, var(--text-dark) 96.078%, transparent);padding:6px 10px;border-radius:12px;color:var(--brand-line)}
/* Blend the supplied charcoal render edges without covering the bottle. */
.filter-picture:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--text-dark),transparent 4%,transparent 97%,var(--text-dark)),linear-gradient(0deg,var(--text-dark),transparent 2%);z-index:3}
@media(orientation:portrait) and (max-height:680px){
 .system-page #door-label{display:none!important}
 .system-page .story-copy{top:55px}.system-page .story-copy h1{font-size:26px}.system-page .story-description{font-size:10px}
 .filter-copy{top:49px}.filter-copy h2{font-size:25px;margin-bottom:8px}.filter-copy .story-kicker{margin-bottom:9px;font-size:6px}.filter-copy>p:last-child{font-size:10px}
 .filter-detail{display:none!important}.fill-status{top:auto;bottom:105px;font-size:7px;padding:5px 10px}
 .water-properties{padding-block:5px;grid-template-columns:75px 75px}.water-properties>div{padding:6px 7px}.water-properties strong{font-size:18px}.water-properties>p{bottom:-28px;padding:4px 7px}
}