:root{color:#fff;-webkit-font-smoothing:antialiased;background-color:#050510;font-family:Inter,Pretendard,-apple-system,sans-serif}body{background-image:url(/bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;min-height:100vh;margin:0;animation:30s ease-in-out infinite alternate bgFloat;display:flex;overflow:hidden}@keyframes bgFloat{0%{transform:scale(1.05)translate(0)}50%{transform:scale(1.1)translate(-20px,15px)}to{transform:scale(1.05)translate(20px,-15px)}}#root{box-sizing:border-box;text-align:center;-webkit-backdrop-filter:blur(25px);z-index:10;background:#0f0f1e66;border:1px solid #ffffff26;border-radius:24px;width:100%;max-width:500px;margin:2rem;padding:3rem 2rem;position:relative;box-shadow:0 30px 60px #00000080,inset 0 1px #fff3}h1{background:linear-gradient(90deg,#00f2fe 0%,#4facfe 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 30px #4facfe66;letter-spacing:-1px;-webkit-background-clip:text;margin-top:0;margin-bottom:.5rem;font-size:2.8rem;font-weight:800}p.subtitle{color:#ffffffb3;margin-bottom:3rem;font-size:1.1rem;font-weight:300}.balls-container{perspective:1000px;flex-wrap:wrap;justify-content:center;gap:15px;min-height:70px;margin-bottom:3rem;display:flex}.ball{color:#fff;text-shadow:0 2px 4px #00000080;opacity:0;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:1.6rem;font-weight:800;animation:.8s cubic-bezier(.175,.885,.32,1.275) forwards rollIn;display:flex;position:relative;transform:translateY(50px)rotateX(-90deg)scale(.5)}.ball:after{content:"";pointer-events:none;background:linear-gradient(#fffc,#fff0);border-radius:50%;width:25px;height:15px;position:absolute;top:5px;left:10px;transform:rotate(-30deg)}@keyframes rollIn{to{opacity:1;transform:translateY(0)rotateX(0)scale(1)}}.ball.yellow{background:radial-gradient(circle at 30% 30%,#f1c40f,#d35400);box-shadow:0 10px 20px #f1c40f66,inset -5px -5px 15px #0006}.ball.blue{background:radial-gradient(circle at 30% 30%,#3498db,#2c3e50);box-shadow:0 10px 20px #3498db66,inset -5px -5px 15px #0006}.ball.red{background:radial-gradient(circle at 30% 30%,#e74c3c,#900c3f);box-shadow:0 10px 20px #e74c3c66,inset -5px -5px 15px #0006}.ball.gray{background:radial-gradient(circle at 30% 30%,#bdc3c7,#2c3e50);box-shadow:0 10px 20px #bdc3c74d,inset -5px -5px 15px #0006}.ball.green{background:radial-gradient(circle at 30% 30%,#2ecc71,#145a32);box-shadow:0 10px 20px #2ecc7166,inset -5px -5px 15px #0006}.button-group{flex-direction:column;gap:15px;display:flex}button{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff1a;border-radius:20px;padding:1.2rem 2rem;font-family:inherit;font-size:1.2rem;font-weight:700;transition:all .3s cubic-bezier(.25,.8,.25,1)}button.primary{color:#fff;text-shadow:0 1px 3px #0000004d;background:linear-gradient(135deg,#4facfecc 0%,#00f2fecc 100%);box-shadow:0 8px 32px #00f2fe4d,inset 0 1px #ffffff4d}button.primary:hover{transform:translateY(-3px)scale(1.02);box-shadow:0 15px 40px #00f2fe80,inset 0 1px #fff6}button.primary:active{transform:translateY(1px)}button.secondary{color:#fff;background:#ffffff0d;border:1px solid #fff3}button.secondary:hover{background:#ffffff26;border-color:#fff6}.toast{color:#000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00f2fee6;border-radius:30px;padding:12px 28px;font-size:1rem;font-weight:700;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards slideUp;position:fixed;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00f2fe66}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,30px)scale(.8)}to{opacity:1;transform:translate(-50%)scale(1)}}.placeholder-text{color:#fff6;letter-spacing:1px;margin:auto;font-size:1.2rem;font-weight:300}