:root{--storypie-yellow:#F9B300;--storypie-blue:#5C9BFF;--storypie-purple:#854EF2;--storypie-pink:#FF476B;--storypie-orange:#FFB23E;--storypie-green:#277C2C;--storypie-primary:#25458F;--storypie-primary-dark:#1a3e80;--accent-yellow:#F9B300;--accent-blue:#5C9BFF;--accent-purple:#854EF2;--accent-pink:#FF476B;--accent-orange:#FFB23E;--accent-green:rgb(6, 214, 160)}.characters-list-page{min-height:100vh;background-color:var(--storypie-primary);padding:0;margin:0;margin-top:-5px;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;position:relative}@media (max-width:768px){.characters-list-page{margin-top:-18px}}.characters-list-page::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(45deg,var(--storypie-primary),var(--storypie-primary) 10px,var(--storypie-primary-dark) 10px,var(--storypie-primary-dark) 20px);opacity:.8;z-index:0}.character-page-header{position:relative;padding:1.5rem 1rem;z-index:1}.character-page-content{position:relative;max-width:1200px;margin:0 auto}.page-title{color:#fff;font-size:3rem;font-weight:800;margin-bottom:1rem;text-align:center}.page-subtitle{color:rgba(255,255,255,.9);font-size:1.5rem;max-width:700px;margin:0 auto;font-weight:400;text-align:center}.character-grid-container{margin-top:0;position:relative;z-index:5;padding-bottom:2rem}.character-grid{display:grid;grid-template-columns:1fr;gap:32px;justify-items:center;padding:32px 16px;max-width:1200px;margin:0 auto}.character-item{display:flex;flex-direction:column;align-items:center;transition:all .3s ease;position:relative;z-index:2}.character-card{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none;cursor:pointer}.character-image-container{position:relative;width:144px;height:144px;border-radius:50%;background-color:var(--character-color);display:flex;justify-content:center;align-items:center;padding:0;margin-bottom:0;transition:transform .3s ease,box-shadow .3s ease;overflow:hidden;border:5px solid var(--character-color)}.character-image{width:100%;height:100%;object-fit:contain}.character-name-button{background-color:var(--character-color);color:#fff;padding:8px 20px;border-radius:9999px;font-size:18px;font-weight:600;text-align:center;white-space:nowrap;transition:transform .3s ease,box-shadow .3s ease;position:relative;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-top:1rem}.character-color-yellow{--character-color:var(--storypie-yellow)}.character-color-blue{--character-color:var(--storypie-blue)}.character-color-purple{--character-color:var(--storypie-purple)}.character-color-pink{--character-color:var(--storypie-pink)}.character-color-orange{--character-color:var(--storypie-orange)}.character-color-green{--character-color:var(--storypie-green)}.character-card:hover .character-image-container{transform:scale(1.1);box-shadow:0 8px 16px rgba(0,0,0,.12)}.character-card:hover .character-name-button{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,.1)}.character-card:focus{outline:0}.character-card:focus-visible .character-image-container{outline:3px solid var(--character-color);outline-offset:3px}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (min-width:640px){.character-grid{grid-template-columns:repeat(2,1fr);gap:24px}.character-image-container{width:176px;height:176px}}@media (min-width:768px){.character-grid{grid-template-columns:repeat(3,1fr)}.character-image-container{width:208px;height:208px}}@media (min-width:1024px){.character-grid{grid-template-columns:repeat(4,1fr)}}@media (prefers-reduced-motion:reduce){.character-card:hover .character-image-container,.character-card:hover .character-name-button{transform:none}.character-item{transition:none}}