@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css";:root{--primary-color:#6366f1;--bg-gradient:linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--ball-purple:#9333ea;--ball-blue:#3b82f6;--ball-red:#ef4444;--ball-gray:#6b7280;--ball-green:#10b981}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:#fff;justify-content:center;align-items:center;min-height:100vh;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;display:flex}#app{justify-content:center;width:100%;padding:20px;display:flex}.glass-container{-webkit-backdrop-filter:blur(16px);text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:24px;width:100%;max-width:500px;padding:40px;animation:1s ease-out fadeIn;box-shadow:0 25px 50px -12px #00000080}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.machine-image-wrapper{justify-content:center;width:100%;margin-bottom:20px;display:flex}.machine-image{border-radius:50%;width:160px;height:auto;animation:4s ease-in-out infinite float;box-shadow:0 0 30px #a855f780}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}h1{background:linear-gradient(90deg,#a855f7,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:2rem;font-weight:800}.subtitle{color:#94a3b8;margin-bottom:30px;font-size:1rem}.monitor{background:#0000004d;border-radius:16px;justify-content:center;align-items:center;min-height:120px;margin-bottom:30px;padding:20px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 4px 6px #0000004d}.placeholder-text{color:#64748b;font-size:1rem;transition:opacity .3s}.placeholder-text.hidden{opacity:0;pointer-events:none}.balls-container{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;display:flex}.ball{color:#fff;text-shadow:1px 1px 2px #00000080;opacity:0;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.25rem;font-weight:800;animation:.6s cubic-bezier(.175,.885,.32,1.275) forwards popIn;display:flex;transform:scale(0);box-shadow:inset -5px -5px 10px #0000004d,inset 5px 5px 10px #fff6,0 10px 15px -3px #00000080}@keyframes popIn{0%{opacity:0;transform:scale(0)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.color-purple{background:radial-gradient(circle at 30% 30%, #c084fc, var(--ball-purple))}.color-blue{background:radial-gradient(circle at 30% 30%, #60a5fa, var(--ball-blue))}.color-red{background:radial-gradient(circle at 30% 30%, #f87171, var(--ball-red))}.color-gray{background:radial-gradient(circle at 30% 30%, #9ca3af, var(--ball-gray))}.color-green{background:radial-gradient(circle at 30% 30%, #34d399, var(--ball-green))}.glow-on-hover{color:#fff;background:var(--primary-color);cursor:pointer;z-index:0;letter-spacing:1px;border:none;border-radius:12px;outline:none;width:100%;padding:16px;font-size:1.1rem;font-weight:600;transition:all .3s;position:relative;overflow:hidden}.glow-on-hover:before{content:"";z-index:-1;filter:blur(5px);opacity:0;background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red) 0 0/400%;border-radius:12px;width:calc(100% + 4px);height:calc(100% + 4px);transition:opacity .3s ease-in-out;animation:20s linear infinite glowing;position:absolute;top:-2px;left:-2px}.glow-on-hover:active{color:#fff;transform:scale(.98)}.glow-on-hover:hover:before{opacity:1}.glow-on-hover:after{z-index:-1;content:"";background:var(--primary-color);border-radius:12px;width:100%;height:100%;position:absolute;top:0;left:0}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}to{background-position:0 0}}@media (width<=480px){.glass-container{padding:30px 20px}.ball{width:42px;height:42px;font-size:1.1rem}}