*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#f0f4ff,#e0e7ff);color:#374151;line-height:1.6}#app,body{min-height:100vh}#app{padding:2rem 1rem}.container{max-width:1200px;margin:0 auto}.species-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:2rem;justify-items:center}.species-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);transition:all .3s ease;width:100%;max-width:550px;border:1px solid #e5e7eb}.species-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08)}.card-header{padding:1.5rem;text-align:center;border-bottom:1px solid #e5e7eb}.species-title{color:#1e293b;font-size:1.5rem;font-weight:600;margin:0}.card-content{padding:1.5rem}.figure-section{margin-bottom:1.5rem}.figure-link{display:block;text-decoration:none}.figure-container{position:relative;width:100%;padding-top:10px;padding-bottom:10px;height:300px;border-radius:12px;overflow:hidden;background:#f8fafc;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb}.species-figure{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;transition:transform .3s ease}.figure-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(99,102,241,.85);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.figure-container:hover .figure-overlay{opacity:1}.figure-container:hover .species-figure{transform:scale(1.05)}.view-details{color:#fff;font-weight:600;font-size:1rem}.description-section{margin-bottom:1.5rem;padding:1rem;background:#f8fafc;border-radius:8px;border-left:4px solid #6366f1}.description-text{color:#6b7280;font-size:.9rem;line-height:1.5;margin:0}.tissue-title{font-size:1.2rem;font-weight:600;color:#4b5563;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #e5e7eb}.tissue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;max-height:300px;overflow-y:auto;padding-right:.5rem}.tissue-grid::-webkit-scrollbar{width:4px}.tissue-grid::-webkit-scrollbar-track{background:#f1f5f9;border-radius:2px}.tissue-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.tissue-grid::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tissue-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.75rem;border-radius:8px;background:#f8fafc;transition:all .2s ease;cursor:pointer;border:1px solid #e5e7eb}.tissue-item:hover{background:#f1f5f9;transform:translateY(-2px);border-color:#d1d5db}.tissue-icon-wrapper{width:40px;height:40px;margin-bottom:.5rem;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.1);border:1px solid #e5e7eb}.tissue-icon{width:24px;height:24px}.tissue-name{font-size:.75rem;font-weight:500;color:#6b7280;line-height:1.2}@media (max-width:768px){.species-grid{grid-template-columns:1fr;gap:1.5rem}.card-content{padding:1rem}.tissue-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.figure-container{height:250px}}