*{box-sizing:border-box}body{color:#1f2933;background:#f4f6f8;margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}main{max-width:1100px;margin:0 auto;padding:32px 20px}h1{text-align:center;margin-bottom:24px}.app-header{border-bottom:1px solid #e5e7eb;padding:16px 24px}.navigation{justify-content:center;gap:16px;display:flex}.navigation a{color:#4b5563;font-weight:600;text-decoration:none}.navigation a.active{color:#7c3aed;text-decoration:underline}form{background:#fff;border-radius:12px;gap:12px;margin-bottom:24px;padding:20px;display:flex}input{flex:1;padding:10px 12px;font-size:16px}button{cursor:pointer;padding:10px 16px}button:disabled{cursor:not-allowed;opacity:.5}a:focus-visible,button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #a78bfa}.search-section,.results-section{background:#fff;border-radius:12px;margin-bottom:24px;padding:20px}.results-section{min-height:300px}.card-list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;display:grid}.card{background:#fff;border-radius:12px;padding:16px}.card img{border-radius:8px;width:100%}.card h2{margin:12px 0 8px;font-size:20px}.card-link{color:inherit;text-decoration:none;transition:transform .2s;display:block}.bottom-controls{justify-content:space-between;align-items:center;margin-top:24px;display:flex}.bottom-controls>button{margin-left:auto}.pagination{align-items:center;gap:16px;display:flex}.empty-message,.error-message,.loader{text-align:center;background:#fff;border-radius:12px;padding:24px}.error-boundary{text-align:center;background:#fff;border-radius:12px;max-width:600px;margin:80px auto;padding:32px}.content-layout{display:block}.content-layout.with-details{grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:24px;display:grid}.details-section{position:sticky;top:24px}.character-details{background:#faf5ff;border:2px solid #7c3aed;border-radius:12px;padding:24px;position:relative}.character-details h2{padding-right:40px}.character-details__close{background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;text-decoration:none;display:inline-flex;position:absolute;top:12px;right:16px}.character-details__close:before,.character-details__close:after{content:"";background:#4b5563;border-radius:999px;width:16px;height:2px;position:absolute}.character-details__close:before{transform:rotate(45deg)}.character-details__close:after{transform:rotate(-45deg)}.character-details__close:hover,.character-details__close:focus-visible{background:#ede9fe}.character-details__close:hover:before,.character-details__close:hover:after,.character-details__close:focus-visible:before,.character-details__close:focus-visible:after{background:#111827}.character-details img{border-radius:8px;max-width:100%}.about-page,.not-found-page{max-width:none}.not-found-page{justify-content:center;align-items:center;min-height:calc(100vh - 64px);padding:32px;display:flex}.not-found-card{text-align:center;background:#fff;border-radius:24px;width:100%;max-width:520px;padding:48px 32px;box-shadow:0 20px 60px #0f172a1a}.not-found-code{color:#7c3aed;margin:0;font-size:96px;font-weight:800;line-height:1}.not-found-card h1{color:#111827;margin:16px 0 0;font-size:32px}.not-found-description{color:#4b5563;margin:16px auto 32px;font-size:18px;line-height:1.5}.not-found-link,.about-link{color:#fff;background:#7c3aed;border-radius:12px;justify-content:center;align-items:center;min-height:44px;padding:0 24px;font-weight:700;text-decoration:none;display:inline-flex}.not-found-link:hover{background:#6d28d9}@media (width<=900px){.content-layout.with-details{grid-template-columns:1fr}.details-section{position:static}}.about-page{justify-content:center;align-items:center;min-height:calc(100vh - 64px);padding:32px;display:flex}.about-card{background:#fff;border-radius:24px;width:100%;max-width:720px;padding:48px;box-shadow:0 20px 60px #0f172a1a}.about-eyebrow{color:#7c3aed;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-size:14px;font-weight:800}.about-card h1{color:#111827;margin:0;font-size:40px;line-height:1.1}.about-description{color:#4b5563;margin:24px 0;font-size:18px;line-height:1.6}.about-info{background:#f9fafb;border-radius:16px;gap:8px;margin:0 0 32px;padding:20px;display:grid}.about-info p{color:#374151;margin:0;font-size:16px}.about-info span{color:#111827;font-weight:700}.about-link:hover{background:#6d28d9}@media (width<=640px){.about-card{padding:32px 24px}.about-card h1{font-size:32px}}