/* Liquid surfaces are confined to the two interactive product planes. */
.control{background:rgba(10,19,34,.72)}
.control::before{background:radial-gradient(ellipse at 78% 45%,rgba(70,125,204,.24),transparent 66%)}
.control-theatre::before,.control-theatre::after{background:rgba(35,73,126,.22);border-color:rgba(152,191,244,.24)}
.control-theatre::after{background:rgba(16,37,69,.3)}
.project-demo{background:#15243a;border:1px solid rgba(190,218,255,.32);border-top-color:rgba(221,239,255,.6);border-left-color:rgba(190,218,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(207,231,255,.06),0 24px 52px -32px rgba(0,0,0,.68);overflow:hidden}
.demo-head{background:rgba(180,213,255,.065);border-bottom-color:rgba(184,211,249,.18)}
.demo-bottom{border-top-color:rgba(184,211,249,.18)}
.demo-disclaimer{background:rgba(5,15,31,.32)}
.demo-label,.demo-plan>span,.plan-meta,.demo-stats dt,.demo-bottom>div>span,.demo-disclaimer{color:#c8d8ef}
.demo-pause{background:rgba(93,148,223,.13);border-color:#7f9dc4;color:#f7fbff}
.demo-pause:hover{background:rgba(114,171,249,.24)}
.project-demo.is-paused .demo-head{background:rgba(190,165,121,.065)}
.project-demo.is-paused{border-color:rgba(218,193,151,.45)}
.calculator{border-radius:18px;background:#13243c;border:1px solid rgba(195,223,255,.36);border-top-color:rgba(224,242,255,.64);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 56px -38px rgba(0,0,0,.65);overflow:hidden}
.calc-inputs{background:transparent;border:0;border-right:1px solid rgba(184,211,249,.2);border-radius:0}
.calc-result{background:rgba(42,90,160,.2);border:0;border-radius:0;color:#f5f9ff}
.calc-result dl>div{border-top-color:rgba(190,220,255,.2)}
.calc-result dt,.calc-result>span{color:#d3e3fa}.calc-result dd,.calc-total{color:#fff}
.range-labels,.trial-option small{color:#c2d5ef}
.number-box input{border-color:#98b3d8;color:#fff}
.period-control select{background:rgba(17,37,66,.9);border-color:#819fc8;color:#fff}
.project-demo::before,.calculator::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;background:linear-gradient(125deg,rgba(255,255,255,.11),transparent 26%,transparent 72%,rgba(139,186,255,.045));box-shadow:inset 0 0 0 1px rgba(220,239,255,.035)}
.project-demo::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;background:radial-gradient(ellipse 380px 190px at var(--glass-x,15%) var(--glass-y,0%),rgba(213,236,255,.08),transparent 74%);opacity:.7}
.calculator::after{background:radial-gradient(ellipse 420px 210px at var(--glass-x,20%) var(--glass-y,0%),rgba(217,237,255,.07),transparent 72%),linear-gradient(125deg,rgba(255,255,255,.08),transparent 28%,transparent 74%,rgba(140,189,255,.04))}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .project-demo{background:rgba(11,24,45,.72);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
 .calculator{background:rgba(12,27,49,.76);-webkit-backdrop-filter:blur(24px) saturate(135%);backdrop-filter:blur(24px) saturate(135%)}
}
@media(max-width:700px){
 .calc-inputs{border-right:0;border-bottom:1px solid rgba(184,211,249,.2)}
 .project-demo{-webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%)}
 .calculator{-webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%)}
 .project-demo::after{opacity:.45}
}
@media(prefers-reduced-transparency:reduce){
 .project-demo,.calculator{background:#14243d;-webkit-backdrop-filter:none;backdrop-filter:none}
 .calc-result{background:#18345d}.project-demo::before,.project-demo::after,.calculator::after{display:none}
}
@media(forced-colors:active){
 .project-demo,.calculator{background:Canvas;border:1px solid CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 .project-demo::before,.project-demo::after,.calculator::after{display:none}
}