:root{font-size:10px;--color-bg-body:#f4f4f9;--color-bg-panel:#ffffff;--color-btn-bg:#007bff;--color-btn-bg-hover:#0056b3;--color-btn-text:#ffffff;--color-text-header:#007bff;--color-text-separator:#007bff;--border-radius-sm:5px;--border-radius-lg:1rem;--shadow-panel:2px 2px 10px rgba(0, 0, 0, 0.1);--transition-fast:300ms ease;--transition-smooth:300ms ease-in-out;--page-transition-duration:1000ms;--page-transition-easing:ease-in-out}@view-transition{navigation:auto}::view-transition-group(*),::view-transition-group(root),::view-transition-new(*),::view-transition-new(root),::view-transition-old(*),::view-transition-old(root){animation-duration:var(--page-transition-duration);animation-timing-function:var(--page-transition-easing)}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2rem;padding:2rem 0;background-color:var(--color-bg-body);font-family:Helvetica,sans-serif,Arial}.layout{width:95%;max-width:40rem;height:100%;display:flex;flex-direction:column}.layout__header-project{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;margin-bottom:3rem;border-radius:var(--border-radius-lg);font-size:1rem;background-color:var(--color-bg-panel);box-shadow:var(--shadow-panel)}.header__title-project{font-size:2rem;font-weight:700;color:var(--color-text-header);text-align:center}.header__tech-stack{width:100%;display:flex;flex-wrap:wrap;justify-content:space-around;gap:1rem;margin-top:1rem}.tech-item{height:3rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.tech-item--separator{width:.15rem;height:3rem;background-color:var(--color-text-separator)}.tech-icon{width:1.5rem;height:1.5rem;object-fit:contain;transition:transform var(--transition-fast)}.tech-icon:hover{transform:scale(1.1)}.tech-name{font-size:1rem;color:var(--color-text-header);font-weight:500}.container{width:100%;max-width:40rem;padding:3rem;text-align:center;background-color:var(--color-bg-panel);border-radius:var(--border-radius-lg);box-shadow:0 4px 20px rgba(0,0,0,.1)}.header{width:100%;min-height:10rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;color:var(--color-text-header);margin-bottom:1rem;background-color:var(--color-bg-body)}.title{font-size:2rem;font-weight:700;margin-bottom:2rem;color:var(--color-text-header)}.avatar-box{position:relative;display:flex;justify-content:center;align-items:center;width:22rem;height:22rem;margin:2rem auto;border-radius:100%;background-color:#e0e0e0;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1)}.loading{min-width:15rem;padding-left:2rem;text-align:left;white-space:nowrap;font-family:'Courier New',Courier,monospace;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;color:#666}.placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;color:#999;font-style:italic;text-align:center;padding:0 2rem}.avatar-image{display:none;width:100%;height:100%;object-fit:cover}.avatar-image.is-visible{display:block}.avatar-box img{width:100%;height:100%;object-fit:cover}.category-selector{width:100%;padding:1.2rem;margin-top:2rem;border:1px solid #ccc;border-radius:var(--border-radius-sm);font-size:1.4rem;color:#333;background-color:#f9f9f9;cursor:pointer;outline:0}.btn-generate{width:100%;margin-top:2rem;padding:1.2rem 0;font-size:1.6rem;color:var(--color-btn-text);background-color:var(--color-btn-bg);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-smooth)}.btn-generate:hover{background-color:var(--color-btn-bg-hover)}