:root{color-scheme:light only;--bin-green:#4caf50;--bin-blue:#0091ea;--bin-orange:#ff7043;--bin-purple:#9c27b0;--sunny-yellow:#ffea00;--ink:#222;--cloud:hsla(0,0%,100%,.8);--card-bg:#fff;--shadow:rgba(0,0,0,.15);--font-family:"Comic Sans MS","Comic Neue","Baloo 2",cursive}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-family);background:linear-gradient(160deg,#c6ffdd,#fbd786,#f7797d);display:flex;align-items:center;justify-content:center;overflow-x:hidden;color:var(--ink)}.sky{position:fixed;top:0;left:0;width:100%;height:50vh;pointer-events:none;overflow:hidden}.cloud{position:absolute;width:180px;height:80px;background:var(--cloud);border-radius:50%;box-shadow:60px 10px 0 var(--cloud),-40px 10px 0 var(--cloud),20px -20px 0 var(--cloud);animation:floaty 16s linear infinite}.cloud-one{top:10vh;left:-100px}.cloud-two{top:20vh;left:30%;animation-duration:22s}.cloud-three{top:5vh;right:-120px;animation-duration:18s}@keyframes floaty{0%{transform:translateX(-10vw)}50%{transform:translateX(10vw) translateY(4px)}to{transform:translateX(-10vw)}}.stage{padding:4rem 1.5rem;width:min(680px,92vw)}.card,.stage{position:relative}.card{background:var(--card-bg);border-radius:32px;padding:2.5rem 2rem 2rem;box-shadow:0 30px 60px var(--shadow);border:4px solid var(--bin-purple);text-align:center;overflow:hidden}.card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,hsla(0,0%,100%,.65),transparent 70%),radial-gradient(circle at bottom right,hsla(0,0%,100%,.45),transparent 60%);pointer-events:none}.card__footer,.card__header{position:relative;z-index:2}.card__badge{display:inline-block;background:var(--bin-blue);color:#fff;padding:.35rem .75rem;border-radius:999px;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 8px 18px rgba(0,145,234,.35)}.card__title{font-size:clamp(2.1rem,3.5vw,3rem);margin:1rem 0 .5rem}.card__subtitle{margin:0 auto 1.5rem;max-width:46ch;font-size:1.05rem;color:rgba(34,34,34,.85)}.card__bin-display{position:relative;margin:2.5rem auto;height:220px;width:min(440px,100%);border-radius:28px;background:linear-gradient(135deg,rgba(76,175,80,.25),rgba(255,112,67,.2));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:3px dashed var(--bin-green);display:grid;place-items:center;padding:1.5rem;overflow:hidden}.bin-face{font-size:clamp(5rem,8vw,6.5rem);filter:drop-shadow(0 15px 20px rgba(0,0,0,.2));transition:transform .6s ease;z-index:1}.bin-face.shadow{position:absolute;font-size:clamp(6rem,10vw,8rem);color:rgba(0,0,0,.06);filter:blur(1px);transform:translateY(20px) scale(1.1);z-index:0}.bin-message{position:relative;z-index:2;font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:700;color:var(--bin-purple);text-shadow:2px 4px 0 rgba(0,0,0,.1);margin:0;padding:0 1rem}.bin-message--pop{animation:pop .6s ease}@keyframes pop{0%{transform:scale(.9)}40%{transform:scale(1.05)}70%{transform:scale(.98)}to{transform:scale(1)}}.card__footer-note{margin:1rem 0 0;font-size:.95rem;color:rgba(34,34,34,.7)}.refresh-form{margin:0}.refresh-button{position:relative;background:linear-gradient(135deg,var(--bin-green),var(--bin-blue));color:#fff;font-size:1rem;font-weight:700;text-transform:uppercase;border:none;border-radius:999px;padding:.9rem 2.8rem;cursor:pointer;box-shadow:0 18px 28px rgba(0,145,234,.35);transition:transform .3s ease,box-shadow .3s ease}.refresh-button:focus-visible,.refresh-button:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 24px 36px rgba(0,145,234,.4);outline:none}.refresh-button:active{transform:translateY(1px) scale(.98)}.card__footer-note strong{color:var(--bin-orange)}@media (max-width:520px){.card{padding:2rem 1.5rem 1.75rem}.card__bin-display{height:200px}}