.placeholder-image{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f3f4f6;border-radius:.375rem}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#1f2937;line-height:1.5}.container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}.header{background-color:#1e40af;color:#fff;padding:1rem 0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.nav-link{color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:.25rem;transition:background-color .2s}.nav-link:hover{background-color:#ffffff1a}.nav-link.active{background-color:#fff3;font-weight:500}.card{background-color:#fff;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;overflow:hidden;transition:box-shadow .3s ease}.card:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.family-card{display:flex;flex-direction:column;height:100%}.family-image-container{height:200px;overflow:hidden}.family-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease}.family-card:hover .family-image{transform:scale(1.05)}.family-info{padding:1rem;flex-grow:1;display:flex;flex-direction:column}.family-name{font-size:1.125rem;font-weight:600;margin-bottom:.5rem;color:#1e40af}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.family-detail-container{max-width:800px;margin:0 auto}.family-tabs{display:flex;border-bottom:1px solid #e5e7eb;margin-bottom:1.5rem}.family-tab{padding:.75rem 1.5rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease}.family-tab.active{color:#1e40af;border-bottom-color:#1e40af;background-color:#eff6ff}.family-tab:hover:not(.active){color:#4b5563;border-bottom-color:#e5e7eb}.family-tab:disabled{color:#9ca3af;cursor:not-allowed}.info-table{width:100%;border-collapse:collapse}.info-table tr{border-bottom:1px solid #e5e7eb}.info-table td{padding:.75rem 0}.info-table td:first-child{font-weight:500;width:40%}.audio-container{margin:1.5rem 0}audio{width:100%;height:40px}.transcription-container{background-color:#f9fafb;padding:1.5rem;border-radius:.5rem;border:1px solid #e5e7eb;margin-top:1.5rem;max-height:400px;overflow-y:auto;white-space:pre-line}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:.375rem;font-weight:500;transition:all .2s ease;cursor:pointer}.btn-primary{background-color:#1e40af;color:#fff}.btn-primary:hover{background-color:#1e3a8a}.btn-secondary{background-color:#eff6ff;color:#1e40af}.btn-secondary:hover{background-color:#dbeafe}@media (max-width: 768px){.family-tabs{flex-wrap:wrap}.family-tab{flex-grow:1;text-align:center;padding:.5rem}.family-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media (max-width: 640px){.family-grid{grid-template-columns:1fr}}.placeholder-image{background-color:#f3f4f6;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;color:#6b7280;font-size:.875rem;text-align:center;padding:1rem}@media (max-width: 768px){.family-card{width:100%}.tab-content{padding:1rem}}audio{width:100%;height:40px;margin:1rem 0}.transcription-container{max-height:400px;overflow-y:auto;background-color:#f9fafb;padding:1rem;border-radius:.375rem;border:1px solid #e5e7eb;margin-top:1rem;font-size:.875rem;line-height:1.5}.family-tabs{display:flex;border-bottom:1px solid #e5e7eb}.family-tab{padding:.75rem 1.5rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent}.family-tab.active{color:#1d4ed8;border-bottom-color:#1d4ed8;background-color:#eff6ff}.family-tab:hover:not(.active){color:#4b5563}.family-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem}.badge-photo{background-color:#d1fae5;color:#065f46}.badge-audio{background-color:#dbeafe;color:#1e40af}.badge-transcript{background-color:#f3e8ff;color:#6b21a8}
