.coffee-pot{position:absolute;left:75%;top:38.5%;width:10%;height:17%;padding:0;border:0;border-radius:2px;background:transparent;box-shadow:none}
.coffee-pot:hover{background:#ffe8b508}
.coffee-pot:focus-visible{outline:1px solid #e5c68899;outline-offset:2px;background:#ffe8b508}
.coffee-note{position:absolute;right:5%;top:60%;width:min(280px,76%);padding:22px 28px 20px 20px;color:#594630;background:linear-gradient(105deg,#e9dabc,#f8edcf);box-shadow:1px 5px 14px #0005;transform:rotate(-2deg);z-index:4;animation:coffee-arrive .25s ease both}
.coffee-note[hidden]{display:none}
.coffee-note p{font:clamp(16px,1.8vw,20px)/1.6 'Segoe Print','Bradley Hand','Comic Sans MS',cursive;margin:0}
.coffee-note button{position:absolute;right:2px;top:0;min-width:30px;min-height:30px;padding:2px;border:0;background:transparent;color:#7b674b;font:20px Georgia,serif}
.coffee-note button:hover{background:#a8957112}
.coffee-note button:focus-visible{outline:1px solid #806a47;outline-offset:0}
@keyframes coffee-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.coffee-note{animation:none}}
.paused .coffee-note{animation:none}
@media(max-width:600px){.coffee-note{top:auto;bottom:3%;padding:15px 30px 15px 17px}.coffee-pot{min-width:30px;min-height:36px}}