:root{--size:220px;--liquid-color-1:#f7b733;--liquid-color-2:#ff6b6b}.jar-wrap{width:var(--size);height:calc(var(--size)*1.2);justify-content:center;align-items:flex-end;display:flex}.jar{background:linear-gradient(rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,.01) 55%,rgba(255,255,255,.02) 100%),linear-gradient(rgba(230,240,255,.15),rgba(195,220,255,.07));border:1px solid rgba(130,160,200,.18);border-radius:24%/18%;width:55%;height:72%;position:relative;box-shadow:inset 0 2px 12px rgba(255,255,255,.05)}:root:not(.dark) .jar{border:2px solid rgba(80,100,130,.35);box-shadow:inset 0 2px 12px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.08)}.jar:before{content:"";background:linear-gradient(#f6f6f6,#e8e8e8);border:1px solid rgba(130,160,200,.16);border-radius:10px;width:78%;height:16%;position:absolute;top:-12%;left:50%;transform:translate(-50%)}:root:not(.dark) .jar:before{border:1.5px solid rgba(80,100,130,.3)}.jar:after{content:"";opacity:.6;filter:blur(.6px);background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.6));border-radius:6px;width:64%;height:8%;position:absolute;top:-6%;left:50%;transform:translate(-50%)}.highlight{opacity:.9;background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.06));border-radius:50%/60%;width:28%;height:38%;position:absolute;top:6%;left:8%;transform:rotate(-12deg)}.liquid{background:linear-gradient(180deg,var(--liquid-color-1),var(--liquid-color-2));border-radius:12%/10%;height:46%;animation:6s ease-in-out infinite slosh;position:absolute;bottom:8%;left:3%;right:3%}:root:not(.dark) .liquid{border:1px solid rgba(0,0,0,.08)}.label{letter-spacing:.06em;color:#313131;background:rgba(255,255,255,.9);border-radius:6px;justify-content:center;align-items:center;width:56%;height:18%;font-weight:800;display:flex;position:absolute;bottom:30%;left:50%;transform:translate(-50%)}.label small{color:#666;font-size:.6em;display:block}.lid{background:linear-gradient(#f2e0b8,#d0b573);border-radius:8px;width:84%;height:18%;position:absolute;top:-18%;left:50%;transform:translate(-50%)}:root:not(.dark) .lid{border:1.5px solid rgba(100,80,50,.25);box-shadow:0 1px 3px rgba(0,0,0,.1)}.ground{background:radial-gradient(rgba(0,0,0,.18) 0%,rgba(0,0,0,.02) 60%,transparent 100%);border-radius:50%;width:70%;height:6%;position:absolute;bottom:-6%;left:50%;transform:translate(-50%)}.jar-paper-stack{--paper-color:#fff8dc;flex-direction:column;align-items:center;gap:0;width:70%;display:flex;position:absolute;bottom:8%;left:50%;transform:translate(-50%)}.jar-paper-stack .paper{z-index:1;margin-top:-20px;margin-left:10px}.jar-paper-stack .paper:first-child{margin-left:0}.paper{background:var(--paper-color,#fffdf7);opacity:.85;border-radius:4px;width:80%;height:26px;box-shadow:0 1px 2px rgba(0,0,0,.08)}.paper.second{opacity:.9;height:30px;margin-left:20px;transform:rotate(-20deg)}.paper.small{opacity:.9;height:25px;margin-right:10px;transform:rotate(8deg)}.paper.medium{height:30px;margin-right:6px}:root:not(.dark) .paper{border:1px solid rgba(80,80,80,.15);box-shadow:0 1px 2px rgba(0,0,0,.12)}@keyframes slosh{0%{transform:translateY(0)rotate(0)}25%{transform:translateY(-1%)rotate(-1.2deg)}50%{transform:translateY(0)rotate(.6deg)}75%{transform:translateY(-.8%)rotate(-.6deg)}to{transform:translateY(0)rotate(0)}}
.jar-message{letter-spacing:.06em;color:#3c3c3c;background:#fff8dc;border-radius:6px;justify-content:center;align-items:center;width:65%;height:18%;font-weight:700;transition:transform .2s ease-in-out;display:flex;position:absolute;bottom:50%;left:50%;box-shadow:0 1px rgba(0,0,0,.1),inset 0 -6px 12px rgba(0,0,0,.02)}:root:not(.dark) .jar-message{border:1.5px solid rgba(70,70,70,.286);box-shadow:0 1px rgba(0,0,0,.1),inset 0 -6px 12px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.08)}