@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--color-black:#131313;--color-white:#fff;--color-background:#f4f4f4;--color-accent:#ffde11;--color-gray:#e0e0e0;--color-card-bg:#fff;--color-card-accent:#cad5d6;--color-text-primary:var(--color-black);--color-text-secondary:#0009;--color-text-inverse:var(--color-white);--color-border-light:#ffffff7e;--font-size-xs:.875rem;--font-size-sm:.925rem;--font-size-md:1rem;--font-size-lg:1.6rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-24:1.5rem;--spacing-32:2rem;--radius-sm:8px;--radius-md:18px;--radius-full:9999px;--shadow-sm:#0000001a 0px 4px 12px}body{background-color:var(--color-background);font-family:Inter,sans-serif}button,input,input::placeholder{font-family:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.main{min-height:100%}.container{max-width:1200px;margin:var(--spacing-32) auto;padding-inline:var(--spacing-16)}.cards__container{place-items:stretch center;gap:var(--spacing-24);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-inline:auto;display:grid}.input__container,.buttons__container{margin-block:var(--spacing-32);justify-content:center;align-items:center;gap:var(--spacing-24);display:flex}@keyframes fade-in{0%{opacity:0;filter:blur(14px);transform:translateY(-80px)}to{opacity:1;filter:blur(initial);transform:translateY(initial)}}.card{max-width:400px;min-height:400px;padding:var(--spacing-12);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background-color:var(--color-card-bg);animation:.6s ease-out fade-in;position:relative}.card__id{width:30px;height:30px;top:var(--spacing-24);right:var(--spacing-16);font-size:var(--font-size-md);text-align:center;border-radius:var(--radius-full);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background-color:#ffffff4d;justify-content:center;align-items:center;display:flex;position:absolute;overflow:hidden}.card__image-container{margin-bottom:var(--spacing-8);border:2px solid var(--color-border-light);border-radius:var(--radius-md);background-color:var(--color-card-accent);overflow:hidden}.card__image{object-fit:fill;object-position:center;aspect-ratio:1;max-width:100%;max-height:100%}.card__info{justify-content:space-between;gap:var(--spacing-24);flex-direction:column;display:flex}.card__middle{margin-bottom:var(--spacing-24)}.card__name{text-wrap:pretty;word-break:break-all;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);gap:var(--spacing-16);margin-bottom:var(--spacing-8);color:var(--color-text-primary)}.card__phrase{text-wrap:pretty;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-8);color:var(--color-text-secondary);line-height:1.3em}.card__bottom{bottom:var(--spacing-8);left:var(--spacing-12);justify-content:start;align-items:center;gap:var(--spacing-8);display:flex;position:absolute}.card__gender,.card__age{align-items:center;gap:var(--spacing-8);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-text-secondary);display:flex}.error__container{justify-content:center;align-items:center;gap:var(--spacing-24);flex-direction:column;max-width:800px;min-height:100dvh;margin-inline:auto;display:flex}.error__title{text-align:center;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:red}.button{justify-content:center;align-items:center;gap:var(--spacing-4);padding:var(--spacing-12) var(--spacing-32);background-color:var(--color-accent);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);opacity:.7;border:none;transition:opacity .3s;display:flex}.button:hover{opacity:1}.loading{background-color:var(--color-background);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0}.loading h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.not__found{justify-content:center;align-items:center;gap:var(--spacing-4);text-align:center;min-height:calc(100dvh - 250px);padding:var(--spacing-32);display:flex}.not__found-text{font-size:var(--font-size-md)}.input{height:38px;padding-left:var(--spacing-8);padding-block:var(--spacing-12);border-radius:var(--radius-sm);font-size:var(--font-size-sm);border:2px solid var(--color-gray);outline:none;flex:1;transition:all .3s;display:inline-block}.input:focus{border:2px solid var(--color-accent);box-shadow:var(--shadow-sm)}