:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#2b2d42,#1a1a2e);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box;margin:0;padding:0}body{min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}.app{flex-direction:column;align-items:center;gap:2rem;min-height:100vh;padding:2rem 1rem 3rem;display:flex}.header{text-align:center;flex-direction:column;gap:.5rem;display:flex}.header__title{letter-spacing:-.02em;font-size:clamp(2rem,4vw,3.5rem);font-weight:800}.header__subtitle{color:#fff9}.search{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:.75rem;width:min(420px,90vw);padding:.8rem 1.2rem;display:flex;box-shadow:0 40px 60px -40px #7b68eee6}.search__input{color:inherit;background:0 0;border:none;outline:none;flex:1;font-size:1rem}.search__input::placeholder{color:#fff6}.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;width:min(1100px,95vw);display:grid}.card{text-align:center;cursor:pointer;background:radial-gradient(circle at top,#ffffff29,#ffffff0d);border:1px solid #ffffff2e;border-radius:1.2rem;flex-direction:column;align-items:center;gap:.8rem;padding:2.2rem 1.5rem 1.8rem;transition:transform .25s,box-shadow .25s,border .25s;display:flex;position:relative;overflow:hidden}.card:after{content:"";background:radial(circle, #9d7cff2e 0%, transparent 70%);pointer-events:none;position:absolute;inset:0}.card:hover{border-color:#a78bfae6;transform:translateY(-8px)scale(1.01);box-shadow:0 60px 80px -60px #8b5cf6e6}.card__image-wrapper{z-index:1;justify-content:center;align-items:center;width:140px;height:140px;display:flex;position:relative}.card__image{object-fit:contain;filter:drop-shadow(0 40px 60px #6366f166);width:100%;height:100%}.card__name{z-index:1;text-transform:capitalize;font-size:1.25rem;font-weight:700;position:relative}.card__number{z-index:1;color:#ffffff80;font-size:.9rem;position:relative}.card__types{z-index:1;gap:.5rem;display:flex;position:relative}.type-pill{text-transform:capitalize;background:#ffffff29;border:1px solid #ffffff40;border-radius:999px;padding:.4rem .8rem;font-size:.85rem}.status{color:#fff9}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:radial-gradient(circle,#0f172ae6,#0f172afa);justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{text-align:center;background:radial-gradient(circle at top,#a78bfa,#1e1b4be6);border:1px solid #c084fc80;border-radius:1.6rem;flex-direction:column;align-items:center;gap:1rem;width:min(420px,90vw);padding:3rem 2rem 2rem;display:flex;position:relative;box-shadow:0 80px 120px -80px #a78bfae6}.modal__close{color:inherit;cursor:pointer;background:#ffffff1f;border:none;border-radius:999px;width:36px;height:36px;position:absolute;top:1rem;right:1rem}.modal__image{object-fit:contain;filter:drop-shadow(0 60px 80px #8b5cf680);width:200px;height:200px}.modal__name{text-transform:capitalize;font-size:2rem;font-weight:800}.modal__number{color:#ffffff80}.modal__types{gap:.6rem;display:flex}.modal__grid{grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;margin-top:1rem;display:grid}.modal__item{background:#ffffff14;border-radius:1rem;flex-direction:column;gap:.4rem;padding:1rem;display:flex}.modal__label{color:#ffffff80;font-size:.9rem}.modal__value{text-transform:capitalize;font-size:1.4rem;font-weight:700}.preloader{z-index:20;background:radial-gradient(circle at top,#2b2d42,#151523);justify-content:center;align-items:center;transition:opacity .6s,visibility .6s;display:flex;position:fixed;inset:0}.preloader--hidden{opacity:0;visibility:hidden;pointer-events:none}.preloader__content{text-align:center;flex-direction:column;align-items:center;gap:1.2rem;display:flex}.pokeball{width:150px;height:150px;animation:1.2s ease-in-out infinite pokeball-bounce;position:relative}.pokeball__top{background:radial-gradient(circle at top,#ff6b6b,#e03131);border:4px solid #1f1f2b;border-bottom:none;border-radius:75px 75px 0 0;width:150px;height:75px;position:absolute;top:0;left:0}.pokeball__bottom{background:radial-gradient(circle at bottom,#f8f9fa,#dee2e6);border:4px solid #1f1f2b;border-top:none;border-radius:0 0 75px 75px;width:150px;height:75px;position:absolute;bottom:0;left:0}.pokeball__middle{z-index:2;background:#1f1f2b;width:150px;height:16px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.pokeball__button{z-index:3;background:radial-gradient(circle,#f8f9fa 0%,#ced4da 100%);border:4px solid #1f1f2b;border-radius:50%;width:42px;height:42px;animation:1.2s ease-in-out infinite pokeball-pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px #f8f9fa33}.pokeball__button:after{content:"";background:radial-gradient(circle,#fff,#adb5bd);border:2px solid #1f1f2b;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pokeball__shine{filter:blur(.5px);z-index:4;background:radial-gradient(circle,#ffffffe6 0%,#fff6 40%,#0000 70%);border-radius:50%;width:38px;height:38px;position:absolute;top:16px;left:26px;transform:rotate(-25deg)}.preloader__text{letter-spacing:.4em;text-transform:uppercase;color:#ffffffb3;font-size:1rem}.preloader__counter{align-items:baseline;gap:.4rem;font-weight:700;display:flex}.preloader__counter-number{font-variant-numeric:tabular-nums;letter-spacing:-.05em;font-size:clamp(3rem,8vw,5rem)}.preloader__counter-percent{color:#fff9;font-size:clamp(1.6rem,4vw,2.6rem)}.preloader__bar{background:#ffffff1f;border-radius:999px;width:min(260px,70vw);height:6px;overflow:hidden}.preloader__bar-fill{background:linear-gradient(90deg,#ff6b6b,#a78bfa,#22d3ee);width:0;height:100%;animation:3s linear forwards bar-fill}@keyframes pokeball-bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-18px)scale(1.02)}}@keyframes pokeball-pulse{0%,to{box-shadow:0 0 0 6px #f8f9fa33}50%{box-shadow:0 0 0 10px #f8f9fa1f}}@keyframes bar-fill{0%{width:0}to{width:100%}}
