/* START_SECTION:cmc-casecf (INDEX:12) */
.oil-demo{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin:50px 0}.oil-demo h3{font-size:44px}.oil-card{padding:32px;background:#eeefe5;color:#354039;border-radius:20px}.oil-card label{font-weight:700;font-size:17px}.oil-body{display:flex;align-items:center;gap:35px;margin:30px 0}.oil-body output#oil-cups{font:64px/1 var(--display);display:block}.oil-body span{font-size:13px}.oil-card p{color:#354039;font-size:13px}.oil-vessel{position:relative;width:130px;height:180px;border:2px solid #3a40385a;border-top:0;border-radius:4px 4px 25px 25px;overflow:hidden;background:#fff8;flex-shrink:0}.oil-liquid{position:absolute;inset:auto 0 0;height:50%;background:#d8b53c;transition:height .45s;overflow:hidden}.oil-liquid:before{content:'';position:absolute;top:-14px;left:-50%;width:200%;height:30px;background:#f3d970;border-radius:45%;animation:cmc-oil-wave 5s linear infinite}.oil-vessel i{position:absolute;right:0;width:17px;border-top:1px solid #3a403877;top:25%}.oil-vessel i:nth-last-child(2){top:50%}.oil-vessel i:last-child{top:75%}.oil-card input{width:100%;accent-color:#354039;min-height:44px;cursor:pointer}.oil-ends{display:flex;justify-content:space-between;font:11px monospace}.oil-pause{background:transparent;border:1px solid #354039;color:#354039;border-radius:24px;padding:10px 18px;margin-top:20px;cursor:pointer}.oil-card .oil-note{font-size:11px}.oil-demo.is-paused .oil-liquid:before{animation-play-state:paused}.oil-card :focus-visible{outline:3px solid #437b9c;outline-offset:5px}@keyframes cmc-oil-wave{to{transform:rotate(360deg)}}@media(max-width:800px){.oil-demo{grid-template-columns:1fr;gap:25px}.oil-card{padding:22px}.oil-body{gap:24px}.oil-demo h3{font-size:36px}}@media(prefers-reduced-motion:reduce){.oil-liquid{transition:none}}
/* END_SECTION:cmc-casecf */