@import"https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#app{font-family:Fredoka One,cursive;text-align:center;color:#333;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color .5s ease;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");padding:1rem}.header{margin-bottom:1.5rem;padding:0 1rem}.title{font-size:clamp(1.5rem,5vw,3rem);color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.2);line-height:1.2}.dog-container{position:relative;margin-bottom:2rem;width:100%;max-width:500px}.dog-frame{position:relative;border:clamp(5px,2vw,10px) solid #fff;border-radius:clamp(10px,3vw,20px);box-shadow:0 10px 20px #0003;background:#fff;padding:clamp(10px,3vw,20px);transform:rotate(-3deg);transition:transform .3s ease;width:100%;box-sizing:border-box}.dog-frame:hover{transform:rotate(0) scale(1.02)}.dog-frame img{max-width:100%;height:auto;max-height:60vh;border-radius:10px;display:block;margin:0 auto}.button-container{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:300px;padding:0 1rem}.dog-button{background-color:#ff69b4;color:#fff;border:none;padding:clamp(12px,3vw,15px) clamp(20px,4vw,30px);border-radius:50px;font-size:clamp(1rem,3vw,1.5rem);font-family:Fredoka One,cursive;cursor:pointer;box-shadow:0 5px 15px #0003;transition:all .3s ease;outline:none;width:100%;white-space:nowrap}.dog-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.dog-button:active{transform:translateY(0);box-shadow:0 5px 15px #0003}.spinner{position:absolute;top:50%;left:50%;width:clamp(30px,5vw,50px);height:clamp(30px,5vw,50px);border:clamp(3px,1vw,5px) solid rgba(255,105,180,.3);border-top-color:#ff69b4;border-radius:50%;animation:spin 1s linear infinite;transform:translate(-50%,-50%)}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.confetti{position:absolute;inset:0;background-image:url(https://media.giphy.com/media/26tOZ42Mg6pbTUPHW/giphy.gif);background-size:cover;opacity:.7;pointer-events:none}@media (min-width: 768px){.button-container{flex-direction:row;justify-content:center;align-items:center;max-width:none;gap:1rem}.dog-button{width:auto;min-width:200px}.dog-frame{max-width:400px;margin:0 auto}.dog-frame img{max-height:400px}}